November 15, 2022 Release

We are excited to announce the release of drag and drop support in React Aria and React Spectrum! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input. Check out our blog post for all the details!

This release also includes an update to all Spectrum colors, aligning React Spectrum with the latest Spectrum designs. Buttons also have a refreshed design, with improved accessibility, and additional variants.

React Aria also includes a new API for overlays such as popovers and modals. It is designed to make building these components much easier than before, including builtin focus management, accessibility, scroll locking, and positioning.

Finally, we have plenty of bug fixes and documentation updates. Thanks to all of our contributors who helped with this release 🤩

New Features#

Drag and Drop

Overlay hooks

Enhancements#

Spectrum color update#

Spectrum design has updated their color system with an expanded palette, improved contrast, and increased vibrance. This update applies across all React Spectrum components automatically. You can also use the new Spectrum colors in your custom components using the View component, which now has a colorVersion prop enabling you to opt-in. See the styling documentation for more details, and to view the full color palette.

Design updates#

Spectrum has also updated the designs for Button, ActionButton, ActionGroup, and ToggleButton with improved contrast and accessibility. Button includes new outline and fill options, as well as new static color options. ActionButton, ActionGroup, ToggleButton, Picker, TextField, and other field components now have darker borders and selected states for improved contrast.

The Button API has been updated to add new options, and deprecate some old ones. Deprecated options will be automatically mapped to new variants.

  • Added accent variant, replacing cta which is now deprecated.
  • Added style prop, accepting fill or outline for all button variants.
  • Added staticColor prop, which replaces the deprecated overBackground variant.
  • Deprecated isQuiet.

View the updates on our Button docs and Spectrum Design docs.

Fixes#

  • Avoid widening "type" prop of TextInputDOMProps - @jossmac - PR
  • Expose props to Section collection item - @luisadame - PR
  • Clear slots for ContextualHelp slot provider for Dialog - @jluyau - PR
  • Fix focus for empty view in TableView and ListView - @ktabors - PR
  • Fix TableView crashing when adding/removing columns - @reidbarber - PR
  • Fix DatePicker and DateField key/focus event props - @ktabors - PR
  • Export FocusVisibleProps - @warsawgentleman - PR
  • Remove unneeded aria-checked from useCheckbox and useSwitch - @tywayne - PR
  • Fix dragging in ListView with selectionMode set to none - @snowystinger - PR
  • Add generic for DatePickerStateOptions - @jason89521 - PR
  • Update date components to use useFocusWithin - @ktabors - PR
  • Wait until after a layout effect to prevent scroll in popovers - @devongovett - PR
  • Add preventDefault to onDragEnter and onDragLeave for iPad - @devongovett - PR
  • Fix types for labelProp (htmlFor) in useTextField - @LosYear - PR
  • Reset NumberField when value is null - @lishichengyan - PR
  • Fix TextArea not using full height when custom height provided - @reidbarber - PR
  • Fix useListData so that reorder operations are correctly inserted at the correct index - @LFDanLu - PR

Docs#

  • Correction of a mistake in useBreadCrumbs - @Zoe-CF - PR
  • Display monopackage "since" version for components in React Spectrum docs - @dannify - PR
  • Add link to Spectrum styling page to docs - @matthewdeutsch - PR
  • Update copy relating to theming - @snowystinger - PR

Under construction#

Fixes to pre-released components are listed below. Please feel free to try them out, and report any issues you encounter.

TagGroup updates#

We have made improvements to the TagGroup component, and it is now entering beta. This includes a few breaking changes.

  • isDisabled and disabledKeys props have been removed.
  • isRemovable has been renamed to allowsRemoving.
  • onRemove now passes the removed key instead of its children and press event.

Released packages#

- @adobe/react-spectrum@3.23.0
- @react-aria/accordion@3.0.0-alpha.13
- @react-aria/actiongroup@3.4.3
- @react-aria/aria-modal-polyfill@3.6.1
- @react-aria/autocomplete@3.0.0-alpha.12
- @react-aria/breadcrumbs@3.4.0
- @react-aria/button@3.6.3
- @react-aria/calendar@3.0.4
- @react-aria/checkbox@3.7.0
- @react-aria/color@3.0.0-beta.17
- @react-aria/combobox@3.4.3
- @react-aria/datepicker@3.2.0
- @react-aria/dialog@3.4.1
- @react-aria/dnd@3.0.0
- @react-aria/focus@3.10.0
- @react-aria/grid@3.5.1
- @react-aria/gridlist@3.1.1
- @react-aria/i18n@3.6.2
- @react-aria/interactions@3.13.0
- @react-aria/label@3.4.3
- @react-aria/landmark@3.0.0-alpha.4
- @react-aria/link@3.3.5
- @react-aria/listbox@3.7.1
- @react-aria/menu@3.7.0
- @react-aria/meter@3.3.3
- @react-aria/numberfield@3.3.3
- @react-aria/overlays@3.12.0
- @react-aria/progress@3.3.3
- @react-aria/radio@3.4.1
- @react-aria/searchfield@3.4.3
- @react-aria/select@3.8.3
- @react-aria/selection@3.12.0
- @react-aria/separator@3.2.5
- @react-aria/slider@3.2.3
- @react-aria/spinbutton@3.2.0
- @react-aria/ssr@3.4.0
- @react-aria/switch@3.3.0
- @react-aria/table@3.6.0
- @react-aria/tabs@3.3.3
- @react-aria/tag@3.0.0-beta.0
- @react-aria/textfield@3.8.0
- @react-aria/toggle@3.4.1
- @react-aria/tooltip@3.3.3
- @react-aria/utils@3.14.1
- @react-aria/virtualizer@3.6.0
- @react-aria/visually-hidden@3.6.0
- @react-spectrum/accordion@3.0.0-alpha.14
- @react-spectrum/actionbar@3.0.0-alpha.14
- @react-spectrum/actiongroup@3.7.1
- @react-spectrum/autocomplete@3.0.0-alpha.12
- @react-spectrum/avatar@3.0.0-alpha.11
- @react-spectrum/badge@3.0.1
- @react-spectrum/breadcrumbs@3.6.0
- @react-spectrum/button@3.11.0
- @react-spectrum/buttongroup@3.5.0
- @react-spectrum/calendar@3.1.3
- @react-spectrum/card@3.0.0-alpha.13
- @react-spectrum/checkbox@3.6.1
- @react-spectrum/color@3.0.0-beta.17
- @react-spectrum/combobox@3.7.0
- @react-spectrum/contextualhelp@3.4.0
- @react-spectrum/datepicker@3.3.0
- @react-spectrum/dialog@3.6.0
- @react-spectrum/divider@3.4.3
- @react-spectrum/dnd@3.0.0
- @react-spectrum/form@3.5.1
- @react-spectrum/icon@3.6.2
- @react-spectrum/illustratedmessage@3.3.3
- @react-spectrum/image@3.3.3
- @react-spectrum/label@3.9.0
- @react-spectrum/labeledvalue@3.0.1
- @react-spectrum/layout@3.4.3
- @react-spectrum/link@3.4.3
- @react-spectrum/list@3.2.0
- @react-spectrum/listbox@3.8.1
- @react-spectrum/menu@3.9.0
- @react-spectrum/meter@3.3.3
- @react-spectrum/numberfield@3.5.0
- @react-spectrum/overlays@4.0.0
- @react-spectrum/picker@3.9.0
- @react-spectrum/progress@3.3.3
- @react-spectrum/provider@3.6.0
- @react-spectrum/radio@3.4.1
- @react-spectrum/searchfield@3.6.0
- @react-spectrum/searchwithin@3.0.0-alpha.12
- @react-spectrum/slider@3.4.0
- @react-spectrum/statuslight@3.4.3
- @react-spectrum/switch@3.3.3
- @react-spectrum/table@3.5.0
- @react-spectrum/tabs@3.3.3
- @react-spectrum/tag@3.0.0-beta.0
- @react-spectrum/text@3.3.3
- @react-spectrum/textfield@3.9.0
- @react-spectrum/theme-dark@3.4.0
- @react-spectrum/theme-default@3.4.0
- @react-spectrum/theme-express@3.0.0-alpha.0
- @react-spectrum/theme-light@3.3.0
- @react-spectrum/tooltip@3.3.3
- @react-spectrum/utils@3.8.0
- @react-spectrum/view@3.4.0
- @react-spectrum/well@3.3.3
- @react-stately/calendar@3.0.4
- @react-stately/checkbox@3.3.1
- @react-stately/collections@3.5.0
- @react-stately/color@3.2.1
- @react-stately/combobox@3.3.0
- @react-stately/data@3.8.0
- @react-stately/datepicker@3.2.0
- @react-stately/dnd@3.0.0
- @react-stately/grid@3.4.1
- @react-stately/layout@3.9.0
- @react-stately/list@3.6.0
- @react-stately/menu@3.4.3
- @react-stately/numberfield@3.3.0
- @react-stately/overlays@3.4.3
- @react-stately/radio@3.6.1
- @react-stately/searchfield@3.3.3
- @react-stately/select@3.3.3
- @react-stately/selection@3.11.1
- @react-stately/slider@3.2.3
- @react-stately/table@3.6.0
- @react-stately/tabs@3.2.3
- @react-stately/toggle@3.4.3
- @react-stately/tooltip@3.2.3
- @react-stately/tree@3.4.0
- @react-stately/virtualizer@3.4.0
- @react-types/accordion@3.0.0-alpha.11
- @react-types/actionbar@3.0.0-alpha.11
- @react-types/actiongroup@3.3.5
- @react-types/autocomplete@3.0.0-alpha.10
- @react-types/avatar@3.0.0-alpha.10
- @react-types/badge@3.0.1
- @react-types/breadcrumbs@3.4.5
- @react-types/button@3.7.0
- @react-types/buttongroup@3.2.5
- @react-types/calendar@3.0.4
- @react-types/card@3.0.0-alpha.11
- @react-types/checkbox@3.4.1
- @react-types/color@3.0.0-beta.14
- @react-types/combobox@3.5.5
- @react-types/contextualhelp@3.1.5
- @react-types/datepicker@3.1.3
- @react-types/dialog@3.4.5
- @react-types/divider@3.2.5
- @react-types/form@3.4.1
- @react-types/grid@3.1.5
- @react-types/illustratedmessage@3.2.5
- @react-types/image@3.2.5
- @react-types/label@3.7.1
- @react-types/layout@3.3.5
- @react-types/link@3.3.5
- @react-types/list@3.1.1
- @react-types/listbox@3.3.5
- @react-types/menu@3.7.3
- @react-types/meter@3.2.5
- @react-types/numberfield@3.3.5
- @react-types/overlays@3.6.5
- @react-types/progress@3.2.5
- @react-types/provider@3.5.5
- @react-types/radio@3.3.1
- @react-types/searchfield@3.3.5
- @react-types/searchwithin@3.0.0-alpha.10
- @react-types/select@3.6.5
- @react-types/shared@3.16.0
- @react-types/slider@3.3.1
- @react-types/statuslight@3.2.5
- @react-types/switch@3.2.5
- @react-types/table@3.3.3
- @react-types/tabs@3.1.5
- @react-types/tag@3.0.0-beta.0
- @react-types/text@3.2.5
- @react-types/textfield@3.6.1
- @react-types/tooltip@3.2.5
- @react-types/view@3.3.0
- @react-types/well@3.2.5
- @spectrum-icons/color@3.4.4
- @spectrum-icons/express@3.0.0-alpha.0
- @spectrum-icons/illustrations@3.5.1
- @spectrum-icons/ui@3.4.0
- @spectrum-icons/workflow@4.0.4
- react-aria@3.21.0
- react-stately@3.19.0