July 22, 2024 Release

For this summer release, we have been busy working on improving virtualization in many of our Spectrum components including TableView, ListView, and ListBox. We have significantly reduced the complexity of our implementation, resulting in smaller bundle size, better performance, and improved stability. In our testing, this resulted in 14x faster per-frame render times on large tables due to better reuse of DOM nodes as you scroll. We are also working on bringing virtualization support to React Aria Components, which is available as an unstable API in this version.

Our color components are also moving to RC! Focus management within Toasts have also been greatly improved, making announcements from screen readers clearer and more consistent. Thanks to @thmsfchtnr, press events now include coordinates, enabling interactions like our new animated ripple button example. And finally, in preparation for React 19, this release is now compatible with React 19 RC.

Thank you to our ever growing list of contributors! ❤️

API updates#

Because of various breaking changes, several packages are being bumped a major version, specifically @react-aria/virtualizer , @react-stately/virtualizer , and @react-stately/layout. While these packages were undocumented and not yet intended for public use, we know this is not always the case, so please review the updated code carefully.

Enhancements#

  • Breadcrumbs
  • Date and time
    • Refactor date segment width to take the space of placeholder or value - @ktabors - PR
  • Collections
    • Support grid layout and tab navigation in GridList - @devongovett - PR
    • Selection checkbox should always toggle regardless of selectionBehavior - @devongovett - PR
    • Refactor collection internals in preparation for public API - @devongovett - PR
    • Move RAC collections implementation into new package - @devongovett - PR, PR
    • Expose buttonLabelBehavior prop in ActionBar - @ktabors - PR
  • Icons
    • Spectrum icons have been re-licensed as Apache 2.0 - @devongovett - PR
  • Overlays
    • Implement scroll anchoring for overlay positioning - @devongovett - PR
    • Add ResizeObserver that observes targetRef - @sookmax - PR
  • Slider
    • Add inputRef support to RAC SliderThumb - @yihuiliao - PR
    • Remove unused excludeFromTabOrder prop on slider thumb - @snowystinger - PR
  • Table
    • Add renderProp support for if a Table row has visible focus within it - @LFDanLu - PR
    • Directly apply width to table column and add hover events to table header - @LFDanLu - PR
  • Virtualizer
    • Add Virtualizer to React Aria Components - @devongovett - PR
    • Refactor virtualizer layouts to remove Spectrum-specific logic and improve backward compatibility - @devongovett - PR
    • Refactor Virtualizer to improve performance, stability, and complexity - @devongovett - PR
    • Add support for custom collection renderers (e.g. virtualization) - @devongovett - PR
    • Render drop indicators with collection renderers and add GridLayout - @devongovett - PR
    • Pause typekit MutationObserver during scrolling - @devongovett - PR
  • Misc

Fixes#

  • Button
    • Prevent default when the submit button is clicked while isPending is true - @sookmax - PR
  • Collections
    • Fix buttons inside disabled GridList items not being disabled - @joshuajaco - PR
    • Always render ListBox section headers in RSP for dividers - @devongovett - PR
    • Fix SelectAll logic for falsy keys - @snowystinger - PR
    • Fix useListState infinite loop - @snowystinger - PR
    • Prevent onRemove from being called on disabled tags - @snowystinger - PR
    • Allow SingleSelectListState.selectedItem type to be nullable - @PHILLIPS71 - PR
    • Ensure that RAC tabs correctly find the first non-disabled tab - @yihuiliao - PR
    • Fix crash in GridLayout when a persisted key is deleted - @devongovett - PR
    • Ensure async ListBox rect updates size - @LFDanLu - PR
  • ComboBox
    • Fix correctly handle IME Input in Combobox - @ryo-manba - PR
    • Fix Combobox from closing prematurely - @snowystinger - PR
    • Fix Combobox hidden input default value causing React warnings - @sookmax - PR
    • Fix readonly ComboBox from making selections when menuTrigger is set to focus - @mwannewitz - PR
  • Date and time
  • Form
    • Prevent SearchField from triggering onSubmit when pressing Enter to complete IME - @QzCurious - PR
  • Menu
  • Overlays
    • Fix infinite resizing issue in overlay positioning - @devongovett - PR
  • Table
  • Tooltip
    • Properly close controlled tooltips - @igorman007 - PR
    • Fix tooltip positioning when containerPadding is set - @LFDanLu - PR
  • Virtualizer
  • Misc
    • Ensure Section has the [data-rac] data attribute - @amitdahan - PR
    • Fix Tailwind plugin options type - @reidbarber - PR
    • Fix Compat for React 19 types - @snowystinger - PR
    • Add nonce parameter in LocalizedStringProvider - @Julienng - PR
    • Fix synthetic links not using useHref - @joshuajaco - PR
    • Fix source maps in @react-aria - @oedotme - PR
    • Cache locale dictionary to prevent unnecessary re-renders - @IgnusG - PR
    • Include RAC i18n strings with React Spectrum LocalizedStringProvider - @LFDanLu - PR

Docs#

Under Construction#

  • Toast (Beta)

  • Color (RC)

  • Tree (Alpha) / Table

    • Load more collection element support in RAC Table and Tree - @LFDanLu - PR

Released packages#

 - @adobe/react-spectrum@3.36.0
 - @internationalized/date@3.5.5
 - @react-aria/accordion@3.0.0-alpha.30
 - @react-aria/actiongroup@3.7.6
 - @react-aria/aria-modal-polyfill@3.7.11
 - @react-aria/autocomplete@3.0.0-alpha.30
 - @react-aria/breadcrumbs@3.5.14
 - @react-aria/button@3.9.6
 - @react-aria/calendar@3.5.9
 - @react-aria/checkbox@3.14.4
 - @react-aria/collections@3.0.0-alpha.2
 - @react-aria/color@3.0.0-rc.0
 - @react-aria/combobox@3.10.0
 - @react-aria/datepicker@3.11.0
 - @react-aria/dialog@3.5.15
 - @react-aria/dnd@3.7.0
 - @react-aria/focus@3.18.0
 - @react-aria/form@3.0.6
 - @react-aria/grid@3.10.0
 - @react-aria/gridlist@3.9.0
 - @react-aria/i18n@3.12.0
 - @react-aria/interactions@3.22.0
 - @react-aria/label@3.7.9
 - @react-aria/link@3.7.2
 - @react-aria/listbox@3.13.0
 - @react-aria/menu@3.15.0
 - @react-aria/meter@3.4.14
 - @react-aria/numberfield@3.11.4
 - @react-aria/overlays@3.23.0
 - @react-aria/progress@3.4.14
 - @react-aria/radio@3.10.5
 - @react-aria/searchfield@3.7.6
 - @react-aria/select@3.14.6
 - @react-aria/selection@3.19.0
 - @react-aria/separator@3.4.0
 - @react-aria/slider@3.7.9
 - @react-aria/spinbutton@3.6.6
 - @react-aria/ssr@3.9.5
 - @react-aria/steplist@3.0.0-alpha.6
 - @react-aria/switch@3.6.5
 - @react-aria/table@3.15.0
 - @react-aria/tabs@3.9.2
 - @react-aria/tag@3.4.2
 - @react-aria/textfield@3.14.6
 - @react-aria/toast@3.0.0-beta.13
 - @react-aria/toggle@3.10.5
 - @react-aria/toolbar@3.0.0-beta.6
 - @react-aria/tooltip@3.7.5
 - @react-aria/tree@3.0.0-alpha.2
 - @react-aria/utils@3.25.0
 - @react-aria/virtualizer@4.0.0
 - @react-aria/visually-hidden@3.8.13
 - @react-spectrum/accordion@3.0.0-alpha.32
 - @react-spectrum/actionbar@3.5.0
 - @react-spectrum/actiongroup@3.10.6
 - @react-spectrum/autocomplete@3.0.0-alpha.33
 - @react-spectrum/avatar@3.0.13
 - @react-spectrum/badge@3.1.14
 - @react-spectrum/breadcrumbs@3.9.8
 - @react-spectrum/button@3.16.5
 - @react-spectrum/buttongroup@3.6.14
 - @react-spectrum/calendar@3.4.10
 - @react-spectrum/card@3.0.0-alpha.34
 - @react-spectrum/checkbox@3.9.7
 - @react-spectrum/color@3.0.0-rc.0
 - @react-spectrum/combobox@3.13.0
 - @react-spectrum/contextualhelp@3.6.12
 - @react-spectrum/datepicker@3.10.0
 - @react-spectrum/dialog@3.8.12
 - @react-spectrum/divider@3.5.14
 - @react-spectrum/dnd@3.4.0
 - @react-spectrum/dropzone@3.0.2
 - @react-spectrum/filetrigger@3.0.2
 - @react-spectrum/form@3.7.7
 - @react-spectrum/icon@3.7.14
 - @react-spectrum/illustratedmessage@3.5.2
 - @react-spectrum/image@3.5.2
 - @react-spectrum/inlinealert@3.2.6
 - @react-spectrum/label@3.16.7
 - @react-spectrum/labeledvalue@3.1.15
 - @react-spectrum/layout@3.6.6
 - @react-spectrum/link@3.6.8
 - @react-spectrum/list@3.8.0
 - @react-spectrum/listbox@3.13.0
 - @react-spectrum/menu@3.20.0
 - @react-spectrum/meter@3.5.2
 - @react-spectrum/numberfield@3.9.4
 - @react-spectrum/overlays@5.6.2
 - @react-spectrum/picker@3.15.0
 - @react-spectrum/progress@3.7.8
 - @react-spectrum/provider@3.9.8
 - @react-spectrum/radio@3.7.7
 - @react-spectrum/searchfield@3.8.7
 - @react-spectrum/slider@3.6.10
 - @react-spectrum/statuslight@3.5.14
 - @react-spectrum/steplist@3.0.0-alpha.6
 - @react-spectrum/switch@3.5.6
 - @react-spectrum/table@3.13.0
 - @react-spectrum/tabs@3.8.11
 - @react-spectrum/tag@3.2.7
 - @react-spectrum/text@3.5.6
 - @react-spectrum/textfield@3.12.2
 - @react-spectrum/theme-dark@3.5.11
 - @react-spectrum/theme-default@3.5.11
 - @react-spectrum/theme-express@3.0.0-alpha.13
 - @react-spectrum/theme-light@3.4.11
 - @react-spectrum/toast@3.0.0-beta.13
 - @react-spectrum/tooltip@3.6.8
 - @react-spectrum/tree@3.0.0-alpha.2
 - @react-spectrum/utils@3.11.8
 - @react-spectrum/view@3.6.11
 - @react-spectrum/well@3.4.14
 - @react-stately/calendar@3.5.2
 - @react-stately/checkbox@3.6.6
 - @react-stately/collections@3.10.8
 - @react-stately/color@3.7.0
 - @react-stately/combobox@3.9.0
 - @react-stately/data@3.11.5
 - @react-stately/datepicker@3.10.0
 - @react-stately/dnd@3.4.0
 - @react-stately/form@3.0.4
 - @react-stately/grid@3.9.0
 - @react-stately/layout@4.0.0
 - @react-stately/list@3.10.6
 - @react-stately/menu@3.8.0
 - @react-stately/numberfield@3.9.4
 - @react-stately/overlays@3.6.8
 - @react-stately/radio@3.10.5
 - @react-stately/searchfield@3.5.4
 - @react-stately/select@3.6.5
 - @react-stately/selection@3.16.0
 - @react-stately/slider@3.5.5
 - @react-stately/steplist@3.0.0-alpha.6
 - @react-stately/table@3.12.0
 - @react-stately/tabs@3.6.7
 - @react-stately/toast@3.0.0-beta.5
 - @react-stately/toggle@3.7.5
 - @react-stately/tooltip@3.4.10
 - @react-stately/tree@3.8.2
 - @react-stately/utils@3.10.2
 - @react-stately/virtualizer@4.0.0
 - @react-types/accordion@3.0.0-alpha.22
 - @react-types/actionbar@3.1.8
 - @react-types/actiongroup@3.4.10
 - @react-types/autocomplete@3.0.0-alpha.23
 - @react-types/avatar@3.0.8
 - @react-types/badge@3.1.10
 - @react-types/breadcrumbs@3.7.6
 - @react-types/button@3.9.5
 - @react-types/buttongroup@3.3.10
 - @react-types/calendar@3.4.7
 - @react-types/card@3.0.0-alpha.27
 - @react-types/checkbox@3.8.2
 - @react-types/color@3.0.0-rc.0
 - @react-types/combobox@3.12.0
 - @react-types/contextualhelp@3.2.11
 - @react-types/datepicker@3.8.0
 - @react-types/dialog@3.5.11
 - @react-types/divider@3.3.10
 - @react-types/form@3.7.5
 - @react-types/grid@3.2.7
 - @react-types/illustratedmessage@3.3.10
 - @react-types/image@3.4.2
 - @react-types/label@3.9.4
 - @react-types/layout@3.3.16
 - @react-types/link@3.5.6
 - @react-types/list@3.2.18
 - @react-types/listbox@3.5.0
 - @react-types/menu@3.9.10
 - @react-types/meter@3.4.2
 - @react-types/numberfield@3.8.4
 - @react-types/overlays@3.8.8
 - @react-types/progress@3.5.5
 - @react-types/provider@3.8.2
 - @react-types/radio@3.8.2
 - @react-types/searchfield@3.5.6
 - @react-types/select@3.9.5
 - @react-types/shared@3.24.0
 - @react-types/slider@3.7.4
 - @react-types/statuslight@3.3.10
 - @react-types/switch@3.5.4
 - @react-types/table@3.10.0
 - @react-types/tabs@3.3.8
 - @react-types/text@3.3.10
 - @react-types/textfield@3.9.4
 - @react-types/tooltip@3.4.10
 - @react-types/view@3.4.10
 - @react-types/well@3.3.10
 - @spectrum-icons/color@3.5.14
 - @spectrum-icons/express@3.0.0-alpha.18
 - @spectrum-icons/illustrations@3.6.14
 - @spectrum-icons/ui@3.6.8
 - @spectrum-icons/workflow@4.2.13
 - react-aria@3.34.0
 - react-aria-components@1.3.0
 - react-stately@3.32.0
 - tailwindcss-react-aria-components@1.1.4