Add programmatic control of Headless UI components open state
mohammadhosseinmoradi opened this issue · comments
Hi there,
I hope this message finds you well. I've been thoroughly enjoying using the Headless UI library for my projects, and I recently came across a couple of points I'd like to bring to your attention.
Feature Request:
The current Headless UI components (Menu, Popover, Listbox, Disclosure, etc.) offer great flexibility, but it would be beneficial to be able to control their open state programmatically from outside the component itself.
Sometimes I have to extend the Headless UI components and add to it:
function DisclosureFn<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
props: DisclosureProps<TTag>,
ref: Ref<ComponentRef<TTag>>,
) {
const {
open: theirOpen,
onChange,
defaultOpen = false,
...otherProps
} = props;
const [open, setOpen] = useControllable(theirOpen, onChange, defaultOpen);
return (
<DisclosureContext.Provider
value={{
open,
onChange: setOpen,
}}
>
...
</DisclosureContext.Provider>
);
}
interface _internal_ComponentDisclosure extends HasDisplayName {
<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn<TTag>>,
): JSX.Element;
}
<Disclosure
open={soothingFormDisclosureOpen}
onChange={setSoothingFormDisclosureOpen}
>
<Disclosure.Button as={Fragment}>
{({ open }) => (
<Button
className="flex items-center mt-6 w-full"
disabled={isRunning}
...>
)}
</Disclosure.Button>
<Disclosure.Panel className="w-full mt-2">
...
</Disclosure.Panel>
</Disclosure>
Thank you for your continuous efforts in maintaining and improving the Headless UI library. I appreciate your time and consideration.