@zag-js/interact-outside 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -1,6 +1,17 @@
-export declare type InteractOutsideOptions = {
+export declare type InteractOutsideHandlers = {
+    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+};
+export declare type InteractOutsideOptions = InteractOutsideHandlers & {
     exclude?: (target: HTMLElement) => boolean;
-    onPointerDownOutside?: (event: Event) => void;
-    onFocusOutside?: (event: Event) => void;
 };
+declare type EventDetails<T> = {
+    originalEvent: T;
+    contextmenu: boolean;
+    focusable: boolean;
+};
+export declare type PointerDownOutsideEvent = CustomEvent<EventDetails<PointerEvent>>;
+export declare type FocusOutsideEvent = CustomEvent<EventDetails<FocusEvent>>;
+export declare type InteractOutsideEvent = PointerDownOutsideEvent | FocusOutsideEvent;
 export declare function trackInteractOutside(node: HTMLElement | null, options: InteractOutsideOptions): () => void;
+export {};

package/dist/index.js

@@ -25,29 +25,30 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../dom/dist/index.mjs
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? res : void 0;
 };
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node == null ? void 0 : node.addEventListener(eventName, handler, options);
-  return () => {
-    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
-  };
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
 }
+var pt = (v) => isDom() && v.test(getPlatform());
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
 function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function getOwnerDocument(el) {
+function getDocument(el) {
   var _a;
   if (isWindow(el))
     return el.document;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
-function getOwnerWindow(el) {
+function getWindow(el) {
   var _a;
   return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
 }
@@ -63,21 +64,52 @@ function contains(parent, child) {
 function isHTMLElement(v) {
   return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
 }
+function isVisible(el) {
+  if (!isHTMLElement(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
+}
+var isContextMenuEvent = (e) => {
+  return e.button === 2 || isCtrlKey(e) && e.button === 0;
+};
+var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
+function fireCustomEvent(el, type, init) {
+  if (!el)
+    return;
+  const win = getWindow(el);
+  const event = new win.CustomEvent(type, init);
+  return el.dispatchEvent(event);
+}
+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);
+}
+var isRef = (v) => hasProp(v, "current");
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
 
 // src/index.ts
+var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
+var FOCUS_OUTSIDE_EVENT = "focus.outside";
 function trackInteractOutside(node, options) {
-  const { exclude, onPointerDownOutside, onFocusOutside } = options;
+  const { exclude, onFocusOutside, onPointerDownOutside } = options;
   if (!node)
     return;
-  const doc = getOwnerDocument(node);
-  const win = getOwnerWindow(node);
+  const doc = getDocument(node);
+  const win = getWindow(node);
   function isEventOutside(event) {
     const target = getEventTarget(event);
     if (!(target instanceof win.HTMLElement)) {
       return false;
     }
-    const doc2 = target.ownerDocument;
-    if (!contains(doc2.documentElement, target)) {
+    if (!contains(doc.documentElement, target)) {
       return false;
     }
     if (contains(node, target)) {
@@ -85,23 +117,57 @@ function trackInteractOutside(node, options) {
     }
     return !(exclude == null ? void 0 : exclude(target));
   }
+  let clickHandler;
   function onPointerDown(event) {
-    if (isEventOutside(event)) {
-      onPointerDownOutside == null ? void 0 : onPointerDownOutside(event);
+    function handler() {
+      if (!node || !isEventOutside(event))
+        return;
+      if (onPointerDownOutside) {
+        node.addEventListener(POINTER_OUTSIDE_EVENT, onPointerDownOutside, { once: true });
+      }
+      fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
+        bubbles: false,
+        cancelable: true,
+        detail: {
+          originalEvent: event,
+          contextmenu: isContextMenuEvent(event),
+          focusable: isFocusable(getEventTarget(event))
+        }
+      });
+    }
+    if (event.pointerType === "touch") {
+      doc.removeEventListener("click", handler);
+      clickHandler = handler;
+      doc.addEventListener("click", handler, { once: true });
+    } else {
+      handler();
     }
   }
   const cleanups = /* @__PURE__ */ new Set();
   const timer = setTimeout(() => {
     cleanups.add(addDomEvent(doc, "pointerdown", onPointerDown, true));
-  });
+  }, 0);
   function onFocusin(event) {
-    if (isEventOutside(event)) {
-      onFocusOutside == null ? void 0 : onFocusOutside(event);
+    if (!node || !isEventOutside(event))
+      return;
+    if (onFocusOutside) {
+      node.addEventListener(FOCUS_OUTSIDE_EVENT, onFocusOutside, { once: true });
     }
+    fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {
+      bubbles: false,
+      cancelable: true,
+      detail: {
+        originalEvent: event,
+        contextmenu: false,
+        focusable: isFocusable(getEventTarget(event))
+      }
+    });
   }
   cleanups.add(addDomEvent(doc, "focusin", onFocusin, true));
   return () => {
     clearTimeout(timer);
+    if (clickHandler)
+      doc.removeEventListener("click", clickHandler);
     cleanups.forEach((fn) => fn());
   };
 }

package/dist/index.mjs

@@ -1,29 +1,28 @@
-"use strict";
-
 // ../dom/dist/index.mjs
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? res : void 0;
 };
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node == null ? void 0 : node.addEventListener(eventName, handler, options);
-  return () => {
-    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
-  };
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
 }
+var pt = (v) => isDom() && v.test(getPlatform());
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
 function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function getOwnerDocument(el) {
+function getDocument(el) {
   var _a;
   if (isWindow(el))
     return el.document;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
-function getOwnerWindow(el) {
+function getWindow(el) {
   var _a;
   return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
 }
@@ -39,21 +38,52 @@ function contains(parent, child) {
 function isHTMLElement(v) {
   return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
 }
+function isVisible(el) {
+  if (!isHTMLElement(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
+}
+var isContextMenuEvent = (e) => {
+  return e.button === 2 || isCtrlKey(e) && e.button === 0;
+};
+var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
+function fireCustomEvent(el, type, init) {
+  if (!el)
+    return;
+  const win = getWindow(el);
+  const event = new win.CustomEvent(type, init);
+  return el.dispatchEvent(event);
+}
+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);
+}
+var isRef = (v) => hasProp(v, "current");
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
 
 // src/index.ts
+var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
+var FOCUS_OUTSIDE_EVENT = "focus.outside";
 function trackInteractOutside(node, options) {
-  const { exclude, onPointerDownOutside, onFocusOutside } = options;
+  const { exclude, onFocusOutside, onPointerDownOutside } = options;
   if (!node)
     return;
-  const doc = getOwnerDocument(node);
-  const win = getOwnerWindow(node);
+  const doc = getDocument(node);
+  const win = getWindow(node);
   function isEventOutside(event) {
     const target = getEventTarget(event);
     if (!(target instanceof win.HTMLElement)) {
       return false;
     }
-    const doc2 = target.ownerDocument;
-    if (!contains(doc2.documentElement, target)) {
+    if (!contains(doc.documentElement, target)) {
       return false;
     }
     if (contains(node, target)) {
@@ -61,23 +91,57 @@ function trackInteractOutside(node, options) {
     }
     return !(exclude == null ? void 0 : exclude(target));
   }
+  let clickHandler;
   function onPointerDown(event) {
-    if (isEventOutside(event)) {
-      onPointerDownOutside == null ? void 0 : onPointerDownOutside(event);
+    function handler() {
+      if (!node || !isEventOutside(event))
+        return;
+      if (onPointerDownOutside) {
+        node.addEventListener(POINTER_OUTSIDE_EVENT, onPointerDownOutside, { once: true });
+      }
+      fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
+        bubbles: false,
+        cancelable: true,
+        detail: {
+          originalEvent: event,
+          contextmenu: isContextMenuEvent(event),
+          focusable: isFocusable(getEventTarget(event))
+        }
+      });
+    }
+    if (event.pointerType === "touch") {
+      doc.removeEventListener("click", handler);
+      clickHandler = handler;
+      doc.addEventListener("click", handler, { once: true });
+    } else {
+      handler();
     }
   }
   const cleanups = /* @__PURE__ */ new Set();
   const timer = setTimeout(() => {
     cleanups.add(addDomEvent(doc, "pointerdown", onPointerDown, true));
-  });
+  }, 0);
   function onFocusin(event) {
-    if (isEventOutside(event)) {
-      onFocusOutside == null ? void 0 : onFocusOutside(event);
+    if (!node || !isEventOutside(event))
+      return;
+    if (onFocusOutside) {
+      node.addEventListener(FOCUS_OUTSIDE_EVENT, onFocusOutside, { once: true });
     }
+    fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {
+      bubbles: false,
+      cancelable: true,
+      detail: {
+        originalEvent: event,
+        contextmenu: false,
+        focusable: isFocusable(getEventTarget(event))
+      }
+    });
   }
   cleanups.add(addDomEvent(doc, "focusin", onFocusin, true));
   return () => {
     clearTimeout(timer);
+    if (clickHandler)
+      doc.removeEventListener("click", clickHandler);
     cleanups.forEach((fn) => fn());
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/interact-outside",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Track interations or focus outside an element",
   "keywords": [
     "js",
@@ -28,7 +28,7 @@
     "test:watch": "yarn test --watchAll"
   },
   "dependencies": {
-    "@zag-js/dom-utils": "0.1.5"
+    "@zag-js/dom-utils": "0.1.6"
   },
   "publishConfig": {
     "access": "public"