feat(layer-stack): expose

segunadebayo · segunadebayo · commit 352c638b9d2b · 2025-08-28T15:20:37.000+01:00
diff --git a/.changeset/forty-kiwis-jam.md b/.changeset/forty-kiwis-jam.md
@@ -0,0 +1,18 @@
+---
+"@zag-js/dismissable": minor
+"@zag-js/dialog": patch
+"@zag-js/popover": patch
+"@zag-js/menu": patch
+"@zag-js/select": patch
+"@zag-js/combobox": patch
+"@zag-js/date-picker": patch
+"@zag-js/color-picker": patch
+"@zag-js/hover-card": patch
+---
+
+Add support for layer types in dismissable layer stack. Layers can now be categorized as `dialog`, `popover`, `menu`, or
+`listbox`. This enables:
+
+- `data-nested` attribute on nested layers of the same type
+- `data-has-nested` attribute on parent layers with nested children of the same type
+- `--nested-layer-count` CSS variable indicating the number of nested layers of the same type
diff --git a/packages/machines/color-picker/src/color-picker.machine.ts b/packages/machines/color-picker/src/color-picker.machine.ts
@@ -408,6 +408,7 @@ export const machine = createMachine<ColorPickerSchema>({
 
         const getContentEl = () => dom.getContentEl(scope)
         return trackDismissableElement(getContentEl, {
+          type: "popover",
           exclude: dom.getTriggerEl(scope),
           defer: true,
           onInteractOutside(event) {
diff --git a/packages/machines/combobox/src/combobox.machine.ts b/packages/machines/combobox/src/combobox.machine.ts
@@ -705,6 +705,7 @@ export const machine = createMachine({
         if (prop("disableLayer")) return
         const contentEl = () => dom.getContentEl(scope)
         return trackDismissableElement(contentEl, {
+          type: "listbox",
           defer: true,
           exclude: () => [dom.getInputEl(scope), dom.getTriggerEl(scope), dom.getClearTriggerEl(scope)],
           onFocusOutside: prop("onFocusOutside"),
diff --git a/packages/machines/date-picker/src/date-picker.machine.ts b/packages/machines/date-picker/src/date-picker.machine.ts
@@ -703,6 +703,7 @@ export const machine = createMachine<DatePickerSchema>({
 
         const getContentEl = () => dom.getContentEl(scope)
         return trackDismissableElement(getContentEl, {
+          type: "popover",
           defer: true,
           exclude: [...dom.getInputEls(scope), dom.getTriggerEl(scope), dom.getClearTriggerEl(scope)],
           onInteractOutside(event) {
diff --git a/packages/machines/dialog/src/dialog.machine.ts b/packages/machines/dialog/src/dialog.machine.ts
@@ -113,6 +113,7 @@ export const machine = createMachine<DialogSchema>({
       trackDismissableElement({ scope, send, prop }) {
         const getContentEl = () => dom.getContentEl(scope)
         return trackDismissableElement(getContentEl, {
+          type: "dialog",
           defer: true,
           pointerBlocking: prop("modal"),
           exclude: [dom.getTriggerEl(scope)],
diff --git a/packages/machines/hover-card/src/hover-card.machine.ts b/packages/machines/hover-card/src/hover-card.machine.ts
@@ -241,6 +241,7 @@ export const machine = createMachine<HoverCardSchema>({
       trackDismissableElement({ send, scope, prop }) {
         const getContentEl = () => dom.getContentEl(scope)
         return trackDismissableElement(getContentEl, {
+          type: "popover",
           defer: true,
           exclude: [dom.getTriggerEl(scope)],
           onDismiss() {
diff --git a/packages/machines/menu/src/menu.machine.ts b/packages/machines/menu/src/menu.machine.ts
@@ -562,6 +562,7 @@ export const machine = createMachine<MenuSchema>({
         const getContentEl = () => dom.getContentEl(scope)
         let restoreFocus = true
         return trackDismissableElement(getContentEl, {
+          type: "menu",
           defer: true,
           exclude: [dom.getTriggerEl(scope)],
           onInteractOutside: prop("onInteractOutside"),
diff --git a/packages/machines/popover/src/popover.machine.ts b/packages/machines/popover/src/popover.machine.ts
@@ -145,6 +145,7 @@ export const machine = createMachine<PopoverSchema>({
         const getContentEl = () => dom.getContentEl(scope)
         let restoreFocus = true
         return trackDismissableElement(getContentEl, {
+          type: "popover",
           pointerBlocking: prop("modal"),
           exclude: dom.getTriggerEl(scope),
           defer: true,
diff --git a/packages/machines/select/src/select.machine.ts b/packages/machines/select/src/select.machine.ts
@@ -425,6 +425,7 @@ export const machine = createMachine<SelectSchema>({
         const contentEl = () => dom.getContentEl(scope)
         let restoreFocus = true
         return trackDismissableElement(contentEl, {
+          type: "listbox",
           defer: true,
           exclude: [dom.getTriggerEl(scope), dom.getClearTriggerEl(scope)],
           onFocusOutside: prop("onFocusOutside"),
diff --git a/packages/utilities/dismissable/src/dismissable-layer.ts b/packages/utilities/dismissable/src/dismissable-layer.ts
@@ -7,7 +7,7 @@ import {
 } from "@zag-js/interact-outside"
 import { isFunction, warn, type MaybeFunction } from "@zag-js/utils"
 import { trackEscapeKeydown } from "./escape-keydown"
-import { layerStack, type Layer, type LayerDismissEvent } from "./layer-stack"
+import { layerStack, type Layer, type LayerDismissEvent, type LayerType } from "./layer-stack"
 import { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside } from "./pointer-event-outside"
 
 type MaybeElement = HTMLElement | null
@@ -59,6 +59,10 @@ export interface DismissableElementOptions extends DismissableElementHandlers, P
    * Whether to warn when the node is `null` or `undefined`
    */
   warnOnMissingNode?: boolean | undefined
+  /**
+   * The type of layer being tracked
+   */
+  type?: LayerType | undefined
 }
 
 function trackDismissableElementImpl(node: MaybeElement, options: DismissableElementOptions) {
@@ -73,9 +77,9 @@ function trackDismissableElementImpl(node: MaybeElement, options: DismissableEle
     return
   }
 
-  const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug } = options
+  const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug, type = "dialog" } = options
 
-  const layer: Layer = { dismiss: onDismiss, node, pointerBlocking, requestDismiss: onRequestDismiss }
+  const layer: Layer = { dismiss: onDismiss, node, type, pointerBlocking, requestDismiss: onRequestDismiss }
 
   layerStack.add(layer)
   assignPointerEventToLayers()
diff --git a/packages/utilities/dismissable/src/index.ts b/packages/utilities/dismissable/src/index.ts
@@ -5,3 +5,4 @@ export type {
   PointerDownOutsideEvent,
 } from "@zag-js/interact-outside"
 export * from "./dismissable-layer"
+export type { LayerType } from "./layer-stack"
diff --git a/packages/utilities/dismissable/src/layer-stack.ts b/packages/utilities/dismissable/src/layer-stack.ts
@@ -1,5 +1,7 @@
 import { contains } from "@zag-js/dom-query"
 
+export type LayerType = "dialog" | "popover" | "menu" | "listbox" | (string & {})
+
 export type LayerDismissEventDetail = {
   originalLayer: HTMLElement
   targetLayer: HTMLElement | undefined
@@ -12,6 +14,7 @@ export type LayerDismissEvent = CustomEvent<LayerDismissEventDetail>
 export interface Layer {
   dismiss: VoidFunction
   node: HTMLElement
+  type: LayerType
   pointerBlocking?: boolean | undefined
   requestDismiss?: ((event: LayerDismissEvent) => void) | undefined
 }
@@ -47,6 +50,25 @@ export const layerStack = {
   getNestedLayers(node: HTMLElement) {
     return Array.from(this.layers).slice(this.indexOf(node) + 1)
   },
+  getLayersByType(type: LayerType) {
+    return this.layers.filter((layer) => layer.type === type)
+  },
+  getNestedLayersByType(node: HTMLElement, type: LayerType) {
+    const index = this.indexOf(node)
+    if (index === -1) return []
+    return this.layers.slice(index + 1).filter((layer) => layer.type === type)
+  },
+  getParentLayerOfType(node: HTMLElement, type: LayerType) {
+    const index = this.indexOf(node)
+    if (index <= 0) return undefined
+    return this.layers
+      .slice(0, index)
+      .reverse()
+      .find((layer) => layer.type === type)
+  },
+  countNestedLayersOfType(node: HTMLElement, type: LayerType) {
+    return this.getNestedLayersByType(node, type).length
+  },
   isInNestedLayer(node: HTMLElement, target: HTMLElement | EventTarget | null) {
     return this.getNestedLayers(node).some((layer) => contains(layer.node, target))
   },
@@ -55,7 +77,7 @@ export const layerStack = {
   },
   add(layer: Layer) {
     this.layers.push(layer)
-    this.syncLayerIndex()
+    this.syncLayers()
   },
   addBranch(node: HTMLElement) {
     this.branches.push(node)
@@ -72,15 +94,34 @@ export const layerStack = {
 
     // remove this layer
     this.layers.splice(index, 1)
-    this.syncLayerIndex()
+    this.syncLayers()
   },
   removeBranch(node: HTMLElement) {
     const index = this.branches.indexOf(node)
     if (index >= 0) this.branches.splice(index, 1)
   },
-  syncLayerIndex() {
+  syncLayers() {
     this.layers.forEach((layer, index) => {
       layer.node.style.setProperty("--layer-index", `${index}`)
+
+      // Remove previous data attributes
+      layer.node.removeAttribute("data-nested")
+      layer.node.removeAttribute("data-has-nested")
+
+      // Check if this layer is nested within another of the same type
+      const parentOfSameType = this.getParentLayerOfType(layer.node, layer.type)
+      if (parentOfSameType) {
+        layer.node.setAttribute("data-nested", layer.type)
+      }
+
+      // Check if this layer has nested layers of the same type
+      const nestedCount = this.countNestedLayersOfType(layer.node, layer.type)
+      if (nestedCount > 0) {
+        layer.node.setAttribute("data-has-nested", layer.type)
+      }
+
+      // Set the nested layer count
+      layer.node.style.setProperty("--nested-layer-count", `${nestedCount}`)
     })
   },
   indexOf(node: HTMLElement | undefined) {
@@ -107,7 +148,7 @@ export const layerStack = {
       targetIndex: parent ? this.indexOf(parent) : -1,
     })
 
-    this.syncLayerIndex()
+    this.syncLayers()
   },
   clear() {
     this.remove(this.layers[0].node)
diff --git a/shared/src/css/dialog.css b/shared/src/css/dialog.css
@@ -42,6 +42,11 @@
   padding: 24px;
   position: relative;
   z-index: var(--layer-index);
+  transition: transform 0.2s ease-in-out;
+
+  &[data-has-nested] {
+    transform: scale(calc(1 - var(--nested-layer-count) * 0.05));
+  }
 
   &[data-state="open"] {
     animation: scaleFadeIn 0.2s ease-in-out;
