headlessui

Files

T

Robin Malfait 226042231d Fix closing components using the transition prop, and after scrolling the page (#3407 )

* `useDidElementMove`: handle `HTMLElement`

This change should be temporary, and it will allow us to use the
`useDidElementMove` with ref objects and direct `HTMLElement`s.

* `useResolveButtonType`: handle `HTMLElement`

This change should be temporary, and it will allow us to use the
`useResolveButtonType` hook with ref objects and direct `HTMLElement`s.

* `useRefocusableInput`: handle `HTMLElement`

This change should be temporary, and it will allow us to use the
`useRefocusableInput` hook with ref objects and direct `HTMLElement`s.

* `useTransition`: handle `HTMLElement`

Accept `HTMLElement| null` instead of `MutableRefObject<HTMLElement |
null>` in the `useTransition` hook.

* ensure `containers` are a dependency of `useEffect`

* `Menu`: track `button` and `items` elements in state

So far we've been tracking the `button` and the the `items` DOM nodes in
a ref. Typically, this is the way you do it, you keep track of it in a
ref, later you can access it in a `useEffect` or similar by accessing
the `ref.current`.

There are some problems with this. There are places where we require the
DOM element during render (for example when picking out the `.id` from
the DOM node directly).

Another issue is that we want to re-run some `useEffect`'s whenever the
underlying DOM node changes. We currently work around that, but storing
it directly in state would solve these issues because the component will
re-render and we will have access to the new DOM node.

* `Combobox`: track `input`, `button` and `options` elements in state

* `Disclosure`: track `button` and `panel` elements in state

* `Listbox`: track `button` and `options` elements in state

* `Popover`: track `button` and `panel` elements in state

* `Transition`: track the `container` element in state

* remove incorrect leftover `style=""` attribute

* simplify `useDidElementMove`, only accept `HTMLElement | null`

This doesn't support the `MutableRefObject<HTMLElement | null>` anymore.

* pass `HTMLElement | null` directly to `useResolveButtonType`

* simplify `useResolveButtonType`, only handle `HTMLElement | null`

We don't handle `MutableRefObject<HTMLElement | null>` anymore

* simplify `useRefocusableInput`

* simplify `useElementSize`

* simplify `useOutsideClick`

Only accept `HTMLElement | null` instead of `MutableRefObject<HTMLElement | null>`

* do not rely on `HTMLButtonElement` being available

* update changelog

2024-08-02 22:45:11 +02:00