{/* 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'; import datepickerImage from 'url:../assets/datepicker-rtl.png';

export const hideNav = true; export const section = 'Releases'; export const tags = ['release', 'React Aria']; export const date = 'March 5, 2025'; export const title = 'v1.7.0'; export const description = 'Buckle in because this is a big one! In this React Aria release, we are excited to announce that Tree and Virtualizer are now in GA, while Toast is now in available as an alpha. We've also made improvements to Autocomplete, added support for custom Menu, Popover, and Tooltip triggers, completed a major refactor of usePress, and more!'; export const isSubpage = true;

v1.7.0

Buckle in because this is a big one! In this React Aria release, we’re excited to announce three new components: Toast, Tree, and Virtualizer. In addition, we have improved Autocomplete to enable UI patterns like Searchable Menus, Searchable Selects, and Command Palettes, added support for custom Menu, Popover, and Tooltip triggers, introduced colSpan support in Table, and upgraded to Tailwind CSS v4. Last but not least, we have a major refactor of usePress, which fixes many longstanding issues and improves compatibility with third party libraries.

This release would not be possible without the fantastic contributions we received from the community. A special shoutout to @oyvinmar and @nwidynski for contributing features like colSpan and nested collection support. Huge thanks to everyone else who contributed as well. ❤️

Date and Time Formatting in RTL Languages:

In this release, we've improved support for right-to-left languages in our date picker components to correct the order of the segments. To account for this, you must update your styles for DateInput to use normal CSS flow layout, e.g. display: block instead of display: flex. If you are using the useDateSegment hook, ensure that you render spans instead of divs. These changes allow the browser to correctly order the segments according to the Unicode Bidirectional Algorithm. If you choose to not make these style changes, your component will look the same as before, but will not format correctly in RTL languages.

usePress update:

usePress was heavily refactored to improve focus management and compatibility with third party libraries. Prior to this refactor, we used preventDefault and manually managed focus due to differences in focus behavior between Safari and other browsers. Unfortunately, this resulted in many unintended side effects, such as canceling compatibility mouse events, breaking the :active and :focus-visible pseudo classes, causing issues with the mobile virtual keyboard, etc.

Thanks to an update in Safari 17, all elements with an explicit tabIndex can now receive focus like in other browsers. This allows us to remove our reliance on preventDefault, and change the timing of when onPress is fired. As a result, browser events that used to be prevented when interacting with our components now fire as expected, greatly improving compatibility with third party libraries that rely on these events, and resolving over 15 open issues.

Note that this refactor changes the order that focus occurs. Previously, focus always occurred before onPressStart. Now focus occurs after onPressStart on mouse and keyboard interactions, and after onPressEnd on touch screens, matching native browser behavior. Additionally, unit tests may need to simulate different events than before. We recommend the user-event library to simulate events matching browser behavior.

Enhancements

• Button
  • Add support for aria-current prop - @TimonVS - PR
• Collections
  • Add autoFocus prop to GridList - @snowystinger - PR
  • Add colSpan prop to Table - @oyvinmar - PR, @snowystinger - PR, @devongovett - PR
  • Support Tooltips on Tags and Tabs - @devongovett - PR
  • Support nested collections - @nwidynski - PR
  • Add WaterfallLayout for Virtualizer and update GridLayout - @devongovett - PR
• Popover
  • Automatically render Popovers as Dialogs - @devongovett - PR
• Toast
  • Use View Transition API for Toast animations - @reidbarber - PR, PR
• usePress
  • No longer preventDefault in usePress and allow browser to manage focus - @devongovett - PR, PR, PR, @yihuiliao - PR, PR
• Miscellaneous
  • Update to Tailwind v4 - @devongovett - PR
  • Focus Management within ShadowDOM - @MahmoudElsayad - PR
  • Implemented action prop to the getItems function in the useClipboard hook - @Nevnet99 - PR, PR
  • Add has-child-items to Tailwind plugin - @reidbarber - PR

Fixes

• Collections
  • Prevent mutating non-empty selection upon focus - @alirezamirian - PR
  • Update Table/Collection array types - @lukeapage - PR
• ComboBox
  • Fix SSR Combobox inner ref from getting lost - @snowystinger - PR
• Date and Time
  • Ensure dayPeriod no longer resets when hour is deleted - @charlotte-whiting - PR
  • Correctly format date/time in RTL - @yihuiliao - PR, PR, PR, PR
  • Remove OverlayTriggerProps from DateField props - @nwidynski - PR
• NumberField
  • Add isRequired to NumberField RenderProps - @snowystinger - PR
• Select
  • Fix HiddenSelect browser autofill - @igorlima - PR
• Tabs
  • Fix TabList auto selection - @snowystinger - PR
• Tree
  • Add label to the expand/collapse button in useTreeItem - @LFDanLu - PR
• Toast
  • Remove Toast priority queue - @snowystinger - PR
  • Resume timers if pointer left region due to region shrinking - @reidbarber - PR
  • Fix Toast hover and focus behavior - @devongovett - PR
  • Make Toasts announce when rendered in NVDA - @LFDanLu - PR
• Miscellaneous
  • Expose missing renderProps types in RAC - @agscala - PR
  • Do not build list of available slots when there is no error - @jorrit - PR
  • Ensure React inert prop compatibility - @chirokas - PR
  • Fix infinite re-render on reoccuring ids - @nwidynski - PR
  • Save render through optimized useSlot() - @nwidynski - PR
  • Fix memory leak in useId when used with React Suspense - @snowystinger - PR

Docs

• Update test util doc examples so they don't error out - @LFDanLu - PR
• Fix typo in Slider - @artola - PR
• Fix typo in Drag and Drop docs - @nwidynski - PR
• Fix RadioGroup controlled example - @snowystinger - PR
• Add Virtualizer docs - @devongovett - PR
• Add colSpan examples to docs - @snowystinger - PR
• RAC Tree docs - @snowystinger - PR
• Add docs for custom overlay trigger elements - @devongovett - PR

Under Construction

RAC Toast

• Add Toast to React Aria Components - @devongovett - PR Autocomplete
• Fix broken link in Autocomplete docs - @amitdahan - PR
• RAC Autocomplete docs - @reidbarber - PR, PR, @devongovett - PR, PR
• Add initial Autocomplete hook docs - @reidbarber - PR
• Add Subdialog support to Menu and Autocomplete - @LFDanLu - PR, @devongovett - PR
• Add disableAutoFocusFirst prop to opt out of autofocus on first ListBoxItem in Autocomplete - @romansndlr - PR
• Fix Autocomplete tab key forwarding - @snowystinger - PR
• Add isFocusVisible to useMenuItem and fix focusRing when typing in Autocomplete SearchField - @LFDanLu - PR
• Rename filterFn in useAutocomplete to filter - @LFDanLu - PR

Released packages

 - [email protected]
 - [email protected]
 - [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-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]
 - @react-aria/[email protected]
 - [email protected]