@zentauri-ui/zentauri-components 1.4.61 → 1.4.62

package/dist/chunk-YPLVTUYL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/useFocusManagement/useFocusManagement.ts"],"names":["useBodyScrollLock","useEffect"],"mappings":";;;;;AAMA,IAAM,kBAAA,GACJ,2FAAA;AAgBK,IAAM,qBAAqB,CAAC;AAAA,EACjC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA,GAAoB;AACtB,CAAA,KAKM;AACJ,EAAAA,kCAAA,CAAkB,IAAI,CAAA;AAEtB,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA;AAAA,IACF;AACA,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAyB;AAC9C,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,MACf;AAAA,IACF,CAAA;AACA,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAChD,IAAA,OAAO,MAAM,MAAA,CAAO,mBAAA,CAAoB,SAAA,EAAW,aAAa,CAAA;AAAA,EAClE,CAAA,EAAG,CAAC,IAAA,EAAM,OAAO,CAAC,CAAA;AAElB,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA;AAAA,IACF;AACA,IAAA,MAAM,OAAO,UAAA,CAAW,OAAA;AACxB,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA;AAAA,IACF;AACA,IAAA,MAAM,aAAa,KAAA,CAAM,IAAA;AAAA,MACvB,IAAA,CAAK,iBAA8B,iBAAiB;AAAA,KACtD,CAAE,OAAO,CAAC,OAAA,KAAY,QAAQ,YAAA,KAAiB,IAAA,IAAQ,YAAY,IAAI,CAAA;AACvE,IAAA,MAAM,MAAA,GAAS,UAAA,CAAW,CAAC,CAAA,IAAK,IAAA;AAChC,IAAA,MAAM,oBAAoB,QAAA,CAAS,aAAA;AACnC,IAAA,MAAA,CAAO,KAAA,EAAM;AAEb,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAsB;AAC3C,MAAA,IAAI,CAAC,IAAA,CAAK,QAAA,CAAS,KAAA,CAAM,MAAc,CAAA,EAAG;AACxC,QAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,QAAA,MAAA,CAAO,KAAA,EAAM;AAAA,MACf;AAAA,IACF,CAAA;AACA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAClD,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,aAAa,CAAA;AACrD,MAAA,iBAAA,EAAmB,KAAA,IAAQ;AAAA,IAC7B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAA,EAAY,IAAI,CAAC,CAAA;AACvB","file":"chunk-YPLVTUYL.js","sourcesContent":["\"use client\";\n\nimport type { RefObject } from \"react\";\nimport { useEffect } from \"react\";\nimport { useBodyScrollLock } from \"../useBodyScrollLock\";\n\nconst FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Composes modal-like behavior for an open overlay: body scroll lock, Escape to close, and focus trapping.\n *\n * - Delegates scroll locking to {@link useBodyScrollLock} while `open` is true.\n * - Listens for `Escape` on `window` and calls `setOpen(false)`.\n * - When `open` becomes true, focuses the first visible focusable inside `contentRef`, or the container itself.\n * - Traps focus within `contentRef` via a capturing `focusin` listener on `document` that redirects focus back inside.\n * - On close/unmount of the open effect, restores focus to the element that was focused before the trap ran.\n *\n * @param params.open - Whether the overlay is visible.\n * @param params.setOpen - Setter used for Escape and cleanup paths.\n * @param params.contentRef - Root of the dialog/drawer content (must point at a focusable container or include focusables).\n * @param params.focusableSelector - Query selector for tabbable elements; defaults to a common interactive set.\n */\nexport const useFocusManagement = ({\n  open,\n  setOpen,\n  contentRef,\n  focusableSelector = FOCUSABLE_SELECTOR,\n}: {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  contentRef: RefObject<HTMLDivElement | null>;\n  focusableSelector?: string;\n}) => {\n  useBodyScrollLock(open);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, setOpen]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n    const node = contentRef.current;\n    if (!node) {\n      return;\n    }\n    const focusables = Array.from(\n      node.querySelectorAll<HTMLElement>(focusableSelector),\n    ).filter((element) => element.offsetParent !== null || element === node);\n    const target = focusables[0] ?? node;\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n    target.focus();\n\n    const handleFocusIn = (event: FocusEvent) => {\n      if (!node.contains(event.target as Node)) {\n        event.stopPropagation();\n        target.focus();\n      }\n    };\n    document.addEventListener(\"focusin\", handleFocusIn);\n    return () => {\n      document.removeEventListener(\"focusin\", handleFocusIn);\n      previouslyFocused?.focus?.();\n    };\n  }, [contentRef, open]);\n};\n"]}