Add programmatic control of Headless UI components open state

[mohammadhosseinmoradi]

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.