November 08, 2023 Release
In this release, we’re promoting React Aria Components from Beta to RC 🎉, introducing built-in support for form validation, adding a new Toolbar component, improving our css bundle size with Lightning CSS, and fixing plenty of bugs.
Both React Aria and React Spectrum now have built-in support for form validation, including native HTML constraint validation, custom validation functions, realtime validation, and integration with server-side validation. Check out the React Aria forms guide as well as our React Spectrum forms guide to learn more.
We also added Toolbar to React Aria Components, which provides an accessible grouping that manages arrow key navigation between interactive elements such as buttons, dropdown menus, and checkboxes.
As always, huge thanks to everyone in our community for their feedback and contributions to make this release possible!
React Aria Components API updates#
In this release, we made a few API final updates to React Aria Components.
- ListBox, Menu, and GridList now have their own individual item components. The shared
<Item>
component has been removed and replaced with<ListBoxItem>
,<MenuItem>
, and<GridListItem>
. Our default CSS classes have changed to match these names as well. - GridList and TagGroup have moved to using
display: contents
for their internalgridcell
elements, making it easier to style items with flex or grid layout properties. If you were previously applying these using a descendant selector, you’ll need to move them to the parent row element. - The Dialog component now uses an explicit
<Heading slot="title">
to ensure that other headings in the dialog are not affected. You’ll need to add theslot
prop to the main heading, and will see a console warning if no heading is provided.
Enhancements#
- Support native form validation - @devongovett - PR
Toolbar
component - @snowystinger - PR
Fixes#
- Updated translations for Menu - @rgeraghty - PR
- TS StrictMode for Radio - @yihuiliao - PR
- Add getOwnerDocument and getOwnerWindow utils and update usage - @slye-stripe - PR
- NumberParser percent and significant figure fixes - @snowystinger - PR
- Remove gap shim - @snowystinger - PR
- Fix stately import from aria - @snowystinger - PR
- Check
isDateUnavailable
inuseDateFieldState
validation - @blair-c - PR - Remove circular dependency - @snowystinger - PR
- TS StrictMode for various form components - @yihuiliao - PR
- Fix SSR
useId
memory leak - @snowystinger - PR - Pass onPressUp prop to
useButton
- @andrewchough - PR - Update useTreeData move function to allow moving item to root - @michaeldfoley - PR
- TS strict aria hooks batch - @snowystinger - PR
- Resolve inconsistent look of buttons in
ActionGroup
between Firefox and Chrome - @adnicolae - PR - Use correct owner document for
useInteractOutside
- @slye-stripe - PR - Fix
FocusScope
restore logic increateTreeWalker
- @snowystinger - PR - Update React types - @snowystinger - PR
- Add translations for DatePicker plus general linguistic corrections - @rgeraghty - PR
- Add
Key
type to monopackages - @devongovett - PR - Bump lightningcss - @devongovett - PR
Docs#
- Fix example drag behavior w/ mouseUp - @blair-c - PR
- Toolbar docs - @snowystinger - PR
- Add docs for form validation - @devongovett - PR
- Fix
useCheckbox
example - @snowystinger - PR - Add basic validation docs for hooks - @devongovett - PR
Under construction#
Fixes to pre-released components are listed below. Please feel free to try them out, and report any issues you encounter.
React Aria Components (RC)
- Update React Aria Components README - @wojtekmaj - PR
- Add
isRootDropTarget
to empty state in GridList - @gennadiipel - PR - Add styled examples for React Aria Components - @devongovett - PR
- Replace value with state when destructuring
SearchFieldRenderProps
- @itsuka-dev - PR - Improve error message for required slots - @hosmelq - PR
- Add
onDrop
toDropZone
& FileTrigger examples - @blair-c - PR - Fix unexpected
TableRow
children render call - @ryo-manba - PR - Allow children in Table Column resizer - @reidbarber - PR
- Docs separate css blocks by example - @snowystinger - PR
- Use separate item components for ListBox, Menu, and GridList - @devongovett - PR
- Add validation support for React Aria Components - @devongovett - PR
- Enable easier styling in GridList & TagGroup items - @devongovett - PR
- Export
HeaderContext
- @hosmelq - PR - Use explicit "title" slot for RAC dialogs, and improve aria labelling - @devongovett - PR
- Fix types field in Tailwind plugin - @stefanprobst - PR
- Fix ComboBox re-opening after selection - @devongovett - PR
- Auto focus the first invalid field when submitting a form - @devongovett - PR
- Support hover event props - @reidbarber - PR
- Add isEntering and isExiting props to control animation from outside - @devongovett - PR
- Fix
Group
render props and focus-visible behavior with text input children - @reidbarber - PR - Add
shouldCloseOnSelect
prop to DatePicker - @sookmax - PR - Add support for named groups and peers in Tailwind plugin - @reidbarber - PR
- Fix clicking on track to move slider in RAC - @devongovett - PR
React Spectrum DropZone (Beta)
- Update RSP DropZone visual feedback example in docs - @yihuiliao - PR
- Fix
DropZone
's filled message announcement on different platforms - @yihuiliao - PR
Released packages#
- @adobe/react-spectrum@3.32.0
- @internationalized/number@3.4.0
- @react-aria/accordion@3.0.0-alpha.24
- @react-aria/actiongroup@3.7.0
- @react-aria/aria-modal-polyfill@3.7.7
- @react-aria/autocomplete@3.0.0-alpha.23
- @react-aria/breadcrumbs@3.5.8
- @react-aria/button@3.9.0
- @react-aria/calendar@3.5.3
- @react-aria/checkbox@3.12.0
- @react-aria/color@3.0.0-beta.27
- @react-aria/combobox@3.8.0
- @react-aria/datepicker@3.9.0
- @react-aria/dialog@3.5.8
- @react-aria/dnd@3.5.0
- @react-aria/focus@3.15.0
- @react-aria/form@3.0.0
- @react-aria/grid@3.8.5
- @react-aria/gridlist@3.7.2
- @react-aria/i18n@3.9.0
- @react-aria/interactions@3.20.0
- @react-aria/label@3.7.3
- @react-aria/landmark@3.0.0-beta.7
- @react-aria/link@3.6.2
- @react-aria/listbox@3.11.2
- @react-aria/menu@3.11.2
- @react-aria/meter@3.4.8
- @react-aria/numberfield@3.10.0
- @react-aria/overlays@3.19.0
- @react-aria/progress@3.4.8
- @react-aria/radio@3.9.0
- @react-aria/searchfield@3.6.0
- @react-aria/select@3.14.0
- @react-aria/selection@3.17.2
- @react-aria/separator@3.3.8
- @react-aria/slider@3.7.3
- @react-aria/spinbutton@3.6.0
- @react-aria/ssr@3.9.0
- @react-aria/steplist@3.0.0-alpha.0
- @react-aria/switch@3.5.7
- @react-aria/table@3.13.2
- @react-aria/tabs@3.8.2
- @react-aria/tag@3.3.0
- @react-aria/textfield@3.13.0
- @react-aria/toast@3.0.0-beta.7
- @react-aria/toggle@3.9.0
- @react-aria/toolbar@3.0.0-beta.0
- @react-aria/tooltip@3.6.5
- @react-aria/utils@3.22.0
- @react-aria/virtualizer@3.9.5
- @react-aria/visually-hidden@3.8.7
- @react-spectrum/accordion@3.0.0-alpha.26
- @react-spectrum/actionbar@3.4.0
- @react-spectrum/actiongroup@3.10.0
- @react-spectrum/autocomplete@3.0.0-alpha.24
- @react-spectrum/avatar@3.0.7
- @react-spectrum/badge@3.1.8
- @react-spectrum/breadcrumbs@3.9.2
- @react-spectrum/button@3.15.0
- @react-spectrum/buttongroup@3.6.8
- @react-spectrum/calendar@3.4.3
- @react-spectrum/card@3.0.0-alpha.25
- @react-spectrum/checkbox@3.9.0
- @react-spectrum/color@3.0.0-beta.28
- @react-spectrum/combobox@3.11.0
- @react-spectrum/contextualhelp@3.6.5
- @react-spectrum/datepicker@3.9.0
- @react-spectrum/dialog@3.8.5
- @react-spectrum/divider@3.5.8
- @react-spectrum/dnd@3.3.5
- @react-spectrum/dropzone@3.0.0-beta.0
- @react-spectrum/form@3.7.0
- @react-spectrum/icon@3.7.8
- @react-spectrum/illustratedmessage@3.4.8
- @react-spectrum/image@3.4.8
- @react-spectrum/inlinealert@3.2.0
- @react-spectrum/label@3.16.0
- @react-spectrum/labeledvalue@3.1.8
- @react-spectrum/layout@3.6.0
- @react-spectrum/link@3.6.2
- @react-spectrum/list@3.7.2
- @react-spectrum/listbox@3.12.2
- @react-spectrum/menu@3.16.0
- @react-spectrum/meter@3.4.8
- @react-spectrum/numberfield@3.8.0
- @react-spectrum/overlays@5.5.2
- @react-spectrum/picker@3.13.0
- @react-spectrum/progress@3.7.2
- @react-spectrum/provider@3.9.2
- @react-spectrum/radio@3.7.0
- @react-spectrum/searchfield@3.8.0
- @react-spectrum/slider@3.6.4
- @react-spectrum/statuslight@3.5.8
- @react-spectrum/steplist@3.0.0-alpha.0
- @react-spectrum/switch@3.5.0
- @react-spectrum/table@3.12.2
- @react-spectrum/tabs@3.8.2
- @react-spectrum/tag@3.2.0
- @react-spectrum/text@3.5.0
- @react-spectrum/textfield@3.11.0
- @react-spectrum/theme-dark@3.5.7
- @react-spectrum/theme-default@3.5.7
- @react-spectrum/theme-express@3.0.0-alpha.9
- @react-spectrum/theme-light@3.4.7
- @react-spectrum/toast@3.0.0-beta.7
- @react-spectrum/tooltip@3.6.2
- @react-spectrum/utils@3.11.2
- @react-spectrum/view@3.6.5
- @react-spectrum/well@3.4.8
- @react-stately/calendar@3.4.2
- @react-stately/checkbox@3.6.0
- @react-stately/collections@3.10.3
- @react-stately/color@3.5.0
- @react-stately/combobox@3.8.0
- @react-stately/data@3.11.0
- @react-stately/datepicker@3.9.0
- @react-stately/dnd@3.2.6
- @react-stately/form@3.0.0
- @react-stately/grid@3.8.3
- @react-stately/layout@3.13.4
- @react-stately/list@3.10.1
- @react-stately/menu@3.5.7
- @react-stately/numberfield@3.7.0
- @react-stately/overlays@3.6.4
- @react-stately/radio@3.10.0
- @react-stately/searchfield@3.5.0
- @react-stately/select@3.6.0
- @react-stately/selection@3.14.1
- @react-stately/slider@3.4.5
- @react-stately/steplist@3.0.0-alpha.0
- @react-stately/table@3.11.3
- @react-stately/tabs@3.6.2
- @react-stately/toggle@3.7.0
- @react-stately/tooltip@3.4.6
- @react-stately/tree@3.7.4
- @react-stately/utils@3.9.0
- @react-stately/virtualizer@3.6.5
- @react-types/accordion@3.0.0-alpha.18
- @react-types/actionbar@3.1.4
- @react-types/actiongroup@3.4.6
- @react-types/autocomplete@3.0.0-alpha.18
- @react-types/avatar@3.0.4
- @react-types/badge@3.1.6
- @react-types/breadcrumbs@3.7.2
- @react-types/button@3.9.1
- @react-types/buttongroup@3.3.6
- @react-types/calendar@3.4.2
- @react-types/card@3.0.0-alpha.21
- @react-types/checkbox@3.6.0
- @react-types/color@3.0.0-beta.21
- @react-types/combobox@3.9.0
- @react-types/contextualhelp@3.2.7
- @react-types/datepicker@3.7.0
- @react-types/dialog@3.5.7
- @react-types/divider@3.3.6
- @react-types/form@3.6.0
- @react-types/grid@3.2.3
- @react-types/illustratedmessage@3.3.6
- @react-types/image@3.3.6
- @react-types/label@3.9.0
- @react-types/layout@3.3.12
- @react-types/link@3.5.2
- @react-types/list@3.2.9
- @react-types/listbox@3.4.6
- @react-types/menu@3.9.6
- @react-types/meter@3.3.6
- @react-types/numberfield@3.7.0
- @react-types/overlays@3.8.4
- @react-types/progress@3.5.1
- @react-types/provider@3.7.1
- @react-types/radio@3.6.0
- @react-types/searchfield@3.5.2
- @react-types/select@3.9.0
- @react-types/shared@3.22.0
- @react-types/slider@3.7.0
- @react-types/statuslight@3.3.6
- @react-types/switch@3.5.0
- @react-types/table@3.9.1
- @react-types/tabs@3.3.4
- @react-types/text@3.3.6
- @react-types/textfield@3.9.0
- @react-types/tooltip@3.4.6
- @react-types/view@3.4.6
- @react-types/well@3.3.6
- @spectrum-icons/color@3.5.8
- @spectrum-icons/express@3.0.0-alpha.12
- @spectrum-icons/illustrations@3.6.8
- @spectrum-icons/ui@3.6.2
- @spectrum-icons/workflow@4.2.7
- react-aria@3.30.0
- react-aria-components@1.0.0-rc.0
- react-stately@3.28.0
- tailwindcss-react-aria-components@1.0.0-rc.0