From 000fb9358a9962f2d15c866853d5430b67c1ffde Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Wed, 18 Mar 2026 09:39:15 -0700 Subject: [PATCH 1/4] refactor: Dependency consolidation part 1, removing @react-types (#9461) * ActionBar * ActionGroup * TextField * SearchField * ComboBox * SearchAutocomplete * Avatar * Badge * Link * Breadcrumbs * Button * ButtonGroup * Calendar * Checkbox * Slider * Color * Overlays * ContextualHelp * Dialog * Divider * Form * grid * IllustratedMessage * Image * Label * ListBox * Layout * Menu * ProgressBar / Meter * NumberField * Radio * Select * Remove unused sidenav package * StatusLight * Switch * Table * Tabs * Text * Tooltip * View * Well * Update remaining dependencies * Card * DatePicker * Provider * Remove unused dependencies * Don't depend on v3 from S2 * Update lockfile * Add missing peers * Fix types * lint * Update imports in mdx files * update lockfile * Fix DateRangePicker props * inline SpectrumTextFieldBaseProps * Keep TableView children required * fix lockfile * cleanup * f'ing yarn * constraints * fix combobox --- examples/rsp-next-ts-17/pages/_app.tsx | 2 +- examples/rsp-next-ts/pages/_app.tsx | 2 +- packages/@adobe/react-spectrum/src/index.ts | 2 +- packages/@react-aria/actiongroup/package.json | 1 - packages/@react-aria/actiongroup/src/index.ts | 3 +- .../actiongroup/src/useActionGroup.ts | 30 +- .../@react-aria/autocomplete/package.json | 4 +- .../@react-aria/autocomplete/src/index.ts | 3 +- .../autocomplete/src/useSearchAutocomplete.ts | 41 +- packages/@react-aria/breadcrumbs/package.json | 1 - packages/@react-aria/breadcrumbs/src/index.ts | 5 +- .../breadcrumbs/src/useBreadcrumbItem.ts | 28 +- .../breadcrumbs/src/useBreadcrumbs.ts | 5 +- packages/@react-aria/button/package.json | 1 - packages/@react-aria/button/src/index.ts | 4 +- packages/@react-aria/button/src/useButton.ts | 81 ++- .../@react-aria/button/src/useToggleButton.ts | 14 +- .../button/src/useToggleButtonGroup.ts | 11 +- .../button/stories/useButton.stories.tsx | 3 +- packages/@react-aria/calendar/package.json | 3 +- packages/@react-aria/calendar/src/index.ts | 4 +- .../@react-aria/calendar/src/useCalendar.ts | 6 +- .../calendar/src/useCalendarBase.ts | 5 +- .../calendar/src/useRangeCalendar.ts | 19 +- packages/@react-aria/checkbox/package.json | 1 - packages/@react-aria/checkbox/src/index.ts | 5 +- .../@react-aria/checkbox/src/useCheckbox.ts | 17 +- .../checkbox/src/useCheckboxGroup.ts | 7 +- .../checkbox/src/useCheckboxGroupItem.ts | 7 +- .../checkbox/test/useCheckboxGroup.test.tsx | 3 +- packages/@react-aria/collections/package.json | 1 - .../@react-aria/color/docs/useColorSlider.mdx | 3 +- packages/@react-aria/color/package.json | 1 - packages/@react-aria/color/src/index.ts | 9 +- .../@react-aria/color/src/useColorArea.ts | 22 +- .../color/src/useColorAreaGradient.ts | 3 +- .../@react-aria/color/src/useColorField.ts | 10 +- .../@react-aria/color/src/useColorSlider.ts | 7 +- .../@react-aria/color/src/useColorSwatch.ts | 3 +- .../@react-aria/color/src/useColorWheel.ts | 7 +- .../color/test/useColorWheel.test.tsx | 3 +- packages/@react-aria/combobox/package.json | 4 +- packages/@react-aria/combobox/src/index.ts | 3 +- .../@react-aria/combobox/src/useComboBox.ts | 12 +- packages/@react-aria/datepicker/package.json | 7 +- packages/@react-aria/datepicker/src/index.ts | 9 +- .../datepicker/src/useDateField.ts | 16 +- .../datepicker/src/useDatePicker.ts | 18 +- .../datepicker/src/useDateRangePicker.ts | 14 +- packages/@react-aria/dialog/package.json | 1 - packages/@react-aria/dialog/src/index.ts | 3 +- packages/@react-aria/dialog/src/useDialog.ts | 11 +- packages/@react-aria/disclosure/package.json | 2 +- .../disclosure/src/useDisclosure.ts | 2 +- packages/@react-aria/dnd/package.json | 2 +- packages/@react-aria/dnd/src/useDrag.ts | 2 +- .../@react-aria/dnd/src/useDraggableItem.ts | 2 +- packages/@react-aria/dnd/src/useDrop.ts | 2 +- .../@react-aria/dnd/src/useVirtualDrop.ts | 2 +- packages/@react-aria/grid/package.json | 3 +- .../grid/src/GridKeyboardDelegate.ts | 2 +- packages/@react-aria/grid/src/useGrid.ts | 3 +- packages/@react-aria/grid/src/useGridCell.ts | 3 +- packages/@react-aria/grid/src/useGridRow.ts | 3 +- .../grid/src/useGridSelectionCheckbox.ts | 5 +- packages/@react-aria/grid/src/utils.ts | 3 +- .../@react-aria/interactions/package.json | 1 - .../interactions/stories/useHover.stories.tsx | 3 +- packages/@react-aria/link/package.json | 1 - packages/@react-aria/link/src/index.ts | 2 +- packages/@react-aria/link/src/useLink.ts | 7 +- packages/@react-aria/listbox/package.json | 1 - packages/@react-aria/listbox/src/index.ts | 3 +- .../@react-aria/listbox/src/useListBox.ts | 40 +- packages/@react-aria/menu/package.json | 4 +- packages/@react-aria/menu/src/index.ts | 3 +- packages/@react-aria/menu/src/useMenu.ts | 26 +- .../@react-aria/menu/src/useMenuTrigger.ts | 5 +- packages/@react-aria/meter/package.json | 1 - packages/@react-aria/meter/src/index.ts | 3 +- packages/@react-aria/meter/src/useMeter.ts | 6 +- packages/@react-aria/numberfield/package.json | 3 +- packages/@react-aria/numberfield/src/index.ts | 3 +- .../numberfield/src/useNumberField.ts | 18 +- .../numberfield/test/useNumberField.test.ts | 3 +- .../@react-aria/overlays/docs/usePopover.mdx | 3 +- packages/@react-aria/overlays/package.json | 3 +- .../overlays/src/calculatePosition.ts | 2 +- packages/@react-aria/overlays/src/index.ts | 3 +- .../overlays/src/useOverlayPosition.ts | 49 +- .../overlays/src/useOverlayTrigger.ts | 2 +- .../@react-aria/overlays/src/usePopover.ts | 3 +- .../stories/UseOverlayPosition.stories.tsx | 3 +- packages/@react-aria/progress/package.json | 1 - packages/@react-aria/progress/src/index.ts | 3 +- .../progress/src/useProgressBar.ts | 42 +- packages/@react-aria/radio/package.json | 1 - packages/@react-aria/radio/src/index.ts | 5 +- packages/@react-aria/radio/src/useRadio.ts | 24 +- .../@react-aria/radio/src/useRadioGroup.ts | 7 +- packages/@react-aria/searchfield/package.json | 3 +- packages/@react-aria/searchfield/src/index.ts | 2 +- .../searchfield/src/useSearchField.ts | 19 +- packages/@react-aria/select/package.json | 3 +- .../@react-aria/select/src/HiddenSelect.tsx | 3 +- packages/@react-aria/select/src/index.ts | 3 +- packages/@react-aria/select/src/useSelect.ts | 24 +- packages/@react-aria/slider/package.json | 1 - packages/@react-aria/slider/src/index.ts | 6 +- packages/@react-aria/slider/src/useSlider.ts | 7 +- .../@react-aria/slider/src/useSliderThumb.ts | 27 +- .../slider/stories/StoryMultiSlider.tsx | 5 +- .../slider/stories/StoryRangeSlider.tsx | 3 +- .../slider/stories/StorySlider.tsx | 3 +- packages/@react-aria/spinbutton/package.json | 2 +- .../spinbutton/src/useSpinButton.ts | 2 +- packages/@react-aria/switch/package.json | 1 - packages/@react-aria/switch/src/index.ts | 3 +- packages/@react-aria/switch/src/useSwitch.ts | 35 +- packages/@react-aria/table/package.json | 7 +- .../table/src/TableKeyboardDelegate.ts | 4 +- .../@react-aria/table/src/useTableCell.ts | 2 +- .../table/src/useTableColumnHeader.ts | 2 +- .../table/src/useTableColumnResize.ts | 5 +- packages/@react-aria/table/src/useTableRow.ts | 5 +- .../table/src/useTableSelectionCheckbox.ts | 2 +- .../stories/example-backwards-compat.tsx | 3 +- .../table/stories/example-docs.tsx | 3 +- .../table/stories/example-resizing.tsx | 3 +- .../@react-aria/table/stories/example.tsx | 3 +- .../table/stories/useTable.stories.tsx | 3 +- packages/@react-aria/tabs/package.json | 1 - packages/@react-aria/tabs/src/index.ts | 7 +- packages/@react-aria/tabs/src/useTab.ts | 12 +- packages/@react-aria/tabs/src/useTabList.ts | 18 +- packages/@react-aria/tabs/src/useTabPanel.ts | 8 +- packages/@react-aria/tag/package.json | 2 +- packages/@react-aria/tag/src/useTag.ts | 2 +- packages/@react-aria/textfield/package.json | 1 - packages/@react-aria/textfield/src/index.ts | 2 +- .../textfield/src/useFormattedTextField.ts | 3 +- .../@react-aria/textfield/src/useTextField.ts | 38 +- packages/@react-aria/toast/package.json | 2 +- packages/@react-aria/toast/src/useToast.ts | 2 +- packages/@react-aria/toggle/package.json | 1 - packages/@react-aria/toggle/src/index.ts | 3 +- packages/@react-aria/toggle/src/useToggle.ts | 12 +- packages/@react-aria/tooltip/package.json | 1 - packages/@react-aria/tooltip/src/index.ts | 4 +- .../@react-aria/tooltip/src/useTooltip.ts | 9 +- .../tooltip/src/useTooltipTrigger.ts | 3 +- packages/@react-aria/tree/package.json | 3 +- packages/@react-aria/tree/src/useTreeItem.ts | 2 +- packages/@react-aria/virtualizer/package.json | 1 - .../@react-spectrum/actionbar/package.json | 1 - .../actionbar/src/ActionBar.tsx | 30 +- .../actionbar/src/ActionBarContainer.tsx | 12 +- .../@react-spectrum/actionbar/src/index.ts | 4 +- .../@react-spectrum/actiongroup/package.json | 1 - .../actiongroup/src/ActionGroup.tsx | 35 +- .../@react-spectrum/actiongroup/src/index.ts | 2 +- .../chromatic/SearchAutocomplete.stories.tsx | 3 +- .../@react-spectrum/autocomplete/package.json | 2 - .../src/MobileSearchAutocomplete.tsx | 5 +- .../autocomplete/src/SearchAutocomplete.tsx | 40 +- .../@react-spectrum/autocomplete/src/index.ts | 2 +- .../avatar/chromatic/Avatar.stories.tsx | 3 +- packages/@react-spectrum/avatar/package.json | 1 - .../@react-spectrum/avatar/src/Avatar.tsx | 42 +- packages/@react-spectrum/avatar/src/index.ts | 2 +- .../avatar/stories/Avatar.stories.tsx | 3 +- .../badge/chromatic/Badge.stories.tsx | 3 +- packages/@react-spectrum/badge/package.json | 1 - packages/@react-spectrum/badge/src/Badge.tsx | 14 +- packages/@react-spectrum/badge/src/index.ts | 2 +- .../@react-spectrum/breadcrumbs/package.json | 1 - .../breadcrumbs/src/BreadcrumbItem.tsx | 3 +- .../breadcrumbs/src/Breadcrumbs.tsx | 29 +- .../@react-spectrum/breadcrumbs/src/index.ts | 2 +- packages/@react-spectrum/button/package.json | 1 - .../button/src/ActionButton.tsx | 12 +- .../@react-spectrum/button/src/Button.tsx | 25 +- .../button/src/ClearButton.tsx | 5 +- .../button/src/FieldButton.tsx | 3 +- .../button/src/LogicButton.tsx | 10 +- .../button/src/ToggleButton.tsx | 9 +- packages/@react-spectrum/button/src/index.ts | 5 +- .../button/stories/Button.stories.tsx | 3 +- .../@react-spectrum/buttongroup/package.json | 1 - .../buttongroup/src/ButtonGroup.tsx | 23 +- .../@react-spectrum/buttongroup/src/index.ts | 2 +- .../@react-spectrum/calendar/package.json | 3 +- .../@react-spectrum/calendar/src/Calendar.tsx | 24 +- .../calendar/src/CalendarBase.tsx | 5 +- .../calendar/src/CalendarMonth.tsx | 3 +- .../calendar/src/RangeCalendar.tsx | 24 +- .../@react-spectrum/calendar/src/index.ts | 3 +- .../calendar/stories/Calendar.stories.tsx | 2 +- .../stories/RangeCalendar.stories.tsx | 2 +- .../card/chromatic-fc/CardView.stories.tsx | 3 +- .../card/chromatic/CardView.stories.tsx | 3 +- packages/@react-spectrum/card/package.json | 2 - .../@react-spectrum/card/src/BaseLayout.tsx | 2 +- packages/@react-spectrum/card/src/Card.tsx | 2 +- .../@react-spectrum/card/src/CardBase.tsx | 2 +- .../@react-spectrum/card/src/CardView.tsx | 2 +- packages/@react-spectrum/card/src/index.ts | 2 +- packages/@react-spectrum/card/src/types.ts | 67 +++ .../card/stories/Card.stories.tsx | 3 +- .../card/stories/GalleryCardView.stories.tsx | 3 +- .../card/stories/GridCardView.stories.tsx | 3 +- .../stories/WaterfallCardView.stories.tsx | 3 +- .../@react-spectrum/checkbox/package.json | 1 - .../@react-spectrum/checkbox/src/Checkbox.tsx | 18 +- .../checkbox/src/CheckboxGroup.tsx | 25 +- .../@react-spectrum/checkbox/src/index.ts | 3 +- .../stories/CheckboxGroup.stories.tsx | 3 +- .../color/chromatic/ColorArea.stories.tsx | 3 +- .../color/chromatic/ColorField.stories.tsx | 3 +- .../color/chromatic/ColorSlider.stories.tsx | 3 +- .../@react-spectrum/color/docs/ColorArea.mdx | 2 +- .../@react-spectrum/color/docs/ColorField.mdx | 3 +- .../color/docs/ColorPicker.mdx | 2 +- .../color/docs/ColorSlider.mdx | 2 +- .../color/docs/ColorSwatch.mdx | 2 +- .../color/docs/ColorSwatchPicker.mdx | 2 +- .../@react-spectrum/color/docs/ColorWheel.mdx | 2 +- packages/@react-spectrum/color/package.json | 2 - .../@react-spectrum/color/src/ColorArea.tsx | 10 +- .../@react-spectrum/color/src/ColorEditor.tsx | 3 +- .../@react-spectrum/color/src/ColorField.tsx | 24 +- .../@react-spectrum/color/src/ColorSlider.tsx | 14 +- .../@react-spectrum/color/src/ColorSwatch.tsx | 2 +- .../color/src/ColorSwatchPicker.tsx | 2 +- .../@react-spectrum/color/src/ColorThumb.tsx | 2 +- .../@react-spectrum/color/src/ColorWheel.tsx | 10 +- packages/@react-spectrum/color/src/index.ts | 7 +- .../color/stories/ColorArea.stories.tsx | 3 +- .../color/stories/ColorField.stories.tsx | 5 +- .../color/stories/ColorWheel.stories.tsx | 3 +- .../combobox/chromatic/ComboBox.stories.tsx | 3 +- .../@react-spectrum/combobox/package.json | 2 - .../@react-spectrum/combobox/src/ComboBox.tsx | 43 +- .../combobox/src/MobileComboBox.tsx | 5 +- .../@react-spectrum/combobox/src/index.ts | 2 +- .../contextualhelp/package.json | 3 +- .../contextualhelp/src/ContextualHelp.tsx | 22 +- .../contextualhelp/src/index.ts | 2 +- .../@react-spectrum/datepicker/package.json | 1 - .../datepicker/src/DateField.tsx | 22 +- .../datepicker/src/DatePicker.tsx | 30 +- .../datepicker/src/DatePickerField.tsx | 4 +- .../datepicker/src/DatePickerSegment.tsx | 5 +- .../datepicker/src/DateRangePicker.tsx | 8 +- .../datepicker/src/TimeField.tsx | 15 +- .../@react-spectrum/datepicker/src/index.ts | 5 +- .../@react-spectrum/datepicker/src/utils.tsx | 2 +- .../datepicker/stories/DatePicker.stories.tsx | 2 +- .../stories/DateRangePicker.stories.tsx | 4 +- .../dialog/chromatic/AlertDialog.stories.tsx | 3 +- packages/@react-spectrum/dialog/package.json | 2 - .../dialog/src/AlertDialog.tsx | 36 +- .../@react-spectrum/dialog/src/Dialog.tsx | 18 +- .../dialog/src/DialogContainer.tsx | 19 +- .../dialog/src/DialogTrigger.tsx | 32 +- packages/@react-spectrum/dialog/src/index.ts | 5 +- .../dialog/stories/AlertDialog.stories.tsx | 3 +- packages/@react-spectrum/divider/package.json | 1 - .../@react-spectrum/divider/src/Divider.tsx | 23 +- packages/@react-spectrum/divider/src/index.ts | 2 +- .../form/chromatic/Form.stories.tsx | 3 +- .../form/chromatic/FormLongLabel.stories.tsx | 3 +- packages/@react-spectrum/form/package.json | 1 - packages/@react-spectrum/form/src/Form.tsx | 32 +- packages/@react-spectrum/form/src/index.ts | 2 +- .../illustratedmessage/package.json | 1 - .../src/IllustratedMessage.tsx | 10 +- .../illustratedmessage/src/index.ts | 2 +- packages/@react-spectrum/image/package.json | 1 - packages/@react-spectrum/image/src/Image.tsx | 41 +- packages/@react-spectrum/image/src/index.ts | 2 +- packages/@react-spectrum/label/package.json | 1 - packages/@react-spectrum/label/src/Field.tsx | 18 +- packages/@react-spectrum/label/src/Label.tsx | 22 +- packages/@react-spectrum/label/src/index.ts | 2 + .../label/stories/HelpText.stories.tsx | 3 +- packages/@react-spectrum/layout/package.json | 1 - packages/@react-spectrum/layout/src/Flex.tsx | 10 +- packages/@react-spectrum/layout/src/Grid.tsx | 10 +- packages/@react-spectrum/layout/src/index.ts | 3 +- .../link/chromatic/Link.stories.tsx | 3 +- packages/@react-spectrum/link/package.json | 1 - packages/@react-spectrum/link/src/Link.tsx | 18 +- packages/@react-spectrum/link/src/index.ts | 2 +- .../link/stories/Link.stories.tsx | 3 +- packages/@react-spectrum/list/package.json | 2 +- .../@react-spectrum/list/src/DragPreview.tsx | 2 +- .../listbox/chromatic/ListBox.stories.tsx | 3 +- packages/@react-spectrum/listbox/package.json | 1 - .../@react-spectrum/listbox/src/ListBox.tsx | 3 +- .../listbox/src/ListBoxBase.tsx | 6 +- packages/@react-spectrum/listbox/src/index.ts | 2 +- .../menu/chromatic/MenuTrigger.stories.tsx | 3 +- .../menu/chromatic/Submenu.stories.tsx | 3 +- packages/@react-spectrum/menu/package.json | 3 - .../@react-spectrum/menu/src/ActionMenu.tsx | 16 +- packages/@react-spectrum/menu/src/Menu.tsx | 7 +- .../@react-spectrum/menu/src/MenuTrigger.tsx | 36 +- packages/@react-spectrum/menu/src/index.ts | 4 +- .../menu/stories/ActionMenu.stories.tsx | 3 +- .../menu/test/SubMenuTrigger.test.tsx | 3 +- .../meter/chromatic/Meter.stories.tsx | 3 +- packages/@react-spectrum/meter/package.json | 1 - packages/@react-spectrum/meter/src/Meter.tsx | 11 +- packages/@react-spectrum/meter/src/index.ts | 2 +- .../chromatic/NumberField.stories.tsx | 3 +- .../@react-spectrum/numberfield/package.json | 2 - .../numberfield/src/NumberField.tsx | 17 +- .../numberfield/src/StepButton.tsx | 3 +- .../@react-spectrum/numberfield/src/index.ts | 2 +- .../@react-spectrum/overlays/package.json | 1 - .../@react-spectrum/overlays/src/Modal.tsx | 3 +- .../@react-spectrum/overlays/src/Overlay.tsx | 19 +- .../@react-spectrum/overlays/src/Tray.tsx | 3 +- .../@react-spectrum/overlays/src/index.ts | 1 + .../chromatic/Picker.Languages.stories.tsx | 3 +- .../picker/chromatic/Picker.stories.tsx | 3 +- packages/@react-spectrum/picker/package.json | 1 - .../@react-spectrum/picker/src/Picker.tsx | 28 +- packages/@react-spectrum/picker/src/index.ts | 2 +- .../chromatic/ProgressBar.stories.tsx | 3 +- .../chromatic/ProgressCircle.stories.tsx | 3 +- .../@react-spectrum/progress/package.json | 1 - .../progress/src/ProgressBar.tsx | 3 +- .../progress/src/ProgressBarBase.tsx | 29 +- .../progress/src/ProgressCircle.tsx | 41 +- .../@react-spectrum/progress/src/index.ts | 3 +- .../provider/chromatic/Provider.stories.tsx | 3 +- .../@react-spectrum/provider/package.json | 1 - .../@react-spectrum/provider/src/Provider.tsx | 2 +- .../@react-spectrum/provider/src/context.ts | 2 +- .../@react-spectrum/provider/src/index.ts | 3 +- .../provider/src/mediaQueries.ts | 2 +- .../@react-spectrum/provider/src/types.ts | 124 ++++ packages/@react-spectrum/radio/package.json | 1 - packages/@react-spectrum/radio/src/Radio.tsx | 7 +- .../@react-spectrum/radio/src/RadioGroup.tsx | 19 +- packages/@react-spectrum/radio/src/index.ts | 4 +- packages/@react-spectrum/s2/package.json | 9 +- packages/@react-spectrum/s2/src/Accordion.tsx | 2 +- packages/@react-spectrum/s2/src/ActionBar.tsx | 2 +- .../@react-spectrum/s2/src/ActionButton.tsx | 2 +- packages/@react-spectrum/s2/src/Avatar.tsx | 2 +- .../@react-spectrum/s2/src/AvatarGroup.tsx | 2 +- packages/@react-spectrum/s2/src/Badge.tsx | 2 +- .../@react-spectrum/s2/src/Breadcrumbs.tsx | 4 +- packages/@react-spectrum/s2/src/Button.tsx | 2 +- .../@react-spectrum/s2/src/ButtonGroup.tsx | 7 +- packages/@react-spectrum/s2/src/Card.tsx | 2 +- packages/@react-spectrum/s2/src/CardView.tsx | 2 +- packages/@react-spectrum/s2/src/Checkbox.tsx | 2 +- .../@react-spectrum/s2/src/CheckboxGroup.tsx | 2 +- .../@react-spectrum/s2/src/ClearButton.tsx | 2 +- .../@react-spectrum/s2/src/CloseButton.tsx | 2 +- packages/@react-spectrum/s2/src/ColorArea.tsx | 2 +- .../@react-spectrum/s2/src/ColorField.tsx | 4 +- .../@react-spectrum/s2/src/ColorSlider.tsx | 2 +- .../@react-spectrum/s2/src/ColorSwatch.tsx | 2 +- .../s2/src/ColorSwatchPicker.tsx | 2 +- .../@react-spectrum/s2/src/ColorWheel.tsx | 2 +- packages/@react-spectrum/s2/src/ComboBox.tsx | 4 +- packages/@react-spectrum/s2/src/Content.tsx | 2 +- .../@react-spectrum/s2/src/ContextualHelp.tsx | 2 +- .../@react-spectrum/s2/src/CustomDialog.tsx | 2 +- packages/@react-spectrum/s2/src/Dialog.tsx | 2 +- .../s2/src/DialogContainer.tsx | 8 +- .../@react-spectrum/s2/src/Disclosure.tsx | 2 +- packages/@react-spectrum/s2/src/Divider.tsx | 2 +- packages/@react-spectrum/s2/src/DropZone.tsx | 2 +- packages/@react-spectrum/s2/src/Field.tsx | 2 +- packages/@react-spectrum/s2/src/Form.tsx | 2 +- .../s2/src/FullscreenDialog.tsx | 2 +- .../s2/src/IllustratedMessage.tsx | 2 +- .../@react-spectrum/s2/src/InlineAlert.tsx | 2 +- packages/@react-spectrum/s2/src/Link.tsx | 2 +- packages/@react-spectrum/s2/src/Meter.tsx | 2 +- packages/@react-spectrum/s2/src/Modal.tsx | 2 +- .../s2/src/NotificationBadge.tsx | 2 +- .../@react-spectrum/s2/src/NumberField.tsx | 4 +- packages/@react-spectrum/s2/src/Picker.tsx | 2 +- packages/@react-spectrum/s2/src/Popover.tsx | 2 +- .../@react-spectrum/s2/src/ProgressBar.tsx | 2 +- .../@react-spectrum/s2/src/ProgressCircle.tsx | 2 +- packages/@react-spectrum/s2/src/Provider.tsx | 9 +- packages/@react-spectrum/s2/src/Radio.tsx | 2 +- .../@react-spectrum/s2/src/RadioGroup.tsx | 2 +- .../@react-spectrum/s2/src/RangeSlider.tsx | 2 +- .../@react-spectrum/s2/src/SearchField.tsx | 4 +- .../s2/src/SegmentedControl.tsx | 2 +- packages/@react-spectrum/s2/src/Skeleton.tsx | 2 +- packages/@react-spectrum/s2/src/Slider.tsx | 2 +- .../@react-spectrum/s2/src/StatusLight.tsx | 2 +- packages/@react-spectrum/s2/src/Switch.tsx | 2 +- packages/@react-spectrum/s2/src/TableView.tsx | 7 +- packages/@react-spectrum/s2/src/Tabs.tsx | 2 +- .../@react-spectrum/s2/src/TabsPicker.tsx | 2 +- packages/@react-spectrum/s2/src/TagGroup.tsx | 2 +- packages/@react-spectrum/s2/src/TextField.tsx | 10 +- packages/@react-spectrum/s2/src/Toast.tsx | 2 +- .../@react-spectrum/s2/src/ToggleButton.tsx | 2 +- packages/@react-spectrum/s2/src/Tooltip.tsx | 5 +- packages/@react-spectrum/s2/src/TreeView.tsx | 2 +- packages/@react-spectrum/s2/src/index.ts | 2 +- packages/@react-spectrum/s2/src/useDOMRef.ts | 57 ++ .../@react-spectrum/s2/src/useMediaQuery.ts | 44 ++ packages/@react-spectrum/s2/src/utils.ts | 2 +- .../@react-spectrum/searchfield/package.json | 3 +- .../searchfield/src/SearchField.tsx | 9 +- .../@react-spectrum/searchfield/src/index.ts | 2 +- .../slider/chromatic/RangeSlider.stories.tsx | 3 +- .../slider/chromatic/Slider.stories.tsx | 3 +- packages/@react-spectrum/slider/package.json | 1 - .../slider/src/RangeSlider.tsx | 22 +- .../@react-spectrum/slider/src/Slider.tsx | 25 +- .../@react-spectrum/slider/src/SliderBase.tsx | 25 +- .../slider/src/SliderThumb.tsx | 3 +- packages/@react-spectrum/slider/src/index.ts | 4 +- .../slider/stories/RangeSlider.stories.tsx | 3 +- .../slider/stories/Slider.stories.tsx | 3 +- .../chromatic/StatusLight.stories.tsx | 3 +- .../@react-spectrum/statuslight/package.json | 1 - .../statuslight/src/StatusLight.tsx | 24 +- .../@react-spectrum/statuslight/src/index.ts | 2 +- packages/@react-spectrum/switch/package.json | 1 - .../@react-spectrum/switch/src/Switch.tsx | 12 +- packages/@react-spectrum/switch/src/index.ts | 2 +- .../@react-spectrum/table/docs/TableView.mdx | 6 +- packages/@react-spectrum/table/package.json | 3 +- .../@react-spectrum/table/src/Resizer.tsx | 5 +- .../table/src/TableViewBase.tsx | 6 +- .../table/src/TableViewLayout.ts | 2 +- .../table/src/TableViewWrapper.tsx | 2 +- packages/@react-spectrum/table/src/index.ts | 5 +- packages/@react-spectrum/table/src/types.ts | 32 ++ .../table/stories/ControllingResize.tsx | 2 +- .../table/stories/Performance.tsx | 2 +- .../table/test/TableSizing.test.tsx | 5 +- .../table/test/TreeGridTable.test.tsx | 3 +- .../tabs/chromatic/Tabs.stories.tsx | 3 +- packages/@react-spectrum/tabs/package.json | 2 - packages/@react-spectrum/tabs/src/Tabs.tsx | 51 +- packages/@react-spectrum/tabs/src/index.ts | 2 +- .../tabs/stories/Tabs.stories.tsx | 3 +- packages/@react-spectrum/text/package.json | 1 - packages/@react-spectrum/text/src/Heading.tsx | 22 +- .../@react-spectrum/text/src/Keyboard.tsx | 17 +- packages/@react-spectrum/text/src/Text.tsx | 17 +- packages/@react-spectrum/text/src/index.ts | 4 +- .../@react-spectrum/textfield/package.json | 1 - .../textfield/src/TextArea.tsx | 16 +- .../textfield/src/TextField.tsx | 18 +- .../textfield/src/TextFieldBase.tsx | 2 +- .../@react-spectrum/textfield/src/index.ts | 3 +- .../@react-spectrum/theme-dark/package.json | 2 +- .../@react-spectrum/theme-dark/src/index.ts | 2 +- .../theme-default/package.json | 2 +- .../theme-default/src/index.ts | 2 +- .../theme-express/package.json | 2 +- .../theme-express/src/index.ts | 2 +- .../@react-spectrum/theme-light/package.json | 2 +- .../@react-spectrum/theme-light/src/index.ts | 2 +- packages/@react-spectrum/tooltip/package.json | 2 - .../@react-spectrum/tooltip/src/Tooltip.tsx | 27 +- .../tooltip/src/TooltipTrigger.tsx | 21 +- .../@react-spectrum/tooltip/src/context.ts | 2 +- packages/@react-spectrum/tooltip/src/index.ts | 3 +- .../stories/TooltipTrigger.stories.tsx | 3 +- packages/@react-spectrum/tree/package.json | 1 - packages/@react-spectrum/view/package.json | 1 - packages/@react-spectrum/view/src/Content.tsx | 12 +- packages/@react-spectrum/view/src/Footer.tsx | 12 +- packages/@react-spectrum/view/src/Header.tsx | 12 +- packages/@react-spectrum/view/src/View.tsx | 16 +- packages/@react-spectrum/view/src/index.ts | 5 +- .../well/chromatic/Well.stories.tsx | 3 +- packages/@react-spectrum/well/package.json | 1 - packages/@react-spectrum/well/src/Well.tsx | 18 +- packages/@react-spectrum/well/src/index.ts | 2 +- packages/@react-stately/calendar/package.json | 1 - packages/@react-stately/calendar/src/index.ts | 6 +- packages/@react-stately/calendar/src/types.ts | 65 ++- .../calendar/src/useCalendarState.ts | 7 +- .../calendar/src/useRangeCalendarState.ts | 14 +- packages/@react-stately/calendar/src/utils.ts | 2 +- packages/@react-stately/checkbox/package.json | 1 - packages/@react-stately/checkbox/src/index.ts | 3 +- .../checkbox/src/useCheckboxGroupState.ts | 5 +- packages/@react-stately/color/package.json | 1 - packages/@react-stately/color/src/Color.ts | 2 +- packages/@react-stately/color/src/index.ts | 10 +- packages/@react-stately/color/src/types.ts | 79 +++ packages/@react-stately/color/src/useColor.ts | 2 +- .../color/src/useColorAreaState.ts | 21 +- .../color/src/useColorChannelFieldState.ts | 3 +- .../color/src/useColorFieldState.ts | 8 +- .../color/src/useColorPickerState.ts | 2 +- .../color/src/useColorSliderState.ts | 18 +- .../color/src/useColorWheelState.ts | 17 +- .../@react-stately/color/test/Color.test.tsx | 2 +- packages/@react-stately/combobox/package.json | 1 - packages/@react-stately/combobox/src/index.ts | 2 +- .../combobox/src/useComboBoxState.ts | 68 ++- .../@react-stately/datepicker/package.json | 2 +- .../datepicker/src/IncompleteDate.ts | 2 +- .../@react-stately/datepicker/src/index.ts | 1 + .../@react-stately/datepicker/src/types.ts | 115 ++++ .../datepicker/src/useDateFieldState.ts | 2 +- .../datepicker/src/useDatePickerState.ts | 2 +- .../datepicker/src/useDateRangePickerState.ts | 2 +- .../datepicker/src/useTimeFieldState.ts | 2 +- .../@react-stately/datepicker/src/utils.ts | 2 +- packages/@react-stately/grid/package.json | 1 - .../@react-stately/grid/src/GridCollection.ts | 31 +- packages/@react-stately/grid/src/index.ts | 1 + .../@react-stately/grid/src/useGridState.ts | 8 +- packages/@react-stately/layout/package.json | 3 +- .../@react-stately/layout/src/TableLayout.ts | 5 +- packages/@react-stately/menu/package.json | 1 - packages/@react-stately/menu/src/index.ts | 3 +- .../menu/src/useMenuTriggerState.ts | 13 +- .../@react-stately/numberfield/package.json | 2 +- .../@react-stately/numberfield/src/index.ts | 2 +- .../numberfield/src/useNumberFieldState.ts | 17 +- packages/@react-stately/overlays/package.json | 1 - packages/@react-stately/overlays/src/index.ts | 3 +- .../overlays/src/useOverlayTriggerState.ts | 10 +- packages/@react-stately/radio/package.json | 1 - packages/@react-stately/radio/src/index.ts | 3 +- .../radio/src/useRadioGroupState.ts | 11 +- .../@react-stately/searchfield/package.json | 2 +- .../@react-stately/searchfield/src/index.ts | 3 +- .../searchfield/src/useSearchFieldState.ts | 13 +- packages/@react-stately/select/package.json | 1 - packages/@react-stately/select/src/index.ts | 3 +- .../select/src/useSelectState.ts | 41 +- packages/@react-stately/slider/package.json | 1 - packages/@react-stately/slider/src/index.ts | 3 +- .../slider/src/useSliderState.ts | 31 +- packages/@react-stately/table/package.json | 2 - packages/@react-stately/table/src/Cell.ts | 16 +- packages/@react-stately/table/src/Column.ts | 43 +- packages/@react-stately/table/src/Row.ts | 21 +- .../@react-stately/table/src/TableBody.ts | 12 +- .../table/src/TableCollection.ts | 18 +- .../table/src/TableColumnLayout.ts | 4 +- .../@react-stately/table/src/TableHeader.ts | 9 +- .../@react-stately/table/src/TableUtils.ts | 2 +- packages/@react-stately/table/src/index.ts | 9 +- .../table/src/useTableColumnResizeState.ts | 5 +- .../@react-stately/table/src/useTableState.ts | 29 +- .../table/src/useTreeGridState.ts | 2 +- packages/@react-stately/tabs/package.json | 1 - packages/@react-stately/tabs/src/index.ts | 3 +- .../tabs/src/useTabListState.ts | 17 +- packages/@react-stately/toggle/package.json | 1 - packages/@react-stately/toggle/src/index.ts | 3 +- .../toggle/src/useToggleState.ts | 30 +- packages/@react-stately/tooltip/package.json | 1 - packages/@react-stately/tooltip/src/index.ts | 3 +- .../tooltip/src/useTooltipTriggerState.ts | 34 +- packages/@react-types/actionbar/package.json | 6 +- .../@react-types/actionbar/src/index.d.ts | 37 +- .../@react-types/actiongroup/package.json | 7 +- .../@react-types/actiongroup/src/index.d.ts | 64 +-- .../@react-types/autocomplete/package.json | 9 +- .../@react-types/autocomplete/src/index.d.ts | 68 +-- packages/@react-types/avatar/package.json | 6 +- packages/@react-types/avatar/src/index.d.ts | 41 +- packages/@react-types/badge/package.json | 6 +- packages/@react-types/badge/src/index.d.ts | 13 +- .../@react-types/breadcrumbs/package.json | 8 +- .../@react-types/breadcrumbs/src/index.d.ts | 53 +- packages/@react-types/button/package.json | 7 +- packages/@react-types/button/src/index.d.ts | 133 +---- .../@react-types/buttongroup/package.json | 6 +- .../@react-types/buttongroup/src/index.d.ts | 22 +- packages/@react-types/calendar/package.json | 9 +- packages/@react-types/calendar/src/index.d.ts | 124 +--- packages/@react-types/card/package.json | 5 +- packages/@react-types/card/src/index.d.ts | 56 +- packages/@react-types/checkbox/package.json | 10 +- packages/@react-types/checkbox/src/index.d.ts | 106 +--- packages/@react-types/color/package.json | 9 +- packages/@react-types/color/src/index.d.ts | 214 +------ packages/@react-types/combobox/package.json | 8 +- packages/@react-types/combobox/src/index.d.ts | 129 +---- .../@react-types/contextualhelp/package.json | 7 +- .../contextualhelp/src/index.d.ts | 19 +- packages/@react-types/datepicker/package.json | 11 +- .../@react-types/datepicker/src/index.d.ts | 185 +----- packages/@react-types/dialog/package.json | 8 +- packages/@react-types/dialog/src/index.d.ts | 92 +-- packages/@react-types/divider/package.json | 6 +- packages/@react-types/divider/src/index.d.ts | 22 +- packages/@react-types/form/package.json | 5 +- packages/@react-types/form/src/index.d.ts | 85 +-- packages/@react-types/grid/package.json | 2 +- packages/@react-types/grid/src/index.d.ts | 30 +- .../illustratedmessage/package.json | 6 +- .../illustratedmessage/src/index.d.ts | 8 +- packages/@react-types/image/package.json | 6 +- packages/@react-types/image/src/index.d.ts | 39 +- packages/@react-types/label/package.json | 6 +- packages/@react-types/label/src/index.d.ts | 31 +- packages/@react-types/layout/package.json | 6 +- packages/@react-types/layout/src/flex.d.ts | 21 - packages/@react-types/layout/src/grid.d.ts | 19 - packages/@react-types/layout/src/index.d.ts | 6 +- packages/@react-types/link/package.json | 7 +- packages/@react-types/link/src/index.d.ts | 20 +- packages/@react-types/listbox/package.json | 7 +- packages/@react-types/listbox/src/index.d.ts | 43 +- packages/@react-types/menu/package.json | 9 +- packages/@react-types/menu/src/index.d.ts | 78 +-- packages/@react-types/meter/package.json | 7 +- packages/@react-types/meter/src/index.d.ts | 13 +- .../@react-types/numberfield/package.json | 8 +- .../@react-types/numberfield/src/index.d.ts | 52 +- packages/@react-types/overlays/package.json | 7 +- packages/@react-types/overlays/src/index.d.ts | 82 +-- packages/@react-types/progress/package.json | 7 +- packages/@react-types/progress/src/index.d.ts | 94 +--- packages/@react-types/provider/package.json | 4 +- packages/@react-types/provider/src/index.d.ts | 113 +--- packages/@react-types/radio/package.json | 8 +- packages/@react-types/radio/src/index.d.ts | 63 +-- .../@react-types/searchfield/package.json | 9 +- .../@react-types/searchfield/src/index.d.ts | 26 +- packages/@react-types/select/package.json | 8 +- packages/@react-types/select/src/index.d.ts | 101 +--- packages/@react-types/shared/src/dom.d.ts | 57 ++ packages/@react-types/sidenav/README.md | 3 - packages/@react-types/sidenav/package.json | 23 - packages/@react-types/sidenav/src/index.d.ts | 35 -- packages/@react-types/slider/package.json | 8 +- packages/@react-types/slider/src/index.d.ts | 130 +---- .../@react-types/statuslight/package.json | 6 +- .../@react-types/statuslight/src/index.d.ts | 21 +- packages/@react-types/switch/package.json | 7 +- packages/@react-types/switch/src/index.d.ts | 43 +- packages/@react-types/table/package.json | 7 +- packages/@react-types/table/src/index.d.ts | 144 +---- packages/@react-types/tabs/package.json | 8 +- packages/@react-types/tabs/src/index.d.ts | 89 +-- packages/@react-types/text/package.json | 6 +- packages/@react-types/text/src/heading.d.ts | 31 - packages/@react-types/text/src/index.d.ts | 4 +- packages/@react-types/text/src/keyboard.d.ts | 26 - packages/@react-types/text/src/text.d.ts | 26 - packages/@react-types/textfield/package.json | 7 +- .../@react-types/textfield/src/index.d.ts | 57 +- packages/@react-types/tooltip/package.json | 9 +- packages/@react-types/tooltip/src/index.d.ts | 79 +-- packages/@react-types/view/package.json | 6 +- packages/@react-types/view/src/content.d.ts | 21 - packages/@react-types/view/src/footer.d.ts | 21 - packages/@react-types/view/src/header.d.ts | 21 - packages/@react-types/view/src/index.d.ts | 5 +- packages/@react-types/view/src/view.d.ts | 25 - packages/@react-types/well/package.json | 6 +- packages/@react-types/well/src/index.d.ts | 16 +- .../dev/docs/pages/react-spectrum/theming.mdx | 2 +- packages/dev/s2-docs/package.json | 1 - packages/dev/s2-docs/pages/s2/home/Mobile.tsx | 3 +- packages/dev/s2-docs/src/SearchMenu.tsx | 5 +- .../react-aria-components/docs/Dialog.mdx | 1 - packages/react-aria-components/docs/Modal.mdx | 1 - .../react-aria-components/docs/Popover.mdx | 2 +- packages/react-aria-components/package.json | 8 +- packages/react-aria-components/src/Form.tsx | 3 +- packages/react-aria-components/src/Table.tsx | 5 +- .../test/RangeCalendar.test.tsx | 2 +- packages/react-stately/src/index.ts | 2 +- scripts/removeUnusedDeps.js | 2 +- yarn.lock | 531 +++++++++--------- 685 files changed, 4147 insertions(+), 4463 deletions(-) create mode 100644 packages/@react-spectrum/card/src/types.ts create mode 100644 packages/@react-spectrum/provider/src/types.ts create mode 100644 packages/@react-spectrum/s2/src/useDOMRef.ts create mode 100644 packages/@react-spectrum/s2/src/useMediaQuery.ts create mode 100644 packages/@react-spectrum/table/src/types.ts create mode 100644 packages/@react-stately/color/src/types.ts create mode 100644 packages/@react-stately/datepicker/src/types.ts delete mode 100644 packages/@react-types/layout/src/flex.d.ts delete mode 100644 packages/@react-types/layout/src/grid.d.ts delete mode 100644 packages/@react-types/sidenav/README.md delete mode 100644 packages/@react-types/sidenav/package.json delete mode 100644 packages/@react-types/sidenav/src/index.d.ts delete mode 100644 packages/@react-types/text/src/heading.d.ts delete mode 100644 packages/@react-types/text/src/keyboard.d.ts delete mode 100644 packages/@react-types/text/src/text.d.ts delete mode 100644 packages/@react-types/view/src/content.d.ts delete mode 100644 packages/@react-types/view/src/footer.d.ts delete mode 100644 packages/@react-types/view/src/header.d.ts delete mode 100644 packages/@react-types/view/src/view.d.ts diff --git a/examples/rsp-next-ts-17/pages/_app.tsx b/examples/rsp-next-ts-17/pages/_app.tsx index d5a7ef8d618..3d87e2c78b2 100644 --- a/examples/rsp-next-ts-17/pages/_app.tsx +++ b/examples/rsp-next-ts-17/pages/_app.tsx @@ -8,8 +8,8 @@ import { Flex, Grid, View, + ColorScheme, } from "@adobe/react-spectrum"; -import { ColorScheme } from "@react-types/provider"; import { useState } from "react"; import Moon from "@spectrum-icons/workflow/Moon"; import Light from "@spectrum-icons/workflow/Light"; diff --git a/examples/rsp-next-ts/pages/_app.tsx b/examples/rsp-next-ts/pages/_app.tsx index d791494cdf9..db3f8aacb4c 100644 --- a/examples/rsp-next-ts/pages/_app.tsx +++ b/examples/rsp-next-ts/pages/_app.tsx @@ -7,8 +7,8 @@ import { Flex, Grid, View, + ColorScheme, } from "@adobe/react-spectrum"; -import { ColorScheme } from "@react-types/provider"; import { useState } from "react"; import Moon from "@spectrum-icons/workflow/Moon"; import Light from "@spectrum-icons/workflow/Light"; diff --git a/packages/@adobe/react-spectrum/src/index.ts b/packages/@adobe/react-spectrum/src/index.ts index c9085766e5d..d868b789ade 100644 --- a/packages/@adobe/react-spectrum/src/index.ts +++ b/packages/@adobe/react-spectrum/src/index.ts @@ -106,7 +106,7 @@ export type {SpectrumMeterProps} from '@react-spectrum/meter'; export type {SpectrumNumberFieldProps} from '@react-spectrum/numberfield'; export type {SpectrumPickerProps} from '@react-spectrum/picker'; export type {SpectrumProgressBarProps, SpectrumProgressCircleProps} from '@react-spectrum/progress'; -export type {ProviderContext, ProviderProps} from '@react-spectrum/provider'; +export type {ProviderContext, ProviderProps, ColorScheme, Scale, Theme} from '@react-spectrum/provider'; export type {SpectrumRadioGroupProps, SpectrumRadioProps} from '@react-spectrum/radio'; export type {SpectrumRangeSliderProps, SpectrumSliderProps} from '@react-spectrum/slider'; export type {SpectrumSearchFieldProps} from '@react-spectrum/searchfield'; diff --git a/packages/@react-aria/actiongroup/package.json b/packages/@react-aria/actiongroup/package.json index b098ebd1b08..b304c542abb 100644 --- a/packages/@react-aria/actiongroup/package.json +++ b/packages/@react-aria/actiongroup/package.json @@ -31,7 +31,6 @@ "@react-aria/interactions": "^3.27.1", "@react-aria/utils": "^3.33.1", "@react-stately/list": "^3.13.4", - "@react-types/actiongroup": "^3.4.23", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/actiongroup/src/index.ts b/packages/@react-aria/actiongroup/src/index.ts index 5a0f49a27e8..92fe1b7f2d5 100644 --- a/packages/@react-aria/actiongroup/src/index.ts +++ b/packages/@react-aria/actiongroup/src/index.ts @@ -9,8 +9,7 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ -export type {ActionGroupAria} from './useActionGroup'; +export type {ActionGroupProps, AriaActionGroupProps, ActionGroupAria} from './useActionGroup'; export {useActionGroup} from './useActionGroup'; export {useActionGroupItem} from './useActionGroupItem'; -export type {AriaActionGroupProps} from '@react-types/actiongroup'; export type {ActionGroupItemAria, AriaActionGroupItemProps} from './useActionGroupItem'; diff --git a/packages/@react-aria/actiongroup/src/useActionGroup.ts b/packages/@react-aria/actiongroup/src/useActionGroup.ts index e06a3123776..fa5f70682c1 100644 --- a/packages/@react-aria/actiongroup/src/useActionGroup.ts +++ b/packages/@react-aria/actiongroup/src/useActionGroup.ts @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import {AriaActionGroupProps} from '@react-types/actiongroup'; +import {AriaLabelingProps, DOMAttributes, DOMProps, FocusableElement, ItemElement, ItemRenderer, Key, MultipleSelection, Orientation, RefObject} from '@react-types/shared'; import {createFocusManager} from '@react-aria/focus'; -import {DOMAttributes, FocusableElement, Orientation, RefObject} from '@react-types/shared'; import {filterDOMProps, getEventTarget, nodeContains, useLayoutEffect} from '@react-aria/utils'; import {KeyboardEventHandler, useState} from 'react'; import {ListState} from '@react-stately/list'; @@ -24,6 +23,33 @@ const BUTTON_GROUP_ROLES = { 'multiple': 'toolbar' }; +// Not extending CollectionBase to avoid async loading props +export interface ActionGroupProps extends MultipleSelection { + /** + * The axis the ActionGroup should align with. + * @default 'horizontal' + */ + orientation?: Orientation, + /** An list of `Item` elements or a function. If the latter, a list of items must be provided using the `items` prop. */ + children: ItemElement | ItemElement[] | ItemRenderer, + /** A list of items to display as children. Must be used with a function as the sole child. */ + items?: Iterable, + /** A list of keys to disable. */ + disabledKeys?: Iterable, + /** + * Whether the ActionGroup is disabled. + * Shows that a selection exists, but is not available in that circumstance. + */ + isDisabled?: boolean, + /** + * Invoked when an action is taken on a child. Especially useful when `selectionMode` is none. + * The sole argument `key` is the key for the item. + */ + onAction?: (key: Key) => void +} + +export interface AriaActionGroupProps extends ActionGroupProps, DOMProps, AriaLabelingProps {} + export interface ActionGroupAria { actionGroupProps: DOMAttributes } diff --git a/packages/@react-aria/autocomplete/package.json b/packages/@react-aria/autocomplete/package.json index b01b1784780..7a144eb4642 100644 --- a/packages/@react-aria/autocomplete/package.json +++ b/packages/@react-aria/autocomplete/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/combobox": "^3.15.0", "@react-aria/focus": "^3.21.5", "@react-aria/i18n": "^3.12.16", @@ -36,8 +37,7 @@ "@react-aria/utils": "^3.33.1", "@react-stately/autocomplete": "3.0.0-beta.4", "@react-stately/combobox": "^3.13.0", - "@react-types/autocomplete": "3.0.0-alpha.38", - "@react-types/button": "^3.15.1", + "@react-stately/searchfield": "^3.5.19", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/autocomplete/src/index.ts b/packages/@react-aria/autocomplete/src/index.ts index 30bac8eecac..02a479de862 100644 --- a/packages/@react-aria/autocomplete/src/index.ts +++ b/packages/@react-aria/autocomplete/src/index.ts @@ -12,6 +12,5 @@ export {useSearchAutocomplete} from './useSearchAutocomplete'; export {useAutocomplete} from './useAutocomplete'; -export type {AriaSearchAutocompleteOptions, SearchAutocompleteAria} from './useSearchAutocomplete'; -export type {AriaSearchAutocompleteProps} from '@react-types/autocomplete'; +export type {SearchAutocompleteProps, AriaSearchAutocompleteProps, AriaSearchAutocompleteOptions, SearchAutocompleteAria} from './useSearchAutocomplete'; export type {AriaAutocompleteProps, AriaAutocompleteOptions, AutocompleteAria, CollectionOptions, InputProps} from './useAutocomplete'; diff --git a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts index 2c51aaf0a0a..c030741e185 100644 --- a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts @@ -10,15 +10,46 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, Key, KeyboardDelegate, LayoutDelegate, RefObject, ValidationResult} from '@react-types/shared'; import {AriaListBoxOptions} from '@react-aria/listbox'; -import {AriaSearchAutocompleteProps} from '@react-types/autocomplete'; -import {ComboBoxState} from '@react-stately/combobox'; -import {DOMAttributes, KeyboardDelegate, LayoutDelegate, RefObject, ValidationResult} from '@react-types/shared'; +import {AriaSearchFieldProps, useSearchField} from '@react-aria/searchfield'; +import {ComboBoxState, MenuTriggerAction} from '@react-stately/combobox'; import {InputHTMLAttributes} from 'react'; import {mergeProps} from '@react-aria/utils'; +import {SearchFieldProps} from '@react-stately/searchfield'; import {useComboBox} from '@react-aria/combobox'; -import {useSearchField} from '@react-aria/searchfield'; + +export interface SearchAutocompleteProps extends CollectionBase, Omit { + /** The list of SearchAutocomplete items (uncontrolled). */ + defaultItems?: Iterable, + /** The list of SearchAutocomplete items (controlled). */ + items?: Iterable, + /** Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. */ + onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void, + /** The value of the SearchAutocomplete input (controlled). */ + inputValue?: string, + /** The default value of the SearchAutocomplete input (uncontrolled). */ + defaultInputValue?: string, + /** Handler that is called when the SearchAutocomplete input value changes. */ + onInputChange?: (value: string) => void, + /** + * The interaction required to display the SearchAutocomplete menu. + * @default 'input' + */ + menuTrigger?: MenuTriggerAction, + /** Handler that is called when the SearchAutocomplete is submitted. + * + * A `value` will be passed if the submission is a custom value (e.g. a user types then presses enter). + * If the input is a selected item, `value` will be null. + * + * A `key` will be passed if the submission is a selected item (e.g. a user clicks or presses enter on an option). + * If the input is a custom value, `key` will be null. + */ + onSubmit?: (value: string | null, key: Key | null) => void +} + +export interface AriaSearchAutocompleteProps extends SearchAutocompleteProps, Omit, DOMProps, AriaLabelingProps {} export interface SearchAutocompleteAria extends ValidationResult { /** Props for the label element. */ diff --git a/packages/@react-aria/breadcrumbs/package.json b/packages/@react-aria/breadcrumbs/package.json index 1ec292e1915..a8017f355f9 100644 --- a/packages/@react-aria/breadcrumbs/package.json +++ b/packages/@react-aria/breadcrumbs/package.json @@ -29,7 +29,6 @@ "@react-aria/i18n": "^3.12.16", "@react-aria/link": "^3.8.9", "@react-aria/utils": "^3.33.1", - "@react-types/breadcrumbs": "^3.7.19", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/breadcrumbs/src/index.ts b/packages/@react-aria/breadcrumbs/src/index.ts index 5e8220708ca..2d2f7f10f07 100644 --- a/packages/@react-aria/breadcrumbs/src/index.ts +++ b/packages/@react-aria/breadcrumbs/src/index.ts @@ -11,6 +11,5 @@ */ export {useBreadcrumbItem} from './useBreadcrumbItem'; export {useBreadcrumbs} from './useBreadcrumbs'; -export type {AriaBreadcrumbItemProps, AriaBreadcrumbsProps} from '@react-types/breadcrumbs'; -export type {BreadcrumbItemAria} from './useBreadcrumbItem'; -export type {BreadcrumbsAria} from './useBreadcrumbs'; +export type {BreadcrumbItemProps, AriaBreadcrumbItemProps, BreadcrumbItemAria} from './useBreadcrumbItem'; +export type {AriaBreadcrumbsProps, BreadcrumbsAria} from './useBreadcrumbs'; diff --git a/packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts b/packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts index fc791dd1dd3..cdc71467e48 100644 --- a/packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts +++ b/packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts @@ -10,9 +10,31 @@ * governing permissions and limitations under the License. */ -import {AriaBreadcrumbItemProps} from '@react-types/breadcrumbs'; -import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; -import {useLink} from '@react-aria/link'; +import {AriaLinkProps, useLink} from '@react-aria/link'; +import {DOMAttributes, DOMProps, FocusableElement, LinkDOMProps, RefObject} from '@react-types/shared'; +import {ReactNode} from 'react'; + +export interface BreadcrumbItemProps extends AriaLinkProps, LinkDOMProps { + /** Whether the breadcrumb item represents the current page. */ + isCurrent?: boolean, + /** + * The type of current location the breadcrumb item represents, if `isCurrent` is true. + * @default 'page' + */ + 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean | 'true' | 'false', + /** Whether the breadcrumb item is disabled. */ + isDisabled?: boolean, + /** The contents of the breadcrumb item. */ + children: ReactNode +} + +export interface AriaBreadcrumbItemProps extends BreadcrumbItemProps, DOMProps { + /** + * The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'. + * @default 'a' + */ + elementType?: string +} export interface BreadcrumbItemAria { /** Props for the breadcrumb item link element. */ diff --git a/packages/@react-aria/breadcrumbs/src/useBreadcrumbs.ts b/packages/@react-aria/breadcrumbs/src/useBreadcrumbs.ts index dfc4d5dbdfd..d1a69883e22 100644 --- a/packages/@react-aria/breadcrumbs/src/useBreadcrumbs.ts +++ b/packages/@react-aria/breadcrumbs/src/useBreadcrumbs.ts @@ -10,13 +10,14 @@ * governing permissions and limitations under the License. */ -import {AriaBreadcrumbsProps} from '@react-types/breadcrumbs'; -import {DOMAttributes} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface AriaBreadcrumbsProps extends DOMProps, AriaLabelingProps {} + export interface BreadcrumbsAria { /** Props for the breadcrumbs navigation element. */ navProps: DOMAttributes diff --git a/packages/@react-aria/button/package.json b/packages/@react-aria/button/package.json index 738ca063073..4e765c8f95b 100644 --- a/packages/@react-aria/button/package.json +++ b/packages/@react-aria/button/package.json @@ -30,7 +30,6 @@ "@react-aria/toolbar": "3.0.0-beta.24", "@react-aria/utils": "^3.33.1", "@react-stately/toggle": "^3.9.5", - "@react-types/button": "^3.15.1", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/button/src/index.ts b/packages/@react-aria/button/src/index.ts index dbae2a493f6..e1ec82745ab 100644 --- a/packages/@react-aria/button/src/index.ts +++ b/packages/@react-aria/button/src/index.ts @@ -12,6 +12,6 @@ export {useButton} from './useButton'; export {useToggleButton} from './useToggleButton'; export {useToggleButtonGroup, useToggleButtonGroupItem} from './useToggleButtonGroup'; -export type {AriaButtonOptions, ButtonAria} from './useButton'; -export type {AriaButtonProps, AriaToggleButtonProps} from '@react-types/button'; +export type {ButtonProps, LinkButtonProps, AriaBaseButtonProps, AriaButtonProps, AriaButtonOptions, ButtonAria} from './useButton'; +export type {ToggleButtonProps, AriaToggleButtonProps} from './useToggleButton'; export type {AriaToggleButtonGroupProps, ToggleButtonGroupAria, AriaToggleButtonGroupItemProps} from './useToggleButtonGroup'; diff --git a/packages/@react-aria/button/src/useButton.ts b/packages/@react-aria/button/src/useButton.ts index 163b00c05e6..f77944b1a90 100644 --- a/packages/@react-aria/button/src/useButton.ts +++ b/packages/@react-aria/button/src/useButton.ts @@ -16,13 +16,90 @@ import { ElementType, HTMLAttributes, InputHTMLAttributes, + JSXElementConstructor, + ReactNode, RefObject } from 'react'; -import {AriaButtonProps} from '@react-types/button'; -import {DOMAttributes} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, FocusableDOMProps, FocusableProps, PressEvents} from '@react-types/shared'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {useFocusable, usePress} from '@react-aria/interactions'; +export interface ButtonProps extends PressEvents, FocusableProps { + /** Whether the button is disabled. */ + isDisabled?: boolean, + /** The content to display in the button. */ + children?: ReactNode +} + +export interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps { + /** Indicates whether the element is disabled to users of assistive technology. */ + 'aria-disabled'?: boolean | 'true' | 'false', + /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ + 'aria-expanded'?: boolean | 'true' | 'false', + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + 'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false', + /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */ + 'aria-controls'?: string, + /** Indicates the current "pressed" state of toggle buttons. */ + 'aria-pressed'?: boolean | 'true' | 'false' | 'mixed', + /** Indicates whether this element represents the current item within a container or set of related elements. */ + 'aria-current'?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time', + /** + * The behavior of the button when used in an HTML form. + * @default 'button' + */ + type?: 'button' | 'submit' | 'reset', + /** + * Whether to prevent focus from moving to the button when pressing it. + * + * Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, + * such as ComboBox's MenuTrigger or a NumberField's increment/decrement control. + */ + preventFocusOnPress?: boolean, + /** + * The `
` element to associate the button with. + * The value of this attribute must be the id of a `` in the same document. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form). + */ + form?: string, + /** + * The URL that processes the information submitted by the button. + * Overrides the action attribute of the button's form owner. + */ + formAction?: ButtonHTMLAttributes['formAction'], + /** Indicates how to encode the form data that is submitted. */ + formEncType?: string, + /** Indicates the HTTP method used to submit the form. */ + formMethod?: string, + /** Indicates that the form is not to be validated when it is submitted. */ + formNoValidate?: boolean, + /** Overrides the target attribute of the button's form owner. */ + formTarget?: string, + /** Submitted as a pair with the button's value as part of the form data. */ + name?: string, + /** The value associated with the button's name when it's submitted with the form data. */ + value?: string +} + +export interface AriaButtonElementTypeProps { + /** + * The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`. + * @default 'button' + */ + elementType?: T | JSXElementConstructor +} + +export interface LinkButtonProps extends AriaButtonElementTypeProps { + /** A URL to link to if elementType="a". */ + href?: string, + /** The target window for the link. */ + target?: string, + /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */ + rel?: string +} + +export interface AriaButtonProps extends ButtonProps, LinkButtonProps, AriaBaseButtonProps {} + export interface AriaButtonOptions extends Omit, 'children'> {} export interface ButtonAria { diff --git a/packages/@react-aria/button/src/useToggleButton.ts b/packages/@react-aria/button/src/useToggleButton.ts index 9ec8d712194..ee6e95a6a38 100644 --- a/packages/@react-aria/button/src/useToggleButton.ts +++ b/packages/@react-aria/button/src/useToggleButton.ts @@ -18,12 +18,22 @@ import { InputHTMLAttributes, RefObject } from 'react'; -import {AriaToggleButtonProps} from '@react-types/button'; -import {ButtonAria, useButton} from './useButton'; +import {AriaBaseButtonProps, AriaButtonElementTypeProps, ButtonAria, ButtonProps, useButton} from './useButton'; import {chain, mergeProps} from '@react-aria/utils'; import {DOMAttributes} from '@react-types/shared'; import {ToggleState} from '@react-stately/toggle'; +export interface ToggleButtonProps extends ButtonProps { + /** Whether the element should be selected (controlled). */ + isSelected?: boolean, + /** Whether the element should be selected (uncontrolled). */ + defaultSelected?: boolean, + /** Handler that is called when the element's selection state changes. */ + onChange?: (isSelected: boolean) => void +} + +export interface AriaToggleButtonProps extends ToggleButtonProps, Omit, AriaButtonElementTypeProps {} + export interface AriaToggleButtonOptions extends Omit, 'children'> {} export interface ToggleButtonAria extends ButtonAria { diff --git a/packages/@react-aria/button/src/useToggleButtonGroup.ts b/packages/@react-aria/button/src/useToggleButtonGroup.ts index 3115b1ade3f..b48ac768d72 100644 --- a/packages/@react-aria/button/src/useToggleButtonGroup.ts +++ b/packages/@react-aria/button/src/useToggleButtonGroup.ts @@ -17,9 +17,8 @@ import { HTMLAttributes, InputHTMLAttributes } from 'react'; -import {AriaLabelingProps, DOMAttributes, Orientation, RefObject} from '@react-types/shared'; -import {AriaToggleButtonGroupItemProps} from '@react-types/button'; -import {ToggleButtonAria, useToggleButton} from './useToggleButton'; +import {AriaLabelingProps, DOMAttributes, Key, Orientation, RefObject} from '@react-types/shared'; +import {AriaToggleButtonProps, ToggleButtonAria, useToggleButton} from './useToggleButton'; import {ToggleGroupProps, ToggleGroupState, ToggleState} from '@react-stately/toggle'; import {useToolbar} from '@react-aria/toolbar'; @@ -51,7 +50,11 @@ export function useToggleButtonGroup(props: AriaToggleButtonGroupProps, state: T }; } -export type {AriaToggleButtonGroupItemProps}; +export interface AriaToggleButtonGroupItemProps extends Omit, 'id' | 'isSelected' | 'defaultSelected' | 'onChange'> { + /** An identifier for the item in the `selectedKeys` of a ToggleButtonGroup. */ + id: Key +} + export interface AriaToggleButtonGroupItemOptions extends Omit, 'children'> {} // Order with overrides is important: 'button' should be default diff --git a/packages/@react-aria/button/stories/useButton.stories.tsx b/packages/@react-aria/button/stories/useButton.stories.tsx index e5bdb154f4f..fae53d3229f 100644 --- a/packages/@react-aria/button/stories/useButton.stories.tsx +++ b/packages/@react-aria/button/stories/useButton.stories.tsx @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '../'; import React, {JSX, useRef} from 'react'; import {StoryObj} from '@storybook/react'; -import {useButton} from '../'; export default { title: 'useButton' diff --git a/packages/@react-aria/calendar/package.json b/packages/@react-aria/calendar/package.json index dda1b4e2d1d..f7fea0d23c1 100644 --- a/packages/@react-aria/calendar/package.json +++ b/packages/@react-aria/calendar/package.json @@ -27,13 +27,12 @@ }, "dependencies": { "@internationalized/date": "^3.12.0", + "@react-aria/button": "^3.14.5", "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", "@react-aria/live-announcer": "^3.4.4", "@react-aria/utils": "^3.33.1", "@react-stately/calendar": "^3.9.3", - "@react-types/button": "^3.15.1", - "@react-types/calendar": "^3.8.3", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/calendar/src/index.ts b/packages/@react-aria/calendar/src/index.ts index 1676e603a42..2f9138f0bc5 100644 --- a/packages/@react-aria/calendar/src/index.ts +++ b/packages/@react-aria/calendar/src/index.ts @@ -15,7 +15,9 @@ export {useRangeCalendar} from './useRangeCalendar'; export {useCalendarGrid} from './useCalendarGrid'; export {useCalendarCell} from './useCalendarCell'; -export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, DateValue, RangeCalendarProps} from '@react-types/calendar'; +export type {AriaCalendarProps} from './useCalendar'; +export type {AriaRangeCalendarProps} from './useRangeCalendar'; +export type {CalendarProps, DateValue, RangeCalendarProps} from '@react-stately/calendar'; export type {CalendarAria} from './useCalendarBase'; export type {AriaCalendarGridProps, CalendarGridAria} from './useCalendarGrid'; export type {AriaCalendarCellProps, CalendarCellAria} from './useCalendarCell'; diff --git a/packages/@react-aria/calendar/src/useCalendar.ts b/packages/@react-aria/calendar/src/useCalendar.ts index 40ac2395117..bc81929f8a0 100644 --- a/packages/@react-aria/calendar/src/useCalendar.ts +++ b/packages/@react-aria/calendar/src/useCalendar.ts @@ -10,9 +10,11 @@ * governing permissions and limitations under the License. */ -import {AriaCalendarProps, DateValue} from '@react-types/calendar'; +import {AriaLabelingProps, DOMProps} from '@react-types/shared'; import {CalendarAria, useCalendarBase} from './useCalendarBase'; -import {CalendarState} from '@react-stately/calendar'; +import {CalendarProps, CalendarState, DateValue} from '@react-stately/calendar'; + +export interface AriaCalendarProps extends CalendarProps, DOMProps, AriaLabelingProps {} /** * Provides the behavior and accessibility implementation for a calendar component. diff --git a/packages/@react-aria/calendar/src/useCalendarBase.ts b/packages/@react-aria/calendar/src/useCalendarBase.ts index 7792a307c1c..9ba5f127956 100644 --- a/packages/@react-aria/calendar/src/useCalendarBase.ts +++ b/packages/@react-aria/calendar/src/useCalendarBase.ts @@ -11,10 +11,9 @@ */ import {announce} from '@react-aria/live-announcer'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaLabelingProps, DOMAttributes, DOMProps} from '@react-types/shared'; -import {CalendarPropsBase} from '@react-types/calendar'; -import {CalendarState, RangeCalendarState} from '@react-stately/calendar'; +import {CalendarPropsBase, CalendarState, RangeCalendarState} from '@react-stately/calendar'; import {filterDOMProps, mergeProps, useLabels, useSlotId, useUpdateEffect} from '@react-aria/utils'; import {hookData, useSelectedDateDescription, useVisibleRangeDescription} from './utils'; // @ts-ignore diff --git a/packages/@react-aria/calendar/src/useRangeCalendar.ts b/packages/@react-aria/calendar/src/useRangeCalendar.ts index 2f09ab5bb2f..b93ac911126 100644 --- a/packages/@react-aria/calendar/src/useRangeCalendar.ts +++ b/packages/@react-aria/calendar/src/useRangeCalendar.ts @@ -10,13 +10,26 @@ * governing permissions and limitations under the License. */ -import {AriaRangeCalendarProps, DateValue} from '@react-types/calendar'; +import {AriaLabelingProps, DOMProps, FocusableElement, RefObject} from '@react-types/shared'; import {CalendarAria, useCalendarBase} from './useCalendarBase'; -import {FocusableElement, RefObject} from '@react-types/shared'; +import {DateValue, RangeCalendarProps, RangeCalendarState} from '@react-stately/calendar'; import {isFocusWithin, nodeContains, useEvent} from '@react-aria/utils'; -import {RangeCalendarState} from '@react-stately/calendar'; import {useRef} from 'react'; +export interface AriaRangeCalendarProps extends RangeCalendarProps, DOMProps, AriaLabelingProps { + /** + * Controls the behavior when a pointer is released outside the calendar: + * + * - `clear`: clear the currently selected range of dates. + * + * - `reset`: reset the selection to the previously selected range of dates. + * + * - `select`: select the currently hovered range of dates. + * @default 'select' + */ + interactOutsideBehavior?: 'clear' | 'reset' | 'select' +} + /** * Provides the behavior and accessibility implementation for a range calendar component. * A range calendar displays one or more date grids and allows users to select a contiguous range of dates. diff --git a/packages/@react-aria/checkbox/package.json b/packages/@react-aria/checkbox/package.json index 872b6db9d16..efd612a8080 100644 --- a/packages/@react-aria/checkbox/package.json +++ b/packages/@react-aria/checkbox/package.json @@ -34,7 +34,6 @@ "@react-stately/checkbox": "^3.7.5", "@react-stately/form": "^3.2.4", "@react-stately/toggle": "^3.9.5", - "@react-types/checkbox": "^3.10.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/checkbox/src/index.ts b/packages/@react-aria/checkbox/src/index.ts index 536cafb0826..68fa3b79fb4 100644 --- a/packages/@react-aria/checkbox/src/index.ts +++ b/packages/@react-aria/checkbox/src/index.ts @@ -13,5 +13,6 @@ export type {CheckboxAria} from './useCheckbox'; export {useCheckbox} from './useCheckbox'; export {useCheckboxGroup} from './useCheckboxGroup'; export {useCheckboxGroupItem} from './useCheckboxGroupItem'; -export type {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox'; -export type {CheckboxGroupAria} from './useCheckboxGroup'; +export type {CheckboxProps, AriaCheckboxProps} from './useCheckbox'; +export type {AriaCheckboxGroupProps, CheckboxGroupAria} from './useCheckboxGroup'; +export type {AriaCheckboxGroupItemProps} from './useCheckboxGroupItem'; diff --git a/packages/@react-aria/checkbox/src/useCheckbox.ts b/packages/@react-aria/checkbox/src/useCheckbox.ts index 5ef879aeabd..d984bc9b1d4 100644 --- a/packages/@react-aria/checkbox/src/useCheckbox.ts +++ b/packages/@react-aria/checkbox/src/useCheckbox.ts @@ -10,15 +10,24 @@ * governing permissions and limitations under the License. */ -import {AriaCheckboxProps} from '@react-types/checkbox'; +import {AriaToggleProps, useToggle} from '@react-aria/toggle'; +import {InputDOMProps, RefObject, ValidationResult} from '@react-types/shared'; import {InputHTMLAttributes, LabelHTMLAttributes, useEffect, useMemo} from 'react'; import {mergeProps} from '@react-aria/utils'; import {privateValidationStateProp, useFormValidationState} from '@react-stately/form'; -import {RefObject, ValidationResult} from '@react-types/shared'; -import {ToggleState} from '@react-stately/toggle'; +import {ToggleProps, ToggleState} from '@react-stately/toggle'; import {useFormValidation} from '@react-aria/form'; import {usePress} from '@react-aria/interactions'; -import {useToggle} from '@react-aria/toggle'; + +export interface CheckboxProps extends ToggleProps { + /** + * Indeterminism is presentational only. + * The indeterminate visual representation remains regardless of user interaction. + */ + isIndeterminate?: boolean +} + +export interface AriaCheckboxProps extends CheckboxProps, InputDOMProps, AriaToggleProps {} export interface CheckboxAria extends ValidationResult { /** Props for the label wrapper element. */ diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts index 0056b9978ba..ec3ffb4d791 100644 --- a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts +++ b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts @@ -10,14 +10,15 @@ * governing permissions and limitations under the License. */ -import {AriaCheckboxGroupProps} from '@react-types/checkbox'; +import {AriaLabelingProps, AriaValidationProps, DOMAttributes, DOMProps, FocusEvents, InputDOMProps, ValidationResult} from '@react-types/shared'; import {checkboxGroupData} from './utils'; -import {CheckboxGroupState} from '@react-stately/checkbox'; -import {DOMAttributes, ValidationResult} from '@react-types/shared'; +import {CheckboxGroupProps, CheckboxGroupState} from '@react-stately/checkbox'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {useField} from '@react-aria/label'; import {useFocusWithin} from '@react-aria/interactions'; +export interface AriaCheckboxGroupProps extends CheckboxGroupProps, InputDOMProps, DOMProps, AriaLabelingProps, AriaValidationProps, FocusEvents {} + export interface CheckboxGroupAria extends ValidationResult { /** Props for the checkbox group wrapper element. */ groupProps: DOMAttributes, diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts index cc91277bfe3..05a7d335d09 100644 --- a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts +++ b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts @@ -10,8 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaCheckboxGroupItemProps} from '@react-types/checkbox'; -import {CheckboxAria, useCheckbox} from './useCheckbox'; +import {AriaCheckboxProps, CheckboxAria, useCheckbox} from './useCheckbox'; import {checkboxGroupData} from './utils'; import {CheckboxGroupState} from '@react-stately/checkbox'; import {DEFAULT_VALIDATION_RESULT, privateValidationStateProp, useFormValidationState} from '@react-stately/form'; @@ -19,6 +18,10 @@ import {RefObject, ValidationResult} from '@react-types/shared'; import {useEffect, useRef} from 'react'; import {useToggleState} from '@react-stately/toggle'; +export interface AriaCheckboxGroupItemProps extends Omit { + value: string +} + /** * Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group. * Checkbox groups allow users to select multiple items from a list of options. diff --git a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx index 7d904b87cab..c09e04f901f 100644 --- a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx +++ b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx @@ -10,11 +10,10 @@ * governing permissions and limitations under the License. */ -import {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps} from '@react-types/checkbox'; +import {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, useCheckboxGroup, useCheckboxGroupItem} from '../'; import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox'; import {pointerMap, render} from '@react-spectrum/test-utils-internal'; import React, {useRef} from 'react'; -import {useCheckboxGroup, useCheckboxGroupItem} from '../'; import userEvent from '@testing-library/user-event'; function Checkbox({checkboxGroupState, ...props}: AriaCheckboxGroupItemProps & { checkboxGroupState: CheckboxGroupState }) { diff --git a/packages/@react-aria/collections/package.json b/packages/@react-aria/collections/package.json index 893a3584021..26f49161370 100644 --- a/packages/@react-aria/collections/package.json +++ b/packages/@react-aria/collections/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-aria/interactions": "^3.27.1", "@react-aria/ssr": "^3.9.10", - "@react-aria/utils": "^3.33.1", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0", "use-sync-external-store": "^1.6.0" diff --git a/packages/@react-aria/color/docs/useColorSlider.mdx b/packages/@react-aria/color/docs/useColorSlider.mdx index 35e2939ec96..91bea26cb59 100644 --- a/packages/@react-aria/color/docs/useColorSlider.mdx +++ b/packages/@react-aria/color/docs/useColorSlider.mdx @@ -12,7 +12,6 @@ export default Layout; import docs from 'docs:@react-aria/color'; import statelyDocs from 'docs:@react-stately/color'; -import typesDocs from 'docs:@react-types/color'; import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/color/package.json'; import Anatomy from './ColorSliderAnatomy.svg'; @@ -87,7 +86,7 @@ label, or override this with a more specific label, a `label`, `aria-label` or ` This example shows how to build a horizontal color slider. It also includes a label which can be clicked to focus the thumb. Styling for the track background and positioning of the thumb are provided by `useColorSlider` in the returned `style` prop for each element. -If no `label` prop is given, it uses the object to +If no `label` prop is given, it uses the object to get a localized string for the channel name using the `getChannelName` method. In addition, an `` element is used to display the current channel value as text. This is formatted using the Color object's `formatChannelValue` method, which formats the value according to the channel type and locale settings. diff --git a/packages/@react-aria/color/package.json b/packages/@react-aria/color/package.json index 3eb158e582f..b4c2ecd0d8a 100644 --- a/packages/@react-aria/color/package.json +++ b/packages/@react-aria/color/package.json @@ -36,7 +36,6 @@ "@react-aria/visually-hidden": "^3.8.31", "@react-stately/color": "^3.9.5", "@react-stately/form": "^3.2.4", - "@react-types/color": "^3.1.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/color/src/index.ts b/packages/@react-aria/color/src/index.ts index 8f65cf51bcb..ca379a6a376 100644 --- a/packages/@react-aria/color/src/index.ts +++ b/packages/@react-aria/color/src/index.ts @@ -15,10 +15,9 @@ export {useColorWheel} from './useColorWheel'; export {useColorField} from './useColorField'; export {useColorSwatch} from './useColorSwatch'; export {useColorChannelField} from './useColorChannelField'; -export type {AriaColorAreaOptions, ColorAreaAria} from './useColorArea'; -export type {AriaColorSliderOptions, ColorSliderAria} from './useColorSlider'; -export type {AriaColorWheelOptions, ColorWheelAria} from './useColorWheel'; -export type {AriaColorAreaProps, AriaColorFieldProps, AriaColorSliderProps} from '@react-types/color'; -export type {ColorFieldAria} from './useColorField'; +export type {AriaColorAreaProps, AriaColorAreaOptions, ColorAreaAria} from './useColorArea'; +export type {AriaColorSliderProps, AriaColorSliderOptions, ColorSliderAria} from './useColorSlider'; +export type {AriaColorWheelProps, AriaColorWheelOptions, ColorWheelAria} from './useColorWheel'; +export type {AriaColorFieldProps, ColorFieldAria} from './useColorField'; export type {AriaColorSwatchProps, ColorSwatchAria} from './useColorSwatch'; export type {AriaColorChannelFieldProps, ColorChannelFieldAria} from './useColorChannelField'; diff --git a/packages/@react-aria/color/src/useColorArea.ts b/packages/@react-aria/color/src/useColorArea.ts index 13d56119eef..8fd6e77b279 100644 --- a/packages/@react-aria/color/src/useColorArea.ts +++ b/packages/@react-aria/color/src/useColorArea.ts @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import {AriaColorAreaProps, ColorChannel} from '@react-types/color'; -import {ColorAreaState} from '@react-stately/color'; -import {DOMAttributes, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, RefObject} from '@react-types/shared'; +import {ColorAreaProps, ColorAreaState, ColorChannel} from '@react-stately/color'; import {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -22,6 +21,23 @@ import {useFocus, useFocusWithin, useKeyboard, useMove} from '@react-aria/intera import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useVisuallyHidden} from '@react-aria/visually-hidden'; +export interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps { + /** + * The name of the x channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + xName?: string, + /** + * The name of the y channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + yName?: string, + /** + * The `` element to associate the ColorArea with. + * The value of this attribute must be the id of a `` in the same document. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). + */ + form?: string +} + export interface ColorAreaAria { /** Props for the color area container element. */ colorAreaProps: DOMAttributes, diff --git a/packages/@react-aria/color/src/useColorAreaGradient.ts b/packages/@react-aria/color/src/useColorAreaGradient.ts index 1bb231c5ddd..e3c2acf1d8f 100644 --- a/packages/@react-aria/color/src/useColorAreaGradient.ts +++ b/packages/@react-aria/color/src/useColorAreaGradient.ts @@ -10,8 +10,7 @@ * governing permissions and limitations under the License. */ -import {Color, ColorChannel} from '@react-types/color'; -import {ColorAreaState, parseColor} from '@react-stately/color'; +import {Color, ColorAreaState, ColorChannel, parseColor} from '@react-stately/color'; import {CSSProperties, useMemo} from 'react'; const hue = (color: Color) => [0, 60, 120, 180, 240, 300, 360].map(hue => color.withChannelValue('hue', hue).toString('css')).join(', '); diff --git a/packages/@react-aria/color/src/useColorField.ts b/packages/@react-aria/color/src/useColorField.ts index b5f00af6a55..c0495edc721 100644 --- a/packages/@react-aria/color/src/useColorField.ts +++ b/packages/@react-aria/color/src/useColorField.ts @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import {AriaColorFieldProps} from '@react-types/color'; -import {ColorFieldState} from '@react-stately/color'; -import {DOMAttributes, ValidationResult} from '@react-types/shared'; +import {AriaLabelingProps, AriaValidationProps, DOMAttributes, FocusableDOMProps, TextInputDOMProps, ValidationResult} from '@react-types/shared'; +import {ColorFieldProps, ColorFieldState} from '@react-stately/color'; import { InputHTMLAttributes, LabelHTMLAttributes, @@ -26,6 +25,11 @@ import {useFocusWithin, useScrollWheel} from '@react-aria/interactions'; import {useFormattedTextField} from '@react-aria/textfield'; import {useSpinButton} from '@react-aria/spinbutton'; +export interface AriaColorFieldProps extends ColorFieldProps, AriaLabelingProps, FocusableDOMProps, Omit, AriaValidationProps { + /** Enables or disables changing the value with scroll. */ + isWheelDisabled?: boolean +} + export interface ColorFieldAria extends ValidationResult { /** Props for the label element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-aria/color/src/useColorSlider.ts b/packages/@react-aria/color/src/useColorSlider.ts index 804914a983f..18057cb9e62 100644 --- a/packages/@react-aria/color/src/useColorSlider.ts +++ b/packages/@react-aria/color/src/useColorSlider.ts @@ -10,15 +10,16 @@ * governing permissions and limitations under the License. */ -import {AriaColorSliderProps} from '@react-types/color'; -import {ColorSliderState} from '@react-stately/color'; -import {DOMAttributes, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, InputDOMProps, RefObject} from '@react-types/shared'; +import {ColorSliderProps, ColorSliderState} from '@react-stately/color'; import {InputHTMLAttributes} from 'react'; import {mergeProps} from '@react-aria/utils'; import {useLocale} from '@react-aria/i18n'; import {useSlider, useSliderThumb} from '@react-aria/slider'; import {useVisuallyHidden} from '@react-aria/visually-hidden'; +export interface AriaColorSliderProps extends ColorSliderProps, InputDOMProps, DOMProps, AriaLabelingProps {} + export interface AriaColorSliderOptions extends AriaColorSliderProps { /** A ref for the track element. */ trackRef: RefObject, diff --git a/packages/@react-aria/color/src/useColorSwatch.ts b/packages/@react-aria/color/src/useColorSwatch.ts index f80d95e106b..676637ae11d 100644 --- a/packages/@react-aria/color/src/useColorSwatch.ts +++ b/packages/@react-aria/color/src/useColorSwatch.ts @@ -11,12 +11,11 @@ */ import {AriaLabelingProps, DOMProps} from '@react-types/shared'; -import {Color} from '@react-types/color'; +import {Color, parseColor} from '@react-stately/color'; import {filterDOMProps, useId} from '@react-aria/utils'; import {HTMLAttributes, useMemo} from 'react'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {parseColor} from '@react-stately/color'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; export interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps { diff --git a/packages/@react-aria/color/src/useColorWheel.ts b/packages/@react-aria/color/src/useColorWheel.ts index 789e9312784..ad321fb7094 100644 --- a/packages/@react-aria/color/src/useColorWheel.ts +++ b/packages/@react-aria/color/src/useColorWheel.ts @@ -10,15 +10,16 @@ * governing permissions and limitations under the License. */ -import {AriaColorWheelProps} from '@react-types/color'; -import {ColorWheelState} from '@react-stately/color'; -import {DOMAttributes, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, InputDOMProps, RefObject} from '@react-types/shared'; +import {ColorWheelProps, ColorWheelState} from '@react-stately/color'; import {focusWithoutScrolling, getEventTarget, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils'; import React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef} from 'react'; import {useKeyboard, useMove} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; import {useVisuallyHidden} from '@react-aria/visually-hidden'; +export interface AriaColorWheelProps extends ColorWheelProps, InputDOMProps, DOMProps, AriaLabelingProps {} + export interface AriaColorWheelOptions extends AriaColorWheelProps { /** The outer radius of the color wheel. */ outerRadius: number, diff --git a/packages/@react-aria/color/test/useColorWheel.test.tsx b/packages/@react-aria/color/test/useColorWheel.test.tsx index 03d343be3f5..9a3acab6738 100644 --- a/packages/@react-aria/color/test/useColorWheel.test.tsx +++ b/packages/@react-aria/color/test/useColorWheel.test.tsx @@ -11,8 +11,7 @@ */ import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils-internal'; -import {ColorWheelProps} from '@react-types/color'; -import {parseColor, useColorWheelState} from '@react-stately/color'; +import {ColorWheelProps, parseColor, useColorWheelState} from '@react-stately/color'; import React, {useRef} from 'react'; import {useColorWheel} from '../'; import userEvent from '@testing-library/user-event'; diff --git a/packages/@react-aria/combobox/package.json b/packages/@react-aria/combobox/package.json index d65910f05e4..d8f54b22b84 100644 --- a/packages/@react-aria/combobox/package.json +++ b/packages/@react-aria/combobox/package.json @@ -26,9 +26,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/focus": "^3.21.5", "@react-aria/i18n": "^3.12.16", - "@react-aria/interactions": "^3.27.1", "@react-aria/listbox": "^3.15.3", "@react-aria/live-announcer": "^3.4.4", "@react-aria/menu": "^3.21.0", @@ -39,8 +39,6 @@ "@react-stately/collections": "^3.12.10", "@react-stately/combobox": "^3.13.0", "@react-stately/form": "^3.2.4", - "@react-types/button": "^3.15.1", - "@react-types/combobox": "^3.14.0", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/combobox/src/index.ts b/packages/@react-aria/combobox/src/index.ts index 8e24d45b144..8a242b73597 100644 --- a/packages/@react-aria/combobox/src/index.ts +++ b/packages/@react-aria/combobox/src/index.ts @@ -10,5 +10,4 @@ * governing permissions and limitations under the License. */ export {useComboBox} from './useComboBox'; -export type {AriaComboBoxOptions, ComboBoxAria} from './useComboBox'; -export type {AriaComboBoxProps} from '@react-types/combobox'; +export type {AriaComboBoxProps, AriaComboBoxOptions, ComboBoxAria} from './useComboBox'; diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts index 93d7ca15b43..5246611f875 100644 --- a/packages/@react-aria/combobox/src/useComboBox.ts +++ b/packages/@react-aria/combobox/src/useComboBox.ts @@ -11,13 +11,12 @@ */ import {announce} from '@react-aria/live-announcer'; -import {AriaButtonProps} from '@react-types/button'; -import {AriaComboBoxProps, SelectionMode} from '@react-types/combobox'; +import {AriaButtonProps} from '@react-aria/button'; import {ariaHideOutside} from '@react-aria/overlays'; +import {AriaLabelingProps, BaseEvent, DOMAttributes, DOMProps, InputDOMProps, KeyboardDelegate, LayoutDelegate, PressEvent, RefObject, RouterOptions, ValidationResult} from '@react-types/shared'; import {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox'; -import {BaseEvent, DOMAttributes, KeyboardDelegate, LayoutDelegate, PressEvent, RefObject, RouterOptions, ValidationResult} from '@react-types/shared'; import {chain, getActiveElement, getEventTarget, getOwnerDocument, isAppleDevice, mergeProps, nodeContains, useEvent, useFormReset, useId, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils'; -import {ComboBoxState} from '@react-stately/combobox'; +import {ComboBoxProps, ComboBoxState, SelectionMode} from '@react-stately/combobox'; import {dispatchVirtualFocus} from '@react-aria/focus'; import {FocusEvent, InputHTMLAttributes, KeyboardEvent, TouchEvent, useEffect, useMemo, useRef, useState} from 'react'; import {getChildNodes, getItemCount} from '@react-stately/collections'; @@ -29,6 +28,11 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useMenuTrigger} from '@react-aria/menu'; import {useTextField} from '@react-aria/textfield'; +export interface AriaComboBoxProps extends ComboBoxProps, DOMProps, InputDOMProps, AriaLabelingProps { + /** Whether keyboard navigation is circular. */ + shouldFocusWrap?: boolean +} + export interface AriaComboBoxOptions extends Omit, 'children'> { /** The ref for the input element. */ inputRef: RefObject, diff --git a/packages/@react-aria/datepicker/package.json b/packages/@react-aria/datepicker/package.json index c30a62cb4f0..aa6c8150c76 100644 --- a/packages/@react-aria/datepicker/package.json +++ b/packages/@react-aria/datepicker/package.json @@ -29,6 +29,8 @@ "@internationalized/date": "^3.12.0", "@internationalized/number": "^3.6.5", "@internationalized/string": "^3.2.7", + "@react-aria/button": "^3.14.5", + "@react-aria/dialog": "^3.5.34", "@react-aria/focus": "^3.21.5", "@react-aria/form": "^3.1.5", "@react-aria/i18n": "^3.12.16", @@ -36,12 +38,9 @@ "@react-aria/label": "^3.7.25", "@react-aria/spinbutton": "^3.7.2", "@react-aria/utils": "^3.33.1", + "@react-stately/calendar": "^3.9.3", "@react-stately/datepicker": "^3.16.1", "@react-stately/form": "^3.2.4", - "@react-types/button": "^3.15.1", - "@react-types/calendar": "^3.8.3", - "@react-types/datepicker": "^3.13.5", - "@react-types/dialog": "^3.5.24", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/datepicker/src/index.ts b/packages/@react-aria/datepicker/src/index.ts index 5db0fc7368a..6a052e3f81a 100644 --- a/packages/@react-aria/datepicker/src/index.ts +++ b/packages/@react-aria/datepicker/src/index.ts @@ -16,9 +16,8 @@ export {useDateField, useTimeField} from './useDateField'; export {useDateRangePicker} from './useDateRangePicker'; export {useDisplayNames} from './useDisplayNames'; -export type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, DateRange, DateValue, TimeValue} from '@react-types/datepicker'; -export type {AriaDateFieldOptions, DateFieldAria} from './useDateField'; -export type {DatePickerAria} from './useDatePicker'; -export type {DateRangePickerAria} from './useDateRangePicker'; +export type {DateRange, DateValue, TimeValue} from '@react-stately/datepicker'; +export type {AriaDateFieldProps, AriaDateFieldOptions, DateFieldAria, AriaTimeFieldProps} from './useDateField'; +export type {AriaDatePickerProps, DatePickerAria} from './useDatePicker'; +export type {AriaDateRangePickerProps, DateRangePickerAria} from './useDateRangePicker'; export type {DateSegmentAria} from './useDateSegment'; -export type {AriaTimeFieldProps} from '@react-types/datepicker'; diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts index fe5c062ca13..e019cb9b98d 100644 --- a/packages/@react-aria/datepicker/src/useDateField.ts +++ b/packages/@react-aria/datepicker/src/useDateField.ts @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker'; +import {AriaLabelingProps, DOMAttributes, DOMProps, GroupDOMAttributes, InputDOMProps, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; import {createFocusManager, FocusManager} from '@react-aria/focus'; -import {DateFieldState, TimeFieldState} from '@react-stately/datepicker'; -import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; +import {DateFieldProps, DateFieldState, DateValue, TimeFieldState, TimePickerProps, TimeValue} from '@react-stately/datepicker'; import {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils'; import {InputHTMLAttributes, useEffect, useMemo, useRef} from 'react'; // @ts-ignore @@ -24,8 +23,15 @@ import {useFocusWithin} from '@react-aria/interactions'; import {useFormValidation} from '@react-aria/form'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface AriaDateFieldProps extends DateFieldProps, AriaLabelingProps, DOMProps, InputDOMProps { + /** + * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). + */ + autoComplete?: string +} + // Allows this hook to also be used with TimeField -export interface AriaDateFieldOptions extends Omit, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> { +export interface AriaDateFieldOptions extends Omit, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> { /** A ref for the hidden input element for HTML form submission. */ inputRef?: RefObject } @@ -197,6 +203,8 @@ export function useDateField(props: AriaDateFieldOptions }; } +export interface AriaTimeFieldProps extends TimePickerProps, AriaLabelingProps, DOMProps, InputDOMProps {} + export interface AriaTimeFieldOptions extends AriaTimeFieldProps { /** A ref for the hidden input element for HTML form submission. */ inputRef?: RefObject diff --git a/packages/@react-aria/datepicker/src/useDatePicker.ts b/packages/@react-aria/datepicker/src/useDatePicker.ts index 2677b39c020..0486256402d 100644 --- a/packages/@react-aria/datepicker/src/useDatePicker.ts +++ b/packages/@react-aria/datepicker/src/useDatePicker.ts @@ -10,13 +10,12 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; -import {AriaDatePickerProps, DateValue} from '@react-types/datepicker'; -import {AriaDialogProps} from '@react-types/dialog'; -import {CalendarProps} from '@react-types/calendar'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaDialogProps} from '@react-aria/dialog'; +import {AriaLabelingProps, DOMAttributes, DOMProps, GroupDOMAttributes, InputDOMProps, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; +import {CalendarProps} from '@react-stately/calendar'; import {createFocusManager} from '@react-aria/focus'; -import {DatePickerState} from '@react-stately/datepicker'; -import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; +import {DatePickerProps, DatePickerState, DateValue} from '@react-stately/datepicker'; import {filterDOMProps, mergeProps, nodeContains, useDescription, useId} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -28,6 +27,13 @@ import {useFocusWithin} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useMemo, useRef} from 'react'; +export interface AriaDatePickerProps extends DatePickerProps, AriaLabelingProps, InputDOMProps, DOMProps, InputDOMProps { + /** + * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). + */ + autoComplete?: string +} + export interface DatePickerAria extends ValidationResult { /** Props for the date picker's visible label element, if any. */ labelProps: DOMAttributes, diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts index 5614487fced..88af804af85 100644 --- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts +++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts @@ -10,14 +10,14 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; -import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker'; -import {AriaDialogProps} from '@react-types/dialog'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaDatePickerProps} from './useDatePicker'; +import {AriaDialogProps} from '@react-aria/dialog'; +import {AriaLabelingProps, DOMAttributes, DOMProps, GroupDOMAttributes, InputDOMProps, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; import {createFocusManager} from '@react-aria/focus'; -import {DateRange, RangeCalendarProps} from '@react-types/calendar'; -import {DateRangePickerState} from '@react-stately/datepicker'; +import {DateRange, RangeCalendarProps} from '@react-stately/calendar'; +import {DateRangePickerProps, DateRangePickerState, DateValue} from '@react-stately/datepicker'; import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form'; -import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; import {filterDOMProps, mergeProps, nodeContains, useDescription, useId} from '@react-aria/utils'; import {focusManagerSymbol, roleSymbol} from './useDateField'; // @ts-ignore @@ -28,6 +28,8 @@ import {useFocusWithin} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useMemo, useRef} from 'react'; +export interface AriaDateRangePickerProps extends DateRangePickerProps, AriaLabelingProps, Omit, DOMProps {} + export interface DateRangePickerAria extends ValidationResult { /** Props for the date range picker's visible label element, if any. */ labelProps: DOMAttributes, diff --git a/packages/@react-aria/dialog/package.json b/packages/@react-aria/dialog/package.json index e0865b44b45..db8c0ed2baa 100644 --- a/packages/@react-aria/dialog/package.json +++ b/packages/@react-aria/dialog/package.json @@ -33,7 +33,6 @@ "@react-aria/interactions": "^3.27.1", "@react-aria/overlays": "^3.31.2", "@react-aria/utils": "^3.33.1", - "@react-types/dialog": "^3.5.24", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/dialog/src/index.ts b/packages/@react-aria/dialog/src/index.ts index 814368f58fc..b544f2e8068 100644 --- a/packages/@react-aria/dialog/src/index.ts +++ b/packages/@react-aria/dialog/src/index.ts @@ -10,5 +10,4 @@ * governing permissions and limitations under the License. */ export {useDialog} from './useDialog'; -export type {AriaDialogProps} from '@react-types/dialog'; -export type {DialogAria} from './useDialog'; +export type {AriaDialogProps, DialogAria} from './useDialog'; diff --git a/packages/@react-aria/dialog/src/useDialog.ts b/packages/@react-aria/dialog/src/useDialog.ts index 01431b86990..559dd5e7e89 100644 --- a/packages/@react-aria/dialog/src/useDialog.ts +++ b/packages/@react-aria/dialog/src/useDialog.ts @@ -10,13 +10,20 @@ * governing permissions and limitations under the License. */ -import {AriaDialogProps} from '@react-types/dialog'; -import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, FocusableElement, RefObject} from '@react-types/shared'; import {filterDOMProps, getActiveElement, isFocusWithin, useSlotId} from '@react-aria/utils'; import {focusSafely} from '@react-aria/interactions'; import {useEffect, useRef} from 'react'; import {useOverlayFocusContain} from '@react-aria/overlays'; +export interface AriaDialogProps extends DOMProps, AriaLabelingProps { + /** + * The accessibility role for the dialog. + * @default 'dialog' + */ + role?: 'dialog' | 'alertdialog' +} + export interface DialogAria { /** Props for the dialog container element. */ dialogProps: DOMAttributes, diff --git a/packages/@react-aria/disclosure/package.json b/packages/@react-aria/disclosure/package.json index 781b0912c92..3b5341d3468 100644 --- a/packages/@react-aria/disclosure/package.json +++ b/packages/@react-aria/disclosure/package.json @@ -26,10 +26,10 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.33.1", "@react-stately/disclosure": "^3.0.11", - "@react-types/button": "^3.15.1", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/disclosure/src/useDisclosure.ts b/packages/@react-aria/disclosure/src/useDisclosure.ts index 34b254afce6..207390926d7 100644 --- a/packages/@react-aria/disclosure/src/useDisclosure.ts +++ b/packages/@react-aria/disclosure/src/useDisclosure.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DisclosureState} from '@react-stately/disclosure'; import {flushSync} from 'react-dom'; import {HTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react'; diff --git a/packages/@react-aria/dnd/package.json b/packages/@react-aria/dnd/package.json index 7e4e5292520..02bf0d52217 100644 --- a/packages/@react-aria/dnd/package.json +++ b/packages/@react-aria/dnd/package.json @@ -27,6 +27,7 @@ }, "dependencies": { "@internationalized/string": "^3.2.7", + "@react-aria/button": "^3.14.5", "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", "@react-aria/live-announcer": "^3.4.4", @@ -34,7 +35,6 @@ "@react-aria/utils": "^3.33.1", "@react-stately/collections": "^3.12.10", "@react-stately/dnd": "^3.7.4", - "@react-types/button": "^3.15.1", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/dnd/src/useDrag.ts b/packages/@react-aria/dnd/src/useDrag.ts index d91c5b2dc6c..6009cb95d60 100644 --- a/packages/@react-aria/dnd/src/useDrag.ts +++ b/packages/@react-aria/dnd/src/useDrag.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, PressEvent, RefObject} from '@react-types/shared'; import {DragEvent, HTMLAttributes, version as ReactVersion, useEffect, useRef, useState} from 'react'; import * as DragManager from './DragManager'; diff --git a/packages/@react-aria/dnd/src/useDraggableItem.ts b/packages/@react-aria/dnd/src/useDraggableItem.ts index 6d5781ddeaa..a783a555da0 100644 --- a/packages/@react-aria/dnd/src/useDraggableItem.ts +++ b/packages/@react-aria/dnd/src/useDraggableItem.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {clearGlobalDnDState, isInternalDropOperation, setDraggingKeys, useDragModality} from './utils'; import {DraggableCollectionState} from '@react-stately/dnd'; import {HTMLAttributes} from 'react'; diff --git a/packages/@react-aria/dnd/src/useDrop.ts b/packages/@react-aria/dnd/src/useDrop.ts index c48388f1dfc..bfb577fa92e 100644 --- a/packages/@react-aria/dnd/src/useDrop.ts +++ b/packages/@react-aria/dnd/src/useDrop.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DOMAttributes, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, FocusableElement, DragTypes as IDragTypes, RefObject} from '@react-types/shared'; import {DragEvent, useRef, useState} from 'react'; import * as DragManager from './DragManager'; diff --git a/packages/@react-aria/dnd/src/useVirtualDrop.ts b/packages/@react-aria/dnd/src/useVirtualDrop.ts index b74897d3cba..2d109de049e 100644 --- a/packages/@react-aria/dnd/src/useVirtualDrop.ts +++ b/packages/@react-aria/dnd/src/useVirtualDrop.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DOMAttributes} from 'react'; import * as DragManager from './DragManager'; // @ts-ignore diff --git a/packages/@react-aria/grid/package.json b/packages/@react-aria/grid/package.json index 38698f9990c..59518ff800d 100644 --- a/packages/@react-aria/grid/package.json +++ b/packages/@react-aria/grid/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/checkbox": "^3.16.5", "@react-aria/focus": "^3.21.5", "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", @@ -35,8 +36,6 @@ "@react-stately/collections": "^3.12.10", "@react-stately/grid": "^3.11.9", "@react-stately/selection": "^3.20.9", - "@react-types/checkbox": "^3.10.4", - "@react-types/grid": "^3.3.8", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/grid/src/GridKeyboardDelegate.ts b/packages/@react-aria/grid/src/GridKeyboardDelegate.ts index b1fceaf3cb3..752f085f3fb 100644 --- a/packages/@react-aria/grid/src/GridKeyboardDelegate.ts +++ b/packages/@react-aria/grid/src/GridKeyboardDelegate.ts @@ -13,7 +13,7 @@ import {Direction, DisabledBehavior, Key, KeyboardDelegate, LayoutDelegate, Node, Rect, RefObject, Size} from '@react-types/shared'; import {DOMLayoutDelegate} from '@react-aria/selection'; import {getChildNodes, getFirstItem, getLastItem, getNthItem} from '@react-stately/collections'; -import {GridCollection, GridNode} from '@react-types/grid'; +import {IGridCollection as GridCollection, GridNode} from '@react-stately/grid'; export interface GridKeyboardDelegateOptions { collection: C, diff --git a/packages/@react-aria/grid/src/useGrid.ts b/packages/@react-aria/grid/src/useGrid.ts index 80a3c834899..b119f4b07d4 100644 --- a/packages/@react-aria/grid/src/useGrid.ts +++ b/packages/@react-aria/grid/src/useGrid.ts @@ -13,10 +13,9 @@ import {AriaLabelingProps, DOMAttributes, DOMProps, Key, KeyboardDelegate, RefObject} from '@react-types/shared'; import {filterDOMProps, getEventTarget, mergeProps, nodeContains, useId} from '@react-aria/utils'; import {FocusEventHandler, useCallback, useMemo} from 'react'; -import {GridCollection} from '@react-types/grid'; +import {IGridCollection as GridCollection, GridState} from '@react-stately/grid'; import {GridKeyboardDelegate} from './GridKeyboardDelegate'; import {gridMap} from './utils'; -import {GridState} from '@react-stately/grid'; import {useCollator, useLocale} from '@react-aria/i18n'; import {useGridSelectionAnnouncement} from './useGridSelectionAnnouncement'; import {useHasTabbableChild} from '@react-aria/focus'; diff --git a/packages/@react-aria/grid/src/useGridCell.ts b/packages/@react-aria/grid/src/useGridCell.ts index 7f4a3ed6425..2843c48d8a2 100644 --- a/packages/@react-aria/grid/src/useGridCell.ts +++ b/packages/@react-aria/grid/src/useGridCell.ts @@ -14,9 +14,8 @@ import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shar import {focusSafely, isFocusVisible} from '@react-aria/interactions'; import {getActiveElement, getEventTarget, getScrollParent, isFocusWithin, mergeProps, nodeContains, scrollIntoViewport} from '@react-aria/utils'; import {getFocusableTreeWalker} from '@react-aria/focus'; -import {GridCollection, GridNode} from '@react-types/grid'; +import {IGridCollection as GridCollection, GridNode, GridState} from '@react-stately/grid'; import {gridMap} from './utils'; -import {GridState} from '@react-stately/grid'; import {KeyboardEvent as ReactKeyboardEvent, useRef} from 'react'; import {useLocale} from '@react-aria/i18n'; import {useSelectableItem} from '@react-aria/selection'; diff --git a/packages/@react-aria/grid/src/useGridRow.ts b/packages/@react-aria/grid/src/useGridRow.ts index e4907e9c59e..dcb37d9b760 100644 --- a/packages/@react-aria/grid/src/useGridRow.ts +++ b/packages/@react-aria/grid/src/useGridRow.ts @@ -12,9 +12,8 @@ import {chain} from '@react-aria/utils'; import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; -import {GridCollection, GridNode} from '@react-types/grid'; +import {IGridCollection as GridCollection, GridNode, GridState} from '@react-stately/grid'; import {gridMap} from './utils'; -import {GridState} from '@react-stately/grid'; import {SelectableItemStates, useSelectableItem} from '@react-aria/selection'; export interface GridRowProps { diff --git a/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts b/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts index 7326146fb57..21e73a33f2a 100644 --- a/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts +++ b/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts @@ -1,6 +1,5 @@ -import {AriaCheckboxProps} from '@react-types/checkbox'; -import {GridCollection} from '@react-types/grid'; -import {GridState} from '@react-stately/grid'; +import {AriaCheckboxProps} from '@react-aria/checkbox'; +import {IGridCollection as GridCollection, GridState} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; import {Key} from '@react-types/shared'; diff --git a/packages/@react-aria/grid/src/utils.ts b/packages/@react-aria/grid/src/utils.ts index eb4defb3d47..b3e53410009 100644 --- a/packages/@react-aria/grid/src/utils.ts +++ b/packages/@react-aria/grid/src/utils.ts @@ -10,8 +10,7 @@ * governing permissions and limitations under the License. */ -import type {GridCollection} from '@react-types/grid'; -import type {GridState} from '@react-stately/grid'; +import type {IGridCollection as GridCollection, GridState} from '@react-stately/grid'; import type {Key, KeyboardDelegate} from '@react-types/shared'; interface GridMapShared { diff --git a/packages/@react-aria/interactions/package.json b/packages/@react-aria/interactions/package.json index 9ecfb631288..08fb5e97765 100644 --- a/packages/@react-aria/interactions/package.json +++ b/packages/@react-aria/interactions/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.33.1", - "@react-stately/flags": "^3.1.2", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/interactions/stories/useHover.stories.tsx b/packages/@react-aria/interactions/stories/useHover.stories.tsx index 471850b1d0d..f87122193d4 100644 --- a/packages/@react-aria/interactions/stories/useHover.stories.tsx +++ b/packages/@react-aria/interactions/stories/useHover.stories.tsx @@ -9,12 +9,11 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '@react-aria/button'; import {classNames} from '@react-spectrum/utils'; import {mergeProps} from '@react-aria/utils'; import React, {JSX, useRef, useState} from 'react'; import {StoryObj} from '@storybook/react'; -import {useButton} from '@react-aria/button'; import {useHover} from '../'; export default { diff --git a/packages/@react-aria/link/package.json b/packages/@react-aria/link/package.json index b4bea21cdc5..ecc45b69bb7 100644 --- a/packages/@react-aria/link/package.json +++ b/packages/@react-aria/link/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-aria/interactions": "^3.27.1", "@react-aria/utils": "^3.33.1", - "@react-types/link": "^3.6.7", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/link/src/index.ts b/packages/@react-aria/link/src/index.ts index e1f5714dc07..8929df8746d 100644 --- a/packages/@react-aria/link/src/index.ts +++ b/packages/@react-aria/link/src/index.ts @@ -9,5 +9,5 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ -export type {AriaLinkOptions, LinkAria} from './useLink'; +export type {LinkProps, AriaLinkProps, AriaLinkOptions, LinkAria} from './useLink'; export {useLink} from './useLink'; diff --git a/packages/@react-aria/link/src/useLink.ts b/packages/@react-aria/link/src/useLink.ts index f4098b25939..1a1143e800f 100644 --- a/packages/@react-aria/link/src/useLink.ts +++ b/packages/@react-aria/link/src/useLink.ts @@ -10,12 +10,15 @@ * governing permissions and limitations under the License. */ -import {AriaLinkProps} from '@react-types/link'; -import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, FocusableElement, FocusableProps, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared'; import {filterDOMProps, handleLinkClick, mergeProps, useLinkProps, useRouter} from '@react-aria/utils'; import React from 'react'; import {useFocusable, usePress} from '@react-aria/interactions'; +export interface LinkProps extends PressEvents, FocusableProps {} + +export interface AriaLinkProps extends LinkProps, LinkDOMProps, AriaLabelingProps { } + export interface AriaLinkOptions extends AriaLinkProps { /** Whether the link is disabled. */ isDisabled?: boolean, diff --git a/packages/@react-aria/listbox/package.json b/packages/@react-aria/listbox/package.json index 121d62bcc43..b9a2e6ca2f2 100644 --- a/packages/@react-aria/listbox/package.json +++ b/packages/@react-aria/listbox/package.json @@ -32,7 +32,6 @@ "@react-aria/utils": "^3.33.1", "@react-stately/collections": "^3.12.10", "@react-stately/list": "^3.13.4", - "@react-types/listbox": "^3.7.6", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/listbox/src/index.ts b/packages/@react-aria/listbox/src/index.ts index af34544993e..14134ff6f3a 100644 --- a/packages/@react-aria/listbox/src/index.ts +++ b/packages/@react-aria/listbox/src/index.ts @@ -15,7 +15,6 @@ export {useOption} from './useOption'; export {useListBoxSection} from './useListBoxSection'; export {listData, getItemId} from './utils'; -export type {AriaListBoxProps} from '@react-types/listbox'; -export type {AriaListBoxOptions, ListBoxAria} from './useListBox'; +export type {ListBoxProps, AriaListBoxPropsBase, AriaListBoxProps, AriaListBoxOptions, ListBoxAria} from './useListBox'; export type {AriaOptionProps, OptionAria} from './useOption'; export type {AriaListBoxSectionProps, ListBoxSectionAria} from './useListBoxSection'; diff --git a/packages/@react-aria/listbox/src/useListBox.ts b/packages/@react-aria/listbox/src/useListBox.ts index 4fdbdffbceb..0b7301d1358 100644 --- a/packages/@react-aria/listbox/src/useListBox.ts +++ b/packages/@react-aria/listbox/src/useListBox.ts @@ -10,15 +10,51 @@ * governing permissions and limitations under the License. */ -import {AriaListBoxProps} from '@react-types/listbox'; -import {DOMAttributes, KeyboardDelegate, LayoutDelegate, Orientation, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, FocusEvents, FocusStrategy, Key, KeyboardDelegate, LayoutDelegate, MultipleSelection, Orientation, RefObject, SelectionBehavior} from '@react-types/shared'; import {filterDOMProps, mergeProps, useId} from '@react-aria/utils'; import {listData} from './utils'; import {ListState} from '@react-stately/list'; +import {ReactNode} from 'react'; import {useFocusWithin} from '@react-aria/interactions'; import {useLabel} from '@react-aria/label'; import {useSelectableList} from '@react-aria/selection'; +export interface ListBoxProps extends CollectionBase, MultipleSelection, FocusEvents { + /** Whether to auto focus the listbox or an option. */ + autoFocus?: boolean | FocusStrategy, + /** Whether focus should wrap around when the end/start is reached. */ + shouldFocusWrap?: boolean +} + +export interface AriaListBoxPropsBase extends ListBoxProps, DOMProps, AriaLabelingProps { + /** + * Whether pressing the escape key should clear selection in the listbox or not. + * + * Most experiences should not modify this option as it eliminates a keyboard user's ability to + * easily clear selection. Only use if the escape key is being handled externally or should not + * trigger selection clearing contextually. + * @default 'clearSelection' + */ + escapeKeyBehavior?: 'clearSelection' | 'none' +} +export interface AriaListBoxProps extends AriaListBoxPropsBase { + /** + * An optional visual label for the listbox. + */ + label?: ReactNode, + /** How multiple selection should behave in the collection. */ + selectionBehavior?: SelectionBehavior, + /** Whether selection should occur on press up instead of press down. */ + shouldSelectOnPressUp?: boolean, + /** Whether options should be focused when the user hovers over them. */ + shouldFocusOnHover?: boolean, + /** + * Handler that is called when a user performs an action on an item. The exact user event depends on + * the collection's `selectionBehavior` prop and the interaction modality. + */ + onAction?: (key: Key) => void +} + export interface ListBoxAria { /** Props for the listbox element. */ listBoxProps: DOMAttributes, diff --git a/packages/@react-aria/menu/package.json b/packages/@react-aria/menu/package.json index c08d69caca3..fdbf8cf16b5 100644 --- a/packages/@react-aria/menu/package.json +++ b/packages/@react-aria/menu/package.json @@ -26,7 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-aria/focus": "^3.21.5", + "@react-aria/button": "^3.14.5", "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", "@react-aria/overlays": "^3.31.2", @@ -36,8 +36,6 @@ "@react-stately/menu": "^3.9.11", "@react-stately/selection": "^3.20.9", "@react-stately/tree": "^3.9.6", - "@react-types/button": "^3.15.1", - "@react-types/menu": "^3.10.7", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/menu/src/index.ts b/packages/@react-aria/menu/src/index.ts index 7aa44be2fce..452b0827641 100644 --- a/packages/@react-aria/menu/src/index.ts +++ b/packages/@react-aria/menu/src/index.ts @@ -16,9 +16,8 @@ export {useMenuItem} from './useMenuItem'; export {useMenuSection} from './useMenuSection'; export {useSubmenuTrigger} from './useSubmenuTrigger'; -export type {AriaMenuProps} from '@react-types/menu'; export type {AriaMenuTriggerProps, MenuTriggerAria} from './useMenuTrigger'; -export type {AriaMenuOptions, MenuAria} from './useMenu'; +export type {MenuProps, AriaMenuProps, AriaMenuOptions, MenuAria} from './useMenu'; export type {AriaMenuItemProps, MenuItemAria} from './useMenuItem'; export type {AriaMenuSectionProps, MenuSectionAria} from './useMenuSection'; export type {AriaSubmenuTriggerProps, SubmenuTriggerAria} from './useSubmenuTrigger'; diff --git a/packages/@react-aria/menu/src/useMenu.ts b/packages/@react-aria/menu/src/useMenu.ts index efcb39784e7..ecaabe23cc0 100644 --- a/packages/@react-aria/menu/src/useMenu.ts +++ b/packages/@react-aria/menu/src/useMenu.ts @@ -10,13 +10,35 @@ * governing permissions and limitations under the License. */ -import {AriaMenuProps} from '@react-types/menu'; -import {DOMAttributes, KeyboardDelegate, KeyboardEvents, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, FocusStrategy, Key, KeyboardDelegate, KeyboardEvents, MultipleSelection, RefObject} from '@react-types/shared'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {menuData} from './utils'; import {TreeState} from '@react-stately/tree'; import {useSelectableList} from '@react-aria/selection'; +export interface MenuProps extends CollectionBase, MultipleSelection { + /** Where the focus should be set. */ + autoFocus?: boolean | FocusStrategy, + /** Whether keyboard navigation is circular. */ + shouldFocusWrap?: boolean, + /** Handler that is called when an item is selected. */ + onAction?: (key: Key) => void, + /** Handler that is called when the menu should close after selecting an item. */ + onClose?: () => void +} + +export interface AriaMenuProps extends MenuProps, DOMProps, AriaLabelingProps { + /** + * Whether pressing the escape key should clear selection in the menu or not. + * + * Most experiences should not modify this option as it eliminates a keyboard user's ability to + * easily clear selection. Only use if the escape key is being handled externally or should not + * trigger selection clearing contextually. + * @default 'clearSelection' + */ + escapeKeyBehavior?: 'clearSelection' | 'none' +} + export interface MenuAria { /** Props for the menu element. */ menuProps: DOMAttributes diff --git a/packages/@react-aria/menu/src/useMenuTrigger.ts b/packages/@react-aria/menu/src/useMenuTrigger.ts index 2d2227276a3..c2ac3b1a573 100644 --- a/packages/@react-aria/menu/src/useMenuTrigger.ts +++ b/packages/@react-aria/menu/src/useMenuTrigger.ts @@ -10,14 +10,13 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaMenuOptions} from './useMenu'; import {FocusableElement, RefObject} from '@react-types/shared'; import {focusWithoutScrolling, useId} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {MenuTriggerState} from '@react-stately/menu'; -import {MenuTriggerType} from '@react-types/menu'; +import {MenuTriggerState, MenuTriggerType} from '@react-stately/menu'; import {PressProps, useLongPress} from '@react-aria/interactions'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useOverlayTrigger} from '@react-aria/overlays'; diff --git a/packages/@react-aria/meter/package.json b/packages/@react-aria/meter/package.json index 33878256aef..2648ce7c74e 100644 --- a/packages/@react-aria/meter/package.json +++ b/packages/@react-aria/meter/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-aria/progress": "^3.4.30", - "@react-types/meter": "^3.4.15", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/meter/src/index.ts b/packages/@react-aria/meter/src/index.ts index 81807e3bc32..418c4a354b9 100644 --- a/packages/@react-aria/meter/src/index.ts +++ b/packages/@react-aria/meter/src/index.ts @@ -10,5 +10,4 @@ * governing permissions and limitations under the License. */ export {useMeter} from './useMeter'; -export type {AriaMeterProps} from '@react-types/meter'; -export type {MeterAria} from './useMeter'; +export type {MeterProps, AriaMeterProps, MeterAria} from './useMeter'; diff --git a/packages/@react-aria/meter/src/useMeter.ts b/packages/@react-aria/meter/src/useMeter.ts index ddacce2dacb..2dad88c82bb 100644 --- a/packages/@react-aria/meter/src/useMeter.ts +++ b/packages/@react-aria/meter/src/useMeter.ts @@ -10,9 +10,11 @@ * governing permissions and limitations under the License. */ -import {AriaMeterProps} from '@react-types/meter'; +import {AriaProgressBarBaseProps, ProgressBarBaseProps, useProgressBar} from '@react-aria/progress'; import {DOMAttributes} from '@react-types/shared'; -import {useProgressBar} from '@react-aria/progress'; + +export type MeterProps = ProgressBarBaseProps; +export interface AriaMeterProps extends AriaProgressBarBaseProps {} export interface MeterAria { /** Props for the meter container element. */ diff --git a/packages/@react-aria/numberfield/package.json b/packages/@react-aria/numberfield/package.json index 916c1342721..ed07688b732 100644 --- a/packages/@react-aria/numberfield/package.json +++ b/packages/@react-aria/numberfield/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", "@react-aria/live-announcer": "^3.4.4", @@ -34,8 +35,6 @@ "@react-aria/utils": "^3.33.1", "@react-stately/form": "^3.2.4", "@react-stately/numberfield": "^3.11.0", - "@react-types/button": "^3.15.1", - "@react-types/numberfield": "^3.8.18", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/numberfield/src/index.ts b/packages/@react-aria/numberfield/src/index.ts index 08c0ea848a8..427ac46c5af 100644 --- a/packages/@react-aria/numberfield/src/index.ts +++ b/packages/@react-aria/numberfield/src/index.ts @@ -10,5 +10,4 @@ * governing permissions and limitations under the License. */ export {useNumberField} from './useNumberField'; -export type {AriaNumberFieldProps} from '@react-types/numberfield'; -export type {NumberFieldAria} from './useNumberField'; +export type {AriaNumberFieldProps, NumberFieldAria} from './useNumberField'; diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts index 427017983c2..1237e8ec1d4 100644 --- a/packages/@react-aria/numberfield/src/useNumberField.ts +++ b/packages/@react-aria/numberfield/src/useNumberField.ts @@ -11,8 +11,8 @@ */ import {announce} from '@react-aria/live-announcer'; -import {AriaButtonProps} from '@react-types/button'; -import {AriaNumberFieldProps} from '@react-types/numberfield'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaLabelingProps, DOMAttributes, DOMProps, GroupDOMAttributes, TextInputDOMEvents, TextInputDOMProps, ValidationResult} from '@react-types/shared'; import {chain, filterDOMProps, getActiveElement, getEventTarget, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId, useLayoutEffect} from '@react-aria/utils'; import { type ClipboardEvent, @@ -24,11 +24,10 @@ import { useMemo, useState } from 'react'; -import {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared'; import {flushSync} from 'react-dom'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {NumberFieldState} from '@react-stately/numberfield'; +import {NumberFieldProps, NumberFieldState} from '@react-stately/numberfield'; import {privateValidationStateProp} from '@react-stately/form'; import {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions'; import {useFormattedTextField} from '@react-aria/textfield'; @@ -38,6 +37,17 @@ import { } from '@react-aria/i18n'; import {useSpinButton} from '@react-aria/spinbutton'; +export interface AriaNumberFieldProps extends NumberFieldProps, DOMProps, AriaLabelingProps, TextInputDOMEvents { + /** A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. */ + decrementAriaLabel?: string, + /** A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. */ + incrementAriaLabel?: string, + /** + * Enables or disables changing the value with scroll. + */ + isWheelDisabled?: boolean +} + export interface NumberFieldAria extends ValidationResult { /** Props for the label element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-aria/numberfield/test/useNumberField.test.ts b/packages/@react-aria/numberfield/test/useNumberField.test.ts index e594001c5b6..39d97c8539a 100644 --- a/packages/@react-aria/numberfield/test/useNumberField.test.ts +++ b/packages/@react-aria/numberfield/test/useNumberField.test.ts @@ -1,8 +1,7 @@ -import {AriaNumberFieldProps} from '@react-types/numberfield'; +import {AriaNumberFieldProps, useNumberField} from '../'; import React from 'react'; import {renderHook} from '@react-spectrum/test-utils-internal'; import {useLocale} from '@react-aria/i18n'; -import {useNumberField} from '../'; import {useNumberFieldState} from '@react-stately/numberfield'; describe('useNumberField hook', () => { diff --git a/packages/@react-aria/overlays/docs/usePopover.mdx b/packages/@react-aria/overlays/docs/usePopover.mdx index 7c0931b32df..da380b1a2ef 100644 --- a/packages/@react-aria/overlays/docs/usePopover.mdx +++ b/packages/@react-aria/overlays/docs/usePopover.mdx @@ -14,7 +14,6 @@ import docs from 'docs:@react-aria/overlays'; import focusDocs from 'docs:@react-aria/focus'; import dialogDocs from 'docs:@react-aria/dialog'; import statelyDocs from 'docs:@react-stately/overlays'; -import typesDocs from 'docs:@react-types/overlays'; import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/overlays/package.json'; @@ -264,7 +263,7 @@ The following examples show how to use the `Popover` and `PopoverTrigger` compon ### Placement The popover's placement with respect to its anchor element can be adjusted using the `placement` -prop. See for a full list of available placement combinations. +prop. See for a full list of available placement combinations. ```tsx example
diff --git a/packages/@react-aria/overlays/package.json b/packages/@react-aria/overlays/package.json index fbcbde2b766..c0bdb60bce5 100644 --- a/packages/@react-aria/overlays/package.json +++ b/packages/@react-aria/overlays/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/focus": "^3.21.5", "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", @@ -34,8 +35,6 @@ "@react-aria/visually-hidden": "^3.8.31", "@react-stately/flags": "^3.1.2", "@react-stately/overlays": "^3.6.23", - "@react-types/button": "^3.15.1", - "@react-types/overlays": "^3.9.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/overlays/src/calculatePosition.ts b/packages/@react-aria/overlays/src/calculatePosition.ts index b93667f0f69..6072ca194c9 100644 --- a/packages/@react-aria/overlays/src/calculatePosition.ts +++ b/packages/@react-aria/overlays/src/calculatePosition.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-types/overlays'; +import {Axis, Placement, PlacementAxis, SizeAxis} from './useOverlayPosition'; import {clamp, isWebKit, nodeContains} from '@react-aria/utils'; interface Position { diff --git a/packages/@react-aria/overlays/src/index.ts b/packages/@react-aria/overlays/src/index.ts index cf37e048e7d..bf3f0de6165 100644 --- a/packages/@react-aria/overlays/src/index.ts +++ b/packages/@react-aria/overlays/src/index.ts @@ -21,7 +21,7 @@ export {useModalOverlay} from './useModalOverlay'; export {Overlay, useOverlayFocusContain} from './Overlay'; export {UNSAFE_PortalProvider, useUNSAFE_PortalContext} from './PortalProvider'; -export type {AriaPositionProps, PositionAria} from './useOverlayPosition'; +export type {AriaPositionProps, PositionAria, Placement, PlacementAxis, PositionProps, Axis, SizeAxis} from './useOverlayPosition'; export type {AriaOverlayProps, OverlayAria} from './useOverlay'; export type {OverlayTriggerAria, OverlayTriggerProps} from './useOverlayTrigger'; export type {AriaModalOptions, ModalAria, ModalProviderAria, ModalProviderProps, OverlayContainerProps} from './useModal'; @@ -29,5 +29,4 @@ export type {DismissButtonProps} from './DismissButton'; export type {AriaPopoverProps, PopoverAria} from './usePopover'; export type {AriaModalOverlayProps, ModalOverlayAria} from './useModalOverlay'; export type {OverlayProps} from './Overlay'; -export type {Placement, PlacementAxis, PositionProps} from '@react-types/overlays'; export type {PortalProviderProps, PortalProviderContextValue} from './PortalProvider'; diff --git a/packages/@react-aria/overlays/src/useOverlayPosition.ts b/packages/@react-aria/overlays/src/useOverlayPosition.ts index de180f94c9e..f05e3e75973 100644 --- a/packages/@react-aria/overlays/src/useOverlayPosition.ts +++ b/packages/@react-aria/overlays/src/useOverlayPosition.ts @@ -13,11 +13,58 @@ import {calculatePosition, getRect, PositionResult} from './calculatePosition'; import {DOMAttributes, RefObject} from '@react-types/shared'; import {getActiveElement, isFocusWithin, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; -import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays'; import {useCallback, useEffect, useRef, useState} from 'react'; import {useCloseOnScroll} from './useCloseOnScroll'; import {useLocale} from '@react-aria/i18n'; +export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | + 'top' | 'top left' | 'top right' | 'top start' | 'top end' | + 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | + 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'; + +export type Axis = 'top' | 'bottom' | 'left' | 'right'; +export type SizeAxis = 'width' | 'height'; +export type PlacementAxis = Axis | 'center'; + +export interface PositionProps { + /** + * The placement of the element with respect to its anchor element. + * @default 'bottom' + */ + placement?: Placement, + /** + * The placement padding that should be applied between the element and its + * surrounding container. + * @default 12 + */ + containerPadding?: number, + /** + * The additional offset applied along the main axis between the element and its + * anchor element. + * @default 0 + */ + offset?: number, + /** + * The additional offset applied along the cross axis between the element and its + * anchor element. + * @default 0 + */ + crossOffset?: number, + /** + * Whether the element should flip its orientation (e.g. top to bottom or left to right) when + * there is insufficient room for it to render completely. + * @default true + */ + shouldFlip?: boolean, + // /** + // * The element that should be used as the bounding container when calculating container offset + // * or whether it should flip. + // */ + // boundaryElement?: Element, + /** Whether the element is rendered. */ + isOpen?: boolean +} + export interface AriaPositionProps extends PositionProps { /** * Cross size of the overlay arrow in pixels. diff --git a/packages/@react-aria/overlays/src/useOverlayTrigger.ts b/packages/@react-aria/overlays/src/useOverlayTrigger.ts index 0608b368470..ce0d515213a 100644 --- a/packages/@react-aria/overlays/src/useOverlayTrigger.ts +++ b/packages/@react-aria/overlays/src/useOverlayTrigger.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DOMProps, RefObject} from '@react-types/shared'; import {onCloseMap} from './useCloseOnScroll'; import {OverlayTriggerState} from '@react-stately/overlays'; diff --git a/packages/@react-aria/overlays/src/usePopover.ts b/packages/@react-aria/overlays/src/usePopover.ts index 3263932e978..05eb84faeee 100644 --- a/packages/@react-aria/overlays/src/usePopover.ts +++ b/packages/@react-aria/overlays/src/usePopover.ts @@ -11,11 +11,10 @@ */ import {ariaHideOutside, keepVisible} from './ariaHideOutside'; -import {AriaPositionProps, useOverlayPosition} from './useOverlayPosition'; +import {AriaPositionProps, PlacementAxis, useOverlayPosition} from './useOverlayPosition'; import {DOMAttributes, RefObject} from '@react-types/shared'; import {mergeProps} from '@react-aria/utils'; import {OverlayTriggerState} from '@react-stately/overlays'; -import {PlacementAxis} from '@react-types/overlays'; import {useEffect} from 'react'; import {useOverlay} from './useOverlay'; import {usePreventScroll} from './usePreventScroll'; diff --git a/packages/@react-aria/overlays/stories/UseOverlayPosition.stories.tsx b/packages/@react-aria/overlays/stories/UseOverlayPosition.stories.tsx index 194b4be09ab..1feec88228b 100644 --- a/packages/@react-aria/overlays/stories/UseOverlayPosition.stories.tsx +++ b/packages/@react-aria/overlays/stories/UseOverlayPosition.stories.tsx @@ -11,11 +11,10 @@ */ import {mergeProps} from '@react-aria/utils'; -import {Placement} from '@react-types/overlays'; +import {Placement, useOverlayPosition, useOverlayTrigger} from '../src'; import React, {JSX} from 'react'; import ReactDOM from 'react-dom'; import {StoryFn} from '@storybook/react'; -import {useOverlayPosition, useOverlayTrigger} from '../src'; import {useOverlayTriggerState} from '@react-stately/overlays'; function Trigger(props: { diff --git a/packages/@react-aria/progress/package.json b/packages/@react-aria/progress/package.json index 6e2fde52ad0..09c0dfb0701 100644 --- a/packages/@react-aria/progress/package.json +++ b/packages/@react-aria/progress/package.json @@ -29,7 +29,6 @@ "@react-aria/i18n": "^3.12.16", "@react-aria/label": "^3.7.25", "@react-aria/utils": "^3.33.1", - "@react-types/progress": "^3.5.18", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/progress/src/index.ts b/packages/@react-aria/progress/src/index.ts index ac384c94212..e27e7913100 100644 --- a/packages/@react-aria/progress/src/index.ts +++ b/packages/@react-aria/progress/src/index.ts @@ -10,5 +10,4 @@ * governing permissions and limitations under the License. */ export {useProgressBar} from './useProgressBar'; -export type {AriaProgressBarProps} from '@react-types/progress'; -export type {ProgressBarAria} from './useProgressBar'; +export type {ProgressBarProps, ProgressBarBaseProps, AriaProgressBarBaseProps, AriaProgressBarProps, ProgressBarAria} from './useProgressBar'; diff --git a/packages/@react-aria/progress/src/useProgressBar.ts b/packages/@react-aria/progress/src/useProgressBar.ts index e754677366e..124366fdf30 100644 --- a/packages/@react-aria/progress/src/useProgressBar.ts +++ b/packages/@react-aria/progress/src/useProgressBar.ts @@ -10,12 +10,50 @@ * governing permissions and limitations under the License. */ -import {AriaProgressBarProps} from '@react-types/progress'; +import {AriaLabelingProps, DOMAttributes, DOMProps} from '@react-types/shared'; import {clamp, filterDOMProps, mergeProps} from '@react-aria/utils'; -import {DOMAttributes} from '@react-types/shared'; +import {ReactNode} from 'react'; import {useLabel} from '@react-aria/label'; import {useNumberFormatter} from '@react-aria/i18n'; +export interface ProgressBarBaseProps { + /** + * The current value (controlled). + * @default 0 + */ + value?: number, + /** + * The smallest value allowed for the input. + * @default 0 + */ + minValue?: number, + /** + * The largest value allowed for the input. + * @default 100 + */ + maxValue?: number, + /** The content to display as the label. */ + label?: ReactNode, + /** + * The display format of the value label. + * @default {style: 'percent'} + */ + formatOptions?: Intl.NumberFormatOptions, + /** The content to display as the value's label (e.g. 1 of 4). */ + valueLabel?: ReactNode +} + +export interface AriaProgressBarBaseProps extends ProgressBarBaseProps, DOMProps, AriaLabelingProps {} + +export interface ProgressBarProps extends ProgressBarBaseProps { + /** + * Whether presentation is indeterminate when progress isn't known. + */ + isIndeterminate?: boolean +} + +export interface AriaProgressBarProps extends ProgressBarProps, DOMProps, AriaLabelingProps {} + export interface ProgressBarAria { /** Props for the progress bar container element. */ progressBarProps: DOMAttributes, diff --git a/packages/@react-aria/radio/package.json b/packages/@react-aria/radio/package.json index 97b389aa89c..2ad72ffccce 100644 --- a/packages/@react-aria/radio/package.json +++ b/packages/@react-aria/radio/package.json @@ -33,7 +33,6 @@ "@react-aria/label": "^3.7.25", "@react-aria/utils": "^3.33.1", "@react-stately/radio": "^3.11.5", - "@react-types/radio": "^3.9.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/radio/src/index.ts b/packages/@react-aria/radio/src/index.ts index 1b82ecdef0f..8834b54010f 100644 --- a/packages/@react-aria/radio/src/index.ts +++ b/packages/@react-aria/radio/src/index.ts @@ -11,7 +11,6 @@ */ export {useRadio} from './useRadio'; export {useRadioGroup} from './useRadioGroup'; -export type {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio'; export type {Orientation} from '@react-types/shared'; -export type {RadioAria} from './useRadio'; -export type {RadioGroupAria} from './useRadioGroup'; +export type {RadioProps, AriaRadioProps, RadioAria} from './useRadio'; +export type {AriaRadioGroupProps, RadioGroupAria} from './useRadioGroup'; diff --git a/packages/@react-aria/radio/src/useRadio.ts b/packages/@react-aria/radio/src/useRadio.ts index 59a7287a1ef..20e39fdeade 100644 --- a/packages/@react-aria/radio/src/useRadio.ts +++ b/packages/@react-aria/radio/src/useRadio.ts @@ -10,15 +10,33 @@ * governing permissions and limitations under the License. */ -import {AriaRadioProps} from '@react-types/radio'; +import {AriaLabelingProps, DOMProps, FocusableProps, PressEvents, RefObject} from '@react-types/shared'; import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils'; -import {InputHTMLAttributes, LabelHTMLAttributes, useMemo} from 'react'; +import {InputHTMLAttributes, LabelHTMLAttributes, ReactNode, useMemo} from 'react'; import {radioGroupData} from './utils'; import {RadioGroupState} from '@react-stately/radio'; -import {RefObject} from '@react-types/shared'; import {useFocusable, usePress} from '@react-aria/interactions'; import {useFormValidation} from '@react-aria/form'; +export interface RadioProps extends FocusableProps { + /** + * The value of the radio button, used when submitting an HTML form. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value). + */ + value: string, + /** + * The label for the Radio. Accepts any renderable node. + */ + children?: ReactNode, + /** + * Whether the radio button is disabled or not. + * Shows that a selection exists, but is not available in that circumstance. + */ + isDisabled?: boolean +} + +export interface AriaRadioProps extends RadioProps, DOMProps, AriaLabelingProps, PressEvents {} + export interface RadioAria { /** Props for the label wrapper element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-aria/radio/src/useRadioGroup.ts b/packages/@react-aria/radio/src/useRadioGroup.ts index 47034b23d8f..ced54580aac 100644 --- a/packages/@react-aria/radio/src/useRadioGroup.ts +++ b/packages/@react-aria/radio/src/useRadioGroup.ts @@ -10,16 +10,17 @@ * governing permissions and limitations under the License. */ -import {AriaRadioGroupProps} from '@react-types/radio'; -import {DOMAttributes, ValidationResult} from '@react-types/shared'; +import {AriaLabelingProps, AriaValidationProps, DOMAttributes, DOMProps, InputDOMProps, ValidationResult} from '@react-types/shared'; import {filterDOMProps, getEventTarget, getOwnerWindow, mergeProps, useId} from '@react-aria/utils'; import {getFocusableTreeWalker} from '@react-aria/focus'; import {radioGroupData} from './utils'; -import {RadioGroupState} from '@react-stately/radio'; +import {RadioGroupProps, RadioGroupState} from '@react-stately/radio'; import {useField} from '@react-aria/label'; import {useFocusWithin} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; +export interface AriaRadioGroupProps extends RadioGroupProps, InputDOMProps, DOMProps, AriaLabelingProps, AriaValidationProps {} + export interface RadioGroupAria extends ValidationResult { /** Props for the radio group wrapper element. */ radioGroupProps: DOMAttributes, diff --git a/packages/@react-aria/searchfield/package.json b/packages/@react-aria/searchfield/package.json index e4c2ff2ce17..4899c4bd8c4 100644 --- a/packages/@react-aria/searchfield/package.json +++ b/packages/@react-aria/searchfield/package.json @@ -26,12 +26,11 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/i18n": "^3.12.16", "@react-aria/textfield": "^3.18.5", "@react-aria/utils": "^3.33.1", "@react-stately/searchfield": "^3.5.19", - "@react-types/button": "^3.15.1", - "@react-types/searchfield": "^3.6.8", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/searchfield/src/index.ts b/packages/@react-aria/searchfield/src/index.ts index dd49a5e49b5..43fb01477b8 100644 --- a/packages/@react-aria/searchfield/src/index.ts +++ b/packages/@react-aria/searchfield/src/index.ts @@ -10,5 +10,5 @@ * governing permissions and limitations under the License. */ export {useSearchField} from './useSearchField'; -export type {AriaSearchFieldProps} from '@react-types/searchfield'; +export type {AriaSearchFieldProps} from './useSearchField'; export type {SearchFieldAria} from './useSearchField'; diff --git a/packages/@react-aria/searchfield/src/useSearchField.ts b/packages/@react-aria/searchfield/src/useSearchField.ts index 15aae4a1a67..9a83a8f3540 100644 --- a/packages/@react-aria/searchfield/src/useSearchField.ts +++ b/packages/@react-aria/searchfield/src/useSearchField.ts @@ -10,16 +10,27 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; -import {AriaSearchFieldProps} from '@react-types/searchfield'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaTextFieldProps, useTextField} from '@react-aria/textfield'; import {chain} from '@react-aria/utils'; import {DOMAttributes, RefObject, ValidationResult} from '@react-types/shared'; import {InputHTMLAttributes, LabelHTMLAttributes} from 'react'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {SearchFieldState} from '@react-stately/searchfield'; +import {SearchFieldProps, SearchFieldState} from '@react-stately/searchfield'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; -import {useTextField} from '@react-aria/textfield'; + +export interface AriaSearchFieldProps extends SearchFieldProps, Omit { + /** + * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). + */ + enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send', + /** + * The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). + * @default 'search' + */ + type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {}) +} export interface SearchFieldAria extends ValidationResult { /** Props for the text field's visible label element (if any). */ diff --git a/packages/@react-aria/select/package.json b/packages/@react-aria/select/package.json index ac64411179b..d02becafd0d 100644 --- a/packages/@react-aria/select/package.json +++ b/packages/@react-aria/select/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/form": "^3.1.5", "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", @@ -36,8 +37,6 @@ "@react-aria/utils": "^3.33.1", "@react-aria/visually-hidden": "^3.8.31", "@react-stately/select": "^3.9.2", - "@react-types/button": "^3.15.1", - "@react-types/select": "^3.12.2", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx index b2656bc22cf..b37e63a45e4 100644 --- a/packages/@react-aria/select/src/HiddenSelect.tsx +++ b/packages/@react-aria/select/src/HiddenSelect.tsx @@ -14,8 +14,7 @@ import {FocusableElement, Key, RefObject} from '@react-types/shared'; import {getEventTarget, useFormReset} from '@react-aria/utils'; import React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react'; import {selectData} from './useSelect'; -import {SelectionMode} from '@react-types/select'; -import {SelectState} from '@react-stately/select'; +import {SelectionMode, SelectState} from '@react-stately/select'; import {useFormValidation} from '@react-aria/form'; import {useVisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/select/src/index.ts b/packages/@react-aria/select/src/index.ts index 3b130c526af..84e538251d3 100644 --- a/packages/@react-aria/select/src/index.ts +++ b/packages/@react-aria/select/src/index.ts @@ -11,6 +11,5 @@ */ export {useSelect} from './useSelect'; export {useHiddenSelect, HiddenSelect} from './HiddenSelect'; -export type {AriaSelectOptions, SelectAria} from './useSelect'; +export type {AriaSelectProps, AriaSelectOptions, SelectAria} from './useSelect'; export type {AriaHiddenSelectProps, HiddenSelectProps} from './HiddenSelect'; -export type {AriaSelectProps} from '@react-types/select'; diff --git a/packages/@react-aria/select/src/useSelect.ts b/packages/@react-aria/select/src/useSelect.ts index 11dc057176e..af9c6e44143 100644 --- a/packages/@react-aria/select/src/useSelect.ts +++ b/packages/@react-aria/select/src/useSelect.ts @@ -10,20 +10,36 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaLabelingProps, DOMAttributes, DOMProps, FocusableDOMProps, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared'; import {AriaListBoxOptions} from '@react-aria/listbox'; -import {AriaSelectProps, SelectionMode} from '@react-types/select'; import {chain, filterDOMProps, mergeProps, nodeContains, useId} from '@react-aria/utils'; -import {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared'; import {FocusEvent, useMemo} from 'react'; import {HiddenSelectProps} from './HiddenSelect'; import {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection'; -import {SelectState} from '@react-stately/select'; +import {SelectionMode, SelectProps, SelectState} from '@react-stately/select'; import {setInteractionModality} from '@react-aria/interactions'; import {useCollator} from '@react-aria/i18n'; import {useField} from '@react-aria/label'; import {useMenuTrigger} from '@react-aria/menu'; +export interface AriaSelectProps extends SelectProps, DOMProps, AriaLabelingProps, FocusableDOMProps { + /** + * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). + */ + autoComplete?: string, + /** + * The name of the input, used when submitting an HTML form. + */ + name?: string, + /** + * The `` element to associate the input with. + * The value of this attribute must be the id of a `` in the same document. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). + */ + form?: string +} + export interface AriaSelectOptions extends Omit, 'children'> { /** * An optional keyboard delegate implementation for type to select, diff --git a/packages/@react-aria/slider/package.json b/packages/@react-aria/slider/package.json index b1c2ad6c48d..96ab59aa0c4 100644 --- a/packages/@react-aria/slider/package.json +++ b/packages/@react-aria/slider/package.json @@ -32,7 +32,6 @@ "@react-aria/utils": "^3.33.1", "@react-stately/slider": "^3.7.5", "@react-types/shared": "^3.33.1", - "@react-types/slider": "^3.8.4", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/slider/src/index.ts b/packages/@react-aria/slider/src/index.ts index b4d966cd3f4..34e09b67693 100644 --- a/packages/@react-aria/slider/src/index.ts +++ b/packages/@react-aria/slider/src/index.ts @@ -11,8 +11,6 @@ */ export {useSlider} from './useSlider'; export {useSliderThumb} from './useSliderThumb'; -export type {AriaSliderProps} from '@react-types/slider'; -export type {SliderAria} from './useSlider'; -export type {AriaSliderThumbOptions, SliderThumbAria} from './useSliderThumb'; -export type {AriaSliderThumbProps} from '@react-types/slider'; +export type {AriaSliderProps, SliderAria} from './useSlider'; +export type {SliderThumbProps, AriaSliderThumbProps, AriaSliderThumbOptions, SliderThumbAria} from './useSliderThumb'; export type {Orientation} from '@react-types/shared'; diff --git a/packages/@react-aria/slider/src/useSlider.ts b/packages/@react-aria/slider/src/useSlider.ts index e9c45c18411..b87dc471638 100644 --- a/packages/@react-aria/slider/src/useSlider.ts +++ b/packages/@react-aria/slider/src/useSlider.ts @@ -10,16 +10,17 @@ * governing permissions and limitations under the License. */ -import {AriaSliderProps} from '@react-types/slider'; +import {AriaLabelingProps, DOMAttributes, DOMProps, RefObject} from '@react-types/shared'; import {clamp, mergeProps, useGlobalListeners} from '@react-aria/utils'; -import {DOMAttributes, RefObject} from '@react-types/shared'; import {getSliderThumbId, sliderData} from './utils'; import React, {LabelHTMLAttributes, OutputHTMLAttributes, useRef} from 'react'; import {setInteractionModality, useMove} from '@react-aria/interactions'; -import {SliderState} from '@react-stately/slider'; +import {SliderProps, SliderState} from '@react-stately/slider'; import {useLabel} from '@react-aria/label'; import {useLocale} from '@react-aria/i18n'; +export interface AriaSliderProps extends SliderProps, DOMProps, AriaLabelingProps {} + export interface SliderAria { /** Props for the label element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-aria/slider/src/useSliderThumb.ts b/packages/@react-aria/slider/src/useSliderThumb.ts index 28f61055999..39c998a3c68 100644 --- a/packages/@react-aria/slider/src/useSliderThumb.ts +++ b/packages/@react-aria/slider/src/useSliderThumb.ts @@ -1,6 +1,5 @@ -import {AriaSliderThumbProps} from '@react-types/slider'; +import {AriaLabelingProps, AriaValidationProps, DOMAttributes, DOMProps, FocusableDOMProps, FocusableProps, InputDOMProps, LabelableProps, Orientation, RefObject, ValidationState} from '@react-types/shared'; import {clamp, focusWithoutScrolling, getEventTarget, mergeProps, useFormReset, useGlobalListeners} from '@react-aria/utils'; -import {DOMAttributes, RefObject} from '@react-types/shared'; import {getSliderThumbId, sliderData} from './utils'; import React, {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, useCallback, useEffect, useRef} from 'react'; import {SliderState} from '@react-stately/slider'; @@ -8,6 +7,30 @@ import {useFocusable, useKeyboard, useMove} from '@react-aria/interactions'; import {useLabel} from '@react-aria/label'; import {useLocale} from '@react-aria/i18n'; +export interface SliderThumbProps extends FocusableProps, LabelableProps { + /** + * The orientation of the Slider. + * @default 'horizontal' + * @deprecated - pass to the slider instead. + */ + orientation?: Orientation, + /** Whether the Thumb is disabled. */ + isDisabled?: boolean, + /** + * Index of the thumb within the slider. + * @default 0 + */ + index?: number, + /** @deprecated */ + isRequired?: boolean, + /** @deprecated */ + isInvalid?: boolean, + /** @deprecated */ + validationState?: ValidationState +} + +export interface AriaSliderThumbProps extends SliderThumbProps, DOMProps, Omit, InputDOMProps, AriaLabelingProps, AriaValidationProps {} + export interface SliderThumbAria { /** Props for the root thumb element; handles the dragging motion. */ thumbProps: DOMAttributes, diff --git a/packages/@react-aria/slider/stories/StoryMultiSlider.tsx b/packages/@react-aria/slider/stories/StoryMultiSlider.tsx index f925c5aadfc..f2ce2aa1cb4 100644 --- a/packages/@react-aria/slider/stories/StoryMultiSlider.tsx +++ b/packages/@react-aria/slider/stories/StoryMultiSlider.tsx @@ -13,11 +13,10 @@ import {classNames} from '@react-spectrum/utils'; import {FocusRing} from '@react-aria/focus'; import React, {JSX} from 'react'; -import {SliderProps, SliderThumbProps} from '@react-types/slider'; -import {SliderState, useSliderState} from '@react-stately/slider'; +import {SliderProps, SliderState, useSliderState} from '@react-stately/slider'; +import {SliderThumbProps, useSlider, useSliderThumb} from '@react-aria/slider'; import styles from './story-slider.css'; import {useNumberFormatter} from '@react-aria/i18n'; -import {useSlider, useSliderThumb} from '@react-aria/slider'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/slider/stories/StoryRangeSlider.tsx b/packages/@react-aria/slider/stories/StoryRangeSlider.tsx index 1e4e3c0ef5a..0164bccea44 100644 --- a/packages/@react-aria/slider/stories/StoryRangeSlider.tsx +++ b/packages/@react-aria/slider/stories/StoryRangeSlider.tsx @@ -1,9 +1,8 @@ -import {AriaSliderProps} from '@react-types/slider'; +import {AriaSliderProps, useSlider, useSliderThumb} from '@react-aria/slider'; import {FocusRing} from '@react-aria/focus'; import React, {JSX} from 'react'; import styles from './story-slider.css'; import {useNumberFormatter} from '@react-aria/i18n'; -import {useSlider, useSliderThumb} from '@react-aria/slider'; import {useSliderState} from '@react-stately/slider'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/slider/stories/StorySlider.tsx b/packages/@react-aria/slider/stories/StorySlider.tsx index 0884247501c..f34f989a7e6 100644 --- a/packages/@react-aria/slider/stories/StorySlider.tsx +++ b/packages/@react-aria/slider/stories/StorySlider.tsx @@ -10,12 +10,11 @@ * governing permissions and limitations under the License. */ -import {AriaSliderProps} from '@react-types/slider'; +import {AriaSliderProps, useSlider, useSliderThumb} from '@react-aria/slider'; import {FocusRing} from '@react-aria/focus'; import React, {JSX} from 'react'; import styles from './story-slider.css'; import {useNumberFormatter} from '@react-aria/i18n'; -import {useSlider, useSliderThumb} from '@react-aria/slider'; import {useSliderState} from '@react-stately/slider'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/spinbutton/package.json b/packages/@react-aria/spinbutton/package.json index 68a7f30d9fa..36c43f57a54 100644 --- a/packages/@react-aria/spinbutton/package.json +++ b/packages/@react-aria/spinbutton/package.json @@ -26,10 +26,10 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/i18n": "^3.12.16", "@react-aria/live-announcer": "^3.4.4", "@react-aria/utils": "^3.33.1", - "@react-types/button": "^3.15.1", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/spinbutton/src/useSpinButton.ts b/packages/@react-aria/spinbutton/src/useSpinButton.ts index c07f82f0821..3855e176c59 100644 --- a/packages/@react-aria/spinbutton/src/useSpinButton.ts +++ b/packages/@react-aria/spinbutton/src/useSpinButton.ts @@ -11,7 +11,7 @@ */ import {announce, clearAnnouncer} from '@react-aria/live-announcer'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DOMAttributes, InputBase, RangeInputBase, Validation, ValueBase} from '@react-types/shared'; // @ts-ignore import intlMessages from '../intl/*.json'; diff --git a/packages/@react-aria/switch/package.json b/packages/@react-aria/switch/package.json index 3fb2cfa85a6..98009c9032f 100644 --- a/packages/@react-aria/switch/package.json +++ b/packages/@react-aria/switch/package.json @@ -29,7 +29,6 @@ "@react-aria/toggle": "^3.12.5", "@react-stately/toggle": "^3.9.5", "@react-types/shared": "^3.33.1", - "@react-types/switch": "^3.5.17", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/switch/src/index.ts b/packages/@react-aria/switch/src/index.ts index 9b83896dfc5..233be05dea2 100644 --- a/packages/@react-aria/switch/src/index.ts +++ b/packages/@react-aria/switch/src/index.ts @@ -11,5 +11,4 @@ */ export {useSwitch} from './useSwitch'; -export type {AriaSwitchProps} from '@react-types/switch'; -export type {SwitchAria} from './useSwitch'; +export type {SwitchProps, AriaSwitchProps, SwitchAria} from './useSwitch'; diff --git a/packages/@react-aria/switch/src/useSwitch.ts b/packages/@react-aria/switch/src/useSwitch.ts index dd37604088c..6b23449f2a8 100644 --- a/packages/@react-aria/switch/src/useSwitch.ts +++ b/packages/@react-aria/switch/src/useSwitch.ts @@ -10,12 +10,41 @@ * governing permissions and limitations under the License. */ -import {AriaSwitchProps} from '@react-types/switch'; -import {InputHTMLAttributes, LabelHTMLAttributes} from 'react'; -import {RefObject} from '@react-types/shared'; +import {AriaLabelingProps, FocusableDOMProps, FocusableProps, InputBase, InputDOMProps, RefObject} from '@react-types/shared'; +import {InputHTMLAttributes, LabelHTMLAttributes, ReactNode} from 'react'; import {ToggleState} from '@react-stately/toggle'; import {useToggle} from '@react-aria/toggle'; +export interface SwitchProps extends InputBase, FocusableProps { + /** + * The content to render as the Switch's label. + */ + children?: ReactNode, + /** + * Whether the Switch should be selected (uncontrolled). + */ + defaultSelected?: boolean, + /** + * Whether the Switch should be selected (controlled). + */ + isSelected?: boolean, + /** + * Handler that is called when the Switch's selection state changes. + */ + onChange?: (isSelected: boolean) => void, + /** + * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). + */ + value?: string +} + +export interface AriaSwitchProps extends SwitchProps, FocusableDOMProps, InputDOMProps, AriaLabelingProps { + /** + * Identifies the element (or elements) whose contents or presence are controlled by the current element. + */ + 'aria-controls'?: string +} + export interface SwitchAria { /** Props for the label wrapper element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-aria/table/package.json b/packages/@react-aria/table/package.json index 9aa6a6b9377..a9ff78653df 100644 --- a/packages/@react-aria/table/package.json +++ b/packages/@react-aria/table/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@react-aria/button": "^3.14.5", - "@react-aria/focus": "^3.21.5", + "@react-aria/checkbox": "^3.16.5", "@react-aria/grid": "^3.14.8", "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", @@ -35,12 +35,9 @@ "@react-aria/utils": "^3.33.1", "@react-aria/visually-hidden": "^3.8.31", "@react-stately/collections": "^3.12.10", - "@react-stately/flags": "^3.1.2", + "@react-stately/grid": "^3.11.9", "@react-stately/table": "^3.15.4", - "@react-types/checkbox": "^3.10.4", - "@react-types/grid": "^3.3.8", "@react-types/shared": "^3.33.1", - "@react-types/table": "^3.13.6", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/table/src/TableKeyboardDelegate.ts b/packages/@react-aria/table/src/TableKeyboardDelegate.ts index 79bda883bf0..ba0abc25b8e 100644 --- a/packages/@react-aria/table/src/TableKeyboardDelegate.ts +++ b/packages/@react-aria/table/src/TableKeyboardDelegate.ts @@ -12,10 +12,10 @@ import {getChildNodes, getFirstItem} from '@react-stately/collections'; import {GridKeyboardDelegate} from '@react-aria/grid'; +import {ITableCollection} from '@react-stately/table'; import {Key, Node} from '@react-types/shared'; -import {TableCollection} from '@react-types/table'; -export class TableKeyboardDelegate extends GridKeyboardDelegate> { +export class TableKeyboardDelegate extends GridKeyboardDelegate> { protected isCell(node: Node): boolean { return node.type === 'cell' || node.type === 'rowheader' || node.type === 'column'; diff --git a/packages/@react-aria/table/src/useTableCell.ts b/packages/@react-aria/table/src/useTableCell.ts index 1016cc13297..d11da3d5957 100644 --- a/packages/@react-aria/table/src/useTableCell.ts +++ b/packages/@react-aria/table/src/useTableCell.ts @@ -12,7 +12,7 @@ import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; import {getCellId} from './utils'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {TableState} from '@react-stately/table'; import {useGridCell} from '@react-aria/grid'; diff --git a/packages/@react-aria/table/src/useTableColumnHeader.ts b/packages/@react-aria/table/src/useTableColumnHeader.ts index e6ac331c1cd..1ee09358d8c 100644 --- a/packages/@react-aria/table/src/useTableColumnHeader.ts +++ b/packages/@react-aria/table/src/useTableColumnHeader.ts @@ -12,7 +12,7 @@ import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; import {getColumnHeaderId} from './utils'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; import {isAndroid, mergeProps, useDescription} from '@react-aria/utils'; diff --git a/packages/@react-aria/table/src/useTableColumnResize.ts b/packages/@react-aria/table/src/useTableColumnResize.ts index 21e462e7937..d445565eaf9 100644 --- a/packages/@react-aria/table/src/useTableColumnResize.ts +++ b/packages/@react-aria/table/src/useTableColumnResize.ts @@ -11,15 +11,14 @@ */ import {ChangeEvent, useCallback, useEffect, useRef} from 'react'; -import {ColumnSize} from '@react-types/table'; +import {ColumnSize, TableColumnResizeState} from '@react-stately/table'; import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared'; import {focusSafely, useInteractionModality, useKeyboard, useMove, usePress} from '@react-aria/interactions'; import {getActiveElement, getEventTarget, mergeProps, useDescription, useEffectEvent, useId} from '@react-aria/utils'; import {getColumnHeaderId} from './utils'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {TableColumnResizeState} from '@react-stately/table'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useVisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/table/src/useTableRow.ts b/packages/@react-aria/table/src/useTableRow.ts index 082fbaf61b4..8daf2f561c7 100644 --- a/packages/@react-aria/table/src/useTableRow.ts +++ b/packages/@react-aria/table/src/useTableRow.ts @@ -17,9 +17,8 @@ import {GridRowAria, GridRowProps, useGridRow} from '@react-aria/grid'; import {HTMLAttributes} from 'react'; // @ts-ignore import intlMessages from '../intl/*.json'; +import {ITableCollection, TableState, TreeGridState} from '@react-stately/table'; import {mergeProps, useLabels, useSyntheticLinkProps} from '@react-aria/utils'; -import {TableCollection} from '@react-types/table'; -import {TableState, TreeGridState} from '@react-stately/table'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; const EXPANSION_KEYS = { @@ -44,7 +43,7 @@ export interface TableRowAria extends GridRowAria { */ export function useTableRow(props: GridRowProps, state: TableState | TreeGridState, ref: RefObject): TableRowAria { let {node, isVirtualized} = props; - let {rowProps, ...states} = useGridRow, TableState>(props, state as TableState, ref); + let {rowProps, ...states} = useGridRow, TableState>(props, state as TableState, ref); let {direction} = useLocale(); if (isVirtualized && state.treeColumn == null) { diff --git a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts index d9cd021532a..cabc1bec042 100644 --- a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts +++ b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaCheckboxProps} from '@react-types/checkbox'; +import {AriaCheckboxProps} from '@react-aria/checkbox'; import {getRowLabelledBy} from './utils'; // @ts-ignore import intlMessages from '../intl/*.json'; diff --git a/packages/@react-aria/table/stories/example-backwards-compat.tsx b/packages/@react-aria/table/stories/example-backwards-compat.tsx index 83c949ee8ec..c45f0cde61b 100644 --- a/packages/@react-aria/table/stories/example-backwards-compat.tsx +++ b/packages/@react-aria/table/stories/example-backwards-compat.tsx @@ -13,7 +13,7 @@ import {mergeProps} from '@react-aria/utils'; import React, {JSX, ReactNode, useRef, useState} from 'react'; import {SelectionBehavior} from '@react-types/shared'; -import {TableProps} from '@react-types/table'; +import {TableProps, useTableState} from '@react-stately/table'; import {useCheckbox} from '@react-aria/checkbox'; import {useFocusRing} from '@react-aria/focus'; import { @@ -25,7 +25,6 @@ import { useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox } from '../src'; -import {useTableState} from '@react-stately/table'; import {useToggleState} from '@react-stately/toggle'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/table/stories/example-docs.tsx b/packages/@react-aria/table/stories/example-docs.tsx index 6d528bca5e4..c652cf83f24 100644 --- a/packages/@react-aria/table/stories/example-docs.tsx +++ b/packages/@react-aria/table/stories/example-docs.tsx @@ -14,11 +14,10 @@ import ariaStyles from './docs-example.css'; import {classNames} from '@react-spectrum/utils'; import {mergeProps} from '@react-aria/utils'; import React, {JSX, useCallback, useRef} from 'react'; -import {TableProps} from '@react-types/table'; +import {TableProps, useTableColumnResizeState, useTableState} from '@react-stately/table'; import {useButton} from 'react-aria'; import {useFocusRing} from '@react-aria/focus'; import {useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup} from '@react-aria/table'; -import {useTableColumnResizeState, useTableState} from '@react-stately/table'; export function Table(props: TableProps & { onResizeStart?: (columnKey: string) => void, diff --git a/packages/@react-aria/table/stories/example-resizing.tsx b/packages/@react-aria/table/stories/example-resizing.tsx index 36a0bdad38d..a294f338479 100644 --- a/packages/@react-aria/table/stories/example-resizing.tsx +++ b/packages/@react-aria/table/stories/example-resizing.tsx @@ -24,14 +24,13 @@ import { useTableSelectionCheckbox } from '@react-aria/table'; import {classNames} from '@react-spectrum/utils'; -import {ColumnSize, TableProps} from '@react-types/table'; +import {ColumnSize, TableProps, useTableColumnResizeState, useTableState} from '@react-stately/table'; import {FocusRing, useFocusRing} from '@react-aria/focus'; import {Key} from '@react-types/shared'; import {mergeProps, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import React, {JSX, ReactNode, useCallback, useMemo, useRef, useState} from 'react'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; import {useCheckbox} from '@react-aria/checkbox'; -import {useTableColumnResizeState, useTableState} from '@react-stately/table'; import {useToggleState} from '@react-stately/toggle'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/table/stories/example.tsx b/packages/@react-aria/table/stories/example.tsx index 35d43ac6e09..6065fb22d43 100644 --- a/packages/@react-aria/table/stories/example.tsx +++ b/packages/@react-aria/table/stories/example.tsx @@ -13,11 +13,10 @@ import {Key, SelectionBehavior} from '@react-types/shared'; import {mergeProps} from '@react-aria/utils'; import React, {JSX, ReactNode, useRef, useState} from 'react'; -import {TableProps} from '@react-types/table'; +import {TableProps, useTableState} from '@react-stately/table'; import {useCheckbox} from '@react-aria/checkbox'; import {useFocusRing} from '@react-aria/focus'; import {useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table'; -import {useTableState} from '@react-stately/table'; import {useToggleState} from '@react-stately/toggle'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/table/stories/useTable.stories.tsx b/packages/@react-aria/table/stories/useTable.stories.tsx index f82a488ac0b..37c50288d6e 100644 --- a/packages/@react-aria/table/stories/useTable.stories.tsx +++ b/packages/@react-aria/table/stories/useTable.stories.tsx @@ -12,8 +12,7 @@ import {action} from 'storybook/actions'; import {Table as BackwardCompatTable} from './example-backwards-compat'; -import {Cell, Column, Row, TableBody, TableHeader} from '@react-stately/table'; -import {ColumnSize} from '@react-types/table'; +import {Cell, Column, ColumnSize, Row, TableBody, TableHeader} from '@react-stately/table'; import {Table as DocsTable} from './example-docs'; import {Key} from '@react-types/shared'; import {Meta, StoryObj} from '@storybook/react'; diff --git a/packages/@react-aria/tabs/package.json b/packages/@react-aria/tabs/package.json index 0e9b896bcd6..9b1338be8fe 100644 --- a/packages/@react-aria/tabs/package.json +++ b/packages/@react-aria/tabs/package.json @@ -32,7 +32,6 @@ "@react-aria/utils": "^3.33.1", "@react-stately/tabs": "^3.8.9", "@react-types/shared": "^3.33.1", - "@react-types/tabs": "^3.3.22", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/tabs/src/index.ts b/packages/@react-aria/tabs/src/index.ts index e36be83acab..2088e75191b 100644 --- a/packages/@react-aria/tabs/src/index.ts +++ b/packages/@react-aria/tabs/src/index.ts @@ -12,8 +12,7 @@ export {useTab} from './useTab'; export {useTabPanel} from './useTabPanel'; export {useTabList} from './useTabList'; -export type {AriaTabListProps, AriaTabPanelProps, AriaTabProps} from '@react-types/tabs'; export type {Orientation} from '@react-types/shared'; -export type {TabAria} from './useTab'; -export type {TabPanelAria} from './useTabPanel'; -export type {AriaTabListOptions, TabListAria} from './useTabList'; +export type {AriaTabProps, TabAria} from './useTab'; +export type {AriaTabPanelProps, TabPanelAria} from './useTabPanel'; +export type {AriaTabListProps, AriaTabListOptions, TabListAria} from './useTabList'; diff --git a/packages/@react-aria/tabs/src/useTab.ts b/packages/@react-aria/tabs/src/useTab.ts index 21f2a9e5f2e..1df2c73e563 100644 --- a/packages/@react-aria/tabs/src/useTab.ts +++ b/packages/@react-aria/tabs/src/useTab.ts @@ -10,14 +10,22 @@ * governing permissions and limitations under the License. */ -import {AriaTabProps} from '@react-types/tabs'; -import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared'; import {filterDOMProps, mergeProps, useLinkProps} from '@react-aria/utils'; import {generateId} from './utils'; import {TabListState} from '@react-stately/tabs'; import {useFocusable} from '@react-aria/focus'; import {useSelectableItem} from '@react-aria/selection'; +export interface AriaTabProps extends AriaLabelingProps { + /** The key of the tab. */ + key: Key, + /** Whether the tab should be disabled. */ + isDisabled?: boolean, + /** Whether the tab selection should occur on press up instead of press down. */ + shouldSelectOnPressUp?: boolean +} + export interface TabAria { /** Props for the tab element. */ tabProps: DOMAttributes, diff --git a/packages/@react-aria/tabs/src/useTabList.ts b/packages/@react-aria/tabs/src/useTabList.ts index 04a4b52c8ab..d8c1a910b3e 100644 --- a/packages/@react-aria/tabs/src/useTabList.ts +++ b/packages/@react-aria/tabs/src/useTabList.ts @@ -10,16 +10,28 @@ * governing permissions and limitations under the License. */ -import {AriaTabListProps} from '@react-types/tabs'; -import {DOMAttributes, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, Orientation, RefObject} from '@react-types/shared'; import {mergeProps, useId, useLabels} from '@react-aria/utils'; -import {TabListState} from '@react-stately/tabs'; +import {TabListProps, TabListState} from '@react-stately/tabs'; import {tabsIds} from './utils'; import {TabsKeyboardDelegate} from './TabsKeyboardDelegate'; import {useLocale} from '@react-aria/i18n'; import {useMemo} from 'react'; import {useSelectableCollection} from '@react-aria/selection'; +export interface AriaTabListProps extends TabListProps, DOMProps, AriaLabelingProps { + /** + * Whether tabs are activated automatically on focus or manually. + * @default 'automatic' + */ + keyboardActivation?: 'automatic' | 'manual', + /** + * The orientation of the tabs. + * @default 'horizontal' + */ + orientation?: Orientation +} + export interface AriaTabListOptions extends Omit, 'children'> {} export interface TabListAria { diff --git a/packages/@react-aria/tabs/src/useTabPanel.ts b/packages/@react-aria/tabs/src/useTabPanel.ts index fb2c42cce0e..ae71b89fd32 100644 --- a/packages/@react-aria/tabs/src/useTabPanel.ts +++ b/packages/@react-aria/tabs/src/useTabPanel.ts @@ -10,13 +10,17 @@ * governing permissions and limitations under the License. */ -import {AriaTabPanelProps} from '@react-types/tabs'; -import {DOMAttributes, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, Key, RefObject} from '@react-types/shared'; import {generateId} from './utils'; import {mergeProps, useLabels} from '@react-aria/utils'; import {TabListState} from '@react-stately/tabs'; import {useHasTabbableChild} from '@react-aria/focus'; +export interface AriaTabPanelProps extends Omit, AriaLabelingProps { + /** The unique id of the tab. */ + id?: Key +} + export interface TabPanelAria { /** Props for the tab panel element. */ tabPanelProps: DOMAttributes diff --git a/packages/@react-aria/tag/package.json b/packages/@react-aria/tag/package.json index 73d20234a0c..f0c8010b69d 100644 --- a/packages/@react-aria/tag/package.json +++ b/packages/@react-aria/tag/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/gridlist": "^3.14.4", "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", @@ -33,7 +34,6 @@ "@react-aria/selection": "^3.27.2", "@react-aria/utils": "^3.33.1", "@react-stately/list": "^3.13.4", - "@react-types/button": "^3.15.1", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts index 266e0d95128..c9968d8f322 100644 --- a/packages/@react-aria/tag/src/useTag.ts +++ b/packages/@react-aria/tag/src/useTag.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DOMAttributes, FocusableElement, Node, RefObject} from '@react-types/shared'; import {filterDOMProps, mergeProps, useDescription, useId, useSyntheticLinkProps} from '@react-aria/utils'; import {hookData} from './useTagGroup'; diff --git a/packages/@react-aria/textfield/package.json b/packages/@react-aria/textfield/package.json index 519d3f768a6..21ba8ada642 100644 --- a/packages/@react-aria/textfield/package.json +++ b/packages/@react-aria/textfield/package.json @@ -33,7 +33,6 @@ "@react-stately/form": "^3.2.4", "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.33.1", - "@react-types/textfield": "^3.12.8", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/textfield/src/index.ts b/packages/@react-aria/textfield/src/index.ts index 17f0fc3ef7b..9d72097722b 100644 --- a/packages/@react-aria/textfield/src/index.ts +++ b/packages/@react-aria/textfield/src/index.ts @@ -13,4 +13,4 @@ export type {TextFieldAria} from './useTextField'; export {useTextField} from './useTextField'; export {useFormattedTextField} from './useFormattedTextField'; export type {AriaTextFieldOptions} from './useTextField'; -export type {AriaTextFieldProps} from '@react-types/textfield'; +export type {TextFieldProps, AriaTextFieldProps} from './useTextField'; diff --git a/packages/@react-aria/textfield/src/useFormattedTextField.ts b/packages/@react-aria/textfield/src/useFormattedTextField.ts index 30325c5c9e3..e2a4297a3fc 100644 --- a/packages/@react-aria/textfield/src/useFormattedTextField.ts +++ b/packages/@react-aria/textfield/src/useFormattedTextField.ts @@ -10,11 +10,10 @@ * governing permissions and limitations under the License. */ -import {AriaTextFieldProps} from '@react-types/textfield'; +import {AriaTextFieldProps, TextFieldAria, useTextField} from './useTextField'; import {getEventTarget, mergeProps, useEffectEvent} from '@react-aria/utils'; import {InputEventHandler, useEffect, useRef} from 'react'; import {RefObject} from '@react-types/shared'; -import {TextFieldAria, useTextField} from './useTextField'; interface FormattedTextFieldState { validate: (val: string) => boolean, diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts index e82f0293238..72fc5440d97 100644 --- a/packages/@react-aria/textfield/src/useTextField.ts +++ b/packages/@react-aria/textfield/src/useTextField.ts @@ -10,8 +10,21 @@ * governing permissions and limitations under the License. */ -import {AriaTextFieldProps} from '@react-types/textfield'; -import {DOMAttributes, ValidationResult} from '@react-types/shared'; +import { + AriaLabelingProps, + AriaValidationProps, + DOMAttributes, + FocusableDOMProps, + FocusableProps, + HelpTextProps, + InputBase, + LabelableProps, + TextInputBase, + TextInputDOMProps, + Validation, + ValidationResult, + ValueBase +} from '@react-types/shared'; import {filterDOMProps, getEventTarget, mergeProps, useFormReset} from '@react-aria/utils'; import React, { ChangeEvent, @@ -69,6 +82,27 @@ type TextFieldHTMLAttributesType = Pick = TextFieldHTMLAttributesType[T]; +export interface TextFieldProps extends InputBase, Validation, HelpTextProps, FocusableProps, TextInputBase, ValueBase, LabelableProps {} + +export interface AriaTextFieldProps extends TextFieldProps, AriaLabelingProps, FocusableDOMProps, TextInputDOMProps, AriaValidationProps { + // https://www.w3.org/TR/wai-aria-1.2/#textbox + /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ + 'aria-activedescendant'?: string, + /** + * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be + * presented if they are made. + */ + 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both', + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog', + /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */ + 'aria-controls'?: string, + /** + * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). + */ + enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' +} + export interface AriaTextFieldOptions extends AriaTextFieldProps { /** * The HTML element used to render the input, e.g. 'input', or 'textarea'. diff --git a/packages/@react-aria/toast/package.json b/packages/@react-aria/toast/package.json index 15804612224..c84a48830b6 100644 --- a/packages/@react-aria/toast/package.json +++ b/packages/@react-aria/toast/package.json @@ -26,12 +26,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", "@react-aria/landmark": "^3.0.10", "@react-aria/utils": "^3.33.1", "@react-stately/toast": "^3.1.3", - "@react-types/button": "^3.15.1", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/toast/src/useToast.ts b/packages/@react-aria/toast/src/useToast.ts index 33c408606db..13d468fa3f8 100644 --- a/packages/@react-aria/toast/src/useToast.ts +++ b/packages/@react-aria/toast/src/useToast.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaLabelingProps, DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; import {filterDOMProps, useId, useLayoutEffect, useSlotId} from '@react-aria/utils'; // @ts-ignore diff --git a/packages/@react-aria/toggle/package.json b/packages/@react-aria/toggle/package.json index 3a43ce588a1..d375e9f2741 100644 --- a/packages/@react-aria/toggle/package.json +++ b/packages/@react-aria/toggle/package.json @@ -29,7 +29,6 @@ "@react-aria/interactions": "^3.27.1", "@react-aria/utils": "^3.33.1", "@react-stately/toggle": "^3.9.5", - "@react-types/checkbox": "^3.10.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/toggle/src/index.ts b/packages/@react-aria/toggle/src/index.ts index df0eb656be9..9c62483c361 100644 --- a/packages/@react-aria/toggle/src/index.ts +++ b/packages/@react-aria/toggle/src/index.ts @@ -11,5 +11,4 @@ */ export {useToggle} from './useToggle'; -export type {AriaToggleProps} from '@react-types/checkbox'; -export type {ToggleAria} from './useToggle'; +export type {AriaToggleProps, ToggleAria} from './useToggle'; diff --git a/packages/@react-aria/toggle/src/useToggle.ts b/packages/@react-aria/toggle/src/useToggle.ts index 511d9abea53..9c9cd278dfc 100644 --- a/packages/@react-aria/toggle/src/useToggle.ts +++ b/packages/@react-aria/toggle/src/useToggle.ts @@ -10,13 +10,19 @@ * governing permissions and limitations under the License. */ -import {AriaToggleProps} from '@react-types/checkbox'; +import {AriaLabelingProps, AriaValidationProps, FocusableDOMProps, InputDOMProps, PressEvents, RefObject} from '@react-types/shared'; import {ChangeEventHandler, InputHTMLAttributes, LabelHTMLAttributes} from 'react'; import {filterDOMProps, getEventTarget, mergeProps, useFormReset} from '@react-aria/utils'; -import {RefObject} from '@react-types/shared'; -import {ToggleState} from '@react-stately/toggle'; +import {ToggleProps, ToggleState} from '@react-stately/toggle'; import {useFocusable, usePress} from '@react-aria/interactions'; +export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps, InputDOMProps, PressEvents { + /** + * Identifies the element (or elements) whose contents or presence are controlled by the current element. + */ + 'aria-controls'?: string +} + export interface ToggleAria { /** Props to be spread on the label element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-aria/tooltip/package.json b/packages/@react-aria/tooltip/package.json index cf21fec6218..647187e2e0d 100644 --- a/packages/@react-aria/tooltip/package.json +++ b/packages/@react-aria/tooltip/package.json @@ -30,7 +30,6 @@ "@react-aria/utils": "^3.33.1", "@react-stately/tooltip": "^3.5.11", "@react-types/shared": "^3.33.1", - "@react-types/tooltip": "^3.5.2", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/tooltip/src/index.ts b/packages/@react-aria/tooltip/src/index.ts index 4c7f8648b21..290c820a43b 100644 --- a/packages/@react-aria/tooltip/src/index.ts +++ b/packages/@react-aria/tooltip/src/index.ts @@ -11,6 +11,6 @@ */ export {useTooltip} from './useTooltip'; export {useTooltipTrigger} from './useTooltipTrigger'; -export type {AriaTooltipProps, TooltipTriggerProps} from '@react-types/tooltip'; -export type {TooltipAria} from './useTooltip'; +export type {TooltipTriggerProps} from '@react-stately/tooltip'; +export type {TooltipProps, AriaTooltipProps, TooltipAria} from './useTooltip'; export type {TooltipTriggerAria} from './useTooltipTrigger'; diff --git a/packages/@react-aria/tooltip/src/useTooltip.ts b/packages/@react-aria/tooltip/src/useTooltip.ts index a900c741503..ccb86e9caad 100644 --- a/packages/@react-aria/tooltip/src/useTooltip.ts +++ b/packages/@react-aria/tooltip/src/useTooltip.ts @@ -10,12 +10,17 @@ * governing permissions and limitations under the License. */ -import {AriaTooltipProps} from '@react-types/tooltip'; -import {DOMAttributes} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps} from '@react-types/shared'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {TooltipTriggerState} from '@react-stately/tooltip'; import {useHover} from '@react-aria/interactions'; +export interface TooltipProps { + isOpen?: boolean +} + +export interface AriaTooltipProps extends TooltipProps, DOMProps, AriaLabelingProps {} + export interface TooltipAria { /** * Props for the tooltip element. diff --git a/packages/@react-aria/tooltip/src/useTooltipTrigger.ts b/packages/@react-aria/tooltip/src/useTooltipTrigger.ts index cacef8ec890..f77186196a8 100644 --- a/packages/@react-aria/tooltip/src/useTooltipTrigger.ts +++ b/packages/@react-aria/tooltip/src/useTooltipTrigger.ts @@ -13,8 +13,7 @@ import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; import {getInteractionModality, isFocusVisible, useFocusable, useHover} from '@react-aria/interactions'; import {mergeProps, useId} from '@react-aria/utils'; -import {TooltipTriggerProps} from '@react-types/tooltip'; -import {TooltipTriggerState} from '@react-stately/tooltip'; +import {TooltipTriggerProps, TooltipTriggerState} from '@react-stately/tooltip'; import {useEffect, useRef} from 'react'; export interface TooltipTriggerAria { diff --git a/packages/@react-aria/tree/package.json b/packages/@react-aria/tree/package.json index f4d30b9f77d..694ecd47f1f 100644 --- a/packages/@react-aria/tree/package.json +++ b/packages/@react-aria/tree/package.json @@ -26,12 +26,11 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.5", "@react-aria/gridlist": "^3.14.4", "@react-aria/i18n": "^3.12.16", - "@react-aria/selection": "^3.27.2", "@react-aria/utils": "^3.33.1", "@react-stately/tree": "^3.9.6", - "@react-types/button": "^3.15.1", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/tree/src/useTreeItem.ts b/packages/@react-aria/tree/src/useTreeItem.ts index f16c2d8b43c..a28c5e2b910 100644 --- a/packages/@react-aria/tree/src/useTreeItem.ts +++ b/packages/@react-aria/tree/src/useTreeItem.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaGridListItemOptions, GridListItemAria, useGridListItem} from '@react-aria/gridlist'; import {DOMAttributes, FocusableElement, Node, RefObject} from '@react-types/shared'; // @ts-ignore diff --git a/packages/@react-aria/virtualizer/package.json b/packages/@react-aria/virtualizer/package.json index 93f28c9f4ac..db65d95d64f 100644 --- a/packages/@react-aria/virtualizer/package.json +++ b/packages/@react-aria/virtualizer/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-aria/i18n": "^3.12.16", - "@react-aria/interactions": "^3.27.1", "@react-aria/utils": "^3.33.1", "@react-stately/virtualizer": "^4.4.6", "@react-types/shared": "^3.33.1", diff --git a/packages/@react-spectrum/actionbar/package.json b/packages/@react-spectrum/actionbar/package.json index 73065daadd9..b909735aee6 100644 --- a/packages/@react-spectrum/actionbar/package.json +++ b/packages/@react-spectrum/actionbar/package.json @@ -51,7 +51,6 @@ "@react-spectrum/text": "^3.5.25", "@react-spectrum/utils": "^3.12.12", "@react-stately/collections": "^3.12.10", - "@react-types/actionbar": "^3.1.21", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/actionbar/src/ActionBar.tsx b/packages/@react-spectrum/actionbar/src/ActionBar.tsx index 0cb940c29b7..c1f6c22c534 100644 --- a/packages/@react-spectrum/actionbar/src/ActionBar.tsx +++ b/packages/@react-spectrum/actionbar/src/ActionBar.tsx @@ -15,20 +15,46 @@ import {ActionGroup} from '@react-spectrum/actiongroup'; import {announce} from '@react-aria/live-announcer'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; import CrossLarge from '@spectrum-icons/ui/CrossLarge'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, ItemElement, ItemRenderer, Key, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {FocusScope} from '@react-aria/focus'; // @ts-ignore import intlMessages from '../intl/*.json'; import {OpenTransition} from '@react-spectrum/overlays'; import React, {ReactElement, Ref, useEffect, useRef, useState} from 'react'; -import {SpectrumActionBarProps} from '@react-types/actionbar'; import styles from './actionbar.css'; import {Text} from '@react-spectrum/text'; import {useKeyboard} from '@react-aria/interactions'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +interface ActionBarProps { + /** An list of `Item` elements or a function. If the latter, a list of items must be provided using the `items` prop. */ + children: ItemElement | ItemElement[] | ItemRenderer, + /** A list of items to display as children. Must be used with a function as the sole child. */ + items?: Iterable, + /** A list of keys to disable. */ + disabledKeys?: Iterable, + /** The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. */ + selectedItemCount: number | 'all', + /** Handler that is called when the ActionBar clear button is pressed. */ + onClearSelection: () => void, + /** Whether the ActionBar should be displayed with a emphasized style. */ + isEmphasized?: boolean, + /** Handler that is called when an ActionBar button is pressed. */ + onAction?: (key: Key) => void, + /** + * Defines when the text within the buttons should be hidden and only the icon should be shown. + * When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible + * if space is available, and hidden when space is limited. The text is always visible when the item + * is collapsed into a menu. + * @default 'collapse' + */ + buttonLabelBehavior?: 'show' | 'collapse' | 'hide' +} + +export interface SpectrumActionBarProps extends ActionBarProps, DOMProps, StyleProps {} + /** * Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time. */ diff --git a/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx b/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx index ed74c03c882..464a0e91ba4 100644 --- a/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx +++ b/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx @@ -11,13 +11,19 @@ */ import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React from 'react'; -import {SpectrumActionBarContainerProps} from '@react-types/actionbar'; +import React, {ReactNode} from 'react'; import styles from './actionbar.css'; import {useProviderProps} from '@react-spectrum/provider'; +interface ActionBarContainerProps { + /** The contents of the ActionBarContainer. Should include a ActionBar and the renderable content it is associated with. */ + children: ReactNode +} + +export interface SpectrumActionBarContainerProps extends ActionBarContainerProps, DOMProps, StyleProps {} + /** * ActionBarContainer wraps around an ActionBar and a component that supports selection. It handles * the ActionBar's position with respect to its linked component. diff --git a/packages/@react-spectrum/actionbar/src/index.ts b/packages/@react-spectrum/actionbar/src/index.ts index b07d20e23c2..3bd8a4dccdc 100644 --- a/packages/@react-spectrum/actionbar/src/index.ts +++ b/packages/@react-spectrum/actionbar/src/index.ts @@ -13,5 +13,5 @@ export {ActionBar} from './ActionBar'; export {ActionBarContainer} from './ActionBarContainer'; export {Item} from '@react-stately/collections'; -export type {SpectrumActionBarContainerProps} from '@react-types/actionbar'; -export type {SpectrumActionBarProps} from '@react-types/actionbar'; +export type {SpectrumActionBarContainerProps} from './ActionBarContainer'; +export type {SpectrumActionBarProps} from './ActionBar'; diff --git a/packages/@react-spectrum/actiongroup/package.json b/packages/@react-spectrum/actiongroup/package.json index 7fcc3547a84..f7fae71fc6f 100644 --- a/packages/@react-spectrum/actiongroup/package.json +++ b/packages/@react-spectrum/actiongroup/package.json @@ -52,7 +52,6 @@ "@react-spectrum/utils": "^3.12.12", "@react-stately/collections": "^3.12.10", "@react-stately/list": "^3.13.4", - "@react-types/actiongroup": "^3.4.23", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@spectrum-icons/workflow": "^4.2.28", diff --git a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx index 865a651eaba..439233d35c3 100644 --- a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx +++ b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx @@ -11,6 +11,7 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {AriaActionGroupProps, useActionGroup, useActionGroupItem} from '@react-aria/actiongroup'; import {AriaLabelingProps, DOMProps, DOMRef, Key, Node, StyleProps} from '@react-types/shared'; import buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css'; import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium'; @@ -32,13 +33,43 @@ import More from '@spectrum-icons/workflow/More'; import {PressResponder, useHover} from '@react-aria/interactions'; import {Provider, useProviderProps} from '@react-spectrum/provider'; import React, {forwardRef, ReactElement, ReactNode, useCallback, useMemo, useRef, useState} from 'react'; -import {SpectrumActionGroupProps} from '@react-types/actiongroup'; import styles from '@adobe/spectrum-css-temp/components/actiongroup/vars.css'; import {Text} from '@react-spectrum/text'; import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip'; -import {useActionGroup, useActionGroupItem} from '@react-aria/actiongroup'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumActionGroupProps extends AriaActionGroupProps, StyleProps { + /** Whether the ActionButtons should be displayed with a [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */ + isEmphasized?: boolean, + /** + * Sets the amount of space between buttons. + * @default 'regular' + */ + density?: 'compact' | 'regular', + /** Whether the ActionButtons should be justified in their container. */ + isJustified?: boolean, + /** Whether ActionButtons should use the [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ + isQuiet?: boolean, + /** The static color style to apply. Useful when the ActionGroup appears over a color background. */ + staticColor?: 'white' | 'black', + /** + * Defines the behavior of the ActionGroup when the buttons do not fit in the available space. + * When set to 'wrap', the items wrap to form a new line. When set to 'collapse', the items that + * do not fit are collapsed into a dropdown menu. + * @default 'wrap' + */ + overflowMode?: 'wrap' | 'collapse', + /** + * Defines when the text within the buttons should be hidden and only the icon should be shown. + * When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible + * if space is available, and hidden when space is limited. The text is always visible when the item + * is collapsed into a menu. + * @default 'show' + */ + buttonLabelBehavior?: 'show' | 'collapse' | 'hide', + /** The icon displayed in the dropdown menu button when a selectable ActionGroup is collapsed. */ + summaryIcon?: ReactElement +} /** * An ActionGroup is a grouping of ActionButtons that are related to one another. diff --git a/packages/@react-spectrum/actiongroup/src/index.ts b/packages/@react-spectrum/actiongroup/src/index.ts index a72ca7baf34..598caab70e5 100644 --- a/packages/@react-spectrum/actiongroup/src/index.ts +++ b/packages/@react-spectrum/actiongroup/src/index.ts @@ -12,4 +12,4 @@ /// export {ActionGroup} from './ActionGroup'; export {Item} from '@react-stately/collections'; -export type {SpectrumActionGroupProps} from '@react-types/actiongroup'; +export type {SpectrumActionGroupProps} from './ActionGroup'; diff --git a/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx b/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx index 32ae901e755..a981b098632 100644 --- a/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx +++ b/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx @@ -13,10 +13,9 @@ import Filter from '@spectrum-icons/workflow/Filter'; import {generatePowerset} from '@react-spectrum/story-utils'; import {Grid, repeat} from '@react-spectrum/layout'; -import {Item, SearchAutocomplete} from '../'; +import {Item, SearchAutocomplete, SpectrumSearchAutocompleteProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete'; // Skipping focus styles because don't have a way of applying it via classnames // No controlled open state also means no menu diff --git a/packages/@react-spectrum/autocomplete/package.json b/packages/@react-spectrum/autocomplete/package.json index cb266f112da..61eb9a2da8e 100644 --- a/packages/@react-spectrum/autocomplete/package.json +++ b/packages/@react-spectrum/autocomplete/package.json @@ -60,8 +60,6 @@ "@react-spectrum/utils": "^3.12.12", "@react-stately/collections": "^3.12.10", "@react-stately/combobox": "^3.13.0", - "@react-types/autocomplete": "3.0.0-alpha.38", - "@react-types/button": "^3.15.1", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx index d27c1567655..911d4698521 100644 --- a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx +++ b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx @@ -11,7 +11,7 @@ */ import AlertMedium from '@spectrum-icons/ui/AlertMedium'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '@react-aria/button'; import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium'; import {classNames, useFocusableRef} from '@react-spectrum/utils'; import {ClearButton} from '@react-spectrum/button'; @@ -39,12 +39,11 @@ import React, { } from 'react'; import searchAutocompleteStyles from './searchautocomplete.css'; import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css'; -import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete'; +import {SpectrumSearchAutocompleteProps} from './SearchAutocomplete'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; import {Tray} from '@react-spectrum/overlays'; -import {useButton} from '@react-aria/button'; import {useDialog} from '@react-aria/dialog'; import {useField} from '@react-aria/label'; import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n'; diff --git a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx index 4994ed9bbd4..119ea218db7 100644 --- a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx +++ b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx @@ -9,10 +9,11 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaSearchAutocompleteProps, useSearchAutocomplete} from '@react-aria/autocomplete'; +import {AsyncLoadable, DimensionValue, DOMRefValue, FocusableRef, LoadingState, SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; import {classNames, dimensionValue, useFocusableRef, useIsMobileDevice, useResizeObserver, useUnwrapDOMRef} from '@react-spectrum/utils'; import {ClearButton} from '@react-spectrum/button'; -import {DOMRefValue, FocusableRef} from '@react-types/shared'; import {Field} from '@react-spectrum/label'; import {filterDOMProps, useLayoutEffect} from '@react-aria/utils'; import {FocusRing} from '@react-aria/focus'; @@ -20,6 +21,7 @@ import {FocusRing} from '@react-aria/focus'; import intlMessages from '../intl/*.json'; import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox'; import Magnifier from '@spectrum-icons/ui/Magnifier'; +import {MenuTriggerAction, useComboBoxState} from '@react-stately/combobox'; import {MobileSearchAutocomplete} from './MobileSearchAutocomplete'; import {Popover} from '@react-spectrum/overlays'; import {ProgressCircle} from '@react-spectrum/progress'; @@ -35,16 +37,44 @@ import React, { } from 'react'; import searchAutocompleteStyles from './searchautocomplete.css'; import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css'; -import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; -import {useComboBoxState} from '@react-stately/combobox'; import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useFormProps} from '@react-spectrum/form'; import {useHover} from '@react-aria/interactions'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; -import {useSearchAutocomplete} from '@react-aria/autocomplete'; + +export interface SpectrumSearchAutocompleteProps extends SpectrumTextInputBase, Omit, 'menuTrigger' | 'isInvalid' | 'validationState' | 'validate'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Omit { + /** + * The interaction required to display the SearchAutocomplete menu. Note that this prop has no effect on the mobile SearchAutocomplete experience. + * @default 'input' + */ + menuTrigger?: MenuTriggerAction, + /** Whether the SearchAutocomplete should be displayed with a quiet style. */ + isQuiet?: boolean, + /** Alignment of the menu relative to the input target. + * @default 'start' + */ + align?: 'start' | 'end', + /** + * Direction the menu will render relative to the SearchAutocomplete. + * @default 'bottom' + */ + direction?: 'bottom' | 'top', + /** The current loading state of the SearchAutocomplete. Determines whether or not the progress circle should be shown. */ + loadingState?: LoadingState, + /** + * Whether the menu should automatically flip direction when space is limited. + * @default true + */ + shouldFlip?: boolean, + /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */ + menuWidth?: DimensionValue, + onLoadMore?: () => void, + /** An icon to display at the start of the input. */ + icon?: ReactElement | null +} function SearchAutocomplete(props: SpectrumSearchAutocompleteProps, ref: FocusableRef) { props = useProviderProps(props); diff --git a/packages/@react-spectrum/autocomplete/src/index.ts b/packages/@react-spectrum/autocomplete/src/index.ts index 113271364ab..5e44bea1aba 100644 --- a/packages/@react-spectrum/autocomplete/src/index.ts +++ b/packages/@react-spectrum/autocomplete/src/index.ts @@ -12,4 +12,4 @@ /// export {SearchAutocomplete} from './SearchAutocomplete'; export {Item, Section} from '@react-stately/collections'; -export type {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete'; +export type {SpectrumSearchAutocompleteProps} from './SearchAutocomplete'; diff --git a/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx b/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx index cabf4c21403..7cc207cbc7b 100644 --- a/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx +++ b/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import {Avatar} from '../'; +import {Avatar, SpectrumAvatarProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; -import {SpectrumAvatarProps} from '@react-types/avatar'; const SRC_URL_1 = 'https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png'; diff --git a/packages/@react-spectrum/avatar/package.json b/packages/@react-spectrum/avatar/package.json index 7a962d086ec..5b1f8a2b3fc 100644 --- a/packages/@react-spectrum/avatar/package.json +++ b/packages/@react-spectrum/avatar/package.json @@ -42,7 +42,6 @@ "dependencies": { "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", - "@react-types/avatar": "^3.0.21", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/avatar/src/Avatar.tsx b/packages/@react-spectrum/avatar/src/Avatar.tsx index c3eee993820..f061d34a586 100644 --- a/packages/@react-spectrum/avatar/src/Avatar.tsx +++ b/packages/@react-spectrum/avatar/src/Avatar.tsx @@ -11,16 +11,54 @@ */ import {classNames, dimensionValue, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import React, {forwardRef} from 'react'; -import {SpectrumAvatarProps} from '@react-types/avatar'; import styles from '@adobe/spectrum-css-temp/components/avatar/vars.css'; import {useProviderProps} from '@react-spectrum/provider'; const DEFAULT_SIZE = 'avatar-size-100'; const SIZE_RE = /^size-\d+/; +export interface AvatarProps { + /** + * Text description of the avatar. + * + * @default null + */ + alt?: string, + /** + * The image URL for the avatar. + */ + src: string +} + +export interface SpectrumAvatarProps extends AvatarProps, DOMProps, Omit { + /** + * Whether the avatar is disabled. + */ + isDisabled?: boolean, + /** + * Size of the avatar. Affects both height and width. + * + * @default avatar-size-100 + */ + size?: + | 'avatar-size-50' + | 'avatar-size-75' + | 'avatar-size-100' + | 'avatar-size-200' + | 'avatar-size-300' + | 'avatar-size-400' + | 'avatar-size-500' + | 'avatar-size-600' + | 'avatar-size-700' + // This allows autocomplete to work properly and not collapse the above options into just `string`. + // See https://github.com/microsoft/TypeScript/issues/29729. + | (string & {}) + | number +} + /** * An avatar is a thumbnail representation of an entity, such as a user or an organization. */ diff --git a/packages/@react-spectrum/avatar/src/index.ts b/packages/@react-spectrum/avatar/src/index.ts index c340ea0ebc7..4f79697a718 100644 --- a/packages/@react-spectrum/avatar/src/index.ts +++ b/packages/@react-spectrum/avatar/src/index.ts @@ -11,4 +11,4 @@ */ /// export {Avatar} from './Avatar'; -export type {SpectrumAvatarProps} from '@react-types/avatar'; +export type {AvatarProps, SpectrumAvatarProps} from './Avatar'; diff --git a/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx b/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx index e4c5bc0273c..49710b43497 100644 --- a/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx +++ b/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import {Avatar} from '../'; +import {Avatar, SpectrumAvatarProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; -import {SpectrumAvatarProps} from '@react-types/avatar'; const SRC_URL_1 = 'https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png'; diff --git a/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx b/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx index e03d1f24782..6add660b202 100644 --- a/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx +++ b/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx @@ -10,12 +10,11 @@ * governing permissions and limitations under the License. */ -import {Badge} from '../'; +import {Badge, SpectrumBadgeProps} from '../'; import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle'; import {Flex} from '@react-spectrum/layout'; import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {SpectrumBadgeProps} from '@react-types/badge'; import {Text} from '@react-spectrum/text'; let variants: SpectrumBadgeProps['variant'][] = diff --git a/packages/@react-spectrum/badge/package.json b/packages/@react-spectrum/badge/package.json index e0b463a05cb..4804f70d24e 100644 --- a/packages/@react-spectrum/badge/package.json +++ b/packages/@react-spectrum/badge/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.33.1", "@react-spectrum/text": "^3.5.25", "@react-spectrum/utils": "^3.12.12", - "@react-types/badge": "^3.1.23", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/badge/src/Badge.tsx b/packages/@react-spectrum/badge/src/Badge.tsx index d9d2c8325aa..83c7023596e 100644 --- a/packages/@react-spectrum/badge/src/Badge.tsx +++ b/packages/@react-spectrum/badge/src/Badge.tsx @@ -10,15 +10,23 @@ * governing permissions and limitations under the License. */ +import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {classNames, ClearSlots, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef} from 'react'; -import {SpectrumBadgeProps} from '@react-types/badge'; +import React, {forwardRef, ReactNode} from 'react'; import styles from '@adobe/spectrum-css-temp/components/badge/vars.css'; import {Text} from '@react-spectrum/text'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumBadgeProps extends DOMProps, StyleProps, AriaLabelingProps { + /** The content to display in the badge. */ + children: ReactNode, + /** + * The variant changes the background color of the badge. + * When badge has a semantic meaning, they should use the variant for semantic colors. + */ + variant: 'neutral' | 'info' | 'positive' | 'negative' | 'indigo' | 'yellow' | 'magenta' | 'fuchsia' | 'purple' | 'seafoam' +} /** * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention. diff --git a/packages/@react-spectrum/badge/src/index.ts b/packages/@react-spectrum/badge/src/index.ts index 5e5a05029eb..4a12d731336 100644 --- a/packages/@react-spectrum/badge/src/index.ts +++ b/packages/@react-spectrum/badge/src/index.ts @@ -13,4 +13,4 @@ /// export {Badge} from './Badge'; -export type {SpectrumBadgeProps} from '@react-types/badge'; +export type {SpectrumBadgeProps} from './Badge'; diff --git a/packages/@react-spectrum/breadcrumbs/package.json b/packages/@react-spectrum/breadcrumbs/package.json index 55fcb61ebaf..816fc678982 100644 --- a/packages/@react-spectrum/breadcrumbs/package.json +++ b/packages/@react-spectrum/breadcrumbs/package.json @@ -49,7 +49,6 @@ "@react-spectrum/menu": "^3.22.11", "@react-spectrum/utils": "^3.12.12", "@react-stately/collections": "^3.12.10", - "@react-types/breadcrumbs": "^3.7.19", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx b/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx index 371895042e8..a47df98f5cc 100644 --- a/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx +++ b/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx @@ -10,14 +10,13 @@ * governing permissions and limitations under the License. */ -import {BreadcrumbItemProps} from '@react-types/breadcrumbs'; +import {BreadcrumbItemProps, useBreadcrumbItem} from '@react-aria/breadcrumbs'; import ChevronRightSmall from '@spectrum-icons/ui/ChevronRightSmall'; import {classNames} from '@react-spectrum/utils'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React, {Fragment, JSX, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css'; -import {useBreadcrumbItem} from '@react-aria/breadcrumbs'; import {useHover} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; diff --git a/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx b/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx index e74fafb891d..545be3d15a2 100644 --- a/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx +++ b/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx @@ -10,18 +10,41 @@ * governing permissions and limitations under the License. */ import {ActionButton} from '@react-spectrum/button'; +import {AriaBreadcrumbsProps, useBreadcrumbs} from '@react-aria/breadcrumbs'; import {BreadcrumbItem} from './BreadcrumbItem'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef, Key} from '@react-types/shared'; +import {DOMRef, ItemProps, Key, StyleProps} from '@react-types/shared'; import FolderBreadcrumb from '@spectrum-icons/ui/FolderBreadcrumb'; import {Menu, MenuTrigger} from '@react-spectrum/menu'; import React, {ReactElement, useCallback, useRef} from 'react'; -import {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs'; import styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css'; -import {useBreadcrumbs} from '@react-aria/breadcrumbs'; import {useLayoutEffect, useResizeObserver, useValueEffect} from '@react-aria/utils'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumBreadcrumbsProps extends AriaBreadcrumbsProps, StyleProps { + /** The breadcrumb items. */ + children: ReactElement> | ReactElement>[], + /** Whether the Breadcrumbs are disabled. */ + isDisabled?: boolean, + /** Called when an item is acted upon (usually selection via press). */ + onAction?: (key: Key) => void, + /** + * Size of the Breadcrumbs including spacing and layout. + * @default 'L' + */ + size?: 'S' | 'M' | 'L', + /** Whether to always show the root item if the items are collapsed. */ + showRoot?: boolean, + /** + * Whether to place the last Breadcrumb item onto a new line. + */ + isMultiline?: boolean, + /** + * Whether to autoFocus the last Breadcrumb item when the Breadcrumbs render. + */ + autoFocusCurrent?: boolean +} + const MIN_VISIBLE_ITEMS = 1; const MAX_VISIBLE_ITEMS = 4; diff --git a/packages/@react-spectrum/breadcrumbs/src/index.ts b/packages/@react-spectrum/breadcrumbs/src/index.ts index 650e47cee7d..d1ff3e9c773 100644 --- a/packages/@react-spectrum/breadcrumbs/src/index.ts +++ b/packages/@react-spectrum/breadcrumbs/src/index.ts @@ -12,4 +12,4 @@ /// export {Breadcrumbs} from './Breadcrumbs'; export {Item} from '@react-stately/collections'; -export type {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs'; +export type {SpectrumBreadcrumbsProps} from './Breadcrumbs'; diff --git a/packages/@react-spectrum/button/package.json b/packages/@react-spectrum/button/package.json index ff775bf89e2..aafd176f3af 100644 --- a/packages/@react-spectrum/button/package.json +++ b/packages/@react-spectrum/button/package.json @@ -49,7 +49,6 @@ "@react-spectrum/text": "^3.5.25", "@react-spectrum/utils": "^3.12.12", "@react-stately/toggle": "^3.9.5", - "@react-types/button": "^3.15.1", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/button/src/ActionButton.tsx b/packages/@react-spectrum/button/src/ActionButton.tsx index c7969ddd5b7..aae263eeb57 100644 --- a/packages/@react-spectrum/button/src/ActionButton.tsx +++ b/packages/@react-spectrum/button/src/ActionButton.tsx @@ -10,19 +10,25 @@ * governing permissions and limitations under the License. */ +import {AriaBaseButtonProps, ButtonProps, useButton} from '@react-aria/button'; import {classNames, ClearSlots, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; import CornerTriangle from '@spectrum-icons/ui/CornerTriangle'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React from 'react'; -import {SpectrumActionButtonProps} from '@react-types/button'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; import {Text} from '@react-spectrum/text'; -import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumActionButtonProps extends AriaBaseButtonProps, Omit, StyleProps { + /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ + isQuiet?: boolean, + /** The static color style to apply. Useful when the button appears over a color background. */ + staticColor?: 'white' | 'black' +} + /** * ActionButtons allow users to perform an action. * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention. diff --git a/packages/@react-spectrum/button/src/Button.tsx b/packages/@react-spectrum/button/src/Button.tsx index e0c196a2ea2..66bf1f1a374 100644 --- a/packages/@react-spectrum/button/src/Button.tsx +++ b/packages/@react-spectrum/button/src/Button.tsx @@ -10,6 +10,7 @@ * governing permissions and limitations under the License. */ +import {AriaButtonProps, useButton} from '@react-aria/button'; import { classNames, SlotProvider, @@ -18,21 +19,39 @@ import { useSlotProps, useStyleProps } from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; // @ts-ignore import intlMessages from '../intl/*.json'; import {isAppleDevice, isFirefox, mergeProps, useId} from '@react-aria/utils'; import {ProgressCircle} from '@react-spectrum/progress'; import React, {ElementType, ReactElement, useEffect, useState} from 'react'; -import {SpectrumButtonProps} from '@react-types/button'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; import {Text} from '@react-spectrum/text'; -import {useButton} from '@react-aria/button'; import {useFocus, useHover} from '@react-aria/interactions'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +/** @deprecated */ +type LegacyButtonVariant = 'cta' | 'overBackground'; +export interface SpectrumButtonProps extends Omit, 'onClick'>, StyleProps { + /** The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. */ + variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant, + /** The background style of the button. */ + style?: 'fill' | 'outline', + /** The static color style to apply. Useful when the button appears over a color background. */ + staticColor?: 'white' | 'black', + /** + * Whether to disable events immediately and display a loading spinner after a 1 second delay. + */ + isPending?: boolean, + /** + * Whether the button should be displayed with a quiet style. + * @deprecated + */ + isQuiet?: boolean +} + function disablePendingProps(props) { // Don't allow interaction while isPending is true if (props.isPending) { diff --git a/packages/@react-spectrum/button/src/ClearButton.tsx b/packages/@react-spectrum/button/src/ClearButton.tsx index aed43c43639..cdae8aad15f 100644 --- a/packages/@react-spectrum/button/src/ClearButton.tsx +++ b/packages/@react-spectrum/button/src/ClearButton.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonElementTypeProps, ButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '@react-aria/button'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import CrossSmall from '@spectrum-icons/ui/CrossSmall'; import {DOMProps, FocusableRef, StyleProps} from '@react-types/shared'; @@ -18,10 +18,9 @@ import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React, {ElementType} from 'react'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; -import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; -interface ClearButtonProps extends ButtonProps, AriaButtonElementTypeProps, DOMProps, StyleProps { +interface ClearButtonProps extends AriaButtonProps, DOMProps, StyleProps { focusClassName?: string, variant?: 'overBackground', excludeFromTabOrder?: boolean, diff --git a/packages/@react-spectrum/button/src/FieldButton.tsx b/packages/@react-spectrum/button/src/FieldButton.tsx index a6070f06ea5..77000c174b9 100644 --- a/packages/@react-spectrum/button/src/FieldButton.tsx +++ b/packages/@react-spectrum/button/src/FieldButton.tsx @@ -10,14 +10,13 @@ * governing permissions and limitations under the License. */ -import {ButtonProps} from '@react-types/button'; +import {ButtonProps, useButton} from '@react-aria/button'; import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; import {DOMProps, FocusableRef, RefObject, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React from 'react'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; -import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps { diff --git a/packages/@react-spectrum/button/src/LogicButton.tsx b/packages/@react-spectrum/button/src/LogicButton.tsx index ce04abf7d85..7731a47d376 100644 --- a/packages/@react-spectrum/button/src/LogicButton.tsx +++ b/packages/@react-spectrum/button/src/LogicButton.tsx @@ -10,17 +10,21 @@ * governing permissions and limitations under the License. */ +import {AriaBaseButtonProps, ButtonProps, useButton} from '@react-aria/button'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React from 'react'; -import {SpectrumLogicButtonProps} from '@react-types/button'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; -import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumLogicButtonProps extends AriaBaseButtonProps, Omit, StyleProps { + /** The type of boolean sequence to be represented by the LogicButton. */ + variant: 'and' | 'or' +} + /** * A LogicButton displays an operator within a boolean logic sequence. */ diff --git a/packages/@react-spectrum/button/src/ToggleButton.tsx b/packages/@react-spectrum/button/src/ToggleButton.tsx index b5356661919..9b9c0c233c3 100644 --- a/packages/@react-spectrum/button/src/ToggleButton.tsx +++ b/packages/@react-spectrum/button/src/ToggleButton.tsx @@ -15,14 +15,19 @@ import {FocusableRef} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React from 'react'; -import {SpectrumToggleButtonProps} from '@react-types/button'; +import {SpectrumActionButtonProps} from './ActionButton'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; import {Text} from '@react-spectrum/text'; +import {ToggleButtonProps, useToggleButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; -import {useToggleButton} from '@react-aria/button'; import {useToggleState} from '@react-stately/toggle'; +export interface SpectrumToggleButtonProps extends Omit, Omit { + /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */ + isEmphasized?: boolean +} + /** * ToggleButtons allow users to toggle a selection on or off, for example * switching between two states or modes. diff --git a/packages/@react-spectrum/button/src/index.ts b/packages/@react-spectrum/button/src/index.ts index 00ffe0148e3..1aecab94258 100644 --- a/packages/@react-spectrum/button/src/index.ts +++ b/packages/@react-spectrum/button/src/index.ts @@ -16,4 +16,7 @@ export {FieldButton} from './FieldButton'; export {LogicButton} from './LogicButton'; export {ClearButton} from './ClearButton'; export {ToggleButton} from './ToggleButton'; -export type {SpectrumActionButtonProps, SpectrumButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps} from '@react-types/button'; +export type {SpectrumActionButtonProps} from './ActionButton'; +export type {SpectrumButtonProps} from './Button'; +export type {SpectrumLogicButtonProps} from './LogicButton'; +export type {SpectrumToggleButtonProps} from './ToggleButton'; diff --git a/packages/@react-spectrum/button/stories/Button.stories.tsx b/packages/@react-spectrum/button/stories/Button.stories.tsx index e45be804ed4..3812660a27b 100644 --- a/packages/@react-spectrum/button/stories/Button.stories.tsx +++ b/packages/@react-spectrum/button/stories/Button.stories.tsx @@ -13,12 +13,11 @@ import {action} from 'storybook/actions'; import {BackgroundColorValue} from '@react-types/shared'; import Bell from '@spectrum-icons/workflow/Bell'; -import {Button} from '../'; +import {Button, SpectrumButtonProps} from '../'; import {Flex} from '@react-spectrum/layout'; import {Form} from '@react-spectrum/form'; import {Meta, StoryObj} from '@storybook/react'; import React, {ElementType, useState} from 'react'; -import {SpectrumButtonProps} from '@react-types/button'; import {Text} from '@react-spectrum/text'; import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip'; import {View} from '@react-spectrum/view'; diff --git a/packages/@react-spectrum/buttongroup/package.json b/packages/@react-spectrum/buttongroup/package.json index ef6c8ec1930..d909ca6d975 100644 --- a/packages/@react-spectrum/buttongroup/package.json +++ b/packages/@react-spectrum/buttongroup/package.json @@ -42,7 +42,6 @@ "dependencies": { "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", - "@react-types/buttongroup": "^3.3.23", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx b/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx index f01e328bb8f..a63ae1b789c 100644 --- a/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx +++ b/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx @@ -10,6 +10,7 @@ * governing permissions and limitations under the License. */ +import {Alignment, DOMProps, DOMRef, Orientation, StyleProps} from '@react-types/shared'; import { classNames, SlotProvider, @@ -18,13 +19,29 @@ import { useSlotProps, useStyleProps } from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils'; import {Provider, useProvider, useProviderProps} from '@react-spectrum/provider'; -import React, {useCallback, useRef} from 'react'; -import {SpectrumButtonGroupProps} from '@react-types/buttongroup'; +import React, {ReactNode, useCallback, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/buttongroup/vars.css'; +export interface SpectrumButtonGroupProps extends DOMProps, StyleProps { + /** Whether the Buttons in the ButtonGroup are all disabled. */ + isDisabled?: boolean, + /** + * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent + * any switching behaviors between 'vertical' and 'horizontal'. + * @default 'horizontal' + */ + orientation?: Orientation, + /** The Buttons contained within the ButtonGroup. */ + children: ReactNode, + /** + * The alignment of the buttons within the ButtonGroup. + * @default 'start' + */ + align?: Alignment | 'center' +} + /** * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other. */ diff --git a/packages/@react-spectrum/buttongroup/src/index.ts b/packages/@react-spectrum/buttongroup/src/index.ts index 1d1d63d8b0a..fcee470be72 100644 --- a/packages/@react-spectrum/buttongroup/src/index.ts +++ b/packages/@react-spectrum/buttongroup/src/index.ts @@ -11,4 +11,4 @@ */ /// export {ButtonGroup} from './ButtonGroup'; -export type {SpectrumButtonGroupProps} from '@react-types/buttongroup'; +export type {SpectrumButtonGroupProps} from './ButtonGroup'; diff --git a/packages/@react-spectrum/calendar/package.json b/packages/@react-spectrum/calendar/package.json index 6d3af0f29ab..11197d3b2a4 100644 --- a/packages/@react-spectrum/calendar/package.json +++ b/packages/@react-spectrum/calendar/package.json @@ -41,6 +41,7 @@ }, "dependencies": { "@internationalized/date": "^3.12.0", + "@react-aria/button": "^3.14.5", "@react-aria/calendar": "^3.9.5", "@react-aria/focus": "^3.21.5", "@react-aria/i18n": "^3.12.16", @@ -51,8 +52,6 @@ "@react-spectrum/label": "^3.16.22", "@react-spectrum/utils": "^3.12.12", "@react-stately/calendar": "^3.9.3", - "@react-types/button": "^3.15.1", - "@react-types/calendar": "^3.8.3", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/calendar/src/Calendar.tsx b/packages/@react-spectrum/calendar/src/Calendar.tsx index a7577f795d5..71b10ab3338 100644 --- a/packages/@react-spectrum/calendar/src/Calendar.tsx +++ b/packages/@react-spectrum/calendar/src/Calendar.tsx @@ -10,17 +10,31 @@ * governing permissions and limitations under the License. */ +import {AriaCalendarProps, useCalendar} from '@react-aria/calendar'; import {CalendarBase} from './CalendarBase'; -import {createCalendar} from '@internationalized/date'; +import {CalendarIdentifier, createCalendar, Calendar as ICalendar} from '@internationalized/date'; import {createDOMRef} from '@react-spectrum/utils'; -import {DateValue, SpectrumCalendarProps} from '@react-types/calendar'; -import {FocusableRef} from '@react-types/shared'; +import {DateValue, useCalendarState} from '@react-stately/calendar'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import React, {ReactElement, useImperativeHandle, useMemo, useRef} from 'react'; -import {useCalendar} from '@react-aria/calendar'; -import {useCalendarState} from '@react-stately/calendar'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumCalendarProps extends AriaCalendarProps, StyleProps { + /** + * The number of months to display at once. Up to 3 months are supported. + * @default 1 + */ + visibleMonths?: number, + + /** + * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) + * object for a given calendar identifier. If not provided, the `createCalendar` function + * from `@internationalized/date` will be used. + */ + createCalendar?: (identifier: CalendarIdentifier) => ICalendar +} + /** * Calendars display a grid of days in one or more months and allow users to select a single date. */ diff --git a/packages/@react-spectrum/calendar/src/CalendarBase.tsx b/packages/@react-spectrum/calendar/src/CalendarBase.tsx index 4a7360d94d8..28fadd2650e 100644 --- a/packages/@react-spectrum/calendar/src/CalendarBase.tsx +++ b/packages/@react-spectrum/calendar/src/CalendarBase.tsx @@ -11,11 +11,10 @@ */ import {ActionButton} from '@react-spectrum/button'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {CalendarDate} from '@internationalized/date'; import {CalendarMonth} from './CalendarMonth'; -import {CalendarPropsBase} from '@react-types/calendar'; -import {CalendarState, RangeCalendarState} from '@react-stately/calendar'; +import {CalendarPropsBase, CalendarState, RangeCalendarState} from '@react-stately/calendar'; import ChevronLeft from '@spectrum-icons/ui/ChevronLeftLarge'; import ChevronRight from '@spectrum-icons/ui/ChevronRightLarge'; import {classNames, useStyleProps} from '@react-spectrum/utils'; diff --git a/packages/@react-spectrum/calendar/src/CalendarMonth.tsx b/packages/@react-spectrum/calendar/src/CalendarMonth.tsx index c8e03affda5..5efcbd85150 100644 --- a/packages/@react-spectrum/calendar/src/CalendarMonth.tsx +++ b/packages/@react-spectrum/calendar/src/CalendarMonth.tsx @@ -12,8 +12,7 @@ import {CalendarCell} from './CalendarCell'; import {CalendarDate, endOfMonth} from '@internationalized/date'; -import {CalendarPropsBase} from '@react-types/calendar'; -import {CalendarState, RangeCalendarState} from '@react-stately/calendar'; +import {CalendarPropsBase, CalendarState, RangeCalendarState} from '@react-stately/calendar'; import {classNames} from '@react-spectrum/utils'; import {DOMProps, StyleProps} from '@react-types/shared'; import React, {JSX} from 'react'; diff --git a/packages/@react-spectrum/calendar/src/RangeCalendar.tsx b/packages/@react-spectrum/calendar/src/RangeCalendar.tsx index 9959f76813c..bcb632ca1d8 100644 --- a/packages/@react-spectrum/calendar/src/RangeCalendar.tsx +++ b/packages/@react-spectrum/calendar/src/RangeCalendar.tsx @@ -10,16 +10,30 @@ * governing permissions and limitations under the License. */ +import {AriaRangeCalendarProps, useRangeCalendar} from '@react-aria/calendar'; import {CalendarBase} from './CalendarBase'; -import {createCalendar} from '@internationalized/date'; +import {CalendarIdentifier, createCalendar, Calendar as ICalendar} from '@internationalized/date'; import {createDOMRef} from '@react-spectrum/utils'; -import {DateValue, SpectrumRangeCalendarProps} from '@react-types/calendar'; -import {FocusableRef} from '@react-types/shared'; +import {DateValue, useRangeCalendarState} from '@react-stately/calendar'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import React, {ReactElement, useImperativeHandle, useMemo, useRef} from 'react'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -import {useRangeCalendar} from '@react-aria/calendar'; -import {useRangeCalendarState} from '@react-stately/calendar'; + +export interface SpectrumRangeCalendarProps extends AriaRangeCalendarProps, StyleProps { + /** + * The number of months to display at once. Up to 3 months are supported. + * @default 1 + */ + visibleMonths?: number, + + /** + * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) + * object for a given calendar identifier. If not provided, the `createCalendar` function + * from `@internationalized/date` will be used. + */ + createCalendar?: (identifier: CalendarIdentifier) => ICalendar +} /** * RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates. diff --git a/packages/@react-spectrum/calendar/src/index.ts b/packages/@react-spectrum/calendar/src/index.ts index 34b2be5dc25..bb71d37d4c6 100644 --- a/packages/@react-spectrum/calendar/src/index.ts +++ b/packages/@react-spectrum/calendar/src/index.ts @@ -14,4 +14,5 @@ export {Calendar} from './Calendar'; export {RangeCalendar} from './RangeCalendar'; -export type {SpectrumCalendarProps, SpectrumRangeCalendarProps} from '@react-types/calendar'; +export type {SpectrumCalendarProps} from './Calendar'; +export type {SpectrumRangeCalendarProps} from './RangeCalendar'; diff --git a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx index c93b170acfe..0009f0f4bef 100644 --- a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx +++ b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx @@ -14,7 +14,7 @@ import {ActionButton} from '@react-spectrum/button'; import {Calendar} from '../'; import {CalendarDate, CalendarDateTime, getLocalTimeZone, parseZonedDateTime, today, ZonedDateTime} from '@internationalized/date'; import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from '@react-stately/calendar'; import {Flex} from '@react-spectrum/layout'; import {Item, Picker, Section} from '@react-spectrum/picker'; import {Key} from '@react-types/shared'; diff --git a/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx b/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx index 6d8c21437c2..b27a7fd90dc 100644 --- a/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx +++ b/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx @@ -13,7 +13,7 @@ import {action} from 'storybook/actions'; import {CalendarDate, CalendarDateTime, getLocalTimeZone, isWeekend, parseZonedDateTime, today} from '@internationalized/date'; import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from '@react-stately/calendar'; import {Flex} from '@react-spectrum/layout'; import {Meta, StoryObj} from '@storybook/react'; import {RangeCalendar} from '../'; diff --git a/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx index d074fc8dd6a..91d2c8a14f2 100644 --- a/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx +++ b/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx @@ -11,10 +11,9 @@ * governing permissions and limitations under the License. */ -import {CardView} from '../'; +import {CardView, SpectrumCardViewProps} from '../'; import {DefaultGrid as DefaultGridStory} from '../chromatic/CardView.stories'; import {Meta, StoryObj} from '@storybook/react'; -import {SpectrumCardViewProps} from '@react-types/card'; const meta: Meta> = { title: 'CardView' diff --git a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx index 50d06991528..a5cc584704e 100644 --- a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx +++ b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx @@ -11,13 +11,12 @@ * governing permissions and limitations under the License. */ -import {Card, CardView, GalleryLayout, GridLayout, WaterfallLayout} from '..'; +import {Card, CardView, GalleryLayout, GridLayout, SpectrumCardViewProps, WaterfallLayout} from '..'; import {Content} from '@react-spectrum/view'; import {Heading, Text} from '@react-spectrum/text'; import {Image} from '@react-spectrum/image'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX, useMemo} from 'react'; -import {SpectrumCardViewProps} from '@react-types/card'; import {useCollator} from '@react-aria/i18n'; const meta: Meta> = { diff --git a/packages/@react-spectrum/card/package.json b/packages/@react-spectrum/card/package.json index ac07c99bfc8..d8bf7e88686 100644 --- a/packages/@react-spectrum/card/package.json +++ b/packages/@react-spectrum/card/package.json @@ -53,8 +53,6 @@ "@react-stately/grid": "^3.11.9", "@react-stately/list": "^3.13.4", "@react-stately/virtualizer": "^4.4.6", - "@react-types/card": "3.0.0-alpha.43", - "@react-types/provider": "^3.8.15", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/card/src/BaseLayout.tsx b/packages/@react-spectrum/card/src/BaseLayout.tsx index 03e85fe0135..989158d14d6 100644 --- a/packages/@react-spectrum/card/src/BaseLayout.tsx +++ b/packages/@react-spectrum/card/src/BaseLayout.tsx @@ -15,7 +15,7 @@ import {Direction, Key, KeyboardDelegate, Node} from '@react-types/shared'; import {getChildNodes, getFirstItem} from '@react-stately/collections'; import {GridCollection} from '@react-stately/grid'; import {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer'; -import {Scale} from '@react-types/provider'; +import {Scale} from '@react-spectrum/provider'; export interface BaseLayoutOptions { collator?: Intl.Collator, diff --git a/packages/@react-spectrum/card/src/Card.tsx b/packages/@react-spectrum/card/src/Card.tsx index bfe6b3db1ed..a080421a9ff 100644 --- a/packages/@react-spectrum/card/src/Card.tsx +++ b/packages/@react-spectrum/card/src/Card.tsx @@ -15,7 +15,7 @@ import {CardBase} from './CardBase'; import {DOMRef, DOMRefValue, ItemProps} from '@react-types/shared'; import {PartialNode} from '@react-stately/collections'; import React, {forwardRef, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes} from 'react'; -import {SpectrumCardProps} from '@react-types/card'; +import {SpectrumCardProps} from './types'; import {useCardViewContext} from './CardViewContext'; diff --git a/packages/@react-spectrum/card/src/CardBase.tsx b/packages/@react-spectrum/card/src/CardBase.tsx index bc641c5c9a3..61252e4c4e5 100644 --- a/packages/@react-spectrum/card/src/CardBase.tsx +++ b/packages/@react-spectrum/card/src/CardBase.tsx @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -import {AriaCardProps, SpectrumCardProps} from '@react-types/card'; +import {AriaCardProps, SpectrumCardProps} from './types'; import {Checkbox} from '@react-spectrum/checkbox'; import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils'; import {DOMRef, Node} from '@react-types/shared'; diff --git a/packages/@react-spectrum/card/src/CardView.tsx b/packages/@react-spectrum/card/src/CardView.tsx index e060a2e84a4..fa897c458cf 100644 --- a/packages/@react-spectrum/card/src/CardView.tsx +++ b/packages/@react-spectrum/card/src/CardView.tsx @@ -22,7 +22,7 @@ import {mergeProps} from '@react-aria/utils'; import {ProgressCircle} from '@react-spectrum/progress'; import React, {ReactElement, ReactNode, useCallback, useMemo, useRef} from 'react'; import {ReusableView} from '@react-stately/virtualizer'; -import {SpectrumCardViewProps} from '@react-types/card'; +import {SpectrumCardViewProps} from './types'; import styles from '@adobe/spectrum-css-temp/components/card/vars.css'; import {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useGrid, useGridCell, useGridRow} from '@react-aria/grid'; diff --git a/packages/@react-spectrum/card/src/index.ts b/packages/@react-spectrum/card/src/index.ts index 3b993a1f4f1..720414c4fb3 100644 --- a/packages/@react-spectrum/card/src/index.ts +++ b/packages/@react-spectrum/card/src/index.ts @@ -21,4 +21,4 @@ export {GalleryLayout} from './GalleryLayout'; export {GridLayout} from './GridLayout'; export {WaterfallLayout} from './WaterfallLayout'; export {Card} from './Card'; -export type {SpectrumCardViewProps} from '@react-types/card'; +export type {SpectrumCardProps, AriaCardViewProps, SpectrumCardViewProps} from './types'; diff --git a/packages/@react-spectrum/card/src/types.ts b/packages/@react-spectrum/card/src/types.ts new file mode 100644 index 00000000000..e017d759c5f --- /dev/null +++ b/packages/@react-spectrum/card/src/types.ts @@ -0,0 +1,67 @@ +/* + * Copyright 2021 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {AriaLabelingProps, AsyncLoadable, Collection, CollectionBase, Direction, DOMProps, KeyboardDelegate, LoadingState, MultipleSelection, Node, Orientation, StyleProps} from '@react-types/shared'; +import {Layout} from '@react-stately/virtualizer'; +import {ReactNode} from 'react'; +import {Scale} from '@react-spectrum/provider'; + +interface AriaCardProps extends AriaLabelingProps {} + +export interface SpectrumCardProps extends AriaCardProps, StyleProps, DOMProps { + children: ReactNode, + isQuiet?: boolean, + layout?: 'grid' | 'waterfall' | 'gallery', + // TODO: readd size when we get updated designs from spectrum + // size?: 'S' | 'M' | 'L', + orientation?: Orientation +} + +interface LayoutOptions { + // cardSize?: 'S' | 'M' | 'L', + cardOrientation?: Orientation, + collator?: Intl.Collator, + // TODO: is this valid or is scale a spectrum specific thing that should be left out of the layouts? + // Added here so we can keep the default item padding options within the layouts instead of having to + // do extra work in CardView to accommodate different sizing for scales + scale?: Scale +} + +// TODO: double check if this is the best way to type the layout provided to the CardView +interface CardViewLayout extends Layout>, KeyboardDelegate { + collection: Collection>, + disabledKeys: any, + isLoading: boolean, + direction: Direction, + layoutType: string, + margin?: number +} + +export interface CardViewLayoutConstructor { + new (options?: LayoutOptions): CardViewLayout +} + +interface CardViewProps extends CollectionBase, MultipleSelection, Omit { + // TODO: Does LayoutConstructor and Layout give enough info for a user to know what to put in their own custom layout? + // Replaced with CardViewLayout so that they know they need to have keyboardDelegate stuff as well as collection, disabledKeys, etc + layout: CardViewLayoutConstructor | CardViewLayout, + // TODO: readd size when we get updated designs from spectrum + // cardSize?: 'S' | 'M' | 'L', + cardOrientation?: Orientation, + isQuiet?: boolean, + renderEmptyState?: () => ReactNode, + loadingState?: LoadingState +} + +export interface AriaCardViewProps extends CardViewProps, DOMProps, AriaLabelingProps {} + +export interface SpectrumCardViewProps extends AriaCardViewProps, StyleProps {} diff --git a/packages/@react-spectrum/card/stories/Card.stories.tsx b/packages/@react-spectrum/card/stories/Card.stories.tsx index 5466af33b00..7820f4d9dc5 100644 --- a/packages/@react-spectrum/card/stories/Card.stories.tsx +++ b/packages/@react-spectrum/card/stories/Card.stories.tsx @@ -12,7 +12,7 @@ */ import {Avatar} from '@react-spectrum/avatar'; -import {Card} from '..'; +import {Card, SpectrumCardProps} from '..'; import {CardBase} from '../src/CardBase'; import {CardViewContext} from '../src/CardViewContext'; import {Content} from '@react-spectrum/view'; @@ -21,7 +21,6 @@ import {Heading, Text} from '@react-spectrum/text'; import {Image} from '@react-spectrum/image'; import {Meta, StoryObj} from '@storybook/react'; import React, {Dispatch, SetStateAction, useState} from 'react'; -import {SpectrumCardProps} from '@react-types/card'; import {usePress} from '@react-aria/interactions'; import {useProvider} from '@react-spectrum/provider'; diff --git a/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx b/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx index 6040270db5a..36d8d0a8a98 100644 --- a/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx +++ b/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx @@ -29,12 +29,11 @@ import { StaticCards, StaticCardViewStory } from './GridCardView.stories'; -import {CardView, GalleryLayout} from '../'; +import {CardView, GalleryLayout, SpectrumCardViewProps} from '../'; import {GalleryLayoutOptions} from '../src/GalleryLayout'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX, useMemo} from 'react'; import {Size} from '@react-stately/virtualizer'; -import {SpectrumCardViewProps} from '@react-types/card'; import {useCollator} from '@react-aria/i18n'; let itemsLowVariance = [ diff --git a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx index 6fe4c0d84f4..c5180cff829 100644 --- a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx +++ b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx @@ -13,7 +13,7 @@ import {action} from 'storybook/actions'; import {ActionButton} from '@react-spectrum/button'; -import {Card, CardView, GridLayout} from '../'; +import {Card, CardView, GridLayout, SpectrumCardViewProps} from '../'; import {Content, View} from '@react-spectrum/view'; import {Flex} from '@react-spectrum/layout'; import {getImageFullData} from './utils'; @@ -26,7 +26,6 @@ import {Key} from '@react-types/shared'; import {Link} from '@react-spectrum/link'; import React, {useMemo, useState} from 'react'; import {Size} from '@react-stately/virtualizer'; -import {SpectrumCardViewProps} from '@react-types/card'; import {TextField} from '@react-spectrum/textfield'; import {useAsyncList} from '@react-stately/data'; import {useCollator} from '@react-aria/i18n'; diff --git a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx index efc990d05c9..6b712c50b80 100644 --- a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx +++ b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx @@ -29,11 +29,10 @@ import { StaticCards, StaticCardViewStory } from './GridCardView.stories'; -import {CardView, WaterfallLayout} from '../'; +import {CardView, SpectrumCardViewProps, WaterfallLayout} from '../'; import {Meta, StoryObj} from '@storybook/react'; import React, {useMemo} from 'react'; import {Size} from '@react-stately/virtualizer'; -import {SpectrumCardViewProps} from '@react-types/card'; import {useCollator} from '@react-aria/i18n'; import {WaterfallLayoutOptions} from '../src/WaterfallLayout'; diff --git a/packages/@react-spectrum/checkbox/package.json b/packages/@react-spectrum/checkbox/package.json index 68e8e4eb26e..640edbed70a 100644 --- a/packages/@react-spectrum/checkbox/package.json +++ b/packages/@react-spectrum/checkbox/package.json @@ -48,7 +48,6 @@ "@react-spectrum/utils": "^3.12.12", "@react-stately/checkbox": "^3.7.5", "@react-stately/toggle": "^3.9.5", - "@react-types/checkbox": "^3.10.4", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0", diff --git a/packages/@react-spectrum/checkbox/src/Checkbox.tsx b/packages/@react-spectrum/checkbox/src/Checkbox.tsx index 9ce0915c976..c2f5ee5c282 100644 --- a/packages/@react-spectrum/checkbox/src/Checkbox.tsx +++ b/packages/@react-spectrum/checkbox/src/Checkbox.tsx @@ -10,22 +10,34 @@ * governing permissions and limitations under the License. */ +import {AriaCheckboxProps, useCheckbox, useCheckboxGroupItem} from '@react-aria/checkbox'; import {CheckboxContext, useContextProps} from 'react-aria-components'; import {CheckboxGroupContext} from './context'; import CheckmarkSmall from '@spectrum-icons/ui/CheckmarkSmall'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import DashSmall from '@spectrum-icons/ui/DashSmall'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import React, {forwardRef, useContext, useRef} from 'react'; -import {SpectrumCheckboxProps} from '@react-types/checkbox'; import styles from '@adobe/spectrum-css-temp/components/checkbox/vars.css'; -import {useCheckbox, useCheckboxGroupItem} from '@react-aria/checkbox'; import {useFormProps} from '@react-spectrum/form'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; import {useToggleState} from '@react-stately/toggle'; +export interface SpectrumCheckboxProps extends Omit, StyleProps { + /** + * This prop sets the emphasized style which provides visual prominence. + */ + isEmphasized?: boolean, + /** + * A slot name for the component. Slots allow the component to receive props from a parent component. + * An explicit `null` value indicates that the local props completely override all props received from a parent. + * @private + */ + slot?: string | null +} + /** * Checkboxes allow users to select multiple items from a list of individual items, * or to mark one individual item as selected. diff --git a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx index 721ab646fff..287d6cf5d80 100644 --- a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx +++ b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx @@ -10,18 +10,35 @@ * governing permissions and limitations under the License. */ +import {AriaCheckboxGroupProps, useCheckboxGroup} from '@react-aria/checkbox'; import {CheckboxGroupContext} from './context'; import {classNames, useDOMRef} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMRef, Orientation, SpectrumHelpTextProps, SpectrumLabelableProps, StyleProps, Validation} from '@react-types/shared'; import {Field} from '@react-spectrum/label'; import {Provider, useProviderProps} from '@react-spectrum/provider'; -import React from 'react'; -import {SpectrumCheckboxGroupProps} from '@react-types/checkbox'; +import React, {ReactElement} from 'react'; +import {SpectrumCheckboxProps} from './Checkbox'; import styles from '@adobe/spectrum-css-temp/components/fieldgroup/vars.css'; -import {useCheckboxGroup} from '@react-aria/checkbox'; import {useCheckboxGroupState} from '@react-stately/checkbox'; import {useFormProps} from '@react-spectrum/form'; +export interface SpectrumCheckboxGroupProps extends AriaCheckboxGroupProps, SpectrumLabelableProps, Validation, StyleProps, SpectrumHelpTextProps { + /** + * The Checkboxes contained within the CheckboxGroup. + */ + children: ReactElement | ReactElement[], + /** + * The axis the checkboxes should align with. + * @default 'vertical' + */ + orientation?: Orientation, + /** + * By default, checkboxes are not emphasized (gray). + * The emphasized (blue) version provides visual prominence. + */ + isEmphasized?: boolean +} + /** * A CheckboxGroup allows users to select one or more items from a list of choices. */ diff --git a/packages/@react-spectrum/checkbox/src/index.ts b/packages/@react-spectrum/checkbox/src/index.ts index c46a38dd276..5b5c87e7b14 100644 --- a/packages/@react-spectrum/checkbox/src/index.ts +++ b/packages/@react-spectrum/checkbox/src/index.ts @@ -12,4 +12,5 @@ /// export {Checkbox} from './Checkbox'; export {CheckboxGroup} from './CheckboxGroup'; -export type {SpectrumCheckboxProps, SpectrumCheckboxGroupProps} from '@react-types/checkbox'; +export type {SpectrumCheckboxProps} from './Checkbox'; +export type {SpectrumCheckboxGroupProps} from './CheckboxGroup'; diff --git a/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx b/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx index 79475c3ff9e..0c4bfeee99d 100644 --- a/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx +++ b/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx @@ -11,11 +11,10 @@ */ import {action} from 'storybook/actions'; -import {Checkbox, CheckboxGroup} from '../'; +import {Checkbox, CheckboxGroup, SpectrumCheckboxGroupProps} from '../'; import {Content, ContextualHelp, Flex, Heading} from '@adobe/react-spectrum'; import {Meta, StoryObj} from '@storybook/react'; import React, {useState} from 'react'; -import {SpectrumCheckboxGroupProps} from '@react-types/checkbox'; export type CheckboxGroupStory = StoryObj; diff --git a/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx index 06b58c828f5..2da76c0064b 100644 --- a/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx +++ b/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx @@ -10,12 +10,11 @@ * governing permissions and limitations under the License. */ -import {ColorArea, ColorField, ColorSlider, ColorSwatch, ColorWheel} from '../'; +import {ColorArea, ColorField, ColorSlider, ColorSwatch, ColorWheel, SpectrumColorAreaProps} from '../'; import {Flex} from '@adobe/react-spectrum'; import {Meta, StoryObj} from '@storybook/react'; import {parseColor} from '@react-stately/color'; import React, {JSX, useState} from 'react'; -import {SpectrumColorAreaProps} from '@react-types/color'; const meta: Meta = { title: 'ColorArea', diff --git a/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx index 293f3c9ad1b..7f96530a1fb 100644 --- a/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx +++ b/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColorField} from '../'; +import {ColorField, SpectrumColorFieldProps} from '../'; import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {generatePowerset} from '@react-spectrum/story-utils'; @@ -18,7 +18,6 @@ import {Grid, repeat} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumColorFieldProps} from '@react-types/color'; // Ignore read only because it doesn't apply any distingishable visual features let states = [ diff --git a/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx index 74b38a6f7c5..3b4ce059f66 100644 --- a/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx +++ b/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColorSlider} from '../'; +import {ColorSlider, SpectrumColorSliderProps} from '../'; import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {generatePowerset} from '@react-spectrum/story-utils'; @@ -18,7 +18,6 @@ import {Grid, repeat} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumColorSliderProps} from '@react-types/color'; let states = [ {isDisabled: true}, diff --git a/packages/@react-spectrum/color/docs/ColorArea.mdx b/packages/@react-spectrum/color/docs/ColorArea.mdx index 80301747a7c..817ac9dead4 100644 --- a/packages/@react-spectrum/color/docs/ColorArea.mdx +++ b/packages/@react-spectrum/color/docs/ColorArea.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; diff --git a/packages/@react-spectrum/color/docs/ColorField.mdx b/packages/@react-spectrum/color/docs/ColorField.mdx index f158d2bc9ee..974434a9187 100644 --- a/packages/@react-spectrum/color/docs/ColorField.mdx +++ b/packages/@react-spectrum/color/docs/ColorField.mdx @@ -14,7 +14,6 @@ import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-spectrum/color/package.json'; import statelyDocs from 'docs:@react-stately/color'; -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; ```jsx import import {ColorField} from '@react-spectrum/color'; @@ -45,7 +44,7 @@ keywords: [color field, input] ## Value A ColorField's `value` is empty by default, but an initial, uncontrolled, value can be provided using the `defaultValue` prop. -Alternatively, a controlled value can be provided using the `value` prop. The value provided to either of these props should be a color string or object. +Alternatively, a controlled value can be provided using the `value` prop. The value provided to either of these props should be a color string or object. In the example below, the function is used to parse the initial color from a hex value, stored in state. diff --git a/packages/@react-spectrum/color/docs/ColorPicker.mdx b/packages/@react-spectrum/color/docs/ColorPicker.mdx index 7e1dda904d8..a34b59c33d9 100644 --- a/packages/@react-spectrum/color/docs/ColorPicker.mdx +++ b/packages/@react-spectrum/color/docs/ColorPicker.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; diff --git a/packages/@react-spectrum/color/docs/ColorSlider.mdx b/packages/@react-spectrum/color/docs/ColorSlider.mdx index 084820d6102..a2b89483442 100644 --- a/packages/@react-spectrum/color/docs/ColorSlider.mdx +++ b/packages/@react-spectrum/color/docs/ColorSlider.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; diff --git a/packages/@react-spectrum/color/docs/ColorSwatch.mdx b/packages/@react-spectrum/color/docs/ColorSwatch.mdx index d4cd1e11b49..23af213d3c0 100644 --- a/packages/@react-spectrum/color/docs/ColorSwatch.mdx +++ b/packages/@react-spectrum/color/docs/ColorSwatch.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; diff --git a/packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx b/packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx index bc315038362..38a5cbe3717 100644 --- a/packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx +++ b/packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; diff --git a/packages/@react-spectrum/color/docs/ColorWheel.mdx b/packages/@react-spectrum/color/docs/ColorWheel.mdx index 2d666c3b5ba..82df8aae2ee 100644 --- a/packages/@react-spectrum/color/docs/ColorWheel.mdx +++ b/packages/@react-spectrum/color/docs/ColorWheel.mdx @@ -8,7 +8,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */} import docs from 'docs:@react-spectrum/color'; -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; import packageData from '@react-spectrum/color/package.json'; diff --git a/packages/@react-spectrum/color/package.json b/packages/@react-spectrum/color/package.json index 30ea7ab10d8..2c6987b94b2 100644 --- a/packages/@react-spectrum/color/package.json +++ b/packages/@react-spectrum/color/package.json @@ -54,9 +54,7 @@ "@react-spectrum/utils": "^3.12.12", "@react-spectrum/view": "^3.6.26", "@react-stately/color": "^3.9.5", - "@react-types/color": "^3.1.4", "@react-types/shared": "^3.33.1", - "@react-types/textfield": "^3.12.8", "@swc/helpers": "^0.5.0", "react-aria-components": "^1.16.0" }, diff --git a/packages/@react-spectrum/color/src/ColorArea.tsx b/packages/@react-spectrum/color/src/ColorArea.tsx index fbcd2b069dd..fab8387d0bf 100644 --- a/packages/@react-spectrum/color/src/ColorArea.tsx +++ b/packages/@react-spectrum/color/src/ColorArea.tsx @@ -10,19 +10,23 @@ * governing permissions and limitations under the License. */ +import {AriaColorAreaProps, useColorArea} from '@react-aria/color'; import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import {ColorAreaContext, useContextProps} from 'react-aria-components'; import {ColorThumb} from './ColorThumb'; -import {FocusableRef} from '@react-types/shared'; +import {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared'; import {mergeProps} from '@react-aria/utils'; import React, {ReactElement, useRef} from 'react'; -import {SpectrumColorAreaProps} from '@react-types/color'; import styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css'; -import {useColorArea} from '@react-aria/color'; import {useColorAreaState} from '@react-stately/color'; import {useFocusRing} from '@react-aria/focus'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumColorAreaProps extends AriaColorAreaProps, Omit { + /** Size of the Color Area. */ + size?: DimensionValue +} + /** * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background. */ diff --git a/packages/@react-spectrum/color/src/ColorEditor.tsx b/packages/@react-spectrum/color/src/ColorEditor.tsx index b7ce2c39ff5..7a58d8029a5 100644 --- a/packages/@react-spectrum/color/src/ColorEditor.tsx +++ b/packages/@react-spectrum/color/src/ColorEditor.tsx @@ -1,9 +1,8 @@ import {ColorArea} from './ColorArea'; import {ColorField} from './ColorField'; import {ColorSlider} from './ColorSlider'; -import {ColorSpace} from '@react-types/color'; +import {ColorSpace, getColorChannels} from '@react-stately/color'; import {DOMRef} from '@react-types/shared'; -import {getColorChannels} from '@react-stately/color'; // @ts-ignore import intlMessages from '../intl/*.json'; import {Item, Picker} from '@react-spectrum/picker'; diff --git a/packages/@react-spectrum/color/src/ColorField.tsx b/packages/@react-spectrum/color/src/ColorField.tsx index 9cbdfba2618..c0eddf9bb31 100644 --- a/packages/@react-spectrum/color/src/ColorField.tsx +++ b/packages/@react-spectrum/color/src/ColorField.tsx @@ -10,19 +10,33 @@ * governing permissions and limitations under the License. */ +import {AriaColorFieldProps, useColorChannelField, useColorField} from '@react-aria/color'; import {classNames} from '@react-spectrum/utils'; -import {ColorChannel, SpectrumColorFieldProps} from '@react-types/color'; +import {Color, ColorChannel, ColorSpace, useColorChannelFieldState, useColorFieldState} from '@react-stately/color'; import {ColorFieldContext, useContextProps} from 'react-aria-components'; import React, {Ref, useEffect, useRef} from 'react'; +import {SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; import styles from './colorfield.css'; -import {TextFieldBase} from '@react-spectrum/textfield'; -import {TextFieldRef} from '@react-types/textfield'; -import {useColorChannelField, useColorField} from '@react-aria/color'; -import {useColorChannelFieldState, useColorFieldState} from '@react-stately/color'; +import {TextFieldBase, TextFieldRef} from '@react-spectrum/textfield'; import {useFormProps} from '@react-spectrum/form'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumColorFieldProps extends SpectrumTextInputBase, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps { + /** + * The color channel that this field edits. If not provided, + * the color is edited as a hex value. + */ + channel?: ColorChannel, + /** + * The color space that the color field operates in if a `channel` prop is provided. + * If no `channel` is provided, the color field always displays the color as an RGB hex value. + */ + colorSpace?: ColorSpace, + /** Whether the ColorField should be displayed with a quiet style. */ + isQuiet?: boolean +} + /** * A color field allows users to edit a hex color or individual color channel value. */ diff --git a/packages/@react-spectrum/color/src/ColorSlider.tsx b/packages/@react-spectrum/color/src/ColorSlider.tsx index f42e5af782c..2b0a0a59092 100644 --- a/packages/@react-spectrum/color/src/ColorSlider.tsx +++ b/packages/@react-spectrum/color/src/ColorSlider.tsx @@ -10,20 +10,26 @@ * governing permissions and limitations under the License. */ +import {AriaColorSliderProps, useColorSlider} from '@react-aria/color'; import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import {ColorSliderContext, useContextProps} from 'react-aria-components'; import {ColorThumb} from './ColorThumb'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {Label} from '@react-spectrum/label'; -import React, {useRef, useState} from 'react'; -import {SpectrumColorSliderProps} from '@react-types/color'; +import React, {ReactNode, useRef, useState} from 'react'; import styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css'; -import {useColorSlider} from '@react-aria/color'; import {useColorSliderState} from '@react-stately/color'; import {useFocus, useFocusVisible} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumColorSliderProps extends AriaColorSliderProps, StyleProps { + /** Whether the value label is displayed. True by default if there is a label, false by default if not. */ + showValueLabel?: boolean, + /** A ContextualHelp element to place next to the label. */ + contextualHelp?: ReactNode +} + /** * ColorSliders allow users to adjust an individual channel of a color value. */ diff --git a/packages/@react-spectrum/color/src/ColorSwatch.tsx b/packages/@react-spectrum/color/src/ColorSwatch.tsx index ff7ba8a0484..3adbabc0c89 100644 --- a/packages/@react-spectrum/color/src/ColorSwatch.tsx +++ b/packages/@react-spectrum/color/src/ColorSwatch.tsx @@ -11,7 +11,7 @@ */ import {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color'; -import {Color} from '@react-types/color'; +import {Color} from '@react-stately/color'; import {ColorSwatchContext, useContextProps} from 'react-aria-components'; import {DOMRef, StyleProps} from '@react-types/shared'; import React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react'; diff --git a/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx index 320e8fb0fdc..b07cf5158d0 100644 --- a/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx +++ b/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx @@ -11,7 +11,7 @@ */ import {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem} from 'react-aria-components'; -import {Color} from '@react-types/color'; +import {Color} from '@react-stately/color'; import {DOMRef, StyleProps, ValueBase} from '@react-types/shared'; import React, {forwardRef, ReactElement, ReactNode} from 'react'; import {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch'; diff --git a/packages/@react-spectrum/color/src/ColorThumb.tsx b/packages/@react-spectrum/color/src/ColorThumb.tsx index cdc363a8552..2084f15314b 100644 --- a/packages/@react-spectrum/color/src/ColorThumb.tsx +++ b/packages/@react-spectrum/color/src/ColorThumb.tsx @@ -11,7 +11,7 @@ */ import {classNames} from '@react-spectrum/utils'; -import {Color} from '@react-types/color'; +import {Color} from '@react-stately/color'; import {DOMProps, RefObject} from '@react-types/shared'; import {Overlay} from '@react-spectrum/overlays'; import React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react'; diff --git a/packages/@react-spectrum/color/src/ColorWheel.tsx b/packages/@react-spectrum/color/src/ColorWheel.tsx index 9c92627e5c7..d183ba19a63 100644 --- a/packages/@react-spectrum/color/src/ColorWheel.tsx +++ b/packages/@react-spectrum/color/src/ColorWheel.tsx @@ -10,19 +10,23 @@ * governing permissions and limitations under the License. */ +import {AriaColorWheelProps, useColorWheel} from '@react-aria/color'; import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import {ColorThumb} from './ColorThumb'; import {ColorWheelContext, useContextProps} from 'react-aria-components'; -import {FocusableRef} from '@react-types/shared'; +import {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared'; import React, {useCallback, useRef, useState} from 'react'; -import {SpectrumColorWheelProps} from '@react-types/color'; import styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css'; -import {useColorWheel} from '@react-aria/color'; import {useColorWheelState} from '@react-stately/color'; import {useFocusRing} from '@react-aria/focus'; import {useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumColorWheelProps extends AriaColorWheelProps, Omit { + /** The outer diameter of the ColorWheel. */ + size?: DimensionValue +} + const WHEEL_THICKNESS = 24; /** diff --git a/packages/@react-spectrum/color/src/index.ts b/packages/@react-spectrum/color/src/index.ts index 96172309a7a..91c9f55b6dd 100644 --- a/packages/@react-spectrum/color/src/index.ts +++ b/packages/@react-spectrum/color/src/index.ts @@ -20,9 +20,12 @@ export {ColorPicker} from './ColorPicker'; export {ColorEditor} from './ColorEditor'; export {ColorSwatchPicker} from './ColorSwatchPicker'; export {parseColor, getColorChannels} from '@react-stately/color'; -export type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color'; +export type {SpectrumColorAreaProps} from './ColorArea'; +export type {SpectrumColorFieldProps} from './ColorField'; +export type {SpectrumColorSliderProps} from './ColorSlider'; +export type {SpectrumColorWheelProps} from './ColorWheel'; export type {SpectrumColorSwatchProps} from './ColorSwatch'; export type {SpectrumColorPickerProps} from './ColorPicker'; export type {SpectrumColorEditorProps} from './ColorEditor'; export type {SpectrumColorSwatchPickerProps} from './ColorSwatchPicker'; -export type {Color, ColorSpace, ColorFormat} from '@react-types/color'; +export type {Color, ColorSpace, ColorFormat} from '@react-stately/color'; diff --git a/packages/@react-spectrum/color/stories/ColorArea.stories.tsx b/packages/@react-spectrum/color/stories/ColorArea.stories.tsx index 0cc4d5d0491..086452eaf6a 100644 --- a/packages/@react-spectrum/color/stories/ColorArea.stories.tsx +++ b/packages/@react-spectrum/color/stories/ColorArea.stories.tsx @@ -11,12 +11,11 @@ */ import {action} from 'storybook/actions'; -import {ColorArea, ColorField, ColorSlider, ColorSwatch, ColorWheel} from '../'; +import {ColorArea, ColorField, ColorSlider, ColorSwatch, ColorWheel, SpectrumColorAreaProps} from '../'; import {Flex, Grid, useLocale, View} from '@adobe/react-spectrum'; import {Meta, StoryFn, StoryObj} from '@storybook/react'; import {parseColor} from '@react-stately/color'; import React, {useState} from 'react'; -import {SpectrumColorAreaProps} from '@react-types/color'; const meta: Meta = { title: 'ColorArea', diff --git a/packages/@react-spectrum/color/stories/ColorField.stories.tsx b/packages/@react-spectrum/color/stories/ColorField.stories.tsx index 14193add279..e9900a9f984 100644 --- a/packages/@react-spectrum/color/stories/ColorField.stories.tsx +++ b/packages/@react-spectrum/color/stories/ColorField.stories.tsx @@ -11,14 +11,13 @@ */ import {action} from 'storybook/actions'; -import {Color, SpectrumColorFieldProps} from '@react-types/color'; -import {ColorField} from '../'; +import {Color, parseColor} from '@react-stately/color'; +import {ColorField, SpectrumColorFieldProps} from '../'; import {Content, View} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {Flex} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; -import {parseColor} from '@react-stately/color'; import React, {useState} from 'react'; import {useId} from '@react-aria/utils'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx b/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx index 08d6aa30024..2e26dcaa065 100644 --- a/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx +++ b/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx @@ -11,12 +11,11 @@ */ import {action} from 'storybook/actions'; -import {ColorSwatch, ColorWheel} from '../'; +import {ColorSwatch, ColorWheel, SpectrumColorWheelProps} from '../'; import {Flex, useLocale} from '@adobe/react-spectrum'; import {Meta, StoryFn, StoryObj} from '@storybook/react'; import {parseColor} from '@react-stately/color'; import React, {JSX, useState} from 'react'; -import {SpectrumColorWheelProps} from '@react-types/color'; export type ColorWheelStory = StoryObj; diff --git a/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx index 52e2e33b95a..5e5ebe00201 100644 --- a/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx +++ b/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ComboBox, Item} from '../'; +import {ComboBox, Item, SpectrumComboBoxProps} from '../'; import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {generatePowerset} from '@react-spectrum/story-utils'; @@ -18,7 +18,6 @@ import {Grid, repeat} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumComboBoxProps} from '@react-types/combobox'; // Skipping focus styles because don't have a way of applying it via classnames // No controlled open state also means no menu diff --git a/packages/@react-spectrum/combobox/package.json b/packages/@react-spectrum/combobox/package.json index 5fbfc36c6fa..53ebe216cd9 100644 --- a/packages/@react-spectrum/combobox/package.json +++ b/packages/@react-spectrum/combobox/package.json @@ -60,8 +60,6 @@ "@react-spectrum/utils": "^3.12.12", "@react-stately/collections": "^3.12.10", "@react-stately/combobox": "^3.13.0", - "@react-types/button": "^3.15.1", - "@react-types/combobox": "^3.14.0", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/combobox/src/ComboBox.tsx b/packages/@react-spectrum/combobox/src/ComboBox.tsx index 70e78af304a..dbcefbe7d3d 100644 --- a/packages/@react-spectrum/combobox/src/ComboBox.tsx +++ b/packages/@react-spectrum/combobox/src/ComboBox.tsx @@ -10,7 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaComboBoxProps, useComboBox} from '@react-aria/combobox'; +import {AsyncLoadable, DimensionValue, DOMRefValue, FocusableRef, FocusableRefValue, LoadingState, SingleSelection, SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium'; import { classNames, @@ -21,7 +23,7 @@ import { useUnwrapDOMRef } from '@react-spectrum/utils'; import comboboxStyles from './combobox.css'; -import {DOMRefValue, FocusableRef, FocusableRefValue} from '@react-types/shared'; +import {ComboBoxValidationValue, MenuTriggerAction, useComboBoxState} from '@react-stately/combobox'; import {Field} from '@react-spectrum/label'; import {FieldButton} from '@react-spectrum/button'; import {FocusRing} from '@react-aria/focus'; @@ -42,17 +44,48 @@ import React, { useRef, useState } from 'react'; -import {SpectrumComboBoxProps} from '@react-types/combobox'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; -import {useComboBox} from '@react-aria/combobox'; -import {useComboBoxState} from '@react-stately/combobox'; import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useFormProps} from '@react-spectrum/form'; import {useLayoutEffect} from '@react-aria/utils'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumComboBoxProps extends SpectrumTextInputBase, Omit, 'menuTrigger' | 'isInvalid' | 'validationState' | 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange'>, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Omit { + /** + * The interaction required to display the ComboBox menu. Note that this prop has no effect on the mobile ComboBox experience. + * @default 'input' + */ + menuTrigger?: MenuTriggerAction, + /** Whether the ComboBox should be displayed with a quiet style. */ + isQuiet?: boolean, + /** Alignment of the menu relative to the input target. + * @default 'start' + */ + align?: 'start' | 'end', + /** + * Direction the menu will render relative to the ComboBox. + * @default 'bottom' + */ + direction?: 'bottom' | 'top', + /** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */ + loadingState?: LoadingState, + /** + * Whether the menu should automatically flip direction when space is limited. + * @default true + */ + shouldFlip?: boolean, + /** Width of the menu. By default, matches width of the combobox. Note that the minimum width of the dropdown is always equal to the combobox's width. */ + menuWidth?: DimensionValue, + /** + * Whether the text or key of the selected item is submitted as part of an HTML form. + * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted. + * @default 'text' + */ + formValue?: 'text' | 'key' +} + /** * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query. */ diff --git a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx index 804fe66d52a..2cea4f9224a 100644 --- a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx +++ b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx @@ -11,7 +11,7 @@ */ import AlertMedium from '@spectrum-icons/ui/AlertMedium'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '@react-aria/button'; import buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css'; import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium'; import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium'; @@ -32,12 +32,11 @@ import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox'; import {ProgressCircle} from '@react-spectrum/progress'; import React, {ForwardedRef, HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, useCallback, useEffect, useRef, useState} from 'react'; import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css'; -import {SpectrumComboBoxProps} from '@react-types/combobox'; +import {SpectrumComboBoxProps} from './ComboBox'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; import {Tray} from '@react-spectrum/overlays'; -import {useButton} from '@react-aria/button'; import {useComboBox} from '@react-aria/combobox'; import {useDialog} from '@react-aria/dialog'; import {useField} from '@react-aria/label'; diff --git a/packages/@react-spectrum/combobox/src/index.ts b/packages/@react-spectrum/combobox/src/index.ts index 4499d3795c0..3240dde3b4e 100644 --- a/packages/@react-spectrum/combobox/src/index.ts +++ b/packages/@react-spectrum/combobox/src/index.ts @@ -14,4 +14,4 @@ export {ComboBox} from './ComboBox'; export {Item, Section} from '@react-stately/collections'; -export type {SpectrumComboBoxProps} from '@react-types/combobox'; +export type {SpectrumComboBoxProps} from './ComboBox'; diff --git a/packages/@react-spectrum/contextualhelp/package.json b/packages/@react-spectrum/contextualhelp/package.json index 326bbf30ab5..61c758d99cb 100644 --- a/packages/@react-spectrum/contextualhelp/package.json +++ b/packages/@react-spectrum/contextualhelp/package.json @@ -41,11 +41,12 @@ }, "dependencies": { "@react-aria/i18n": "^3.12.16", + "@react-aria/overlays": "^3.31.2", "@react-aria/utils": "^3.33.1", "@react-spectrum/button": "^3.17.7", "@react-spectrum/dialog": "^3.9.7", "@react-spectrum/utils": "^3.12.12", - "@react-types/contextualhelp": "^3.2.24", + "@react-stately/overlays": "^3.6.23", "@react-types/shared": "^3.33.1", "@spectrum-icons/workflow": "^4.2.28", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx index 4d2857e0032..1bac573ca6c 100644 --- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx @@ -11,19 +11,35 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {AriaLabelingProps, DOMProps, FocusableRef, StyleProps} from '@react-types/shared'; import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; -import {FocusableRef} from '@react-types/shared'; import HelpOutline from '@spectrum-icons/workflow/HelpOutline'; import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css'; import InfoOutline from '@spectrum-icons/workflow/InfoOutline'; // @ts-ignore import intlMessages from '../intl/*.json'; import {mergeProps, useLabels} from '@react-aria/utils'; -import React from 'react'; -import {SpectrumContextualHelpProps} from '@react-types/contextualhelp'; +import {OverlayTriggerProps} from '@react-stately/overlays'; +import {Placement, PositionProps} from '@react-aria/overlays'; +import React, {ReactNode} from 'react'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumContextualHelpProps extends OverlayTriggerProps, PositionProps, StyleProps, DOMProps, AriaLabelingProps { + /** Contents of the Contextual Help popover. */ + children: ReactNode, + /** + * Indicates whether contents are informative or provides helpful guidance. + * @default 'help' + */ + variant?: 'help' | 'info', + /** + * The placement of the popover with respect to the action button. + * @default 'bottom start' + */ + placement?: Placement +} + /** * Contextual help shows a user extra information about the state of an adjacent component, or a total view. */ diff --git a/packages/@react-spectrum/contextualhelp/src/index.ts b/packages/@react-spectrum/contextualhelp/src/index.ts index f7137ca1cbb..0d4589745f0 100644 --- a/packages/@react-spectrum/contextualhelp/src/index.ts +++ b/packages/@react-spectrum/contextualhelp/src/index.ts @@ -11,4 +11,4 @@ */ export {ContextualHelp} from './ContextualHelp'; -export type {SpectrumContextualHelpProps} from '@react-types/contextualhelp'; +export type {SpectrumContextualHelpProps} from './ContextualHelp'; diff --git a/packages/@react-spectrum/datepicker/package.json b/packages/@react-spectrum/datepicker/package.json index bddd888efd5..c69dd33e401 100644 --- a/packages/@react-spectrum/datepicker/package.json +++ b/packages/@react-spectrum/datepicker/package.json @@ -55,7 +55,6 @@ "@react-spectrum/utils": "^3.12.12", "@react-spectrum/view": "^3.6.26", "@react-stately/datepicker": "^3.16.1", - "@react-types/datepicker": "^3.13.5", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@spectrum-icons/workflow": "^4.2.28", diff --git a/packages/@react-spectrum/datepicker/src/DateField.tsx b/packages/@react-spectrum/datepicker/src/DateField.tsx index 8d281711bc1..58465f41a90 100644 --- a/packages/@react-spectrum/datepicker/src/DateField.tsx +++ b/packages/@react-spectrum/datepicker/src/DateField.tsx @@ -10,22 +10,36 @@ * governing permissions and limitations under the License. */ +import {AriaDateFieldProps, useDateField} from '@react-aria/datepicker'; import {classNames} from '@react-spectrum/utils'; import {createCalendar} from '@internationalized/date'; import {DatePickerSegment} from './DatePickerSegment'; import datepickerStyles from './styles.css'; -import {DateValue, SpectrumDateFieldProps} from '@react-types/datepicker'; +import {DateValue, MappedDateValue, useDateFieldState} from '@react-stately/datepicker'; import {Field} from '@react-spectrum/label'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, HelpTextProps, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {Input} from './Input'; import React, {ReactElement, useRef} from 'react'; -import {useDateField} from '@react-aria/datepicker'; -import {useDateFieldState} from '@react-stately/datepicker'; import {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth} from './utils'; import {useFormProps} from '@react-spectrum/form'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumDateFieldBase extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation>, StyleProps { + /** + * Whether the date picker should be displayed with a quiet style. + * @default false + */ + isQuiet?: boolean, + /** + * Whether to show the localized date format as help text below the field. + * @default false + */ + showFormatHelpText?: boolean +} + +export interface SpectrumDateFieldProps extends Omit, 'isInvalid' | 'validationState' | 'autoComplete'>, SpectrumDateFieldBase {} + /** * DateFields allow users to enter and edit date and time values using a keyboard. * Each part of a date value is displayed in an individually editable segment. diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx index 711e2cd5a24..a4185445d65 100644 --- a/packages/@react-spectrum/datepicker/src/DatePicker.tsx +++ b/packages/@react-spectrum/datepicker/src/DatePicker.tsx @@ -10,27 +10,28 @@ * governing permissions and limitations under the License. */ +import {AriaDatePickerProps, useDatePicker} from '@react-aria/datepicker'; import {Calendar} from '@react-spectrum/calendar'; import CalendarIcon from '@spectrum-icons/workflow/Calendar'; +import {CalendarIdentifier, Calendar as ICalendar} from '@internationalized/date'; import {classNames} from '@react-spectrum/utils'; import {Content} from '@react-spectrum/view'; import {DatePickerField} from './DatePickerField'; import datepickerStyles from './styles.css'; -import {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker'; +import {DateValue, useDatePickerState} from '@react-stately/datepicker'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; import {Field} from '@react-spectrum/label'; import {FieldButton} from '@react-spectrum/button'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {Input} from './Input'; // @ts-ignore import intlMessages from '../intl/*.json'; import {mergeProps} from '@react-aria/utils'; import React, {ReactElement, useRef} from 'react'; import '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup +import {SpectrumDateFieldBase} from './DateField'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TimeField} from './TimeField'; -import {useDatePicker} from '@react-aria/datepicker'; -import {useDatePickerState} from '@react-stately/datepicker'; import {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils'; import {useFocusRing} from '@react-aria/focus'; import {useFormProps} from '@react-spectrum/form'; @@ -38,6 +39,27 @@ import {useHover} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumDatePickerBase extends SpectrumDateFieldBase, SpectrumLabelableProps, StyleProps { + /** + * The maximum number of months to display at once in the calendar popover, if screen space permits. + * @default 1 + */ + maxVisibleMonths?: number, + /** + * Whether the calendar popover should automatically flip direction when space is limited. + * @default true + */ + shouldFlip?: boolean, + /** + * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) + * object for a given calendar identifier. This will be used for the popover calendar. If not provided, the + * `createCalendar` function from `@internationalized/date` will be used. + */ + createCalendar?: (identifier: CalendarIdentifier) => ICalendar +} + +export interface SpectrumDatePickerProps extends Omit, 'isInvalid' | 'validationState' | 'autoComplete'>, SpectrumDatePickerBase {} + /** * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value. */ diff --git a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx index 116567974f0..89f97a7850c 100644 --- a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx +++ b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx @@ -14,10 +14,10 @@ import {classNames} from '@react-spectrum/utils'; import {createCalendar} from '@internationalized/date'; import {DatePickerSegment} from './DatePickerSegment'; import datepickerStyles from './styles.css'; -import {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker'; +import {DateValue, useDateFieldState} from '@react-stately/datepicker'; import React, {JSX, useRef} from 'react'; +import {SpectrumDatePickerProps} from './DatePicker'; import {useDateField} from '@react-aria/datepicker'; -import {useDateFieldState} from '@react-stately/datepicker'; import {useLocale} from '@react-aria/i18n'; interface DatePickerFieldProps extends SpectrumDatePickerProps { diff --git a/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx b/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx index 05597611dc5..b820dc568ac 100644 --- a/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx +++ b/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx @@ -10,14 +10,13 @@ * governing permissions and limitations under the License. */ +import {AriaDatePickerProps, useDateSegment} from '@react-aria/datepicker'; import {classNames} from '@react-spectrum/utils'; import {DateFieldState, DateSegment} from '@react-stately/datepicker'; -import {DatePickerBase, DateValue} from '@react-types/datepicker'; import React, {JSX, useRef} from 'react'; import styles from './styles.css'; -import {useDateSegment} from '@react-aria/datepicker'; -interface DatePickerSegmentProps extends DatePickerBase { +interface DatePickerSegmentProps extends AriaDatePickerProps { segment: DateSegment, state: DateFieldState } diff --git a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx index dc1f9eec342..949376acbb3 100644 --- a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx +++ b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx @@ -10,12 +10,13 @@ * governing permissions and limitations under the License. */ +import {AriaDateRangePickerProps, useDateRangePicker} from '@react-aria/datepicker'; import CalendarIcon from '@spectrum-icons/workflow/Calendar'; import {classNames} from '@react-spectrum/utils'; import {Content} from '@react-spectrum/view'; import {DatePickerField} from './DatePickerField'; import datepickerStyles from './styles.css'; -import {DateValue, SpectrumDateRangePickerProps} from '@react-types/datepicker'; +import {DateValue, useDateRangePickerState} from '@react-stately/datepicker'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; import {Field} from '@react-spectrum/label'; import {FieldButton} from '@react-spectrum/button'; @@ -27,10 +28,9 @@ import intlMessages from '../intl/*.json'; import {mergeProps} from '@react-aria/utils'; import {RangeCalendar} from '@react-spectrum/calendar'; import React, {ReactElement, useRef} from 'react'; +import {SpectrumDatePickerBase} from './DatePicker'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TimeField} from './TimeField'; -import {useDateRangePicker} from '@react-aria/datepicker'; -import {useDateRangePickerState} from '@react-stately/datepicker'; import {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils'; import {useFocusRing} from '@react-aria/focus'; import {useFormProps} from '@react-spectrum/form'; @@ -38,6 +38,8 @@ import {useHover} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumDateRangePickerProps extends Omit, 'isInvalid' | 'validationState'>, Omit, 'validate'> {} + /** * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users * to enter or select a date and time range. diff --git a/packages/@react-spectrum/datepicker/src/TimeField.tsx b/packages/@react-spectrum/datepicker/src/TimeField.tsx index 9f831b35194..2ba221f5c09 100644 --- a/packages/@react-spectrum/datepicker/src/TimeField.tsx +++ b/packages/@react-spectrum/datepicker/src/TimeField.tsx @@ -10,20 +10,27 @@ * governing permissions and limitations under the License. */ +import {AriaTimeFieldProps, useTimeField} from '@react-aria/datepicker'; import {classNames} from '@react-spectrum/utils'; import {DatePickerSegment} from './DatePickerSegment'; import datepickerStyles from './styles.css'; import {Field} from '@react-spectrum/label'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, InputDOMProps, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {Input} from './Input'; +import {MappedTimeValue, TimeValue, useTimeFieldState} from '@react-stately/datepicker'; import React, {ReactElement, useRef} from 'react'; -import {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker'; import {useFocusManagerRef, useFormattedDateWidth} from './utils'; import {useFormProps} from '@react-spectrum/form'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -import {useTimeField} from '@react-aria/datepicker'; -import {useTimeFieldState} from '@react-stately/datepicker'; + +export interface SpectrumTimeFieldProps extends Omit, 'isInvalid' | 'validationState'>, SpectrumFieldValidation>, SpectrumLabelableProps, StyleProps, InputDOMProps { + /** + * Whether the time field should be displayed with a quiet style. + * @default false + */ + isQuiet?: boolean +} /** * TimeFields allow users to enter and edit time values using a keyboard. diff --git a/packages/@react-spectrum/datepicker/src/index.ts b/packages/@react-spectrum/datepicker/src/index.ts index 612874b37cb..77cbca04d25 100644 --- a/packages/@react-spectrum/datepicker/src/index.ts +++ b/packages/@react-spectrum/datepicker/src/index.ts @@ -16,4 +16,7 @@ export {DatePicker} from './DatePicker'; export {DateRangePicker} from './DateRangePicker'; export {TimeField} from './TimeField'; export {DateField} from './DateField'; -export type {SpectrumDateFieldProps, SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumTimeFieldProps} from '@react-types/datepicker'; +export type {SpectrumDateFieldProps} from './DateField'; +export type {SpectrumDatePickerProps} from './DatePicker'; +export type {SpectrumDateRangePickerProps} from './DateRangePicker'; +export type {SpectrumTimeFieldProps} from './TimeField'; diff --git a/packages/@react-spectrum/datepicker/src/utils.tsx b/packages/@react-spectrum/datepicker/src/utils.tsx index e64da65dc39..49508c1d60b 100644 --- a/packages/@react-spectrum/datepicker/src/utils.tsx +++ b/packages/@react-spectrum/datepicker/src/utils.tsx @@ -15,7 +15,7 @@ import {DateFormatter, useDateFormatter, useLocale} from '@react-aria/i18n'; import {FocusableRef} from '@react-types/shared'; import {FormatterOptions} from '@react-stately/datepicker'; import React, {ReactNode, useImperativeHandle, useMemo, useRef, useState} from 'react'; -import {SpectrumDatePickerBase} from '@react-types/datepicker'; +import {SpectrumDatePickerBase} from './DatePicker'; import {useDisplayNames} from '@react-aria/datepicker'; import {useLayoutEffect} from '@react-aria/utils'; import {useProvider} from '@react-spectrum/provider'; diff --git a/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx index f8294e57342..7e7b938452e 100644 --- a/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx +++ b/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx @@ -18,7 +18,7 @@ import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl'; import {DatePicker} from '../'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from '@react-stately/calendar'; import {Flex} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Item, Picker, Section} from '@react-spectrum/picker'; diff --git a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx index 22207f2f44f..14083f852f2 100644 --- a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx +++ b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx @@ -15,9 +15,9 @@ import {ActionButton} from '@react-spectrum/button'; import {CalendarDate, getLocalTimeZone, isWeekend, parseDate, today, toZoned} from '@internationalized/date'; import {chain} from '@react-aria/utils'; import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl'; -import {DateRange} from '@react-types/datepicker'; +import {DateRange} from '@react-stately/datepicker'; import {DateRangePicker} from '../'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from '@react-stately/calendar'; import {Flex} from '@react-spectrum/layout'; import {Item, Picker, Section} from '@react-spectrum/picker'; import {Key} from '@react-types/shared'; diff --git a/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx b/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx index 6ba04a79b62..f8a88d11e6c 100644 --- a/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx +++ b/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx @@ -11,11 +11,10 @@ */ import {ActionButton} from '@react-spectrum/button'; -import {AlertDialog, DialogTrigger} from '../'; +import {AlertDialog, DialogTrigger, SpectrumAlertDialogProps} from '../'; import {Meta, StoryFn} from '@storybook/react'; import React, {JSX} from 'react'; import {singleParagraph} from './Dialog.stories'; -import {SpectrumAlertDialogProps} from '@react-types/dialog'; export default { title: 'Dialog/Alert', diff --git a/packages/@react-spectrum/dialog/package.json b/packages/@react-spectrum/dialog/package.json index 102494cae13..29ce985977a 100644 --- a/packages/@react-spectrum/dialog/package.json +++ b/packages/@react-spectrum/dialog/package.json @@ -54,8 +54,6 @@ "@react-spectrum/utils": "^3.12.12", "@react-spectrum/view": "^3.6.26", "@react-stately/overlays": "^3.6.23", - "@react-types/button": "^3.15.1", - "@react-types/dialog": "^3.5.24", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/dialog/src/AlertDialog.tsx b/packages/@react-spectrum/dialog/src/AlertDialog.tsx index 307657593fd..767c39762e2 100644 --- a/packages/@react-spectrum/dialog/src/AlertDialog.tsx +++ b/packages/@react-spectrum/dialog/src/AlertDialog.tsx @@ -11,7 +11,7 @@ */ import AlertMedium from '@spectrum-icons/ui/AlertMedium'; -import {Button} from '@react-spectrum/button'; +import {Button, SpectrumButtonProps} from '@react-spectrum/button'; import {ButtonGroup} from '@react-spectrum/buttongroup'; import {chain, filterDOMProps} from '@react-aria/utils'; import {classNames, useStyleProps} from '@react-spectrum/utils'; @@ -19,16 +19,42 @@ import {Content} from '@react-spectrum/view'; import {Dialog} from './Dialog'; import {DialogContext, DialogContextValue} from './context'; import {Divider} from '@react-spectrum/divider'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {Heading} from '@react-spectrum/text'; // @ts-ignore import intlMessages from '../intl/*.json'; -import React, {forwardRef, useContext} from 'react'; -import {SpectrumAlertDialogProps} from '@react-types/dialog'; -import {SpectrumButtonProps} from '@react-types/button'; +import React, {forwardRef, ReactNode, useContext} from 'react'; import styles from '@adobe/spectrum-css-temp/components/dialog/vars.css'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumAlertDialogProps extends DOMProps, StyleProps { + /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. */ + variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning', + /** The title of the AlertDialog. */ + title: string, + /** The contents of the AlertDialog. */ + children: ReactNode, + /** The label to display within the cancel button. */ + cancelLabel?: string, + /** The label to display within the confirm button. */ + primaryActionLabel: string, + /** The label to display within the secondary button. */ + secondaryActionLabel?: string, + /** Whether the primary button is disabled. */ + isPrimaryActionDisabled?: boolean, + /** Whether the secondary button is disabled. */ + isSecondaryActionDisabled?: boolean, + /** Handler that is called when the cancel button is pressed. */ + onCancel?: () => void, + /** Handler that is called when the primary button is pressed. */ + onPrimaryAction?: () => void, + /** Handler that is called when the secondary button is pressed. */ + onSecondaryAction?: () => void, + /** Button to focus by default when the dialog opens. */ + autoFocusButton?: 'cancel' | 'primary' | 'secondary' + // allowsKeyboardConfirmation?: boolean, // triggers primary action +} + /** * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge. */ diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index 70adf576081..e61d08ea18a 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -11,6 +11,7 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {AriaDialogProps, useDialog} from '@react-aria/dialog'; import { classNames, SlotProvider, @@ -22,17 +23,26 @@ import { } from '@react-spectrum/utils'; import CrossLarge from '@spectrum-icons/ui/CrossLarge'; import {DialogContext, DialogContextValue} from './context'; -import {DOMRef} from '@react-types/shared'; +import {DOMRef, StyleProps} from '@react-types/shared'; import {Grid} from '@react-spectrum/layout'; // @ts-ignore import intlMessages from '../intl/*.json'; import {mergeProps} from '@react-aria/utils'; -import React, {useContext, useMemo, useRef} from 'react'; -import {SpectrumDialogProps} from '@react-types/dialog'; +import React, {ReactNode, useContext, useMemo, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/dialog/vars.css'; -import {useDialog} from '@react-aria/dialog'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumDialogProps extends AriaDialogProps, StyleProps { + /** The contents of the Dialog. */ + children: ReactNode, + /** The size of the Dialog. Only applies to "modal" type Dialogs. */ + size?: 'S' | 'M' | 'L', + /** Whether the Dialog is dismissable. See the [examples](#examples) for more details. */ + isDismissable?: boolean, + /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */ + onDismiss?: () => void +} + let sizeMap = { S: 'small', M: 'medium', diff --git a/packages/@react-spectrum/dialog/src/DialogContainer.tsx b/packages/@react-spectrum/dialog/src/DialogContainer.tsx index e8baa85c408..83286e566ae 100644 --- a/packages/@react-spectrum/dialog/src/DialogContainer.tsx +++ b/packages/@react-spectrum/dialog/src/DialogContainer.tsx @@ -12,10 +12,25 @@ import {DialogContext} from './context'; import {Modal} from '@react-spectrum/overlays'; -import React, {JSX, ReactElement, useState} from 'react'; -import {SpectrumDialogContainerProps} from '@react-types/dialog'; +import React, {JSX, ReactElement, ReactNode, useState} from 'react'; import {useOverlayTriggerState} from '@react-stately/overlays'; +export interface SpectrumDialogContainerProps { + /** The Dialog to display, if any. */ + children: ReactNode, + /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */ + onDismiss: () => void, + /** + * The type of Dialog that should be rendered. See the visual options below for examples of each. + * @default 'modal' + */ + type?: 'modal' | 'fullscreen' | 'fullscreenTakeover', + /** Whether the Dialog is dismissable. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */ + isDismissable?: boolean, + /** Whether pressing the escape key to close the dialog should be disabled. */ + isKeyboardDismissDisabled?: boolean +} + /** * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding * it in a modal. Useful in cases where there is no trigger element diff --git a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx index 4639858b389..f66caccc51b 100644 --- a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx +++ b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx @@ -12,12 +12,36 @@ import {DialogContext} from './context'; import {Modal, Popover, Tray} from '@react-spectrum/overlays'; -import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; +import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; +import {PositionProps, useOverlayTrigger} from '@react-aria/overlays'; import {PressResponder} from '@react-aria/interactions'; -import React, {Fragment, JSX, ReactElement, useEffect, useRef} from 'react'; -import {SpectrumDialogClose, SpectrumDialogProps, SpectrumDialogTriggerProps} from '@react-types/dialog'; +import React, {Fragment, JSX, ReactElement, RefObject, useEffect, useRef} from 'react'; +import {SpectrumDialogProps} from './Dialog'; import {useIsMobileDevice} from '@react-spectrum/utils'; -import {useOverlayTrigger} from '@react-aria/overlays'; + +export type SpectrumDialogClose = (close: () => void) => ReactElement; + +export interface SpectrumDialogTriggerProps extends OverlayTriggerProps, PositionProps { + /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */ + children: [ReactElement, SpectrumDialogClose | ReactElement], + /** + * The type of Dialog that should be rendered. See the DialogTrigger [types section](#dialog-types) for an explanation on each. + * @default 'modal' + */ + type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover', + /** The type of Dialog that should be rendered when on a mobile device. See DialogTrigger [types section](#dialog-types) for an explanation on each. */ + mobileType?: 'modal' | 'tray' | 'fullscreen' | 'fullscreenTakeover', + /** + * Whether a popover type Dialog's arrow should be hidden. + */ + hideArrow?: boolean, + /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */ + targetRef?: RefObject, + /** Whether a modal type Dialog should be dismissable. */ + isDismissable?: boolean, + /** Whether pressing the escape key to close the dialog should be disabled. */ + isKeyboardDismissDisabled?: boolean +} function DialogTrigger(props: SpectrumDialogTriggerProps) { let { diff --git a/packages/@react-spectrum/dialog/src/index.ts b/packages/@react-spectrum/dialog/src/index.ts index 0030f4f0397..97b64170545 100644 --- a/packages/@react-spectrum/dialog/src/index.ts +++ b/packages/@react-spectrum/dialog/src/index.ts @@ -18,5 +18,8 @@ export {DialogTrigger} from './DialogTrigger'; export {DialogContainer} from './DialogContainer'; export {useDialogContainer} from './useDialogContainer'; -export type {SpectrumAlertDialogProps, SpectrumDialogProps, SpectrumDialogContainerProps, SpectrumDialogTriggerProps} from '@react-types/dialog'; +export type {SpectrumAlertDialogProps} from './AlertDialog'; +export type {SpectrumDialogProps} from './Dialog'; +export type {SpectrumDialogContainerProps} from './DialogContainer'; +export type {SpectrumDialogTriggerProps, SpectrumDialogClose} from './DialogTrigger'; export type {DialogContainerValue} from './useDialogContainer'; diff --git a/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx b/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx index 8e6a3193331..434ce1e90ed 100644 --- a/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx @@ -11,11 +11,10 @@ */ import {action} from 'storybook/actions'; import {ActionButton} from '@react-spectrum/button'; -import {AlertDialog, DialogTrigger} from '../'; +import {AlertDialog, DialogTrigger, SpectrumAlertDialogProps} from '../'; import {Meta, StoryFn} from '@storybook/react'; import React from 'react'; import {singleParagraph} from './Dialog.stories'; -import {SpectrumAlertDialogProps} from '@react-types/dialog'; export default { title: 'Dialog/Alert' diff --git a/packages/@react-spectrum/divider/package.json b/packages/@react-spectrum/divider/package.json index 68e459a4885..467864ab235 100644 --- a/packages/@react-spectrum/divider/package.json +++ b/packages/@react-spectrum/divider/package.json @@ -42,7 +42,6 @@ "dependencies": { "@react-aria/separator": "^3.4.16", "@react-spectrum/utils": "^3.12.12", - "@react-types/divider": "^3.3.23", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/divider/src/Divider.tsx b/packages/@react-spectrum/divider/src/Divider.tsx index f86f766777d..16e8454dc44 100644 --- a/packages/@react-spectrum/divider/src/Divider.tsx +++ b/packages/@react-spectrum/divider/src/Divider.tsx @@ -10,13 +10,32 @@ * governing permissions and limitations under the License. */ +import {AriaLabelingProps, DOMProps, DOMRef, Orientation, StyleProps} from '@react-types/shared'; import {classNames, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import React, {ElementType} from 'react'; -import {SpectrumDividerProps} from '@react-types/divider'; import styles from '@adobe/spectrum-css-temp/components/rule/vars.css'; import {useSeparator} from '@react-aria/separator'; +export interface SpectrumDividerProps extends DOMProps, AriaLabelingProps, StyleProps { + /** + * How thick the Divider should be. + * @default 'L' + */ + size?: 'S' | 'M' | 'L', + + /** + * The axis the Divider should align with. + * @default 'horizontal' + */ + orientation?: Orientation, + + /** + * A slot to place the divider in. + * @default 'divider' + */ + slot?: string +} + let sizeMap = { S: 'small', M: 'medium', diff --git a/packages/@react-spectrum/divider/src/index.ts b/packages/@react-spectrum/divider/src/index.ts index a2b71ac7460..9d9df0ac47c 100644 --- a/packages/@react-spectrum/divider/src/index.ts +++ b/packages/@react-spectrum/divider/src/index.ts @@ -13,4 +13,4 @@ /// export {Divider} from './Divider'; -export type {SpectrumDividerProps} from '@react-types/divider'; +export type {SpectrumDividerProps} from './Divider'; diff --git a/packages/@react-spectrum/form/chromatic/Form.stories.tsx b/packages/@react-spectrum/form/chromatic/Form.stories.tsx index bfcc0247983..eb48c85486b 100644 --- a/packages/@react-spectrum/form/chromatic/Form.stories.tsx +++ b/packages/@react-spectrum/form/chromatic/Form.stories.tsx @@ -14,7 +14,7 @@ import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox'; import {ComboBox} from '@react-spectrum/combobox'; import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; -import {Form} from '../'; +import {Form, SpectrumFormProps} from '../'; import {Heading} from '@react-spectrum/text'; import {Item, Picker} from '@react-spectrum/picker'; import {Meta, StoryObj} from '@storybook/react'; @@ -22,7 +22,6 @@ import {NumberField} from '@react-spectrum/numberfield'; import {Radio, RadioGroup} from '@react-spectrum/radio'; import React, {JSX} from 'react'; import {SearchField} from '@react-spectrum/searchfield'; -import {SpectrumFormProps} from '@react-types/form'; import {TextArea, TextField} from '@react-spectrum/textfield'; const meta: Meta = { diff --git a/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx b/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx index 07c754eec65..d0b2b7961d6 100644 --- a/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx +++ b/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx @@ -13,14 +13,13 @@ import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox'; import {ColorField} from '@react-spectrum/color'; import {ComboBox} from '@react-spectrum/combobox'; -import {Form} from '../'; +import {Form, SpectrumFormProps} from '../'; import {Item, Picker} from '@react-spectrum/picker'; import {Meta, StoryObj} from '@storybook/react'; import {NumberField} from '@react-spectrum/numberfield'; import {Radio, RadioGroup} from '@react-spectrum/radio'; import React, {JSX} from 'react'; import {SearchField} from '@react-spectrum/searchfield'; -import {SpectrumFormProps} from '@react-types/form'; import {TextArea, TextField} from '@react-spectrum/textfield'; const meta: Meta = { diff --git a/packages/@react-spectrum/form/package.json b/packages/@react-spectrum/form/package.json index 13e7e959f3d..5b4f6d7669b 100644 --- a/packages/@react-spectrum/form/package.json +++ b/packages/@react-spectrum/form/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", "@react-stately/form": "^3.2.4", - "@react-types/form": "^3.7.18", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/form/src/Form.tsx b/packages/@react-spectrum/form/src/Form.tsx index b15d9012d5f..bb3608e181f 100644 --- a/packages/@react-spectrum/form/src/Form.tsx +++ b/packages/@react-spectrum/form/src/Form.tsx @@ -10,15 +10,41 @@ * governing permissions and limitations under the License. */ -import {Alignment, DOMRef, LabelPosition, SpectrumLabelableProps} from '@react-types/shared'; +import {Alignment, DOMProps, DOMRef, FormProps, LabelPosition, SpectrumLabelableProps, StyleProps, ValidationState} from '@react-types/shared'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; import {filterDOMProps} from '@react-aria/utils'; import {FormValidationContext} from '@react-stately/form'; import {Provider, useProviderProps} from '@react-spectrum/provider'; -import React, {useContext} from 'react'; -import {SpectrumFormProps} from '@react-types/form'; +import React, {ReactElement, useContext} from 'react'; import styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css'; +export interface SpectrumFormProps extends FormProps, DOMProps, StyleProps, Omit { + /** The contents of the Form. */ + children: ReactElement | ReactElement[], + /** Whether the Form elements are displayed with their quiet style. */ + isQuiet?: boolean, + /** Whether the Form elements are rendered with their emphasized style. */ + isEmphasized?: boolean, + /** Whether the Form elements are disabled. */ + isDisabled?: boolean, + /** Whether user input is required on each of the Form elements before Form submission. */ + isRequired?: boolean, + /** Whether the Form elements can be selected but not changed by the user. */ + isReadOnly?: boolean, + /** + * Whether the Form elements should display their "valid" or "invalid" visual styling. + * @default 'valid' + */ + validationState?: ValidationState, + /** + * Whether to use native HTML form validation to prevent form submission + * when a field value is missing or invalid, or mark fields as required + * or invalid via ARIA. + * @default 'aria' + */ + validationBehavior?: 'aria' | 'native' +} + interface FormContextValue extends SpectrumLabelableProps { validationBehavior?: 'aria' | 'native' } diff --git a/packages/@react-spectrum/form/src/index.ts b/packages/@react-spectrum/form/src/index.ts index 9920465f5d4..f97c5099e9b 100644 --- a/packages/@react-spectrum/form/src/index.ts +++ b/packages/@react-spectrum/form/src/index.ts @@ -13,4 +13,4 @@ /// export {useFormProps, Form} from './Form'; -export type {SpectrumFormProps} from '@react-types/form'; +export type {SpectrumFormProps} from './Form'; diff --git a/packages/@react-spectrum/illustratedmessage/package.json b/packages/@react-spectrum/illustratedmessage/package.json index f923da7fd45..44883c3c255 100644 --- a/packages/@react-spectrum/illustratedmessage/package.json +++ b/packages/@react-spectrum/illustratedmessage/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.33.1", "@react-spectrum/layout": "^3.6.22", "@react-spectrum/utils": "^3.12.12", - "@react-types/illustratedmessage": "^3.3.23", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx b/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx index 038545fc671..71dcf81845e 100644 --- a/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx +++ b/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx @@ -11,13 +11,17 @@ */ import {classNames, ClearSlots, SlotProvider, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {Flex} from '@react-spectrum/layout'; -import React, {forwardRef} from 'react'; -import {SpectrumIllustratedMessageProps} from '@react-types/illustratedmessage'; +import React, {forwardRef, ReactNode} from 'react'; import styles from '@adobe/spectrum-css-temp/components/illustratedmessage/vars.css'; +export interface SpectrumIllustratedMessageProps extends DOMProps, StyleProps { + /** The contents of the IllustratedMessage. */ + children: ReactNode +} + /** * An IllustratedMessage displays an illustration and a message, usually * for an empty state or an error page. diff --git a/packages/@react-spectrum/illustratedmessage/src/index.ts b/packages/@react-spectrum/illustratedmessage/src/index.ts index 70b14730819..3ff792cef27 100644 --- a/packages/@react-spectrum/illustratedmessage/src/index.ts +++ b/packages/@react-spectrum/illustratedmessage/src/index.ts @@ -13,4 +13,4 @@ /// export {IllustratedMessage} from './IllustratedMessage'; -export type {SpectrumIllustratedMessageProps} from '@react-types/illustratedmessage'; +export type {SpectrumIllustratedMessageProps} from './IllustratedMessage'; diff --git a/packages/@react-spectrum/image/package.json b/packages/@react-spectrum/image/package.json index 367704600c2..06e220a4cbf 100644 --- a/packages/@react-spectrum/image/package.json +++ b/packages/@react-spectrum/image/package.json @@ -42,7 +42,6 @@ "dependencies": { "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", - "@react-types/image": "^3.5.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/image/src/Image.tsx b/packages/@react-spectrum/image/src/Image.tsx index 5ac5edba02b..119e58ce005 100644 --- a/packages/@react-spectrum/image/src/Image.tsx +++ b/packages/@react-spectrum/image/src/Image.tsx @@ -11,13 +11,48 @@ */ import {classNames, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React from 'react'; -import {SpectrumImageProps} from '@react-types/image'; +import React, {ReactEventHandler} from 'react'; import styles from '@adobe/spectrum-css-temp/components/image/vars.css'; import {useProviderProps} from '@react-spectrum/provider'; +export interface ImageProps { + /** + * The URL of the image. + */ + src: string, + /** + * Text description of the image. + */ + alt?: string, + /** + * Sets the Image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) style. + */ + objectFit?: any, // move to styleProps for images and type better + /** + * Called if an error occurs while loading or rendering an image, see [Image loading errors](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#image_loading_errors). + */ + onError?: ReactEventHandler, + /** + * Called when the image has successfully loaded, see [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event). + */ + onLoad?: ReactEventHandler, + /** + * Indicates if the fetching of the image must be done using a CORS request. + * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). + */ + crossOrigin?: 'anonymous' | 'use-credentials' +} + +export interface SpectrumImageProps extends ImageProps, DOMProps, StyleProps { + /** + * A slot to place the image in. + * @default 'image' + */ + slot?: string +} + /** * Image is used to insert and display an image within a component. */ diff --git a/packages/@react-spectrum/image/src/index.ts b/packages/@react-spectrum/image/src/index.ts index c675668a42c..2ca82c964f5 100644 --- a/packages/@react-spectrum/image/src/index.ts +++ b/packages/@react-spectrum/image/src/index.ts @@ -13,4 +13,4 @@ /// export {Image} from './Image'; -export type {SpectrumImageProps} from '@react-types/image'; +export type {ImageProps, SpectrumImageProps} from './Image'; diff --git a/packages/@react-spectrum/label/package.json b/packages/@react-spectrum/label/package.json index fabb2d839dc..a836ee41ddd 100644 --- a/packages/@react-spectrum/label/package.json +++ b/packages/@react-spectrum/label/package.json @@ -45,7 +45,6 @@ "@react-spectrum/form": "^3.7.22", "@react-spectrum/layout": "^3.6.22", "@react-spectrum/utils": "^3.12.12", - "@react-types/label": "^3.9.17", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx index 45feae08714..4b3bad7cb06 100644 --- a/packages/@react-spectrum/label/src/Field.tsx +++ b/packages/@react-spectrum/label/src/Field.tsx @@ -13,14 +13,24 @@ import {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils'; import {Flex} from '@react-spectrum/layout'; import {HelpText} from './HelpText'; -import {Label} from './Label'; -import {LabelPosition, RefObject} from '@react-types/shared'; +import {Label, SpectrumLabelPropsBase} from './Label'; +import {LabelPosition, RefObject, SpectrumFieldValidation, SpectrumHelpTextProps, Validation, ValidationResult} from '@react-types/shared'; import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css'; import {mergeProps, useId} from '@react-aria/utils'; -import React, {ReactNode, Ref} from 'react'; -import {SpectrumFieldProps} from '@react-types/label'; +import React, {HTMLAttributes, LabelHTMLAttributes, ReactElement, ReactNode, Ref} from 'react'; import {useFormProps} from '@react-spectrum/form'; +export interface SpectrumFieldProps extends SpectrumLabelPropsBase, SpectrumHelpTextProps, Omit, 'validationState'>, SpectrumFieldValidation, Partial { + children: ReactElement, + label?: ReactNode, + contextualHelp?: ReactNode, + labelProps?: LabelHTMLAttributes, + descriptionProps?: HTMLAttributes, + errorMessageProps?: HTMLAttributes, + wrapperClassName?: string, + wrapperProps?: HTMLAttributes +} + export const Field = React.forwardRef(function Field(props: SpectrumFieldProps, ref: Ref) { let formProps = useFormProps(props); let isInForm = formProps !== props; diff --git a/packages/@react-spectrum/label/src/Label.tsx b/packages/@react-spectrum/label/src/Label.tsx index 8e3a5b5893c..3d2f58ea1c6 100644 --- a/packages/@react-spectrum/label/src/Label.tsx +++ b/packages/@react-spectrum/label/src/Label.tsx @@ -10,18 +10,34 @@ * governing permissions and limitations under the License. */ +import {Alignment, DOMProps, DOMRef, LabelPosition, NecessityIndicator, StyleProps} from '@react-types/shared'; import Asterisk from '@spectrum-icons/ui/Asterisk'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; -import React from 'react'; -import {SpectrumLabelProps} from '@react-types/label'; +import React, {ElementType, HTMLAttributes, ReactNode} from 'react'; import styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface LabelProps { + children?: ReactNode, + htmlFor?: string, // for compatibility with React + for?: string, + elementType?: ElementType +} + +export interface SpectrumLabelPropsBase extends LabelProps, DOMProps, StyleProps { + labelPosition?: LabelPosition, // default top + labelAlign?: Alignment, // default start + isRequired?: boolean, + necessityIndicator?: NecessityIndicator, // default icon + includeNecessityIndicatorInAccessibilityName?: boolean +} + +export interface SpectrumLabelProps extends SpectrumLabelPropsBase, HTMLAttributes {} + export const Label = React.forwardRef(function Label(props: SpectrumLabelProps, ref: DOMRef) { props = useProviderProps(props); let { diff --git a/packages/@react-spectrum/label/src/index.ts b/packages/@react-spectrum/label/src/index.ts index b8a3d89cd2e..293e3882c34 100644 --- a/packages/@react-spectrum/label/src/index.ts +++ b/packages/@react-spectrum/label/src/index.ts @@ -15,3 +15,5 @@ export {Field} from './Field'; export {Label} from './Label'; export {HelpText} from './HelpText'; +export type {LabelProps, SpectrumLabelProps} from './Label'; +export type {SpectrumFieldProps} from './Field'; diff --git a/packages/@react-spectrum/label/stories/HelpText.stories.tsx b/packages/@react-spectrum/label/stories/HelpText.stories.tsx index 91d733168e6..fd07e94fd4a 100644 --- a/packages/@react-spectrum/label/stories/HelpText.stories.tsx +++ b/packages/@react-spectrum/label/stories/HelpText.stories.tsx @@ -13,8 +13,7 @@ import {Flex} from '@react-spectrum/layout'; import {Meta, StoryObj} from '@storybook/react'; import {Radio, RadioGroup} from '@react-spectrum/radio'; import React, {useState} from 'react'; -import {SpectrumTextFieldProps} from '@react-types/textfield'; -import {TextField} from '@react-spectrum/textfield'; +import {SpectrumTextFieldProps, TextField} from '@react-spectrum/textfield'; const argTypes = { label: { diff --git a/packages/@react-spectrum/layout/package.json b/packages/@react-spectrum/layout/package.json index f0087fdcc54..8a63ffae6ac 100644 --- a/packages/@react-spectrum/layout/package.json +++ b/packages/@react-spectrum/layout/package.json @@ -42,7 +42,6 @@ "dependencies": { "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", - "@react-types/layout": "^3.3.29", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/layout/src/Flex.tsx b/packages/@react-spectrum/layout/src/Flex.tsx index 494a54cded1..c21248b2827 100644 --- a/packages/@react-spectrum/layout/src/Flex.tsx +++ b/packages/@react-spectrum/layout/src/Flex.tsx @@ -11,12 +11,16 @@ */ import {classNames, passthroughStyle, responsiveDimensionValue, StyleHandlers, useBreakpoint, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, FlexStyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {FlexProps} from '@react-types/layout'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; import styles from './flex-gap.css'; +export interface FlexProps extends DOMProps, FlexStyleProps { + /** Children of the flex container. */ + children: ReactNode +} + const flexStyleProps: StyleHandlers = { direction: ['flexDirection', passthroughStyle], wrap: ['flexWrap', flexWrapValue], diff --git a/packages/@react-spectrum/layout/src/Grid.tsx b/packages/@react-spectrum/layout/src/Grid.tsx index b09a89705a4..2848bfd0c53 100644 --- a/packages/@react-spectrum/layout/src/Grid.tsx +++ b/packages/@react-spectrum/layout/src/Grid.tsx @@ -18,10 +18,14 @@ import { useDOMRef, useStyleProps } from '@react-spectrum/utils'; -import {DimensionValue, DOMRef} from '@react-types/shared'; +import {DimensionValue, DOMProps, DOMRef, GridStyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {GridProps} from '@react-types/layout'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; + +export interface GridProps extends DOMProps, GridStyleProps { + /** Children of the grid container. */ + children: ReactNode +} const gridStyleProps: StyleHandlers = { ...baseStyleProps, diff --git a/packages/@react-spectrum/layout/src/index.ts b/packages/@react-spectrum/layout/src/index.ts index 712fedf5a1b..ea14de79f77 100644 --- a/packages/@react-spectrum/layout/src/index.ts +++ b/packages/@react-spectrum/layout/src/index.ts @@ -15,4 +15,5 @@ export {repeat, minmax, fitContent, Grid} from './Grid'; export {Flex} from './Flex'; export type {DimensionValue} from '@react-types/shared'; -export type {FlexProps, GridProps} from '@react-types/layout'; +export type {FlexProps} from './Flex'; +export type {GridProps} from './Grid'; diff --git a/packages/@react-spectrum/link/chromatic/Link.stories.tsx b/packages/@react-spectrum/link/chromatic/Link.stories.tsx index b6f1b19bb7e..27440ed3539 100644 --- a/packages/@react-spectrum/link/chromatic/Link.stories.tsx +++ b/packages/@react-spectrum/link/chromatic/Link.stories.tsx @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import {Link} from '../'; +import {Link, SpectrumLinkProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {SpectrumLinkProps} from '@react-types/link'; const meta: Meta = { title: 'Link', diff --git a/packages/@react-spectrum/link/package.json b/packages/@react-spectrum/link/package.json index fa2b3b4fd4f..d36f7f67c1d 100644 --- a/packages/@react-spectrum/link/package.json +++ b/packages/@react-spectrum/link/package.json @@ -45,7 +45,6 @@ "@react-aria/link": "^3.8.9", "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", - "@react-types/link": "^3.6.7", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/link/src/Link.tsx b/packages/@react-spectrum/link/src/Link.tsx index 191a1e80b7b..fd98afdb24e 100644 --- a/packages/@react-spectrum/link/src/Link.tsx +++ b/packages/@react-spectrum/link/src/Link.tsx @@ -10,16 +10,28 @@ * governing permissions and limitations under the License. */ +import {AriaLinkProps, useLink} from '@react-aria/link'; import {classNames, getWrappedElement, useSlotProps, useStyleProps} from '@react-spectrum/utils'; import {FocusRing} from '@react-aria/focus'; import {mergeProps, mergeRefs} from '@react-aria/utils'; -import React, {ForwardedRef, JSX, MutableRefObject, useRef} from 'react'; -import {SpectrumLinkProps} from '@react-types/link'; +import React, {ForwardedRef, JSX, MutableRefObject, ReactNode, useRef} from 'react'; +import {StyleProps} from '@react-types/shared'; import styles from '@adobe/spectrum-css-temp/components/link/vars.css'; import {useHover} from '@react-aria/interactions'; -import {useLink} from '@react-aria/link'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumLinkProps extends Omit, StyleProps { + /** The content to display in the link. */ + children: ReactNode, + /** + * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link. + * @default 'primary' + */ + variant?: 'primary' | 'secondary' | 'overBackground', + /** Whether the link should be displayed with a quiet style. */ + isQuiet?: boolean +} + let isOldReact = parseInt(React.version, 10) <= 18; /** * Links allow users to navigate to a different location. diff --git a/packages/@react-spectrum/link/src/index.ts b/packages/@react-spectrum/link/src/index.ts index 4193c3f6ad2..387521378a0 100644 --- a/packages/@react-spectrum/link/src/index.ts +++ b/packages/@react-spectrum/link/src/index.ts @@ -13,4 +13,4 @@ /// export {Link} from './Link'; -export type {SpectrumLinkProps} from '@react-types/link'; +export type {SpectrumLinkProps} from './Link'; diff --git a/packages/@react-spectrum/link/stories/Link.stories.tsx b/packages/@react-spectrum/link/stories/Link.stories.tsx index fed2ee539bd..b2278ebb02f 100644 --- a/packages/@react-spectrum/link/stories/Link.stories.tsx +++ b/packages/@react-spectrum/link/stories/Link.stories.tsx @@ -11,9 +11,8 @@ */ import {ArgTypes, Meta, StoryObj} from '@storybook/react'; -import {Link} from '../'; +import {Link, SpectrumLinkProps} from '../'; import React from 'react'; -import {SpectrumLinkProps} from '@react-types/link'; type LinkStory = StoryObj; diff --git a/packages/@react-spectrum/list/package.json b/packages/@react-spectrum/list/package.json index 36a49d06874..d6d14fb6d7b 100644 --- a/packages/@react-spectrum/list/package.json +++ b/packages/@react-spectrum/list/package.json @@ -56,10 +56,10 @@ "@react-spectrum/text": "^3.5.25", "@react-spectrum/utils": "^3.12.12", "@react-stately/collections": "^3.12.10", + "@react-stately/grid": "^3.11.9", "@react-stately/layout": "^4.6.0", "@react-stately/list": "^3.13.4", "@react-stately/virtualizer": "^4.4.6", - "@react-types/grid": "^3.3.8", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0", diff --git a/packages/@react-spectrum/list/src/DragPreview.tsx b/packages/@react-spectrum/list/src/DragPreview.tsx index 4952ec0006d..d9a96ad3933 100644 --- a/packages/@react-spectrum/list/src/DragPreview.tsx +++ b/packages/@react-spectrum/list/src/DragPreview.tsx @@ -11,7 +11,7 @@ */ import {classNames, SlotProvider} from '@react-spectrum/utils'; import {Grid} from '@react-spectrum/layout'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import listStyles from './styles.css'; import React, {JSX} from 'react'; import type {SpectrumListViewProps} from './ListView'; diff --git a/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx b/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx index 08873024fc8..a628ea353e4 100644 --- a/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx +++ b/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx @@ -18,12 +18,11 @@ import Blower from '@spectrum-icons/workflow/Blower'; import Book from '@spectrum-icons/workflow/Book'; import Copy from '@spectrum-icons/workflow/Copy'; import Cut from '@spectrum-icons/workflow/Cut'; -import {Item, ListBox, Section} from '../'; +import {Item, ListBox, Section, SpectrumListBoxProps} from '../'; import {Label} from '@react-spectrum/label'; import {Meta, StoryObj} from '@storybook/react'; import Paste from '@spectrum-icons/workflow/Paste'; import React, {JSX} from 'react'; -import {SpectrumListBoxProps} from '@react-types/listbox'; import {Text} from '@react-spectrum/text'; let iconMap = { diff --git a/packages/@react-spectrum/listbox/package.json b/packages/@react-spectrum/listbox/package.json index e88e7d377f7..1bca794858e 100644 --- a/packages/@react-spectrum/listbox/package.json +++ b/packages/@react-spectrum/listbox/package.json @@ -54,7 +54,6 @@ "@react-stately/layout": "^4.6.0", "@react-stately/list": "^3.13.4", "@react-stately/virtualizer": "^4.4.6", - "@react-types/listbox": "^3.7.6", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/listbox/src/ListBox.tsx b/packages/@react-spectrum/listbox/src/ListBox.tsx index c17db580ef8..a7f83e23dbe 100644 --- a/packages/@react-spectrum/listbox/src/ListBox.tsx +++ b/packages/@react-spectrum/listbox/src/ListBox.tsx @@ -11,9 +11,8 @@ */ import {DOMRef} from '@react-types/shared'; -import {ListBoxBase, useListBoxLayout} from './ListBoxBase'; +import {ListBoxBase, SpectrumListBoxProps, useListBoxLayout} from './ListBoxBase'; import React, {ReactElement} from 'react'; -import {SpectrumListBoxProps} from '@react-types/listbox'; import {useDOMRef} from '@react-spectrum/utils'; import {useListState} from '@react-stately/list'; diff --git a/packages/@react-spectrum/listbox/src/ListBoxBase.tsx b/packages/@react-spectrum/listbox/src/ListBoxBase.tsx index 372e1ebeba7..4002d501736 100644 --- a/packages/@react-spectrum/listbox/src/ListBoxBase.tsx +++ b/packages/@react-spectrum/listbox/src/ListBoxBase.tsx @@ -10,8 +10,8 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, FocusStrategy, Node, RefObject, StyleProps} from '@react-types/shared'; -import {AriaListBoxOptions, useListBox} from '@react-aria/listbox'; +import {AriaLabelingProps, AsyncLoadable, DOMProps, FocusStrategy, Node, RefObject, StyleProps} from '@react-types/shared'; +import {AriaListBoxOptions, AriaListBoxPropsBase, useListBox} from '@react-aria/listbox'; import {classNames, useStyleProps} from '@react-spectrum/utils'; import {FocusScope} from '@react-aria/focus'; // @ts-ignore @@ -30,6 +30,8 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProvider} from '@react-spectrum/provider'; import {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer'; +export interface SpectrumListBoxProps extends AriaListBoxPropsBase, AsyncLoadable, StyleProps {} + interface ListBoxBaseProps extends AriaListBoxOptions, DOMProps, AriaLabelingProps, StyleProps { layout: ListBoxLayout, state: ListState, diff --git a/packages/@react-spectrum/listbox/src/index.ts b/packages/@react-spectrum/listbox/src/index.ts index cde0e6831d2..f5759df445c 100644 --- a/packages/@react-spectrum/listbox/src/index.ts +++ b/packages/@react-spectrum/listbox/src/index.ts @@ -15,4 +15,4 @@ export {ListBox} from './ListBox'; export {useListBoxLayout, ListBoxBase} from './ListBoxBase'; export {Item, Section} from '@react-stately/collections'; -export type {SpectrumListBoxProps} from '@react-types/listbox'; +export type {SpectrumListBoxProps} from './ListBoxBase'; diff --git a/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx b/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx index 418edd08c9a..49b0dba8f38 100644 --- a/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx +++ b/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx @@ -18,12 +18,11 @@ import Blower from '@spectrum-icons/workflow/Blower'; import Book from '@spectrum-icons/workflow/Book'; import Copy from '@spectrum-icons/workflow/Copy'; import Cut from '@spectrum-icons/workflow/Cut'; -import {Item, Menu, MenuTrigger, Section} from '../'; +import {Item, Menu, MenuTrigger, Section, SpectrumMenuTriggerProps} from '../'; import {Keyboard, Text} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import Paste from '@spectrum-icons/workflow/Paste'; import React, {JSX} from 'react'; -import {SpectrumMenuTriggerProps} from '@react-types/menu'; const meta: Meta = { title: 'MenuTrigger', diff --git a/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx b/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx index f03e2c61b6e..c4746d751c4 100644 --- a/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx +++ b/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx @@ -15,11 +15,10 @@ import AlignCenter from '@spectrum-icons/workflow/AlignCenter'; import AlignLeft from '@spectrum-icons/workflow/AlignLeft'; import AlignRight from '@spectrum-icons/workflow/AlignRight'; import AnnotatePen from '@spectrum-icons/workflow/AnnotatePen'; -import {Item, Menu, MenuTrigger, Section, SubmenuTrigger} from '../'; +import {Item, Menu, MenuTrigger, Section, SpectrumMenuTriggerProps, SubmenuTrigger} from '../'; import {Keyboard, Text} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumMenuTriggerProps} from '@react-types/menu'; import TextIndentIncrease from '@spectrum-icons/workflow/TextIndentIncrease'; import TextItalics from '@spectrum-icons/workflow/TextItalic'; import {userEvent, within} from 'storybook/test'; diff --git a/packages/@react-spectrum/menu/package.json b/packages/@react-spectrum/menu/package.json index 60dee5bec7f..c56bbe6143b 100644 --- a/packages/@react-spectrum/menu/package.json +++ b/packages/@react-spectrum/menu/package.json @@ -54,10 +54,7 @@ "@react-spectrum/utils": "^3.12.12", "@react-stately/collections": "^3.12.10", "@react-stately/menu": "^3.9.11", - "@react-stately/overlays": "^3.6.23", "@react-stately/tree": "^3.9.6", - "@react-types/menu": "^3.10.7", - "@react-types/overlays": "^3.9.4", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@spectrum-icons/workflow": "^4.2.28", diff --git a/packages/@react-spectrum/menu/src/ActionMenu.tsx b/packages/@react-spectrum/menu/src/ActionMenu.tsx index 4b23d10e1f9..819959d1a64 100644 --- a/packages/@react-spectrum/menu/src/ActionMenu.tsx +++ b/packages/@react-spectrum/menu/src/ActionMenu.tsx @@ -11,18 +11,28 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {AriaLabelingProps, CollectionBase, DOMProps, FocusableRef, Key, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {FocusableRef} from '@react-types/shared'; // @ts-ignore import intlMessages from '../intl/*.json'; import {Menu} from './Menu'; -import {MenuTrigger} from './MenuTrigger'; +import {MenuTrigger, SpectrumMenuTriggerProps} from './MenuTrigger'; import More from '@spectrum-icons/workflow/More'; import React, {forwardRef, ReactElement} from 'react'; -import {SpectrumActionMenuProps} from '@react-types/menu'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSlotProps} from '@react-spectrum/utils'; +export interface SpectrumActionMenuProps extends CollectionBase, Omit, StyleProps, DOMProps, AriaLabelingProps { + /** Whether the button is disabled. */ + isDisabled?: boolean, + /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ + isQuiet?: boolean, + /** Whether the element should receive focus on render. */ + autoFocus?: boolean, + /** Handler that is called when an item is selected. */ + onAction?: (key: Key) => void +} + /** * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases. */ diff --git a/packages/@react-spectrum/menu/src/Menu.tsx b/packages/@react-spectrum/menu/src/Menu.tsx index 9fbb712d51b..dc7124abe13 100644 --- a/packages/@react-spectrum/menu/src/Menu.tsx +++ b/packages/@react-spectrum/menu/src/Menu.tsx @@ -11,9 +11,10 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {AriaMenuProps, useMenu} from '@react-aria/menu'; import ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall'; import {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMRef, StyleProps} from '@react-types/shared'; import {FocusScope} from '@react-aria/focus'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -23,11 +24,11 @@ import {MenuSection} from './MenuSection'; import {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils'; import React, {KeyboardEventHandler, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef, useState} from 'react'; import {RootMenuTriggerState} from '@react-stately/menu'; -import {SpectrumMenuProps} from '@react-types/menu'; import styles from '@adobe/spectrum-css-temp/components/menu/vars.css'; import {TreeState, useTreeState} from '@react-stately/tree'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; -import {useMenu} from '@react-aria/menu'; + +export interface SpectrumMenuProps extends AriaMenuProps, StyleProps {} /** * Menus display a list of actions or options that a user can choose. diff --git a/packages/@react-spectrum/menu/src/MenuTrigger.tsx b/packages/@react-spectrum/menu/src/MenuTrigger.tsx index 6f23974af9e..ab4998f6907 100644 --- a/packages/@react-spectrum/menu/src/MenuTrigger.tsx +++ b/packages/@react-spectrum/menu/src/MenuTrigger.tsx @@ -10,17 +10,43 @@ * governing permissions and limitations under the License. */ +import {Alignment, DOMRef} from '@react-types/shared'; import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {MenuContext} from './context'; -import {Placement} from '@react-types/overlays'; +import {MenuTriggerProps, useMenuTriggerState} from '@react-stately/menu'; +import {Placement} from '@react-aria/overlays'; import {Popover, Tray} from '@react-spectrum/overlays'; import {PressResponder, useInteractOutside} from '@react-aria/interactions'; -import React, {forwardRef, Fragment, useRef} from 'react'; -import {SpectrumMenuTriggerProps} from '@react-types/menu'; +import React, {forwardRef, Fragment, ReactElement, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/menu/vars.css'; import {useMenuTrigger} from '@react-aria/menu'; -import {useMenuTriggerState} from '@react-stately/menu'; + +export interface SpectrumMenuTriggerProps extends MenuTriggerProps { + /** + * The contents of the MenuTrigger - a trigger and a Menu. + */ + children: ReactElement[], + /** + * Alignment of the menu relative to the trigger. + * @default 'start' + */ + align?: Alignment, + /** + * Where the Menu opens relative to its trigger. + * @default 'bottom' + */ + direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end', + /** + * Whether the menu should automatically flip direction when space is limited. + * @default true + */ + shouldFlip?: boolean, + /** + * Whether the Menu closes when a selection is made. + * @default true + */ + closeOnSelect?: boolean +} /** * The MenuTrigger serves as a wrapper around a Menu and its associated trigger, diff --git a/packages/@react-spectrum/menu/src/index.ts b/packages/@react-spectrum/menu/src/index.ts index baea74b9b16..66020e584d5 100644 --- a/packages/@react-spectrum/menu/src/index.ts +++ b/packages/@react-spectrum/menu/src/index.ts @@ -18,6 +18,8 @@ export {Menu} from './Menu'; export {ActionMenu} from './ActionMenu'; export {ContextualHelpTrigger} from './ContextualHelpTrigger'; export {Item, Section} from '@react-stately/collections'; -export type {SpectrumActionMenuProps, SpectrumMenuProps, SpectrumMenuTriggerProps} from '@react-types/menu'; +export type {SpectrumActionMenuProps} from './ActionMenu'; +export type {SpectrumMenuProps} from './Menu'; +export type {SpectrumMenuTriggerProps} from './MenuTrigger'; export type {SpectrumMenuDialogTriggerProps} from './ContextualHelpTrigger'; export type {SpectrumSubmenuTriggerProps} from './SubmenuTrigger'; diff --git a/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx b/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx index d9f919066a5..ef745e72501 100644 --- a/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx +++ b/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx @@ -15,11 +15,10 @@ import {ActionMenu} from '..'; import {Alignment} from '@react-types/shared'; import {Checkbox} from '@react-spectrum/checkbox'; import {Flex} from '@react-spectrum/layout'; -import {Item} from '../'; +import {Item, SpectrumActionMenuProps} from '../'; import {Meta, StoryFn, StoryObj} from '@storybook/react'; import {Picker} from '@react-spectrum/picker'; import React, {JSX, useState} from 'react'; -import {SpectrumActionMenuProps} from '@react-types/menu'; import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip'; const meta: Meta> = { diff --git a/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx b/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx index 0fa0a94378b..ebc60312155 100644 --- a/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx +++ b/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx @@ -12,9 +12,8 @@ import {act, fireEvent, installPointerEvent, pointerMap, render as renderComponent, triggerTouch, within} from '@react-spectrum/test-utils-internal'; import {ComplexRender as Complex, SubmenuDynamicRender as SubmenuDynamic, SubmenuStaticRender as SubmenuStatic, TabBehaviorRender as TabBehaviorStory} from '../stories/Submenu.stories'; -import {Provider} from '@react-spectrum/provider'; +import {Provider, Scale} from '@react-spectrum/provider'; import React from 'react'; -import type {Scale} from '@react-types/provider'; import {theme} from '@react-spectrum/theme-default'; import userEvent from '@testing-library/user-event'; diff --git a/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx b/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx index 10cc07f6dce..dcf5d30a526 100644 --- a/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx +++ b/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx @@ -11,8 +11,7 @@ */ import {Meta, StoryObj} from '@storybook/react'; -import {Meter} from '../'; -import {SpectrumMeterProps} from '@react-types/meter'; +import {Meter, SpectrumMeterProps} from '../'; const meta: Meta = { title: 'Meter', diff --git a/packages/@react-spectrum/meter/package.json b/packages/@react-spectrum/meter/package.json index 6c5b29a20be..2a12d6902ba 100644 --- a/packages/@react-spectrum/meter/package.json +++ b/packages/@react-spectrum/meter/package.json @@ -43,7 +43,6 @@ "@react-aria/meter": "^3.4.30", "@react-spectrum/progress": "^3.7.23", "@react-spectrum/utils": "^3.12.12", - "@react-types/meter": "^3.4.15", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/meter/src/Meter.tsx b/packages/@react-spectrum/meter/src/Meter.tsx index 5943fd3fcf2..57679c9cd57 100644 --- a/packages/@react-spectrum/meter/src/Meter.tsx +++ b/packages/@react-spectrum/meter/src/Meter.tsx @@ -12,12 +12,19 @@ import {classNames} from '@react-spectrum/utils'; import {DOMRef} from '@react-types/shared'; -import {ProgressBarBase} from '@react-spectrum/progress'; +import {ProgressBarBase, SpectrumProgressBarBaseProps} from '@react-spectrum/progress'; import React from 'react'; -import {SpectrumMeterProps} from '@react-types/meter'; import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css'; import {useMeter} from '@react-aria/meter'; +export interface SpectrumMeterProps extends SpectrumProgressBarBaseProps { + /** + * The [visual style](https://spectrum.adobe.com/page/meter/#Options) of the Meter. + * @default 'informative' + */ + variant?: 'informative' | 'positive' | 'warning' | 'critical' +} + /** * Meters are visual representations of a quantity or an achievement. * Their progress is determined by user actions, rather than system actions. diff --git a/packages/@react-spectrum/meter/src/index.ts b/packages/@react-spectrum/meter/src/index.ts index ad64b8dcb56..d434d9c89e1 100644 --- a/packages/@react-spectrum/meter/src/index.ts +++ b/packages/@react-spectrum/meter/src/index.ts @@ -13,4 +13,4 @@ /// export {Meter} from './Meter'; -export type {SpectrumMeterProps} from '@react-types/meter'; +export type {SpectrumMeterProps} from './Meter'; diff --git a/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx b/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx index bbf9e9b338c..c5e75b368e2 100644 --- a/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx +++ b/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx @@ -18,9 +18,8 @@ import {Grid, repeat} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {mergeProps} from '@react-aria/utils'; import {Meta, StoryObj} from '@storybook/react'; -import {NumberField} from '../src'; +import {NumberField, SpectrumNumberFieldProps} from '../src'; import React, {JSX} from 'react'; -import {SpectrumNumberFieldProps} from '@react-types/numberfield'; import stepperStyles from '@adobe/spectrum-css-temp/components/stepper/vars.css'; let states = [ diff --git a/packages/@react-spectrum/numberfield/package.json b/packages/@react-spectrum/numberfield/package.json index 32bdff5a078..a20476c943f 100644 --- a/packages/@react-spectrum/numberfield/package.json +++ b/packages/@react-spectrum/numberfield/package.json @@ -51,8 +51,6 @@ "@react-spectrum/textfield": "^3.14.5", "@react-spectrum/utils": "^3.12.12", "@react-stately/numberfield": "^3.11.0", - "@react-types/button": "^3.15.1", - "@react-types/numberfield": "^3.8.18", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@spectrum-icons/workflow": "^4.2.28", diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx index 44ace71b7c5..087dbabab43 100644 --- a/packages/@react-spectrum/numberfield/src/NumberField.tsx +++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx @@ -10,24 +10,33 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaNumberFieldProps, useNumberField} from '@react-aria/numberfield'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import {Field} from '@react-spectrum/label'; -import {FocusableRef, RefObject} from '@react-types/shared'; +import {FocusableRef, InputDOMProps, RefObject, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield'; import React, {HTMLAttributes, InputHTMLAttributes, Ref, useRef} from 'react'; -import {SpectrumNumberFieldProps} from '@react-types/numberfield'; import {StepButton} from './StepButton'; import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; import {useFormProps} from '@react-spectrum/form'; import {useHover} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; -import {useNumberField} from '@react-aria/numberfield'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumNumberFieldProps extends Omit, SpectrumFieldValidation, InputDOMProps, StyleProps, SpectrumLabelableProps { + /** Whether the numberfield should be displayed with a quiet style. */ + isQuiet?: boolean, + /** + * Whether to hide the increment and decrement buttons. + * @default false + */ + hideStepper?: boolean +} + /** * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons. */ diff --git a/packages/@react-spectrum/numberfield/src/StepButton.tsx b/packages/@react-spectrum/numberfield/src/StepButton.tsx index fe48c536ce5..2e20c4ed2b1 100644 --- a/packages/@react-spectrum/numberfield/src/StepButton.tsx +++ b/packages/@react-spectrum/numberfield/src/StepButton.tsx @@ -11,7 +11,7 @@ */ import Add from '@spectrum-icons/workflow/Add'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '@react-aria/button'; import ChevronDownSmall from '@spectrum-icons/ui/ChevronDownSmall'; import ChevronUpSmall from '@spectrum-icons/ui/ChevronUpSmall'; import {classNames, useFocusableRef} from '@react-spectrum/utils'; @@ -21,7 +21,6 @@ import {mergeProps} from '@react-aria/utils'; import React, {ReactElement} from 'react'; import Remove from '@spectrum-icons/workflow/Remove'; import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css'; -import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; diff --git a/packages/@react-spectrum/numberfield/src/index.ts b/packages/@react-spectrum/numberfield/src/index.ts index e93474e331f..c3cf188f0e3 100644 --- a/packages/@react-spectrum/numberfield/src/index.ts +++ b/packages/@react-spectrum/numberfield/src/index.ts @@ -13,4 +13,4 @@ /// export {NumberField} from './NumberField'; -export type {SpectrumNumberFieldProps} from '@react-types/numberfield'; +export type {SpectrumNumberFieldProps} from './NumberField'; diff --git a/packages/@react-spectrum/overlays/package.json b/packages/@react-spectrum/overlays/package.json index 8e58fa4662c..7bfebd4c275 100644 --- a/packages/@react-spectrum/overlays/package.json +++ b/packages/@react-spectrum/overlays/package.json @@ -45,7 +45,6 @@ "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", "@react-stately/overlays": "^3.6.23", - "@react-types/overlays": "^3.9.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0", "react-transition-group": "^4.4.5" diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx index 6a8e34450c4..a26c777ceeb 100644 --- a/packages/@react-spectrum/overlays/src/Modal.tsx +++ b/packages/@react-spectrum/overlays/src/Modal.tsx @@ -14,8 +14,7 @@ import {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; import {DOMRef, RefObject, StyleProps} from '@react-types/shared'; import modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css'; -import {Overlay} from './Overlay'; -import {OverlayProps} from '@react-types/overlays'; +import {Overlay, OverlayProps} from './Overlay'; import {OverlayTriggerState} from '@react-stately/overlays'; import overrideStyles from './overlays.css'; import React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react'; diff --git a/packages/@react-spectrum/overlays/src/Overlay.tsx b/packages/@react-spectrum/overlays/src/Overlay.tsx index 7c43194a04e..6f385536415 100644 --- a/packages/@react-spectrum/overlays/src/Overlay.tsx +++ b/packages/@react-spectrum/overlays/src/Overlay.tsx @@ -12,11 +12,26 @@ import {DOMRef} from '@react-types/shared'; import {OpenTransition} from './OpenTransition'; -import {OverlayProps} from '@react-types/overlays'; import {Provider} from '@react-spectrum/provider'; -import React, {useCallback, useState} from 'react'; +import React, {MutableRefObject, ReactNode, useCallback, useState} from 'react'; import {Overlay as ReactAriaOverlay} from '@react-aria/overlays'; +export interface OverlayProps { + children: ReactNode, + isOpen?: boolean, + container?: Element, + isKeyboardDismissDisabled?: boolean, + onEnter?: () => void, + onEntering?: () => void, + onEntered?: () => void, + onExit?: () => void, + onExiting?: () => void, + onExited?: () => void, + nodeRef: MutableRefObject, + disableFocusManagement?: boolean, + shouldContainFocus?: boolean +} + export const Overlay = React.forwardRef(function Overlay(props: OverlayProps, ref: DOMRef) { let { children, diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx index 2d72318d72d..8fd6b6c6576 100644 --- a/packages/@react-spectrum/overlays/src/Tray.tsx +++ b/packages/@react-spectrum/overlays/src/Tray.tsx @@ -13,8 +13,7 @@ import {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; import {DOMRef, RefObject, StyleProps} from '@react-types/shared'; -import {Overlay} from './Overlay'; -import {OverlayProps} from '@react-types/overlays'; +import {Overlay, OverlayProps} from './Overlay'; import {OverlayTriggerState} from '@react-stately/overlays'; import overrideStyles from './overlays.css'; import React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react'; diff --git a/packages/@react-spectrum/overlays/src/index.ts b/packages/@react-spectrum/overlays/src/index.ts index d48ba9c86d3..b574dfd412b 100644 --- a/packages/@react-spectrum/overlays/src/index.ts +++ b/packages/@react-spectrum/overlays/src/index.ts @@ -17,3 +17,4 @@ export {Popover} from './Popover'; export {Modal} from './Modal'; export {Tray} from './Tray'; export {OpenTransition} from './OpenTransition'; +export type {OverlayProps} from './Overlay'; diff --git a/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx b/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx index c15de9c692f..9bc23ac0738 100644 --- a/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx +++ b/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import {Item, Picker, Section} from '..'; +import {Item, Picker, Section, SpectrumPickerProps} from '..'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumPickerProps} from '@react-types/select'; export default { title: 'Languages/Picker', diff --git a/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx b/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx index ad3d9e3cdfb..06544f98ad7 100644 --- a/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx +++ b/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx @@ -19,11 +19,10 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp'; import Copy from '@spectrum-icons/workflow/Copy'; import Cut from '@spectrum-icons/workflow/Cut'; import {Heading, Text} from '@react-spectrum/text'; -import {Item, Picker, Section} from '../'; +import {Item, Picker, Section, SpectrumPickerProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; import Paste from '@spectrum-icons/workflow/Paste'; import React, {JSX} from 'react'; -import {SpectrumPickerProps} from '@react-types/select'; const meta: Meta> = { title: 'Picker', diff --git a/packages/@react-spectrum/picker/package.json b/packages/@react-spectrum/picker/package.json index 46295958b2f..7eb6475f3dd 100644 --- a/packages/@react-spectrum/picker/package.json +++ b/packages/@react-spectrum/picker/package.json @@ -54,7 +54,6 @@ "@react-spectrum/utils": "^3.12.12", "@react-stately/collections": "^3.12.10", "@react-stately/select": "^3.9.2", - "@react-types/select": "^3.12.2", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/picker/src/Picker.tsx b/packages/@react-spectrum/picker/src/Picker.tsx index 8844db3872c..651229d5f00 100644 --- a/packages/@react-spectrum/picker/src/Picker.tsx +++ b/packages/@react-spectrum/picker/src/Picker.tsx @@ -11,6 +11,8 @@ */ import AlertMedium from '@spectrum-icons/ui/AlertMedium'; +import {Alignment, AsyncLoadable, DimensionValue, DOMRef, DOMRefValue, FocusableRefValue, LabelPosition, SingleSelection, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; +import {AriaSelectProps, HiddenSelect, useSelect} from '@react-aria/select'; import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium'; import { classNames, @@ -21,10 +23,8 @@ import { useSlotProps, useUnwrapDOMRef } from '@react-spectrum/utils'; -import {DOMRef, DOMRefValue, FocusableRefValue, LabelPosition} from '@react-types/shared'; import {Field} from '@react-spectrum/label'; import {FieldButton} from '@react-spectrum/button'; -import {HiddenSelect, useSelect} from '@react-aria/select'; // @ts-ignore import intlMessages from '../intl/*.json'; import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox'; @@ -33,7 +33,6 @@ import {Popover, Tray} from '@react-spectrum/overlays'; import {PressResponder, useHover} from '@react-aria/interactions'; import {ProgressCircle} from '@react-spectrum/progress'; import React, {ReactElement, useCallback, useRef, useState} from 'react'; -import {SpectrumPickerProps} from '@react-types/select'; import styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css'; import {Text} from '@react-spectrum/text'; import {useFormProps} from '@react-spectrum/form'; @@ -41,6 +40,29 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; import {useSelectState} from '@react-stately/select'; +export interface SpectrumPickerProps extends Omit, 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | 'allowsEmptyCollection'>, Omit, AsyncLoadable, SpectrumLabelableProps, StyleProps { + /** Whether the textfield should be displayed with a quiet style. */ + isQuiet?: boolean, + /** Alignment of the menu relative to the input target. + * @default 'start' + */ + align?: Alignment, + /** + * Direction the menu will render relative to the Picker. + * @default 'bottom' + */ + direction?: 'bottom' | 'top', + /** + * Whether the menu should automatically flip direction when space is limited. + * @default true + */ + shouldFlip?: boolean, + /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */ + menuWidth?: DimensionValue, + /** Whether the element should receive focus on render. */ + autoFocus?: boolean +} + /** * Pickers allow users to choose a single option from a collapsible list of options when space is limited. */ diff --git a/packages/@react-spectrum/picker/src/index.ts b/packages/@react-spectrum/picker/src/index.ts index 428ace31e20..9af5f043703 100644 --- a/packages/@react-spectrum/picker/src/index.ts +++ b/packages/@react-spectrum/picker/src/index.ts @@ -14,4 +14,4 @@ export {Picker} from './Picker'; export {Item, Section} from '@react-stately/collections'; -export type {SpectrumPickerProps} from '@react-types/select'; +export type {SpectrumPickerProps} from './Picker'; diff --git a/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx b/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx index 59417e51b8e..b23a90b6c4b 100644 --- a/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx +++ b/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx @@ -11,9 +11,8 @@ */ import {Meta, StoryObj} from '@storybook/react'; -import {ProgressBar} from '../'; +import {ProgressBar, SpectrumProgressBarProps} from '../'; import React, {CSSProperties} from 'react'; -import {SpectrumProgressBarProps} from '@react-types/progress'; const meta: Meta = { title: 'ProgressBar', diff --git a/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx b/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx index dec906c6dc9..af0934fc4c7 100644 --- a/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx +++ b/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx @@ -11,9 +11,8 @@ */ import {Meta, StoryObj} from '@storybook/react'; -import {ProgressCircle} from '../'; +import {ProgressCircle, SpectrumProgressCircleProps} from '../'; import React, {CSSProperties} from 'react'; -import {SpectrumProgressCircleProps} from '@react-types/progress'; const meta: Meta = { title: 'ProgressCircle', diff --git a/packages/@react-spectrum/progress/package.json b/packages/@react-spectrum/progress/package.json index 6512e5a8008..72d2372f39d 100644 --- a/packages/@react-spectrum/progress/package.json +++ b/packages/@react-spectrum/progress/package.json @@ -43,7 +43,6 @@ "@react-aria/progress": "^3.4.30", "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", - "@react-types/progress": "^3.5.18", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/progress/src/ProgressBar.tsx b/packages/@react-spectrum/progress/src/ProgressBar.tsx index 65146a01ea1..7ed998007a3 100644 --- a/packages/@react-spectrum/progress/src/ProgressBar.tsx +++ b/packages/@react-spectrum/progress/src/ProgressBar.tsx @@ -12,9 +12,8 @@ import {classNames} from '@react-spectrum/utils'; import {DOMRef} from '@react-types/shared'; -import {ProgressBarBase} from './ProgressBarBase'; +import {ProgressBarBase, SpectrumProgressBarProps} from './ProgressBarBase'; import React from 'react'; -import {SpectrumProgressBarProps} from '@react-types/progress'; import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css'; import {useProgressBar} from '@react-aria/progress'; diff --git a/packages/@react-spectrum/progress/src/ProgressBarBase.tsx b/packages/@react-spectrum/progress/src/ProgressBarBase.tsx index d89c565cdba..ac0a263e75c 100644 --- a/packages/@react-spectrum/progress/src/ProgressBarBase.tsx +++ b/packages/@react-spectrum/progress/src/ProgressBarBase.tsx @@ -10,13 +10,38 @@ * governing permissions and limitations under the License. */ +import {AriaProgressBarBaseProps, ProgressBarProps} from '@react-aria/progress'; import {clamp} from '@react-aria/utils'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; -import {ProgressBarProps, SpectrumProgressBarBaseProps} from '@react-types/progress'; +import {DOMRef, LabelPosition, StyleProps} from '@react-types/shared'; import React, {CSSProperties, HTMLAttributes} from 'react'; import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css'; +export interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps, StyleProps { + /** + * How thick the bar should be. + * @default 'L' + */ + size?: 'S' | 'L', + /** + * The label's overall position relative to the element it is labeling. + * @default 'top' + */ + labelPosition?: LabelPosition, + /** Whether the value's label is displayed. True by default if there's a label, false by default if not. */ + showValueLabel?: boolean +} + +export interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps { + /** The static color style to apply. Useful when the button appears over a color background. */ + staticColor?: 'white' | 'black', + /** + * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of the ProgressBar. + * @deprecated - use staticColor instead. + */ + variant?: 'overBackground' +} + interface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBarProps { barClassName?: string, barProps?: HTMLAttributes, diff --git a/packages/@react-spectrum/progress/src/ProgressCircle.tsx b/packages/@react-spectrum/progress/src/ProgressCircle.tsx index 134f59d8992..fd5f85d6727 100644 --- a/packages/@react-spectrum/progress/src/ProgressCircle.tsx +++ b/packages/@react-spectrum/progress/src/ProgressCircle.tsx @@ -10,14 +10,51 @@ * governing permissions and limitations under the License. */ +import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {clamp} from '@react-aria/utils'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import React, {CSSProperties} from 'react'; -import {SpectrumProgressCircleProps} from '@react-types/progress'; import styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css'; import {useProgressBar} from '@react-aria/progress'; +export interface ProgressCircleProps { + /** + * The current value (controlled). + * @default 0 + */ + value?: number, + /** + * The smallest value allowed for the input. + * @default 0 + */ + minValue?: number, + /** + * The largest value allowed for the input. + * @default 100 + */ + maxValue?: number, + /** + * Whether presentation is indeterminate when progress isn't known. + */ + isIndeterminate?: boolean +} + +export interface AriaProgressCircleProps extends ProgressCircleProps, DOMProps, AriaLabelingProps {} +export interface SpectrumProgressCircleProps extends AriaProgressCircleProps, StyleProps { + /** + * What the ProgressCircle's diameter should be. + * @default 'M' + */ + size?: 'S' | 'M' | 'L', + /** The static color style to apply. Useful when the button appears over a color background. */ + staticColor?: 'white' | 'black', + /** + * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of the ProgressCircle. + * + * @deprecated - use staticColor instead. + */ + variant?: 'overBackground' +} /** * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. diff --git a/packages/@react-spectrum/progress/src/index.ts b/packages/@react-spectrum/progress/src/index.ts index 89fee1088cf..268933e9039 100644 --- a/packages/@react-spectrum/progress/src/index.ts +++ b/packages/@react-spectrum/progress/src/index.ts @@ -15,4 +15,5 @@ export {ProgressBar} from './ProgressBar'; export {ProgressCircle} from './ProgressCircle'; export {ProgressBarBase} from './ProgressBarBase'; -export type {SpectrumProgressBarProps, SpectrumProgressCircleProps} from '@react-types/progress'; +export type {SpectrumProgressBarBaseProps, SpectrumProgressBarProps} from './ProgressBarBase'; +export type {SpectrumProgressCircleProps, ProgressCircleProps, AriaProgressCircleProps} from './ProgressCircle'; diff --git a/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx b/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx index bd12e7c7184..10c2137d75e 100644 --- a/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx +++ b/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx @@ -18,8 +18,7 @@ import {Flex} from '@react-spectrum/layout'; import {Form} from '@react-spectrum/form'; import {Meta, StoryFn, StoryObj} from '@storybook/react'; import {NumberField} from '@react-spectrum/numberfield'; -import {Provider} from '../'; -import {ProviderProps} from '@react-types/provider'; +import {Provider, ProviderProps} from '../'; import {Radio, RadioGroup} from '@react-spectrum/radio'; import React, {JSX} from 'react'; import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css'; diff --git a/packages/@react-spectrum/provider/package.json b/packages/@react-spectrum/provider/package.json index 02ee595086e..2674628bf3d 100644 --- a/packages/@react-spectrum/provider/package.json +++ b/packages/@react-spectrum/provider/package.json @@ -44,7 +44,6 @@ "@react-aria/overlays": "^3.31.2", "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", - "@react-types/provider": "^3.8.15", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0", "clsx": "^2.0.0" diff --git a/packages/@react-spectrum/provider/src/Provider.tsx b/packages/@react-spectrum/provider/src/Provider.tsx index 53fde2faf3c..9b6aded9552 100644 --- a/packages/@react-spectrum/provider/src/Provider.tsx +++ b/packages/@react-spectrum/provider/src/Provider.tsx @@ -23,7 +23,7 @@ import {DOMRef} from '@react-types/shared'; import {filterDOMProps, RouterProvider} from '@react-aria/utils'; import {I18nProvider, useLocale} from '@react-aria/i18n'; import {ModalProvider, useModalProvider} from '@react-aria/overlays'; -import {ProviderContext, ProviderProps} from '@react-types/provider'; +import {ProviderContext, ProviderProps} from './types'; import React, {useContext, useEffect, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/page/vars.css'; import typographyStyles from '@adobe/spectrum-css-temp/components/typography/index.css'; diff --git a/packages/@react-spectrum/provider/src/context.ts b/packages/@react-spectrum/provider/src/context.ts index 2c104719b04..6255e252bd2 100644 --- a/packages/@react-spectrum/provider/src/context.ts +++ b/packages/@react-spectrum/provider/src/context.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ProviderContext} from '@react-types/provider'; +import {ProviderContext} from './types'; import React from 'react'; // Context is placed in a separate file to avoid fast refresh issue where the old provider context values diff --git a/packages/@react-spectrum/provider/src/index.ts b/packages/@react-spectrum/provider/src/index.ts index 31a2ed296bc..34d38719dfd 100644 --- a/packages/@react-spectrum/provider/src/index.ts +++ b/packages/@react-spectrum/provider/src/index.ts @@ -13,5 +13,4 @@ /// export {Provider, useProvider, useProviderProps} from './Provider'; -export type {ProviderContext} from '@react-types/provider'; -export type {ProviderProps} from '@react-types/provider'; +export type {ProviderContext, ProviderProps, ColorScheme, Scale, Theme, Breakpoints, CSSModule} from './types'; diff --git a/packages/@react-spectrum/provider/src/mediaQueries.ts b/packages/@react-spectrum/provider/src/mediaQueries.ts index f01180c368e..39453cbeb1a 100644 --- a/packages/@react-spectrum/provider/src/mediaQueries.ts +++ b/packages/@react-spectrum/provider/src/mediaQueries.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColorScheme, Scale, Theme} from '@react-types/provider'; +import {ColorScheme, Scale, Theme} from './types'; import {useMediaQuery} from '@react-spectrum/utils'; export function useColorScheme(theme: Theme, defaultColorScheme: ColorScheme): ColorScheme { diff --git a/packages/@react-spectrum/provider/src/types.ts b/packages/@react-spectrum/provider/src/types.ts new file mode 100644 index 00000000000..9e54d05c218 --- /dev/null +++ b/packages/@react-spectrum/provider/src/types.ts @@ -0,0 +1,124 @@ +/* + * Copyright 2020 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {DOMProps, Href, RouterOptions, StyleProps, ValidationState} from '@react-types/shared'; +import {ReactNode} from 'react'; + +export type ColorScheme = 'light' | 'dark'; +export type Scale = 'medium' | 'large'; +export interface Breakpoints { + S?: number, + M?: number, + L?: number, + // Currently, it only deals with pixels, but we need to fix it to accept em or rem as well. + [custom: string]: number | undefined +} + +export type CSSModule = { + [className: string]: string +}; + +/** A theme object defines CSS variables for a theme, across multiple color schemes and scales. */ +export interface Theme { + /** CSS module defining the global variables, which do not change between color schemes/scales. */ + global?: CSSModule, + /** CSS module defining the variables for the light color scheme. */ + light?: CSSModule, + /** CSS module defining the variables for the dark color scheme. */ + dark?: CSSModule, + /** CSS module defining the variables for the medium scale. */ + medium?: CSSModule, + /** CSS module defining the variables for the large scale. */ + large?: CSSModule +} + +interface ContextProps { + /** Whether descendants should be displayed with the quiet style. */ + isQuiet?: boolean, + /** Whether descendants should be displayed with the emphasized style. */ + isEmphasized?: boolean, + /** Whether descendants should be disabled. */ + isDisabled?: boolean, + /** Whether descendants should be displayed with the required style. */ + isRequired?: boolean, + /** Whether descendants should be read only. */ + isReadOnly?: boolean, + /** Whether descendants should be displayed with the validation state style. */ + validationState?: ValidationState +} + +interface Router { + navigate: (path: string, routerOptions: RouterOptions | undefined) => void, + useHref?: (href: Href) => string +} + +export interface ProviderProps extends ContextProps, DOMProps, StyleProps { + /** The content of the Provider. */ + children: ReactNode, + /** + * The theme for your application. + */ + theme?: Theme, + /** + * The color scheme for your application. + * Defaults to operating system preferences. + */ + colorScheme?: ColorScheme, + /** + * The default color scheme if no operating system setting is available. + * @default 'light' + */ + defaultColorScheme?: ColorScheme, + /** + * Sets the scale for your applications. Defaults based on device pointer type. + */ + scale?: Scale, + /** + * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. + * Defaults to the browser/OS language setting. + * @default 'en-US' + */ + locale?: string, + /** + * The breakpoints for styleProps. + * Do not use `base` property. + * @default {S:380,M:768,L:1024} + */ + breakpoints?: Breakpoints, + /** + * Provides a client side router to all nested React Spectrum links to enable client side navigation. + */ + router?: Router +} + +export interface ProviderContext extends ContextProps { + /** + * The package version number of the nearest parent Provider. + */ + version: string, + /** + * The theme of the nearest parent Provider. + */ + theme: Theme, + /** + * The color scheme of the nearest parent Provider. + */ + colorScheme: ColorScheme, + /** + * The scale of the nearest parent Provider. + */ + scale: Scale, + /** + * The breakpoints of the nearest parent Provider used for styleProps. + */ + breakpoints: Breakpoints +} diff --git a/packages/@react-spectrum/radio/package.json b/packages/@react-spectrum/radio/package.json index 888f94a4d68..7ba15783b7c 100644 --- a/packages/@react-spectrum/radio/package.json +++ b/packages/@react-spectrum/radio/package.json @@ -47,7 +47,6 @@ "@react-spectrum/label": "^3.16.22", "@react-spectrum/utils": "^3.12.12", "@react-stately/radio": "^3.11.5", - "@react-types/radio": "^3.9.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/radio/src/Radio.tsx b/packages/@react-spectrum/radio/src/Radio.tsx index a0d586fb4cd..3dd7e3a8906 100644 --- a/packages/@react-spectrum/radio/src/Radio.tsx +++ b/packages/@react-spectrum/radio/src/Radio.tsx @@ -10,16 +10,17 @@ * governing permissions and limitations under the License. */ +import {AriaRadioProps, useRadio} from '@react-aria/radio'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import React, {forwardRef, useRef} from 'react'; -import {SpectrumRadioProps} from '@react-types/radio'; import styles from '@adobe/spectrum-css-temp/components/radio/vars.css'; import {useHover} from '@react-aria/interactions'; -import {useRadio} from '@react-aria/radio'; import {useRadioProvider} from './context'; +export interface SpectrumRadioProps extends Omit, StyleProps {} + /** * Radio buttons allow users to select a single option from a list of mutually exclusive options. * All possible options are exposed up front for users to compare. diff --git a/packages/@react-spectrum/radio/src/RadioGroup.tsx b/packages/@react-spectrum/radio/src/RadioGroup.tsx index 33c0fcfda37..4c968859de5 100644 --- a/packages/@react-spectrum/radio/src/RadioGroup.tsx +++ b/packages/@react-spectrum/radio/src/RadioGroup.tsx @@ -10,18 +10,29 @@ * governing permissions and limitations under the License. */ +import {AriaRadioGroupProps, RadioProps, useRadioGroup} from '@react-aria/radio'; import {classNames, useDOMRef} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMRef, SpectrumHelpTextProps, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {Field} from '@react-spectrum/label'; import {RadioContext} from './context'; -import React from 'react'; -import {SpectrumRadioGroupProps} from '@react-types/radio'; +import React, {ReactElement} from 'react'; import styles from '@adobe/spectrum-css-temp/components/fieldgroup/vars.css'; import {useFormProps} from '@react-spectrum/form'; import {useProviderProps} from '@react-spectrum/provider'; -import {useRadioGroup} from '@react-aria/radio'; import {useRadioGroupState} from '@react-stately/radio'; +export interface SpectrumRadioGroupProps extends AriaRadioGroupProps, SpectrumLabelableProps, StyleProps, SpectrumHelpTextProps { + /** + * The Radio(s) contained within the RadioGroup. + */ + children: ReactElement | ReactElement[], + /** + * By default, radio buttons are not emphasized (gray). + * The emphasized (blue) version provides visual prominence. + */ + isEmphasized?: boolean +} + /** * Radio groups allow users to select a single option from a list of mutually exclusive options. * All possible options are exposed up front for users to compare. diff --git a/packages/@react-spectrum/radio/src/index.ts b/packages/@react-spectrum/radio/src/index.ts index 338417acef6..0bff14b3e8f 100644 --- a/packages/@react-spectrum/radio/src/index.ts +++ b/packages/@react-spectrum/radio/src/index.ts @@ -14,5 +14,5 @@ export {Radio} from './Radio'; export {RadioGroup} from './RadioGroup'; -export type {SpectrumRadioProps} from '@react-types/radio'; -export type {SpectrumRadioGroupProps} from '@react-types/radio'; +export type {SpectrumRadioProps} from './Radio'; +export type {SpectrumRadioGroupProps} from './RadioGroup'; diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index ace025c126f..a96a2f5b476 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -157,18 +157,13 @@ "@react-aria/i18n": "^3.12.16", "@react-aria/interactions": "^3.27.1", "@react-aria/live-announcer": "^3.4.4", + "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", + "@react-stately/grid": "^3.11.9", "@react-stately/layout": "^4.6.0", "@react-stately/utils": "^3.11.0", - "@react-types/dialog": "^3.5.24", - "@react-types/grid": "^3.3.8", - "@react-types/overlays": "^3.9.4", - "@react-types/provider": "^3.8.15", "@react-types/shared": "^3.33.1", - "@react-types/table": "^3.13.6", - "@react-types/textfield": "^3.12.8", - "csstype": "^3.0.2", "react-aria": "^3.47.0", "react-aria-components": "^1.16.0", "react-stately": "^3.45.0" diff --git a/packages/@react-spectrum/s2/src/Accordion.tsx b/packages/@react-spectrum/s2/src/Accordion.tsx index c3e15cffea2..0dfb3a76a86 100644 --- a/packages/@react-spectrum/s2/src/Accordion.tsx +++ b/packages/@react-spectrum/s2/src/Accordion.tsx @@ -22,7 +22,7 @@ import { import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' }; import React, {createContext, forwardRef, ReactNode} from 'react'; import {style} from '../style' with { type: 'macro' }; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface AccordionProps extends UnsafeStyles, DOMProps, SlotProps { diff --git a/packages/@react-spectrum/s2/src/ActionBar.tsx b/packages/@react-spectrum/s2/src/ActionBar.tsx index f4f9583a0fb..0d94b3e7841 100644 --- a/packages/@react-spectrum/s2/src/ActionBar.tsx +++ b/packages/@react-spectrum/s2/src/ActionBar.tsx @@ -22,7 +22,7 @@ import intlMessages from '../intl/*.json'; import {lightDark, style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils' with { type: 'macro' }; import {useControlledState} from '@react-stately/utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useEnterAnimation, useExitAnimation, useObjectRef, useResizeObserver} from '@react-aria/utils'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx index 4753def4f4a..7584a9eba5f 100644 --- a/packages/@react-spectrum/s2/src/ActionButton.tsx +++ b/packages/@react-spectrum/s2/src/ActionButton.tsx @@ -27,7 +27,7 @@ import {pressScale} from './pressScale'; import {ProgressCircle} from './ProgressCircle'; import {SkeletonContext} from './Skeleton'; import {Text, TextContext} from './Content'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useFormProps} from './Form'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {usePendingState} from './Button'; diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx index 19935ea2488..76662f37550 100644 --- a/packages/@react-spectrum/s2/src/Avatar.tsx +++ b/packages/@react-spectrum/s2/src/Avatar.tsx @@ -19,7 +19,7 @@ import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style import {Image} from './Image'; import {isDocsEnv} from './macros' with {type: 'macro'}; import {style} from '../style' with { type: 'macro' }; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps { diff --git a/packages/@react-spectrum/s2/src/AvatarGroup.tsx b/packages/@react-spectrum/s2/src/AvatarGroup.tsx index 2bba0fa7b4b..47331274ea7 100644 --- a/packages/@react-spectrum/s2/src/AvatarGroup.tsx +++ b/packages/@react-spectrum/s2/src/AvatarGroup.tsx @@ -17,7 +17,7 @@ import {createContext, CSSProperties, forwardRef, ReactNode} from 'react'; import {filterDOMProps} from '@react-aria/utils'; import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLabel} from 'react-aria'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx index 8766942111c..19db9d14970 100644 --- a/packages/@react-spectrum/s2/src/Badge.tsx +++ b/packages/@react-spectrum/s2/src/Badge.tsx @@ -20,7 +20,7 @@ import {IconContext} from './Icon'; import React, {createContext, forwardRef, ReactNode} from 'react'; import {SkeletonWrapper} from './Skeleton'; import {Text, TextContext} from './Content'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface BadgeStyleProps { diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx index c78b6c53ddc..afb14b42a56 100644 --- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx +++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx @@ -33,12 +33,12 @@ import {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, // @ts-ignore import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg'; import {forwardRefType} from './types'; -import {inertValue, useLayoutEffect} from '@react-aria/utils'; +import {inertValue, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; import {Menu, MenuItem, MenuTrigger} from './Menu'; import {Text} from './Content'; -import {useDOMRef, useResizeObserver} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocale} from 'react-aria'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx index 412f4ee66a0..f030e995245 100644 --- a/packages/@react-spectrum/s2/src/Button.tsx +++ b/packages/@react-spectrum/s2/src/Button.tsx @@ -24,7 +24,7 @@ import {pressScale} from './pressScale'; import {ProgressCircle} from './ProgressCircle'; import {SkeletonContext} from './Skeleton'; import {Text, TextContext} from './Content'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useFormProps} from './Form'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ButtonGroup.tsx b/packages/@react-spectrum/s2/src/ButtonGroup.tsx index 318302ea473..56729db4e64 100644 --- a/packages/@react-spectrum/s2/src/ButtonGroup.tsx +++ b/packages/@react-spectrum/s2/src/ButtonGroup.tsx @@ -14,13 +14,10 @@ import {ButtonContext, LinkButtonContext} from './Button'; import {ContextValue, Provider, SlotProps} from 'react-aria-components'; import {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react'; import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; -import {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils'; +import {filterDOMProps, useLayoutEffect, useResizeObserver, useValueEffect} from '@react-aria/utils'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {style} from '../style' with {type: 'macro'}; -import { - useDOMRef, - useResizeObserver -} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface ButtonGroupStyleProps { diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx index 2d9d08d9479..776781f250e 100644 --- a/packages/@react-spectrum/s2/src/Card.tsx +++ b/packages/@react-spectrum/s2/src/Card.tsx @@ -28,7 +28,7 @@ import {ImageCoordinator} from './ImageCoordinator'; import {mergeStyles} from '../style/runtime'; import {pressScale} from './pressScale'; import {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface CardRenderProps { diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx index b71b98d731f..adc1c2e11f8 100644 --- a/packages/@react-spectrum/s2/src/CardView.tsx +++ b/packages/@react-spectrum/s2/src/CardView.tsx @@ -30,7 +30,7 @@ import {focusRing, style} from '../style' with {type: 'macro'}; import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {ImageCoordinator} from './ImageCoordinator'; import {useActionBarContainer} from './ActionBar'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx index 0f4830f98b9..552b07f4e57 100644 --- a/packages/@react-spectrum/s2/src/Checkbox.tsx +++ b/packages/@react-spectrum/s2/src/Checkbox.tsx @@ -20,7 +20,7 @@ import DashIcon from '../ui-icons/Dash'; import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {FormContext, useFormProps} from './Form'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface CheckboxStyleProps { diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx index 8a5d412221b..bbe1c4cbe10 100644 --- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx +++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx @@ -22,7 +22,7 @@ import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: import {FieldLabel, HelpText} from './Field'; import {FormContext, useFormProps} from './Form'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface CheckboxGroupProps extends Omit, StyleProps, SpectrumLabelableProps, HelpTextProps { diff --git a/packages/@react-spectrum/s2/src/ClearButton.tsx b/packages/@react-spectrum/s2/src/ClearButton.tsx index f562f9e2d84..868806c6802 100644 --- a/packages/@react-spectrum/s2/src/ClearButton.tsx +++ b/packages/@react-spectrum/s2/src/ClearButton.tsx @@ -21,7 +21,7 @@ import {FocusableRef} from '@react-types/shared'; import {focusRing, style} from '../style' with {type: 'macro'}; import {forwardRef} from 'react'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; interface ClearButtonStyleProps { /** * The size of the ClearButton. diff --git a/packages/@react-spectrum/s2/src/CloseButton.tsx b/packages/@react-spectrum/s2/src/CloseButton.tsx index abd796e779e..b85b0c30bce 100644 --- a/packages/@react-spectrum/s2/src/CloseButton.tsx +++ b/packages/@react-spectrum/s2/src/CloseButton.tsx @@ -19,7 +19,7 @@ import {FocusableRef, FocusableRefValue} from '@react-types/shared'; // @ts-ignore import intlMessages from '../intl/*.json'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ColorArea.tsx b/packages/@react-spectrum/s2/src/ColorArea.tsx index 82defe7c503..ee12fc22d54 100644 --- a/packages/@react-spectrum/s2/src/ColorArea.tsx +++ b/packages/@react-spectrum/s2/src/ColorArea.tsx @@ -21,7 +21,7 @@ import {createContext, forwardRef} from 'react'; import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorAreaProps extends Omit, StyleProps {} diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx index ead7b7ed870..96c5b442d07 100644 --- a/packages/@react-spectrum/s2/src/ColorField.tsx +++ b/packages/@react-spectrum/s2/src/ColorField.tsx @@ -17,13 +17,13 @@ import { InputProps } from 'react-aria-components'; import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react'; -import {createFocusableRef} from '@react-spectrum/utils'; +import {createFocusableRef} from './useDOMRef'; import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {FormContext, useFormProps} from './Form'; import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared'; import {style} from '../style' with {type: 'macro'}; -import {TextFieldRef} from '@react-types/textfield'; +import {TextFieldRef} from './TextField'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorFieldProps extends Omit, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick { diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx index fad78a3a778..9ddbe46a300 100644 --- a/packages/@react-spectrum/s2/src/ColorSlider.tsx +++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx @@ -24,7 +24,7 @@ import {createContext, forwardRef, useRef} from 'react'; import {DOMRef, DOMRefValue, GlobalDOMAttributes, SpectrumLabelableProps} from '@react-types/shared'; import {FieldLabel} from './Field'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorSliderProps extends Omit, Pick, StyleProps { diff --git a/packages/@react-spectrum/s2/src/ColorSwatch.tsx b/packages/@react-spectrum/s2/src/ColorSwatch.tsx index de34fc356e4..15db3196b1a 100644 --- a/packages/@react-spectrum/s2/src/ColorSwatch.tsx +++ b/packages/@react-spectrum/s2/src/ColorSwatch.tsx @@ -21,7 +21,7 @@ import {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorSwatchProps extends Omit, UnsafeStyles { diff --git a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx index c0f095e8545..75322ed4060 100644 --- a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx +++ b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx @@ -16,7 +16,7 @@ import {createContext, forwardRef, ReactElement, ReactNode} from 'react'; import {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared'; import {focusRing, space, style} from '../style' with {type: 'macro'}; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorSwatchPickerProps extends ValueBase, StyleProps, SlotProps { diff --git a/packages/@react-spectrum/s2/src/ColorWheel.tsx b/packages/@react-spectrum/s2/src/ColorWheel.tsx index 8459451dce5..8eb251a1e3e 100644 --- a/packages/@react-spectrum/s2/src/ColorWheel.tsx +++ b/packages/@react-spectrum/s2/src/ColorWheel.tsx @@ -21,7 +21,7 @@ import {createContext, forwardRef} from 'react'; import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorWheelProps extends Omit, StyleProps { diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx index f51a77d5cb4..e6f2d57543c 100644 --- a/packages/@react-spectrum/s2/src/ComboBox.tsx +++ b/packages/@react-spectrum/s2/src/ComboBox.tsx @@ -50,7 +50,7 @@ import CheckmarkIcon from '../ui-icons/Checkmark'; import ChevronIcon from '../ui-icons/Chevron'; import {control, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; -import {createFocusableRef} from '@react-spectrum/utils'; +import {createFocusableRef} from './useDOMRef'; import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'}; import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {FormContext, useFormProps} from './Form'; @@ -65,7 +65,7 @@ import {Placement} from 'react-aria'; import {Popover} from './Popover'; import {pressScale} from './pressScale'; import {ProgressCircle} from './ProgressCircle'; -import {TextFieldRef} from '@react-types/textfield'; +import {TextFieldRef} from './TextField'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useScale} from './utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx index 662dff0a2a2..93575b8f908 100644 --- a/packages/@react-spectrum/s2/src/Content.tsx +++ b/packages/@react-spectrum/s2/src/Content.tsx @@ -16,7 +16,7 @@ import {DOMRef, DOMRefValue} from '@react-types/shared'; import {inertValue} from '@react-aria/utils'; import {StyleString} from '../style/types'; import {UnsafeStyles} from './style-utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useIsSkeleton, useSkeletonText} from './Skeleton'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx index 8f9e20eb039..7c3ada2763a 100644 --- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx @@ -11,7 +11,7 @@ import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg'; // @ts-ignore import intlMessages from '../intl/*.json'; import {mergeStyles} from '../style/runtime'; -import {Placement} from '@react-types/overlays'; +import {Placement} from 'react-aria'; import {Popover, PopoverDialogProps} from './Popover'; import {space, style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils' with { type: 'macro' }; diff --git a/packages/@react-spectrum/s2/src/CustomDialog.tsx b/packages/@react-spectrum/s2/src/CustomDialog.tsx index b06db9c38f0..f7b8fcd59f6 100644 --- a/packages/@react-spectrum/s2/src/CustomDialog.tsx +++ b/packages/@react-spectrum/s2/src/CustomDialog.tsx @@ -16,7 +16,7 @@ import {forwardRef} from 'react'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {Modal} from './Modal'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; export interface CustomDialogProps extends Omit, StyleProps { /** diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx index 4bee6fb7f31..05ed9c71073 100644 --- a/packages/@react-spectrum/s2/src/Dialog.tsx +++ b/packages/@react-spectrum/s2/src/Dialog.tsx @@ -20,7 +20,7 @@ import {ImageContext} from './Image'; import {Modal} from './Modal'; import {style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; // TODO: what style overrides should be allowed? export interface DialogProps extends Omit, StyleProps { diff --git a/packages/@react-spectrum/s2/src/DialogContainer.tsx b/packages/@react-spectrum/s2/src/DialogContainer.tsx index ac26bcdc84c..3ba226b01b5 100644 --- a/packages/@react-spectrum/s2/src/DialogContainer.tsx +++ b/packages/@react-spectrum/s2/src/DialogContainer.tsx @@ -12,9 +12,13 @@ import {ModalContext, useSlottedContext} from 'react-aria-components'; import React, {ReactElement, ReactNode, useState} from 'react'; -import {SpectrumDialogContainerProps} from '@react-types/dialog'; -export interface DialogContainerProps extends Omit {} +export interface DialogContainerProps { + /** The Dialog to display, if any. */ + children: ReactNode, + /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */ + onDismiss: () => void +} /** * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx index c1cdd576c78..d40df4bed49 100644 --- a/packages/@react-spectrum/s2/src/Disclosure.tsx +++ b/packages/@react-spectrum/s2/src/Disclosure.tsx @@ -19,7 +19,7 @@ import Chevron from '../ui-icons/Chevron'; import {filterDOMProps} from '@react-aria/utils'; import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'}; import React, {createContext, forwardRef, ReactNode, useContext} from 'react'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface DisclosureProps extends Omit, StyleProps { diff --git a/packages/@react-spectrum/s2/src/Divider.tsx b/packages/@react-spectrum/s2/src/Divider.tsx index f7ab78c5929..43d1833a359 100644 --- a/packages/@react-spectrum/s2/src/Divider.tsx +++ b/packages/@react-spectrum/s2/src/Divider.tsx @@ -15,7 +15,7 @@ import {createContext, forwardRef} from 'react'; import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'}; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; /* diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx index 5f1220fd0e6..32febe41b15 100644 --- a/packages/@react-spectrum/s2/src/DropZone.tsx +++ b/packages/@react-spectrum/s2/src/DropZone.tsx @@ -18,7 +18,7 @@ import {IllustratedMessageContext} from './IllustratedMessage'; // @ts-ignore import intlMessages from '../intl/*.json'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx index ee114374f56..e8d263d1fca 100644 --- a/packages/@react-spectrum/s2/src/Field.tsx +++ b/packages/@react-spectrum/s2/src/Field.tsx @@ -25,7 +25,7 @@ import {IconContext} from './Icon'; import intlMessages from '../intl/*.json'; import {mergeStyles} from '../style/runtime'; import {StyleString} from '../style/types'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; interface FieldLabelProps extends Omit, StyleProps { diff --git a/packages/@react-spectrum/s2/src/Form.tsx b/packages/@react-spectrum/s2/src/Form.tsx index 687e0bb4c78..9a4a41b619a 100644 --- a/packages/@react-spectrum/s2/src/Form.tsx +++ b/packages/@react-spectrum/s2/src/Form.tsx @@ -15,7 +15,7 @@ import {DOMRef, GlobalDOMAttributes, SpectrumLabelableProps} from '@react-types/ import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {Form as RACForm, FormProps as RACFormProps} from 'react-aria-components'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useIsSkeleton} from './Skeleton'; interface FormStyleProps extends Omit { diff --git a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx index 12ff5a60641..39a9cc25995 100644 --- a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx +++ b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx @@ -18,7 +18,7 @@ import {forwardRef} from 'react'; import {Modal} from './Modal'; import {style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; // TODO: what style overrides should be allowed? export interface FullscreenDialogProps extends Omit, StyleProps { diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx index a7de53690e9..98a02aeb25b 100644 --- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx +++ b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx @@ -19,7 +19,7 @@ import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {IllustrationContext} from './Icon'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface IllustratedMessageStyleProps { diff --git a/packages/@react-spectrum/s2/src/InlineAlert.tsx b/packages/@react-spectrum/s2/src/InlineAlert.tsx index e2340cff0bb..625d5c27682 100644 --- a/packages/@react-spectrum/s2/src/InlineAlert.tsx +++ b/packages/@react-spectrum/s2/src/InlineAlert.tsx @@ -24,7 +24,7 @@ import InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg'; // @ts-ignore import intlMessages from '../intl/*.json'; import NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useFocusRing} from 'react-aria'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Link.tsx b/packages/@react-spectrum/s2/src/Link.tsx index cffb2783dbb..a39f0b9f0a9 100644 --- a/packages/@react-spectrum/s2/src/Link.tsx +++ b/packages/@react-spectrum/s2/src/Link.tsx @@ -16,7 +16,7 @@ import {createContext, forwardRef, ReactNode, useContext} from 'react'; import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'}; import {SkeletonContext, useSkeletonText} from './Skeleton'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useLayoutEffect} from '@react-aria/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Meter.tsx b/packages/@react-spectrum/s2/src/Meter.tsx index ef72ae7339f..fcbd8683d30 100644 --- a/packages/@react-spectrum/s2/src/Meter.tsx +++ b/packages/@react-spectrum/s2/src/Meter.tsx @@ -23,7 +23,7 @@ import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with { import {lightDark, style} from '../style' with {type: 'macro'}; import {SkeletonWrapper} from './Skeleton'; import {Text} from './Content'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface MeterStyleProps { diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx index c6931837893..aee4cb21f51 100644 --- a/packages/@react-spectrum/s2/src/Modal.tsx +++ b/packages/@react-spectrum/s2/src/Modal.tsx @@ -15,7 +15,7 @@ import {DOMRef, GlobalDOMAttributes} from '@react-types/shared'; import {forwardRef, MutableRefObject, useCallback, useContext} from 'react'; import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components'; import {setColorScheme, style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; interface ModalProps extends Omit { /** diff --git a/packages/@react-spectrum/s2/src/NotificationBadge.tsx b/packages/@react-spectrum/s2/src/NotificationBadge.tsx index a2d86d8ef90..b89dd893dee 100644 --- a/packages/@react-spectrum/s2/src/NotificationBadge.tsx +++ b/packages/@react-spectrum/s2/src/NotificationBadge.tsx @@ -19,7 +19,7 @@ import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro import intlMessages from '../intl/*.json'; import {NumberFormatter} from '@internationalized/number'; import React, {createContext, forwardRef} from 'react'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx index d5201bd01c8..a3870f7a7b1 100644 --- a/packages/@react-spectrum/s2/src/NumberField.tsx +++ b/packages/@react-spectrum/s2/src/NumberField.tsx @@ -25,14 +25,14 @@ import { import {baseColor, space, style} from '../style' with {type: 'macro'}; import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react'; -import {createFocusableRef} from '@react-spectrum/utils'; +import {createFocusableRef} from './useDOMRef'; import Dash from '../ui-icons/Dash'; import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils'; import {FormContext, useFormProps} from './Form'; import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared'; import {pressScale} from './pressScale'; -import {TextFieldRef} from '@react-types/textfield'; +import {TextFieldRef} from './TextField'; import {useButton, useFocusRing, useHover} from 'react-aria'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx index df8f132797d..e2ef9855b71 100644 --- a/packages/@react-spectrum/s2/src/Picker.tsx +++ b/packages/@react-spectrum/s2/src/Picker.tsx @@ -79,7 +79,7 @@ import {PressResponder} from '@react-aria/interactions'; import {pressScale} from './pressScale'; import {ProgressCircle} from './ProgressCircle'; import React, {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useScale} from './utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx index a4f85134e49..4bb712bf4b0 100644 --- a/packages/@react-spectrum/s2/src/Popover.tsx +++ b/packages/@react-spectrum/s2/src/Popover.tsx @@ -28,7 +28,7 @@ import {lightDark, setColorScheme, style} from '../style' with {type: 'macro'}; import {mergeRefs} from '@react-aria/utils'; import {mergeStyles} from '../style/runtime'; import {StyleString} from '../style/types' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface PopoverProps extends UnsafeStyles, Omit (px / 16) + 'rem'; diff --git a/packages/@react-spectrum/s2/src/Provider.tsx b/packages/@react-spectrum/s2/src/Provider.tsx index 4b0e1a84054..85eb4240b09 100644 --- a/packages/@react-spectrum/s2/src/Provider.tsx +++ b/packages/@react-spectrum/s2/src/Provider.tsx @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import type {ColorScheme, Router} from '@react-types/provider'; import {createContext, JSX, ReactNode, useContext} from 'react'; -import {DOMProps} from '@react-types/shared'; +import {DOMProps, Href, RouterOptions} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {Fonts} from './Fonts'; import {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'}; @@ -22,6 +21,12 @@ import {setColorScheme, style} from '../style' with {type: 'macro'}; import {StyleString} from '../style/types'; import {UnsafeStyles} from './style-utils' with {type: 'macro'}; +export type ColorScheme = 'light' | 'dark'; +interface Router { + navigate: (path: string, routerOptions: RouterOptions | undefined) => void, + useHref?: (href: Href) => string +} + export interface ProviderProps extends UnsafeStyles, DOMProps { /** The content of the Provider. */ children: ReactNode, diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx index 8ca32b3ce3a..d86775f2d1a 100644 --- a/packages/@react-spectrum/s2/src/Radio.tsx +++ b/packages/@react-spectrum/s2/src/Radio.tsx @@ -22,7 +22,7 @@ import {FocusableRef, GlobalDOMAttributes} from '@react-types/shared'; import {FormContext, useFormProps} from './Form'; import {forwardRef, ReactNode, useContext, useRef} from 'react'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; export interface RadioProps extends Omit, StyleProps { /** diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx index 154138571ee..b947c82fca6 100644 --- a/packages/@react-spectrum/s2/src/RadioGroup.tsx +++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx @@ -21,7 +21,7 @@ import {FieldLabel, HelpText} from './Field'; import {FormContext, useFormProps} from './Form'; import React, {createContext, forwardRef, ReactNode, useContext} from 'react'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface RadioGroupProps extends Omit, StyleProps, SpectrumLabelableProps, HelpTextProps { diff --git a/packages/@react-spectrum/s2/src/RangeSlider.tsx b/packages/@react-spectrum/s2/src/RangeSlider.tsx index 6792d3d6843..491743a5d8c 100644 --- a/packages/@react-spectrum/s2/src/RangeSlider.tsx +++ b/packages/@react-spectrum/s2/src/RangeSlider.tsx @@ -22,7 +22,7 @@ import {FormContext, useFormProps} from './Form'; // @ts-ignore import intlMessages from '../intl/*.json'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx index b15b3876a49..fe56b0ec2a9 100644 --- a/packages/@react-spectrum/s2/src/SearchField.tsx +++ b/packages/@react-spectrum/s2/src/SearchField.tsx @@ -21,7 +21,7 @@ import {baseColor, fontRelative, style} from '../style' with {type: 'macro'}; import {centerBaseline} from './CenterBaseline'; import {ClearButton} from './ClearButton'; import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react'; -import {createFocusableRef} from '@react-spectrum/utils'; +import {createFocusableRef} from './useDOMRef'; import {css} from '../style/style-macro' with {type: 'macro'}; import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FieldGroup, FieldLabel, HelpText, Input} from './Field'; @@ -29,7 +29,7 @@ import {FormContext, useFormProps} from './Form'; import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared'; import {IconContext} from './Icon'; import SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg'; -import {TextFieldRef} from '@react-types/textfield'; +import {TextFieldRef} from './TextField'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface SearchFieldProps extends Omit, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick { diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx index 8009d75134b..a06ca907b15 100644 --- a/packages/@react-spectrum/s2/src/SegmentedControl.tsx +++ b/packages/@react-spectrum/s2/src/SegmentedControl.tsx @@ -19,7 +19,7 @@ import {createContext, forwardRef, ReactNode, useCallback, useContext, useRef} f import {IconContext} from './Icon'; import {pressScale} from './pressScale'; import {Text, TextContext} from './Content'; -import {useDOMRef, useFocusableRef} from '@react-spectrum/utils'; +import {useDOMRef, useFocusableRef} from './useDOMRef'; import {useLayoutEffect} from '@react-aria/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx index 8a0cc23e2a1..b2f28f2c0eb 100644 --- a/packages/@react-spectrum/s2/src/Skeleton.tsx +++ b/packages/@react-spectrum/s2/src/Skeleton.tsx @@ -16,7 +16,7 @@ import {css} from '../style/style-macro' with {type: 'macro'}; import {inertValue, mergeRefs} from '@react-aria/utils'; import {mergeStyles} from '../style/runtime'; import {StyleString} from '../style/types'; -import {useMediaQuery} from '@react-spectrum/utils'; +import {useMediaQuery} from './useMediaQuery'; export function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void { let animationRef = useRef(null); diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx index ed7d2e446f1..4d1552c4a27 100644 --- a/packages/@react-spectrum/s2/src/Slider.tsx +++ b/packages/@react-spectrum/s2/src/Slider.tsx @@ -28,7 +28,7 @@ import {focusRing, style} from '../style' with {type: 'macro'}; import {FormContext, useFormProps} from './Form'; import {mergeStyles} from '../style/runtime'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useLocale, useNumberFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx index ee0b46aa718..7e1d2160897 100644 --- a/packages/@react-spectrum/s2/src/StatusLight.tsx +++ b/packages/@react-spectrum/s2/src/StatusLight.tsx @@ -18,7 +18,7 @@ import {createContext, forwardRef, ReactNode} from 'react'; import {filterDOMProps} from '@react-aria/utils'; import {style} from '../style' with {type: 'macro'}; import {Text} from './Content'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useIsSkeleton} from './Skeleton'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx index 61ad2dfa085..fd8e65a8098 100644 --- a/packages/@react-spectrum/s2/src/Switch.tsx +++ b/packages/@react-spectrum/s2/src/Switch.tsx @@ -24,7 +24,7 @@ import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react'; import {Direction, FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {FormContext, useFormProps} from './Form'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface SwitchStyleProps { diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index d170d7a8646..8b4bed3cf63 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -57,13 +57,13 @@ import {Checkbox} from './Checkbox'; import Checkmark from '../s2wf-icons/S2_Icon_Checkmark_20_N.svg'; import Chevron from '../ui-icons/Chevron'; import Close from '../s2wf-icons/S2_Icon_Close_20_N.svg'; -import {ColumnSize} from '@react-types/table'; +import {ColumnSize} from 'react-stately'; import {controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {css} from '../style/style-macro' with {type: 'macro'}; import {CustomDialog, DialogContainer} from '..'; import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LinkDOMProps, LoadingState, Node} from '@react-types/shared'; import {getActiveElement, getOwnerDocument, isFocusWithin, nodeContains, useLayoutEffect, useObjectRef} from '@react-aria/utils'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {IconContext} from './Icon'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -76,8 +76,9 @@ 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'; import {useActionBarContainer} from './ActionBar'; -import {useDOMRef, useMediaQuery} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; +import {useMediaQuery} from './useMediaQuery'; import {useScale} from './utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; import {VisuallyHidden} from 'react-aria'; diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx index 50cf49b571d..2f6b89ca8ad 100644 --- a/packages/@react-spectrum/s2/src/Tabs.tsx +++ b/packages/@react-spectrum/s2/src/Tabs.tsx @@ -37,7 +37,7 @@ import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResize import {Picker, PickerItem} from './TabsPicker'; import {Text, TextContext} from './Content'; import {useControlledState} from '@react-stately/utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useHasTabbableChild} from '@react-aria/focus'; import {useLocale} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx index 16019c1f528..1b5e705ccca 100644 --- a/packages/@react-spectrum/s2/src/TabsPicker.tsx +++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx @@ -50,7 +50,7 @@ import {Placement, useLocale} from 'react-aria'; import {Popover} from './Popover'; import {pressScale} from './pressScale'; import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useFormProps} from './Form'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface PickerStyleProps { diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx index 1ee4a4e6d0e..fc5ff467e37 100644 --- a/packages/@react-spectrum/s2/src/TagGroup.tsx +++ b/packages/@react-spectrum/s2/src/TagGroup.tsx @@ -47,7 +47,7 @@ import {inertValue, useEffectEvent, useId, useLayoutEffect, useResizeObserver} f import intlMessages from '../intl/*.json'; import {pressScale} from './pressScale'; import {Text, TextContext} from './Content'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx index 45abc4206e3..40bc8fc5799 100644 --- a/packages/@react-spectrum/s2/src/TextField.tsx +++ b/packages/@react-spectrum/s2/src/TextField.tsx @@ -24,15 +24,19 @@ import { import {centerPadding, style} from '../style' with {type: 'macro'}; import {controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react'; -import {createFocusableRef} from '@react-spectrum/utils'; +import {createFocusableRef} from './useDOMRef'; import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; +import {FocusableRefValue, GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared'; import {FormContext, useFormProps} from './Form'; -import {GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared'; import {mergeRefs} from '@react-aria/utils'; import {StyleString} from '../style/types'; -import {TextFieldRef} from '@react-types/textfield'; import {useSpectrumContextProps} from './useSpectrumContextProps'; +export interface TextFieldRef extends FocusableRefValue { + select(): void, + getInputElement(): T | null +} + export interface TextFieldProps extends Omit, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick { /** * The size of the text field. diff --git a/packages/@react-spectrum/s2/src/Toast.tsx b/packages/@react-spectrum/s2/src/Toast.tsx index 399691e8450..b0f02021995 100644 --- a/packages/@react-spectrum/s2/src/Toast.tsx +++ b/packages/@react-spectrum/s2/src/Toast.tsx @@ -30,7 +30,7 @@ import {ToastOptions as RACToastOptions, UNSTABLE_Toast as Toast, UNSTABLE_Toast import {Text} from './Content'; import toastCss from './Toast.module.css'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; -import {useMediaQuery} from '@react-spectrum/utils'; +import {useMediaQuery} from './useMediaQuery'; import {useOverlayTriggerState} from 'react-stately'; export type ToastPlacement = 'top' | 'top end' | 'bottom' | 'bottom end'; diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx index 4aa9d0c79a2..e2176403237 100644 --- a/packages/@react-spectrum/s2/src/ToggleButton.tsx +++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx @@ -22,7 +22,7 @@ import {SkeletonContext} from './Skeleton'; import {StyleProps} from './style-utils'; import {Text, TextContext} from './Content'; import {ToggleButtonGroupContext} from './ToggleButtonGroup'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useFormProps} from './Form'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx index fff6ea89b2d..4e37a216155 100644 --- a/packages/@react-spectrum/s2/src/Tooltip.tsx +++ b/packages/@react-spectrum/s2/src/Tooltip.tsx @@ -20,12 +20,11 @@ import { useLocale } from 'react-aria-components'; import {centerPadding, setColorScheme, style} from '../style' with {type: 'macro'}; -import {ColorScheme} from '@react-types/provider'; -import {ColorSchemeContext} from './Provider'; +import {ColorScheme, ColorSchemeContext} from './Provider'; import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react'; import {DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared'; import {UnsafeStyles} from './style-utils' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; export interface TooltipTriggerProps extends Omit, Pick { /** The content of the tooltip. */ diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx index 3f0eebcb361..238e7a78715 100644 --- a/packages/@react-spectrum/s2/src/TreeView.tsx +++ b/packages/@react-spectrum/s2/src/TreeView.tsx @@ -43,7 +43,7 @@ import {ProgressCircle} from './ProgressCircle'; import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react'; import {Text, TextContext} from './Content'; import {useActionBarContainer} from './ActionBar'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocale, useLocalizedStringFormatter} from 'react-aria'; import {useScale} from './utils'; diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts index 6d84ca9b73f..dabaeff8d2a 100644 --- a/packages/@react-spectrum/s2/src/index.ts +++ b/packages/@react-spectrum/s2/src/index.ts @@ -164,7 +164,7 @@ export type {SwitchProps} from './Switch'; export type {TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps} from './TableView'; export type {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs'; export type {TagGroupProps, TagProps} from './TagGroup'; -export type {TextFieldProps, TextAreaProps} from './TextField'; +export type {TextFieldProps, TextAreaProps, TextFieldRef} from './TextField'; export type {TimeFieldProps} from './TimeField'; export type {ToastOptions, ToastContainerProps} from './Toast'; export type {ToggleButtonProps} from './ToggleButton'; diff --git a/packages/@react-spectrum/s2/src/useDOMRef.ts b/packages/@react-spectrum/s2/src/useDOMRef.ts new file mode 100644 index 00000000000..fea09a48602 --- /dev/null +++ b/packages/@react-spectrum/s2/src/useDOMRef.ts @@ -0,0 +1,57 @@ +/* + * Copyright 2026 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {DOMRef, DOMRefValue, FocusableElement, FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared'; +import {useImperativeHandle, useMemo, useRef} from 'react'; + +export function createDOMRef(ref: RefObject): DOMRefValue { + return { + UNSAFE_getDOMNode() { + return ref.current; + } + }; +} + +export function createFocusableRef(domRef: RefObject, focusableRef: RefObject = domRef): FocusableRefValue { + return { + ...createDOMRef(domRef), + focus() { + if (focusableRef.current) { + focusableRef.current.focus(); + } + } + }; +} + +export function useDOMRef(ref: DOMRef): RefObject { + let domRef = useRef(null); + useImperativeHandle(ref, () => createDOMRef(domRef)); + return domRef; +} + +export function useFocusableRef(ref: FocusableRef, focusableRef?: RefObject): RefObject { + let domRef = useRef(null); + useImperativeHandle(ref, () => createFocusableRef(domRef, focusableRef)); + return domRef; +} + +export function unwrapDOMRef(ref: RefObject | null>): RefObject { + return { + get current() { + return ref.current && ref.current.UNSAFE_getDOMNode(); + } + }; +} + +export function useUnwrapDOMRef(ref: RefObject | null>) : RefObject { + return useMemo(() => unwrapDOMRef(ref), [ref]); +} diff --git a/packages/@react-spectrum/s2/src/useMediaQuery.ts b/packages/@react-spectrum/s2/src/useMediaQuery.ts new file mode 100644 index 00000000000..826ebc430b1 --- /dev/null +++ b/packages/@react-spectrum/s2/src/useMediaQuery.ts @@ -0,0 +1,44 @@ +/* + * Copyright 2026 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {useEffect, useState} from 'react'; +import {useIsSSR} from '@react-aria/ssr'; + +export function useMediaQuery(query: string): boolean { + let supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function'; + let [matches, setMatches] = useState(() => + supportsMatchMedia + ? window.matchMedia(query).matches + : false + ); + + useEffect(() => { + if (!supportsMatchMedia) { + return; + } + + let mq = window.matchMedia(query); + let onChange = (evt) => { + setMatches(evt.matches); + }; + + mq.addListener(onChange); + return () => { + mq.removeListener(onChange); + }; + }, [supportsMatchMedia, query]); + + // If in SSR, the media query should never match. Once the page hydrates, + // this will update and the real value will be returned. + let isSSR = useIsSSR(); + return isSSR ? false : matches; +} diff --git a/packages/@react-spectrum/s2/src/utils.ts b/packages/@react-spectrum/s2/src/utils.ts index 6aac5801df9..d2957cb9ae5 100644 --- a/packages/@react-spectrum/s2/src/utils.ts +++ b/packages/@react-spectrum/s2/src/utils.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {useMediaQuery} from '@react-spectrum/utils'; +import {useMediaQuery} from './useMediaQuery'; export type Scale = 'large' | 'medium'; diff --git a/packages/@react-spectrum/searchfield/package.json b/packages/@react-spectrum/searchfield/package.json index 2713b47414b..44cc02535ca 100644 --- a/packages/@react-spectrum/searchfield/package.json +++ b/packages/@react-spectrum/searchfield/package.json @@ -46,8 +46,7 @@ "@react-spectrum/textfield": "^3.14.5", "@react-spectrum/utils": "^3.12.12", "@react-stately/searchfield": "^3.5.19", - "@react-types/searchfield": "^3.6.8", - "@react-types/textfield": "^3.12.8", + "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/searchfield/src/SearchField.tsx b/packages/@react-spectrum/searchfield/src/SearchField.tsx index 9946bf7b00b..fd44ba98da3 100644 --- a/packages/@react-spectrum/searchfield/src/SearchField.tsx +++ b/packages/@react-spectrum/searchfield/src/SearchField.tsx @@ -10,19 +10,20 @@ * governing permissions and limitations under the License. */ +import {AriaSearchFieldProps, useSearchField} from '@react-aria/searchfield'; import {classNames, useSlotProps} from '@react-spectrum/utils'; import {ClearButton} from '@react-spectrum/button'; import Magnifier from '@spectrum-icons/ui/Magnifier'; import React, {forwardRef, ReactElement, Ref, useEffect, useRef} from 'react'; -import {SpectrumSearchFieldProps} from '@react-types/searchfield'; +import {SpectrumTextFieldProps, TextFieldBase, TextFieldRef} from '@react-spectrum/textfield'; +import {SpectrumTextInputBase} from '@react-types/shared'; import styles from '@adobe/spectrum-css-temp/components/search/vars.css'; -import {TextFieldBase} from '@react-spectrum/textfield'; -import {TextFieldRef} from '@react-types/textfield'; import {useFormProps} from '@react-spectrum/form'; import {useProviderProps} from '@react-spectrum/provider'; -import {useSearchField} from '@react-aria/searchfield'; import {useSearchFieldState} from '@react-stately/searchfield'; +export interface SpectrumSearchFieldProps extends SpectrumTextInputBase, Omit, SpectrumTextFieldProps {} + /** * A SearchField is a text field designed for searches. */ diff --git a/packages/@react-spectrum/searchfield/src/index.ts b/packages/@react-spectrum/searchfield/src/index.ts index 1448f7e0780..d8d3097932d 100644 --- a/packages/@react-spectrum/searchfield/src/index.ts +++ b/packages/@react-spectrum/searchfield/src/index.ts @@ -13,4 +13,4 @@ /// export {SearchField} from './SearchField'; -export type {SpectrumSearchFieldProps} from '@react-types/searchfield'; +export type {SpectrumSearchFieldProps} from './SearchField'; diff --git a/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx b/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx index c2de34fa927..960a1eb1fe1 100644 --- a/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx +++ b/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx @@ -14,9 +14,8 @@ import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; -import {RangeSlider} from '../'; +import {RangeSlider, SpectrumRangeSliderProps} from '../'; import React from 'react'; -import {SpectrumRangeSliderProps} from '@react-types/slider'; const meta: Meta = { title: 'RangeSlider', diff --git a/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx b/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx index d73825a7bef..7bbf37ddf1b 100644 --- a/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx +++ b/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx @@ -15,8 +15,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {Slider} from '../'; -import {SpectrumSliderProps} from '@react-types/slider'; +import {Slider, SpectrumSliderProps} from '../'; const meta: Meta = { title: 'Slider', diff --git a/packages/@react-spectrum/slider/package.json b/packages/@react-spectrum/slider/package.json index 3f74f997fe1..733965fa6e0 100644 --- a/packages/@react-spectrum/slider/package.json +++ b/packages/@react-spectrum/slider/package.json @@ -49,7 +49,6 @@ "@react-spectrum/utils": "^3.12.12", "@react-stately/slider": "^3.7.5", "@react-types/shared": "^3.33.1", - "@react-types/slider": "^3.8.4", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/slider/src/RangeSlider.tsx b/packages/@react-spectrum/slider/src/RangeSlider.tsx index d6b59529e3c..7e8e93937f4 100644 --- a/packages/@react-spectrum/slider/src/RangeSlider.tsx +++ b/packages/@react-spectrum/slider/src/RangeSlider.tsx @@ -11,16 +11,32 @@ */ import {classNames} from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, RangeValue} from '@react-types/shared'; // @ts-ignore import intlMessages from '../intl/*.json'; import React from 'react'; -import {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase'; +import {SliderBase, SliderBaseChildArguments, SliderBaseProps, SpectrumBarSliderBase} from './SliderBase'; import {SliderThumb} from './SliderThumb'; -import {SpectrumRangeSliderProps} from '@react-types/slider'; import styles from '@adobe/spectrum-css-temp/components/slider/vars.css'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumRangeSliderProps extends SpectrumBarSliderBase> { + /** + * The name of the start input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + startName?: string, + /** + * The name of the end input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + endName?: string, + /** + * The `` element to associate the slider with. + * The value of this attribute must be the id of a `` in the same document. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). + */ + form?: string +} + /** * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable. */ diff --git a/packages/@react-spectrum/slider/src/Slider.tsx b/packages/@react-spectrum/slider/src/Slider.tsx index fa531df2a6b..eb9dcc54801 100644 --- a/packages/@react-spectrum/slider/src/Slider.tsx +++ b/packages/@react-spectrum/slider/src/Slider.tsx @@ -12,14 +12,33 @@ import {clamp} from '@react-aria/utils'; import {classNames} from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, InputDOMProps} from '@react-types/shared'; import React, {ReactNode} from 'react'; -import {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase'; +import {SliderBase, SliderBaseChildArguments, SliderBaseProps, SpectrumBarSliderBase} from './SliderBase'; import {SliderThumb} from './SliderThumb'; -import {SpectrumSliderProps} from '@react-types/slider'; import styles from '@adobe/spectrum-css-temp/components/slider/vars.css'; import {useLocale} from '@react-aria/i18n'; +export interface SpectrumSliderProps extends SpectrumBarSliderBase, InputDOMProps { + /** + * Whether a fill color is shown between the start of the slider and the current value. + * @see https://spectrum.adobe.com/page/slider/#Fill. + */ + isFilled?: boolean, + /** + * The offset from which to start the fill. + * @see https://spectrum.adobe.com/page/slider/#Fill-start. + */ + fillOffset?: number, + /** + * The background of the track, specified as the stops for a CSS background: `linear-gradient(to right/left, ...trackGradient)`. + * @example trackGradient={['red', 'green']} + * @example trackGradient={['red 20%', 'green 40%']} + * @see https://spectrum.adobe.com/page/slider/#Gradient. + */ + trackGradient?: string[] +} + /** * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable. */ diff --git a/packages/@react-spectrum/slider/src/SliderBase.tsx b/packages/@react-spectrum/slider/src/SliderBase.tsx index dd35c53a6de..2b32afaf929 100644 --- a/packages/@react-spectrum/slider/src/SliderBase.tsx +++ b/packages/@react-spectrum/slider/src/SliderBase.tsx @@ -10,15 +10,34 @@ * governing permissions and limitations under the License. */ +import {AriaSliderProps, useSlider} from '@react-aria/slider'; import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; -import {FocusableRef, RefObject} from '@react-types/shared'; +import {FocusableRef, LabelPosition, RefObject, StyleProps, ValueBase} from '@react-types/shared'; import React, {CSSProperties, ReactNode, useRef} from 'react'; import {SliderState, useSliderState} from '@react-stately/slider'; -import {SpectrumBarSliderBase} from '@react-types/slider'; import styles from '@adobe/spectrum-css-temp/components/slider/vars.css'; import {useNumberFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -import {useSlider} from '@react-aria/slider'; + +export interface SpectrumBarSliderBase extends AriaSliderProps, ValueBase, StyleProps { + /** + * The display format of the value label. + */ + formatOptions?: Intl.NumberFormatOptions, + /** + * The label's overall position relative to the element it is labeling. + * @default 'top' + */ + labelPosition?: LabelPosition, + /** Whether the value's label is displayed. True by default if there's a `label`, false by default if not. */ + showValueLabel?: boolean, + /** A function that returns the content to display as the value's label. Overrides default formatted number. */ + getValueLabel?: (value: T) => string, + /** + * A ContextualHelp element to place next to the label. + */ + contextualHelp?: ReactNode +} export interface SliderBaseChildArguments { inputRef: RefObject, diff --git a/packages/@react-spectrum/slider/src/SliderThumb.tsx b/packages/@react-spectrum/slider/src/SliderThumb.tsx index 53b0c43c57c..892f11430b1 100644 --- a/packages/@react-spectrum/slider/src/SliderThumb.tsx +++ b/packages/@react-spectrum/slider/src/SliderThumb.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaSliderThumbProps} from '@react-types/slider'; +import {AriaSliderThumbProps, useSliderThumb} from '@react-aria/slider'; import {classNames} from '@react-spectrum/utils'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; @@ -19,7 +19,6 @@ import {RefObject} from '@react-types/shared'; import {SliderState} from '@react-stately/slider'; import styles from '@adobe/spectrum-css-temp/components/slider/vars.css'; import {useHover} from '@react-aria/interactions'; -import {useSliderThumb} from '@react-aria/slider'; import {VisuallyHidden} from '@react-aria/visually-hidden'; interface SliderThumbProps extends AriaSliderThumbProps { diff --git a/packages/@react-spectrum/slider/src/index.ts b/packages/@react-spectrum/slider/src/index.ts index 4f6a9e13265..ae61297f30c 100644 --- a/packages/@react-spectrum/slider/src/index.ts +++ b/packages/@react-spectrum/slider/src/index.ts @@ -14,4 +14,6 @@ export {Slider} from './Slider'; export {RangeSlider} from './RangeSlider'; -export type {SpectrumRangeSliderProps, SpectrumSliderProps} from '@react-types/slider'; +export type {SpectrumSliderProps} from './Slider'; +export type {SpectrumRangeSliderProps} from './RangeSlider'; +export type {SpectrumBarSliderBase} from './SliderBase'; diff --git a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx index 78a90ced120..d39d6c7c43c 100644 --- a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx +++ b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx @@ -16,9 +16,8 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {ErrorBoundary} from '@react-spectrum/story-utils'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryFn} from '@storybook/react'; -import {RangeSlider} from '../'; +import {RangeSlider, SpectrumRangeSliderProps} from '../'; import React from 'react'; -import {SpectrumRangeSliderProps} from '@react-types/slider'; let message = 'Your browser may not support this set of format options.'; diff --git a/packages/@react-spectrum/slider/stories/Slider.stories.tsx b/packages/@react-spectrum/slider/stories/Slider.stories.tsx index 8f047213a1f..59677f4458b 100644 --- a/packages/@react-spectrum/slider/stories/Slider.stories.tsx +++ b/packages/@react-spectrum/slider/stories/Slider.stories.tsx @@ -18,8 +18,7 @@ import {Flex} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryFn} from '@storybook/react'; import React from 'react'; -import {Slider} from '../'; -import {SpectrumSliderProps} from '@react-types/slider'; +import {Slider, SpectrumSliderProps} from '../'; let message = 'Your browser may not support this set of format options.'; diff --git a/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx index 83d53ed26d2..17eb1241c94 100644 --- a/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx +++ b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx @@ -13,8 +13,7 @@ import {Flex} from '@react-spectrum/layout'; import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {SpectrumStatusLightProps} from '@react-types/statuslight'; -import {StatusLight} from '../'; +import {SpectrumStatusLightProps, StatusLight} from '../'; import {View} from '@react-spectrum/view'; let variants = ['celery', 'yellow', 'fuchsia', 'indigo', 'seafoam', 'chartreuse', 'magenta', 'purple', 'neutral', 'info', 'positive', 'notice', 'negative', 'positive'] as SpectrumStatusLightProps['variant'][]; diff --git a/packages/@react-spectrum/statuslight/package.json b/packages/@react-spectrum/statuslight/package.json index ccddef80184..8299d7467ae 100644 --- a/packages/@react-spectrum/statuslight/package.json +++ b/packages/@react-spectrum/statuslight/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", "@react-types/shared": "^3.33.1", - "@react-types/statuslight": "^3.3.23", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/statuslight/src/StatusLight.tsx b/packages/@react-spectrum/statuslight/src/StatusLight.tsx index fd66f8ac948..de2c372c607 100644 --- a/packages/@react-spectrum/statuslight/src/StatusLight.tsx +++ b/packages/@react-spectrum/statuslight/src/StatusLight.tsx @@ -10,14 +10,32 @@ * governing permissions and limitations under the License. */ +import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef} from 'react'; -import {SpectrumStatusLightProps} from '@react-types/statuslight'; +import React, {forwardRef, ReactNode} from 'react'; import styles from '@adobe/spectrum-css-temp/components/statuslight/vars.css'; import {useProviderProps} from '@react-spectrum/provider'; + +export interface SpectrumStatusLightProps extends DOMProps, StyleProps, AriaLabelingProps { + /** The content to display as the label. */ + children?: ReactNode, + /** + * The variant changes the color of the status light. + * When status lights have a semantic meaning, they should use the variant for semantic colors. + */ + variant: 'positive' | 'negative' | 'notice' | 'info' | 'neutral' | 'celery' | 'chartreuse' | 'yellow' | 'magenta' | 'fuchsia' | 'purple' | 'indigo' | 'seafoam', + /** Whether the status light is disabled. */ + isDisabled?: boolean, + /** + * An accessibility role for the status light. Should be set when the status + * can change at runtime, and no more than one status light will update simultaneously. + * For cases where multiple statuses can change at the same time, use a Toast instead. + */ + role?: 'status' +} + /** * Status lights are used to color code categories and labels commonly found in data visualization. * When status lights have a semantic meaning, they should use semantic variant colors. diff --git a/packages/@react-spectrum/statuslight/src/index.ts b/packages/@react-spectrum/statuslight/src/index.ts index 15ddacd3f2a..3eda01164da 100644 --- a/packages/@react-spectrum/statuslight/src/index.ts +++ b/packages/@react-spectrum/statuslight/src/index.ts @@ -13,4 +13,4 @@ /// export {StatusLight} from './StatusLight'; -export type {SpectrumStatusLightProps} from '@react-types/statuslight'; +export type {SpectrumStatusLightProps} from './StatusLight'; diff --git a/packages/@react-spectrum/switch/package.json b/packages/@react-spectrum/switch/package.json index e9509303203..633feaa1828 100644 --- a/packages/@react-spectrum/switch/package.json +++ b/packages/@react-spectrum/switch/package.json @@ -46,7 +46,6 @@ "@react-spectrum/utils": "^3.12.12", "@react-stately/toggle": "^3.9.5", "@react-types/shared": "^3.33.1", - "@react-types/switch": "^3.5.17", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/switch/src/Switch.tsx b/packages/@react-spectrum/switch/src/Switch.tsx index 949b2e0a50d..fd4f2c794b4 100644 --- a/packages/@react-spectrum/switch/src/Switch.tsx +++ b/packages/@react-spectrum/switch/src/Switch.tsx @@ -10,17 +10,23 @@ * governing permissions and limitations under the License. */ +import {AriaSwitchProps, useSwitch} from '@react-aria/switch'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import React, {forwardRef, useRef} from 'react'; -import {SpectrumSwitchProps} from '@react-types/switch'; import styles from '@adobe/spectrum-css-temp/components/toggle/vars.css'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; -import {useSwitch} from '@react-aria/switch'; import {useToggleState} from '@react-stately/toggle'; +export interface SpectrumSwitchProps extends AriaSwitchProps, StyleProps { + /** + * This prop sets the emphasized style which provides visual prominence. + */ + isEmphasized?: boolean +} + /** * Switches allow users to turn an individual option on or off. * They are usually used to activate or deactivate a specific setting. diff --git a/packages/@react-spectrum/switch/src/index.ts b/packages/@react-spectrum/switch/src/index.ts index a0b0035a299..3d103b5d785 100644 --- a/packages/@react-spectrum/switch/src/index.ts +++ b/packages/@react-spectrum/switch/src/index.ts @@ -13,4 +13,4 @@ /// export {Switch} from './Switch'; -export type {SpectrumSwitchProps} from '@react-types/switch'; +export type {SpectrumSwitchProps} from './Switch'; diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index 5cf26a1ff55..5fec2079fb8 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -13,7 +13,7 @@ export default Layout; import docs from 'docs:@react-spectrum/table'; import dndDocs from 'docs:@react-spectrum/dnd'; import tableUtil from 'docs:@react-aria/test-utils/src/table.ts'; -import tableTypes from 'docs:@react-types/table/src/index.d.ts'; +import tableTypes from 'docs:@react-stately/table'; import {HeaderInfo, PropTable, PageDescription, TypeLink, VersionBadge, ClassAPI} from '@react-spectrum/docs'; import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-spectrum/table/package.json'; @@ -1644,9 +1644,9 @@ function CustomDragPreviewExample() { +}} links={docs.links} style={{marginBottom: '40px'}} /> ### TableBody props diff --git a/packages/@react-spectrum/table/package.json b/packages/@react-spectrum/table/package.json index aca041f2216..34c14a64bfb 100644 --- a/packages/@react-spectrum/table/package.json +++ b/packages/@react-spectrum/table/package.json @@ -58,12 +58,11 @@ "@react-spectrum/tooltip": "^3.8.2", "@react-spectrum/utils": "^3.12.12", "@react-stately/flags": "^3.1.2", + "@react-stately/grid": "^3.11.9", "@react-stately/layout": "^4.6.0", "@react-stately/table": "^3.15.4", "@react-stately/virtualizer": "^4.4.6", - "@react-types/grid": "^3.3.8", "@react-types/shared": "^3.33.1", - "@react-types/table": "^3.13.6", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx index defc24868ea..7214894d9ef 100644 --- a/packages/@react-spectrum/table/src/Resizer.tsx +++ b/packages/@react-spectrum/table/src/Resizer.tsx @@ -1,10 +1,10 @@ import {classNames} from '@react-spectrum/utils'; -import {ColumnSize} from '@react-types/table'; +import {ColumnSize, TableColumnResizeState} from '@react-stately/table'; import eCursor from 'bundle-text:./cursors/Cur_MoveToRight_9_9.svg'; import ewCursor from 'bundle-text:./cursors/Cur_MoveHorizontal_9_9.svg'; import {FocusRing} from '@react-aria/focus'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; import {isWebKit, mergeProps, useObjectRef} from '@react-aria/utils'; @@ -12,7 +12,6 @@ import {Key, RefObject} from '@react-types/shared'; import React, {createContext, ForwardedRef, useContext, useEffect, useState} from 'react'; import ReactDOM from 'react-dom'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; -import {TableColumnResizeState} from '@react-stately/table'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useTableColumnResize} from '@react-aria/table'; import {useTableContext, useVirtualizerContext} from './TableViewBase'; diff --git a/packages/@react-spectrum/table/src/TableViewBase.tsx b/packages/@react-spectrum/table/src/TableViewBase.tsx index 9d3dc5acd3b..541470044f3 100644 --- a/packages/@react-spectrum/table/src/TableViewBase.tsx +++ b/packages/@react-spectrum/table/src/TableViewBase.tsx @@ -22,7 +22,7 @@ import { useStyleProps, useUnwrapDOMRef } from '@react-spectrum/utils'; -import {ColumnSize, SpectrumColumnProps, TableCollection} from '@react-types/table'; +import {ColumnSize, ITableCollection as TableCollection, TableState, TreeGridState, useTableColumnResizeState} from '@react-stately/table'; import {DOMRef, DropTarget, FocusableElement, FocusableRef, Key, RefObject} from '@react-types/shared'; import type {DragAndDropHooks} from '@react-spectrum/dnd'; import type {DraggableCollectionState, DroppableCollectionState} from '@react-stately/dnd'; @@ -30,7 +30,7 @@ import type {DraggableItemResult, DropIndicatorAria, DroppableCollectionResult} import {FocusRing, FocusScope, useFocusRing} from '@react-aria/focus'; import {getActiveElement, isAndroid, isFocusWithin, mergeProps, scrollIntoView, scrollIntoViewport, useLoadMore} from '@react-aria/utils'; import {getInteractionModality, HoverProps, isFocusVisible, useHover, usePress} from '@react-aria/interactions'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {InsertionIndicator} from './InsertionIndicator'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -44,11 +44,11 @@ import {ProgressCircle} from '@react-spectrum/progress'; import React, {DOMAttributes, HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; import {Resizer, ResizeStateContext} from './Resizer'; import {RootDropIndicator} from './RootDropIndicator'; +import {SpectrumColumnProps} from './types'; import {DragPreview as SpectrumDragPreview} from './DragPreview'; import {SpectrumTableProps} from './TableViewWrapper'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; import stylesOverrides from './table.css'; -import {TableState, TreeGridState, useTableColumnResizeState} from '@react-stately/table'; import {TableViewLayout} from './TableViewLayout'; import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip'; import {useButton} from '@react-aria/button'; diff --git a/packages/@react-spectrum/table/src/TableViewLayout.ts b/packages/@react-spectrum/table/src/TableViewLayout.ts index 26138c975c1..3e553cdbaf3 100644 --- a/packages/@react-spectrum/table/src/TableViewLayout.ts +++ b/packages/@react-spectrum/table/src/TableViewLayout.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ import {DropTarget} from '@react-types/shared'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {LayoutInfo, Rect} from '@react-stately/virtualizer'; import {LayoutNode, TableLayout} from '@react-stately/layout'; import {TableCollection} from '@react-stately/table'; diff --git a/packages/@react-spectrum/table/src/TableViewWrapper.tsx b/packages/@react-spectrum/table/src/TableViewWrapper.tsx index c229de93286..66fdce7ab0d 100644 --- a/packages/@react-spectrum/table/src/TableViewWrapper.tsx +++ b/packages/@react-spectrum/table/src/TableViewWrapper.tsx @@ -11,7 +11,7 @@ */ import type {AriaLabelingProps, DisabledBehavior, DOMProps, DOMRef, Key, SpectrumSelectionProps, StyleProps} from '@react-types/shared'; -import type {ColumnSize, TableProps} from '@react-types/table'; +import type {ColumnSize, TableProps} from '@react-stately/table'; import type {DragAndDropHooks} from '@react-spectrum/dnd'; import React, {JSX, ReactElement} from 'react'; import {tableNestedRows} from '@react-stately/flags'; diff --git a/packages/@react-spectrum/table/src/index.ts b/packages/@react-spectrum/table/src/index.ts index e365c1368a6..c419fc031e2 100644 --- a/packages/@react-spectrum/table/src/index.ts +++ b/packages/@react-spectrum/table/src/index.ts @@ -15,7 +15,7 @@ export {TableView} from './TableViewWrapper'; import {Column} from '@react-stately/table'; import {JSX} from 'react'; -import {SpectrumColumnProps} from '@react-types/table'; +import {SpectrumColumnProps} from './types'; // Override TS for Column to support spectrum specific props. const SpectrumColumn = Column as (props: SpectrumColumnProps) => JSX.Element; @@ -29,5 +29,6 @@ export { Cell } from '@react-stately/table'; -export type {SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps} from '@react-types/table'; +export type {SpectrumColumnProps} from './types'; +export type {TableHeaderProps, TableBodyProps, RowProps, CellProps} from '@react-stately/table'; export type {SpectrumTableProps} from './TableViewWrapper'; diff --git a/packages/@react-spectrum/table/src/types.ts b/packages/@react-spectrum/table/src/types.ts new file mode 100644 index 00000000000..a1b5a983d67 --- /dev/null +++ b/packages/@react-spectrum/table/src/types.ts @@ -0,0 +1,32 @@ + +/* + * Copyright 2026 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {ColumnProps} from '@react-stately/table'; + +export interface SpectrumColumnProps extends ColumnProps { + /** + * The alignment of the column's contents relative to its allotted width. + * @default 'start' + */ + align?: 'start' | 'center' | 'end', + // /** Whether the column should stick to the viewport when scrolling. */ + // isSticky?: boolean, // shouldStick?? Not implemented yet? + /** Whether the column should render a divider between it and the next column. */ + showDivider?: boolean, + /** + * Whether the column should hide its header text. A tooltip with the column's header text + * will be displayed when the column header is focused instead. Note that this prop is specifically for columns + * that contain ActionButtons in place of text content. + */ + hideHeader?: boolean +} diff --git a/packages/@react-spectrum/table/stories/ControllingResize.tsx b/packages/@react-spectrum/table/stories/ControllingResize.tsx index 4bcd4750a7e..7060453a0dc 100644 --- a/packages/@react-spectrum/table/stories/ControllingResize.tsx +++ b/packages/@react-spectrum/table/stories/ControllingResize.tsx @@ -12,7 +12,7 @@ import {Button} from '@react-spectrum/button'; import {Cell, Column, Row, SpectrumColumnProps, TableBody, TableHeader, TableView} from '../'; -import {ColumnSize} from '@react-types/table'; +import {ColumnSize} from '@react-stately/table'; import {Key} from '@react-types/shared'; import React, {JSX, useCallback, useMemo, useState} from 'react'; diff --git a/packages/@react-spectrum/table/stories/Performance.tsx b/packages/@react-spectrum/table/stories/Performance.tsx index 2331ced338c..68dda45be7a 100644 --- a/packages/@react-spectrum/table/stories/Performance.tsx +++ b/packages/@react-spectrum/table/stories/Performance.tsx @@ -7,7 +7,7 @@ import {Item, TagGroup} from '@react-spectrum/tag'; import {Link} from '@react-spectrum/link'; import {ProgressBar} from '@react-spectrum/progress'; import React, {JSX} from 'react'; -import {SpectrumStatusLightProps} from '@react-types/statuslight'; +import {SpectrumStatusLightProps} from '@react-spectrum/statuslight'; import {Text} from '@react-spectrum/text'; export const DATA_SIZE = 10000; diff --git a/packages/@react-spectrum/table/test/TableSizing.test.tsx b/packages/@react-spectrum/table/test/TableSizing.test.tsx index 3c82d3a3223..f081cbb242b 100644 --- a/packages/@react-spectrum/table/test/TableSizing.test.tsx +++ b/packages/@react-spectrum/table/test/TableSizing.test.tsx @@ -15,15 +15,14 @@ import {act, render as renderComponent, within} from '@testing-library/react'; import {ActionButton} from '@react-spectrum/button'; import Add from '@spectrum-icons/workflow/Add'; import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../'; -import {ColumnSize} from '@react-types/table'; +import {ColumnSize} from '@react-stately/table'; import {ControllingResize} from '../stories/ControllingResize'; import {fireEvent, installPointerEvent, pointerMap, simulateDesktop, triggerTouch} from '@react-spectrum/test-utils-internal'; import {HidingColumns} from '../stories/HidingColumns'; import {Key} from '@react-types/shared'; -import {Provider} from '@react-spectrum/provider'; +import {Provider, Scale} from '@react-spectrum/provider'; import React, {useRef} from 'react'; import {resizingTests} from '../../../@react-aria/table/test/tableResizingTests'; -import {Scale} from '@react-types/provider'; import {setInteractionModality} from '@react-aria/interactions'; import {theme} from '@react-spectrum/theme-default'; import {UNSAFE_PortalProvider} from '@react-aria/overlays'; diff --git a/packages/@react-spectrum/table/test/TreeGridTable.test.tsx b/packages/@react-spectrum/table/test/TreeGridTable.test.tsx index 3cf9f0c1492..fd604bd5939 100644 --- a/packages/@react-spectrum/table/test/TreeGridTable.test.tsx +++ b/packages/@react-spectrum/table/test/TreeGridTable.test.tsx @@ -30,9 +30,8 @@ import { UserSetRowHeaderRender as UserSetRowHeaderTable } from '../stories/TreeGridTable.stories'; import {enableTableNestedRows} from '@react-stately/flags'; -import {Provider} from '@react-spectrum/provider'; +import {Provider, Scale} from '@react-spectrum/provider'; import React from 'react'; -import {Scale} from '@react-types/provider'; import {scrollIntoView} from '@react-aria/utils'; import {theme} from '@react-spectrum/theme-default'; import userEvent from '@testing-library/user-event'; diff --git a/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx index 7edb0dc8772..f16029d55b3 100644 --- a/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx +++ b/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx @@ -11,10 +11,9 @@ */ import {Heading, Text} from '@react-spectrum/text'; -import {Item, TabList, TabPanels, Tabs} from '../'; +import {Item, SpectrumTabsProps, TabList, TabPanels, Tabs} from '../'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumTabsProps} from '@react-types/tabs'; const meta: Meta> = { title: 'Tabs', diff --git a/packages/@react-spectrum/tabs/package.json b/packages/@react-spectrum/tabs/package.json index 9256ffaa823..a4969f81a96 100644 --- a/packages/@react-spectrum/tabs/package.json +++ b/packages/@react-spectrum/tabs/package.json @@ -51,9 +51,7 @@ "@react-stately/collections": "^3.12.10", "@react-stately/list": "^3.13.4", "@react-stately/tabs": "^3.8.9", - "@react-types/select": "^3.12.2", "@react-types/shared": "^3.33.1", - "@react-types/tabs": "^3.3.22", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx index 4090507353d..dfecec1107d 100644 --- a/packages/@react-spectrum/tabs/src/Tabs.tsx +++ b/packages/@react-spectrum/tabs/src/Tabs.tsx @@ -10,12 +10,12 @@ * governing permissions and limitations under the License. */ -import {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs'; +import {AriaLabelingProps, CollectionChildren, DOMProps, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject, SingleSelection, StyleProps} from '@react-types/shared'; +import {AriaTabPanelProps, useTab, useTabList, useTabPanel} from '@react-aria/tabs'; import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMProps, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject, StyleProps} from '@react-types/shared'; import {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import {FocusRing} from '@react-aria/focus'; -import {Item, Picker} from '@react-spectrum/picker'; +import {Item, Picker, SpectrumPickerProps} from '@react-spectrum/picker'; import {ListCollection} from '@react-stately/list'; import React, { CSSProperties, @@ -28,7 +28,6 @@ import React, { useRef, useState } from 'react'; -import {SpectrumPickerProps} from '@react-types/select'; import styles from '@adobe/spectrum-css-temp/components/tabs/vars.css'; import {TabListState, useTabListState} from '@react-stately/tabs'; import {Text} from '@react-spectrum/text'; @@ -36,7 +35,39 @@ import {useCollection} from '@react-stately/collections'; import {useHover} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; -import {useTab, useTabList, useTabPanel} from '@react-aria/tabs'; + +export interface SpectrumTabsProps extends Omit, AriaLabelingProps, DOMProps, StyleProps { + /** The children of the `` element. Should include `` and `` elements. */ + children: ReactNode, + /** The item objects for each tab, for dynamic collections. */ + items?: Iterable, + /** The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise interacted with. */ + disabledKeys?: Iterable, + /** Whether the Tabs are disabled. */ + isDisabled?: boolean, + /** Whether the tabs are displayed in a quiet style. */ + isQuiet?: boolean, + /** Whether the tabs are displayed in an emphasized style. */ + isEmphasized?: boolean, + /** The amount of space between the tabs. */ + density?: 'compact' | 'regular', + /** The currently selected key in the collection (controlled). */ + selectedKey?: Key, + /** The initial selected keys in the collection (uncontrolled). */ + defaultSelectedKey?: Key, + /** Handler that is called when the selection changes. */ + onSelectionChange?: (key: Key) => void, + /** + * Whether tabs are activated automatically on focus or manually. + * @default 'automatic' + */ + keyboardActivation?: 'automatic' | 'manual', + /** + * The orientation of the tabs. + * @default 'horizontal' + */ + orientation?: Orientation +} interface TabsContext { tabProps: SpectrumTabsProps, @@ -257,6 +288,11 @@ function TabLine(props: TabLineProps) { return
; } +export interface SpectrumTabListProps extends DOMProps, StyleProps { + /** The tab items to display. Item keys should match the key of the corresponding `` within the `` element. */ + children: CollectionChildren +} + /** * A TabList is used within Tabs to group tabs that a user can switch between. * The keys of the items within the must match up with a corresponding item inside the . @@ -333,6 +369,11 @@ export function TabList(props: SpectrumTabListProps): ReactElement { } } +export interface SpectrumTabPanelsProps extends DOMProps, StyleProps { + /** The contents of each tab. Item keys should match the key of the corresponding `` within the `` element. */ + children: CollectionChildren +} + /** * TabPanels is used within Tabs as a container for the content of each tab. * The keys of the items within the must match up with a corresponding item inside the . diff --git a/packages/@react-spectrum/tabs/src/index.ts b/packages/@react-spectrum/tabs/src/index.ts index f52aa986edb..7ec60dad619 100644 --- a/packages/@react-spectrum/tabs/src/index.ts +++ b/packages/@react-spectrum/tabs/src/index.ts @@ -14,4 +14,4 @@ export {TabList, TabPanels, Tabs} from './Tabs'; export {Item} from '@react-stately/collections'; -export type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs'; +export type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from './Tabs'; diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx index 14f68150d0f..0d27c502393 100644 --- a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx +++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx @@ -17,13 +17,12 @@ import {Button} from '@react-spectrum/button'; import {ButtonGroup} from '@react-spectrum/buttongroup'; import Calendar from '@spectrum-icons/workflow/Calendar'; import Dashboard from '@spectrum-icons/workflow/Dashboard'; -import {Item, TabList, TabPanels, Tabs} from '..'; +import {Item, SpectrumTabsProps, TabList, TabPanels, Tabs} from '..'; import {Key} from '@react-types/shared'; import {Meta, StoryFn} from '@storybook/react'; import {Picker} from '@react-spectrum/picker'; import React, {ReactNode, useCallback, useState} from 'react'; import {RouterProvider} from '@react-aria/utils'; -import {SpectrumTabsProps} from '@react-types/tabs'; import {TextField} from '@react-spectrum/textfield'; export default { diff --git a/packages/@react-spectrum/text/package.json b/packages/@react-spectrum/text/package.json index a1389a1abf6..c30d4e52e87 100644 --- a/packages/@react-spectrum/text/package.json +++ b/packages/@react-spectrum/text/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", "@react-types/shared": "^3.33.1", - "@react-types/text": "^3.3.23", "@swc/helpers": "^0.5.0", "react-aria-components": "^1.16.0" }, diff --git a/packages/@react-spectrum/text/src/Heading.tsx b/packages/@react-spectrum/text/src/Heading.tsx index 610c84048a6..314abb3e927 100644 --- a/packages/@react-spectrum/text/src/Heading.tsx +++ b/packages/@react-spectrum/text/src/Heading.tsx @@ -10,13 +10,29 @@ * governing permissions and limitations under the License. */ -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {HeadingContext, useContextProps} from 'react-aria-components'; -import {HeadingProps} from '@react-types/text'; -import React, {ElementType, forwardRef} from 'react'; +import React, {ElementType, forwardRef, ReactNode} from 'react'; import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; +export interface HeadingProps extends DOMProps, StyleProps { + /** + * Heading content. + */ + children: ReactNode, + /** + * A slot to place the heading in. + * @default 'heading' + */ + slot?: string, + /** + * Sets heading level, h1 through h6. + * @default 3 + */ + level?: 1 | 2 | 3 | 4 | 5 | 6 +} + /** * Heading is used to create various levels of typographic hierarchies. */ diff --git a/packages/@react-spectrum/text/src/Keyboard.tsx b/packages/@react-spectrum/text/src/Keyboard.tsx index bcb4d49c899..e6c7daa9cd9 100644 --- a/packages/@react-spectrum/text/src/Keyboard.tsx +++ b/packages/@react-spectrum/text/src/Keyboard.tsx @@ -10,12 +10,23 @@ * governing permissions and limitations under the License. */ -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {KeyboardProps} from '@react-types/text'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; +export interface KeyboardProps extends DOMProps, StyleProps { + /** + * Keyboard shortcut text. + */ + children: ReactNode, + /** + * A slot to place the keyboard shortcut in. + * @default 'keyboard' + */ + slot?: string +} + /** * Keyboard represents text that specifies a keyboard command. */ diff --git a/packages/@react-spectrum/text/src/Text.tsx b/packages/@react-spectrum/text/src/Text.tsx index 1e763a59d7b..70344a67374 100644 --- a/packages/@react-spectrum/text/src/Text.tsx +++ b/packages/@react-spectrum/text/src/Text.tsx @@ -10,12 +10,23 @@ * governing permissions and limitations under the License. */ -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef} from 'react'; -import {TextProps} from '@react-types/text'; +import React, {forwardRef, ReactNode} from 'react'; import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; +export interface TextProps extends DOMProps, StyleProps { + /** + * Text content. + */ + children: ReactNode, + /** + * A slot to place the text in. + * @default 'text' + */ + slot?: string +} + /** * Text represents text with no specific semantic meaning. */ diff --git a/packages/@react-spectrum/text/src/index.ts b/packages/@react-spectrum/text/src/index.ts index 03b3ef5dc94..21d93a06597 100644 --- a/packages/@react-spectrum/text/src/index.ts +++ b/packages/@react-spectrum/text/src/index.ts @@ -15,4 +15,6 @@ export {Text} from './Text'; export {Heading} from './Heading'; export {Keyboard} from './Keyboard'; -export type {HeadingProps, KeyboardProps, TextProps} from '@react-types/text'; +export type {TextProps} from './Text'; +export type {HeadingProps} from './Heading'; +export type {KeyboardProps} from './Keyboard'; diff --git a/packages/@react-spectrum/textfield/package.json b/packages/@react-spectrum/textfield/package.json index 7c35deacc12..ff46675d588 100644 --- a/packages/@react-spectrum/textfield/package.json +++ b/packages/@react-spectrum/textfield/package.json @@ -50,7 +50,6 @@ "@react-spectrum/utils": "^3.12.12", "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.33.1", - "@react-types/textfield": "^3.12.8", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx index 2424823560b..1f343f92b44 100644 --- a/packages/@react-spectrum/textfield/src/TextArea.tsx +++ b/packages/@react-spectrum/textfield/src/TextArea.tsx @@ -10,14 +10,22 @@ * governing permissions and limitations under the License. */ +import {AriaTextFieldProps, useTextField} from '@react-aria/textfield'; import {chain, useLayoutEffect} from '@react-aria/utils'; -import React, {Ref, useCallback, useEffect, useRef} from 'react'; -import {SpectrumTextAreaProps, SpectrumTextFieldBaseProps, TextFieldRef} from '@react-types/textfield'; +import React, {ReactElement, Ref, useCallback, useEffect, useRef} from 'react'; +import {SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; import {TextFieldBase} from './TextFieldBase'; +import {TextFieldRef} from './TextField'; import {useControlledState} from '@react-stately/utils'; import {useFormProps} from '@react-spectrum/form'; import {useProviderProps} from '@react-spectrum/provider'; -import {useTextField} from '@react-aria/textfield'; + +export interface SpectrumTextAreaProps extends SpectrumTextInputBase, Omit, 'isInvalid' | 'validationState' | 'type' | 'pattern'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps { + /** An icon to display at the start of the input. */ + icon?: ReactElement | null, + /** Whether the input should be displayed with a quiet style. */ + isQuiet?: boolean +} /** * TextAreas are multiline text inputs, useful for cases where users have @@ -85,7 +93,7 @@ export const TextArea = React.forwardRef(function TextArea(props: SpectrumTextAr return ( , SpectrumFieldValidation, SpectrumLabelableProps, StyleProps { + /** An icon to display at the start of the input. */ + icon?: ReactElement | null, + /** Whether the input should be displayed with a quiet style. */ + isQuiet?: boolean +} + +export interface TextFieldRef extends FocusableRefValue { + select(): void, + getInputElement(): T | null +} /** * TextFields are text inputs that allow users to input custom text entries diff --git a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx index b73670171e6..22f1944f36d 100644 --- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx +++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx @@ -19,7 +19,7 @@ import intlMessages from '../intl/*.json'; import {mergeProps, useId} from '@react-aria/utils'; import {PressEvents, RefObject, ValidationResult} from '@react-types/shared'; import React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react'; -import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield'; +import {SpectrumTextFieldProps, TextFieldRef} from './TextField'; import styles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; import {useFocusRing} from '@react-aria/focus'; import {useHover} from '@react-aria/interactions'; diff --git a/packages/@react-spectrum/textfield/src/index.ts b/packages/@react-spectrum/textfield/src/index.ts index ecc2628bbd7..2b02d14af8c 100644 --- a/packages/@react-spectrum/textfield/src/index.ts +++ b/packages/@react-spectrum/textfield/src/index.ts @@ -15,4 +15,5 @@ export {TextArea} from './TextArea'; export {TextField} from './TextField'; export {TextFieldBase} from './TextFieldBase'; -export type {SpectrumTextFieldProps, SpectrumTextAreaProps} from '@react-types/textfield'; +export type {SpectrumTextFieldProps, TextFieldRef} from './TextField'; +export type {SpectrumTextAreaProps} from './TextArea'; diff --git a/packages/@react-spectrum/theme-dark/package.json b/packages/@react-spectrum/theme-dark/package.json index 9e8951171b4..59352e6113b 100644 --- a/packages/@react-spectrum/theme-dark/package.json +++ b/packages/@react-spectrum/theme-dark/package.json @@ -40,7 +40,6 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/provider": "^3.8.15", "@swc/helpers": "^0.5.0" }, "devDependencies": { @@ -50,6 +49,7 @@ "access": "public" }, "peerDependencies": { + "@react-spectrum/provider": "^3.10.14", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-spectrum/theme-dark/src/index.ts b/packages/@react-spectrum/theme-dark/src/index.ts index 6013c41b012..a8469c3dad2 100644 --- a/packages/@react-spectrum/theme-dark/src/index.ts +++ b/packages/@react-spectrum/theme-dark/src/index.ts @@ -17,7 +17,7 @@ import darkest from '@adobe/spectrum-css-temp/vars/spectrum-darkest.css'; import global from '@adobe/spectrum-css-temp/vars/spectrum-global.css'; import large from '@adobe/spectrum-css-temp/vars/spectrum-large.css'; import medium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css'; -import {Theme} from '@react-types/provider'; +import {Theme} from '@react-spectrum/provider'; export let theme: Theme = { global, diff --git a/packages/@react-spectrum/theme-default/package.json b/packages/@react-spectrum/theme-default/package.json index ec51d027265..612635a660c 100644 --- a/packages/@react-spectrum/theme-default/package.json +++ b/packages/@react-spectrum/theme-default/package.json @@ -40,7 +40,6 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/provider": "^3.8.15", "@swc/helpers": "^0.5.0" }, "devDependencies": { @@ -50,6 +49,7 @@ "access": "public" }, "peerDependencies": { + "@react-spectrum/provider": "^3.10.14", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-spectrum/theme-default/src/index.ts b/packages/@react-spectrum/theme-default/src/index.ts index 39ce13f51ff..60756dc88a2 100644 --- a/packages/@react-spectrum/theme-default/src/index.ts +++ b/packages/@react-spectrum/theme-default/src/index.ts @@ -17,7 +17,7 @@ import global from '@adobe/spectrum-css-temp/vars/spectrum-global.css'; import large from '@adobe/spectrum-css-temp/vars/spectrum-large.css'; import light from '@adobe/spectrum-css-temp/vars/spectrum-light.css'; import medium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css'; -import {Theme} from '@react-types/provider'; +import {Theme} from '@react-spectrum/provider'; export let theme: Theme = { global, diff --git a/packages/@react-spectrum/theme-express/package.json b/packages/@react-spectrum/theme-express/package.json index 4ed2d42e0eb..03619d6af81 100644 --- a/packages/@react-spectrum/theme-express/package.json +++ b/packages/@react-spectrum/theme-express/package.json @@ -41,7 +41,6 @@ }, "dependencies": { "@react-spectrum/theme-default": "^3.5.24", - "@react-types/provider": "^3.8.15", "@swc/helpers": "^0.5.0" }, "devDependencies": { @@ -51,6 +50,7 @@ "access": "public" }, "peerDependencies": { + "@react-spectrum/provider": "^3.10.14", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-spectrum/theme-express/src/index.ts b/packages/@react-spectrum/theme-express/src/index.ts index 4c73b931185..6030746685b 100644 --- a/packages/@react-spectrum/theme-express/src/index.ts +++ b/packages/@react-spectrum/theme-express/src/index.ts @@ -14,7 +14,7 @@ import {theme as defaultTheme} from '@react-spectrum/theme-default'; import express from '@adobe/spectrum-css-temp/vars/express.css'; -import {Theme} from '@react-types/provider'; +import {Theme} from '@react-spectrum/provider'; export let theme: Theme = { ...defaultTheme, diff --git a/packages/@react-spectrum/theme-light/package.json b/packages/@react-spectrum/theme-light/package.json index c23e55f2555..bf870e5d12a 100644 --- a/packages/@react-spectrum/theme-light/package.json +++ b/packages/@react-spectrum/theme-light/package.json @@ -40,7 +40,6 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/provider": "^3.8.15", "@swc/helpers": "^0.5.0" }, "devDependencies": { @@ -50,6 +49,7 @@ "access": "public" }, "peerDependencies": { + "@react-spectrum/provider": "^3.10.14", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-spectrum/theme-light/src/index.ts b/packages/@react-spectrum/theme-light/src/index.ts index e745342da6c..127f019a67c 100644 --- a/packages/@react-spectrum/theme-light/src/index.ts +++ b/packages/@react-spectrum/theme-light/src/index.ts @@ -17,7 +17,7 @@ import global from '@adobe/spectrum-css-temp/vars/spectrum-global.css'; import large from '@adobe/spectrum-css-temp/vars/spectrum-large.css'; import lightest from '@adobe/spectrum-css-temp/vars/spectrum-lightest.css'; import medium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css'; -import {Theme} from '@react-types/provider'; +import {Theme} from '@react-spectrum/provider'; export let theme: Theme = { global, diff --git a/packages/@react-spectrum/tooltip/package.json b/packages/@react-spectrum/tooltip/package.json index acf56e17e0f..2f227f8cd3e 100644 --- a/packages/@react-spectrum/tooltip/package.json +++ b/packages/@react-spectrum/tooltip/package.json @@ -47,9 +47,7 @@ "@react-spectrum/overlays": "^5.9.3", "@react-spectrum/utils": "^3.12.12", "@react-stately/tooltip": "^3.5.11", - "@react-types/overlays": "^3.9.4", "@react-types/shared": "^3.33.1", - "@react-types/tooltip": "^3.5.2", "@spectrum-icons/ui": "^3.6.23", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/tooltip/src/Tooltip.tsx b/packages/@react-spectrum/tooltip/src/Tooltip.tsx index 0dfe754ecff..854fcfd3963 100644 --- a/packages/@react-spectrum/tooltip/src/Tooltip.tsx +++ b/packages/@react-spectrum/tooltip/src/Tooltip.tsx @@ -11,16 +11,35 @@ */ import AlertSmall from '@spectrum-icons/ui/AlertSmall'; +import {AriaTooltipProps, useTooltip} from '@react-aria/tooltip'; import {classNames, createDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMRef, StyleProps} from '@react-types/shared'; import InfoSmall from '@spectrum-icons/ui/InfoSmall'; import {mergeProps} from '@react-aria/utils'; -import React, {useContext, useImperativeHandle, useRef} from 'react'; -import {SpectrumTooltipProps} from '@react-types/tooltip'; +import React, {ReactNode, useContext, useImperativeHandle, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/tooltip/vars.css'; import SuccessSmall from '@spectrum-icons/ui/SuccessSmall'; import {TooltipContext} from './context'; -import {useTooltip} from '@react-aria/tooltip'; + +export interface SpectrumTooltipProps extends AriaTooltipProps, StyleProps { + /** + * The [visual style](https://spectrum.adobe.com/page/tooltip/#Semantic-variants) of the Tooltip. + */ + variant?: 'neutral' | 'positive' | 'negative' | 'info', + + /** + * The placement of the element with respect to its anchor element. + * @default 'top' + */ + placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom', + + /** + * Whether the element is rendered. + */ + showIcon?: boolean, + + children: ReactNode +} let iconMap = { info: InfoSmall, diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx index 9530a2404b0..b211e852859 100644 --- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx +++ b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx @@ -12,13 +12,28 @@ import {FocusableProvider} from '@react-aria/focus'; import {Overlay} from '@react-spectrum/overlays'; +import {Placement, PositionProps, useOverlayPosition} from '@react-aria/overlays'; import React, {JSX, ReactElement, useRef, useState} from 'react'; -import {SpectrumTooltipTriggerProps} from '@react-types/tooltip'; import {TooltipContext} from './context'; +import {TooltipTriggerProps, useTooltipTriggerState} from '@react-stately/tooltip'; import {useLayoutEffect} from '@react-aria/utils'; -import {useOverlayPosition} from '@react-aria/overlays'; import {useTooltipTrigger} from '@react-aria/tooltip'; -import {useTooltipTriggerState} from '@react-stately/tooltip'; + +export interface SpectrumTooltipTriggerProps extends Omit, PositionProps { + children: [ReactElement, ReactElement], + + /** + * The additional offset applied along the main axis between the element and its + * anchor element. + * @default 7 + */ + offset?: number, + /** + * The placement of the tooltip with respect to the trigger. + * @default 'top' + */ + placement?: Placement +} const DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button const DEFAULT_CROSS_OFFSET = 0; diff --git a/packages/@react-spectrum/tooltip/src/context.ts b/packages/@react-spectrum/tooltip/src/context.ts index 1dcecea82f3..a680153bf67 100644 --- a/packages/@react-spectrum/tooltip/src/context.ts +++ b/packages/@react-spectrum/tooltip/src/context.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {PlacementAxis} from '@react-types/overlays'; +import {PlacementAxis} from '@react-aria/overlays'; import React, {HTMLAttributes} from 'react'; import {RefObject, StyleProps} from '@react-types/shared'; import {TooltipTriggerState} from '@react-stately/tooltip'; diff --git a/packages/@react-spectrum/tooltip/src/index.ts b/packages/@react-spectrum/tooltip/src/index.ts index 3f569454ed2..8903e8e6d44 100644 --- a/packages/@react-spectrum/tooltip/src/index.ts +++ b/packages/@react-spectrum/tooltip/src/index.ts @@ -14,4 +14,5 @@ export {Tooltip} from './Tooltip'; export {TooltipTrigger} from './TooltipTrigger'; -export type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-types/tooltip'; +export type {SpectrumTooltipProps} from './Tooltip'; +export type {SpectrumTooltipTriggerProps} from './TooltipTrigger'; diff --git a/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx b/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx index cbb25a33b24..f45b471dace 100644 --- a/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx +++ b/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx @@ -19,8 +19,7 @@ import {Link} from '@react-spectrum/link'; import {Meta, StoryObj} from '@storybook/react'; import React, {useState} from 'react'; import SaveTo from '@spectrum-icons/workflow/SaveTo'; -import {SpectrumTooltipTriggerProps} from '@react-types/tooltip'; -import {Tooltip, TooltipTrigger} from '../src'; +import {SpectrumTooltipTriggerProps, Tooltip, TooltipTrigger} from '../src'; interface TooltipTooltipTriggerProps { variant?: 'neutral' | 'positive' | 'negative' | 'info', diff --git a/packages/@react-spectrum/tree/package.json b/packages/@react-spectrum/tree/package.json index 5633d5d5d16..c95b8e529b2 100644 --- a/packages/@react-spectrum/tree/package.json +++ b/packages/@react-spectrum/tree/package.json @@ -45,7 +45,6 @@ "@react-aria/tree": "^3.1.7", "@react-aria/utils": "^3.33.1", "@react-spectrum/checkbox": "^3.10.7", - "@react-spectrum/text": "^3.5.25", "@react-spectrum/utils": "^3.12.12", "@react-types/shared": "^3.33.1", "@spectrum-icons/ui": "^3.6.23", diff --git a/packages/@react-spectrum/view/package.json b/packages/@react-spectrum/view/package.json index 2b649e45b18..d626b540c15 100644 --- a/packages/@react-spectrum/view/package.json +++ b/packages/@react-spectrum/view/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", "@react-types/shared": "^3.33.1", - "@react-types/view": "^3.4.23", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/view/src/Content.tsx b/packages/@react-spectrum/view/src/Content.tsx index 9d3ed55fceb..1cb83a5c4e6 100644 --- a/packages/@react-spectrum/view/src/Content.tsx +++ b/packages/@react-spectrum/view/src/Content.tsx @@ -11,10 +11,16 @@ */ import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {ContentProps} from '@react-types/view'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; + +export interface ContentProps extends DOMProps, StyleProps { + /** + * Content content. + */ + children: ReactNode +} /** * Content represents the primary content within a Spectrum container. diff --git a/packages/@react-spectrum/view/src/Footer.tsx b/packages/@react-spectrum/view/src/Footer.tsx index 63d44e8d512..263ff225f12 100644 --- a/packages/@react-spectrum/view/src/Footer.tsx +++ b/packages/@react-spectrum/view/src/Footer.tsx @@ -11,10 +11,16 @@ */ import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {FooterProps} from '@react-types/view'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; + +export interface FooterProps extends DOMProps, StyleProps { + /** + * Footer content. + */ + children: ReactNode +} /** * Footer represents a footer within a Spectrum container. diff --git a/packages/@react-spectrum/view/src/Header.tsx b/packages/@react-spectrum/view/src/Header.tsx index 44e81a150ce..0ebc66210c1 100644 --- a/packages/@react-spectrum/view/src/Header.tsx +++ b/packages/@react-spectrum/view/src/Header.tsx @@ -11,10 +11,16 @@ */ import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {HeaderProps} from '@react-types/view'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; + +export interface HeaderProps extends DOMProps, StyleProps { + /** + * Header content. + */ + children: ReactNode +} /** * Header represents a header within a Spectrum container. diff --git a/packages/@react-spectrum/view/src/View.tsx b/packages/@react-spectrum/view/src/View.tsx index 4eb6e29ff48..42d1e16c266 100644 --- a/packages/@react-spectrum/view/src/View.tsx +++ b/packages/@react-spectrum/view/src/View.tsx @@ -11,10 +11,20 @@ */ import {ClearSlots, useDOMRef, useSlotProps, useStyleProps, viewStyleProps} from '@react-spectrum/utils'; -import {ColorVersion, DOMRef} from '@react-types/shared'; +import {ColorVersion, DOMProps, DOMRef, ViewStyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef, ReactElement} from 'react'; -import {ViewProps} from '@react-types/view'; +import React, {forwardRef, JSXElementConstructor, ReactElement, ReactNode} from 'react'; + +export interface ViewProps extends ViewStyleProps, DOMProps { + /** + * The element to render as the node. + */ + elementType?: string | JSXElementConstructor, + /** + * Children to be displayed in the View. + */ + children?: ReactNode +} /** * View is a general purpose container with no specific semantics that can be used for custom styling purposes. diff --git a/packages/@react-spectrum/view/src/index.ts b/packages/@react-spectrum/view/src/index.ts index 12061ec668f..621a3f536fa 100644 --- a/packages/@react-spectrum/view/src/index.ts +++ b/packages/@react-spectrum/view/src/index.ts @@ -14,4 +14,7 @@ export {View} from './View'; export {Content} from './Content'; export {Footer} from './Footer'; export {Header} from './Header'; -export type {ContentProps, FooterProps, HeaderProps, ViewProps} from '@react-types/view'; +export type {ViewProps} from './View'; +export type {ContentProps} from './Content'; +export type {FooterProps} from './Footer'; +export type {HeaderProps} from './Header'; diff --git a/packages/@react-spectrum/well/chromatic/Well.stories.tsx b/packages/@react-spectrum/well/chromatic/Well.stories.tsx index 2c52bc55579..14c84f51449 100644 --- a/packages/@react-spectrum/well/chromatic/Well.stories.tsx +++ b/packages/@react-spectrum/well/chromatic/Well.stories.tsx @@ -12,8 +12,7 @@ import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {SpectrumWellProps} from '@react-types/well'; -import {Well} from '../'; +import {SpectrumWellProps, Well} from '../'; const meta: Meta = { title: 'Well', diff --git a/packages/@react-spectrum/well/package.json b/packages/@react-spectrum/well/package.json index cd96336a89d..8689e6a4d93 100644 --- a/packages/@react-spectrum/well/package.json +++ b/packages/@react-spectrum/well/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.33.1", "@react-spectrum/utils": "^3.12.12", "@react-types/shared": "^3.33.1", - "@react-types/well": "^3.3.23", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/well/src/Well.tsx b/packages/@react-spectrum/well/src/Well.tsx index 63159c60206..932fdc095bd 100644 --- a/packages/@react-spectrum/well/src/Well.tsx +++ b/packages/@react-spectrum/well/src/Well.tsx @@ -10,13 +10,25 @@ * governing permissions and limitations under the License. */ +import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef} from 'react'; -import {SpectrumWellProps} from '@react-types/well'; +import React, {forwardRef, ReactNode} from 'react'; import styles from '@adobe/spectrum-css-temp/components/well/vars.css'; +export interface SpectrumWellProps extends DOMProps, AriaLabelingProps, StyleProps { + /** + * The contents of the Well. + */ + children: ReactNode, + /** + * An accessibility role for the well. Use `'region'` when the contents of the well + * is important enough to be included in the page table of contents, and `'group'` otherwise. + * If a role is provided, then an aria-label or aria-labelledby must also be provided. + */ + role?: 'region' | 'group' +} + /** * A Well is a content container that displays non-editable content separate from other content on the screen. * Often this is used to display preformatted text, such as code/markup examples on a documentation page. diff --git a/packages/@react-spectrum/well/src/index.ts b/packages/@react-spectrum/well/src/index.ts index febb9015bf6..27eadb1e788 100644 --- a/packages/@react-spectrum/well/src/index.ts +++ b/packages/@react-spectrum/well/src/index.ts @@ -11,4 +11,4 @@ */ /// export {Well} from './Well'; -export type {SpectrumWellProps} from '@react-types/well'; +export type {SpectrumWellProps} from './Well'; diff --git a/packages/@react-stately/calendar/package.json b/packages/@react-stately/calendar/package.json index 360a8f490b4..7bdbc388e69 100644 --- a/packages/@react-stately/calendar/package.json +++ b/packages/@react-stately/calendar/package.json @@ -28,7 +28,6 @@ "dependencies": { "@internationalized/date": "^3.12.0", "@react-stately/utils": "^3.11.0", - "@react-types/calendar": "^3.8.3", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/calendar/src/index.ts b/packages/@react-stately/calendar/src/index.ts index dd50969f385..417c7b99688 100644 --- a/packages/@react-stately/calendar/src/index.ts +++ b/packages/@react-stately/calendar/src/index.ts @@ -13,6 +13,6 @@ export {useCalendarState} from './useCalendarState'; export {useRangeCalendarState} from './useRangeCalendarState'; -export type {CalendarStateOptions} from './useCalendarState'; -export type {RangeCalendarStateOptions} from './useRangeCalendarState'; -export type {CalendarState, RangeCalendarState} from './types'; +export type {CalendarProps, CalendarStateOptions} from './useCalendarState'; +export type {DateRange, RangeCalendarProps, RangeCalendarStateOptions} from './useRangeCalendarState'; +export type {CalendarPropsBase, CalendarState, DateValue, PageBehavior, RangeCalendarState} from './types'; diff --git a/packages/@react-stately/calendar/src/types.ts b/packages/@react-stately/calendar/src/types.ts index 839c2528882..37d2543781d 100644 --- a/packages/@react-stately/calendar/src/types.ts +++ b/packages/@react-stately/calendar/src/types.ts @@ -10,9 +10,70 @@ * governing permissions and limitations under the License. */ -import {CalendarDate} from '@internationalized/date'; -import {DateValue} from '@react-types/calendar'; +import {CalendarDate, CalendarDateTime, ZonedDateTime} from '@internationalized/date'; import {RangeValue, ValidationState} from '@react-types/shared'; +import {ReactNode} from 'react'; + +export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; +export type MappedDateValue = + T extends ZonedDateTime ? ZonedDateTime : + T extends CalendarDateTime ? CalendarDateTime : + T extends CalendarDate ? CalendarDate : + never; + +export type PageBehavior = 'single' | 'visible'; +export interface CalendarPropsBase { + /** The minimum allowed date that a user may select. */ + minValue?: DateValue | null, + /** The maximum allowed date that a user may select. */ + maxValue?: DateValue | null, + /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ + isDateUnavailable?: (date: DateValue) => boolean, + /** + * Whether the calendar is disabled. + * @default false + */ + isDisabled?: boolean, + /** + * Whether the calendar value is immutable. + * @default false + */ + isReadOnly?: boolean, + /** + * Whether to automatically focus the calendar when it mounts. + * @default false + */ + autoFocus?: boolean, + /** Controls the currently focused date within the calendar. */ + focusedValue?: DateValue | null, + /** The date that is focused when the calendar first mounts (uncontrolled). */ + defaultFocusedValue?: DateValue | null, + /** Handler that is called when the focused date changes. */ + onFocusChange?: (date: CalendarDate) => void, + /** + * Whether the current selection is valid or invalid according to application logic. + * @deprecated Use `isInvalid` instead. + */ + validationState?: ValidationState, + /** Whether the current selection is invalid according to application logic. */ + isInvalid?: boolean, + /** An error message to display when the selected value is invalid. */ + errorMessage?: ReactNode, + /** + * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. + * @default visible + */ + pageBehavior?: PageBehavior, + /** + * The day that starts the week. + */ + firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat', + /** + * Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. + * @default 'center' + */ + selectionAlignment?: 'start' | 'center' | 'end' +} interface CalendarStateBase { /** Whether the calendar is disabled. */ diff --git a/packages/@react-stately/calendar/src/useCalendarState.ts b/packages/@react-stately/calendar/src/useCalendarState.ts index 5286f894682..d29c81fffb7 100644 --- a/packages/@react-stately/calendar/src/useCalendarState.ts +++ b/packages/@react-stately/calendar/src/useCalendarState.ts @@ -29,11 +29,12 @@ import { toCalendarDate, today } from '@internationalized/date'; -import {CalendarProps, DateValue, MappedDateValue} from '@react-types/calendar'; -import {CalendarState} from './types'; +import {CalendarPropsBase, CalendarState, DateValue, MappedDateValue} from './types'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useState} from 'react'; -import {ValidationState} from '@react-types/shared'; +import {ValidationState, ValueBase} from '@react-types/shared'; + +export interface CalendarProps extends CalendarPropsBase, ValueBase> {} export interface CalendarStateOptions extends CalendarProps { /** The locale to display and edit the value according to. */ diff --git a/packages/@react-stately/calendar/src/useRangeCalendarState.ts b/packages/@react-stately/calendar/src/useRangeCalendarState.ts index 305d90df227..58c889c54fa 100644 --- a/packages/@react-stately/calendar/src/useRangeCalendarState.ts +++ b/packages/@react-stately/calendar/src/useRangeCalendarState.ts @@ -12,13 +12,21 @@ import {alignCenter, constrainValue, isInvalid, previousAvailableDate} from './utils'; import {Calendar, CalendarDate, CalendarIdentifier, DateDuration, GregorianCalendar, isEqualDay, maxDate, minDate, toCalendar, toCalendarDate} from '@internationalized/date'; -import {CalendarState, RangeCalendarState} from './types'; -import {DateValue, MappedDateValue, RangeCalendarProps} from '@react-types/calendar'; -import {RangeValue, ValidationState} from '@react-types/shared'; +import {CalendarPropsBase, CalendarState, DateValue, MappedDateValue, RangeCalendarState} from './types'; +import {RangeValue, ValidationState, ValueBase} from '@react-types/shared'; import {useCalendarState} from './useCalendarState'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useRef, useState} from 'react'; +export type DateRange = RangeValue | null; +export interface RangeCalendarProps extends CalendarPropsBase, ValueBase | null, RangeValue>> { + /** + * When combined with `isDateUnavailable`, determines whether non-contiguous ranges, + * i.e. ranges containing unavailable dates, may be selected. + */ + allowsNonContiguousRanges?: boolean +} + export interface RangeCalendarStateOptions extends RangeCalendarProps { /** The locale to display and edit the value according to. */ locale: string, diff --git a/packages/@react-stately/calendar/src/utils.ts b/packages/@react-stately/calendar/src/utils.ts index d9bcdeee614..36408bd6257 100644 --- a/packages/@react-stately/calendar/src/utils.ts +++ b/packages/@react-stately/calendar/src/utils.ts @@ -19,7 +19,7 @@ import { startOfYear, toCalendarDate } from '@internationalized/date'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from './types'; export function isInvalid(date: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null): boolean { return (minValue != null && date.compare(minValue) < 0) || diff --git a/packages/@react-stately/checkbox/package.json b/packages/@react-stately/checkbox/package.json index 5984aa94d44..57cf369011a 100644 --- a/packages/@react-stately/checkbox/package.json +++ b/packages/@react-stately/checkbox/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-stately/form": "^3.2.4", "@react-stately/utils": "^3.11.0", - "@react-types/checkbox": "^3.10.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/checkbox/src/index.ts b/packages/@react-stately/checkbox/src/index.ts index ab90bff0661..9e1b002fa5f 100644 --- a/packages/@react-stately/checkbox/src/index.ts +++ b/packages/@react-stately/checkbox/src/index.ts @@ -12,5 +12,4 @@ export {useCheckboxGroupState} from './useCheckboxGroupState'; -export type {CheckboxGroupProps} from '@react-types/checkbox'; -export type {CheckboxGroupState} from './useCheckboxGroupState'; +export type {CheckboxGroupProps, CheckboxGroupState} from './useCheckboxGroupState'; diff --git a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts index 3a06fdd83b4..accbdbeaefb 100644 --- a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts +++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts @@ -10,11 +10,12 @@ * governing permissions and limitations under the License. */ -import {CheckboxGroupProps} from '@react-types/checkbox'; import {FormValidationState, mergeValidation, useFormValidationState} from '@react-stately/form'; +import {HelpTextProps, InputBase, InputDOMProps, LabelableProps, Validation, ValidationResult, ValidationState, ValueBase} from '@react-types/shared'; import {useControlledState} from '@react-stately/utils'; import {useRef, useState} from 'react'; -import {ValidationResult, ValidationState} from '@react-types/shared'; + +export interface CheckboxGroupProps extends ValueBase, Pick, InputBase, LabelableProps, HelpTextProps, Validation {} export interface CheckboxGroupState extends FormValidationState { /** Current selected values. */ diff --git a/packages/@react-stately/color/package.json b/packages/@react-stately/color/package.json index 6b76a7b0f9c..7c04c2c2dc2 100644 --- a/packages/@react-stately/color/package.json +++ b/packages/@react-stately/color/package.json @@ -32,7 +32,6 @@ "@react-stately/numberfield": "^3.11.0", "@react-stately/slider": "^3.7.5", "@react-stately/utils": "^3.11.0", - "@react-types/color": "^3.1.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/color/src/Color.ts b/packages/@react-stately/color/src/Color.ts index bda7629642e..86b2689efa7 100644 --- a/packages/@react-stately/color/src/Color.ts +++ b/packages/@react-stately/color/src/Color.ts @@ -11,7 +11,7 @@ */ import {clamp, toFixedNumber} from '@react-stately/utils'; -import {ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace, Color as IColor} from '@react-types/color'; +import {ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace, Color as IColor} from './types'; // @ts-ignore import intlMessages from '../intl/*.json'; import {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string'; diff --git a/packages/@react-stately/color/src/index.ts b/packages/@react-stately/color/src/index.ts index c07be85011e..9e4467717f5 100644 --- a/packages/@react-stately/color/src/index.ts +++ b/packages/@react-stately/color/src/index.ts @@ -10,10 +10,10 @@ * governing permissions and limitations under the License. */ -export type {ColorAreaState} from './useColorAreaState'; -export type {ColorSliderState} from './useColorSliderState'; -export type {ColorWheelState} from './useColorWheelState'; -export type {ColorFieldState} from './useColorFieldState'; +export type {ColorAreaProps, ColorAreaState} from './useColorAreaState'; +export type {ColorSliderProps, ColorSliderState} from './useColorSliderState'; +export type {ColorWheelProps, ColorWheelState} from './useColorWheelState'; +export type {ColorFieldProps, ColorFieldState} from './useColorFieldState'; export type {ColorChannelFieldProps, ColorChannelFieldState, ColorChannelFieldStateOptions} from './useColorChannelFieldState'; export type {ColorPickerProps, ColorPickerState} from './useColorPickerState'; @@ -25,5 +25,5 @@ export {useColorFieldState} from './useColorFieldState'; export {useColorChannelFieldState} from './useColorChannelFieldState'; export {useColorPickerState} from './useColorPickerState'; -export type {Color, ColorChannel, ColorFormat, ColorSpace, ColorAreaProps, ColorFieldProps, ColorWheelProps} from '@react-types/color'; +export type {Color, ColorChannel, ColorFormat, ColorSpace, ColorAxes, ColorChannelRange} from './types'; export type {ColorSliderStateOptions} from './useColorSliderState'; diff --git a/packages/@react-stately/color/src/types.ts b/packages/@react-stately/color/src/types.ts new file mode 100644 index 00000000000..27b34eb2d4a --- /dev/null +++ b/packages/@react-stately/color/src/types.ts @@ -0,0 +1,79 @@ +/** A list of supported color formats. */ +export type ColorFormat = 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsb' | 'hsba'; + +export type ColorSpace = 'rgb' | 'hsl' | 'hsb'; + +/** A list of color channels. */ +export type ColorChannel = 'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha'; + +export type ColorAxes = {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel}; + +export interface ColorChannelRange { + /** The minimum value of the color channel. */ + minValue: number, + /** The maximum value of the color channel. */ + maxValue: number, + /** The step value of the color channel, used when incrementing and decrementing. */ + step: number, + /** The page step value of the color channel, used when incrementing and decrementing. */ + pageSize: number +} + +/** Represents a color value. */ +export interface Color { + /** Converts the color to the given color format, and returns a new Color object. */ + toFormat(format: ColorFormat): Color, + /** Converts the color to a string in the given format. */ + toString(format?: ColorFormat | 'css'): string, + /** Returns a duplicate of the color value. */ + clone(): Color, + /** Converts the color to hex, and returns an integer representation. */ + toHexInt(): number, + /** + * Returns the numeric value for a given channel. + * Throws an error if the channel is unsupported in the current color format. + */ + getChannelValue(channel: ColorChannel): number, + /** + * Sets the numeric value for a given channel, and returns a new Color object. + * Throws an error if the channel is unsupported in the current color format. + */ + withChannelValue(channel: ColorChannel, value: number): Color, + /** + * Returns the minimum, maximum, and step values for a given channel. + */ + getChannelRange(channel: ColorChannel): ColorChannelRange, + /** + * Returns a localized color channel name for a given channel and locale, + * for use in visual or accessibility labels. + */ + getChannelName(channel: ColorChannel, locale: string): string, + /** + * Returns the number formatting options for the given channel. + */ + getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions, + /** + * Formats the numeric value for a given channel for display according to the provided locale. + */ + formatChannelValue(channel: ColorChannel, locale: string): string, + /** + * Returns the color space, 'rgb', 'hsb' or 'hsl', for the current color. + */ + getColorSpace(): ColorSpace, + /** + * Returns the color space axes, xChannel, yChannel, zChannel. + */ + getColorSpaceAxes(xyChannels: {xChannel?: ColorChannel, yChannel?: ColorChannel}): ColorAxes, + /** + * Returns an array of the color channels within the current color space space. + */ + getColorChannels(): [ColorChannel, ColorChannel, ColorChannel], + /** + * Returns a localized name for the color, for use in visual or accessibility labels. + */ + getColorName(locale: string): string, + /** + * Returns a localized name for the hue, for use in visual or accessibility labels. + */ + getHueName(locale: string): string +} diff --git a/packages/@react-stately/color/src/useColor.ts b/packages/@react-stately/color/src/useColor.ts index 0f1bd3a6eda..c010d6a602b 100644 --- a/packages/@react-stately/color/src/useColor.ts +++ b/packages/@react-stately/color/src/useColor.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {Color} from '@react-types/color'; +import {Color} from './types'; import {parseColor} from './Color'; import {useMemo} from 'react'; diff --git a/packages/@react-stately/color/src/useColorAreaState.ts b/packages/@react-stately/color/src/useColorAreaState.ts index 07884c3a379..a119d1547f2 100644 --- a/packages/@react-stately/color/src/useColorAreaState.ts +++ b/packages/@react-stately/color/src/useColorAreaState.ts @@ -11,9 +11,28 @@ */ import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils'; -import {Color, ColorAreaProps, ColorChannel} from '@react-types/color'; +import {Color, ColorChannel, ColorSpace} from './types'; import {normalizeColor, parseColor} from './Color'; import {useMemo, useRef, useState} from 'react'; +import {ValueBase} from '@react-types/shared'; + +export interface ColorAreaProps extends Omit, 'onChange'> { + /** + * The color space that the color area operates in. The `xChannel` and `yChannel` must be in this color space. + * If not provided, this defaults to the color space of the `color` or `defaultColor` value. + */ + colorSpace?: ColorSpace, + /** Color channel for the horizontal axis. */ + xChannel?: ColorChannel, + /** Color channel for the vertical axis. */ + yChannel?: ColorChannel, + /** Whether the ColorArea is disabled. */ + isDisabled?: boolean, + /** Handler that is called when the value changes, as the user drags. */ + onChange?: (value: Color) => void, + /** Handler that is called when the user stops dragging. */ + onChangeEnd?: (value: Color) => void +} export interface ColorAreaState { /** The current color value displayed by the color area. */ diff --git a/packages/@react-stately/color/src/useColorChannelFieldState.ts b/packages/@react-stately/color/src/useColorChannelFieldState.ts index 05d10d5dd59..9949ea882cc 100644 --- a/packages/@react-stately/color/src/useColorChannelFieldState.ts +++ b/packages/@react-stately/color/src/useColorChannelFieldState.ts @@ -1,4 +1,5 @@ -import {Color, ColorChannel, ColorFieldProps, ColorSpace} from '@react-types/color'; +import {Color, ColorChannel, ColorSpace} from './types'; +import {ColorFieldProps} from './useColorFieldState'; import {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield'; import {useColor} from './useColor'; import {useControlledState} from '@react-stately/utils'; diff --git a/packages/@react-stately/color/src/useColorFieldState.ts b/packages/@react-stately/color/src/useColorFieldState.ts index 94371a9bf1b..72a5532d5f8 100644 --- a/packages/@react-stately/color/src/useColorFieldState.ts +++ b/packages/@react-stately/color/src/useColorFieldState.ts @@ -10,13 +10,19 @@ * governing permissions and limitations under the License. */ -import {Color, ColorFieldProps} from '@react-types/color'; +import {Color} from './types'; +import {FocusableProps, HelpTextProps, InputBase, LabelableProps, TextInputBase, Validation, ValueBase} from '@react-types/shared'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {parseColor} from './Color'; import {useColor} from './useColor'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useState} from 'react'; +export interface ColorFieldProps extends Omit, 'onChange'>, InputBase, Validation, FocusableProps, TextInputBase, LabelableProps, HelpTextProps { + /** Handler that is called when the value changes. */ + onChange?: (color: Color | null) => void +} + export interface ColorFieldState extends FormValidationState { /** * The current text value of the input. Updated as the user types, diff --git a/packages/@react-stately/color/src/useColorPickerState.ts b/packages/@react-stately/color/src/useColorPickerState.ts index 6592a513c35..6bc7a8bd7e2 100644 --- a/packages/@react-stately/color/src/useColorPickerState.ts +++ b/packages/@react-stately/color/src/useColorPickerState.ts @@ -1,4 +1,4 @@ -import {Color} from '@react-types/color'; +import {Color} from './types'; import {parseColor} from './Color'; import {useColor} from './useColor'; import {useControlledState} from '@react-stately/utils'; diff --git a/packages/@react-stately/color/src/useColorSliderState.ts b/packages/@react-stately/color/src/useColorSliderState.ts index 5c9bbf8feb3..a2ae4ff1d85 100644 --- a/packages/@react-stately/color/src/useColorSliderState.ts +++ b/packages/@react-stately/color/src/useColorSliderState.ts @@ -10,12 +10,26 @@ * governing permissions and limitations under the License. */ -import {Color, ColorSliderProps} from '@react-types/color'; +import {Color, ColorChannel, ColorSpace} from './types'; import {normalizeColor, parseColor} from './Color'; -import {SliderState, useSliderState} from '@react-stately/slider'; +import {SliderProps, SliderState, useSliderState} from '@react-stately/slider'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useState} from 'react'; +export interface ColorSliderProps extends Omit, 'minValue' | 'maxValue' | 'step' | 'pageSize' | 'onChange' | 'onChangeEnd'> { + /** + * The color space that the slider operates in. The `channel` must be in this color space. + * If not provided, this defaults to the color space of the `color` or `defaultColor` value. + */ + colorSpace?: ColorSpace, + /** The color channel that the slider manipulates. */ + channel: ColorChannel, + /** Handler that is called when the value changes, as the user drags. */ + onChange?: (value: Color) => void, + /** Handler that is called when the user stops dragging. */ + onChangeEnd?: (value: Color) => void +} + export interface ColorSliderState extends SliderState { /** The current color value represented by the color slider. */ readonly value: Color, diff --git a/packages/@react-stately/color/src/useColorWheelState.ts b/packages/@react-stately/color/src/useColorWheelState.ts index 9d9f34bc69e..9e0e3fdca24 100644 --- a/packages/@react-stately/color/src/useColorWheelState.ts +++ b/packages/@react-stately/color/src/useColorWheelState.ts @@ -10,10 +10,25 @@ * governing permissions and limitations under the License. */ -import {Color, ColorWheelProps} from '@react-types/color'; +import {Color} from './types'; import {normalizeColor, parseColor} from './Color'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useRef, useState} from 'react'; +import {ValueBase} from '@react-types/shared'; + +export interface ColorWheelProps extends Omit, 'onChange'> { + /** Whether the ColorWheel is disabled. */ + isDisabled?: boolean, + /** Handler that is called when the value changes, as the user drags. */ + onChange?: (value: Color) => void, + /** Handler that is called when the user stops dragging. */ + onChangeEnd?: (value: Color) => void, + /** + * The default value (uncontrolled). + * @default 'hsl(0, 100%, 50%)' + */ + defaultValue?: string | Color +} export interface ColorWheelState { /** The current color value represented by the color wheel. */ diff --git a/packages/@react-stately/color/test/Color.test.tsx b/packages/@react-stately/color/test/Color.test.tsx index 119fa12c9a3..a0bc03fa694 100644 --- a/packages/@react-stately/color/test/Color.test.tsx +++ b/packages/@react-stately/color/test/Color.test.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColorFormat} from '@react-types/color'; +import {ColorFormat} from '@react-stately/color'; import fc from 'fast-check'; import {getDeltaE00} from 'delta-e'; import {parseColor} from '../src/Color'; diff --git a/packages/@react-stately/combobox/package.json b/packages/@react-stately/combobox/package.json index c20356269c1..266d8b27374 100644 --- a/packages/@react-stately/combobox/package.json +++ b/packages/@react-stately/combobox/package.json @@ -31,7 +31,6 @@ "@react-stately/list": "^3.13.4", "@react-stately/overlays": "^3.6.23", "@react-stately/utils": "^3.11.0", - "@react-types/combobox": "^3.14.0", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/combobox/src/index.ts b/packages/@react-stately/combobox/src/index.ts index afc3f8eacf7..e553547fdb5 100644 --- a/packages/@react-stately/combobox/src/index.ts +++ b/packages/@react-stately/combobox/src/index.ts @@ -12,4 +12,4 @@ export {useComboBoxState} from './useComboBoxState'; -export type {ComboBoxStateOptions, ComboBoxState} from './useComboBoxState'; +export type {ComboBoxProps, ComboBoxStateOptions, ComboBoxState, ComboBoxValidationValue, MenuTriggerAction, SelectionMode} from './useComboBoxState'; diff --git a/packages/@react-stately/combobox/src/useComboBoxState.ts b/packages/@react-stately/combobox/src/useComboBoxState.ts index accf5a8b002..b09765212dd 100644 --- a/packages/@react-stately/combobox/src/useComboBoxState.ts +++ b/packages/@react-stately/combobox/src/useComboBoxState.ts @@ -10,8 +10,7 @@ * governing permissions and limitations under the License. */ -import {ChangeValueType, ComboBoxProps, MenuTriggerAction, SelectionMode, ValueType} from '@react-types/combobox'; -import {Collection, CollectionStateBase, FocusStrategy, Key, Node, Selection} from '@react-types/shared'; +import {Collection, CollectionBase, CollectionStateBase, FocusableProps, FocusStrategy, HelpTextProps, InputBase, Key, LabelableProps, Node, Selection, TextInputBase, Validation, ValueBase} from '@react-types/shared'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {getChildNodes} from '@react-stately/collections'; import {ListCollection, ListState, useListState} from '@react-stately/list'; @@ -19,6 +18,71 @@ import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overla import {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {useControlledState} from '@react-stately/utils'; +export type MenuTriggerAction = 'focus' | 'input' | 'manual'; +export type SelectionMode = 'single' | 'multiple'; +export type ValueType = M extends 'single' ? Key | null : Key[]; +export type ChangeValueType = M extends 'single' ? Key | null : Key[]; +type ValidationType = M extends 'single' ? Key | null : Key[]; + +export interface ComboBoxValidationValue { + /** + * The selected key in the ComboBox. + * @deprecated + */ + selectedKey: Key | null, + /** The keys of the currently selected items. */ + value: ValidationType, + /** The value of the ComboBox input. */ + inputValue: string +} + +export interface ComboBoxProps extends CollectionBase, InputBase, ValueBase, ChangeValueType>, TextInputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps { + /** The list of ComboBox items (uncontrolled). */ + defaultItems?: Iterable, + /** The list of ComboBox items (controlled). */ + items?: Iterable, + /** Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. */ + onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void, + /** + * Whether single or multiple selection is enabled. + * @default 'single' + */ + selectionMode?: M, + /** + * The currently selected key in the collection (controlled). + * @deprecated + */ + selectedKey?: Key | null, + /** + * The initial selected key in the collection (uncontrolled). + * @deprecated + */ + defaultSelectedKey?: Key | null, + /** + * Handler that is called when the selection changes. + * @deprecated + */ + onSelectionChange?: (key: Key | null) => void, + /** The value of the ComboBox input (controlled). */ + inputValue?: string, + /** The default value of the ComboBox input (uncontrolled). */ + defaultInputValue?: string, + /** Handler that is called when the ComboBox input value changes. */ + onInputChange?: (value: string) => void, + /** Whether the ComboBox allows a non-item matching input value to be set. */ + allowsCustomValue?: boolean, + // /** + // * Whether the Combobox should only suggest matching options or autocomplete the field with the nearest matching option. + // * @default 'suggest' + // */ + // completionMode?: 'suggest' | 'complete', + /** + * The interaction required to display the ComboBox menu. + * @default 'input' + */ + menuTrigger?: MenuTriggerAction +} + export interface ComboBoxState extends ListState, OverlayTriggerState, FormValidationState { /** * The key for the first selected item. diff --git a/packages/@react-stately/datepicker/package.json b/packages/@react-stately/datepicker/package.json index d831e25fa24..8387d8300f2 100644 --- a/packages/@react-stately/datepicker/package.json +++ b/packages/@react-stately/datepicker/package.json @@ -29,10 +29,10 @@ "@internationalized/date": "^3.12.0", "@internationalized/number": "^3.6.5", "@internationalized/string": "^3.2.7", + "@react-stately/calendar": "^3.9.3", "@react-stately/form": "^3.2.4", "@react-stately/overlays": "^3.6.23", "@react-stately/utils": "^3.11.0", - "@react-types/datepicker": "^3.13.5", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/datepicker/src/IncompleteDate.ts b/packages/@react-stately/datepicker/src/IncompleteDate.ts index 35fd7bbd6a9..bac1c78c542 100644 --- a/packages/@react-stately/datepicker/src/IncompleteDate.ts +++ b/packages/@react-stately/datepicker/src/IncompleteDate.ts @@ -11,7 +11,7 @@ */ import {AnyDateTime, Calendar, CalendarDate, ZonedDateTime} from '@internationalized/date'; -import {DateValue} from '@react-types/datepicker'; +import {DateValue} from './types'; import {SegmentType} from './useDateFieldState'; type HourCycle = 'h12' | 'h11' | 'h23' | 'h24'; diff --git a/packages/@react-stately/datepicker/src/index.ts b/packages/@react-stately/datepicker/src/index.ts index 73547827b59..a8059e8bcb6 100644 --- a/packages/@react-stately/datepicker/src/index.ts +++ b/packages/@react-stately/datepicker/src/index.ts @@ -20,3 +20,4 @@ export type {DatePickerStateOptions, DatePickerState} from './useDatePickerState export type {DateRangePickerStateOptions, DateRangePickerState} from './useDateRangePickerState'; export type {TimeFieldStateOptions, TimeFieldState} from './useTimeFieldState'; export type {FormatterOptions} from './utils'; +export type {DateFieldProps, DatePickerProps, DateRange, DateRangePickerProps, DateValue, Granularity, MappedDateValue, MappedTimeValue, TimePickerProps, TimeValue} from './types'; diff --git a/packages/@react-stately/datepicker/src/types.ts b/packages/@react-stately/datepicker/src/types.ts new file mode 100644 index 00000000000..463f60dcfa4 --- /dev/null +++ b/packages/@react-stately/datepicker/src/types.ts @@ -0,0 +1,115 @@ +/* + * Copyright 2026 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from '@internationalized/date'; +import {FocusableProps, HelpTextProps, InputBase, LabelableProps, RangeValue, Validation, ValueBase} from '@react-types/shared'; +import {OverlayTriggerProps} from '@react-stately/overlays'; +import {PageBehavior} from '@react-stately/calendar'; + +export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; +export type DateRange = RangeValue; +export type MappedDateValue = + T extends ZonedDateTime ? ZonedDateTime : + T extends CalendarDateTime ? CalendarDateTime : + T extends CalendarDate ? CalendarDate : + never; + +export type TimeValue = Time | CalendarDateTime | ZonedDateTime; +export type MappedTimeValue = + T extends ZonedDateTime ? ZonedDateTime : + T extends CalendarDateTime ? CalendarDateTime : + T extends Time ? Time : + never; + +export type Granularity = 'day' | 'hour' | 'minute' | 'second'; +interface DateFieldBase extends InputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps { + /** The minimum allowed date that a user may select. */ + minValue?: DateValue | null, + /** The maximum allowed date that a user may select. */ + maxValue?: DateValue | null, + /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ + isDateUnavailable?: (date: DateValue) => boolean, + /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */ + placeholderValue?: T | null, + /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ + hourCycle?: 12 | 24, + /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */ + granularity?: Granularity, + /** + * Whether to hide the time zone abbreviation. + * @default false + */ + hideTimeZone?: boolean, + /** + * Whether to always show leading zeros in the month, day, and hour fields. + * By default, this is determined by the user's locale. + */ + shouldForceLeadingZeros?: boolean +} + +export interface DateFieldProps extends DateFieldBase, ValueBase | null> {} + +interface DatePickerBase extends DateFieldBase, OverlayTriggerProps { + /** + * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. + * @default visible + */ + pageBehavior?: PageBehavior, + /** + * The day that starts the week. + */ + firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' +} + +export interface DatePickerProps extends DatePickerBase, ValueBase | null> {} + +export interface DateRangePickerProps extends Omit, 'validate'>, Validation>>, ValueBase | null, RangeValue> | null> { + /** + * When combined with `isDateUnavailable`, determines whether non-contiguous ranges, + * i.e. ranges containing unavailable dates, may be selected. + */ + allowsNonContiguousRanges?: boolean, + /** + * The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + startName?: string, + /** + * The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + endName?: string +} + +export interface TimePickerProps extends InputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps, ValueBase | null> { + /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ + hourCycle?: 12 | 24, + /** + * Determines the smallest unit that is displayed in the time picker. + * @default 'minute' + */ + granularity?: 'hour' | 'minute' | 'second', + /** Whether to hide the time zone abbreviation. */ + hideTimeZone?: boolean, + /** + * Whether to always show leading zeros in the hour field. + * By default, this is determined by the user's locale. + */ + shouldForceLeadingZeros?: boolean, + /** + * A placeholder time that influences the format of the placeholder shown when no value is selected. + * Defaults to 12:00 AM or 00:00 depending on the hour cycle. + */ + placeholderValue?: T, + /** The minimum allowed time that a user may select. */ + minValue?: TimeValue | null, + /** The maximum allowed time that a user may select. */ + maxValue?: TimeValue | null +} diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts index c2beec0aec5..ab090322838 100644 --- a/packages/@react-stately/datepicker/src/useDateFieldState.ts +++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts @@ -12,7 +12,7 @@ import {Calendar, CalendarIdentifier, DateFormatter, GregorianCalendar, isEqualCalendar, toCalendar} from '@internationalized/date'; import {convertValue, createPlaceholderDate, FieldOptions, FormatterOptions, getFormatOptions, getValidationResult, useDefaultProps} from './utils'; -import {DatePickerProps, DateValue, Granularity, MappedDateValue} from '@react-types/datepicker'; +import {DatePickerProps, DateValue, Granularity, MappedDateValue} from './types'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {getPlaceholder} from './placeholders'; import {IncompleteDate} from './IncompleteDate'; diff --git a/packages/@react-stately/datepicker/src/useDatePickerState.ts b/packages/@react-stately/datepicker/src/useDatePickerState.ts index ad1506bebf4..8da57a4d418 100644 --- a/packages/@react-stately/datepicker/src/useDatePickerState.ts +++ b/packages/@react-stately/datepicker/src/useDatePickerState.ts @@ -11,7 +11,7 @@ */ import {CalendarDate, DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date'; -import {DatePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from '@react-types/datepicker'; +import {DatePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from './types'; import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getValidationResult, useDefaultProps} from './utils'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts index 18b1231491d..614f8f29a42 100644 --- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts +++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts @@ -12,7 +12,7 @@ import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date'; -import {DateRange, DateRangePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from '@react-types/datepicker'; +import {DateRange, DateRangePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from './types'; import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getRangeValidationResult, useDefaultProps} from './utils'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; diff --git a/packages/@react-stately/datepicker/src/useTimeFieldState.ts b/packages/@react-stately/datepicker/src/useTimeFieldState.ts index f3c393a8202..a72ed77dd2e 100644 --- a/packages/@react-stately/datepicker/src/useTimeFieldState.ts +++ b/packages/@react-stately/datepicker/src/useTimeFieldState.ts @@ -11,7 +11,7 @@ */ import {DateFieldState, useDateFieldState} from '.'; -import {DateValue, MappedTimeValue, TimePickerProps, TimeValue} from '@react-types/datepicker'; +import {DateValue, MappedTimeValue, TimePickerProps, TimeValue} from './types'; import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime, toZoned} from '@internationalized/date'; import {useCallback, useMemo} from 'react'; import {useControlledState} from '@react-stately/utils'; diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts index fda08dcd123..642a85cb262 100644 --- a/packages/@react-stately/datepicker/src/utils.ts +++ b/packages/@react-stately/datepicker/src/utils.ts @@ -11,7 +11,7 @@ */ import {Calendar, DateFormatter, getLocalTimeZone, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date'; -import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker'; +import {DatePickerProps, DateValue, Granularity, TimeValue} from './types'; // @ts-ignore import i18nMessages from '../intl/*.json'; import {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string'; diff --git a/packages/@react-stately/grid/package.json b/packages/@react-stately/grid/package.json index 833a9164d6e..fac63e096f1 100644 --- a/packages/@react-stately/grid/package.json +++ b/packages/@react-stately/grid/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-stately/collections": "^3.12.10", "@react-stately/selection": "^3.20.9", - "@react-types/grid": "^3.3.8", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/grid/src/GridCollection.ts b/packages/@react-stately/grid/src/GridCollection.ts index cb9714305ba..fa3f2ec46aa 100644 --- a/packages/@react-stately/grid/src/GridCollection.ts +++ b/packages/@react-stately/grid/src/GridCollection.ts @@ -10,8 +10,35 @@ * governing permissions and limitations under the License. */ -import {GridNode, GridRow, GridCollection as IGridCollection} from '@react-types/grid'; -import {Key} from '@react-types/shared'; +import {Collection, Key, Node} from '@react-types/shared'; + +export interface IGridCollection extends Collection> { + /** The number of columns in the grid. */ + columnCount: number, + /** A list of rows in the grid. */ + rows: GridNode[] +} + +export interface GridRow extends Partial> { + key?: Key, + type: string, + childNodes: Iterable> +} + +export interface GridNode extends Node { + column?: GridNode, + /** + * The number of columns spanned by this cell. Use `colSpan` instead. + * @deprecated + */ + colspan?: number, + /** The number of columns spanned by this cell. */ + colSpan?: number | null, + /** The column index of this cell, accounting for any colSpans. */ + colIndex?: number | null, + /** The index of this node within its parent, ignoring sibling nodes that aren't of the same type. */ + indexOfType?: number +} interface GridCollectionOptions { columnCount: number, diff --git a/packages/@react-stately/grid/src/index.ts b/packages/@react-stately/grid/src/index.ts index ed37d6980ed..e468070a434 100644 --- a/packages/@react-stately/grid/src/index.ts +++ b/packages/@react-stately/grid/src/index.ts @@ -14,3 +14,4 @@ export {useGridState} from './useGridState'; export {GridCollection} from './GridCollection'; export type {GridStateOptions, GridState} from './useGridState'; +export type {IGridCollection, GridNode, GridRow} from './GridCollection'; diff --git a/packages/@react-stately/grid/src/useGridState.ts b/packages/@react-stately/grid/src/useGridState.ts index 818c23391cb..ac9f99f8410 100644 --- a/packages/@react-stately/grid/src/useGridState.ts +++ b/packages/@react-stately/grid/src/useGridState.ts @@ -1,10 +1,10 @@ import {getChildNodes, getFirstItem, getLastItem} from '@react-stately/collections'; -import {GridCollection, GridNode} from '@react-types/grid'; +import {GridNode, IGridCollection} from './GridCollection'; import {Key} from '@react-types/shared'; import {MultipleSelectionState, MultipleSelectionStateProps, SelectionManager, useMultipleSelectionState} from '@react-stately/selection'; import {useEffect, useMemo, useRef} from 'react'; -export interface GridState> { +export interface GridState> { collection: C, /** A set of keys for rows that are disabled. */ disabledKeys: Set, @@ -14,7 +14,7 @@ export interface GridState> { isKeyboardNavigationDisabled: boolean } -export interface GridStateOptions> extends MultipleSelectionStateProps { +export interface GridStateOptions> extends MultipleSelectionStateProps { collection: C, disabledKeys?: Iterable, focusMode?: 'row' | 'cell', @@ -25,7 +25,7 @@ export interface GridStateOptions> extends Multip /** * Provides state management for a grid component. Handles row selection and focusing a grid cell's focusable child if applicable. */ -export function useGridState>(props: GridStateOptions): GridState { +export function useGridState>(props: GridStateOptions): GridState { let {collection, focusMode} = props; // eslint-disable-next-line react-hooks/rules-of-hooks let selectionState = props.UNSAFE_selectionState || useMultipleSelectionState(props); diff --git a/packages/@react-stately/layout/package.json b/packages/@react-stately/layout/package.json index 7eddfff2388..bda7d2b5f8e 100644 --- a/packages/@react-stately/layout/package.json +++ b/packages/@react-stately/layout/package.json @@ -27,11 +27,10 @@ }, "dependencies": { "@react-stately/collections": "^3.12.10", + "@react-stately/grid": "^3.11.9", "@react-stately/table": "^3.15.4", "@react-stately/virtualizer": "^4.4.6", - "@react-types/grid": "^3.3.8", "@react-types/shared": "^3.33.1", - "@react-types/table": "^3.13.6", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts index 87d666fd6c5..69a11d45148 100644 --- a/packages/@react-stately/layout/src/TableLayout.ts +++ b/packages/@react-stately/layout/src/TableLayout.ts @@ -12,11 +12,10 @@ import {DropTarget, ItemDropTarget, Key} from '@react-types/shared'; import {getChildNodes, getLastItem} from '@react-stately/collections'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {InvalidationContext, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer'; import {LayoutNode, ListLayout, ListLayoutOptions} from './ListLayout'; -import {TableCollection} from '@react-types/table'; -import {TableColumnLayout} from '@react-stately/table'; +import {ITableCollection as TableCollection, TableColumnLayout} from '@react-stately/table'; export interface TableLayoutProps extends ListLayoutOptions { columnWidths?: Map diff --git a/packages/@react-stately/menu/package.json b/packages/@react-stately/menu/package.json index 5705bffa7ce..b61d206d737 100644 --- a/packages/@react-stately/menu/package.json +++ b/packages/@react-stately/menu/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-stately/overlays": "^3.6.23", - "@react-types/menu": "^3.10.7", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/menu/src/index.ts b/packages/@react-stately/menu/src/index.ts index e440397d8ff..84be261e994 100644 --- a/packages/@react-stately/menu/src/index.ts +++ b/packages/@react-stately/menu/src/index.ts @@ -13,6 +13,5 @@ export {useMenuTriggerState} from './useMenuTriggerState'; export {useSubmenuTriggerState} from './useSubmenuTriggerState'; -export type {MenuTriggerProps} from '@react-types/menu'; -export type {MenuTriggerState, RootMenuTriggerState} from './useMenuTriggerState'; +export type {MenuTriggerProps, MenuTriggerType, MenuTriggerState, RootMenuTriggerState} from './useMenuTriggerState'; export type {SubmenuTriggerProps, SubmenuTriggerState} from './useSubmenuTriggerState'; diff --git a/packages/@react-stately/menu/src/useMenuTriggerState.ts b/packages/@react-stately/menu/src/useMenuTriggerState.ts index 0901c052323..3be7391c0e6 100644 --- a/packages/@react-stately/menu/src/useMenuTriggerState.ts +++ b/packages/@react-stately/menu/src/useMenuTriggerState.ts @@ -11,10 +11,19 @@ */ import {FocusStrategy, Key} from '@react-types/shared'; -import {MenuTriggerProps} from '@react-types/menu'; -import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; +import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; import {useState} from 'react'; +export type MenuTriggerType = 'press' | 'longPress'; + +export interface MenuTriggerProps extends OverlayTriggerProps { + /** + * How the menu is triggered. + * @default 'press' + */ + trigger?: MenuTriggerType +} + export interface MenuTriggerState extends OverlayTriggerState { /** Controls which item will be auto focused when the menu opens. */ readonly focusStrategy: FocusStrategy | null, diff --git a/packages/@react-stately/numberfield/package.json b/packages/@react-stately/numberfield/package.json index dd505ac7012..42511a3f4b3 100644 --- a/packages/@react-stately/numberfield/package.json +++ b/packages/@react-stately/numberfield/package.json @@ -29,7 +29,7 @@ "@internationalized/number": "^3.6.5", "@react-stately/form": "^3.2.4", "@react-stately/utils": "^3.11.0", - "@react-types/numberfield": "^3.8.18", + "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/numberfield/src/index.ts b/packages/@react-stately/numberfield/src/index.ts index 8eb92b68f7f..7f7e9191e19 100644 --- a/packages/@react-stately/numberfield/src/index.ts +++ b/packages/@react-stately/numberfield/src/index.ts @@ -13,4 +13,4 @@ export {useNumberFieldState} from './useNumberFieldState'; export type {NumberFieldStateOptions} from './useNumberFieldState'; -export type {NumberFieldState} from './useNumberFieldState'; +export type {NumberFieldProps, NumberFieldState} from './useNumberFieldState'; diff --git a/packages/@react-stately/numberfield/src/useNumberFieldState.ts b/packages/@react-stately/numberfield/src/useNumberFieldState.ts index de227c9162b..2b65b80e956 100644 --- a/packages/@react-stately/numberfield/src/useNumberFieldState.ts +++ b/packages/@react-stately/numberfield/src/useNumberFieldState.ts @@ -11,11 +11,26 @@ */ import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils'; +import {FocusableProps, HelpTextProps, InputBase, LabelableProps, RangeInputBase, TextInputBase, Validation, ValueBase} from '@react-types/shared'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; -import {NumberFieldProps} from '@react-types/numberfield'; import {NumberFormatter, NumberParser} from '@internationalized/number'; import {useCallback, useMemo, useState} from 'react'; +export interface NumberFieldProps extends InputBase, Validation, FocusableProps, TextInputBase, ValueBase, RangeInputBase, LabelableProps, HelpTextProps { + /** + * Formatting options for the value displayed in the number field. + * This also affects what characters are allowed to be typed by the user. + */ + formatOptions?: Intl.NumberFormatOptions, + /** + * Controls the behavior of the number field when the user blurs the field after editing. + * 'snap' will clamp the value to the min/max values, and snap to the nearest step value. + * 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step. + * @default 'snap' + */ + commitBehavior?: 'snap' | 'validate' +} + export interface NumberFieldState extends FormValidationState { /** * The current text value of the input. Updated as the user types, diff --git a/packages/@react-stately/overlays/package.json b/packages/@react-stately/overlays/package.json index f5cec1b33db..ae47413a2f4 100644 --- a/packages/@react-stately/overlays/package.json +++ b/packages/@react-stately/overlays/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-stately/utils": "^3.11.0", - "@react-types/overlays": "^3.9.4", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/overlays/src/index.ts b/packages/@react-stately/overlays/src/index.ts index c53cf8640cb..bbd0beb17c9 100644 --- a/packages/@react-stately/overlays/src/index.ts +++ b/packages/@react-stately/overlays/src/index.ts @@ -12,5 +12,4 @@ export {useOverlayTriggerState} from './useOverlayTriggerState'; -export type {OverlayTriggerProps} from '@react-types/overlays'; -export type {OverlayTriggerState} from './useOverlayTriggerState'; +export type {OverlayTriggerProps, OverlayTriggerState} from './useOverlayTriggerState'; diff --git a/packages/@react-stately/overlays/src/useOverlayTriggerState.ts b/packages/@react-stately/overlays/src/useOverlayTriggerState.ts index 8e698afeea2..60827f5bf3f 100644 --- a/packages/@react-stately/overlays/src/useOverlayTriggerState.ts +++ b/packages/@react-stately/overlays/src/useOverlayTriggerState.ts @@ -10,10 +10,18 @@ * governing permissions and limitations under the License. */ -import {OverlayTriggerProps} from '@react-types/overlays'; import {useCallback} from 'react'; import {useControlledState} from '@react-stately/utils'; +export interface OverlayTriggerProps { + /** Whether the overlay is open by default (controlled). */ + isOpen?: boolean, + /** Whether the overlay is open by default (uncontrolled). */ + defaultOpen?: boolean, + /** Handler that is called when the overlay's open state changes. */ + onOpenChange?: (isOpen: boolean) => void +} + export interface OverlayTriggerState { /** Whether the overlay is currently open. */ readonly isOpen: boolean, diff --git a/packages/@react-stately/radio/package.json b/packages/@react-stately/radio/package.json index e14af1b7a07..116d3407dec 100644 --- a/packages/@react-stately/radio/package.json +++ b/packages/@react-stately/radio/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-stately/form": "^3.2.4", "@react-stately/utils": "^3.11.0", - "@react-types/radio": "^3.9.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/radio/src/index.ts b/packages/@react-stately/radio/src/index.ts index 01ef2f31152..6bdeb190c72 100644 --- a/packages/@react-stately/radio/src/index.ts +++ b/packages/@react-stately/radio/src/index.ts @@ -12,5 +12,4 @@ export {useRadioGroupState} from './useRadioGroupState'; -export type {RadioGroupProps} from '@react-types/radio'; -export type {RadioGroupState} from './useRadioGroupState'; +export type {RadioGroupProps, RadioGroupState} from './useRadioGroupState'; diff --git a/packages/@react-stately/radio/src/useRadioGroupState.ts b/packages/@react-stately/radio/src/useRadioGroupState.ts index 003e9f5e5d9..ade8dfe6d5f 100644 --- a/packages/@react-stately/radio/src/useRadioGroupState.ts +++ b/packages/@react-stately/radio/src/useRadioGroupState.ts @@ -10,11 +10,18 @@ * governing permissions and limitations under the License. */ +import {FocusEvents, HelpTextProps, InputBase, InputDOMProps, LabelableProps, Orientation, Validation, ValidationState, ValueBase} from '@react-types/shared'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; -import {RadioGroupProps} from '@react-types/radio'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useState} from 'react'; -import {ValidationState} from '@react-types/shared'; + +export interface RadioGroupProps extends ValueBase, InputBase, Pick, Validation, LabelableProps, HelpTextProps, FocusEvents { + /** + * The axis the Radio Button(s) should align with. + * @default 'vertical' + */ + orientation?: Orientation +} export interface RadioGroupState extends FormValidationState { /** diff --git a/packages/@react-stately/searchfield/package.json b/packages/@react-stately/searchfield/package.json index 0d7d67b08f3..b8dbeceef8b 100644 --- a/packages/@react-stately/searchfield/package.json +++ b/packages/@react-stately/searchfield/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@react-stately/utils": "^3.11.0", - "@react-types/searchfield": "^3.6.8", + "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/searchfield/src/index.ts b/packages/@react-stately/searchfield/src/index.ts index a868aa5f4c1..5f933185c37 100644 --- a/packages/@react-stately/searchfield/src/index.ts +++ b/packages/@react-stately/searchfield/src/index.ts @@ -12,5 +12,4 @@ export {useSearchFieldState} from './useSearchFieldState'; -export type {SearchFieldProps} from '@react-types/searchfield'; -export type {SearchFieldState} from './useSearchFieldState'; +export type {SearchFieldProps, SearchFieldState} from './useSearchFieldState'; diff --git a/packages/@react-stately/searchfield/src/useSearchFieldState.ts b/packages/@react-stately/searchfield/src/useSearchFieldState.ts index 3a338cf6ef0..cca473f7ac9 100644 --- a/packages/@react-stately/searchfield/src/useSearchFieldState.ts +++ b/packages/@react-stately/searchfield/src/useSearchFieldState.ts @@ -10,9 +10,20 @@ * governing permissions and limitations under the License. */ -import {SearchFieldProps} from '@react-types/searchfield'; +import {FocusableProps, HelpTextProps, InputBase, LabelableProps, TextInputBase, Validation, ValueBase} from '@react-types/shared'; import {useControlledState} from '@react-stately/utils'; +// Copied here to avoid depending on @react-aria/textfield from stately. +export interface TextFieldProps extends InputBase, Validation, HelpTextProps, FocusableProps, TextInputBase, ValueBase, LabelableProps {} + +export interface SearchFieldProps extends TextFieldProps { + /** Handler that is called when the SearchField is submitted. */ + onSubmit?: (value: string) => void, + + /** Handler that is called when the clear button is pressed. */ + onClear?: () => void +} + export interface SearchFieldState { /** The current value of the search field. */ readonly value: string, diff --git a/packages/@react-stately/select/package.json b/packages/@react-stately/select/package.json index 628b0165920..bc21a665b9c 100644 --- a/packages/@react-stately/select/package.json +++ b/packages/@react-stately/select/package.json @@ -30,7 +30,6 @@ "@react-stately/list": "^3.13.4", "@react-stately/overlays": "^3.6.23", "@react-stately/utils": "^3.11.0", - "@react-types/select": "^3.12.2", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/select/src/index.ts b/packages/@react-stately/select/src/index.ts index f48fd45e76e..1916a9d7c44 100644 --- a/packages/@react-stately/select/src/index.ts +++ b/packages/@react-stately/select/src/index.ts @@ -12,5 +12,4 @@ export {useSelectState} from './useSelectState'; -export type {SelectProps} from '@react-types/select'; -export type {SelectState, SelectStateOptions} from './useSelectState'; +export type {SelectProps, SelectState, SelectStateOptions, SelectionMode, ValueType, ChangeValueType} from './useSelectState'; diff --git a/packages/@react-stately/select/src/useSelectState.ts b/packages/@react-stately/select/src/useSelectState.ts index 058d71f23a3..406f148cded 100644 --- a/packages/@react-stately/select/src/useSelectState.ts +++ b/packages/@react-stately/select/src/useSelectState.ts @@ -10,14 +10,51 @@ * governing permissions and limitations under the License. */ -import {CollectionStateBase, FocusStrategy, Key, Node, Selection} from '@react-types/shared'; +import {CollectionBase, CollectionStateBase, FocusableProps, FocusStrategy, HelpTextProps, InputBase, Key, LabelableProps, Node, Selection, TextInputBase, Validation, ValueBase} from '@react-types/shared'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {ListState, useListState} from '@react-stately/list'; import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; -import {SelectionMode, SelectProps, ValueType} from '@react-types/select'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useState} from 'react'; +export type SelectionMode = 'single' | 'multiple'; +export type ValueType = M extends 'single' ? Key | null : readonly Key[]; +export type ChangeValueType = M extends 'single' ? Key | null : Key[]; +type ValidationType = M extends 'single' ? Key : Key[]; + +export interface SelectProps extends CollectionBase, Omit, ValueBase, ChangeValueType>, Validation>, HelpTextProps, LabelableProps, TextInputBase, FocusableProps { + /** + * Whether single or multiple selection is enabled. + * @default 'single' + */ + selectionMode?: M, + /** + * The currently selected key in the collection (controlled). + * @deprecated + */ + selectedKey?: Key | null, + /** + * The initial selected key in the collection (uncontrolled). + * @deprecated + */ + defaultSelectedKey?: Key | null, + /** + * Handler that is called when the selection changes. + * @deprecated + */ + onSelectionChange?: (key: Key | null) => void, + /** Sets the open state of the menu. */ + isOpen?: boolean, + /** Sets the default open state of the menu. */ + defaultOpen?: boolean, + /** Method that is called when the open state of the menu changes. */ + onOpenChange?: (isOpen: boolean) => void, + /** Whether the Select should close when an item is selected. Defaults to true if selectionMode is single, false otherwise. */ + shouldCloseOnSelect?: boolean, + /** Whether the select should be allowed to be open when the collection is empty. */ + allowsEmptyCollection?: boolean +} + export interface SelectStateOptions extends Omit, 'children'>, CollectionStateBase {} export interface SelectState extends ListState, OverlayTriggerState, FormValidationState { diff --git a/packages/@react-stately/slider/package.json b/packages/@react-stately/slider/package.json index 8421dd5a2e7..8c5963e70ec 100644 --- a/packages/@react-stately/slider/package.json +++ b/packages/@react-stately/slider/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.33.1", - "@react-types/slider": "^3.8.4", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/slider/src/index.ts b/packages/@react-stately/slider/src/index.ts index b22d4da68a4..3fcf93c003b 100644 --- a/packages/@react-stately/slider/src/index.ts +++ b/packages/@react-stately/slider/src/index.ts @@ -12,5 +12,4 @@ export {useSliderState} from './useSliderState'; -export type {SliderStateOptions} from './useSliderState'; -export type {SliderState} from './useSliderState'; +export type {SliderProps, SliderStateOptions, SliderState} from './useSliderState'; diff --git a/packages/@react-stately/slider/src/useSliderState.ts b/packages/@react-stately/slider/src/useSliderState.ts index 0f7350fc9a5..5f9a8f23529 100644 --- a/packages/@react-stately/slider/src/useSliderState.ts +++ b/packages/@react-stately/slider/src/useSliderState.ts @@ -11,10 +11,37 @@ */ import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils'; -import {Orientation} from '@react-types/shared'; -import {SliderProps} from '@react-types/slider'; +import {LabelableProps, Orientation, RangeInputBase, ValueBase} from '@react-types/shared'; import {useCallback, useMemo, useRef, useState} from 'react'; +export interface SliderProps extends RangeInputBase, ValueBase, LabelableProps { + /** + * The orientation of the Slider. + * @default 'horizontal' + */ + orientation?: Orientation, + /** Whether the whole Slider is disabled. */ + isDisabled?: boolean, + /** Fired when the slider stops moving, due to being let go. */ + onChangeEnd?: (value: T) => void, + // These are duplicated from ValueBase to define defaults for the docs. + /** + * The slider's minimum value. + * @default 0 + */ + minValue?: number, + /** + * The slider's maximum value. + * @default 100 + */ + maxValue?: number, + /** + * The slider's step value. + * @default 1 + */ + step?: number +} + export interface SliderState { /** * Values managed by the slider by thumb index. diff --git a/packages/@react-stately/table/package.json b/packages/@react-stately/table/package.json index 9cb06ef3885..5504a33dcb4 100644 --- a/packages/@react-stately/table/package.json +++ b/packages/@react-stately/table/package.json @@ -31,9 +31,7 @@ "@react-stately/grid": "^3.11.9", "@react-stately/selection": "^3.20.9", "@react-stately/utils": "^3.11.0", - "@react-types/grid": "^3.3.8", "@react-types/shared": "^3.33.1", - "@react-types/table": "^3.13.6", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/table/src/Cell.ts b/packages/@react-stately/table/src/Cell.ts index 58a45082d32..54a591f154e 100644 --- a/packages/@react-stately/table/src/Cell.ts +++ b/packages/@react-stately/table/src/Cell.ts @@ -10,10 +10,22 @@ * governing permissions and limitations under the License. */ -import {CellProps} from '@react-types/table'; -import {JSX, ReactElement} from 'react'; +import {JSX, ReactElement, ReactNode} from 'react'; +import {Key} from '@react-types/shared'; import {PartialNode} from '@react-stately/collections'; +export interface CellProps { + /** The contents of the cell. */ + children: ReactNode, + /** A string representation of the cell's contents, used for features like typeahead. */ + textValue?: string, + /** Indicates how many columns the data cell spans. */ + colSpan?: number +} + +export type CellElement = ReactElement; +export type CellRenderer = (columnKey: Key) => CellElement; + function Cell(props: CellProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars return null; } diff --git a/packages/@react-stately/table/src/Column.ts b/packages/@react-stately/table/src/Column.ts index 6fd872cab19..b5b3334f28a 100644 --- a/packages/@react-stately/table/src/Column.ts +++ b/packages/@react-stately/table/src/Column.ts @@ -11,10 +11,47 @@ */ import {CollectionBuilderContext} from './useTableState'; -import {ColumnProps} from '@react-types/table'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {PartialNode} from '@react-stately/collections'; -import React, {JSX, ReactElement} from 'react'; +import React, {JSX, ReactElement, ReactNode} from 'react'; + +/** Widths that result in a constant pixel value for the same Table width. */ +export type ColumnStaticSize = number | `${number}` | `${number}%`; // match regex: /^(\d+)(?=%$)/ +/** + * Widths that change size in relation to the remaining space and in ratio to other dynamic columns. + * All numbers must be integers and greater than 0. + * FR units take up remaining, if any, space in the table. + */ +export type ColumnDynamicSize = `${number}fr`; // match regex: /^(\d+)(?=fr$)/ +/** All possible sizes a column can be assigned. */ +export type ColumnSize = ColumnStaticSize | ColumnDynamicSize; + +export type ColumnElement = ReactElement>; +export type ColumnRenderer = (item: T) => ColumnElement; +export interface ColumnProps { + /** Rendered contents of the column if `children` contains child columns. */ + title?: ReactNode, + /** Static child columns or content to render as the column header. */ + children: ReactNode | ColumnElement | ColumnElement[], + /** A list of child columns used when dynamically rendering nested child columns. */ + childColumns?: T[], + /** The width of the column. */ + width?: ColumnSize | null, + /** The minimum width of the column. */ + minWidth?: ColumnStaticSize | null, + /** The maximum width of the column. */ + maxWidth?: ColumnStaticSize | null, + /** The default width of the column. */ + defaultWidth?: ColumnSize | null, + /** Whether the column allows resizing. */ + allowsResizing?: boolean, + /** Whether the column allows sorting. */ + allowsSorting?: boolean, + /** Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and should be announced by assistive technology during row navigation. */ + isRowHeader?: boolean, + /** A string representation of the column's contents, used for accessibility announcements. */ + textValue?: string +} function Column(props: ColumnProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars return null; diff --git a/packages/@react-stately/table/src/Row.ts b/packages/@react-stately/table/src/Row.ts index 9cc5595538f..5c3be2a62ea 100644 --- a/packages/@react-stately/table/src/Row.ts +++ b/packages/@react-stately/table/src/Row.ts @@ -10,10 +10,29 @@ * governing permissions and limitations under the License. */ +import {CellElement, CellRenderer} from './Cell'; import {CollectionBuilderContext} from './useTableState'; +import {LinkDOMProps} from '@react-types/shared'; import {PartialNode} from '@react-stately/collections'; import React, {JSX, ReactElement} from 'react'; -import {RowProps} from '@react-types/table'; + +export type RowElement = ReactElement>; +export interface RowProps extends LinkDOMProps { + /** + * A list of child item objects used when dynamically rendering row children. Requires the feature flag to be + * enabled along with UNSTABLE_allowsExpandableRows, see https://react-spectrum.adobe.com/react-spectrum/TableView.html#expandable-rows. + * @version alpha + * @private + */ + UNSTABLE_childItems?: Iterable, + // TODO: update when async loading is supported for expandable rows + // /** Whether this row has children, even if not loaded yet. */ + // hasChildItems?: boolean, + /** Rendered contents of the row or row child items. */ + children: CellElement | CellElement[] | CellRenderer, + /** A string representation of the row's contents, used for features like typeahead. */ + textValue?: string // ??? +} function Row(props: RowProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars return null; diff --git a/packages/@react-stately/table/src/TableBody.ts b/packages/@react-stately/table/src/TableBody.ts index 6355c3326f6..5d732593fe1 100644 --- a/packages/@react-stately/table/src/TableBody.ts +++ b/packages/@react-stately/table/src/TableBody.ts @@ -10,9 +10,19 @@ * governing permissions and limitations under the License. */ +import {AsyncLoadable, LoadingState} from '@react-types/shared'; import {PartialNode} from '@react-stately/collections'; import React, {JSX, ReactElement} from 'react'; -import {TableBodyProps} from '@react-types/table'; +import {RowElement} from './Row'; + +export interface TableBodyProps extends Omit { + /** The contents of the table body. Supports static items or a function for dynamic rendering. */ + children: RowElement | RowElement[] | ((item: T) => RowElement), + /** A list of row objects in the table body used when dynamically rendering rows. */ + items?: Iterable, + /** The current loading state of the table. */ + loadingState?: LoadingState +} function TableBody(props: TableBodyProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars return null; diff --git a/packages/@react-stately/table/src/TableCollection.ts b/packages/@react-stately/table/src/TableCollection.ts index 2ca36d4f13a..6495226014d 100644 --- a/packages/@react-stately/table/src/TableCollection.ts +++ b/packages/@react-stately/table/src/TableCollection.ts @@ -11,11 +11,23 @@ */ import {getFirstItem, getLastItem} from '@react-stately/collections'; -import {GridCollection} from '@react-stately/grid'; -import {GridNode} from '@react-types/grid'; -import {TableCollection as ITableCollection} from '@react-types/table'; +import {GridCollection, GridNode, IGridCollection} from '@react-stately/grid'; import {Key} from '@react-types/shared'; +export interface ITableCollection extends IGridCollection { + // TODO perhaps elaborate on this? maybe not clear enough, essentially returns the table header rows (e.g. in a tiered headers table, will return the nodes containing the top tier column, next tier, etc) + /** A list of header row nodes in the table. */ + headerRows: GridNode[], + /** A list of column nodes in the table. */ + columns: GridNode[], + /** A set of column keys that serve as the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader). */ + rowHeaderColumnKeys: Set, + /** The node that makes up the header of the table. */ + head?: GridNode, + /** The node that makes up the body of the table. */ + body: GridNode +} + interface GridCollectionOptions { showSelectionCheckboxes?: boolean, showDragButtons?: boolean diff --git a/packages/@react-stately/table/src/TableColumnLayout.ts b/packages/@react-stately/table/src/TableColumnLayout.ts index 0f9d3ee0223..2b32ea875a9 100644 --- a/packages/@react-stately/table/src/TableColumnLayout.ts +++ b/packages/@react-stately/table/src/TableColumnLayout.ts @@ -15,8 +15,8 @@ import { getMaxWidth, getMinWidth } from './TableUtils'; -import {ColumnSize, TableCollection} from '@react-types/table'; -import {GridNode} from '@react-types/grid'; +import {ColumnSize, ITableCollection as TableCollection} from '@react-stately/table'; +import {GridNode} from '@react-stately/grid'; import {Key} from '@react-types/shared'; export interface TableColumnLayoutOptions { diff --git a/packages/@react-stately/table/src/TableHeader.ts b/packages/@react-stately/table/src/TableHeader.ts index 70af4722f06..e7de764a404 100644 --- a/packages/@react-stately/table/src/TableHeader.ts +++ b/packages/@react-stately/table/src/TableHeader.ts @@ -11,9 +11,16 @@ */ import {CollectionBuilderContext} from './useTableState'; +import {ColumnElement, ColumnRenderer} from './Column'; import {PartialNode} from '@react-stately/collections'; import React, {JSX, ReactElement} from 'react'; -import {TableHeaderProps} from '@react-types/table'; + +export interface TableHeaderProps { + /** A list of table columns. */ + columns?: readonly T[], + /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */ + children: ColumnElement | ColumnElement[] | ColumnRenderer +} function TableHeader(props: TableHeaderProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars return null; diff --git a/packages/@react-stately/table/src/TableUtils.ts b/packages/@react-stately/table/src/TableUtils.ts index 181b287aac8..8bf5ae7a603 100644 --- a/packages/@react-stately/table/src/TableUtils.ts +++ b/packages/@react-stately/table/src/TableUtils.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColumnSize} from '@react-types/table'; +import {ColumnSize} from '@react-stately/table'; import {Key} from '@react-types/shared'; // numbers and percents are considered static. *fr units or a lack of units are considered dynamic. diff --git a/packages/@react-stately/table/src/index.ts b/packages/@react-stately/table/src/index.ts index eb8a04ef4f7..16ffd5cd783 100644 --- a/packages/@react-stately/table/src/index.ts +++ b/packages/@react-stately/table/src/index.ts @@ -11,9 +11,14 @@ */ export type {TableColumnResizeState, TableColumnResizeStateProps} from './useTableColumnResizeState'; -export type {TableState, CollectionBuilderContext, TableStateProps} from './useTableState'; -export type {TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps} from '@react-types/table'; +export type {TableProps, TableState, CollectionBuilderContext, TableStateProps} from './useTableState'; export type {TreeGridState, TreeGridStateProps} from './useTreeGridState'; +export type {ColumnProps, ColumnSize, ColumnDynamicSize, ColumnStaticSize, ColumnElement, ColumnRenderer} from './Column'; +export type {TableHeaderProps} from './TableHeader'; +export type {TableBodyProps} from './TableBody'; +export type {RowProps, RowElement} from './Row'; +export type {CellProps, CellElement, CellRenderer} from './Cell'; +export type {ITableCollection} from './TableCollection'; export {useTableColumnResizeState} from './useTableColumnResizeState'; export {useTableState, UNSTABLE_useFilteredTableState} from './useTableState'; diff --git a/packages/@react-stately/table/src/useTableColumnResizeState.ts b/packages/@react-stately/table/src/useTableColumnResizeState.ts index 7ba050cb1e8..d561629f013 100644 --- a/packages/@react-stately/table/src/useTableColumnResizeState.ts +++ b/packages/@react-stately/table/src/useTableColumnResizeState.ts @@ -10,8 +10,8 @@ * governing permissions and limitations under the License. */ -import {ColumnSize} from '@react-types/table'; -import {GridNode} from '@react-types/grid'; +import {ColumnSize} from './Column'; +import {GridNode} from '@react-stately/grid'; import {Key} from '@react-types/shared'; import {TableColumnLayout} from './TableColumnLayout'; import {TableState} from './useTableState'; @@ -28,6 +28,7 @@ export interface TableColumnResizeStateProps { /** A function that is called to find the default minWidth for a given column. */ getDefaultMinWidth?: (node: GridNode) => ColumnSize | null | undefined } + export interface TableColumnResizeState { /** * Called to update the state that a resize event has occurred. diff --git a/packages/@react-stately/table/src/useTableState.ts b/packages/@react-stately/table/src/useTableState.ts index 603403e5e74..31ca8a45879 100644 --- a/packages/@react-stately/table/src/useTableState.ts +++ b/packages/@react-stately/table/src/useTableState.ts @@ -10,15 +10,36 @@ * governing permissions and limitations under the License. */ -import {Expandable, Key, Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared'; +import {Expandable, Key, MultipleSelection, Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared'; import {GridState, useGridState} from '@react-stately/grid'; -import {TableCollection as ITableCollection, TableBodyProps, TableHeaderProps} from '@react-types/table'; +import {ITableCollection, TableCollection} from './TableCollection'; import {MultipleSelectionState, MultipleSelectionStateProps} from '@react-stately/selection'; import {ReactElement, useCallback, useMemo, useState} from 'react'; -import {TableCollection} from './TableCollection'; +import {TableBodyProps} from './TableBody'; +import {TableHeaderProps} from './TableHeader'; import {useCollection} from '@react-stately/collections'; import {useControlledState} from '@react-stately/utils'; +export interface TableProps extends MultipleSelection, Sortable, Expandable { + /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */ + children: [ReactElement>, ReactElement>], + /** A list of row keys to disable. */ + disabledKeys?: Iterable, + /** + * Whether pressing the escape key should clear selection in the table or not. + * + * Most experiences should not modify this option as it eliminates a keyboard user's ability to + * easily clear selection. Only use if the escape key is being handled externally or should not + * trigger selection clearing contextually. + * @default 'clearSelection' + */ + escapeKeyBehavior?: 'clearSelection' | 'none', + /** Whether selection should occur on press up instead of press down. */ + shouldSelectOnPressUp?: boolean, + /** The id of the column that displays hierarchical data. */ + treeColumn?: Key +} + export interface TableState extends GridState> { /** A collection of rows and columns in the table. */ collection: ITableCollection, @@ -50,8 +71,6 @@ export interface CollectionBuilderContext { export interface TableStateProps extends MultipleSelectionStateProps, Expandable, Sortable { /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */ children?: [ReactElement>, ReactElement>], - /** A list of row keys to disable. */ - disabledKeys?: Iterable, /** A pre-constructed collection to use instead of building one from items and children. */ collection?: ITableCollection, /** Whether the row selection checkboxes should be displayed. */ diff --git a/packages/@react-stately/table/src/useTreeGridState.ts b/packages/@react-stately/table/src/useTreeGridState.ts index 7858492d37b..ae76d1ebe6c 100644 --- a/packages/@react-stately/table/src/useTreeGridState.ts +++ b/packages/@react-stately/table/src/useTreeGridState.ts @@ -11,7 +11,7 @@ */ import {CollectionBuilder} from '@react-stately/collections'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {Key} from '@react-types/shared'; import {ReactElement, useMemo} from 'react'; import {TableCollection} from './TableCollection'; diff --git a/packages/@react-stately/tabs/package.json b/packages/@react-stately/tabs/package.json index f302773f564..876b4d38aa0 100644 --- a/packages/@react-stately/tabs/package.json +++ b/packages/@react-stately/tabs/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-stately/list": "^3.13.4", "@react-types/shared": "^3.33.1", - "@react-types/tabs": "^3.3.22", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/tabs/src/index.ts b/packages/@react-stately/tabs/src/index.ts index f734b83d87d..14b1dae107a 100644 --- a/packages/@react-stately/tabs/src/index.ts +++ b/packages/@react-stately/tabs/src/index.ts @@ -12,5 +12,4 @@ export {useTabListState} from './useTabListState'; -export type {TabListProps} from '@react-types/tabs'; -export type {TabListStateOptions, TabListState} from './useTabListState'; +export type {TabListProps, TabListStateOptions, TabListState} from './useTabListState'; diff --git a/packages/@react-stately/tabs/src/useTabListState.ts b/packages/@react-stately/tabs/src/useTabListState.ts index 116e39b059f..c791d2bb9f9 100644 --- a/packages/@react-stately/tabs/src/useTabListState.ts +++ b/packages/@react-stately/tabs/src/useTabListState.ts @@ -10,11 +10,24 @@ * governing permissions and limitations under the License. */ -import {Collection, CollectionStateBase, Key, Node} from '@react-types/shared'; +import {Collection, CollectionBase, CollectionStateBase, Key, Node, SingleSelection} from '@react-types/shared'; import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list'; -import {TabListProps} from '@react-types/tabs'; import {useEffect, useRef} from 'react'; +export interface TabListProps extends CollectionBase, Omit { + /** + * Whether the TabList is disabled. + * Shows that a selection exists, but is not available in that circumstance. + */ + isDisabled?: boolean, + /** The currently selected key in the collection (controlled). */ + selectedKey?: Key, + /** The initial selected keys in the collection (uncontrolled). */ + defaultSelectedKey?: Key, + /** Handler that is called when the selection changes. */ + onSelectionChange?: (key: Key) => void +} + export interface TabListStateOptions extends Omit, 'children'>, CollectionStateBase {} export interface TabListState extends SingleSelectListState { diff --git a/packages/@react-stately/toggle/package.json b/packages/@react-stately/toggle/package.json index f51dc6cc4eb..e6eab2a8fc0 100644 --- a/packages/@react-stately/toggle/package.json +++ b/packages/@react-stately/toggle/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-stately/utils": "^3.11.0", - "@react-types/checkbox": "^3.10.4", "@react-types/shared": "^3.33.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/toggle/src/index.ts b/packages/@react-stately/toggle/src/index.ts index 6a061eaec4e..eb82b5b93e3 100644 --- a/packages/@react-stately/toggle/src/index.ts +++ b/packages/@react-stately/toggle/src/index.ts @@ -13,6 +13,5 @@ export {useToggleState} from './useToggleState'; export {useToggleGroupState} from './useToggleGroupState'; -export type {ToggleProps} from '@react-types/checkbox'; -export type {ToggleState, ToggleStateOptions} from './useToggleState'; +export type {ToggleProps, ToggleState, ToggleStateOptions} from './useToggleState'; export type {ToggleGroupProps, ToggleGroupState} from './useToggleGroupState'; diff --git a/packages/@react-stately/toggle/src/useToggleState.ts b/packages/@react-stately/toggle/src/useToggleState.ts index 3e606ec3951..7478f379567 100644 --- a/packages/@react-stately/toggle/src/useToggleState.ts +++ b/packages/@react-stately/toggle/src/useToggleState.ts @@ -10,11 +10,35 @@ * governing permissions and limitations under the License. */ -import {ToggleStateOptions} from '@react-types/checkbox'; +import {FocusableProps, InputBase, Validation} from '@react-types/shared'; +import {ReactNode, useState} from 'react'; import {useControlledState} from '@react-stately/utils'; -import {useState} from 'react'; -export type {ToggleStateOptions}; +export interface ToggleStateOptions extends InputBase { + /** + * Whether the element should be selected (uncontrolled). + */ + defaultSelected?: boolean, + /** + * Whether the element should be selected (controlled). + */ + isSelected?: boolean, + /** + * Handler that is called when the element's selection state changes. + */ + onChange?: (isSelected: boolean) => void +} + +export interface ToggleProps extends ToggleStateOptions, Validation, FocusableProps { + /** + * The label for the element. + */ + children?: ReactNode, + /** + * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). + */ + value?: string +} export interface ToggleState { /** Whether the toggle is selected. */ diff --git a/packages/@react-stately/tooltip/package.json b/packages/@react-stately/tooltip/package.json index 4be84a1cc2a..4f9fa33b394 100644 --- a/packages/@react-stately/tooltip/package.json +++ b/packages/@react-stately/tooltip/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-stately/overlays": "^3.6.23", - "@react-types/tooltip": "^3.5.2", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/tooltip/src/index.ts b/packages/@react-stately/tooltip/src/index.ts index ecb6d2438d3..aad22047e7a 100644 --- a/packages/@react-stately/tooltip/src/index.ts +++ b/packages/@react-stately/tooltip/src/index.ts @@ -12,5 +12,4 @@ export {useTooltipTriggerState} from './useTooltipTriggerState'; -export type {TooltipTriggerProps} from '@react-types/tooltip'; -export type {TooltipTriggerState} from './useTooltipTriggerState'; +export type {TooltipTriggerProps, TooltipTriggerState} from './useTooltipTriggerState'; diff --git a/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts b/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts index 1d2af169d31..55e6197452b 100644 --- a/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts +++ b/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts @@ -10,9 +10,39 @@ * governing permissions and limitations under the License. */ -import {TooltipTriggerProps} from '@react-types/tooltip'; +import {OverlayTriggerProps, useOverlayTriggerState} from '@react-stately/overlays'; import {useEffect, useMemo, useRef} from 'react'; -import {useOverlayTriggerState} from '@react-stately/overlays'; + +export interface TooltipTriggerProps extends OverlayTriggerProps { + /** + * Whether the tooltip should be disabled, independent from the trigger. + */ + isDisabled?: boolean, + + /** + * The delay time for the tooltip to show up. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance). + * @default 1500 + */ + delay?: number, + + /** + * The delay time for the tooltip to close. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown). + * @default 500 + */ + closeDelay?: number, + + /** + * By default, opens for both focus and hover. Can be made to open only for focus. + * @default 'hover' + */ + trigger?: 'hover' | 'focus', + + /** + * Whether the tooltip should close when the trigger is pressed. + * @default true + */ + shouldCloseOnPress?: boolean +} const TOOLTIP_DELAY = 1500; // this seems to be a 1.5 second delay, check with design const TOOLTIP_COOLDOWN = 500; diff --git a/packages/@react-types/actionbar/package.json b/packages/@react-types/actionbar/package.json index b30d2bc1587..9401e1f00c4 100644 --- a/packages/@react-types/actionbar/package.json +++ b/packages/@react-types/actionbar/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/actionbar": "^3.6.17" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/actionbar/src/index.d.ts b/packages/@react-types/actionbar/src/index.d.ts index 2bf07bbb32a..7d1c24040fa 100644 --- a/packages/@react-types/actionbar/src/index.d.ts +++ b/packages/@react-types/actionbar/src/index.d.ts @@ -10,39 +10,4 @@ * governing permissions and limitations under the License. */ -import {DOMProps, ItemElement, ItemRenderer, Key, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface ActionBarProps { - /** An list of `Item` elements or a function. If the latter, a list of items must be provided using the `items` prop. */ - children: ItemElement | ItemElement[] | ItemRenderer, - /** A list of items to display as children. Must be used with a function as the sole child. */ - items?: Iterable, - /** A list of keys to disable. */ - disabledKeys?: Iterable, - /** The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. */ - selectedItemCount: number | 'all', - /** Handler that is called when the ActionBar clear button is pressed. */ - onClearSelection: () => void, - /** Whether the ActionBar should be displayed with a emphasized style. */ - isEmphasized?: boolean, - /** Handler that is called when an ActionBar button is pressed. */ - onAction?: (key: Key) => void, - /** - * Defines when the text within the buttons should be hidden and only the icon should be shown. - * When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible - * if space is available, and hidden when space is limited. The text is always visible when the item - * is collapsed into a menu. - * @default 'collapse' - */ - buttonLabelBehavior?: 'show' | 'collapse' | 'hide' -} - -export interface SpectrumActionBarProps extends ActionBarProps, DOMProps, StyleProps {} - -interface ActionBarContainerProps { - /** The contents of the ActionBarContainer. Should include a ActionBar and the renderable content it is associated with. */ - children: ReactNode -} - -export interface SpectrumActionBarContainerProps extends ActionBarContainerProps, DOMProps, StyleProps {} +export {SpectrumActionBarProps as ActionBarProps, SpectrumActionBarProps, SpectrumActionBarContainerProps} from '@react-spectrum/actionbar'; diff --git a/packages/@react-types/actiongroup/package.json b/packages/@react-types/actiongroup/package.json index f044cb4aae2..546582075c1 100644 --- a/packages/@react-types/actiongroup/package.json +++ b/packages/@react-types/actiongroup/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/actiongroup": "^3.7.24", + "@react-spectrum/actiongroup": "^3.11.7" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/actiongroup/src/index.d.ts b/packages/@react-types/actiongroup/src/index.d.ts index 92ed5217fb2..f74b7852d41 100644 --- a/packages/@react-types/actiongroup/src/index.d.ts +++ b/packages/@react-types/actiongroup/src/index.d.ts @@ -10,65 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, ItemElement, ItemRenderer, Key, MultipleSelection, Orientation, StyleProps} from '@react-types/shared'; -import {ReactElement} from 'react'; - -// Not extending CollectionBase to avoid async loading props -export interface ActionGroupProps extends MultipleSelection { - /** - * The axis the ActionGroup should align with. - * @default 'horizontal' - */ - orientation?: Orientation, - /** An list of `Item` elements or a function. If the latter, a list of items must be provided using the `items` prop. */ - children: ItemElement | ItemElement[] | ItemRenderer, - /** A list of items to display as children. Must be used with a function as the sole child. */ - items?: Iterable, - /** A list of keys to disable. */ - disabledKeys?: Iterable, - /** - * Whether the ActionGroup is disabled. - * Shows that a selection exists, but is not available in that circumstance. - */ - isDisabled?: boolean, - /** - * Invoked when an action is taken on a child. Especially useful when `selectionMode` is none. - * The sole argument `key` is the key for the item. - */ - onAction?: (key: Key) => void -} - -export interface AriaActionGroupProps extends ActionGroupProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumActionGroupProps extends AriaActionGroupProps, StyleProps { - /** Whether the ActionButtons should be displayed with a [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */ - isEmphasized?: boolean, - /** - * Sets the amount of space between buttons. - * @default 'regular' - */ - density?: 'compact' | 'regular', - /** Whether the ActionButtons should be justified in their container. */ - isJustified?: boolean, - /** Whether ActionButtons should use the [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ - isQuiet?: boolean, - /** The static color style to apply. Useful when the ActionGroup appears over a color background. */ - staticColor?: 'white' | 'black', - /** - * Defines the behavior of the ActionGroup when the buttons do not fit in the available space. - * When set to 'wrap', the items wrap to form a new line. When set to 'collapse', the items that - * do not fit are collapsed into a dropdown menu. - * @default 'wrap' - */ - overflowMode?: 'wrap' | 'collapse', - /** - * Defines when the text within the buttons should be hidden and only the icon should be shown. - * When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible - * if space is available, and hidden when space is limited. The text is always visible when the item - * is collapsed into a menu. - * @default 'show' - */ - buttonLabelBehavior?: 'show' | 'collapse' | 'hide', - /** The icon displayed in the dropdown menu button when a selectable ActionGroup is collapsed. */ - summaryIcon?: ReactElement -} +export {ActionGroupProps, AriaActionGroupProps} from '@react-aria/actiongroup'; +export {SpectrumActionGroupProps} from '@react-spectrum/actiongroup'; diff --git a/packages/@react-types/autocomplete/package.json b/packages/@react-types/autocomplete/package.json index fde36cf70df..3ce7b82aeca 100644 --- a/packages/@react-types/autocomplete/package.json +++ b/packages/@react-types/autocomplete/package.json @@ -9,12 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/combobox": "^3.14.0", - "@react-types/searchfield": "^3.6.8", - "@react-types/shared": "^3.33.1" + "@react-aria/autocomplete": "3.0.0-rc.6", + "@react-spectrum/autocomplete": "3.0.0-alpha.53" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/autocomplete/src/index.d.ts b/packages/@react-types/autocomplete/src/index.d.ts index ba87e43a0d2..9343c99728b 100644 --- a/packages/@react-types/autocomplete/src/index.d.ts +++ b/packages/@react-types/autocomplete/src/index.d.ts @@ -10,69 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, AsyncLoadable, CollectionBase, DimensionValue, DOMProps, Key, LoadingState, SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; -import {AriaSearchFieldProps, SearchFieldProps} from '@react-types/searchfield'; -import {MenuTriggerAction} from '@react-types/combobox'; -import {ReactElement} from 'react'; - -export interface SearchAutocompleteProps extends CollectionBase, Omit { - /** The list of SearchAutocomplete items (uncontrolled). */ - defaultItems?: Iterable, - /** The list of SearchAutocomplete items (controlled). */ - items?: Iterable, - /** Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. */ - onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void, - /** The value of the SearchAutocomplete input (controlled). */ - inputValue?: string, - /** The default value of the SearchAutocomplete input (uncontrolled). */ - defaultInputValue?: string, - /** Handler that is called when the SearchAutocomplete input value changes. */ - onInputChange?: (value: string) => void, - /** - * The interaction required to display the SearchAutocomplete menu. - * @default 'input' - */ - menuTrigger?: MenuTriggerAction, - /** Handler that is called when the SearchAutocomplete is submitted. - * - * A `value` will be passed if the submission is a custom value (e.g. a user types then presses enter). - * If the input is a selected item, `value` will be null. - * - * A `key` will be passed if the submission is a selected item (e.g. a user clicks or presses enter on an option). - * If the input is a custom value, `key` will be null. - */ - onSubmit?: (value: string | null, key: Key | null) => void -} - -export interface AriaSearchAutocompleteProps extends SearchAutocompleteProps, Omit, DOMProps, AriaLabelingProps {} - -export interface SpectrumSearchAutocompleteProps extends SpectrumTextInputBase, Omit, 'menuTrigger' | 'isInvalid' | 'validationState' | 'validate'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Omit { - /** - * The interaction required to display the SearchAutocomplete menu. Note that this prop has no effect on the mobile SearchAutocomplete experience. - * @default 'input' - */ - menuTrigger?: MenuTriggerAction, - /** Whether the SearchAutocomplete should be displayed with a quiet style. */ - isQuiet?: boolean, - /** Alignment of the menu relative to the input target. - * @default 'start' - */ - align?: 'start' | 'end', - /** - * Direction the menu will render relative to the SearchAutocomplete. - * @default 'bottom' - */ - direction?: 'bottom' | 'top', - /** The current loading state of the SearchAutocomplete. Determines whether or not the progress circle should be shown. */ - loadingState?: LoadingState, - /** - * Whether the menu should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean, - /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */ - menuWidth?: DimensionValue, - onLoadMore?: () => void, - /** An icon to display at the start of the input. */ - icon?: ReactElement | null -} +export {SearchAutocompleteProps, AriaSearchAutocompleteProps} from '@react-aria/autocomplete'; +export {SpectrumSearchAutocompleteProps} from '@react-spectrum/autocomplete'; diff --git a/packages/@react-types/avatar/package.json b/packages/@react-types/avatar/package.json index 6b156991d0d..f04775cb36f 100644 --- a/packages/@react-types/avatar/package.json +++ b/packages/@react-types/avatar/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/avatar": "^3.0.29" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/avatar/src/index.d.ts b/packages/@react-types/avatar/src/index.d.ts index 8d8a13278a5..4f0eb66aa37 100644 --- a/packages/@react-types/avatar/src/index.d.ts +++ b/packages/@react-types/avatar/src/index.d.ts @@ -10,43 +10,4 @@ * governing permissions and limitations under the License. */ -import {DOMProps, StyleProps} from '@react-types/shared'; - -export interface AvatarProps { - /** - * Text description of the avatar. - * - * @default null - */ - alt?: string, - /** - * The image URL for the avatar. - */ - src: string -} - -export interface SpectrumAvatarProps extends AvatarProps, DOMProps, Omit { - /** - * Whether the avatar is disabled. - */ - isDisabled?: boolean, - /** - * Size of the avatar. Affects both height and width. - * - * @default avatar-size-100 - */ - size?: - | 'avatar-size-50' - | 'avatar-size-75' - | 'avatar-size-100' - | 'avatar-size-200' - | 'avatar-size-300' - | 'avatar-size-400' - | 'avatar-size-500' - | 'avatar-size-600' - | 'avatar-size-700' - // This allows autocomplete to work properly and not collapse the above options into just `string`. - // See https://github.com/microsoft/TypeScript/issues/29729. - | (string & {}) - | number -} +export {AvatarProps, SpectrumAvatarProps} from '@react-spectrum/avatar'; diff --git a/packages/@react-types/badge/package.json b/packages/@react-types/badge/package.json index 7fa6a34f7d0..285d97a9976 100644 --- a/packages/@react-types/badge/package.json +++ b/packages/@react-types/badge/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/badge": "^3.1.33" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/badge/src/index.d.ts b/packages/@react-types/badge/src/index.d.ts index 58f84c1fb09..e524b8654c0 100644 --- a/packages/@react-types/badge/src/index.d.ts +++ b/packages/@react-types/badge/src/index.d.ts @@ -10,15 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SpectrumBadgeProps extends DOMProps, StyleProps, AriaLabelingProps { - /** The content to display in the badge. */ - children: ReactNode, - /** - * The variant changes the background color of the badge. - * When badge has a semantic meaning, they should use the variant for semantic colors. - */ - variant: 'neutral' | 'info' | 'positive' | 'negative' | 'indigo' | 'yellow' | 'magenta' | 'fuchsia' | 'purple' | 'seafoam' -} +export {SpectrumBadgeProps} from '@react-spectrum/badge'; diff --git a/packages/@react-types/breadcrumbs/package.json b/packages/@react-types/breadcrumbs/package.json index 33cceb901c0..baa8b3fd2be 100644 --- a/packages/@react-types/breadcrumbs/package.json +++ b/packages/@react-types/breadcrumbs/package.json @@ -9,11 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/link": "^3.6.7", - "@react-types/shared": "^3.33.1" + "@react-aria/breadcrumbs": "^3.5.32", + "@react-spectrum/breadcrumbs": "^3.9.27" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/breadcrumbs/src/index.d.ts b/packages/@react-types/breadcrumbs/src/index.d.ts index f3cd7b08064..46da3ba976c 100644 --- a/packages/@react-types/breadcrumbs/src/index.d.ts +++ b/packages/@react-types/breadcrumbs/src/index.d.ts @@ -10,55 +10,8 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, ItemProps, Key, LinkDOMProps, StyleProps} from '@react-types/shared'; -import {AriaLinkProps} from '@react-types/link'; -import {ReactElement, ReactNode} from 'react'; - -export interface BreadcrumbItemProps extends AriaLinkProps, LinkDOMProps { - /** Whether the breadcrumb item represents the current page. */ - isCurrent?: boolean, - /** - * The type of current location the breadcrumb item represents, if `isCurrent` is true. - * @default 'page' - */ - 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean | 'true' | 'false', - /** Whether the breadcrumb item is disabled. */ - isDisabled?: boolean, - /** The contents of the breadcrumb item. */ - children: ReactNode -} - -export interface AriaBreadcrumbItemProps extends BreadcrumbItemProps, DOMProps { - /** - * The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'. - * @default 'a' - */ - elementType?: string -} +export {BreadcrumbItemProps, AriaBreadcrumbItemProps} from '@react-aria/breadcrumbs'; +export {SpectrumBreadcrumbsProps} from '@react-spectrum/breadcrumbs'; +// Backward compatibility. export interface BreadcrumbsProps {} -export interface AriaBreadcrumbsProps extends BreadcrumbsProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumBreadcrumbsProps extends AriaBreadcrumbsProps, StyleProps { - /** The breadcrumb items. */ - children: ReactElement> | ReactElement>[], - /** Whether the Breadcrumbs are disabled. */ - isDisabled?: boolean, - /** Called when an item is acted upon (usually selection via press). */ - onAction?: (key: Key) => void, - /** - * Size of the Breadcrumbs including spacing and layout. - * @default 'L' - */ - size?: 'S' | 'M' | 'L', - /** Whether to always show the root item if the items are collapsed. */ - showRoot?: boolean, - /** - * Whether to place the last Breadcrumb item onto a new line. - */ - isMultiline?: boolean, - /** - * Whether to autoFocus the last Breadcrumb item when the Breadcrumbs render. - */ - autoFocusCurrent?: boolean -} diff --git a/packages/@react-types/button/package.json b/packages/@react-types/button/package.json index 8f00303378d..83a5d49c6c2 100644 --- a/packages/@react-types/button/package.json +++ b/packages/@react-types/button/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/button": "^3.14.5", + "@react-spectrum/button": "^3.17.7" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/button/src/index.d.ts b/packages/@react-types/button/src/index.d.ts index 96739a9e8ad..d8d82ae05de 100644 --- a/packages/@react-types/button/src/index.d.ts +++ b/packages/@react-types/button/src/index.d.ts @@ -10,132 +10,11 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, FocusableDOMProps, FocusableProps, Key, PressEvents, StyleProps} from '@react-types/shared'; -import {ButtonHTMLAttributes, ElementType, JSXElementConstructor, ReactNode} from 'react'; +import {AriaButtonProps} from '@react-aria/button'; +import {ElementType} from 'react'; -interface ButtonProps extends PressEvents, FocusableProps { - /** Whether the button is disabled. */ - isDisabled?: boolean, - /** The content to display in the button. */ - children?: ReactNode -} +export {LinkButtonProps, AriaButtonProps, AriaToggleButtonProps, AriaToggleButtonGroupItemProps} from '@react-aria/button'; +export {SpectrumButtonProps, SpectrumActionButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps} from '@react-spectrum/button'; -interface ToggleButtonProps extends ButtonProps { - /** Whether the element should be selected (controlled). */ - isSelected?: boolean, - /** Whether the element should be selected (uncontrolled). */ - defaultSelected?: boolean, - /** Handler that is called when the element's selection state changes. */ - onChange?: (isSelected: boolean) => void -} - -export interface AriaButtonElementTypeProps { - /** - * The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`. - * @default 'button' - */ - elementType?: T | JSXElementConstructor -} - -export interface LinkButtonProps extends AriaButtonElementTypeProps { - /** A URL to link to if elementType="a". */ - href?: string, - /** The target window for the link. */ - target?: string, - /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */ - rel?: string -} - -interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps { - /** Indicates whether the element is disabled to users of assistive technology. */ - 'aria-disabled'?: boolean | 'true' | 'false', - /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ - 'aria-expanded'?: boolean | 'true' | 'false', - /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ - 'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false', - /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */ - 'aria-controls'?: string, - /** Indicates the current "pressed" state of toggle buttons. */ - 'aria-pressed'?: boolean | 'true' | 'false' | 'mixed', - /** Indicates whether this element represents the current item within a container or set of related elements. */ - 'aria-current'?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time', - /** - * The behavior of the button when used in an HTML form. - * @default 'button' - */ - type?: 'button' | 'submit' | 'reset', - /** - * Whether to prevent focus from moving to the button when pressing it. - * - * Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, - * such as ComboBox's MenuTrigger or a NumberField's increment/decrement control. - */ - preventFocusOnPress?: boolean, - /** - * The `` element to associate the button with. - * The value of this attribute must be the id of a `` in the same document. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form). - */ - form?: string, - /** - * The URL that processes the information submitted by the button. - * Overrides the action attribute of the button's form owner. - */ - formAction?: ButtonHTMLAttributes['formAction'], - /** Indicates how to encode the form data that is submitted. */ - formEncType?: string, - /** Indicates the HTTP method used to submit the form. */ - formMethod?: string, - /** Indicates that the form is not to be validated when it is submitted. */ - formNoValidate?: boolean, - /** Overrides the target attribute of the button's form owner. */ - formTarget?: string, - /** Submitted as a pair with the button's value as part of the form data. */ - name?: string, - /** The value associated with the button's name when it's submitted with the form data. */ - value?: string -} - -export interface AriaButtonProps extends ButtonProps, LinkButtonProps, AriaBaseButtonProps {} -export interface AriaToggleButtonProps extends ToggleButtonProps, Omit, AriaButtonElementTypeProps {} -export interface AriaToggleButtonGroupItemProps extends Omit, 'id' | 'isSelected' | 'defaultSelected' | 'onChange'> { - /** An identifier for the item in the `selectedKeys` of a ToggleButtonGroup. */ - id: Key -} - -/** @deprecated */ -type LegacyButtonVariant = 'cta' | 'overBackground'; -export interface SpectrumButtonProps extends AriaBaseButtonProps, Omit, LinkButtonProps, StyleProps { - /** The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. */ - variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant, - /** The background style of the button. */ - style?: 'fill' | 'outline', - /** The static color style to apply. Useful when the button appears over a color background. */ - staticColor?: 'white' | 'black', - /** - * Whether to disable events immediately and display a loading spinner after a 1 second delay. - */ - isPending?: boolean, - /** - * Whether the button should be displayed with a quiet style. - * @deprecated - */ - isQuiet?: boolean -} - -export interface SpectrumActionButtonProps extends AriaBaseButtonProps, Omit, StyleProps { - /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ - isQuiet?: boolean, - /** The static color style to apply. Useful when the button appears over a color background. */ - staticColor?: 'white' | 'black' -} - -export interface SpectrumLogicButtonProps extends AriaBaseButtonProps, Omit, StyleProps { - /** The type of boolean sequence to be represented by the LogicButton. */ - variant: 'and' | 'or' -} - -export interface SpectrumToggleButtonProps extends Omit, Omit { - /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */ - isEmphasized?: boolean -} +// Backward compatibility. +export type AriaButtonElementTypeProps = Pick, 'elementType'>; diff --git a/packages/@react-types/buttongroup/package.json b/packages/@react-types/buttongroup/package.json index 212bc5de087..f3cc634c326 100644 --- a/packages/@react-types/buttongroup/package.json +++ b/packages/@react-types/buttongroup/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/buttongroup": "^3.6.29" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/buttongroup/src/index.d.ts b/packages/@react-types/buttongroup/src/index.d.ts index 66afdf16f79..5de007141cf 100644 --- a/packages/@react-types/buttongroup/src/index.d.ts +++ b/packages/@react-types/buttongroup/src/index.d.ts @@ -10,24 +10,4 @@ * governing permissions and limitations under the License. */ - -import {Alignment, DOMProps, Orientation, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SpectrumButtonGroupProps extends DOMProps, StyleProps { - /** Whether the Buttons in the ButtonGroup are all disabled. */ - isDisabled?: boolean, - /** - * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent - * any switching behaviors between 'vertical' and 'horizontal'. - * @default 'horizontal' - */ - orientation?: Orientation, - /** The Buttons contained within the ButtonGroup. */ - children: ReactNode, - /** - * The alignment of the buttons within the ButtonGroup. - * @default 'start' - */ - align?: Alignment | 'center' -} +export {SpectrumButtonGroupProps} from '@react-spectrum/buttongroup'; diff --git a/packages/@react-types/calendar/package.json b/packages/@react-types/calendar/package.json index db3c7f1b56d..9bb2529e492 100644 --- a/packages/@react-types/calendar/package.json +++ b/packages/@react-types/calendar/package.json @@ -9,13 +9,16 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@internationalized/date": "^3.12.0", - "@react-types/shared": "^3.33.1" + "@react-aria/calendar": "^3.9.5", + "@react-spectrum/calendar": "^3.7.11", + "@react-stately/calendar": "^3.9.3" }, "publishConfig": { "access": "public" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-types/calendar/src/index.d.ts b/packages/@react-types/calendar/src/index.d.ts index 0fda150a6f9..a9ad3aedd10 100644 --- a/packages/@react-types/calendar/src/index.d.ts +++ b/packages/@react-types/calendar/src/index.d.ts @@ -10,124 +10,6 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, RangeValue, StyleProps, ValidationState, ValueBase} from '@react-types/shared'; -import type {CalendarDate, CalendarDateTime, CalendarIdentifier, Calendar as ICalendar, ZonedDateTime} from '@internationalized/date'; -import {ReactNode} from 'react'; - -export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; -type MappedDateValue = - T extends ZonedDateTime ? ZonedDateTime : - T extends CalendarDateTime ? CalendarDateTime : - T extends CalendarDate ? CalendarDate : - never; - -export interface CalendarPropsBase { - /** The minimum allowed date that a user may select. */ - minValue?: DateValue | null, - /** The maximum allowed date that a user may select. */ - maxValue?: DateValue | null, - /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ - isDateUnavailable?: (date: DateValue) => boolean, - /** - * Whether the calendar is disabled. - * @default false - */ - isDisabled?: boolean, - /** - * Whether the calendar value is immutable. - * @default false - */ - isReadOnly?: boolean, - /** - * Whether to automatically focus the calendar when it mounts. - * @default false - */ - autoFocus?: boolean, - /** Controls the currently focused date within the calendar. */ - focusedValue?: DateValue | null, - /** The date that is focused when the calendar first mounts (uncontrolled). */ - defaultFocusedValue?: DateValue | null, - /** Handler that is called when the focused date changes. */ - onFocusChange?: (date: CalendarDate) => void, - /** - * Whether the current selection is valid or invalid according to application logic. - * @deprecated Use `isInvalid` instead. - */ - validationState?: ValidationState, - /** Whether the current selection is invalid according to application logic. */ - isInvalid?: boolean, - /** An error message to display when the selected value is invalid. */ - errorMessage?: ReactNode, - /** - * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. - * @default visible - */ - pageBehavior?: PageBehavior, - /** - * The day that starts the week. - */ - firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat', - /** - * Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. - * @default 'center' - */ - selectionAlignment?: 'start' | 'center' | 'end' -} - -export type DateRange = RangeValue | null; -export interface CalendarProps extends CalendarPropsBase, ValueBase> {} -export interface RangeCalendarProps extends CalendarPropsBase, ValueBase | null, RangeValue>> { - /** - * When combined with `isDateUnavailable`, determines whether non-contiguous ranges, - * i.e. ranges containing unavailable dates, may be selected. - */ - allowsNonContiguousRanges?: boolean -} - -export interface AriaCalendarProps extends CalendarProps, DOMProps, AriaLabelingProps {} - -export interface AriaRangeCalendarProps extends RangeCalendarProps, DOMProps, AriaLabelingProps { - /** - * Controls the behavior when a pointer is released outside the calendar: - * - * - `clear`: clear the currently selected range of dates. - * - * - `reset`: reset the selection to the previously selected range of dates. - * - * - `select`: select the currently hovered range of dates. - * @default 'select' - */ - interactOutsideBehavior?: 'clear' | 'reset' | 'select' -} - -export type PageBehavior = 'single' | 'visible'; - -export interface SpectrumCalendarProps extends AriaCalendarProps, StyleProps { - /** - * The number of months to display at once. Up to 3 months are supported. - * @default 1 - */ - visibleMonths?: number, - - /** - * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) - * object for a given calendar identifier. If not provided, the `createCalendar` function - * from `@internationalized/date` will be used. - */ - createCalendar?: (identifier: CalendarIdentifier) => ICalendar -} - -export interface SpectrumRangeCalendarProps extends AriaRangeCalendarProps, StyleProps { - /** - * The number of months to display at once. Up to 3 months are supported. - * @default 1 - */ - visibleMonths?: number, - - /** - * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) - * object for a given calendar identifier. If not provided, the `createCalendar` function - * from `@internationalized/date` will be used. - */ - createCalendar?: (identifier: CalendarIdentifier) => ICalendar -} +export {DateValue, CalendarPropsBase, CalendarProps, DateRange, PageBehavior, RangeCalendarProps} from '@react-stately/calendar'; +export {AriaCalendarProps, AriaRangeCalendarProps} from '@react-aria/calendar'; +export {SpectrumCalendarProps, SpectrumRangeCalendarProps} from '@react-spectrum/calendar'; diff --git a/packages/@react-types/card/package.json b/packages/@react-types/card/package.json index b2073ec253b..5941e8f7fe6 100644 --- a/packages/@react-types/card/package.json +++ b/packages/@react-types/card/package.json @@ -9,11 +9,10 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-stately/virtualizer": "^4.4.6", - "@react-types/provider": "^3.8.15", - "@react-types/shared": "^3.33.1" + "@react-spectrum/card": "3.0.0-alpha.53" }, "peerDependencies": { + "@react-spectrum/provider": "^3.0.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, diff --git a/packages/@react-types/card/src/index.d.ts b/packages/@react-types/card/src/index.d.ts index ebd945b6887..b8d6d6aed7b 100644 --- a/packages/@react-types/card/src/index.d.ts +++ b/packages/@react-types/card/src/index.d.ts @@ -10,58 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, AsyncLoadable, Collection, CollectionBase, Direction, DOMProps, KeyboardDelegate, LoadingState, MultipleSelection, Node, Orientation, StyleProps} from '@react-types/shared'; -import {Layout} from '@react-stately/virtualizer'; -import {ReactNode} from 'react'; -import {Scale} from '@react-types/provider'; - -interface AriaCardProps extends AriaLabelingProps {} - -interface SpectrumCardProps extends AriaCardProps, StyleProps, DOMProps { - children: ReactNode, - isQuiet?: boolean, - layout?: 'grid' | 'waterfall' | 'gallery', - // TODO: readd size when we get updated designs from spectrum - // size?: 'S' | 'M' | 'L', - orientation?: Orientation -} - -interface LayoutOptions { - // cardSize?: 'S' | 'M' | 'L', - cardOrientation?: Orientation, - collator?: Intl.Collator, - // TODO: is this valid or is scale a spectrum specific thing that should be left out of the layouts? - // Added here so we can keep the default item padding options within the layouts instead of having to - // do extra work in CardView to accommodate different sizing for scales - scale?: Scale -} - -// TODO: double check if this is the best way to type the layout provided to the CardView -interface CardViewLayout extends Layout>, KeyboardDelegate { - collection: Collection>, - disabledKeys: any, - isLoading: boolean, - direction: Direction, - layoutType: string, - margin?: number -} - -export interface CardViewLayoutConstructor { - new (options?: LayoutOptions): CardViewLayout -} - -interface CardViewProps extends CollectionBase, MultipleSelection, Omit { - // TODO: Does LayoutConstructor and Layout give enough info for a user to know what to put in their own custom layout? - // Replaced with CardViewLayout so that they know they need to have keyboardDelegate stuff as well as collection, disabledKeys, etc - layout: CardViewLayoutConstructor | CardViewLayout, - // TODO: readd size when we get updated designs from spectrum - // cardSize?: 'S' | 'M' | 'L', - cardOrientation?: Orientation, - isQuiet?: boolean, - renderEmptyState?: () => ReactNode, - loadingState?: LoadingState -} - -export interface AriaCardViewProps extends CardViewProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumCardViewProps extends AriaCardViewProps, StyleProps {} +export {AriaCardViewProps, SpectrumCardProps, SpectrumCardViewProps} from '@react-spectrum/card'; diff --git a/packages/@react-types/checkbox/package.json b/packages/@react-types/checkbox/package.json index 57358f8a6d0..69a5cfc0e67 100644 --- a/packages/@react-types/checkbox/package.json +++ b/packages/@react-types/checkbox/package.json @@ -9,10 +9,16 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/checkbox": "^3.16.5", + "@react-aria/toggle": "^3.12.5", + "@react-spectrum/checkbox": "^3.10.7", + "@react-stately/checkbox": "^3.7.5", + "@react-stately/toggle": "^3.9.5" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/checkbox/src/index.d.ts b/packages/@react-types/checkbox/src/index.d.ts index da3247a584c..392f4691622 100644 --- a/packages/@react-types/checkbox/src/index.d.ts +++ b/packages/@react-types/checkbox/src/index.d.ts @@ -10,104 +10,8 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - AriaValidationProps, - DOMProps, - FocusableDOMProps, - FocusableProps, - FocusEvents, - HelpTextProps, - InputBase, - InputDOMProps, - LabelableProps, - Orientation, - PressEvents, - SpectrumHelpTextProps, - SpectrumLabelableProps, - StyleProps, - Validation, - ValueBase -} from '@react-types/shared'; -import {ReactElement, ReactNode} from 'react'; - -export interface ToggleStateOptions extends InputBase { - /** - * Whether the element should be selected (uncontrolled). - */ - defaultSelected?: boolean, - /** - * Whether the element should be selected (controlled). - */ - isSelected?: boolean, - /** - * Handler that is called when the element's selection state changes. - */ - onChange?: (isSelected: boolean) => void -} - -export interface ToggleProps extends ToggleStateOptions, Validation, FocusableProps { - /** - * The label for the element. - */ - children?: ReactNode, - /** - * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). - */ - value?: string -} - -export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps, InputDOMProps, PressEvents { - /** - * Identifies the element (or elements) whose contents or presence are controlled by the current element. - */ - 'aria-controls'?: string -} - -export interface CheckboxGroupProps extends ValueBase, Pick, InputBase, LabelableProps, HelpTextProps, Validation {} - -export interface CheckboxProps extends ToggleProps { - /** - * Indeterminism is presentational only. - * The indeterminate visual representation remains regardless of user interaction. - */ - isIndeterminate?: boolean -} - -export interface AriaCheckboxProps extends CheckboxProps, InputDOMProps, AriaToggleProps {} - -export interface AriaCheckboxGroupProps extends CheckboxGroupProps, InputDOMProps, DOMProps, AriaLabelingProps, AriaValidationProps, FocusEvents {} - -export interface AriaCheckboxGroupItemProps extends Omit { - value: string -} - -export interface SpectrumCheckboxProps extends Omit, StyleProps { - /** - * This prop sets the emphasized style which provides visual prominence. - */ - isEmphasized?: boolean, - /** - * A slot name for the component. Slots allow the component to receive props from a parent component. - * An explicit `null` value indicates that the local props completely override all props received from a parent. - * @private - */ - slot?: string | null -} - -export interface SpectrumCheckboxGroupProps extends AriaCheckboxGroupProps, SpectrumLabelableProps, Validation, StyleProps, SpectrumHelpTextProps { - /** - * The Checkboxes contained within the CheckboxGroup. - */ - children: ReactElement | ReactElement[], - /** - * The axis the checkboxes should align with. - * @default 'vertical' - */ - orientation?: Orientation, - /** - * By default, checkboxes are not emphasized (gray). - * The emphasized (blue) version provides visual prominence. - */ - isEmphasized?: boolean -} +export {ToggleStateOptions, ToggleProps} from '@react-stately/toggle'; +export {AriaToggleProps} from '@react-aria/toggle'; +export {CheckboxGroupProps} from '@react-stately/checkbox'; +export {CheckboxProps, AriaCheckboxProps, AriaCheckboxGroupProps, AriaCheckboxGroupItemProps} from '@react-aria/checkbox'; +export {SpectrumCheckboxProps, SpectrumCheckboxGroupProps} from '@react-spectrum/checkbox'; diff --git a/packages/@react-types/color/package.json b/packages/@react-types/color/package.json index 2e0036f9e24..9a2acaa5e21 100644 --- a/packages/@react-types/color/package.json +++ b/packages/@react-types/color/package.json @@ -9,11 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1", - "@react-types/slider": "^3.8.4" + "@react-aria/color": "^3.1.5", + "@react-spectrum/color": "^3.1.7", + "@react-stately/color": "^3.9.5" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/color/src/index.d.ts b/packages/@react-types/color/src/index.d.ts index 51495ca50cc..51bcaf9fb89 100644 --- a/packages/@react-types/color/src/index.d.ts +++ b/packages/@react-types/color/src/index.d.ts @@ -10,214 +10,6 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - AriaValidationProps, - DimensionValue, - DOMProps, - FocusableDOMProps, - FocusableProps, - HelpTextProps, - InputBase, - InputDOMProps, - LabelableProps, - SpectrumFieldValidation, - SpectrumLabelableProps, - SpectrumTextInputBase, - StyleProps, - TextInputBase, - TextInputDOMProps, - Validation, - ValueBase -} from '@react-types/shared'; -import {ReactNode} from 'react'; -import {SliderProps} from '@react-types/slider'; - -/** A list of supported color formats. */ -export type ColorFormat = 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsb' | 'hsba'; - -export type ColorSpace = 'rgb' | 'hsl' | 'hsb'; - -/** A list of color channels. */ -export type ColorChannel = 'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha'; - -export type ColorAxes = {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel}; - -export interface ColorChannelRange { - /** The minimum value of the color channel. */ - minValue: number, - /** The maximum value of the color channel. */ - maxValue: number, - /** The step value of the color channel, used when incrementing and decrementing. */ - step: number, - /** The page step value of the color channel, used when incrementing and decrementing. */ - pageSize: number -} - -/** Represents a color value. */ -export interface Color { - /** Converts the color to the given color format, and returns a new Color object. */ - toFormat(format: ColorFormat): Color, - /** Converts the color to a string in the given format. */ - toString(format?: ColorFormat | 'css'): string, - /** Returns a duplicate of the color value. */ - clone(): Color, - /** Converts the color to hex, and returns an integer representation. */ - toHexInt(): number, - /** - * Returns the numeric value for a given channel. - * Throws an error if the channel is unsupported in the current color format. - */ - getChannelValue(channel: ColorChannel): number, - /** - * Sets the numeric value for a given channel, and returns a new Color object. - * Throws an error if the channel is unsupported in the current color format. - */ - withChannelValue(channel: ColorChannel, value: number): Color, - /** - * Returns the minimum, maximum, and step values for a given channel. - */ - getChannelRange(channel: ColorChannel): ColorChannelRange, - /** - * Returns a localized color channel name for a given channel and locale, - * for use in visual or accessibility labels. - */ - getChannelName(channel: ColorChannel, locale: string): string, - /** - * Returns the number formatting options for the given channel. - */ - getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions, - /** - * Formats the numeric value for a given channel for display according to the provided locale. - */ - formatChannelValue(channel: ColorChannel, locale: string): string, - /** - * Returns the color space, 'rgb', 'hsb' or 'hsl', for the current color. - */ - getColorSpace(): ColorSpace, - /** - * Returns the color space axes, xChannel, yChannel, zChannel. - */ - getColorSpaceAxes(xyChannels: {xChannel?: ColorChannel, yChannel?: ColorChannel}): ColorAxes, - /** - * Returns an array of the color channels within the current color space space. - */ - getColorChannels(): [ColorChannel, ColorChannel, ColorChannel], - /** - * Returns a localized name for the color, for use in visual or accessibility labels. - */ - getColorName(locale: string): string, - /** - * Returns a localized name for the hue, for use in visual or accessibility labels. - */ - getHueName(locale: string): string -} - -export interface ColorFieldProps extends Omit, 'onChange'>, InputBase, Validation, FocusableProps, TextInputBase, LabelableProps, HelpTextProps { - /** Handler that is called when the value changes. */ - onChange?: (color: Color | null) => void -} - -export interface AriaColorFieldProps extends ColorFieldProps, AriaLabelingProps, FocusableDOMProps, Omit, AriaValidationProps { - /** Enables or disables changing the value with scroll. */ - isWheelDisabled?: boolean -} - -export interface SpectrumColorFieldProps extends SpectrumTextInputBase, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps { - /** - * The color channel that this field edits. If not provided, - * the color is edited as a hex value. - */ - channel?: ColorChannel, - /** - * The color space that the color field operates in if a `channel` prop is provided. - * If no `channel` is provided, the color field always displays the color as an RGB hex value. - */ - colorSpace?: ColorSpace, - /** Whether the ColorField should be displayed with a quiet style. */ - isQuiet?: boolean -} - -export interface ColorWheelProps extends Omit, 'onChange'> { - /** Whether the ColorWheel is disabled. */ - isDisabled?: boolean, - /** Handler that is called when the value changes, as the user drags. */ - onChange?: (value: Color) => void, - /** Handler that is called when the user stops dragging. */ - onChangeEnd?: (value: Color) => void, - /** - * The default value (uncontrolled). - * @default 'hsl(0, 100%, 50%)' - */ - defaultValue?: string | Color -} - -export interface AriaColorWheelProps extends ColorWheelProps, InputDOMProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumColorWheelProps extends AriaColorWheelProps, Omit { - /** The outer diameter of the ColorWheel. */ - size?: DimensionValue -} - -export interface ColorSliderProps extends Omit, 'minValue' | 'maxValue' | 'step' | 'pageSize' | 'onChange' | 'onChangeEnd'> { - /** - * The color space that the slider operates in. The `channel` must be in this color space. - * If not provided, this defaults to the color space of the `color` or `defaultColor` value. - */ - colorSpace?: ColorSpace, - /** The color channel that the slider manipulates. */ - channel: ColorChannel, - /** Handler that is called when the value changes, as the user drags. */ - onChange?: (value: Color) => void, - /** Handler that is called when the user stops dragging. */ - onChangeEnd?: (value: Color) => void -} - -export interface AriaColorSliderProps extends ColorSliderProps, InputDOMProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumColorSliderProps extends AriaColorSliderProps, StyleProps { - /** Whether the value label is displayed. True by default if there is a label, false by default if not. */ - showValueLabel?: boolean, - /** A ContextualHelp element to place next to the label. */ - contextualHelp?: ReactNode -} - -export interface ColorAreaProps extends Omit, 'onChange'> { - /** - * The color space that the color area operates in. The `xChannel` and `yChannel` must be in this color space. - * If not provided, this defaults to the color space of the `color` or `defaultColor` value. - */ - colorSpace?: ColorSpace, - /** Color channel for the horizontal axis. */ - xChannel?: ColorChannel, - /** Color channel for the vertical axis. */ - yChannel?: ColorChannel, - /** Whether the ColorArea is disabled. */ - isDisabled?: boolean, - /** Handler that is called when the value changes, as the user drags. */ - onChange?: (value: Color) => void, - /** Handler that is called when the user stops dragging. */ - onChangeEnd?: (value: Color) => void -} - -export interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps { - /** - * The name of the x channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - xName?: string, - /** - * The name of the y channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - yName?: string, - /** - * The `` element to associate the ColorArea with. - * The value of this attribute must be the id of a `` in the same document. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). - */ - form?: string -} - -export interface SpectrumColorAreaProps extends AriaColorAreaProps, Omit { - /** Size of the Color Area. */ - size?: DimensionValue -} +export {ColorFormat, ColorSpace, ColorChannel, ColorAxes, ColorChannelRange, Color, ColorFieldProps, ColorWheelProps, ColorSliderProps, ColorAreaProps} from '@react-stately/color'; +export {AriaColorFieldProps, AriaColorWheelProps, AriaColorSliderProps, AriaColorAreaProps} from '@react-aria/color'; +export {SpectrumColorFieldProps, SpectrumColorWheelProps, SpectrumColorSliderProps, SpectrumColorAreaProps} from '@react-spectrum/color'; diff --git a/packages/@react-types/combobox/package.json b/packages/@react-types/combobox/package.json index 0940b1a9561..ec57e2c190d 100644 --- a/packages/@react-types/combobox/package.json +++ b/packages/@react-types/combobox/package.json @@ -9,10 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/combobox": "^3.15.0", + "@react-spectrum/combobox": "^3.16.7", + "@react-stately/combobox": "^3.13.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/combobox/src/index.d.ts b/packages/@react-types/combobox/src/index.d.ts index fcd9c6e827b..b33eb87bff2 100644 --- a/packages/@react-types/combobox/src/index.d.ts +++ b/packages/@react-types/combobox/src/index.d.ts @@ -10,129 +10,6 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - AsyncLoadable, - CollectionBase, - DimensionValue, - DOMProps, - FocusableProps, - HelpTextProps, - InputBase, - InputDOMProps, - Key, - LabelableProps, - LoadingState, - SingleSelection, - SpectrumFieldValidation, - SpectrumLabelableProps, - SpectrumTextInputBase, - StyleProps, - TextInputBase, - Validation, - ValueBase -} from '@react-types/shared'; - -export type MenuTriggerAction = 'focus' | 'input' | 'manual'; -export type SelectionMode = 'single' | 'multiple'; -export type ValueType = M extends 'single' ? Key | null : readonly Key[]; -export type ChangeValueType = M extends 'single' ? Key | null : Key[]; -type ValidationType = M extends 'single' ? Key | null : Key[]; - -export interface ComboBoxValidationValue { - /** - * The selected key in the ComboBox. - * @deprecated - */ - selectedKey: Key | null, - /** The keys of the currently selected items. */ - value: ValidationType, - /** The value of the ComboBox input. */ - inputValue: string -} - -export interface ComboBoxProps extends CollectionBase, InputBase, ValueBase, ChangeValueType>, TextInputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps { - /** The list of ComboBox items (uncontrolled). */ - defaultItems?: Iterable, - /** The list of ComboBox items (controlled). */ - items?: Iterable, - /** Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. */ - onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void, - /** - * Whether single or multiple selection is enabled. - * @default 'single' - */ - selectionMode?: M, - /** - * The currently selected key in the collection (controlled). - * @deprecated - */ - selectedKey?: Key | null, - /** - * The initial selected key in the collection (uncontrolled). - * @deprecated - */ - defaultSelectedKey?: Key | null, - /** - * Handler that is called when the selection changes. - * @deprecated - */ - onSelectionChange?: (key: Key | null) => void, - /** The value of the ComboBox input (controlled). */ - inputValue?: string, - /** The default value of the ComboBox input (uncontrolled). */ - defaultInputValue?: string, - /** Handler that is called when the ComboBox input value changes. */ - onInputChange?: (value: string) => void, - /** Whether the ComboBox allows a non-item matching input value to be set. */ -allowsCustomValue?: boolean, - // /** - // * Whether the Combobox should only suggest matching options or autocomplete the field with the nearest matching option. - // * @default 'suggest' - // */ - // completionMode?: 'suggest' | 'complete', - /** - * The interaction required to display the ComboBox menu. - * @default 'input' - */ - menuTrigger?: MenuTriggerAction -} - -export interface AriaComboBoxProps extends ComboBoxProps, DOMProps, InputDOMProps, AriaLabelingProps { - /** Whether keyboard navigation is circular. */ - shouldFocusWrap?: boolean -} - -export interface SpectrumComboBoxProps extends SpectrumTextInputBase, Omit, 'menuTrigger' | 'isInvalid' | 'validationState' | 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange'>, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Omit { - /** - * The interaction required to display the ComboBox menu. Note that this prop has no effect on the mobile ComboBox experience. - * @default 'input' - */ - menuTrigger?: MenuTriggerAction, - /** Whether the ComboBox should be displayed with a quiet style. */ - isQuiet?: boolean, - /** Alignment of the menu relative to the input target. - * @default 'start' - */ - align?: 'start' | 'end', - /** - * Direction the menu will render relative to the ComboBox. - * @default 'bottom' - */ - direction?: 'bottom' | 'top', - /** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */ - loadingState?: LoadingState, - /** - * Whether the menu should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean, - /** Width of the menu. By default, matches width of the combobox. Note that the minimum width of the dropdown is always equal to the combobox's width. */ - menuWidth?: DimensionValue, - /** - * Whether the text or key of the selected item is submitted as part of an HTML form. - * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted. - * @default 'text' - */ - formValue?: 'text' | 'key' -} +export {MenuTriggerAction, ComboBoxValidationValue, ComboBoxProps} from '@react-stately/combobox'; +export {AriaComboBoxProps} from '@react-aria/combobox'; +export {SpectrumComboBoxProps} from '@react-spectrum/combobox'; diff --git a/packages/@react-types/contextualhelp/package.json b/packages/@react-types/contextualhelp/package.json index 8513e06c257..4cafb3c0a49 100644 --- a/packages/@react-types/contextualhelp/package.json +++ b/packages/@react-types/contextualhelp/package.json @@ -9,13 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/overlays": "^3.9.4", - "@react-types/shared": "^3.33.1" + "@react-spectrum/contextualhelp": "^3.6.31" }, "publishConfig": { "access": "public" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-types/contextualhelp/src/index.d.ts b/packages/@react-types/contextualhelp/src/index.d.ts index 565966845c4..f980df1442d 100644 --- a/packages/@react-types/contextualhelp/src/index.d.ts +++ b/packages/@react-types/contextualhelp/src/index.d.ts @@ -10,21 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared'; -import {OverlayTriggerProps, Placement, PositionProps} from '@react-types/overlays'; -import {ReactNode} from 'react'; - -export interface SpectrumContextualHelpProps extends OverlayTriggerProps, PositionProps, StyleProps, DOMProps, AriaLabelingProps { - /** Contents of the Contextual Help popover. */ - children: ReactNode, - /** - * Indicates whether contents are informative or provides helpful guidance. - * @default 'help' - */ - variant?: 'help' | 'info', - /** - * The placement of the popover with respect to the action button. - * @default 'bottom start' - */ - placement?: Placement -} +export {SpectrumContextualHelpProps} from '@react-spectrum/contextualhelp'; diff --git a/packages/@react-types/datepicker/package.json b/packages/@react-types/datepicker/package.json index 3c57c40ace1..98b19a6a3bd 100644 --- a/packages/@react-types/datepicker/package.json +++ b/packages/@react-types/datepicker/package.json @@ -9,15 +9,16 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@internationalized/date": "^3.12.0", - "@react-types/calendar": "^3.8.3", - "@react-types/overlays": "^3.9.4", - "@react-types/shared": "^3.33.1" + "@react-aria/datepicker": "^3.16.1", + "@react-spectrum/datepicker": "^3.14.11", + "@react-stately/datepicker": "^3.16.1" }, "publishConfig": { "access": "public" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts index 1f7950072f6..ed88aaaa4be 100644 --- a/packages/@react-types/datepicker/src/index.d.ts +++ b/packages/@react-types/datepicker/src/index.d.ts @@ -10,185 +10,14 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - DOMProps, - FocusableProps, - HelpTextProps, - InputBase, - InputDOMProps, - LabelableProps, - RangeValue, - SpectrumFieldValidation, - SpectrumLabelableProps, - StyleProps, - Validation, - ValueBase -} from '@react-types/shared'; -import {CalendarDate, CalendarDateTime, CalendarIdentifier, Calendar as ICalendar, Time, ZonedDateTime} from '@internationalized/date'; -import {OverlayTriggerProps} from '@react-types/overlays'; -import {PageBehavior} from '@react-types/calendar'; +import {AriaDatePickerProps} from '@react-aria/datepicker'; +import {DateValue, TimeValue} from '@react-stately/datepicker'; +import {SpectrumTimeFieldProps} from '@react-spectrum/datepicker'; -export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; -type MappedDateValue = - T extends ZonedDateTime ? ZonedDateTime : - T extends CalendarDateTime ? CalendarDateTime : - T extends CalendarDate ? CalendarDate : - never; - -export type Granularity = 'day' | 'hour' | 'minute' | 'second'; -interface DateFieldBase extends InputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps { - /** The minimum allowed date that a user may select. */ - minValue?: DateValue | null, - /** The maximum allowed date that a user may select. */ - maxValue?: DateValue | null, - /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ - isDateUnavailable?: (date: DateValue) => boolean, - /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */ - placeholderValue?: T | null, - /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ - hourCycle?: 12 | 24, - /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */ - granularity?: Granularity, - /** - * Whether to hide the time zone abbreviation. - * @default false - */ - hideTimeZone?: boolean, - /** - * Whether to always show leading zeros in the month, day, and hour fields. - * By default, this is determined by the user's locale. - */ - shouldForceLeadingZeros?: boolean -} - -interface AriaDateFieldBaseProps extends DateFieldBase, AriaLabelingProps, DOMProps {} -export interface DateFieldProps extends DateFieldBase, ValueBase | null> {} -export interface AriaDateFieldProps extends DateFieldProps, AriaDateFieldBaseProps, InputDOMProps { - /** - * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). - */ - autoComplete?: string -} - -interface DatePickerBase extends DateFieldBase, OverlayTriggerProps { - /** - * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. - * @default visible - */ - pageBehavior?: PageBehavior, - /** - * The day that starts the week. - */ - firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' -} -export interface AriaDatePickerBaseProps extends DatePickerBase, AriaLabelingProps, InputDOMProps, DOMProps {} - -export interface DatePickerProps extends DatePickerBase, ValueBase | null> {} -export interface AriaDatePickerProps extends DatePickerProps, AriaDatePickerBaseProps, InputDOMProps { - /** - * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). - */ - autoComplete?: string -} - -export type DateRange = RangeValue; -export interface DateRangePickerProps extends Omit, 'validate'>, Validation>>, ValueBase | null, RangeValue> | null> { - /** - * When combined with `isDateUnavailable`, determines whether non-contiguous ranges, - * i.e. ranges containing unavailable dates, may be selected. - */ - allowsNonContiguousRanges?: boolean, - /** - * The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - startName?: string, - /** - * The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - endName?: string -} - -export interface AriaDateRangePickerProps extends Omit, 'validate' | 'name'>, DateRangePickerProps {} - -interface SpectrumDateFieldBase extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation>, StyleProps { - /** - * Whether the date picker should be displayed with a quiet style. - * @default false - */ - isQuiet?: boolean, - /** - * Whether to show the localized date format as help text below the field. - * @default false - */ - showFormatHelpText?: boolean -} - -interface SpectrumDatePickerBase extends SpectrumDateFieldBase, SpectrumLabelableProps, StyleProps { - /** - * The maximum number of months to display at once in the calendar popover, if screen space permits. - * @default 1 - */ - maxVisibleMonths?: number, - /** - * Whether the calendar popover should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean, - /** - * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) - * object for a given calendar identifier. This will be used for the popover calendar. If not provided, the - * `createCalendar` function from `@internationalized/date` will be used. - */ - createCalendar?: (identifier: CalendarIdentifier) => ICalendar -} - -export interface SpectrumDatePickerProps extends Omit, 'isInvalid' | 'validationState' | 'autoComplete'>, SpectrumDatePickerBase {} -export interface SpectrumDateRangePickerProps extends Omit, 'isInvalid' | 'validationState'>, Omit, 'validate'> {} -export interface SpectrumDateFieldProps extends Omit, 'isInvalid' | 'validationState' | 'autoComplete'>, SpectrumDateFieldBase {} - -export type TimeValue = Time | CalendarDateTime | ZonedDateTime; -type MappedTimeValue = - T extends ZonedDateTime ? ZonedDateTime : - T extends CalendarDateTime ? CalendarDateTime : - T extends Time ? Time : - never; - -export interface TimePickerProps extends InputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps, ValueBase | null> { - /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ - hourCycle?: 12 | 24, - /** - * Determines the smallest unit that is displayed in the time picker. - * @default 'minute' - */ - granularity?: 'hour' | 'minute' | 'second', - /** Whether to hide the time zone abbreviation. */ - hideTimeZone?: boolean, - /** - * Whether to always show leading zeros in the hour field. - * By default, this is determined by the user's locale. - */ - shouldForceLeadingZeros?: boolean, - /** - * A placeholder time that influences the format of the placeholder shown when no value is selected. - * Defaults to 12:00 AM or 00:00 depending on the hour cycle. - */ - placeholderValue?: T, - /** The minimum allowed time that a user may select. */ - minValue?: TimeValue | null, - /** The maximum allowed time that a user may select. */ - maxValue?: TimeValue | null -} - -export interface AriaTimeFieldProps extends TimePickerProps, AriaLabelingProps, DOMProps, InputDOMProps {} - -export interface SpectrumTimeFieldProps extends Omit, 'isInvalid' | 'validationState'>, SpectrumFieldValidation>, SpectrumLabelableProps, StyleProps, InputDOMProps { - /** - * Whether the time field should be displayed with a quiet style. - * @default false - */ - isQuiet?: boolean -} +export {DateValue, DateRange, TimeValue, MappedDateValue, MappedTimeValue, Granularity, DateFieldProps, DatePickerProps, DateRangePickerProps, TimePickerProps} from '@react-stately/datepicker'; +export {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, AriaTimeFieldProps} from '@react-aria/datepicker'; +export {SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumDateFieldProps, SpectrumTimeFieldProps} from '@react-spectrum/datepicker'; // backward compatibility +export type AriaDatePickerBaseProps = AriaDatePickerProps; export type SpectrumTimePickerProps = SpectrumTimeFieldProps; diff --git a/packages/@react-types/dialog/package.json b/packages/@react-types/dialog/package.json index 5bd059c78b8..3a79a58bc83 100644 --- a/packages/@react-types/dialog/package.json +++ b/packages/@react-types/dialog/package.json @@ -9,11 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/overlays": "^3.9.4", - "@react-types/shared": "^3.33.1" + "@react-aria/dialog": "^3.5.34", + "@react-spectrum/dialog": "^3.9.7" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index d589f5245a8..573c2c468b7 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -10,93 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, RefObject, StyleProps} from '@react-types/shared'; -import {OverlayTriggerProps, PositionProps} from '@react-types/overlays'; -import {ReactElement, ReactNode} from 'react'; - -export type SpectrumDialogClose = (close: () => void) => ReactElement; - -export interface SpectrumDialogTriggerProps extends OverlayTriggerProps, PositionProps { - /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */ - children: [ReactElement, SpectrumDialogClose | ReactElement], - /** - * The type of Dialog that should be rendered. See the DialogTrigger [types section](#dialog-types) for an explanation on each. - * @default 'modal' - */ - type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover', - /** The type of Dialog that should be rendered when on a mobile device. See DialogTrigger [types section](#dialog-types) for an explanation on each. */ - mobileType?: 'modal' | 'tray' | 'fullscreen' | 'fullscreenTakeover', - /** - * Whether a popover type Dialog's arrow should be hidden. - */ - hideArrow?: boolean, - /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */ - targetRef?: RefObject, - /** Whether a modal type Dialog should be dismissable. */ - isDismissable?: boolean, - /** Whether pressing the escape key to close the dialog should be disabled. */ - isKeyboardDismissDisabled?: boolean -} - -export interface SpectrumDialogContainerProps { - /** The Dialog to display, if any. */ - children: ReactNode, - /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */ - onDismiss: () => void, - /** - * The type of Dialog that should be rendered. See the visual options below for examples of each. - * @default 'modal' - */ - type?: 'modal' | 'fullscreen' | 'fullscreenTakeover', - /** Whether the Dialog is dismissable. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */ - isDismissable?: boolean, - /** Whether pressing the escape key to close the dialog should be disabled. */ - isKeyboardDismissDisabled?: boolean -} - -export interface AriaDialogProps extends DOMProps, AriaLabelingProps { - /** - * The accessibility role for the dialog. - * @default 'dialog' - */ - role?: 'dialog' | 'alertdialog' -} - -export interface SpectrumDialogProps extends AriaDialogProps, StyleProps { - /** The contents of the Dialog. */ - children: ReactNode, - /** The size of the Dialog. Only applies to "modal" type Dialogs. */ - size?: 'S' | 'M' | 'L', - /** Whether the Dialog is dismissable. See the [examples](#examples) for more details. */ - isDismissable?: boolean, - /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */ - onDismiss?: () => void -} - -export interface SpectrumAlertDialogProps extends DOMProps, StyleProps { - /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. */ - variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning', - /** The title of the AlertDialog. */ - title: string, - /** The contents of the AlertDialog. */ - children: ReactNode, - /** The label to display within the cancel button. */ - cancelLabel?: string, - /** The label to display within the confirm button. */ - primaryActionLabel: string, - /** The label to display within the secondary button. */ - secondaryActionLabel?: string, - /** Whether the primary button is disabled. */ - isPrimaryActionDisabled?: boolean, - /** Whether the secondary button is disabled. */ - isSecondaryActionDisabled?: boolean, - /** Handler that is called when the cancel button is pressed. */ - onCancel?: () => void, - /** Handler that is called when the primary button is pressed. */ - onPrimaryAction?: () => void, - /** Handler that is called when the secondary button is pressed. */ - onSecondaryAction?: () => void, - /** Button to focus by default when the dialog opens. */ - autoFocusButton?: 'cancel' | 'primary' | 'secondary' - // allowsKeyboardConfirmation?: boolean, // triggers primary action -} +export {AriaDialogProps} from '@react-aria/dialog'; +export {SpectrumDialogClose, SpectrumDialogTriggerProps, SpectrumDialogContainerProps, SpectrumDialogProps, SpectrumAlertDialogProps} from '@react-spectrum/dialog'; diff --git a/packages/@react-types/divider/package.json b/packages/@react-types/divider/package.json index e12cfc9344d..77dcfe8da7b 100644 --- a/packages/@react-types/divider/package.json +++ b/packages/@react-types/divider/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/divider": "^3.5.30" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/divider/src/index.d.ts b/packages/@react-types/divider/src/index.d.ts index 0b2473d7857..ee8acb0edf7 100644 --- a/packages/@react-types/divider/src/index.d.ts +++ b/packages/@react-types/divider/src/index.d.ts @@ -10,24 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, Orientation, StyleProps} from '@react-types/shared'; - -export interface SpectrumDividerProps extends DOMProps, AriaLabelingProps, StyleProps { - /** - * How thick the Divider should be. - * @default 'L' - */ - size?: 'S' | 'M' | 'L', - - /** - * The axis the Divider should align with. - * @default 'horizontal' - */ - orientation?: Orientation, - - /** - * A slot to place the divider in. - * @default 'divider' - */ - slot?: string -} +export {SpectrumDividerProps} from '@react-spectrum/divider'; diff --git a/packages/@react-types/form/package.json b/packages/@react-types/form/package.json index d2829ee5c49..6ef326f6e6a 100644 --- a/packages/@react-types/form/package.json +++ b/packages/@react-types/form/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-spectrum/form": "^3.7.22", "@react-types/shared": "^3.33.1" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/form/src/index.d.ts b/packages/@react-types/form/src/index.d.ts index 888128799b2..ddae11b18f6 100644 --- a/packages/@react-types/form/src/index.d.ts +++ b/packages/@react-types/form/src/index.d.ts @@ -10,86 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, SpectrumLabelableProps, StyleProps, ValidationErrors, ValidationState} from '@react-types/shared'; -import {FormEvent, FormHTMLAttributes, ReactElement} from 'react'; - -export interface FormProps extends AriaLabelingProps { - /** - * Validation errors for the form, typically returned by a server. - * This should be set to an object mapping from input names to errors. - */ - validationErrors?: ValidationErrors, - /** - * Where to send the form-data when the form is submitted. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action). - */ - action?: string | FormHTMLAttributes['action'], - /** - * The enctype attribute specifies how the form-data should be encoded when submitting it to the server. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype). - */ - encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain', - /** - * The HTTP method to submit the form with. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method). - */ - method?: 'get' | 'post' | 'dialog', - /** - * The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target). - */ - target?: '_blank' | '_self' | '_parent' | '_top', - /** - * Triggered when a user submits the form. - */ - onSubmit?: (event: FormEvent) => void, - /** - * Triggered when a user resets the form. - */ - onReset?: (event: FormEvent) => void, - /** - * Triggered for each invalid field when a user submits the form. - */ - onInvalid?: (event: FormEvent) => void, - /** - * Indicates whether input elements can by default have their values automatically completed by the browser. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocomplete). - */ - autoComplete?: 'off' | 'on', - /** - * Controls whether inputted text is automatically capitalized and, if so, in what manner. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize). - */ - autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters', - /** - * An ARIA role override to apply to the form element. - */ - role?: 'search' | 'presentation' -} - -export interface SpectrumFormProps extends FormProps, DOMProps, StyleProps, Omit { - /** The contents of the Form. */ - children: ReactElement | ReactElement[], - /** Whether the Form elements are displayed with their quiet style. */ - isQuiet?: boolean, - /** Whether the Form elements are rendered with their emphasized style. */ - isEmphasized?: boolean, - /** Whether the Form elements are disabled. */ - isDisabled?: boolean, - /** Whether user input is required on each of the Form elements before Form submission. */ - isRequired?: boolean, - /** Whether the Form elements can be selected but not changed by the user. */ - isReadOnly?: boolean, - /** - * Whether the Form elements should display their "valid" or "invalid" visual styling. - * @default 'valid' - */ - validationState?: ValidationState, - /** - * Whether to use native HTML form validation to prevent form submission - * when a field value is missing or invalid, or mark fields as required - * or invalid via ARIA. - * @default 'aria' - */ - validationBehavior?: 'aria' | 'native' -} +export {FormProps} from '@react-types/shared'; +export {SpectrumFormProps} from '@react-spectrum/form'; diff --git a/packages/@react-types/grid/package.json b/packages/@react-types/grid/package.json index 0132451471c..b35a2fed8cf 100644 --- a/packages/@react-types/grid/package.json +++ b/packages/@react-types/grid/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-stately/grid": "^3.11.9" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/grid/src/index.d.ts b/packages/@react-types/grid/src/index.d.ts index a5d10fe4277..cef18c52e51 100644 --- a/packages/@react-types/grid/src/index.d.ts +++ b/packages/@react-types/grid/src/index.d.ts @@ -10,32 +10,4 @@ * governing permissions and limitations under the License. */ -import {Collection, Key, Node} from '@react-types/shared'; - -export interface GridCollection extends Collection> { - /** The number of columns in the grid. */ - columnCount: number, - /** A list of rows in the grid. */ - rows: GridNode[] -} - -export interface GridRow extends Partial> { - key?: Key, - type: string, - childNodes: Iterable> -} - -export interface GridNode extends Node { - column?: GridNode, - /** - * The number of columns spanned by this cell. Use `colSpan` instead. - * @deprecated - */ - colspan?: number, - /** The number of columns spanned by this cell. */ - colSpan?: number | null, - /** The column index of this cell, accounting for any colSpans. */ - colIndex?: number | null, - /** The index of this node within its parent, ignoring sibling nodes that aren't of the same type. */ - indexOfType?: number -} +export {GridCollection, GridRow, GridNode} from '@react-stately/grid'; diff --git a/packages/@react-types/illustratedmessage/package.json b/packages/@react-types/illustratedmessage/package.json index 8c3b4c9168d..33aa26eb5a8 100644 --- a/packages/@react-types/illustratedmessage/package.json +++ b/packages/@react-types/illustratedmessage/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/illustratedmessage": "^3.5.17" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/illustratedmessage/src/index.d.ts b/packages/@react-types/illustratedmessage/src/index.d.ts index f2f3c68e837..ffa4d7a3374 100644 --- a/packages/@react-types/illustratedmessage/src/index.d.ts +++ b/packages/@react-types/illustratedmessage/src/index.d.ts @@ -10,10 +10,4 @@ * governing permissions and limitations under the License. */ -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SpectrumIllustratedMessageProps extends DOMProps, StyleProps { - /** The contents of the IllustratedMessage. */ - children: ReactNode -} +export {SpectrumIllustratedMessageProps} from '@react-spectrum/illustratedmessage'; diff --git a/packages/@react-types/image/package.json b/packages/@react-types/image/package.json index 3f49bc2e288..cfe8a85fce0 100644 --- a/packages/@react-types/image/package.json +++ b/packages/@react-types/image/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/image": "^3.6.5" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/image/src/index.d.ts b/packages/@react-types/image/src/index.d.ts index de337d97629..600d41a41fb 100644 --- a/packages/@react-types/image/src/index.d.ts +++ b/packages/@react-types/image/src/index.d.ts @@ -10,41 +10,4 @@ * governing permissions and limitations under the License. */ -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactEventHandler} from 'react'; - -export interface ImageProps { - /** - * The URL of the image. - */ - src: string, - /** - * Text description of the image. - */ - alt?: string, - /** - * Sets the Image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) style. - */ - objectFit?: any, // move to styleProps for images and type better - /** - * Called if an error occurs while loading or rendering an image, see [Image loading errors](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#image_loading_errors). - */ - onError?: ReactEventHandler, - /** - * Called when the image has successfully loaded, see [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event). - */ - onLoad?: ReactEventHandler, - /** - * Indicates if the fetching of the image must be done using a CORS request. - * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). - */ - crossOrigin?: 'anonymous' | 'use-credentials' -} - -export interface SpectrumImageProps extends ImageProps, DOMProps, StyleProps { - /** - * A slot to place the image in. - * @default 'image' - */ - slot?: string -} +export {ImageProps, SpectrumImageProps} from '@react-spectrum/image'; diff --git a/packages/@react-types/label/package.json b/packages/@react-types/label/package.json index 24503ae3c7d..773a3f3ee4a 100644 --- a/packages/@react-types/label/package.json +++ b/packages/@react-types/label/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/label": "^3.16.22" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/label/src/index.d.ts b/packages/@react-types/label/src/index.d.ts index 887ac7efc2a..59a1da51a51 100644 --- a/packages/@react-types/label/src/index.d.ts +++ b/packages/@react-types/label/src/index.d.ts @@ -10,33 +10,4 @@ * governing permissions and limitations under the License. */ -import {Alignment, DOMProps, LabelPosition, NecessityIndicator, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation, ValidationResult} from '@react-types/shared'; -import {ElementType, HTMLAttributes, LabelHTMLAttributes, ReactElement, ReactNode} from 'react'; - -export interface LabelProps { - children?: ReactNode, - htmlFor?: string, // for compatibility with React - for?: string, - elementType?: ElementType -} - -interface SpectrumLabelPropsBase extends LabelProps, DOMProps, StyleProps { - labelPosition?: LabelPosition, // default top - labelAlign?: Alignment, // default start - isRequired?: boolean, - necessityIndicator?: NecessityIndicator, // default icon - includeNecessityIndicatorInAccessibilityName?: boolean -} - -export interface SpectrumLabelProps extends SpectrumLabelPropsBase, HTMLAttributes {} - -export interface SpectrumFieldProps extends SpectrumLabelPropsBase, SpectrumHelpTextProps, Omit, 'validationState'>, SpectrumFieldValidation, Partial { - children: ReactElement, - label?: ReactNode, - contextualHelp?: ReactNode, - labelProps?: LabelHTMLAttributes, - descriptionProps?: HTMLAttributes, - errorMessageProps?: HTMLAttributes, - wrapperClassName?: string, - wrapperProps?: HTMLAttributes -} +export {LabelProps, SpectrumLabelProps, SpectrumFieldProps} from '@react-spectrum/label'; diff --git a/packages/@react-types/layout/package.json b/packages/@react-types/layout/package.json index b01435f107a..a6c52f59fe2 100644 --- a/packages/@react-types/layout/package.json +++ b/packages/@react-types/layout/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/layout": "^3.6.22" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/layout/src/flex.d.ts b/packages/@react-types/layout/src/flex.d.ts deleted file mode 100644 index f6bb8274d3e..00000000000 --- a/packages/@react-types/layout/src/flex.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, FlexStyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export type Slots = {[key: string]: any}; - -export interface FlexProps extends DOMProps, FlexStyleProps { - /** Children of the flex container. */ - children: ReactNode -} diff --git a/packages/@react-types/layout/src/grid.d.ts b/packages/@react-types/layout/src/grid.d.ts deleted file mode 100644 index cd21c048b12..00000000000 --- a/packages/@react-types/layout/src/grid.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, GridStyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface GridProps extends DOMProps, GridStyleProps { - /** Children of the grid container. */ - children: ReactNode -} diff --git a/packages/@react-types/layout/src/index.d.ts b/packages/@react-types/layout/src/index.d.ts index bbc3da83565..f3f021b8574 100644 --- a/packages/@react-types/layout/src/index.d.ts +++ b/packages/@react-types/layout/src/index.d.ts @@ -10,5 +10,7 @@ * governing permissions and limitations under the License. */ -export * from './flex'; -export * from './grid'; +export {FlexProps, GridProps} from '@react-spectrum/layout'; + +// Backward compatibility. +export type Slots = {[key: string]: any}; diff --git a/packages/@react-types/link/package.json b/packages/@react-types/link/package.json index 98e9c568395..46949cf1f3f 100644 --- a/packages/@react-types/link/package.json +++ b/packages/@react-types/link/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/link": "^3.8.9", + "@react-spectrum/link": "^3.6.25" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/link/src/index.d.ts b/packages/@react-types/link/src/index.d.ts index 83b7ac225bb..ef3dc572f2b 100644 --- a/packages/@react-types/link/src/index.d.ts +++ b/packages/@react-types/link/src/index.d.ts @@ -10,21 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, FocusableProps, LinkDOMProps, PressEvents, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface LinkProps extends PressEvents, FocusableProps {} - -export interface AriaLinkProps extends LinkProps, LinkDOMProps, AriaLabelingProps { } - -export interface SpectrumLinkProps extends Omit, StyleProps { - /** The content to display in the link. */ - children: ReactNode, - /** - * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link. - * @default 'primary' - */ - variant?: 'primary' | 'secondary' | 'overBackground', - /** Whether the link should be displayed with a quiet style. */ - isQuiet?: boolean -} +export {LinkProps, AriaLinkProps} from '@react-aria/link'; +export {SpectrumLinkProps} from '@react-spectrum/link'; diff --git a/packages/@react-types/listbox/package.json b/packages/@react-types/listbox/package.json index d12ad54b8fc..ef66c4b2ae0 100644 --- a/packages/@react-types/listbox/package.json +++ b/packages/@react-types/listbox/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/listbox": "^3.15.3", + "@react-spectrum/listbox": "^3.15.11" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/listbox/src/index.d.ts b/packages/@react-types/listbox/src/index.d.ts index 8391de95287..33c57c0dee0 100644 --- a/packages/@react-types/listbox/src/index.d.ts +++ b/packages/@react-types/listbox/src/index.d.ts @@ -10,44 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, AsyncLoadable, CollectionBase, DOMProps, FocusEvents, FocusStrategy, Key, MultipleSelection, SelectionBehavior, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface ListBoxProps extends CollectionBase, MultipleSelection, FocusEvents { - /** Whether to auto focus the listbox or an option. */ - autoFocus?: boolean | FocusStrategy, - /** Whether focus should wrap around when the end/start is reached. */ - shouldFocusWrap?: boolean -} - -interface AriaListBoxPropsBase extends ListBoxProps, DOMProps, AriaLabelingProps { - /** - * Whether pressing the escape key should clear selection in the listbox or not. - * - * Most experiences should not modify this option as it eliminates a keyboard user's ability to - * easily clear selection. Only use if the escape key is being handled externally or should not - * trigger selection clearing contextually. - * @default 'clearSelection' - */ - escapeKeyBehavior?: 'clearSelection' | 'none' -} -export interface AriaListBoxProps extends AriaListBoxPropsBase { - /** - * An optional visual label for the listbox. - */ - label?: ReactNode, - /** How multiple selection should behave in the collection. */ - selectionBehavior?: SelectionBehavior, - /** Whether selection should occur on press up instead of press down. */ - shouldSelectOnPressUp?: boolean, - /** Whether options should be focused when the user hovers over them. */ - shouldFocusOnHover?: boolean, - /** - * Handler that is called when a user performs an action on an item. The exact user event depends on - * the collection's `selectionBehavior` prop and the interaction modality. - */ - onAction?: (key: Key) => void -} - -export interface SpectrumListBoxProps extends AriaListBoxPropsBase, AsyncLoadable, StyleProps { -} +export {ListBoxProps, AriaListBoxProps} from '@react-aria/listbox'; +export {SpectrumListBoxProps} from '@react-spectrum/listbox'; diff --git a/packages/@react-types/menu/package.json b/packages/@react-types/menu/package.json index 00c58122e52..9169c3666a8 100644 --- a/packages/@react-types/menu/package.json +++ b/packages/@react-types/menu/package.json @@ -9,11 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/overlays": "^3.9.4", - "@react-types/shared": "^3.33.1" + "@react-aria/menu": "^3.21.0", + "@react-spectrum/menu": "^3.22.11", + "@react-stately/menu": "^3.9.11" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/menu/src/index.d.ts b/packages/@react-types/menu/src/index.d.ts index a3b4ae883eb..e688f20272d 100644 --- a/packages/@react-types/menu/src/index.d.ts +++ b/packages/@react-types/menu/src/index.d.ts @@ -10,78 +10,6 @@ * governing permissions and limitations under the License. */ -import {Alignment, AriaLabelingProps, CollectionBase, DOMProps, FocusStrategy, Key, MultipleSelection, StyleProps} from '@react-types/shared'; -import {OverlayTriggerProps} from '@react-types/overlays'; -import {ReactElement} from 'react'; - -export type MenuTriggerType = 'press' | 'longPress'; - -export interface MenuTriggerProps extends OverlayTriggerProps { - /** - * How the menu is triggered. - * @default 'press' - */ - trigger?: MenuTriggerType -} - -export interface SpectrumMenuTriggerProps extends MenuTriggerProps { - /** - * The contents of the MenuTrigger - a trigger and a Menu. - */ - children: ReactElement[], - /** - * Alignment of the menu relative to the trigger. - * @default 'start' - */ - align?: Alignment, - /** - * Where the Menu opens relative to its trigger. - * @default 'bottom' - */ - direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end', - /** - * Whether the menu should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean, - /** - * Whether the Menu closes when a selection is made. - * @default true - */ - closeOnSelect?: boolean -} - -export interface MenuProps extends CollectionBase, MultipleSelection { - /** Where the focus should be set. */ - autoFocus?: boolean | FocusStrategy, - /** Whether keyboard navigation is circular. */ - shouldFocusWrap?: boolean, - /** Handler that is called when an item is selected. */ - onAction?: (key: Key) => void, - /** Handler that is called when the menu should close after selecting an item. */ - onClose?: () => void -} - -export interface AriaMenuProps extends MenuProps, DOMProps, AriaLabelingProps { - /** - * Whether pressing the escape key should clear selection in the menu or not. - * - * Most experiences should not modify this option as it eliminates a keyboard user's ability to - * easily clear selection. Only use if the escape key is being handled externally or should not - * trigger selection clearing contextually. - * @default 'clearSelection' - */ - escapeKeyBehavior?: 'clearSelection' | 'none' -} -export interface SpectrumMenuProps extends AriaMenuProps, StyleProps {} - -export interface SpectrumActionMenuProps extends CollectionBase, Omit, StyleProps, DOMProps, AriaLabelingProps { - /** Whether the button is disabled. */ - isDisabled?: boolean, - /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ - isQuiet?: boolean, - /** Whether the element should receive focus on render. */ - autoFocus?: boolean, - /** Handler that is called when an item is selected. */ - onAction?: (key: Key) => void -} +export {MenuTriggerType, MenuTriggerProps} from '@react-stately/menu'; +export {MenuProps, AriaMenuProps} from '@react-aria/menu'; +export {SpectrumMenuTriggerProps, SpectrumMenuProps, SpectrumActionMenuProps} from '@react-spectrum/menu'; diff --git a/packages/@react-types/meter/package.json b/packages/@react-types/meter/package.json index 1f2d31c6dd5..c72f4444903 100644 --- a/packages/@react-types/meter/package.json +++ b/packages/@react-types/meter/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/progress": "^3.5.18" + "@react-aria/meter": "^3.4.30", + "@react-spectrum/meter": "^3.5.17" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/meter/src/index.d.ts b/packages/@react-types/meter/src/index.d.ts index b36228f0aaf..2ee3e7cf9e6 100644 --- a/packages/@react-types/meter/src/index.d.ts +++ b/packages/@react-types/meter/src/index.d.ts @@ -10,14 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaProgressBarBaseProps, ProgressBarBaseProps, SpectrumProgressBarBaseProps} from '@react-types/progress'; - -export type MeterProps = ProgressBarBaseProps; -export interface AriaMeterProps extends AriaProgressBarBaseProps {} -export interface SpectrumMeterProps extends SpectrumProgressBarBaseProps { - /** - * The [visual style](https://spectrum.adobe.com/page/meter/#Options) of the Meter. - * @default 'informative' - */ - variant?: 'informative' | 'positive' | 'warning' | 'critical' -} +export {MeterProps, AriaMeterProps} from '@react-aria/meter'; +export {SpectrumMeterProps} from '@react-spectrum/meter'; diff --git a/packages/@react-types/numberfield/package.json b/packages/@react-types/numberfield/package.json index b971cb7c313..83959652555 100644 --- a/packages/@react-types/numberfield/package.json +++ b/packages/@react-types/numberfield/package.json @@ -9,10 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/numberfield": "^3.12.5", + "@react-spectrum/numberfield": "^3.10.5", + "@react-stately/numberfield": "^3.11.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/numberfield/src/index.d.ts b/packages/@react-types/numberfield/src/index.d.ts index 384faa5cbc1..70cf7a50861 100644 --- a/packages/@react-types/numberfield/src/index.d.ts +++ b/packages/@react-types/numberfield/src/index.d.ts @@ -10,52 +10,6 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - DOMProps, - FocusableProps, - HelpTextProps, - InputBase, InputDOMProps, LabelableProps, - RangeInputBase, SpectrumFieldValidation, SpectrumLabelableProps, - StyleProps, - TextInputBase, - TextInputDOMEvents, - Validation, - ValueBase -} from '@react-types/shared'; - -export interface NumberFieldProps extends InputBase, Validation, FocusableProps, TextInputBase, ValueBase, RangeInputBase, LabelableProps, HelpTextProps { - /** - * Formatting options for the value displayed in the number field. - * This also affects what characters are allowed to be typed by the user. - */ - formatOptions?: Intl.NumberFormatOptions, - /** - * Controls the behavior of the number field when the user blurs the field after editing. - * 'snap' will clamp the value to the min/max values, and snap to the nearest step value. - * 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step. - * @default 'snap' - */ - commitBehavior?: 'snap' | 'validate' -} - -export interface AriaNumberFieldProps extends NumberFieldProps, DOMProps, AriaLabelingProps, TextInputDOMEvents { - /** A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. */ - decrementAriaLabel?: string, - /** A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. */ - incrementAriaLabel?: string, - /** - * Enables or disables changing the value with scroll. - */ - isWheelDisabled?: boolean -} - -export interface SpectrumNumberFieldProps extends Omit, SpectrumFieldValidation, InputDOMProps, StyleProps, SpectrumLabelableProps { - /** Whether the numberfield should be displayed with a quiet style. */ - isQuiet?: boolean, - /** - * Whether to hide the increment and decrement buttons. - * @default false - */ - hideStepper?: boolean -} +export {NumberFieldProps} from '@react-stately/numberfield'; +export {AriaNumberFieldProps} from '@react-aria/numberfield'; +export {SpectrumNumberFieldProps} from '@react-spectrum/numberfield'; diff --git a/packages/@react-types/overlays/package.json b/packages/@react-types/overlays/package.json index 9db79132da1..516b9706992 100644 --- a/packages/@react-types/overlays/package.json +++ b/packages/@react-types/overlays/package.json @@ -9,10 +9,15 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/overlays": "^3.31.2", + "@react-spectrum/overlays": "^5.9.3", + "@react-stately/overlays": "^3.6.23", "@react-types/shared": "^3.33.1" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/overlays/src/index.d.ts b/packages/@react-types/overlays/src/index.d.ts index 89e07151a26..4686d4caf59 100644 --- a/packages/@react-types/overlays/src/index.d.ts +++ b/packages/@react-types/overlays/src/index.d.ts @@ -10,73 +10,16 @@ * governing permissions and limitations under the License. */ -import {HTMLAttributes, MutableRefObject, ReactElement, ReactNode} from 'react'; +import {HTMLAttributes, ReactElement, ReactNode} from 'react'; +import {OverlayProps} from '@react-spectrum/overlays'; +import {PlacementAxis} from '@react-aria/overlays'; import {StyleProps} from '@react-types/shared'; -export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | - 'top' | 'top left' | 'top right' | 'top start' | 'top end' | - 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | - 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'; - -export type Axis = 'top' | 'bottom' | 'left' | 'right'; -export type SizeAxis = 'width' | 'height'; -export type PlacementAxis = Axis | 'center'; - -export interface PositionProps { - /** - * The placement of the element with respect to its anchor element. - * @default 'bottom' - */ - placement?: Placement, - /** - * The placement padding that should be applied between the element and its - * surrounding container. - * @default 12 - */ - containerPadding?: number, - /** - * The additional offset applied along the main axis between the element and its - * anchor element. - * @default 0 - */ - offset?: number, - /** - * The additional offset applied along the cross axis between the element and its - * anchor element. - * @default 0 - */ - crossOffset?: number, - /** - * Whether the element should flip its orientation (e.g. top to bottom or left to right) when - * there is insufficient room for it to render completely. - * @default true - */ - shouldFlip?: boolean, - // /** - // * The element that should be used as the bounding container when calculating container offset - // * or whether it should flip. - // */ - // boundaryElement?: Element, - /** Whether the element is rendered. */ - isOpen?: boolean -} - -export interface OverlayProps { - children: ReactNode, - isOpen?: boolean, - container?: Element, - isKeyboardDismissDisabled?: boolean, - onEnter?: () => void, - onEntering?: () => void, - onEntered?: () => void, - onExit?: () => void, - onExiting?: () => void, - onExited?: () => void, - nodeRef: MutableRefObject, - disableFocusManagement?: boolean, - shouldContainFocus?: boolean -} +export {OverlayTriggerProps} from '@react-stately/overlays'; +export {Placement, Axis, SizeAxis, PlacementAxis, PositionProps} from '@react-aria/overlays'; +export {OverlayProps} from '@react-spectrum/overlays'; +// Old and unused. Left for backward compatibility. export interface ModalProps extends StyleProps, Omit { children: ReactElement, isOpen?: boolean, @@ -85,6 +28,7 @@ export interface ModalProps extends StyleProps, Omit { isDismissable?: boolean } +// Old and unused. Left for backward compatibility. export interface PopoverProps extends StyleProps, Omit { children: ReactNode, placement?: PlacementAxis, @@ -97,6 +41,7 @@ export interface PopoverProps extends StyleProps, Omit isDismissable?: boolean } +// Old and unused. Left for backward compatibility. export interface TrayProps extends StyleProps, Omit { children: ReactElement, isOpen?: boolean, @@ -105,12 +50,3 @@ export interface TrayProps extends StyleProps, Omit { isFixedHeight?: boolean, isNonModal?: boolean } - -export interface OverlayTriggerProps { - /** Whether the overlay is open by default (controlled). */ - isOpen?: boolean, - /** Whether the overlay is open by default (uncontrolled). */ - defaultOpen?: boolean, - /** Handler that is called when the overlay's open state changes. */ - onOpenChange?: (isOpen: boolean) => void -} diff --git a/packages/@react-types/progress/package.json b/packages/@react-types/progress/package.json index 77f486d0e4a..c8a5f2388db 100644 --- a/packages/@react-types/progress/package.json +++ b/packages/@react-types/progress/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/progress": "^3.4.30", + "@react-spectrum/progress": "^3.7.23" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/progress/src/index.d.ts b/packages/@react-types/progress/src/index.d.ts index 8b7187d63d6..ce97c3256b9 100644 --- a/packages/@react-types/progress/src/index.d.ts +++ b/packages/@react-types/progress/src/index.d.ts @@ -10,95 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, LabelPosition, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -interface ProgressBaseProps { - /** - * The current value (controlled). - * @default 0 - */ - value?: number, - /** - * The smallest value allowed for the input. - * @default 0 - */ - minValue?: number, - /** - * The largest value allowed for the input. - * @default 100 - */ - maxValue?: number -} - -export interface ProgressBarBaseProps extends ProgressBaseProps { - /** The content to display as the label. */ - label?: ReactNode, - /** - * The display format of the value label. - * @default {style: 'percent'} - */ - formatOptions?: Intl.NumberFormatOptions, - /** The content to display as the value's label (e.g. 1 of 4). */ - valueLabel?: ReactNode -} - -export interface AriaProgressBarBaseProps extends ProgressBarBaseProps, DOMProps, AriaLabelingProps {} - -export interface ProgressBarProps extends ProgressBarBaseProps { - /** - * Whether presentation is indeterminate when progress isn't known. - */ - isIndeterminate?: boolean -} - -export interface AriaProgressBarProps extends ProgressBarProps, DOMProps, AriaLabelingProps {} - -export interface ProgressCircleProps extends ProgressBaseProps { - /** - * Whether presentation is indeterminate when progress isn't known. - */ - isIndeterminate?: boolean -} - -export interface AriaProgressCircleProps extends ProgressCircleProps, DOMProps, AriaLabelingProps {} -export interface SpectrumProgressCircleProps extends AriaProgressCircleProps, StyleProps { - /** - * What the ProgressCircle's diameter should be. - * @default 'M' - */ - size?: 'S' | 'M' | 'L', - /** The static color style to apply. Useful when the button appears over a color background. */ - staticColor?: 'white' | 'black', - /** - * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of the ProgressCircle. - * - * @deprecated - use staticColor instead. - */ - variant?: 'overBackground' -} - -export interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps, StyleProps { - /** - * How thick the bar should be. - * @default 'L' - */ - size?: 'S' | 'L', - /** - * The label's overall position relative to the element it is labeling. - * @default 'top' - */ - labelPosition?: LabelPosition, - /** Whether the value's label is displayed. True by default if there's a label, false by default if not. */ - showValueLabel?: boolean -} - -export interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps { - /** The static color style to apply. Useful when the button appears over a color background. */ - staticColor?: 'white' | 'black', - /** - * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of the ProgressBar. - * @deprecated - use staticColor instead. - */ - variant?: 'overBackground' -} +export {ProgressBarBaseProps, AriaProgressBarBaseProps, AriaProgressBarProps} from '@react-aria/progress'; +export {ProgressCircleProps, AriaProgressCircleProps, SpectrumProgressCircleProps, SpectrumProgressBarBaseProps, SpectrumProgressBarProps} from '@react-spectrum/progress'; diff --git a/packages/@react-types/provider/package.json b/packages/@react-types/provider/package.json index b6b6b30e78e..98325b03d42 100644 --- a/packages/@react-types/provider/package.json +++ b/packages/@react-types/provider/package.json @@ -8,10 +8,8 @@ "type": "git", "url": "https://github.com/adobe/react-spectrum" }, - "dependencies": { - "@react-types/shared": "^3.33.1" - }, "peerDependencies": { + "@react-spectrum/provider": "^3.10.14", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { diff --git a/packages/@react-types/provider/src/index.d.ts b/packages/@react-types/provider/src/index.d.ts index 9e54d05c218..cc0ffc0b9d9 100644 --- a/packages/@react-types/provider/src/index.d.ts +++ b/packages/@react-types/provider/src/index.d.ts @@ -10,115 +10,4 @@ * governing permissions and limitations under the License. */ -import {DOMProps, Href, RouterOptions, StyleProps, ValidationState} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export type ColorScheme = 'light' | 'dark'; -export type Scale = 'medium' | 'large'; -export interface Breakpoints { - S?: number, - M?: number, - L?: number, - // Currently, it only deals with pixels, but we need to fix it to accept em or rem as well. - [custom: string]: number | undefined -} - -export type CSSModule = { - [className: string]: string -}; - -/** A theme object defines CSS variables for a theme, across multiple color schemes and scales. */ -export interface Theme { - /** CSS module defining the global variables, which do not change between color schemes/scales. */ - global?: CSSModule, - /** CSS module defining the variables for the light color scheme. */ - light?: CSSModule, - /** CSS module defining the variables for the dark color scheme. */ - dark?: CSSModule, - /** CSS module defining the variables for the medium scale. */ - medium?: CSSModule, - /** CSS module defining the variables for the large scale. */ - large?: CSSModule -} - -interface ContextProps { - /** Whether descendants should be displayed with the quiet style. */ - isQuiet?: boolean, - /** Whether descendants should be displayed with the emphasized style. */ - isEmphasized?: boolean, - /** Whether descendants should be disabled. */ - isDisabled?: boolean, - /** Whether descendants should be displayed with the required style. */ - isRequired?: boolean, - /** Whether descendants should be read only. */ - isReadOnly?: boolean, - /** Whether descendants should be displayed with the validation state style. */ - validationState?: ValidationState -} - -interface Router { - navigate: (path: string, routerOptions: RouterOptions | undefined) => void, - useHref?: (href: Href) => string -} - -export interface ProviderProps extends ContextProps, DOMProps, StyleProps { - /** The content of the Provider. */ - children: ReactNode, - /** - * The theme for your application. - */ - theme?: Theme, - /** - * The color scheme for your application. - * Defaults to operating system preferences. - */ - colorScheme?: ColorScheme, - /** - * The default color scheme if no operating system setting is available. - * @default 'light' - */ - defaultColorScheme?: ColorScheme, - /** - * Sets the scale for your applications. Defaults based on device pointer type. - */ - scale?: Scale, - /** - * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. - * Defaults to the browser/OS language setting. - * @default 'en-US' - */ - locale?: string, - /** - * The breakpoints for styleProps. - * Do not use `base` property. - * @default {S:380,M:768,L:1024} - */ - breakpoints?: Breakpoints, - /** - * Provides a client side router to all nested React Spectrum links to enable client side navigation. - */ - router?: Router -} - -export interface ProviderContext extends ContextProps { - /** - * The package version number of the nearest parent Provider. - */ - version: string, - /** - * The theme of the nearest parent Provider. - */ - theme: Theme, - /** - * The color scheme of the nearest parent Provider. - */ - colorScheme: ColorScheme, - /** - * The scale of the nearest parent Provider. - */ - scale: Scale, - /** - * The breakpoints of the nearest parent Provider used for styleProps. - */ - breakpoints: Breakpoints -} +export {ColorScheme, Scale, Breakpoints, CSSModule, Theme, ProviderProps, ProviderContext} from '@react-spectrum/provider'; diff --git a/packages/@react-types/radio/package.json b/packages/@react-types/radio/package.json index 05177154f34..ab4886b6bff 100644 --- a/packages/@react-types/radio/package.json +++ b/packages/@react-types/radio/package.json @@ -9,10 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/radio": "^3.12.5", + "@react-spectrum/radio": "^3.7.24", + "@react-stately/radio": "^3.11.5" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/radio/src/index.d.ts b/packages/@react-types/radio/src/index.d.ts index 383832e8e73..772a39512f8 100644 --- a/packages/@react-types/radio/src/index.d.ts +++ b/packages/@react-types/radio/src/index.d.ts @@ -10,63 +10,6 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - AriaValidationProps, - DOMProps, - FocusableProps, - FocusEvents, - HelpTextProps, - InputBase, - InputDOMProps, - LabelableProps, - Orientation, - PressEvents, - SpectrumHelpTextProps, - SpectrumLabelableProps, - StyleProps, - Validation, - ValueBase -} from '@react-types/shared'; -import {ReactElement, ReactNode} from 'react'; - -export interface RadioGroupProps extends ValueBase, InputBase, Pick, Validation, LabelableProps, HelpTextProps, FocusEvents { - /** - * The axis the Radio Button(s) should align with. - * @default 'vertical' - */ - orientation?: Orientation -} - -export interface RadioProps extends FocusableProps { - /** - * The value of the radio button, used when submitting an HTML form. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value). - */ - value: string, - /** - * The label for the Radio. Accepts any renderable node. - */ - children?: ReactNode, - /** - * Whether the radio button is disabled or not. - * Shows that a selection exists, but is not available in that circumstance. - */ - isDisabled?: boolean -} - -export interface AriaRadioGroupProps extends RadioGroupProps, InputDOMProps, DOMProps, AriaLabelingProps, AriaValidationProps {} -export interface SpectrumRadioGroupProps extends AriaRadioGroupProps, SpectrumLabelableProps, StyleProps, SpectrumHelpTextProps { - /** - * The Radio(s) contained within the RadioGroup. - */ - children: ReactElement | ReactElement[], - /** - * By default, radio buttons are not emphasized (gray). - * The emphasized (blue) version provides visual prominence. - */ - isEmphasized?: boolean -} - -export interface AriaRadioProps extends RadioProps, DOMProps, AriaLabelingProps, PressEvents {} -export interface SpectrumRadioProps extends Omit, StyleProps {} +export {RadioGroupProps} from '@react-stately/radio'; +export {RadioProps, AriaRadioGroupProps, AriaRadioProps} from '@react-aria/radio'; +export {SpectrumRadioGroupProps, SpectrumRadioProps} from '@react-spectrum/radio'; diff --git a/packages/@react-types/searchfield/package.json b/packages/@react-types/searchfield/package.json index aac0f53f6e3..224247d562b 100644 --- a/packages/@react-types/searchfield/package.json +++ b/packages/@react-types/searchfield/package.json @@ -9,11 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1", - "@react-types/textfield": "^3.12.8" + "@react-aria/searchfield": "^3.8.12", + "@react-spectrum/searchfield": "^3.8.26", + "@react-stately/searchfield": "^3.5.19" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/searchfield/src/index.d.ts b/packages/@react-types/searchfield/src/index.d.ts index fd575ce5b04..74ef2b2db37 100644 --- a/packages/@react-types/searchfield/src/index.d.ts +++ b/packages/@react-types/searchfield/src/index.d.ts @@ -10,26 +10,6 @@ * governing permissions and limitations under the License. */ -import {AriaTextFieldProps, SpectrumTextFieldProps, TextFieldProps} from '@react-types/textfield'; -import {SpectrumTextInputBase} from '@react-types/shared'; - -export interface SearchFieldProps extends TextFieldProps { - /** Handler that is called when the SearchField is submitted. */ - onSubmit?: (value: string) => void, - - /** Handler that is called when the clear button is pressed. */ - onClear?: () => void -} - -export interface AriaSearchFieldProps extends SearchFieldProps, Omit { - /** - * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). - */ - enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send', - /** - * The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). - * @default 'search' - */ - type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {}) -} -export interface SpectrumSearchFieldProps extends SpectrumTextInputBase, Omit, SpectrumTextFieldProps {} +export {SearchFieldProps} from '@react-stately/searchfield'; +export {AriaSearchFieldProps} from '@react-aria/searchfield'; +export {SpectrumSearchFieldProps} from '@react-spectrum/searchfield'; diff --git a/packages/@react-types/select/package.json b/packages/@react-types/select/package.json index b65ce9df117..389628507b4 100644 --- a/packages/@react-types/select/package.json +++ b/packages/@react-types/select/package.json @@ -9,10 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/select": "^3.17.3", + "@react-spectrum/picker": "^3.16.7", + "@react-stately/select": "^3.9.2" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/select/src/index.d.ts b/packages/@react-types/select/src/index.d.ts index f028e50afc9..f87444fc5d9 100644 --- a/packages/@react-types/select/src/index.d.ts +++ b/packages/@react-types/select/src/index.d.ts @@ -10,101 +10,6 @@ * governing permissions and limitations under the License. */ -import { - Alignment, - AriaLabelingProps, - AsyncLoadable, - CollectionBase, - DimensionValue, - DOMProps, - FocusableDOMProps, - FocusableProps, - HelpTextProps, - InputBase, - Key, - LabelableProps, - SingleSelection, - SpectrumLabelableProps, - StyleProps, - TextInputBase, - Validation, - ValueBase -} from '@react-types/shared'; - -export type SelectionMode = 'single' | 'multiple'; -export type ValueType = M extends 'single' ? Key | null : readonly Key[]; -export type ChangeValueType = M extends 'single' ? Key | null : Key[]; -type ValidationType = M extends 'single' ? Key : Key[]; - -export interface SelectProps extends CollectionBase, Omit, ValueBase, ChangeValueType>, Validation>, HelpTextProps, LabelableProps, TextInputBase, FocusableProps { - /** - * Whether single or multiple selection is enabled. - * @default 'single' - */ - selectionMode?: M, - /** - * The currently selected key in the collection (controlled). - * @deprecated - */ - selectedKey?: Key | null, - /** - * The initial selected key in the collection (uncontrolled). - * @deprecated - */ - defaultSelectedKey?: Key | null, - /** - * Handler that is called when the selection changes. - * @deprecated - */ - onSelectionChange?: (key: Key | null) => void, - /** Sets the open state of the menu. */ - isOpen?: boolean, - /** Sets the default open state of the menu. */ - defaultOpen?: boolean, - /** Method that is called when the open state of the menu changes. */ - onOpenChange?: (isOpen: boolean) => void, - /** Whether the Select should close when an item is selected. Defaults to true if selectionMode is single, false otherwise. */ - shouldCloseOnSelect?: boolean, - /** Whether the select should be allowed to be open when the collection is empty. */ - allowsEmptyCollection?: boolean -} - -export interface AriaSelectProps extends SelectProps, DOMProps, AriaLabelingProps, FocusableDOMProps { - /** - * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). - */ - autoComplete?: string, - /** - * The name of the input, used when submitting an HTML form. - */ - name?: string, - /** - * The `` element to associate the input with. - * The value of this attribute must be the id of a `` in the same document. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). - */ - form?: string -} - -export interface SpectrumPickerProps extends Omit, 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | 'allowsEmptyCollection'>, Omit, AsyncLoadable, SpectrumLabelableProps, StyleProps { - /** Whether the textfield should be displayed with a quiet style. */ - isQuiet?: boolean, - /** Alignment of the menu relative to the input target. - * @default 'start' - */ - align?: Alignment, - /** - * Direction the menu will render relative to the Picker. - * @default 'bottom' - */ - direction?: 'bottom' | 'top', - /** - * Whether the menu should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean, - /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */ - menuWidth?: DimensionValue, - /** Whether the element should receive focus on render. */ - autoFocus?: boolean -} +export {SelectionMode, ValueType, ChangeValueType, SelectProps} from '@react-stately/select'; +export {AriaSelectProps} from '@react-aria/select'; +export {SpectrumPickerProps} from '@react-spectrum/picker'; diff --git a/packages/@react-types/shared/src/dom.d.ts b/packages/@react-types/shared/src/dom.d.ts index 5c36c80cd7e..f231d08c45b 100644 --- a/packages/@react-types/shared/src/dom.d.ts +++ b/packages/@react-types/shared/src/dom.d.ts @@ -17,7 +17,9 @@ import { ClipboardEventHandler, CompositionEventHandler, CSSProperties, + FormEvent, FormEventHandler, + FormHTMLAttributes, HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy, MouseEventHandler, @@ -29,6 +31,7 @@ import { UIEventHandler, WheelEventHandler } from 'react'; +import {ValidationErrors} from './inputs'; export interface AriaLabelingProps { /** @@ -341,3 +344,57 @@ export interface GlobalDOMEvents { onTransitionStart?: TransitionEventHandler | undefined, onTransitionStartCapture?: TransitionEventHandler | undefined } + +export interface FormProps extends AriaLabelingProps { + /** + * Validation errors for the form, typically returned by a server. + * This should be set to an object mapping from input names to errors. + */ + validationErrors?: ValidationErrors, + /** + * Where to send the form-data when the form is submitted. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action). + */ + action?: string | FormHTMLAttributes['action'], + /** + * The enctype attribute specifies how the form-data should be encoded when submitting it to the server. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype). + */ + encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain', + /** + * The HTTP method to submit the form with. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method). + */ + method?: 'get' | 'post' | 'dialog', + /** + * The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target). + */ + target?: '_blank' | '_self' | '_parent' | '_top', + /** + * Triggered when a user submits the form. + */ + onSubmit?: (event: FormEvent) => void, + /** + * Triggered when a user resets the form. + */ + onReset?: (event: FormEvent) => void, + /** + * Triggered for each invalid field when a user submits the form. + */ + onInvalid?: (event: FormEvent) => void, + /** + * Indicates whether input elements can by default have their values automatically completed by the browser. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocomplete). + */ + autoComplete?: 'off' | 'on', + /** + * Controls whether inputted text is automatically capitalized and, if so, in what manner. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize). + */ + autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters', + /** + * An ARIA role override to apply to the form element. + */ + role?: 'search' | 'presentation' +} diff --git a/packages/@react-types/sidenav/README.md b/packages/@react-types/sidenav/README.md deleted file mode 100644 index 588e78738a4..00000000000 --- a/packages/@react-types/sidenav/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# @react-types/sidenav - -This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details. \ No newline at end of file diff --git a/packages/@react-types/sidenav/package.json b/packages/@react-types/sidenav/package.json deleted file mode 100644 index 46e815247fe..00000000000 --- a/packages/@react-types/sidenav/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@react-types/sidenav", - "version": "3.0.0-alpha.1", - "description": "Spectrum UI components in React", - "license": "Apache-2.0", - "private": true, - "types": "src/index.d.ts", - "repository": { - "type": "git", - "url": "https://github.com/adobe/react-spectrum" - }, - "dependencies": { - "@react-stately/virtualizer": "^4.0.0", - "@react-types/shared": "^3.1.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", - "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/packages/@react-types/sidenav/src/index.d.ts b/packages/@react-types/sidenav/src/index.d.ts deleted file mode 100644 index ae64a2bd9be..00000000000 --- a/packages/@react-types/sidenav/src/index.d.ts +++ /dev/null @@ -1,35 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {AriaLabelingProps, CollectionBase, DOMProps, Expandable, MultipleSelection, Node, StyleProps} from '@react-types/shared'; -import {HTMLAttributes, ReactNode} from 'react'; - -export interface SideNavProps extends CollectionBase, Expandable, MultipleSelection { - shouldFocusWrap?: boolean -} - -export interface AriaSideNavProps extends SideNavProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumSideNavProps extends AriaSideNavProps, StyleProps { -} - -export interface SpectrumSideNavItemProps extends HTMLAttributes{ - item: Node -} - -export interface SideNavSectionProps { - layoutInfo: any, - headerLayoutInfo: any, - virtualizer: any, - item: Node, - children?: ReactNode -} diff --git a/packages/@react-types/slider/package.json b/packages/@react-types/slider/package.json index dde79f2c8c7..f545147e137 100644 --- a/packages/@react-types/slider/package.json +++ b/packages/@react-types/slider/package.json @@ -9,10 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/slider": "^3.8.5", + "@react-spectrum/slider": "^3.8.5", + "@react-stately/slider": "^3.7.5" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/slider/src/index.d.ts b/packages/@react-types/slider/src/index.d.ts index 023516f228e..0ad69cd64df 100644 --- a/packages/@react-types/slider/src/index.d.ts +++ b/packages/@react-types/slider/src/index.d.ts @@ -1,127 +1,3 @@ -import { - AriaLabelingProps, - AriaValidationProps, - DOMProps, - FocusableDOMProps, - FocusableProps, - InputDOMProps, - LabelableProps, - LabelPosition, - Orientation, - RangeInputBase, - RangeValue, - StyleProps, - ValidationState, - ValueBase -} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SliderProps extends RangeInputBase, ValueBase, LabelableProps { - /** - * The orientation of the Slider. - * @default 'horizontal' - */ - orientation?: Orientation, - /** Whether the whole Slider is disabled. */ - isDisabled?: boolean, - /** Fired when the slider stops moving, due to being let go. */ - onChangeEnd?: (value: T) => void, - // These are duplicated from ValueBase to define defaults for the docs. - /** - * The slider's minimum value. - * @default 0 - */ - minValue?: number, - /** - * The slider's maximum value. - * @default 100 - */ - maxValue?: number, - /** - * The slider's step value. - * @default 1 - */ - step?: number -} - -export interface SliderThumbProps extends FocusableProps, LabelableProps { - /** - * The orientation of the Slider. - * @default 'horizontal' - * @deprecated - pass to the slider instead. - */ - orientation?: Orientation, - /** Whether the Thumb is disabled. */ - isDisabled?: boolean, - /** - * Index of the thumb within the slider. - * @default 0 - */ - index?: number, - /** @deprecated */ - isRequired?: boolean, - /** @deprecated */ - isInvalid?: boolean, - /** @deprecated */ - validationState?: ValidationState -} - -export interface AriaSliderProps extends SliderProps, DOMProps, AriaLabelingProps {} -export interface AriaSliderThumbProps extends SliderThumbProps, DOMProps, Omit, InputDOMProps, AriaLabelingProps, AriaValidationProps {} - -export interface SpectrumBarSliderBase extends AriaSliderProps, ValueBase, StyleProps { - /** - * The display format of the value label. - */ - formatOptions?: Intl.NumberFormatOptions, - /** - * The label's overall position relative to the element it is labeling. - * @default 'top' - */ - labelPosition?: LabelPosition, - /** Whether the value's label is displayed. True by default if there's a `label`, false by default if not. */ - showValueLabel?: boolean, - /** A function that returns the content to display as the value's label. Overrides default formatted number. */ - getValueLabel?: (value: T) => string, - /** - * A ContextualHelp element to place next to the label. - */ - contextualHelp?: ReactNode -} - -export interface SpectrumSliderProps extends SpectrumBarSliderBase, InputDOMProps { - /** - * Whether a fill color is shown between the start of the slider and the current value. - * @see https://spectrum.adobe.com/page/slider/#Fill. - */ - isFilled?: boolean, - /** - * The offset from which to start the fill. - * @see https://spectrum.adobe.com/page/slider/#Fill-start. - */ - fillOffset?: number, - /** - * The background of the track, specified as the stops for a CSS background: `linear-gradient(to right/left, ...trackGradient)`. - * @example trackGradient={['red', 'green']} - * @example trackGradient={['red 20%', 'green 40%']} - * @see https://spectrum.adobe.com/page/slider/#Gradient. - */ - trackGradient?: string[] -} - -export interface SpectrumRangeSliderProps extends SpectrumBarSliderBase> { - /** - * The name of the start input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - startName?: string, - /** - * The name of the end input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - endName?: string, - /** - * The `` element to associate the slider with. - * The value of this attribute must be the id of a `` in the same document. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). - */ - form?: string -} +export {SliderProps} from '@react-stately/slider'; +export {SliderThumbProps, AriaSliderProps, AriaSliderThumbProps} from '@react-aria/slider'; +export {SpectrumBarSliderBase, SpectrumSliderProps, SpectrumRangeSliderProps} from '@react-spectrum/slider'; diff --git a/packages/@react-types/statuslight/package.json b/packages/@react-types/statuslight/package.json index 117f3fdda23..97715c42199 100644 --- a/packages/@react-types/statuslight/package.json +++ b/packages/@react-types/statuslight/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/statuslight": "^3.5.29" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/statuslight/src/index.d.ts b/packages/@react-types/statuslight/src/index.d.ts index 8bc41dbeba5..4846951c029 100644 --- a/packages/@react-types/statuslight/src/index.d.ts +++ b/packages/@react-types/statuslight/src/index.d.ts @@ -10,23 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SpectrumStatusLightProps extends DOMProps, StyleProps, AriaLabelingProps { - /** The content to display as the label. */ - children?: ReactNode, - /** - * The variant changes the color of the status light. - * When status lights have a semantic meaning, they should use the variant for semantic colors. - */ - variant: 'positive' | 'negative' | 'notice' | 'info' | 'neutral' | 'celery' | 'chartreuse' | 'yellow' | 'magenta' | 'fuchsia' | 'purple' | 'indigo' | 'seafoam', - /** Whether the status light is disabled. */ - isDisabled?: boolean, - /** - * An accessibility role for the status light. Should be set when the status - * can change at runtime, and no more than one status light will update simultaneously. - * For cases where multiple statuses can change at the same time, use a Toast instead. - */ - role?: 'status' -} +export {SpectrumStatusLightProps} from '@react-spectrum/statuslight'; diff --git a/packages/@react-types/switch/package.json b/packages/@react-types/switch/package.json index ad78cf85d13..fae655b672e 100644 --- a/packages/@react-types/switch/package.json +++ b/packages/@react-types/switch/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/switch": "^3.7.11", + "@react-spectrum/switch": "^3.6.9" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/switch/src/index.d.ts b/packages/@react-types/switch/src/index.d.ts index fc44520e083..1223da3ac30 100644 --- a/packages/@react-types/switch/src/index.d.ts +++ b/packages/@react-types/switch/src/index.d.ts @@ -10,43 +10,10 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, FocusableDOMProps, FocusableProps, InputBase, InputDOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; +import {AriaSwitchProps} from '@react-aria/switch'; -interface SwitchBase extends InputBase, FocusableProps { - /** - * The content to render as the Switch's label. - */ - children?: ReactNode, - /** - * Whether the Switch should be selected (uncontrolled). - */ - defaultSelected?: boolean, - /** - * Whether the Switch should be selected (controlled). - */ - isSelected?: boolean, - /** - * Handler that is called when the Switch's selection state changes. - */ - onChange?: (isSelected: boolean) => void, - /** - * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). - */ - value?: string -} -export interface SwitchProps extends SwitchBase {} -export interface AriaSwitchBase extends SwitchBase, FocusableDOMProps, InputDOMProps, AriaLabelingProps { - /** - * Identifies the element (or elements) whose contents or presence are controlled by the current element. - */ - 'aria-controls'?: string -} -export interface AriaSwitchProps extends SwitchProps, AriaSwitchBase {} +export {SwitchProps, AriaSwitchProps} from '@react-aria/switch'; +export {SpectrumSwitchProps} from '@react-spectrum/switch'; -export interface SpectrumSwitchProps extends AriaSwitchProps, StyleProps { - /** - * This prop sets the emphasized style which provides visual prominence. - */ - isEmphasized?: boolean -} +// Backward compatibility. +export type AriaSwitchBase = AriaSwitchProps; diff --git a/packages/@react-types/table/package.json b/packages/@react-types/table/package.json index d9483ad6a4d..460cf33757e 100644 --- a/packages/@react-types/table/package.json +++ b/packages/@react-types/table/package.json @@ -9,11 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/grid": "^3.3.8", + "@react-spectrum/table": "^3.17.11", + "@react-stately/table": "^3.15.4", "@react-types/shared": "^3.33.1" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts index 40b720e9670..c72c65d3607 100644 --- a/packages/@react-types/table/src/index.d.ts +++ b/packages/@react-types/table/src/index.d.ts @@ -10,40 +10,12 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, AsyncLoadable, DOMProps, Expandable, Key, LinkDOMProps, LoadingState, MultipleSelection, Sortable, SpectrumSelectionProps, StyleProps} from '@react-types/shared'; -import {GridCollection, GridNode} from '@react-types/grid'; -import {JSX, ReactElement, ReactNode} from 'react'; +import {AriaLabelingProps, DOMProps, Key, SpectrumSelectionProps, StyleProps} from '@react-types/shared'; +import {ColumnSize, TableProps} from '@react-stately/table'; +import {JSX} from 'react'; -/** Widths that result in a constant pixel value for the same Table width. */ -export type ColumnStaticSize = number | `${number}` | `${number}%`; // match regex: /^(\d+)(?=%$)/ -/** - * Widths that change size in relation to the remaining space and in ratio to other dynamic columns. - * All numbers must be integers and greater than 0. - * FR units take up remaining, if any, space in the table. - */ -export type ColumnDynamicSize = `${number}fr`; // match regex: /^(\d+)(?=fr$)/ -/** All possible sizes a column can be assigned. */ -export type ColumnSize = ColumnStaticSize | ColumnDynamicSize; - -export interface TableProps extends MultipleSelection, Sortable, Expandable { - /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */ - children: [ReactElement>, ReactElement>], - /** A list of row keys to disable. */ - disabledKeys?: Iterable, - /** - * Whether pressing the escape key should clear selection in the table or not. - * - * Most experiences should not modify this option as it eliminates a keyboard user's ability to - * easily clear selection. Only use if the escape key is being handled externally or should not - * trigger selection clearing contextually. - * @default 'clearSelection' - */ - escapeKeyBehavior?: 'clearSelection' | 'none', - /** Whether selection should occur on press up instead of press down. */ - shouldSelectOnPressUp?: boolean, - /** The id of the column that displays hierarchical data. */ - treeColumn?: Key -} +export {TableProps, ColumnStaticSize, ColumnDynamicSize, ColumnSize, TableHeaderProps, ColumnElement, ColumnRenderer, ColumnProps, RowElement, TableBodyProps, RowProps, CellProps, CellElement, CellRenderer, ITableCollection as TableCollection} from '@react-stately/table'; +export {SpectrumColumnProps} from '@react-spectrum/table'; /** * @deprecated - use SpectrumTableProps from '@adobe/react-spectrum' instead. @@ -81,109 +53,3 @@ export interface SpectrumTableProps extends TableProps, SpectrumSelectionP */ onResizeEnd?: (widths: Map) => void } - -export interface TableHeaderProps { - /** A list of table columns. */ - columns?: readonly T[], - /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */ - children: ColumnElement | ColumnElement[] | ColumnRenderer -} - -type ColumnElement = ReactElement>; -type ColumnRenderer = (item: T) => ColumnElement; -export interface ColumnProps { - /** Rendered contents of the column if `children` contains child columns. */ - title?: ReactNode, - /** Static child columns or content to render as the column header. */ - children: ReactNode | ColumnElement | ColumnElement[], - /** A list of child columns used when dynamically rendering nested child columns. */ - childColumns?: T[], - /** The width of the column. */ - width?: ColumnSize | null, - /** The minimum width of the column. */ - minWidth?: ColumnStaticSize | null, - /** The maximum width of the column. */ - maxWidth?: ColumnStaticSize | null, - /** The default width of the column. */ - defaultWidth?: ColumnSize | null, - /** Whether the column allows resizing. */ - allowsResizing?: boolean, - /** Whether the column allows sorting. */ - allowsSorting?: boolean, - /** Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and should be announced by assistive technology during row navigation. */ - isRowHeader?: boolean, - /** A string representation of the column's contents, used for accessibility announcements. */ - textValue?: string -} - -// TODO: how to support these in CollectionBuilder... -export interface SpectrumColumnProps extends ColumnProps { - /** - * The alignment of the column's contents relative to its allotted width. - * @default 'start' - */ - align?: 'start' | 'center' | 'end', - // /** Whether the column should stick to the viewport when scrolling. */ - // isSticky?: boolean, // shouldStick?? Not implemented yet? - /** Whether the column should render a divider between it and the next column. */ - showDivider?: boolean, - /** - * Whether the column should hide its header text. A tooltip with the column's header text - * will be displayed when the column header is focused instead. Note that this prop is specifically for columns - * that contain ActionButtons in place of text content. - */ - hideHeader?: boolean -} - -export type RowElement = ReactElement>; -export interface TableBodyProps extends Omit { - /** The contents of the table body. Supports static items or a function for dynamic rendering. */ - children: RowElement | RowElement[] | ((item: T) => RowElement), - /** A list of row objects in the table body used when dynamically rendering rows. */ - items?: Iterable, - /** The current loading state of the table. */ - loadingState?: LoadingState -} - -export interface RowProps extends LinkDOMProps { - /** - * A list of child item objects used when dynamically rendering row children. Requires the feature flag to be - * enabled along with UNSTABLE_allowsExpandableRows, see https://react-spectrum.adobe.com/react-spectrum/TableView.html#expandable-rows. - * @version alpha - * @private - */ - UNSTABLE_childItems?: Iterable, - // TODO: update when async loading is supported for expandable rows - // /** Whether this row has children, even if not loaded yet. */ - // hasChildItems?: boolean, - /** Rendered contents of the row or row child items. */ - children: CellElement | CellElement[] | CellRenderer, - /** A string representation of the row's contents, used for features like typeahead. */ - textValue?: string // ??? -} - -export interface CellProps { - /** The contents of the cell. */ - children: ReactNode, - /** A string representation of the cell's contents, used for features like typeahead. */ - textValue?: string, - /** Indicates how many columns the data cell spans. */ - colSpan?: number -} - -export type CellElement = ReactElement; -export type CellRenderer = (columnKey: Key) => CellElement; - -export interface TableCollection extends GridCollection { - // TODO perhaps elaborate on this? maybe not clear enough, essentially returns the table header rows (e.g. in a tiered headers table, will return the nodes containing the top tier column, next tier, etc) - /** A list of header row nodes in the table. */ - headerRows: GridNode[], - /** A list of column nodes in the table. */ - columns: GridNode[], - /** A set of column keys that serve as the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader). */ - rowHeaderColumnKeys: Set, - /** The node that makes up the header of the table. */ - head?: GridNode, - /** The node that makes up the body of the table. */ - body: GridNode -} diff --git a/packages/@react-types/tabs/package.json b/packages/@react-types/tabs/package.json index 51cf55fd590..964d81e8e78 100644 --- a/packages/@react-types/tabs/package.json +++ b/packages/@react-types/tabs/package.json @@ -9,10 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/tabs": "^3.11.1", + "@react-spectrum/tabs": "^3.8.30", + "@react-stately/tabs": "^3.8.9" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts index 6dbac3214ba..227ad19658f 100644 --- a/packages/@react-types/tabs/src/index.d.ts +++ b/packages/@react-types/tabs/src/index.d.ts @@ -10,89 +10,6 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, CollectionBase, - CollectionChildren, - DOMProps, - Key, - Orientation, - SingleSelection, - StyleProps -} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface AriaTabProps extends AriaLabelingProps { - /** The key of the tab. */ - key: Key, - /** Whether the tab should be disabled. */ - isDisabled?: boolean, - /** Whether the tab selection should occur on press up instead of press down. */ - shouldSelectOnPressUp?: boolean -} - -export interface TabListProps extends CollectionBase, Omit { - /** - * Whether the TabList is disabled. - * Shows that a selection exists, but is not available in that circumstance. - */ - isDisabled?: boolean, - /** The currently selected key in the collection (controlled). */ - selectedKey?: Key, - /** The initial selected keys in the collection (uncontrolled). */ - defaultSelectedKey?: Key, - /** Handler that is called when the selection changes. */ - onSelectionChange?: (key: Key) => void -} - -interface AriaTabListBase extends AriaLabelingProps { - /** - * Whether tabs are activated automatically on focus or manually. - * @default 'automatic' - */ - keyboardActivation?: 'automatic' | 'manual', - /** - * The orientation of the tabs. - * @default 'horizontal' - */ - orientation?: Orientation -} - -export interface AriaTabListProps extends TabListProps, AriaTabListBase, DOMProps, AriaLabelingProps {} - -export interface AriaTabPanelProps extends Omit, AriaLabelingProps { - /** The unique id of the tab. */ - id?: Key -} - -export interface SpectrumTabsProps extends AriaTabListBase, Omit, DOMProps, StyleProps { - /** The children of the `` element. Should include `` and `` elements. */ - children: ReactNode, - /** The item objects for each tab, for dynamic collections. */ - items?: Iterable, - /** The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise interacted with. */ - disabledKeys?: Iterable, - /** Whether the Tabs are disabled. */ - isDisabled?: boolean, - /** Whether the tabs are displayed in a quiet style. */ - isQuiet?: boolean, - /** Whether the tabs are displayed in an emphasized style. */ - isEmphasized?: boolean, - /** The amount of space between the tabs. */ - density?: 'compact' | 'regular', - /** The currently selected key in the collection (controlled). */ - selectedKey?: Key, - /** The initial selected keys in the collection (uncontrolled). */ - defaultSelectedKey?: Key, - /** Handler that is called when the selection changes. */ - onSelectionChange?: (key: Key) => void -} - -export interface SpectrumTabListProps extends DOMProps, StyleProps { - /** The tab items to display. Item keys should match the key of the corresponding `` within the `` element. */ - children: CollectionChildren -} - -export interface SpectrumTabPanelsProps extends DOMProps, StyleProps { - /** The contents of each tab. Item keys should match the key of the corresponding `` within the `` element. */ - children: CollectionChildren -} +export {TabListProps} from '@react-stately/tabs'; +export {AriaTabListProps, AriaTabProps, AriaTabPanelProps} from '@react-aria/tabs'; +export {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-spectrum/tabs'; diff --git a/packages/@react-types/text/package.json b/packages/@react-types/text/package.json index b08533f7fed..1f6a8ab6157 100644 --- a/packages/@react-types/text/package.json +++ b/packages/@react-types/text/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/text": "^3.5.25" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/text/src/heading.d.ts b/packages/@react-types/text/src/heading.d.ts deleted file mode 100644 index f146ffcca9e..00000000000 --- a/packages/@react-types/text/src/heading.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface HeadingProps extends DOMProps, StyleProps { - /** - * Heading content. - */ - children: ReactNode, - /** - * A slot to place the heading in. - * @default 'heading' - */ - slot?: string, - /** - * Sets heading level, h1 through h6. - * @default 3 - */ - level?: 1 | 2 | 3 | 4 | 5 | 6 -} diff --git a/packages/@react-types/text/src/index.d.ts b/packages/@react-types/text/src/index.d.ts index 06f14a6d789..b06e3c28065 100644 --- a/packages/@react-types/text/src/index.d.ts +++ b/packages/@react-types/text/src/index.d.ts @@ -10,6 +10,4 @@ * governing permissions and limitations under the License. */ -export * from './heading'; -export * from './keyboard'; -export * from './text'; +export {HeadingProps, TextProps, KeyboardProps} from '@react-spectrum/text'; diff --git a/packages/@react-types/text/src/keyboard.d.ts b/packages/@react-types/text/src/keyboard.d.ts deleted file mode 100644 index 0a4fcd8d5e0..00000000000 --- a/packages/@react-types/text/src/keyboard.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface KeyboardProps extends DOMProps, StyleProps { - /** - * Keyboard shortcut text. - */ - children: ReactNode, - /** - * A slot to place the keyboard shortcut in. - * @default 'keyboard' - */ - slot?: string -} diff --git a/packages/@react-types/text/src/text.d.ts b/packages/@react-types/text/src/text.d.ts deleted file mode 100644 index 98f9da0afc3..00000000000 --- a/packages/@react-types/text/src/text.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface TextProps extends DOMProps, StyleProps { - /** - * Text content. - */ - children: ReactNode, - /** - * A slot to place the text in. - * @default 'text' - */ - slot?: string -} diff --git a/packages/@react-types/textfield/package.json b/packages/@react-types/textfield/package.json index f4da6aa7e1c..2a0d7f81ef9 100644 --- a/packages/@react-types/textfield/package.json +++ b/packages/@react-types/textfield/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-aria/textfield": "^3.18.5", + "@react-spectrum/textfield": "^3.14.5" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/textfield/src/index.d.ts b/packages/@react-types/textfield/src/index.d.ts index 596ee252182..d72c8bd61d8 100644 --- a/packages/@react-types/textfield/src/index.d.ts +++ b/packages/@react-types/textfield/src/index.d.ts @@ -10,58 +10,5 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - AriaValidationProps, - FocusableDOMProps, - FocusableProps, - FocusableRefValue, - HelpTextProps, - InputBase, - LabelableProps, - SpectrumFieldValidation, - SpectrumLabelableProps, - SpectrumTextInputBase, - StyleProps, - TextInputBase, - TextInputDOMProps, - Validation, - ValueBase -} from '@react-types/shared'; -import {ReactElement} from 'react'; - -export interface TextFieldProps extends InputBase, Validation, HelpTextProps, FocusableProps, TextInputBase, ValueBase, LabelableProps {} - -export interface AriaTextFieldProps extends TextFieldProps, AriaLabelingProps, FocusableDOMProps, TextInputDOMProps, AriaValidationProps { - // https://www.w3.org/TR/wai-aria-1.2/#textbox - /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ - 'aria-activedescendant'?: string, - /** - * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be - * presented if they are made. - */ - 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both', - /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ - 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog', - /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */ - 'aria-controls'?: string, - /** - * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). - */ - enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' -} - -interface SpectrumTextFieldBaseProps { - /** An icon to display at the start of the input. */ - icon?: ReactElement | null, - /** Whether the input should be displayed with a quiet style. */ - isQuiet?: boolean -} - -export interface SpectrumTextFieldProps extends SpectrumTextFieldBaseProps, SpectrumTextInputBase, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps {} -export interface SpectrumTextAreaProps extends SpectrumTextFieldBaseProps, SpectrumTextInputBase, Omit, 'isInvalid' | 'validationState' | 'type' | 'pattern'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps {} - -export interface TextFieldRef extends FocusableRefValue { - select(): void, - getInputElement(): T | null -} +export {TextFieldProps, AriaTextFieldProps} from '@react-aria/textfield'; +export {SpectrumTextFieldProps, SpectrumTextAreaProps, TextFieldRef} from '@react-spectrum/textfield'; diff --git a/packages/@react-types/tooltip/package.json b/packages/@react-types/tooltip/package.json index 7b0d8ab2a72..f8e13673ac9 100644 --- a/packages/@react-types/tooltip/package.json +++ b/packages/@react-types/tooltip/package.json @@ -9,11 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/overlays": "^3.9.4", - "@react-types/shared": "^3.33.1" + "@react-aria/tooltip": "^3.9.2", + "@react-spectrum/tooltip": "^3.8.2", + "@react-stately/tooltip": "^3.5.11" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/tooltip/src/index.d.ts b/packages/@react-types/tooltip/src/index.d.ts index 5bac687bbb5..2d8cf3d9b54 100644 --- a/packages/@react-types/tooltip/src/index.d.ts +++ b/packages/@react-types/tooltip/src/index.d.ts @@ -10,79 +10,6 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared'; -import {OverlayTriggerProps, Placement, PositionProps} from '@react-types/overlays'; -import {ReactElement, ReactNode} from 'react'; - -export interface TooltipTriggerProps extends OverlayTriggerProps { - /** - * Whether the tooltip should be disabled, independent from the trigger. - */ - isDisabled?: boolean, - - /** - * The delay time for the tooltip to show up. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance). - * @default 1500 - */ - delay?: number, - - /** - * The delay time for the tooltip to close. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown). - * @default 500 - */ - closeDelay?: number, - - /** - * By default, opens for both focus and hover. Can be made to open only for focus. - * @default 'hover' - */ - trigger?: 'hover' | 'focus', - - /** - * Whether the tooltip should close when the trigger is pressed. - * @default true - */ - shouldCloseOnPress?: boolean -} - -export interface SpectrumTooltipTriggerProps extends Omit, PositionProps { - children: [ReactElement, ReactElement], - - /** - * The additional offset applied along the main axis between the element and its - * anchor element. - * @default 7 - */ - offset?: number, - /** - * The placement of the tooltip with respect to the trigger. - * @default 'top' - */ - placement?: Placement -} - -export interface TooltipProps { - isOpen?: boolean -} - -export interface AriaTooltipProps extends TooltipProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumTooltipProps extends AriaTooltipProps, StyleProps { - /** - * The [visual style](https://spectrum.adobe.com/page/tooltip/#Semantic-variants) of the Tooltip. - */ - variant?: 'neutral' | 'positive' | 'negative' | 'info', - - /** - * The placement of the element with respect to its anchor element. - * @default 'top' - */ - placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom', - - /** - * Whether the element is rendered. - */ - showIcon?: boolean, - - children: ReactNode -} +export {TooltipTriggerProps} from '@react-stately/tooltip'; +export {TooltipProps, AriaTooltipProps} from '@react-aria/tooltip'; +export {SpectrumTooltipTriggerProps, SpectrumTooltipProps} from '@react-spectrum/tooltip'; diff --git a/packages/@react-types/view/package.json b/packages/@react-types/view/package.json index b252882a7a0..0ce2b43615f 100644 --- a/packages/@react-types/view/package.json +++ b/packages/@react-types/view/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/view": "^3.6.26" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/view/src/content.d.ts b/packages/@react-types/view/src/content.d.ts deleted file mode 100644 index 3ba4aca7341..00000000000 --- a/packages/@react-types/view/src/content.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface ContentProps extends DOMProps, StyleProps { - /** - * Content content. - */ - children: ReactNode -} diff --git a/packages/@react-types/view/src/footer.d.ts b/packages/@react-types/view/src/footer.d.ts deleted file mode 100644 index 3c4b2188943..00000000000 --- a/packages/@react-types/view/src/footer.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface FooterProps extends DOMProps, StyleProps { - /** - * Footer content. - */ - children: ReactNode -} diff --git a/packages/@react-types/view/src/header.d.ts b/packages/@react-types/view/src/header.d.ts deleted file mode 100644 index a8a18cf1bb7..00000000000 --- a/packages/@react-types/view/src/header.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface HeaderProps extends DOMProps, StyleProps { - /** - * Header content. - */ - children: ReactNode -} diff --git a/packages/@react-types/view/src/index.d.ts b/packages/@react-types/view/src/index.d.ts index e95edfc771d..17e72598e4c 100644 --- a/packages/@react-types/view/src/index.d.ts +++ b/packages/@react-types/view/src/index.d.ts @@ -10,7 +10,4 @@ * governing permissions and limitations under the License. */ -export * from './content'; -export * from './header'; -export * from './footer'; -export * from './view'; +export {ContentProps, FooterProps, HeaderProps, ViewProps} from '@react-spectrum/view'; diff --git a/packages/@react-types/view/src/view.d.ts b/packages/@react-types/view/src/view.d.ts deleted file mode 100644 index ce74dfdd66b..00000000000 --- a/packages/@react-types/view/src/view.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {ColorVersion, DOMProps, ViewStyleProps} from '@react-types/shared'; -import {JSXElementConstructor, ReactNode} from 'react'; - -export interface ViewProps extends ViewStyleProps, DOMProps { - /** - * The element to render as the node. - */ - elementType?: string | JSXElementConstructor, - /** - * Children to be displayed in the View. - */ - children?: ReactNode -} diff --git a/packages/@react-types/well/package.json b/packages/@react-types/well/package.json index 0e2252d4ca2..4afb9758a2a 100644 --- a/packages/@react-types/well/package.json +++ b/packages/@react-types/well/package.json @@ -9,10 +9,12 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.33.1" + "@react-spectrum/well": "^3.4.30" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/well/src/index.d.ts b/packages/@react-types/well/src/index.d.ts index 3b65ed36b87..df040f47326 100644 --- a/packages/@react-types/well/src/index.d.ts +++ b/packages/@react-types/well/src/index.d.ts @@ -10,18 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SpectrumWellProps extends DOMProps, AriaLabelingProps, StyleProps { - /** - * The contents of the Well. - */ - children: ReactNode, - /** - * An accessibility role for the well. Use `'region'` when the contents of the well - * is important enough to be included in the page table of contents, and `'group'` otherwise. - * If a role is provided, then an aria-label or aria-labelledby must also be provided. - */ - role?: 'region' | 'group' -} +export {SpectrumWellProps} from '@react-spectrum/well'; diff --git a/packages/dev/docs/pages/react-spectrum/theming.mdx b/packages/dev/docs/pages/react-spectrum/theming.mdx index 34bed6316f8..557b57b97e2 100644 --- a/packages/dev/docs/pages/react-spectrum/theming.mdx +++ b/packages/dev/docs/pages/react-spectrum/theming.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import docs from 'docs:@react-types/provider/src/index.d.ts'; +import docs from 'docs:@react-spectrum/provider'; import {Layout, TypeLink} from '@react-spectrum/docs'; export default Layout; diff --git a/packages/dev/s2-docs/package.json b/packages/dev/s2-docs/package.json index 6190d5f041a..825aeda9bf7 100644 --- a/packages/dev/s2-docs/package.json +++ b/packages/dev/s2-docs/package.json @@ -41,7 +41,6 @@ "@react-spectrum/s2": "^1.0.0", "@react-spectrum/utils": "^3.12.6", "@react-types/shared": "^3.30.0", - "@react-types/textfield": "^3.12.3", "emojibase-data": "^16.0.3", "fast-glob": "^3.3.3", "globals-docs": "^2.4.1", diff --git a/packages/dev/s2-docs/pages/s2/home/Mobile.tsx b/packages/dev/s2-docs/pages/s2/home/Mobile.tsx index 8116ebe34b8..ad2663bdbb2 100644 --- a/packages/dev/s2-docs/pages/s2/home/Mobile.tsx +++ b/packages/dev/s2-docs/pages/s2/home/Mobile.tsx @@ -8,14 +8,13 @@ import iphone from 'url:@react-spectrum/docs/pages/assets/iphone-frame.webp'; // @ts-ignore import iphoneMask from 'url:@react-spectrum/docs/pages/assets/iphone-mask.webp'; import {WifiIcon} from 'lucide-react'; -import { Avatar, Button, Form, TextField } from '@react-spectrum/s2'; +import { Avatar, Button, Form, TextField, TextFieldRef } from '@react-spectrum/s2'; import MenuHamburger from '@react-spectrum/s2/icons/MenuHamburger'; import Search from '@react-spectrum/s2/icons/Search'; import More from '@react-spectrum/s2/icons/More'; // @ts-ignore import {AdobeLogo} from '../../../src/icons/AdobeLogo'; import {animate, useIntersectionObserver} from '@react-spectrum/docs/pages/react-aria/home/utils'; -import {TextFieldRef} from '@react-types/textfield'; import {FocusableRefValue} from '@react-types/shared'; const translate = (x: number, y: number) => `translate(${x}px, ${y}px)`; diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx index 9457c33d5a5..a0f7d1b04a9 100644 --- a/packages/dev/s2-docs/src/SearchMenu.tsx +++ b/packages/dev/s2-docs/src/SearchMenu.tsx @@ -1,6 +1,6 @@ 'use client'; -import {ActionButton, SearchField} from '@react-spectrum/s2'; +import {ActionButton, SearchField, TextFieldRef} from '@react-spectrum/s2'; import {Autocomplete, Dialog, Key, OverlayTriggerStateContext, Provider} from 'react-aria-components'; import Close from '@react-spectrum/s2/icons/Close'; import {ColorSearchSkeleton} from './colorSearchData'; @@ -19,11 +19,10 @@ import React, {CSSProperties, Suspense, useCallback, useEffect, useRef, useState import {SearchTagGroups} from './SearchTagGroups'; import {style} from '@react-spectrum/s2/style' with { type: 'macro' }; import {Tab, TabList, TabPanel, Tabs} from './Tabs'; -import {TextFieldRef} from '@react-types/textfield'; import {TypographySearchView} from './TypographySearchView'; -import {useRouter} from './Router'; import './SearchMenu.css'; import {preloadComponentImages} from './ComponentCard'; +import {useRouter} from './Router'; export const divider = style({ marginY: 8, diff --git a/packages/react-aria-components/docs/Dialog.mdx b/packages/react-aria-components/docs/Dialog.mdx index 9d8e500b38b..56776cc22d5 100644 --- a/packages/react-aria-components/docs/Dialog.mdx +++ b/packages/react-aria-components/docs/Dialog.mdx @@ -11,7 +11,6 @@ import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:react-aria-components'; -import typesDocs from 'docs:@react-types/overlays'; import overlayStatelyDocs from 'docs:@react-stately/overlays'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable, VersionBadge, ClassAPI} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; diff --git a/packages/react-aria-components/docs/Modal.mdx b/packages/react-aria-components/docs/Modal.mdx index ef3f090acca..c1430559ef0 100644 --- a/packages/react-aria-components/docs/Modal.mdx +++ b/packages/react-aria-components/docs/Modal.mdx @@ -11,7 +11,6 @@ import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:react-aria-components'; -import typesDocs from 'docs:@react-types/overlays'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; import packageData from 'react-aria-components/package.json'; diff --git a/packages/react-aria-components/docs/Popover.mdx b/packages/react-aria-components/docs/Popover.mdx index 453ce476735..e7f3a568771 100644 --- a/packages/react-aria-components/docs/Popover.mdx +++ b/packages/react-aria-components/docs/Popover.mdx @@ -11,7 +11,7 @@ import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:react-aria-components'; -import typesDocs from 'docs:@react-types/overlays'; +import typesDocs from 'docs:@react-aria/overlays'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; import packageData from 'react-aria-components/package.json'; diff --git a/packages/react-aria-components/package.json b/packages/react-aria-components/package.json index 8322cba5da9..f693445e379 100644 --- a/packages/react-aria-components/package.json +++ b/packages/react-aria-components/package.json @@ -42,7 +42,6 @@ }, "dependencies": { "@internationalized/date": "^3.12.0", - "@internationalized/string": "^3.2.7", "@react-aria/autocomplete": "3.0.0-rc.6", "@react-aria/collections": "^3.0.3", "@react-aria/dnd": "^3.11.6", @@ -56,20 +55,17 @@ "@react-aria/utils": "^3.33.1", "@react-aria/virtualizer": "^4.1.13", "@react-stately/autocomplete": "3.0.0-beta.4", + "@react-stately/grid": "^3.11.9", "@react-stately/layout": "^4.6.0", "@react-stately/selection": "^3.20.9", "@react-stately/table": "^3.15.4", "@react-stately/utils": "^3.11.0", "@react-stately/virtualizer": "^4.4.6", - "@react-types/form": "^3.7.18", - "@react-types/grid": "^3.3.8", "@react-types/shared": "^3.33.1", - "@react-types/table": "^3.13.6", "@swc/helpers": "^0.5.0", "client-only": "^0.0.1", "react-aria": "^3.47.0", - "react-stately": "^3.45.0", - "use-sync-external-store": "^1.6.0" + "react-stately": "^3.45.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", diff --git a/packages/react-aria-components/src/Form.tsx b/packages/react-aria-components/src/Form.tsx index 4b0061b5081..62a9fece75f 100644 --- a/packages/react-aria-components/src/Form.tsx +++ b/packages/react-aria-components/src/Form.tsx @@ -12,9 +12,8 @@ import {ContextValue, dom, DOMProps, DOMRenderProps, useContextProps} from './utils'; import {FormValidationContext} from 'react-stately'; -import {GlobalDOMAttributes} from '@react-types/shared'; +import {GlobalDOMAttributes, FormProps as SharedFormProps} from '@react-types/shared'; import React, {createContext, ForwardedRef, forwardRef} from 'react'; -import {FormProps as SharedFormProps} from '@react-types/form'; export interface FormProps extends SharedFormProps, DOMProps, DOMRenderProps<'form', undefined>, GlobalDOMAttributes { /** diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx index 3e68b7bc624..bd07ee495bc 100644 --- a/packages/react-aria-components/src/Table.tsx +++ b/packages/react-aria-components/src/Table.tsx @@ -19,13 +19,12 @@ import { useRenderProps } from './utils'; import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection'; -import {ColumnSize, ColumnStaticSize, TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table'; -import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, MultipleSelectionState, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, UNSTABLE_useFilteredTableState, useMultipleSelectionState, useTableColumnResizeState, useTableState} from 'react-stately'; +import {ColumnSize, ColumnStaticSize, DisabledBehavior, DraggableCollectionState, DroppableCollectionState, ITableCollection, MultipleSelectionState, Node, SelectionBehavior, SelectionMode, TableProps as SharedTableProps, SortDirection, TableState, UNSTABLE_useFilteredTableState, useMultipleSelectionState, useTableColumnResizeState, useTableState} from 'react-stately'; import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop'; import {DragAndDropHooks} from './useDragAndDrop'; import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useLocalizedStringFormatter, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria'; import {filterDOMProps, inertValue, isScrollable, LoadMoreSentinelProps, mergeRefs, useLayoutEffect, useLoadMoreSentinel, useObjectRef, useResizeObserver} from '@react-aria/utils'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; import React, {createContext, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; diff --git a/packages/react-aria-components/test/RangeCalendar.test.tsx b/packages/react-aria-components/test/RangeCalendar.test.tsx index 61c258f6b11..7de427a2d19 100644 --- a/packages/react-aria-components/test/RangeCalendar.test.tsx +++ b/packages/react-aria-components/test/RangeCalendar.test.tsx @@ -13,7 +13,7 @@ import {act, pointerMap, render, within} from '@react-spectrum/test-utils-internal'; import {Button, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Heading, RangeCalendar, RangeCalendarContext} from 'react-aria-components'; import {CalendarDate, getLocalTimeZone, startOfMonth, startOfWeek, today} from '@internationalized/date'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from '@react-stately/calendar'; import {RangeValue} from '@react-types/shared'; import React from 'react'; import userEvent from '@testing-library/user-event'; diff --git a/packages/react-stately/src/index.ts b/packages/react-stately/src/index.ts index cfffea50e21..1d748bf872b 100644 --- a/packages/react-stately/src/index.ts +++ b/packages/react-stately/src/index.ts @@ -27,7 +27,7 @@ export type {SelectProps, SelectState, SelectStateOptions} from '@react-stately/ export type {SliderState, SliderStateOptions} from '@react-stately/slider'; export type {MultipleSelectionManager, MultipleSelectionState, SingleSelectionState} from '@react-stately/selection'; export type {NumberFieldState, NumberFieldStateOptions} from '@react-stately/numberfield'; -export type {TableState, TableStateProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps, TableColumnResizeState, TableColumnResizeStateProps} from '@react-stately/table'; +export type {TableProps, TableState, TableStateProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps, TableColumnResizeState, TableColumnResizeStateProps, ColumnSize, ColumnStaticSize, ColumnDynamicSize, ITableCollection} from '@react-stately/table'; export type {TabListProps, TabListState} from '@react-stately/tabs'; export type {ToastState, QueuedToast, ToastStateProps, ToastOptions} from '@react-stately/toast'; export type {ToggleProps, ToggleState, ToggleGroupProps, ToggleGroupState} from '@react-stately/toggle'; diff --git a/scripts/removeUnusedDeps.js b/scripts/removeUnusedDeps.js index 11eed27ac0f..365e6f952d6 100644 --- a/scripts/removeUnusedDeps.js +++ b/scripts/removeUnusedDeps.js @@ -20,7 +20,7 @@ for (let pkg of glob('packages/{react-aria-components,{@react-aria,@react-spectr allowReturnOutsideFunction: true, strictMode: false, sourceType: 'module', - plugins: ['classProperties', 'exportDefaultFrom', 'exportNamespaceFrom', 'dynamicImport', 'typescript', 'jsx', 'classPrivateProperties', 'classPrivateMethods'] + plugins: ['classProperties', 'exportDefaultFrom', 'exportNamespaceFrom', 'dynamicImport', 'typescript', 'jsx', 'classPrivateProperties', 'classPrivateMethods', 'importAttributes'] }); for (let node of ast.program.body) { diff --git a/yarn.lock b/yarn.lock index e6d2b3aa840..9e3ca4294c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5927,7 +5927,6 @@ __metadata: "@react-aria/interactions": "npm:^3.27.1" "@react-aria/utils": "npm:^3.33.1" "@react-stately/list": "npm:^3.13.4" - "@react-types/actiongroup": "npm:^3.4.23" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5951,6 +5950,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/autocomplete@workspace:packages/@react-aria/autocomplete" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/combobox": "npm:^3.15.0" "@react-aria/focus": "npm:^3.21.5" "@react-aria/i18n": "npm:^3.12.16" @@ -5961,8 +5961,7 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-stately/autocomplete": "npm:3.0.0-beta.4" "@react-stately/combobox": "npm:^3.13.0" - "@react-types/autocomplete": "npm:3.0.0-alpha.38" - "@react-types/button": "npm:^3.15.1" + "@react-stately/searchfield": "npm:^3.5.19" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5978,7 +5977,6 @@ __metadata: "@react-aria/i18n": "npm:^3.12.16" "@react-aria/link": "npm:^3.8.9" "@react-aria/utils": "npm:^3.33.1" - "@react-types/breadcrumbs": "npm:^3.7.19" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5995,7 +5993,6 @@ __metadata: "@react-aria/toolbar": "npm:3.0.0-beta.24" "@react-aria/utils": "npm:^3.33.1" "@react-stately/toggle": "npm:^3.9.5" - "@react-types/button": "npm:^3.15.1" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6009,13 +6006,12 @@ __metadata: resolution: "@react-aria/calendar@workspace:packages/@react-aria/calendar" dependencies: "@internationalized/date": "npm:^3.12.0" + "@react-aria/button": "npm:^3.14.5" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" "@react-aria/live-announcer": "npm:^3.4.4" "@react-aria/utils": "npm:^3.33.1" "@react-stately/calendar": "npm:^3.9.3" - "@react-types/button": "npm:^3.15.1" - "@react-types/calendar": "npm:^3.8.3" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6036,7 +6032,6 @@ __metadata: "@react-stately/checkbox": "npm:^3.7.5" "@react-stately/form": "npm:^3.2.4" "@react-stately/toggle": "npm:^3.9.5" - "@react-types/checkbox": "npm:^3.10.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6051,7 +6046,6 @@ __metadata: dependencies: "@react-aria/interactions": "npm:^3.27.1" "@react-aria/ssr": "npm:^3.9.10" - "@react-aria/utils": "npm:^3.33.1" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" use-sync-external-store: "npm:^1.6.0" @@ -6075,7 +6069,6 @@ __metadata: "@react-aria/visually-hidden": "npm:^3.8.31" "@react-stately/color": "npm:^3.9.5" "@react-stately/form": "npm:^3.2.4" - "@react-types/color": "npm:^3.1.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6088,9 +6081,9 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/combobox@workspace:packages/@react-aria/combobox" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/focus": "npm:^3.21.5" "@react-aria/i18n": "npm:^3.12.16" - "@react-aria/interactions": "npm:^3.27.1" "@react-aria/listbox": "npm:^3.15.3" "@react-aria/live-announcer": "npm:^3.4.4" "@react-aria/menu": "npm:^3.21.0" @@ -6101,8 +6094,6 @@ __metadata: "@react-stately/collections": "npm:^3.12.10" "@react-stately/combobox": "npm:^3.13.0" "@react-stately/form": "npm:^3.2.4" - "@react-types/button": "npm:^3.15.1" - "@react-types/combobox": "npm:^3.14.0" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6118,6 +6109,8 @@ __metadata: "@internationalized/date": "npm:^3.12.0" "@internationalized/number": "npm:^3.6.5" "@internationalized/string": "npm:^3.2.7" + "@react-aria/button": "npm:^3.14.5" + "@react-aria/dialog": "npm:^3.5.34" "@react-aria/focus": "npm:^3.21.5" "@react-aria/form": "npm:^3.1.5" "@react-aria/i18n": "npm:^3.12.16" @@ -6125,12 +6118,9 @@ __metadata: "@react-aria/label": "npm:^3.7.25" "@react-aria/spinbutton": "npm:^3.7.2" "@react-aria/utils": "npm:^3.33.1" + "@react-stately/calendar": "npm:^3.9.3" "@react-stately/datepicker": "npm:^3.16.1" "@react-stately/form": "npm:^3.2.4" - "@react-types/button": "npm:^3.15.1" - "@react-types/calendar": "npm:^3.8.3" - "@react-types/datepicker": "npm:^3.13.5" - "@react-types/dialog": "npm:^3.5.24" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6146,7 +6136,6 @@ __metadata: "@react-aria/interactions": "npm:^3.27.1" "@react-aria/overlays": "npm:^3.31.2" "@react-aria/utils": "npm:^3.33.1" - "@react-types/dialog": "npm:^3.5.24" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6159,10 +6148,10 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/disclosure@workspace:packages/@react-aria/disclosure" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/ssr": "npm:^3.9.10" "@react-aria/utils": "npm:^3.33.1" "@react-stately/disclosure": "npm:^3.0.11" - "@react-types/button": "npm:^3.15.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6175,6 +6164,7 @@ __metadata: resolution: "@react-aria/dnd@workspace:packages/@react-aria/dnd" dependencies: "@internationalized/string": "npm:^3.2.7" + "@react-aria/button": "npm:^3.14.5" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" "@react-aria/live-announcer": "npm:^3.4.4" @@ -6182,7 +6172,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-stately/collections": "npm:^3.12.10" "@react-stately/dnd": "npm:^3.7.4" - "@react-types/button": "npm:^3.15.1" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6231,6 +6220,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/grid@workspace:packages/@react-aria/grid" dependencies: + "@react-aria/checkbox": "npm:^3.16.5" "@react-aria/focus": "npm:^3.21.5" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" @@ -6240,8 +6230,6 @@ __metadata: "@react-stately/collections": "npm:^3.12.10" "@react-stately/grid": "npm:^3.11.9" "@react-stately/selection": "npm:^3.20.9" - "@react-types/checkbox": "npm:^3.10.4" - "@react-types/grid": "npm:^3.3.8" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6294,7 +6282,6 @@ __metadata: dependencies: "@react-aria/ssr": "npm:^3.9.10" "@react-aria/utils": "npm:^3.33.1" - "@react-stately/flags": "npm:^3.1.2" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6336,7 +6323,6 @@ __metadata: dependencies: "@react-aria/interactions": "npm:^3.27.1" "@react-aria/utils": "npm:^3.33.1" - "@react-types/link": "npm:^3.6.7" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6355,7 +6341,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-stately/collections": "npm:^3.12.10" "@react-stately/list": "npm:^3.13.4" - "@react-types/listbox": "npm:^3.7.6" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6389,7 +6374,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/menu@workspace:packages/@react-aria/menu" dependencies: - "@react-aria/focus": "npm:^3.21.5" + "@react-aria/button": "npm:^3.14.5" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" "@react-aria/overlays": "npm:^3.31.2" @@ -6399,8 +6384,6 @@ __metadata: "@react-stately/menu": "npm:^3.9.11" "@react-stately/selection": "npm:^3.20.9" "@react-stately/tree": "npm:^3.9.6" - "@react-types/button": "npm:^3.15.1" - "@react-types/menu": "npm:^3.10.7" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6414,7 +6397,6 @@ __metadata: resolution: "@react-aria/meter@workspace:packages/@react-aria/meter" dependencies: "@react-aria/progress": "npm:^3.4.30" - "@react-types/meter": "npm:^3.4.15" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6427,6 +6409,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/numberfield@workspace:packages/@react-aria/numberfield" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" "@react-aria/live-announcer": "npm:^3.4.4" @@ -6435,8 +6418,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-stately/form": "npm:^3.2.4" "@react-stately/numberfield": "npm:^3.11.0" - "@react-types/button": "npm:^3.15.1" - "@react-types/numberfield": "npm:^3.8.18" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6457,6 +6438,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/overlays@workspace:packages/@react-aria/overlays" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/focus": "npm:^3.21.5" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" @@ -6465,8 +6447,6 @@ __metadata: "@react-aria/visually-hidden": "npm:^3.8.31" "@react-stately/flags": "npm:^3.1.2" "@react-stately/overlays": "npm:^3.6.23" - "@react-types/button": "npm:^3.15.1" - "@react-types/overlays": "npm:^3.9.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6490,7 +6470,6 @@ __metadata: "@react-aria/i18n": "npm:^3.12.16" "@react-aria/label": "npm:^3.7.25" "@react-aria/utils": "npm:^3.33.1" - "@react-types/progress": "npm:^3.5.18" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6510,7 +6489,6 @@ __metadata: "@react-aria/label": "npm:^3.7.25" "@react-aria/utils": "npm:^3.33.1" "@react-stately/radio": "npm:^3.11.5" - "@react-types/radio": "npm:^3.9.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6523,12 +6501,11 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/searchfield@workspace:packages/@react-aria/searchfield" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/textfield": "npm:^3.18.5" "@react-aria/utils": "npm:^3.33.1" "@react-stately/searchfield": "npm:^3.5.19" - "@react-types/button": "npm:^3.15.1" - "@react-types/searchfield": "npm:^3.6.8" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6541,6 +6518,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/select@workspace:packages/@react-aria/select" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/form": "npm:^3.1.5" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" @@ -6551,8 +6529,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-aria/visually-hidden": "npm:^3.8.31" "@react-stately/select": "npm:^3.9.2" - "@react-types/button": "npm:^3.15.1" - "@react-types/select": "npm:^3.12.2" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6601,7 +6577,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-stately/slider": "npm:^3.7.5" "@react-types/shared": "npm:^3.33.1" - "@react-types/slider": "npm:^3.8.4" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6613,10 +6588,10 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/spinbutton@workspace:packages/@react-aria/spinbutton" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/live-announcer": "npm:^3.4.4" "@react-aria/utils": "npm:^3.33.1" - "@react-types/button": "npm:^3.15.1" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6658,7 +6633,6 @@ __metadata: "@react-aria/toggle": "npm:^3.12.5" "@react-stately/toggle": "npm:^3.9.5" "@react-types/shared": "npm:^3.33.1" - "@react-types/switch": "npm:^3.5.17" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6671,7 +6645,7 @@ __metadata: resolution: "@react-aria/table@workspace:packages/@react-aria/table" dependencies: "@react-aria/button": "npm:^3.14.5" - "@react-aria/focus": "npm:^3.21.5" + "@react-aria/checkbox": "npm:^3.16.5" "@react-aria/grid": "npm:^3.14.8" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" @@ -6679,12 +6653,9 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-aria/visually-hidden": "npm:^3.8.31" "@react-stately/collections": "npm:^3.12.10" - "@react-stately/flags": "npm:^3.1.2" + "@react-stately/grid": "npm:^3.11.9" "@react-stately/table": "npm:^3.15.4" - "@react-types/checkbox": "npm:^3.10.4" - "@react-types/grid": "npm:^3.3.8" "@react-types/shared": "npm:^3.33.1" - "@react-types/table": "npm:^3.13.6" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6702,7 +6673,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-stately/tabs": "npm:^3.8.9" "@react-types/shared": "npm:^3.33.1" - "@react-types/tabs": "npm:^3.3.22" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6714,6 +6684,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/tag@workspace:packages/@react-aria/tag" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/gridlist": "npm:^3.14.4" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" @@ -6721,7 +6692,6 @@ __metadata: "@react-aria/selection": "npm:^3.27.2" "@react-aria/utils": "npm:^3.33.1" "@react-stately/list": "npm:^3.13.4" - "@react-types/button": "npm:^3.15.1" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6755,7 +6725,6 @@ __metadata: "@react-stately/form": "npm:^3.2.4" "@react-stately/utils": "npm:^3.11.0" "@react-types/shared": "npm:^3.33.1" - "@react-types/textfield": "npm:^3.12.8" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6767,12 +6736,12 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/toast@workspace:packages/@react-aria/toast" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" "@react-aria/landmark": "npm:^3.0.10" "@react-aria/utils": "npm:^3.33.1" "@react-stately/toast": "npm:^3.1.3" - "@react-types/button": "npm:^3.15.1" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6788,7 +6757,6 @@ __metadata: "@react-aria/interactions": "npm:^3.27.1" "@react-aria/utils": "npm:^3.33.1" "@react-stately/toggle": "npm:^3.9.5" - "@react-types/checkbox": "npm:^3.10.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6820,7 +6788,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-stately/tooltip": "npm:^3.5.11" "@react-types/shared": "npm:^3.33.1" - "@react-types/tooltip": "npm:^3.5.2" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6832,12 +6799,11 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/tree@workspace:packages/@react-aria/tree" dependencies: + "@react-aria/button": "npm:^3.14.5" "@react-aria/gridlist": "npm:^3.14.4" "@react-aria/i18n": "npm:^3.12.16" - "@react-aria/selection": "npm:^3.27.2" "@react-aria/utils": "npm:^3.33.1" "@react-stately/tree": "npm:^3.9.6" - "@react-types/button": "npm:^3.15.1" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6867,7 +6833,6 @@ __metadata: resolution: "@react-aria/virtualizer@workspace:packages/@react-aria/virtualizer" dependencies: "@react-aria/i18n": "npm:^3.12.16" - "@react-aria/interactions": "npm:^3.27.1" "@react-aria/utils": "npm:^3.33.1" "@react-stately/virtualizer": "npm:^4.4.6" "@react-types/shared": "npm:^3.33.1" @@ -6926,7 +6891,6 @@ __metadata: "@react-spectrum/text": "npm:^3.5.25" "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/collections": "npm:^3.12.10" - "@react-types/actionbar": "npm:^3.1.21" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -6954,7 +6918,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/collections": "npm:^3.12.10" "@react-stately/list": "npm:^3.13.4" - "@react-types/actiongroup": "npm:^3.4.23" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@spectrum-icons/workflow": "npm:^4.2.28" @@ -6991,8 +6954,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/collections": "npm:^3.12.10" "@react-stately/combobox": "npm:^3.13.0" - "@react-types/autocomplete": "npm:3.0.0-alpha.38" - "@react-types/button": "npm:^3.15.1" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7010,7 +6971,6 @@ __metadata: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/avatar": "npm:^3.0.21" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7028,7 +6988,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/text": "npm:^3.5.25" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/badge": "npm:^3.1.23" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7052,7 +7011,6 @@ __metadata: "@react-spectrum/menu": "npm:^3.22.11" "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/collections": "npm:^3.12.10" - "@react-types/breadcrumbs": "npm:^3.7.19" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7078,7 +7036,6 @@ __metadata: "@react-spectrum/text": "npm:^3.5.25" "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/toggle": "npm:^3.9.5" - "@react-types/button": "npm:^3.15.1" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7097,7 +7054,6 @@ __metadata: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/buttongroup": "npm:^3.3.23" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/workflow": "npm:^4.0.0" "@swc/helpers": "npm:^0.5.0" @@ -7114,6 +7070,7 @@ __metadata: dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@internationalized/date": "npm:^3.12.0" + "@react-aria/button": "npm:^3.14.5" "@react-aria/calendar": "npm:^3.9.5" "@react-aria/focus": "npm:^3.21.5" "@react-aria/i18n": "npm:^3.12.16" @@ -7125,8 +7082,6 @@ __metadata: "@react-spectrum/test-utils-internal": "npm:3.0.0-alpha.1" "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/calendar": "npm:^3.9.3" - "@react-types/button": "npm:^3.15.1" - "@react-types/calendar": "npm:^3.8.3" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7137,7 +7092,7 @@ __metadata: languageName: unknown linkType: soft -"@react-spectrum/card@workspace:packages/@react-spectrum/card": +"@react-spectrum/card@npm:3.0.0-alpha.53, @react-spectrum/card@workspace:packages/@react-spectrum/card": version: 0.0.0-use.local resolution: "@react-spectrum/card@workspace:packages/@react-spectrum/card" dependencies: @@ -7155,8 +7110,6 @@ __metadata: "@react-stately/grid": "npm:^3.11.9" "@react-stately/list": "npm:^3.13.4" "@react-stately/virtualizer": "npm:^4.4.6" - "@react-types/card": "npm:3.0.0-alpha.43" - "@react-types/provider": "npm:^3.8.15" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7179,7 +7132,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/checkbox": "npm:^3.7.5" "@react-stately/toggle": "npm:^3.9.5" - "@react-types/checkbox": "npm:^3.10.4" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7240,9 +7192,7 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-spectrum/view": "npm:^3.6.26" "@react-stately/color": "npm:^3.9.5" - "@react-types/color": "npm:^3.1.4" "@react-types/shared": "npm:^3.33.1" - "@react-types/textfield": "npm:^3.12.8" "@swc/helpers": "npm:^0.5.0" react-aria-components: "npm:^1.16.0" peerDependencies: @@ -7277,8 +7227,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/collections": "npm:^3.12.10" "@react-stately/combobox": "npm:^3.13.0" - "@react-types/button": "npm:^3.15.1" - "@react-types/combobox": "npm:^3.14.0" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7295,13 +7243,14 @@ __metadata: dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/i18n": "npm:^3.12.16" + "@react-aria/overlays": "npm:^3.31.2" "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/button": "npm:^3.17.7" "@react-spectrum/dialog": "npm:^3.9.7" "@react-spectrum/link": "npm:^3.2.0" "@react-spectrum/utils": "npm:^3.12.12" "@react-spectrum/view": "npm:^3.1.3" - "@react-types/contextualhelp": "npm:^3.2.24" + "@react-stately/overlays": "npm:^3.6.23" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/workflow": "npm:^4.2.28" "@swc/helpers": "npm:^0.5.0" @@ -7333,7 +7282,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-spectrum/view": "npm:^3.6.26" "@react-stately/datepicker": "npm:^3.16.1" - "@react-types/datepicker": "npm:^3.13.5" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@spectrum-icons/workflow": "npm:^4.2.28" @@ -7365,8 +7313,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-spectrum/view": "npm:^3.6.26" "@react-stately/overlays": "npm:^3.6.23" - "@react-types/button": "npm:^3.15.1" - "@react-types/dialog": "npm:^3.5.24" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7384,7 +7330,6 @@ __metadata: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/separator": "npm:^3.4.16" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/divider": "npm:^3.3.23" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7490,7 +7435,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/form": "npm:^3.2.4" - "@react-types/form": "npm:^3.7.18" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7524,7 +7468,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/layout": "npm:^3.6.22" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/illustratedmessage": "npm:^3.3.23" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7541,7 +7484,6 @@ __metadata: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/image": "npm:^3.5.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7581,7 +7523,6 @@ __metadata: "@react-spectrum/form": "npm:^3.7.22" "@react-spectrum/layout": "npm:^3.6.22" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/label": "npm:^3.9.17" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7618,7 +7559,6 @@ __metadata: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/layout": "npm:^3.3.29" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7638,7 +7578,6 @@ __metadata: "@react-aria/link": "npm:^3.8.9" "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/link": "npm:^3.6.7" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7672,10 +7611,10 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/collections": "npm:^3.12.10" "@react-stately/dnd": "npm:^3.0.0" + "@react-stately/grid": "npm:^3.11.9" "@react-stately/layout": "npm:^4.6.0" "@react-stately/list": "npm:^3.13.4" "@react-stately/virtualizer": "npm:^4.4.6" - "@react-types/grid": "npm:^3.3.8" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7706,7 +7645,6 @@ __metadata: "@react-stately/layout": "npm:^4.6.0" "@react-stately/list": "npm:^3.13.4" "@react-stately/virtualizer": "npm:^4.4.6" - "@react-types/listbox": "npm:^3.7.6" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7750,10 +7688,7 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/collections": "npm:^3.12.10" "@react-stately/menu": "npm:^3.9.11" - "@react-stately/overlays": "npm:^3.6.23" "@react-stately/tree": "npm:^3.9.6" - "@react-types/menu": "npm:^3.10.7" - "@react-types/overlays": "npm:^3.9.4" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@spectrum-icons/workflow": "npm:^4.2.28" @@ -7773,7 +7708,6 @@ __metadata: "@react-aria/meter": "npm:^3.4.30" "@react-spectrum/progress": "npm:^3.7.23" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/meter": "npm:^3.4.15" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7800,8 +7734,6 @@ __metadata: "@react-spectrum/textfield": "npm:^3.14.5" "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/numberfield": "npm:^3.11.0" - "@react-types/button": "npm:^3.15.1" - "@react-types/numberfield": "npm:^3.8.18" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@spectrum-icons/workflow": "npm:^4.2.28" @@ -7823,7 +7755,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/overlays": "npm:^3.6.23" - "@react-types/overlays": "npm:^3.9.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" react-transition-group: "npm:^4.4.5" @@ -7896,7 +7827,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/collections": "npm:^3.12.10" "@react-stately/select": "npm:^3.9.2" - "@react-types/select": "npm:^3.12.2" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" @@ -7915,7 +7845,6 @@ __metadata: "@react-aria/progress": "npm:^3.4.30" "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/progress": "npm:^3.5.18" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7934,7 +7863,6 @@ __metadata: "@react-aria/overlays": "npm:^3.31.2" "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" - "@react-types/provider": "npm:^3.8.15" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" clsx: "npm:^2.0.0" @@ -7956,7 +7884,6 @@ __metadata: "@react-spectrum/label": "npm:^3.16.22" "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/radio": "npm:^3.11.5" - "@react-types/radio": "npm:^3.9.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7980,7 +7907,6 @@ __metadata: "@react-spectrum/s2": "npm:^1.0.0" "@react-spectrum/utils": "npm:^3.12.6" "@react-types/shared": "npm:^3.30.0" - "@react-types/textfield": "npm:^3.12.3" axe-playwright: "npm:^2.2.2" emojibase-data: "npm:^16.0.3" fast-glob: "npm:^3.3.3" @@ -8080,23 +8006,18 @@ __metadata: "@react-aria/i18n": "npm:^3.12.16" "@react-aria/interactions": "npm:^3.27.1" "@react-aria/live-announcer": "npm:^3.4.4" + "@react-aria/ssr": "npm:^3.9.10" "@react-aria/test-utils": "npm:^1.0.0-alpha.8" "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" + "@react-stately/grid": "npm:^3.11.9" "@react-stately/layout": "npm:^4.6.0" "@react-stately/utils": "npm:^3.11.0" - "@react-types/dialog": "npm:^3.5.24" - "@react-types/grid": "npm:^3.3.8" - "@react-types/overlays": "npm:^3.9.4" - "@react-types/provider": "npm:^3.8.15" "@react-types/shared": "npm:^3.33.1" - "@react-types/table": "npm:^3.13.6" - "@react-types/textfield": "npm:^3.12.8" "@storybook/jest": "npm:^0.2.3" "@testing-library/dom": "npm:^10.1.0" "@testing-library/react": "npm:^16.0.0" "@testing-library/user-event": "npm:^14.0.0" - csstype: "npm:^3.0.2" react-aria: "npm:^3.47.0" react-aria-components: "npm:^1.16.0" react-stately: "npm:^3.45.0" @@ -8118,8 +8039,7 @@ __metadata: "@react-spectrum/textfield": "npm:^3.14.5" "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/searchfield": "npm:^3.5.19" - "@react-types/searchfield": "npm:^3.6.8" - "@react-types/textfield": "npm:^3.12.8" + "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8143,7 +8063,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/slider": "npm:^3.7.5" "@react-types/shared": "npm:^3.33.1" - "@react-types/slider": "npm:^3.8.4" "@swc/helpers": "npm:^0.5.0" peerDependencies: "@react-spectrum/provider": ^3.0.0 @@ -8160,7 +8079,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" "@react-types/shared": "npm:^3.33.1" - "@react-types/statuslight": "npm:^3.3.23" "@swc/helpers": "npm:^0.5.0" peerDependencies: "@react-spectrum/provider": ^3.0.0 @@ -8223,7 +8141,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/toggle": "npm:^3.9.5" "@react-types/shared": "npm:^3.33.1" - "@react-types/switch": "npm:^3.5.17" "@swc/helpers": "npm:^0.5.0" peerDependencies: "@react-spectrum/provider": ^3.0.0 @@ -8257,12 +8174,11 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/dnd": "npm:^3.1.0" "@react-stately/flags": "npm:^3.1.2" + "@react-stately/grid": "npm:^3.11.9" "@react-stately/layout": "npm:^4.6.0" "@react-stately/table": "npm:^3.15.4" "@react-stately/virtualizer": "npm:^4.4.6" - "@react-types/grid": "npm:^3.3.8" "@react-types/shared": "npm:^3.33.1" - "@react-types/table": "npm:^3.13.6" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8288,9 +8204,7 @@ __metadata: "@react-stately/collections": "npm:^3.12.10" "@react-stately/list": "npm:^3.13.4" "@react-stately/tabs": "npm:^3.8.9" - "@react-types/select": "npm:^3.12.2" "@react-types/shared": "npm:^3.33.1" - "@react-types/tabs": "npm:^3.3.22" "@swc/helpers": "npm:^0.5.0" peerDependencies: "@react-spectrum/provider": ^3.0.0 @@ -8373,7 +8287,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" "@react-types/shared": "npm:^3.33.1" - "@react-types/text": "npm:^3.3.23" "@swc/helpers": "npm:^0.5.0" react-aria-components: "npm:^1.16.0" react-dom: "npm:^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" @@ -8399,7 +8312,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/utils": "npm:^3.11.0" "@react-types/shared": "npm:^3.33.1" - "@react-types/textfield": "npm:^3.12.8" "@spectrum-icons/ui": "npm:^3.6.23" "@spectrum-icons/workflow": "npm:^4.0.0" "@swc/helpers": "npm:^0.5.0" @@ -8415,9 +8327,9 @@ __metadata: resolution: "@react-spectrum/theme-dark@workspace:packages/@react-spectrum/theme-dark" dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" - "@react-types/provider": "npm:^3.8.15" "@swc/helpers": "npm:^0.5.0" peerDependencies: + "@react-spectrum/provider": ^3.10.14 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8427,9 +8339,9 @@ __metadata: resolution: "@react-spectrum/theme-default@workspace:packages/@react-spectrum/theme-default" dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" - "@react-types/provider": "npm:^3.8.15" "@swc/helpers": "npm:^0.5.0" peerDependencies: + "@react-spectrum/provider": ^3.10.14 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8440,9 +8352,9 @@ __metadata: dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-spectrum/theme-default": "npm:^3.5.24" - "@react-types/provider": "npm:^3.8.15" "@swc/helpers": "npm:^0.5.0" peerDependencies: + "@react-spectrum/provider": ^3.10.14 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8452,9 +8364,9 @@ __metadata: resolution: "@react-spectrum/theme-light@workspace:packages/@react-spectrum/theme-light" dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" - "@react-types/provider": "npm:^3.8.15" "@swc/helpers": "npm:^0.5.0" peerDependencies: + "@react-spectrum/provider": ^3.10.14 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8497,9 +8409,7 @@ __metadata: "@react-spectrum/overlays": "npm:^5.9.3" "@react-spectrum/utils": "npm:^3.12.12" "@react-stately/tooltip": "npm:^3.5.11" - "@react-types/overlays": "npm:^3.9.4" "@react-types/shared": "npm:^3.33.1" - "@react-types/tooltip": "npm:^3.5.2" "@spectrum-icons/ui": "npm:^3.6.23" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8520,7 +8430,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/checkbox": "npm:^3.10.7" "@react-spectrum/style-macro-s1": "npm:3.0.0-alpha.5" - "@react-spectrum/text": "npm:^3.5.25" "@react-spectrum/utils": "npm:^3.12.12" "@react-types/shared": "npm:^3.33.1" "@spectrum-icons/ui": "npm:^3.6.23" @@ -8563,7 +8472,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" "@react-types/shared": "npm:^3.33.1" - "@react-types/view": "npm:^3.4.23" "@swc/helpers": "npm:^0.5.0" peerDependencies: "@react-spectrum/provider": ^3.0.0 @@ -8580,7 +8488,6 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-spectrum/utils": "npm:^3.12.12" "@react-types/shared": "npm:^3.33.1" - "@react-types/well": "npm:^3.3.23" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8605,7 +8512,6 @@ __metadata: dependencies: "@internationalized/date": "npm:^3.12.0" "@react-stately/utils": "npm:^3.11.0" - "@react-types/calendar": "npm:^3.8.3" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8619,7 +8525,6 @@ __metadata: dependencies: "@react-stately/form": "npm:^3.2.4" "@react-stately/utils": "npm:^3.11.0" - "@react-types/checkbox": "npm:^3.10.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8648,7 +8553,6 @@ __metadata: "@react-stately/numberfield": "npm:^3.11.0" "@react-stately/slider": "npm:^3.7.5" "@react-stately/utils": "npm:^3.11.0" - "@react-types/color": "npm:^3.1.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8665,7 +8569,6 @@ __metadata: "@react-stately/list": "npm:^3.13.4" "@react-stately/overlays": "npm:^3.6.23" "@react-stately/utils": "npm:^3.11.0" - "@react-types/combobox": "npm:^3.14.0" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8691,10 +8594,10 @@ __metadata: "@internationalized/date": "npm:^3.12.0" "@internationalized/number": "npm:^3.6.5" "@internationalized/string": "npm:^3.2.7" + "@react-stately/calendar": "npm:^3.9.3" "@react-stately/form": "npm:^3.2.4" "@react-stately/overlays": "npm:^3.6.23" "@react-stately/utils": "npm:^3.11.0" - "@react-types/datepicker": "npm:^3.13.5" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8751,7 +8654,6 @@ __metadata: dependencies: "@react-stately/collections": "npm:^3.12.10" "@react-stately/selection": "npm:^3.20.9" - "@react-types/grid": "npm:^3.3.8" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8764,11 +8666,10 @@ __metadata: resolution: "@react-stately/layout@workspace:packages/@react-stately/layout" dependencies: "@react-stately/collections": "npm:^3.12.10" + "@react-stately/grid": "npm:^3.11.9" "@react-stately/table": "npm:^3.15.4" "@react-stately/virtualizer": "npm:^4.4.6" - "@react-types/grid": "npm:^3.3.8" "@react-types/shared": "npm:^3.33.1" - "@react-types/table": "npm:^3.13.6" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8795,7 +8696,6 @@ __metadata: resolution: "@react-stately/menu@workspace:packages/@react-stately/menu" dependencies: "@react-stately/overlays": "npm:^3.6.23" - "@react-types/menu": "npm:^3.10.7" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8810,7 +8710,7 @@ __metadata: "@internationalized/number": "npm:^3.6.5" "@react-stately/form": "npm:^3.2.4" "@react-stately/utils": "npm:^3.11.0" - "@react-types/numberfield": "npm:^3.8.18" + "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8822,7 +8722,6 @@ __metadata: resolution: "@react-stately/overlays@workspace:packages/@react-stately/overlays" dependencies: "@react-stately/utils": "npm:^3.11.0" - "@react-types/overlays": "npm:^3.9.4" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8835,7 +8734,6 @@ __metadata: dependencies: "@react-stately/form": "npm:^3.2.4" "@react-stately/utils": "npm:^3.11.0" - "@react-types/radio": "npm:^3.9.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8848,7 +8746,7 @@ __metadata: resolution: "@react-stately/searchfield@workspace:packages/@react-stately/searchfield" dependencies: "@react-stately/utils": "npm:^3.11.0" - "@react-types/searchfield": "npm:^3.6.8" + "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8863,7 +8761,6 @@ __metadata: "@react-stately/list": "npm:^3.13.4" "@react-stately/overlays": "npm:^3.6.23" "@react-stately/utils": "npm:^3.11.0" - "@react-types/select": "npm:^3.12.2" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8890,7 +8787,6 @@ __metadata: dependencies: "@react-stately/utils": "npm:^3.11.0" "@react-types/shared": "npm:^3.33.1" - "@react-types/slider": "npm:^3.8.4" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8919,9 +8815,7 @@ __metadata: "@react-stately/grid": "npm:^3.11.9" "@react-stately/selection": "npm:^3.20.9" "@react-stately/utils": "npm:^3.11.0" - "@react-types/grid": "npm:^3.3.8" "@react-types/shared": "npm:^3.33.1" - "@react-types/table": "npm:^3.13.6" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8934,7 +8828,6 @@ __metadata: dependencies: "@react-stately/list": "npm:^3.13.4" "@react-types/shared": "npm:^3.33.1" - "@react-types/tabs": "npm:^3.3.22" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8958,7 +8851,6 @@ __metadata: resolution: "@react-stately/toggle@workspace:packages/@react-stately/toggle" dependencies: "@react-stately/utils": "npm:^3.11.0" - "@react-types/checkbox": "npm:^3.10.4" "@react-types/shared": "npm:^3.33.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8971,7 +8863,6 @@ __metadata: resolution: "@react-stately/tooltip@workspace:packages/@react-stately/tooltip" dependencies: "@react-stately/overlays": "npm:^3.6.23" - "@react-types/tooltip": "npm:^3.5.2" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -9002,7 +8893,7 @@ __metadata: languageName: unknown linkType: soft -"@react-stately/virtualizer@npm:^4.0.0, @react-stately/virtualizer@npm:^4.4.6, @react-stately/virtualizer@workspace:packages/@react-stately/virtualizer": +"@react-stately/virtualizer@npm:^4.4.6, @react-stately/virtualizer@workspace:packages/@react-stately/virtualizer": version: 0.0.0-use.local resolution: "@react-stately/virtualizer@workspace:packages/@react-stately/virtualizer" dependencies: @@ -9014,256 +8905,308 @@ __metadata: languageName: unknown linkType: soft -"@react-types/actionbar@npm:^3.1.21, @react-types/actionbar@workspace:packages/@react-types/actionbar": +"@react-types/actionbar@workspace:packages/@react-types/actionbar": version: 0.0.0-use.local resolution: "@react-types/actionbar@workspace:packages/@react-types/actionbar" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/actionbar": "npm:^3.6.17" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/actiongroup@npm:^3.4.23, @react-types/actiongroup@workspace:packages/@react-types/actiongroup": +"@react-types/actiongroup@workspace:packages/@react-types/actiongroup": version: 0.0.0-use.local resolution: "@react-types/actiongroup@workspace:packages/@react-types/actiongroup" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/actiongroup": "npm:^3.7.24" + "@react-spectrum/actiongroup": "npm:^3.11.7" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/autocomplete@npm:3.0.0-alpha.38, @react-types/autocomplete@workspace:packages/@react-types/autocomplete": +"@react-types/autocomplete@workspace:packages/@react-types/autocomplete": version: 0.0.0-use.local resolution: "@react-types/autocomplete@workspace:packages/@react-types/autocomplete" dependencies: - "@react-types/combobox": "npm:^3.14.0" - "@react-types/searchfield": "npm:^3.6.8" - "@react-types/shared": "npm:^3.33.1" + "@react-aria/autocomplete": "npm:3.0.0-rc.6" + "@react-spectrum/autocomplete": "npm:3.0.0-alpha.53" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/avatar@npm:^3.0.21, @react-types/avatar@workspace:packages/@react-types/avatar": +"@react-types/avatar@workspace:packages/@react-types/avatar": version: 0.0.0-use.local resolution: "@react-types/avatar@workspace:packages/@react-types/avatar" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/avatar": "npm:^3.0.29" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/badge@npm:^3.1.23, @react-types/badge@workspace:packages/@react-types/badge": +"@react-types/badge@workspace:packages/@react-types/badge": version: 0.0.0-use.local resolution: "@react-types/badge@workspace:packages/@react-types/badge" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/badge": "npm:^3.1.33" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/breadcrumbs@npm:^3.7.19, @react-types/breadcrumbs@workspace:packages/@react-types/breadcrumbs": +"@react-types/breadcrumbs@workspace:packages/@react-types/breadcrumbs": version: 0.0.0-use.local resolution: "@react-types/breadcrumbs@workspace:packages/@react-types/breadcrumbs" dependencies: - "@react-types/link": "npm:^3.6.7" - "@react-types/shared": "npm:^3.33.1" + "@react-aria/breadcrumbs": "npm:^3.5.32" + "@react-spectrum/breadcrumbs": "npm:^3.9.27" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/button@npm:^3.15.1, @react-types/button@workspace:packages/@react-types/button": +"@react-types/button@workspace:packages/@react-types/button": version: 0.0.0-use.local resolution: "@react-types/button@workspace:packages/@react-types/button" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/button": "npm:^3.14.5" + "@react-spectrum/button": "npm:^3.17.7" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/buttongroup@npm:^3.3.23, @react-types/buttongroup@workspace:packages/@react-types/buttongroup": +"@react-types/buttongroup@workspace:packages/@react-types/buttongroup": version: 0.0.0-use.local resolution: "@react-types/buttongroup@workspace:packages/@react-types/buttongroup" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/buttongroup": "npm:^3.6.29" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/calendar@npm:^3.8.3, @react-types/calendar@workspace:packages/@react-types/calendar": +"@react-types/calendar@workspace:packages/@react-types/calendar": version: 0.0.0-use.local resolution: "@react-types/calendar@workspace:packages/@react-types/calendar" dependencies: - "@internationalized/date": "npm:^3.12.0" - "@react-types/shared": "npm:^3.33.1" + "@react-aria/calendar": "npm:^3.9.5" + "@react-spectrum/calendar": "npm:^3.7.11" + "@react-stately/calendar": "npm:^3.9.3" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/card@npm:3.0.0-alpha.43, @react-types/card@workspace:packages/@react-types/card": +"@react-types/card@workspace:packages/@react-types/card": version: 0.0.0-use.local resolution: "@react-types/card@workspace:packages/@react-types/card" dependencies: - "@react-stately/virtualizer": "npm:^4.4.6" - "@react-types/provider": "npm:^3.8.15" - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/card": "npm:3.0.0-alpha.53" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/checkbox@npm:^3.10.4, @react-types/checkbox@workspace:packages/@react-types/checkbox": +"@react-types/checkbox@workspace:packages/@react-types/checkbox": version: 0.0.0-use.local resolution: "@react-types/checkbox@workspace:packages/@react-types/checkbox" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/checkbox": "npm:^3.16.5" + "@react-aria/toggle": "npm:^3.12.5" + "@react-spectrum/checkbox": "npm:^3.10.7" + "@react-stately/checkbox": "npm:^3.7.5" + "@react-stately/toggle": "npm:^3.9.5" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/color@npm:^3.1.4, @react-types/color@workspace:packages/@react-types/color": +"@react-types/color@workspace:packages/@react-types/color": version: 0.0.0-use.local resolution: "@react-types/color@workspace:packages/@react-types/color" dependencies: - "@react-types/shared": "npm:^3.33.1" - "@react-types/slider": "npm:^3.8.4" + "@react-aria/color": "npm:^3.1.5" + "@react-spectrum/color": "npm:^3.1.7" + "@react-stately/color": "npm:^3.9.5" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/combobox@npm:^3.14.0, @react-types/combobox@workspace:packages/@react-types/combobox": +"@react-types/combobox@workspace:packages/@react-types/combobox": version: 0.0.0-use.local resolution: "@react-types/combobox@workspace:packages/@react-types/combobox" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/combobox": "npm:^3.15.0" + "@react-spectrum/combobox": "npm:^3.16.7" + "@react-stately/combobox": "npm:^3.13.0" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/contextualhelp@npm:^3.2.24, @react-types/contextualhelp@workspace:packages/@react-types/contextualhelp": +"@react-types/contextualhelp@workspace:packages/@react-types/contextualhelp": version: 0.0.0-use.local resolution: "@react-types/contextualhelp@workspace:packages/@react-types/contextualhelp" dependencies: - "@react-types/overlays": "npm:^3.9.4" - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/contextualhelp": "npm:^3.6.31" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/datepicker@npm:^3.13.5, @react-types/datepicker@workspace:packages/@react-types/datepicker": +"@react-types/datepicker@workspace:packages/@react-types/datepicker": version: 0.0.0-use.local resolution: "@react-types/datepicker@workspace:packages/@react-types/datepicker" dependencies: - "@internationalized/date": "npm:^3.12.0" - "@react-types/calendar": "npm:^3.8.3" - "@react-types/overlays": "npm:^3.9.4" - "@react-types/shared": "npm:^3.33.1" + "@react-aria/datepicker": "npm:^3.16.1" + "@react-spectrum/datepicker": "npm:^3.14.11" + "@react-stately/datepicker": "npm:^3.16.1" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/dialog@npm:^3.5.24, @react-types/dialog@workspace:packages/@react-types/dialog": +"@react-types/dialog@workspace:packages/@react-types/dialog": version: 0.0.0-use.local resolution: "@react-types/dialog@workspace:packages/@react-types/dialog" dependencies: - "@react-types/overlays": "npm:^3.9.4" - "@react-types/shared": "npm:^3.33.1" + "@react-aria/dialog": "npm:^3.5.34" + "@react-spectrum/dialog": "npm:^3.9.7" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/divider@npm:^3.3.23, @react-types/divider@workspace:packages/@react-types/divider": +"@react-types/divider@workspace:packages/@react-types/divider": version: 0.0.0-use.local resolution: "@react-types/divider@workspace:packages/@react-types/divider" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/divider": "npm:^3.5.30" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/form@npm:^3.7.18, @react-types/form@workspace:packages/@react-types/form": +"@react-types/form@workspace:packages/@react-types/form": version: 0.0.0-use.local resolution: "@react-types/form@workspace:packages/@react-types/form" dependencies: + "@react-spectrum/form": "npm:^3.7.22" "@react-types/shared": "npm:^3.33.1" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/grid@npm:^3.3.8, @react-types/grid@workspace:packages/@react-types/grid": +"@react-types/grid@workspace:packages/@react-types/grid": version: 0.0.0-use.local resolution: "@react-types/grid@workspace:packages/@react-types/grid" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-stately/grid": "npm:^3.11.9" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/illustratedmessage@npm:^3.3.23, @react-types/illustratedmessage@workspace:packages/@react-types/illustratedmessage": +"@react-types/illustratedmessage@workspace:packages/@react-types/illustratedmessage": version: 0.0.0-use.local resolution: "@react-types/illustratedmessage@workspace:packages/@react-types/illustratedmessage" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/illustratedmessage": "npm:^3.5.17" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/image@npm:^3.5.4, @react-types/image@workspace:packages/@react-types/image": +"@react-types/image@workspace:packages/@react-types/image": version: 0.0.0-use.local resolution: "@react-types/image@workspace:packages/@react-types/image" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/image": "npm:^3.6.5" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/label@npm:^3.9.17, @react-types/label@workspace:packages/@react-types/label": +"@react-types/label@workspace:packages/@react-types/label": version: 0.0.0-use.local resolution: "@react-types/label@workspace:packages/@react-types/label" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/label": "npm:^3.16.22" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/layout@npm:^3.3.29, @react-types/layout@workspace:packages/@react-types/layout": +"@react-types/layout@workspace:packages/@react-types/layout": version: 0.0.0-use.local resolution: "@react-types/layout@workspace:packages/@react-types/layout" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/layout": "npm:^3.6.22" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/link@npm:^3.6.7, @react-types/link@workspace:packages/@react-types/link": +"@react-types/link@workspace:packages/@react-types/link": version: 0.0.0-use.local resolution: "@react-types/link@workspace:packages/@react-types/link" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/link": "npm:^3.8.9" + "@react-spectrum/link": "npm:^3.6.25" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -9280,109 +9223,140 @@ __metadata: languageName: unknown linkType: soft -"@react-types/listbox@npm:^3.7.6, @react-types/listbox@workspace:packages/@react-types/listbox": +"@react-types/listbox@workspace:packages/@react-types/listbox": version: 0.0.0-use.local resolution: "@react-types/listbox@workspace:packages/@react-types/listbox" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/listbox": "npm:^3.15.3" + "@react-spectrum/listbox": "npm:^3.15.11" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/menu@npm:^3.10.7, @react-types/menu@workspace:packages/@react-types/menu": +"@react-types/menu@workspace:packages/@react-types/menu": version: 0.0.0-use.local resolution: "@react-types/menu@workspace:packages/@react-types/menu" dependencies: - "@react-types/overlays": "npm:^3.9.4" - "@react-types/shared": "npm:^3.33.1" + "@react-aria/menu": "npm:^3.21.0" + "@react-spectrum/menu": "npm:^3.22.11" + "@react-stately/menu": "npm:^3.9.11" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/meter@npm:^3.4.15, @react-types/meter@workspace:packages/@react-types/meter": +"@react-types/meter@workspace:packages/@react-types/meter": version: 0.0.0-use.local resolution: "@react-types/meter@workspace:packages/@react-types/meter" dependencies: - "@react-types/progress": "npm:^3.5.18" + "@react-aria/meter": "npm:^3.4.30" + "@react-spectrum/meter": "npm:^3.5.17" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/numberfield@npm:^3.8.18, @react-types/numberfield@workspace:packages/@react-types/numberfield": +"@react-types/numberfield@workspace:packages/@react-types/numberfield": version: 0.0.0-use.local resolution: "@react-types/numberfield@workspace:packages/@react-types/numberfield" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/numberfield": "npm:^3.12.5" + "@react-spectrum/numberfield": "npm:^3.10.5" + "@react-stately/numberfield": "npm:^3.11.0" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/overlays@npm:^3.9.4, @react-types/overlays@workspace:packages/@react-types/overlays": +"@react-types/overlays@workspace:packages/@react-types/overlays": version: 0.0.0-use.local resolution: "@react-types/overlays@workspace:packages/@react-types/overlays" dependencies: + "@react-aria/overlays": "npm:^3.31.2" + "@react-spectrum/overlays": "npm:^5.9.3" + "@react-stately/overlays": "npm:^3.6.23" "@react-types/shared": "npm:^3.33.1" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/progress@npm:^3.5.18, @react-types/progress@workspace:packages/@react-types/progress": +"@react-types/progress@workspace:packages/@react-types/progress": version: 0.0.0-use.local resolution: "@react-types/progress@workspace:packages/@react-types/progress" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/progress": "npm:^3.4.30" + "@react-spectrum/progress": "npm:^3.7.23" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/provider@npm:^3.8.15, @react-types/provider@workspace:packages/@react-types/provider": +"@react-types/provider@workspace:packages/@react-types/provider": version: 0.0.0-use.local resolution: "@react-types/provider@workspace:packages/@react-types/provider" - dependencies: - "@react-types/shared": "npm:^3.33.1" peerDependencies: + "@react-spectrum/provider": ^3.10.14 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/radio@npm:^3.9.4, @react-types/radio@workspace:packages/@react-types/radio": +"@react-types/radio@workspace:packages/@react-types/radio": version: 0.0.0-use.local resolution: "@react-types/radio@workspace:packages/@react-types/radio" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/radio": "npm:^3.12.5" + "@react-spectrum/radio": "npm:^3.7.24" + "@react-stately/radio": "npm:^3.11.5" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/searchfield@npm:^3.6.8, @react-types/searchfield@workspace:packages/@react-types/searchfield": +"@react-types/searchfield@workspace:packages/@react-types/searchfield": version: 0.0.0-use.local resolution: "@react-types/searchfield@workspace:packages/@react-types/searchfield" dependencies: - "@react-types/shared": "npm:^3.33.1" - "@react-types/textfield": "npm:^3.12.8" + "@react-aria/searchfield": "npm:^3.8.12" + "@react-spectrum/searchfield": "npm:^3.8.26" + "@react-stately/searchfield": "npm:^3.5.19" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/select@npm:^3.12.2, @react-types/select@workspace:packages/@react-types/select": +"@react-types/select@workspace:packages/@react-types/select": version: 0.0.0-use.local resolution: "@react-types/select@workspace:packages/@react-types/select" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/select": "npm:^3.17.3" + "@react-spectrum/picker": "npm:^3.16.7" + "@react-stately/select": "npm:^3.9.2" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/shared@npm:^3.1.0, @react-types/shared@npm:^3.30.0, @react-types/shared@npm:^3.33.1, @react-types/shared@workspace:packages/@react-types/shared": +"@react-types/shared@npm:^3.30.0, @react-types/shared@npm:^3.33.1, @react-types/shared@workspace:packages/@react-types/shared": version: 0.0.0-use.local resolution: "@react-types/shared@workspace:packages/@react-types/shared" peerDependencies: @@ -9390,117 +9364,133 @@ __metadata: languageName: unknown linkType: soft -"@react-types/sidenav@workspace:packages/@react-types/sidenav": - version: 0.0.0-use.local - resolution: "@react-types/sidenav@workspace:packages/@react-types/sidenav" - dependencies: - "@react-stately/virtualizer": "npm:^4.0.0" - "@react-types/shared": "npm:^3.1.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - languageName: unknown - linkType: soft - -"@react-types/slider@npm:^3.8.4, @react-types/slider@workspace:packages/@react-types/slider": +"@react-types/slider@workspace:packages/@react-types/slider": version: 0.0.0-use.local resolution: "@react-types/slider@workspace:packages/@react-types/slider" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/slider": "npm:^3.8.5" + "@react-spectrum/slider": "npm:^3.8.5" + "@react-stately/slider": "npm:^3.7.5" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/statuslight@npm:^3.3.23, @react-types/statuslight@workspace:packages/@react-types/statuslight": +"@react-types/statuslight@workspace:packages/@react-types/statuslight": version: 0.0.0-use.local resolution: "@react-types/statuslight@workspace:packages/@react-types/statuslight" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/statuslight": "npm:^3.5.29" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/switch@npm:^3.5.17, @react-types/switch@workspace:packages/@react-types/switch": +"@react-types/switch@workspace:packages/@react-types/switch": version: 0.0.0-use.local resolution: "@react-types/switch@workspace:packages/@react-types/switch" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/switch": "npm:^3.7.11" + "@react-spectrum/switch": "npm:^3.6.9" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/table@npm:^3.13.6, @react-types/table@workspace:packages/@react-types/table": +"@react-types/table@workspace:packages/@react-types/table": version: 0.0.0-use.local resolution: "@react-types/table@workspace:packages/@react-types/table" dependencies: - "@react-types/grid": "npm:^3.3.8" + "@react-spectrum/table": "npm:^3.17.11" + "@react-stately/table": "npm:^3.15.4" "@react-types/shared": "npm:^3.33.1" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/tabs@npm:^3.3.22, @react-types/tabs@workspace:packages/@react-types/tabs": +"@react-types/tabs@workspace:packages/@react-types/tabs": version: 0.0.0-use.local resolution: "@react-types/tabs@workspace:packages/@react-types/tabs" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/tabs": "npm:^3.11.1" + "@react-spectrum/tabs": "npm:^3.8.30" + "@react-stately/tabs": "npm:^3.8.9" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/text@npm:^3.3.23, @react-types/text@workspace:packages/@react-types/text": +"@react-types/text@workspace:packages/@react-types/text": version: 0.0.0-use.local resolution: "@react-types/text@workspace:packages/@react-types/text" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/text": "npm:^3.5.25" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/textfield@npm:^3.12.3, @react-types/textfield@npm:^3.12.8, @react-types/textfield@workspace:packages/@react-types/textfield": +"@react-types/textfield@workspace:packages/@react-types/textfield": version: 0.0.0-use.local resolution: "@react-types/textfield@workspace:packages/@react-types/textfield" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-aria/textfield": "npm:^3.18.5" + "@react-spectrum/textfield": "npm:^3.14.5" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/tooltip@npm:^3.5.2, @react-types/tooltip@workspace:packages/@react-types/tooltip": +"@react-types/tooltip@workspace:packages/@react-types/tooltip": version: 0.0.0-use.local resolution: "@react-types/tooltip@workspace:packages/@react-types/tooltip" dependencies: - "@react-types/overlays": "npm:^3.9.4" - "@react-types/shared": "npm:^3.33.1" + "@react-aria/tooltip": "npm:^3.9.2" + "@react-spectrum/tooltip": "npm:^3.8.2" + "@react-stately/tooltip": "npm:^3.5.11" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/view@npm:^3.4.23, @react-types/view@workspace:packages/@react-types/view": +"@react-types/view@workspace:packages/@react-types/view": version: 0.0.0-use.local resolution: "@react-types/view@workspace:packages/@react-types/view" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/view": "npm:^3.6.26" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/well@npm:^3.3.23, @react-types/well@workspace:packages/@react-types/well": +"@react-types/well@workspace:packages/@react-types/well": version: 0.0.0-use.local resolution: "@react-types/well@workspace:packages/@react-types/well" dependencies: - "@react-types/shared": "npm:^3.33.1" + "@react-spectrum/well": "npm:^3.4.30" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -25390,7 +25380,6 @@ __metadata: resolution: "react-aria-components@workspace:packages/react-aria-components" dependencies: "@internationalized/date": "npm:^3.12.0" - "@internationalized/string": "npm:^3.2.7" "@react-aria/autocomplete": "npm:3.0.0-rc.6" "@react-aria/collections": "npm:^3.0.3" "@react-aria/dnd": "npm:^3.11.6" @@ -25404,21 +25393,18 @@ __metadata: "@react-aria/utils": "npm:^3.33.1" "@react-aria/virtualizer": "npm:^4.1.13" "@react-stately/autocomplete": "npm:3.0.0-beta.4" + "@react-stately/grid": "npm:^3.11.9" "@react-stately/layout": "npm:^4.6.0" "@react-stately/selection": "npm:^3.20.9" "@react-stately/table": "npm:^3.15.4" "@react-stately/utils": "npm:^3.11.0" "@react-stately/virtualizer": "npm:^4.4.6" - "@react-types/form": "npm:^3.7.18" - "@react-types/grid": "npm:^3.3.8" "@react-types/shared": "npm:^3.33.1" - "@react-types/table": "npm:^3.13.6" "@swc/helpers": "npm:^0.5.0" "@tailwindcss/postcss": "npm:^4.0.0" client-only: "npm:^0.0.1" react-aria: "npm:^3.47.0" react-stately: "npm:^3.45.0" - use-sync-external-store: "npm:^1.6.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -25773,13 +25759,20 @@ __metadata: languageName: node linkType: hard -"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react@npm:^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0, react@npm:^19.2.0": +"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react@npm:^19.2.0": version: 19.2.1 resolution: "react@npm:19.2.1" checksum: 10c0/2b5eaf407abb3db84090434c20d6c5a8e447ab7abcd8fe9eaf1ddc299babcf31284ee9db7ea5671d21c85ac5298bd632fa1a7da1ed78d5b368a537f5e1cd5d62 languageName: node linkType: hard +"react@npm:^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0": + version: 19.1.1 + resolution: "react@npm:19.1.1" + checksum: 10c0/8c9769a2dfd02e603af6445058325e6c8a24b47b185d0e461f66a6454765ddcaecb3f0a90184836c68bb509f3c38248359edbc42f0d07c23eb500a5c30c87b4e + languageName: node + linkType: hard + "read-cache@npm:^1.0.0": version: 1.0.0 resolution: "read-cache@npm:1.0.0" From 891395b9d80555917a439459d06d484f56c22d3b Mon Sep 17 00:00:00 2001 From: Jihwan Heo Date: Thu, 19 Mar 2026 02:00:06 +0900 Subject: [PATCH 2/4] Fix Autocomplete focus styles when clicking the input after virtual focus (#9767) * fix autocomplete focus recovery after virtual focus * fix autocomplete focus recovery after outside click * Revert mouse-only focus-visible docs change --- .../autocomplete/src/useAutocomplete.ts | 19 +++- .../stories/Autocomplete.stories.tsx | 23 +++++ .../test/Autocomplete.test.tsx | 94 +++++++++++++++++++ 3 files changed, 134 insertions(+), 2 deletions(-) diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts index 9ff0d4fd2b0..40eee24ae05 100644 --- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts @@ -18,7 +18,7 @@ import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, m import {getInteractionModality, getPointerType} from '@react-aria/interactions'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from 'react'; +import {FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; export interface CollectionOptions extends DOMProps, AriaLabelingProps { @@ -420,6 +420,20 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Aut } }; + // Clicking back into the input can happen after focus moved elsewhere in the dialog, while + // virtual focus is still on an option. Clear virtual focus on pointer down so mouse + // interactions restore the input state before the click's focus handling runs. + // Touch is excluded because touch interactions should not move focus back to the input. + let onPointerDown = (e: ReactPointerEvent) => { + if (e.button !== 0 || e.pointerType === 'touch' || queuedActiveDescendant.current == null || inputRef.current == null) { + return; + } + + if (getEventTarget(e) === inputRef.current) { + clearVirtualFocus(); + } + }; + // Only apply the autocomplete specific behaviors if the collection component wrapped by it is actually // being filtered/allows filtering by the Autocomplete. let inputProps = { @@ -431,7 +445,8 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Aut onKeyDown, 'aria-activedescendant': state.focusedNodeId ?? undefined, onBlur, - onFocus + onFocus, + onPointerDown }; if (hasCollection) { diff --git a/packages/react-aria-components/stories/Autocomplete.stories.tsx b/packages/react-aria-components/stories/Autocomplete.stories.tsx index c51dd766b74..633fd2dd469 100644 --- a/packages/react-aria-components/stories/Autocomplete.stories.tsx +++ b/packages/react-aria-components/stories/Autocomplete.stories.tsx @@ -166,6 +166,29 @@ export const AutocompleteSearchfield: AutocompleteStory = { } }; +export const AutocompleteFocusRecovery: AutocompleteStory = { + render: (args) => { + return ( + +
+ + + + Focus the input, move virtual focus to an option, then click the input again. + + +
+ + ); + }, + name: 'Autocomplete focus recovery after virtual focus', + parameters: { + description: { + data: 'Manual check: focus the input, hover or keyboard navigate to an option, then click the input again. The input should regain focused styling and the active descendant should clear.' + } + } +}; + // Note that the trigger items in this array MUST have an id, even if the underlying MenuItem might apply its own // id. If it is omitted, we can't build the collection node for the trigger node and an error will throw let dynamicAutocompleteSubdialog: MenuNode[] = [ diff --git a/packages/react-aria-components/test/Autocomplete.test.tsx b/packages/react-aria-components/test/Autocomplete.test.tsx index dc341ae6ea4..8e1c73e77ed 100644 --- a/packages/react-aria-components/test/Autocomplete.test.tsx +++ b/packages/react-aria-components/test/Autocomplete.test.tsx @@ -496,6 +496,100 @@ describe('Autocomplete', () => { expect(input).toHaveAttribute('data-focus-visible'); }); + it('should restore focused styles to the input when clicking it after hovering an option', async () => { + let {getByRole} = render( + + + + ); + + let input = getByRole('searchbox'); + await user.click(input); + expect(document.activeElement).toBe(input); + expect(input).toHaveAttribute('data-focused'); + + let menu = getByRole('menu'); + let options = within(menu).getAllByRole('menuitem'); + await user.hover(options[1]); + + expect(options[1]).toHaveAttribute('data-focused'); + expect(input).not.toHaveAttribute('data-focused'); + expect(input).toHaveAttribute('aria-activedescendant', options[1].id); + + await user.click(input); + + expect(document.activeElement).toBe(input); + expect(input).toHaveAttribute('data-focused'); + expect(input).not.toHaveAttribute('data-focus-visible'); + expect(input).not.toHaveAttribute('aria-activedescendant'); + expect(options[1]).not.toHaveAttribute('data-focused'); + }); + + it('should restore the input state after clicking outside the autocomplete and then back into the input', async () => { + let {getByRole} = render( + <> + + + + + + ); + + let input = getByRole('searchbox'); + await user.click(input); + + let menu = getByRole('menu'); + let options = within(menu).getAllByRole('menuitem'); + await user.hover(options[1]); + + expect(input).toHaveAttribute('aria-activedescendant', options[1].id); + expect(options[1]).toHaveAttribute('data-focused'); + + await user.click(getByRole('button', {name: 'Outside'})); + expect(document.activeElement).toHaveTextContent('Outside'); + expect(input).not.toHaveAttribute('data-focused'); + expect(input).not.toHaveAttribute('data-focus-visible'); + + await user.click(input); + + expect(document.activeElement).toBe(input); + expect(input).toHaveAttribute('data-focused'); + expect(input).not.toHaveAttribute('data-focus-visible'); + expect(input).not.toHaveAttribute('aria-activedescendant'); + expect(options[1]).not.toHaveAttribute('data-focused'); + }); + + it('should restore focused styles to the input when clicking it after keyboard focusing an option', async () => { + let {getByRole} = render( + + + + ); + + let input = getByRole('searchbox'); + await user.click(input); + expect(document.activeElement).toBe(input); + + await user.keyboard('{ArrowDown}'); + act(() => jest.runAllTimers()); + + let menu = getByRole('menu'); + let options = within(menu).getAllByRole('menuitem'); + expect(options[0]).toHaveAttribute('data-focus-visible'); + expect(input).not.toHaveAttribute('data-focused'); + expect(input).toHaveAttribute('aria-activedescendant', options[0].id); + + await user.click(input); + act(() => jest.runAllTimers()); + + expect(document.activeElement).toBe(input); + expect(input).toHaveAttribute('data-focused'); + expect(input).not.toHaveAttribute('data-focus-visible'); + expect(input).not.toHaveAttribute('aria-activedescendant'); + expect(options[0]).not.toHaveAttribute('data-focused'); + expect(options[0]).not.toHaveAttribute('data-focus-visible'); + }); + it('should not display focus in the virtually focused menu if focus isn\'t in the autocomplete input', async function () { let {getByRole} = render( <> From 51feb386e9397ec988ab2a6c4fc00d8ea0f4ae9e Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Wed, 18 Mar 2026 12:03:39 -0500 Subject: [PATCH 3/4] feat: add disabledBehavior to TableView docs (#9806) --- packages/dev/s2-docs/pages/s2/TableView.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/pages/s2/TableView.mdx b/packages/dev/s2-docs/pages/s2/TableView.mdx index c911817bfc0..d8ffc282050 100644 --- a/packages/dev/s2-docs/pages/s2/TableView.mdx +++ b/packages/dev/s2-docs/pages/s2/TableView.mdx @@ -14,13 +14,14 @@ export const description = 'Displays data in rows and columns, with row selectio {docs.exports.TableView.description} -```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'overflowMode', 'density', 'isQuiet']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple', 'treeColumn': 'name'}} type="s2" +```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'overflowMode', 'density', 'isQuiet', 'disabledBehavior']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple', 'treeColumn': 'name', disabledBehavior: 'selection'}} type="s2" "use client"; import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; Name From 31c8dbda51029ff569babad4fe53895302945c10 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Wed, 18 Mar 2026 12:58:26 -0500 Subject: [PATCH 4/4] fix: focus restoring in collections (#9545) * fix: focus restoring in collections * fix lint * add comment * simplify algorithm --------- Co-authored-by: Devon Govett --- .../listbox/test/ListBox.test.js | 39 ++++++---- .../@react-stately/list/src/useListState.ts | 59 ++++++--------- .../test/TagGroup.test.js | 73 ++++++++++++++++++- 3 files changed, 121 insertions(+), 50 deletions(-) diff --git a/packages/@react-spectrum/listbox/test/ListBox.test.js b/packages/@react-spectrum/listbox/test/ListBox.test.js index 92b9c0d03d4..48b30b5fdec 100644 --- a/packages/@react-spectrum/listbox/test/ListBox.test.js +++ b/packages/@react-spectrum/listbox/test/ListBox.test.js @@ -1042,54 +1042,67 @@ describe('ListBox', function () { act(() => jest.runAllTimers()); let listbox = tree.getByRole('listbox'); let options = within(listbox).getAllByRole('option'); - act(() => {options[2].focus();}); + expect(options.length).toBe(6); + // Go to *Snake* and select it + await user.tab(); + await user.keyboard('{ArrowDown}'); + await user.keyboard('{ArrowDown}'); expect(options[2]).toHaveAttribute('aria-posinset', '3'); expect(options[2]).toHaveAttribute('aria-setsize', '6'); expect(document.activeElement).toBe(options[2]); - fireEvent.keyDown(document.activeElement, {key: ' ', code: 32, charCode: 32}); + await user.keyboard('{Enter}'); expect(document.activeElement).toHaveAttribute('aria-selected', 'true'); + + // Remove *Snake* let removeButton = tree.getByRole('button'); expect(removeButton).toBeInTheDocument(); - act(() => {removeButton.focus();}); - expect(document.activeElement).toBe(removeButton); await user.click(removeButton); act(() => jest.runAllTimers()); let confirmationDialog = tree.getByRole('alertdialog'); expect(document.activeElement).toBe(confirmationDialog); let confirmationDialogButton = within(confirmationDialog).getByRole('button'); - expect(confirmationDialogButton).toBeInTheDocument(); await user.click(confirmationDialogButton); act(() => jest.runAllTimers()); options = within(listbox).getAllByRole('option'); expect(options.length).toBe(5); act(() => jest.runAllTimers()); expect(confirmationDialog).not.toBeInTheDocument(); + + // Dialog returns focus to the ListBox which forwards it to the options expect(document.activeElement).toBe(options[2]); expect(options[2]).toHaveAttribute('aria-posinset', '3'); expect(options[2]).toHaveAttribute('aria-setsize', '5'); - act(() => {options[1].focus();}); - fireEvent.keyDown(document.activeElement, {key: ' ', code: 32, charCode: 32}); + + // Select option + await user.keyboard('{Enter}'); expect(document.activeElement).toHaveAttribute('aria-selected', 'true'); - act(() => {options[0].focus();}); - fireEvent.keyDown(document.activeElement, {key: ' ', code: 32, charCode: 32}); + + // Go to option 0, *Aardvark* and select it too + await user.keyboard('{ArrowUp}'); + await user.keyboard('{ArrowUp}'); + await user.keyboard('{ArrowUp}'); + await user.keyboard('{ArrowUp}'); + expect(document.activeElement).toBe(options[0]); + await user.keyboard('{Enter}'); expect(document.activeElement).toHaveAttribute('aria-selected', 'true'); - act(() => {options[0].focus();}); + + // Remove the two selected items removeButton = tree.getByRole('button'); - expect(removeButton).toBeInTheDocument(); - act(() => {removeButton.focus();}); + await user.tab({shift: true}); expect(document.activeElement).toBe(removeButton); await user.click(removeButton); act(() => jest.runAllTimers()); confirmationDialog = tree.getByRole('alertdialog'); expect(document.activeElement).toBe(confirmationDialog); confirmationDialogButton = within(confirmationDialog).getByRole('button'); - expect(confirmationDialogButton).toBeInTheDocument(); await user.click(confirmationDialogButton); act(() => jest.runAllTimers()); options = within(listbox).getAllByRole('option'); expect(options.length).toBe(3); act(() => jest.runAllTimers()); expect(confirmationDialog).not.toBeInTheDocument(); + + // Dialog returns focus to the ListBox which forwards it to the options expect(document.activeElement).toBe(options[0]); expect(options[0]).toHaveAttribute('aria-posinset', '1'); expect(options[0]).toHaveAttribute('aria-setsize', '3'); diff --git a/packages/@react-stately/list/src/useListState.ts b/packages/@react-stately/list/src/useListState.ts index c373633426e..f783eb1c6bc 100644 --- a/packages/@react-stately/list/src/useListState.ts +++ b/packages/@react-stately/list/src/useListState.ts @@ -89,47 +89,34 @@ function useFocusedKeyReset(collection: Collection>, selectionManager const cachedCollection = useRef> | null>(null); useEffect(() => { if (selectionManager.focusedKey != null && !collection.getItem(selectionManager.focusedKey) && cachedCollection.current) { - const startItem = cachedCollection.current.getItem(selectionManager.focusedKey); - const cachedItemNodes = [...cachedCollection.current.getKeys()].map( - key => { - const itemNode = cachedCollection.current!.getItem(key); - return itemNode?.type === 'item' ? itemNode : null; - } - ).filter(node => node !== null); - const itemNodes = [...collection.getKeys()].map( - key => { - const itemNode = collection.getItem(key); - return itemNode?.type === 'item' ? itemNode : null; - } - ).filter(node => node !== null); - const diff: number = (cachedItemNodes?.length ?? 0) - (itemNodes?.length ?? 0); - let index = Math.min( - ( - diff > 1 ? - Math.max((startItem?.index ?? 0) - diff + 1, 0) : - startItem?.index ?? 0 - ), - (itemNodes?.length ?? 0) - 1); - let newNode: Node | null = null; - let isReverseSearching = false; - while (index >= 0) { - if (!selectionManager.isDisabled(itemNodes[index].key)) { - newNode = itemNodes[index]; + // Walk forward in the old collection to find the next key that still exists in the new collection. + let key = cachedCollection.current.getKeyAfter(selectionManager.focusedKey); + let nextFocusedKey: Key | null = null; + while (key != null) { + let node = collection.getItem(key); + if (node && node.type === 'item' && !selectionManager.isDisabled(key)) { + nextFocusedKey = key; break; } - // Find next, not disabled item. - if (index < itemNodes.length - 1 && !isReverseSearching) { - index++; - // Otherwise, find previous, not disabled item. - } else { - isReverseSearching = true; - if (index > (startItem?.index ?? 0)) { - index = (startItem?.index ?? 0); + + key = cachedCollection.current.getKeyAfter(key); + } + + // If no such key exists, walk backward. + if (nextFocusedKey == null) { + key = cachedCollection.current.getKeyBefore(selectionManager.focusedKey); + while (key != null) { + let node = collection.getItem(key); + if (node && node.type === 'item' && !selectionManager.isDisabled(key)) { + nextFocusedKey = key; + break; } - index--; + + key = cachedCollection.current.getKeyBefore(key); } } - selectionManager.setFocusedKey(newNode ? newNode.key : null); + + selectionManager.setFocusedKey(nextFocusedKey); } cachedCollection.current = collection; }, [collection, selectionManager]); diff --git a/packages/react-aria-components/test/TagGroup.test.js b/packages/react-aria-components/test/TagGroup.test.js index 1966cbd342f..e27256c17b6 100644 --- a/packages/react-aria-components/test/TagGroup.test.js +++ b/packages/react-aria-components/test/TagGroup.test.js @@ -12,7 +12,7 @@ import {act, fireEvent, mockClickDefault, pointerMap, render} from '@react-spectrum/test-utils-internal'; import {Button, Label, RouterProvider, Tag, TagGroup, TagList, Text, Tooltip, TooltipTrigger} from '../'; -import React from 'react'; +import React, {useRef} from 'react'; import {useListData} from '@react-stately/data'; import {User} from '@react-aria/test-utils'; import userEvent from '@testing-library/user-event'; @@ -572,6 +572,77 @@ describe('TagGroup', () => { expect(onRemove).toHaveBeenLastCalledWith(new Set(['dog'])); }); + it('should maintain item order when adding new items', async () => { + function MyTag(props) { + return ( + ({border: '1px solid gray', borderRadius: 4, padding: '0 4px', background: isSelected ? 'black' : '', color: isSelected ? 'white' : '', cursor: props.href ? 'pointer' : 'default'})} /> + ); + } + function Example() { + const list = useListData({ + initialItems: [] + }); + + const nextIdRef = useRef(0); + + const insertItem = () => { + const id = nextIdRef.current++; + list.insert(0, { + id, + label: `Item ${id + 1}` + }); + }; + + return ( +
+ + list.remove(...keys)}> + + 'No categories.'}> + {item => {item.label}} + + +
+ ); + } + let {getAllByRole, queryAllByRole, getByRole} = render(); + let addButton = getAllByRole('button')[0]; + let tagGroup = getByRole('group'); + + await user.click(addButton); + await user.click(addButton); + await user.click(addButton); + await user.click(addButton); + act(() => jest.runAllTimers()); + let items = getAllByRole('row'); + expect(items).toHaveLength(4); + expect(items[0]).toHaveTextContent('Item 4'); + + await user.tab(); + + await user.keyboard('{Delete}'); + items = getAllByRole('row'); + expect(items).toHaveLength(3); + expect(items[0]).toHaveTextContent('Item 3'); + + await user.keyboard('{Delete}'); + items = getAllByRole('row'); + expect(items).toHaveLength(2); + expect(items[0]).toHaveTextContent('Item 2'); + + await user.keyboard('{Delete}'); + items = getAllByRole('row'); + expect(items).toHaveLength(1); + expect(items[0]).toHaveTextContent('Item 1'); + + await user.keyboard('{Delete}'); + let noItems = queryAllByRole('row'); + expect(noItems).toHaveLength(0); + expect(document.activeElement).toBe(tagGroup); + }); + it('should support onAction', async () => { let onAction = jest.fn(); let {getAllByRole} = renderTagGroup({onAction, selectionMode: 'none'});