@headlessui/react@v1.0.0

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)

@headlessui/vue@v0.3.1

Fixes

• Fix broken behaviour since Vue 3.0.5 (#279)

@headlessui/react@v0.3.2

Fixes

• Fix incorrect type error unique symbol (#248, #240)

@headlessui/react@v0.3.1

Fixes

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

@headlessui/vue@v0.3.0

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)
• Added emits property to Vue components (#199)
• 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 render features + render strategy (static and unmount={true | false}) (#106)
• Add disabled prop to Listbox itself, instead of the ListboxButton (#229)

@headlessui/react@v0.3.0

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>

@headlessui/vue@v0.2.0

• Add Listbox component
• Add Switch component

@headlessui/react@v0.2.0

• Add Listbox component
• Add Switch component

@headlessui/vue@v0.1.3

• Fix an issue where you couldn't click on menu items that were links.
• Fix outside click behaviour. If you had multiple menu's, when menu 1 is open, menu 2 is closed and you click on menu button 2 it will open both menu's. This is now fixed.
• Ensure when using keyboard navigation we prevent the default behaviour.

@headlessui/react@v0.1.3

• Fix outside click behaviour. If you had multiple menu's, when menu 1 is open, menu 2 is closed and you click on menu button 2 it will open both menu's. This is now fixed.
• Ensure when using keyboard navigation we prevent the default behaviour.