August 18, 2020 Release

This release includes a few new components, some new features, many bugfixes, and improvements. A huge thanks to all of the amazing contributors to this release. A special shout out to @tomsontom, @chungwu, and @so99ynoodles for contributing entire new components, including ToggleButton, Slider, and Tabs! 😍

New components#

  • ToggleButton - @tomsontom - PR
  • Tooltips - @snowystinger - PR
    • @react-spectrum/tooltip (alpha)
    • @react-aria/tooltip (alpha)
    • @react-stately/tooltip (alpha)
  • Slider - @chungwu - PR
    • @react-aria/slider (alpha)
    • @react-stately/slider (alpha)
  • Tabs - @so99ynoodles - PR
    • @react-spectrum/tabs (alpha)
    • @react-aria/tabs (alpha)
    • @react-stately/tabs (alpha)

Note: Tooltips, Slider, and Tabs are available as alpha releases today, and will receive additional updates, documentation, and bugfixes before their stable release. Please feel free to test them out and report any issues you find.

New features#

  • aria-modal-polyfill now handles modal behavior for popovers, trays, and other types of overlays - @snowystinger - PR
  • Buttons that are link elements now support the rel attribute - @ronderksen - PR
  • useTextField supports an inputElementType prop to allow for <textarea> - @maksimsemenov - PR
  • isKeyboardDismissDisabled was added as a prop to useOverlay and DialogTrigger - @amy-lei - PR
  • Clicking the label in useSelect and Picker now focuses the select element - @gavinhenderson - PR
  • useSelectableCollection and useSelectableList and now support selectOnFocus and disallowTypeAhead options - @LFDanLu - PR
  • useSelectableItem and useOption now support a shouldUseVirtualFocus option- @LFDanLu - PR
  • Add support for HTML form props to Form component - @snowystinger - PR
  • Added useVisuallyHidden hook to @react-aria/visually-hidden - @devongovett - PR
  • Added useHiddenSelect hook to @react-aria/select - @devongovett - PR
  • Added shouldCloseOnInteractOutside function to useOverlay options - @chungwu - PR

Bug fixes#

  • Switched from the classnames to smaller/faster clsx library - @cedeber - PR
  • Fix incorrect overlay position when flip is enabled and positive offset is given - @raon0211 - PR
  • useTypeSelect now matches spaces rather than selecting the option - @solimant - PR
  • Fix behavior of maxHeight and maxWidth props in ListBox - @devongovett - PR
  • Fix resizing of quiet TextArea - @zidian257 - PR
  • Breadcrumbs now uses ResizeObserver instead of listening to window resize events - @Anenth - PR
  • useListState and useSingleSelectListState now accept a filter option - @LFDanLu - PR
  • Fix font family in TextField - @tomsontom - PR
  • Fix focusing dialogs when in an iframe on Safari - @devongovett - PR
  • Wait for CSS transitions to finish before focusing element in Tray to fix VoiceOver - @devongovett - PR
  • Use inline styles instead of CSS import in VisuallyHidden - @devongovett - PR
  • Fix cache invalidation issue in ListBox - @devongovett - PR
  • Fix repeating keyboard events triggering menu item after opening menu - @devongovett - PR

Docs#

Released packages#

- @adobe/react-spectrum@3.2.0
- @react-aria/aria-modal-polyfill@3.2.0
- @react-aria/button@3.2.0
- @react-aria/dialog@3.1.1
- @react-aria/focus@3.2.0
- @react-aria/interactions@3.2.0
- @react-aria/listbox@3.2.0
- @react-aria/menu@3.1.1
- @react-aria/overlays@3.2.0
- @react-aria/select@3.2.0
- @react-aria/selection@3.2.0
- @react-aria/slider@3.0.0-alpha.0
- @react-aria/table@3.0.0-alpha.6
- @react-aria/tabs@3.0.0-alpha.0
- @react-aria/textfield@3.2.0
- @react-aria/tooltip@3.0.0-alpha.0
- @react-aria/utils@3.2.0
- @react-aria/virtualizer@3.1.1
- @react-aria/visually-hidden@3.2.0
- @react-spectrum/breadcrumbs@3.1.1
- @react-spectrum/button@3.2.0
- @react-spectrum/dialog@3.2.0
- @react-spectrum/form@3.2.0
- @react-spectrum/label@3.2.0
- @react-spectrum/layout@3.1.1
- @react-spectrum/listbox@3.2.0
- @react-spectrum/overlays@3.2.0
- @react-spectrum/picker@3.1.1
- @react-spectrum/provider@3.1.1
- @react-spectrum/table@3.0.0-alpha.6
- @react-spectrum/tabs@3.0.0-alpha.0
- @react-spectrum/textfield@3.1.1
- @react-spectrum/tooltip@3.0.0-alpha.0
- @react-spectrum/utils@3.2.0
- @react-stately/collections@3.2.0
- @react-stately/layout@3.1.1
- @react-stately/list@3.2.0
- @react-stately/menu@3.2.0
- @react-stately/selection@3.2.0
- @react-stately/slider@3.0.0-alpha.0
- @react-stately/toggle@3.2.0
- @react-stately/tooltip@3.0.0-alpha.0
- @react-stately/tree@3.1.1
- @react-types/button@3.2.0
- @react-types/dialog@3.2.0
- @react-types/form@3.2.0
- @react-types/label@3.2.0
- @react-types/overlays@3.2.0
- @react-types/shared@3.2.0
- @react-types/slider@3.0.0-alpha.0
- @react-types/tabs@3.0.0-alpha.0
- @react-types/textfield@3.2.0
- @react-types/tooltip@3.0.0-alpha.0