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

package/dist/dismissable-layer.d.mts

@@ -1,5 +1,5 @@
 import { InteractOutsideHandlers } from '@zag-js/interact-outside';
-import { MaybeFunction } from '@zag-js/utils';
+import { MaybeFunction, TeardownReason } from '@zag-js/utils';
 import { LayerDismissEvent, LayerSnapshot, LayerType } from './layer-stack.mjs';
 
 type MaybeElement = HTMLElement | null;
@@ -35,7 +35,7 @@ interface DismissableElementOptions extends DismissableElementHandlers, Persiste
     /**
      * Whether to block pointer events outside the dismissable element
      */
-    pointerBlocking?: boolean | undefined;
+    pointerBlocking?: boolean | (() => boolean) | undefined;
     /**
      * Function called when the dismissable element is dismissed
      */
@@ -56,8 +56,10 @@ interface DismissableElementOptions extends DismissableElementHandlers, Persiste
      * The type of layer being tracked
      */
     type?: LayerType | undefined;
+    /** Groups this layer with its peers, so closing one does not dismiss the other. */
+    group?: string | undefined;
 }
-declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
+declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): (args_0?: TeardownReason | undefined) => void;
 declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
     defer?: boolean | undefined;
 }): () => void;

package/dist/dismissable-layer.d.ts

@@ -1,5 +1,5 @@
 import { InteractOutsideHandlers } from '@zag-js/interact-outside';
-import { MaybeFunction } from '@zag-js/utils';
+import { MaybeFunction, TeardownReason } from '@zag-js/utils';
 import { LayerDismissEvent, LayerSnapshot, LayerType } from './layer-stack.js';
 
 type MaybeElement = HTMLElement | null;
@@ -35,7 +35,7 @@ interface DismissableElementOptions extends DismissableElementHandlers, Persiste
     /**
      * Whether to block pointer events outside the dismissable element
      */
-    pointerBlocking?: boolean | undefined;
+    pointerBlocking?: boolean | (() => boolean) | undefined;
     /**
      * Function called when the dismissable element is dismissed
      */
@@ -56,8 +56,10 @@ interface DismissableElementOptions extends DismissableElementHandlers, Persiste
      * The type of layer being tracked
      */
     type?: LayerType | undefined;
+    /** Groups this layer with its peers, so closing one does not dismiss the other. */
+    group?: string | undefined;
 }
-declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
+declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): (args_0?: TeardownReason | undefined) => void;
 declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
     defer?: boolean | undefined;
 }): () => void;

package/dist/dismissable-layer.js

@@ -31,14 +31,6 @@ var import_escape_keydown = require("./escape-keydown.js");
 var import_layer_stack = require("./layer-stack.js");
 var import_pointer_event_outside = require("./pointer-event-outside.js");
 function trackDismissableElementImpl(node, options) {
-  const { warnOnMissingNode = true } = options;
-  if (warnOnMissingNode && !node) {
-    (0, import_utils.warn)("[@zag-js/dismissable] node is `null` or `undefined`");
-    return;
-  }
-  if (!node) {
-    return;
-  }
   const {
     onDismiss,
     onRequestDismiss,
@@ -46,12 +38,14 @@ function trackDismissableElementImpl(node, options) {
     exclude: excludeContainers,
     debug,
     type = "dialog",
+    group,
     onLayerChange
   } = options;
   const layer = {
     dismiss: onDismiss,
     node,
     type,
+    group,
     pointerBlocking,
     requestDismiss: onRequestDismiss,
     onLayerChange
@@ -88,7 +82,6 @@ function trackDismissableElementImpl(node, options) {
     }
   }
   function exclude(target) {
-    if (!node) return false;
     const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
     const _containers = Array.isArray(containers) ? containers : [containers];
     const persistentElements = options.persistentElements?.map((fn) => fn()).filter(import_dom_query.isHTMLElement);
@@ -96,49 +89,36 @@ function trackDismissableElementImpl(node, options) {
     return _containers.some((node2) => (0, import_dom_query.contains)(node2, target)) || import_layer_stack.layerStack.isInNestedLayer(node, target);
   }
   const cleanups = [
-    pointerBlocking ? (0, import_pointer_event_outside.disablePointerEventsOutside)(node, options.persistentElements) : void 0,
+    (0, import_layer_stack.isPointerBlocking)(layer) ? (0, import_pointer_event_outside.disablePointerEventsOutside)(node, options.persistentElements) : void 0,
     (0, import_escape_keydown.trackEscapeKeydown)(node, onEscapeKeyDown),
     (0, import_interact_outside.trackInteractOutside)(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer })
   ];
-  return () => {
-    import_layer_stack.layerStack.remove(node);
+  return (reason) => {
+    import_layer_stack.layerStack.remove(node, { reattach: reason === "restart" });
     cleanups.forEach((fn) => fn?.());
   };
 }
 function trackDismissableElement(nodeOrFn, options) {
-  const { defer } = options;
-  const func = defer ? import_dom_query.raf : (v) => v();
-  const cleanups = [];
-  cleanups.push(
-    func(() => {
-      const node = (0, import_utils.isFunction)(nodeOrFn) ? nodeOrFn() : nodeOrFn;
-      cleanups.push(trackDismissableElementImpl(node, options));
-    })
-  );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
+  const { warnOnMissingNode = true } = options;
+  return (0, import_dom_query.whenNode)(nodeOrFn, (node) => trackDismissableElementImpl(node, options), {
+    defer: options.defer,
+    onMissing: warnOnMissingNode ? () => (0, import_utils.warn)("[@zag-js/dismissable] node is `null` or `undefined`") : void 0
+  });
 }
 function trackDismissableBranch(nodeOrFn, options = {}) {
-  const { defer } = options;
-  const func = defer ? import_dom_query.raf : (v) => v();
-  const cleanups = [];
-  cleanups.push(
-    func(() => {
-      const node = (0, import_utils.isFunction)(nodeOrFn) ? nodeOrFn() : nodeOrFn;
-      if (!node) {
-        (0, import_utils.warn)("[@zag-js/dismissable] branch node is `null` or `undefined`");
-        return;
-      }
+  return (0, import_dom_query.whenNode)(
+    nodeOrFn,
+    (node) => {
       import_layer_stack.layerStack.addBranch(node);
-      cleanups.push(() => {
+      return () => {
         import_layer_stack.layerStack.removeBranch(node);
-      });
-    })
+      };
+    },
+    {
+      defer: options.defer,
+      onMissing: () => (0, import_utils.warn)("[@zag-js/dismissable] branch node is `null` or `undefined`")
+    }
   );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/dismissable-layer.mjs

@@ -1,21 +1,16 @@
 // src/dismissable-layer.ts
-import { contains, getEventTarget, isHTMLElement, raf } from "@zag-js/dom-query";
+import { contains, getEventTarget, isHTMLElement, whenNode } from "@zag-js/dom-query";
 import {
   trackInteractOutside
 } from "@zag-js/interact-outside";
-import { isFunction, warn } from "@zag-js/utils";
+import { warn } from "@zag-js/utils";
 import { trackEscapeKeydown } from "./escape-keydown.mjs";
-import { layerStack } from "./layer-stack.mjs";
+import {
+  isPointerBlocking,
+  layerStack
+} from "./layer-stack.mjs";
 import { disablePointerEventsOutside } from "./pointer-event-outside.mjs";
 function trackDismissableElementImpl(node, options) {
-  const { warnOnMissingNode = true } = options;
-  if (warnOnMissingNode && !node) {
-    warn("[@zag-js/dismissable] node is `null` or `undefined`");
-    return;
-  }
-  if (!node) {
-    return;
-  }
   const {
     onDismiss,
     onRequestDismiss,
@@ -23,12 +18,14 @@ function trackDismissableElementImpl(node, options) {
     exclude: excludeContainers,
     debug,
     type = "dialog",
+    group,
     onLayerChange
   } = options;
   const layer = {
     dismiss: onDismiss,
     node,
     type,
+    group,
     pointerBlocking,
     requestDismiss: onRequestDismiss,
     onLayerChange
@@ -65,7 +62,6 @@ function trackDismissableElementImpl(node, options) {
     }
   }
   function exclude(target) {
-    if (!node) return false;
     const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
     const _containers = Array.isArray(containers) ? containers : [containers];
     const persistentElements = options.persistentElements?.map((fn) => fn()).filter(isHTMLElement);
@@ -73,49 +69,36 @@ function trackDismissableElementImpl(node, options) {
     return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
   }
   const cleanups = [
-    pointerBlocking ? disablePointerEventsOutside(node, options.persistentElements) : void 0,
+    isPointerBlocking(layer) ? disablePointerEventsOutside(node, options.persistentElements) : void 0,
     trackEscapeKeydown(node, onEscapeKeyDown),
     trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer })
   ];
-  return () => {
-    layerStack.remove(node);
+  return (reason) => {
+    layerStack.remove(node, { reattach: reason === "restart" });
     cleanups.forEach((fn) => fn?.());
   };
 }
 function trackDismissableElement(nodeOrFn, options) {
-  const { defer } = options;
-  const func = defer ? raf : (v) => v();
-  const cleanups = [];
-  cleanups.push(
-    func(() => {
-      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn;
-      cleanups.push(trackDismissableElementImpl(node, options));
-    })
-  );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
+  const { warnOnMissingNode = true } = options;
+  return whenNode(nodeOrFn, (node) => trackDismissableElementImpl(node, options), {
+    defer: options.defer,
+    onMissing: warnOnMissingNode ? () => warn("[@zag-js/dismissable] node is `null` or `undefined`") : void 0
+  });
 }
 function trackDismissableBranch(nodeOrFn, options = {}) {
-  const { defer } = options;
-  const func = defer ? raf : (v) => v();
-  const cleanups = [];
-  cleanups.push(
-    func(() => {
-      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn;
-      if (!node) {
-        warn("[@zag-js/dismissable] branch node is `null` or `undefined`");
-        return;
-      }
+  return whenNode(
+    nodeOrFn,
+    (node) => {
       layerStack.addBranch(node);
-      cleanups.push(() => {
+      return () => {
         layerStack.removeBranch(node);
-      });
-    })
+      };
+    },
+    {
+      defer: options.defer,
+      onMissing: () => warn("[@zag-js/dismissable] branch node is `null` or `undefined`")
+    }
   );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
 }
 export {
   trackDismissableBranch,

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -3,6 +3,10 @@ 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))
@@ -16,11 +20,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // src/index.ts
 var index_exports = {};
+__export(index_exports, {
+  syncPointerEvents: () => import_pointer_event_outside.syncPointerEvents
+});
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("./dismissable-layer.js"), module.exports);
 __reExport(index_exports, require("./layer-props.js"), module.exports);
+var import_pointer_event_outside = require("./pointer-event-outside.js");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  syncPointerEvents,
   ...require("./dismissable-layer.js"),
   ...require("./layer-props.js")
 });

package/dist/index.mjs

@@ -1,3 +1,7 @@
 // src/index.ts
 export * from "./dismissable-layer.mjs";
 export * from "./layer-props.mjs";
+import { syncPointerEvents } from "./pointer-event-outside.mjs";
+export {
+  syncPointerEvents
+};

package/dist/layer-props.js

@@ -26,18 +26,19 @@ __export(layer_props_exports, {
 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
+    "data-nested": layer?.active && layer.nested ? layer.type : void 0,
+    "data-has-nested": layer?.active && layer.hasNested ? layer.type : void 0
   };
 }
 function getDismissableLayerStyle(layer, options = {}) {
+  const active = layer?.active === true;
   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
+    "--layer-index": active ? `${layer.index}` : void 0,
+    "--nested-layer-count": active ? `${layer.nestedCount}` : void 0,
+    "--z-index": options.zIndex && active ? "var(--layer-index)" : void 0
   };
   if (options.pointerEvents) {
-    style.pointerEvents = layer?.active ? layer.blocked ? "none" : "auto" : void 0;
+    style.pointerEvents = active ? layer.blocked ? "none" : "auto" : void 0;
   }
   return style;
 }

package/dist/layer-props.mjs

@@ -1,18 +1,19 @@
 // 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
+    "data-nested": layer?.active && layer.nested ? layer.type : void 0,
+    "data-has-nested": layer?.active && layer.hasNested ? layer.type : void 0
   };
 }
 function getDismissableLayerStyle(layer, options = {}) {
+  const active = layer?.active === true;
   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
+    "--layer-index": active ? `${layer.index}` : void 0,
+    "--nested-layer-count": active ? `${layer.nestedCount}` : void 0,
+    "--z-index": options.zIndex && active ? "var(--layer-index)" : void 0
   };
   if (options.pointerEvents) {
-    style.pointerEvents = layer?.active ? layer.blocked ? "none" : "auto" : void 0;
+    style.pointerEvents = active ? layer.blocked ? "none" : "auto" : void 0;
   }
   return style;
 }

package/dist/layer-stack.d.mts

@@ -16,24 +16,43 @@ interface LayerSnapshot {
     blocked: boolean;
 }
 interface Layer {
+    /** Assigned on first registration. */
+    id?: string | undefined;
+    /** The layer this one opened inside. Captured once and kept across re-registration. */
+    parentId?: string | undefined;
+    /** Layers sharing a group are peers, not ancestors. Used by menubar menus. */
+    group?: string | undefined;
     dismiss: VoidFunction;
     node: HTMLElement;
     type: LayerType;
-    pointerBlocking?: boolean | undefined;
+    pointerBlocking?: boolean | (() => boolean) | undefined;
     requestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
     onLayerChange?: ((snapshot: LayerSnapshot) => void) | undefined;
     snapshot?: LayerSnapshot | undefined;
 }
+/** Resolved on read, so a layer's blocking can change without re-registering it. */
+declare function isPointerBlocking(layer: Pick<Layer, "pointerBlocking">): boolean;
 declare const layerStack: {
     layers: Layer[];
     branches: HTMLElement[];
     recentlyRemoved: Set<HTMLElement>;
+    pendingReattach: Map<HTMLElement, {
+        id: string | undefined;
+        parentId: string | undefined;
+        index: number;
+    }>;
     count(): number;
     pointerBlockingLayers(): Layer[];
     topMostPointerBlockingLayer(): Layer | undefined;
     hasPointerBlockingLayer(): boolean;
     isBelowPointerBlockingLayer(node: HTMLElement): boolean;
     isTopMost(node: HTMLElement | null): boolean;
+    layerFor(node: HTMLElement | null): Layer | undefined;
+    /** The most recently added layer in the same group, if any. */
+    peerFor(group: string): Layer | undefined;
+    isDescendantOf(layer: Layer, ancestorId: string | undefined): boolean;
+    depthOf(layer: Layer): number;
+    /** Descendants, shallowest first, so a cascade dismisses parents before their own children. */
     getNestedLayers(node: HTMLElement): Layer[];
     getLayersByType(type: LayerType): Layer[];
     getNestedLayersByType(node: HTMLElement, type: LayerType): Layer[];
@@ -43,7 +62,9 @@ declare const layerStack: {
     isInBranch(target: HTMLElement | EventTarget | null): boolean;
     add(layer: Layer): void;
     addBranch(node: HTMLElement): void;
-    remove(node: HTMLElement): void;
+    remove(node: HTMLElement, options?: {
+        reattach?: boolean;
+    }): void;
     removeBranch(node: HTMLElement): void;
     syncLayers(): void;
     indexOf(node: HTMLElement | undefined): number;
@@ -51,4 +72,4 @@ declare const layerStack: {
     clear(): void;
 };
 
-export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerSnapshot, type LayerType, layerStack };
+export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerSnapshot, type LayerType, isPointerBlocking, layerStack };

package/dist/layer-stack.d.ts

@@ -16,24 +16,43 @@ interface LayerSnapshot {
     blocked: boolean;
 }
 interface Layer {
+    /** Assigned on first registration. */
+    id?: string | undefined;
+    /** The layer this one opened inside. Captured once and kept across re-registration. */
+    parentId?: string | undefined;
+    /** Layers sharing a group are peers, not ancestors. Used by menubar menus. */
+    group?: string | undefined;
     dismiss: VoidFunction;
     node: HTMLElement;
     type: LayerType;
-    pointerBlocking?: boolean | undefined;
+    pointerBlocking?: boolean | (() => boolean) | undefined;
     requestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
     onLayerChange?: ((snapshot: LayerSnapshot) => void) | undefined;
     snapshot?: LayerSnapshot | undefined;
 }
+/** Resolved on read, so a layer's blocking can change without re-registering it. */
+declare function isPointerBlocking(layer: Pick<Layer, "pointerBlocking">): boolean;
 declare const layerStack: {
     layers: Layer[];
     branches: HTMLElement[];
     recentlyRemoved: Set<HTMLElement>;
+    pendingReattach: Map<HTMLElement, {
+        id: string | undefined;
+        parentId: string | undefined;
+        index: number;
+    }>;
     count(): number;
     pointerBlockingLayers(): Layer[];
     topMostPointerBlockingLayer(): Layer | undefined;
     hasPointerBlockingLayer(): boolean;
     isBelowPointerBlockingLayer(node: HTMLElement): boolean;
     isTopMost(node: HTMLElement | null): boolean;
+    layerFor(node: HTMLElement | null): Layer | undefined;
+    /** The most recently added layer in the same group, if any. */
+    peerFor(group: string): Layer | undefined;
+    isDescendantOf(layer: Layer, ancestorId: string | undefined): boolean;
+    depthOf(layer: Layer): number;
+    /** Descendants, shallowest first, so a cascade dismisses parents before their own children. */
     getNestedLayers(node: HTMLElement): Layer[];
     getLayersByType(type: LayerType): Layer[];
     getNestedLayersByType(node: HTMLElement, type: LayerType): Layer[];
@@ -43,7 +62,9 @@ declare const layerStack: {
     isInBranch(target: HTMLElement | EventTarget | null): boolean;
     add(layer: Layer): void;
     addBranch(node: HTMLElement): void;
-    remove(node: HTMLElement): void;
+    remove(node: HTMLElement, options?: {
+        reattach?: boolean;
+    }): void;
     removeBranch(node: HTMLElement): void;
     syncLayers(): void;
     indexOf(node: HTMLElement | undefined): number;
@@ -51,4 +72,4 @@ declare const layerStack: {
     clear(): void;
 };
 
-export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerSnapshot, type LayerType, layerStack };
+export { type Layer, type LayerDismissEvent, type LayerDismissEventDetail, type LayerSnapshot, type LayerType, isPointerBlocking, layerStack };

package/dist/layer-stack.js

@@ -20,21 +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];
@@ -51,21 +58,61 @@ var layerStack = {
     const layer = this.layers[this.count() - 1];
     return layer?.node === node;
   },
+  layerFor(node) {
+    return this.layers.find((layer) => layer.node === node);
+  },
+  /** The most recently added layer in the same group, if any. */
+  peerFor(group) {
+    for (let i = this.count() - 1; i >= 0; i--) {
+      if (this.layers[i].group === group) return this.layers[i];
+    }
+    return void 0;
+  },
+  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;
@@ -81,29 +128,48 @@ 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}`);
+      const peer = layer.group ? this.peerFor(layer.group) : void 0;
+      layer.parentId = peer ? peer.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];
+    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.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));
-    }
-    this.layers.splice(index, 1);
     this.syncLayers();
   },
   removeBranch(node) {
@@ -167,5 +233,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

@@ -2,15 +2,21 @@
 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];
@@ -27,21 +33,61 @@ var layerStack = {
     const layer = this.layers[this.count() - 1];
     return layer?.node === node;
   },
+  layerFor(node) {
+    return this.layers.find((layer) => layer.node === node);
+  },
+  /** The most recently added layer in the same group, if any. */
+  peerFor(group) {
+    for (let i = this.count() - 1; i >= 0; i--) {
+      if (this.layers[i].group === group) return this.layers[i];
+    }
+    return void 0;
+  },
+  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;
@@ -57,29 +103,48 @@ 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}`);
+      const peer = layer.group ? this.peerFor(layer.group) : void 0;
+      layer.parentId = peer ? peer.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];
+    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.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));
-    }
-    this.layers.splice(index, 1);
     this.syncLayers();
   },
   removeBranch(node) {
@@ -142,5 +207,6 @@ function addListenerOnce(el, type, callback) {
   el.addEventListener(type, callback, { once: true });
 }
 export {
+  isPointerBlocking,
   layerStack
 };

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

@@ -1,3 +1,8 @@
+/**
+ * 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 { disablePointerEventsOutside };
+export { disablePointerEventsOutside, syncPointerEvents };

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

@@ -1,3 +1,8 @@
+/**
+ * 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 { disablePointerEventsOutside };
+export { disablePointerEventsOutside, syncPointerEvents };

package/dist/pointer-event-outside.js

@@ -20,24 +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, {
-  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 = /* @__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.set(doc.body, doc.body.style.pointerEvents);
+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(() => {
-      const body = doc.body;
-      if (!body) return;
+      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 syncPointerEvents(node) {
+  syncBodyPointerEvents((0, import_dom_query.getDocument)(node));
+}
+function disablePointerEventsOutside(node, persistentElements) {
+  const doc = (0, import_dom_query.getDocument)(node);
+  const cleanups = [];
+  syncBodyPointerEvents(doc);
   persistentElements?.forEach((el) => {
     const [promise, abort] = (0, import_dom_query.waitForElement)(
       () => {
@@ -50,22 +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;
-      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");
-    });
+    syncBodyPointerEvents(doc);
     cleanups.forEach((fn) => fn());
   };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  disablePointerEventsOutside
+  disablePointerEventsOutside,
+  syncPointerEvents
 });

package/dist/pointer-event-outside.mjs

@@ -2,18 +2,38 @@
 import { getDocument, isHTMLElement, setStyle, waitForElement } from "@zag-js/dom-query";
 import { layerStack } from "./layer-stack.mjs";
 var originalBodyPointerEvents = /* @__PURE__ */ new WeakMap();
-function disablePointerEventsOutside(node, persistentElements) {
-  const doc = getDocument(node);
-  const cleanups = [];
-  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
-    originalBodyPointerEvents.set(doc.body, doc.body.style.pointerEvents);
+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(() => {
-      const body = doc.body;
-      if (!body) return;
+      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 syncPointerEvents(node) {
+  syncBodyPointerEvents(getDocument(node));
+}
+function disablePointerEventsOutside(node, persistentElements) {
+  const doc = getDocument(node);
+  const cleanups = [];
+  syncBodyPointerEvents(doc);
   persistentElements?.forEach((el) => {
     const [promise, abort] = waitForElement(
       () => {
@@ -26,21 +46,11 @@ function disablePointerEventsOutside(node, persistentElements) {
     cleanups.push(abort);
   });
   return () => {
-    if (layerStack.hasPointerBlockingLayer()) return;
-    queueMicrotask(() => {
-      const body = doc.body;
-      if (!body) 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");
-    });
+    syncBodyPointerEvents(doc);
     cleanups.forEach((fn) => fn());
   };
 }
 export {
-  disablePointerEventsOutside
+  disablePointerEventsOutside,
+  syncPointerEvents
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/dismissable",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.3",
   "description": "Dismissable layer utilities for the DOM",
   "keywords": [
     "js",
@@ -26,9 +26,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@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"
+    "@zag-js/interact-outside": "2.0.0-next.3",
+    "@zag-js/dom-query": "2.0.0-next.3",
+    "@zag-js/utils": "2.0.0-next.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -56,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"
   }