@zag-js/dismissable 1.34.1 → 1.35.0

package/dist/layer-stack.js

@@ -0,0 +1,156 @@
+"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);
+var import_dom_query = require("@zag-js/dom-query");
+var LAYER_REQUEST_DISMISS_EVENT = "layer:request-dismiss";
+var layerStack = {
+  layers: [],
+  branches: [],
+  recentlyRemoved: /* @__PURE__ */ new Set(),
+  count() {
+    return this.layers.length;
+  },
+  pointerBlockingLayers() {
+    return this.layers.filter((layer) => layer.pointerBlocking);
+  },
+  topMostPointerBlockingLayer() {
+    return [...this.pointerBlockingLayers()].slice(-1)[0];
+  },
+  hasPointerBlockingLayer() {
+    return this.pointerBlockingLayers().length > 0;
+  },
+  isBelowPointerBlockingLayer(node) {
+    const index = this.indexOf(node);
+    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
+    return index < highestBlockingIndex;
+  },
+  isTopMost(node) {
+    const layer = this.layers[this.count() - 1];
+    return layer?.node === node;
+  },
+  getNestedLayers(node) {
+    return Array.from(this.layers).slice(this.indexOf(node) + 1);
+  },
+  getLayersByType(type) {
+    return this.layers.filter((layer) => layer.type === type);
+  },
+  getNestedLayersByType(node, type) {
+    const index = this.indexOf(node);
+    if (index === -1) return [];
+    return this.layers.slice(index + 1).filter((layer) => layer.type === type);
+  },
+  getParentLayerOfType(node, type) {
+    const index = this.indexOf(node);
+    if (index <= 0) return void 0;
+    return this.layers.slice(0, index).reverse().find((layer) => layer.type === type);
+  },
+  countNestedLayersOfType(node, type) {
+    return this.getNestedLayersByType(node, type).length;
+  },
+  isInNestedLayer(node, target) {
+    const inNested = this.getNestedLayers(node).some((layer) => (0, import_dom_query.contains)(layer.node, target));
+    if (inNested) return true;
+    if (this.recentlyRemoved.size > 0) return true;
+    return false;
+  },
+  isInBranch(target) {
+    return Array.from(this.branches).some((branch) => (0, import_dom_query.contains)(branch, target));
+  },
+  add(layer) {
+    this.layers.push(layer);
+    this.syncLayers();
+  },
+  addBranch(node) {
+    this.branches.push(node);
+  },
+  remove(node) {
+    const index = this.indexOf(node);
+    if (index < 0) return;
+    this.recentlyRemoved.add(node);
+    (0, import_dom_query.nextTick)(() => this.recentlyRemoved.delete(node));
+    if (index < this.count() - 1) {
+      const _layers = this.getNestedLayers(node);
+      _layers.forEach((layer) => layerStack.dismiss(layer.node, node));
+    }
+    this.layers.splice(index, 1);
+    this.syncLayers();
+  },
+  removeBranch(node) {
+    const index = this.branches.indexOf(node);
+    if (index >= 0) this.branches.splice(index, 1);
+  },
+  syncLayers() {
+    this.layers.forEach((layer, index) => {
+      layer.node.style.setProperty("--layer-index", `${index}`);
+      layer.node.removeAttribute("data-nested");
+      layer.node.removeAttribute("data-has-nested");
+      const parentOfSameType = this.getParentLayerOfType(layer.node, layer.type);
+      if (parentOfSameType) {
+        layer.node.setAttribute("data-nested", layer.type);
+      }
+      const nestedCount = this.countNestedLayersOfType(layer.node, layer.type);
+      if (nestedCount > 0) {
+        layer.node.setAttribute("data-has-nested", layer.type);
+      }
+      layer.node.style.setProperty("--nested-layer-count", `${nestedCount}`);
+    });
+  },
+  indexOf(node) {
+    return this.layers.findIndex((layer) => layer.node === node);
+  },
+  dismiss(node, parent) {
+    const index = this.indexOf(node);
+    if (index === -1) return;
+    const layer = this.layers[index];
+    addListenerOnce(node, LAYER_REQUEST_DISMISS_EVENT, (event) => {
+      layer.requestDismiss?.(event);
+      if (!event.defaultPrevented) {
+        layer?.dismiss();
+      }
+    });
+    fireCustomEvent(node, LAYER_REQUEST_DISMISS_EVENT, {
+      originalLayer: node,
+      targetLayer: parent,
+      originalIndex: index,
+      targetIndex: parent ? this.indexOf(parent) : -1
+    });
+    this.syncLayers();
+  },
+  clear() {
+    this.remove(this.layers[0].node);
+  }
+};
+function fireCustomEvent(el, type, detail) {
+  const win = el.ownerDocument.defaultView || window;
+  const event = new win.CustomEvent(type, { cancelable: true, bubbles: true, detail });
+  return el.dispatchEvent(event);
+}
+function addListenerOnce(el, type, callback) {
+  el.addEventListener(type, callback, { once: true });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  layerStack
+});

package/dist/layer-stack.mjs

@@ -0,0 +1,131 @@
+// src/layer-stack.ts
+import { contains, nextTick } from "@zag-js/dom-query";
+var LAYER_REQUEST_DISMISS_EVENT = "layer:request-dismiss";
+var layerStack = {
+  layers: [],
+  branches: [],
+  recentlyRemoved: /* @__PURE__ */ new Set(),
+  count() {
+    return this.layers.length;
+  },
+  pointerBlockingLayers() {
+    return this.layers.filter((layer) => layer.pointerBlocking);
+  },
+  topMostPointerBlockingLayer() {
+    return [...this.pointerBlockingLayers()].slice(-1)[0];
+  },
+  hasPointerBlockingLayer() {
+    return this.pointerBlockingLayers().length > 0;
+  },
+  isBelowPointerBlockingLayer(node) {
+    const index = this.indexOf(node);
+    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
+    return index < highestBlockingIndex;
+  },
+  isTopMost(node) {
+    const layer = this.layers[this.count() - 1];
+    return layer?.node === node;
+  },
+  getNestedLayers(node) {
+    return Array.from(this.layers).slice(this.indexOf(node) + 1);
+  },
+  getLayersByType(type) {
+    return this.layers.filter((layer) => layer.type === type);
+  },
+  getNestedLayersByType(node, type) {
+    const index = this.indexOf(node);
+    if (index === -1) return [];
+    return this.layers.slice(index + 1).filter((layer) => layer.type === type);
+  },
+  getParentLayerOfType(node, type) {
+    const index = this.indexOf(node);
+    if (index <= 0) return void 0;
+    return this.layers.slice(0, index).reverse().find((layer) => layer.type === type);
+  },
+  countNestedLayersOfType(node, type) {
+    return this.getNestedLayersByType(node, type).length;
+  },
+  isInNestedLayer(node, target) {
+    const inNested = this.getNestedLayers(node).some((layer) => contains(layer.node, target));
+    if (inNested) return true;
+    if (this.recentlyRemoved.size > 0) return true;
+    return false;
+  },
+  isInBranch(target) {
+    return Array.from(this.branches).some((branch) => contains(branch, target));
+  },
+  add(layer) {
+    this.layers.push(layer);
+    this.syncLayers();
+  },
+  addBranch(node) {
+    this.branches.push(node);
+  },
+  remove(node) {
+    const index = this.indexOf(node);
+    if (index < 0) return;
+    this.recentlyRemoved.add(node);
+    nextTick(() => this.recentlyRemoved.delete(node));
+    if (index < this.count() - 1) {
+      const _layers = this.getNestedLayers(node);
+      _layers.forEach((layer) => layerStack.dismiss(layer.node, node));
+    }
+    this.layers.splice(index, 1);
+    this.syncLayers();
+  },
+  removeBranch(node) {
+    const index = this.branches.indexOf(node);
+    if (index >= 0) this.branches.splice(index, 1);
+  },
+  syncLayers() {
+    this.layers.forEach((layer, index) => {
+      layer.node.style.setProperty("--layer-index", `${index}`);
+      layer.node.removeAttribute("data-nested");
+      layer.node.removeAttribute("data-has-nested");
+      const parentOfSameType = this.getParentLayerOfType(layer.node, layer.type);
+      if (parentOfSameType) {
+        layer.node.setAttribute("data-nested", layer.type);
+      }
+      const nestedCount = this.countNestedLayersOfType(layer.node, layer.type);
+      if (nestedCount > 0) {
+        layer.node.setAttribute("data-has-nested", layer.type);
+      }
+      layer.node.style.setProperty("--nested-layer-count", `${nestedCount}`);
+    });
+  },
+  indexOf(node) {
+    return this.layers.findIndex((layer) => layer.node === node);
+  },
+  dismiss(node, parent) {
+    const index = this.indexOf(node);
+    if (index === -1) return;
+    const layer = this.layers[index];
+    addListenerOnce(node, LAYER_REQUEST_DISMISS_EVENT, (event) => {
+      layer.requestDismiss?.(event);
+      if (!event.defaultPrevented) {
+        layer?.dismiss();
+      }
+    });
+    fireCustomEvent(node, LAYER_REQUEST_DISMISS_EVENT, {
+      originalLayer: node,
+      targetLayer: parent,
+      originalIndex: index,
+      targetIndex: parent ? this.indexOf(parent) : -1
+    });
+    this.syncLayers();
+  },
+  clear() {
+    this.remove(this.layers[0].node);
+  }
+};
+function fireCustomEvent(el, type, detail) {
+  const win = el.ownerDocument.defaultView || window;
+  const event = new win.CustomEvent(type, { cancelable: true, bubbles: true, detail });
+  return el.dispatchEvent(event);
+}
+function addListenerOnce(el, type, callback) {
+  el.addEventListener(type, callback, { once: true });
+}
+export {
+  layerStack
+};

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

@@ -0,0 +1,5 @@
+declare function assignPointerEventToLayers(): void;
+declare function clearPointerEvent(node: HTMLElement): void;
+declare function disablePointerEventsOutside(node: HTMLElement, persistentElements?: Array<() => Element | null>): () => void;
+
+export { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside };

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, persistentElements?: Array<() => Element | null>): () => void;
+
+export { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside };

package/dist/pointer-event-outside.js

@@ -0,0 +1,75 @@
+"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);
+var import_dom_query = require("@zag-js/dom-query");
+var import_layer_stack = require("./layer-stack.cjs");
+var originalBodyPointerEvents;
+function assignPointerEventToLayers() {
+  import_layer_stack.layerStack.layers.forEach(({ node }) => {
+    node.style.pointerEvents = import_layer_stack.layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+  });
+}
+function clearPointerEvent(node) {
+  node.style.pointerEvents = "";
+}
+function disablePointerEventsOutside(node, persistentElements) {
+  const doc = (0, import_dom_query.getDocument)(node);
+  const cleanups = [];
+  if (import_layer_stack.layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
+    originalBodyPointerEvents = document.body.style.pointerEvents;
+    queueMicrotask(() => {
+      doc.body.style.pointerEvents = "none";
+      doc.body.setAttribute("data-inert", "");
+    });
+  }
+  persistentElements?.forEach((el) => {
+    const [promise, abort] = (0, import_dom_query.waitForElement)(
+      () => {
+        const node2 = el();
+        return (0, import_dom_query.isHTMLElement)(node2) ? node2 : null;
+      },
+      { timeout: 1e3 }
+    );
+    promise.then((el2) => cleanups.push((0, import_dom_query.setStyle)(el2, { pointerEvents: "auto" })));
+    cleanups.push(abort);
+  });
+  return () => {
+    if (import_layer_stack.layerStack.hasPointerBlockingLayer()) return;
+    queueMicrotask(() => {
+      doc.body.style.pointerEvents = originalBodyPointerEvents;
+      doc.body.removeAttribute("data-inert");
+      if (doc.body.style.length === 0) doc.body.removeAttribute("style");
+    });
+    cleanups.forEach((fn) => fn());
+  };
+}
+// 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,48 @@
+// src/pointer-event-outside.ts
+import { getDocument, isHTMLElement, setStyle, waitForElement } from "@zag-js/dom-query";
+import { layerStack } from "./layer-stack.mjs";
+var originalBodyPointerEvents;
+function assignPointerEventToLayers() {
+  layerStack.layers.forEach(({ node }) => {
+    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+  });
+}
+function clearPointerEvent(node) {
+  node.style.pointerEvents = "";
+}
+function disablePointerEventsOutside(node, persistentElements) {
+  const doc = getDocument(node);
+  const cleanups = [];
+  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
+    originalBodyPointerEvents = document.body.style.pointerEvents;
+    queueMicrotask(() => {
+      doc.body.style.pointerEvents = "none";
+      doc.body.setAttribute("data-inert", "");
+    });
+  }
+  persistentElements?.forEach((el) => {
+    const [promise, abort] = waitForElement(
+      () => {
+        const node2 = el();
+        return isHTMLElement(node2) ? node2 : null;
+      },
+      { timeout: 1e3 }
+    );
+    promise.then((el2) => cleanups.push(setStyle(el2, { pointerEvents: "auto" })));
+    cleanups.push(abort);
+  });
+  return () => {
+    if (layerStack.hasPointerBlockingLayer()) return;
+    queueMicrotask(() => {
+      doc.body.style.pointerEvents = originalBodyPointerEvents;
+      doc.body.removeAttribute("data-inert");
+      if (doc.body.style.length === 0) doc.body.removeAttribute("style");
+    });
+    cleanups.forEach((fn) => fn());
+  };
+}
+export {
+  assignPointerEventToLayers,
+  clearPointerEvent,
+  disablePointerEventsOutside
+};

package/package.json

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