@x15ventures/x15-ui-library 3.11.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogOverlay.js","names":["Object","defineProperty","exports","value","useDialogOverlay","default","_react","require","customCssClass","parentNode","id","overlayNode","useRef","createOverlay","useCallback","existingOverlay","document","getElementById","parentDomElement","body","newOverlay","createElement","classList","add","append","current","showEvent","CustomEvent","hideEvent","addEventListener","remove","showOverlay","dispatchEvent","hideOverlay","removeOverlay","useEffect","_default"],"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;;AAACA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,gBAAA,GAAAF,OAAA,CAAAG,OAAA;AAEb,IAAAC,MAAA,GAAAC,OAAA;AAcO,MAAMH,gBAAgB,GAAGA,CAC9B;EACEI,cAAc;EACdC,UAAU;EACVC,EAAE,GAAG;AACY,CAAC,KACjB;EACH,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAA2B,IAAI,CAAC;EAE1D,MAAMC,aAAa,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACtC,MAAMC,eAAe,GAAGC,QAAQ,CAACC,cAAc,CAACP,EAAE,CAAC;IACnD,MAAMQ,gBAAgB,GAAGT,UAAU,IAAIO,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,IAAIf,cAAc,EAAE;QAClBY,UAAU,CAACE,SAAS,CAACC,GAAG,CAACf,cAAc,CAAC;MAC1C;MACAY,UAAU,CAACV,EAAE,GAAGA,EAAE;MAClBQ,gBAAgB,CAACM,MAAM,CAACJ,UAAU,CAAC;MAEnCT,WAAW,CAACc,OAAO,GAAGL,UAA+B,CAAC,CAAC;IACzD,CAAC,MAAM;MACLT,WAAW,CAACc,OAAO,GAAGV,eAAoC,CAAC,CAAC;IAC9D;;IAEA;IACA,IAAIJ,WAAW,CAACc,OAAO,EAAE;MACvB,MAAMC,SAAS,GAAG,IAAIC,WAAW,CAAC,MAAM,CAAC;MACzC,MAAMC,SAAS,GAAG,IAAID,WAAW,CAAC,MAAM,CAAC;;MAEzC;MACAhB,WAAW,CAACc,OAAO,CAACI,gBAAgB,CAAC,MAAM,EAAE,MAAM;QACjDlB,WAAW,CAACc,OAAO,EAAEH,SAAS,CAACC,GAAG,CAAC,WAAW,CAAC;MACjD,CAAC,CAAC;MAEFZ,WAAW,CAACc,OAAO,CAACI,gBAAgB,CAAC,MAAM,EAAE,MAAM;QACjDlB,WAAW,CAACc,OAAO,EAAEH,SAAS,CAACQ,MAAM,CAAC,WAAW,CAAC;MACpD,CAAC,CAAC;;MAEF;MACAnB,WAAW,CAACc,OAAO,CAACM,WAAW,GAAG,MAAM;QACtCpB,WAAW,CAACc,OAAO,EAAEO,aAAa,CAACN,SAAS,CAAC;MAC/C,CAAC;MAEDf,WAAW,CAACc,OAAO,CAACQ,WAAW,GAAG,MAAM;QACtCtB,WAAW,CAACc,OAAO,EAAEO,aAAa,CAACJ,SAAS,CAAC;MAC/C,CAAC;IACH;IAEA,OAAOjB,WAAW,CAACc,OAAO;EAC5B,CAAC,EAAE,CAACjB,cAAc,EAAEE,EAAE,EAAED,UAAU,CAAC,CAAC;EAEpC,MAAMyB,aAAa,GAAG,IAAApB,kBAAW,EAAC,MAAM;IACtC,IAAIH,WAAW,CAACc,OAAO,EAAE;MACvBd,WAAW,CAACc,OAAO,CAACK,MAAM,CAAC,CAAC;MAC5BnB,WAAW,CAACc,OAAO,GAAG,IAAI;IAC5B;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAU,gBAAS,EAAC,MAAM,MAAM;IACpB;IACAD,aAAa,CAAC,CAAC;EACjB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,OAAO;IAAErB,aAAa;IAAEqB;EAAc,CAAC;AACzC,CAAC;AAAChC,OAAA,CAAAE,gBAAA,GAAAA,gBAAA;AAAA,IAAAgC,QAAA,GAAAlC,OAAA,CAAAG,OAAA,GAEaD,gBAAgB","ignoreList":[]}

package/dist/cjs/hooks/EdgeProximityDetect.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnEdgeProximityDetect = void 0;
+var _react = require("react");
+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 '';
+  };
+  (0, _react.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 {};
+};
+exports.useOnEdgeProximityDetect = useOnEdgeProximityDetect;
+//# sourceMappingURL=EdgeProximityDetect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeProximityDetect.js","names":["_react","require","useOnEdgeProximityDetect","triggerRef","wrapperRef","contentRef","requiresRecalc","xAxisOverride","left","width","clientWidth","yAxisOverride","top","height","clientHeight","useEffect","current","document","body","classList","add","getBoundingClientRect","xAxisOverrideCssClass","yAxisOverrideCssClass","remove","exports"],"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,IAAAA,MAAA,GAAAC,OAAA;AAUO,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;EAED,IAAAC,gBAAS,EAAC,MAAM;IACd,IACEX,UAAU,CAACY,OAAO,IACfX,UAAU,CAACW,OAAO,IAClBb,UAAU,CAACa,OAAO,IAClBC,QAAQ,IACRA,QAAQ,CAACC,IAAI,EAChB;MACAd,UAAU,CAACY,OAAO,CAACG,SAAS,CAACC,GAAG,CAAC,WAAW,CAAC;MAC7C,MAAM;QAAEV,WAAW;QAAEI;MAAa,CAAC,GAAGG,QAAQ,CAACC,IAAI;MACnD,MAAM;QACJT,KAAK;QAAEI,MAAM;QAAED,GAAG;QAAEJ;MACtB,CAAC,GAAGH,UAAU,CAACW,OAAO,CAACK,qBAAqB,CAAC,CAAC;;MAE9C;MACA,MAAMC,qBAAqB,GAAGf,aAAa,CAAC;QAAEC,IAAI;QAAEC,KAAK;QAAEC;MAAY,CAAC,CAAC;MACzE,IAAIY,qBAAqB,EAAE;QACzBlB,UAAU,CAACY,OAAO,CAACG,SAAS,CAACC,GAAG,CAACE,qBAAqB,CAAC;MACzD;MAEA,MAAMC,qBAAqB,GAAGZ,aAAa,CAAC;QAAEC,GAAG;QAAEC,MAAM;QAAEC;MAAa,CAAC,CAAC;MAC1E,IAAIS,qBAAqB,EAAE;QACzBnB,UAAU,CAACY,OAAO,CAACG,SAAS,CAACC,GAAG,CAACG,qBAAqB,CAAC;MACzD;MAEAnB,UAAU,CAACY,OAAO,CAACG,SAAS,CAACK,MAAM,CAAC,WAAW,CAAC;IAClD;EACF,CAAC,EAAE,CAACrB,UAAU,EAAEC,UAAU,EAAEC,UAAU,EAAEC,cAAc,CAAC,CAAC;EAExD,OAAO,CAAC,CAAC;AACX,CAAC;AAACmB,OAAA,CAAAvB,wBAAA,GAAAA,wBAAA","ignoreList":[]}

package/dist/cjs/hooks/EllipsisBookends.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEllipsisBookends = void 0;
+var _react = require("react");
+/* eslint-disable no-unused-vars */
+
+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 = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(() => {
+    const {
+      isOverflowing,
+      minLeftPos
+    } = getBoundaries();
+    const handleScroll = event => {
+      handleInnerEvent(event);
+    };
+    if (isOverflowing) {
+      innerHolder.current.addEventListener('click', handleScroll);
+    }
+    applyBookendCssClasses(isOverflowing, minLeftPos);
+  }, [outerWrapper, innerHolder]);
+  (0, _react.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
+  };
+};
+exports.useEllipsisBookends = useEllipsisBookends;
+//# sourceMappingURL=EllipsisBookends.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EllipsisBookends.js","names":["_react","require","useEllipsisBookends","outerWrapper","innerHolder","ellipsisBufferWidth","scrollIncrement","getBoundaries","useCallback","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","useEffect","document","removeEventListener","exports"],"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/cjs/hooks/FocusTrap.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusTrap = exports.default = void 0;
+var _react = require("react");
+/* eslint-disable no-unused-vars */
+
+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 = (0, _react.useRef)(null);
+  const lastFocusableElement = (0, _react.useRef)(null);
+  const KeyHandler = (0, _react.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]);
+  (0, _react.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]);
+};
+exports.useFocusTrap = useFocusTrap;
+var _default = exports.default = useFocusTrap;
+//# sourceMappingURL=FocusTrap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTrap.js","names":["_react","require","useFocusTrap","elementRef","elementHandler","focusableElementsSelector","firstFocusableElement","useRef","lastFocusableElement","KeyHandler","useCallback","event","activeElement","document","key","current","contains","shiftKey","preventDefault","focus","useEffect","focusableElements","Array","from","querySelectorAll","length","listener","addEventListener","removeEventListener","exports","_default","default"],"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":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAFA;;AAQO,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,GAAG,IAAAC,aAAM,EAAqB,IAAI,CAAC;EAC9D,MAAMC,oBAAoB,GAAG,IAAAD,aAAM,EAAqB,IAAI,CAAC;EAE7D,MAAME,UAAU,GAAG,IAAAC,kBAAW,EAC3BC,KAAoB,IAAK;IACxB,MAAM;MAAEC;IAAc,CAAC,GAAGC,QAAQ;IAElC,IAAIT,cAAc,IAAIO,KAAK,CAACG,GAAG,KAAK,QAAQ,EAAE;MAC5C,OAAOV,cAAc,CAACO,KAAK,CAAC;IAC9B;;IAEA;IACA;IACA,IAAIR,UAAU,CAACY,OAAO,IAAI,CAACZ,UAAU,CAACY,OAAO,CAACC,QAAQ,CAACJ,aAAa,CAAC,EAAE;MACrE,OAAOR,cAAc,CAACO,KAAK,CAAC;IAC9B;IAEA,IAAIA,KAAK,CAACG,GAAG,KAAK,KAAK,EAAE;MACvB,IAAIH,KAAK,CAACM,QAAQ,EAAE;QAClB;QACA,IAAIL,aAAa,KAAKN,qBAAqB,CAACS,OAAO,EAAE;UACnDJ,KAAK,CAACO,cAAc,CAAC,CAAC;UACtBV,oBAAoB,CAACO,OAAO,EAAEI,KAAK,CAAC,CAAC;QACvC;MACF,CAAC,MAAM,IAAIP,aAAa,KAAKJ,oBAAoB,CAACO,OAAO,EAAE;QACzD;QACAJ,KAAK,CAACO,cAAc,CAAC,CAAC;QACtBZ,qBAAqB,CAACS,OAAO,EAAEI,KAAK,CAAC,CAAC;MACxC;IACF;IAEA,OAAOR,KAAK;EACd,CAAC,EACD,CAACP,cAAc,EAAED,UAAU,CAC7B,CAAC;EAED,IAAAiB,gBAAS,EAAC,MAAM;IACd;IACA,IAAIjB,UAAU,CAACY,OAAO,EAAE;MACtB,MAAMM,iBAAiB,GAAGC,KAAK,CAACC,IAAI,CAClCpB,UAAU,CAACY,OAAO,CAACS,gBAAgB,CAACnB,yBAAyB,CAC/D,CAAkB;MAElB,IAAIgB,iBAAiB,CAACI,MAAM,GAAG,CAAC,EAAE;QAChCnB,qBAAqB,CAACS,OAAO,GAAGM,iBAAiB,CAAC,CAAC,CAAC;QACpDb,oBAAoB,CAACO,OAAO,GAAGM,iBAAiB,CAACA,iBAAiB,CAACI,MAAM,GAAG,CAAC,CAAC;MAChF;IACF;IAEA,MAAMC,QAAQ,GAAIf,KAAiB,IAAK;MACtCF,UAAU,CAACE,KAAK,CAAC;IACnB,CAAC;IAEDE,QAAQ,CAACc,gBAAgB,CAAC,SAAS,EAAED,QAAQ,CAAC;IAE9C,OAAO,MAAM;MACXb,QAAQ,CAACe,mBAAmB,CAAC,SAAS,EAAEF,QAAQ,CAAC;IACnD,CAAC;EACH,CAAC,EAAE,CAACvB,UAAU,EAAEE,yBAAyB,EAAEI,UAAU,CAAC,CAAC;AACzD,CAAC;AAACoB,OAAA,CAAA3B,YAAA,GAAAA,YAAA;AAAA,IAAA4B,QAAA,GAAAD,OAAA,CAAAE,OAAA,GAEa7B,YAAY","ignoreList":[]}

package/dist/cjs/hooks/FormAssistance.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormAssistance = exports.default = void 0;
+var _react = require("react");
+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 = (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    updateFormAlertMessage();
+  }, [updateFormAlertMessage]);
+  const handleInvalidForm = (0, _react.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 = (0, _react.useCallback)(event => {
+    const target = event.target;
+    if (target instanceof HTMLElement) {
+      target.classList.remove('invalid');
+    }
+  }, []);
+  (0, _react.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]);
+};
+exports.useFormAssistance = useFormAssistance;
+var _default = exports.default = useFormAssistance;
+//# sourceMappingURL=FormAssistance.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormAssistance.js","names":["_react","require","useFormAssistance","formElementRef","formAlertMessage","multiErrorsText","singleErrorText","updateFormAlertMessage","useCallback","wrappingElementRef","contentElementRef","wrappingElement","current","contentElement","invalidInputs","querySelectorAll","length","innerText","classList","add","innerHTML","remove","useEffect","handleInvalidForm","event","formElement","preventDefault","firstInvalidInput","focus","handleInput","target","HTMLElement","addEventListener","removeEventListener","exports","_default","default"],"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":"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","ignoreList":[]}

package/dist/cjs/hooks/OverflowScroll.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverflowScroll = useOverflowScroll;
+var _react = require("react");
+function useOverflowScroll({
+  direction = 'both',
+  mode = 'viewport',
+  edgeOffset = 0,
+  targetRef,
+  requiresRecalc = false
+} = {}) {
+  const localRef = (0, _react.useRef)(null);
+  const ref = targetRef ?? localRef;
+  (0, _react.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

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowScroll.js","names":["_react","require","useOverflowScroll","direction","mode","edgeOffset","targetRef","requiresRecalc","localRef","useRef","ref","useEffect","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":"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","ignoreList":[]}

package/dist/cjs/hooks/PopupKeys.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePopupKeys = void 0;
+var _react = require("react");
+/* eslint-disable no-unused-vars */
+
+const usePopupKeys = (elementRef, elementHandler) => {
+  const getFocusableElements = (0, _react.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 = (0, _react.useCallback)(event => {
+    if (elementHandler && event.key === 'Escape') {
+      return elementHandler(event);
+    }
+    return event;
+  }, [elementHandler]);
+  (0, _react.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 {};
+};
+exports.usePopupKeys = usePopupKeys;
+//# sourceMappingURL=PopupKeys.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupKeys.js","names":["_react","require","usePopupKeys","elementRef","elementHandler","getFocusableElements","useCallback","current","querySelectorAll","KeyHandler","event","key","useEffect","listener","contains","target","focusableElements","length","preventDefault","activeElement","document","currentIndex","Array","from","indexOf","focus","addEventListener","removeEventListener","exports"],"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":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAFA;;AAMO,MAAMC,YAAY,GAAGA,CAC1BC,UAAkC,EAClCC,cAA4C,KACzC;EACH,MAAMC,oBAAoB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC7C,IAAI,CAACH,UAAU,CAACI,OAAO,EAAE;MACvB,OAAO,EAAE;IACX;IAEA,OAAOJ,UAAU,CAACI,OAAO,CAACC,gBAAgB,CAAc;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK,CAAC;EACJ,CAAC,EAAE,CAACL,UAAU,CAAC,CAAC;;EAEhB;EACA,MAAMM,UAAU,GAAG,IAAAH,kBAAW,EAC3BI,KAAoB,IAAK;IACxB,IAAIN,cAAc,IAAIM,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;MAC5C,OAAOP,cAAc,CAACM,KAAK,CAAC;IAC9B;IACA,OAAOA,KAAK;EACd,CAAC,EACD,CAACN,cAAc,CACjB,CAAC;EAED,IAAAQ,gBAAS,EAAC,MAAM;IACd,MAAMC,QAAQ,GAAIH,KAAiB,IAAK;MACtC,IAAI,CAACP,UAAU,CAACI,OAAO,IAAIJ,UAAU,CAACI,OAAO,CAACO,QAAQ,CAACJ,KAAK,CAACK,MAAc,CAAC,EAAE;QAC5E,MAAMC,iBAAiB,GAAGX,oBAAoB,CAAC,CAAC;;QAEhD;QACA,IAAIK,KAAK,CAACC,GAAG,KAAK,WAAW,IAAID,KAAK,CAACC,GAAG,KAAK,SAAS,EAAE;UACxD,IAAIK,iBAAiB,CAACC,MAAM,KAAK,CAAC,EAAE;YAClC;UACF;UAEAP,KAAK,CAACQ,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,IAAIT,KAAK,CAACC,GAAG,KAAK,WAAW,EAAE;YAC7BU,YAAY,GAAG,CAACA,YAAY,GAAG,CAAC,IAAIL,iBAAiB,CAACC,MAAM;UAC9D,CAAC,MAAM,IAAIP,KAAK,CAACC,GAAG,KAAK,SAAS,EAAE;YAClCU,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;MACAhB,UAAU,CAACC,KAAK,CAAC;IACnB,CAAC;IAEDU,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,CAACV,UAAU,EAAEM,UAAU,CAAC,CAAC;EAE5B,OAAO,CAAC,CAAC;AACX,CAAC;AAACmB,OAAA,CAAA1B,YAAA,GAAAA,YAAA","ignoreList":[]}