September 30, 2024 Release

Happy fall! 🍁 We’re excited to announce that our color picker components are now generally available! This includes ColorPicker, ColorArea, ColorField, ColorSlider, ColorSwatch, ColorSwatchPicker, and ColorWheel. These enable you to build fully customizable color pickers, including accessible color descriptions for screen reader support.

In addition, we’ve introduced a new pending state for buttons in React Aria Components, allowing you to display a progress spinner to indicate that an action is in progress. It also handles screen reader announcements and disables other interactions, except for focus, during the pending state.

We're also advancing the React Aria Components Tree and Spectrum TreeView to beta, and have added some basic documentation. In alpha, we have new Disclosure and DisclosureGroup components in React Aria Components, which can be used to build accordions and other collapsible panels.

Huge thanks as always to everyone who contributed to this release! 😍

Enhancements#

Fixes#

  • ActionBar
  • ComboBox
    • Keep focus on the input in ComboBox - @chirokas - PR
    • Fix isQuiet and isReadOnly styling - @LFDanLu - PR
  • Date/Time
  • Menu
  • Picker
  • SearchField
    • Fix SearchField padding right specificity - @LFDanLu - PR
  • Select
    • Fix Select from showing placeholder when selected value is 0 - @unional - PR
  • Tabs
    • Add horizontal orientation to TabsKeyboardDelegate to prevent switching tabs with up/down arrow keys - @mdhmaiti - PR
  • Tooltip
    • Prevent Tooltip from getting stuck to screen when scrolling - @pr7prashant - PR
  • Tree
  • Misc
    • Prevent click events from being fired on the wrong target on Android devices - @devongovett - PR
    • Fix linking ids when using htmlFor via useId- @snowystinger - PR
    • Fix conditional useHref call - @abeljohn - PR
    • Fix type regression on useControlledState signature - @snowystinger - PR
    • Extract ToggleStateProps type to use only what is needed in useToggleState - @Andarist - PR

Docs#

Under Construction#

  • TreeView/Tree (Beta):

  • Accordion/DisclosureGroup/Disclosure (Alpha)

Accordion updates#

We have made improvements to the Accordion component, which includes moving away from the Collection API in favor of wrapping Disclosure components, which can be used standalone. This includes a few breaking changes.

  • Item has been replaced with the Disclosure component, which consists of two children: DisclosureHeader and DisclosurePanel
  • title on Item is now a child of DisclosureHeader
  • Children of Item is now children of DisclosurePanel
  • key on Item is now id on Disclosure
  • disabledKeys has been removed in favor of adding isDisabled on individual Disclosure components
  • allowsMultipleExpanded can be added to allow multiple Disclosure components to be expanded at once (previously default behavior)

Released packages#

 - @adobe/react-spectrum@3.37.0
 - @internationalized/date@3.5.6
 - @internationalized/message@3.1.5
 - @internationalized/number@3.5.4
 - @internationalized/string-compiler@3.2.5
 - @internationalized/string@3.2.4
 - @react-aria/accordion@3.0.0-alpha.34
 - @react-aria/actiongroup@3.7.9
 - @react-aria/aria-modal-polyfill@3.7.12
 - @react-aria/autocomplete@3.0.0-alpha.34
 - @react-aria/breadcrumbs@3.5.17
 - @react-aria/button@3.10.0
 - @react-aria/calendar@3.5.12
 - @react-aria/checkbox@3.14.7
 - @react-aria/collections@3.0.0-alpha.5
 - @react-aria/color@3.0.0
 - @react-aria/combobox@3.10.4
 - @react-aria/datepicker@3.11.3
 - @react-aria/dialog@3.5.18
 - @react-aria/disclosure@3.0.0-alpha.0
 - @react-aria/dnd@3.7.3
 - @react-aria/example-theme@1.0.4
 - @react-aria/focus@3.18.3
 - @react-aria/form@3.0.9
 - @react-aria/grid@3.10.4
 - @react-aria/gridlist@3.9.4
 - @react-aria/i18n@3.12.3
 - @react-aria/interactions@3.22.3
 - @react-aria/label@3.7.12
 - @react-aria/landmark@3.0.0-beta.16
 - @react-aria/link@3.7.5
 - @react-aria/listbox@3.13.4
 - @react-aria/live-announcer@3.4.0
 - @react-aria/menu@3.15.4
 - @react-aria/meter@3.4.17
 - @react-aria/numberfield@3.11.7
 - @react-aria/optimize-locales-plugin@1.1.2
 - @react-aria/overlays@3.23.3
 - @react-aria/parcel-resolver-optimize-locales@1.1.2
 - @react-aria/progress@3.4.17
 - @react-aria/radio@3.10.8
 - @react-aria/searchfield@3.7.9
 - @react-aria/select@3.14.10
 - @react-aria/selection@3.20.0
 - @react-aria/separator@3.4.3
 - @react-aria/slider@3.7.12
 - @react-aria/spinbutton@3.6.9
 - @react-aria/ssr@3.9.6
 - @react-aria/steplist@3.0.0-alpha.10
 - @react-aria/switch@3.6.8
 - @react-aria/table@3.15.4
 - @react-aria/tabs@3.9.6
 - @react-aria/tag@3.4.6
 - @react-aria/test-utils@1.0.0-alpha.2
 - @react-aria/textfield@3.14.9
 - @react-aria/toast@3.0.0-beta.16
 - @react-aria/toggle@3.10.8
 - @react-aria/toolbar@3.0.0-beta.9
 - @react-aria/tooltip@3.7.8
 - @react-aria/tree@3.0.0-alpha.6
 - @react-aria/tree@3.0.0-beta.0
 - @react-aria/utils@3.25.3
 - @react-aria/virtualizer@4.0.3
 - @react-aria/visually-hidden@3.8.16
 - @react-spectrum/accordion@3.0.0-alpha.34
 - @react-spectrum/actionbar@3.6.0
 - @react-spectrum/actiongroup@3.10.8
 - @react-spectrum/autocomplete@3.0.0-alpha.36
 - @react-spectrum/avatar@3.0.16
 - @react-spectrum/badge@3.1.16
 - @react-spectrum/breadcrumbs@3.9.10
 - @react-spectrum/button@3.16.7
 - @react-spectrum/buttongroup@3.6.16
 - @react-spectrum/calendar@3.4.12
 - @react-spectrum/card@3.0.0-alpha.36
 - @react-spectrum/checkbox@3.9.9
 - @react-spectrum/codemods@0.2.0
 - @react-spectrum/color@3.0.0
 - @react-spectrum/combobox@3.13.3
 - @react-spectrum/contextualhelp@3.6.14
 - @react-spectrum/datepicker@3.10.2
 - @react-spectrum/dialog@3.8.14
 - @react-spectrum/divider@3.5.17
 - @react-spectrum/dnd@3.4.2
 - @react-spectrum/dropzone@3.0.4
 - @react-spectrum/filetrigger@3.0.4
 - @react-spectrum/form@3.7.9
 - @react-spectrum/icon@3.7.16
 - @react-spectrum/illustratedmessage@3.5.4
 - @react-spectrum/image@3.5.5
 - @react-spectrum/inlinealert@3.2.8
 - @react-spectrum/label@3.16.9
 - @react-spectrum/labeledvalue@3.1.17
 - @react-spectrum/layout@3.6.9
 - @react-spectrum/link@3.6.10
 - @react-spectrum/list@3.8.2
 - @react-spectrum/listbox@3.13.2
 - @react-spectrum/menu@3.20.4
 - @react-spectrum/meter@3.5.4
 - @react-spectrum/numberfield@3.9.6
 - @react-spectrum/overlays@5.6.4
 - @react-spectrum/parcel-transformer-s2-icon@0.1.1
 - @react-spectrum/picker@3.15.2
 - @react-spectrum/progress@3.7.10
 - @react-spectrum/provider@3.9.11
 - @react-spectrum/radio@3.7.9
 - @react-spectrum/s2-icon-builder@0.1.1
 - @react-spectrum/s2@0.4.0
 - @react-spectrum/searchfield@3.8.9
 - @react-spectrum/slider@3.6.12
 - @react-spectrum/statuslight@3.5.16
 - @react-spectrum/steplist@3.0.0-alpha.8
 - @react-spectrum/style-macro-s1@3.0.0-alpha.1
 - @react-spectrum/switch@3.5.8
 - @react-spectrum/table@3.14.0
 - @react-spectrum/tabs@3.8.13
 - @react-spectrum/tag@3.2.9
 - @react-spectrum/test-utils@1.0.0-alpha.2
 - @react-spectrum/text@3.5.8
 - @react-spectrum/textfield@3.12.5
 - @react-spectrum/theme-dark@3.5.13
 - @react-spectrum/theme-default@3.5.13
 - @react-spectrum/theme-express@3.0.0-alpha.15
 - @react-spectrum/theme-light@3.4.13
 - @react-spectrum/toast@3.0.0-beta.15
 - @react-spectrum/tooltip@3.6.10
 - @react-spectrum/tree@3.0.0-beta.0
 - @react-spectrum/utils@3.11.11
 - @react-spectrum/view@3.6.13
 - @react-spectrum/well@3.4.17
 - @react-stately/calendar@3.5.5
 - @react-stately/checkbox@3.6.9
 - @react-stately/collections@3.11.0
 - @react-stately/color@3.8.0
 - @react-stately/combobox@3.10.0
 - @react-stately/data@3.11.7
 - @react-stately/datepicker@3.10.3
 - @react-stately/disclosure@3.0.0-alpha.0
 - @react-stately/dnd@3.4.3
 - @react-stately/flags@3.0.4
 - @react-stately/form@3.0.6
 - @react-stately/grid@3.9.3
 - @react-stately/layout@4.0.3
 - @react-stately/list@3.11.0
 - @react-stately/menu@3.8.3
 - @react-stately/numberfield@3.9.7
 - @react-stately/overlays@3.6.11
 - @react-stately/radio@3.10.8
 - @react-stately/searchfield@3.5.7
 - @react-stately/select@3.6.8
 - @react-stately/selection@3.17.0
 - @react-stately/slider@3.5.8
 - @react-stately/steplist@3.0.0-alpha.9
 - @react-stately/table@3.12.3
 - @react-stately/tabs@3.6.10
 - @react-stately/toast@3.0.0-beta.6
 - @react-stately/toggle@3.7.8
 - @react-stately/tooltip@3.4.13
 - @react-stately/tree@3.8.5
 - @react-stately/utils@3.10.4
 - @react-stately/virtualizer@4.1.0
 - @react-types/accordion@3.0.0-alpha.24
 - @react-types/actionbar@3.1.10
 - @react-types/actiongroup@3.4.12
 - @react-types/autocomplete@3.0.0-alpha.26
 - @react-types/avatar@3.0.10
 - @react-types/badge@3.1.12
 - @react-types/breadcrumbs@3.7.8
 - @react-types/button@3.10.0
 - @react-types/buttongroup@3.3.12
 - @react-types/calendar@3.4.10
 - @react-types/card@3.0.0-alpha.30
 - @react-types/checkbox@3.8.4
 - @react-types/color@3.0.0
 - @react-types/combobox@3.13.0
 - @react-types/contextualhelp@3.2.13
 - @react-types/datepicker@3.8.3
 - @react-types/dialog@3.5.13
 - @react-types/divider@3.3.12
 - @react-types/form@3.7.7
 - @react-types/grid@3.2.9
 - @react-types/illustratedmessage@3.3.12
 - @react-types/image@3.4.4
 - @react-types/label@3.9.6
 - @react-types/layout@3.3.18
 - @react-types/link@3.5.8
 - @react-types/list@3.2.20
 - @react-types/listbox@3.5.2
 - @react-types/menu@3.9.12
 - @react-types/meter@3.4.4
 - @react-types/numberfield@3.8.6
 - @react-types/overlays@3.8.10
 - @react-types/progress@3.5.7
 - @react-types/provider@3.8.4
 - @react-types/radio@3.8.4
 - @react-types/searchfield@3.5.9
 - @react-types/select@3.9.7
 - @react-types/shared@3.25.0
 - @react-types/slider@3.7.6
 - @react-types/statuslight@3.3.12
 - @react-types/switch@3.5.6
 - @react-types/table@3.10.2
 - @react-types/tabs@3.3.10
 - @react-types/text@3.3.12
 - @react-types/textfield@3.9.7
 - @react-types/tooltip@3.4.12
 - @react-types/view@3.4.12
 - @react-types/well@3.3.12
 - @spectrum-icons/color@3.5.16
 - @spectrum-icons/express@3.0.0-alpha.20
 - @spectrum-icons/illustrations@3.6.16
 - @spectrum-icons/ui@3.6.10
 - @spectrum-icons/workflow@4.2.15
 - react-aria-components@1.4.0
 - react-aria@3.35.0
 - react-stately@3.33.0
 - tailwindcss-react-aria-components@1.1.6