April 5, 2023 Release

In this release, we have many updates for our pre-release components including TagGroup and Table column resizing, both of which have reached RC status. Avatar has also moved to GA. We also included some API improvements to our existing React Aria hooks, fixed some SSR issues, improved overlay positioning, and fixed many other bugs.

We are also releasing the first alpha of React Aria Components, a brand new component library built on top of our React Aria hooks! It provides a simpler way to build accessible components with custom styles, while offering the flexibility to drop down to hooks for even more customizability where needed. It includes a default DOM structure and styling API, and abstracts away all of the glue code necessary to connect the hooks together, allowing you to focus more on your unique design and styling. Check out the documentation to learn more, and read our RFC for even more details. While it is in alpha, we'd love for you to try it out and give us feedback on the APIs so we can shape it into the best library it can be!

As always, thanks to all of our contributors for helping to make this release possible! And a special shoutout to @filipw01 for working on some challenging overlay positioning fixes.

New Components#

Enhancements#

  • Add support for additional interaction states to return values of hooks, custom collections, and disabledBehavior prop in useTable - @devongovett - PR
  • Allow custom close delay for tooltips - @bill-kerr - PR
  • Add support for custom data attributes to ListBox Item - @reidbarber - PR
  • Updating column resize to support mode where resizer is always visible - @LFDanLu - PR
  • Genericize useFocus() for narrowed event handler types - @imhoffd - PR

Fixes#

  • Fix SSR issues with overlays and mismatching tabIndex - @devongovett - PR
  • Fix clearing date picker by setting value to null - @devongovett - PR
  • Fix additional character appended to Calendar cells in various locales - @snowystinger - PR
  • Fix overlay position clamping and arrow position - @LFDanLu and @filipw01 - PR
  • Stop propagation when escape key is pressed in TooltipTrigger to prevent dialog from closing - @audreyso - PR
  • NumberField: screen reader fails to announce negative values with currencySign: 'accounting' - @majornista - PR
  • Fix rapidly changing values in useSpinButton causing live region to announce values that are no longer relevant - @majornista - PR
  • ListBox: avoid overriding Item id with custom id - @reidbarber - PR
  • Remove label prop from Form that is unused - @majornista - PR
  • Fix duplicate id in some icons - @snowystinger - PR
  • TS Strict update react-aria 'b' and 'L' - @snowystinger - PR
  • Specify box sizing where we rely on it - @snowystinger - PR
  • Add negative margin on VisuallyHidden on both sides - @filipw01 - PR
  • Generate table row textValue from row header cells by default - @devongovett - PR
  • Fix combobox visible focus styling when opening the menu via keyboard - @LFDanLu - PR
  • Fix font issues with CCJK and synthesized italics - @ktabors - PR
  • Mobile overlay positioning fixes - @devongovett - PR
  • SearchField: fix contextual help button being displayed incorrectly - @dsmmcken - PR

Docs#

Under construction#

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

  • TagGroup (RC)
  • TableView column resizing (RC)
    • Prevent keyboard specific Table column resizing announcement on iOS Voiceover - @LFDanLu - PR
    • Refine table column resize hook props and returned values - @LFDanLu - PR
    • Add custom cursor icons back in TableView column resizing - @snowystinger - PR and PR
    • Automatically providing visually hidden styles to the table column resizer input - @LFDanLu - PR
    • Table column resizing aria docs - @LFDanLu - PR
  • ActionBar (RC)
  • Toast (beta)
  • TableView drag and drop (alpha)
  • SearchAutocomplete (alpha)
    • SearchAutocomplete: fix empty state styles - @reidbarber - PR
    • SearchAutocomplete: support custom data attributes - @reidbarber - PR
    • Increase specificity of textfield icon and fix SearchAutocomplete styling - @LFDanLu - PR
    • Updating MobileSearchAutocomplete so icon comes before the "x" button - @LFDanLu - PR
    • SearchAutocomplete: fix types - @reidbarber - PR

Released packages#

- @adobe/react-spectrum@3.26.0
- @internationalized/date@3.2.0
- @internationalized/string-compiler@3.2.0
- @react-aria/accordion@3.0.0-alpha.17
- @react-aria/actiongroup@3.5.2
- @react-aria/aria-modal-polyfill@3.7.1
- @react-aria/autocomplete@3.0.0-alpha.16
- @react-aria/breadcrumbs@3.5.1
- @react-aria/button@3.7.1
- @react-aria/calendar@3.2.0
- @react-aria/checkbox@3.9.0
- @react-aria/color@3.0.0-beta.20
- @react-aria/combobox@3.6.0
- @react-aria/datepicker@3.4.0
- @react-aria/dialog@3.5.1
- @react-aria/dnd@3.2.0
- @react-aria/focus@3.12.0
- @react-aria/grid@3.7.0
- @react-aria/gridlist@3.3.0
- @react-aria/i18n@3.7.1
- @react-aria/interactions@3.15.0
- @react-aria/label@3.5.1
- @react-aria/landmark@3.0.0-beta.0
- @react-aria/link@3.5.0
- @react-aria/listbox@3.9.0
- @react-aria/live-announcer@3.3.0
- @react-aria/menu@3.9.0
- @react-aria/meter@3.4.1
- @react-aria/numberfield@3.5.0
- @react-aria/overlays@3.14.0
- @react-aria/progress@3.4.1
- @react-aria/radio@3.6.0
- @react-aria/searchfield@3.5.1
- @react-aria/select@3.10.0
- @react-aria/selection@3.14.0
- @react-aria/separator@3.3.1
- @react-aria/slider@3.4.0
- @react-aria/spinbutton@3.4.0
- @react-aria/ssr@3.6.0
- @react-aria/switch@3.5.0
- @react-aria/table@3.9.0
- @react-aria/tabs@3.5.0
- @react-aria/tag@3.0.0-rc.0
- @react-aria/textfield@3.9.1
- @react-aria/toast@3.0.0-beta.0
- @react-aria/toggle@3.6.0
- @react-aria/tooltip@3.5.0
- @react-aria/utils@3.16.0
- @react-aria/virtualizer@3.8.0
- @react-aria/visually-hidden@3.8.0
- @react-spectrum/accordion@3.0.0-alpha.19
- @react-spectrum/actionbar@3.0.0-rc.0
- @react-spectrum/actiongroup@3.8.2
- @react-spectrum/autocomplete@3.0.0-alpha.17
- @react-spectrum/avatar@3.0.0
- @react-spectrum/badge@3.1.1
- @react-spectrum/breadcrumbs@3.7.2
- @react-spectrum/button@3.12.1
- @react-spectrum/buttongroup@3.6.1
- @react-spectrum/calendar@3.2.1
- @react-spectrum/card@3.0.0-alpha.18
- @react-spectrum/checkbox@3.7.1
- @react-spectrum/color@3.0.0-beta.21
- @react-spectrum/combobox@3.8.2
- @react-spectrum/contextualhelp@3.5.1
- @react-spectrum/datepicker@3.5.0
- @react-spectrum/dialog@3.7.1
- @react-spectrum/divider@3.5.1
- @react-spectrum/dnd@3.1.1
- @react-spectrum/form@3.6.1
- @react-spectrum/icon@3.7.1
- @react-spectrum/illustratedmessage@3.4.1
- @react-spectrum/image@3.4.1
- @react-spectrum/label@3.12.0
- @react-spectrum/labeledvalue@3.1.1
- @react-spectrum/layout@3.5.1
- @react-spectrum/link@3.5.1
- @react-spectrum/list@3.4.0
- @react-spectrum/listbox@3.10.0
- @react-spectrum/menu@3.11.0
- @react-spectrum/meter@3.4.1
- @react-spectrum/numberfield@3.6.1
- @react-spectrum/overlays@5.1.0
- @react-spectrum/picker@3.10.2
- @react-spectrum/progress@3.5.0
- @react-spectrum/provider@3.7.1
- @react-spectrum/radio@3.5.1
- @react-spectrum/searchfield@3.7.1
- @react-spectrum/slider@3.5.1
- @react-spectrum/statuslight@3.5.1
- @react-spectrum/switch@3.4.1
- @react-spectrum/table@3.8.0
- @react-spectrum/tabs@3.5.2
- @react-spectrum/tag@3.0.0-rc.0
- @react-spectrum/text@3.4.1
- @react-spectrum/textfield@3.10.1
- @react-spectrum/theme-dark@3.5.1
- @react-spectrum/theme-default@3.5.1
- @react-spectrum/theme-express@3.0.0-alpha.3
- @react-spectrum/theme-light@3.4.1
- @react-spectrum/toast@3.0.0-beta.0
- @react-spectrum/tooltip@3.5.0
- @react-spectrum/utils@3.9.1
- @react-spectrum/view@3.5.1
- @react-spectrum/well@3.4.1
- @react-stately/calendar@3.2.0
- @react-stately/checkbox@3.4.1
- @react-stately/collections@3.7.0
- @react-stately/color@3.3.1
- @react-stately/combobox@3.5.0
- @react-stately/data@3.9.1
- @react-stately/datepicker@3.4.0
- @react-stately/dnd@3.2.0
- @react-stately/grid@3.6.0
- @react-stately/layout@3.12.0
- @react-stately/list@3.8.0
- @react-stately/menu@3.5.1
- @react-stately/numberfield@3.4.1
- @react-stately/overlays@3.5.1
- @react-stately/radio@3.8.0
- @react-stately/searchfield@3.4.1
- @react-stately/select@3.5.0
- @react-stately/selection@3.13.0
- @react-stately/slider@3.3.1
- @react-stately/table@3.9.0
- @react-stately/tabs@3.4.0
- @react-stately/tag@3.0.0-rc.0
- @react-stately/toast@3.0.0-beta.0
- @react-stately/toggle@3.5.1
- @react-stately/tooltip@3.4.0
- @react-stately/tree@3.6.0
- @react-stately/virtualizer@3.5.1
- @react-types/accordion@3.0.0-alpha.13
- @react-types/actionbar@3.0.0-rc.0
- @react-types/actiongroup@3.4.1
- @react-types/autocomplete@3.0.0-alpha.13
- @react-types/avatar@3.0.0-beta.1
- @react-types/badge@3.1.1
- @react-types/breadcrumbs@3.5.1
- @react-types/button@3.7.2
- @react-types/buttongroup@3.3.1
- @react-types/calendar@3.2.0
- @react-types/card@3.0.0-alpha.14
- @react-types/checkbox@3.4.3
- @react-types/color@3.0.0-beta.16
- @react-types/combobox@3.6.1
- @react-types/contextualhelp@3.2.1
- @react-types/datepicker@3.3.0
- @react-types/dialog@3.5.1
- @react-types/divider@3.3.1
- @react-types/form@3.5.0
- @react-types/grid@3.1.7
- @react-types/illustratedmessage@3.3.1
- @react-types/image@3.3.1
- @react-types/label@3.7.3
- @react-types/layout@3.3.7
- @react-types/link@3.4.1
- @react-types/list@3.2.2
- @react-types/listbox@3.4.1
- @react-types/menu@3.9.0
- @react-types/meter@3.3.1
- @react-types/numberfield@3.4.1
- @react-types/overlays@3.7.1
- @react-types/progress@3.4.0
- @react-types/provider@3.6.1
- @react-types/radio@3.4.1
- @react-types/searchfield@3.4.1
- @react-types/select@3.8.0
- @react-types/shared@3.18.0
- @react-types/slider@3.5.0
- @react-types/statuslight@3.3.1
- @react-types/switch@3.3.1
- @react-types/table@3.6.0
- @react-types/tabs@3.2.1
- @react-types/tag@3.0.0-rc.0
- @react-types/text@3.3.1
- @react-types/textfield@3.7.1
- @react-types/tooltip@3.4.0
- @react-types/view@3.4.1
- @react-types/well@3.3.1
- @spectrum-icons/color@3.5.1
- @spectrum-icons/express@3.0.0-alpha.5
- @spectrum-icons/illustrations@3.6.1
- @spectrum-icons/ui@3.5.1
- @spectrum-icons/workflow@4.2.0
- react-aria@3.24.0
- react-aria-components@1.0.0-alpha.1
- react-stately@3.22.0