@zag-js/dismissable 0.9.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/dismissable",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Dismissable layer utilities for the DOM",
   "keywords": [
     "js",
@@ -17,16 +17,17 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/interact-outside",
   "sideEffects": false,
   "files": [
-    "dist/**/*"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@zag-js/interact-outside": "0.9.1",
-    "@zag-js/dom-query": "0.9.1",
-    "@zag-js/dom-event": "0.9.1",
-    "@zag-js/utils": "0.9.1"
+    "@zag-js/interact-outside": "0.10.0",
+    "@zag-js/dom-query": "0.10.0",
+    "@zag-js/dom-event": "0.10.0",
+    "@zag-js/utils": "0.10.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/dismissable-layer.ts

@@ -0,0 +1,111 @@
+import { contains, getEventTarget, raf } from "@zag-js/dom-query"
+import {
+  FocusOutsideEvent,
+  InteractOutsideHandlers,
+  PointerDownOutsideEvent,
+  trackInteractOutside,
+} from "@zag-js/interact-outside"
+import { warn } from "@zag-js/utils"
+import { trackEscapeKeydown } from "./escape-keydown"
+import { Layer, layerStack } from "./layer-stack"
+import { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside } from "./pointer-event-outside"
+
+type MaybeElement = HTMLElement | null
+type Container = MaybeElement | Array<MaybeElement>
+type NodeOrFn = MaybeElement | (() => MaybeElement)
+
+export type DismissableElementHandlers = InteractOutsideHandlers & {
+  onEscapeKeyDown?: (event: KeyboardEvent) => void
+}
+
+export type DismissableElementOptions = DismissableElementHandlers & {
+  debug?: boolean
+  pointerBlocking?: boolean
+  onDismiss: () => void
+  exclude?: Container | (() => Container)
+  defer?: boolean
+}
+
+function trackDismissableElementImpl(node: MaybeElement, options: DismissableElementOptions) {
+  if (!node) {
+    warn("[@zag-js/dismissable] node is `null` or `undefined`")
+    return
+  }
+
+  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options
+
+  const layer: Layer = { dismiss: onDismiss, node, pointerBlocking }
+
+  layerStack.add(layer)
+  assignPointerEventToLayers()
+
+  function onPointerDownOutside(event: PointerDownOutsideEvent) {
+    const target = getEventTarget(event.detail.originalEvent)
+    if (layerStack.isBelowPointerBlockingLayer(node!) || layerStack.isInBranch(target)) return
+    options.onPointerDownOutside?.(event)
+    options.onInteractOutside?.(event)
+    if (event.defaultPrevented) return
+    if (debug) {
+      console.log("onPointerDownOutside:", event.detail.originalEvent)
+    }
+    onDismiss?.()
+  }
+
+  function onFocusOutside(event: FocusOutsideEvent) {
+    const target = getEventTarget(event.detail.originalEvent)
+    if (layerStack.isInBranch(target)) return
+    options.onFocusOutside?.(event)
+    options.onInteractOutside?.(event)
+    if (event.defaultPrevented) return
+    if (debug) {
+      console.log("onFocusOutside:", event.detail.originalEvent)
+    }
+    onDismiss?.()
+  }
+
+  function onEscapeKeyDown(event: KeyboardEvent) {
+    if (!layerStack.isTopMost(node!)) return
+    options.onEscapeKeyDown?.(event)
+    if (!event.defaultPrevented && onDismiss) {
+      event.preventDefault()
+      onDismiss()
+    }
+  }
+
+  function exclude(target: Element) {
+    if (!node) return false
+    const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers
+    const _containers = Array.isArray(containers) ? containers : [containers]
+    return _containers.some((node) => contains(node, target)) || layerStack.isInNestedLayer(node, target)
+  }
+
+  const cleanups = [
+    pointerBlocking ? disablePointerEventsOutside(node) : undefined,
+    trackEscapeKeydown(node, onEscapeKeyDown),
+    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside }),
+  ]
+
+  return () => {
+    layerStack.remove(node!)
+    // re-assign pointer event to remaining layers
+    assignPointerEventToLayers()
+    // remove pointer event from removed layer
+    clearPointerEvent(node!)
+    cleanups.forEach((fn) => fn?.())
+  }
+}
+
+export function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions) {
+  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(trackDismissableElementImpl(node, options))
+    }),
+  )
+  return () => {
+    cleanups.forEach((fn) => fn?.())
+  }
+}

package/src/escape-keydown.ts

@@ -0,0 +1,9 @@
+import { addDomEvent } from "@zag-js/dom-event"
+import { getDocument } from "@zag-js/dom-query"
+
+export function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void) {
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") fn?.(event)
+  }
+  return addDomEvent(getDocument(node), "keydown", handleKeyDown)
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./dismissable-layer"
+export type { InteractOutsideEvent, PointerDownOutsideEvent, FocusOutsideEvent } from "@zag-js/interact-outside"

package/src/layer-stack.ts

@@ -0,0 +1,75 @@
+import { contains } from "@zag-js/dom-query"
+
+export type Layer = {
+  dismiss: VoidFunction
+  node: HTMLElement
+  pointerBlocking?: boolean
+}
+
+export const layerStack = {
+  layers: [] as Layer[],
+  branches: [] as HTMLElement[],
+  count(): number {
+    return this.layers.length
+  },
+  pointerBlockingLayers(): Layer[] {
+    return this.layers.filter((layer) => layer.pointerBlocking)
+  },
+  topMostPointerBlockingLayer(): Layer | undefined {
+    return [...this.pointerBlockingLayers()].slice(-1)[0]
+  },
+  hasPointerBlockingLayer(): boolean {
+    return this.pointerBlockingLayers().length > 0
+  },
+  isBelowPointerBlockingLayer(node: HTMLElement) {
+    const index = this.indexOf(node)
+    const highestBlockingIndex = this.topMostPointerBlockingLayer()
+      ? this.indexOf(this.topMostPointerBlockingLayer()?.node)
+      : -1
+    return index < highestBlockingIndex
+  },
+  isTopMost(node: HTMLElement | null) {
+    const layer = this.layers[this.count() - 1]
+    return layer?.node === node
+  },
+  getNestedLayers(node: HTMLElement) {
+    return Array.from(this.layers).slice(this.indexOf(node) + 1)
+  },
+  isInNestedLayer(node: HTMLElement, target: HTMLElement | EventTarget | null) {
+    return this.getNestedLayers(node).some((layer) => contains(layer.node, target))
+  },
+  isInBranch(target: HTMLElement | EventTarget | null) {
+    return Array.from(this.branches).some((branch) => contains(branch, target))
+  },
+  add(layer: Layer) {
+    this.layers.push(layer)
+  },
+  addBranch(node: HTMLElement) {
+    this.branches.push(node)
+  },
+  remove(node: HTMLElement) {
+    const index = this.indexOf(node)
+    if (index < 0) return
+
+    // dismiss nested layers
+    if (index < this.count() - 1) {
+      const _layers = this.getNestedLayers(node)
+      _layers.forEach((layer) => layer.dismiss())
+    }
+    // remove this layer
+    this.layers.splice(index, 1)
+  },
+  removeBranch(node: HTMLElement) {
+    const index = this.branches.indexOf(node)
+    if (index >= 0) this.branches.splice(index, 1)
+  },
+  indexOf(node: HTMLElement | undefined) {
+    return this.layers.findIndex((layer) => layer.node === node)
+  },
+  dismiss(node: HTMLElement) {
+    this.layers[this.indexOf(node)]?.dismiss()
+  },
+  clear() {
+    this.remove(this.layers[0].node)
+  },
+}

package/src/pointer-event-outside.ts

@@ -0,0 +1,33 @@
+import { getDocument } from "@zag-js/dom-query"
+import { layerStack } from "./layer-stack"
+
+let originalBodyPointerEvents: string
+
+export function assignPointerEventToLayers() {
+  layerStack.layers.forEach(({ node }) => {
+    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto"
+  })
+}
+
+export function clearPointerEvent(node: HTMLElement) {
+  node.style.pointerEvents = ""
+}
+
+const DATA_ATTR = "data-inert"
+
+export function disablePointerEventsOutside(node: HTMLElement) {
+  const doc = getDocument(node)
+
+  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
+    originalBodyPointerEvents = document.body.style.pointerEvents
+    doc.body.style.pointerEvents = "none"
+    doc.body.setAttribute(DATA_ATTR, "")
+  }
+
+  return () => {
+    if (layerStack.hasPointerBlockingLayer()) return
+    doc.body.style.pointerEvents = originalBodyPointerEvents
+    doc.body.removeAttribute(DATA_ATTR)
+    if (doc.body.style.length === 0) doc.body.removeAttribute("style")
+  }
+}