October 3, 2022 Release

New Components#

Badge

  • @react-spectrum/badge - Docs LabeledValue
  • @react-spectrum/labeledvalue - Docs

New Features#

  • Add icon-only variant for Button - @jluyau - PR
  • Add HelpText to CheckboxGroup and RadioGroup - @reidbarber - PR
  • Add ContextualHelp support to all form fields - @devongovett - PR
  • Support nested focusable elements in VisuallyHidden with isFocusable option - @snowystinger - PR

Fixes#

  • Disabling TableView/ListView keyboard navigation and press interactions if collection is empty - @LFDanLu - PR
  • Focus first element in scope if nodeToRestore does not exist - @devongovett - PR
  • Fix ActionGroup more icon not rendering - @reidbarber - PR
  • Drag and drop translation update, and fix on Picker for Spanish - @rgeraghty - PR
  • Ensure checkboxes without explicit values render no value attribute in the DOM - @brandonpittman - PR
  • Fix DatePicker aria-live not announcing new months - @majornista - PR
  • ContextualHelp style props - @snowystinger - PR
  • Fix TableView infinite resize issue - @snowystinger - PR
  • Remove extra tabstop for TableView when using overflow: auto in Firefox - @ktabors - PR
  • Section and header style improvements for TableView and Menu - @snowystinger - PR
  • Fix wrapping of field label in Safari - @devongovett - PR
  • Confine TableView sticky column issue to Chrome version 105 only - @ktabors](https://github.com/ktabors) - PR
  • Provider props should not disable elements inside a Dialog - @snowystinger - PR

Docs#

  • Update textarea docs to remove old resizing info - @reidbarber - PR
  • Update mentions of illustration support in ListView docs - @jluyau - PR
  • Add missing styled example to useMenu docs - @devongovett - PR

Under construction#

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

  • Skip row contents when cycling through droppable ListView rows via TalkBack - @LFDanLu - PR
  • Fix focus behavior after dropping ListView item - @reidbarber - PR
  • Handle drag and drop modifier keys more consistently across browsers - @devongovett - PR
  • Support onAction and drag and drop in ListBox - @devongovett - PR
  • Fix ListView drag preview density - @reidbarber - PR
  • Hide dragging ListView row from Talkback during virtual drag - @LFDanLu - PR
  • Fix sticky drop indicator when exiting list - @devongovett - PR
  • Fix text truncation in mobile SearchAutocomplete - @devongovett - PR
  • Increase Column resize hit area - @snowystinger - PR
  • Update Spectrum DnD docs and rename Spectrum DnD hook - @LFDanLu - PR
  • Add documentation for drag and drop in React Aria - @devongovett - PR
  • Handle dragging with NVDA/JAWS in browse mode - @devongovett - PR
  • Fix root drop indicator so iOS VO can target it via swiping - @LFDanLu - PR
  • Update simplified DnD handler api and memoize useDnDHooks - @LFDanLu - PR
  • Focus an item after it has been dropped on - @reidbarber - PR

Drag and Drop Updates#

We have enhanced the drag and drop API in React Spectrum and React Aria in this release, and it is now entering RC status. This includes a few breaking changes.

For React Spectrum:

  • useDragHooks and useDropHooks were merged into a single hook: useDragAndDrop which combines all options together, along with new some ones (see below).
  • The corresponding dragHooks and dropHooks props of ListView have been merged into the new dragAndDropHooks prop.

For both React Spectrum and React Aria, we have added a new higher level API for drag and drop that makes it easier to build common experiences such as reordering, inserting items, dropping on folders, etc. The new options are:

  • onReorder
  • onInsert
  • onItemDrop
  • onRootDrop
  • acceptedDragTypes
  • shouldAcceptItemDrop

The previous low level API is also still available, and useful for building more custom experiences.

Check out the new drag and drop documentation for React Spectrum and React Aria to learn more.

Released packages#

- @adobe/react-spectrum@3.22.0
- @react-aria/accordion@3.0.0-alpha.12
- @react-aria/actiongroup@3.4.2
- @react-aria/aria-modal-polyfill@3.6.0
- @react-aria/autocomplete@3.0.0-alpha.11
- @react-aria/breadcrumbs@3.3.2
- @react-aria/button@3.6.2
- @react-aria/calendar@3.0.3
- @react-aria/checkbox@3.6.0
- @react-aria/color@3.0.0-beta.16
- @react-aria/combobox@3.4.2
- @react-aria/datepicker@3.1.2
- @react-aria/dialog@3.4.0
- @react-aria/dnd@3.0.0-rc.0
- @react-aria/focus@3.9.0
- @react-aria/grid@3.5.0
- @react-aria/gridlist@3.1.0
- @react-aria/i18n@3.6.1
- @react-aria/interactions@3.12.0
- @react-aria/label@3.4.2
- @react-aria/landmark@3.0.0-alpha.3
- @react-aria/link@3.3.4
- @react-aria/listbox@3.7.0
- @react-aria/menu@3.6.2
- @react-aria/meter@3.3.2
- @react-aria/numberfield@3.3.2
- @react-aria/overlays@3.11.0
- @react-aria/progress@3.3.2
- @react-aria/radio@3.4.0
- @react-aria/searchfield@3.4.2
- @react-aria/select@3.8.2
- @react-aria/selection@3.11.0
- @react-aria/separator@3.2.4
- @react-aria/slider@3.2.2
- @react-aria/spinbutton@3.1.4
- @react-aria/switch@3.2.4
- @react-aria/table@3.5.0
- @react-aria/tabs@3.3.2
- @react-aria/tag@3.0.0-alpha.10
- @react-aria/textfield@3.7.2
- @react-aria/toggle@3.4.0
- @react-aria/tooltip@3.3.2
- @react-aria/utils@3.14.0
- @react-aria/virtualizer@3.5.1
- @react-aria/visually-hidden@3.5.0
- @react-spectrum/accordion@3.0.0-alpha.13
- @react-spectrum/actionbar@3.0.0-alpha.13
- @react-spectrum/actiongroup@3.7.0
- @react-spectrum/autocomplete@3.0.0-alpha.11
- @react-spectrum/avatar@3.0.0-alpha.10
- @react-spectrum/badge@3.0.0
- @react-spectrum/breadcrumbs@3.5.2
- @react-spectrum/button@3.10.0
- @react-spectrum/buttongroup@3.4.2
- @react-spectrum/calendar@3.1.2
- @react-spectrum/card@3.0.0-alpha.12
- @react-spectrum/checkbox@3.6.0
- @react-spectrum/color@3.0.0-beta.16
- @react-spectrum/combobox@3.6.0
- @react-spectrum/contextualhelp@3.3.0
- @react-spectrum/datepicker@3.2.0
- @react-spectrum/dialog@3.5.2
- @react-spectrum/divider@3.4.2
- @react-spectrum/dnd@3.0.0-rc.0
- @react-spectrum/form@3.5.0
- @react-spectrum/icon@3.6.1
- @react-spectrum/illustratedmessage@3.3.2
- @react-spectrum/image@3.3.2
- @react-spectrum/label@3.8.0
- @react-spectrum/labeledvalue@3.0.0
- @react-spectrum/layout@3.4.2
- @react-spectrum/link@3.4.2
- @react-spectrum/list@3.1.0
- @react-spectrum/listbox@3.8.0
- @react-spectrum/menu@3.8.2
- @react-spectrum/meter@3.3.2
- @react-spectrum/numberfield@3.4.2
- @react-spectrum/overlays@3.8.0
- @react-spectrum/picker@3.8.0
- @react-spectrum/progress@3.3.2
- @react-spectrum/provider@3.5.2
- @react-spectrum/radio@3.4.0
- @react-spectrum/searchfield@3.5.2
- @react-spectrum/searchwithin@3.0.0-alpha.11
- @react-spectrum/slider@3.3.0
- @react-spectrum/statuslight@3.4.2
- @react-spectrum/switch@3.3.2
- @react-spectrum/table@3.4.0
- @react-spectrum/tabs@3.3.2
- @react-spectrum/tag@3.0.0-alpha.10
- @react-spectrum/text@3.3.2
- @react-spectrum/textfield@3.8.0
- @react-spectrum/theme-dark@3.3.4
- @react-spectrum/theme-default@3.3.4
- @react-spectrum/theme-light@3.2.4
- @react-spectrum/tooltip@3.3.2
- @react-spectrum/utils@3.7.4
- @react-spectrum/view@3.3.2
- @react-spectrum/well@3.3.2
- @react-stately/calendar@3.0.3
- @react-stately/checkbox@3.3.0
- @react-stately/collections@3.4.4
- @react-stately/color@3.2.0
- @react-stately/combobox@3.2.2
- @react-stately/data@3.7.0
- @react-stately/datepicker@3.1.0
- @react-stately/dnd@3.0.0-rc.0
- @react-stately/grid@3.4.0
- @react-stately/layout@3.8.0
- @react-stately/list@3.5.4
- @react-stately/menu@3.4.2
- @react-stately/numberfield@3.2.2
- @react-stately/overlays@3.4.2
- @react-stately/radio@3.6.0
- @react-stately/searchfield@3.3.2
- @react-stately/select@3.3.2
- @react-stately/selection@3.11.0
- @react-stately/slider@3.2.2
- @react-stately/table@3.5.0
- @react-stately/tabs@3.2.2
- @react-stately/toggle@3.4.2
- @react-stately/tooltip@3.2.2
- @react-stately/tree@3.3.4
- @react-stately/virtualizer@3.3.1
- @react-types/accordion@3.0.0-alpha.10
- @react-types/actionbar@3.0.0-alpha.10
- @react-types/actiongroup@3.3.4
- @react-types/autocomplete@3.0.0-alpha.9
- @react-types/avatar@3.0.0-alpha.9
- @react-types/badge@3.0.0
- @react-types/breadcrumbs@3.4.4
- @react-types/button@3.6.2
- @react-types/buttongroup@3.2.4
- @react-types/calendar@3.0.3
- @react-types/card@3.0.0-alpha.10
- @react-types/checkbox@3.4.0
- @react-types/color@3.0.0-beta.13
- @react-types/combobox@3.5.4
- @react-types/contextualhelp@3.1.4
- @react-types/datepicker@3.1.2
- @react-types/dialog@3.4.4
- @react-types/divider@3.2.4
- @react-types/form@3.4.0
- @react-types/grid@3.1.4
- @react-types/illustratedmessage@3.2.4
- @react-types/image@3.2.4
- @react-types/label@3.7.0
- @react-types/layout@3.3.4
- @react-types/link@3.3.4
- @react-types/list@3.1.0
- @react-types/listbox@3.3.4
- @react-types/menu@3.7.2
- @react-types/meter@3.2.4
- @react-types/numberfield@3.3.4
- @react-types/overlays@3.6.4
- @react-types/progress@3.2.4
- @react-types/provider@3.5.4
- @react-types/radio@3.3.0
- @react-types/searchfield@3.3.4
- @react-types/searchwithin@3.0.0-alpha.9
- @react-types/select@3.6.4
- @react-types/shared@3.15.0
- @react-types/slider@3.3.0
- @react-types/statuslight@3.2.4
- @react-types/switch@3.2.4
- @react-types/table@3.3.2
- @react-types/tabs@3.1.4
- @react-types/tag@3.0.0-alpha.8
- @react-types/text@3.2.4
- @react-types/textfield@3.6.0
- @react-types/tooltip@3.2.4
- @react-types/view@3.2.4
- @react-types/well@3.2.4
- @spectrum-icons/color@3.4.3
- @spectrum-icons/illustrations@3.5.0
- @spectrum-icons/ui@3.3.3
- @spectrum-icons/workflow@4.0.3
- react-aria@3.20.0
- react-stately@3.18.0

Do we need these?

Call out dnd docs