🚀 Feature request
It would be great if Zag.js could expose the index of the topmost dismissable layer via some global API. Right now, it is only available via (potentially expensive) DOM queries.
🧱 Problem Statement / Justification
We're trying to implement tooltip z-indexes in such a way that a tooltip overlays any existing dismissable layers upon being opened, but does not cover dismissable layers that are created while the tooltip is already shown (e.g., a dialog popping up). The issue we are trying to solve can be observed in this example where the dialog trigger's tooltip is displayed above the dialog while the tooltip animates out and the dialog animates in.
Having access to the index of the active dismissable layer when opening the tooltip would allow us to assign a z-index to the tooltip that is lower than the z-indexes we assign to subsequently opened dismissable layers.
✅ Proposed solution or API
A low-level solution might be exposing a function from @zag-js/dismissable that returns the size of the layer stack when called. If there is some interest in enhancing the available tooltip stacking approach in general, offering the layer index as an inline CSS custom property in the tooltip's positioner would feel like a cleaner alternative.
↩️ Alternatives
In our situation, we could also add custom layer tracking to our code base. That would add an unjustified amount of complexity to our components though, which we'd like to avoid if possible (knowing that Zag.js already holds the desired state internally).
🚀 Feature request
It would be great if Zag.js could expose the index of the topmost dismissable layer via some global API. Right now, it is only available via (potentially expensive) DOM queries.
🧱 Problem Statement / Justification
We're trying to implement tooltip
z-indexes in such a way that a tooltip overlays any existing dismissable layers upon being opened, but does not cover dismissable layers that are created while the tooltip is already shown (e.g., a dialog popping up). The issue we are trying to solve can be observed in this example where the dialog trigger's tooltip is displayed above the dialog while the tooltip animates out and the dialog animates in.Having access to the index of the active dismissable layer when opening the tooltip would allow us to assign a
z-indexto the tooltip that is lower than the z-indexes we assign to subsequently opened dismissable layers.✅ Proposed solution or API
A low-level solution might be exposing a function from
@zag-js/dismissablethat returns the size of the layer stack when called. If there is some interest in enhancing the available tooltip stacking approach in general, offering the layer index as an inline CSS custom property in the tooltip's positioner would feel like a cleaner alternative.↩️ Alternatives
In our situation, we could also add custom layer tracking to our code base. That would add an unjustified amount of complexity to our components though, which we'd like to avoid if possible (knowing that Zag.js already holds the desired state internally).