@zag-js/dismissable 1.39.1 → 1.41.0

package/dist/dismissable-layer.d.mts

@@ -1,6 +1,6 @@
 import { InteractOutsideHandlers } from '@zag-js/interact-outside';
 import { MaybeFunction } from '@zag-js/utils';
-import { LayerDismissEvent, LayerType } from './layer-stack.mjs';
+import { LayerDismissEvent, LayerStyleTarget, LayerType } from './layer-stack.mjs';
 
 type MaybeElement = HTMLElement | null;
 type Container = MaybeElement | Array<MaybeElement>;
@@ -24,6 +24,12 @@ interface PersistentElementOptions {
     persistentElements?: Array<() => Element | null> | undefined;
 }
 interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
+    /**
+     * Extra elements that receive the same layer stack CSS vars, `data-*`, and `--z-index`
+     * (from the primary node's computed `z-index`) as the dismissable node
+     * (e.g. dialog backdrop + positioner when the node is content).
+     */
+    layerStyleTargets?: LayerStyleTarget[] | undefined;
     /**
      * Whether to log debug information
      */

package/dist/dismissable-layer.d.ts

@@ -1,6 +1,6 @@
 import { InteractOutsideHandlers } from '@zag-js/interact-outside';
 import { MaybeFunction } from '@zag-js/utils';
-import { LayerDismissEvent, LayerType } from './layer-stack.js';
+import { LayerDismissEvent, LayerStyleTarget, LayerType } from './layer-stack.js';
 
 type MaybeElement = HTMLElement | null;
 type Container = MaybeElement | Array<MaybeElement>;
@@ -24,6 +24,12 @@ interface PersistentElementOptions {
     persistentElements?: Array<() => Element | null> | undefined;
 }
 interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
+    /**
+     * Extra elements that receive the same layer stack CSS vars, `data-*`, and `--z-index`
+     * (from the primary node's computed `z-index`) as the dismissable node
+     * (e.g. dialog backdrop + positioner when the node is content).
+     */
+    layerStyleTargets?: LayerStyleTarget[] | undefined;
     /**
      * Whether to log debug information
      */

package/dist/dismissable-layer.js

@@ -39,8 +39,23 @@ function trackDismissableElementImpl(node, options) {
   if (!node) {
     return;
   }
-  const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug, type = "dialog" } = options;
-  const layer = { dismiss: onDismiss, node, type, pointerBlocking, requestDismiss: onRequestDismiss };
+  const {
+    onDismiss,
+    onRequestDismiss,
+    pointerBlocking,
+    exclude: excludeContainers,
+    debug,
+    type = "dialog",
+    layerStyleTargets
+  } = options;
+  const layer = {
+    dismiss: onDismiss,
+    node,
+    type,
+    pointerBlocking,
+    requestDismiss: onRequestDismiss,
+    styleTargets: layerStyleTargets
+  };
   import_layer_stack.layerStack.add(layer);
   (0, import_pointer_event_outside.assignPointerEventToLayers)();
   function onPointerDownOutside(event) {

package/dist/dismissable-layer.mjs

@@ -16,8 +16,23 @@ function trackDismissableElementImpl(node, options) {
   if (!node) {
     return;
   }
-  const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug, type = "dialog" } = options;
-  const layer = { dismiss: onDismiss, node, type, pointerBlocking, requestDismiss: onRequestDismiss };
+  const {
+    onDismiss,
+    onRequestDismiss,
+    pointerBlocking,
+    exclude: excludeContainers,
+    debug,
+    type = "dialog",
+    layerStyleTargets
+  } = options;
+  const layer = {
+    dismiss: onDismiss,
+    node,
+    type,
+    pointerBlocking,
+    requestDismiss: onRequestDismiss,
+    styleTargets: layerStyleTargets
+  };
   layerStack.add(layer);
   assignPointerEventToLayers();
   function onPointerDownOutside(event) {

package/dist/index.d.mts

@@ -1,4 +1,4 @@
 export { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from '@zag-js/interact-outside';
 export { DismissableElementHandlers, DismissableElementOptions, PersistentElementOptions, trackDismissableBranch, trackDismissableElement } from './dismissable-layer.mjs';
-export { LayerType } from './layer-stack.mjs';
+export { LayerStyleTarget, LayerType } from './layer-stack.mjs';
 import '@zag-js/utils';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from '@zag-js/interact-outside';
 export { DismissableElementHandlers, DismissableElementOptions, PersistentElementOptions, trackDismissableBranch, trackDismissableElement } from './dismissable-layer.js';
-export { LayerType } from './layer-stack.js';
+export { LayerStyleTarget, LayerType } from './layer-stack.js';
 import '@zag-js/utils';

package/dist/layer-stack.d.mts

@@ -6,12 +6,14 @@ type LayerDismissEventDetail = {
     targetIndex: number;
 };
 type LayerDismissEvent = CustomEvent<LayerDismissEventDetail>;
+type LayerStyleTarget = () => HTMLElement | null;
 interface Layer {
     dismiss: VoidFunction;
     node: HTMLElement;
     type: LayerType;
     pointerBlocking?: boolean | undefined;
     requestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
+    styleTargets?: LayerStyleTarget[] | undefined;
 }
 declare const layerStack: {
     layers: Layer[];
@@ -40,4 +42,4 @@ declare const layerStack: {
     clear(): void;
 };
 
-export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerType, layerStack };
+export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerStyleTarget, type LayerType, layerStack };

package/dist/layer-stack.d.ts

@@ -6,12 +6,14 @@ type LayerDismissEventDetail = {
     targetIndex: number;
 };
 type LayerDismissEvent = CustomEvent<LayerDismissEventDetail>;
+type LayerStyleTarget = () => HTMLElement | null;
 interface Layer {
     dismiss: VoidFunction;
     node: HTMLElement;
     type: LayerType;
     pointerBlocking?: boolean | undefined;
     requestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
+    styleTargets?: LayerStyleTarget[] | undefined;
 }
 declare const layerStack: {
     layers: Layer[];
@@ -40,4 +42,4 @@ declare const layerStack: {
     clear(): void;
 };
 
-export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerType, layerStack };
+export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerStyleTarget, type LayerType, layerStack };

package/dist/layer-stack.js

@@ -79,6 +79,10 @@ var layerStack = {
     return Array.from(this.branches).some((branch) => (0, import_dom_query.contains)(branch, target));
   },
   add(layer) {
+    const existingIndex = this.indexOf(layer.node);
+    if (existingIndex !== -1) {
+      this.layers.splice(existingIndex, 1);
+    }
     this.layers.push(layer);
     this.syncLayers();
   },
@@ -88,11 +92,18 @@ var layerStack = {
   remove(node) {
     const index = this.indexOf(node);
     if (index < 0) return;
+    const layer = this.layers[index];
+    layer.styleTargets?.forEach((getTarget) => {
+      const target = getTarget();
+      if (target) {
+        clearLayerStyleMirror(target);
+      }
+    });
     this.recentlyRemoved.add(node);
     (0, import_dom_query.nextTick)(() => this.recentlyRemoved.delete(node));
     if (index < this.count() - 1) {
       const _layers = this.getNestedLayers(node);
-      _layers.forEach((layer) => layerStack.dismiss(layer.node, node));
+      _layers.forEach((layer2) => layerStack.dismiss(layer2.node, node));
     }
     this.layers.splice(index, 1);
     this.syncLayers();
@@ -103,18 +114,14 @@ var layerStack = {
   },
   syncLayers() {
     this.layers.forEach((layer, index) => {
-      layer.node.style.setProperty("--layer-index", `${index}`);
-      layer.node.removeAttribute("data-nested");
-      layer.node.removeAttribute("data-has-nested");
-      const parentOfSameType = this.getParentLayerOfType(layer.node, layer.type);
-      if (parentOfSameType) {
-        layer.node.setAttribute("data-nested", layer.type);
-      }
-      const nestedCount = this.countNestedLayersOfType(layer.node, layer.type);
-      if (nestedCount > 0) {
-        layer.node.setAttribute("data-has-nested", layer.type);
-      }
-      layer.node.style.setProperty("--nested-layer-count", `${nestedCount}`);
+      applyLayerStackMetadata(layer, index, layer.node);
+      layer.styleTargets?.forEach((getTarget) => {
+        const target = getTarget();
+        if (!target || target === layer.node) return;
+        applyLayerStackMetadata(layer, index, target);
+        const { zIndex } = (0, import_dom_query.getComputedStyle)(layer.node);
+        target.style.setProperty("--z-index", zIndex);
+      });
     });
   },
   indexOf(node) {
@@ -142,6 +149,27 @@ var layerStack = {
     this.remove(this.layers[0].node);
   }
 };
+function applyLayerStackMetadata(layer, index, el) {
+  el.style.setProperty("--layer-index", `${index}`);
+  el.removeAttribute("data-nested");
+  el.removeAttribute("data-has-nested");
+  const parentOfSameType = layerStack.getParentLayerOfType(layer.node, layer.type);
+  if (parentOfSameType) {
+    el.setAttribute("data-nested", layer.type);
+  }
+  const nestedCount = layerStack.countNestedLayersOfType(layer.node, layer.type);
+  if (nestedCount > 0) {
+    el.setAttribute("data-has-nested", layer.type);
+  }
+  el.style.setProperty("--nested-layer-count", `${nestedCount}`);
+}
+function clearLayerStyleMirror(el) {
+  el.style.removeProperty("--layer-index");
+  el.style.removeProperty("--nested-layer-count");
+  el.style.removeProperty("--z-index");
+  el.removeAttribute("data-nested");
+  el.removeAttribute("data-has-nested");
+}
 function fireCustomEvent(el, type, detail) {
   const win = el.ownerDocument.defaultView || window;
   const event = new win.CustomEvent(type, { cancelable: true, bubbles: true, detail });

package/dist/layer-stack.mjs

@@ -1,5 +1,5 @@
 // src/layer-stack.ts
-import { contains, nextTick } from "@zag-js/dom-query";
+import { contains, nextTick, getComputedStyle } from "@zag-js/dom-query";
 var LAYER_REQUEST_DISMISS_EVENT = "layer:request-dismiss";
 var layerStack = {
   layers: [],
@@ -55,6 +55,10 @@ var layerStack = {
     return Array.from(this.branches).some((branch) => contains(branch, target));
   },
   add(layer) {
+    const existingIndex = this.indexOf(layer.node);
+    if (existingIndex !== -1) {
+      this.layers.splice(existingIndex, 1);
+    }
     this.layers.push(layer);
     this.syncLayers();
   },
@@ -64,11 +68,18 @@ var layerStack = {
   remove(node) {
     const index = this.indexOf(node);
     if (index < 0) return;
+    const layer = this.layers[index];
+    layer.styleTargets?.forEach((getTarget) => {
+      const target = getTarget();
+      if (target) {
+        clearLayerStyleMirror(target);
+      }
+    });
     this.recentlyRemoved.add(node);
     nextTick(() => this.recentlyRemoved.delete(node));
     if (index < this.count() - 1) {
       const _layers = this.getNestedLayers(node);
-      _layers.forEach((layer) => layerStack.dismiss(layer.node, node));
+      _layers.forEach((layer2) => layerStack.dismiss(layer2.node, node));
     }
     this.layers.splice(index, 1);
     this.syncLayers();
@@ -79,18 +90,14 @@ var layerStack = {
   },
   syncLayers() {
     this.layers.forEach((layer, index) => {
-      layer.node.style.setProperty("--layer-index", `${index}`);
-      layer.node.removeAttribute("data-nested");
-      layer.node.removeAttribute("data-has-nested");
-      const parentOfSameType = this.getParentLayerOfType(layer.node, layer.type);
-      if (parentOfSameType) {
-        layer.node.setAttribute("data-nested", layer.type);
-      }
-      const nestedCount = this.countNestedLayersOfType(layer.node, layer.type);
-      if (nestedCount > 0) {
-        layer.node.setAttribute("data-has-nested", layer.type);
-      }
-      layer.node.style.setProperty("--nested-layer-count", `${nestedCount}`);
+      applyLayerStackMetadata(layer, index, layer.node);
+      layer.styleTargets?.forEach((getTarget) => {
+        const target = getTarget();
+        if (!target || target === layer.node) return;
+        applyLayerStackMetadata(layer, index, target);
+        const { zIndex } = getComputedStyle(layer.node);
+        target.style.setProperty("--z-index", zIndex);
+      });
     });
   },
   indexOf(node) {
@@ -118,6 +125,27 @@ var layerStack = {
     this.remove(this.layers[0].node);
   }
 };
+function applyLayerStackMetadata(layer, index, el) {
+  el.style.setProperty("--layer-index", `${index}`);
+  el.removeAttribute("data-nested");
+  el.removeAttribute("data-has-nested");
+  const parentOfSameType = layerStack.getParentLayerOfType(layer.node, layer.type);
+  if (parentOfSameType) {
+    el.setAttribute("data-nested", layer.type);
+  }
+  const nestedCount = layerStack.countNestedLayersOfType(layer.node, layer.type);
+  if (nestedCount > 0) {
+    el.setAttribute("data-has-nested", layer.type);
+  }
+  el.style.setProperty("--nested-layer-count", `${nestedCount}`);
+}
+function clearLayerStyleMirror(el) {
+  el.style.removeProperty("--layer-index");
+  el.style.removeProperty("--nested-layer-count");
+  el.style.removeProperty("--z-index");
+  el.removeAttribute("data-nested");
+  el.removeAttribute("data-has-nested");
+}
 function fireCustomEvent(el, type, detail) {
   const win = el.ownerDocument.defaultView || window;
   const event = new win.CustomEvent(type, { cancelable: true, bubbles: true, detail });

package/dist/pointer-event-outside.js

@@ -40,10 +40,12 @@ function disablePointerEventsOutside(node, persistentElements) {
   const doc = (0, import_dom_query.getDocument)(node);
   const cleanups = [];
   if (import_layer_stack.layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
-    originalBodyPointerEvents = document.body.style.pointerEvents;
+    originalBodyPointerEvents = doc.body.style.pointerEvents;
     queueMicrotask(() => {
-      doc.body.style.pointerEvents = "none";
-      doc.body.setAttribute("data-inert", "");
+      const body = doc.body;
+      if (!body) return;
+      body.style.pointerEvents = "none";
+      body.setAttribute("data-inert", "");
     });
   }
   persistentElements?.forEach((el) => {
@@ -60,9 +62,11 @@ function disablePointerEventsOutside(node, persistentElements) {
   return () => {
     if (import_layer_stack.layerStack.hasPointerBlockingLayer()) return;
     queueMicrotask(() => {
-      doc.body.style.pointerEvents = originalBodyPointerEvents;
-      doc.body.removeAttribute("data-inert");
-      if (doc.body.style.length === 0) doc.body.removeAttribute("style");
+      const body = doc.body;
+      if (!body) return;
+      body.style.pointerEvents = originalBodyPointerEvents;
+      body.removeAttribute("data-inert");
+      if (body.style.length === 0) body.removeAttribute("style");
     });
     cleanups.forEach((fn) => fn());
   };

package/dist/pointer-event-outside.mjs

@@ -14,10 +14,12 @@ function disablePointerEventsOutside(node, persistentElements) {
   const doc = getDocument(node);
   const cleanups = [];
   if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
-    originalBodyPointerEvents = document.body.style.pointerEvents;
+    originalBodyPointerEvents = doc.body.style.pointerEvents;
     queueMicrotask(() => {
-      doc.body.style.pointerEvents = "none";
-      doc.body.setAttribute("data-inert", "");
+      const body = doc.body;
+      if (!body) return;
+      body.style.pointerEvents = "none";
+      body.setAttribute("data-inert", "");
     });
   }
   persistentElements?.forEach((el) => {
@@ -34,9 +36,11 @@ function disablePointerEventsOutside(node, persistentElements) {
   return () => {
     if (layerStack.hasPointerBlockingLayer()) return;
     queueMicrotask(() => {
-      doc.body.style.pointerEvents = originalBodyPointerEvents;
-      doc.body.removeAttribute("data-inert");
-      if (doc.body.style.length === 0) doc.body.removeAttribute("style");
+      const body = doc.body;
+      if (!body) return;
+      body.style.pointerEvents = originalBodyPointerEvents;
+      body.removeAttribute("data-inert");
+      if (body.style.length === 0) body.removeAttribute("style");
     });
     cleanups.forEach((fn) => fn());
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/dismissable",
-  "version": "1.39.1",
+  "version": "1.41.0",
   "description": "Dismissable layer utilities for the DOM",
   "keywords": [
     "js",
@@ -23,9 +23,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@zag-js/interact-outside": "1.39.1",
-    "@zag-js/dom-query": "1.39.1",
-    "@zag-js/utils": "1.39.1"
+    "@zag-js/interact-outside": "1.41.0",
+    "@zag-js/dom-query": "1.41.0",
+    "@zag-js/utils": "1.41.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"