@zag-js/interact-outside 0.2.2 → 0.2.3

package/dist/chunk-XJMPFMOP.mjs

@@ -0,0 +1,30 @@
+// src/get-window-frames.ts
+function getWindowFrames(win) {
+  const frames = {
+    each(cb) {
+      for (let i = 0; i < win.frames?.length; i += 1) {
+        const frame = win.frames[i];
+        if (frame)
+          cb(frame);
+      }
+    },
+    addEventListener(event, listener, options) {
+      frames.each((frame) => {
+        frame.document.addEventListener(event, listener, options);
+      });
+      return () => {
+        frames.removeEventListener(event, listener, options);
+      };
+    },
+    removeEventListener(event, listener, options) {
+      frames.each((frame) => {
+        frame.document.removeEventListener(event, listener, options);
+      });
+    }
+  };
+  return frames;
+}
+
+export {
+  getWindowFrames
+};

package/dist/get-window-frames.d.ts

@@ -0,0 +1,7 @@
+declare function getWindowFrames(win: Window): {
+    each(cb: (win: Window) => void): void;
+    addEventListener(event: string, listener: any, options?: any): () => void;
+    removeEventListener(event: string, listener: any, options?: any): void;
+};
+
+export { getWindowFrames };

package/dist/get-window-frames.js

@@ -0,0 +1,54 @@
+"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/get-window-frames.ts
+var get_window_frames_exports = {};
+__export(get_window_frames_exports, {
+  getWindowFrames: () => getWindowFrames
+});
+module.exports = __toCommonJS(get_window_frames_exports);
+function getWindowFrames(win) {
+  const frames = {
+    each(cb) {
+      for (let i = 0; i < win.frames?.length; i += 1) {
+        const frame = win.frames[i];
+        if (frame)
+          cb(frame);
+      }
+    },
+    addEventListener(event, listener, options) {
+      frames.each((frame) => {
+        frame.document.addEventListener(event, listener, options);
+      });
+      return () => {
+        frames.removeEventListener(event, listener, options);
+      };
+    },
+    removeEventListener(event, listener, options) {
+      frames.each((frame) => {
+        frame.document.removeEventListener(event, listener, options);
+      });
+    }
+  };
+  return frames;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getWindowFrames
+});

package/dist/get-window-frames.mjs

@@ -0,0 +1,6 @@
+import {
+  getWindowFrames
+} from "./chunk-XJMPFMOP.mjs";
+export {
+  getWindowFrames
+};

package/dist/index.js

@@ -23,96 +23,36 @@ __export(src_exports, {
   trackInteractOutside: () => trackInteractOutside
 });
 module.exports = __toCommonJS(src_exports);
+var import_dom_event = require("@zag-js/dom-event");
+var import_dom_query = require("@zag-js/dom-query");
+var import_tabbable = require("@zag-js/tabbable");
+var import_utils = require("@zag-js/utils");
 
-// ../core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn?.(...a);
-  });
-};
-
-// ../core/src/guard.ts
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-
-// ../dom/src/platform.ts
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  const agent = navigator.userAgentData;
-  return agent?.platform ?? navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
-
-// ../dom/src/query.ts
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return value?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function getWindow(el) {
-  return el?.ownerDocument.defaultView ?? window;
-}
-function getEventTarget(event) {
-  return event.composedPath?.()[0] ?? event.target;
-}
-function contains(parent, child) {
-  if (!parent)
-    return false;
-  return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
-}
-function isHTMLElement(v) {
-  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
-}
-function isVisible(el) {
-  if (!isHTMLElement(el))
-    return false;
-  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
-}
-
-// ../dom/src/event.ts
-var isContextMenuEvent = (e) => {
-  return e.button === 2 || isCtrlKey(e) && e.button === 0;
-};
-var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
-
-// ../dom/src/fire-event.ts
-function fireCustomEvent(el, type, init) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  const event = new win.CustomEvent(type, init);
-  return el.dispatchEvent(event);
-}
-
-// ../dom/src/focusable.ts
-var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
-function isFocusable(element) {
-  if (!element)
-    return false;
-  return element.matches(focusableSelector) && isVisible(element);
-}
-
-// ../dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
+// src/get-window-frames.ts
+function getWindowFrames(win) {
+  const frames = {
+    each(cb) {
+      for (let i = 0; i < win.frames?.length; i += 1) {
+        const frame = win.frames[i];
+        if (frame)
+          cb(frame);
+      }
+    },
+    addEventListener(event, listener, options) {
+      frames.each((frame) => {
+        frame.document.addEventListener(event, listener, options);
+      });
+      return () => {
+        frames.removeEventListener(event, listener, options);
+      };
+    },
+    removeEventListener(event, listener, options) {
+      frames.each((frame) => {
+        frame.document.removeEventListener(event, listener, options);
+      });
+    }
   };
+  return frames;
 }
 
 // src/index.ts
@@ -122,17 +62,15 @@ function trackInteractOutside(node, options) {
   const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside } = options;
   if (!node)
     return;
-  const doc = getDocument(node);
-  const win = getWindow(node);
+  const doc = (0, import_dom_query.getDocument)(node);
+  const win = (0, import_dom_query.getWindow)(node);
+  const frames = getWindowFrames(win);
   function isEventOutside(event) {
-    const target = getEventTarget(event);
-    if (!(target instanceof win.HTMLElement)) {
+    const target = (0, import_dom_query.getEventTarget)(event);
+    if (!(0, import_dom_query.isHTMLElement)(target)) {
       return false;
     }
-    if (!contains(doc.documentElement, target)) {
-      return false;
-    }
-    if (contains(node, target)) {
+    if ((0, import_dom_query.contains)(node, target)) {
       return false;
     }
     return !exclude?.(target);
@@ -143,53 +81,59 @@ function trackInteractOutside(node, options) {
       if (!node || !isEventOutside(event))
         return;
       if (onPointerDownOutside || onInteractOutside) {
-        const handler2 = callAll(onPointerDownOutside, onInteractOutside);
+        const handler2 = (0, import_utils.callAll)(onPointerDownOutside, onInteractOutside);
         node.addEventListener(POINTER_OUTSIDE_EVENT, handler2, { once: true });
       }
-      fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
+      (0, import_dom_event.fireCustomEvent)(node, POINTER_OUTSIDE_EVENT, {
         bubbles: false,
         cancelable: true,
         detail: {
           originalEvent: event,
-          contextmenu: isContextMenuEvent(event),
-          focusable: isFocusable(getEventTarget(event))
+          contextmenu: (0, import_dom_event.isContextMenuEvent)(event),
+          focusable: (0, import_tabbable.isFocusable)((0, import_dom_query.getEventTarget)(event))
         }
       });
     }
     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 });
     } else {
       handler();
     }
   }
   const cleanups = /* @__PURE__ */ new Set();
   const timer = setTimeout(() => {
-    cleanups.add(addDomEvent(doc, "pointerdown", onPointerDown, true));
+    cleanups.add(frames.addEventListener("pointerdown", onPointerDown, true));
+    cleanups.add((0, import_dom_event.addDomEvent)(doc, "pointerdown", onPointerDown, true));
   }, 0);
   function onFocusin(event) {
     if (!node || !isEventOutside(event))
       return;
     if (onFocusOutside || onInteractOutside) {
-      const handler = callAll(onFocusOutside, onInteractOutside);
+      const handler = (0, import_utils.callAll)(onFocusOutside, onInteractOutside);
       node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true });
     }
-    fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {
+    (0, import_dom_event.fireCustomEvent)(node, FOCUS_OUTSIDE_EVENT, {
       bubbles: false,
       cancelable: true,
       detail: {
         originalEvent: event,
         contextmenu: false,
-        focusable: isFocusable(getEventTarget(event))
+        focusable: (0, import_tabbable.isFocusable)((0, import_dom_query.getEventTarget)(event))
       }
     });
   }
-  cleanups.add(addDomEvent(doc, "focusin", onFocusin, true));
+  cleanups.add((0, import_dom_event.addDomEvent)(doc, "focusin", onFocusin, true));
+  cleanups.add(frames.addEventListener("focusin", onFocusin, true));
   return () => {
     clearTimeout(timer);
-    if (clickHandler)
+    if (clickHandler) {
+      frames.removeEventListener("click", clickHandler);
       doc.removeEventListener("click", clickHandler);
+    }
     cleanups.forEach((fn) => fn());
   };
 }

package/dist/index.mjs

@@ -1,95 +1,12 @@
-// ../core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn?.(...a);
-  });
-};
-
-// ../core/src/guard.ts
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-
-// ../dom/src/platform.ts
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  const agent = navigator.userAgentData;
-  return agent?.platform ?? navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
-
-// ../dom/src/query.ts
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return value?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function getWindow(el) {
-  return el?.ownerDocument.defaultView ?? window;
-}
-function getEventTarget(event) {
-  return event.composedPath?.()[0] ?? event.target;
-}
-function contains(parent, child) {
-  if (!parent)
-    return false;
-  return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
-}
-function isHTMLElement(v) {
-  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
-}
-function isVisible(el) {
-  if (!isHTMLElement(el))
-    return false;
-  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
-}
-
-// ../dom/src/event.ts
-var isContextMenuEvent = (e) => {
-  return e.button === 2 || isCtrlKey(e) && e.button === 0;
-};
-var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
-
-// ../dom/src/fire-event.ts
-function fireCustomEvent(el, type, init) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  const event = new win.CustomEvent(type, init);
-  return el.dispatchEvent(event);
-}
-
-// ../dom/src/focusable.ts
-var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
-function isFocusable(element) {
-  if (!element)
-    return false;
-  return element.matches(focusableSelector) && isVisible(element);
-}
-
-// ../dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
+import {
+  getWindowFrames
+} from "./chunk-XJMPFMOP.mjs";
 
 // src/index.ts
+import { addDomEvent, fireCustomEvent, isContextMenuEvent } from "@zag-js/dom-event";
+import { contains, getDocument, getEventTarget, getWindow, isHTMLElement } from "@zag-js/dom-query";
+import { isFocusable } from "@zag-js/tabbable";
+import { callAll } from "@zag-js/utils";
 var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
 var FOCUS_OUTSIDE_EVENT = "focus.outside";
 function trackInteractOutside(node, options) {
@@ -98,12 +15,10 @@ function trackInteractOutside(node, options) {
     return;
   const doc = getDocument(node);
   const win = getWindow(node);
+  const frames = getWindowFrames(win);
   function isEventOutside(event) {
     const target = getEventTarget(event);
-    if (!(target instanceof win.HTMLElement)) {
-      return false;
-    }
-    if (!contains(doc.documentElement, target)) {
+    if (!isHTMLElement(target)) {
       return false;
     }
     if (contains(node, target)) {
@@ -131,15 +46,18 @@ function trackInteractOutside(node, options) {
       });
     }
     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 });
     } else {
       handler();
     }
   }
   const cleanups = /* @__PURE__ */ new Set();
   const timer = setTimeout(() => {
+    cleanups.add(frames.addEventListener("pointerdown", onPointerDown, true));
     cleanups.add(addDomEvent(doc, "pointerdown", onPointerDown, true));
   }, 0);
   function onFocusin(event) {
@@ -160,10 +78,13 @@ function trackInteractOutside(node, options) {
     });
   }
   cleanups.add(addDomEvent(doc, "focusin", onFocusin, true));
+  cleanups.add(frames.addEventListener("focusin", onFocusin, true));
   return () => {
     clearTimeout(timer);
-    if (clickHandler)
+    if (clickHandler) {
+      frames.removeEventListener("click", clickHandler);
       doc.removeEventListener("click", clickHandler);
+    }
     cleanups.forEach((fn) => fn());
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/interact-outside",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Track interations or focus outside an element",
   "keywords": [
     "js",
@@ -15,10 +15,14 @@
   "files": [
     "dist/**/*"
   ],
+  "dependencies": {
+    "@zag-js/dom-query": "0.1.3",
+    "@zag-js/dom-event": "0.0.1",
+    "@zag-js/utils": "0.3.3",
+    "@zag-js/tabbable": "0.0.1"
+  },
   "devDependencies": {
-    "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.4",
-    "@zag-js/utils": "0.3.3"
+    "clean-package": "2.2.0"
   },
   "publishConfig": {
     "access": "public"