✨ `<Dialog>`Add support for nested dialogs about ember-headlessui

[alexlafroscia]

I was thinking about service injected to all dialogs, then when a component is mounted, the dialog is registered in service.

I think that this would be the way to go. We can use a service to store a stack of open Dialog components that is pushed to/popped from when Dialog components are mounted/unmounted. We know that a given Dialog is the "active" one if it's at the head of the stack; not being the active one will require disabling the focus trap, among other things. I think I saw a library that implements a tracked Stack class... I'll have to try to find it!

The issue that I see with yielding a Nested component is that most of the ways I would see nesting of dialogs happening, one instance won't actually know about another. I could see a component that happens to use a modal itself being rendered inside of another modal, where the "inner" and "outer" aren't connected in any way.

I am quite curious about what a good solution around providing the information to the template about whether the Dialog is active or not...

Since the React and Vue implementations don't do anything here, maybe we shouldn't either, even though we could? I would rather not provide an API initially and later introduce something than introduce something up front that we ultimately regret. I think leaning on the behavior of the official API, if in doubt, is a good idea.