perf(react-aria-components): import from individual package instead of react-aria and react-stately

Author: bhovhannes

eslint.config.mjs

@@ -504,4 +504,19 @@ export default [{
     rules: {
         "react/react-in-jsx-scope": OFF,
     },
-}];
+}, {
+    files: ["packages/react-aria-components/src/**"],
+
+    rules: {
+      "no-restricted-imports": [ERROR, {
+        "name": "react-aria",
+        "message": "Use individual packages from @react-aria scope instead."
+      }, {
+        "name": "react-stately",
+        "message": "Use individual packages from @react-stately scope instead"
+      }, {
+        "name": "react-spectrum",
+        "message": "Use individual packages from @react-spectrum scope instead."
+      }]
+    },
+}];

packages/react-aria-components/package.json

@@ -44,26 +44,97 @@
     "@internationalized/date": "^3.8.2",
     "@internationalized/string": "^3.2.7",
     "@react-aria/autocomplete": "3.0.0-beta.6",
+    "@react-aria/breadcrumbs": "^3.5.27",
+    "@react-aria/button": "^3.14.0",
+    "@react-aria/calendar": "^3.9.0",
+    "@react-aria/checkbox": "^3.16.0",
     "@react-aria/collections": "3.0.0-rc.4",
+    "@react-aria/color": "^3.1.0",
+    "@react-aria/combobox": "^3.13.0",
+    "@react-aria/datepicker": "^3.15.0",
+    "@react-aria/dialog": "^3.5.28",
+    "@react-aria/disclosure": "^3.0.7",
     "@react-aria/dnd": "^3.11.0",
     "@react-aria/focus": "^3.21.0",
+    "@react-aria/gridlist": "^3.13.3",
+    "@react-aria/i18n": "^3.12.11",
     "@react-aria/interactions": "^3.25.4",
+    "@react-aria/link": "^3.8.4",
+    "@react-aria/listbox": "^3.14.7",
     "@react-aria/live-announcer": "^3.4.4",
+    "@react-aria/menu": "^3.19.0",
+    "@react-aria/meter": "^3.4.25",
+    "@react-aria/numberfield": "^3.12.0",
     "@react-aria/overlays": "^3.28.0",
+    "@react-aria/progress": "^3.4.25",
+    "@react-aria/radio": "^3.12.0",
+    "@react-aria/searchfield": "^3.8.7",
+    "@react-aria/select": "^3.16.0",
+    "@react-aria/selection": "^3.25.0",
+    "@react-aria/separator": "^3.4.11",
+    "@react-aria/slider": "^3.8.0",
     "@react-aria/ssr": "^3.9.10",
+    "@react-aria/switch": "^3.7.6",
+    "@react-aria/table": "^3.17.6",
+    "@react-aria/tabs": "^3.10.6",
+    "@react-aria/tag": "^3.7.0",
+    "@react-aria/textfield": "^3.18.0",
+    "@react-aria/toast": "^3.0.6",
     "@react-aria/toolbar": "3.0.0-beta.19",
+    "@react-aria/tooltip": "^3.8.6",
+    "@react-aria/tree": "^3.1.2",
     "@react-aria/utils": "^3.30.0",
     "@react-aria/virtualizer": "^4.1.8",
+    "@react-aria/visually-hidden": "^3.8.26",
     "@react-stately/autocomplete": "3.0.0-beta.3",
+    "@react-stately/calendar": "^3.8.3",
+    "@react-stately/checkbox": "^3.7.0",
+    "@react-stately/collections": "^3.12.6",
+    "@react-stately/color": "^3.9.0",
+    "@react-stately/combobox": "^3.11.0",
+    "@react-stately/datepicker": "^3.15.0",
+    "@react-stately/disclosure": "^3.0.6",
+    "@react-stately/dnd": "^3.6.1",
+    "@react-stately/form": "^3.2.0",
     "@react-stately/layout": "^4.4.0",
+    "@react-stately/list": "^3.12.4",
+    "@react-stately/menu": "^3.9.6",
+    "@react-stately/numberfield": "^3.10.0",
+    "@react-stately/overlays": "^3.6.18",
+    "@react-stately/radio": "^3.11.0",
+    "@react-stately/searchfield": "^3.5.14",
+    "@react-stately/select": "^3.7.0",
     "@react-stately/selection": "^3.20.4",
+    "@react-stately/slider": "^3.7.0",
     "@react-stately/table": "^3.14.4",
+    "@react-stately/tabs": "^3.8.4",
+    "@react-stately/toast": "^3.1.2",
+    "@react-stately/toggle": "^3.9.0",
+    "@react-stately/tooltip": "^3.5.6",
+    "@react-stately/tree": "^3.9.1",
     "@react-stately/utils": "^3.10.8",
     "@react-stately/virtualizer": "^4.4.2",
+    "@react-types/button": "^3.13.0",
+    "@react-types/checkbox": "^3.10.0",
+    "@react-types/color": "^3.1.0",
+    "@react-types/combobox": "^3.13.7",
+    "@react-types/datepicker": "^3.13.0",
+    "@react-types/dialog": "^3.5.20",
     "@react-types/form": "^3.7.14",
     "@react-types/grid": "^3.3.4",
+    "@react-types/listbox": "^3.7.2",
+    "@react-types/numberfield": "^3.8.13",
+    "@react-types/overlays": "^3.9.0",
+    "@react-types/radio": "^3.9.0",
+    "@react-types/searchfield": "^3.6.4",
+    "@react-types/select": "^3.10.0",
     "@react-types/shared": "^3.31.0",
+    "@react-types/slider": "^3.8.0",
+    "@react-types/switch": "^3.5.13",
     "@react-types/table": "^3.13.2",
+    "@react-types/tabs": "^3.3.17",
+    "@react-types/textfield": "^3.12.4",
+    "@react-types/tooltip": "^3.4.19",
     "@swc/helpers": "^0.5.0",
     "client-only": "^0.0.1",
     "react-aria": "^3.42.0",

packages/react-aria-components/src/Breadcrumbs.tsx

@@ -9,14 +9,13 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaBreadcrumbsProps, useBreadcrumbs} from 'react-aria';
+import {AriaBreadcrumbsProps, useBreadcrumbs} from '@react-aria/breadcrumbs';
 import {Collection, CollectionBuilder, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext} from './Collection';
 import {ContextValue, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, Key, Node} from '@react-types/shared';
 import {LinkContext} from './Link';
-import {Node} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 
 export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps, GlobalDOMAttributes<HTMLOListElement> {

packages/react-aria-components/src/Button.tsx

@@ -11,15 +11,7 @@
  */
 
 import {announce} from '@react-aria/live-announcer';
-import {
-  AriaButtonProps,
-  HoverEvents,
-  mergeProps,
-  useButton,
-  useFocusRing,
-  useHover,
-  useId
-} from 'react-aria';
+import {AriaButtonProps, useButton} from '@react-aria/button';
 import {
   ContextValue,
   RenderProps,
@@ -28,10 +20,12 @@ import {
   useRenderProps
 } from './utils';
 import {createHideableComponent} from '@react-aria/collections';
-import {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {GlobalDOMAttributes} from '@react-types/shared';
+import {HoverEvents, useHover} from '@react-aria/interactions';
 import {ProgressBarContext} from './ProgressBar';
 import React, {createContext, ForwardedRef, useEffect, useRef} from 'react';
+import {useFocusRing} from '@react-aria/focus';
 
 export interface ButtonRenderProps {
   /**

packages/react-aria-components/src/Calendar.tsx

@@ -11,27 +11,25 @@
  */
 import {
   AriaCalendarProps,
-  AriaRangeCalendarProps,
-  DateValue,
-  mergeProps,
+  AriaRangeCalendarProps, DateValue,
   useCalendar,
   useCalendarCell,
   useCalendarGrid,
-  useFocusRing,
-  useHover,
-  useLocale,
-  useRangeCalendar,
-  VisuallyHidden
-} from 'react-aria';
+  useRangeCalendar
+} from '@react-aria/calendar';
 import {ButtonContext} from './Button';
 import {CalendarDate, CalendarIdentifier, createCalendar, DateDuration, endOfMonth, Calendar as ICalendar, isSameDay, isSameMonth, isToday} from '@internationalized/date';
-import {CalendarState, RangeCalendarState, useCalendarState, useRangeCalendarState} from 'react-stately';
+import {CalendarState, RangeCalendarState, useCalendarState, useRangeCalendarState} from '@react-stately/calendar';
 import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {DOMAttributes, FocusableElement, forwardRefType, GlobalDOMAttributes, HoverEvents} from '@react-types/shared';
-import {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {HeadingContext} from './RSPContexts';
 import React, {createContext, ForwardedRef, forwardRef, ReactElement, useContext, useRef} from 'react';
 import {TextContext} from './Text';
+import {useFocusRing} from '@react-aria/focus';
+import {useHover} from '@react-aria/interactions';
+import {useLocale} from '@react-aria/i18n';
+import {VisuallyHidden} from '@react-aria/visually-hidden';
 
 export interface CalendarRenderProps {
   /**

packages/react-aria-components/src/Checkbox.tsx

@@ -9,17 +9,22 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaCheckboxGroupProps, AriaCheckboxProps, HoverEvents, mergeProps, useCheckbox, useCheckboxGroup, useCheckboxGroupItem, useFocusRing, useHover, VisuallyHidden} from 'react-aria';
+import {AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';
 import {CheckboxContext} from './RSPContexts';
-import {CheckboxGroupState, useCheckboxGroupState, useToggleState} from 'react-stately';
+import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox';
 import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {FieldErrorContext} from './FieldError';
-import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, HoverEvents, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
 import {TextContext} from './Text';
+import {useCheckbox, useCheckboxGroup, useCheckboxGroupItem} from '@react-aria/checkbox';
+import {useFocusRing} from '@react-aria/focus';
+import {useHover} from '@react-aria/interactions';
+import {useToggleState} from '@react-stately/toggle';
+import {VisuallyHidden} from '@react-aria/visually-hidden';
 
 export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {

packages/react-aria-components/src/Collection.tsx

@@ -9,9 +9,8 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {CollectionBase, DropTargetDelegate, GlobalDOMAttributes, ItemDropTarget, Key, LayoutDelegate, RefObject} from '@react-types/shared';
+import {CollectionBase, DropTargetDelegate, GlobalDOMAttributes, Collection as ICollection, ItemDropTarget, Key, LayoutDelegate, Node, RefObject, SelectionBehavior, SelectionMode, SectionProps as SharedSectionProps} from '@react-types/shared';
 import {createBranchComponent, useCachedChildren} from '@react-aria/collections';
-import {Collection as ICollection, Node, SelectionBehavior, SelectionMode, SectionProps as SharedSectionProps} from 'react-stately';
 import React, {cloneElement, createContext, ForwardedRef, HTMLAttributes, isValidElement, JSX, ReactElement, ReactNode, useContext, useMemo} from 'react';
 import {StyleProps} from './utils';
 

packages/react-aria-components/src/ColorArea.tsx

@@ -1,6 +1,6 @@
-import {AriaColorAreaProps, useColorArea} from 'react-aria';
+import {AriaColorAreaProps, useColorArea} from '@react-aria/color';
 import {ColorAreaContext} from './RSPContexts';
-import {ColorAreaState, useColorAreaState} from 'react-stately';
+import {ColorAreaState, useColorAreaState} from '@react-stately/color';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {GlobalDOMAttributes} from '@react-types/shared';
 import {InternalColorThumbContext} from './ColorThumb';

packages/react-aria-components/src/ColorField.tsx

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaColorFieldProps, useColorChannelField, useColorField, useLocale} from 'react-aria';
-import {ColorChannel, ColorFieldState, ColorSpace, useColorChannelFieldState, useColorFieldState} from 'react-stately';
+import {AriaColorFieldProps, ColorChannel, ColorSpace} from '@react-types/color';
 import {ColorFieldContext} from './RSPContexts';
+import {ColorFieldState, useColorChannelFieldState, useColorFieldState} from '@react-stately/color';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps} from '@react-aria/utils';
 import {GlobalDOMAttributes, InputDOMProps, ValidationResult} from '@react-types/shared';
@@ -22,6 +22,8 @@ import {LabelContext} from './Label';
 import {Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';
 import {TextContext} from './Text';
+import {useColorChannelField, useColorField} from '@react-aria/color';
+import {useLocale} from '@react-aria/i18n';
 
 export interface ColorFieldRenderProps {
   /**
@@ -47,7 +49,7 @@ export interface ColorFieldRenderProps {
 
 export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
-   * The color channel that this field edits. If not provided, 
+   * The color channel that this field edits. If not provided,
    * the color is edited as a hex value.
    */
   channel?: ColorChannel,

packages/react-aria-components/src/ColorPicker.tsx

@@ -10,11 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {Color, ColorPickerState, ColorPickerProps as StatelyColorPickerProps, useColorPickerState} from 'react-stately';
+import {
+  Color,
+  ColorPickerState,
+  ColorPickerProps as StatelyColorPickerProps,
+  useColorPickerState
+} from '@react-stately/color';
 import {ColorAreaContext, ColorFieldContext, ColorSliderContext, ColorWheelContext} from './RSPContexts';
 import {ColorSwatchContext} from './ColorSwatch';
 import {ColorSwatchPickerContext} from './ColorSwatchPicker';
-import {mergeProps} from 'react-aria';
+import {mergeProps} from '@react-aria/utils';
 import {Provider, RenderProps, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils';
 import React, {createContext, JSX} from 'react';