@zag-js/interact-outside 0.65.1 → 0.66.0

package/dist/index.js

@@ -141,8 +141,8 @@ function trackInteractOutsideImpl(node, options) {
     }
     if (event.pointerType === "touch") {
       pointerdownCleanups.forEach((fn) => fn());
-      pointerdownCleanups.add((0, import_dom_event2.queueBeforeEvent)(doc, "pointerup", handler));
-      pointerdownCleanups.add(frames.queueBeforeEvent("pointerup", handler));
+      pointerdownCleanups.add((0, import_dom_event2.addDomEvent)(doc, "click", handler, { once: true }));
+      pointerdownCleanups.add(frames.addEventListener("click", handler, { once: true }));
     } else {
       handler();
     }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/get-window-frames.ts"],"sourcesContent":["import { addDomEvent, fireCustomEvent, isContextMenuEvent, queueBeforeEvent } from \"@zag-js/dom-event\"\nimport { contains, getDocument, getEventTarget, getWindow, isFocusable, isHTMLElement, raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { getWindowFrames } from \"./get-window-frames\"\n\nexport interface InteractOutsideHandlers {\n  /**\n   * Function called when the pointer is pressed down outside the component\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n  /**\n   * Function called when the focus is moved outside the component\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n  /**\n   * Function called when an interaction happens outside the component\n   */\n  onInteractOutside?: (event: InteractOutsideEvent) => void\n}\n\nexport interface InteractOutsideOptions extends InteractOutsideHandlers {\n  exclude?: (target: HTMLElement) => boolean\n  defer?: boolean\n}\n\nexport interface EventDetails<T> {\n  originalEvent: T\n  contextmenu: boolean\n  focusable: boolean\n}\n\nconst POINTER_OUTSIDE_EVENT = \"pointerdown.outside\"\nconst FOCUS_OUTSIDE_EVENT = \"focus.outside\"\n\nexport type PointerDownOutsideEvent = CustomEvent<EventDetails<PointerEvent>>\n\nexport type FocusOutsideEvent = CustomEvent<EventDetails<FocusEvent>>\n\nexport type InteractOutsideEvent = PointerDownOutsideEvent | FocusOutsideEvent\n\nexport type MaybeElement = HTMLElement | null | undefined\nexport type NodeOrFn = MaybeElement | (() => MaybeElement)\n\nfunction isComposedPathFocusable(composedPath: EventTarget[]) {\n  for (const node of composedPath) {\n    if (isHTMLElement(node) && isFocusable(node)) return true\n  }\n  return false\n}\n\nconst isPointerEvent = (event: Event): event is PointerEvent => \"clientY\" in event\n\nfunction isEventPointWithin(node: MaybeElement, event: Event) {\n  if (!isPointerEvent(event) || !node) return false\n\n  const rect = node.getBoundingClientRect()\n  if (rect.width === 0 || rect.height === 0) return false\n\n  return (\n    rect.top <= event.clientY &&\n    event.clientY <= rect.top + rect.height &&\n    rect.left <= event.clientX &&\n    event.clientX <= rect.left + rect.width\n  )\n}\n\nfunction isEventWithinScrollbar(event: Event): boolean {\n  const target = getEventTarget<HTMLElement>(event)\n  if (!target || !isPointerEvent(event)) return false\n\n  const isScrollableY = target.scrollHeight > target.clientHeight\n  const onScrollbarY = isScrollableY && event.clientX > target.clientWidth\n\n  const isScrollableX = target.scrollWidth > target.clientWidth\n  const onScrollbarX = isScrollableX && event.clientY > target.clientHeight\n\n  return onScrollbarY || onScrollbarX\n}\n\nfunction trackInteractOutsideImpl(node: MaybeElement, options: InteractOutsideOptions) {\n  const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside, defer } = options\n\n  if (!node) return\n\n  const doc = getDocument(node)\n  const win = getWindow(node)\n  const frames = getWindowFrames(win)\n\n  function isEventOutside(event: Event): boolean {\n    const target = getEventTarget(event)\n    if (!isHTMLElement(target)) return false\n    if (contains(node, target)) return false\n    if (isEventPointWithin(node, event)) return false\n    if (isEventWithinScrollbar(event)) return false\n    return !exclude?.(target)\n  }\n\n  const pointerdownCleanups: Set<VoidFunction> = new Set()\n\n  function onPointerDown(event: PointerEvent) {\n    //\n    function handler() {\n      const func = defer ? raf : (v: any) => v()\n      const composedPath = event.composedPath?.() ?? [event.target]\n      func(() => {\n        if (!node || !isEventOutside(event)) return\n\n        if (onPointerDownOutside || onInteractOutside) {\n          const handler = callAll(onPointerDownOutside, onInteractOutside) as EventListener\n          node.addEventListener(POINTER_OUTSIDE_EVENT, handler, { once: true })\n        }\n\n        fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {\n          bubbles: false,\n          cancelable: true,\n          detail: {\n            originalEvent: event,\n            contextmenu: isContextMenuEvent(event),\n            focusable: isComposedPathFocusable(composedPath),\n          },\n        })\n      })\n    }\n\n    if (event.pointerType === \"touch\") {\n      // flush any pending pointerup events\n      pointerdownCleanups.forEach((fn) => fn())\n\n      // add a pointerup event listener to the document and all frame documents\n      pointerdownCleanups.add(queueBeforeEvent(doc, \"pointerup\", handler))\n      pointerdownCleanups.add(frames.queueBeforeEvent(\"pointerup\", handler))\n    } else {\n      handler()\n    }\n  }\n  const cleanups = new Set<VoidFunction>()\n\n  const timer = setTimeout(() => {\n    cleanups.add(frames.addEventListener(\"pointerdown\", onPointerDown, true))\n    cleanups.add(addDomEvent(doc, \"pointerdown\", onPointerDown, true))\n  }, 0)\n\n  function onFocusin(event: FocusEvent) {\n    //\n    const func = defer ? raf : (v: any) => v()\n    func(() => {\n      if (!node || !isEventOutside(event)) return\n\n      if (onFocusOutside || onInteractOutside) {\n        const handler = callAll(onFocusOutside, onInteractOutside) as EventListener\n        node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true })\n      }\n\n      fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {\n        bubbles: false,\n        cancelable: true,\n        detail: {\n          originalEvent: event,\n          contextmenu: false,\n          focusable: isFocusable(getEventTarget(event)),\n        },\n      })\n    })\n  }\n\n  cleanups.add(addDomEvent(doc, \"focusin\", onFocusin, true))\n  cleanups.add(frames.addEventListener(\"focusin\", onFocusin, true))\n\n  return () => {\n    clearTimeout(timer)\n    pointerdownCleanups.forEach((fn) => fn())\n    cleanups.forEach((fn) => fn())\n  }\n}\n\nexport function trackInteractOutside(nodeOrFn: NodeOrFn, options: InteractOutsideOptions) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const node = typeof nodeOrFn === \"function\" ? nodeOrFn() : nodeOrFn\n      cleanups.push(trackInteractOutsideImpl(node, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { queueBeforeEvent } from \"@zag-js/dom-event\"\n\nexport function getWindowFrames(win: Window) {\n  const frames = {\n    each(cb: (win: Window) => void) {\n      for (let i = 0; i < win.frames?.length; i += 1) {\n        const frame = win.frames[i]\n        if (frame) cb(frame)\n      }\n    },\n\n    queueBeforeEvent(event: string, listener: any) {\n      const cleanup = new Set<VoidFunction>()\n      frames.each((frame) => {\n        try {\n          cleanup.add(queueBeforeEvent(frame.document, event, listener))\n        } catch {}\n      })\n\n      return () => {\n        try {\n          cleanup.forEach((fn) => fn())\n        } catch {}\n      }\n    },\n\n    addEventListener(event: string, listener: any, options?: any) {\n      frames.each((frame) => {\n        try {\n          frame.document.addEventListener(event, listener, options)\n        } catch {}\n      })\n\n      return () => {\n        try {\n          frames.removeEventListener(event, listener, options)\n        } catch {}\n      }\n    },\n\n    removeEventListener(event: string, listener: any, options?: any) {\n      frames.each((frame) => {\n        try {\n          frame.document.removeEventListener(event, listener, options)\n        } catch {}\n      })\n    },\n  }\n\n  return frames\n}\n"],"mappings":"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","names":["import_dom_event","handler"]}
+{"version":3,"sources":["../src/index.ts","../src/get-window-frames.ts"],"sourcesContent":["import { addDomEvent, fireCustomEvent, isContextMenuEvent } from \"@zag-js/dom-event\"\nimport { contains, getDocument, getEventTarget, getWindow, isFocusable, isHTMLElement, raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { getWindowFrames } from \"./get-window-frames\"\n\nexport interface InteractOutsideHandlers {\n  /**\n   * Function called when the pointer is pressed down outside the component\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n  /**\n   * Function called when the focus is moved outside the component\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n  /**\n   * Function called when an interaction happens outside the component\n   */\n  onInteractOutside?: (event: InteractOutsideEvent) => void\n}\n\nexport interface InteractOutsideOptions extends InteractOutsideHandlers {\n  exclude?: (target: HTMLElement) => boolean\n  defer?: boolean\n}\n\nexport interface EventDetails<T> {\n  originalEvent: T\n  contextmenu: boolean\n  focusable: boolean\n}\n\nconst POINTER_OUTSIDE_EVENT = \"pointerdown.outside\"\nconst FOCUS_OUTSIDE_EVENT = \"focus.outside\"\n\nexport type PointerDownOutsideEvent = CustomEvent<EventDetails<PointerEvent>>\n\nexport type FocusOutsideEvent = CustomEvent<EventDetails<FocusEvent>>\n\nexport type InteractOutsideEvent = PointerDownOutsideEvent | FocusOutsideEvent\n\nexport type MaybeElement = HTMLElement | null | undefined\nexport type NodeOrFn = MaybeElement | (() => MaybeElement)\n\nfunction isComposedPathFocusable(composedPath: EventTarget[]) {\n  for (const node of composedPath) {\n    if (isHTMLElement(node) && isFocusable(node)) return true\n  }\n  return false\n}\n\nconst isPointerEvent = (event: Event): event is PointerEvent => \"clientY\" in event\n\nfunction isEventPointWithin(node: MaybeElement, event: Event) {\n  if (!isPointerEvent(event) || !node) return false\n\n  const rect = node.getBoundingClientRect()\n  if (rect.width === 0 || rect.height === 0) return false\n\n  return (\n    rect.top <= event.clientY &&\n    event.clientY <= rect.top + rect.height &&\n    rect.left <= event.clientX &&\n    event.clientX <= rect.left + rect.width\n  )\n}\n\nfunction isEventWithinScrollbar(event: Event): boolean {\n  const target = getEventTarget<HTMLElement>(event)\n  if (!target || !isPointerEvent(event)) return false\n\n  const isScrollableY = target.scrollHeight > target.clientHeight\n  const onScrollbarY = isScrollableY && event.clientX > target.clientWidth\n\n  const isScrollableX = target.scrollWidth > target.clientWidth\n  const onScrollbarX = isScrollableX && event.clientY > target.clientHeight\n\n  return onScrollbarY || onScrollbarX\n}\n\nfunction trackInteractOutsideImpl(node: MaybeElement, options: InteractOutsideOptions) {\n  const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside, defer } = options\n\n  if (!node) return\n\n  const doc = getDocument(node)\n  const win = getWindow(node)\n  const frames = getWindowFrames(win)\n\n  function isEventOutside(event: Event): boolean {\n    const target = getEventTarget(event)\n    if (!isHTMLElement(target)) return false\n    if (contains(node, target)) return false\n    if (isEventPointWithin(node, event)) return false\n    if (isEventWithinScrollbar(event)) return false\n    return !exclude?.(target)\n  }\n\n  const pointerdownCleanups: Set<VoidFunction> = new Set()\n\n  function onPointerDown(event: PointerEvent) {\n    //\n    function handler() {\n      const func = defer ? raf : (v: any) => v()\n      const composedPath = event.composedPath?.() ?? [event.target]\n      func(() => {\n        if (!node || !isEventOutside(event)) return\n\n        if (onPointerDownOutside || onInteractOutside) {\n          const handler = callAll(onPointerDownOutside, onInteractOutside) as EventListener\n          node.addEventListener(POINTER_OUTSIDE_EVENT, handler, { once: true })\n        }\n\n        fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {\n          bubbles: false,\n          cancelable: true,\n          detail: {\n            originalEvent: event,\n            contextmenu: isContextMenuEvent(event),\n            focusable: isComposedPathFocusable(composedPath),\n          },\n        })\n      })\n    }\n\n    if (event.pointerType === \"touch\") {\n      // flush any pending pointerup events\n      pointerdownCleanups.forEach((fn) => fn())\n\n      // add a pointerup event listener to the document and all frame documents\n      pointerdownCleanups.add(addDomEvent(doc, \"click\", handler, { once: true }))\n      pointerdownCleanups.add(frames.addEventListener(\"click\", handler, { once: true }))\n    } else {\n      handler()\n    }\n  }\n  const cleanups = new Set<VoidFunction>()\n\n  const timer = setTimeout(() => {\n    cleanups.add(frames.addEventListener(\"pointerdown\", onPointerDown, true))\n    cleanups.add(addDomEvent(doc, \"pointerdown\", onPointerDown, true))\n  }, 0)\n\n  function onFocusin(event: FocusEvent) {\n    //\n    const func = defer ? raf : (v: any) => v()\n    func(() => {\n      if (!node || !isEventOutside(event)) return\n\n      if (onFocusOutside || onInteractOutside) {\n        const handler = callAll(onFocusOutside, onInteractOutside) as EventListener\n        node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true })\n      }\n\n      fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {\n        bubbles: false,\n        cancelable: true,\n        detail: {\n          originalEvent: event,\n          contextmenu: false,\n          focusable: isFocusable(getEventTarget(event)),\n        },\n      })\n    })\n  }\n\n  cleanups.add(addDomEvent(doc, \"focusin\", onFocusin, true))\n  cleanups.add(frames.addEventListener(\"focusin\", onFocusin, true))\n\n  return () => {\n    clearTimeout(timer)\n    pointerdownCleanups.forEach((fn) => fn())\n    cleanups.forEach((fn) => fn())\n  }\n}\n\nexport function trackInteractOutside(nodeOrFn: NodeOrFn, options: InteractOutsideOptions) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const node = typeof nodeOrFn === \"function\" ? nodeOrFn() : nodeOrFn\n      cleanups.push(trackInteractOutsideImpl(node, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { queueBeforeEvent } from \"@zag-js/dom-event\"\n\nexport function getWindowFrames(win: Window) {\n  const frames = {\n    each(cb: (win: Window) => void) {\n      for (let i = 0; i < win.frames?.length; i += 1) {\n        const frame = win.frames[i]\n        if (frame) cb(frame)\n      }\n    },\n\n    queueBeforeEvent(event: string, listener: any) {\n      const cleanup = new Set<VoidFunction>()\n      frames.each((frame) => {\n        try {\n          cleanup.add(queueBeforeEvent(frame.document, event, listener))\n        } catch {}\n      })\n\n      return () => {\n        try {\n          cleanup.forEach((fn) => fn())\n        } catch {}\n      }\n    },\n\n    addEventListener(event: string, listener: any, options?: any) {\n      frames.each((frame) => {\n        try {\n          frame.document.addEventListener(event, listener, options)\n        } catch {}\n      })\n\n      return () => {\n        try {\n          frames.removeEventListener(event, listener, options)\n        } catch {}\n      }\n    },\n\n    removeEventListener(event: string, listener: any, options?: any) {\n      frames.each((frame) => {\n        try {\n          frame.document.removeEventListener(event, listener, options)\n        } catch {}\n      })\n    },\n  }\n\n  return frames\n}\n"],"mappings":"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","names":["import_dom_event","handler"]}

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/index.ts
-import { addDomEvent, fireCustomEvent, isContextMenuEvent, queueBeforeEvent as queueBeforeEvent2 } from "@zag-js/dom-event";
+import { addDomEvent, fireCustomEvent, isContextMenuEvent } from "@zag-js/dom-event";
 import { contains, getDocument, getEventTarget, getWindow, isFocusable, isHTMLElement, raf } from "@zag-js/dom-query";
 import { callAll } from "@zag-js/utils";
 
@@ -117,8 +117,8 @@ function trackInteractOutsideImpl(node, options) {
     }
     if (event.pointerType === "touch") {
       pointerdownCleanups.forEach((fn) => fn());
-      pointerdownCleanups.add(queueBeforeEvent2(doc, "pointerup", handler));
-      pointerdownCleanups.add(frames.queueBeforeEvent("pointerup", handler));
+      pointerdownCleanups.add(addDomEvent(doc, "click", handler, { once: true }));
+      pointerdownCleanups.add(frames.addEventListener("click", handler, { once: true }));
     } else {
       handler();
     }

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/get-window-frames.ts"],"sourcesContent":["import { addDomEvent, fireCustomEvent, isContextMenuEvent, queueBeforeEvent } from \"@zag-js/dom-event\"\nimport { contains, getDocument, getEventTarget, getWindow, isFocusable, isHTMLElement, raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { getWindowFrames } from \"./get-window-frames\"\n\nexport interface InteractOutsideHandlers {\n  /**\n   * Function called when the pointer is pressed down outside the component\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n  /**\n   * Function called when the focus is moved outside the component\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n  /**\n   * Function called when an interaction happens outside the component\n   */\n  onInteractOutside?: (event: InteractOutsideEvent) => void\n}\n\nexport interface InteractOutsideOptions extends InteractOutsideHandlers {\n  exclude?: (target: HTMLElement) => boolean\n  defer?: boolean\n}\n\nexport interface EventDetails<T> {\n  originalEvent: T\n  contextmenu: boolean\n  focusable: boolean\n}\n\nconst POINTER_OUTSIDE_EVENT = \"pointerdown.outside\"\nconst FOCUS_OUTSIDE_EVENT = \"focus.outside\"\n\nexport type PointerDownOutsideEvent = CustomEvent<EventDetails<PointerEvent>>\n\nexport type FocusOutsideEvent = CustomEvent<EventDetails<FocusEvent>>\n\nexport type InteractOutsideEvent = PointerDownOutsideEvent | FocusOutsideEvent\n\nexport type MaybeElement = HTMLElement | null | undefined\nexport type NodeOrFn = MaybeElement | (() => MaybeElement)\n\nfunction isComposedPathFocusable(composedPath: EventTarget[]) {\n  for (const node of composedPath) {\n    if (isHTMLElement(node) && isFocusable(node)) return true\n  }\n  return false\n}\n\nconst isPointerEvent = (event: Event): event is PointerEvent => \"clientY\" in event\n\nfunction isEventPointWithin(node: MaybeElement, event: Event) {\n  if (!isPointerEvent(event) || !node) return false\n\n  const rect = node.getBoundingClientRect()\n  if (rect.width === 0 || rect.height === 0) return false\n\n  return (\n    rect.top <= event.clientY &&\n    event.clientY <= rect.top + rect.height &&\n    rect.left <= event.clientX &&\n    event.clientX <= rect.left + rect.width\n  )\n}\n\nfunction isEventWithinScrollbar(event: Event): boolean {\n  const target = getEventTarget<HTMLElement>(event)\n  if (!target || !isPointerEvent(event)) return false\n\n  const isScrollableY = target.scrollHeight > target.clientHeight\n  const onScrollbarY = isScrollableY && event.clientX > target.clientWidth\n\n  const isScrollableX = target.scrollWidth > target.clientWidth\n  const onScrollbarX = isScrollableX && event.clientY > target.clientHeight\n\n  return onScrollbarY || onScrollbarX\n}\n\nfunction trackInteractOutsideImpl(node: MaybeElement, options: InteractOutsideOptions) {\n  const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside, defer } = options\n\n  if (!node) return\n\n  const doc = getDocument(node)\n  const win = getWindow(node)\n  const frames = getWindowFrames(win)\n\n  function isEventOutside(event: Event): boolean {\n    const target = getEventTarget(event)\n    if (!isHTMLElement(target)) return false\n    if (contains(node, target)) return false\n    if (isEventPointWithin(node, event)) return false\n    if (isEventWithinScrollbar(event)) return false\n    return !exclude?.(target)\n  }\n\n  const pointerdownCleanups: Set<VoidFunction> = new Set()\n\n  function onPointerDown(event: PointerEvent) {\n    //\n    function handler() {\n      const func = defer ? raf : (v: any) => v()\n      const composedPath = event.composedPath?.() ?? [event.target]\n      func(() => {\n        if (!node || !isEventOutside(event)) return\n\n        if (onPointerDownOutside || onInteractOutside) {\n          const handler = callAll(onPointerDownOutside, onInteractOutside) as EventListener\n          node.addEventListener(POINTER_OUTSIDE_EVENT, handler, { once: true })\n        }\n\n        fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {\n          bubbles: false,\n          cancelable: true,\n          detail: {\n            originalEvent: event,\n            contextmenu: isContextMenuEvent(event),\n            focusable: isComposedPathFocusable(composedPath),\n          },\n        })\n      })\n    }\n\n    if (event.pointerType === \"touch\") {\n      // flush any pending pointerup events\n      pointerdownCleanups.forEach((fn) => fn())\n\n      // add a pointerup event listener to the document and all frame documents\n      pointerdownCleanups.add(queueBeforeEvent(doc, \"pointerup\", handler))\n      pointerdownCleanups.add(frames.queueBeforeEvent(\"pointerup\", handler))\n    } else {\n      handler()\n    }\n  }\n  const cleanups = new Set<VoidFunction>()\n\n  const timer = setTimeout(() => {\n    cleanups.add(frames.addEventListener(\"pointerdown\", onPointerDown, true))\n    cleanups.add(addDomEvent(doc, \"pointerdown\", onPointerDown, true))\n  }, 0)\n\n  function onFocusin(event: FocusEvent) {\n    //\n    const func = defer ? raf : (v: any) => v()\n    func(() => {\n      if (!node || !isEventOutside(event)) return\n\n      if (onFocusOutside || onInteractOutside) {\n        const handler = callAll(onFocusOutside, onInteractOutside) as EventListener\n        node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true })\n      }\n\n      fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {\n        bubbles: false,\n        cancelable: true,\n        detail: {\n          originalEvent: event,\n          contextmenu: false,\n          focusable: isFocusable(getEventTarget(event)),\n        },\n      })\n    })\n  }\n\n  cleanups.add(addDomEvent(doc, \"focusin\", onFocusin, true))\n  cleanups.add(frames.addEventListener(\"focusin\", onFocusin, true))\n\n  return () => {\n    clearTimeout(timer)\n    pointerdownCleanups.forEach((fn) => fn())\n    cleanups.forEach((fn) => fn())\n  }\n}\n\nexport function trackInteractOutside(nodeOrFn: NodeOrFn, options: InteractOutsideOptions) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const node = typeof nodeOrFn === \"function\" ? nodeOrFn() : nodeOrFn\n      cleanups.push(trackInteractOutsideImpl(node, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { queueBeforeEvent } from \"@zag-js/dom-event\"\n\nexport function getWindowFrames(win: Window) {\n  const frames = {\n    each(cb: (win: Window) => void) {\n      for (let i = 0; i < win.frames?.length; i += 1) {\n        const frame = win.frames[i]\n        if (frame) cb(frame)\n      }\n    },\n\n    queueBeforeEvent(event: string, listener: any) {\n      const cleanup = new Set<VoidFunction>()\n      frames.each((frame) => {\n        try {\n          cleanup.add(queueBeforeEvent(frame.document, event, listener))\n        } catch {}\n      })\n\n      return () => {\n        try {\n          cleanup.forEach((fn) => fn())\n        } catch {}\n      }\n    },\n\n    addEventListener(event: string, listener: any, options?: any) {\n      frames.each((frame) => {\n        try {\n          frame.document.addEventListener(event, listener, options)\n        } catch {}\n      })\n\n      return () => {\n        try {\n          frames.removeEventListener(event, listener, options)\n        } catch {}\n      }\n    },\n\n    removeEventListener(event: string, listener: any, options?: any) {\n      frames.each((frame) => {\n        try {\n          frame.document.removeEventListener(event, listener, options)\n        } catch {}\n      })\n    },\n  }\n\n  return frames\n}\n"],"mappings":"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","names":["queueBeforeEvent","handler","queueBeforeEvent"]}
+{"version":3,"sources":["../src/index.ts","../src/get-window-frames.ts"],"sourcesContent":["import { addDomEvent, fireCustomEvent, isContextMenuEvent } from \"@zag-js/dom-event\"\nimport { contains, getDocument, getEventTarget, getWindow, isFocusable, isHTMLElement, raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { getWindowFrames } from \"./get-window-frames\"\n\nexport interface InteractOutsideHandlers {\n  /**\n   * Function called when the pointer is pressed down outside the component\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n  /**\n   * Function called when the focus is moved outside the component\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n  /**\n   * Function called when an interaction happens outside the component\n   */\n  onInteractOutside?: (event: InteractOutsideEvent) => void\n}\n\nexport interface InteractOutsideOptions extends InteractOutsideHandlers {\n  exclude?: (target: HTMLElement) => boolean\n  defer?: boolean\n}\n\nexport interface EventDetails<T> {\n  originalEvent: T\n  contextmenu: boolean\n  focusable: boolean\n}\n\nconst POINTER_OUTSIDE_EVENT = \"pointerdown.outside\"\nconst FOCUS_OUTSIDE_EVENT = \"focus.outside\"\n\nexport type PointerDownOutsideEvent = CustomEvent<EventDetails<PointerEvent>>\n\nexport type FocusOutsideEvent = CustomEvent<EventDetails<FocusEvent>>\n\nexport type InteractOutsideEvent = PointerDownOutsideEvent | FocusOutsideEvent\n\nexport type MaybeElement = HTMLElement | null | undefined\nexport type NodeOrFn = MaybeElement | (() => MaybeElement)\n\nfunction isComposedPathFocusable(composedPath: EventTarget[]) {\n  for (const node of composedPath) {\n    if (isHTMLElement(node) && isFocusable(node)) return true\n  }\n  return false\n}\n\nconst isPointerEvent = (event: Event): event is PointerEvent => \"clientY\" in event\n\nfunction isEventPointWithin(node: MaybeElement, event: Event) {\n  if (!isPointerEvent(event) || !node) return false\n\n  const rect = node.getBoundingClientRect()\n  if (rect.width === 0 || rect.height === 0) return false\n\n  return (\n    rect.top <= event.clientY &&\n    event.clientY <= rect.top + rect.height &&\n    rect.left <= event.clientX &&\n    event.clientX <= rect.left + rect.width\n  )\n}\n\nfunction isEventWithinScrollbar(event: Event): boolean {\n  const target = getEventTarget<HTMLElement>(event)\n  if (!target || !isPointerEvent(event)) return false\n\n  const isScrollableY = target.scrollHeight > target.clientHeight\n  const onScrollbarY = isScrollableY && event.clientX > target.clientWidth\n\n  const isScrollableX = target.scrollWidth > target.clientWidth\n  const onScrollbarX = isScrollableX && event.clientY > target.clientHeight\n\n  return onScrollbarY || onScrollbarX\n}\n\nfunction trackInteractOutsideImpl(node: MaybeElement, options: InteractOutsideOptions) {\n  const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside, defer } = options\n\n  if (!node) return\n\n  const doc = getDocument(node)\n  const win = getWindow(node)\n  const frames = getWindowFrames(win)\n\n  function isEventOutside(event: Event): boolean {\n    const target = getEventTarget(event)\n    if (!isHTMLElement(target)) return false\n    if (contains(node, target)) return false\n    if (isEventPointWithin(node, event)) return false\n    if (isEventWithinScrollbar(event)) return false\n    return !exclude?.(target)\n  }\n\n  const pointerdownCleanups: Set<VoidFunction> = new Set()\n\n  function onPointerDown(event: PointerEvent) {\n    //\n    function handler() {\n      const func = defer ? raf : (v: any) => v()\n      const composedPath = event.composedPath?.() ?? [event.target]\n      func(() => {\n        if (!node || !isEventOutside(event)) return\n\n        if (onPointerDownOutside || onInteractOutside) {\n          const handler = callAll(onPointerDownOutside, onInteractOutside) as EventListener\n          node.addEventListener(POINTER_OUTSIDE_EVENT, handler, { once: true })\n        }\n\n        fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {\n          bubbles: false,\n          cancelable: true,\n          detail: {\n            originalEvent: event,\n            contextmenu: isContextMenuEvent(event),\n            focusable: isComposedPathFocusable(composedPath),\n          },\n        })\n      })\n    }\n\n    if (event.pointerType === \"touch\") {\n      // flush any pending pointerup events\n      pointerdownCleanups.forEach((fn) => fn())\n\n      // add a pointerup event listener to the document and all frame documents\n      pointerdownCleanups.add(addDomEvent(doc, \"click\", handler, { once: true }))\n      pointerdownCleanups.add(frames.addEventListener(\"click\", handler, { once: true }))\n    } else {\n      handler()\n    }\n  }\n  const cleanups = new Set<VoidFunction>()\n\n  const timer = setTimeout(() => {\n    cleanups.add(frames.addEventListener(\"pointerdown\", onPointerDown, true))\n    cleanups.add(addDomEvent(doc, \"pointerdown\", onPointerDown, true))\n  }, 0)\n\n  function onFocusin(event: FocusEvent) {\n    //\n    const func = defer ? raf : (v: any) => v()\n    func(() => {\n      if (!node || !isEventOutside(event)) return\n\n      if (onFocusOutside || onInteractOutside) {\n        const handler = callAll(onFocusOutside, onInteractOutside) as EventListener\n        node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true })\n      }\n\n      fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {\n        bubbles: false,\n        cancelable: true,\n        detail: {\n          originalEvent: event,\n          contextmenu: false,\n          focusable: isFocusable(getEventTarget(event)),\n        },\n      })\n    })\n  }\n\n  cleanups.add(addDomEvent(doc, \"focusin\", onFocusin, true))\n  cleanups.add(frames.addEventListener(\"focusin\", onFocusin, true))\n\n  return () => {\n    clearTimeout(timer)\n    pointerdownCleanups.forEach((fn) => fn())\n    cleanups.forEach((fn) => fn())\n  }\n}\n\nexport function trackInteractOutside(nodeOrFn: NodeOrFn, options: InteractOutsideOptions) {\n  const { defer } = options\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const node = typeof nodeOrFn === \"function\" ? nodeOrFn() : nodeOrFn\n      cleanups.push(trackInteractOutsideImpl(node, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { queueBeforeEvent } from \"@zag-js/dom-event\"\n\nexport function getWindowFrames(win: Window) {\n  const frames = {\n    each(cb: (win: Window) => void) {\n      for (let i = 0; i < win.frames?.length; i += 1) {\n        const frame = win.frames[i]\n        if (frame) cb(frame)\n      }\n    },\n\n    queueBeforeEvent(event: string, listener: any) {\n      const cleanup = new Set<VoidFunction>()\n      frames.each((frame) => {\n        try {\n          cleanup.add(queueBeforeEvent(frame.document, event, listener))\n        } catch {}\n      })\n\n      return () => {\n        try {\n          cleanup.forEach((fn) => fn())\n        } catch {}\n      }\n    },\n\n    addEventListener(event: string, listener: any, options?: any) {\n      frames.each((frame) => {\n        try {\n          frame.document.addEventListener(event, listener, options)\n        } catch {}\n      })\n\n      return () => {\n        try {\n          frames.removeEventListener(event, listener, options)\n        } catch {}\n      }\n    },\n\n    removeEventListener(event: string, listener: any, options?: any) {\n      frames.each((frame) => {\n        try {\n          frame.document.removeEventListener(event, listener, options)\n        } catch {}\n      })\n    },\n  }\n\n  return frames\n}\n"],"mappings":"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","names":["handler"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/interact-outside",
-  "version": "0.65.1",
+  "version": "0.66.0",
   "description": "Track interations or focus outside an element",
   "keywords": [
     "js",
@@ -17,9 +17,9 @@
     "src"
   ],
   "dependencies": {
-    "@zag-js/dom-query": "0.65.1",
-    "@zag-js/dom-event": "0.65.1",
-    "@zag-js/utils": "0.65.1"
+    "@zag-js/dom-query": "0.66.0",
+    "@zag-js/dom-event": "0.66.0",
+    "@zag-js/utils": "0.66.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/index.ts

@@ -1,4 +1,4 @@
-import { addDomEvent, fireCustomEvent, isContextMenuEvent, queueBeforeEvent } from "@zag-js/dom-event"
+import { addDomEvent, fireCustomEvent, isContextMenuEvent } from "@zag-js/dom-event"
 import { contains, getDocument, getEventTarget, getWindow, isFocusable, isHTMLElement, raf } from "@zag-js/dom-query"
 import { callAll } from "@zag-js/utils"
 import { getWindowFrames } from "./get-window-frames"
@@ -127,8 +127,8 @@ function trackInteractOutsideImpl(node: MaybeElement, options: InteractOutsideOp
       pointerdownCleanups.forEach((fn) => fn())
 
       // add a pointerup event listener to the document and all frame documents
-      pointerdownCleanups.add(queueBeforeEvent(doc, "pointerup", handler))
-      pointerdownCleanups.add(frames.queueBeforeEvent("pointerup", handler))
+      pointerdownCleanups.add(addDomEvent(doc, "click", handler, { once: true }))
+      pointerdownCleanups.add(frames.addEventListener("click", handler, { once: true }))
     } else {
       handler()
     }