August 26, 2022 Release

🚀 We are excited to announce the release of our ListView component! A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action. It supports interactive elements within items, multi-selection, row actions, arrow key navigation, disabled items, async loading, infinite scrolling, and more. Also included in this release is an update to our FocusScope, improving how we restore focus when a trigger no longer exists.

Thanks to all our contributors for helping with this release!

New Components#

ListView

  • @react-spectrum/list - Docs
  • @react-aria/gridlist - Docs

Fixes#

  • Use id when provided in useTable and useGrid - @moelmaghraby - PR
  • FocusScope to restore to first focusable element when no tabbable element in scope - @majornista - PR
  • Escape key should continue propagation to close Overlay in useComboBox - @majornista - PR
  • Stop propagation when pressing Enter on a native link - @devongovett - PR
  • Add AriaLabelingProps to ComboBox, Calendar, RangeCalendar, Tabs, and StatusLight - @ktabors - PR
  • Add FocusRing to ListView - @ktabors - PR
  • Update FocusScope to restore correctly for overlays - @snowystinger - PR
  • Fix focus style on invalid inputs - @reidbarber - PR
  • Refactor virtualizer persisted keys - @devongovett - PR
  • Remove extraneous getKeyLeftOf/getKeyRightOf from ListLayout - @LFDanLu - PR
  • Add className to DOMAttributes interface - @reidbarber - PR
  • Prevent resize error when DatePicker input ref is undefined - @LFDanLu - PR
  • Make default TextArea grow based on text content unless there is an explicit height - @devongovett - PR
  • removing getRowText prop from useGridList - @LFDanLu - PR
  • Remove millisecond granularity from types for date/time pickers - @devongovett - PR
  • Fix Firefox TextArea autoscroll - @LFDanLu - PR
  • Fix usePress with HTML input elements - @devongovett - PR
  • Update translations for Table - @naeohmi - PR
  • Add missing time string translations in DatePicker - @rgeraghty - PR

Docs#

Under construction#

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

  • Add ColorArea and useColorArea docs - @majornista - PR
  • Add custom icon support for SearchAutocomplete - @majornista - PR
  • Update useColorArea docs with example components - @majornista - PR
  • Update drop target logic and fix modifiers in dnd - @devongovett - PR
  • Add Illustration wrapper and File/Folder illustrations - @reidbarber - PR

Released packages#

- @adobe/react-spectrum@3.21.0
- @react-aria/accordion@3.0.0-alpha.11
- @react-aria/actiongroup@3.4.1
- @react-aria/aria-modal-polyfill@3.5.3
- @react-aria/autocomplete@3.0.0-alpha.10
- @react-aria/breadcrumbs@3.3.1
- @react-aria/button@3.6.1
- @react-aria/calendar@3.0.2
- @react-aria/checkbox@3.5.1
- @react-aria/color@3.0.0-beta.15
- @react-aria/combobox@3.4.1
- @react-aria/datepicker@3.1.1
- @react-aria/dialog@3.3.1
- @react-aria/dnd@3.0.0-alpha.12
- @react-aria/focus@3.8.0
- @react-aria/grid@3.4.1
- @react-aria/gridlist@3.0.0
- @react-aria/i18n@3.6.0
- @react-aria/interactions@3.11.0
- @react-aria/label@3.4.1
- @react-aria/landmark@3.0.0-alpha.2
- @react-aria/link@3.3.3
- @react-aria/listbox@3.6.1
- @react-aria/menu@3.6.1
- @react-aria/meter@3.3.1
- @react-aria/numberfield@3.3.1
- @react-aria/overlays@3.10.1
- @react-aria/progress@3.3.1
- @react-aria/radio@3.3.1
- @react-aria/searchfield@3.4.1
- @react-aria/select@3.8.1
- @react-aria/selection@3.10.1
- @react-aria/separator@3.2.3
- @react-aria/slider@3.2.1
- @react-aria/spinbutton@3.1.3
- @react-aria/switch@3.2.3
- @react-aria/table@3.4.1
- @react-aria/tabs@3.3.1
- @react-aria/tag@3.0.0-alpha.9
- @react-aria/textfield@3.7.1
- @react-aria/toggle@3.3.3
- @react-aria/tooltip@3.3.1
- @react-aria/utils@3.13.3
- @react-aria/virtualizer@3.5.0
- @react-aria/visually-hidden@3.4.1
- @react-spectrum/accordion@3.0.0-alpha.12
- @react-spectrum/actionbar@3.0.0-alpha.12
- @react-spectrum/actiongroup@3.6.1
- @react-spectrum/autocomplete@3.0.0-alpha.10
- @react-spectrum/avatar@3.0.0-alpha.9
- @react-spectrum/breadcrumbs@3.5.1
- @react-spectrum/button@3.9.1
- @react-spectrum/buttongroup@3.4.1
- @react-spectrum/calendar@3.1.1
- @react-spectrum/card@3.0.0-alpha.11
- @react-spectrum/checkbox@3.5.1
- @react-spectrum/color@3.0.0-beta.15
- @react-spectrum/combobox@3.5.1
- @react-spectrum/contextualhelp@3.2.1
- @react-spectrum/datepicker@3.1.1
- @react-spectrum/dialog@3.5.1
- @react-spectrum/divider@3.4.1
- @react-spectrum/dnd@3.0.0-alpha.6
- @react-spectrum/form@3.4.1
- @react-spectrum/icon@3.6.0
- @react-spectrum/illustratedmessage@3.3.1
- @react-spectrum/image@3.3.1
- @react-spectrum/label@3.7.1
- @react-spectrum/layout@3.4.1
- @react-spectrum/link@3.4.1
- @react-spectrum/list@3.0.0
- @react-spectrum/listbox@3.7.1
- @react-spectrum/menu@3.8.1
- @react-spectrum/meter@3.3.1
- @react-spectrum/numberfield@3.4.1
- @react-spectrum/overlays@3.7.1
- @react-spectrum/picker@3.7.1
- @react-spectrum/progress@3.3.1
- @react-spectrum/provider@3.5.1
- @react-spectrum/radio@3.3.1
- @react-spectrum/searchfield@3.5.1
- @react-spectrum/searchwithin@3.0.0-alpha.10
- @react-spectrum/slider@3.2.1
- @react-spectrum/statuslight@3.4.1
- @react-spectrum/switch@3.3.1
- @react-spectrum/table@3.3.1
- @react-spectrum/tabs@3.3.1
- @react-spectrum/tag@3.0.0-alpha.9
- @react-spectrum/text@3.3.1
- @react-spectrum/textfield@3.7.0
- @react-spectrum/theme-dark@3.3.3
- @react-spectrum/theme-default@3.3.3
- @react-spectrum/theme-light@3.2.3
- @react-spectrum/tooltip@3.3.1
- @react-spectrum/utils@3.7.3
- @react-spectrum/view@3.3.1
- @react-spectrum/well@3.3.1
- @react-stately/calendar@3.0.2
- @react-stately/checkbox@3.2.1
- @react-stately/collections@3.4.3
- @react-stately/color@3.1.1
- @react-stately/combobox@3.2.1
- @react-stately/data@3.6.1
- @react-stately/datepicker@3.0.2
- @react-stately/dnd@3.0.0-alpha.10
- @react-stately/grid@3.3.1
- @react-stately/layout@3.7.0
- @react-stately/list@3.5.3
- @react-stately/menu@3.4.1
- @react-stately/numberfield@3.2.1
- @react-stately/overlays@3.4.1
- @react-stately/radio@3.5.1
- @react-stately/searchfield@3.3.1
- @react-stately/select@3.3.1
- @react-stately/selection@3.10.3
- @react-stately/slider@3.2.1
- @react-stately/table@3.4.0
- @react-stately/tabs@3.2.1
- @react-stately/toggle@3.4.1
- @react-stately/tooltip@3.2.1
- @react-stately/tree@3.3.3
- @react-stately/virtualizer@3.3.0
- @react-types/accordion@3.0.0-alpha.9
- @react-types/actionbar@3.0.0-alpha.9
- @react-types/actiongroup@3.3.3
- @react-types/autocomplete@3.0.0-alpha.8
- @react-types/avatar@3.0.0-alpha.8
- @react-types/breadcrumbs@3.4.3
- @react-types/button@3.6.1
- @react-types/buttongroup@3.2.3
- @react-types/calendar@3.0.2
- @react-types/card@3.0.0-alpha.9
- @react-types/checkbox@3.3.3
- @react-types/color@3.0.0-beta.12
- @react-types/combobox@3.5.3
- @react-types/contextualhelp@3.1.3
- @react-types/datepicker@3.1.1
- @react-types/dialog@3.4.3
- @react-types/divider@3.2.3
- @react-types/form@3.3.3
- @react-types/grid@3.1.3
- @react-types/illustratedmessage@3.2.3
- @react-types/image@3.2.3
- @react-types/label@3.6.3
- @react-types/layout@3.3.3
- @react-types/link@3.3.3
- @react-types/list@3.0.0
- @react-types/listbox@3.3.3
- @react-types/menu@3.7.1
- @react-types/meter@3.2.3
- @react-types/numberfield@3.3.3
- @react-types/overlays@3.6.3
- @react-types/progress@3.2.3
- @react-types/provider@3.5.3
- @react-types/radio@3.2.3
- @react-types/searchfield@3.3.3
- @react-types/searchwithin@3.0.0-alpha.8
- @react-types/select@3.6.3
- @react-types/shared@3.14.1
- @react-types/slider@3.2.1
- @react-types/statuslight@3.2.3
- @react-types/switch@3.2.3
- @react-types/table@3.3.1
- @react-types/tabs@3.1.3
- @react-types/tag@3.0.0-alpha.7
- @react-types/text@3.2.3
- @react-types/textfield@3.5.3
- @react-types/tooltip@3.2.3
- @react-types/view@3.2.3
- @react-types/well@3.2.3
- @spectrum-icons/color@3.4.2
- @spectrum-icons/illustrations@3.4.0
- @spectrum-icons/ui@3.3.2
- @spectrum-icons/workflow@4.0.2
- react-aria@3.19.0
- react-stately@3.17.0