@zag-js/interact-outside - npm Package Compare versions

Comparing version 0.0.0-dev-20240612172509 to 0.0.0-dev-20240614092224

dist/index.js

@@ -26,3 +26,3 @@ "use strict";
 module.exports = __toCommonJS(src_exports);
-var import_dom_event = require("@zag-js/dom-event");
+var import_dom_event2 = require("@zag-js/dom-event");
 var import_dom_query = require("@zag-js/dom-query");
@@ -32,2 +32,3 @@ var import_utils = require("@zag-js/utils");
 // src/get-window-frames.ts
+var import_dom_event = require("@zag-js/dom-event");
 function getWindowFrames(win) {
@@ -41,2 +42,17 @@ const frames = {
     },
+    queueBeforeEvent(event, listener) {
+      const cleanup = /* @__PURE__ */ new Set();
+      frames.each((frame) => {
+        try {
+          cleanup.add((0, import_dom_event.queueBeforeEvent)(frame.document, event, listener));
+        } catch {
+        }
+      });
+      return () => {
+        try {
+          cleanup.forEach((fn) => fn());
+        } catch {
+        }
+      };
+    },
     addEventListener(event, listener, options) {
@@ -107,3 +123,3 @@ frames.each((frame) => {
   }
-  let clickHandler;
+  const pointerdownCleanups = /* @__PURE__ */ new Set();
   function onPointerDown(event) {
@@ -119,3 +135,3 @@ function handler() {
         }
-        (0, import_dom_event.fireCustomEvent)(node, POINTER_OUTSIDE_EVENT, {
+        (0, import_dom_event2.fireCustomEvent)(node, POINTER_OUTSIDE_EVENT, {
           bubbles: false,
@@ -125,3 +141,3 @@ cancelable: true,
             originalEvent: event,
-            contextmenu: (0, import_dom_event.isContextMenuEvent)(event),
+            contextmenu: (0, import_dom_event2.isContextMenuEvent)(event),
             focusable: isComposedPathFocusable(composedPath)
@@ -133,7 +149,5 @@ }
     if (event.pointerType === "touch") {
-      frames.removeEventListener("click", handler);
-      doc.removeEventListener("click", handler);
-      clickHandler = handler;
-      doc.addEventListener("click", handler, { once: true });
-      frames.addEventListener("click", handler, { once: true });
+      pointerdownCleanups.forEach((fn) => fn());
+      pointerdownCleanups.add((0, import_dom_event2.queueBeforeEvent)(doc, "pointerup", handler));
+      pointerdownCleanups.add(frames.queueBeforeEvent("pointerup", handler));
     } else {
@@ -146,3 +160,3 @@ handler();
     cleanups.add(frames.addEventListener("pointerdown", onPointerDown, true));
-    cleanups.add((0, import_dom_event.addDomEvent)(doc, "pointerdown", onPointerDown, true));
+    cleanups.add((0, import_dom_event2.addDomEvent)(doc, "pointerdown", onPointerDown, true));
   }, 0);
@@ -157,3 +171,3 @@ function onFocusin(event) {
       }
-      (0, import_dom_event.fireCustomEvent)(node, FOCUS_OUTSIDE_EVENT, {
+      (0, import_dom_event2.fireCustomEvent)(node, FOCUS_OUTSIDE_EVENT, {
         bubbles: false,
@@ -169,10 +183,7 @@ cancelable: true,
   }
-  cleanups.add((0, import_dom_event.addDomEvent)(doc, "focusin", onFocusin, true));
+  cleanups.add((0, import_dom_event2.addDomEvent)(doc, "focusin", onFocusin, true));
   cleanups.add(frames.addEventListener("focusin", onFocusin, true));
   return () => {
     clearTimeout(timer);
-    if (clickHandler) {
-      frames.removeEventListener("click", clickHandler);
-      doc.removeEventListener("click", clickHandler);
-    }
+    pointerdownCleanups.forEach((fn) => fn());
     cleanups.forEach((fn) => fn());
@@ -179,0 +190,0 @@ };

package.json

 {
   "name": "@zag-js/interact-outside",
-  "version": "0.0.0-dev-20240612172509",
+  "version": "0.0.0-dev-20240614092224",
   "description": "Track interations or focus outside an element",
@@ -20,5 +20,5 @@ "keywords": [
   "dependencies": {
-    "@zag-js/dom-query": "0.0.0-dev-20240612172509",
-    "@zag-js/dom-event": "0.0.0-dev-20240612172509",
-    "@zag-js/utils": "0.0.0-dev-20240612172509"
+    "@zag-js/dom-query": "0.0.0-dev-20240614092224",
+    "@zag-js/dom-event": "0.0.0-dev-20240614092224",
+    "@zag-js/utils": "0.0.0-dev-20240614092224"
   },
@@ -25,0 +25,0 @@ "devDependencies": {

src/get-window-frames.ts

@@ -0,1 +1,3 @@
+import { queueBeforeEvent } from "@zag-js/dom-event"
+
 export function getWindowFrames(win: Window) {
@@ -9,2 +11,18 @@ const frames = {
     },
+
+    queueBeforeEvent(event: string, listener: any) {
+      const cleanup = new Set<VoidFunction>()
+      frames.each((frame) => {
+        try {
+          cleanup.add(queueBeforeEvent(frame.document, event, listener))
+        } catch {}
+      })
+
+      return () => {
+        try {
+          cleanup.forEach((fn) => fn())
+        } catch {}
+      }
+    },
+
     addEventListener(event: string, listener: any, options?: any) {
@@ -16,2 +34,3 @@ frames.each((frame) => {
       })
+
       return () => {
@@ -23,2 +42,3 @@ try {
     },
+
     removeEventListener(event: string, listener: any, options?: any) {
@@ -32,3 +52,4 @@ frames.each((frame) => {
   }
+
   return frames
 }

src/index.ts

@@ -1,2 +0,2 @@
-import { addDomEvent, fireCustomEvent, isContextMenuEvent } from "@zag-js/dom-event"
+import { addDomEvent, fireCustomEvent, isContextMenuEvent, queueBeforeEvent } from "@zag-js/dom-event"
 import { contains, getDocument, getEventTarget, getWindow, isFocusable, isHTMLElement, raf } from "@zag-js/dom-query"
@@ -98,3 +98,3 @@ import { callAll } from "@zag-js/utils"
 
-  let clickHandler: VoidFunction
+  const pointerdownCleanups: Set<VoidFunction> = new Set()
 
@@ -127,9 +127,8 @@ function onPointerDown(event: PointerEvent) {
     if (event.pointerType === "touch") {
-      frames.removeEventListener("click", handler)
-      doc.removeEventListener("click", handler)
+      // flush any pending pointerup events
+      pointerdownCleanups.forEach((fn) => fn())
 
-      clickHandler = handler
-
-      doc.addEventListener("click", handler, { once: true })
-      frames.addEventListener("click", handler, { once: true })
+      // add a pointerup event listener to the document and all frame documents
+      pointerdownCleanups.add(queueBeforeEvent(doc, "pointerup", handler))
+      pointerdownCleanups.add(frames.queueBeforeEvent("pointerup", handler))
     } else {
@@ -174,6 +173,3 @@ handler()
     clearTimeout(timer)
-    if (clickHandler) {
-      frames.removeEventListener("click", clickHandler)
-      doc.removeEventListener("click", clickHandler)
-    }
+    pointerdownCleanups.forEach((fn) => fn())
     cleanups.forEach((fn) => fn())
@@ -180,0 +176,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

50065

increased by5.48%

Lines of code

597

increased by5.85%

Dependency changes

• + Added@zag-js/dom-event@0.0.0-dev-20240614092224(transitive)

• + Added@zag-js/dom-query@0.0.0-dev-20240614092224(transitive)

• + Added@zag-js/text-selection@0.0.0-dev-20240614092224(transitive)

• + Added@zag-js/types@0.0.0-dev-20240614092224(transitive)

• + Added@zag-js/utils@0.0.0-dev-20240614092224(transitive)

• - Removed@zag-js/dom-event@0.0.0-dev-20240612172509(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20240612172509(transitive)

• - Removed@zag-js/text-selection@0.0.0-dev-20240612172509(transitive)

• - Removed@zag-js/types@0.0.0-dev-20240612172509(transitive)

• - Removed@zag-js/utils@0.0.0-dev-20240612172509(transitive)

• Updated@zag-js/dom-event@0.0.0-dev-20240614092224

• Updated@zag-js/dom-query@0.0.0-dev-20240614092224

• Updated@zag-js/utils@0.0.0-dev-20240614092224