@zag-js/dismissable 0.39.0 → 0.40.0

package/dist/index.js

@@ -76,7 +76,8 @@ var layerStack = {
     return Array.from(this.branches).some((branch) => (0, import_dom_query2.contains)(branch, target));
   },
   add(layer) {
-    this.layers.push(layer);
+    const num = this.layers.push(layer);
+    layer.node.style.setProperty("--stack-index", `${num}`);
   },
   addBranch(node) {
     this.branches.push(node);
@@ -90,6 +91,7 @@ var layerStack = {
       _layers.forEach((layer) => layer.dismiss());
     }
     this.layers.splice(index, 1);
+    node.style.removeProperty("--stack-index");
   },
   removeBranch(node) {
     const index = this.branches.indexOf(node);

package/dist/index.js.map

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

package/dist/index.mjs

@@ -52,7 +52,8 @@ var layerStack = {
     return Array.from(this.branches).some((branch) => contains(branch, target));
   },
   add(layer) {
-    this.layers.push(layer);
+    const num = this.layers.push(layer);
+    layer.node.style.setProperty("--stack-index", `${num}`);
   },
   addBranch(node) {
     this.branches.push(node);
@@ -66,6 +67,7 @@ var layerStack = {
       _layers.forEach((layer) => layer.dismiss());
     }
     this.layers.splice(index, 1);
+    node.style.removeProperty("--stack-index");
   },
   removeBranch(node) {
     const index = this.branches.indexOf(node);

package/dist/index.mjs.map

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

package/package.json

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

package/src/layer-stack.ts

@@ -42,7 +42,8 @@ export const layerStack = {
     return Array.from(this.branches).some((branch) => contains(branch, target))
   },
   add(layer: Layer) {
-    this.layers.push(layer)
+    const num = this.layers.push(layer)
+    layer.node.style.setProperty("--stack-index", `${num}`)
   },
   addBranch(node: HTMLElement) {
     this.branches.push(node)
@@ -58,6 +59,7 @@ export const layerStack = {
     }
     // remove this layer
     this.layers.splice(index, 1)
+    node.style.removeProperty("--stack-index")
   },
   removeBranch(node: HTMLElement) {
     const index = this.branches.indexOf(node)