React Aria
DocsReleasesBlog
React Aria
Releases

v1.16.0

In today’s release, we are excited to announce support for multi-select ComboBox, one of our most requested features! You can now use selectionMode="multiple" to select multiple options and customize how to display the selected items via ComboBoxValue, e.g. using a TagGroup. We’ve also added section support in Tree: simply use TreeSection and TreeHeader to group tree items into labeled sections. This release also includes improvements to overlay positioning, scroll into view behavior, and fixes to address various crashes.

This release contains one of the highest number of contributions to date. A big thank you to our contributors for all your feedback, features and fixes!

Change log

General Changes

  • Export HeaderProps type - @RobHannay - PR
  • Support collections nested within Activities - @mhornbacher - PR
  • Export LongPressEvent and MoveEvent types - @poetryofcode - PR
  • Only handle blur event for resizing viewport on iOS for proper viewport dimensions - @lixiaoyan - PR
  • Use KeyboardProps in Keyboard component and context - @artola - PR
  • Prevent docs crash by always placing template element children into the template's content - @LFDanLu - PR, PR, PR

Button

  • Allow tooltip to show on hover when Button has isPending - @albertdugba - PR

Calendar

  • Prevent setFocusedDate from stealing focus from elements outside of Calendar - @AryanBagade - PR

ComboBox

  • Move native input inside the ComboBox div for ease of access - @lixiaoyan - PR
  • Add support for multi-select ComboBox - @devongovett - PR
  • Always close ComboBox upon interacting outside the dropdown - @snowystinger - PR

Date Components

  • Add placeholder for Icelandic - @ofurtumi - PR
  • Expose isRequired in render props for DateField, TimeField, DatePicker, and DateRangePicker - @solssak - PR

FocusScope

  • Prevent crash when a single radio button is wrapped in FocusScope - @jtstothard - PR

Form

  • Prevent TypeError when Form contains elements without validity - @sonsu-lee - PR

GridList

  • Add loaderHeight prop to GridLayout and WaterfallLayout - @chirokas - PR

Internationalized

  • Export fromDateToLocal - @maximepvrt - PR
  • Skip native Date fast path when local timezone is overridden via setLocalTimeZone - @apoorvdarshan - PR

ListBox

  • Add onKeyDown prop to ListBoxItem for custom keyboard handling - @hasegawa-101 - PR

Menu

  • Make aria-posinset use 1-based index in virtualized Menu - @sonsu-lee - PR
  • Restore mouse safe area behavior for submenus - @reidbarber - PR
  • Ensure that opening a submenu via Enter/Space moves focus to first item in submenu - @LFDanLu - PR

NumberField

Overlays

  • Fix overlay positioning for overlays positioned in non-viewport containers - @LFDanLu - PR

Scrolling

  • Support scrollMargin and inline/block alignment options in scrollIntoView and scrollIntoViewport - @nwidynski - PR
  • Fix scrollIntoView so it accounts for scrollbar width & RTL layout - @nwidynski - PR

Tabs

  • Prevent setting selectedKey=null to avoid crash in Tabs - @abeljohn - PR

Table

  • Fix type so TableHeaderProps.columns properly accepts readonly arrays - @sonsu-lee - PR

Tooltip

  • Respect delay when open() is called twice in useTooltipTriggerState - @gohsue - PR

Tree

Released packages

 - @internationalized/date@3.12.0
 - @react-aria/actiongroup@3.7.24
 - @react-aria/autocomplete@3.0.0-rc.6
 - @react-aria/breadcrumbs@3.5.32
 - @react-aria/button@3.14.5
 - @react-aria/calendar@3.9.5
 - @react-aria/checkbox@3.16.5
 - @react-aria/collections@3.0.3
 - @react-aria/color@3.1.5
 - @react-aria/combobox@3.15.0
 - @react-aria/datepicker@3.16.1
 - @react-aria/dialog@3.5.34
 - @react-aria/disclosure@3.1.3
 - @react-aria/dnd@3.11.6
 - @react-aria/focus@3.21.5
 - @react-aria/form@3.1.5
 - @react-aria/grid@3.14.8
 - @react-aria/gridlist@3.14.4
 - @react-aria/i18n@3.12.16
 - @react-aria/interactions@3.27.1
 - @react-aria/label@3.7.25
 - @react-aria/landmark@3.0.10
 - @react-aria/link@3.8.9
 - @react-aria/listbox@3.15.3
 - @react-aria/menu@3.21.0
 - @react-aria/meter@3.4.30
 - @react-aria/numberfield@3.12.5
 - @react-aria/overlays@3.31.2
 - @react-aria/progress@3.4.30
 - @react-aria/radio@3.12.5
 - @react-aria/searchfield@3.8.12
 - @react-aria/select@3.17.3
 - @react-aria/selection@3.27.2
 - @react-aria/separator@3.4.16
 - @react-aria/slider@3.8.5
 - @react-aria/spinbutton@3.7.2
 - @react-aria/steplist@3.0.0-alpha.25
 - @react-aria/switch@3.7.11
 - @react-aria/table@3.17.11
 - @react-aria/tabs@3.11.1
 - @react-aria/tag@3.8.1
 - @react-aria/textfield@3.18.5
 - @react-aria/toast@3.0.11
 - @react-aria/toggle@3.12.5
 - @react-aria/toolbar@3.0.0-beta.24
 - @react-aria/tooltip@3.9.2
 - @react-aria/tree@3.1.7
 - @react-aria/utils@3.33.1
 - @react-aria/virtualizer@4.1.13
 - @react-aria/visually-hidden@3.8.31
 - @react-stately/calendar@3.9.3
 - @react-stately/checkbox@3.7.5
 - @react-stately/collections@3.12.10
 - @react-stately/color@3.9.5
 - @react-stately/combobox@3.13.0
 - @react-stately/data@3.15.2
 - @react-stately/datepicker@3.16.1
 - @react-stately/disclosure@3.0.11
 - @react-stately/dnd@3.7.4
 - @react-stately/form@3.2.4
 - @react-stately/grid@3.11.9
 - @react-stately/layout@4.6.0
 - @react-stately/list@3.13.4
 - @react-stately/menu@3.9.11
 - @react-stately/numberfield@3.11.0
 - @react-stately/overlays@3.6.23
 - @react-stately/radio@3.11.5
 - @react-stately/searchfield@3.5.19
 - @react-stately/select@3.9.2
 - @react-stately/selection@3.20.9
 - @react-stately/slider@3.7.5
 - @react-stately/steplist@3.0.0-alpha.21
 - @react-stately/table@3.15.4
 - @react-stately/tabs@3.8.9
 - @react-stately/toggle@3.9.5
 - @react-stately/tooltip@3.5.11
 - @react-stately/tree@3.9.6
 - @react-stately/virtualizer@4.4.6
 - @react-types/actionbar@3.1.21
 - @react-types/actiongroup@3.4.23
 - @react-types/autocomplete@3.0.0-alpha.38
 - @react-types/avatar@3.0.21
 - @react-types/badge@3.1.23
 - @react-types/breadcrumbs@3.7.19
 - @react-types/button@3.15.1
 - @react-types/buttongroup@3.3.23
 - @react-types/calendar@3.8.3
 - @react-types/card@3.0.0-alpha.43
 - @react-types/checkbox@3.10.4
 - @react-types/color@3.1.4
 - @react-types/combobox@3.14.0
 - @react-types/contextualhelp@3.2.24
 - @react-types/datepicker@3.13.5
 - @react-types/dialog@3.5.24
 - @react-types/divider@3.3.23
 - @react-types/form@3.7.18
 - @react-types/grid@3.3.8
 - @react-types/illustratedmessage@3.3.23
 - @react-types/image@3.5.4
 - @react-types/label@3.9.17
 - @react-types/layout@3.3.29
 - @react-types/link@3.6.7
 - @react-types/list@3.2.37
 - @react-types/listbox@3.7.6
 - @react-types/menu@3.10.7
 - @react-types/meter@3.4.15
 - @react-types/numberfield@3.8.18
 - @react-types/overlays@3.9.4
 - @react-types/progress@3.5.18
 - @react-types/provider@3.8.15
 - @react-types/radio@3.9.4
 - @react-types/searchfield@3.6.8
 - @react-types/select@3.12.2
 - @react-types/shared@3.33.1
 - @react-types/slider@3.8.4
 - @react-types/statuslight@3.3.23
 - @react-types/switch@3.5.17
 - @react-types/table@3.13.6
 - @react-types/tabs@3.3.22
 - @react-types/text@3.3.23
 - @react-types/textfield@3.12.8
 - @react-types/tooltip@3.5.2
 - @react-types/view@3.4.23
 - @react-types/well@3.3.23
 - react-aria@3.47.0
 - react-aria-components@1.16.0
 - react-stately@3.45.0