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#
- Button
- Add pending state to Button in React Aria Components - @snowystinger - PR, PR
- Collections
- Tabs
- TableView
- Misc
- Use content hashes in CSS modules - @devongovett - PR
- TS Strict support in Stately List hooks - @snowystinger - PR
- Add test utilities for ARIA patterns to simplify test writing - @LFDanLu - PR
- Allow styles on VirtualizerItem - @patrickkuhlmann - PR
- Add support for windows contributors - @davidcoleman007 - PR
- Allow passing data attributes to FieldError in RAC - @omarnyte - PR
- Support and document
preventFocusOnPress
- @snowystinger - PR
Fixes#
- ActionBar
- Pass through ActionBar
disabledKeys
to ActionGroup - @GrantRussell - PR
- Pass through ActionBar
- ComboBox
- Date/Time
- Fix type regression in Calendar - @snowystinger - PR
- Add missing
endOfWeek
overload - @cyyynthia - PR - Fix
useDateSegment
null ref error - @teemuandersen - PR
- Menu
- Fix
useMenuItem
onAction
regression - @snowystinger - PR
- Fix
- Picker
- Update Picker placeholder to be shorter - @snowystinger - PR
- SearchField
- Select
- Tabs
- Tooltip
- Prevent Tooltip from getting stuck to screen when scrolling - @pr7prashant - PR
- Tree
- Fix
useTreeData
error and types - @snowystinger - PR
- Fix
- 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 inuseToggleState
- @Andarist - PR
Docs#
- Add missing prop from Switch example in docs - @AleksandrSI - PR
- Cleanup warnings in docs - @reidbarber - PR
- Fix docs from crashing in Safari browser - @snowystinger - PR
- Clarify Icons docs - @snowystinger - PR
- Fix
useMove
docs to be more clear when events start - @snowystinger - PR - Fix selection with falsy keys - @reidbarber - PR
- Fix RAC Breadcrumbs data selector docs - @snowystinger - PR
Under Construction#
-
TreeView/Tree (Beta):
-
Accordion/DisclosureGroup/Disclosure (Alpha)
- Accordion - @reidbarber - PR
- Add DisclosureGroup component to RAC - @devongovett - PR
- Add basic docs for Accordion, DisclosureGroup, Disclosure - @devongovett - PR
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 theDisclosure
component, which consists of two children:DisclosureHeader
andDisclosurePanel
title
onItem
is now a child ofDisclosureHeader
- Children of
Item
is now children ofDisclosurePanel
key
onItem
is nowid
onDisclosure
disabledKeys
has been removed in favor of addingisDisabled
on individualDisclosure
componentsallowsMultipleExpanded
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