June 15, 2021 Release

Today we're excited to announce the stable release of Tabs! 🎉 React Aria includes hooks for you to build your own tabs that are fully accessible and keyboard friendly, and React Spectrum includes some advanced behaviors like automatic collapsing when screen space is limited.

Also in this release, React Spectrum's ActionGroup component has gained support for collapsing items that do not fit in the available space. In addition, the text labels of the buttons within an ActionGroup can now be hidden, and automatically displayed in a tooltip. See our documentation for more details about this behavior.

ActionGroup, ActionButton, and ToggleButton now also support a staticColor prop, which allows these components to be placed over a color background.

Finally, thanks to @so99ynoodles and @tomsontom, React Spectrum's style props have been upgraded, including support for responsive breakpoints and CSS functions like calc().

Thank you to all our contributors for their support! 🤩

New component#

• Tabs
  • @react-spectrum/tabs - Docs
  • @react-aria/tabs - Docs
  • @react-stately/tabs - Docs

New features#

• Add support for responsive style props - @so99ynoodles - PR - Docs
• Add support for CSS functions (e.g. calc()) in style props - @tomsontom - PR - Docs
• Add collapse behavior to ActionGroup - @devongovett - PR - Docs
• Add staticColor option for ActionButton and ToggleButton - @devongovett - PR - Docs
• Support for left/right/start/end directions in MenuTrigger - @razvanip - PR - Docs
• Add useFocusVisibleListener hook for focus visible events - @jluyau - PR
• Add screen reader announcements for selection changes in TableView - @devongovett - PR

Fixed#

• Keep modality when switching tabs in useFocusVisible - @BartoszGamza - PR
• Update useSelectableList to scroll to set element correctly - @chungwu - PR
• ActionButton emphasized focus ring is now more visible - @devongovett - PR
• Update intl-messageformat package - @snowystinger - PR
• Add undefined check in updateItemSize in ListLayout - @LFDanLu - PR
• Trigger onHoverEnd when element becomes disabled in useHover - @alpinesnow - PR
• Add underlayProps to useOverlay for Firefox issue with text selection - @snowystinger - PR
• Improve selectOnFocus support in useSelectableCollection - @alirezamirian - PR
• Fix prop passthrough in TabPanel - @MarcelReis - PR
• Fix behavior of mobile ComboBox - @LFDanLu - PR
• Improve hit detection in usePress - @Andarist - PR
• Remove unused isReadOnly prop from Picker - @Patil2099 - PR
• Fix change in modality when blurring window in useFocusVisible - @BartoszGamza - PR
• Stop event propagation through portals - @jluyau - PR
• Stop default closing on select in multi-select menus - @devongovett - PR
• Show all items in ComboBox when open on mobile - @devongovett - PR
• Always show clear button with validationState in ComboBox on mobile - @devongovett - PR
• Fix keyboard navigation in useGridCell - @LFDanLu - PR
• Fix ActionButton focus ring on autofocus - @LFDanLu - PR
• Fix Popover not closing from pressing trigger - @snowystinger - PR
• Fix keyboard navigation behavior of ActionGroup - @devongovett - PR

Docs#

• Update numbering system names in NumberField - @snowystinger - PR
• Update selectedKey documentation - @LFDanLu - PR
• Update imports in Tabs - @solimant - PR
• Update useMenuTrigger imports - @shannonrothe - PR
• Fix broken design links in Menu - @matthewdeutsch - PR
• Add docs for useTabList useTabListState - @snowystinger - PR
• Fix typo in styleProps - @Robbie-Cook - PR
• Update Tooltip and Menu docs to include element ordering - @reidbarber - PR

Under construction#

Pre-release versions of the following components have been released. Please feel free to try them out, and report any issues you encounter.

• ComboBox rc
  • React Spectrum
  • React Aria
  • React Stately
• TableView beta
  • Documentation coming soon
  • Please note, the name of the component in React Spectrum changed from Table to TableView in this release. Also, the isLoading prop is now loadingState = "loading" | "loadingMore" | "sorting" | "filtering" | "error" | "idle".

Released packages#

- @adobe/react-spectrum => 3.11.0
- @internationalized/message => 3.0.1
- @internationalized/number => 3.0.1
- @react-aria/actiongroup => 3.2.0
- @react-aria/combobox => 3.0.0-rc.0
- @react-aria/dnd => 3.0.0-alpha.2
- @react-aria/focus => 3.4.0
- @react-aria/grid => 3.0.0-beta.0
- @react-aria/interactions => 3.5.0
- @react-aria/menu => 3.2.2
- @react-aria/overlays => 3.7.0
- @react-aria/selection => 3.5.0
- @react-aria/table => 3.0.0-beta.0
- @react-aria/tabs => 3.0.0
- @react-aria/utils => 3.8.1
- @react-spectrum/actionbar => 3.0.0-alpha.0
- @react-spectrum/actiongroup => 3.2.0
- @react-spectrum/button => 3.5.0
- @react-spectrum/combobox => 3.0.0-rc.0
- @react-spectrum/layout => 3.2.0
- @react-spectrum/list => 3.0.0-alpha.0
- @react-spectrum/listbox => 3.4.3
- @react-spectrum/menu => 3.3.0
- @react-spectrum/overlays => 3.4.2
- @react-spectrum/provider => 3.2.0
- @react-spectrum/table => 3.0.0-beta.0
- @react-spectrum/tabs => 3.0.0
- @react-spectrum/utils => 3.6.0
- @react-stately/combobox => 3.0.0-rc.0
- @react-stately/grid => 3.0.0-beta.0
- @react-stately/layout => 3.3.0
- @react-stately/numberfield => 3.0.1
- @react-stately/selection => 3.6.0
- @react-stately/table => 3.0.0-beta.0
- @react-stately/tabs => 3.0.0
- @react-types/actionbar => 3.0.0-alpha.0
- @react-types/actiongroup => 3.2.0
- @react-types/button => 3.4.0
- @react-types/combobox => 3.0.0-rc.0
- @react-types/grid => 3.0.0-beta.0
- @react-types/menu => 3.2.0
- @react-types/overlays => 3.5.0
- @react-types/provider => 3.3.0
- @react-types/select => 3.2.1
- @react-types/shared => 3.7.0
- @react-types/table => 3.0.0-beta.0
- @react-types/tabs => 3.0.0
- react-aria => 3.7.0
- react-stately => 3.6.0