@zag-js/dismissable 0.10.2 → 0.10.4

package/dist/dismissable-layer.d.ts

@@ -1,18 +1,16 @@
-import { InteractOutsideHandlers } from '@zag-js/interact-outside';
-
+import { InteractOutsideHandlers } from "@zag-js/interact-outside";
 type MaybeElement = HTMLElement | null;
 type Container = MaybeElement | Array<MaybeElement>;
 type NodeOrFn = MaybeElement | (() => MaybeElement);
-type DismissableElementHandlers = InteractOutsideHandlers & {
+export type DismissableElementHandlers = InteractOutsideHandlers & {
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
 };
-type DismissableElementOptions = DismissableElementHandlers & {
+export type DismissableElementOptions = DismissableElementHandlers & {
     debug?: boolean;
     pointerBlocking?: boolean;
     onDismiss: () => void;
     exclude?: Container | (() => Container);
     defer?: boolean;
 };
-declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
-
-export { DismissableElementHandlers, DismissableElementOptions, trackDismissableElement };
+export declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
+export {};

package/dist/dismissable-layer.js

@@ -1,152 +1,26 @@
-"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/dismissable-layer.ts
-var dismissable_layer_exports = {};
-__export(dismissable_layer_exports, {
-  trackDismissableElement: () => trackDismissableElement
-});
-module.exports = __toCommonJS(dismissable_layer_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");
-
-// 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);
-}
+'use strict';
 
-// 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) {
-    this.layers.push(layer);
-  },
-  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);
-  },
-  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);
-  }
-};
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// 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");
-  };
-}
+const domQuery = require('@zag-js/dom-query');
+const interactOutside = require('@zag-js/interact-outside');
+const utils = require('@zag-js/utils');
+const escapeKeydown = require('./escape-keydown.js');
+const layerStack = require('./layer-stack.js');
+const pointerEventOutside = require('./pointer-event-outside.js');
 
-// src/dismissable-layer.ts
 function trackDismissableElementImpl(node, options) {
   if (!node) {
-    (0, import_utils.warn)("[@zag-js/dismissable] node is `null` or `undefined`");
+    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();
+  layerStack.layerStack.add(layer);
+  pointerEventOutside.assignPointerEventToLayers();
   function onPointerDownOutside(event) {
-    const target = (0, import_dom_query4.getEventTarget)(event.detail.originalEvent);
-    if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
+    const target = domQuery.getEventTarget(event.detail.originalEvent);
+    if (layerStack.layerStack.isBelowPointerBlockingLayer(node) || layerStack.layerStack.isInBranch(target))
       return;
     options.onPointerDownOutside?.(event);
     options.onInteractOutside?.(event);
@@ -158,8 +32,8 @@ function trackDismissableElementImpl(node, options) {
     onDismiss?.();
   }
   function onFocusOutside(event) {
-    const target = (0, import_dom_query4.getEventTarget)(event.detail.originalEvent);
-    if (layerStack.isInBranch(target))
+    const target = domQuery.getEventTarget(event.detail.originalEvent);
+    if (layerStack.layerStack.isInBranch(target))
       return;
     options.onFocusOutside?.(event);
     options.onInteractOutside?.(event);
@@ -171,7 +45,7 @@ function trackDismissableElementImpl(node, options) {
     onDismiss?.();
   }
   function onEscapeKeyDown(event) {
-    if (!layerStack.isTopMost(node))
+    if (!layerStack.layerStack.isTopMost(node))
       return;
     options.onEscapeKeyDown?.(event);
     if (!event.defaultPrevented && onDismiss) {
@@ -184,23 +58,23 @@ function trackDismissableElementImpl(node, options) {
       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);
+    return _containers.some((node2) => domQuery.contains(node2, target)) || layerStack.layerStack.isInNestedLayer(node, target);
   }
   const cleanups = [
-    pointerBlocking ? disablePointerEventsOutside(node) : void 0,
-    trackEscapeKeydown(node, onEscapeKeyDown),
-    (0, import_interact_outside.trackInteractOutside)(node, { exclude, onFocusOutside, onPointerDownOutside })
+    pointerBlocking ? pointerEventOutside.disablePointerEventsOutside(node) : void 0,
+    escapeKeydown.trackEscapeKeydown(node, onEscapeKeyDown),
+    interactOutside.trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
   ];
   return () => {
-    layerStack.remove(node);
-    assignPointerEventToLayers();
-    clearPointerEvent(node);
+    layerStack.layerStack.remove(node);
+    pointerEventOutside.assignPointerEventToLayers();
+    pointerEventOutside.clearPointerEvent(node);
     cleanups.forEach((fn) => fn?.());
   };
 }
 function trackDismissableElement(nodeOrFn, options) {
   const { defer } = options;
-  const func = defer ? import_dom_query4.raf : (v) => v();
+  const func = defer ? domQuery.raf : (v) => v();
   const cleanups = [];
   cleanups.push(
     func(() => {
@@ -212,7 +86,5 @@ function trackDismissableElement(nodeOrFn, options) {
     cleanups.forEach((fn) => fn?.());
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  trackDismissableElement
-});
+
+exports.trackDismissableElement = trackDismissableElement;

package/dist/dismissable-layer.mjs

@@ -1,9 +1,86 @@
-import {
-  trackDismissableElement
-} from "./chunk-HTX46HNU.mjs";
-import "./chunk-BBFIKTYR.mjs";
-import "./chunk-C5KU67MN.mjs";
-import "./chunk-G4GHYT27.mjs";
-export {
-  trackDismissableElement
-};
+import { raf, getEventTarget, contains } from '@zag-js/dom-query';
+import { trackInteractOutside } from '@zag-js/interact-outside';
+import { warn } from '@zag-js/utils';
+import { trackEscapeKeydown } from './escape-keydown.mjs';
+import { layerStack } from './layer-stack.mjs';
+import { assignPointerEventToLayers, disablePointerEventsOutside, clearPointerEvent } from './pointer-event-outside.mjs';
+
+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) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
+  }
+  const cleanups = [
+    pointerBlocking ? disablePointerEventsOutside(node) : void 0,
+    trackEscapeKeydown(node, onEscapeKeyDown),
+    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
+  ];
+  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 = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
+      cleanups.push(trackDismissableElementImpl(node, options));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+
+export { trackDismissableElement };

package/dist/escape-keydown.d.ts

@@ -1,3 +1 @@
-declare function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void): () => void;
-
-export { trackEscapeKeydown };
+export declare function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void): () => void;

package/dist/escape-keydown.js

@@ -1,38 +1,16 @@
-"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);
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domEvent = require('@zag-js/dom-event');
+const domQuery = require('@zag-js/dom-query');
 
-// src/escape-keydown.ts
-var escape_keydown_exports = {};
-__export(escape_keydown_exports, {
-  trackEscapeKeydown: () => trackEscapeKeydown
-});
-module.exports = __toCommonJS(escape_keydown_exports);
-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);
+  return domEvent.addDomEvent(domQuery.getDocument(node), "keydown", handleKeyDown);
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  trackEscapeKeydown
-});
+
+exports.trackEscapeKeydown = trackEscapeKeydown;

package/dist/escape-keydown.mjs

@@ -1,6 +1,12 @@
-import {
-  trackEscapeKeydown
-} from "./chunk-BBFIKTYR.mjs";
-export {
-  trackEscapeKeydown
-};
+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);
+}
+
+export { trackEscapeKeydown };

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { DismissableElementHandlers, DismissableElementOptions, trackDismissableElement } from './dismissable-layer.js';
-export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+export * from "./dismissable-layer";
+export type { InteractOutsideEvent, PointerDownOutsideEvent, FocusOutsideEvent } from "@zag-js/interact-outside";

package/dist/index.js

@@ -1,220 +1,9 @@
-"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);
+'use strict';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  trackDismissableElement: () => trackDismissableElement
-});
-module.exports = __toCommonJS(src_exports);
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// 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");
+const dismissableLayer = require('./dismissable-layer.js');
 
-// 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);
-}
 
-// 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) {
-    this.layers.push(layer);
-  },
-  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);
-  },
-  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 })
-  ];
-  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 = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
-      cleanups.push(trackDismissableElementImpl(node, options));
-    })
-  );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  trackDismissableElement
-});
+exports.trackDismissableElement = dismissableLayer.trackDismissableElement;

package/dist/index.mjs

@@ -1,9 +1 @@
-import {
-  trackDismissableElement
-} from "./chunk-HTX46HNU.mjs";
-import "./chunk-BBFIKTYR.mjs";
-import "./chunk-C5KU67MN.mjs";
-import "./chunk-G4GHYT27.mjs";
-export {
-  trackDismissableElement
-};
+export { trackDismissableElement } from './dismissable-layer.mjs';

package/dist/layer-stack.d.ts

@@ -1,9 +1,9 @@
-type Layer = {
+export type Layer = {
     dismiss: VoidFunction;
     node: HTMLElement;
     pointerBlocking?: boolean;
 };
-declare const layerStack: {
+export declare const layerStack: {
     layers: Layer[];
     branches: HTMLElement[];
     count(): number;
@@ -23,5 +23,3 @@ declare const layerStack: {
     dismiss(node: HTMLElement): void;
     clear(): void;
 };
-
-export { Layer, layerStack };

package/dist/layer-stack.js

@@ -1,30 +1,10 @@
-"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);
+'use strict';
 
-// src/layer-stack.ts
-var layer_stack_exports = {};
-__export(layer_stack_exports, {
-  layerStack: () => layerStack
-});
-module.exports = __toCommonJS(layer_stack_exports);
-var import_dom_query = require("@zag-js/dom-query");
-var layerStack = {
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domQuery = require('@zag-js/dom-query');
+
+const layerStack = {
   layers: [],
   branches: [],
   count() {
@@ -52,10 +32,10 @@ var layerStack = {
     return Array.from(this.layers).slice(this.indexOf(node) + 1);
   },
   isInNestedLayer(node, target) {
-    return this.getNestedLayers(node).some((layer) => (0, import_dom_query.contains)(layer.node, target));
+    return this.getNestedLayers(node).some((layer) => domQuery.contains(layer.node, target));
   },
   isInBranch(target) {
-    return Array.from(this.branches).some((branch) => (0, import_dom_query.contains)(branch, target));
+    return Array.from(this.branches).some((branch) => domQuery.contains(branch, target));
   },
   add(layer) {
     this.layers.push(layer);
@@ -88,7 +68,5 @@ var layerStack = {
     this.remove(this.layers[0].node);
   }
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  layerStack
-});
+
+exports.layerStack = layerStack;

package/dist/layer-stack.mjs

@@ -1,6 +1,68 @@
-import {
-  layerStack
-} from "./chunk-G4GHYT27.mjs";
-export {
-  layerStack
+import { contains } from '@zag-js/dom-query';
+
+const 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) {
+    this.layers.push(layer);
+  },
+  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);
+  },
+  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);
+  }
 };
+
+export { layerStack };

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

@@ -1,5 +1,3 @@
-declare function assignPointerEventToLayers(): void;
-declare function clearPointerEvent(node: HTMLElement): void;
-declare function disablePointerEventsOutside(node: HTMLElement): () => void;
-
-export { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside };
+export declare function assignPointerEventToLayers(): void;
+export declare function clearPointerEvent(node: HTMLElement): void;
+export declare function disablePointerEventsOutside(node: HTMLElement): () => void;

package/dist/pointer-event-outside.js

@@ -1,119 +1,29 @@
-"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);
+'use strict';
 
-// src/pointer-event-outside.ts
-var pointer_event_outside_exports = {};
-__export(pointer_event_outside_exports, {
-  assignPointerEventToLayers: () => assignPointerEventToLayers,
-  clearPointerEvent: () => clearPointerEvent,
-  disablePointerEventsOutside: () => disablePointerEventsOutside
-});
-module.exports = __toCommonJS(pointer_event_outside_exports);
-var import_dom_query2 = require("@zag-js/dom-query");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/layer-stack.ts
-var import_dom_query = 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_query.contains)(layer.node, target));
-  },
-  isInBranch(target) {
-    return Array.from(this.branches).some((branch) => (0, import_dom_query.contains)(branch, target));
-  },
-  add(layer) {
-    this.layers.push(layer);
-  },
-  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);
-  },
-  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);
-  }
-};
+const domQuery = require('@zag-js/dom-query');
+const layerStack = require('./layer-stack.js');
 
-// src/pointer-event-outside.ts
-var originalBodyPointerEvents;
+let originalBodyPointerEvents;
 function assignPointerEventToLayers() {
-  layerStack.layers.forEach(({ node }) => {
-    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+  layerStack.layerStack.layers.forEach(({ node }) => {
+    node.style.pointerEvents = layerStack.layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
   });
 }
 function clearPointerEvent(node) {
   node.style.pointerEvents = "";
 }
-var DATA_ATTR = "data-inert";
+const DATA_ATTR = "data-inert";
 function disablePointerEventsOutside(node) {
-  const doc = (0, import_dom_query2.getDocument)(node);
-  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
+  const doc = domQuery.getDocument(node);
+  if (layerStack.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())
+    if (layerStack.layerStack.hasPointerBlockingLayer())
       return;
     doc.body.style.pointerEvents = originalBodyPointerEvents;
     doc.body.removeAttribute(DATA_ATTR);
@@ -121,9 +31,7 @@ function disablePointerEventsOutside(node) {
       doc.body.removeAttribute("style");
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  assignPointerEventToLayers,
-  clearPointerEvent,
-  disablePointerEventsOutside
-});
+
+exports.assignPointerEventToLayers = assignPointerEventToLayers;
+exports.clearPointerEvent = clearPointerEvent;
+exports.disablePointerEventsOutside = disablePointerEventsOutside;

package/dist/pointer-event-outside.mjs

@@ -1,11 +1,31 @@
-import {
-  assignPointerEventToLayers,
-  clearPointerEvent,
-  disablePointerEventsOutside
-} from "./chunk-C5KU67MN.mjs";
-import "./chunk-G4GHYT27.mjs";
-export {
-  assignPointerEventToLayers,
-  clearPointerEvent,
-  disablePointerEventsOutside
-};
+import { getDocument } from '@zag-js/dom-query';
+import { layerStack } from './layer-stack.mjs';
+
+let originalBodyPointerEvents;
+function assignPointerEventToLayers() {
+  layerStack.layers.forEach(({ node }) => {
+    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+  });
+}
+function clearPointerEvent(node) {
+  node.style.pointerEvents = "";
+}
+const DATA_ATTR = "data-inert";
+function disablePointerEventsOutside(node) {
+  const doc = 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");
+  };
+}
+
+export { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/dismissable",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Dismissable layer utilities for the DOM",
   "keywords": [
     "js",
@@ -24,10 +24,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@zag-js/interact-outside": "0.10.2",
-    "@zag-js/dom-query": "0.10.2",
-    "@zag-js/dom-event": "0.10.2",
-    "@zag-js/utils": "0.10.2"
+    "@zag-js/interact-outside": "0.10.4",
+    "@zag-js/dom-query": "0.10.4",
+    "@zag-js/dom-event": "0.10.4",
+    "@zag-js/utils": "0.10.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -48,9 +48,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build-fast": "tsup src",
-    "start": "pnpm build --watch",
-    "build": "tsup src --dts",
+    "build": "vite build -c ../../../vite.config.ts",
     "test": "jest --config ../../../jest.config.js --rootDir tests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand -u",

package/dist/chunk-BBFIKTYR.mjs

@@ -1,14 +0,0 @@
-// 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);
-}
-
-export {
-  trackEscapeKeydown
-};

package/dist/chunk-C5KU67MN.mjs

@@ -1,38 +0,0 @@
-import {
-  layerStack
-} from "./chunk-G4GHYT27.mjs";
-
-// src/pointer-event-outside.ts
-import { getDocument } 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 = 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");
-  };
-}
-
-export {
-  assignPointerEventToLayers,
-  clearPointerEvent,
-  disablePointerEventsOutside
-};

package/dist/chunk-G4GHYT27.mjs

@@ -1,70 +0,0 @@
-// 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) {
-    this.layers.push(layer);
-  },
-  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);
-  },
-  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);
-  }
-};
-
-export {
-  layerStack
-};

package/dist/chunk-HTX46HNU.mjs

@@ -1,99 +0,0 @@
-import {
-  trackEscapeKeydown
-} from "./chunk-BBFIKTYR.mjs";
-import {
-  assignPointerEventToLayers,
-  clearPointerEvent,
-  disablePointerEventsOutside
-} from "./chunk-C5KU67MN.mjs";
-import {
-  layerStack
-} from "./chunk-G4GHYT27.mjs";
-
-// src/dismissable-layer.ts
-import { contains, getEventTarget, raf } from "@zag-js/dom-query";
-import {
-  trackInteractOutside
-} from "@zag-js/interact-outside";
-import { warn } from "@zag-js/utils";
-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) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
-  }
-  const cleanups = [
-    pointerBlocking ? disablePointerEventsOutside(node) : void 0,
-    trackEscapeKeydown(node, onEscapeKeyDown),
-    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
-  ];
-  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 = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
-      cleanups.push(trackDismissableElementImpl(node, options));
-    })
-  );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
-}
-
-export {
-  trackDismissableElement
-};