November 20, 2024 Release

November 20, 2024

We’re excited to announce that our Accordion and Disclosure components are now generally available! This includes Disclosure and DisclosureGroup in React Aria, as well as Disclosure and Accordion in React Spectrum.

We are also excited to introduce the ToggleButtonGroup component, as well as Section-level selection groups in Menu.

Additionally, we are excited to announce that React Spectrum and React Aria are now Typescript Strict compliant.

As always, thanks to everyone in our community for your feedback and contributions! ❤️

Typescript Strict notice

React Spectrum and React Aria are now Typescript Strict compliant. This has been an extremely large, multi-year effort. We thank you for your patience and for you understanding when it comes to how this affects your applications. The benefit is that our code will now run more predictably and places we were making assumptions about null vs undefined are now spelled out.

Accordion changes

With the GA release of Accordion and Disclosure, take note of the following changes:

useAccordion and useAccordionItem from @react-aria/accordion have been deprecated in favor of useDisclosure from @react-aria/disclosure
DisclosureHeader from @react-spectrum/accordion has been updated to be DisclosureTitle

If you're using an older pre-release version of Accordion, see the previous release notes for instructions on how to migrate to the released API.

Enhancements#

Accordion
- Support hidden="until-found" in DisclosureGroup - @reidbarber - PR
Dialog
- Add <Button slot="close"> support - @devongovett - PR
Menu
- Add Section-level selection groups in Menu - @devongovett - PR
- Support nesting Menu inside Dialog popovers with additional interactive content - @devongovett - PR
ToggleButtonGroup
- Add ToggleButtonGroup component to RAC - @devongovett - PR
Misc
- Support Devanagari & Bengali decimal numbering systems - @Rocss - PR
- Update NumberParser to support roundingIncrement - @snowystinger - PR
- Add expanded state to RAC Tailwind plugin - @neefrehman - PR
- Add pending state to RAC Tailwind plugin - @reidbarber - PR

Fixes#

Accordion
- Fix Accordion borders - @reidbarber - PR
- Add box-sizing: content-box to Accordion chevron - @reidbarber - PR
Button
- Fix useButton href condition - @mehm8128 - PR
Checkbox
- Fix Checkbox validation reset not working - @nwidynski - PR
- Fix ToggleProps validate function type - @joshuajaco - PR
- Add Checkbox default slot to GridList and Table - @snowystinger - PR
Date and time
- Fix DatePicker with defaultValue to persist time zone - @boutahlilsoufiane - PR
- Fix BC era timestamps in fromAbsolute - @KimPeeters - PR
Dialog
- Add data-rac attribute to Dialog - amitdahan - PR
Select
- Remove iOS HiddenSelect workaround - @snowystinger - PR
- Set default value for type parameter in SelectProps - @kp047i - PR
Slider
- Update restrictValues in useSliderState - @Danji-ya - PR
Tooltip
- Fix RAC Tooltip getting stuck on screen when scrolling - @acr92 - PR
Misc
- Support React 19 prerelease - @snowystinger - PR
- Add "use strict"; to style macro CommonJS build output - @reidbarber - PR
- Add prefix to style macro class names - @reidbarber - PR
- Fix Typescript Strict Mode remaining issues - @snowystinger and @devongovett - PR, PR
- Add optional property types - @alecmev - PR

Docs#

Add ARIA APG grid link to useTagGroup docs - @mehm8128 - PR
Update CodeSandbox templates in useDatePicker and useDateRangePicker - @yihuiliao - PR
Fix DisclosureGroup anatomy diagram SVG clipping on mobile - @yihuiliao - PR
Update contribution guide - @yihuiliao - PR
Update Accordion and DisclosureGroup docs - @yihuiliao - PR
Add Tailwind starter for Disclosure and DisclosureGroup - @reidbarber - PR
Update Accordion, Disclosure, DisclosureGroup docs - @yihuiliao - PR
Fix typo on ProgressBar docs - @mehm8128 - PR
Add Disclosure hook docs - @reidbarber - PR
Add Q&A section to contribution guide - @unional - PR
Fix Tailwind starter Submenu - @reidbarber - PR
Add Accordion to example apps - @yihuiliao - PR
Fix disabled Tag styles in RAC Tailwind starter - @steveoh - PR

Released packages#

 - @adobe/react-spectrum: 3.37.1 => 3.38.0
 - @react-aria/i18n: 3.12.3 => 3.12.4
 - @react-aria/actiongroup: 3.7.10 => 3.7.11
 - @react-spectrum/actiongroup: 3.10.9 => 3.10.10
 - @react-spectrum/actionbar: 3.6.1 => 3.6.2
 - @react-aria/focus: 3.18.4 => 3.19.0
 - @react-aria/button: 3.10.1 => 3.11.0
 - @react-aria/accordion: 3.0.0-alpha.35 => 3.0.0-alpha.36
 - @react-spectrum/autocomplete: 3.0.0-alpha.37 => 3.0.0-alpha.38
 - @react-aria/autocomplete: 3.0.0-alpha.35 => 3.0.0-alpha.36
 - @react-aria/combobox: 3.10.5 => 3.11.0
 - @react-spectrum/combobox: 3.13.4 => 3.14.0
 - @react-spectrum/button: 3.16.8 => 3.16.9
 - @react-spectrum/breadcrumbs: 3.9.11 => 3.9.12
 - @react-aria/breadcrumbs: 3.5.18 => 3.5.19
 - react-aria: 3.35.1 => 3.36.0
 - @react-spectrum/s2: 0.4.1 => 0.5.0
 - @react-spectrum/codemods: 0.2.1 => 0.3.0
 - @react-aria/collections: 3.0.0-alpha.5 => 3.0.0-alpha.6
 - react-aria-components: 1.4.1 => 1.5.0
 - @react-spectrum/accordion: 3.0.0-alpha.35 => 3.0.0
 - @react-aria/calendar: 3.5.13 => 3.6.0
 - @react-spectrum/calendar: 3.4.13 => 3.5.0
 - @react-spectrum/datepicker: 3.10.3 => 3.11.0
 - @internationalized/date: 3.5.6 => 3.6.0
 - @react-aria/datepicker: 3.11.4 => 3.12.0
 - @react-spectrum/labeledvalue: 3.1.17 => 3.1.18
 - @react-stately/calendar: 3.5.5 => 3.6.0
 - react-stately: 3.33.0 => 3.34.0
 - @react-stately/datepicker: 3.10.3 => 3.11.0
 - @react-types/calendar: 3.4.10 => 3.5.0
 - @react-types/datepicker: 3.8.3 => 3.9.0
 - @react-types/shared: 3.25.0 => 3.26.0
 - @react-aria/checkbox: 3.14.8 => 3.15.0
 - @react-spectrum/checkbox: 3.9.10 => 3.9.11
 - @react-spectrum/card: 3.0.0-alpha.37 => 3.0.0-alpha.38
 - @react-aria/dialog: 3.5.19 => 3.5.20
 - @react-spectrum/dialog: 3.8.15 => 3.8.16
 - @react-spectrum/color: 3.0.1 => 3.0.2
 - @react-aria/color: 3.0.1 => 3.0.2
 - @react-aria/dnd: 3.7.4 => 3.8.0
 - @react-spectrum/dnd: 3.4.3 => 3.5.0
 - @react-spectrum/list: 3.8.3 => 3.9.0
 - @react-types/list: 3.2.21 => 3.2.22
 - @react-aria/gridlist: 3.9.5 => 3.10.0
 - @react-aria/tag: 3.4.7 => 3.4.8
 - @react-spectrum/tag: 3.2.10 => 3.2.11
 - @react-aria/grid: 3.10.5 => 3.11.0
 - @react-aria/table: 3.15.5 => 3.16.0
 - @react-spectrum/table: 3.14.1 => 3.15.0
 - @react-spectrum/numberfield: 3.9.7 => 3.9.8
 - @react-spectrum/tree: 3.0.0-beta.1 => 3.0.0-beta.2
 - @react-aria/link: 3.7.6 => 3.7.7
 - @react-spectrum/link: 3.6.11 => 3.6.12
 - @react-spectrum/contextualhelp: 3.6.15 => 3.6.16
 - @react-aria/menu: 3.15.5 => 3.16.0
 - @react-aria/select: 3.14.11 => 3.15.0
 - @react-spectrum/picker: 3.15.3 => 3.15.4
 - @react-spectrum/tabs: 3.8.14 => 3.8.15
 - @react-aria/overlays: 3.23.4 => 3.24.0
 - @react-spectrum/menu: 3.20.5 => 3.21.0
 - @react-aria/radio: 3.10.9 => 3.10.10
 - @react-spectrum/radio: 3.7.10 => 3.7.11
 - @react-aria/selection: 3.20.1 => 3.21.0
 - @react-aria/listbox: 3.13.5 => 3.13.6
 - @react-spectrum/listbox: 3.13.3 => 3.14.0
 - @react-aria/slider: 3.7.13 => 3.7.14
 - @react-spectrum/slider: 3.6.13 => 3.7.0
 - @react-aria/tabs: 3.9.7 => 3.9.8
 - @react-aria/textfield: 3.14.10 => 3.15.0
 - @react-aria/numberfield: 3.11.8 => 3.11.9
 - @react-aria/progress: 3.4.17 => 3.4.18
 - @react-aria/meter: 3.4.17 => 3.4.18
 - @react-spectrum/meter: 3.5.4 => 3.5.5
 - @react-spectrum/progress: 3.7.10 => 3.7.11
 - @react-aria/searchfield: 3.7.10 => 3.7.11
 - @react-spectrum/searchfield: 3.8.10 => 3.8.11
 - @react-aria/spinbutton: 3.6.9 => 3.6.10
 - @react-aria/steplist: 3.0.0-alpha.11 => 3.0.0-alpha.12
 - @react-spectrum/steplist: 3.0.0-alpha.9 => 3.0.0-alpha.10
 - @react-aria/toggle: 3.10.9 => 3.10.10
 - @react-aria/switch: 3.6.9 => 3.6.10
 - @react-spectrum/switch: 3.5.9 => 3.5.10
 - @react-aria/toolbar: 3.0.0-beta.10 => 3.0.0-beta.11
 - @react-aria/tooltip: 3.7.9 => 3.7.10
 - @react-spectrum/tooltip: 3.6.11 => 3.7.0
 - @react-spectrum/inlinealert: 3.2.9 => 3.2.10
 - @react-spectrum/textfield: 3.12.6 => 3.12.7
 - @react-spectrum/toast: 3.0.0-beta.16 => 3.0.0-beta.17
 - @react-aria/interactions: 3.22.4 => 3.22.5
 - @react-aria/form: 3.0.10 => 3.0.11
 - @react-aria/toast: 3.0.0-beta.17 => 3.0.0-beta.18
 - @react-aria/tree: 3.0.0-beta.1 => 3.0.0-beta.2
 - @react-aria/virtualizer: 4.0.4 => 4.1.0
 - @react-spectrum/dropzone: 3.0.5 => 3.0.6
 - @react-spectrum/label: 3.16.9 => 3.16.10
 - @react-spectrum/provider: 3.9.12 => 3.10.0
 - @react-spectrum/utils: 3.11.11 => 3.12.0
 - @react-spectrum/avatar: 3.0.16 => 3.0.17
 - @react-aria/utils: 3.25.3 => 3.26.0
 - @react-aria/disclosure: 3.0.0-alpha.1 => 3.0.0
 - @react-aria/ssr: 3.9.6 => 3.9.7
 - @react-aria/label: 3.7.12 => 3.7.13
 - @react-aria/landmark: 3.0.0-beta.16 => 3.0.0-beta.17
 - @react-aria/separator: 3.4.3 => 3.4.4
 - @react-spectrum/divider: 3.5.17 => 3.5.18
 - @react-aria/visually-hidden: 3.8.17 => 3.8.18
 - @react-spectrum/overlays: 5.6.5 => 5.7.0
 - @react-spectrum/badge: 3.1.17 => 3.1.18
 - @react-spectrum/buttongroup: 3.6.16 => 3.6.17
 - @react-spectrum/form: 3.7.9 => 3.7.10
 - @react-spectrum/icon: 3.7.16 => 3.8.0
 - @spectrum-icons/color: 3.5.16 => 3.5.17
 - @spectrum-icons/express: 3.0.0-alpha.20 => 3.0.0-alpha.21
 - @spectrum-icons/illustrations: 3.6.16 => 3.6.17
 - @react-spectrum/illustratedmessage: 3.5.4 => 3.5.5
 - @react-spectrum/image: 3.5.5 => 3.5.6
 - @react-spectrum/layout: 3.6.9 => 3.6.10
 - @react-spectrum/statuslight: 3.5.16 => 3.5.17
 - @react-spectrum/text: 3.5.9 => 3.5.10
 - @react-spectrum/view: 3.6.13 => 3.6.14
 - @react-spectrum/well: 3.4.17 => 3.4.18
 - @react-stately/virtualizer: 4.1.0 => 4.2.0
 - @react-stately/layout: 4.0.3 => 4.1.0
 - @react-stately/collections: 3.11.0 => 3.12.0
 - @react-stately/combobox: 3.10.0 => 3.10.1
 - @react-stately/grid: 3.9.3 => 3.10.0
 - @react-stately/table: 3.12.3 => 3.13.0
 - @react-stately/list: 3.11.0 => 3.11.1
 - @react-stately/select: 3.6.8 => 3.6.9
 - @react-stately/form: 3.0.6 => 3.1.0
 - @react-stately/checkbox: 3.6.9 => 3.6.10
 - @react-stately/color: 3.8.0 => 3.8.1
 - @internationalized/number: 3.5.4 => 3.6.0
 - @react-stately/numberfield: 3.9.7 => 3.9.8
 - @react-stately/radio: 3.10.8 => 3.10.9
 - @react-stately/data: 3.11.7 => 3.12.0
 - @react-stately/disclosure: 3.0.0-alpha.0 => 3.0.0
 - @react-stately/utils: 3.10.4 => 3.10.5
 - @react-stately/overlays: 3.6.11 => 3.6.12
 - @react-stately/menu: 3.8.3 => 3.9.0
 - @react-stately/tooltip: 3.4.13 => 3.5.0
 - @react-stately/searchfield: 3.5.7 => 3.5.8
 - @react-stately/selection: 3.17.0 => 3.18.0
 - @react-stately/dnd: 3.4.3 => 3.5.0
 - @react-stately/tree: 3.8.5 => 3.8.6
 - @react-stately/slider: 3.5.8 => 3.6.0
 - @react-stately/steplist: 3.0.0-alpha.9 => 3.0.0-alpha.10
 - @react-stately/tabs: 3.6.10 => 3.7.0
 - @react-stately/toggle: 3.7.8 => 3.8.0
 - @react-types/checkbox: 3.8.4 => 3.9.0
 - @react-types/accordion: 3.0.0-alpha.24 => 3.0.0-alpha.25
 - @react-types/actionbar: 3.1.10 => 3.1.11
 - @react-types/actiongroup: 3.4.12 => 3.4.13
 - @react-types/autocomplete: 3.0.0-alpha.26 => 3.0.0-alpha.27
 - @react-types/combobox: 3.13.0 => 3.13.1
 - @react-types/avatar: 3.0.10 => 3.0.11
 - @react-types/badge: 3.1.12 => 3.1.13
 - @react-types/breadcrumbs: 3.7.8 => 3.7.9
 - @react-types/link: 3.5.8 => 3.5.9
 - @react-types/button: 3.10.0 => 3.10.1
 - @react-types/buttongroup: 3.3.12 => 3.3.13
 - @react-types/card: 3.0.0-alpha.30 => 3.0.0-alpha.31
 - @react-types/color: 3.0.0 => 3.0.1
 - @react-types/contextualhelp: 3.2.13 => 3.2.14
 - @react-types/overlays: 3.8.10 => 3.8.11
 - @react-types/dialog: 3.5.13 => 3.5.14
 - @react-types/menu: 3.9.12 => 3.9.13
 - @react-types/tooltip: 3.4.12 => 3.4.13
 - @react-types/divider: 3.3.12 => 3.3.13
 - @react-types/form: 3.7.7 => 3.7.8
 - @react-types/grid: 3.2.9 => 3.2.10
 - @react-types/table: 3.10.2 => 3.10.3
 - @react-types/illustratedmessage: 3.3.12 => 3.3.13
 - @react-types/image: 3.4.4 => 3.4.5
 - @react-types/label: 3.9.6 => 3.9.7
 - @react-types/layout: 3.3.18 => 3.3.19
 - @react-types/listbox: 3.5.2 => 3.5.3
 - @react-types/numberfield: 3.8.6 => 3.8.7
 - @react-types/progress: 3.5.7 => 3.5.8
 - @react-types/meter: 3.4.4 => 3.4.5
 - @react-types/provider: 3.8.4 => 3.8.5
 - @react-spectrum/theme-dark: 3.5.13 => 3.5.14
 - @react-spectrum/theme-default: 3.5.13 => 3.5.14
 - @react-spectrum/theme-express: 3.0.0-alpha.15 => 3.0.0-alpha.16
 - @react-spectrum/theme-light: 3.4.13 => 3.4.14
 - @react-types/radio: 3.8.4 => 3.8.5
 - @react-types/searchfield: 3.5.9 => 3.5.10
 - @react-types/select: 3.9.7 => 3.9.8
 - @react-types/slider: 3.7.6 => 3.7.7
 - @react-types/statuslight: 3.3.12 => 3.3.13
 - @react-types/switch: 3.5.6 => 3.5.7
 - @react-types/tabs: 3.3.10 => 3.3.11
 - @react-types/text: 3.3.12 => 3.3.13
 - @react-types/textfield: 3.9.7 => 3.10.0
 - @react-types/view: 3.4.12 => 3.4.13
 - @react-types/well: 3.3.12 => 3.3.13
 - @internationalized/message: 3.1.5 => 3.1.6
 - @react-spectrum/filetrigger: 3.0.5 => 3.0.6
 - @spectrum-icons/ui: 3.6.10 => 3.6.11
 - @spectrum-icons/workflow: 4.2.15 => 4.2.16
 - @react-stately/toast: 3.0.0-beta.6 => 3.0.0-beta.7
 - @react-spectrum/style-macro-s1: 3.0.0-alpha.1 => 3.0.0-alpha.2
 - @react-aria/aria-modal-polyfill: 3.7.12 => 3.7.13
 - @react-aria/test-utils: 1.0.0-alpha.2 => 1.0.0-alpha.3
 - @react-spectrum/test-utils: 1.0.0-alpha.2 => 1.0.0-alpha.3
 - @react-aria/parcel-resolver-optimize-locales: 1.1.2 => 1.2.0
 - @react-spectrum/parcel-transformer-s2-icon: 0.1.2 => 0.2.0
 - @react-spectrum/s2-icon-builder: 0.1.2 => 0.2.0
 - tailwindcss-react-aria-components: 1.1.6 => 1.2.0
 - @internationalized/string: 3.2.4 => 3.2.5
 - @internationalized/string-compiler: 3.2.5 => 3.2.6
 - @react-aria/example-theme: 1.0.4 => 1.0.5
 - @react-aria/live-announcer: 3.4.0 => 3.4.1
 - @react-stately/flags: 3.0.4 => 3.0.5
 - @react-aria/optimize-locales-plugin: 1.1.2 => 1.1.3