@x15ventures/x15-ui-library 3.11.4

package/dist/esm/hooks/CopyClipboard.js

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+export const useCopyClipboard = ({
+  elementRef,
+  autoCopyOnSelect,
+  triggerRef,
+  onCopyCallback
+}) => {
+  const [, setText] = useState('');
+  const ensureTabIndex = element => {
+    if (!element.hasAttribute('tabindex')) {
+      element.setAttribute('tabindex', '0');
+    }
+  };
+  const handleCopy = async () => {
+    let newText = '';
+    if (elementRef.current) {
+      if (elementRef.current instanceof HTMLInputElement || elementRef.current instanceof HTMLTextAreaElement) {
+        // For input or textarea elements
+        elementRef.current.select();
+        newText = elementRef.current?.value || elementRef.current?.innerText || '';
+      } else {
+        newText = elementRef.current?.innerText;
+      }
+    }
+    await navigator.clipboard.writeText(newText);
+    if (onCopyCallback) {
+      onCopyCallback(newText);
+    }
+    setText(newText);
+  };
+  const handleCopyOnSelect = async selectedText => {
+    setText(selectedText);
+    await navigator.clipboard.writeText(selectedText);
+    if (onCopyCallback) {
+      onCopyCallback(selectedText);
+    }
+  };
+
+  // TODO: Handle the case when the user selects text beyond the element
+  const handleSelectionChange = useDebouncedCallback(() => {
+    if (document.activeElement === elementRef.current) {
+      const selection = window.getSelection();
+      const range = selection?.getRangeAt(0);
+      return handleCopyOnSelect(range ? range.toString() : '');
+    }
+  }, 500, {
+    maxWait: 1000
+  });
+  useEffect(() => {
+    if (triggerRef && triggerRef.current) {
+      triggerRef.current.addEventListener('click', handleCopy);
+    }
+    if (autoCopyOnSelect && elementRef && elementRef.current) {
+      ensureTabIndex(elementRef.current);
+      document.addEventListener('selectionchange', handleSelectionChange);
+    }
+    return () => {
+      if (triggerRef && triggerRef.current) {
+        triggerRef.current.removeEventListener('click', handleCopy);
+      }
+      if (autoCopyOnSelect && elementRef && elementRef.current) {
+        document.removeEventListener('selectionchange', handleSelectionChange);
+      }
+    };
+  }, [triggerRef, elementRef, autoCopyOnSelect]);
+  return {
+    handleCopy
+  };
+};
+//# sourceMappingURL=CopyClipboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyClipboard.js","names":["useEffect","useState","useDebouncedCallback","useCopyClipboard","elementRef","autoCopyOnSelect","triggerRef","onCopyCallback","setText","ensureTabIndex","element","hasAttribute","setAttribute","handleCopy","newText","current","HTMLInputElement","HTMLTextAreaElement","select","value","innerText","navigator","clipboard","writeText","handleCopyOnSelect","selectedText","handleSelectionChange","document","activeElement","selection","window","getSelection","range","getRangeAt","toString","maxWait","addEventListener","removeEventListener"],"sources":["../../../src/hooks/CopyClipboard.ts"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { GenericFunction } from '@/interfaces';\n\ninterface UseCopyClipboardProps {\n  elementRef: React.RefObject<HTMLElement>;\n  autoCopyOnSelect?: boolean;\n  triggerRef: React.RefObject<HTMLElement>;\n  onCopyCallback?: GenericFunction\n}\n\nexport const useCopyClipboard = (\n  {\n    elementRef,\n    autoCopyOnSelect,\n    triggerRef,\n    onCopyCallback\n  } : UseCopyClipboardProps\n) => {\n  const [, setText] = useState<string>('');\n\n  const ensureTabIndex = (element: HTMLElement) => {\n    if (!element.hasAttribute('tabindex')) {\n      element.setAttribute('tabindex', '0');\n    }\n  };\n\n  const handleCopy = async () => {\n    let newText = '';\n\n    if (elementRef.current) {\n      if (elementRef.current instanceof HTMLInputElement || elementRef.current instanceof HTMLTextAreaElement) {\n        // For input or textarea elements\n        elementRef.current.select();\n        newText = elementRef.current?.value || elementRef.current?.innerText || '';\n      } else {\n        newText = elementRef.current?.innerText;\n      }\n    }\n    await navigator.clipboard.writeText(newText);\n    if (onCopyCallback) {\n      onCopyCallback(newText);\n    }\n    setText(newText);\n  };\n\n  const handleCopyOnSelect = async (selectedText: string) => {\n    setText(selectedText);\n    await navigator.clipboard.writeText(selectedText);\n    if (onCopyCallback) {\n      onCopyCallback(selectedText);\n    }\n  };\n\n  // TODO: Handle the case when the user selects text beyond the element\n  const handleSelectionChange = useDebouncedCallback(() => {\n    if (document.activeElement === elementRef.current) {\n      const selection = window.getSelection();\n      const range = selection?.getRangeAt(0);\n      return handleCopyOnSelect(range ? range.toString() : '');\n    }\n  }, 500, { maxWait: 1000 });\n\n  useEffect(() => {\n    if (triggerRef && triggerRef.current) {\n      triggerRef.current.addEventListener('click', handleCopy);\n    }\n\n    if(autoCopyOnSelect && elementRef && elementRef.current) {\n      ensureTabIndex(elementRef.current);\n      document.addEventListener('selectionchange', handleSelectionChange);\n    }\n\n    return () => {\n      if (triggerRef && triggerRef.current) {\n        triggerRef.current.removeEventListener('click', handleCopy);\n      }\n      if (autoCopyOnSelect && elementRef && elementRef.current) {\n        document.removeEventListener('selectionchange', handleSelectionChange);\n      }\n    };\n  }, [triggerRef, elementRef, autoCopyOnSelect]);\n\n  return {\n    handleCopy\n  };\n};"],"mappings":"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","ignoreList":[]}

package/dist/esm/hooks/DialogOverlay.js

@@ -0,0 +1,66 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+export const useDialogOverlay = ({
+  customCssClass,
+  parentNode,
+  id = 'dialogOverlay'
+}) => {
+  const overlayNode = useRef(null);
+  const createOverlay = useCallback(() => {
+    const existingOverlay = document.getElementById(id);
+    const parentDomElement = parentNode || document.body;
+    if (!existingOverlay) {
+      // Create a new div if it doesn't exist
+      const newOverlay = document.createElement('div');
+      newOverlay.classList.add('dialogOverlay');
+      if (customCssClass) {
+        newOverlay.classList.add(customCssClass);
+      }
+      newOverlay.id = id;
+      parentDomElement.append(newOverlay);
+      overlayNode.current = newOverlay; // Assign the created element to the ref
+    } else {
+      overlayNode.current = existingOverlay; // Assign the existing element to the ref
+    }
+
+    // Add custom show and hide events
+    if (overlayNode.current) {
+      const showEvent = new CustomEvent('show');
+      const hideEvent = new CustomEvent('hide');
+
+      // Dispatch custom events
+      overlayNode.current.addEventListener('show', () => {
+        overlayNode.current?.classList.add('isVisible');
+      });
+      overlayNode.current.addEventListener('hide', () => {
+        overlayNode.current?.classList.remove('isVisible');
+      });
+
+      // Functions to trigger the events
+      overlayNode.current.showOverlay = () => {
+        overlayNode.current?.dispatchEvent(showEvent);
+      };
+      overlayNode.current.hideOverlay = () => {
+        overlayNode.current?.dispatchEvent(hideEvent);
+      };
+    }
+    return overlayNode.current;
+  }, [customCssClass, id, parentNode]);
+  const removeOverlay = useCallback(() => {
+    if (overlayNode.current) {
+      overlayNode.current.remove();
+      overlayNode.current = null;
+    }
+  }, []);
+  useEffect(() => () => {
+    // Clean up overlay on component unmount
+    removeOverlay();
+  }, [removeOverlay]);
+  return {
+    createOverlay,
+    removeOverlay
+  };
+};
+export default useDialogOverlay;
+//# sourceMappingURL=DialogOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogOverlay.js","names":["useCallback","useEffect","useRef","useDialogOverlay","customCssClass","parentNode","id","overlayNode","createOverlay","existingOverlay","document","getElementById","parentDomElement","body","newOverlay","createElement","classList","add","append","current","showEvent","CustomEvent","hideEvent","addEventListener","remove","showOverlay","dispatchEvent","hideOverlay","removeOverlay"],"sources":["../../../src/hooks/DialogOverlay.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\ninterface DialogOverlayHook {\n  customCssClass?: string;\n  parentNode?: HTMLElement;\n  isVisible?: boolean;\n  id?: string;\n}\n\ninterface OverlayDivElement extends HTMLDivElement {\n  showOverlay: () => void;\n  hideOverlay: () => void;\n}\n\nexport const useDialogOverlay = (\n  {\n    customCssClass,\n    parentNode,\n    id = 'dialogOverlay'\n  }: DialogOverlayHook\n) => {\n  const overlayNode = useRef<OverlayDivElement | null>(null);\n\n  const createOverlay = useCallback(() => {\n    const existingOverlay = document.getElementById(id);\n    const parentDomElement = parentNode || document.body;\n\n    if (!existingOverlay) {\n      // Create a new div if it doesn't exist\n      const newOverlay = document.createElement('div');\n      newOverlay.classList.add('dialogOverlay');\n      if (customCssClass) {\n        newOverlay.classList.add(customCssClass);\n      }\n      newOverlay.id = id;\n      parentDomElement.append(newOverlay);\n\n      overlayNode.current = newOverlay as OverlayDivElement; // Assign the created element to the ref\n    } else {\n      overlayNode.current = existingOverlay as OverlayDivElement; // Assign the existing element to the ref\n    }\n\n    // Add custom show and hide events\n    if (overlayNode.current) {\n      const showEvent = new CustomEvent('show');\n      const hideEvent = new CustomEvent('hide');\n\n      // Dispatch custom events\n      overlayNode.current.addEventListener('show', () => {\n        overlayNode.current?.classList.add('isVisible');\n      });\n\n      overlayNode.current.addEventListener('hide', () => {\n        overlayNode.current?.classList.remove('isVisible');\n      });\n\n      // Functions to trigger the events\n      overlayNode.current.showOverlay = () => {\n        overlayNode.current?.dispatchEvent(showEvent);\n      };\n\n      overlayNode.current.hideOverlay = () => {\n        overlayNode.current?.dispatchEvent(hideEvent);\n      };\n    }\n\n    return overlayNode.current;\n  }, [customCssClass, id, parentNode]);\n\n  const removeOverlay = useCallback(() => {\n    if (overlayNode.current) {\n      overlayNode.current.remove();\n      overlayNode.current = null;\n    }\n  }, []);\n\n  useEffect(() => () => {\n    // Clean up overlay on component unmount\n    removeOverlay();\n  }, [removeOverlay]);\n\n  return { createOverlay, removeOverlay };\n};\n\nexport default useDialogOverlay;\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AActD,OAAO,MAAMC,gBAAgB,GAAGA,CAC9B;EACEC,cAAc;EACdC,UAAU;EACVC,EAAE,GAAG;AACY,CAAC,KACjB;EACH,MAAMC,WAAW,GAAGL,MAAM,CAA2B,IAAI,CAAC;EAE1D,MAAMM,aAAa,GAAGR,WAAW,CAAC,MAAM;IACtC,MAAMS,eAAe,GAAGC,QAAQ,CAACC,cAAc,CAACL,EAAE,CAAC;IACnD,MAAMM,gBAAgB,GAAGP,UAAU,IAAIK,QAAQ,CAACG,IAAI;IAEpD,IAAI,CAACJ,eAAe,EAAE;MACpB;MACA,MAAMK,UAAU,GAAGJ,QAAQ,CAACK,aAAa,CAAC,KAAK,CAAC;MAChDD,UAAU,CAACE,SAAS,CAACC,GAAG,CAAC,eAAe,CAAC;MACzC,IAAIb,cAAc,EAAE;QAClBU,UAAU,CAACE,SAAS,CAACC,GAAG,CAACb,cAAc,CAAC;MAC1C;MACAU,UAAU,CAACR,EAAE,GAAGA,EAAE;MAClBM,gBAAgB,CAACM,MAAM,CAACJ,UAAU,CAAC;MAEnCP,WAAW,CAACY,OAAO,GAAGL,UAA+B,CAAC,CAAC;IACzD,CAAC,MAAM;MACLP,WAAW,CAACY,OAAO,GAAGV,eAAoC,CAAC,CAAC;IAC9D;;IAEA;IACA,IAAIF,WAAW,CAACY,OAAO,EAAE;MACvB,MAAMC,SAAS,GAAG,IAAIC,WAAW,CAAC,MAAM,CAAC;MACzC,MAAMC,SAAS,GAAG,IAAID,WAAW,CAAC,MAAM,CAAC;;MAEzC;MACAd,WAAW,CAACY,OAAO,CAACI,gBAAgB,CAAC,MAAM,EAAE,MAAM;QACjDhB,WAAW,CAACY,OAAO,EAAEH,SAAS,CAACC,GAAG,CAAC,WAAW,CAAC;MACjD,CAAC,CAAC;MAEFV,WAAW,CAACY,OAAO,CAACI,gBAAgB,CAAC,MAAM,EAAE,MAAM;QACjDhB,WAAW,CAACY,OAAO,EAAEH,SAAS,CAACQ,MAAM,CAAC,WAAW,CAAC;MACpD,CAAC,CAAC;;MAEF;MACAjB,WAAW,CAACY,OAAO,CAACM,WAAW,GAAG,MAAM;QACtClB,WAAW,CAACY,OAAO,EAAEO,aAAa,CAACN,SAAS,CAAC;MAC/C,CAAC;MAEDb,WAAW,CAACY,OAAO,CAACQ,WAAW,GAAG,MAAM;QACtCpB,WAAW,CAACY,OAAO,EAAEO,aAAa,CAACJ,SAAS,CAAC;MAC/C,CAAC;IACH;IAEA,OAAOf,WAAW,CAACY,OAAO;EAC5B,CAAC,EAAE,CAACf,cAAc,EAAEE,EAAE,EAAED,UAAU,CAAC,CAAC;EAEpC,MAAMuB,aAAa,GAAG5B,WAAW,CAAC,MAAM;IACtC,IAAIO,WAAW,CAACY,OAAO,EAAE;MACvBZ,WAAW,CAACY,OAAO,CAACK,MAAM,CAAC,CAAC;MAC5BjB,WAAW,CAACY,OAAO,GAAG,IAAI;IAC5B;EACF,CAAC,EAAE,EAAE,CAAC;EAENlB,SAAS,CAAC,MAAM,MAAM;IACpB;IACA2B,aAAa,CAAC,CAAC;EACjB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,OAAO;IAAEpB,aAAa;IAAEoB;EAAc,CAAC;AACzC,CAAC;AAED,eAAezB,gBAAgB","ignoreList":[]}

package/dist/esm/hooks/EdgeProximityDetect.js

@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+export const useOnEdgeProximityDetect = ({
+  triggerRef,
+  wrapperRef,
+  contentRef,
+  requiresRecalc
+}) => {
+  const xAxisOverride = ({
+    left,
+    width,
+    clientWidth
+  }) => {
+    // Too close to left
+    if (left < 0) {
+      return 'shiftRight';
+    }
+
+    // Too close to right
+    if (left + width > clientWidth) {
+      return 'shiftLeft';
+    }
+    return '';
+  };
+  const yAxisOverride = ({
+    top,
+    height,
+    clientHeight
+  }) => {
+    // Too close to top
+    if (top - height < 0) {
+      return 'shiftDown';
+    }
+
+    // Too close to bottom
+    if (top + height > clientHeight) {
+      return 'shiftUp';
+    }
+    return '';
+  };
+  useEffect(() => {
+    if (wrapperRef.current && contentRef.current && triggerRef.current && document && document.body) {
+      wrapperRef.current.classList.add('measuring');
+      const {
+        clientWidth,
+        clientHeight
+      } = document.body;
+      const {
+        width,
+        height,
+        top,
+        left
+      } = contentRef.current.getBoundingClientRect();
+
+      // Check if it needs x-axis or y-axis adjustment
+      const xAxisOverrideCssClass = xAxisOverride({
+        left,
+        width,
+        clientWidth
+      });
+      if (xAxisOverrideCssClass) {
+        wrapperRef.current.classList.add(xAxisOverrideCssClass);
+      }
+      const yAxisOverrideCssClass = yAxisOverride({
+        top,
+        height,
+        clientHeight
+      });
+      if (yAxisOverrideCssClass) {
+        wrapperRef.current.classList.add(yAxisOverrideCssClass);
+      }
+      wrapperRef.current.classList.remove('measuring');
+    }
+  }, [triggerRef, wrapperRef, contentRef, requiresRecalc]);
+  return {};
+};
+//# sourceMappingURL=EdgeProximityDetect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeProximityDetect.js","names":["useEffect","useOnEdgeProximityDetect","triggerRef","wrapperRef","contentRef","requiresRecalc","xAxisOverride","left","width","clientWidth","yAxisOverride","top","height","clientHeight","current","document","body","classList","add","getBoundingClientRect","xAxisOverrideCssClass","yAxisOverrideCssClass","remove"],"sources":["../../../src/hooks/EdgeProximityDetect.ts"],"sourcesContent":["import React, { useEffect } from 'react';\n\ninterface UseOnEdgeProximityDetectProps {\n  triggerRef: React.RefObject<HTMLElement>;\n  wrapperRef: React.RefObject<HTMLElement>;\n  contentRef: React.RefObject<HTMLElement>;\n  requiresRecalc: boolean;\n  preferredPlacement?: 'right-middle' | 'right-top' | 'right-bottom' | 'left-middle' | 'left-top' | 'left-bottom' | 'top-middle' | 'top-top' | 'top-bottom' | 'bottom-middle' | 'bottom-top' | 'bottom-bottom';\n}\n\nexport const useOnEdgeProximityDetect = (\n  {\n    triggerRef,\n    wrapperRef,\n    contentRef,\n    requiresRecalc\n  }\n  :\n  UseOnEdgeProximityDetectProps\n) => {\n  const xAxisOverride = (\n    {\n      left,\n      width,\n      clientWidth\n    }\n    :\n    {\n      left: number;\n      width: number;\n      clientWidth: number\n    }\n  ) => {\n    // Too close to left\n    if (left < 0) {\n      return 'shiftRight';\n    }\n\n    // Too close to right\n    if (left + width > clientWidth) {\n      return 'shiftLeft';\n    }\n    return '';\n  };\n\n  const yAxisOverride = (\n    {\n      top,\n      height,\n      clientHeight\n    }\n    :\n    {\n      top: number;\n      height: number;\n      clientHeight: number\n    }\n  ) => {\n    // Too close to top\n    if (top - height < 0) {\n      return 'shiftDown';\n    }\n\n    // Too close to bottom\n    if (top + height > clientHeight) {\n      return 'shiftUp';\n    }\n    return '';\n  };\n\n  useEffect(() => {\n    if (\n      wrapperRef.current\n      && contentRef.current\n      && triggerRef.current\n      && document\n      && document.body\n    ) {\n      wrapperRef.current.classList.add('measuring');\n      const { clientWidth, clientHeight } = document.body;\n      const {\n        width, height, top, left\n      } = contentRef.current.getBoundingClientRect();\n\n      // Check if it needs x-axis or y-axis adjustment\n      const xAxisOverrideCssClass = xAxisOverride({ left, width, clientWidth });\n      if (xAxisOverrideCssClass) {\n        wrapperRef.current.classList.add(xAxisOverrideCssClass);\n      }\n\n      const yAxisOverrideCssClass = yAxisOverride({ top, height, clientHeight });\n      if (yAxisOverrideCssClass) {\n        wrapperRef.current.classList.add(yAxisOverrideCssClass);\n      }\n\n      wrapperRef.current.classList.remove('measuring');\n    }\n  }, [triggerRef, wrapperRef, contentRef, requiresRecalc]);\n\n  return {};\n};\n"],"mappings":"AAAA,SAAgBA,SAAS,QAAQ,OAAO;AAUxC,OAAO,MAAMC,wBAAwB,GAAGA,CACtC;EACEC,UAAU;EACVC,UAAU;EACVC,UAAU;EACVC;AAG0B,CAAC,KAC1B;EACH,MAAMC,aAAa,GAAGA,CACpB;IACEC,IAAI;IACJC,KAAK;IACLC;EAOF,CAAC,KACE;IACH;IACA,IAAIF,IAAI,GAAG,CAAC,EAAE;MACZ,OAAO,YAAY;IACrB;;IAEA;IACA,IAAIA,IAAI,GAAGC,KAAK,GAAGC,WAAW,EAAE;MAC9B,OAAO,WAAW;IACpB;IACA,OAAO,EAAE;EACX,CAAC;EAED,MAAMC,aAAa,GAAGA,CACpB;IACEC,GAAG;IACHC,MAAM;IACNC;EAOF,CAAC,KACE;IACH;IACA,IAAIF,GAAG,GAAGC,MAAM,GAAG,CAAC,EAAE;MACpB,OAAO,WAAW;IACpB;;IAEA;IACA,IAAID,GAAG,GAAGC,MAAM,GAAGC,YAAY,EAAE;MAC/B,OAAO,SAAS;IAClB;IACA,OAAO,EAAE;EACX,CAAC;EAEDb,SAAS,CAAC,MAAM;IACd,IACEG,UAAU,CAACW,OAAO,IACfV,UAAU,CAACU,OAAO,IAClBZ,UAAU,CAACY,OAAO,IAClBC,QAAQ,IACRA,QAAQ,CAACC,IAAI,EAChB;MACAb,UAAU,CAACW,OAAO,CAACG,SAAS,CAACC,GAAG,CAAC,WAAW,CAAC;MAC7C,MAAM;QAAET,WAAW;QAAEI;MAAa,CAAC,GAAGE,QAAQ,CAACC,IAAI;MACnD,MAAM;QACJR,KAAK;QAAEI,MAAM;QAAED,GAAG;QAAEJ;MACtB,CAAC,GAAGH,UAAU,CAACU,OAAO,CAACK,qBAAqB,CAAC,CAAC;;MAE9C;MACA,MAAMC,qBAAqB,GAAGd,aAAa,CAAC;QAAEC,IAAI;QAAEC,KAAK;QAAEC;MAAY,CAAC,CAAC;MACzE,IAAIW,qBAAqB,EAAE;QACzBjB,UAAU,CAACW,OAAO,CAACG,SAAS,CAACC,GAAG,CAACE,qBAAqB,CAAC;MACzD;MAEA,MAAMC,qBAAqB,GAAGX,aAAa,CAAC;QAAEC,GAAG;QAAEC,MAAM;QAAEC;MAAa,CAAC,CAAC;MAC1E,IAAIQ,qBAAqB,EAAE;QACzBlB,UAAU,CAACW,OAAO,CAACG,SAAS,CAACC,GAAG,CAACG,qBAAqB,CAAC;MACzD;MAEAlB,UAAU,CAACW,OAAO,CAACG,SAAS,CAACK,MAAM,CAAC,WAAW,CAAC;IAClD;EACF,CAAC,EAAE,CAACpB,UAAU,EAAEC,UAAU,EAAEC,UAAU,EAAEC,cAAc,CAAC,CAAC;EAExD,OAAO,CAAC,CAAC;AACX,CAAC","ignoreList":[]}

package/dist/esm/hooks/EllipsisBookends.js

@@ -0,0 +1,119 @@
+/* eslint-disable no-unused-vars */
+
+import { useEffect, useCallback } from 'react';
+export const useEllipsisBookends = ({
+  outerWrapper,
+  innerHolder,
+  ellipsisBufferWidth = 70,
+  scrollIncrement = 40
+}) => {
+  // If it is overflowing, it will add ellipsis to the end of the inner element and
+  // event listeners that trigger scrolling of the inner element when a child of the inner element receives focus and is located close to the right hand bounds of the outer element
+  // If the inner element has been scrolled it will also add ellipsis to the start of the inner element
+  const getBoundaries = useCallback(() => {
+    const outerWidth = outerWrapper.current.offsetWidth;
+    const innerScrollWidth = innerHolder.current.scrollWidth;
+    const innerHolderWidth = innerHolder.current.offsetWidth;
+    const isOverflowing = innerScrollWidth > outerWidth;
+    const minLeftPos = outerWidth - innerScrollWidth - ellipsisBufferWidth;
+    return {
+      isOverflowing,
+      minLeftPos,
+      outerWidth,
+      innerScrollWidth,
+      innerHolderWidth
+    };
+  }, [outerWrapper, innerHolder]);
+  const getInnerLeftPosWithoutUnits = useCallback(() => {
+    const leftPos = innerHolder.current?.style.left || '0px';
+    const leftPosWithoutUnits = leftPos.replace('px', '');
+    return parseInt(leftPosWithoutUnits, 10);
+  }, [innerHolder]);
+  const applyBookendCssClasses = (isOverflowing, minLeftPos) => {
+    if (!outerWrapper.current || !innerHolder.current) {
+      // If either of the elements are not present don't bother continuing
+      return;
+    }
+    const innerLeftPos = getInnerLeftPosWithoutUnits();
+    if (isOverflowing) {
+      outerWrapper.current.classList.add('ellipsisBookends');
+      outerWrapper.current.classList.add('ellipsisBookendRight');
+    }
+    if (innerLeftPos < 0) {
+      outerWrapper.current.classList.add('ellipsisBookendLeft');
+      if (innerLeftPos < minLeftPos) {
+        outerWrapper.current.classList.remove('ellipsisBookendRight');
+      }
+    } else {
+      outerWrapper.current.classList.remove('ellipsisBookendLeft');
+    }
+  };
+  const handleInnerEvent = event => {
+    const eventTrigger = event.target;
+    const eventOffsetLeft = eventTrigger.offsetLeft;
+    const {
+      isOverflowing,
+      minLeftPos,
+      outerWidth,
+      innerHolderWidth
+    } = getBoundaries();
+    if (eventOffsetLeft > innerHolderWidth - ellipsisBufferWidth) {
+      innerHolder.current.style.left = 0 - (eventOffsetLeft - (outerWidth - ellipsisBufferWidth - scrollIncrement)) + 'px';
+    } else {
+      innerHolder.current.style.left = '0';
+    }
+    applyBookendCssClasses(isOverflowing, minLeftPos);
+  };
+  const handleInnerChildEvent = childNodeIndex => {
+    const {
+      isOverflowing,
+      minLeftPos,
+      outerWidth,
+      innerHolderWidth
+    } = getBoundaries();
+    if (isOverflowing) {
+      const childNode = innerHolder.current.children[childNodeIndex];
+      const childOffsetLeft = childNode.offsetLeft;
+      if (childOffsetLeft > innerHolderWidth - ellipsisBufferWidth) {
+        innerHolder.current.style.left = 0 - (childOffsetLeft - (outerWidth - ellipsisBufferWidth - scrollIncrement)) + 'px';
+      } else {
+        innerHolder.current.style.left = '0';
+      }
+      applyBookendCssClasses(isOverflowing, minLeftPos);
+    }
+  };
+  const initialiseEllipsis = useCallback(() => {
+    const {
+      isOverflowing,
+      minLeftPos
+    } = getBoundaries();
+    const handleScroll = event => {
+      handleInnerEvent(event);
+    };
+    if (isOverflowing) {
+      innerHolder.current.addEventListener('click', handleScroll);
+    }
+    applyBookendCssClasses(isOverflowing, minLeftPos);
+  }, [outerWrapper, innerHolder]);
+  useEffect(() => {
+    if (outerWrapper.current && innerHolder.current) {
+      initialiseEllipsis();
+    }
+    document.addEventListener('resize', initialiseEllipsis);
+    return () => {
+      document.removeEventListener('resize', initialiseEllipsis);
+    };
+  }, [outerWrapper, innerHolder]);
+  if (!outerWrapper.current || !innerHolder.current) {
+    // If either of the elements are not present don't bother continuing
+    return {
+      handleInnerEvent: () => {},
+      handleInnerChildEvent: () => {}
+    };
+  }
+  return {
+    handleInnerEvent,
+    handleInnerChildEvent
+  };
+};
+//# sourceMappingURL=EllipsisBookends.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EllipsisBookends.js","names":["useEffect","useCallback","useEllipsisBookends","outerWrapper","innerHolder","ellipsisBufferWidth","scrollIncrement","getBoundaries","outerWidth","current","offsetWidth","innerScrollWidth","scrollWidth","innerHolderWidth","isOverflowing","minLeftPos","getInnerLeftPosWithoutUnits","leftPos","style","left","leftPosWithoutUnits","replace","parseInt","applyBookendCssClasses","innerLeftPos","classList","add","remove","handleInnerEvent","event","eventTrigger","target","eventOffsetLeft","offsetLeft","handleInnerChildEvent","childNodeIndex","childNode","children","childOffsetLeft","initialiseEllipsis","handleScroll","addEventListener","document","removeEventListener"],"sources":["../../../src/hooks/EllipsisBookends.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\nimport React, { useEffect, useCallback, useMemo } from 'react';\n\ntype EventTypes = MouseEvent | TouchEvent | FocusEvent;\n\nexport const useEllipsisBookends = (\n  {\n    outerWrapper,\n    innerHolder,\n    ellipsisBufferWidth = 70,\n    scrollIncrement = 40,\n  }:\n  {\n    outerWrapper: React.RefObject<HTMLElement>;\n    innerHolder: React.RefObject<HTMLElement>;\n    ellipsisBufferWidth?: number;\n    scrollIncrement?: number;\n  }\n) => {\n  // If it is overflowing, it will add ellipsis to the end of the inner element and\n  // event listeners that trigger scrolling of the inner element when a child of the inner element receives focus and is located close to the right hand bounds of the outer element\n  // If the inner element has been scrolled it will also add ellipsis to the start of the inner element\n  const getBoundaries = useCallback(() => {\n    const outerWidth = outerWrapper.current!.offsetWidth;\n    const innerScrollWidth = innerHolder.current!.scrollWidth;\n    const innerHolderWidth = innerHolder.current!.offsetWidth;\n\n    const isOverflowing = innerScrollWidth > outerWidth;\n    const minLeftPos = outerWidth - innerScrollWidth - ellipsisBufferWidth;\n\n    return {\n      isOverflowing,\n      minLeftPos,\n      outerWidth,\n      innerScrollWidth,\n      innerHolderWidth,\n    };\n  }, [outerWrapper, innerHolder]);\n\n  const getInnerLeftPosWithoutUnits = useCallback(() => {\n    const leftPos = innerHolder.current?.style.left || '0px';\n    const leftPosWithoutUnits = leftPos.replace('px', '');\n    return parseInt(leftPosWithoutUnits, 10);\n  }, [innerHolder]);\n\n  const applyBookendCssClasses = (isOverflowing: boolean, minLeftPos: number) => {\n    if (!outerWrapper.current || !innerHolder.current) {\n      // If either of the elements are not present don't bother continuing\n      return;\n    }\n\n    const innerLeftPos = getInnerLeftPosWithoutUnits();\n\n    if (isOverflowing) {\n      outerWrapper.current.classList.add('ellipsisBookends');\n      outerWrapper.current.classList.add('ellipsisBookendRight');\n    }\n\n    if (innerLeftPos < 0) {\n      outerWrapper.current.classList.add('ellipsisBookendLeft');\n\n      if (innerLeftPos < minLeftPos) {\n        outerWrapper.current.classList.remove('ellipsisBookendRight');\n      }\n\n    } else {\n      outerWrapper.current.classList.remove('ellipsisBookendLeft');\n    }\n  };\n\n  const handleInnerEvent = (event: EventTypes) => {\n    const eventTrigger = event.target as HTMLElement;\n    const eventOffsetLeft = eventTrigger.offsetLeft;\n    const { isOverflowing, minLeftPos, outerWidth, innerHolderWidth } = getBoundaries();\n\n    if (eventOffsetLeft > (innerHolderWidth - ellipsisBufferWidth)) {\n      innerHolder.current!.style.left = (0 - (eventOffsetLeft - (outerWidth - ellipsisBufferWidth - scrollIncrement))) + 'px';\n    } else {\n      innerHolder.current!.style.left = '0';\n    }\n    applyBookendCssClasses(isOverflowing, minLeftPos);\n  };\n\n  const handleInnerChildEvent = (childNodeIndex: number) => {\n    const { isOverflowing, minLeftPos, outerWidth, innerHolderWidth } = getBoundaries();\n\n    if (isOverflowing) {\n      const childNode = innerHolder.current!.children[childNodeIndex] as HTMLElement;\n      const childOffsetLeft = childNode.offsetLeft;\n\n      if (childOffsetLeft > (innerHolderWidth - ellipsisBufferWidth)) {\n        innerHolder.current!.style.left = (0 - (childOffsetLeft - (outerWidth - ellipsisBufferWidth - scrollIncrement))) + 'px';\n      } else {\n        innerHolder.current!.style.left = '0';\n      }\n      applyBookendCssClasses(isOverflowing, minLeftPos);\n    }\n  };\n\n  const initialiseEllipsis = useCallback(() => {\n    const { isOverflowing, minLeftPos } = getBoundaries();\n\n    const handleScroll = (event: EventTypes) => {\n      handleInnerEvent(event);\n    };\n\n    if (isOverflowing) {\n      innerHolder.current!.addEventListener('click', handleScroll);\n    }\n    applyBookendCssClasses(isOverflowing, minLeftPos);\n  }, [outerWrapper, innerHolder]);\n\n  useEffect(() => {\n    if (outerWrapper.current && innerHolder.current) {\n      initialiseEllipsis();\n    }\n\n    document.addEventListener('resize', initialiseEllipsis);\n\n    return () => {\n      document.removeEventListener('resize', initialiseEllipsis);\n    };\n  }, [outerWrapper, innerHolder]);\n\n  if (!outerWrapper.current || !innerHolder.current) {\n    // If either of the elements are not present don't bother continuing\n    return {\n      handleInnerEvent: () => {},\n      handleInnerChildEvent: () => {}\n    };\n  }\n\n  return {\n    handleInnerEvent,\n    handleInnerChildEvent\n  };\n};"],"mappings":"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","ignoreList":[]}

package/dist/esm/hooks/FocusTrap.js

@@ -0,0 +1,67 @@
+/* eslint-disable no-unused-vars */
+
+import { useCallback, useEffect, useRef } from 'react';
+export const useFocusTrap = (elementRef, elementHandler) => {
+  const focusableElementsSelector = `
+    a[href],
+    area[href],
+    input:not([disabled]),
+    select:not([disabled]),
+    textarea:not([disabled]),
+    button:not([disabled]),
+    iframe,
+    object,
+    embed,
+    [tabindex]:not([tabindex="-1"]),
+    [contenteditable]
+  `;
+  const firstFocusableElement = useRef(null);
+  const lastFocusableElement = useRef(null);
+  const KeyHandler = useCallback(event => {
+    const {
+      activeElement
+    } = document;
+    if (elementHandler && event.key === 'Escape') {
+      return elementHandler(event);
+    }
+
+    // If a keyboard event happens elsewhere in the dom close the dialog
+    // This could be achieved if the user focuses the address bar and tabs into the document.
+    if (elementRef.current && !elementRef.current.contains(activeElement)) {
+      return elementHandler(event);
+    }
+    if (event.key === 'Tab') {
+      if (event.shiftKey) {
+        // If Shift + Tab is pressed and focus is on the first focusable element, move to the last focusable element
+        if (activeElement === firstFocusableElement.current) {
+          event.preventDefault();
+          lastFocusableElement.current?.focus();
+        }
+      } else if (activeElement === lastFocusableElement.current) {
+        // If Tab is pressed and focus is on the last focusable element, move to the first focusable element
+        event.preventDefault();
+        firstFocusableElement.current?.focus();
+      }
+    }
+    return event;
+  }, [elementHandler, elementRef]);
+  useEffect(() => {
+    // Get all focusable elements in the dialog
+    if (elementRef.current) {
+      const focusableElements = Array.from(elementRef.current.querySelectorAll(focusableElementsSelector));
+      if (focusableElements.length > 0) {
+        firstFocusableElement.current = focusableElements[0];
+        lastFocusableElement.current = focusableElements[focusableElements.length - 1];
+      }
+    }
+    const listener = event => {
+      KeyHandler(event);
+    };
+    document.addEventListener('keydown', listener);
+    return () => {
+      document.removeEventListener('keydown', listener);
+    };
+  }, [elementRef, focusableElementsSelector, KeyHandler]);
+};
+export default useFocusTrap;
+//# sourceMappingURL=FocusTrap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTrap.js","names":["useCallback","useEffect","useRef","useFocusTrap","elementRef","elementHandler","focusableElementsSelector","firstFocusableElement","lastFocusableElement","KeyHandler","event","activeElement","document","key","current","contains","shiftKey","preventDefault","focus","focusableElements","Array","from","querySelectorAll","length","listener","addEventListener","removeEventListener"],"sources":["../../../src/hooks/FocusTrap.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\nimport {\n  RefObject, useCallback, useEffect, useRef\n} from 'react';\n\ntype EventTypes = KeyboardEvent;\n\nexport const useFocusTrap = (\n  elementRef: RefObject<HTMLElement>,\n  elementHandler: (event: EventTypes) => void\n) => {\n  const focusableElementsSelector = `\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\n  const firstFocusableElement = useRef<HTMLElement | null>(null);\n  const lastFocusableElement = useRef<HTMLElement | null>(null);\n\n  const KeyHandler = useCallback(\n    (event: KeyboardEvent) => {\n      const { activeElement } = document;\n\n      if (elementHandler && event.key === 'Escape') {\n        return elementHandler(event);\n      }\n\n      // If a keyboard event happens elsewhere in the dom close the dialog\n      // This could be achieved if the user focuses the address bar and tabs into the document.\n      if (elementRef.current && !elementRef.current.contains(activeElement)) {\n        return elementHandler(event);\n      }\n\n      if (event.key === 'Tab') {\n        if (event.shiftKey) {\n          // If Shift + Tab is pressed and focus is on the first focusable element, move to the last focusable element\n          if (activeElement === firstFocusableElement.current) {\n            event.preventDefault();\n            lastFocusableElement.current?.focus();\n          }\n        } else if (activeElement === lastFocusableElement.current) {\n          // If Tab is pressed and focus is on the last focusable element, move to the first focusable element\n          event.preventDefault();\n          firstFocusableElement.current?.focus();\n        }\n      }\n\n      return event;\n    },\n    [elementHandler, elementRef]\n  );\n\n  useEffect(() => {\n    // Get all focusable elements in the dialog\n    if (elementRef.current) {\n      const focusableElements = Array.from(\n        elementRef.current.querySelectorAll(focusableElementsSelector)\n      ) as HTMLElement[];\n\n      if (focusableElements.length > 0) {\n        firstFocusableElement.current = focusableElements[0];\n        lastFocusableElement.current = focusableElements[focusableElements.length - 1];\n      }\n    }\n\n    const listener = (event: EventTypes) => {\n      KeyHandler(event);\n    };\n\n    document.addEventListener('keydown', listener);\n\n    return () => {\n      document.removeEventListener('keydown', listener);\n    };\n  }, [elementRef, focusableElementsSelector, KeyHandler]);\n};\n\nexport default useFocusTrap;\n"],"mappings":"AAAA;;AAEA,SACaA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QACpC,OAAO;AAId,OAAO,MAAMC,YAAY,GAAGA,CAC1BC,UAAkC,EAClCC,cAA2C,KACxC;EACH,MAAMC,yBAAyB,GAAG;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;EAED,MAAMC,qBAAqB,GAAGL,MAAM,CAAqB,IAAI,CAAC;EAC9D,MAAMM,oBAAoB,GAAGN,MAAM,CAAqB,IAAI,CAAC;EAE7D,MAAMO,UAAU,GAAGT,WAAW,CAC3BU,KAAoB,IAAK;IACxB,MAAM;MAAEC;IAAc,CAAC,GAAGC,QAAQ;IAElC,IAAIP,cAAc,IAAIK,KAAK,CAACG,GAAG,KAAK,QAAQ,EAAE;MAC5C,OAAOR,cAAc,CAACK,KAAK,CAAC;IAC9B;;IAEA;IACA;IACA,IAAIN,UAAU,CAACU,OAAO,IAAI,CAACV,UAAU,CAACU,OAAO,CAACC,QAAQ,CAACJ,aAAa,CAAC,EAAE;MACrE,OAAON,cAAc,CAACK,KAAK,CAAC;IAC9B;IAEA,IAAIA,KAAK,CAACG,GAAG,KAAK,KAAK,EAAE;MACvB,IAAIH,KAAK,CAACM,QAAQ,EAAE;QAClB;QACA,IAAIL,aAAa,KAAKJ,qBAAqB,CAACO,OAAO,EAAE;UACnDJ,KAAK,CAACO,cAAc,CAAC,CAAC;UACtBT,oBAAoB,CAACM,OAAO,EAAEI,KAAK,CAAC,CAAC;QACvC;MACF,CAAC,MAAM,IAAIP,aAAa,KAAKH,oBAAoB,CAACM,OAAO,EAAE;QACzD;QACAJ,KAAK,CAACO,cAAc,CAAC,CAAC;QACtBV,qBAAqB,CAACO,OAAO,EAAEI,KAAK,CAAC,CAAC;MACxC;IACF;IAEA,OAAOR,KAAK;EACd,CAAC,EACD,CAACL,cAAc,EAAED,UAAU,CAC7B,CAAC;EAEDH,SAAS,CAAC,MAAM;IACd;IACA,IAAIG,UAAU,CAACU,OAAO,EAAE;MACtB,MAAMK,iBAAiB,GAAGC,KAAK,CAACC,IAAI,CAClCjB,UAAU,CAACU,OAAO,CAACQ,gBAAgB,CAAChB,yBAAyB,CAC/D,CAAkB;MAElB,IAAIa,iBAAiB,CAACI,MAAM,GAAG,CAAC,EAAE;QAChChB,qBAAqB,CAACO,OAAO,GAAGK,iBAAiB,CAAC,CAAC,CAAC;QACpDX,oBAAoB,CAACM,OAAO,GAAGK,iBAAiB,CAACA,iBAAiB,CAACI,MAAM,GAAG,CAAC,CAAC;MAChF;IACF;IAEA,MAAMC,QAAQ,GAAId,KAAiB,IAAK;MACtCD,UAAU,CAACC,KAAK,CAAC;IACnB,CAAC;IAEDE,QAAQ,CAACa,gBAAgB,CAAC,SAAS,EAAED,QAAQ,CAAC;IAE9C,OAAO,MAAM;MACXZ,QAAQ,CAACc,mBAAmB,CAAC,SAAS,EAAEF,QAAQ,CAAC;IACnD,CAAC;EACH,CAAC,EAAE,CAACpB,UAAU,EAAEE,yBAAyB,EAAEG,UAAU,CAAC,CAAC;AACzD,CAAC;AAED,eAAeN,YAAY","ignoreList":[]}

package/dist/esm/hooks/FormAssistance.js

@@ -0,0 +1,71 @@
+import { useCallback, useEffect } from 'react';
+export const useFormAssistance = ({
+  formElementRef,
+  formAlertMessage
+}) => {
+  // When the form is submitted and an input is invalid, the wrapping element is updated to
+  // announce the error/s and send focus to the first invalid input
+  const multiErrorsText = 'There are multiple errors in the form. Please correct them before submitting.';
+  const singleErrorText = 'There is an error in the form. Please correct it before submitting.';
+  const updateFormAlertMessage = useCallback(() => {
+    const {
+      wrappingElementRef,
+      contentElementRef
+    } = formAlertMessage;
+    const wrappingElement = wrappingElementRef.current;
+    const contentElement = contentElementRef.current;
+    if (wrappingElement && contentElement) {
+      const invalidInputs = wrappingElement.querySelectorAll(':invalid');
+      if (invalidInputs.length > 0) {
+        contentElement.innerText = invalidInputs.length > 1 ? multiErrorsText : singleErrorText;
+        wrappingElement.classList.add('formAlertVisible');
+      } else {
+        contentElement.innerHTML = '';
+        wrappingElement.classList.remove('formAlertVisible');
+      }
+    }
+  }, [formAlertMessage]);
+  useEffect(() => {
+    updateFormAlertMessage();
+  }, [updateFormAlertMessage]);
+  const handleInvalidForm = useCallback(event => {
+    // Check if there are any invalid inputs
+    const formElement = formElementRef.current;
+    if (formElement) {
+      const invalidInputs = formElement.querySelectorAll(':invalid');
+      if (invalidInputs.length === 0) {
+        return event;
+      }
+      event.preventDefault();
+
+      // Insert an alert message for screen readers
+      updateFormAlertMessage();
+
+      // Focus the first invalid input
+      const firstInvalidInput = invalidInputs[0];
+      firstInvalidInput.focus();
+      return false;
+    }
+    return event;
+  }, [formElementRef, updateFormAlertMessage]);
+  const handleInput = useCallback(event => {
+    const target = event.target;
+    if (target instanceof HTMLElement) {
+      target.classList.remove('invalid');
+    }
+  }, []);
+  useEffect(() => {
+    const formElement = formElementRef.current;
+    if (formElement) {
+      formElement.addEventListener('submit', handleInvalidForm);
+    }
+    return () => {
+      if (formElement) {
+        formElement.removeEventListener('invalid', handleInvalidForm, true);
+        formElement.removeEventListener('input', handleInput, true);
+      }
+    };
+  }, [formElementRef, handleInvalidForm, handleInput]);
+};
+export default useFormAssistance;
+//# sourceMappingURL=FormAssistance.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormAssistance.js","names":["useCallback","useEffect","useFormAssistance","formElementRef","formAlertMessage","multiErrorsText","singleErrorText","updateFormAlertMessage","wrappingElementRef","contentElementRef","wrappingElement","current","contentElement","invalidInputs","querySelectorAll","length","innerText","classList","add","innerHTML","remove","handleInvalidForm","event","formElement","preventDefault","firstInvalidInput","focus","handleInput","target","HTMLElement","addEventListener","removeEventListener"],"sources":["../../../src/hooks/FormAssistance.ts"],"sourcesContent":["import { useCallback, useEffect, RefObject } from 'react';\n\ninterface UseFormAssistanceProps {\n  formElementRef: RefObject<HTMLFormElement>;\n  formAlertMessage: {\n    wrappingElementRef: RefObject<HTMLFormElement>;\n    contentElementRef: RefObject<HTMLDivElement>;\n  };\n}\n\nexport const useFormAssistance = (\n  {\n    formElementRef,\n    formAlertMessage\n  }: UseFormAssistanceProps\n) => {\n  // When the form is submitted and an input is invalid, the wrapping element is updated to\n  // announce the error/s and send focus to the first invalid input\n  const multiErrorsText = 'There are multiple errors in the form. Please correct them before submitting.';\n  const singleErrorText = 'There is an error in the form. Please correct it before submitting.';\n\n  const updateFormAlertMessage = useCallback(() => {\n    const { wrappingElementRef, contentElementRef } = formAlertMessage;\n    const wrappingElement = wrappingElementRef.current;\n    const contentElement = contentElementRef.current;\n\n    if (wrappingElement && contentElement) {\n      const invalidInputs = wrappingElement.querySelectorAll(':invalid');\n      if (invalidInputs.length > 0) {\n        contentElement.innerText = invalidInputs.length > 1 ? multiErrorsText : singleErrorText;\n        wrappingElement.classList.add('formAlertVisible');\n      } else {\n        contentElement.innerHTML = '';\n        wrappingElement.classList.remove('formAlertVisible');\n      }\n    }\n  }, [formAlertMessage]);\n\n  useEffect(() => {\n    updateFormAlertMessage();\n  }, [updateFormAlertMessage]);\n\n  const handleInvalidForm = useCallback((event: Event) => {\n    // Check if there are any invalid inputs\n    const formElement = formElementRef.current;\n    if (formElement) {\n      const invalidInputs = formElement.querySelectorAll(':invalid');\n      if (invalidInputs.length === 0) {\n        return event;\n      }\n\n      event.preventDefault();\n\n      // Insert an alert message for screen readers\n      updateFormAlertMessage();\n\n      // Focus the first invalid input\n      const firstInvalidInput = invalidInputs[0] as HTMLElement;\n      firstInvalidInput.focus();\n\n      return false;\n    }\n    return event;\n  }, [formElementRef, updateFormAlertMessage]);\n\n  const handleInput = useCallback((event: Event) => {\n    const target = event.target;\n    if (target instanceof HTMLElement) {\n      target.classList.remove('invalid');\n    }\n  }, []);\n\n  useEffect(() => {\n    const formElement = formElementRef.current;\n\n    if (formElement) {\n      formElement.addEventListener('submit', handleInvalidForm);\n    }\n\n    return () => {\n      if (formElement) {\n        formElement.removeEventListener('invalid', handleInvalidForm, true);\n        formElement.removeEventListener('input', handleInput, true);\n      }\n    };\n  }, [formElementRef, handleInvalidForm, handleInput]);\n};\n\nexport default useFormAssistance;"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,QAAmB,OAAO;AAUzD,OAAO,MAAMC,iBAAiB,GAAGA,CAC/B;EACEC,cAAc;EACdC;AACsB,CAAC,KACtB;EACH;EACA;EACA,MAAMC,eAAe,GAAG,+EAA+E;EACvG,MAAMC,eAAe,GAAG,qEAAqE;EAE7F,MAAMC,sBAAsB,GAAGP,WAAW,CAAC,MAAM;IAC/C,MAAM;MAAEQ,kBAAkB;MAAEC;IAAkB,CAAC,GAAGL,gBAAgB;IAClE,MAAMM,eAAe,GAAGF,kBAAkB,CAACG,OAAO;IAClD,MAAMC,cAAc,GAAGH,iBAAiB,CAACE,OAAO;IAEhD,IAAID,eAAe,IAAIE,cAAc,EAAE;MACrC,MAAMC,aAAa,GAAGH,eAAe,CAACI,gBAAgB,CAAC,UAAU,CAAC;MAClE,IAAID,aAAa,CAACE,MAAM,GAAG,CAAC,EAAE;QAC5BH,cAAc,CAACI,SAAS,GAAGH,aAAa,CAACE,MAAM,GAAG,CAAC,GAAGV,eAAe,GAAGC,eAAe;QACvFI,eAAe,CAACO,SAAS,CAACC,GAAG,CAAC,kBAAkB,CAAC;MACnD,CAAC,MAAM;QACLN,cAAc,CAACO,SAAS,GAAG,EAAE;QAC7BT,eAAe,CAACO,SAAS,CAACG,MAAM,CAAC,kBAAkB,CAAC;MACtD;IACF;EACF,CAAC,EAAE,CAAChB,gBAAgB,CAAC,CAAC;EAEtBH,SAAS,CAAC,MAAM;IACdM,sBAAsB,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACA,sBAAsB,CAAC,CAAC;EAE5B,MAAMc,iBAAiB,GAAGrB,WAAW,CAAEsB,KAAY,IAAK;IACtD;IACA,MAAMC,WAAW,GAAGpB,cAAc,CAACQ,OAAO;IAC1C,IAAIY,WAAW,EAAE;MACf,MAAMV,aAAa,GAAGU,WAAW,CAACT,gBAAgB,CAAC,UAAU,CAAC;MAC9D,IAAID,aAAa,CAACE,MAAM,KAAK,CAAC,EAAE;QAC9B,OAAOO,KAAK;MACd;MAEAA,KAAK,CAACE,cAAc,CAAC,CAAC;;MAEtB;MACAjB,sBAAsB,CAAC,CAAC;;MAExB;MACA,MAAMkB,iBAAiB,GAAGZ,aAAa,CAAC,CAAC,CAAgB;MACzDY,iBAAiB,CAACC,KAAK,CAAC,CAAC;MAEzB,OAAO,KAAK;IACd;IACA,OAAOJ,KAAK;EACd,CAAC,EAAE,CAACnB,cAAc,EAAEI,sBAAsB,CAAC,CAAC;EAE5C,MAAMoB,WAAW,GAAG3B,WAAW,CAAEsB,KAAY,IAAK;IAChD,MAAMM,MAAM,GAAGN,KAAK,CAACM,MAAM;IAC3B,IAAIA,MAAM,YAAYC,WAAW,EAAE;MACjCD,MAAM,CAACX,SAAS,CAACG,MAAM,CAAC,SAAS,CAAC;IACpC;EACF,CAAC,EAAE,EAAE,CAAC;EAENnB,SAAS,CAAC,MAAM;IACd,MAAMsB,WAAW,GAAGpB,cAAc,CAACQ,OAAO;IAE1C,IAAIY,WAAW,EAAE;MACfA,WAAW,CAACO,gBAAgB,CAAC,QAAQ,EAAET,iBAAiB,CAAC;IAC3D;IAEA,OAAO,MAAM;MACX,IAAIE,WAAW,EAAE;QACfA,WAAW,CAACQ,mBAAmB,CAAC,SAAS,EAAEV,iBAAiB,EAAE,IAAI,CAAC;QACnEE,WAAW,CAACQ,mBAAmB,CAAC,OAAO,EAAEJ,WAAW,EAAE,IAAI,CAAC;MAC7D;IACF,CAAC;EACH,CAAC,EAAE,CAACxB,cAAc,EAAEkB,iBAAiB,EAAEM,WAAW,CAAC,CAAC;AACtD,CAAC;AAED,eAAezB,iBAAiB","ignoreList":[]}

package/dist/esm/hooks/OverflowScroll.js

@@ -0,0 +1,89 @@
+import { useEffect, useRef } from 'react';
+export function useOverflowScroll({
+  direction = 'both',
+  mode = 'viewport',
+  edgeOffset = 0,
+  targetRef,
+  requiresRecalc = false
+} = {}) {
+  const localRef = useRef(null);
+  const ref = targetRef ?? localRef;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof window === 'undefined') return;
+    const prev = {
+      overflowX: el.style.overflowX,
+      overflowY: el.style.overflowY,
+      maxWidth: el.style.maxWidth,
+      maxHeight: el.style.maxHeight
+    };
+    const apply = () => {
+      if (!el) return;
+      if (mode === 'content') {
+        const overflowX = el.scrollWidth > el.clientWidth + 0.5;
+        const overflowY = el.scrollHeight > el.clientHeight + 0.5;
+        if (direction === 'x' || direction === 'both') {
+          el.style.overflowX = overflowX ? 'auto' : '';
+        }
+        if (direction === 'y' || direction === 'both') {
+          el.style.overflowY = overflowY ? 'auto' : '';
+        }
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const leftBound = edgeOffset;
+      const rightBound = vw - edgeOffset;
+      const topBound = edgeOffset;
+      const bottomBound = vh - edgeOffset;
+      const overflowLeft = Math.max(0, leftBound - rect.left);
+      const overflowRight = Math.max(0, rect.right - rightBound);
+      const overflowTop = Math.max(0, topBound - rect.top);
+      const overflowBottom = Math.max(0, rect.bottom - bottomBound);
+      const totalOverflowX = overflowLeft + overflowRight;
+      const totalOverflowY = overflowTop + overflowBottom;
+      if (direction === 'x' || direction === 'both') {
+        if (totalOverflowX > 0) {
+          const targetWidth = rect.width - totalOverflowX;
+          if (targetWidth > 0) {
+            el.style.maxWidth = `${Math.floor(targetWidth)}px`;
+            el.style.overflowX = 'auto';
+          } else {
+            el.style.overflowX = 'auto';
+          }
+        } else {
+          el.style.maxWidth = prev.maxWidth;
+          el.style.overflowX = prev.overflowX;
+        }
+      }
+      if (direction === 'y' || direction === 'both') {
+        if (totalOverflowY > 0) {
+          const targetHeight = rect.height - totalOverflowY;
+          if (targetHeight > 0) {
+            el.style.maxHeight = `${Math.floor(targetHeight)}px`;
+            el.style.overflowY = 'auto';
+          } else {
+            el.style.overflowY = 'auto';
+          }
+        } else {
+          el.style.maxHeight = prev.maxHeight;
+          el.style.overflowY = prev.overflowY;
+        }
+      }
+    };
+    window.addEventListener('resize', apply, {
+      passive: true
+    });
+    requestAnimationFrame(apply);
+    return () => {
+      window.removeEventListener('resize', apply);
+      el.style.overflowX = prev.overflowX;
+      el.style.overflowY = prev.overflowY;
+      el.style.maxWidth = prev.maxWidth;
+      el.style.maxHeight = prev.maxHeight;
+    };
+  }, [ref, direction, mode, edgeOffset, requiresRecalc]);
+  return ref;
+}
+//# sourceMappingURL=OverflowScroll.js.map