February 13, 2024 Release

February 13, 2024

Welcome to the first release of the new year! We have had a great response to our GA release of React Aria Components. If you haven’t tried it out, visit our docs to explore the examples. To help get you started, we have also created a few starter kits. These downloadable starter kits contain beautifully styled implementations of every available component and includes a working storybook. Available in vanilla and Tailwind CSS!

We have been busy working on our new Submenu feature which we are excited to release as an alpha. We have also made improvements to our overlay positioning code to better handle pinch zooming and spatial awareness.

As always, huge thanks and appreciation for everyone in our community for their feedback and contributions to make this release possible!

Enhancements#

Tailwind CSS starter kit - @devongovett - PR - PR
Add isDisabled render prop to DateSegment - @devongovett - PR
Add support for tracking visible focus across multiple windows - @slye-stripe - PR - @snowystinger - PR
Export useObjectRef from React Aria package - @zaboco - PR
Export FieldErrorContext - @vladislavsz - PR
Update DOMProps to extend SharedDOMProps in React Aria Components - @Akshithpottigari - PR
Add isWheelDisabled prop to useNumberField and useColorField - @ryo-manba - PR - @LFDanLu - PR
Add focus/blur events support for CheckboxGroup - @sookmax - PR
Add isInvalid to DateInputRenderProps - @alex-mcgovern - PR

Fixes#

TS Strict support in Dialog - @snowystinger - PR
TS Strict support in NumberField - @snowystinger - PR
TS Strict support in NumberField, Tag, InlineAlert hooks- @snowystinger - PR
TS Strict support in Aria utils - @snowystinger - PR
Fix focused row obscured by sticky table header - @majornista - PR
Fix Popover offset prop default value - @sookmax - PR
Fix tree shaking of TextField component - @devongovett - PR
Handle runAfterTransition when target is null - @VillePakarinenPosti - PR
Fix drag preview in TableView - @ryo-manba - PR
Fix React Aria Component ProgressBar and Meter overflow - @snowystinger - PR
Allow passing readonly array to Locales plugin @stefanprobst - PR
Fix width overflow issue for quiet Picker @pr7prashant - PR
Remove "use client" from types declaration files in build - @reidbarber - PR
Fix onPress when used with onKeyUp on a button - @snowystinger - PR
Fix ComboBox async loading runtime error - @sookmax - PR
Fix controlled Slider when value updates - @sookmax - PR
Ensure Collection commits updated information when removing nodes - @richardbann - PR
Add check for undefined rows in GridLayout - @sookmax - PR
Fix focusVisible in Calendar - @richardbann - PR
Freeze overlay positioning when pinch zooming - @LFDanLu - PR
Add missing aria-labels to ListBox, Menu, Tabs items in React Aria Components - @LFDanLu - PR
Add sort compare to useListData - @piecyk - PR
Remove "use client" and mark packages as client-only instead - @devongovett - PR
Ensure pure render for tree data - @snowystinger - PR
Truncate long content quiet Picker when in fixed width container - @freddiejbawden - PR
Ensure quiet Picker conforms to user set width - @LFDanLu - PR

Docs#

Update autoCaptialize props comment - @ryo-manba - PR
Fix HTML rendering in prop descriptions - @sookmax - PR
Add useObjectRef docs - @snowystinger - PR
Update default selected value for controlled RadioGroup example - @majornista - PR

Under construction#

React Spectrum Submenus (Alpha)

Make submenu properly size itself to fill available room and improve overlay positioning when pinch zoomed - @LFDanLu - PR
Fix Submenu chevron from getting hidden - @reidbarber - PR

React Aria Components Submenus (Alpha)

Submenu support for React Aria Components - @reidbarber - PR
Export RootMenuTriggerContext and SubmenuTriggerProps - @reidbarber - PR
Fix React Aria Components submenu flipping - @LFDanLu - PR
Ensure 2 renders for Submenu portal container - @snowystinger - PR
Close all Submenus when interacting outside of root submenu - @reidbarber - PR
Add support for Submenus inside sections - @reidbarber - PR

Released packages#

- @adobe/react-spectrum@3.34.0
- @react-aria/accordion@3.0.0-alpha.26
- @react-aria/actiongroup@3.7.2
- @react-aria/autocomplete@3.0.0-alpha.26
- @react-aria/breadcrumbs@3.5.10
- @react-aria/button@3.9.2
- @react-aria/calendar@3.5.5
- @react-aria/checkbox@3.14.0
- @react-aria/color@3.0.0-beta.30
- @react-aria/combobox@3.8.3
- @react-aria/datepicker@3.9.2
- @react-aria/dialog@3.5.11
- @react-aria/dnd@3.5.2
- @react-aria/focus@3.16.1
- @react-aria/form@3.0.2
- @react-aria/grid@3.8.7
- @react-aria/gridlist@3.7.4
- @react-aria/i18n@3.10.1
- @react-aria/interactions@3.21.0
- @react-aria/label@3.7.5
- @react-aria/landmark@3.0.0-beta.9
- @react-aria/link@3.6.4
- @react-aria/listbox@3.11.4
- @react-aria/menu@3.13.0
- @react-aria/meter@3.4.10
- @react-aria/numberfield@3.11.0
- @react-aria/overlays@3.21.0
- @react-aria/progress@3.4.10
- @react-aria/radio@3.10.1
- @react-aria/searchfield@3.7.2
- @react-aria/select@3.14.2
- @react-aria/selection@3.17.4
- @react-aria/separator@3.3.10
- @react-aria/slider@3.7.5
- @react-aria/spinbutton@3.6.2
- @react-aria/steplist@3.0.0-alpha.2
- @react-aria/switch@3.6.1
- @react-aria/table@3.13.4
- @react-aria/tabs@3.8.4
- @react-aria/tag@3.3.2
- @react-aria/textfield@3.14.2
- @react-aria/toast@3.0.0-beta.9
- @react-aria/toggle@3.10.1
- @react-aria/toolbar@3.0.0-beta.2
- @react-aria/tooltip@3.7.1
- @react-aria/utils@3.23.1
- @react-aria/virtualizer@3.9.9
- @react-aria/visually-hidden@3.8.9
- @react-spectrum/accordion@3.0.0-alpha.28
- @react-spectrum/actionbar@3.4.2
- @react-spectrum/actiongroup@3.10.2
- @react-spectrum/autocomplete@3.0.0-alpha.29
- @react-spectrum/avatar@3.0.9
- @react-spectrum/badge@3.1.10
- @react-spectrum/breadcrumbs@3.9.4
- @react-spectrum/button@3.16.1
- @react-spectrum/buttongroup@3.6.10
- @react-spectrum/calendar@3.4.6
- @react-spectrum/card@3.0.0-alpha.30
- @react-spectrum/checkbox@3.9.3
- @react-spectrum/color@3.0.0-beta.31
- @react-spectrum/combobox@3.12.2
- @react-spectrum/contextualhelp@3.6.8
- @react-spectrum/datepicker@3.9.3
- @react-spectrum/dialog@3.8.8
- @react-spectrum/divider@3.5.10
- @react-spectrum/dnd@3.3.7
- @react-spectrum/dropzone@3.0.0-rc.2
- @react-spectrum/form@3.7.3
- @react-spectrum/icon@3.7.10
- @react-spectrum/illustratedmessage@3.4.10
- @react-spectrum/image@3.4.10
- @react-spectrum/inlinealert@3.2.2
- @react-spectrum/label@3.16.3
- @react-spectrum/labeledvalue@3.1.11
- @react-spectrum/layout@3.6.2
- @react-spectrum/link@3.6.4
- @react-spectrum/list@3.7.7
- @react-spectrum/listbox@3.12.6
- @react-spectrum/menu@3.18.0
- @react-spectrum/meter@3.4.10
- @react-spectrum/numberfield@3.9.0
- @react-spectrum/overlays@5.5.4
- @react-spectrum/picker@3.14.2
- @react-spectrum/progress@3.7.4
- @react-spectrum/provider@3.9.4
- @react-spectrum/radio@3.7.3
- @react-spectrum/searchfield@3.8.3
- @react-spectrum/slider@3.6.6
- @react-spectrum/statuslight@3.5.10
- @react-spectrum/steplist@3.0.0-alpha.2
- @react-spectrum/switch@3.5.2
- @react-spectrum/table@3.12.7
- @react-spectrum/tabs@3.8.7
- @react-spectrum/tag@3.2.3
- @react-spectrum/text@3.5.2
- @react-spectrum/textfield@3.11.3
- @react-spectrum/toast@3.0.0-beta.9
- @react-spectrum/tooltip@3.6.4
- @react-spectrum/utils@3.11.4
- @react-spectrum/view@3.6.7
- @react-spectrum/well@3.4.10
- @react-stately/checkbox@3.6.2
- @react-stately/color@3.5.2
- @react-stately/data@3.11.1
- @react-stately/layout@3.13.6
- @react-stately/numberfield@3.9.0
- @react-stately/slider@3.5.1
- @react-stately/steplist@3.0.0-alpha.2
- @react-stately/table@3.11.5
- @react-stately/toggle@3.7.1
- @react-stately/virtualizer@3.6.7
- @react-types/card@3.0.0-alpha.23
- @react-types/checkbox@3.7.0
- @react-types/color@3.0.0-beta.22
- @react-types/list@3.2.14
- @react-types/numberfield@3.8.0
- @spectrum-icons/color@3.5.10
- @spectrum-icons/express@3.0.0-alpha.14
- @spectrum-icons/illustrations@3.6.10
- @spectrum-icons/ui@3.6.4
- @spectrum-icons/workflow@4.2.9
- react-aria@3.32.0
- react-aria-components@1.1.0
- react-stately@3.30.0
- tailwindcss-react-aria-components@1.1.0