May 1, 2024 Release

May 1, 2024

We have a huge release today! Its a GA bonanza 🎊 – Submenu , unavailable menu items , DropZone and FileTrigger components are now in GA. Check our blog post on the intricacies of the submenu interactions and how we handled them.

In addition, we have added a suite of new color components including ColorPicker , ColorArea , ColorField , ColorSlider , ColorSwatch , ColorSwatchPicker , ColorWheel , currently in beta. These enable you to build fully customizable color pickers, including accessible color descriptions for screen reader support.

The first alpha of TreeView has also been released. This was a highly requested component and includes support for expanding, collapsing, multi-selection, keyboard navigation, and interactive children. Documentation will follow soon, check out our React Spectrum storybook and React Aria Components storybook source code for examples.

We have also improved our integration with client side routers , accepting options to control router-specific behaviors such as scrolling, replacing instead of pushing to the history, base path, etc. For convenience, all collection items in React Aria Components (e.g. MenuItem ) now also support isDisabled and onAction props directly, rather than needing to be defined on the root collection.

Last but not least, we want to acknowledge all the wonderful contributors who have dedicated their time to improve our libraries. A special thanks to @ryo-manba and @sookmax , who are responsible for multiple bug fixes to Switch, IME support, ListBox, ComboBox, as well as adding new features such as additional state attributes, hover events, and language support. Thank you!! 😍

IllustratedMessage design update


        IllustratedMessage

was updated by Spectrum Design (see issue) and in this release we updated our component to match. This also solves for an internationalization issue with using italics in some languages.

React Aria Color API updates


        gradientProps

was merged into


        colorAreaProps


         useColorArea

Enhancements #

Collections

Support


        onAction

and


        isDisabled

on item elements - @devongovett - PR

Add hover events to all collection items - @reidbarber - PR

Add support for hover events in


        ListBox

Option component - @ryo-manba - PR

Add


        allowsEmptyCollection

property to


        ComboBoxProps

- @wdsjohn - PR

Turn off virtualizer when running in test env (RSP) - @LFDanLu - PR

Routing

Add support for


        routerOptions

and


        useHref

- @devongovett - PR

Add


        hrefLang

attribute to Link - @ryo-manba - PR

Forms

Add


        validationBehavior

to Form - @reidbarber - PR , @LFDanLu - PR

Export


        FormContext

and document


        validationBehavior

on RAC Form - @reidbarber - PR

Add


        isReadyOnly


        isRequired

data attributes to TextField - @sookmax - PR

Allow passing of


        inputRef

to RAC Checkbox/Switch/Radio - @yihuiliao - PR , @sookmax - PR

Add


        --trigger-width

support for DatePicker & DateRangePicker - @sookmax - PR

Add


        null

to RadioGroup


        value

- @sookmax - PR

Meter

Add informative variant in


        Meter

- @reidbarber - PR

Toast

Add


        domProps

to Toast - @snow893 - PR

Add support to display all toasts - @ktabors - PR , @yihuiliao - PR

Drag and drop

Add conditional drag and drop support - @ryo-manba - PR

Add support for


        isDisabled


        useDrag

- @reidbarber - PR

Add


        isDisabled

to RAC DropZone - @ryo-manba - PR

Add animation to Submenu tray when navigating between levels (RSP) - @reidbarber - PR

Add


        data-focused

to RAC Tabs - @snowystinger - PR

Add support for


        onError

and


        onLoad

callback in Image - @skathuria29 - PR

Add


        HoverEvents

type to


        ToggleButtonProp

- @sookmax - PR

Add support for


        shouldFlip

in RAC Tooltip - @ktabors - PR

Fixes #

Forms

Fix Switch focus events - @sookmax - PR

Fix


        onSubmit

trigger for NumberField - @tomekancu - PR

Exclude

id

from TextField


        DOMProps

- @corydeppen - PR

Render nothing if


        isInvalid

and no


        errorMessage

is provided - @LFDanLu - PR

Correct floating precision in


        snapValueToStep

- @TMH-SE - PR

ComboBox

Fix


        onSelectionChange

type in ComboBox- @acr92 - PR

Fix


        onBlur

in ComboBox when no button is provided - @tomekancu - PR

Fix timer cleanup on ComboBox unmount - @ryo-manba - PR

Remove italics from ComboBox and SearchAutocomplete (RSP) - @yihuiliao - PR

DatePicker

Fix Persian/Gregorian calendar conversion - @devongovett - PR

Fix validation for controlled DateField components - @tomekancu - PR

Allow calendar state context to set


        null

value - @psywalker - PR

Fix


        useRangeCalendar

with mobile scrolling - @QzCurious - PR

Fix backspace to shift focus to previous element in


        useDateSegment

- @ryo-manba - PR

Fix crash in


        DateRangePicker

when using SSR optimized localized strings - @devongovett - PR

Scroll Submenu trigger item into view when keyboard navigating - @reidbarber - PR

Fix Submenu safe area edge case - Reid Barber - @reidbarber - PR

Fix RAC Submenu jittering when rendered close to edge of container - @LFDanLu - PR

Fix submenu CSS specificity - @reidbarber - PR

Change


        useMenuTrigger


        onPressStart


        state.open

- @subvertallchris - PR

Improve scrolling behavior for elements with multiple scrollable parents - @reidbarber - PR

Automatically set


        MenuItem


        textValue

from children if it is a string - @devongovett - PR

Require children prop in MenuTrigger - @PHILLIPS71 - PR

Focus

Enhance


        FocusScope

to support tab completion for IMEs - @ryo-manba - PR

Fix focus tracking for dynamic iframe content - @ritz078 - PR

Fix intermittent focus ring compilation issue (Spectrum) - @devongovett - PR

Ignore HiddenSelect when tree walking - @majornista - PR

Collections

Ensure that arrow keys in grid cells always win over children - @devongovett - PR

Allow escape key event to propagate if no items are selected - @snowystinger - PR

Fix TypeError in ListBox's grid layout keyboard navigation - @sookmax - PR

Fix return type for


        onSelectionChange

- @LFDanLu - PR

Drag and drop

Fix focus returning to DropZone after closing FileTrigger - @yihuiliao - PR , @LFDanLu - PR

Remove


        Text

from RSP DropZone API - @yihuiliao - PR

Omit


        className

and


        style

prop in RSP DropZone - @yihuiliao - PR

Internationalization

Gracefully treat locales removed by


        @react-aria/optimize-locales-plugin

- @bhovhannes - PR

Export


        LocalizedStringFormatter

type in react-aria - @alexasselin008 - PR

Overlays

Fix escape key to close IME in


        useOverlay

- @ryo-manba - PR

Expose


        shouldCloseOnInteractOutside

' on Modal/ModalOverlay - @sookmax - PR

Expose


        arrowBoundaryOffset

and internalize


        arrowSize

calculation on RAC Popover and Tooltip - @sookmax - PR

Rename and export


        defaultSlot

and remove


        slotCallbackSymbol

from RAC - @alexasselin008 - PR

Allow typing in Accordion (RSP) - @FosterSamuel - PR

Fix CSS properties with undefined custom property values - @jdawber - PR

Fix


        useTreeData

root move - @telcy - PR

Export types


        SpectrumTextAreaProps


        ItemProps


        SectionProps

- @dsmmcken - PR

Fix


        labelProps

type in


        SpectrumFieldProps

- @majornista - PR

Improve tree shaking - @devongovett - PR

Backwards compatibility for


        Validation

type - @devongovett - PR

Docs #

Fix the spelling of


        hierarchical

in docs - @shpomp - PR

Update cursor style to default for Tabs in docs - @ryo-manba - PR

Add ContextualHelp example for disabled button to Tooltip docs - @reidbarber - PR

Fix the controlled RadioGroup example - @sookmax - PR

Fix various typos in docs - @reidbarber - PR

Fix typo in


        useListData

docs - @ryo-manba - PR

Escape


        <form>


        ButtonProps

with backticks - @sookmax - PR

Update testing documentation and expose some test utils - @LFDanLu - PR

Fix various imports in the docs from being set to monopackage imports - @LFDanLu - PR

Update docs for inline


        onAction

and


        isDisabled

for collection items - @LFDanLu - PR

Remove extra example from advanced customization section of Calendar - @LFDanLu - PR

Fix Submenu tray experience for iOS VoiceOver - @reidbarber - PR

Adding missing support for disabled state in color hooks docs - @ktabors - PR

Under Construction #

React Aria Components Tree (Alpha):

RAC Tree - @LFDanLu - PR , PR

React Spectrum Tree (Alpha):

TreeView - @LFDanLu - PR

Color Components (Beta):

Add color naming for accessibility - @devongovett - PR , PR , PR

Add ColorArea, ColorField, ColorSlider, and ColorWheel to RAC - @devongovett - PR , @ktabors - PR

Add ColorSwatch component - @devongovett - PR

Add ColorPicker and ColorSwatchPicker components - @devongovett - PR

Released packages #

- @adobe/react-spectrum@3.35.0
- @internationalized/date@3.5.3
- @internationalized/message@3.1.3
- @internationalized/number@3.5.2
- @internationalized/string-compiler@3.2.3
- @internationalized/string@3.2.2
- @react-aria/accordion@3.0.0-alpha.28
- @react-aria/actiongroup@3.7.4
- @react-aria/aria-modal-polyfill@3.7.9
- @react-aria/autocomplete@3.0.0-alpha.28
- @react-aria/breadcrumbs@3.5.12
- @react-aria/button@3.9.4
- @react-aria/calendar@3.5.7
- @react-aria/checkbox@3.14.2
- @react-aria/color@3.0.0-beta.32
- @react-aria/combobox@3.9.0
- @react-aria/datepicker@3.10.0
- @react-aria/dialog@3.5.13
- @react-aria/dnd@3.6.0
- @react-aria/example-theme@1.0.2
- @react-aria/focus@3.17.0
- @react-aria/form@3.0.4
- @react-aria/grid@3.9.0
- @react-aria/gridlist@3.8.0
- @react-aria/i18n@3.11.0
- @react-aria/interactions@3.21.2
- @react-aria/label@3.7.7
- @react-aria/landmark@3.0.0-beta.11
- @react-aria/link@3.7.0
- @react-aria/listbox@3.12.0
- @react-aria/live-announcer@3.3.3
- @react-aria/menu@3.14.0
- @react-aria/meter@3.4.12
- @react-aria/numberfield@3.11.2
- @react-aria/overlays@3.22.0
- @react-aria/progress@3.4.12
- @react-aria/radio@3.10.3
- @react-aria/searchfield@3.7.4
- @react-aria/select@3.14.4
- @react-aria/selection@3.18.0
- @react-aria/separator@3.3.12
- @react-aria/slider@3.7.7
- @react-aria/spinbutton@3.6.4
- @react-aria/ssr@3.9.3
- @react-aria/steplist@3.0.0-alpha.4
- @react-aria/switch@3.6.3
- @react-aria/table@3.14.0
- @react-aria/tabs@3.9.0
- @react-aria/tag@3.4.0
- @react-aria/test-utils@1.0.0-alpha.0
- @react-aria/textfield@3.14.4
- @react-aria/toast@3.0.0-beta.11
- @react-aria/toggle@3.10.3
- @react-aria/toolbar@3.0.0-beta.4
- @react-aria/tooltip@3.7.3
- @react-aria/tree@3.0.0-alpha.0
- @react-aria/utils@3.24.0
- @react-aria/virtualizer@3.10.0
- @react-aria/visually-hidden@3.8.11
- @react-spectrum/accordion@3.0.0-alpha.30
- @react-spectrum/actionbar@3.4.4
- @react-spectrum/actiongroup@3.10.4
- @react-spectrum/autocomplete@3.0.0-alpha.31
- @react-spectrum/avatar@3.0.11
- @react-spectrum/badge@3.1.12
- @react-spectrum/breadcrumbs@3.9.6
- @react-spectrum/button@3.16.3
- @react-spectrum/buttongroup@3.6.12
- @react-spectrum/calendar@3.4.8
- @react-spectrum/card@3.0.0-alpha.32
- @react-spectrum/checkbox@3.9.5
- @react-spectrum/color@3.0.0-beta.33
- @react-spectrum/combobox@3.12.4
- @react-spectrum/contextualhelp@3.6.10
- @react-spectrum/datepicker@3.9.5
- @react-spectrum/dialog@3.8.10
- @react-spectrum/divider@3.5.12
- @react-spectrum/dnd@3.3.9
- @react-spectrum/dropzone@3.0.0
- @react-spectrum/filetrigger@3.0.0
- @react-spectrum/form@3.7.5
- @react-spectrum/icon@3.7.12
- @react-spectrum/illustratedmessage@3.5.0
- @react-spectrum/image@3.5.0
- @react-spectrum/inlinealert@3.2.4
- @react-spectrum/label@3.16.5
- @react-spectrum/labeledvalue@3.1.13
- @react-spectrum/layout@3.6.4
- @react-spectrum/link@3.6.6
- @react-spectrum/list@3.7.9
- @react-spectrum/listbox@3.12.8
- @react-spectrum/menu@3.19.0
- @react-spectrum/meter@3.5.0
- @react-spectrum/numberfield@3.9.2
- @react-spectrum/overlays@5.6.0
- @react-spectrum/picker@3.14.4
- @react-spectrum/progress@3.7.6
- @react-spectrum/provider@3.9.6
- @react-spectrum/radio@3.7.5
- @react-spectrum/searchfield@3.8.5
- @react-spectrum/slider@3.6.8
- @react-spectrum/statuslight@3.5.12
- @react-spectrum/steplist@3.0.0-alpha.4
- @react-spectrum/switch@3.5.4
- @react-spectrum/table@3.12.9
- @react-spectrum/tabs@3.8.9
- @react-spectrum/tag@3.2.5
- @react-spectrum/test-utils@1.0.0-alpha.0
- @react-spectrum/text@3.5.4
- @react-spectrum/textfield@3.12.0
- @react-spectrum/theme-dark@3.5.9
- @react-spectrum/theme-default@3.5.9
- @react-spectrum/theme-express@3.0.0-alpha.11
- @react-spectrum/theme-light@3.4.9
- @react-spectrum/toast@3.0.0-beta.11
- @react-spectrum/tooltip@3.6.6
- @react-spectrum/tree@3.0.0-alpha.0
- @react-spectrum/utils@3.11.6
- @react-spectrum/view@3.6.9
- @react-spectrum/well@3.4.12
- @react-stately/calendar@3.5.0
- @react-stately/checkbox@3.6.4
- @react-stately/collections@3.10.6
- @react-stately/color@3.6.0
- @react-stately/combobox@3.8.3
- @react-stately/data@3.11.3
- @react-stately/datepicker@3.9.3
- @react-stately/dnd@3.3.0
- @react-stately/flags@3.0.2
- @react-stately/form@3.0.2
- @react-stately/grid@3.8.6
- @react-stately/layout@3.13.8
- @react-stately/list@3.10.4
- @react-stately/menu@3.7.0
- @react-stately/numberfield@3.9.2
- @react-stately/overlays@3.6.6
- @react-stately/radio@3.10.3
- @react-stately/searchfield@3.5.2
- @react-stately/select@3.6.3
- @react-stately/selection@3.15.0
- @react-stately/slider@3.5.3
- @react-stately/steplist@3.0.0-alpha.4
- @react-stately/table@3.11.7
- @react-stately/tabs@3.6.5
- @react-stately/toast@3.0.0-beta.3
- @react-stately/toggle@3.7.3
- @react-stately/tooltip@3.4.8
- @react-stately/tree@3.8.0
- @react-stately/utils@3.10.0
- @react-stately/virtualizer@3.7.0
- @react-types/accordion@3.0.0-alpha.20
- @react-types/actionbar@3.1.6
- @react-types/actiongroup@3.4.8
- @react-types/autocomplete@3.0.0-alpha.21
- @react-types/avatar@3.0.6
- @react-types/badge@3.1.8
- @react-types/breadcrumbs@3.7.4
- @react-types/button@3.9.3
- @react-types/buttongroup@3.3.8
- @react-types/calendar@3.4.5
- @react-types/card@3.0.0-alpha.25
- @react-types/checkbox@3.8.0
- @react-types/color@3.0.0-beta.24
- @react-types/combobox@3.11.0
- @react-types/contextualhelp@3.2.9
- @react-types/datepicker@3.7.3
- @react-types/dialog@3.5.9
- @react-types/divider@3.3.8
- @react-types/form@3.7.3
- @react-types/grid@3.2.5
- @react-types/illustratedmessage@3.3.8
- @react-types/image@3.4.0
- @react-types/label@3.9.2
- @react-types/layout@3.3.14
- @react-types/link@3.5.4
- @react-types/list@3.2.16
- @react-types/listbox@3.4.8
- @react-types/menu@3.9.8
- @react-types/meter@3.4.0
- @react-types/numberfield@3.8.2
- @react-types/overlays@3.8.6
- @react-types/progress@3.5.3
- @react-types/provider@3.8.0
- @react-types/radio@3.8.0
- @react-types/searchfield@3.5.4
- @react-types/select@3.9.3
- @react-types/shared@3.23.0
- @react-types/slider@3.7.2
- @react-types/statuslight@3.3.8
- @react-types/switch@3.5.2
- @react-types/table@3.9.4
- @react-types/tabs@3.3.6
- @react-types/text@3.3.8
- @react-types/textfield@3.9.2
- @react-types/tooltip@3.4.8
- @react-types/view@3.4.8
- @react-types/well@3.3.8
- @spectrum-icons/color@3.5.12
- @spectrum-icons/express@3.0.0-alpha.16
- @spectrum-icons/illustrations@3.6.12
- @spectrum-icons/ui@3.6.6
- @spectrum-icons/workflow@4.2.11
- @react-aria/optimize-locales-plugin@1.1.0
- @react-aria/parcel-resolver-optimize-locales@1.1.0