@zag-js/dismissable 0.49.0 → 0.51.0

package/dist/index.d.mts

@@ -11,7 +11,15 @@ interface DismissableElementHandlers extends InteractOutsideHandlers {
      */
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
 }
-interface DismissableElementOptions extends DismissableElementHandlers {
+interface PersistentElementOptions {
+    /**
+     * Returns the persistent elements that:
+     * - should not have pointer-events disabled
+     * - should not trigger the dismiss event
+     */
+    persistentElements?: Array<() => Element | null>;
+}
+interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
     /**
      * Whether to log debug information
      */
@@ -38,4 +46,4 @@ declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
     defer?: boolean;
 }): () => void;
 
-export { type DismissableElementHandlers, type DismissableElementOptions, trackDismissableBranch, trackDismissableElement };
+export { type DismissableElementHandlers, type DismissableElementOptions, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };

package/dist/index.d.ts

@@ -11,7 +11,15 @@ interface DismissableElementHandlers extends InteractOutsideHandlers {
      */
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
 }
-interface DismissableElementOptions extends DismissableElementHandlers {
+interface PersistentElementOptions {
+    /**
+     * Returns the persistent elements that:
+     * - should not have pointer-events disabled
+     * - should not trigger the dismiss event
+     */
+    persistentElements?: Array<() => Element | null>;
+}
+interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
     /**
      * Whether to log debug information
      */
@@ -38,4 +46,4 @@ declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
     defer?: boolean;
 }): () => void;
 
-export { type DismissableElementHandlers, type DismissableElementOptions, trackDismissableBranch, trackDismissableElement };
+export { type DismissableElementHandlers, type DismissableElementOptions, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };

package/dist/index.js

@@ -1,246 +1,2 @@
-"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/index.ts
-var src_exports = {};
-__export(src_exports, {
-  trackDismissableBranch: () => trackDismissableBranch,
-  trackDismissableElement: () => trackDismissableElement
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/dismissable-layer.ts
-var import_dom_query4 = require("@zag-js/dom-query");
-var import_interact_outside = require("@zag-js/interact-outside");
-var import_utils = require("@zag-js/utils");
-
-// src/escape-keydown.ts
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query = require("@zag-js/dom-query");
-function trackEscapeKeydown(node, fn) {
-  const handleKeyDown = (event) => {
-    if (event.key === "Escape")
-      fn?.(event);
-  };
-  return (0, import_dom_event.addDomEvent)((0, import_dom_query.getDocument)(node), "keydown", handleKeyDown, { capture: true });
-}
-
-// src/layer-stack.ts
-var import_dom_query2 = require("@zag-js/dom-query");
-var layerStack = {
-  layers: [],
-  branches: [],
-  count() {
-    return this.layers.length;
-  },
-  pointerBlockingLayers() {
-    return this.layers.filter((layer) => layer.pointerBlocking);
-  },
-  topMostPointerBlockingLayer() {
-    return [...this.pointerBlockingLayers()].slice(-1)[0];
-  },
-  hasPointerBlockingLayer() {
-    return this.pointerBlockingLayers().length > 0;
-  },
-  isBelowPointerBlockingLayer(node) {
-    const index = this.indexOf(node);
-    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
-    return index < highestBlockingIndex;
-  },
-  isTopMost(node) {
-    const layer = this.layers[this.count() - 1];
-    return layer?.node === node;
-  },
-  getNestedLayers(node) {
-    return Array.from(this.layers).slice(this.indexOf(node) + 1);
-  },
-  isInNestedLayer(node, target) {
-    return this.getNestedLayers(node).some((layer) => (0, import_dom_query2.contains)(layer.node, target));
-  },
-  isInBranch(target) {
-    return Array.from(this.branches).some((branch) => (0, import_dom_query2.contains)(branch, target));
-  },
-  add(layer) {
-    const num = this.layers.push(layer);
-    layer.node.style.setProperty("--layer-index", `${num}`);
-  },
-  addBranch(node) {
-    this.branches.push(node);
-  },
-  remove(node) {
-    const index = this.indexOf(node);
-    if (index < 0)
-      return;
-    if (index < this.count() - 1) {
-      const _layers = this.getNestedLayers(node);
-      _layers.forEach((layer) => layer.dismiss());
-    }
-    this.layers.splice(index, 1);
-    node.style.removeProperty("--layer-index");
-  },
-  removeBranch(node) {
-    const index = this.branches.indexOf(node);
-    if (index >= 0)
-      this.branches.splice(index, 1);
-  },
-  indexOf(node) {
-    return this.layers.findIndex((layer) => layer.node === node);
-  },
-  dismiss(node) {
-    this.layers[this.indexOf(node)]?.dismiss();
-  },
-  clear() {
-    this.remove(this.layers[0].node);
-  }
-};
-
-// src/pointer-event-outside.ts
-var import_dom_query3 = require("@zag-js/dom-query");
-var originalBodyPointerEvents;
-function assignPointerEventToLayers() {
-  layerStack.layers.forEach(({ node }) => {
-    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
-  });
-}
-function clearPointerEvent(node) {
-  node.style.pointerEvents = "";
-}
-var DATA_ATTR = "data-inert";
-function disablePointerEventsOutside(node) {
-  const doc = (0, import_dom_query3.getDocument)(node);
-  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
-    originalBodyPointerEvents = document.body.style.pointerEvents;
-    doc.body.style.pointerEvents = "none";
-    doc.body.setAttribute(DATA_ATTR, "");
-  }
-  return () => {
-    if (layerStack.hasPointerBlockingLayer())
-      return;
-    doc.body.style.pointerEvents = originalBodyPointerEvents;
-    doc.body.removeAttribute(DATA_ATTR);
-    if (doc.body.style.length === 0)
-      doc.body.removeAttribute("style");
-  };
-}
-
-// src/dismissable-layer.ts
-function trackDismissableElementImpl(node, options) {
-  if (!node) {
-    (0, import_utils.warn)("[@zag-js/dismissable] node is `null` or `undefined`");
-    return;
-  }
-  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
-  const layer = { dismiss: onDismiss, node, pointerBlocking };
-  layerStack.add(layer);
-  assignPointerEventToLayers();
-  function onPointerDownOutside(event) {
-    const target = (0, import_dom_query4.getEventTarget)(event.detail.originalEvent);
-    if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
-      return;
-    options.onPointerDownOutside?.(event);
-    options.onInteractOutside?.(event);
-    if (event.defaultPrevented)
-      return;
-    if (debug) {
-      console.log("onPointerDownOutside:", event.detail.originalEvent);
-    }
-    onDismiss?.();
-  }
-  function onFocusOutside(event) {
-    const target = (0, import_dom_query4.getEventTarget)(event.detail.originalEvent);
-    if (layerStack.isInBranch(target))
-      return;
-    options.onFocusOutside?.(event);
-    options.onInteractOutside?.(event);
-    if (event.defaultPrevented)
-      return;
-    if (debug) {
-      console.log("onFocusOutside:", event.detail.originalEvent);
-    }
-    onDismiss?.();
-  }
-  function onEscapeKeyDown(event) {
-    if (!layerStack.isTopMost(node))
-      return;
-    options.onEscapeKeyDown?.(event);
-    if (!event.defaultPrevented && onDismiss) {
-      event.preventDefault();
-      onDismiss();
-    }
-  }
-  function exclude(target) {
-    if (!node)
-      return false;
-    const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
-    const _containers = Array.isArray(containers) ? containers : [containers];
-    return _containers.some((node2) => (0, import_dom_query4.contains)(node2, target)) || layerStack.isInNestedLayer(node, target);
-  }
-  const cleanups = [
-    pointerBlocking ? disablePointerEventsOutside(node) : void 0,
-    trackEscapeKeydown(node, onEscapeKeyDown),
-    (0, import_interact_outside.trackInteractOutside)(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer })
-  ];
-  return () => {
-    layerStack.remove(node);
-    assignPointerEventToLayers();
-    clearPointerEvent(node);
-    cleanups.forEach((fn) => fn?.());
-  };
-}
-function trackDismissableElement(nodeOrFn, options) {
-  const { defer } = options;
-  const func = defer ? import_dom_query4.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?.());
-  };
-}
-function trackDismissableBranch(nodeOrFn, options = {}) {
-  const { defer } = options;
-  const func = defer ? import_dom_query4.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;
-      }
-      layerStack.addBranch(node);
-      cleanups.push(() => {
-        layerStack.removeBranch(node);
-      });
-    })
-  );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  trackDismissableBranch,
-  trackDismissableElement
-});
+"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);var src_exports={};__export(src_exports,{trackDismissableBranch:()=>trackDismissableBranch,trackDismissableElement:()=>trackDismissableElement});module.exports=__toCommonJS(src_exports);var import_dom_query4=require("@zag-js/dom-query");var import_interact_outside=require("@zag-js/interact-outside");var import_utils=require("@zag-js/utils");var import_dom_event=require("@zag-js/dom-event");var import_dom_query=require("@zag-js/dom-query");function trackEscapeKeydown(node,fn){const handleKeyDown=event=>{if(event.key!=="Escape")return;if(event.isComposing)return;fn?.(event)};return(0,import_dom_event.addDomEvent)((0,import_dom_query.getDocument)(node),"keydown",handleKeyDown,{capture:true})}var import_dom_query2=require("@zag-js/dom-query");var layerStack={layers:[],branches:[],count(){return this.layers.length},pointerBlockingLayers(){return this.layers.filter(layer=>layer.pointerBlocking)},topMostPointerBlockingLayer(){return[...this.pointerBlockingLayers()].slice(-1)[0]},hasPointerBlockingLayer(){return this.pointerBlockingLayers().length>0},isBelowPointerBlockingLayer(node){const index=this.indexOf(node);const highestBlockingIndex=this.topMostPointerBlockingLayer()?this.indexOf(this.topMostPointerBlockingLayer()?.node):-1;return index<highestBlockingIndex},isTopMost(node){const layer=this.layers[this.count()-1];return layer?.node===node},getNestedLayers(node){return Array.from(this.layers).slice(this.indexOf(node)+1)},isInNestedLayer(node,target){return this.getNestedLayers(node).some(layer=>(0,import_dom_query2.contains)(layer.node,target))},isInBranch(target){return Array.from(this.branches).some(branch=>(0,import_dom_query2.contains)(branch,target))},add(layer){const num=this.layers.push(layer);layer.node.style.setProperty("--layer-index",`${num}`)},addBranch(node){this.branches.push(node)},remove(node){const index=this.indexOf(node);if(index<0)return;if(index<this.count()-1){const _layers=this.getNestedLayers(node);_layers.forEach(layer=>layer.dismiss())}this.layers.splice(index,1);node.style.removeProperty("--layer-index")},removeBranch(node){const index=this.branches.indexOf(node);if(index>=0)this.branches.splice(index,1)},indexOf(node){return this.layers.findIndex(layer=>layer.node===node)},dismiss(node){this.layers[this.indexOf(node)]?.dismiss()},clear(){this.remove(this.layers[0].node)}};var import_dom_query3=require("@zag-js/dom-query");var originalBodyPointerEvents;function assignPointerEventToLayers(){layerStack.layers.forEach(({node})=>{node.style.pointerEvents=layerStack.isBelowPointerBlockingLayer(node)?"none":"auto"})}function clearPointerEvent(node){node.style.pointerEvents=""}function disablePointerEventsOutside(node,peristentElements){const doc=(0,import_dom_query3.getDocument)(node);const cleanups=[];if(layerStack.hasPointerBlockingLayer()&&!doc.body.hasAttribute("data-inert")){originalBodyPointerEvents=document.body.style.pointerEvents;queueMicrotask(()=>{doc.body.style.pointerEvents="none";doc.body.setAttribute("data-inert","")})}if(peristentElements){const persistedCleanup=(0,import_dom_query3.waitForElements)(peristentElements,el=>{cleanups.push((0,import_dom_query3.setStyle)(el,{pointerEvents:"auto"}))});cleanups.push(persistedCleanup)}return()=>{if(layerStack.hasPointerBlockingLayer())return;queueMicrotask(()=>{doc.body.style.pointerEvents=originalBodyPointerEvents;doc.body.removeAttribute("data-inert");if(doc.body.style.length===0)doc.body.removeAttribute("style")});cleanups.forEach(fn=>fn())}}function trackDismissableElementImpl(node,options){if(!node){(0,import_utils.warn)("[@zag-js/dismissable] node is `null` or `undefined`");return}const{onDismiss,pointerBlocking,exclude:excludeContainers,debug}=options;const layer={dismiss:onDismiss,node,pointerBlocking};layerStack.add(layer);assignPointerEventToLayers();function onPointerDownOutside(event){const target=(0,import_dom_query4.getEventTarget)(event.detail.originalEvent);if(layerStack.isBelowPointerBlockingLayer(node)||layerStack.isInBranch(target))return;options.onPointerDownOutside?.(event);options.onInteractOutside?.(event);if(event.defaultPrevented)return;if(debug){console.log("onPointerDownOutside:",event.detail.originalEvent)}onDismiss?.()}function onFocusOutside(event){const target=(0,import_dom_query4.getEventTarget)(event.detail.originalEvent);if(layerStack.isInBranch(target))return;options.onFocusOutside?.(event);options.onInteractOutside?.(event);if(event.defaultPrevented)return;if(debug){console.log("onFocusOutside:",event.detail.originalEvent)}onDismiss?.()}function onEscapeKeyDown(event){if(!layerStack.isTopMost(node))return;options.onEscapeKeyDown?.(event);if(!event.defaultPrevented&&onDismiss){event.preventDefault();onDismiss()}}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_query4.isHTMLElement);if(persistentElements)_containers.push(...persistentElements);return _containers.some(node2=>(0,import_dom_query4.contains)(node2,target))||layerStack.isInNestedLayer(node,target)}const cleanups=[pointerBlocking?disablePointerEventsOutside(node,options.persistentElements):void 0,trackEscapeKeydown(node,onEscapeKeyDown),(0,import_interact_outside.trackInteractOutside)(node,{exclude,onFocusOutside,onPointerDownOutside,defer:options.defer})];return()=>{layerStack.remove(node);assignPointerEventToLayers();clearPointerEvent(node);cleanups.forEach(fn=>fn?.())}}function trackDismissableElement(nodeOrFn,options){const{defer}=options;const func=defer?import_dom_query4.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?.())}}function trackDismissableBranch(nodeOrFn,options={}){const{defer}=options;const func=defer?import_dom_query4.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}layerStack.addBranch(node);cleanups.push(()=>{layerStack.removeBranch(node)})}));return()=>{cleanups.forEach(fn=>fn?.())}}0&&(module.exports={trackDismissableBranch,trackDismissableElement});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/dismissable-layer.ts","../src/escape-keydown.ts","../src/layer-stack.ts","../src/pointer-event-outside.ts"],"sourcesContent":["export * from \"./dismissable-layer\"\nexport type {\n  InteractOutsideEvent,\n  PointerDownOutsideEvent,\n  FocusOutsideEvent,\n  InteractOutsideHandlers,\n} from \"@zag-js/interact-outside\"\n","import { contains, getEventTarget, raf } from \"@zag-js/dom-query\"\nimport {\n  trackInteractOutside,\n  type FocusOutsideEvent,\n  type InteractOutsideHandlers,\n  type PointerDownOutsideEvent,\n} from \"@zag-js/interact-outside\"\nimport { isFunction, warn, type MaybeFunction } from \"@zag-js/utils\"\nimport { trackEscapeKeydown } from \"./escape-keydown\"\nimport { layerStack, type Layer } from \"./layer-stack\"\nimport { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside } from \"./pointer-event-outside\"\n\ntype MaybeElement = HTMLElement | null\ntype Container = MaybeElement | Array<MaybeElement>\ntype NodeOrFn = MaybeFunction<MaybeElement>\n\nexport interface DismissableElementHandlers extends InteractOutsideHandlers {\n  /**\n   * Function called when the escape key is pressed\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n}\n\nexport interface DismissableElementOptions extends DismissableElementHandlers {\n  /**\n   * Whether to log debug information\n   */\n  debug?: boolean\n  /**\n   * Whether to block pointer events outside the dismissable element\n   */\n  pointerBlocking?: boolean\n  /**\n   * Function called when the dismissable element is dismissed\n   */\n  onDismiss: VoidFunction\n  /**\n   * Exclude containers from the interact outside event\n   */\n  exclude?: MaybeFunction<Container>\n  /**\n   * Defer the interact outside event to the next frame\n   */\n  defer?: boolean\n}\n\nfunction trackDismissableElementImpl(node: MaybeElement, options: DismissableElementOptions) {\n  if (!node) {\n    warn(\"[@zag-js/dismissable] node is `null` or `undefined`\")\n    return\n  }\n\n  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options\n\n  const layer: Layer = { dismiss: onDismiss, node, pointerBlocking }\n\n  layerStack.add(layer)\n  assignPointerEventToLayers()\n\n  function onPointerDownOutside(event: PointerDownOutsideEvent) {\n    const target = getEventTarget(event.detail.originalEvent)\n    if (layerStack.isBelowPointerBlockingLayer(node!) || layerStack.isInBranch(target)) return\n    options.onPointerDownOutside?.(event)\n    options.onInteractOutside?.(event)\n    if (event.defaultPrevented) return\n    if (debug) {\n      console.log(\"onPointerDownOutside:\", event.detail.originalEvent)\n    }\n    onDismiss?.()\n  }\n\n  function onFocusOutside(event: FocusOutsideEvent) {\n    const target = getEventTarget(event.detail.originalEvent)\n    if (layerStack.isInBranch(target)) return\n    options.onFocusOutside?.(event)\n    options.onInteractOutside?.(event)\n    if (event.defaultPrevented) return\n    if (debug) {\n      console.log(\"onFocusOutside:\", event.detail.originalEvent)\n    }\n    onDismiss?.()\n  }\n\n  function onEscapeKeyDown(event: KeyboardEvent) {\n    if (!layerStack.isTopMost(node!)) return\n    options.onEscapeKeyDown?.(event)\n    if (!event.defaultPrevented && onDismiss) {\n      event.preventDefault()\n      onDismiss()\n    }\n  }\n\n  function exclude(target: Element) {\n    if (!node) return false\n    const containers = typeof excludeContainers === \"function\" ? excludeContainers() : excludeContainers\n    const _containers = Array.isArray(containers) ? containers : [containers]\n    return _containers.some((node) => contains(node, target)) || layerStack.isInNestedLayer(node, target)\n  }\n\n  const cleanups = [\n    pointerBlocking ? disablePointerEventsOutside(node) : undefined,\n    trackEscapeKeydown(node, onEscapeKeyDown),\n    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer }),\n  ]\n\n  return () => {\n    layerStack.remove(node!)\n    // re-assign pointer event to remaining layers\n    assignPointerEventToLayers()\n    // remove pointer event from removed layer\n    clearPointerEvent(node!)\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n\nexport function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn\n      cleanups.push(trackDismissableElementImpl(node, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n\nexport function trackDismissableBranch(nodeOrFn: NodeOrFn, options: { defer?: boolean } = {}) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n\n  cleanups.push(\n    func(() => {\n      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn\n      if (!node) {\n        warn(\"[@zag-js/dismissable] branch node is `null` or `undefined`\")\n        return\n      }\n      layerStack.addBranch(node)\n      cleanups.push(() => {\n        layerStack.removeBranch(node)\n      })\n    }),\n  )\n\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { addDomEvent } from \"@zag-js/dom-event\"\nimport { getDocument } from \"@zag-js/dom-query\"\n\nexport function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void) {\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") fn?.(event)\n  }\n  return addDomEvent(getDocument(node), \"keydown\", handleKeyDown, { capture: true })\n}\n","import { contains } from \"@zag-js/dom-query\"\n\nexport interface Layer {\n  dismiss: VoidFunction\n  node: HTMLElement\n  pointerBlocking?: boolean\n}\n\nexport const layerStack = {\n  layers: [] as Layer[],\n  branches: [] as HTMLElement[],\n  count(): number {\n    return this.layers.length\n  },\n  pointerBlockingLayers(): Layer[] {\n    return this.layers.filter((layer) => layer.pointerBlocking)\n  },\n  topMostPointerBlockingLayer(): Layer | undefined {\n    return [...this.pointerBlockingLayers()].slice(-1)[0]\n  },\n  hasPointerBlockingLayer(): boolean {\n    return this.pointerBlockingLayers().length > 0\n  },\n  isBelowPointerBlockingLayer(node: HTMLElement) {\n    const index = this.indexOf(node)\n    const highestBlockingIndex = this.topMostPointerBlockingLayer()\n      ? this.indexOf(this.topMostPointerBlockingLayer()?.node)\n      : -1\n    return index < highestBlockingIndex\n  },\n  isTopMost(node: HTMLElement | null) {\n    const layer = this.layers[this.count() - 1]\n    return layer?.node === node\n  },\n  getNestedLayers(node: HTMLElement) {\n    return Array.from(this.layers).slice(this.indexOf(node) + 1)\n  },\n  isInNestedLayer(node: HTMLElement, target: HTMLElement | EventTarget | null) {\n    return this.getNestedLayers(node).some((layer) => contains(layer.node, target))\n  },\n  isInBranch(target: HTMLElement | EventTarget | null) {\n    return Array.from(this.branches).some((branch) => contains(branch, target))\n  },\n  add(layer: Layer) {\n    const num = this.layers.push(layer)\n    layer.node.style.setProperty(\"--layer-index\", `${num}`)\n  },\n  addBranch(node: HTMLElement) {\n    this.branches.push(node)\n  },\n  remove(node: HTMLElement) {\n    const index = this.indexOf(node)\n    if (index < 0) return\n\n    // dismiss nested layers\n    if (index < this.count() - 1) {\n      const _layers = this.getNestedLayers(node)\n      _layers.forEach((layer) => layer.dismiss())\n    }\n    // remove this layer\n    this.layers.splice(index, 1)\n    node.style.removeProperty(\"--layer-index\")\n  },\n  removeBranch(node: HTMLElement) {\n    const index = this.branches.indexOf(node)\n    if (index >= 0) this.branches.splice(index, 1)\n  },\n  indexOf(node: HTMLElement | undefined) {\n    return this.layers.findIndex((layer) => layer.node === node)\n  },\n  dismiss(node: HTMLElement) {\n    this.layers[this.indexOf(node)]?.dismiss()\n  },\n  clear() {\n    this.remove(this.layers[0].node)\n  },\n}\n","import { getDocument } from \"@zag-js/dom-query\"\nimport { layerStack } from \"./layer-stack\"\n\nlet originalBodyPointerEvents: string\n\nexport function assignPointerEventToLayers() {\n  layerStack.layers.forEach(({ node }) => {\n    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? \"none\" : \"auto\"\n  })\n}\n\nexport function clearPointerEvent(node: HTMLElement) {\n  node.style.pointerEvents = \"\"\n}\n\nconst DATA_ATTR = \"data-inert\"\n\nexport function disablePointerEventsOutside(node: HTMLElement) {\n  const doc = getDocument(node)\n\n  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {\n    originalBodyPointerEvents = document.body.style.pointerEvents\n    doc.body.style.pointerEvents = \"none\"\n    doc.body.setAttribute(DATA_ATTR, \"\")\n  }\n\n  return () => {\n    if (layerStack.hasPointerBlockingLayer()) return\n    doc.body.style.pointerEvents = originalBodyPointerEvents\n    doc.body.removeAttribute(DATA_ATTR)\n    if (doc.body.style.length === 0) doc.body.removeAttribute(\"style\")\n  }\n}\n"],"mappings":"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","names":["import_dom_query","import_dom_query","import_dom_query","node"]}
+{"version":3,"sources":["../src/index.ts","../src/dismissable-layer.ts","../src/escape-keydown.ts","../src/layer-stack.ts","../src/pointer-event-outside.ts"],"sourcesContent":["export type {\n  FocusOutsideEvent,\n  InteractOutsideEvent,\n  InteractOutsideHandlers,\n  PointerDownOutsideEvent,\n} from \"@zag-js/interact-outside\"\nexport * from \"./dismissable-layer\"\n","import { contains, getEventTarget, isHTMLElement, raf } from \"@zag-js/dom-query\"\nimport {\n  trackInteractOutside,\n  type FocusOutsideEvent,\n  type InteractOutsideHandlers,\n  type PointerDownOutsideEvent,\n} from \"@zag-js/interact-outside\"\nimport { isFunction, warn, type MaybeFunction } from \"@zag-js/utils\"\nimport { trackEscapeKeydown } from \"./escape-keydown\"\nimport { layerStack, type Layer } from \"./layer-stack\"\nimport { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside } from \"./pointer-event-outside\"\n\ntype MaybeElement = HTMLElement | null\ntype Container = MaybeElement | Array<MaybeElement>\ntype NodeOrFn = MaybeFunction<MaybeElement>\n\nexport interface DismissableElementHandlers extends InteractOutsideHandlers {\n  /**\n   * Function called when the escape key is pressed\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n}\n\nexport interface PersistentElementOptions {\n  /**\n   * Returns the persistent elements that:\n   * - should not have pointer-events disabled\n   * - should not trigger the dismiss event\n   */\n  persistentElements?: Array<() => Element | null>\n}\n\nexport interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {\n  /**\n   * Whether to log debug information\n   */\n  debug?: boolean\n  /**\n   * Whether to block pointer events outside the dismissable element\n   */\n  pointerBlocking?: boolean\n  /**\n   * Function called when the dismissable element is dismissed\n   */\n  onDismiss: VoidFunction\n  /**\n   * Exclude containers from the interact outside event\n   */\n  exclude?: MaybeFunction<Container>\n  /**\n   * Defer the interact outside event to the next frame\n   */\n  defer?: boolean\n}\n\nfunction trackDismissableElementImpl(node: MaybeElement, options: DismissableElementOptions) {\n  if (!node) {\n    warn(\"[@zag-js/dismissable] node is `null` or `undefined`\")\n    return\n  }\n\n  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options\n\n  const layer: Layer = { dismiss: onDismiss, node, pointerBlocking }\n\n  layerStack.add(layer)\n  assignPointerEventToLayers()\n\n  function onPointerDownOutside(event: PointerDownOutsideEvent) {\n    const target = getEventTarget(event.detail.originalEvent)\n    if (layerStack.isBelowPointerBlockingLayer(node!) || layerStack.isInBranch(target)) return\n    options.onPointerDownOutside?.(event)\n    options.onInteractOutside?.(event)\n    if (event.defaultPrevented) return\n    if (debug) {\n      console.log(\"onPointerDownOutside:\", event.detail.originalEvent)\n    }\n    onDismiss?.()\n  }\n\n  function onFocusOutside(event: FocusOutsideEvent) {\n    const target = getEventTarget(event.detail.originalEvent)\n    if (layerStack.isInBranch(target)) return\n    options.onFocusOutside?.(event)\n    options.onInteractOutside?.(event)\n    if (event.defaultPrevented) return\n    if (debug) {\n      console.log(\"onFocusOutside:\", event.detail.originalEvent)\n    }\n    onDismiss?.()\n  }\n\n  function onEscapeKeyDown(event: KeyboardEvent) {\n    if (!layerStack.isTopMost(node!)) return\n    options.onEscapeKeyDown?.(event)\n    if (!event.defaultPrevented && onDismiss) {\n      event.preventDefault()\n      onDismiss()\n    }\n  }\n\n  function exclude(target: Element) {\n    if (!node) return false\n    const containers = typeof excludeContainers === \"function\" ? excludeContainers() : excludeContainers\n    const _containers = Array.isArray(containers) ? containers : [containers]\n    const persistentElements = options.persistentElements?.map((fn) => fn()).filter(isHTMLElement)\n    if (persistentElements) _containers.push(...persistentElements)\n    return _containers.some((node) => contains(node, target)) || layerStack.isInNestedLayer(node, target)\n  }\n\n  const cleanups = [\n    pointerBlocking ? disablePointerEventsOutside(node, options.persistentElements) : undefined,\n    trackEscapeKeydown(node, onEscapeKeyDown),\n    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer }),\n  ]\n\n  return () => {\n    layerStack.remove(node!)\n    // re-assign pointer event to remaining layers\n    assignPointerEventToLayers()\n    // remove pointer event from removed layer\n    clearPointerEvent(node!)\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n\nexport function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn\n      cleanups.push(trackDismissableElementImpl(node, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n\nexport function trackDismissableBranch(nodeOrFn: NodeOrFn, options: { defer?: boolean } = {}) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n\n  cleanups.push(\n    func(() => {\n      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn\n      if (!node) {\n        warn(\"[@zag-js/dismissable] branch node is `null` or `undefined`\")\n        return\n      }\n      layerStack.addBranch(node)\n      cleanups.push(() => {\n        layerStack.removeBranch(node)\n      })\n    }),\n  )\n\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { addDomEvent } from \"@zag-js/dom-event\"\nimport { getDocument } from \"@zag-js/dom-query\"\n\nexport function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void) {\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== \"Escape\") return\n    if (event.isComposing) return\n    fn?.(event)\n  }\n\n  return addDomEvent(getDocument(node), \"keydown\", handleKeyDown, { capture: true })\n}\n","import { contains } from \"@zag-js/dom-query\"\n\nexport interface Layer {\n  dismiss: VoidFunction\n  node: HTMLElement\n  pointerBlocking?: boolean\n}\n\nexport const layerStack = {\n  layers: [] as Layer[],\n  branches: [] as HTMLElement[],\n  count(): number {\n    return this.layers.length\n  },\n  pointerBlockingLayers(): Layer[] {\n    return this.layers.filter((layer) => layer.pointerBlocking)\n  },\n  topMostPointerBlockingLayer(): Layer | undefined {\n    return [...this.pointerBlockingLayers()].slice(-1)[0]\n  },\n  hasPointerBlockingLayer(): boolean {\n    return this.pointerBlockingLayers().length > 0\n  },\n  isBelowPointerBlockingLayer(node: HTMLElement) {\n    const index = this.indexOf(node)\n    const highestBlockingIndex = this.topMostPointerBlockingLayer()\n      ? this.indexOf(this.topMostPointerBlockingLayer()?.node)\n      : -1\n    return index < highestBlockingIndex\n  },\n  isTopMost(node: HTMLElement | null) {\n    const layer = this.layers[this.count() - 1]\n    return layer?.node === node\n  },\n  getNestedLayers(node: HTMLElement) {\n    return Array.from(this.layers).slice(this.indexOf(node) + 1)\n  },\n  isInNestedLayer(node: HTMLElement, target: HTMLElement | EventTarget | null) {\n    return this.getNestedLayers(node).some((layer) => contains(layer.node, target))\n  },\n  isInBranch(target: HTMLElement | EventTarget | null) {\n    return Array.from(this.branches).some((branch) => contains(branch, target))\n  },\n  add(layer: Layer) {\n    const num = this.layers.push(layer)\n    layer.node.style.setProperty(\"--layer-index\", `${num}`)\n  },\n  addBranch(node: HTMLElement) {\n    this.branches.push(node)\n  },\n  remove(node: HTMLElement) {\n    const index = this.indexOf(node)\n    if (index < 0) return\n\n    // dismiss nested layers\n    if (index < this.count() - 1) {\n      const _layers = this.getNestedLayers(node)\n      _layers.forEach((layer) => layer.dismiss())\n    }\n    // remove this layer\n    this.layers.splice(index, 1)\n    node.style.removeProperty(\"--layer-index\")\n  },\n  removeBranch(node: HTMLElement) {\n    const index = this.branches.indexOf(node)\n    if (index >= 0) this.branches.splice(index, 1)\n  },\n  indexOf(node: HTMLElement | undefined) {\n    return this.layers.findIndex((layer) => layer.node === node)\n  },\n  dismiss(node: HTMLElement) {\n    this.layers[this.indexOf(node)]?.dismiss()\n  },\n  clear() {\n    this.remove(this.layers[0].node)\n  },\n}\n","import { getDocument, setStyle, waitForElements } from \"@zag-js/dom-query\"\nimport { layerStack } from \"./layer-stack\"\n\nlet originalBodyPointerEvents: string\n\nexport function assignPointerEventToLayers() {\n  layerStack.layers.forEach(({ node }) => {\n    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? \"none\" : \"auto\"\n  })\n}\n\nexport function clearPointerEvent(node: HTMLElement) {\n  node.style.pointerEvents = \"\"\n}\n\nexport function disablePointerEventsOutside(node: HTMLElement, peristentElements?: Array<() => Element | null>) {\n  const doc = getDocument(node)\n\n  const cleanups: VoidFunction[] = []\n\n  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(\"data-inert\")) {\n    originalBodyPointerEvents = document.body.style.pointerEvents\n    queueMicrotask(() => {\n      doc.body.style.pointerEvents = \"none\"\n      doc.body.setAttribute(\"data-inert\", \"\")\n    })\n  }\n\n  if (peristentElements) {\n    const persistedCleanup = waitForElements(peristentElements, (el) => {\n      cleanups.push(setStyle(el, { pointerEvents: \"auto\" }))\n    })\n    cleanups.push(persistedCleanup)\n  }\n\n  return () => {\n    if (layerStack.hasPointerBlockingLayer()) return\n    queueMicrotask(() => {\n      doc.body.style.pointerEvents = originalBodyPointerEvents\n      doc.body.removeAttribute(\"data-inert\")\n      if (doc.body.style.length === 0) doc.body.removeAttribute(\"style\")\n    })\n    cleanups.forEach((fn) => fn())\n  }\n}\n"],"mappings":"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","names":["import_dom_query","import_dom_query","import_dom_query","node"]}

package/dist/index.mjs

@@ -1,220 +1,2 @@
-// src/dismissable-layer.ts
-import { contains as contains2, getEventTarget, raf } from "@zag-js/dom-query";
-import {
-  trackInteractOutside
-} from "@zag-js/interact-outside";
-import { isFunction, warn } from "@zag-js/utils";
-
-// src/escape-keydown.ts
-import { addDomEvent } from "@zag-js/dom-event";
-import { getDocument } from "@zag-js/dom-query";
-function trackEscapeKeydown(node, fn) {
-  const handleKeyDown = (event) => {
-    if (event.key === "Escape")
-      fn?.(event);
-  };
-  return addDomEvent(getDocument(node), "keydown", handleKeyDown, { capture: true });
-}
-
-// src/layer-stack.ts
-import { contains } from "@zag-js/dom-query";
-var layerStack = {
-  layers: [],
-  branches: [],
-  count() {
-    return this.layers.length;
-  },
-  pointerBlockingLayers() {
-    return this.layers.filter((layer) => layer.pointerBlocking);
-  },
-  topMostPointerBlockingLayer() {
-    return [...this.pointerBlockingLayers()].slice(-1)[0];
-  },
-  hasPointerBlockingLayer() {
-    return this.pointerBlockingLayers().length > 0;
-  },
-  isBelowPointerBlockingLayer(node) {
-    const index = this.indexOf(node);
-    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
-    return index < highestBlockingIndex;
-  },
-  isTopMost(node) {
-    const layer = this.layers[this.count() - 1];
-    return layer?.node === node;
-  },
-  getNestedLayers(node) {
-    return Array.from(this.layers).slice(this.indexOf(node) + 1);
-  },
-  isInNestedLayer(node, target) {
-    return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
-  },
-  isInBranch(target) {
-    return Array.from(this.branches).some((branch) => contains(branch, target));
-  },
-  add(layer) {
-    const num = this.layers.push(layer);
-    layer.node.style.setProperty("--layer-index", `${num}`);
-  },
-  addBranch(node) {
-    this.branches.push(node);
-  },
-  remove(node) {
-    const index = this.indexOf(node);
-    if (index < 0)
-      return;
-    if (index < this.count() - 1) {
-      const _layers = this.getNestedLayers(node);
-      _layers.forEach((layer) => layer.dismiss());
-    }
-    this.layers.splice(index, 1);
-    node.style.removeProperty("--layer-index");
-  },
-  removeBranch(node) {
-    const index = this.branches.indexOf(node);
-    if (index >= 0)
-      this.branches.splice(index, 1);
-  },
-  indexOf(node) {
-    return this.layers.findIndex((layer) => layer.node === node);
-  },
-  dismiss(node) {
-    this.layers[this.indexOf(node)]?.dismiss();
-  },
-  clear() {
-    this.remove(this.layers[0].node);
-  }
-};
-
-// src/pointer-event-outside.ts
-import { getDocument as getDocument2 } from "@zag-js/dom-query";
-var originalBodyPointerEvents;
-function assignPointerEventToLayers() {
-  layerStack.layers.forEach(({ node }) => {
-    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
-  });
-}
-function clearPointerEvent(node) {
-  node.style.pointerEvents = "";
-}
-var DATA_ATTR = "data-inert";
-function disablePointerEventsOutside(node) {
-  const doc = getDocument2(node);
-  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
-    originalBodyPointerEvents = document.body.style.pointerEvents;
-    doc.body.style.pointerEvents = "none";
-    doc.body.setAttribute(DATA_ATTR, "");
-  }
-  return () => {
-    if (layerStack.hasPointerBlockingLayer())
-      return;
-    doc.body.style.pointerEvents = originalBodyPointerEvents;
-    doc.body.removeAttribute(DATA_ATTR);
-    if (doc.body.style.length === 0)
-      doc.body.removeAttribute("style");
-  };
-}
-
-// src/dismissable-layer.ts
-function trackDismissableElementImpl(node, options) {
-  if (!node) {
-    warn("[@zag-js/dismissable] node is `null` or `undefined`");
-    return;
-  }
-  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
-  const layer = { dismiss: onDismiss, node, pointerBlocking };
-  layerStack.add(layer);
-  assignPointerEventToLayers();
-  function onPointerDownOutside(event) {
-    const target = getEventTarget(event.detail.originalEvent);
-    if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
-      return;
-    options.onPointerDownOutside?.(event);
-    options.onInteractOutside?.(event);
-    if (event.defaultPrevented)
-      return;
-    if (debug) {
-      console.log("onPointerDownOutside:", event.detail.originalEvent);
-    }
-    onDismiss?.();
-  }
-  function onFocusOutside(event) {
-    const target = getEventTarget(event.detail.originalEvent);
-    if (layerStack.isInBranch(target))
-      return;
-    options.onFocusOutside?.(event);
-    options.onInteractOutside?.(event);
-    if (event.defaultPrevented)
-      return;
-    if (debug) {
-      console.log("onFocusOutside:", event.detail.originalEvent);
-    }
-    onDismiss?.();
-  }
-  function onEscapeKeyDown(event) {
-    if (!layerStack.isTopMost(node))
-      return;
-    options.onEscapeKeyDown?.(event);
-    if (!event.defaultPrevented && onDismiss) {
-      event.preventDefault();
-      onDismiss();
-    }
-  }
-  function exclude(target) {
-    if (!node)
-      return false;
-    const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
-    const _containers = Array.isArray(containers) ? containers : [containers];
-    return _containers.some((node2) => contains2(node2, target)) || layerStack.isInNestedLayer(node, target);
-  }
-  const cleanups = [
-    pointerBlocking ? disablePointerEventsOutside(node) : void 0,
-    trackEscapeKeydown(node, onEscapeKeyDown),
-    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer })
-  ];
-  return () => {
-    layerStack.remove(node);
-    assignPointerEventToLayers();
-    clearPointerEvent(node);
-    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?.());
-  };
-}
-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;
-      }
-      layerStack.addBranch(node);
-      cleanups.push(() => {
-        layerStack.removeBranch(node);
-      });
-    })
-  );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
-}
-export {
-  trackDismissableBranch,
-  trackDismissableElement
-};
+import{contains as contains2,getEventTarget,isHTMLElement,raf}from"@zag-js/dom-query";import{trackInteractOutside}from"@zag-js/interact-outside";import{isFunction,warn}from"@zag-js/utils";import{addDomEvent}from"@zag-js/dom-event";import{getDocument}from"@zag-js/dom-query";function trackEscapeKeydown(node,fn){const handleKeyDown=event=>{if(event.key!=="Escape")return;if(event.isComposing)return;fn?.(event)};return addDomEvent(getDocument(node),"keydown",handleKeyDown,{capture:true})}import{contains}from"@zag-js/dom-query";var layerStack={layers:[],branches:[],count(){return this.layers.length},pointerBlockingLayers(){return this.layers.filter(layer=>layer.pointerBlocking)},topMostPointerBlockingLayer(){return[...this.pointerBlockingLayers()].slice(-1)[0]},hasPointerBlockingLayer(){return this.pointerBlockingLayers().length>0},isBelowPointerBlockingLayer(node){const index=this.indexOf(node);const highestBlockingIndex=this.topMostPointerBlockingLayer()?this.indexOf(this.topMostPointerBlockingLayer()?.node):-1;return index<highestBlockingIndex},isTopMost(node){const layer=this.layers[this.count()-1];return layer?.node===node},getNestedLayers(node){return Array.from(this.layers).slice(this.indexOf(node)+1)},isInNestedLayer(node,target){return this.getNestedLayers(node).some(layer=>contains(layer.node,target))},isInBranch(target){return Array.from(this.branches).some(branch=>contains(branch,target))},add(layer){const num=this.layers.push(layer);layer.node.style.setProperty("--layer-index",`${num}`)},addBranch(node){this.branches.push(node)},remove(node){const index=this.indexOf(node);if(index<0)return;if(index<this.count()-1){const _layers=this.getNestedLayers(node);_layers.forEach(layer=>layer.dismiss())}this.layers.splice(index,1);node.style.removeProperty("--layer-index")},removeBranch(node){const index=this.branches.indexOf(node);if(index>=0)this.branches.splice(index,1)},indexOf(node){return this.layers.findIndex(layer=>layer.node===node)},dismiss(node){this.layers[this.indexOf(node)]?.dismiss()},clear(){this.remove(this.layers[0].node)}};import{getDocument as getDocument2,setStyle,waitForElements}from"@zag-js/dom-query";var originalBodyPointerEvents;function assignPointerEventToLayers(){layerStack.layers.forEach(({node})=>{node.style.pointerEvents=layerStack.isBelowPointerBlockingLayer(node)?"none":"auto"})}function clearPointerEvent(node){node.style.pointerEvents=""}function disablePointerEventsOutside(node,peristentElements){const doc=getDocument2(node);const cleanups=[];if(layerStack.hasPointerBlockingLayer()&&!doc.body.hasAttribute("data-inert")){originalBodyPointerEvents=document.body.style.pointerEvents;queueMicrotask(()=>{doc.body.style.pointerEvents="none";doc.body.setAttribute("data-inert","")})}if(peristentElements){const persistedCleanup=waitForElements(peristentElements,el=>{cleanups.push(setStyle(el,{pointerEvents:"auto"}))});cleanups.push(persistedCleanup)}return()=>{if(layerStack.hasPointerBlockingLayer())return;queueMicrotask(()=>{doc.body.style.pointerEvents=originalBodyPointerEvents;doc.body.removeAttribute("data-inert");if(doc.body.style.length===0)doc.body.removeAttribute("style")});cleanups.forEach(fn=>fn())}}function trackDismissableElementImpl(node,options){if(!node){warn("[@zag-js/dismissable] node is `null` or `undefined`");return}const{onDismiss,pointerBlocking,exclude:excludeContainers,debug}=options;const layer={dismiss:onDismiss,node,pointerBlocking};layerStack.add(layer);assignPointerEventToLayers();function onPointerDownOutside(event){const target=getEventTarget(event.detail.originalEvent);if(layerStack.isBelowPointerBlockingLayer(node)||layerStack.isInBranch(target))return;options.onPointerDownOutside?.(event);options.onInteractOutside?.(event);if(event.defaultPrevented)return;if(debug){console.log("onPointerDownOutside:",event.detail.originalEvent)}onDismiss?.()}function onFocusOutside(event){const target=getEventTarget(event.detail.originalEvent);if(layerStack.isInBranch(target))return;options.onFocusOutside?.(event);options.onInteractOutside?.(event);if(event.defaultPrevented)return;if(debug){console.log("onFocusOutside:",event.detail.originalEvent)}onDismiss?.()}function onEscapeKeyDown(event){if(!layerStack.isTopMost(node))return;options.onEscapeKeyDown?.(event);if(!event.defaultPrevented&&onDismiss){event.preventDefault();onDismiss()}}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);if(persistentElements)_containers.push(...persistentElements);return _containers.some(node2=>contains2(node2,target))||layerStack.isInNestedLayer(node,target)}const cleanups=[pointerBlocking?disablePointerEventsOutside(node,options.persistentElements):void 0,trackEscapeKeydown(node,onEscapeKeyDown),trackInteractOutside(node,{exclude,onFocusOutside,onPointerDownOutside,defer:options.defer})];return()=>{layerStack.remove(node);assignPointerEventToLayers();clearPointerEvent(node);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?.())}}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}layerStack.addBranch(node);cleanups.push(()=>{layerStack.removeBranch(node)})}));return()=>{cleanups.forEach(fn=>fn?.())}}export{trackDismissableBranch,trackDismissableElement};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dismissable-layer.ts","../src/escape-keydown.ts","../src/layer-stack.ts","../src/pointer-event-outside.ts"],"sourcesContent":["import { contains, getEventTarget, raf } from \"@zag-js/dom-query\"\nimport {\n  trackInteractOutside,\n  type FocusOutsideEvent,\n  type InteractOutsideHandlers,\n  type PointerDownOutsideEvent,\n} from \"@zag-js/interact-outside\"\nimport { isFunction, warn, type MaybeFunction } from \"@zag-js/utils\"\nimport { trackEscapeKeydown } from \"./escape-keydown\"\nimport { layerStack, type Layer } from \"./layer-stack\"\nimport { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside } from \"./pointer-event-outside\"\n\ntype MaybeElement = HTMLElement | null\ntype Container = MaybeElement | Array<MaybeElement>\ntype NodeOrFn = MaybeFunction<MaybeElement>\n\nexport interface DismissableElementHandlers extends InteractOutsideHandlers {\n  /**\n   * Function called when the escape key is pressed\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n}\n\nexport interface DismissableElementOptions extends DismissableElementHandlers {\n  /**\n   * Whether to log debug information\n   */\n  debug?: boolean\n  /**\n   * Whether to block pointer events outside the dismissable element\n   */\n  pointerBlocking?: boolean\n  /**\n   * Function called when the dismissable element is dismissed\n   */\n  onDismiss: VoidFunction\n  /**\n   * Exclude containers from the interact outside event\n   */\n  exclude?: MaybeFunction<Container>\n  /**\n   * Defer the interact outside event to the next frame\n   */\n  defer?: boolean\n}\n\nfunction trackDismissableElementImpl(node: MaybeElement, options: DismissableElementOptions) {\n  if (!node) {\n    warn(\"[@zag-js/dismissable] node is `null` or `undefined`\")\n    return\n  }\n\n  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options\n\n  const layer: Layer = { dismiss: onDismiss, node, pointerBlocking }\n\n  layerStack.add(layer)\n  assignPointerEventToLayers()\n\n  function onPointerDownOutside(event: PointerDownOutsideEvent) {\n    const target = getEventTarget(event.detail.originalEvent)\n    if (layerStack.isBelowPointerBlockingLayer(node!) || layerStack.isInBranch(target)) return\n    options.onPointerDownOutside?.(event)\n    options.onInteractOutside?.(event)\n    if (event.defaultPrevented) return\n    if (debug) {\n      console.log(\"onPointerDownOutside:\", event.detail.originalEvent)\n    }\n    onDismiss?.()\n  }\n\n  function onFocusOutside(event: FocusOutsideEvent) {\n    const target = getEventTarget(event.detail.originalEvent)\n    if (layerStack.isInBranch(target)) return\n    options.onFocusOutside?.(event)\n    options.onInteractOutside?.(event)\n    if (event.defaultPrevented) return\n    if (debug) {\n      console.log(\"onFocusOutside:\", event.detail.originalEvent)\n    }\n    onDismiss?.()\n  }\n\n  function onEscapeKeyDown(event: KeyboardEvent) {\n    if (!layerStack.isTopMost(node!)) return\n    options.onEscapeKeyDown?.(event)\n    if (!event.defaultPrevented && onDismiss) {\n      event.preventDefault()\n      onDismiss()\n    }\n  }\n\n  function exclude(target: Element) {\n    if (!node) return false\n    const containers = typeof excludeContainers === \"function\" ? excludeContainers() : excludeContainers\n    const _containers = Array.isArray(containers) ? containers : [containers]\n    return _containers.some((node) => contains(node, target)) || layerStack.isInNestedLayer(node, target)\n  }\n\n  const cleanups = [\n    pointerBlocking ? disablePointerEventsOutside(node) : undefined,\n    trackEscapeKeydown(node, onEscapeKeyDown),\n    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer }),\n  ]\n\n  return () => {\n    layerStack.remove(node!)\n    // re-assign pointer event to remaining layers\n    assignPointerEventToLayers()\n    // remove pointer event from removed layer\n    clearPointerEvent(node!)\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n\nexport function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn\n      cleanups.push(trackDismissableElementImpl(node, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n\nexport function trackDismissableBranch(nodeOrFn: NodeOrFn, options: { defer?: boolean } = {}) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n\n  cleanups.push(\n    func(() => {\n      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn\n      if (!node) {\n        warn(\"[@zag-js/dismissable] branch node is `null` or `undefined`\")\n        return\n      }\n      layerStack.addBranch(node)\n      cleanups.push(() => {\n        layerStack.removeBranch(node)\n      })\n    }),\n  )\n\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { addDomEvent } from \"@zag-js/dom-event\"\nimport { getDocument } from \"@zag-js/dom-query\"\n\nexport function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void) {\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") fn?.(event)\n  }\n  return addDomEvent(getDocument(node), \"keydown\", handleKeyDown, { capture: true })\n}\n","import { contains } from \"@zag-js/dom-query\"\n\nexport interface Layer {\n  dismiss: VoidFunction\n  node: HTMLElement\n  pointerBlocking?: boolean\n}\n\nexport const layerStack = {\n  layers: [] as Layer[],\n  branches: [] as HTMLElement[],\n  count(): number {\n    return this.layers.length\n  },\n  pointerBlockingLayers(): Layer[] {\n    return this.layers.filter((layer) => layer.pointerBlocking)\n  },\n  topMostPointerBlockingLayer(): Layer | undefined {\n    return [...this.pointerBlockingLayers()].slice(-1)[0]\n  },\n  hasPointerBlockingLayer(): boolean {\n    return this.pointerBlockingLayers().length > 0\n  },\n  isBelowPointerBlockingLayer(node: HTMLElement) {\n    const index = this.indexOf(node)\n    const highestBlockingIndex = this.topMostPointerBlockingLayer()\n      ? this.indexOf(this.topMostPointerBlockingLayer()?.node)\n      : -1\n    return index < highestBlockingIndex\n  },\n  isTopMost(node: HTMLElement | null) {\n    const layer = this.layers[this.count() - 1]\n    return layer?.node === node\n  },\n  getNestedLayers(node: HTMLElement) {\n    return Array.from(this.layers).slice(this.indexOf(node) + 1)\n  },\n  isInNestedLayer(node: HTMLElement, target: HTMLElement | EventTarget | null) {\n    return this.getNestedLayers(node).some((layer) => contains(layer.node, target))\n  },\n  isInBranch(target: HTMLElement | EventTarget | null) {\n    return Array.from(this.branches).some((branch) => contains(branch, target))\n  },\n  add(layer: Layer) {\n    const num = this.layers.push(layer)\n    layer.node.style.setProperty(\"--layer-index\", `${num}`)\n  },\n  addBranch(node: HTMLElement) {\n    this.branches.push(node)\n  },\n  remove(node: HTMLElement) {\n    const index = this.indexOf(node)\n    if (index < 0) return\n\n    // dismiss nested layers\n    if (index < this.count() - 1) {\n      const _layers = this.getNestedLayers(node)\n      _layers.forEach((layer) => layer.dismiss())\n    }\n    // remove this layer\n    this.layers.splice(index, 1)\n    node.style.removeProperty(\"--layer-index\")\n  },\n  removeBranch(node: HTMLElement) {\n    const index = this.branches.indexOf(node)\n    if (index >= 0) this.branches.splice(index, 1)\n  },\n  indexOf(node: HTMLElement | undefined) {\n    return this.layers.findIndex((layer) => layer.node === node)\n  },\n  dismiss(node: HTMLElement) {\n    this.layers[this.indexOf(node)]?.dismiss()\n  },\n  clear() {\n    this.remove(this.layers[0].node)\n  },\n}\n","import { getDocument } from \"@zag-js/dom-query\"\nimport { layerStack } from \"./layer-stack\"\n\nlet originalBodyPointerEvents: string\n\nexport function assignPointerEventToLayers() {\n  layerStack.layers.forEach(({ node }) => {\n    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? \"none\" : \"auto\"\n  })\n}\n\nexport function clearPointerEvent(node: HTMLElement) {\n  node.style.pointerEvents = \"\"\n}\n\nconst DATA_ATTR = \"data-inert\"\n\nexport function disablePointerEventsOutside(node: HTMLElement) {\n  const doc = getDocument(node)\n\n  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {\n    originalBodyPointerEvents = document.body.style.pointerEvents\n    doc.body.style.pointerEvents = \"none\"\n    doc.body.setAttribute(DATA_ATTR, \"\")\n  }\n\n  return () => {\n    if (layerStack.hasPointerBlockingLayer()) return\n    doc.body.style.pointerEvents = originalBodyPointerEvents\n    doc.body.removeAttribute(DATA_ATTR)\n    if (doc.body.style.length === 0) doc.body.removeAttribute(\"style\")\n  }\n}\n"],"mappings":"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","names":["contains","getDocument","getDocument","node","contains"]}
+{"version":3,"sources":["../src/dismissable-layer.ts","../src/escape-keydown.ts","../src/layer-stack.ts","../src/pointer-event-outside.ts"],"sourcesContent":["import { contains, getEventTarget, isHTMLElement, raf } from \"@zag-js/dom-query\"\nimport {\n  trackInteractOutside,\n  type FocusOutsideEvent,\n  type InteractOutsideHandlers,\n  type PointerDownOutsideEvent,\n} from \"@zag-js/interact-outside\"\nimport { isFunction, warn, type MaybeFunction } from \"@zag-js/utils\"\nimport { trackEscapeKeydown } from \"./escape-keydown\"\nimport { layerStack, type Layer } from \"./layer-stack\"\nimport { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside } from \"./pointer-event-outside\"\n\ntype MaybeElement = HTMLElement | null\ntype Container = MaybeElement | Array<MaybeElement>\ntype NodeOrFn = MaybeFunction<MaybeElement>\n\nexport interface DismissableElementHandlers extends InteractOutsideHandlers {\n  /**\n   * Function called when the escape key is pressed\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n}\n\nexport interface PersistentElementOptions {\n  /**\n   * Returns the persistent elements that:\n   * - should not have pointer-events disabled\n   * - should not trigger the dismiss event\n   */\n  persistentElements?: Array<() => Element | null>\n}\n\nexport interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {\n  /**\n   * Whether to log debug information\n   */\n  debug?: boolean\n  /**\n   * Whether to block pointer events outside the dismissable element\n   */\n  pointerBlocking?: boolean\n  /**\n   * Function called when the dismissable element is dismissed\n   */\n  onDismiss: VoidFunction\n  /**\n   * Exclude containers from the interact outside event\n   */\n  exclude?: MaybeFunction<Container>\n  /**\n   * Defer the interact outside event to the next frame\n   */\n  defer?: boolean\n}\n\nfunction trackDismissableElementImpl(node: MaybeElement, options: DismissableElementOptions) {\n  if (!node) {\n    warn(\"[@zag-js/dismissable] node is `null` or `undefined`\")\n    return\n  }\n\n  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options\n\n  const layer: Layer = { dismiss: onDismiss, node, pointerBlocking }\n\n  layerStack.add(layer)\n  assignPointerEventToLayers()\n\n  function onPointerDownOutside(event: PointerDownOutsideEvent) {\n    const target = getEventTarget(event.detail.originalEvent)\n    if (layerStack.isBelowPointerBlockingLayer(node!) || layerStack.isInBranch(target)) return\n    options.onPointerDownOutside?.(event)\n    options.onInteractOutside?.(event)\n    if (event.defaultPrevented) return\n    if (debug) {\n      console.log(\"onPointerDownOutside:\", event.detail.originalEvent)\n    }\n    onDismiss?.()\n  }\n\n  function onFocusOutside(event: FocusOutsideEvent) {\n    const target = getEventTarget(event.detail.originalEvent)\n    if (layerStack.isInBranch(target)) return\n    options.onFocusOutside?.(event)\n    options.onInteractOutside?.(event)\n    if (event.defaultPrevented) return\n    if (debug) {\n      console.log(\"onFocusOutside:\", event.detail.originalEvent)\n    }\n    onDismiss?.()\n  }\n\n  function onEscapeKeyDown(event: KeyboardEvent) {\n    if (!layerStack.isTopMost(node!)) return\n    options.onEscapeKeyDown?.(event)\n    if (!event.defaultPrevented && onDismiss) {\n      event.preventDefault()\n      onDismiss()\n    }\n  }\n\n  function exclude(target: Element) {\n    if (!node) return false\n    const containers = typeof excludeContainers === \"function\" ? excludeContainers() : excludeContainers\n    const _containers = Array.isArray(containers) ? containers : [containers]\n    const persistentElements = options.persistentElements?.map((fn) => fn()).filter(isHTMLElement)\n    if (persistentElements) _containers.push(...persistentElements)\n    return _containers.some((node) => contains(node, target)) || layerStack.isInNestedLayer(node, target)\n  }\n\n  const cleanups = [\n    pointerBlocking ? disablePointerEventsOutside(node, options.persistentElements) : undefined,\n    trackEscapeKeydown(node, onEscapeKeyDown),\n    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer }),\n  ]\n\n  return () => {\n    layerStack.remove(node!)\n    // re-assign pointer event to remaining layers\n    assignPointerEventToLayers()\n    // remove pointer event from removed layer\n    clearPointerEvent(node!)\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n\nexport function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn\n      cleanups.push(trackDismissableElementImpl(node, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n\nexport function trackDismissableBranch(nodeOrFn: NodeOrFn, options: { defer?: boolean } = {}) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n\n  cleanups.push(\n    func(() => {\n      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn\n      if (!node) {\n        warn(\"[@zag-js/dismissable] branch node is `null` or `undefined`\")\n        return\n      }\n      layerStack.addBranch(node)\n      cleanups.push(() => {\n        layerStack.removeBranch(node)\n      })\n    }),\n  )\n\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { addDomEvent } from \"@zag-js/dom-event\"\nimport { getDocument } from \"@zag-js/dom-query\"\n\nexport function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void) {\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== \"Escape\") return\n    if (event.isComposing) return\n    fn?.(event)\n  }\n\n  return addDomEvent(getDocument(node), \"keydown\", handleKeyDown, { capture: true })\n}\n","import { contains } from \"@zag-js/dom-query\"\n\nexport interface Layer {\n  dismiss: VoidFunction\n  node: HTMLElement\n  pointerBlocking?: boolean\n}\n\nexport const layerStack = {\n  layers: [] as Layer[],\n  branches: [] as HTMLElement[],\n  count(): number {\n    return this.layers.length\n  },\n  pointerBlockingLayers(): Layer[] {\n    return this.layers.filter((layer) => layer.pointerBlocking)\n  },\n  topMostPointerBlockingLayer(): Layer | undefined {\n    return [...this.pointerBlockingLayers()].slice(-1)[0]\n  },\n  hasPointerBlockingLayer(): boolean {\n    return this.pointerBlockingLayers().length > 0\n  },\n  isBelowPointerBlockingLayer(node: HTMLElement) {\n    const index = this.indexOf(node)\n    const highestBlockingIndex = this.topMostPointerBlockingLayer()\n      ? this.indexOf(this.topMostPointerBlockingLayer()?.node)\n      : -1\n    return index < highestBlockingIndex\n  },\n  isTopMost(node: HTMLElement | null) {\n    const layer = this.layers[this.count() - 1]\n    return layer?.node === node\n  },\n  getNestedLayers(node: HTMLElement) {\n    return Array.from(this.layers).slice(this.indexOf(node) + 1)\n  },\n  isInNestedLayer(node: HTMLElement, target: HTMLElement | EventTarget | null) {\n    return this.getNestedLayers(node).some((layer) => contains(layer.node, target))\n  },\n  isInBranch(target: HTMLElement | EventTarget | null) {\n    return Array.from(this.branches).some((branch) => contains(branch, target))\n  },\n  add(layer: Layer) {\n    const num = this.layers.push(layer)\n    layer.node.style.setProperty(\"--layer-index\", `${num}`)\n  },\n  addBranch(node: HTMLElement) {\n    this.branches.push(node)\n  },\n  remove(node: HTMLElement) {\n    const index = this.indexOf(node)\n    if (index < 0) return\n\n    // dismiss nested layers\n    if (index < this.count() - 1) {\n      const _layers = this.getNestedLayers(node)\n      _layers.forEach((layer) => layer.dismiss())\n    }\n    // remove this layer\n    this.layers.splice(index, 1)\n    node.style.removeProperty(\"--layer-index\")\n  },\n  removeBranch(node: HTMLElement) {\n    const index = this.branches.indexOf(node)\n    if (index >= 0) this.branches.splice(index, 1)\n  },\n  indexOf(node: HTMLElement | undefined) {\n    return this.layers.findIndex((layer) => layer.node === node)\n  },\n  dismiss(node: HTMLElement) {\n    this.layers[this.indexOf(node)]?.dismiss()\n  },\n  clear() {\n    this.remove(this.layers[0].node)\n  },\n}\n","import { getDocument, setStyle, waitForElements } from \"@zag-js/dom-query\"\nimport { layerStack } from \"./layer-stack\"\n\nlet originalBodyPointerEvents: string\n\nexport function assignPointerEventToLayers() {\n  layerStack.layers.forEach(({ node }) => {\n    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? \"none\" : \"auto\"\n  })\n}\n\nexport function clearPointerEvent(node: HTMLElement) {\n  node.style.pointerEvents = \"\"\n}\n\nexport function disablePointerEventsOutside(node: HTMLElement, peristentElements?: Array<() => Element | null>) {\n  const doc = getDocument(node)\n\n  const cleanups: VoidFunction[] = []\n\n  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(\"data-inert\")) {\n    originalBodyPointerEvents = document.body.style.pointerEvents\n    queueMicrotask(() => {\n      doc.body.style.pointerEvents = \"none\"\n      doc.body.setAttribute(\"data-inert\", \"\")\n    })\n  }\n\n  if (peristentElements) {\n    const persistedCleanup = waitForElements(peristentElements, (el) => {\n      cleanups.push(setStyle(el, { pointerEvents: \"auto\" }))\n    })\n    cleanups.push(persistedCleanup)\n  }\n\n  return () => {\n    if (layerStack.hasPointerBlockingLayer()) return\n    queueMicrotask(() => {\n      doc.body.style.pointerEvents = originalBodyPointerEvents\n      doc.body.removeAttribute(\"data-inert\")\n      if (doc.body.style.length === 0) doc.body.removeAttribute(\"style\")\n    })\n    cleanups.forEach((fn) => fn())\n  }\n}\n"],"mappings":"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","names":["contains","getDocument","getDocument","node","contains"]}

package/package.json

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

package/src/dismissable-layer.ts

@@ -1,4 +1,4 @@
-import { contains, getEventTarget, raf } from "@zag-js/dom-query"
+import { contains, getEventTarget, isHTMLElement, raf } from "@zag-js/dom-query"
 import {
   trackInteractOutside,
   type FocusOutsideEvent,
@@ -21,7 +21,16 @@ export interface DismissableElementHandlers extends InteractOutsideHandlers {
   onEscapeKeyDown?: (event: KeyboardEvent) => void
 }
 
-export interface DismissableElementOptions extends DismissableElementHandlers {
+export interface PersistentElementOptions {
+  /**
+   * Returns the persistent elements that:
+   * - should not have pointer-events disabled
+   * - should not trigger the dismiss event
+   */
+  persistentElements?: Array<() => Element | null>
+}
+
+export interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
   /**
    * Whether to log debug information
    */
@@ -94,11 +103,13 @@ function trackDismissableElementImpl(node: MaybeElement, options: DismissableEle
     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)
+    if (persistentElements) _containers.push(...persistentElements)
     return _containers.some((node) => contains(node, target)) || layerStack.isInNestedLayer(node, target)
   }
 
   const cleanups = [
-    pointerBlocking ? disablePointerEventsOutside(node) : undefined,
+    pointerBlocking ? disablePointerEventsOutside(node, options.persistentElements) : undefined,
     trackEscapeKeydown(node, onEscapeKeyDown),
     trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer }),
   ]

package/src/escape-keydown.ts

@@ -3,7 +3,10 @@ import { getDocument } from "@zag-js/dom-query"
 
 export function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void) {
   const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === "Escape") fn?.(event)
+    if (event.key !== "Escape") return
+    if (event.isComposing) return
+    fn?.(event)
   }
+
   return addDomEvent(getDocument(node), "keydown", handleKeyDown, { capture: true })
 }

package/src/index.ts

@@ -1,7 +1,7 @@
-export * from "./dismissable-layer"
 export type {
-  InteractOutsideEvent,
-  PointerDownOutsideEvent,
   FocusOutsideEvent,
+  InteractOutsideEvent,
   InteractOutsideHandlers,
+  PointerDownOutsideEvent,
 } from "@zag-js/interact-outside"
+export * from "./dismissable-layer"

package/src/pointer-event-outside.ts

@@ -1,4 +1,4 @@
-import { getDocument } from "@zag-js/dom-query"
+import { getDocument, setStyle, waitForElements } from "@zag-js/dom-query"
 import { layerStack } from "./layer-stack"
 
 let originalBodyPointerEvents: string
@@ -13,21 +13,33 @@ export function clearPointerEvent(node: HTMLElement) {
   node.style.pointerEvents = ""
 }
 
-const DATA_ATTR = "data-inert"
-
-export function disablePointerEventsOutside(node: HTMLElement) {
+export function disablePointerEventsOutside(node: HTMLElement, peristentElements?: Array<() => Element | null>) {
   const doc = getDocument(node)
 
-  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
+  const cleanups: VoidFunction[] = []
+
+  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
     originalBodyPointerEvents = document.body.style.pointerEvents
-    doc.body.style.pointerEvents = "none"
-    doc.body.setAttribute(DATA_ATTR, "")
+    queueMicrotask(() => {
+      doc.body.style.pointerEvents = "none"
+      doc.body.setAttribute("data-inert", "")
+    })
+  }
+
+  if (peristentElements) {
+    const persistedCleanup = waitForElements(peristentElements, (el) => {
+      cleanups.push(setStyle(el, { pointerEvents: "auto" }))
+    })
+    cleanups.push(persistedCleanup)
   }
 
   return () => {
     if (layerStack.hasPointerBlockingLayer()) return
-    doc.body.style.pointerEvents = originalBodyPointerEvents
-    doc.body.removeAttribute(DATA_ATTR)
-    if (doc.body.style.length === 0) doc.body.removeAttribute("style")
+    queueMicrotask(() => {
+      doc.body.style.pointerEvents = originalBodyPointerEvents
+      doc.body.removeAttribute("data-inert")
+      if (doc.body.style.length === 0) doc.body.removeAttribute("style")
+    })
+    cleanups.forEach((fn) => fn())
   }
 }