React Spectrum
DocsReleasesBlog
React Spectrum
Releases

v1.3.0

In this release we are excited to announce support for expandable rows in TableView, highlight selection in TreeView, and window scrolling in collection components! Window scrolling enables virtualized collections to automatically scroll with the rest of the page – no height needed. In addition, we've updated the set of available workflow icons, and reduced the number of dependencies installed when using S2 by over 90% – see below for details.

To help assist with migrations from S1 to S2, we've added a new end to end migration Agent skill that you can use with your agent of choice. Our existing S2 Agent skill has also been updated to greatly improve its ability to select the proper S2 component to use from context, so be sure to update.

Sub-path imports

In this release, we are adding support for sub-path imports for each component. These sub-paths match the name of the main component, and include all child components used within it. For example, @react-spectrum/s2/Menu includes Menu, MenuItem, etc.

-import {Menu, MenuItem} from '@react-spectrum/s2';
+import {Menu, MenuItem} from '@react-spectrum/s2/Menu';

Benefits of using sub-paths include:

  • Smaller bundles without relying on tree-shaking
  • Faster builds and test runs (only need to parse code you use instead of the entire library)
  • Improved discoverability of child components. TypeScript autocomplete shows you only the components typically used together.

Our documentation has been updated to show sub-paths by default, but you can continue using the main entry point if you prefer. To migrate to using sub-path imports, run the use-subpaths codemod.

npx @react-spectrum/codemods use-subpaths --path /path/to/src

Dependency consolidation

We have also reduced the number of dependencies installed when using S2 by over 90%! To accomplish this, we have consolidated all of our internal hook packages (e.g. @react-aria/button, @react-stately/table) into the react-aria and react-stately monopackages. This means easier upgrades with fewer dependencies to manage, simplified discovery of child components, faster builds, more effective tree shaking, and improved micro-frontend support.

Learn more about the changes and backwards compatibility in the React Aria release notes.

Changelog

AI Support

  • Improve the S1-to-S2 codemod with agent mode, end-to-end tests, and more - @reidbarber - PR
  • Add an Agent Skill for migrating from S1 to S2 - @reidbarber - PR, PR
  • Refactor codemod to update Picker selection props - @reidbarber - PR

Calendar

ComboBox

  • Move the button 2px closer to the trailing edge to match design - @reidbarber - PR

Icons

  • Update S2 icons - @reidbarber - PR
    • New:
      • ArrowCurved
      • ArrowUpSend
      • BookmarkSingleFilled
      • PremiumIcon
      • StopProcessing
      • ZoomFitToHeight
      • ZoomFitToScreen
      • ZoomFitToWidth
    • Updated:
      • Archive
      • ClockPending
      • HeartFilled
      • SpeedFast
      • TagBold
      • TagItalic
      • TagStrikeThrough
      • TagUnderline
      • Wallet

ListView

Style macro

TableView

TreeView