@zag-js/interact-outside 0.9.2 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/interact-outside",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "Track interations or focus outside an element",
   "keywords": [
     "js",
@@ -13,13 +13,14 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/interact-outside",
   "sideEffects": false,
   "files": [
-    "dist/**/*"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@zag-js/dom-query": "0.9.2",
-    "@zag-js/dom-event": "0.9.2",
-    "@zag-js/tabbable": "0.9.2",
-    "@zag-js/utils": "0.9.2"
+    "@zag-js/dom-query": "0.10.0",
+    "@zag-js/dom-event": "0.10.0",
+    "@zag-js/tabbable": "0.10.0",
+    "@zag-js/utils": "0.10.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/get-window-frames.ts

@@ -0,0 +1,36 @@
+export function getWindowFrames(win: Window) {
+  const frames = {
+    each(cb: (win: Window) => void) {
+      for (let i = 0; i < win.frames?.length; i += 1) {
+        const frame = win.frames[i]
+        if (frame) cb(frame)
+      }
+    },
+    addEventListener(event: string, listener: any, options?: any) {
+      frames.each((frame) => {
+        try {
+          frame.document.addEventListener(event, listener, options)
+        } catch (err) {
+          console.warn(err)
+        }
+      })
+      return () => {
+        try {
+          frames.removeEventListener(event, listener, options)
+        } catch (err) {
+          console.warn(err)
+        }
+      }
+    },
+    removeEventListener(event: string, listener: any, options?: any) {
+      frames.each((frame) => {
+        try {
+          frame.document.removeEventListener(event, listener, options)
+        } catch (err) {
+          console.warn(err)
+        }
+      })
+    },
+  }
+  return frames
+}

package/src/index.ts

@@ -0,0 +1,155 @@
+import { addDomEvent, fireCustomEvent, isContextMenuEvent } from "@zag-js/dom-event"
+import { contains, getDocument, getEventTarget, getWindow, isHTMLElement, raf } from "@zag-js/dom-query"
+import { isFocusable } from "@zag-js/tabbable"
+import { callAll } from "@zag-js/utils"
+import { getWindowFrames } from "./get-window-frames"
+
+export type InteractOutsideHandlers = {
+  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void
+  onFocusOutside?: (event: FocusOutsideEvent) => void
+  onInteractOutside?: (event: InteractOutsideEvent) => void
+}
+
+export type InteractOutsideOptions = InteractOutsideHandlers & {
+  exclude?: (target: HTMLElement) => boolean
+  defer?: boolean
+}
+
+type EventDetails<T> = {
+  originalEvent: T
+  contextmenu: boolean
+  focusable: boolean
+}
+
+const POINTER_OUTSIDE_EVENT = "pointerdown.outside"
+const FOCUS_OUTSIDE_EVENT = "focus.outside"
+
+export type PointerDownOutsideEvent = CustomEvent<EventDetails<PointerEvent>>
+
+export type FocusOutsideEvent = CustomEvent<EventDetails<FocusEvent>>
+
+export type InteractOutsideEvent = PointerDownOutsideEvent | FocusOutsideEvent
+
+type MaybeElement = HTMLElement | null | undefined
+type NodeOrFn = MaybeElement | (() => MaybeElement)
+
+function isComposedPathFocusable(event: Event) {
+  const composedPath = event.composedPath() ?? [event.target as HTMLElement]
+  for (const node of composedPath) {
+    if (isHTMLElement(node) && isFocusable(node)) return true
+  }
+  return false
+}
+
+function trackInteractOutsideImpl(node: MaybeElement, options: InteractOutsideOptions) {
+  const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside } = options
+
+  if (!node) return
+
+  const doc = getDocument(node)
+  const win = getWindow(node)
+  const frames = getWindowFrames(win)
+
+  function isEventOutside(event: Event): boolean {
+    const target = getEventTarget(event)
+
+    if (!isHTMLElement(target)) {
+      return false
+    }
+
+    if (contains(node, target)) {
+      return false
+    }
+
+    return !exclude?.(target)
+  }
+
+  let clickHandler: VoidFunction
+
+  function onPointerDown(event: PointerEvent) {
+    //
+    function handler() {
+      if (!node || !isEventOutside(event)) return
+
+      if (onPointerDownOutside || onInteractOutside) {
+        const handler = callAll(onPointerDownOutside, onInteractOutside) as EventListener
+        node.addEventListener(POINTER_OUTSIDE_EVENT, handler, { once: true })
+      }
+
+      fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
+        bubbles: false,
+        cancelable: true,
+        detail: {
+          originalEvent: event,
+          contextmenu: isContextMenuEvent(event),
+          focusable: isComposedPathFocusable(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 = new Set<VoidFunction>()
+
+  const timer = setTimeout(() => {
+    cleanups.add(frames.addEventListener("pointerdown", onPointerDown, true))
+    cleanups.add(addDomEvent(doc, "pointerdown", onPointerDown, true))
+  }, 0)
+
+  function onFocusin(event: FocusEvent) {
+    //
+    if (!node || !isEventOutside(event)) return
+
+    if (onFocusOutside || onInteractOutside) {
+      const handler = callAll(onFocusOutside, onInteractOutside) as EventListener
+      node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { 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))
+  cleanups.add(frames.addEventListener("focusin", onFocusin, true))
+
+  return () => {
+    clearTimeout(timer)
+    if (clickHandler) {
+      frames.removeEventListener("click", clickHandler)
+      doc.removeEventListener("click", clickHandler)
+    }
+    cleanups.forEach((fn) => fn())
+  }
+}
+
+export function trackInteractOutside(nodeOrFn: NodeOrFn, options: InteractOutsideOptions) {
+  const { defer } = options
+  const func = defer ? raf : (v: any) => v()
+  const cleanups: (VoidFunction | undefined)[] = []
+  cleanups.push(
+    func(() => {
+      const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn
+      cleanups.push(trackInteractOutsideImpl(node, options))
+    }),
+  )
+  return () => {
+    cleanups.forEach((fn) => fn?.())
+  }
+}