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

package/dist/layer-stack.js

@@ -20,20 +20,28 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/layer-stack.ts
 var layer_stack_exports = {};
 __export(layer_stack_exports, {
+  isPointerBlocking: () => isPointerBlocking,
   layerStack: () => layerStack
 });
 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 layerId = 0;
+function isPointerBlocking(layer) {
+  const value = layer.pointerBlocking;
+  return typeof value === "function" ? value() : !!value;
+}
 var layerStack = {
   layers: [],
   branches: [],
   recentlyRemoved: /* @__PURE__ */ new Set(),
+  pendingReattach: /* @__PURE__ */ new Map(),
   count() {
     return this.layers.length;
   },
   pointerBlockingLayers() {
-    return this.layers.filter((layer) => layer.pointerBlocking);
+    return this.layers.filter(isPointerBlocking);
   },
   topMostPointerBlockingLayer() {
     return [...this.pointerBlockingLayers()].slice(-1)[0];
@@ -50,21 +58,54 @@ var layerStack = {
     const layer = this.layers[this.count() - 1];
     return layer?.node === node;
   },
+  layerFor(node) {
+    return this.layers.find((layer) => layer.node === node);
+  },
+  isDescendantOf(layer, ancestorId) {
+    if (!ancestorId) return false;
+    const seen = /* @__PURE__ */ new Set();
+    let parentId = layer.parentId;
+    while (parentId && !seen.has(parentId)) {
+      if (parentId === ancestorId) return true;
+      seen.add(parentId);
+      parentId = this.layers.find((l) => l.id === parentId)?.parentId;
+    }
+    return false;
+  },
+  depthOf(layer) {
+    const seen = /* @__PURE__ */ new Set();
+    let depth = 0;
+    let parentId = layer.parentId;
+    while (parentId && !seen.has(parentId)) {
+      depth++;
+      seen.add(parentId);
+      parentId = this.layers.find((l) => l.id === parentId)?.parentId;
+    }
+    return depth;
+  },
+  /** Descendants, shallowest first, so a cascade dismisses parents before their own children. */
   getNestedLayers(node) {
-    return Array.from(this.layers).slice(this.indexOf(node) + 1);
+    const id = this.layerFor(node)?.id;
+    if (!id) return [];
+    return this.layers.filter((layer) => this.isDescendantOf(layer, id)).sort((a, b) => this.depthOf(a) - this.depthOf(b));
   },
   getLayersByType(type) {
     return this.layers.filter((layer) => layer.type === type);
   },
   getNestedLayersByType(node, type) {
-    const index = this.indexOf(node);
-    if (index === -1) return [];
-    return this.layers.slice(index + 1).filter((layer) => layer.type === type);
+    return this.getNestedLayers(node).filter((layer) => layer.type === type);
   },
   getParentLayerOfType(node, type) {
-    const index = this.indexOf(node);
-    if (index <= 0) return void 0;
-    return this.layers.slice(0, index).reverse().find((layer) => layer.type === type);
+    const seen = /* @__PURE__ */ new Set();
+    let parentId = this.layerFor(node)?.parentId;
+    while (parentId && !seen.has(parentId)) {
+      const parent = this.layers.find((l) => l.id === parentId);
+      if (!parent) return void 0;
+      if (parent.type === type) return parent;
+      seen.add(parentId);
+      parentId = parent.parentId;
+    }
+    return void 0;
   },
   countNestedLayersOfType(node, type) {
     return this.getNestedLayersByType(node, type).length;
@@ -80,32 +121,47 @@ var layerStack = {
   },
   add(layer) {
     const existingIndex = this.indexOf(layer.node);
+    const existing = existingIndex !== -1 ? this.layers[existingIndex] : void 0;
+    const pending = this.pendingReattach.get(layer.node);
+    if (existing) {
+      layer.id ?? (layer.id = existing.id);
+      layer.parentId = existing.parentId;
+    } else if (pending) {
+      layer.id ?? (layer.id = pending.id);
+      layer.parentId = pending.parentId;
+    } else {
+      layer.id ?? (layer.id = `layer-${++layerId}`);
+      layer.parentId ?? (layer.parentId = this.layers[this.count() - 1]?.id);
+    }
     if (existingIndex !== -1) {
       this.layers.splice(existingIndex, 1);
     }
-    this.layers.push(layer);
+    if (pending) {
+      this.pendingReattach.delete(layer.node);
+      this.layers.splice(Math.min(pending.index, this.count()), 0, layer);
+    } else {
+      this.layers.push(layer);
+    }
     this.syncLayers();
   },
   addBranch(node) {
     this.branches.push(node);
   },
-  remove(node) {
+  remove(node, options) {
     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((layer2) => layerStack.dismiss(layer2.node, node));
+    if (options?.reattach) {
+      this.pendingReattach.set(node, { id: layer.id, parentId: layer.parentId, index });
+    } else {
+      this.recentlyRemoved.add(node);
+      (0, import_dom_query.nextTick)(() => this.recentlyRemoved.delete(node));
+      this.getNestedLayers(node).forEach((nested) => layerStack.dismiss(nested.node, node));
     }
     this.layers.splice(index, 1);
+    if (layer.snapshot) {
+      publishSnapshot(layer, { ...layer.snapshot, active: false, blocked: false });
+    }
     this.syncLayers();
   },
   removeBranch(node) {
@@ -114,14 +170,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 +211,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;
@@ -180,5 +225,6 @@ function addListenerOnce(el, type, callback) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  isPointerBlocking,
   layerStack
 });

package/dist/layer-stack.mjs

@@ -1,15 +1,22 @@
 // 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 layerId = 0;
+function isPointerBlocking(layer) {
+  const value = layer.pointerBlocking;
+  return typeof value === "function" ? value() : !!value;
+}
 var layerStack = {
   layers: [],
   branches: [],
   recentlyRemoved: /* @__PURE__ */ new Set(),
+  pendingReattach: /* @__PURE__ */ new Map(),
   count() {
     return this.layers.length;
   },
   pointerBlockingLayers() {
-    return this.layers.filter((layer) => layer.pointerBlocking);
+    return this.layers.filter(isPointerBlocking);
   },
   topMostPointerBlockingLayer() {
     return [...this.pointerBlockingLayers()].slice(-1)[0];
@@ -26,21 +33,54 @@ var layerStack = {
     const layer = this.layers[this.count() - 1];
     return layer?.node === node;
   },
+  layerFor(node) {
+    return this.layers.find((layer) => layer.node === node);
+  },
+  isDescendantOf(layer, ancestorId) {
+    if (!ancestorId) return false;
+    const seen = /* @__PURE__ */ new Set();
+    let parentId = layer.parentId;
+    while (parentId && !seen.has(parentId)) {
+      if (parentId === ancestorId) return true;
+      seen.add(parentId);
+      parentId = this.layers.find((l) => l.id === parentId)?.parentId;
+    }
+    return false;
+  },
+  depthOf(layer) {
+    const seen = /* @__PURE__ */ new Set();
+    let depth = 0;
+    let parentId = layer.parentId;
+    while (parentId && !seen.has(parentId)) {
+      depth++;
+      seen.add(parentId);
+      parentId = this.layers.find((l) => l.id === parentId)?.parentId;
+    }
+    return depth;
+  },
+  /** Descendants, shallowest first, so a cascade dismisses parents before their own children. */
   getNestedLayers(node) {
-    return Array.from(this.layers).slice(this.indexOf(node) + 1);
+    const id = this.layerFor(node)?.id;
+    if (!id) return [];
+    return this.layers.filter((layer) => this.isDescendantOf(layer, id)).sort((a, b) => this.depthOf(a) - this.depthOf(b));
   },
   getLayersByType(type) {
     return this.layers.filter((layer) => layer.type === type);
   },
   getNestedLayersByType(node, type) {
-    const index = this.indexOf(node);
-    if (index === -1) return [];
-    return this.layers.slice(index + 1).filter((layer) => layer.type === type);
+    return this.getNestedLayers(node).filter((layer) => layer.type === type);
   },
   getParentLayerOfType(node, type) {
-    const index = this.indexOf(node);
-    if (index <= 0) return void 0;
-    return this.layers.slice(0, index).reverse().find((layer) => layer.type === type);
+    const seen = /* @__PURE__ */ new Set();
+    let parentId = this.layerFor(node)?.parentId;
+    while (parentId && !seen.has(parentId)) {
+      const parent = this.layers.find((l) => l.id === parentId);
+      if (!parent) return void 0;
+      if (parent.type === type) return parent;
+      seen.add(parentId);
+      parentId = parent.parentId;
+    }
+    return void 0;
   },
   countNestedLayersOfType(node, type) {
     return this.getNestedLayersByType(node, type).length;
@@ -56,32 +96,47 @@ var layerStack = {
   },
   add(layer) {
     const existingIndex = this.indexOf(layer.node);
+    const existing = existingIndex !== -1 ? this.layers[existingIndex] : void 0;
+    const pending = this.pendingReattach.get(layer.node);
+    if (existing) {
+      layer.id ?? (layer.id = existing.id);
+      layer.parentId = existing.parentId;
+    } else if (pending) {
+      layer.id ?? (layer.id = pending.id);
+      layer.parentId = pending.parentId;
+    } else {
+      layer.id ?? (layer.id = `layer-${++layerId}`);
+      layer.parentId ?? (layer.parentId = this.layers[this.count() - 1]?.id);
+    }
     if (existingIndex !== -1) {
       this.layers.splice(existingIndex, 1);
     }
-    this.layers.push(layer);
+    if (pending) {
+      this.pendingReattach.delete(layer.node);
+      this.layers.splice(Math.min(pending.index, this.count()), 0, layer);
+    } else {
+      this.layers.push(layer);
+    }
     this.syncLayers();
   },
   addBranch(node) {
     this.branches.push(node);
   },
-  remove(node) {
+  remove(node, options) {
     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((layer2) => layerStack.dismiss(layer2.node, node));
+    if (options?.reattach) {
+      this.pendingReattach.set(node, { id: layer.id, parentId: layer.parentId, index });
+    } else {
+      this.recentlyRemoved.add(node);
+      nextTick(() => this.recentlyRemoved.delete(node));
+      this.getNestedLayers(node).forEach((nested) => layerStack.dismiss(nested.node, node));
     }
     this.layers.splice(index, 1);
+    if (layer.snapshot) {
+      publishSnapshot(layer, { ...layer.snapshot, active: false, blocked: false });
+    }
     this.syncLayers();
   },
   removeBranch(node) {
@@ -90,14 +145,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 +186,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;
@@ -155,5 +199,6 @@ function addListenerOnce(el, type, callback) {
   el.addEventListener(type, callback, { once: true });
 }
 export {
+  isPointerBlocking,
   layerStack
 };

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

@@ -1,5 +1,8 @@
-declare function assignPointerEventToLayers(): void;
-declare function clearPointerEvent(node: HTMLElement): void;
+/**
+ * Re-derives pointer blocking from the stack. Needed after a layer's `pointerBlocking` getter
+ * changes value, since nothing was added or removed to trigger the usual sync.
+ */
+declare function syncPointerEvents(node: HTMLElement): void;
 declare function disablePointerEventsOutside(node: HTMLElement, persistentElements?: Array<() => Element | null>): () => void;
 
-export { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside };
+export { disablePointerEventsOutside, syncPointerEvents };

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

@@ -1,5 +1,8 @@
-declare function assignPointerEventToLayers(): void;
-declare function clearPointerEvent(node: HTMLElement): void;
+/**
+ * Re-derives pointer blocking from the stack. Needed after a layer's `pointerBlocking` getter
+ * changes value, since nothing was added or removed to trigger the usual sync.
+ */
+declare function syncPointerEvents(node: HTMLElement): void;
 declare function disablePointerEventsOutside(node: HTMLElement, persistentElements?: Array<() => Element | null>): () => void;
 
-export { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside };
+export { disablePointerEventsOutside, syncPointerEvents };

package/dist/pointer-event-outside.js

@@ -20,34 +20,45 @@ 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
+  disablePointerEventsOutside: () => disablePointerEventsOutside,
+  syncPointerEvents: () => syncPointerEvents
 });
 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";
+var originalBodyPointerEvents = /* @__PURE__ */ new WeakMap();
+function syncBodyPointerEvents(doc) {
+  const body = doc.body;
+  if (!body) return;
+  const shouldBlock = import_layer_stack.layerStack.hasPointerBlockingLayer();
+  if (shouldBlock === body.hasAttribute("data-inert")) return;
+  if (shouldBlock) {
+    originalBodyPointerEvents.set(body, body.style.pointerEvents);
+    queueMicrotask(() => {
+      if (!import_layer_stack.layerStack.hasPointerBlockingLayer()) return;
+      body.style.pointerEvents = "none";
+      body.setAttribute("data-inert", "");
+    });
+    return;
+  }
+  queueMicrotask(() => {
+    if (import_layer_stack.layerStack.hasPointerBlockingLayer()) return;
+    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");
   });
 }
-function clearPointerEvent(node) {
-  node.style.pointerEvents = "";
+function syncPointerEvents(node) {
+  syncBodyPointerEvents((0, import_dom_query.getDocument)(node));
 }
 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;
-    queueMicrotask(() => {
-      const body = doc.body;
-      if (!body) return;
-      body.style.pointerEvents = "none";
-      body.setAttribute("data-inert", "");
-    });
-  }
+  syncBodyPointerEvents(doc);
   persistentElements?.forEach((el) => {
     const [promise, abort] = (0, import_dom_query.waitForElement)(
       () => {
@@ -60,20 +71,12 @@ function disablePointerEventsOutside(node, persistentElements) {
     cleanups.push(abort);
   });
   return () => {
-    if (import_layer_stack.layerStack.hasPointerBlockingLayer()) return;
-    queueMicrotask(() => {
-      const body = doc.body;
-      if (!body) return;
-      body.style.pointerEvents = originalBodyPointerEvents;
-      body.removeAttribute("data-inert");
-      if (body.style.length === 0) body.removeAttribute("style");
-    });
+    syncBodyPointerEvents(doc);
     cleanups.forEach((fn) => fn());
   };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  assignPointerEventToLayers,
-  clearPointerEvent,
-  disablePointerEventsOutside
+  disablePointerEventsOutside,
+  syncPointerEvents
 });

package/dist/pointer-event-outside.mjs

@@ -1,27 +1,39 @@
 // 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";
+var originalBodyPointerEvents = /* @__PURE__ */ new WeakMap();
+function syncBodyPointerEvents(doc) {
+  const body = doc.body;
+  if (!body) return;
+  const shouldBlock = layerStack.hasPointerBlockingLayer();
+  if (shouldBlock === body.hasAttribute("data-inert")) return;
+  if (shouldBlock) {
+    originalBodyPointerEvents.set(body, body.style.pointerEvents);
+    queueMicrotask(() => {
+      if (!layerStack.hasPointerBlockingLayer()) return;
+      body.style.pointerEvents = "none";
+      body.setAttribute("data-inert", "");
+    });
+    return;
+  }
+  queueMicrotask(() => {
+    if (layerStack.hasPointerBlockingLayer()) return;
+    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");
   });
 }
-function clearPointerEvent(node) {
-  node.style.pointerEvents = "";
+function syncPointerEvents(node) {
+  syncBodyPointerEvents(getDocument(node));
 }
 function disablePointerEventsOutside(node, persistentElements) {
   const doc = getDocument(node);
   const cleanups = [];
-  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
-    originalBodyPointerEvents = doc.body.style.pointerEvents;
-    queueMicrotask(() => {
-      const body = doc.body;
-      if (!body) return;
-      body.style.pointerEvents = "none";
-      body.setAttribute("data-inert", "");
-    });
-  }
+  syncBodyPointerEvents(doc);
   persistentElements?.forEach((el) => {
     const [promise, abort] = waitForElement(
       () => {
@@ -34,19 +46,11 @@ function disablePointerEventsOutside(node, persistentElements) {
     cleanups.push(abort);
   });
   return () => {
-    if (layerStack.hasPointerBlockingLayer()) return;
-    queueMicrotask(() => {
-      const body = doc.body;
-      if (!body) return;
-      body.style.pointerEvents = originalBodyPointerEvents;
-      body.removeAttribute("data-inert");
-      if (body.style.length === 0) body.removeAttribute("style");
-    });
+    syncBodyPointerEvents(doc);
     cleanups.forEach((fn) => fn());
   };
 }
 export {
-  assignPointerEventToLayers,
-  clearPointerEvent,
-  disablePointerEventsOutside
+  disablePointerEventsOutside,
+  syncPointerEvents
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/dismissable",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.2",
   "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/interact-outside": "2.0.0-next.2",
+    "@zag-js/utils": "2.0.0-next.2",
+    "@zag-js/dom-query": "2.0.0-next.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -53,7 +56,7 @@
   "scripts": {
     "build": "tsup",
     "test": "vitest",
-    "lint": "eslint src",
+    "lint": "oxlint src",
     "test-ci": "pnpm test --ci --runInBand -u",
     "test-watch": "pnpm test --watchAll"
   }