@zag-js/dismissable 0.2.0 → 0.2.1

package/dist/chunk-3ZVQOINJ.mjs

@@ -0,0 +1,31 @@
+// ../core/src/functions.ts
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+
+// ../core/src/guard.ts
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+
+// ../dom/src/listener.ts
+var isRef = (v) => hasProp(v, "current");
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
+
+// src/escape-keydown.ts
+function trackEscapeKeydown(fn) {
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape")
+      fn == null ? void 0 : fn(event);
+  };
+  return addDomEvent(document, "keydown", handleKeyDown);
+}
+
+export {
+  trackEscapeKeydown
+};

package/dist/chunk-6YFBZALL.mjs

@@ -0,0 +1,38 @@
+import {
+  getDocument,
+  layerStack
+} from "./chunk-PFLX3TD5.mjs";
+
+// src/pointer-event-outside.ts
+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-PFLX3TD5.mjs

@@ -0,0 +1,102 @@
+// ../dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getEventTarget(event) {
+  var _a, _b;
+  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
+}
+function contains(parent, child) {
+  if (!parent)
+    return false;
+  return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
+}
+function isHTMLElement(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
+
+// src/layer-stack.ts
+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) {
+    var _a;
+    const index = this.indexOf(node);
+    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf((_a = this.topMostPointerBlockingLayer()) == null ? void 0 : _a.node) : -1;
+    return index < highestBlockingIndex;
+  },
+  isTopMost(node) {
+    const layer = this.layers[this.count() - 1];
+    return (layer == null ? void 0 : 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) {
+    var _a;
+    (_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
+  },
+  clear() {
+    this.remove(this.layers[0].node);
+  }
+};
+
+export {
+  getDocument,
+  getEventTarget,
+  contains,
+  layerStack
+};

package/dist/chunk-PYR5T5VL.mjs

@@ -0,0 +1,97 @@
+import {
+  trackEscapeKeydown
+} from "./chunk-3ZVQOINJ.mjs";
+import {
+  assignPointerEventToLayers,
+  clearPointerEvent,
+  disablePointerEventsOutside
+} from "./chunk-6YFBZALL.mjs";
+import {
+  contains,
+  getEventTarget,
+  layerStack
+} from "./chunk-PFLX3TD5.mjs";
+
+// ../core/src/warning.ts
+function warn(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && process.env.NODE_ENV !== "production") {
+    console.warn(m);
+  }
+}
+
+// src/dismissable-layer.ts
+import {
+  trackInteractOutside
+} from "@zag-js/interact-outside";
+function trackDismissableElement(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) {
+    var _a, _b;
+    const target = getEventTarget(event.detail.originalEvent);
+    if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
+      return;
+    (_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
+    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
+    if (event.defaultPrevented)
+      return;
+    if (debug) {
+      console.log("onPointerDownOutside:", event.detail.originalEvent);
+    }
+    onDismiss == null ? void 0 : onDismiss();
+  }
+  function onFocusOutside(event) {
+    var _a, _b;
+    const target = getEventTarget(event.detail.originalEvent);
+    if (layerStack.isInBranch(target))
+      return;
+    (_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
+    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
+    if (event.defaultPrevented)
+      return;
+    if (debug) {
+      console.log("onFocusOutside:", event.detail.originalEvent);
+    }
+    onDismiss == null ? void 0 : onDismiss();
+  }
+  function onEscapeKeyDown(event) {
+    var _a;
+    if (!layerStack.isTopMost(node))
+      return;
+    (_a = options.onEscapeKeyDown) == null ? void 0 : _a.call(options, 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(onEscapeKeyDown),
+    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
+  ];
+  return () => {
+    layerStack.remove(node);
+    assignPointerEventToLayers();
+    clearPointerEvent(node);
+    cleanups.forEach((fn) => fn == null ? void 0 : fn());
+  };
+}
+
+export {
+  trackDismissableElement
+};

package/dist/dismissable-layer.d.ts

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

package/dist/dismissable-layer.js

@@ -0,0 +1,261 @@
+"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);
+
+// ../core/src/functions.ts
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+
+// ../core/src/guard.ts
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+
+// ../core/src/warning.ts
+function warn(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && process.env.NODE_ENV !== "production") {
+    console.warn(m);
+  }
+}
+
+// ../dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getEventTarget(event) {
+  var _a, _b;
+  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
+}
+function contains(parent, child) {
+  if (!parent)
+    return false;
+  return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
+}
+function isHTMLElement(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
+
+// ../dom/src/listener.ts
+var isRef = (v) => hasProp(v, "current");
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
+
+// src/dismissable-layer.ts
+var import_interact_outside = require("@zag-js/interact-outside");
+
+// src/escape-keydown.ts
+function trackEscapeKeydown(fn) {
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape")
+      fn == null ? void 0 : fn(event);
+  };
+  return addDomEvent(document, "keydown", handleKeyDown);
+}
+
+// src/layer-stack.ts
+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) {
+    var _a;
+    const index = this.indexOf(node);
+    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf((_a = this.topMostPointerBlockingLayer()) == null ? void 0 : _a.node) : -1;
+    return index < highestBlockingIndex;
+  },
+  isTopMost(node) {
+    const layer = this.layers[this.count() - 1];
+    return (layer == null ? void 0 : 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) {
+    var _a;
+    (_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
+  },
+  clear() {
+    this.remove(this.layers[0].node);
+  }
+};
+
+// src/pointer-event-outside.ts
+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");
+  };
+}
+
+// src/dismissable-layer.ts
+function trackDismissableElement(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) {
+    var _a, _b;
+    const target = getEventTarget(event.detail.originalEvent);
+    if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
+      return;
+    (_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
+    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
+    if (event.defaultPrevented)
+      return;
+    if (debug) {
+      console.log("onPointerDownOutside:", event.detail.originalEvent);
+    }
+    onDismiss == null ? void 0 : onDismiss();
+  }
+  function onFocusOutside(event) {
+    var _a, _b;
+    const target = getEventTarget(event.detail.originalEvent);
+    if (layerStack.isInBranch(target))
+      return;
+    (_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
+    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
+    if (event.defaultPrevented)
+      return;
+    if (debug) {
+      console.log("onFocusOutside:", event.detail.originalEvent);
+    }
+    onDismiss == null ? void 0 : onDismiss();
+  }
+  function onEscapeKeyDown(event) {
+    var _a;
+    if (!layerStack.isTopMost(node))
+      return;
+    (_a = options.onEscapeKeyDown) == null ? void 0 : _a.call(options, 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(onEscapeKeyDown),
+    (0, import_interact_outside.trackInteractOutside)(node, { exclude, onFocusOutside, onPointerDownOutside })
+  ];
+  return () => {
+    layerStack.remove(node);
+    assignPointerEventToLayers();
+    clearPointerEvent(node);
+    cleanups.forEach((fn) => fn == null ? void 0 : fn());
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  trackDismissableElement
+});

package/dist/dismissable-layer.mjs

@@ -0,0 +1,9 @@
+import {
+  trackDismissableElement
+} from "./chunk-PYR5T5VL.mjs";
+import "./chunk-3ZVQOINJ.mjs";
+import "./chunk-6YFBZALL.mjs";
+import "./chunk-PFLX3TD5.mjs";
+export {
+  trackDismissableElement
+};

package/dist/escape-keydown.d.ts

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

package/dist/escape-keydown.js

@@ -0,0 +1,57 @@
+"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/escape-keydown.ts
+var escape_keydown_exports = {};
+__export(escape_keydown_exports, {
+  trackEscapeKeydown: () => trackEscapeKeydown
+});
+module.exports = __toCommonJS(escape_keydown_exports);
+
+// ../core/src/functions.ts
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+
+// ../core/src/guard.ts
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+
+// ../dom/src/listener.ts
+var isRef = (v) => hasProp(v, "current");
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
+
+// src/escape-keydown.ts
+function trackEscapeKeydown(fn) {
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape")
+      fn == null ? void 0 : fn(event);
+  };
+  return addDomEvent(document, "keydown", handleKeyDown);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  trackEscapeKeydown
+});

package/dist/escape-keydown.mjs

@@ -0,0 +1,6 @@
+import {
+  trackEscapeKeydown
+} from "./chunk-3ZVQOINJ.mjs";
+export {
+  trackEscapeKeydown
+};

package/dist/index.d.ts

@@ -1,15 +1,2 @@
-import { InteractOutsideHandlers } from '@zag-js/interact-outside';
-
-declare type Container = HTMLElement | null | Array<HTMLElement | null>;
-declare type DismissableElementHandlers = InteractOutsideHandlers & {
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
-};
-declare type DismissableElementOptions = DismissableElementHandlers & {
-    debug?: boolean;
-    pointerBlocking?: boolean;
-    onDismiss: () => void;
-    exclude?: Container | (() => Container);
-};
-declare function trackDismissableElement(node: HTMLElement | null, options: DismissableElementOptions): (() => void) | undefined;
-
-export { DismissableElementHandlers, DismissableElementOptions, trackDismissableElement };
+export { DismissableElementHandlers, DismissableElementOptions, trackDismissableElement } from './dismissable-layer.js';
+import '@zag-js/interact-outside';

package/dist/index.js

@@ -24,12 +24,25 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// ../dom/dist/index.mjs
+// ../core/src/functions.ts
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? res : void 0;
 };
+
+// ../core/src/guard.ts
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+
+// ../core/src/warning.ts
+function warn(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && process.env.NODE_ENV !== "production") {
+    console.warn(m);
+  }
+}
+
+// ../dom/src/query.ts
 function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
@@ -56,6 +69,8 @@ function contains(parent, child) {
 function isHTMLElement(v) {
   return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
 }
+
+// ../dom/src/listener.ts
 var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
@@ -68,15 +83,6 @@ function addDomEvent(target, eventName, handler, options) {
 // src/dismissable-layer.ts
 var import_interact_outside = require("@zag-js/interact-outside");
 
-// ../core/dist/index.mjs
-function warn(...a) {
-  const m = a.length === 1 ? a[0] : a[1];
-  const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
-    console.warn(m);
-  }
-}
-
 // src/escape-keydown.ts
 function trackEscapeKeydown(fn) {
   const handleKeyDown = (event) => {

package/dist/index.mjs

@@ -1,230 +1,9 @@
-// ../dom/dist/index.mjs
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
-}
-function getDocument(el) {
-  var _a;
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
-}
-function getEventTarget(event) {
-  var _a, _b;
-  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
-}
-function contains(parent, child) {
-  if (!parent)
-    return false;
-  return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
-}
-function isHTMLElement(v) {
-  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
-}
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node == null ? void 0 : node.addEventListener(eventName, handler, options);
-  return () => {
-    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
-  };
-}
-
-// src/dismissable-layer.ts
 import {
-  trackInteractOutside
-} from "@zag-js/interact-outside";
-
-// ../core/dist/index.mjs
-function warn(...a) {
-  const m = a.length === 1 ? a[0] : a[1];
-  const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
-    console.warn(m);
-  }
-}
-
-// src/escape-keydown.ts
-function trackEscapeKeydown(fn) {
-  const handleKeyDown = (event) => {
-    if (event.key === "Escape")
-      fn == null ? void 0 : fn(event);
-  };
-  return addDomEvent(document, "keydown", handleKeyDown);
-}
-
-// src/layer-stack.ts
-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) {
-    var _a;
-    const index = this.indexOf(node);
-    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf((_a = this.topMostPointerBlockingLayer()) == null ? void 0 : _a.node) : -1;
-    return index < highestBlockingIndex;
-  },
-  isTopMost(node) {
-    const layer = this.layers[this.count() - 1];
-    return (layer == null ? void 0 : 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) {
-    var _a;
-    (_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
-  },
-  clear() {
-    this.remove(this.layers[0].node);
-  }
-};
-
-// src/pointer-event-outside.ts
-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");
-  };
-}
-
-// src/dismissable-layer.ts
-function trackDismissableElement(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) {
-    var _a, _b;
-    const target = getEventTarget(event.detail.originalEvent);
-    if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
-      return;
-    (_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
-    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
-    if (event.defaultPrevented)
-      return;
-    if (debug) {
-      console.log("onPointerDownOutside:", event.detail.originalEvent);
-    }
-    onDismiss == null ? void 0 : onDismiss();
-  }
-  function onFocusOutside(event) {
-    var _a, _b;
-    const target = getEventTarget(event.detail.originalEvent);
-    if (layerStack.isInBranch(target))
-      return;
-    (_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
-    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
-    if (event.defaultPrevented)
-      return;
-    if (debug) {
-      console.log("onFocusOutside:", event.detail.originalEvent);
-    }
-    onDismiss == null ? void 0 : onDismiss();
-  }
-  function onEscapeKeyDown(event) {
-    var _a;
-    if (!layerStack.isTopMost(node))
-      return;
-    (_a = options.onEscapeKeyDown) == null ? void 0 : _a.call(options, 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(onEscapeKeyDown),
-    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
-  ];
-  return () => {
-    layerStack.remove(node);
-    assignPointerEventToLayers();
-    clearPointerEvent(node);
-    cleanups.forEach((fn) => fn == null ? void 0 : fn());
-  };
-}
+  trackDismissableElement
+} from "./chunk-PYR5T5VL.mjs";
+import "./chunk-3ZVQOINJ.mjs";
+import "./chunk-6YFBZALL.mjs";
+import "./chunk-PFLX3TD5.mjs";
 export {
   trackDismissableElement
 };

package/dist/layer-stack.d.ts

@@ -0,0 +1,27 @@
+type Layer = {
+    dismiss: VoidFunction;
+    node: HTMLElement;
+    pointerBlocking?: boolean;
+};
+declare const layerStack: {
+    layers: Layer[];
+    branches: HTMLElement[];
+    count(): number;
+    pointerBlockingLayers(): Layer[];
+    topMostPointerBlockingLayer(): Layer | undefined;
+    hasPointerBlockingLayer(): boolean;
+    isBelowPointerBlockingLayer(node: HTMLElement): boolean;
+    isTopMost(node: HTMLElement | null): boolean;
+    getNestedLayers(node: HTMLElement): Layer[];
+    isInNestedLayer(node: HTMLElement, target: HTMLElement | EventTarget | null): boolean;
+    isInBranch(target: HTMLElement | EventTarget | null): boolean;
+    add(layer: Layer): void;
+    addBranch(node: HTMLElement): void;
+    remove(node: HTMLElement): void;
+    removeBranch(node: HTMLElement): void;
+    indexOf(node: HTMLElement | undefined): number;
+    dismiss(node: HTMLElement): void;
+    clear(): void;
+};
+
+export { Layer, layerStack };

package/dist/layer-stack.js

@@ -0,0 +1,107 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/layer-stack.ts
+var layer_stack_exports = {};
+__export(layer_stack_exports, {
+  layerStack: () => layerStack
+});
+module.exports = __toCommonJS(layer_stack_exports);
+
+// ../dom/src/query.ts
+function contains(parent, child) {
+  if (!parent)
+    return false;
+  return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
+}
+function isHTMLElement(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
+
+// src/layer-stack.ts
+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) {
+    var _a;
+    const index = this.indexOf(node);
+    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf((_a = this.topMostPointerBlockingLayer()) == null ? void 0 : _a.node) : -1;
+    return index < highestBlockingIndex;
+  },
+  isTopMost(node) {
+    const layer = this.layers[this.count() - 1];
+    return (layer == null ? void 0 : 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) {
+    var _a;
+    (_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
+  },
+  clear() {
+    this.remove(this.layers[0].node);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  layerStack
+});

package/dist/layer-stack.mjs

@@ -0,0 +1,6 @@
+import {
+  layerStack
+} from "./chunk-PFLX3TD5.mjs";
+export {
+  layerStack
+};

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

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

package/dist/pointer-event-outside.js

@@ -0,0 +1,153 @@
+"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/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);
+
+// ../dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function contains(parent, child) {
+  if (!parent)
+    return false;
+  return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
+}
+function isHTMLElement(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
+
+// src/layer-stack.ts
+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) {
+    var _a;
+    const index = this.indexOf(node);
+    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf((_a = this.topMostPointerBlockingLayer()) == null ? void 0 : _a.node) : -1;
+    return index < highestBlockingIndex;
+  },
+  isTopMost(node) {
+    const layer = this.layers[this.count() - 1];
+    return (layer == null ? void 0 : 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) {
+    var _a;
+    (_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
+  },
+  clear() {
+    this.remove(this.layers[0].node);
+  }
+};
+
+// src/pointer-event-outside.ts
+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");
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  assignPointerEventToLayers,
+  clearPointerEvent,
+  disablePointerEventsOutside
+});

package/dist/pointer-event-outside.mjs

@@ -0,0 +1,11 @@
+import {
+  assignPointerEventToLayers,
+  clearPointerEvent,
+  disablePointerEventsOutside
+} from "./chunk-6YFBZALL.mjs";
+import "./chunk-PFLX3TD5.mjs";
+export {
+  assignPointerEventToLayers,
+  clearPointerEvent,
+  disablePointerEventsOutside
+};

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@zag-js/dismissable",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Dismissable layer utilities for the DOM",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "keywords": [
     "js",
     "utils",
@@ -26,19 +23,32 @@
     "access": "public"
   },
   "dependencies": {
-    "@zag-js/interact-outside": "0.2.0"
+    "@zag-js/interact-outside": "0.2.1"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.2.0",
-    "@zag-js/utils": "0.2.0"
+    "clean-package": "2.2.0",
+    "@zag-js/dom-utils": "0.2.2",
+    "@zag-js/utils": "0.3.2"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/zag/issues"
   },
+  "clean-package": "../../../clean-package.config.json",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "build-fast": "tsup src",
     "start": "pnpm build --watch",
-    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "build": "tsup src --dts",
     "test": "jest --config ../../../jest.config.js --rootDir tests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand -u",