tailwindlabs/headlessui @headlessui/react@v0.3.0

on GitHub

Fixes

• Ensure that you can't use Enter to invoke the Switch
• Fix outside click refocus bug (#114)
• Prevent scrolling when refocusing items
• Ensure Switch has type="button" (#192)
• Fix useId() hook returning undefined on the client
• Fix disabled not working when inside a disabled fieldset (#202)
• Trigger "outside click" behaviour on mousedown (#212)
• Ensure the active MenuItem is scrolled into view
• Ensure valid Menu accessibility tree (#228)

Added

• Add Transition events (beforeEnter, afterEnter, beforeLeave and afterLeave) (#57)
• Add render features + render strategy (static and unmount={true | false}) (#106)
  • Also changes the API of Transition component.
    • We will now always render a div by default (unless you change this using the as={...} prop).
    • The render function prop doesn't expose a ref anymore.
    • Adds unmount prop to the Transition and Transition.Child components.
• Add displayName to all contexts (#175)
• Add disabled prop to Listbox itself, instead of the Listbox.Button (#229)

Upgrade Path

We changed the API of the Transition component to be more inline with the other API's of the various components. We now always render a div for the Transition and Transition.Child component. If you want to use a render function, then we still render a div. The render function also used do expose a ref prop, which is now not the case anymore.
You can still use the as prop to change the underlying div to another element or component.

// From
<Transition
  show={true}
  enter=".."
  enterFrom=".."
  enterTo=".."
  leave=".."
  leaveFrom=".."
  leaveTo=".."
>
  {ref => (
    <div ref={ref} className="these classes always apply">
      <span>Child</span>
    </div>
  )}
</Transition>

// To (option 1) - Hoist attributes from the first child `div` to the `Transition` itself
<Transition
  show={true}
  enter=".."
  enterFrom=".."
  enterTo=".."
  leave=".."
  leaveFrom=".."
  leaveTo=".."
  className="these classes always apply"
>
  <span>Child</span>
</Transition>

// To (option 2) - Add `as={Fragment}` to the `Transition` component.
<Transition
  as={React.Fragment}
  show={true}
  enter=".."
  enterFrom=".."
  enterTo=".."
  leave=".."
  leaveFrom=".."
  leaveTo=".."
>
  <div className="these classes always apply">
    <span>Child</span>
  </div>
</Transition>