{"version":3,"file":"useMakeFocusable.mjs","names":[],"sources":["../../../../../../../../src/lib/hooks/dom/useMakeFocusable.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\n\n/**\n * A hook that makes an element focusable and calls a callback when it receives\n * focus.\n */\nexport const useMakeFocusable = (\n  ref: RefObject<unknown>,\n  onFocus?: CallableFunction,\n) => {\n  useEffect(() => {\n    const element = ref.current;\n    const shouldProcessElement = element && element instanceof HTMLElement;\n\n    if (!shouldProcessElement) {\n      return;\n    }\n\n    const onFocusHandler = () => onFocus?.();\n    element.addEventListener(\"focus\", onFocusHandler);\n\n    const hasTabIndex = element.hasAttribute(\"tabIndex\");\n    if (!hasTabIndex) {\n      // when we have no tabIndex, we set it to -1 to make it focusable\n      element.setAttribute(\"tabIndex\", \"-1\");\n    }\n\n    return () => {\n      element.removeEventListener(\"focus\", onFocusHandler);\n      if (!hasTabIndex) {\n        element.removeAttribute(\"tabIndex\");\n      }\n    };\n  }, [ref.current, onFocus]);\n};\n"],"mappings":";;;;;;;;AAMA,IAAa,oBACX,KACA,YACG;CACH,gBAAgB;EACd,MAAM,UAAU,IAAI;EAGpB,IAAI,EAFyB,WAAW,mBAAmB,cAGzD;EAGF,MAAM,uBAAuB,UAAU;EACvC,QAAQ,iBAAiB,SAAS,cAAc;EAEhD,MAAM,cAAc,QAAQ,aAAa,UAAU;EACnD,IAAI,CAAC,aAEH,QAAQ,aAAa,YAAY,IAAI;EAGvC,aAAa;GACX,QAAQ,oBAAoB,SAAS,cAAc;GACnD,IAAI,CAAC,aACH,QAAQ,gBAAgB,UAAU;EAEtC;CACF,GAAG,CAAC,IAAI,SAAS,OAAO,CAAC;AAC3B"}