@kamod-ch/ui 0.2.1

package/dist/chunk-PPYJQNE5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/interactive/createDismissableLayer.ts","../src/lib/interactive/createFocusTrap.ts","../src/lib/interactive/createIdFactory.ts","../src/lib/interactive/createRovingFocus.ts"],"names":["signal"],"mappings":"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","file":"chunk-PPYJQNE5.js","sourcesContent":["import { effect, signal } from \"@preact/signals\";\n\n/** Clicks on `box-shadow` fall through to the overlay (shadow is not hit-testable). */\nexport const MODAL_DIALOG_PANEL_OUTSIDE_SLOP_PX = 48;\n\n/**\n * True when the pointer lies in an expanded box around an open modal dialog panel\n * (`dialog-content` without `data-kamod-root-dismissible`). Used so overlay hits\n * in the shadow “halo” do not close the dialog.\n *\n * Skips panels with zero layout size (e.g. JSDOM) so tests keep dismissing on overlay.\n */\nexport const isPointerWithinModalDialogPanelSlop = (\n  event: Pick<PointerEvent, \"clientX\" | \"clientY\">,\n): boolean => {\n  const { clientX: x, clientY: y } = event;\n  const slop = MODAL_DIALOG_PANEL_OUTSIDE_SLOP_PX;\n\n  for (const panel of document.querySelectorAll(\n    '[data-slot=\"dialog-content\"][data-state=\"open\"]:not([data-kamod-root-dismissible])',\n  )) {\n    if (!(panel instanceof HTMLElement)) continue;\n    const r = panel.getBoundingClientRect();\n    if (r.width <= 0 || r.height <= 0) continue;\n    if (x >= r.left - slop && x <= r.right + slop && y >= r.top - slop && y <= r.bottom + slop) {\n      return true;\n    }\n  }\n  return false;\n};\n\ntype CreateDismissableLayerOptions = {\n  root: () => HTMLElement | null;\n  open: () => boolean;\n  onDismiss: () => void;\n};\n\nexport const createDismissableLayer = ({\n  root,\n  open,\n  onDismiss,\n}: CreateDismissableLayerOptions) => {\n  const enabled = signal(true);\n  const portalLayerSelector =\n    '[data-slot=\"dialog-content\"], [data-slot=\"alert-dialog-content\"], [data-slot=\"sheet-content\"], [data-slot=\"popover-content\"], [data-slot=\"select-content\"], [data-slot=\"dropdown-content\"]';\n  const overlayLayerSlots = new Set([\"dialog-content\", \"alert-dialog-content\"]);\n\n  const stop = effect(() => {\n    if (!enabled.value || !open()) return;\n\n    const onPointerDown = (event: PointerEvent) => {\n      const node = root();\n      if (!node) return;\n      const target = event.target as Node | null;\n      if (!target) return;\n      if (node.contains(target)) return;\n      if (target instanceof Element) {\n        const closestLayer = target.closest(portalLayerSelector);\n        if (closestLayer) {\n          const layerSlot = closestLayer.getAttribute(\"data-slot\");\n          const rootDismissible = closestLayer.hasAttribute(\"data-kamod-root-dismissible\");\n\n          // Modal `DialogContent` uses a separate `[data-slot=\"dialog-overlay\"]`; hits on the\n          // panel root (grid gap, padding, border) still target this div — those must not dismiss.\n          // `presentation=\"slot\"` fullscreen shells set `data-kamod-root-dismissible` so a direct\n          // hit on that root (dim backdrop) still dismisses.\n          if (layerSlot === \"dialog-content\" && target === closestLayer && !rootDismissible) {\n            return;\n          }\n\n          const isOverlayLayer = layerSlot ? overlayLayerSlots.has(layerSlot) : false;\n\n          // For overlay wrappers, clicking the backdrop (root element itself) should dismiss.\n          if (!isOverlayLayer || target !== closestLayer) return;\n        }\n      }\n      if (\n        target instanceof Element &&\n        target.closest('[data-slot=\"dialog-overlay\"]') &&\n        isPointerWithinModalDialogPanelSlop(event)\n      ) {\n        return;\n      }\n      onDismiss();\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onDismiss();\n      }\n    };\n\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  });\n\n  return {\n    enabled,\n    dispose: () => stop(),\n  };\n};\n","const FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled]):not([type='hidden'])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n].join(\", \");\n\nexport const getFocusableElements = (root: HTMLElement): HTMLElement[] =>\n  Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n    (element) =>\n      !element.hasAttribute(\"disabled\") &&\n      element.getAttribute(\"aria-hidden\") !== \"true\" &&\n      element.tabIndex !== -1,\n  );\n\nexport type TrapFocusOptions = {\n  /** When true (default), focus the container on mount if it is focusable. */\n  focusContainer?: boolean;\n};\n\n/**\n * Keeps keyboard focus inside `container` while active. Returns a dispose function.\n */\nexport const trapFocus = (container: HTMLElement, options: TrapFocusOptions = {}): (() => void) => {\n  const { focusContainer = true } = options;\n\n  const focusInitial = () => {\n    if (focusContainer && container.tabIndex >= -1) {\n      container.focus();\n      return;\n    }\n    getFocusableElements(container)[0]?.focus();\n  };\n\n  requestAnimationFrame(focusInitial);\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== \"Tab\") return;\n\n    const focusables = getFocusableElements(container);\n    if (focusables.length === 0) {\n      event.preventDefault();\n      container.focus();\n      return;\n    }\n\n    const first = focusables[0]!;\n    const last = focusables[focusables.length - 1]!;\n    const active = document.activeElement;\n\n    if (event.shiftKey) {\n      if (active === first || !container.contains(active)) {\n        event.preventDefault();\n        last.focus();\n      }\n      return;\n    }\n\n    if (active === last || !container.contains(active)) {\n      event.preventDefault();\n      first.focus();\n    }\n  };\n\n  container.addEventListener(\"keydown\", onKeyDown);\n  return () => container.removeEventListener(\"keydown\", onKeyDown);\n};\n","let idCounter = 0;\n\nexport const createIdFactory = (prefix: string) => {\n  return (explicitId?: string) => {\n    if (explicitId) return explicitId;\n    idCounter += 1;\n    return `${prefix}-${idCounter}`;\n  };\n};\n","import { signal } from \"@preact/signals\";\n\nexport const createRovingFocus = (count: number, initialIndex = -1) => {\n  const activeIndex = signal(initialIndex);\n\n  const clamp = (index: number) => {\n    if (count <= 0) return -1;\n    if (index < 0) return count - 1;\n    if (index >= count) return 0;\n    return index;\n  };\n\n  return {\n    activeIndex,\n    moveNext: () => {\n      activeIndex.value = clamp(activeIndex.value + 1);\n    },\n    movePrev: () => {\n      activeIndex.value = clamp(activeIndex.value - 1);\n    },\n    moveFirst: () => {\n      activeIndex.value = count > 0 ? 0 : -1;\n    },\n    moveLast: () => {\n      activeIndex.value = count > 0 ? count - 1 : -1;\n    },\n    set: (index: number) => {\n      activeIndex.value = clamp(index);\n    },\n  };\n};\n"]}