@zag-js/dismissable 1.34.1 → 1.35.0

package/dist/dismissable-layer.d.mts

@@ -0,0 +1,61 @@
+import { InteractOutsideHandlers } from '@zag-js/interact-outside';
+import { MaybeFunction } from '@zag-js/utils';
+import { LayerDismissEvent, LayerType } from './layer-stack.mjs';
+
+type MaybeElement = HTMLElement | null;
+type Container = MaybeElement | Array<MaybeElement>;
+type NodeOrFn = MaybeFunction<MaybeElement>;
+interface DismissableElementHandlers extends InteractOutsideHandlers {
+    /**
+     * Function called when the escape key is pressed
+     */
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+    /**
+     * Function called when this layer is closed due to a parent layer being closed
+     */
+    onRequestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
+}
+interface PersistentElementOptions {
+    /**
+     * Returns the persistent elements that:
+     * - should not have pointer-events disabled
+     * - should not trigger the dismiss event
+     */
+    persistentElements?: Array<() => Element | null> | undefined;
+}
+interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
+    /**
+     * Whether to log debug information
+     */
+    debug?: boolean | undefined;
+    /**
+     * Whether to block pointer events outside the dismissable element
+     */
+    pointerBlocking?: boolean | undefined;
+    /**
+     * Function called when the dismissable element is dismissed
+     */
+    onDismiss: VoidFunction;
+    /**
+     * Exclude containers from the interact outside event
+     */
+    exclude?: MaybeFunction<Container> | undefined;
+    /**
+     * Defer the interact outside event to the next frame
+     */
+    defer?: boolean | undefined;
+    /**
+     * Whether to warn when the node is `null` or `undefined`
+     */
+    warnOnMissingNode?: boolean | undefined;
+    /**
+     * The type of layer being tracked
+     */
+    type?: LayerType | undefined;
+}
+declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
+declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
+    defer?: boolean | undefined;
+}): () => void;
+
+export { type DismissableElementHandlers, type DismissableElementOptions, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };

package/dist/dismissable-layer.d.ts

@@ -0,0 +1,61 @@
+import { InteractOutsideHandlers } from '@zag-js/interact-outside';
+import { MaybeFunction } from '@zag-js/utils';
+import { LayerDismissEvent, LayerType } from './layer-stack.js';
+
+type MaybeElement = HTMLElement | null;
+type Container = MaybeElement | Array<MaybeElement>;
+type NodeOrFn = MaybeFunction<MaybeElement>;
+interface DismissableElementHandlers extends InteractOutsideHandlers {
+    /**
+     * Function called when the escape key is pressed
+     */
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+    /**
+     * Function called when this layer is closed due to a parent layer being closed
+     */
+    onRequestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
+}
+interface PersistentElementOptions {
+    /**
+     * Returns the persistent elements that:
+     * - should not have pointer-events disabled
+     * - should not trigger the dismiss event
+     */
+    persistentElements?: Array<() => Element | null> | undefined;
+}
+interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
+    /**
+     * Whether to log debug information
+     */
+    debug?: boolean | undefined;
+    /**
+     * Whether to block pointer events outside the dismissable element
+     */
+    pointerBlocking?: boolean | undefined;
+    /**
+     * Function called when the dismissable element is dismissed
+     */
+    onDismiss: VoidFunction;
+    /**
+     * Exclude containers from the interact outside event
+     */
+    exclude?: MaybeFunction<Container> | undefined;
+    /**
+     * Defer the interact outside event to the next frame
+     */
+    defer?: boolean | undefined;
+    /**
+     * Whether to warn when the node is `null` or `undefined`
+     */
+    warnOnMissingNode?: boolean | undefined;
+    /**
+     * The type of layer being tracked
+     */
+    type?: LayerType | undefined;
+}
+declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
+declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
+    defer?: boolean | undefined;
+}): () => void;
+
+export { type DismissableElementHandlers, type DismissableElementOptions, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };

package/dist/dismissable-layer.js

@@ -0,0 +1,135 @@
+"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, {
+  trackDismissableBranch: () => trackDismissableBranch,
+  trackDismissableElement: () => trackDismissableElement
+});
+module.exports = __toCommonJS(dismissable_layer_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_interact_outside = require("@zag-js/interact-outside");
+var import_utils = require("@zag-js/utils");
+var import_escape_keydown = require("./escape-keydown.cjs");
+var import_layer_stack = require("./layer-stack.cjs");
+var import_pointer_event_outside = require("./pointer-event-outside.cjs");
+function trackDismissableElementImpl(node, options) {
+  const { warnOnMissingNode = true } = options;
+  if (warnOnMissingNode && !node) {
+    (0, import_utils.warn)("[@zag-js/dismissable] node is `null` or `undefined`");
+    return;
+  }
+  if (!node) {
+    return;
+  }
+  const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug, type = "dialog" } = options;
+  const layer = { dismiss: onDismiss, node, type, pointerBlocking, requestDismiss: onRequestDismiss };
+  import_layer_stack.layerStack.add(layer);
+  (0, import_pointer_event_outside.assignPointerEventToLayers)();
+  function onPointerDownOutside(event) {
+    const target = (0, import_dom_query.getEventTarget)(event.detail.originalEvent);
+    if (import_layer_stack.layerStack.isBelowPointerBlockingLayer(node) || import_layer_stack.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_query.getEventTarget)(event.detail.originalEvent);
+    if (import_layer_stack.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 (!import_layer_stack.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_query.isHTMLElement);
+    if (persistentElements) _containers.push(...persistentElements);
+    return _containers.some((node2) => (0, import_dom_query.contains)(node2, target)) || import_layer_stack.layerStack.isInNestedLayer(node, target);
+  }
+  const cleanups = [
+    pointerBlocking ? (0, import_pointer_event_outside.disablePointerEventsOutside)(node, options.persistentElements) : void 0,
+    (0, import_escape_keydown.trackEscapeKeydown)(node, onEscapeKeyDown),
+    (0, import_interact_outside.trackInteractOutside)(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer })
+  ];
+  return () => {
+    import_layer_stack.layerStack.remove(node);
+    (0, import_pointer_event_outside.assignPointerEventToLayers)();
+    (0, import_pointer_event_outside.clearPointerEvent)(node);
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+function trackDismissableElement(nodeOrFn, options) {
+  const { defer } = options;
+  const func = defer ? import_dom_query.raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const node = (0, import_utils.isFunction)(nodeOrFn) ? nodeOrFn() : nodeOrFn;
+      cleanups.push(trackDismissableElementImpl(node, options));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+function trackDismissableBranch(nodeOrFn, options = {}) {
+  const { defer } = options;
+  const func = defer ? import_dom_query.raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const node = (0, import_utils.isFunction)(nodeOrFn) ? nodeOrFn() : nodeOrFn;
+      if (!node) {
+        (0, import_utils.warn)("[@zag-js/dismissable] branch node is `null` or `undefined`");
+        return;
+      }
+      import_layer_stack.layerStack.addBranch(node);
+      cleanups.push(() => {
+        import_layer_stack.layerStack.removeBranch(node);
+      });
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  trackDismissableBranch,
+  trackDismissableElement
+});

package/dist/dismissable-layer.mjs

@@ -0,0 +1,111 @@
+// src/dismissable-layer.ts
+import { contains, getEventTarget, isHTMLElement, raf } from "@zag-js/dom-query";
+import {
+  trackInteractOutside
+} from "@zag-js/interact-outside";
+import { isFunction, warn } from "@zag-js/utils";
+import { trackEscapeKeydown } from "./escape-keydown.mjs";
+import { layerStack } from "./layer-stack.mjs";
+import { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside } from "./pointer-event-outside.mjs";
+function trackDismissableElementImpl(node, options) {
+  const { warnOnMissingNode = true } = options;
+  if (warnOnMissingNode && !node) {
+    warn("[@zag-js/dismissable] node is `null` or `undefined`");
+    return;
+  }
+  if (!node) {
+    return;
+  }
+  const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug, type = "dialog" } = options;
+  const layer = { dismiss: onDismiss, node, type, pointerBlocking, requestDismiss: onRequestDismiss };
+  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) => contains(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
+};

package/dist/escape-keydown.d.mts

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

package/dist/escape-keydown.d.ts

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

package/dist/escape-keydown.js

@@ -0,0 +1,38 @@
+"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);
+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_query.addDomEvent)((0, import_dom_query.getDocument)(node), "keydown", handleKeyDown, { capture: true });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  trackEscapeKeydown
+});

package/dist/escape-keydown.mjs

@@ -0,0 +1,13 @@
+// src/escape-keydown.ts
+import { addDomEvent, 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 });
+}
+export {
+  trackEscapeKeydown
+};

package/dist/index.d.mts

@@ -1,70 +1,4 @@
-import { InteractOutsideHandlers } from '@zag-js/interact-outside';
 export { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from '@zag-js/interact-outside';
-import { MaybeFunction } from '@zag-js/utils';
-
-type LayerType = "dialog" | "popover" | "menu" | "listbox" | (string & {});
-type LayerDismissEventDetail = {
-    originalLayer: HTMLElement;
-    targetLayer: HTMLElement | undefined;
-    originalIndex: number;
-    targetIndex: number;
-};
-type LayerDismissEvent = CustomEvent<LayerDismissEventDetail>;
-
-type MaybeElement = HTMLElement | null;
-type Container = MaybeElement | Array<MaybeElement>;
-type NodeOrFn = MaybeFunction<MaybeElement>;
-interface DismissableElementHandlers extends InteractOutsideHandlers {
-    /**
-     * Function called when the escape key is pressed
-     */
-    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
-    /**
-     * Function called when this layer is closed due to a parent layer being closed
-     */
-    onRequestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
-}
-interface PersistentElementOptions {
-    /**
-     * Returns the persistent elements that:
-     * - should not have pointer-events disabled
-     * - should not trigger the dismiss event
-     */
-    persistentElements?: Array<() => Element | null> | undefined;
-}
-interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
-    /**
-     * Whether to log debug information
-     */
-    debug?: boolean | undefined;
-    /**
-     * Whether to block pointer events outside the dismissable element
-     */
-    pointerBlocking?: boolean | undefined;
-    /**
-     * Function called when the dismissable element is dismissed
-     */
-    onDismiss: VoidFunction;
-    /**
-     * Exclude containers from the interact outside event
-     */
-    exclude?: MaybeFunction<Container> | undefined;
-    /**
-     * Defer the interact outside event to the next frame
-     */
-    defer?: boolean | undefined;
-    /**
-     * Whether to warn when the node is `null` or `undefined`
-     */
-    warnOnMissingNode?: boolean | undefined;
-    /**
-     * The type of layer being tracked
-     */
-    type?: LayerType | undefined;
-}
-declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
-declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
-    defer?: boolean | undefined;
-}): () => void;
-
-export { type DismissableElementHandlers, type DismissableElementOptions, type LayerType, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };
+export { DismissableElementHandlers, DismissableElementOptions, PersistentElementOptions, trackDismissableBranch, trackDismissableElement } from './dismissable-layer.mjs';
+export { LayerType } from './layer-stack.mjs';
+import '@zag-js/utils';

package/dist/index.d.ts

@@ -1,70 +1,4 @@
-import { InteractOutsideHandlers } from '@zag-js/interact-outside';
 export { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from '@zag-js/interact-outside';
-import { MaybeFunction } from '@zag-js/utils';
-
-type LayerType = "dialog" | "popover" | "menu" | "listbox" | (string & {});
-type LayerDismissEventDetail = {
-    originalLayer: HTMLElement;
-    targetLayer: HTMLElement | undefined;
-    originalIndex: number;
-    targetIndex: number;
-};
-type LayerDismissEvent = CustomEvent<LayerDismissEventDetail>;
-
-type MaybeElement = HTMLElement | null;
-type Container = MaybeElement | Array<MaybeElement>;
-type NodeOrFn = MaybeFunction<MaybeElement>;
-interface DismissableElementHandlers extends InteractOutsideHandlers {
-    /**
-     * Function called when the escape key is pressed
-     */
-    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
-    /**
-     * Function called when this layer is closed due to a parent layer being closed
-     */
-    onRequestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
-}
-interface PersistentElementOptions {
-    /**
-     * Returns the persistent elements that:
-     * - should not have pointer-events disabled
-     * - should not trigger the dismiss event
-     */
-    persistentElements?: Array<() => Element | null> | undefined;
-}
-interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
-    /**
-     * Whether to log debug information
-     */
-    debug?: boolean | undefined;
-    /**
-     * Whether to block pointer events outside the dismissable element
-     */
-    pointerBlocking?: boolean | undefined;
-    /**
-     * Function called when the dismissable element is dismissed
-     */
-    onDismiss: VoidFunction;
-    /**
-     * Exclude containers from the interact outside event
-     */
-    exclude?: MaybeFunction<Container> | undefined;
-    /**
-     * Defer the interact outside event to the next frame
-     */
-    defer?: boolean | undefined;
-    /**
-     * Whether to warn when the node is `null` or `undefined`
-     */
-    warnOnMissingNode?: boolean | undefined;
-    /**
-     * The type of layer being tracked
-     */
-    type?: LayerType | undefined;
-}
-declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
-declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
-    defer?: boolean | undefined;
-}): () => void;
-
-export { type DismissableElementHandlers, type DismissableElementOptions, type LayerType, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };
+export { DismissableElementHandlers, DismissableElementOptions, PersistentElementOptions, trackDismissableBranch, trackDismissableElement } from './dismissable-layer.js';
+export { LayerType } from './layer-stack.js';
+import '@zag-js/utils';