@headlessui/react

Added

• Add new Tabs component (#674, #698)
• Make Disclosure.Button close the disclosure inside a Disclosure.Panel (#682)
• Add aria-orientation to Listbox, which swaps Up/Down with Left/Right keys (#683)
• Expose close function from the render prop for Disclosure, Disclosure.Panel, Popover and Popover.Panel (#697)

Added

• Ensure that you can use Transition.Child when using implicit Transitions (#503)
• Add new entered prop for Transition and Transition.Child components (#504)

Fixes

• Add aria-disabled on disabled RadioGroup.Option components (#543)
• Improve disabled and tabindex prop handling (#512)
• Improve React peer dependency version range (#544)
• Improve types for the open prop in the Dialog component (#550)
• Improve aria-expanded logic (#592)
• Remove undocumented :className prop (#607)
• Improve types for Listbox component (#576)
• Remove explicit :class prop (#608)
• Improve tree shaking (#602)
• Improve peer dependencies for react-dom, and for the future version 18 (#622)

Added

• Introduce Open/Closed state, to simplify component communication (#466)

Fixes

• Improve SSR for Dialog (#477)
• Delay focus trap initialization (#477)
• Improve incorrect behaviour for nesting Dialog components (#560)

The Open/Closed state unlocks a feature where all our components can interact with each other. This means that you don't need to use the render prop function, and that you also don't need the static prop anymore for transitions. Here is an example in the docs that explains this: https://headlessui.dev/react/menu#transitions

Added

• Introduce Open/Closed state, to simplify component communication (#466)

Fixes

• Improve SSR for Dialog (#477)
• Delay focus trap initialization (#477)
• Improve incorrect behavior for nesting Dialog components (#560)

Fixes

• Fix form submission within Dialog (#460)

Fixes

• Improve search, make searching case insensitive (#385)
• Fix unreachable RadioGroup (#401)
• Fix closing nested Dialog components when pressing Escape (#430)

Added

• Add disabled prop to RadioGroup and RadioGroup.Option (#401)
• Add defaultOpen prop to the Disclosure component (#447)

This is the v1 release of Headless UI - React

We introduced a bunch of new components for this release:

• Disclosure
• Dialog
• Popover
• RadioGroup

We also created a beautiful new documentation website: https://headlessui.dev/react

Changelog:

Fixes

• Fixed outside click not re-focusing the Menu.Button (#220, #256)
• Fixed outside click not re-focusing the Listbox.Button (#220, #256)
• Force focus in Menu.Items and Listbox.Options from within the component itself (#261)
• Stop propagating keyboard/mouse events (#261)

Added

• Add Disclosure, Disclosure.Button and Disclosure.Panel components (#220)
• Add Dialog, Dialog.Overlay, Dialog.Tile and Dialog.Description components (#220)
• Add Portal and Portal.Group component (#220)
• Add Switch.Description component, which adds the aria-describedby to the actual Switch (#220)
• Add FocusTrap component (#220)
• Add Popover, Popover.Button, Popover.Overlay, Popover.Panel and Popover.Group components (#220)
• All components that accept a className, can now also receive a function with the renderProp argument (#257)
• Add RadioGroup, RadioGroup.Option, RadioGroup.Label and RadioGroup.Description components (#274)

Fixes

• Fix incorrect types path (d557d50)
• Fix TypeScript render related types (bb68793)

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>

• Add Listbox component
• Add Switch component

Added

• Add Listbox component
• Add Switch component