Back to React Spectrum

v1.13.0

packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx

2022-12-1611.7 KB
Original Source

{/* Copyright 2020 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */}

import {Layout} from '../../../src/Layout'; export default Layout;

import docs from 'docs:@react-spectrum/s2';

export const hideNav = true; export const section = 'Releases'; export const tags = ['release', 'React Aria']; export const date = 'October 2, 2025'; export const title = 'v1.13.0'; export const description = 'Happy fall! This release brings some long-awaited features, including multi-selection in React Aria Select and enhanced animation support across our components. For example, Disclosure now provides CSS variables to easily animate expanding and collapsing. We've also added a new <SelectionIndicator> component that can be used within components that support single selection to animate selection changes. In addition, we have significantly improved the behavior of scrolling modals on iOS 26. Lastly, onAction can now be used on a ComboBoxItem, enabling you to add a “create” option.' export const isSubpage = true;

v1.13.0

Happy fall! This release brings some long-awaited features, including multi-selection in React Aria Select and enhanced animation support across our components. For example, Disclosure now provides CSS variables to easily animate expanding and collapsing. We’ve also added a new <SelectionIndicator> component that can be used within components that support single selection such as Tabs and ToggleButtonGroup to animate selection changes. In addition, we have significantly improved the behavior of scrolling modals on iOS 26. Lastly, onAction can now be used on a ComboBoxItem, enabling you to add a “create” option.

As always, thank you to our community for their support and contributions!

Multi-Selection in React Aria Select:

To support multi-selection in React Aria Select, we are updating the API from selectedKey to value, matching the React select API. The deprecated API is supported for backward compatibility, but only supports single selection. Please see our docs for more on how to implement multi-selection.

Enhancements

Fixes

  • Collection
    • Prevent crash in React Aria collections when used with Suspense and useTransition - @LFDanLu - PR
    • Fix collection dirty node tracking with Suspense - @devongovett - PR
  • Date and Time
    • Fix the day the week starts with when specifiying ISO 8601 in the locale - @snowystinger - PR, PR
    • Fix date parsing when there are seconds in the offset - @LFDanLu - PR
    • Ensure isReadonly applies to all non-literal date segments - @Persists - PR
    • Add isReadOnly to the render props in React Aria DateField/DatePicker - @Mr-Heidari - PR
  • Disclosure
    • Don't display DisclosurePanel content when it is not expanded and disabled - @LFDanLu - PR
  • Focus Management
    • Fix keyboard navigation to skip over hidden inputs to next available input - @snowystinger - PR
    • Fix unexpected onBlur events in React Aria Checkbox and Radio - @snowystinger - PR
  • GridList
    • Fix accessibiilty violations in GridList sections - @yihuiliao - PR
  • Layout and Positioning
    • Make scrollIntoView respect scroll-margin - @nwidynski - PR
    • Fix DOMLayoutDelegate miscalculation of item & visible rects - @nwidynski - PR
    • Fix overlay positioning when animation starts on first render - @devongovett - PR
  • Menu
    • Show checkboxes for selected items when ContextualHelpTrigger isUnavailable is set to false - @reidbarber - PR
  • NumberField
    • Pass disabled prop to hidden input in React Aria NumberField - @tklepzig - PR
  • Tree
    • Speed up flattening when expandening keys in Tree Collection - @snowystinger = PR
  • Miscellaneous
    • Avoid triggering onClick on disabled links - @lixiaoyan - PR

Docs

  • Clarify React Aria Toast close button placement - @reidbarber - PR

Under Construction

  • Autocomplete
    • Automatically detect if wrapped collection supports virtual focus - @LFDanLu - PR
    • Properly allow user to keyboard edit the Autocomplete input field when collection becomes empty - @LFDanLu - PR

Released packages

 - [email protected]
 - [email protected]
 - [email protected]
 - @internationalized/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-aria/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-stately/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]
 - @react-types/[email protected]