June 26, 2023 Release

Our summer break release is delivering new features, a new version of React Aria Components and support for React Strict Mode! react strict mode pageBehavior useId

Enhancements#

  • Finalize React strict mode issues - now fully supported - @devongovett - PR
  • Use React.useId if available - @devongovett - PR
  • Add pageBehavior prop to Calendar to control page duration - @confix - PR
  • Add pageBehavior to Spectrum Calendar and RangeCalendar - @reidbarber - PR
  • Add shouldForceLeadingZeros leading zeros prop to DatePicker - @devongovett - PR
  • Adding table column resizing hooks to aria and stately monorepos - @ktabors - PR

useId changes#

In this release, we updated our useId hook, which all of our components use to generate unique DOM id attributes. If you're using React 18, we now use React's builtin useId hook internally. This enables better compatibility with React's new streaming server side renderer and concurrent features, and improves performance.

After you update, you can remove the SSRProvider component wrapping your app completely if you are using React 18. It is now unnecessary, and does nothing in modern React versions. You'll see a console warning recommending this after you update. The algorithm for generating ids has also changed, so if you use snapshot testing you will see some changes in the output. Otherwise, the changes should be completely transparent.

If you're using React 17 or 16, the old implementation of useId will continue to be used, so you should see no changes. You'll need to keep SSRProvider until you update to React 18.

Fixes#

  • Ensure that useObjectRef only calls function refs once in strict mode - @devongovett - PR
  • Ensure scrollable is set before onTouchMove - @bbutler522 - PR
  • ContextualHelp button should be labeled by the label in Field - @majornista - PR
  • isLoading state should include "Loading..." in the description in Picker - @majornista - PR
  • useLabels/useLabel consider reordering IDREFs so that aria-label comes before aria-labelledby - @majornista - PR
  • Update weekStartData.ts - @rvramesh - PR
  • Fix SSRProvider return type - @devongovett - PR
  • Add a11y info for Checkbox validationState - @jnurthen - PR
  • Fix re-rendering for useOverlayTriggerState - @aam051102 - PR
  • Enable horizontal scrolling in usePreventScroll - @jhyj0521 - PR
  • Fix Section headings within ListBox and Menu on mobile screen readers - @majornista - PR
  • Adds null check to selectTime in useDatePickerState - @yihuiliao - PR
  • Update nested drop regions to correctly focus child drop target - @majornista - PR
  • Fix UTC offset format acceptance in date parsers - @rvillescas - PR
  • Improve DatePicker support with screen reader (NVDA) - @majornista - PR
  • Improve Firefox Popover synthetic blur on disabled button - @ktabors - PR

Docs#

  • Disable hidden select if select is disabled in useSelect example - @LFDanLu - PR
  • Fix broken Collections link in Breadcrumbs React Aria Components page - @abdmmar - PR
  • Update broken link in @internationalized date readme - @snowystinger - PR
  • Fix scroll position jump on mobile for column resize examples in TableView - @LFDanLu - PR
  • refac: Remove unused variables from examples in useTabList - @ryo-manba - PR
  • Fix typo in useDialog example - @snowystinger - PR

Under construction#

Fixes to pre-released components are listed below. Please feel free to try them out, and report any issues you encounter.

React Aria Components (Alpha)

  • Use span for VisuallyHidden when inside a label - @devongovett - PR
  • Refactor React Aria Components Tabs API - @devongovett - PR
  • Fix keyboardActivation propagation and remove disabledKeys from React Aria Components TabList props - @LFDanLu - PR
  • Add AnimatedCalendar example with framer-motion - @devongovett - PR
  • Update @types/react version, and fix forwardRef type with render props - @devongovett - PR
  • Add support for standalone RAC popovers - @devongovett - PR
  • Add pageBehavior to RAC/Spectrum Calendar and RangeCalendar - @reidbarber - PR
  • RAC DropZone - @yihuiliao - PR
  • Add TagGroup component to RAC - @devongovett - PR
  • Add WHCM styles for RAC TagGroup docs - @devongovett - PR
  • Fix file upload dialog in RAC DropZone - @yihuiliao - PR
  • Update pageBehavior docs to separate examples - @reidbarber - PR
  • Make RAC overlay open props override DialogTrigger state - @devongovett - PR

React Aria Components Tabs API changes#

In this release, we updated the Tabs API in React Aria Components. The <TabPanels> component is no longer necessary and has been removed. Instead, each individual <TabPanel> now chooses whether to render itself based on the selected tab state. In addition, a new shouldForceMount prop has been added to force even non-selected tabs to render to the DOM. This can be used to implement animations between tabs or preserve state when a tab is not visible. Check out the updated documentation for more details.

Released packages#

**** Fix icon build - @snowystinger - PR

*** Upgrade to TypeScript 5 - @devongovett - PR *** Upgrade Parcel to v2.9.1 - @devongovett - PR