Implement sibling `<Dialog />` components

[RobinMalfait]

This PR refactors, restructures and simplifies some internal workings and as a side effect allows us to render "sibling dialogs" which has been a common request (and source of bugs) in the past.

The internals work by keeping track of a shared "stack", the moment an internal useIsTopLayer hook is used (and enabled) it adds an item to the stack. The hook then returns whether it currently is the top layer or not.

This allows us to render a <Dialog /> component from anywhere and the last one that is opened will be the top-most <Dialog /> (inspired by the native top-layer).

Pressing esc, or clicking outside of a <Dialog /> will close the top most one only regardless from where it was rendered.

This new internal hook is also used in other components such as the <Menu /> component. If you render a <Menu /> in a <Dialog />, then pressing esc only closes the <Menu />. Pressing esc again closes the <Dialog />. (This behavior already worked, but it now Just Works™ because of this)

This should not break any existing code where <Dialog /> components are nested because the inner one will be rendered after the outer one which makes it the top one.

Fixes: #2876

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 27, 2024 9:30pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 27, 2024 9:30pm

[thecrypticace]

[dygaomarques]

Thhaaaaannkkkk yooouuuuuuu guys! 🎉

[wahyubaskara]

When this refactor will be applied to vue version?