diff --git a/Makefile b/Makefile index ab29913f776..aac34286303 100644 --- a/Makefile +++ b/Makefile @@ -129,7 +129,7 @@ website-production: check-examples: node scripts/extractExamplesS2.mjs - yarn tsc --project dist/docs-examples/tsconfig.json + yarn tsgo --project dist/docs-examples/tsconfig.json starter: cd starters/docs && yarn --no-immutable && yarn up react-aria-components && yarn tsc diff --git a/packages/@react-spectrum/s2/exports/Accordion.ts b/packages/@react-spectrum/s2/exports/Accordion.ts index befdefec5fc..d89962ba323 100644 --- a/packages/@react-spectrum/s2/exports/Accordion.ts +++ b/packages/@react-spectrum/s2/exports/Accordion.ts @@ -1,3 +1,3 @@ export {Accordion, AccordionContext, AccordionItem, AccordionItemHeader, AccordionItemTitle, AccordionItemPanel} from '../src/Accordion'; - export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps, AccordionItemState, AccordionItemRenderProps} from '../src/Accordion'; +export type {Key} from '@react-types/shared'; diff --git a/packages/@react-spectrum/s2/exports/ActionBar.ts b/packages/@react-spectrum/s2/exports/ActionBar.ts index 2397bc14890..7549904b487 100644 --- a/packages/@react-spectrum/s2/exports/ActionBar.ts +++ b/packages/@react-spectrum/s2/exports/ActionBar.ts @@ -1,2 +1,7 @@ export {ActionBar, ActionBarContext} from '../src/ActionBar'; export type {ActionBarProps} from '../src/ActionBar'; + +export {ActionButton} from '../src/ActionButton'; +export type {ActionButtonProps} from '../src/ActionButton'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/ActionButton.ts b/packages/@react-spectrum/s2/exports/ActionButton.ts index 0abeb9443cb..f2dd82df8c3 100644 --- a/packages/@react-spectrum/s2/exports/ActionButton.ts +++ b/packages/@react-spectrum/s2/exports/ActionButton.ts @@ -1,3 +1,8 @@ export {ActionButton, ActionButtonContext} from '../src/ActionButton'; export type {ActionButtonProps} from '../src/ActionButton'; export type {PressEvent} from '@react-types/shared'; + +export {NotificationBadge} from '../src/NotificationBadge'; +export type {NotificationBadgeProps} from '../src/NotificationBadge'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/ActionButtonGroup.ts b/packages/@react-spectrum/s2/exports/ActionButtonGroup.ts index a98d2a7d92d..61ab35d6dfb 100644 --- a/packages/@react-spectrum/s2/exports/ActionButtonGroup.ts +++ b/packages/@react-spectrum/s2/exports/ActionButtonGroup.ts @@ -1,2 +1,7 @@ export {ActionButtonGroup, ActionButtonGroupContext} from '../src/ActionButtonGroup'; export type {ActionButtonGroupProps} from '../src/ActionButtonGroup'; + +export {ActionButton} from '../src/ActionButton'; +export type {ActionButtonProps} from '../src/ActionButton'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/ActionMenu.ts b/packages/@react-spectrum/s2/exports/ActionMenu.ts index f16512aa175..87531bab1cd 100644 --- a/packages/@react-spectrum/s2/exports/ActionMenu.ts +++ b/packages/@react-spectrum/s2/exports/ActionMenu.ts @@ -1,2 +1,13 @@ export {ActionMenu, ActionMenuContext} from '../src/ActionMenu'; export type {ActionMenuProps} from '../src/ActionMenu'; + +export {MenuItem, MenuTrigger, MenuSection, SubmenuTrigger, UnavailableMenuItemTrigger} from '../src/Menu'; +export {Collection} from 'react-aria/Collection'; +export type {MenuTriggerProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps, UnavailableMenuItemTriggerProps} from '../src/Menu'; + +export {ContextualHelpPopover} from '../src/ContextualHelp'; +export type {ContextualHelpPopoverProps} from '../src/ContextualHelp'; + +export {Text, Keyboard, Header, Heading} from '../src/Content'; + +export type {Key} from '@react-types/shared'; diff --git a/packages/@react-spectrum/s2/exports/AlertDialog.ts b/packages/@react-spectrum/s2/exports/AlertDialog.ts index 914706b5def..e2578684b88 100644 --- a/packages/@react-spectrum/s2/exports/AlertDialog.ts +++ b/packages/@react-spectrum/s2/exports/AlertDialog.ts @@ -1,2 +1,8 @@ export {AlertDialog} from '../src/AlertDialog'; export type {AlertDialogProps} from '../src/AlertDialog'; + +export {DialogTrigger} from '../src/DialogTrigger'; +export type {DialogTriggerProps} from '../src/DialogTrigger'; + +export {DialogContainer, useDialogContainer} from '../src/DialogContainer'; +export type {DialogContainerProps, DialogContainerValue} from '../src/DialogContainer'; diff --git a/packages/@react-spectrum/s2/exports/Autocomplete.ts b/packages/@react-spectrum/s2/exports/Autocomplete.ts index 5fa8510259b..289cf895f79 100644 --- a/packages/@react-spectrum/s2/exports/Autocomplete.ts +++ b/packages/@react-spectrum/s2/exports/Autocomplete.ts @@ -1,2 +1,2 @@ -export {Autocomplete} from 'react-aria-components/Autocomplete'; -export type {AutocompleteProps} from 'react-aria-components/Autocomplete'; +export {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +export type {AutocompleteProps, Filter} from 'react-aria-components/Autocomplete'; diff --git a/packages/@react-spectrum/s2/exports/AvatarGroup.ts b/packages/@react-spectrum/s2/exports/AvatarGroup.ts index 835d47c98b6..f8896b475a2 100644 --- a/packages/@react-spectrum/s2/exports/AvatarGroup.ts +++ b/packages/@react-spectrum/s2/exports/AvatarGroup.ts @@ -1,2 +1,5 @@ export {AvatarGroup, AvatarGroupContext} from '../src/AvatarGroup'; export type {AvatarGroupProps} from '../src/AvatarGroup'; + +export {Avatar} from '../src/Avatar'; +export type {AvatarProps} from '../src/Avatar'; diff --git a/packages/@react-spectrum/s2/exports/Badge.ts b/packages/@react-spectrum/s2/exports/Badge.ts index 7298807b43e..9a49f1a2eae 100644 --- a/packages/@react-spectrum/s2/exports/Badge.ts +++ b/packages/@react-spectrum/s2/exports/Badge.ts @@ -1,2 +1,4 @@ export {Badge, BadgeContext} from '../src/Badge'; export type {BadgeProps} from '../src/Badge'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/Breadcrumbs.ts b/packages/@react-spectrum/s2/exports/Breadcrumbs.ts index d40579fea54..d0ccc195ad8 100644 --- a/packages/@react-spectrum/s2/exports/Breadcrumbs.ts +++ b/packages/@react-spectrum/s2/exports/Breadcrumbs.ts @@ -1,2 +1,3 @@ export {Breadcrumbs, Breadcrumb, BreadcrumbsContext} from '../src/Breadcrumbs'; export type {BreadcrumbsProps, BreadcrumbProps} from '../src/Breadcrumbs'; +export type {Key} from '@react-types/shared'; diff --git a/packages/@react-spectrum/s2/exports/Button.ts b/packages/@react-spectrum/s2/exports/Button.ts index b2262fae5b6..36b6368170b 100644 --- a/packages/@react-spectrum/s2/exports/Button.ts +++ b/packages/@react-spectrum/s2/exports/Button.ts @@ -1,3 +1,5 @@ export {Button, ButtonContext} from '../src/Button'; export type {ButtonProps} from '../src/Button'; export type {PressEvent} from '@react-types/shared'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/ButtonGroup.ts b/packages/@react-spectrum/s2/exports/ButtonGroup.ts index 8513c99c3aa..5f2000449e9 100644 --- a/packages/@react-spectrum/s2/exports/ButtonGroup.ts +++ b/packages/@react-spectrum/s2/exports/ButtonGroup.ts @@ -1,2 +1,7 @@ export {ButtonGroup, ButtonGroupContext} from '../src/ButtonGroup'; export type {ButtonGroupProps} from '../src/ButtonGroup'; + +export {Button} from '../src/Button'; +export type {ButtonProps} from '../src/Button'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/Card.ts b/packages/@react-spectrum/s2/exports/Card.ts index bd59a827d10..b921ab5b0f9 100644 --- a/packages/@react-spectrum/s2/exports/Card.ts +++ b/packages/@react-spectrum/s2/exports/Card.ts @@ -1,2 +1,6 @@ export {Card, CardPreview, CollectionCardPreview, AssetCard, UserCard, ProductCard, CardContext} from '../src/Card'; export type {CardProps, CardPreviewProps, AssetCardProps, ProductCardProps, UserCardProps} from '../src/Card'; + +export {Text, Content, Footer} from '../src/Content'; +export {Image} from '../src/Image'; +export type {ImageProps} from '../src/Image'; diff --git a/packages/@react-spectrum/s2/exports/CardView.ts b/packages/@react-spectrum/s2/exports/CardView.ts index d4c2ff777f2..66ea374af0d 100644 --- a/packages/@react-spectrum/s2/exports/CardView.ts +++ b/packages/@react-spectrum/s2/exports/CardView.ts @@ -2,3 +2,13 @@ export {CardView, CardViewContext} from '../src/CardView'; export {Collection} from 'react-aria/Collection'; export type {CardViewProps} from '../src/CardView'; export type {Selection, Key, SelectionMode} from '@react-types/shared'; + +export {SkeletonCollection} from '../src/SkeletonCollection'; +export type {SkeletonCollectionProps} from '../src/SkeletonCollection'; + +export {Card, CardPreview, CollectionCardPreview, AssetCard, UserCard, ProductCard, CardContext} from '../src/Card'; +export type {CardProps, CardPreviewProps, AssetCardProps, ProductCardProps, UserCardProps} from '../src/Card'; + +export {Text, Content, Footer} from '../src/Content'; +export {Image} from '../src/Image'; +export type {ImageProps} from '../src/Image'; diff --git a/packages/@react-spectrum/s2/exports/CheckboxGroup.ts b/packages/@react-spectrum/s2/exports/CheckboxGroup.ts index 25714e834ef..7a56b86817d 100644 --- a/packages/@react-spectrum/s2/exports/CheckboxGroup.ts +++ b/packages/@react-spectrum/s2/exports/CheckboxGroup.ts @@ -1,2 +1,5 @@ export {CheckboxGroup, CheckboxGroupContext} from '../src/CheckboxGroup'; export type {CheckboxGroupProps} from '../src/CheckboxGroup'; + +export {Checkbox} from '../src/Checkbox'; +export type {CheckboxProps} from '../src/Checkbox'; diff --git a/packages/@react-spectrum/s2/exports/ColorSwatchPicker.ts b/packages/@react-spectrum/s2/exports/ColorSwatchPicker.ts index 0cee0a4979e..0bdabe88232 100644 --- a/packages/@react-spectrum/s2/exports/ColorSwatchPicker.ts +++ b/packages/@react-spectrum/s2/exports/ColorSwatchPicker.ts @@ -2,3 +2,6 @@ export {ColorSwatchPicker, ColorSwatchPickerContext} from '../src/ColorSwatchPic export type {ColorSwatchPickerProps} from '../src/ColorSwatchPicker'; export {parseColor, getColorChannels} from 'react-aria-components/ColorSwatchPicker'; export type {ColorSpace, ColorChannel, Color, ColorFormat, ColorAxes, ColorChannelRange} from 'react-aria-components/ColorSwatchPicker'; + +export {ColorSwatch} from '../src/ColorSwatch'; +export type {ColorSwatchProps} from '../src/ColorSwatch'; diff --git a/packages/@react-spectrum/s2/exports/ComboBox.ts b/packages/@react-spectrum/s2/exports/ComboBox.ts index 84ccae6ffe3..f60c5b1644e 100644 --- a/packages/@react-spectrum/s2/exports/ComboBox.ts +++ b/packages/@react-spectrum/s2/exports/ComboBox.ts @@ -1,3 +1,5 @@ export {ComboBox, ComboBoxItem, ComboBoxSection, ComboBoxContext} from '../src/ComboBox'; export type {ComboBoxProps, ComboBoxItemProps, ComboBoxSectionProps} from '../src/ComboBox'; export type {Key} from '@react-types/shared'; + +export {Text, Header, Heading} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/ContextualHelp.ts b/packages/@react-spectrum/s2/exports/ContextualHelp.ts index 64f1db7b5dd..29152c3592c 100644 --- a/packages/@react-spectrum/s2/exports/ContextualHelp.ts +++ b/packages/@react-spectrum/s2/exports/ContextualHelp.ts @@ -1,2 +1,4 @@ export {ContextualHelp, ContextualHelpContext, ContextualHelpPopover} from '../src/ContextualHelp'; export type {ContextualHelpProps, ContextualHelpStyleProps, ContextualHelpPopoverProps} from '../src/ContextualHelp'; + +export {Heading, Content, Footer} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/CustomDialog.ts b/packages/@react-spectrum/s2/exports/CustomDialog.ts index 90aad9001b4..f81e4143e2c 100644 --- a/packages/@react-spectrum/s2/exports/CustomDialog.ts +++ b/packages/@react-spectrum/s2/exports/CustomDialog.ts @@ -1,2 +1,13 @@ export {CustomDialog} from '../src/CustomDialog'; export type {CustomDialogProps} from '../src/CustomDialog'; + +export {DialogTrigger} from '../src/DialogTrigger'; +export type {DialogTriggerProps} from '../src/DialogTrigger'; + +export {DialogContainer, useDialogContainer} from '../src/DialogContainer'; +export type {DialogContainerProps, DialogContainerValue} from '../src/DialogContainer'; + +export {CloseButton} from '../src/CloseButton'; +export type {CloseButtonProps} from '../src/CloseButton'; + +export {Heading} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/DateRangePicker.ts b/packages/@react-spectrum/s2/exports/DateRangePicker.ts index afc94d56c4a..0b306ff7ccb 100644 --- a/packages/@react-spectrum/s2/exports/DateRangePicker.ts +++ b/packages/@react-spectrum/s2/exports/DateRangePicker.ts @@ -1,3 +1,4 @@ export {DateRangePicker, DateRangePickerContext} from '../src/DateRangePicker'; export type {DateRangePickerProps} from '../src/DateRangePicker'; export type {DateValue, DateRange} from 'react-aria-components/DateRangePicker'; +export type {RangeValue} from '@react-types/shared'; diff --git a/packages/@react-spectrum/s2/exports/Dialog.ts b/packages/@react-spectrum/s2/exports/Dialog.ts index 9f7497af1b1..ecb0921080e 100644 --- a/packages/@react-spectrum/s2/exports/Dialog.ts +++ b/packages/@react-spectrum/s2/exports/Dialog.ts @@ -1,2 +1,19 @@ export {Dialog} from '../src/Dialog'; export type {DialogProps} from '../src/Dialog'; + +export {DialogTrigger} from '../src/DialogTrigger'; +export type {DialogTriggerProps} from '../src/DialogTrigger'; + +export {DialogContainer, useDialogContainer} from '../src/DialogContainer'; +export type {DialogContainerProps, DialogContainerValue} from '../src/DialogContainer'; + +export {Heading, Header, Content, Footer} from '../src/Content'; + +export {ButtonGroup, ButtonGroupContext} from '../src/ButtonGroup'; +export type {ButtonGroupProps} from '../src/ButtonGroup'; + +export {Button} from '../src/Button'; +export type {ButtonProps} from '../src/Button'; + +export {Image, ImageContext} from '../src/Image'; +export type {ImageProps} from '../src/Image'; diff --git a/packages/@react-spectrum/s2/exports/DialogContainer.ts b/packages/@react-spectrum/s2/exports/DialogContainer.ts deleted file mode 100644 index 112b1c8cc6c..00000000000 --- a/packages/@react-spectrum/s2/exports/DialogContainer.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {DialogContainer, useDialogContainer} from '../src/DialogContainer'; -export type {DialogContainerProps, DialogContainerValue} from '../src/DialogContainer'; diff --git a/packages/@react-spectrum/s2/exports/DialogTrigger.ts b/packages/@react-spectrum/s2/exports/DialogTrigger.ts deleted file mode 100644 index c4211c6f998..00000000000 --- a/packages/@react-spectrum/s2/exports/DialogTrigger.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {DialogTrigger} from '../src/DialogTrigger'; -export type {DialogTriggerProps} from '../src/DialogTrigger'; diff --git a/packages/@react-spectrum/s2/exports/DropZone.ts b/packages/@react-spectrum/s2/exports/DropZone.ts index 35355ef944e..f1057efb91c 100644 --- a/packages/@react-spectrum/s2/exports/DropZone.ts +++ b/packages/@react-spectrum/s2/exports/DropZone.ts @@ -1,2 +1,5 @@ export {DropZone, DropZoneContext} from '../src/DropZone'; export type {DropZoneProps} from '../src/DropZone'; + +export {IllustratedMessage} from '../src/IllustratedMessage'; +export {Heading, Content} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/FullscreenDialog.ts b/packages/@react-spectrum/s2/exports/FullscreenDialog.ts index 6c3dca8b2f7..45bb455b2a7 100644 --- a/packages/@react-spectrum/s2/exports/FullscreenDialog.ts +++ b/packages/@react-spectrum/s2/exports/FullscreenDialog.ts @@ -1,2 +1,16 @@ export {FullscreenDialog} from '../src/FullscreenDialog'; export type {FullscreenDialogProps} from '../src/FullscreenDialog'; + +export {DialogTrigger} from '../src/DialogTrigger'; +export type {DialogTriggerProps} from '../src/DialogTrigger'; + +export {DialogContainer, useDialogContainer} from '../src/DialogContainer'; +export type {DialogContainerProps, DialogContainerValue} from '../src/DialogContainer'; + +export {Heading, Header, Content} from '../src/Content'; + +export {ButtonGroup, ButtonGroupContext} from '../src/ButtonGroup'; +export type {ButtonGroupProps} from '../src/ButtonGroup'; + +export {Button} from '../src/Button'; +export type {ButtonProps} from '../src/Button'; diff --git a/packages/@react-spectrum/s2/exports/IllustratedMessage.ts b/packages/@react-spectrum/s2/exports/IllustratedMessage.ts index e5a98530130..5b97ed76899 100644 --- a/packages/@react-spectrum/s2/exports/IllustratedMessage.ts +++ b/packages/@react-spectrum/s2/exports/IllustratedMessage.ts @@ -1 +1,2 @@ export {IllustratedMessage, IllustratedMessageContext} from '../src/IllustratedMessage'; +export {Heading, Content} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/InlineAlert.ts b/packages/@react-spectrum/s2/exports/InlineAlert.ts index 82c99739eff..40c1f8bf8fb 100644 --- a/packages/@react-spectrum/s2/exports/InlineAlert.ts +++ b/packages/@react-spectrum/s2/exports/InlineAlert.ts @@ -1,2 +1,4 @@ export {InlineAlert, InlineAlertContext} from '../src/InlineAlert'; export type {InlineAlertProps} from '../src/InlineAlert'; + +export {Heading, Content} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/LinkButton.ts b/packages/@react-spectrum/s2/exports/LinkButton.ts index c4bbb1daf13..d1f89e93339 100644 --- a/packages/@react-spectrum/s2/exports/LinkButton.ts +++ b/packages/@react-spectrum/s2/exports/LinkButton.ts @@ -1,3 +1,5 @@ export {LinkButton, LinkButtonContext} from '../src/Button'; export type {LinkButtonProps} from '../src/Button'; export type {PressEvent} from '@react-types/shared'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/ListView.ts b/packages/@react-spectrum/s2/exports/ListView.ts index 9659015e22e..43194cd57ba 100644 --- a/packages/@react-spectrum/s2/exports/ListView.ts +++ b/packages/@react-spectrum/s2/exports/ListView.ts @@ -2,3 +2,5 @@ export {ListView, ListViewContext, ListViewItem} from '../src/ListView'; export {Collection} from 'react-aria/Collection'; export type {ListViewProps, ListViewItemProps} from '../src/ListView'; export type {Selection, Key, SelectionMode} from '@react-types/shared'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/Menu.ts b/packages/@react-spectrum/s2/exports/Menu.ts index 8350e036683..9c50dc2e6c5 100644 --- a/packages/@react-spectrum/s2/exports/Menu.ts +++ b/packages/@react-spectrum/s2/exports/Menu.ts @@ -2,3 +2,8 @@ export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, UnavailableMen export {Collection} from 'react-aria/Collection'; export type {MenuTriggerProps, MenuProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps, UnavailableMenuItemTriggerProps} from '../src/Menu'; export type {Selection, Key, SelectionMode} from '@react-types/shared'; + +export {ContextualHelpPopover} from '../src/ContextualHelp'; +export type {ContextualHelpPopoverProps} from '../src/ContextualHelp'; + +export {Text, Keyboard, Heading, Header, Content} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/NotificationBadge.ts b/packages/@react-spectrum/s2/exports/NotificationBadge.ts deleted file mode 100644 index 92e53b9c02e..00000000000 --- a/packages/@react-spectrum/s2/exports/NotificationBadge.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {NotificationBadge, NotificationBadgeContext} from '../src/NotificationBadge'; -export type {NotificationBadgeProps} from '../src/NotificationBadge'; diff --git a/packages/@react-spectrum/s2/exports/Picker.ts b/packages/@react-spectrum/s2/exports/Picker.ts index f4d79b32bb9..288b9419dba 100644 --- a/packages/@react-spectrum/s2/exports/Picker.ts +++ b/packages/@react-spectrum/s2/exports/Picker.ts @@ -2,3 +2,5 @@ export {Picker, PickerItem, PickerSection, PickerContext} from '../src/Picker'; export {Collection} from 'react-aria/Collection'; export type {PickerProps, PickerItemProps, PickerSectionProps} from '../src/Picker'; export type {Key} from '@react-types/shared'; + +export {Text, Header, Heading} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/Popover.ts b/packages/@react-spectrum/s2/exports/Popover.ts index 7df90b737f5..992a301ff0b 100644 --- a/packages/@react-spectrum/s2/exports/Popover.ts +++ b/packages/@react-spectrum/s2/exports/Popover.ts @@ -1,2 +1,5 @@ export {Popover} from '../src/Popover'; export type {PopoverProps} from '../src/Popover'; + +export {DialogTrigger} from '../src/DialogTrigger'; +export type {DialogTriggerProps} from '../src/DialogTrigger'; diff --git a/packages/@react-spectrum/s2/exports/SegmentedControl.ts b/packages/@react-spectrum/s2/exports/SegmentedControl.ts index 2a4907174a3..7653357488b 100644 --- a/packages/@react-spectrum/s2/exports/SegmentedControl.ts +++ b/packages/@react-spectrum/s2/exports/SegmentedControl.ts @@ -1,2 +1,5 @@ export {SegmentedControl, SegmentedControlItem, SegmentedControlContext} from '../src/SegmentedControl'; export type {SegmentedControlProps, SegmentedControlItemProps} from '../src/SegmentedControl'; + +export {Text} from '../src/Content'; +export type {Key} from '@react-types/shared'; diff --git a/packages/@react-spectrum/s2/exports/SelectBoxGroup.ts b/packages/@react-spectrum/s2/exports/SelectBoxGroup.ts index e0a8a7e1327..d3492c33cba 100644 --- a/packages/@react-spectrum/s2/exports/SelectBoxGroup.ts +++ b/packages/@react-spectrum/s2/exports/SelectBoxGroup.ts @@ -1,2 +1,5 @@ export {SelectBox, SelectBoxGroup, SelectBoxGroupContext} from '../src/SelectBoxGroup'; export type {SelectBoxProps, SelectBoxGroupProps} from '../src/SelectBoxGroup'; + +export {Text} from '../src/Content'; +export type {Key, Selection} from '@react-types/shared'; diff --git a/packages/@react-spectrum/s2/exports/SkeletonCollection.ts b/packages/@react-spectrum/s2/exports/SkeletonCollection.ts deleted file mode 100644 index 8e56efe6e2b..00000000000 --- a/packages/@react-spectrum/s2/exports/SkeletonCollection.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {SkeletonCollection} from '../src/SkeletonCollection'; -export type {SkeletonCollectionProps} from '../src/SkeletonCollection'; diff --git a/packages/@react-spectrum/s2/exports/Tabs.ts b/packages/@react-spectrum/s2/exports/Tabs.ts index 73c75694716..1b4fce7a2b8 100644 --- a/packages/@react-spectrum/s2/exports/Tabs.ts +++ b/packages/@react-spectrum/s2/exports/Tabs.ts @@ -1,2 +1,7 @@ export {Tabs, TabList, Tab, TabPanel, TabsContext} from '../src/Tabs'; export type {TabsProps, TabProps, TabListProps, TabPanelProps} from '../src/Tabs'; + +export {Collection} from 'react-aria/Collection'; +export {Text} from '../src/Content'; + +export type {Key} from '@react-types/shared'; diff --git a/packages/@react-spectrum/s2/exports/TagGroup.ts b/packages/@react-spectrum/s2/exports/TagGroup.ts index 6770239dcd8..8805c50fa69 100644 --- a/packages/@react-spectrum/s2/exports/TagGroup.ts +++ b/packages/@react-spectrum/s2/exports/TagGroup.ts @@ -2,3 +2,5 @@ export {TagGroup, Tag, TagGroupContext} from '../src/TagGroup'; export {Collection} from 'react-aria/Collection'; export type {TagGroupProps, TagProps} from '../src/TagGroup'; export type {Selection, Key, SelectionMode} from '@react-types/shared'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/ToggleButton.ts b/packages/@react-spectrum/s2/exports/ToggleButton.ts index 4aa1d10b3f4..665eb683611 100644 --- a/packages/@react-spectrum/s2/exports/ToggleButton.ts +++ b/packages/@react-spectrum/s2/exports/ToggleButton.ts @@ -1,2 +1,4 @@ export {ToggleButton, ToggleButtonContext} from '../src/ToggleButton'; export type {ToggleButtonProps} from '../src/ToggleButton'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/ToggleButtonGroup.ts b/packages/@react-spectrum/s2/exports/ToggleButtonGroup.ts index 99ead5cf82f..320b0020213 100644 --- a/packages/@react-spectrum/s2/exports/ToggleButtonGroup.ts +++ b/packages/@react-spectrum/s2/exports/ToggleButtonGroup.ts @@ -1,2 +1,8 @@ export {ToggleButtonGroup, ToggleButtonGroupContext} from '../src/ToggleButtonGroup'; export type {ToggleButtonGroupProps} from '../src/ToggleButtonGroup'; + +export {ToggleButton} from '../src/ToggleButton'; +export type {ToggleButtonProps} from '../src/ToggleButton'; + +export {Text} from '../src/Content'; +export type {Selection, Key, SelectionMode} from '@react-types/shared'; diff --git a/packages/@react-spectrum/s2/exports/TreeView.ts b/packages/@react-spectrum/s2/exports/TreeView.ts index ffcc43ae504..fba2c845ebb 100644 --- a/packages/@react-spectrum/s2/exports/TreeView.ts +++ b/packages/@react-spectrum/s2/exports/TreeView.ts @@ -2,3 +2,5 @@ export {TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem} from export {Collection} from 'react-aria/Collection'; export type {TreeViewProps, TreeViewItemProps, TreeViewItemContentProps, TreeViewLoadMoreItemProps} from '../src/TreeView'; export type {Selection, Key, SelectionMode} from '@react-types/shared'; + +export {Text} from '../src/Content'; diff --git a/packages/@react-spectrum/s2/exports/index.ts b/packages/@react-spectrum/s2/exports/index.ts index 12f88fb6585..57dbf4fdde1 100644 --- a/packages/@react-spectrum/s2/exports/index.ts +++ b/packages/@react-spectrum/s2/exports/index.ts @@ -179,7 +179,7 @@ export type {DateValue, DateRange} from 'react-aria-components/RangeCalendar'; export type {TimeValue} from 'react-aria-components/TimeField'; export type {FileTriggerProps} from 'react-aria-components/FileTrigger'; export type {TooltipTriggerComponentProps as TooltipTriggerProps} from 'react-aria-components/Tooltip'; -export type {SortDescriptor, SortDirection, Key, Selection, RouterConfig, PressEvent} from '@react-types/shared'; +export type {SortDescriptor, SortDirection, Key, Selection, RouterConfig, PressEvent, RangeValue} from '@react-types/shared'; export type {ColorSpace, ColorChannel, Color, ColorFormat, ColorAxes, ColorChannelRange} from 'react-stately/Color'; export type {ListOptions, ListData} from 'react-stately/useListData'; export type {TreeOptions, TreeData} from 'react-stately/useTreeData'; diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx index 6bd173bcbca..ce5f7439872 100644 --- a/packages/@react-spectrum/s2/src/Popover.tsx +++ b/packages/@react-spectrum/s2/src/Popover.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {Popover as AriaPopover, PopoverProps as AriaPopoverProps} from 'react-aria-components/Popover'; +import {Popover as AriaPopover, PopoverProps as AriaPopoverProps, OverlayArrow} from 'react-aria-components/Popover'; import {ColorSchemeContext} from './Provider'; import {composeRenderProps} from 'react-aria-components/composeRenderProps'; import {ContextValue} from 'react-aria-components/slots'; @@ -21,7 +21,6 @@ import {getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} fr import {lightDark, setColorScheme, style} from '../style' with {type: 'macro'}; import {mergeRefs} from 'react-aria/mergeRefs'; import {mergeStyles} from '../style/runtime'; -import {OverlayArrow} from 'react-aria-components/OverlayArrow'; import {StyleString} from '../style/types' with {type: 'macro'}; import {useDOMRef} from './useDOMRef'; import {useLocale} from 'react-aria/I18nProvider'; diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index a12b5d885fb..2b06f0a06d0 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -13,9 +13,7 @@ import {ActionButton, ActionButtonContext} from './ActionButton'; import {baseColor, centerPadding, colorMix, focusRing, fontRelative, lightDark, setColorScheme, space, style} from '../style' with {type: 'macro'}; import {Button, ButtonContext} from 'react-aria-components/Button'; - import {ButtonGroup} from './ButtonGroup'; - import { CellRenderProps, ColumnRenderProps, @@ -35,7 +33,6 @@ import { ResizableTableContainer, RowRenderProps, TableBodyRenderProps, - TableLayout, TableLoadMoreItem, TableRenderProps, useTableOptions @@ -69,7 +66,7 @@ import {CheckboxContext as RACCheckboxContext} from 'react-aria-components/Check // @ts-ignore import {Popover as RACPopover} from 'react-aria-components/Popover'; import React, {createContext, CSSProperties, FormEvent, FormHTMLAttributes, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; -import {Rect, Virtualizer} from 'react-aria-components/Virtualizer'; +import {Rect, TableLayout, Virtualizer} from 'react-aria-components/Virtualizer'; import SortDownArrow from '../s2wf-icons/S2_Icon_SortDown_20_N.svg'; import SortUpArrow from '../s2wf-icons/S2_Icon_SortUp_20_N.svg'; import {Button as SpectrumButton} from './Button'; diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx index cc68092035b..4acd23ea38a 100644 --- a/packages/@react-spectrum/s2/src/Tooltip.tsx +++ b/packages/@react-spectrum/s2/src/Tooltip.tsx @@ -15,14 +15,13 @@ import { TooltipProps as AriaTooltipProps, TooltipTrigger as AriaTooltipTrigger, TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps, + OverlayArrow, TooltipRenderProps } from 'react-aria-components/Tooltip'; - import {centerPadding, setColorScheme, style} from '../style' with {type: 'macro'}; import {ColorScheme, ColorSchemeContext} from './Provider'; import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react'; import {DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared'; -import {OverlayArrow} from 'react-aria-components/OverlayArrow'; import {UnsafeStyles} from './style-utils' with {type: 'macro'}; import {useDOMRef} from './useDOMRef'; import {useLocale} from 'react-aria/I18nProvider'; diff --git a/packages/dev/codemods/src/use-subpaths/src/codemod.test.ts b/packages/dev/codemods/src/use-subpaths/src/codemod.test.ts index 6bc5c8f3aee..beb9e0fdc0d 100644 --- a/packages/dev/codemods/src/use-subpaths/src/codemod.test.ts +++ b/packages/dev/codemods/src/use-subpaths/src/codemod.test.ts @@ -126,3 +126,23 @@ import { Button, ButtonContext } from 'react-aria-components/Button'; import type { ButtonProps } from 'react-aria-components/Button'; ` ); + +test( + 'sorts exact match candidates first', + ` +import {Group, GroupProps} from 'react-aria-components'; +`, + ` +import { Group, GroupProps } from 'react-aria-components/Group'; +` +); + +test( + 'combines related imports', + ` +import {RangeCalendar, CalendarCell, Heading} from 'react-aria-components'; +`, + ` +import { RangeCalendar, CalendarCell, Heading } from 'react-aria-components/RangeCalendar'; +` +); diff --git a/packages/dev/codemods/src/use-subpaths/src/codemod.ts b/packages/dev/codemods/src/use-subpaths/src/codemod.ts index dcb60540049..e5a8b99622e 100644 --- a/packages/dev/codemods/src/use-subpaths/src/codemod.ts +++ b/packages/dev/codemods/src/use-subpaths/src/codemod.ts @@ -121,7 +121,7 @@ export default function transformer(file: FileInfo, api: API): string { let importedName = getImportedName(specifier); let candidates = sourceMap[importedName]; - if (candidates && candidates.length === 1) { + if (candidates && (candidates.length === 1 || candidates[0] === `${source}/${importedName}`)) { let importKind = node.importKind || 'value'; uniqueSources.add(importKind + ':' + candidates[0]); } diff --git a/packages/dev/codemods/src/use-subpaths/src/specifiers.ts b/packages/dev/codemods/src/use-subpaths/src/specifiers.ts index 05098bf1d77..13888cdbf9e 100644 --- a/packages/dev/codemods/src/use-subpaths/src/specifiers.ts +++ b/packages/dev/codemods/src/use-subpaths/src/specifiers.ts @@ -49,7 +49,8 @@ export function getSpecifiersByPackage(from: string) { plugins: ['typescript'] }); - let importSpecifier = `${pkg}/${entry.name.replace(/(\.d)?\.ts$/, '')}`; + let subpath = entry.name.replace(/(\.d)?\.ts$/, ''); + let importSpecifier = `${pkg}/${subpath}`; for (let node of ast.program.body) { if (node.type === 'ExportNamedDeclaration') { for (let specifier of node.specifiers) { @@ -59,7 +60,11 @@ export function getSpecifiersByPackage(from: string) { let exported = specifier.exported.type === 'Identifier' ? specifier.exported.name : specifier.exported.value; exports[exported] ??= []; - exports[exported].push(importSpecifier); + if (exported.startsWith(subpath)) { + exports[exported].unshift(importSpecifier); + } else { + exports[exported].push(importSpecifier); + } } } } diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx index d214ba55e9f..2400f9026bd 100644 --- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx @@ -18,10 +18,10 @@ export const description = 'Allows users to search or filter a list of suggestio ```tsx render docs={vanillaDocs.exports.CommandPalette} links={vanillaDocs.links} props={['disableAutoFocusFirst']} type="vanilla" files={["starters/docs/src/CommandPalette.tsx", "starters/docs/src/CommandPalette.css"]} "use client"; import {CommandPalette} from 'vanilla-starter/CommandPalette'; - import {MenuItem} from 'vanilla-starter/Menu'; + import {MenuItem, Text} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {FilePlus2, FolderPlus, User, UserPen, CircleDotDashed, ChartPie, Tag} from 'lucide-react'; - import {DialogTrigger, Text} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Dialog'; import {useState} from 'react'; function Example(props) { @@ -79,7 +79,7 @@ export const description = 'Allows users to search or filter a list of suggestio import {CommandPalette} from 'tailwind-starter/CommandPalette'; import {MenuItem} from 'tailwind-starter/Menu'; import {Button} from 'tailwind-starter/Button'; - import {DialogTrigger} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Dialog'; import {useState} from 'react'; function Example(props) { @@ -120,7 +120,7 @@ Autocomplete filters a collection component using a [TextField](TextField) or [S ```tsx render docs={docs.exports.Autocomplete} links={docs.links} props={['disableVirtualFocus', 'disableAutoFocusFirst']} type="vanilla" wide "use client"; -import {Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {SearchField} from 'vanilla-starter/SearchField'; @@ -160,7 +160,8 @@ function Example(props) { ```tsx render docs={docs.exports.Autocomplete} links={docs.links} props={['disableVirtualFocus', 'disableAutoFocusFirst']} type="vanilla" wide "use client"; -import {Select, Label, SelectValue, Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +import {Select, Label, SelectValue} from 'react-aria-components/Select'; import {Button} from 'vanilla-starter/Button'; import {SelectListBox, SelectItem} from 'vanilla-starter/Select'; import {Popover} from 'vanilla-starter/Popover'; @@ -257,7 +258,7 @@ function Example(props) { ```tsx render docs={docs.exports.Autocomplete} links={docs.links} props={['disableVirtualFocus', 'disableAutoFocusFirst']} type="vanilla" wide "use client"; -import {Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; import {SearchField} from 'vanilla-starter/SearchField'; @@ -294,7 +295,7 @@ function Example(props) { ```tsx render "use client"; -import {Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; import {TagGroup, Tag} from 'vanilla-starter/TagGroup'; import {SearchField} from 'vanilla-starter/SearchField'; @@ -331,8 +332,8 @@ function Example() { ```tsx render "use client"; -import {Autocomplete, Text, useFilter} from 'react-aria-components'; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; import {SearchField} from 'vanilla-starter/SearchField'; ///- begin collapse -/// @@ -596,7 +597,8 @@ function Example() { ```tsx render "use client"; -import {Autocomplete, ResizableTableContainer, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +import {ResizableTableContainer} from 'react-aria-components/Table'; import {Table, TableHeader, TableBody, Column, Row, Cell} from 'vanilla-starter/Table'; import {SearchField} from 'vanilla-starter/SearchField'; @@ -1059,7 +1061,8 @@ When the `filter` prop is not set, the items are controlled. This example uses a ```tsx render "use client"; -import {Autocomplete, useAsyncList} from 'react-aria-components'; +import {Autocomplete} from 'react-aria-components/Autocomplete'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; import {SearchField} from 'vanilla-starter/SearchField'; import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx index 178ac2cd18b..9a270196acc 100644 --- a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx @@ -45,7 +45,7 @@ export const description = 'Displays a hierarchy of links to the current page or ```tsx render "use client"; -import type {Key} from 'react-aria-components'; +import type {Key} from 'react-aria-components/Breadcrumbs'; import {Breadcrumbs, Breadcrumb} from 'vanilla-starter/Breadcrumbs'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx index eefb43a412d..22065cb4fb5 100644 --- a/packages/dev/s2-docs/pages/react-aria/Button.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx @@ -115,7 +115,7 @@ The `Button` component always represents a button semantically. To create a link ```tsx render "use client"; -import {Link} from 'react-aria-components'; +import {Link} from 'react-aria-components/Link'; Adobe diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx index c7173da5ad4..15694bb96ca 100644 --- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx @@ -40,7 +40,7 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t ```tsx render "use client"; import {parseDate, getLocalTimeZone} from '@internationalized/date'; -import {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {Calendar} from 'vanilla-starter/Calendar'; import {useState} from 'react'; @@ -68,7 +68,7 @@ By default, `Calendar` displays the value using the calendar system for the user ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-ca-indian'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {parseDate} from '@internationalized/date'; import {Calendar} from 'vanilla-starter/Calendar'; @@ -172,7 +172,7 @@ Use the `minValue` and `maxValue` props to set the valid date range. The `isDate ```tsx render docs={vanillaDocs.exports.Calendar} links={docs.links} props={['isInvalid', 'errorMessage']} wide "use client"; import {isWeekend, today, getLocalTimeZone} from '@internationalized/date'; -import {useLocale} from 'react-aria-components'; +import {useLocale} from 'react-aria-components/I18nProvider'; import {Calendar} from 'vanilla-starter/Calendar'; function Example(props) { @@ -208,10 +208,10 @@ Set the `visibleDuration` prop and render multiple `CalendarGrid` elements to di ```tsx render docs={docs.exports.Calendar} links={docs.links} props={['visibleDuration', 'pageBehavior', 'firstDayOfWeek']} initialProps={{visibleDuration: {months: 2}}} wide "use client"; -import {Calendar, Heading} from 'react-aria-components'; +import {Calendar, Heading} from 'react-aria-components/Calendar'; import {CalendarGrid, CalendarCell} from 'vanilla-starter/Calendar'; import {Button} from 'vanilla-starter/Button'; -import {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {ChevronLeft, ChevronRight} from 'lucide-react'; // TODO: move this into the starter example. @@ -297,7 +297,7 @@ You can also control the focused date via `CalendarStateContext`. This example s ```tsx render files={['packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx', 'packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx']} "use client"; -import {Calendar} from 'react-aria-components'; +import {Calendar} from 'react-aria-components/Calendar'; import {CalendarGrid, CalendarCell} from 'vanilla-starter/Calendar'; import {MonthDropdown} from './MonthDropdown'; import {YearDropdown} from './YearDropdown'; diff --git a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx index e4fe7c6548b..83e333f1166 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx @@ -42,7 +42,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh ```tsx render "use client"; -import {parseColor} from 'react-aria-components'; +import {parseColor} from 'react-aria-components/ColorArea'; import {ColorArea} from 'vanilla-starter/ColorArea'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx index 6f784772b45..1596d84ea05 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx @@ -42,7 +42,7 @@ Use the `value` or `defaultValue` prop to set the color value, and `onChange` to ```tsx render "use client"; import {ColorField} from 'vanilla-starter/ColorField'; -import {parseColor, type Color} from 'react-aria-components'; +import {parseColor, type Color} from 'react-aria-components/ColorField'; import {useState} from 'react'; function Example() { @@ -68,7 +68,7 @@ By default, ColorField displays a hex value. Set the `colorSpace` and `channel` ```tsx render "use client"; import {ColorField} from 'vanilla-starter/ColorField'; -import {parseColor, type Color} from 'react-aria-components'; +import {parseColor, type Color} from 'react-aria-components/ColorField'; import {useState} from 'react'; function Example() { diff --git a/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx b/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx index 418e3760654..7203218524d 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx @@ -39,7 +39,7 @@ Use the `value` or `defaultValue` prop to set the color value. This may be a str ```tsx render "use client"; -import {parseColor} from 'react-aria-components'; +import {parseColor} from 'react-aria-components/ColorPicker'; import {ColorPicker} from 'vanilla-starter/ColorPicker'; import {useState} from 'react'; @@ -68,8 +68,7 @@ This example uses [ColorSlider](ColorSlider) to allow a user to adjust each chan ```tsx render "use client"; -import type {ColorSpace} from 'react-aria-components'; -import {getColorChannels} from 'react-aria-components'; +import {getColorChannels, type ColorSpace} from 'react-aria-components/ColorPicker'; import {ColorPicker} from 'vanilla-starter/ColorPicker'; import {ColorSlider} from 'vanilla-starter/ColorSlider'; import {Select, SelectItem} from 'vanilla-starter/Select'; @@ -128,9 +127,8 @@ This example uses [ColorField](ColorField) to allow a user to edit the value of ```tsx render "use client"; -import type {ColorSpace} from 'react-aria-components'; +import {getColorChannels, type ColorSpace} from 'react-aria-components/ColorPicker'; import {ColorPicker} from 'vanilla-starter/ColorPicker'; -import {getColorChannels} from 'react-aria-components'; import {ColorArea} from 'vanilla-starter/ColorArea'; import {ColorSlider} from 'vanilla-starter/ColorSlider'; import {Select, SelectItem} from 'vanilla-starter/Select'; diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx index d967b52767c..2ea8ccd7dfc 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx @@ -43,7 +43,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh ```tsx render "use client"; -import {parseColor} from 'react-aria-components'; +import {parseColor} from 'react-aria-components/ColorSlider'; import {ColorSlider} from 'vanilla-starter/ColorSlider'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx index d45c6362078..7d296a4dab4 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx @@ -51,7 +51,7 @@ Use the `value` or `defaultValue` prop to set the selected color, and `onChange` ```tsx render "use client"; import {ColorSwatchPicker, ColorSwatchPickerItem} from 'vanilla-starter/ColorSwatchPicker'; -import {parseColor} from 'react-aria-components'; +import {parseColor} from 'react-aria-components/ColorSwatchPicker'; import {useState} from 'react'; function Example() { diff --git a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx index aada0f8d7ff..9f675ffbc3d 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx @@ -40,7 +40,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh ```tsx render "use client"; -import {parseColor} from 'react-aria-components'; +import {parseColor} from 'react-aria-components/ColorWheel'; import {ColorWheel} from 'vanilla-starter/ColorWheel'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx index cc102cadfcb..e0549f23514 100644 --- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx @@ -59,7 +59,8 @@ The following example shows a dynamic collection of items, grouped into sections ```tsx render "use client"; import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; -import {ListBoxSection, Collection, Header} from 'react-aria-components'; +import {ListBoxSection, Header} from 'vanilla-starter/ListBox'; +import {Collection} from 'react-aria-components/Collection'; function Example() { /*- begin collapse -*/ @@ -113,7 +114,7 @@ Use the `ComboBoxValue` render prop function to display the selected items as a ```tsx render "use client"; -import {ComboBox, ComboBoxValue, Input} from 'react-aria-components'; +import {ComboBox, ComboBoxValue, Input} from 'react-aria-components/ComboBox'; import {ComboBoxListBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; import {Label, FieldButton} from 'vanilla-starter/Form'; import {Popover} from 'vanilla-starter/Popover'; @@ -217,7 +218,7 @@ Use the `defaultValue` or `value` prop to set the selected item. The value corre "use client"; import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; import {useState} from 'react'; -import type {Key} from 'react-aria-components'; +import type {Key} from 'react-aria-components/ComboBox'; function Example() { let [animal, setAnimal] = useState("bison"); @@ -286,7 +287,7 @@ Both `inputValue` and `value` can be controlled simultaneously. However, each in ```tsx render "use client"; -import type {Key} from 'react-aria-components'; +import type {Key} from 'react-aria-components/ComboBox'; import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/DateField.mdx b/packages/dev/s2-docs/pages/react-aria/DateField.mdx index d5de6a46475..1ba68790041 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateField.mdx @@ -42,7 +42,7 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t ```tsx render "use client"; import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date'; -import {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {DateField} from 'vanilla-starter/DateField'; import {useState} from 'react'; @@ -83,7 +83,7 @@ By default, `DateField` displays the value using the calendar system for the use ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-ca-indian'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {parseZonedDateTime} from '@internationalized/date'; import {DateField} from 'vanilla-starter/DateField'; diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx index b46ee2f2464..2e3b34f81fd 100644 --- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx @@ -42,7 +42,7 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t ```tsx render "use client"; import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date'; -import {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {DatePicker} from 'vanilla-starter/DatePicker'; import {useState} from 'react'; @@ -83,7 +83,7 @@ By default, `DatePicker` displays the value using the calendar system for the us ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-ca-indian'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {parseZonedDateTime} from '@internationalized/date'; import {DatePicker} from 'vanilla-starter/DatePicker'; @@ -99,10 +99,10 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h ```tsx render "use client"; import {isWeekend, today, getLocalTimeZone} from '@internationalized/date'; -import {useLocale} from 'react-aria-components'; +import {useLocale} from 'react-aria-components/I18nProvider'; import {DatePicker} from 'vanilla-starter/DatePicker'; import {Button} from 'vanilla-starter/Button'; -import {Form} from 'vanilla-starter/Form';; +import {Form} from 'vanilla-starter/Form'; function Example() { let {locale} = useLocale(); diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx index e9a75d8f029..6019367080a 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx @@ -42,7 +42,8 @@ Use the `value` or `defaultValue` prop to set the selected date range, using obj ```tsx render "use client"; import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date'; -import {useDateFormatter, type RangeValue} from 'react-aria'; +import {type RangeValue} from 'react-aria-components/DateRangePicker'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {DateRangePicker} from 'vanilla-starter/DateRangePicker'; import {useState} from 'react'; @@ -92,7 +93,7 @@ By default, `DateRangePicker` displays the value using the calendar system for t ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-ca-indian'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {parseDate} from '@internationalized/date'; import {DateRangePicker} from 'vanilla-starter/DateRangePicker'; @@ -112,7 +113,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h ```tsx render docs={vanillaDocs.exports.DateRangePicker} links={docs.links} props={['allowsNonContiguousRanges']} wide "use client"; import {isWeekend, today, getLocalTimeZone} from '@internationalized/date'; -import {useLocale} from 'react-aria-components'; +import {useLocale} from 'react-aria-components/I18nProvider'; import {DateRangePicker} from 'vanilla-starter/DateRangePicker'; import {Button} from 'vanilla-starter/Button'; import {Form} from 'vanilla-starter/Form';; diff --git a/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx b/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx index cf44222889e..214ae68b915 100644 --- a/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx @@ -55,7 +55,7 @@ Use the `defaultExpandedKeys` or `expandedKeys` prop to set the expanded items, ```tsx render "use client"; -import type {Key} from 'react-aria-components'; +import type {Key} from 'react-aria-components/DisclosureGroup'; import {DisclosureGroup} from 'vanilla-starter/DisclosureGroup'; import {Disclosure, DisclosureHeader, DisclosurePanel} from 'vanilla-starter/Disclosure'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx index 44634a38340..9cd66179f7e 100644 --- a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx @@ -15,8 +15,7 @@ export const description = 'An area into which one or multiple objects can be dr ```tsx render type="vanilla" files={["starters/docs/src/DropZone.tsx", "starters/docs/src/DropZone.css"]} "use client"; - import {DropZone} from 'vanilla-starter/DropZone'; - import {Text} from 'react-aria-components'; + import {DropZone, Text} from 'vanilla-starter/DropZone'; import {useState} from 'react'; import React from 'react'; @@ -56,8 +55,7 @@ export const description = 'An area into which one or multiple objects can be dr ```tsx render type="tailwind" files={["starters/tailwind/src/DropZone.tsx"]} "use client"; - import {DropZone} from 'tailwind-starter/DropZone'; - import {Text} from 'react-aria-components'; + import {DropZone, Text} from 'tailwind-starter/DropZone'; import {useState} from 'react'; import React from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx index 8dce090e681..fd6477aa166 100644 --- a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx @@ -14,7 +14,7 @@ export const description = 'Allows a user to access the file system with any pre ```tsx render docs={docs.exports.FileTrigger} links={docs.links} props={['acceptedFileTypes', 'allowsMultiple', 'acceptDirectory', 'defaultCamera']} initialProps={{acceptedFileTypes: ['image/*']}} type="vanilla" hideShadcn "use client"; -import {FileTrigger} from 'react-aria-components'; +import {FileTrigger} from 'react-aria-components/FileTrigger'; import {Button} from 'vanilla-starter/Button'; import {useState} from 'react'; @@ -47,7 +47,7 @@ function Example(props) { ```tsx render "use client" -import {Pressable, FileTrigger} from 'react-aria-components'; +import {Pressable, FileTrigger} from 'react-aria-components/FileTrigger'; {/*- begin highlight -*/} diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx index 28a89997092..c9511c40470 100644 --- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx +++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx @@ -23,8 +23,7 @@ export const description = 'Displays a list of interactive items, with support f ```tsx render docs={docs.exports.GridList} links={docs.links} props={['layout', 'selectionMode']} initialProps={{'aria-label': 'Photos', selectionMode: 'multiple', layout: 'grid'}} type="vanilla" files={["starters/docs/src/GridList.tsx", "starters/docs/src/GridList.css"]} "use client"; - import {Text} from 'react-aria-components'; - import {GridList, GridListItem} from 'vanilla-starter/GridList'; + import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; @@ -102,8 +101,7 @@ export const description = 'Displays a list of interactive items, with support f ```tsx render "use client"; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; -import {Text} from 'react-aria-components'; +import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; ///- begin collapse -/// let images = [ @@ -369,10 +367,10 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T ```tsx render "use client"; -import {GridList, GridListItem, GridListLoadMoreItem} from 'vanilla-starter/GridList'; -import {Collection, Text} from 'react-aria-components'; +import {GridList, GridListItem, GridListLoadMoreItem, Text} from 'vanilla-starter/GridList'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; -import {useAsyncList} from '@react-stately/data'; type Item = { id: string; @@ -433,8 +431,7 @@ Use the `href` prop on a `` to create a link. Link interactions va ```tsx render docs={docs.exports.GridList} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Links', selectionMode: 'multiple'}} wide "use client"; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; -import {Text} from 'react-aria-components'; +import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; ///- begin collapse -/// let images = [ @@ -544,8 +541,7 @@ Use the `` component to group options. A `` ele ```tsx render "use client"; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; -import {GridListHeader, GridListSection, Text} from 'react-aria-components'; +import {GridList, GridListItem, GridListHeader, GridListSection, Text} from 'vanilla-starter/GridList'; @@ -118,7 +118,7 @@ Use the `` component to group options. A `
` element may ```tsx render "use client"; -import {ListBox, ListBoxItem, ListBoxSection, Header} from 'react-aria-components'; +import {ListBox, ListBoxItem, ListBoxSection, Header} from 'vanilla-starter/ListBox'; {/*- begin highlight -*/} @@ -152,7 +152,8 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T "use client"; import {ListBox, ListBoxItem, ListBoxLoadMoreItem} from 'vanilla-starter/ListBox'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; -import {Collection, useAsyncList} from 'react-aria-components'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; interface Character { name: string @@ -202,7 +203,7 @@ By default, link items in a ListBox are not selectable, and only perform navigat ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionBehavior']} wide "use client"; -import {ListBox, ListBoxItem} from 'react-aria-components'; +import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; {/*- begin highlight -*/} @@ -230,7 +231,7 @@ By default, links are rendered as an `` element. Use the `render` prop to int ```tsx render hideImports "use client"; -import {ListBox} from 'react-aria-components'; +import {ListBox} from 'vanilla-starter/ListBox'; @@ -195,8 +193,7 @@ Use the `` component to group options. A `
` element may als ```tsx render hideImports "use client"; -import {Header} from 'react-aria-components'; -import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; +import {MenuTrigger, Menu, MenuItem, MenuSection, Header} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; @@ -261,8 +258,7 @@ Separators may be added between menu items or sections in order to create non-la ```tsx render hideImports "use client"; -import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; -import {Separator} from 'react-aria-components'; +import {MenuTrigger, Menu, MenuItem, Separator} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; @@ -323,7 +319,7 @@ Popovers can include additional components as siblings of a menu. This example u ```tsx render "use client"; -import {Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {SearchField} from 'vanilla-starter/SearchField'; @@ -363,7 +359,7 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte ```tsx render docs={docs.exports.Menu} links={docs.links} props={['selectionMode', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide align="start" "use client"; -import type {Selection} from 'react-aria-components'; +import type {Selection} from 'react-aria-components/Menu'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {useState} from 'react'; @@ -401,9 +397,8 @@ Each section in a menu may have independent selection states by passing `selecti ```tsx render hideImports "use client"; -import type {Selection} from 'react-aria-components'; -import {Header} from 'react-aria-components'; -import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; +import type {Selection} from 'react-aria-components/Menu'; +import {MenuTrigger, Menu, MenuItem, MenuSection, Header} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {useState} from 'react'; @@ -451,7 +446,7 @@ function Example() { ```tsx render hideImports "use client"; -import {Pressable} from 'react-aria-components'; +import {Pressable} from 'react-aria-components/Menu'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx index feb0c630070..e13b3048f9d 100644 --- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx @@ -18,9 +18,9 @@ export const description = 'An overlay element which blocks interaction with ele ```tsx render docs={vanillaDocs.exports.Modal} links={vanillaDocs.links} props={['isDismissable', 'isKeyboardDismissDisabled']} type="vanilla" files={["starters/docs/src/Modal.tsx", "starters/docs/src/Modal.css"]} "use client"; - import {DialogTrigger, Heading} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Modal'; import {Modal} from 'vanilla-starter/Modal'; - import {Dialog} from 'vanilla-starter/Dialog'; + import {Dialog, Heading} from 'vanilla-starter/Dialog'; import {Form} from 'vanilla-starter/Form'; import {TextField} from 'vanilla-starter/TextField'; import {Button} from 'vanilla-starter/Button'; @@ -50,9 +50,9 @@ export const description = 'An overlay element which blocks interaction with ele ```tsx render docs={vanillaDocs.exports.Modal} links={vanillaDocs.links} props={['isDismissable', 'isKeyboardDismissDisabled']} type="tailwind" files={["starters/tailwind/src/Modal.tsx"]} "use client"; - import {DialogTrigger, Heading} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Modal'; import {Modal} from 'tailwind-starter/Modal'; - import {Dialog} from 'tailwind-starter/Dialog'; + import {Dialog, Heading} from 'tailwind-starter/Dialog'; import {Form} from 'tailwind-starter/Form'; import {TextField} from 'tailwind-starter/TextField'; import {Button} from 'tailwind-starter/Button'; @@ -87,8 +87,8 @@ Overlays such as trays, drawers, and sheets can be built using a `Modal` with cu ```tsx render type="vanilla" files={["starters/docs/src/Sheet.tsx", "starters/docs/src/Sheet.css"]} "use client"; -import {DialogTrigger, Heading} from 'react-aria-components'; -import {Sheet} from 'vanilla-starter/Sheet'; +import {DialogTrigger} from 'react-aria-components/Modal'; +import {Sheet, Heading} from 'vanilla-starter/Sheet'; import {Button} from 'vanilla-starter/Button'; @@ -108,10 +108,9 @@ Use the `isOpen` prop to show a modal programmatically or mount in a different p ```tsx render "use client"; import {useState} from 'react'; -import {Heading} from 'react-aria-components'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Modal} from 'vanilla-starter/Modal'; -import {Dialog} from 'vanilla-starter/Dialog'; +import {Dialog, Heading} from 'vanilla-starter/Dialog'; import {Button} from 'vanilla-starter/Button'; function Example() { @@ -142,9 +141,9 @@ function Example() { ```tsx render "use client" -import {Pressable, DialogTrigger, Heading} from 'react-aria-components'; +import {Pressable, DialogTrigger} from 'react-aria-components/Modal'; import {Modal} from 'vanilla-starter/Modal'; -import {Dialog} from 'vanilla-starter/Dialog'; +import {Dialog, Heading} from 'vanilla-starter/Dialog'; import {Button} from 'vanilla-starter/Button'; diff --git a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx index 6a20cdb11fe..4979810805e 100644 --- a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx @@ -102,7 +102,7 @@ By default, `NumberField` displays the value using the numbering system for the ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-nu-deva'}} controlOptions={{locale: 'numberingSystem'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {NumberField} from 'vanilla-starter/NumberField'; @@ -118,7 +118,7 @@ Use the `name` prop to submit the raw number value (not a formatted string) to t "use client"; import {NumberField} from 'vanilla-starter/NumberField'; import {Button} from 'vanilla-starter/Button'; -import {Form} from 'vanilla-starter/Form';; +import {Form} from 'vanilla-starter/Form';
diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx index c9b3153c93e..df3cae64dff 100644 --- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx @@ -18,7 +18,7 @@ export const description = 'An overlay element positioned relative to a trigger. ```tsx render docs={vanillaDocs.exports.Popover} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="vanilla" files={["starters/docs/src/Popover.tsx", "starters/docs/src/Popover.css"]} "use client"; - import {DialogTrigger} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Popover'; import {Popover} from 'vanilla-starter/Popover'; import {Button} from 'vanilla-starter/Button'; import {Switch} from 'vanilla-starter/Switch'; @@ -46,7 +46,7 @@ export const description = 'An overlay element positioned relative to a trigger. ```tsx render docs={vanillaDocs.exports.Popover} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="tailwind" files={["starters/tailwind/src/Popover.tsx"]} "use client"; - import {DialogTrigger} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Popover'; import {Popover} from 'tailwind-starter/Popover'; import {Button} from 'tailwind-starter/Button'; import {Switch} from 'tailwind-starter/Switch'; @@ -81,7 +81,7 @@ export const description = 'An overlay element positioned relative to a trigger. ```tsx render "use client" -import {Pressable, DialogTrigger} from 'react-aria-components'; +import {Pressable, DialogTrigger} from 'react-aria-components/Popover'; import {Popover} from 'vanilla-starter/Popover'; diff --git a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx index a6ad23fa595..360f8274fe3 100644 --- a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx @@ -47,7 +47,7 @@ import React from 'react'; import {Button} from 'vanilla-starter/Button'; import {MyToastRegion} from './MyToastRegion' import {UNSAFE_PortalProvider} from '@react-aria/overlays'; -import {UNSTABLE_ToastQueue as ToastQueue} from 'react-aria-components'; +import {UNSTABLE_ToastQueue as ToastQueue} from 'react-aria-components/Toast'; // Define the type for your toast content. interface MyToastContent { diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx index b3619afbed7..c541805901f 100644 --- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx @@ -40,7 +40,7 @@ Use the `value` or `defaultValue` prop to set the selected date range, using obj ```tsx render "use client"; import {parseDate, getLocalTimeZone} from '@internationalized/date'; -import {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {RangeCalendar} from 'vanilla-starter/RangeCalendar'; import {useState} from 'react'; @@ -74,7 +74,7 @@ By default, `RangeCalendar` displays the value using the calendar system for the ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-ca-indian'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {parseDate} from '@internationalized/date'; import {RangeCalendar} from 'vanilla-starter/RangeCalendar'; @@ -225,10 +225,10 @@ Set the `visibleDuration` prop and render multiple `CalendarGrid` elements to di ```tsx render docs={docs.exports.RangeCalendar} links={docs.links} props={['visibleDuration', 'pageBehavior', 'firstDayOfWeek']} initialProps={{visibleDuration: {months: 2}}} wide "use client"; -import {RangeCalendar, Heading} from 'react-aria-components'; +import {RangeCalendar, Heading} from 'react-aria-components/RangeCalendar'; import {CalendarGrid, CalendarCell} from 'vanilla-starter/RangeCalendar'; import {Button} from 'vanilla-starter/Button'; -import {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {ChevronLeft, ChevronRight} from 'lucide-react'; // TODO: move this into the starter example. @@ -313,7 +313,7 @@ You can also control the focused date via `CalendarStateContext`. This example s ```tsx render files={['packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx', 'packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx']} "use client"; -import {RangeCalendar} from 'react-aria-components'; +import {RangeCalendar} from 'react-aria-components/RangeCalendar'; import {CalendarGrid, CalendarCell} from 'vanilla-starter/RangeCalendar'; import {MonthDropdown} from './MonthDropdown'; import {YearDropdown} from './YearDropdown'; diff --git a/packages/dev/s2-docs/pages/react-aria/Select.mdx b/packages/dev/s2-docs/pages/react-aria/Select.mdx index d1b93746eb8..4cfb7f9698f 100644 --- a/packages/dev/s2-docs/pages/react-aria/Select.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Select.mdx @@ -58,7 +58,8 @@ The following example shows a dynamic collection of items, grouped into sections ```tsx render "use client"; import {Select, SelectItem} from 'vanilla-starter/Select'; -import {ListBoxSection, Collection, Header} from 'react-aria-components'; +import {ListBoxSection, Header} from 'vanilla-starter/ListBox'; +import {Collection} from 'react-aria-components/Collection'; function Example() { /*- begin collapse -*/ @@ -107,7 +108,8 @@ function Example() { ```tsx render "use client"; -import {Select, Label, SelectValue, Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +import {Select, Label, SelectValue} from 'react-aria-components/Select'; import {Button} from 'vanilla-starter/Button'; import {SelectListBox, SelectItem} from 'vanilla-starter/Select'; import {Popover} from 'vanilla-starter/Popover'; @@ -153,7 +155,9 @@ Use the `SelectValue` render prop function to display the selected items as a [T ```tsx render files={['packages/dev/s2-docs/pages/react-aria/MultiSelect.css']} "use client"; -import {Autocomplete, Select, SelectValue, Group, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +import {Select, SelectValue} from 'react-aria-components/Select'; +import {Group} from 'react-aria-components/Group'; import {Button} from 'vanilla-starter/Button'; import {SelectListBox, SelectItem} from 'vanilla-starter/Select'; import {Label} from 'vanilla-starter/Form'; diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx index 1b47df2d661..b162687f58d 100644 --- a/packages/dev/s2-docs/pages/react-aria/Table.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx @@ -238,7 +238,7 @@ Rows can be nested to display hierarchical data. Use the `treeColumn` prop to de ```tsx render "use client"; import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table'; -import {Collection, type Key} from 'react-aria-components'; +import {Collection, type Key} from 'react-aria-components/Collection'; import {useState} from 'react'; /*- begin collapse -*/ @@ -300,7 +300,8 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T ```tsx render "use client"; -import {Collection, useAsyncList} from 'react-aria-components'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; import {Table, TableHeader, Column, Row, TableBody, Cell, TableLoadMoreItem} from 'vanilla-starter/Table'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; @@ -449,7 +450,7 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte ```tsx render docs={docs.exports.Table} links={docs.links} props={['selectionMode', 'selectionBehavior', 'disabledBehavior', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide "use client"; -import type {Selection} from 'react-aria-components'; +import type {Selection} from 'react-aria-components/Table'; import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table'; import {useState} from 'react'; @@ -508,7 +509,7 @@ Set the `allowsSorting` prop on a `` to make it sortable. When the colum ```tsx render "use client"; -import {type SortDescriptor} from 'react-aria-components'; +import {type SortDescriptor} from 'react-aria-components/Table'; import {Table, TableHeader, Column, TableBody, Row, Cell} from 'vanilla-starter/Table'; import {useState} from 'react'; @@ -574,7 +575,7 @@ Wrap the `` with a ``, and add a `` instead of `` to enable multi-line input. ```tsx render "use client"; -import {TextField, Label, TextArea} from 'react-aria-components'; +import {TextField, Label, TextArea} from 'react-aria-components/TextField'; diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx index d4d488141e3..eba236a6ac9 100644 --- a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx @@ -45,7 +45,7 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte ```tsx render docs={docs.exports.ToggleButtonGroup} links={docs.links} props={['selectionMode', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide "use client"; -import type {Key} from 'react-aria-components'; +import type {Key} from 'react-aria-components/ToggleButtonGroup'; import {useState} from 'react'; import {ToggleButtonGroup} from 'vanilla-starter/ToggleButtonGroup'; import {ToggleButton} from 'vanilla-starter/ToggleButton'; @@ -89,7 +89,8 @@ Render a [SelectionIndicator](selection#animated-selectionindicator) within each ```tsx render files={['starters/docs/src/SegmentedControl.css']} "use client"; -import {ToggleButtonGroup, ToggleButton, ToggleButtonProps, SelectionIndicator, composeRenderProps} from 'react-aria-components'; +import {ToggleButtonGroup, ToggleButton, ToggleButtonProps, SelectionIndicator} from 'react-aria-components/ToggleButtonGroup'; +import {composeRenderProps} from 'react-aria-components/composeRenderProps'; import 'vanilla-starter/SegmentedControl.css'; function SegmentedControlItem(props: ToggleButtonProps) { diff --git a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx index 6c14dd27f5b..9813a2bd341 100644 --- a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx @@ -22,7 +22,7 @@ export const description = 'A container for a set of interactive controls, such import {Button} from 'vanilla-starter/Button'; import {Select, SelectItem} from 'vanilla-starter/Select'; import {Separator} from 'vanilla-starter/Separator'; - import {Group} from 'react-aria-components'; + import {Group} from 'react-aria-components/Group'; import {Bold, Italic, Underline, ClipboardCopy, Scissors, ClipboardPaste} from 'lucide-react'; @@ -65,7 +65,7 @@ export const description = 'A container for a set of interactive controls, such import {ToggleButton} from 'tailwind-starter/ToggleButton'; import {Button} from 'tailwind-starter/Button'; import {Select, SelectItem} from 'tailwind-starter/Select'; - import {Group} from 'react-aria-components'; + import {Group} from 'react-aria-components/Group'; import {Bold, Italic, Underline, ClipboardCopy, Scissors, ClipboardPaste} from 'lucide-react'; diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx index d83839832b9..0164758d269 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx @@ -18,7 +18,7 @@ export const description = 'Displays a description of an element on hover or foc ```tsx render docs={vanillaDocs.exports.Tooltip} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="vanilla" files={["starters/docs/src/Tooltip.tsx", "starters/docs/src/Tooltip.css"]} "use client"; - import {TooltipTrigger} from 'react-aria-components'; + import {TooltipTrigger} from 'react-aria-components/Tooltip'; import {Tooltip} from 'vanilla-starter/Tooltip'; import {Button} from 'vanilla-starter/Button'; import {Edit} from 'lucide-react'; @@ -41,7 +41,7 @@ export const description = 'Displays a description of an element on hover or foc ```tsx render docs={vanillaDocs.exports.Tooltip} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="tailwind" files={["starters/tailwind/src/Tooltip.tsx"]} "use client"; - import {TooltipTrigger} from 'react-aria-components'; + import {TooltipTrigger} from 'react-aria-components/Tooltip'; import {Tooltip} from 'tailwind-starter/Tooltip'; import {Button} from 'tailwind-starter/Button'; import {Edit} from 'lucide-react'; @@ -69,7 +69,7 @@ Tooltips appear after a "warmup" delay when hovering, or instantly on focus. Onc ```tsx render docs={docs.exports.TooltipTrigger} links={docs.links} props={['trigger', 'delay', 'closeDelay', 'isDisabled', 'shouldCloseOnPress']} type="vanilla" "use client"; -import {TooltipTrigger} from 'react-aria-components'; +import {TooltipTrigger} from 'react-aria-components/Tooltip'; import {Tooltip} from 'vanilla-starter/Tooltip'; import {Button} from 'vanilla-starter/Button'; import {Edit} from 'lucide-react'; @@ -112,7 +112,7 @@ function Example(props) { ```tsx render "use client" -import {Focusable, TooltipTrigger} from 'react-aria-components'; +import {Focusable, TooltipTrigger} from 'react-aria-components/Tooltip'; import {Tooltip} from 'vanilla-starter/Tooltip'; diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx index 63bd61068c9..9094137b4c2 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx @@ -67,7 +67,7 @@ export const description = 'Provides users with a way to navigate nested hierarc ```tsx render "use client"; import {Tree, TreeItem} from 'vanilla-starter/Tree'; -import {Collection} from 'react-aria-components'; +import {Collection} from 'react-aria-components/Collection'; ///- begin collapse -/// let items = [ @@ -112,7 +112,8 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T "use client"; import {Tree, TreeItem, TreeLoadMoreItem} from 'vanilla-starter/Tree'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; -import {Collection, useAsyncList} from 'react-aria-components'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; interface Character { name: string @@ -278,7 +279,7 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte ```tsx render docs={docs.exports.Tree} links={docs.links} props={['selectionMode', 'selectionBehavior', 'disabledBehavior', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide "use client"; -import type {Selection} from 'react-aria-components'; +import type {Selection} from 'react-aria-components/Tree'; import {Tree, TreeItem} from 'vanilla-starter/Tree'; import {useState} from 'react'; @@ -328,7 +329,9 @@ Tree supports drag and drop interactions when the `dragAndDropHooks` prop is pro ```tsx render "use client"; import {Tree, TreeItem} from 'vanilla-starter/Tree'; -import {useDragAndDrop, Collection, useTreeData} from 'react-aria-components'; +import {useDragAndDrop} from 'react-aria-components/useDragAndDrop'; +import {Collection} from 'react-aria-components/Collection'; +import {useTreeData} from 'react-aria-components/useTreeData'; function Example() { ///- begin collapse -/// diff --git a/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx b/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx index a24c1187cec..43e62db852c 100644 --- a/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx @@ -14,7 +14,7 @@ export const description = 'Renders a scrollable collection of data using custom ```tsx render docs={docs.exports.ListLayoutOptions} links={docs.links} props={['rowSize', 'gap', 'padding']} initialProps={{rowSize: 32, gap: 4, padding: 4}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, ListLayout} from 'react-aria-components'; +import {Virtualizer, ListLayout} from 'react-aria-components/Virtualizer'; import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; let items: {id: number, name: string}[] = []; @@ -53,7 +53,7 @@ Virtualizer uses obje ```tsx render docs={docs.exports.ListLayoutOptions} links={docs.links} props={['gap', 'padding']} initialProps={{estimatedRowSize: 75, gap: 4, padding: 4}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, ListLayout} from 'react-aria-components'; +import {Virtualizer, ListLayout} from 'react-aria-components/Virtualizer'; import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; let lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.'.split(' '); @@ -85,7 +85,7 @@ Use the `orientation` option to arrange items horizontally or vertically. Provid ```tsx render docs={docs.exports.ListLayoutOptions} links={docs.links} props={['gap', 'padding']} initialProps={{estimatedRowSize: 100, gap: 8, padding: 8, orientation: 'horizontal'}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, ListLayout} from 'react-aria-components'; +import {Virtualizer, ListLayout} from 'react-aria-components/Virtualizer'; import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; ///- begin collapse -/// @@ -336,8 +336,8 @@ for (let i = 0; imageOptions.length < 500; i++) { ```tsx render docs={docs.exports.GridLayoutOptions} links={docs.links} props={['minItemSize', 'maxItemSize', 'minSpace', 'maxColumns', 'preserveAspectRatio']} initialProps={{minItemSize: {width: 100, height: 140}, minSpace: {width: 8, height: 8}}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, GridLayout, Text} from 'react-aria-components'; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; +import {Virtualizer, GridLayout} from 'react-aria-components/Virtualizer'; +import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; ///- begin collapse -/// let albumOptions = [ @@ -426,8 +426,8 @@ function Example(props) { ```tsx render docs={docs.exports.WaterfallLayoutOptions} links={docs.links} props={['minItemSize', 'maxItemSize', 'minSpace', 'maxColumns']} initialProps={{minItemSize: {width: 150, height: 150}, minSpace: {width: 8, height: 8}}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, WaterfallLayout, Text} from 'react-aria-components'; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; +import {Virtualizer, WaterfallLayout} from 'react-aria-components/Virtualizer'; +import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; ///- begin collapse -/// let images = [ @@ -678,7 +678,7 @@ for (let i = 0; images.length < 500; i++) { ```tsx render docs={docs.exports.TableLayoutProps} links={docs.links} props={['rowHeight', 'headingHeight', 'padding', 'gap']} initialProps={{rowHeight: 32, headingHeight: 32, padding: 4, gap: 4}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, TableLayout} from 'react-aria-components'; +import {Virtualizer, TableLayout} from 'react-aria-components/Virtualizer'; import {Cell, Column, Row, Table, TableBody, TableHeader} from 'vanilla-starter/Table'; type Row = { id: number; foo: string; bar: string; baz: string }; diff --git a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx index aa2632b2675..970700e7c54 100644 --- a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx +++ b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx @@ -21,7 +21,7 @@ export const description = 'Hides its children visually but keeps content access {docs.exports.VisuallyHidden.description} ```tsx -import {VisuallyHidden} from 'react-aria'; +import {VisuallyHidden} from 'react-aria/VisuallyHidden'; I am hidden ``` diff --git a/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx b/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx index 4015030d0c9..7223e39e99d 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx @@ -91,8 +91,10 @@ Building a component with React Aria and React Stately looks like this: call the ```tsx render 'use client'; -import {useSwitch, useFocusRing, VisuallyHidden} from 'react-aria'; -import {useToggleState} from 'react-stately'; +import {useSwitch} from 'react-aria/useSwitch'; +import {useFocusRing} from 'react-aria/useFocusRing'; +import {VisuallyHidden} from 'react-aria/VisuallyHidden'; +import {useToggleState} from 'react-stately/useToggleState'; import {useRef} from 'react'; function Switch(props) { diff --git a/packages/dev/s2-docs/pages/react-aria/collections.mdx b/packages/dev/s2-docs/pages/react-aria/collections.mdx index 43d38f01ace..e346fbdc97b 100644 --- a/packages/dev/s2-docs/pages/react-aria/collections.mdx +++ b/packages/dev/s2-docs/pages/react-aria/collections.mdx @@ -38,9 +38,8 @@ Sections or groups of items can be constructed by wrapping the items in a sectio ```tsx render "use client"; -import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; +import {MenuTrigger, Menu, MenuItem, MenuSection, Header} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; -import {Header} from 'react-aria-components'; @@ -64,8 +63,7 @@ import {Header} from 'react-aria-components'; ```tsx render "use client"; -import {ListBox, ListBoxItem, ListBoxSection} from 'vanilla-starter/ListBox'; -import {Header} from 'react-aria-components'; +import {ListBox, ListBoxItem, ListBoxSection, Header} from 'vanilla-starter/ListBox'; {/*- begin highlight -*/} @@ -163,8 +161,7 @@ Dynamic collections are automatically memoized to improve performance. Rendered ```tsx render "use client"; -import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; -import {Text} from 'react-aria-components'; +import {ListBox, ListBoxItem, Text} from 'vanilla-starter/ListBox'; import {ToggleButtonGroup} from 'vanilla-starter/ToggleButtonGroup'; import {ToggleButton} from 'vanilla-starter/ToggleButton'; import {useState} from 'react'; @@ -241,8 +238,8 @@ To combine multiple sources of data, or mix static and dynamic items, use the `< ```tsx render "use client"; -import {ListBox, ListBoxSection, ListBoxItem} from 'vanilla-starter/ListBox'; -import {Collection, Header} from 'react-aria-components'; +import {ListBox, ListBoxSection, ListBoxItem, Header} from 'vanilla-starter/ListBox'; +import {Collection} from 'react-aria-components/Collection'; let animals = [ {id: 1, species: 'Aardvark'}, @@ -287,8 +284,9 @@ Several components also support infinite scrolling by rendering a `LoadMoreItem` ```tsx render "use client"; -import {Collection, ListBoxLoadMoreItem, useAsyncList} from 'react-aria-components'; -import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; +import {ListBox, ListBoxItem, ListBoxLoadMoreItem} from 'vanilla-starter/ListBox'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; interface Character { diff --git a/packages/dev/s2-docs/pages/react-aria/customization.mdx b/packages/dev/s2-docs/pages/react-aria/customization.mdx index 7689e549b42..b05223e8eee 100644 --- a/packages/dev/s2-docs/pages/react-aria/customization.mdx +++ b/packages/dev/s2-docs/pages/react-aria/customization.mdx @@ -18,7 +18,7 @@ Use the `render` prop on any React Aria component to render a custom component i For example, you can render a [Motion](https://motion.dev) button and use the state to drive an animation. ```tsx -import {Button} from 'react-aria-components'; +import {Button} from 'react-aria-components/Button'; import {motion} from 'motion/react';