@zag-js/dismissable - npm Package Compare versions

Comparing version 1.41.0 to 1.41.1

dist/pointer-event-outside.js

@@ -30,9 +30,36 @@ "use strict";
 var import_layer_stack = require("./layer-stack.js");
-var originalBodyPointerEvents;
+var originalBodyPointerEvents = /* @__PURE__ */ new WeakMap();
+var layerObservers = /* @__PURE__ */ new WeakMap();
+function getDesiredPointerEvents(node) {
+  return import_layer_stack.layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+}
+function applyPointerEvents(node) {
+  const desired = getDesiredPointerEvents(node);
+  if (node.style.pointerEvents !== desired) {
+    node.style.pointerEvents = desired;
+  }
+}
+function ensurePointerEventsObserver(node) {
+  if (layerObservers.has(node)) return;
+  const win = (0, import_dom_query.getWindow)(node);
+  if (typeof win.MutationObserver === "undefined") return;
+  const observer = new win.MutationObserver(() => {
+    if (!layerObservers.has(node)) return;
+    applyPointerEvents(node);
+  });
+  observer.observe(node, { attributes: true, attributeFilter: ["style"] });
+  layerObservers.set(node, observer);
+}
 function assignPointerEventToLayers() {
   import_layer_stack.layerStack.layers.forEach(({ node }) => {
-    node.style.pointerEvents = import_layer_stack.layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+    applyPointerEvents(node);
+    ensurePointerEventsObserver(node);
   });
 }
 function clearPointerEvent(node) {
+  const observer = layerObservers.get(node);
+  if (observer) {
+    observer.disconnect();
+    layerObservers.delete(node);
+  }
   node.style.pointerEvents = "";
@@ -44,3 +71,3 @@ }
   if (import_layer_stack.layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
-    originalBodyPointerEvents = doc.body.style.pointerEvents;
+    originalBodyPointerEvents.set(doc.body, doc.body.style.pointerEvents);
     queueMicrotask(() => {
@@ -69,3 +96,7 @@ const body = doc.body;
       if (!body) return;
-      body.style.pointerEvents = originalBodyPointerEvents;
+      const original = originalBodyPointerEvents.get(body);
+      if (original !== void 0) {
+        body.style.pointerEvents = original;
+        originalBodyPointerEvents.delete(body);
+      }
       body.removeAttribute("data-inert");
@@ -72,0 +103,0 @@ if (body.style.length === 0) body.removeAttribute("style");

dist/pointer-event-outside.mjs

 // src/pointer-event-outside.ts
-import { getDocument, isHTMLElement, setStyle, waitForElement } from "@zag-js/dom-query";
+import { getDocument, getWindow, isHTMLElement, setStyle, waitForElement } from "@zag-js/dom-query";
 import { layerStack } from "./layer-stack.mjs";
-var originalBodyPointerEvents;
+var originalBodyPointerEvents = /* @__PURE__ */ new WeakMap();
+var layerObservers = /* @__PURE__ */ new WeakMap();
+function getDesiredPointerEvents(node) {
+  return layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+}
+function applyPointerEvents(node) {
+  const desired = getDesiredPointerEvents(node);
+  if (node.style.pointerEvents !== desired) {
+    node.style.pointerEvents = desired;
+  }
+}
+function ensurePointerEventsObserver(node) {
+  if (layerObservers.has(node)) return;
+  const win = getWindow(node);
+  if (typeof win.MutationObserver === "undefined") return;
+  const observer = new win.MutationObserver(() => {
+    if (!layerObservers.has(node)) return;
+    applyPointerEvents(node);
+  });
+  observer.observe(node, { attributes: true, attributeFilter: ["style"] });
+  layerObservers.set(node, observer);
+}
 function assignPointerEventToLayers() {
   layerStack.layers.forEach(({ node }) => {
-    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+    applyPointerEvents(node);
+    ensurePointerEventsObserver(node);
   });
 }
 function clearPointerEvent(node) {
+  const observer = layerObservers.get(node);
+  if (observer) {
+    observer.disconnect();
+    layerObservers.delete(node);
+  }
   node.style.pointerEvents = "";
@@ -17,3 +44,3 @@ }
   if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
-    originalBodyPointerEvents = doc.body.style.pointerEvents;
+    originalBodyPointerEvents.set(doc.body, doc.body.style.pointerEvents);
     queueMicrotask(() => {
@@ -42,3 +69,7 @@ const body = doc.body;
       if (!body) return;
-      body.style.pointerEvents = originalBodyPointerEvents;
+      const original = originalBodyPointerEvents.get(body);
+      if (original !== void 0) {
+        body.style.pointerEvents = original;
+        originalBodyPointerEvents.delete(body);
+      }
       body.removeAttribute("data-inert");
@@ -45,0 +76,0 @@ if (body.style.length === 0) body.removeAttribute("style");

package.json

 {
   "name": "@zag-js/dismissable",
-  "version": "1.41.0",
+  "version": "1.41.1",
   "description": "Dismissable layer utilities for the DOM",
@@ -26,5 +26,5 @@ "keywords": [
   "dependencies": {
-    "@zag-js/interact-outside": "1.41.0",
-    "@zag-js/dom-query": "1.41.0",
-    "@zag-js/utils": "1.41.0"
+    "@zag-js/interact-outside": "1.41.1",
+    "@zag-js/dom-query": "1.41.1",
+    "@zag-js/utils": "1.41.1"
   },
@@ -31,0 +31,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

45226

4.94%

Lines of code

1003

6.59%

Dependency changes

• + Added

  @zag-js/dom-query@1.41.1
  (transitive)

• + Added

  @zag-js/interact-outside@1.41.1
  (transitive)

• + Added

  @zag-js/types@1.41.1
  (transitive)

• + Added

  @zag-js/utils@1.41.1
  (transitive)

• - Removed

  @zag-js/dom-query@1.41.0
  (transitive)

• - Removed

  @zag-js/interact-outside@1.41.0
  (transitive)

• - Removed

  @zag-js/types@1.41.0
  (transitive)

• - Removed

  @zag-js/utils@1.41.0
  (transitive)

• Updated

  @zag-js/dom-query@1.41.1

• Updated

  @zag-js/interact-outside@1.41.1

• Updated

  @zag-js/utils@1.41.1