@x15ventures/x15-ui-library 3.11.4

package/dist/esm/hooks/OverflowScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowScroll.js","names":["useEffect","useRef","useOverflowScroll","direction","mode","edgeOffset","targetRef","requiresRecalc","localRef","ref","el","current","window","prev","overflowX","style","overflowY","maxWidth","maxHeight","apply","scrollWidth","clientWidth","scrollHeight","clientHeight","rect","getBoundingClientRect","vw","innerWidth","vh","innerHeight","leftBound","rightBound","topBound","bottomBound","overflowLeft","Math","max","left","overflowRight","right","overflowTop","top","overflowBottom","bottom","totalOverflowX","totalOverflowY","targetWidth","width","floor","targetHeight","height","addEventListener","passive","requestAnimationFrame","removeEventListener"],"sources":["../../../src/hooks/OverflowScroll.ts"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\ntype Direction = 'x' | 'y' | 'both';\ntype Mode = 'viewport' | 'content';\n\ninterface UseOverflowScrollOptions<T extends HTMLElement> {\n  direction?: Direction;\n  mode?: Mode;\n  /** Keep at least this many px from each viewport edge (viewport mode only) */\n  edgeOffset?: number;\n  /** Supply your own ref if you already have one */\n  targetRef?: React.RefObject<T>;\n  requiresRecalc?: boolean;\n}\n\nexport function useOverflowScroll<T extends HTMLElement>({\n  direction = 'both',\n  mode = 'viewport',\n  edgeOffset = 0,\n  targetRef,\n  requiresRecalc = false\n}: UseOverflowScrollOptions<T> = {}) {\n  const localRef = useRef<T | null>(null);\n  const ref = (targetRef ?? localRef) as React.RefObject<T>;\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof window === 'undefined') return;\n\n    const prev = {\n      overflowX: el.style.overflowX,\n      overflowY: el.style.overflowY,\n      maxWidth: el.style.maxWidth,\n      maxHeight: el.style.maxHeight,\n    };\n\n    const apply = () => {\n      if (!el) return;\n\n      if (mode === 'content') {\n        const overflowX = el.scrollWidth > el.clientWidth + 0.5;\n        const overflowY = el.scrollHeight > el.clientHeight + 0.5;\n\n        if (direction === 'x' || direction === 'both') {\n          el.style.overflowX = overflowX ? 'auto' : '';\n        }\n        if (direction === 'y' || direction === 'both') {\n          el.style.overflowY = overflowY ? 'auto' : '';\n        }\n\n        return;\n      }\n\n      const rect = el.getBoundingClientRect();\n      const vw = window.innerWidth;\n      const vh = window.innerHeight;\n\n      const leftBound = edgeOffset;\n      const rightBound = vw - edgeOffset;\n      const topBound = edgeOffset;\n      const bottomBound = vh - edgeOffset;\n\n      const overflowLeft = Math.max(0, leftBound - rect.left);\n      const overflowRight = Math.max(0, rect.right - rightBound);\n      const overflowTop = Math.max(0, topBound - rect.top);\n      const overflowBottom = Math.max(0, rect.bottom - bottomBound);\n\n      const totalOverflowX = overflowLeft + overflowRight;\n      const totalOverflowY = overflowTop + overflowBottom;\n\n      if (direction === 'x' || direction === 'both') {\n        if (totalOverflowX > 0) {\n          const targetWidth = rect.width - totalOverflowX;\n          if (targetWidth > 0) {\n            el.style.maxWidth = `${ Math.floor(targetWidth) }px`;\n            el.style.overflowX = 'auto';\n          } else {\n            el.style.overflowX = 'auto';\n          }\n        } else {\n          el.style.maxWidth = prev.maxWidth;\n          el.style.overflowX = prev.overflowX;\n        }\n      }\n\n      if (direction === 'y' || direction === 'both') {\n        if (totalOverflowY > 0) {\n          const targetHeight = rect.height - totalOverflowY;\n          if (targetHeight > 0) {\n            el.style.maxHeight = `${ Math.floor(targetHeight) }px`;\n            el.style.overflowY = 'auto';\n          } else {\n            el.style.overflowY = 'auto';\n          }\n        } else {\n          el.style.maxHeight = prev.maxHeight;\n          el.style.overflowY = prev.overflowY;\n        }\n      }\n    };\n\n    window.addEventListener('resize', apply, { passive: true });\n\n    requestAnimationFrame(apply);\n\n    return () => {\n      window.removeEventListener('resize', apply);\n\n      el.style.overflowX = prev.overflowX;\n      el.style.overflowY = prev.overflowY;\n      el.style.maxWidth = prev.maxWidth;\n      el.style.maxHeight = prev.maxHeight;\n    };\n  }, [ref, direction, mode, edgeOffset, requiresRecalc]);\n\n  return ref;\n}\n"],"mappings":"AAAA,SAAgBA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAehD,OAAO,SAASC,iBAAiBA,CAAwB;EACvDC,SAAS,GAAG,MAAM;EAClBC,IAAI,GAAG,UAAU;EACjBC,UAAU,GAAG,CAAC;EACdC,SAAS;EACTC,cAAc,GAAG;AACU,CAAC,GAAG,CAAC,CAAC,EAAE;EACnC,MAAMC,QAAQ,GAAGP,MAAM,CAAW,IAAI,CAAC;EACvC,MAAMQ,GAAG,GAAIH,SAAS,IAAIE,QAA+B;EAEzDR,SAAS,CAAC,MAAM;IACd,MAAMU,EAAE,GAAGD,GAAG,CAACE,OAAO;IACtB,IAAI,CAACD,EAAE,IAAI,OAAOE,MAAM,KAAK,WAAW,EAAE;IAE1C,MAAMC,IAAI,GAAG;MACXC,SAAS,EAAEJ,EAAE,CAACK,KAAK,CAACD,SAAS;MAC7BE,SAAS,EAAEN,EAAE,CAACK,KAAK,CAACC,SAAS;MAC7BC,QAAQ,EAAEP,EAAE,CAACK,KAAK,CAACE,QAAQ;MAC3BC,SAAS,EAAER,EAAE,CAACK,KAAK,CAACG;IACtB,CAAC;IAED,MAAMC,KAAK,GAAGA,CAAA,KAAM;MAClB,IAAI,CAACT,EAAE,EAAE;MAET,IAAIN,IAAI,KAAK,SAAS,EAAE;QACtB,MAAMU,SAAS,GAAGJ,EAAE,CAACU,WAAW,GAAGV,EAAE,CAACW,WAAW,GAAG,GAAG;QACvD,MAAML,SAAS,GAAGN,EAAE,CAACY,YAAY,GAAGZ,EAAE,CAACa,YAAY,GAAG,GAAG;QAEzD,IAAIpB,SAAS,KAAK,GAAG,IAAIA,SAAS,KAAK,MAAM,EAAE;UAC7CO,EAAE,CAACK,KAAK,CAACD,SAAS,GAAGA,SAAS,GAAG,MAAM,GAAG,EAAE;QAC9C;QACA,IAAIX,SAAS,KAAK,GAAG,IAAIA,SAAS,KAAK,MAAM,EAAE;UAC7CO,EAAE,CAACK,KAAK,CAACC,SAAS,GAAGA,SAAS,GAAG,MAAM,GAAG,EAAE;QAC9C;QAEA;MACF;MAEA,MAAMQ,IAAI,GAAGd,EAAE,CAACe,qBAAqB,CAAC,CAAC;MACvC,MAAMC,EAAE,GAAGd,MAAM,CAACe,UAAU;MAC5B,MAAMC,EAAE,GAAGhB,MAAM,CAACiB,WAAW;MAE7B,MAAMC,SAAS,GAAGzB,UAAU;MAC5B,MAAM0B,UAAU,GAAGL,EAAE,GAAGrB,UAAU;MAClC,MAAM2B,QAAQ,GAAG3B,UAAU;MAC3B,MAAM4B,WAAW,GAAGL,EAAE,GAAGvB,UAAU;MAEnC,MAAM6B,YAAY,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,SAAS,GAAGN,IAAI,CAACa,IAAI,CAAC;MACvD,MAAMC,aAAa,GAAGH,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEZ,IAAI,CAACe,KAAK,GAAGR,UAAU,CAAC;MAC1D,MAAMS,WAAW,GAAGL,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,QAAQ,GAAGR,IAAI,CAACiB,GAAG,CAAC;MACpD,MAAMC,cAAc,GAAGP,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEZ,IAAI,CAACmB,MAAM,GAAGV,WAAW,CAAC;MAE7D,MAAMW,cAAc,GAAGV,YAAY,GAAGI,aAAa;MACnD,MAAMO,cAAc,GAAGL,WAAW,GAAGE,cAAc;MAEnD,IAAIvC,SAAS,KAAK,GAAG,IAAIA,SAAS,KAAK,MAAM,EAAE;QAC7C,IAAIyC,cAAc,GAAG,CAAC,EAAE;UACtB,MAAME,WAAW,GAAGtB,IAAI,CAACuB,KAAK,GAAGH,cAAc;UAC/C,IAAIE,WAAW,GAAG,CAAC,EAAE;YACnBpC,EAAE,CAACK,KAAK,CAACE,QAAQ,GAAG,GAAIkB,IAAI,CAACa,KAAK,CAACF,WAAW,CAAC,IAAK;YACpDpC,EAAE,CAACK,KAAK,CAACD,SAAS,GAAG,MAAM;UAC7B,CAAC,MAAM;YACLJ,EAAE,CAACK,KAAK,CAACD,SAAS,GAAG,MAAM;UAC7B;QACF,CAAC,MAAM;UACLJ,EAAE,CAACK,KAAK,CAACE,QAAQ,GAAGJ,IAAI,CAACI,QAAQ;UACjCP,EAAE,CAACK,KAAK,CAACD,SAAS,GAAGD,IAAI,CAACC,SAAS;QACrC;MACF;MAEA,IAAIX,SAAS,KAAK,GAAG,IAAIA,SAAS,KAAK,MAAM,EAAE;QAC7C,IAAI0C,cAAc,GAAG,CAAC,EAAE;UACtB,MAAMI,YAAY,GAAGzB,IAAI,CAAC0B,MAAM,GAAGL,cAAc;UACjD,IAAII,YAAY,GAAG,CAAC,EAAE;YACpBvC,EAAE,CAACK,KAAK,CAACG,SAAS,GAAG,GAAIiB,IAAI,CAACa,KAAK,CAACC,YAAY,CAAC,IAAK;YACtDvC,EAAE,CAACK,KAAK,CAACC,SAAS,GAAG,MAAM;UAC7B,CAAC,MAAM;YACLN,EAAE,CAACK,KAAK,CAACC,SAAS,GAAG,MAAM;UAC7B;QACF,CAAC,MAAM;UACLN,EAAE,CAACK,KAAK,CAACG,SAAS,GAAGL,IAAI,CAACK,SAAS;UACnCR,EAAE,CAACK,KAAK,CAACC,SAAS,GAAGH,IAAI,CAACG,SAAS;QACrC;MACF;IACF,CAAC;IAEDJ,MAAM,CAACuC,gBAAgB,CAAC,QAAQ,EAAEhC,KAAK,EAAE;MAAEiC,OAAO,EAAE;IAAK,CAAC,CAAC;IAE3DC,qBAAqB,CAAClC,KAAK,CAAC;IAE5B,OAAO,MAAM;MACXP,MAAM,CAAC0C,mBAAmB,CAAC,QAAQ,EAAEnC,KAAK,CAAC;MAE3CT,EAAE,CAACK,KAAK,CAACD,SAAS,GAAGD,IAAI,CAACC,SAAS;MACnCJ,EAAE,CAACK,KAAK,CAACC,SAAS,GAAGH,IAAI,CAACG,SAAS;MACnCN,EAAE,CAACK,KAAK,CAACE,QAAQ,GAAGJ,IAAI,CAACI,QAAQ;MACjCP,EAAE,CAACK,KAAK,CAACG,SAAS,GAAGL,IAAI,CAACK,SAAS;IACrC,CAAC;EACH,CAAC,EAAE,CAACT,GAAG,EAAEN,SAAS,EAAEC,IAAI,EAAEC,UAAU,EAAEE,cAAc,CAAC,CAAC;EAEtD,OAAOE,GAAG;AACZ","ignoreList":[]}

package/dist/esm/hooks/PopupKeys.js

@@ -0,0 +1,64 @@
+/* eslint-disable no-unused-vars */
+
+import { useEffect, useCallback } from 'react';
+export const usePopupKeys = (elementRef, elementHandler) => {
+  const getFocusableElements = useCallback(() => {
+    if (!elementRef.current) {
+      return [];
+    }
+    return elementRef.current.querySelectorAll(`
+      a[href],
+      area[href],
+      input:not([disabled]),
+      select:not([disabled]),
+      textarea:not([disabled]),
+      button:not([disabled]),
+      iframe,
+      object,
+      embed,
+      [tabindex]:not([tabindex="-1"]),
+      [contenteditable]
+    `);
+  }, [elementRef]);
+
+  // Note: Popups should always close on escape key presses
+  const KeyHandler = useCallback(event => {
+    if (elementHandler && event.key === 'Escape') {
+      return elementHandler(event);
+    }
+    return event;
+  }, [elementHandler]);
+  useEffect(() => {
+    const listener = event => {
+      if (!elementRef.current || elementRef.current.contains(event.target)) {
+        const focusableElements = getFocusableElements();
+
+        // Make arrow keys focus tabbable elements inside the popup
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          if (focusableElements.length === 0) {
+            return;
+          }
+          event.preventDefault();
+          const {
+            activeElement
+          } = document;
+          let currentIndex = Array.from(focusableElements).indexOf(activeElement);
+          if (event.key === 'ArrowDown') {
+            currentIndex = (currentIndex + 1) % focusableElements.length;
+          } else if (event.key === 'ArrowUp') {
+            currentIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length;
+          }
+          focusableElements[currentIndex].focus();
+          return;
+        }
+      }
+      KeyHandler(event);
+    };
+    document.addEventListener('keydown', listener);
+    return () => {
+      document.removeEventListener('keydown', listener);
+    };
+  }, [elementRef, KeyHandler]);
+  return {};
+};
+//# sourceMappingURL=PopupKeys.js.map

package/dist/esm/hooks/PopupKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupKeys.js","names":["useEffect","useCallback","usePopupKeys","elementRef","elementHandler","getFocusableElements","current","querySelectorAll","KeyHandler","event","key","listener","contains","target","focusableElements","length","preventDefault","activeElement","document","currentIndex","Array","from","indexOf","focus","addEventListener","removeEventListener"],"sources":["../../../src/hooks/PopupKeys.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\nimport { RefObject, useEffect, useCallback } from 'react';\n\ntype EventTypes = KeyboardEvent;\n\nexport const usePopupKeys = (\n  elementRef: RefObject<HTMLElement>,\n  elementHandler?: (event: EventTypes) => void\n) => {\n  const getFocusableElements = useCallback(() => {\n    if (!elementRef.current) {\n      return [];\n    }\n\n    return elementRef.current.querySelectorAll<HTMLElement>(`\n      a[href],\n      area[href],\n      input:not([disabled]),\n      select:not([disabled]),\n      textarea:not([disabled]),\n      button:not([disabled]),\n      iframe,\n      object,\n      embed,\n      [tabindex]:not([tabindex=\"-1\"]),\n      [contenteditable]\n    `);\n  }, [elementRef]);\n\n  // Note: Popups should always close on escape key presses\n  const KeyHandler = useCallback(\n    (event: KeyboardEvent) => {\n      if (elementHandler && event.key === 'Escape') {\n        return elementHandler(event);\n      }\n      return event;\n    },\n    [elementHandler]\n  );\n\n  useEffect(() => {\n    const listener = (event: EventTypes) => {\n      if (!elementRef.current || elementRef.current.contains(event.target as Node)) {\n        const focusableElements = getFocusableElements();\n\n        // Make arrow keys focus tabbable elements inside the popup\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n          if (focusableElements.length === 0) {\n            return;\n          }\n\n          event.preventDefault();\n          const { activeElement } = document;\n          let currentIndex = Array.from(focusableElements).indexOf(activeElement as HTMLElement);\n\n          if (event.key === 'ArrowDown') {\n            currentIndex = (currentIndex + 1) % focusableElements.length;\n          } else if (event.key === 'ArrowUp') {\n            currentIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length;\n          }\n\n          focusableElements[currentIndex].focus();\n          return;\n        }\n      }\n      KeyHandler(event);\n    };\n\n    document.addEventListener('keydown', listener);\n\n    return () => {\n      document.removeEventListener('keydown', listener);\n    };\n  }, [elementRef, KeyHandler]);\n\n  return {};\n};\n"],"mappings":"AAAA;;AAEA,SAAoBA,SAAS,EAAEC,WAAW,QAAQ,OAAO;AAIzD,OAAO,MAAMC,YAAY,GAAGA,CAC1BC,UAAkC,EAClCC,cAA4C,KACzC;EACH,MAAMC,oBAAoB,GAAGJ,WAAW,CAAC,MAAM;IAC7C,IAAI,CAACE,UAAU,CAACG,OAAO,EAAE;MACvB,OAAO,EAAE;IACX;IAEA,OAAOH,UAAU,CAACG,OAAO,CAACC,gBAAgB,CAAc;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK,CAAC;EACJ,CAAC,EAAE,CAACJ,UAAU,CAAC,CAAC;;EAEhB;EACA,MAAMK,UAAU,GAAGP,WAAW,CAC3BQ,KAAoB,IAAK;IACxB,IAAIL,cAAc,IAAIK,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;MAC5C,OAAON,cAAc,CAACK,KAAK,CAAC;IAC9B;IACA,OAAOA,KAAK;EACd,CAAC,EACD,CAACL,cAAc,CACjB,CAAC;EAEDJ,SAAS,CAAC,MAAM;IACd,MAAMW,QAAQ,GAAIF,KAAiB,IAAK;MACtC,IAAI,CAACN,UAAU,CAACG,OAAO,IAAIH,UAAU,CAACG,OAAO,CAACM,QAAQ,CAACH,KAAK,CAACI,MAAc,CAAC,EAAE;QAC5E,MAAMC,iBAAiB,GAAGT,oBAAoB,CAAC,CAAC;;QAEhD;QACA,IAAII,KAAK,CAACC,GAAG,KAAK,WAAW,IAAID,KAAK,CAACC,GAAG,KAAK,SAAS,EAAE;UACxD,IAAII,iBAAiB,CAACC,MAAM,KAAK,CAAC,EAAE;YAClC;UACF;UAEAN,KAAK,CAACO,cAAc,CAAC,CAAC;UACtB,MAAM;YAAEC;UAAc,CAAC,GAAGC,QAAQ;UAClC,IAAIC,YAAY,GAAGC,KAAK,CAACC,IAAI,CAACP,iBAAiB,CAAC,CAACQ,OAAO,CAACL,aAA4B,CAAC;UAEtF,IAAIR,KAAK,CAACC,GAAG,KAAK,WAAW,EAAE;YAC7BS,YAAY,GAAG,CAACA,YAAY,GAAG,CAAC,IAAIL,iBAAiB,CAACC,MAAM;UAC9D,CAAC,MAAM,IAAIN,KAAK,CAACC,GAAG,KAAK,SAAS,EAAE;YAClCS,YAAY,GAAG,CAACA,YAAY,GAAG,CAAC,GAAGL,iBAAiB,CAACC,MAAM,IAAID,iBAAiB,CAACC,MAAM;UACzF;UAEAD,iBAAiB,CAACK,YAAY,CAAC,CAACI,KAAK,CAAC,CAAC;UACvC;QACF;MACF;MACAf,UAAU,CAACC,KAAK,CAAC;IACnB,CAAC;IAEDS,QAAQ,CAACM,gBAAgB,CAAC,SAAS,EAAEb,QAAQ,CAAC;IAE9C,OAAO,MAAM;MACXO,QAAQ,CAACO,mBAAmB,CAAC,SAAS,EAAEd,QAAQ,CAAC;IACnD,CAAC;EACH,CAAC,EAAE,CAACR,UAAU,EAAEK,UAAU,CAAC,CAAC;EAE5B,OAAO,CAAC,CAAC;AACX,CAAC","ignoreList":[]}

package/dist/esm/hooks/Strings.js

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { capitalize } from '../helpers/stringHelpers';
+export const useFirstCapital = elementRef => {
+  const onInputEvent = useDebouncedCallback(event => {
+    const inputValue = event.target.value;
+    if (elementRef && elementRef.current) {
+      elementRef.current.value = capitalize(inputValue);
+    }
+  }, 50, {
+    maxWait: 100
+  });
+  useEffect(() => {
+    if (elementRef && elementRef.current) {
+      elementRef.current.addEventListener('input', onInputEvent);
+    }
+  }, [elementRef, onInputEvent]);
+  return {};
+};
+//# sourceMappingURL=Strings.js.map

package/dist/esm/hooks/Strings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Strings.js","names":["useEffect","useDebouncedCallback","capitalize","useFirstCapital","elementRef","onInputEvent","event","inputValue","target","value","current","maxWait","addEventListener"],"sources":["../../../src/hooks/Strings.ts"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { capitalize } from '../helpers/stringHelpers';\n\nexport const useFirstCapital = (elementRef: React.RefObject<HTMLInputElement>) => {\n  const onInputEvent = useDebouncedCallback(\n    (event) => {\n      const inputValue = event.target.value;\n      if (elementRef && elementRef.current) {\n        elementRef.current.value = capitalize(inputValue);\n      }\n    },\n    50,\n    { maxWait: 100 }\n  );\n\n  useEffect(() => {\n    if (elementRef && elementRef.current) {\n      elementRef.current.addEventListener('input', onInputEvent);\n    }\n  }, [elementRef, onInputEvent]);\n\n  return {};\n};\n"],"mappings":"AAAA,SAAgBA,SAAS,QAAQ,OAAO;AACxC,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,UAAU,QAAQ,0BAA0B;AAErD,OAAO,MAAMC,eAAe,GAAIC,UAA6C,IAAK;EAChF,MAAMC,YAAY,GAAGJ,oBAAoB,CACtCK,KAAK,IAAK;IACT,MAAMC,UAAU,GAAGD,KAAK,CAACE,MAAM,CAACC,KAAK;IACrC,IAAIL,UAAU,IAAIA,UAAU,CAACM,OAAO,EAAE;MACpCN,UAAU,CAACM,OAAO,CAACD,KAAK,GAAGP,UAAU,CAACK,UAAU,CAAC;IACnD;EACF,CAAC,EACD,EAAE,EACF;IAAEI,OAAO,EAAE;EAAI,CACjB,CAAC;EAEDX,SAAS,CAAC,MAAM;IACd,IAAII,UAAU,IAAIA,UAAU,CAACM,OAAO,EAAE;MACpCN,UAAU,CAACM,OAAO,CAACE,gBAAgB,CAAC,OAAO,EAAEP,YAAY,CAAC;IAC5D;EACF,CAAC,EAAE,CAACD,UAAU,EAAEC,YAAY,CAAC,CAAC;EAE9B,OAAO,CAAC,CAAC;AACX,CAAC","ignoreList":[]}

package/dist/esm/hooks/TabbableInputGroup.js

@@ -0,0 +1,88 @@
+import { useCallback, useEffect } from 'react';
+export const useTabbableInputGroup = ({
+  groupWrappingElementRef
+}) => {
+  const cancelEvent = event => {
+    event.preventDefault();
+    event.returnValue = false;
+  };
+  const handleBlur = useCallback(event => {
+    const {
+      target
+    } = event;
+    if (target instanceof Element) {
+      document.querySelector(`label[for="${target.id}"]`)?.classList.remove('focus');
+    }
+  }, []);
+  const handleFocus = useCallback(event => {
+    const {
+      target
+    } = event;
+    if (target instanceof Element) {
+      document.querySelector(`label[for="${target.id}"]`)?.classList.add('focus');
+    }
+  }, []);
+  const handleKeyDown = useCallback((event, radioIndex) => {
+    const {
+      target,
+      code,
+      shiftKey
+    } = event;
+    const groupDomElement = groupWrappingElementRef.current;
+    if (groupDomElement) {
+      const allInputsInGroup = groupDomElement.querySelectorAll('input[type="radio"]');
+      const numRadios = allInputsInGroup.length;
+
+      // Convert NodeList to an array using Array.from
+      const tabbableInputsArray = Array.from(allInputsInGroup);
+      if (target instanceof Element) {
+        // Remove the focus class from the labels
+
+        const targetIsFirstInput = radioIndex === 0;
+        const targetIsLastInput = radioIndex === numRadios - 1;
+        let nextTargetIndex = radioIndex;
+
+        // Handle tabbing logic
+        if (code === 'Tab') {
+          if (shiftKey) {
+            // Tabbing backwards
+            if (!targetIsFirstInput) {
+              // Prevent leaving group unless it is from the first element
+              cancelEvent(event);
+              nextTargetIndex = radioIndex - 1;
+            }
+          } else if (!targetIsLastInput) {
+            // Prevent leaving group unless it is from the last element
+            cancelEvent(event);
+            nextTargetIndex = radioIndex + 1;
+          }
+          const nextTargetInput = tabbableInputsArray[nextTargetIndex];
+          const nextTargetLabel = document.querySelector(`label[for="${nextTargetInput.id}"]`);
+          nextTargetInput.focus();
+          nextTargetLabel?.classList.add('focus');
+        } else if (document.activeElement === target) {
+          // The input has focus so make sure the label has the focus class
+        }
+      }
+    }
+  }, [groupWrappingElementRef]);
+  useEffect(() => {
+    const groupElementRef = groupWrappingElementRef.current;
+    if (groupElementRef) {
+      const radioInputs = groupElementRef.querySelectorAll('input[type="radio"]');
+      radioInputs.forEach((radioInput, index) => radioInput.addEventListener('keydown', event => handleKeyDown(event, index)));
+      radioInputs.forEach(radioInput => radioInput.addEventListener('focusin', handleFocus));
+      radioInputs.forEach(radioInput => radioInput.addEventListener('focusout', handleBlur));
+
+      // Cleanup the event listener when component unmounts or when the ref changes
+      return () => {
+        radioInputs.forEach((radioInput, index) => radioInput.removeEventListener('keydown', event => handleKeyDown(event, index)));
+        radioInputs.forEach(radioInput => radioInput.removeEventListener('focusin', handleFocus));
+        radioInputs.forEach(radioInput => radioInput.removeEventListener('focusout', handleBlur));
+      };
+    }
+    return () => {};
+  }, [groupWrappingElementRef, handleBlur, handleFocus, handleKeyDown]);
+  return {};
+};
+//# sourceMappingURL=TabbableInputGroup.js.map

package/dist/esm/hooks/TabbableInputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabbableInputGroup.js","names":["useCallback","useEffect","useTabbableInputGroup","groupWrappingElementRef","cancelEvent","event","preventDefault","returnValue","handleBlur","target","Element","document","querySelector","id","classList","remove","handleFocus","add","handleKeyDown","radioIndex","code","shiftKey","groupDomElement","current","allInputsInGroup","querySelectorAll","numRadios","length","tabbableInputsArray","Array","from","targetIsFirstInput","targetIsLastInput","nextTargetIndex","nextTargetInput","nextTargetLabel","focus","activeElement","groupElementRef","radioInputs","forEach","radioInput","index","addEventListener","removeEventListener"],"sources":["../../../src/hooks/TabbableInputGroup.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\n\ninterface UseTabbableInputGroupProps {\n  groupWrappingElementRef: React.RefObject<HTMLElement>;\n}\n\nexport const useTabbableInputGroup = (\n  {\n    groupWrappingElementRef\n  }: UseTabbableInputGroupProps\n) => {\n  const cancelEvent = (event: KeyboardEvent) => {\n    event.preventDefault();\n    event.returnValue = false;\n  };\n\n  const handleBlur = useCallback((event: FocusEvent) => {\n    const { target } = event;\n    if (target instanceof Element) {\n      document.querySelector(`label[for=\"${ target.id }\"]`)?.classList.remove('focus');\n    }\n  }, []);\n\n  const handleFocus = useCallback((event: FocusEvent) => {\n    const { target } = event;\n    if (target instanceof Element) {\n      document.querySelector(`label[for=\"${ target.id }\"]`)?.classList.add('focus');\n    }\n  }, []);\n\n  const handleKeyDown = useCallback((event: KeyboardEvent, radioIndex: number) => {\n    const { target, code, shiftKey } = event;\n\n    const groupDomElement = groupWrappingElementRef.current;\n\n    if (groupDomElement) {\n      const allInputsInGroup = groupDomElement.querySelectorAll('input[type=\"radio\"]');\n      const numRadios = allInputsInGroup.length;\n\n      // Convert NodeList to an array using Array.from\n      const tabbableInputsArray = Array.from(allInputsInGroup);\n\n      if (target instanceof Element) {\n        // Remove the focus class from the labels\n\n        const targetIsFirstInput = radioIndex === 0;\n        const targetIsLastInput = radioIndex === numRadios - 1;\n        let nextTargetIndex = radioIndex;\n\n        // Handle tabbing logic\n        if (code === 'Tab') {\n          if (shiftKey) { // Tabbing backwards\n            if (!targetIsFirstInput) { // Prevent leaving group unless it is from the first element\n              cancelEvent(event);\n              nextTargetIndex = radioIndex - 1;\n            }\n          } else if (!targetIsLastInput) { // Prevent leaving group unless it is from the last element\n            cancelEvent(event);\n            nextTargetIndex = radioIndex + 1;\n          }\n\n          const nextTargetInput = tabbableInputsArray[nextTargetIndex] as HTMLElement;\n          const nextTargetLabel = document.querySelector(`label[for=\"${ nextTargetInput.id }\"]`);\n          nextTargetInput.focus();\n          nextTargetLabel?.classList.add('focus');\n        } else if (document.activeElement === target) {\n          // The input has focus so make sure the label has the focus class\n        }\n      }\n    }\n  }, [groupWrappingElementRef]);\n\n  useEffect(() => {\n    const groupElementRef = groupWrappingElementRef.current;\n\n    if (groupElementRef) {\n      const radioInputs = groupElementRef.querySelectorAll('input[type=\"radio\"]');\n      radioInputs.forEach((radioInput, index) => (radioInput as HTMLInputElement).addEventListener('keydown', (event) => handleKeyDown(event, index)));\n      radioInputs.forEach((radioInput) => (radioInput as HTMLInputElement).addEventListener('focusin', handleFocus));\n      radioInputs.forEach((radioInput) => (radioInput as HTMLInputElement).addEventListener('focusout', handleBlur));\n\n      // Cleanup the event listener when component unmounts or when the ref changes\n      return () => {\n        radioInputs.forEach((radioInput, index) => (radioInput as HTMLInputElement).removeEventListener('keydown', (event) => handleKeyDown(event, index)));\n        radioInputs.forEach((radioInput) => (radioInput as HTMLInputElement).removeEventListener('focusin', handleFocus));\n        radioInputs.forEach((radioInput) => (radioInput as HTMLInputElement).removeEventListener('focusout', handleBlur));\n      };\n    }\n    return () => {};\n  }, [groupWrappingElementRef, handleBlur, handleFocus, handleKeyDown]);\n\n  return {};\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/hooks/index.js

@@ -0,0 +1,11 @@
+'use client';
+
+export { useOnClickOutside } from './ClickOutside';
+export { usePopupKeys } from './PopupKeys';
+export { useOnEdgeProximityDetect } from './EdgeProximityDetect';
+export { useFirstCapital } from './Strings';
+export { useTabbableInputGroup } from './TabbableInputGroup';
+export { useDialogOverlay } from './DialogOverlay';
+export { useEllipsisBookends } from './EllipsisBookends';
+export { useFocusTrap } from './FocusTrap';
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useOnClickOutside","usePopupKeys","useOnEdgeProximityDetect","useFirstCapital","useTabbableInputGroup","useDialogOverlay","useEllipsisBookends","useFocusTrap"],"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["'use client';\n\nexport { useOnClickOutside } from './ClickOutside';\nexport { usePopupKeys } from './PopupKeys';\nexport { useOnEdgeProximityDetect } from './EdgeProximityDetect';\nexport { useFirstCapital } from './Strings';\nexport { useTabbableInputGroup } from './TabbableInputGroup';\nexport { useDialogOverlay } from './DialogOverlay';\nexport { useEllipsisBookends } from './EllipsisBookends';\nexport { useFocusTrap } from './FocusTrap';"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,iBAAiB,QAAQ,gBAAgB;AAClD,SAASC,YAAY,QAAQ,aAAa;AAC1C,SAASC,wBAAwB,QAAQ,uBAAuB;AAChE,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,qBAAqB,QAAQ,sBAAsB;AAC5D,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,mBAAmB,QAAQ,oBAAoB;AACxD,SAASC,YAAY,QAAQ,aAAa","ignoreList":[]}