React Listbox disabled button props type bug v1.7.12

[odeyal0]

Problems with type for Listbox.Button "disabled" property.
(v1.7.11 it's OK)

Example:
https://codesandbox.io/s/headless-ui-listbox-disabled-button-bug-gzlo5b?file=/src/App.tsx

Error:

Type '{ children: Element[]; disabled: true; className: string; }' is not assignable to type 'IntrinsicAttributes & CleanProps<"button", ButtonPropsWeControl> & OurProps<"button", ButtonRenderPropArg> & { ...; } & { ...; }'.
  Property 'disabled' does not exist on type 'IntrinsicAttributes & CleanProps<"button", ButtonPropsWeControl> & OurProps<"button", ButtonRenderPropArg> & { ...; } & { ...; }'.

[odeyal0]

In addition, v1.7.12 has a problem with ref type.
Added to example. (v1.7.11 it's OK)

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

We recently improved some of our TypeScript types and made them reflect reality better. In this case disabled isn't a prop you can pass to the button. You can see this in your CodeSandbox link as well, the disabled prop is passed but it still works, aka it is not disabled.

If you want to disable the Listbox, then you have to move the disabled prop to the Listbox component itself.

The ref type issue will be fixed by #2329

[RobinMalfait]

This should be fixed by #2329, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.