React Aria
DocsReleasesBlog
React Aria
Releases

v1.18.0

This release packs in several new features! Calendar now supports multiple date selection, as well as new CalendarHeading, CalendarMonthPicker, and CalendarYearPicker components that allow the user to jump to a different month or year. RangeCalendar now supports determining the available dates based on the first date a user selects. We have also added a TableFooter component, description and error messages for Checkbox, Radio, and Switch, and a SliderFill component that simplifies the process of styling the fill portion in a Slider.

As always, thank you to all our contributors!

Checkbox, Radio, and Switch API updates

We have added support for description and error message slots to individual checkboxes, switches, and radios. Because this requires introducing a new DOM wrapper around the label element we currently render, we are deprecating the Checkbox, Radio, and Switch components and introducing CheckboxField, RadioField, and SwitchField as replacements. These accept CheckboxButton, RadioButton, and SwitchButton as children, along with <Text slot="description"> and <FieldError>.

To add support for description and error message in your implementation, update your component as shown below.

-<Checkbox>Label</Checkbox>
+<CheckboxField>
+  <CheckboxButton>Label</CheckboxButton>
+  <Text slot="description">Description</Text>
+  <FieldError />
+</CheckboxField>

Test utils RC

We are pleased to announce that our test utils have advanced to RC! Alongside improvements such as RTL support and handling grid navigation, the API for the testers has been updated for consistency and thus various breaking changes have been made. To migrate from beta to RC, run the test-utils-rc-update codemod via:

npx @react-spectrum/codemods test-utils-rc-update --path /path/to/tests

Changelog

General Changes

  • Re-export mergeRefs from the react-aria package index - @lixiaoyan - PR
  • Fix the optimize-locales-plugin to correctly tree-shake the react-aria package - @wojtekmaj - PR
  • Fix scrolling the document body when keyboard-focusing an item that has no other scroll parents - @LFDanLu - PR

Calendar

  • Add support for selectionMode="multiple" - @devongovett - PR
  • Add new CalendarHeading component to handle formatting headings with an offset - @devongovett - PR
  • Add new CalendarMonthPicker and CalendarYearPicker components to format a list of month and year names - @devongovett - PR
  • Add weeksInMonth prop to override locale default number of weeks to display in a month - @devongovett - PR
  • Add anchorDate as an argument to isDateUnavailable in RangeCalendar to determine available dates based on the first date the user picks - @devongovett - PR

Checkbox

Collections

  • Fix handling of falsy keys - @reidbarber - PR
  • Allow collection items to be non-object values such as strings and numbers - @devongovett - PR

ComboBox

  • Fix preservation of multi-select selections when using a custom input value - @romansndlr - PR
  • Fix ComboBox rendered inside Tabs - @devongovett - PR
  • Fix --trigger-width when Input and Button are wrapped in a <Group> - @devongovett - PR

DateField

  • Add sr-Latn placeholder to DateField for the Serbian Latin locale - @nklaasse - PR

Drag and Drop

Link

  • Add a client-side routing guide to the Link documentation - @RobHannay - PR

Menu

  • Fix MenuSection exposing disabledKeys; set disabled keys at the Menu or item level instead - @LFDanLu - PR
  • Fix MenuItem render function receiving an href when the item is not a link - @devongovett - PR
  • Fix Menu rendered inside Tabs - @devongovett - PR

Modal

  • Fix layout shift in Sheet example on Modal docs - @nwidynski - PR

NumberField

  • Allow formatOptions to be passed as an inline object without resetting user input - @Wonchang0314 - PR
  • Fix SpinButton spinning indefinitely when value results in a disabled button - @snowystinger - PR

Popover

RadioGroup

Select

Slider

  • Add SliderFill component to render a filled track - @devongovett - PR
  • Improve default SliderOutput value formatting to handle ranges - @devongovett - PR

Switch

Table

  • Add TableFooter component - @devongovett - PR
  • Fix virtualized Table loader width not updating when the table width changes - @LFDanLu - PR
  • Add state to RowRenderProps - @yihuiliao - PR

Tabs

  • Support CSS logical properties (e.g. block-size, inline-size) for TabPanel animations - @SupaSeeka - PR

TextField

  • Fix a type mismatch in useTextField for <textarea> elements - @nami8824 - PR

Tree

  • Fix Tree incorrectly setting focusedKey to a section node key - @chirokas - PR

Under Construction

Test utils

  • Update test utils API with additional coverage for RTL, grid navigation, and more - @LFDanLu - PR

Released packages

 - @internationalized/date => 3.12.2
 - @internationalized/message => 3.1.10
 - @internationalized/number => 3.6.7
 - @internationalized/string-compiler => 3.4.1
 - @internationalized/string => 3.2.9
 - @react-aria/test-utils => 1.0.0-rc.0
 - @react-types/shared => 3.35.0
 - @react-aria/optimize-locales-plugin => 1.2.1
 - @react-aria/parcel-resolver-optimize-locales => 1.3.1
 - @react-aria/mcp => 1.2.0
 - react-aria => 3.49.0
 - react-aria-components => 1.18.0
 - react-stately => 3.47.0
 - tailwindcss-react-aria-components => 2.1.1