reach-ui

Changes for individual packages can now be found in the CHANGELOG.md file in the root of the affected package. GitHub releases will be used to document changes affecting all or several packages in the repo.

BREAKING Changes

• All default exports have been removed. Replace all default imports with the appropriate documented named export.
• The output directory structure has changed slightly. Module files are now named reach-<pkg>.mjs instead of reach-<pkg>.esm.js.

Minor Changes

• We have simplified our build setup to remove a boatload of dependencies. Build output for all packages may look slightly different, though functionally packages that don't have explicit changes marked in the release notes have not changed.

  This may affect you if you use patch-package to modify output code. If you need support for legacy browsers, the new bundle may not transpile the same ECMA features as before. In that case you may want to transpile Reach packages directly.

• We no longer check that our internal styles are included by looking for a defined CSS custom property. You can still include our base styles as before, but this removes the need to define --reach-<pkg> in your own stylesheets to silence dev warnings.

💔 Breaking Changes

• disclosure
  • In uncontrolled disclosures, previously we would render the disclosure as open on the first render, regardless of the defaultOpen prop's value. This was done as a progressive enhancement to ensure content was visible to users without JavaScript, but in most cases it just meant that the user might see a flash before the state would change, causing unwanted layout shift.
  • We simplified this by simply respecting the defaultOpen prop's value on the initial render. If you want the old behavior, control the state of your disclosures and ensure that the initial open state is always set to true, then set the desired state for the following render in useEffect.
• tabs
  • Removed the isSelected from from the Tab component. This prop was useful before we had hooks, but we can now get the selected tab from context without using render props. (2dd0aec73c4cc2a9a1936cb6c3e43933b2d2765f)

🐛 Bugfixes

• auto-id
  • Use the user-provided ID beyond the first render for deterministic behavior (b2f3bc010091a0bc7a99985657137101a58036ef)
• tabs
  • Stop managing focus on mouse clicks to fix :focus-visible
• listbox
  • Update submit button querySelector specificity to fix incorrect button clicks (#903)
• menu-button, combobox, listbox
  • Skip rendering of portaled popovers before hydration. This prevents unwanted layout shift when the server-rendered popover mounts to a temporary DOM node (a8f38a497c0481156a4da1fecef955f398101327).

🤜🤛 8 Committers

• Ashlee M Boyer (@ashleemboyer)
• Jeff Grannes (@jeffgrannes)
• Jonathan (@jhogervorst)
• Kendall Strautman (@kendallstrautman)
• Kent C. Dodds (@kentcdodds)
• Vlad Yanchevsky (@chevsky)
• Zach Gotsch (@zgotsch)
• @rainmodred

In @reach/combobox, we added a data-expanded attribute to the parent wrapper and popover for simpler styling based on the expanded state of the input.

This release fixes a bug in Combobox where the selection in a controlled combobox input would trigger a flash with the stale value. We should always defer to the user's value when the input is controlled (Thanks @arackaf!) -- #865

This release reverts a change in Combobox that, while addressing the issue in #755, was not tested thoroughly enough and caused a regression where in some cases the popover doesn't open until the user presses the down or up key after initial input. If you updated to v0.16.3 specifically as a workaround to this issue, I apologize! A new fix is in progress for the next release, and I'm working to ensure it's a bit more battle tested this time around.

✨ Enhancements

• combobox
  • #783 Stop binding value changes from undesirely expanding combobox (@dlacaille)
• portal
  • #756 Add optional node container target to Portal (@Warsaken)
• disclosure
  • Make Disclosure accessible when Javascript is disabled (@schwartzadev)

🤜🤛 5 Committers

• Adam Rackis (@arackaf)
• Andrew Schwartz (@schwartzadev)
• Austin Wood (@indiesquidge)
• Dominic Lacaille (@dlacaille)
• @Warsaken

This patch release fixes a bug when passing stable index values to descendant item components.

BREAKING: This release fixes a rendering bug in the descendants, but the bug in some cases may have coincidentally allowed descendants to be re-indexed in dynamically sorted lists. While this is probably a nice feature, it didn't work consistently and created problems with nested collections.

We do not directly support dynamic sorting of lists, so if you relied on this "feature" you'll need to provide indices to the descendant item directly via props. If you're rendering dynamic lists you are probably iterating an array anyway, so you shouldn't have any issues.

This applies to all collection-based compound components:

• Tabs
• Accordion
• MenuButton
• Listbox
• Combobox

🐛 Bugfixes

• menu-button
  • Reference root's ownerDocument instead of global, better support in iframes

✨ Enhancements

• menu-button
  • Better handling of mouse-move that caused problems with long lists on small screens
• dialog
  • Update dependencies to fix small bugs in focus-lock
• rect
  • Only log warning if observe is true

🤜🤛 3 Committers

• Chance Strickland (@chaance)
• Aliaksei Kirylchyk (@akirilchik)
• Rauno (@raunofreiberg)

🐛 Bugfixes

• utils
  • Typescript error for as={Link} on MenuLink (via utils/polymorphic) (@IanVS)
• menu-button
  • #812 Prevent default for links to avoid double click events (@IanVS)
  • Popover does not consistently close when clicking between Menu Buttons (@ecklf)
• listbox
  • Cannot focus on ListboxList when its styled to overlap ListboxButton (@loque)

📝 Documentation

• dialog
  • #803 Fix typo (@apollonian)
  • #786 Fix animated dialog warning (@mbellagamba)
• Other
  • #799 Add example check for CSS to respect a users anim prefs. (@Jared-Dev)

✨ Enhancements

• combobox
  • #757 If Combobox openOnFocus is true then also open when the input is clicked. (@ProggerPete)
• accordion, disclosure
  • Remove -1 tabIndex from accordion and disclosure panels (@joshuajaco)

🤜🤛 10 Committers

• Abhishek Warokar (@apollonian)
• Chance Strickland (@chaance)
• Florentin / 珞辰 (@ecklf)
• Ian VanSchooten (@IanVS)
• Jared Malcolm (@Jared-Dev)
• Joshua Jacobowitz (@joshuajaco)
• Lucas Soler (@loque)
• Mike Limberg (@mlimberg)
• Mirco Bellagamba (@mbellagamba)
• @ProggerPete

🐛 Bugfixes

• menu-button
  • #812 Prevent default for links to avoid double click events (@IanVS)
• listbox
  • Cannot focus on ListboxList when it's styled to overlap ListboxButton (@loque)

📝 Documentation

• dialog
  • #800 Update react-focus-lock and react-remove-scroll dependencies
  • #803 Fix typo (@apollonian)
  • #786 Fix animated dialog warning (@mbellagamba)
• Other
  • #799 Add example check for CSS to respect a users animation preferences (@Jared-Dev)

✨ Enhancements

• combobox
  • #757 If openOnFocus is true then also open when the input is clicked (@ProggerPete)
• accordion, disclosure
  • Remove -1 tabIndex from accordion and disclosure panels (@joshuajaco)

🤜🤛 8 Committers

• Abhishek Warokar (@apollonian)
• Chance Strickland (@chaance)
• Ian VanSchooten (@IanVS)
• Jared Malcolm (@Jared-Dev)
• Joshua Jacobowitz (@joshuajaco)
• Lucas Soler (@loque)
• Mirco Bellagamba (@mbellagamba)
• @ProggerPete

🐛 Bugfixes

• checkbox
  • Use dev warning for ref issues instead of throwing (#763)
• menu-button
  • Fix: popover does not consistently close when clicking between menu buttons (#566)
  • Remove wrapping div around MenuLink to fix an ARIA violation (#751). NOTE: This is potentially a breaking change if you rely on the outer div or the nested DOM structure for your styling selectors, though that shouldn't be necessary. If this is a problem you can simply add your own div wrapper around your MenuLink abstraction, though updating your CSS selector is probably a better solution.

✨ Enhancements

• accordion
  • Add data-state selector to AccordionButton

🏡 Housekeeping

• combobox
  • Prune unneccesary dependencies

🤜🤛 3 Committers

• Chance Strickland (@chaance)
• Florentin / 珞辰 (@impulse)
• Mike Limberg (@mlimberg)

🐛 Bugfixes

• Combobox
  • Fix persistSelection issues when used with openOnFocus (#455)
• All packages
  • #769 Add *.css files to the list of sideEffect(ful) files (@Andarist)
  • BREAKING: Removed forwardRefWithAs utility and created new types associated with components that us the as prop. This is a breaking change if you are using the component types directly, but this change was long overdue and should address some new issues that popped up in #753. Big thanks to @jjenzz and the Radix UI project for making our lives easier here!

🤜🤛 3 Committers

• Chance Strickland (@chaance)
• Mateusz Burzyński (@Andarist)
• Wajid Kagzi (@themoor88)

• listbox
  • Fix selection of options using iOS with VoiceOver. (@aappoalander)
  • Breaking change: If you were using our previously suggested styling selector [data-current] for the selected listbox option, that selector has been removed in favor of [data-current-selected]. The reason is because we also added [data-current-nav] for the highlighted option when navigating the list, so this seemed more clear to distinguish between the two. We also removed the default styles for options that match [aria-selected="true”] because this is an implementation detail that will likely change in an upcoming patch release to address accessibility issues.

📝 Documentation

• tooltip
  • #767 Fix typo in comments (@sanbornhilland)

✨ Enhancements

• All packages
  • #761 Add sideEffects: false to all packages to enable tree shaking (@hipstersmoothie)
• auto-id
  • #752 Add missing type overload (@KubaJastrz)

🤜🤛 6 Committers

• Aappo Ålander (@aappoalander)
• Andrew Lisowski (@hipstersmoothie)
• Chance Strickland (@chaance)
• Jakub Jastrzębski (@KubaJastrz)
• Sanborn Hilland (@sanbornhilland)
• Zoë Peterson (@zpeterson)

🐛 Bugfixes

• tooltip
  • #742 Prevent crashing when using SSR (@taifen)

✨ Enhancements

• menu-button
  • #740 Prevent extraneous updates when clicking outside closed menus (@fabiosantoscode)

🏡 Housekeeping

• #732 Replace custom build scripts w/ Preconstruct (@chaance)

3 Committers 🤜🤛

• Aleksei Saenko (@taifen)
• Chance Strickland (@chaance)
• Fábio Santos (@fabiosantoscode)

🐛 Bugfixes

• accordion
  • Fix openPanels in useAccordionContext (@grandalf6)
• tooltip
  • #712 Address consistent cross-browser behavior with disabled elements (@taifen)

✨ Enhancements

• tooltip
  • #662 @reach/tooltip: Export positionTooltip function (@travigd)

🏡 Housekeeping

• combobox
  • #720 Update openOnFocus example to work even with empty input (@indiesquidge)
• Other
  • #719 Remove unused use-throttle dependency from yarn.lock (@indiesquidge)
  • #716 Update peer dependencies to declare React 17 compatibility for all packages (@TimKolberger)

6 Committers

• Aleksei Saenko (@taifen)
• Austin Wood (@indiesquidge)
• Chance Strickland (@chaance)
• Tim Kolberger (@TimKolberger)
• Travis DePrato (@travigd)
• @grandalf6

🐛 Bugfixes

• utils
  • #708 Re-export imported types as explicit types (@indiesquidge)

🤜🤛 1 Committer

• Austin Wood (@indiesquidge)

🐛 Bugfixes

• menu-button
  • #700 [menu-button] Fixed popover closing when clicking outside (@aganglada)
• slider
  • #694 [slider] Fixes #693 by capturing mutable value sliderRef.current (@yshean)
  • Focus handle in rAF on pointerdown

📝 Documentation

• popover
  • #667 Fix comment typo in Popover package (@erikras)
• descendants
  • #680 [Descendants] Fix typo (@joshwooding)
• Other
  • #659 [website] fix typo in anchor link for useAccordionItemContext (@knowler)

✨ Enhancements

• utils
  • Improved typing for inferred elements without as prop
• slider
  • #673 Remove slider width styling (@danny-andrews)
  • Rename SliderTrackHighlight to SliderRange; alias old name for non-breaking change, but with a dev warning
  • BREAKING: Simplify default styling; moved some inline styles to the default CSS stylesheet.
• Other
  • Added as prop support for several components

🤜🤛 6 Committers

• Chance Strickland (@chaance)
• Alejandro Garcia Anglada (@aganglada)
• Danny Andrews (@danny-andrews)
• Erik Rasmussen (@erikras)
• Josh Wooding (@joshwooding)
• Nathan Knowler (@knowler)
• Yong Shean (@yshean)

Patch fix for broken type defs (#660)

No changes