@zag-js/dismissable 2.0.0-next.0 → 2.0.0-next.1

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, LayerStyleTarget, LayerType } from './layer-stack.mjs';
+import { LayerDismissEvent, LayerSnapshot, LayerType } from './layer-stack.mjs';
 
 type MaybeElement = HTMLElement | null;
 type Container = MaybeElement | Array<MaybeElement>;
@@ -25,11 +25,9 @@ interface PersistentElementOptions {
 }
 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).
+     * Function called when the layer's position or nesting state changes.
      */
-    layerStyleTargets?: LayerStyleTarget[] | undefined;
+    onLayerChange: (snapshot: LayerSnapshot) => void;
     /**
      * 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, LayerStyleTarget, LayerType } from './layer-stack.js';
+import { LayerDismissEvent, LayerSnapshot, LayerType } from './layer-stack.js';
 
 type MaybeElement = HTMLElement | null;
 type Container = MaybeElement | Array<MaybeElement>;
@@ -25,11 +25,9 @@ interface PersistentElementOptions {
 }
 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).
+     * Function called when the layer's position or nesting state changes.
      */
-    layerStyleTargets?: LayerStyleTarget[] | undefined;
+    onLayerChange: (snapshot: LayerSnapshot) => void;
     /**
      * Whether to log debug information
      */

package/dist/dismissable-layer.js

@@ -46,7 +46,7 @@ function trackDismissableElementImpl(node, options) {
     exclude: excludeContainers,
     debug,
     type = "dialog",
-    layerStyleTargets
+    onLayerChange
   } = options;
   const layer = {
     dismiss: onDismiss,
@@ -54,10 +54,9 @@ function trackDismissableElementImpl(node, options) {
     type,
     pointerBlocking,
     requestDismiss: onRequestDismiss,
-    styleTargets: layerStyleTargets
+    onLayerChange
   };
   import_layer_stack.layerStack.add(layer);
-  (0, import_pointer_event_outside.assignPointerEventToLayers)();
   function onPointerDownOutside(event) {
     const target = (0, import_dom_query.getEventTarget)(event.detail.originalEvent);
     if (import_layer_stack.layerStack.isBelowPointerBlockingLayer(node) || import_layer_stack.layerStack.isInBranch(target)) return;
@@ -103,8 +102,6 @@ function trackDismissableElementImpl(node, options) {
   ];
   return () => {
     import_layer_stack.layerStack.remove(node);
-    (0, import_pointer_event_outside.assignPointerEventToLayers)();
-    (0, import_pointer_event_outside.clearPointerEvent)(node);
     cleanups.forEach((fn) => fn?.());
   };
 }

package/dist/dismissable-layer.mjs

@@ -6,7 +6,7 @@ import {
 import { isFunction, warn } from "@zag-js/utils";
 import { trackEscapeKeydown } from "./escape-keydown.mjs";
 import { layerStack } from "./layer-stack.mjs";
-import { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside } from "./pointer-event-outside.mjs";
+import { disablePointerEventsOutside } from "./pointer-event-outside.mjs";
 function trackDismissableElementImpl(node, options) {
   const { warnOnMissingNode = true } = options;
   if (warnOnMissingNode && !node) {
@@ -23,7 +23,7 @@ function trackDismissableElementImpl(node, options) {
     exclude: excludeContainers,
     debug,
     type = "dialog",
-    layerStyleTargets
+    onLayerChange
   } = options;
   const layer = {
     dismiss: onDismiss,
@@ -31,10 +31,9 @@ function trackDismissableElementImpl(node, options) {
     type,
     pointerBlocking,
     requestDismiss: onRequestDismiss,
-    styleTargets: layerStyleTargets
+    onLayerChange
   };
   layerStack.add(layer);
-  assignPointerEventToLayers();
   function onPointerDownOutside(event) {
     const target = getEventTarget(event.detail.originalEvent);
     if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target)) return;
@@ -80,8 +79,6 @@ function trackDismissableElementImpl(node, options) {
   ];
   return () => {
     layerStack.remove(node);
-    assignPointerEventToLayers();
-    clearPointerEvent(node);
     cleanups.forEach((fn) => fn?.());
   };
 }

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -18,7 +18,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("./dismissable-layer.js"), module.exports);
+__reExport(index_exports, require("./layer-props.js"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("./dismissable-layer.js")
+  ...require("./dismissable-layer.js"),
+  ...require("./layer-props.js")
 });

package/dist/index.mjs

@@ -1,2 +1,3 @@
 // src/index.ts
 export * from "./dismissable-layer.mjs";
+export * from "./layer-props.mjs";

package/dist/layer-props.d.mts

@@ -0,0 +1,30 @@
+import { LayerSnapshot, LayerType } from './layer-stack.mjs';
+
+declare function getDismissableLayerAttrs(layer: LayerSnapshot | null | undefined): {
+    "data-nested": LayerType | undefined;
+    "data-has-nested": LayerType | undefined;
+};
+interface DismissableLayerStyleOptions {
+    /**
+     * Set `--z-index: var(--layer-index)` on the element that establishes the actual
+     * stacking context (backdrop / positioner). Content parts sit inside that stacking
+     * context already, so they don't need this.
+     */
+    zIndex?: boolean;
+    /**
+     * Set `pointer-events: none` while a pointer-blocking layer sits above this one.
+     * Omit for elements (like popper positioners) that already manage their own
+     * `pointer-events`.
+     */
+    pointerEvents?: boolean;
+}
+interface DismissableLayerStyle {
+    [key: string]: string | undefined;
+    "--layer-index"?: string | undefined;
+    "--nested-layer-count"?: string | undefined;
+    "--z-index"?: string | undefined;
+    pointerEvents?: "none" | "auto" | undefined;
+}
+declare function getDismissableLayerStyle(layer: LayerSnapshot | null | undefined, options?: DismissableLayerStyleOptions): DismissableLayerStyle;
+
+export { type DismissableLayerStyle, type DismissableLayerStyleOptions, getDismissableLayerAttrs, getDismissableLayerStyle };

package/dist/layer-props.d.ts

@@ -0,0 +1,30 @@
+import { LayerSnapshot, LayerType } from './layer-stack.js';
+
+declare function getDismissableLayerAttrs(layer: LayerSnapshot | null | undefined): {
+    "data-nested": LayerType | undefined;
+    "data-has-nested": LayerType | undefined;
+};
+interface DismissableLayerStyleOptions {
+    /**
+     * Set `--z-index: var(--layer-index)` on the element that establishes the actual
+     * stacking context (backdrop / positioner). Content parts sit inside that stacking
+     * context already, so they don't need this.
+     */
+    zIndex?: boolean;
+    /**
+     * Set `pointer-events: none` while a pointer-blocking layer sits above this one.
+     * Omit for elements (like popper positioners) that already manage their own
+     * `pointer-events`.
+     */
+    pointerEvents?: boolean;
+}
+interface DismissableLayerStyle {
+    [key: string]: string | undefined;
+    "--layer-index"?: string | undefined;
+    "--nested-layer-count"?: string | undefined;
+    "--z-index"?: string | undefined;
+    pointerEvents?: "none" | "auto" | undefined;
+}
+declare function getDismissableLayerStyle(layer: LayerSnapshot | null | undefined, options?: DismissableLayerStyleOptions): DismissableLayerStyle;
+
+export { type DismissableLayerStyle, type DismissableLayerStyleOptions, getDismissableLayerAttrs, getDismissableLayerStyle };

package/dist/layer-props.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/layer-props.ts
+var layer_props_exports = {};
+__export(layer_props_exports, {
+  getDismissableLayerAttrs: () => getDismissableLayerAttrs,
+  getDismissableLayerStyle: () => getDismissableLayerStyle
+});
+module.exports = __toCommonJS(layer_props_exports);
+function getDismissableLayerAttrs(layer) {
+  return {
+    "data-nested": layer?.nested ? layer.type : void 0,
+    "data-has-nested": layer?.hasNested ? layer.type : void 0
+  };
+}
+function getDismissableLayerStyle(layer, options = {}) {
+  const style = {
+    "--layer-index": layer ? `${layer.index}` : void 0,
+    "--nested-layer-count": layer ? `${layer.nestedCount}` : void 0,
+    "--z-index": options.zIndex && layer ? "var(--layer-index)" : void 0
+  };
+  if (options.pointerEvents) {
+    style.pointerEvents = layer?.active ? layer.blocked ? "none" : "auto" : void 0;
+  }
+  return style;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getDismissableLayerAttrs,
+  getDismissableLayerStyle
+});

package/dist/layer-props.mjs

@@ -0,0 +1,22 @@
+// src/layer-props.ts
+function getDismissableLayerAttrs(layer) {
+  return {
+    "data-nested": layer?.nested ? layer.type : void 0,
+    "data-has-nested": layer?.hasNested ? layer.type : void 0
+  };
+}
+function getDismissableLayerStyle(layer, options = {}) {
+  const style = {
+    "--layer-index": layer ? `${layer.index}` : void 0,
+    "--nested-layer-count": layer ? `${layer.nestedCount}` : void 0,
+    "--z-index": options.zIndex && layer ? "var(--layer-index)" : void 0
+  };
+  if (options.pointerEvents) {
+    style.pointerEvents = layer?.active ? layer.blocked ? "none" : "auto" : void 0;
+  }
+  return style;
+}
+export {
+  getDismissableLayerAttrs,
+  getDismissableLayerStyle
+};

package/dist/layer-stack.d.mts

@@ -6,14 +6,23 @@ type LayerDismissEventDetail = {
     targetIndex: number;
 };
 type LayerDismissEvent = CustomEvent<LayerDismissEventDetail>;
-type LayerStyleTarget = () => HTMLElement | null;
+interface LayerSnapshot {
+    active: boolean;
+    type: LayerType;
+    index: number;
+    nested: boolean;
+    hasNested: boolean;
+    nestedCount: number;
+    blocked: boolean;
+}
 interface Layer {
     dismiss: VoidFunction;
     node: HTMLElement;
     type: LayerType;
     pointerBlocking?: boolean | undefined;
     requestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
-    styleTargets?: LayerStyleTarget[] | undefined;
+    onLayerChange?: ((snapshot: LayerSnapshot) => void) | undefined;
+    snapshot?: LayerSnapshot | undefined;
 }
 declare const layerStack: {
     layers: Layer[];
@@ -42,4 +51,4 @@ declare const layerStack: {
     clear(): void;
 };
 
-export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerStyleTarget, type LayerType, layerStack };
+export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerSnapshot, type LayerType, layerStack };

package/dist/layer-stack.d.ts

@@ -6,14 +6,23 @@ type LayerDismissEventDetail = {
     targetIndex: number;
 };
 type LayerDismissEvent = CustomEvent<LayerDismissEventDetail>;
-type LayerStyleTarget = () => HTMLElement | null;
+interface LayerSnapshot {
+    active: boolean;
+    type: LayerType;
+    index: number;
+    nested: boolean;
+    hasNested: boolean;
+    nestedCount: number;
+    blocked: boolean;
+}
 interface Layer {
     dismiss: VoidFunction;
     node: HTMLElement;
     type: LayerType;
     pointerBlocking?: boolean | undefined;
     requestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
-    styleTargets?: LayerStyleTarget[] | undefined;
+    onLayerChange?: ((snapshot: LayerSnapshot) => void) | undefined;
+    snapshot?: LayerSnapshot | undefined;
 }
 declare const layerStack: {
     layers: Layer[];
@@ -42,4 +51,4 @@ declare const layerStack: {
     clear(): void;
 };
 
-export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerStyleTarget, type LayerType, layerStack };
+export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerSnapshot, type LayerType, layerStack };

package/dist/layer-stack.js

@@ -24,6 +24,7 @@ __export(layer_stack_exports, {
 });
 module.exports = __toCommonJS(layer_stack_exports);
 var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
 var LAYER_REQUEST_DISMISS_EVENT = "layer:request-dismiss";
 var layerStack = {
   layers: [],
@@ -93,12 +94,9 @@ var layerStack = {
     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);
-      }
-    });
+    if (layer.snapshot) {
+      publishSnapshot(layer, { ...layer.snapshot, active: false, blocked: false });
+    }
     this.recentlyRemoved.add(node);
     (0, import_dom_query.nextTick)(() => this.recentlyRemoved.delete(node));
     if (index < this.count() - 1) {
@@ -114,14 +112,20 @@ var layerStack = {
   },
   syncLayers() {
     this.layers.forEach((layer, index) => {
-      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);
-      });
+      const parentOfSameType = layerStack.getParentLayerOfType(layer.node, layer.type);
+      const nestedCount = layerStack.countNestedLayersOfType(layer.node, layer.type);
+      const snapshot = {
+        active: true,
+        type: layer.type,
+        index,
+        nested: parentOfSameType != null,
+        hasNested: nestedCount > 0,
+        nestedCount,
+        blocked: layerStack.isBelowPointerBlockingLayer(layer.node)
+      };
+      if (!(0, import_utils.isEqual)(layer.snapshot, snapshot)) {
+        publishSnapshot(layer, snapshot);
+      }
     });
   },
   indexOf(node) {
@@ -149,26 +153,9 @@ 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 publishSnapshot(layer, snapshot) {
+  layer.snapshot = snapshot;
+  layer.onLayerChange?.(snapshot);
 }
 function fireCustomEvent(el, type, detail) {
   const win = el.ownerDocument.defaultView || window;

package/dist/layer-stack.mjs

@@ -1,5 +1,6 @@
 // src/layer-stack.ts
-import { contains, nextTick, getComputedStyle } from "@zag-js/dom-query";
+import { contains, nextTick } from "@zag-js/dom-query";
+import { isEqual } from "@zag-js/utils";
 var LAYER_REQUEST_DISMISS_EVENT = "layer:request-dismiss";
 var layerStack = {
   layers: [],
@@ -69,12 +70,9 @@ var layerStack = {
     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);
-      }
-    });
+    if (layer.snapshot) {
+      publishSnapshot(layer, { ...layer.snapshot, active: false, blocked: false });
+    }
     this.recentlyRemoved.add(node);
     nextTick(() => this.recentlyRemoved.delete(node));
     if (index < this.count() - 1) {
@@ -90,14 +88,20 @@ var layerStack = {
   },
   syncLayers() {
     this.layers.forEach((layer, index) => {
-      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);
-      });
+      const parentOfSameType = layerStack.getParentLayerOfType(layer.node, layer.type);
+      const nestedCount = layerStack.countNestedLayersOfType(layer.node, layer.type);
+      const snapshot = {
+        active: true,
+        type: layer.type,
+        index,
+        nested: parentOfSameType != null,
+        hasNested: nestedCount > 0,
+        nestedCount,
+        blocked: layerStack.isBelowPointerBlockingLayer(layer.node)
+      };
+      if (!isEqual(layer.snapshot, snapshot)) {
+        publishSnapshot(layer, snapshot);
+      }
     });
   },
   indexOf(node) {
@@ -125,26 +129,9 @@ 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 publishSnapshot(layer, snapshot) {
+  layer.snapshot = snapshot;
+  layer.onLayerChange?.(snapshot);
 }
 function fireCustomEvent(el, type, detail) {
   const win = el.ownerDocument.defaultView || window;

package/dist/pointer-event-outside.d.mts

@@ -1,5 +1,3 @@
-declare function assignPointerEventToLayers(): void;
-declare function clearPointerEvent(node: HTMLElement): void;
 declare function disablePointerEventsOutside(node: HTMLElement, persistentElements?: Array<() => Element | null>): () => void;
 
-export { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside };
+export { disablePointerEventsOutside };

package/dist/pointer-event-outside.d.ts

@@ -1,5 +1,3 @@
-declare function assignPointerEventToLayers(): void;
-declare function clearPointerEvent(node: HTMLElement): void;
 declare function disablePointerEventsOutside(node: HTMLElement, persistentElements?: Array<() => Element | null>): () => void;
 
-export { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside };
+export { disablePointerEventsOutside };

package/dist/pointer-event-outside.js

@@ -20,27 +20,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/pointer-event-outside.ts
 var pointer_event_outside_exports = {};
 __export(pointer_event_outside_exports, {
-  assignPointerEventToLayers: () => assignPointerEventToLayers,
-  clearPointerEvent: () => clearPointerEvent,
   disablePointerEventsOutside: () => disablePointerEventsOutside
 });
 module.exports = __toCommonJS(pointer_event_outside_exports);
 var import_dom_query = require("@zag-js/dom-query");
 var import_layer_stack = require("./layer-stack.js");
-var originalBodyPointerEvents;
-function assignPointerEventToLayers() {
-  import_layer_stack.layerStack.layers.forEach(({ node }) => {
-    node.style.pointerEvents = import_layer_stack.layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
-  });
-}
-function clearPointerEvent(node) {
-  node.style.pointerEvents = "";
-}
+var originalBodyPointerEvents = /* @__PURE__ */ new WeakMap();
 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 = doc.body.style.pointerEvents;
+    originalBodyPointerEvents.set(doc.body, doc.body.style.pointerEvents);
     queueMicrotask(() => {
       const body = doc.body;
       if (!body) return;
@@ -64,7 +54,11 @@ function disablePointerEventsOutside(node, persistentElements) {
     queueMicrotask(() => {
       const body = doc.body;
       if (!body) return;
-      body.style.pointerEvents = originalBodyPointerEvents;
+      const original = originalBodyPointerEvents.get(body);
+      if (original !== void 0) {
+        body.style.pointerEvents = original;
+        originalBodyPointerEvents.delete(body);
+      }
       body.removeAttribute("data-inert");
       if (body.style.length === 0) body.removeAttribute("style");
     });
@@ -73,7 +67,5 @@ function disablePointerEventsOutside(node, persistentElements) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  assignPointerEventToLayers,
-  clearPointerEvent,
   disablePointerEventsOutside
 });

package/dist/pointer-event-outside.mjs

@@ -1,20 +1,12 @@
 // src/pointer-event-outside.ts
 import { getDocument, isHTMLElement, setStyle, waitForElement } from "@zag-js/dom-query";
 import { layerStack } from "./layer-stack.mjs";
-var originalBodyPointerEvents;
-function assignPointerEventToLayers() {
-  layerStack.layers.forEach(({ node }) => {
-    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
-  });
-}
-function clearPointerEvent(node) {
-  node.style.pointerEvents = "";
-}
+var originalBodyPointerEvents = /* @__PURE__ */ new WeakMap();
 function disablePointerEventsOutside(node, persistentElements) {
   const doc = getDocument(node);
   const cleanups = [];
   if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
-    originalBodyPointerEvents = doc.body.style.pointerEvents;
+    originalBodyPointerEvents.set(doc.body, doc.body.style.pointerEvents);
     queueMicrotask(() => {
       const body = doc.body;
       if (!body) return;
@@ -38,7 +30,11 @@ function disablePointerEventsOutside(node, persistentElements) {
     queueMicrotask(() => {
       const body = doc.body;
       if (!body) return;
-      body.style.pointerEvents = originalBodyPointerEvents;
+      const original = originalBodyPointerEvents.get(body);
+      if (original !== void 0) {
+        body.style.pointerEvents = original;
+        originalBodyPointerEvents.delete(body);
+      }
       body.removeAttribute("data-inert");
       if (body.style.length === 0) body.removeAttribute("style");
     });
@@ -46,7 +42,5 @@ function disablePointerEventsOutside(node, persistentElements) {
   };
 }
 export {
-  assignPointerEventToLayers,
-  clearPointerEvent,
   disablePointerEventsOutside
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/dismissable",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.1",
   "description": "Dismissable layer utilities for the DOM",
   "keywords": [
     "js",
@@ -14,7 +14,10 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/interact-outside",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/interact-outside"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -23,9 +26,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@zag-js/interact-outside": "2.0.0-next.0",
-    "@zag-js/dom-query": "2.0.0-next.0",
-    "@zag-js/utils": "2.0.0-next.0"
+    "@zag-js/dom-query": "2.0.0-next.1",
+    "@zag-js/utils": "2.0.0-next.1",
+    "@zag-js/interact-outside": "2.0.0-next.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"