@zag-js/interact-outside 1.7.0 → 1.8.0

package/dist/index.d.mts

@@ -20,6 +20,7 @@ interface EventDetails<T> {
     originalEvent: T;
     contextmenu: boolean;
     focusable: boolean;
+    target: EventTarget;
 }
 type PointerDownOutsideEvent = CustomEvent<EventDetails<PointerEvent>>;
 type FocusOutsideEvent = CustomEvent<EventDetails<FocusEvent>>;

package/dist/index.d.ts

@@ -20,6 +20,7 @@ interface EventDetails<T> {
     originalEvent: T;
     contextmenu: boolean;
     focusable: boolean;
+    target: EventTarget;
 }
 type PointerDownOutsideEvent = CustomEvent<EventDetails<PointerEvent>>;
 type FocusOutsideEvent = CustomEvent<EventDetails<FocusEvent>>;

package/dist/index.js

@@ -108,8 +108,7 @@ function trackInteractOutsideImpl(node, options) {
   const win = domQuery.getWindow(node);
   const frames = getWindowFrames(win);
   const parentWin = getParentWindow(win);
-  function isEventOutside(event) {
-    const target = domQuery.getEventTarget(event);
+  function isEventOutside(event, target) {
     if (!domQuery.isHTMLElement(target)) return false;
     if (!target.isConnected) return false;
     if (domQuery.contains(node, target)) return false;
@@ -124,12 +123,15 @@ function trackInteractOutsideImpl(node, options) {
     return !exclude?.(target);
   }
   const pointerdownCleanups = /* @__PURE__ */ new Set();
+  const isInShadowRoot = domQuery.isShadowRoot(node?.getRootNode());
   function onPointerDown(event) {
-    function handler() {
-      const func = defer ? domQuery.raf : (v) => v();
-      const composedPath = event.composedPath?.() ?? [event.target];
+    function handler(clickEvent) {
+      const func = defer && !domQuery.isTouchDevice() ? domQuery.raf : (v) => v();
+      const evt = clickEvent ?? event;
+      const composedPath = evt?.composedPath?.() ?? [evt?.target];
       func(() => {
-        if (!node || !isEventOutside(event)) return;
+        const target = isInShadowRoot ? composedPath[0] : domQuery.getEventTarget(event);
+        if (!node || !isEventOutside(event, target)) return;
         if (onPointerDownOutside || onInteractOutside) {
           const handler2 = utils.callAll(onPointerDownOutside, onInteractOutside);
           node.addEventListener(POINTER_OUTSIDE_EVENT, handler2, { once: true });
@@ -138,9 +140,10 @@ function trackInteractOutsideImpl(node, options) {
           bubbles: false,
           cancelable: true,
           detail: {
-            originalEvent: event,
-            contextmenu: domQuery.isContextMenuEvent(event),
-            focusable: isComposedPathFocusable(composedPath)
+            originalEvent: evt,
+            contextmenu: domQuery.isContextMenuEvent(evt),
+            focusable: isComposedPathFocusable(composedPath),
+            target
           }
         });
       });
@@ -163,7 +166,8 @@ function trackInteractOutsideImpl(node, options) {
   function onFocusin(event) {
     const func = defer ? domQuery.raf : (v) => v();
     func(() => {
-      if (!node || !isEventOutside(event)) return;
+      const target = domQuery.getEventTarget(event);
+      if (!node || !isEventOutside(event, target)) return;
       if (onFocusOutside || onInteractOutside) {
         const handler = utils.callAll(onFocusOutside, onInteractOutside);
         node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true });
@@ -174,14 +178,17 @@ function trackInteractOutsideImpl(node, options) {
         detail: {
           originalEvent: event,
           contextmenu: false,
-          focusable: domQuery.isFocusable(domQuery.getEventTarget(event))
+          focusable: domQuery.isFocusable(target),
+          target
         }
       });
     });
   }
-  cleanups.add(domQuery.addDomEvent(doc, "focusin", onFocusin, true));
-  cleanups.add(parentWin.addEventListener("focusin", onFocusin, true));
-  cleanups.add(frames.addEventListener("focusin", onFocusin, true));
+  if (!domQuery.isTouchDevice()) {
+    cleanups.add(domQuery.addDomEvent(doc, "focusin", onFocusin, true));
+    cleanups.add(parentWin.addEventListener("focusin", onFocusin, true));
+    cleanups.add(frames.addEventListener("focusin", onFocusin, true));
+  }
   return () => {
     clearTimeout(timer);
     pointerdownCleanups.forEach((fn) => fn());

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { raf, getDocument, getWindow, addDomEvent, isFocusable, getEventTarget, isContextMenuEvent, isHTMLElement, contains, getNearestOverflowAncestor } from '@zag-js/dom-query';
+import { raf, getDocument, getWindow, isShadowRoot, addDomEvent, isTouchDevice, getEventTarget, isFocusable, isContextMenuEvent, isHTMLElement, contains, getNearestOverflowAncestor } from '@zag-js/dom-query';
 import { callAll } from '@zag-js/utils';
 
 // src/index.ts
@@ -106,8 +106,7 @@ function trackInteractOutsideImpl(node, options) {
   const win = getWindow(node);
   const frames = getWindowFrames(win);
   const parentWin = getParentWindow(win);
-  function isEventOutside(event) {
-    const target = getEventTarget(event);
+  function isEventOutside(event, target) {
     if (!isHTMLElement(target)) return false;
     if (!target.isConnected) return false;
     if (contains(node, target)) return false;
@@ -122,12 +121,15 @@ function trackInteractOutsideImpl(node, options) {
     return !exclude?.(target);
   }
   const pointerdownCleanups = /* @__PURE__ */ new Set();
+  const isInShadowRoot = isShadowRoot(node?.getRootNode());
   function onPointerDown(event) {
-    function handler() {
-      const func = defer ? raf : (v) => v();
-      const composedPath = event.composedPath?.() ?? [event.target];
+    function handler(clickEvent) {
+      const func = defer && !isTouchDevice() ? raf : (v) => v();
+      const evt = clickEvent ?? event;
+      const composedPath = evt?.composedPath?.() ?? [evt?.target];
       func(() => {
-        if (!node || !isEventOutside(event)) return;
+        const target = isInShadowRoot ? composedPath[0] : getEventTarget(event);
+        if (!node || !isEventOutside(event, target)) return;
         if (onPointerDownOutside || onInteractOutside) {
           const handler2 = callAll(onPointerDownOutside, onInteractOutside);
           node.addEventListener(POINTER_OUTSIDE_EVENT, handler2, { once: true });
@@ -136,9 +138,10 @@ function trackInteractOutsideImpl(node, options) {
           bubbles: false,
           cancelable: true,
           detail: {
-            originalEvent: event,
-            contextmenu: isContextMenuEvent(event),
-            focusable: isComposedPathFocusable(composedPath)
+            originalEvent: evt,
+            contextmenu: isContextMenuEvent(evt),
+            focusable: isComposedPathFocusable(composedPath),
+            target
           }
         });
       });
@@ -161,7 +164,8 @@ function trackInteractOutsideImpl(node, options) {
   function onFocusin(event) {
     const func = defer ? raf : (v) => v();
     func(() => {
-      if (!node || !isEventOutside(event)) return;
+      const target = getEventTarget(event);
+      if (!node || !isEventOutside(event, target)) return;
       if (onFocusOutside || onInteractOutside) {
         const handler = callAll(onFocusOutside, onInteractOutside);
         node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true });
@@ -172,14 +176,17 @@ function trackInteractOutsideImpl(node, options) {
         detail: {
           originalEvent: event,
           contextmenu: false,
-          focusable: isFocusable(getEventTarget(event))
+          focusable: isFocusable(target),
+          target
         }
       });
     });
   }
-  cleanups.add(addDomEvent(doc, "focusin", onFocusin, true));
-  cleanups.add(parentWin.addEventListener("focusin", onFocusin, true));
-  cleanups.add(frames.addEventListener("focusin", onFocusin, true));
+  if (!isTouchDevice()) {
+    cleanups.add(addDomEvent(doc, "focusin", onFocusin, true));
+    cleanups.add(parentWin.addEventListener("focusin", onFocusin, true));
+    cleanups.add(frames.addEventListener("focusin", onFocusin, true));
+  }
   return () => {
     clearTimeout(timer);
     pointerdownCleanups.forEach((fn) => fn());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/interact-outside",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Track interactions or focus outside an element",
   "keywords": [
     "js",
@@ -16,8 +16,8 @@
     "dist"
   ],
   "dependencies": {
-    "@zag-js/dom-query": "1.7.0",
-    "@zag-js/utils": "1.7.0"
+    "@zag-js/dom-query": "1.8.0",
+    "@zag-js/utils": "1.8.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"