@onewelcome/react-lib-components 7.1.0 → 8.1.0

package/dist/cjs/Notifications/BaseModal/useRepeatFocus.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRepeatFocus.cjs.js","sources":["../../../../../../src/components/Notifications/BaseModal/useRepeatFocus.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { RefObject, useEffect } from \"react\";\n\n/**\n * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,\n * the focus will be repeated and the user will not lose their entire focusable element to an element in the background\n * that is being blocked by the modal.\n */\n\nexport const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {\n  const getFocusableElement = (\n    element: HTMLElement,\n    position: \"first\" | \"last\"\n  ): HTMLElement | null => {\n    const focusableSelectors =\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);\n\n    if (position === \"first\") {\n      return focusableElements[0] || null;\n    } else if (position === \"last\") {\n      return focusableElements[focusableElements.length - 1] || null;\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    if (!ref.current || !open) return;\n\n    const lastFocusableElement = getFocusableElement(ref.current, \"last\");\n    const firstFocusableElement = getFocusableElement(ref.current, \"first\");\n\n    if (!lastFocusableElement || !firstFocusableElement) return;\n\n    const handleTabKeyPress = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") return;\n\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          event.preventDefault();\n          lastFocusableElement?.focus();\n        }\n      } else if (document.activeElement === lastFocusableElement) {\n        event.preventDefault();\n        firstFocusableElement?.focus();\n      }\n    };\n\n    lastFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n    firstFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n\n    return () => {\n      lastFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n      firstFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n    };\n  }, [ref, open]);\n};\n"],"names":["ref","getFocusableElement","element","position","focusableElements","querySelectorAll","length","useEffect","current","open","lastFocusableElement","firstFocusableElement","handleTabKeyPress","event","key","shiftKey","document","activeElement","preventDefault","focus","addEventListener","removeEventListener"],"mappings":"2DAwB+BA,IAC7B,MAAMC,EAAsB,CAC1BC,EACAC,KAEA,MAEMC,EAAoBF,EAAQG,iBADhC,4EAGF,MAAiB,UAAbF,EACKC,EAAkB,IAAM,KACT,SAAbD,GACFC,EAAkBA,EAAkBE,OAAS,IAG/C,IAAI,EAGbC,EAAAA,WAAU,KACR,IAAKP,EAAIQ,UAAYC,KAAM,OAE3B,MAAMC,EAAuBT,EAAoBD,EAAIQ,QAAS,QACxDG,EAAwBV,EAAoBD,EAAIQ,QAAS,SAE/D,IAAKE,IAAyBC,EAAuB,OAErD,MAAMC,EAAqBC,IACP,QAAdA,EAAMC,MAEND,EAAME,SACJC,SAASC,gBAAkBN,IAC7BE,EAAMK,iBACNR,SAAAA,EAAsBS,SAEfH,SAASC,gBAAkBP,IACpCG,EAAMK,iBACNP,SAAAA,EAAuBQ,SACxB,EAMH,OAHAT,EAAqBU,iBAAiB,UAAWR,GACjDD,EAAsBS,iBAAiB,UAAWR,GAE3C,KACLF,EAAqBW,oBAAoB,UAAWT,GACpDD,EAAsBU,oBAAoB,UAAWT,EAAkB,CACxE,GACA,CAACZ,EAAKS,MAAM"}

package/dist/esm/Notifications/BaseModal/useRepeatFocus.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRepeatFocus.esm.js","sources":["../../../../../../src/components/Notifications/BaseModal/useRepeatFocus.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { RefObject, useEffect } from \"react\";\n\n/**\n * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,\n * the focus will be repeated and the user will not lose their entire focusable element to an element in the background\n * that is being blocked by the modal.\n */\n\nexport const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {\n  const getFocusableElement = (\n    element: HTMLElement,\n    position: \"first\" | \"last\"\n  ): HTMLElement | null => {\n    const focusableSelectors =\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);\n\n    if (position === \"first\") {\n      return focusableElements[0] || null;\n    } else if (position === \"last\") {\n      return focusableElements[focusableElements.length - 1] || null;\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    if (!ref.current || !open) return;\n\n    const lastFocusableElement = getFocusableElement(ref.current, \"last\");\n    const firstFocusableElement = getFocusableElement(ref.current, \"first\");\n\n    if (!lastFocusableElement || !firstFocusableElement) return;\n\n    const handleTabKeyPress = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") return;\n\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          event.preventDefault();\n          lastFocusableElement?.focus();\n        }\n      } else if (document.activeElement === lastFocusableElement) {\n        event.preventDefault();\n        firstFocusableElement?.focus();\n      }\n    };\n\n    lastFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n    firstFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n\n    return () => {\n      lastFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n      firstFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n    };\n  }, [ref, open]);\n};\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAIH;;;;AAIG;AAEU,MAAA,cAAc,GAAG,CAAC,GAA8B,KAAI;AAC/D,IAAA,MAAM,mBAAmB,GAAG,CAC1B,OAAoB,EACpB,QAA0B,KACJ;QACtB,MAAM,kBAAkB,GACtB,0EAA0E,CAAC;QAC7E,MAAM,iBAAiB,GAAG,OAAO,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC;AAEpF,QAAA,IAAI,QAAQ,KAAK,OAAO,EAAE;AACxB,YAAA,OAAO,iBAAiB,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;SACrC;AAAM,aAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YAC9B,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC;SAChE;AAED,QAAA,OAAO,IAAI,CAAC;AACd,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,IAAI;YAAE,OAAO;QAElC,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACtE,MAAM,qBAAqB,GAAG,mBAAmB,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAExE,QAAA,IAAI,CAAC,oBAAoB,IAAI,CAAC,qBAAqB;YAAE,OAAO;AAE5D,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;AACjD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK;gBAAE,OAAO;AAEhC,YAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,qBAAqB,EAAE;oBACpD,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,oBAAA,oBAAoB,aAApB,oBAAoB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApB,oBAAoB,CAAE,KAAK,EAAE,CAAC;iBAC/B;aACF;AAAM,iBAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,oBAAoB,EAAE;gBAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,gBAAA,qBAAqB,aAArB,qBAAqB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAArB,qBAAqB,CAAE,KAAK,EAAE,CAAC;aAChC;AACH,SAAC,CAAC;AAEF,QAAA,oBAAoB,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACpE,QAAA,qBAAqB,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAErE,QAAA,OAAO,MAAK;AACV,YAAA,oBAAoB,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACvE,YAAA,qBAAqB,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC1E,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;AAClB;;;;"}