@muraldevkit/ui-toolkit 4.67.0 → 4.68.0-dev-NFbt.1

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

@@ -0,0 +1,135 @@
+import { slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useRef, useMemo, useCallback, useLayoutEffect } from 'react';
+import { FrameDebounce } from '../../utils/frameDebounce/index.js';
+
+/**
+ * get coordinates of an element relative to window and listen for changes.
+ *
+ * @param element element of type T
+ * @param disabledScrollTracking boolean to disable scroll tracking.
+ * @param openState boolean to track if the element's open state changed.
+ * @returns coordinate object of element.
+ */
+var useCoordinate = function useCoordinate(element) {
+  var disabledScrollTracking = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var openState = arguments.length > 2 ? arguments[2] : undefined;
+  var _useState = useState({
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 0,
+      x: 0,
+      y: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    coordinate = _useState2[0],
+    setCoordinate = _useState2[1];
+  //create a single ref for us to store a FrameDebounce.
+  var intersectionObserverRef = useRef();
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollContainer = _useState4[0],
+    setScrollContainer = _useState4[1];
+
+  //getBoundingClientRect() causes a reflow plus other perf issues.
+  // its actually cheaper for the browser to fire intersection observers as we need.
+  var observer = useMemo(function () {
+    return new IntersectionObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          // The `entry.boundingClientRect` is where all the dimensions are stored
+          var bounds = entry.boundingClientRect.toJSON();
+          var offsetBounds = _objectSpread2(_objectSpread2({}, bounds), {}, {
+            left: bounds.left + window.scrollX,
+            top: bounds.top + window.scrollY
+          });
+          setCoordinate(offsetBounds);
+        }
+
+        // Disconnect the observer to stop from running in the background
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      observer.disconnect();
+    });
+  }, []);
+  var observeElementAndUpdateCoordinates = useCallback(function () {
+    var _intersectionObserver;
+    if (!element) {
+      return;
+    }
+    intersectionObserverRef === null || intersectionObserverRef === void 0 ? void 0 : (_intersectionObserver = intersectionObserverRef.current) === null || _intersectionObserver === void 0 ? void 0 : _intersectionObserver.instance.debounce(function () {
+      observer.observe(element);
+    });
+  }, [element, observer]);
+  useLayoutEffect(function () {
+    if (!element) {
+      return;
+    }
+
+    /**
+     * This block of code detects if the element is within a scrolling container so we can provide more exact calculations
+     * in the event that the element's position needs to be recalculated relative to the container's new scroll position.
+     *
+     * If we detect that the element is within a scrolling container, we store a reference to the scrollable element. That way
+     * we can assign event listeners to the scroll element so that we can recalculate the elements position based on the
+     * scroll value.
+     */
+    if (!disabledScrollTracking) {
+      var elementParent = element.parentElement;
+      while (elementParent && scrollContainer === null) {
+        var style = window.getComputedStyle(elementParent);
+        var overflowY = style.getPropertyValue('overflow-y');
+        if (overflowY === 'auto' || overflowY === 'scroll') {
+          setScrollContainer(elementParent);
+          break;
+        }
+        if (elementParent.tagName === 'BODY') {
+          break;
+        }
+        elementParent = elementParent.parentElement;
+      }
+    }
+
+    // observe real quick to setup initial state.
+    observer.observe(element);
+    if (!intersectionObserverRef.current) {
+      intersectionObserverRef.current = {
+        instance: new FrameDebounce()
+      };
+    }
+    window.addEventListener('resize', observeElementAndUpdateCoordinates);
+    if (scrollContainer) scrollContainer.addEventListener('scroll', observeElementAndUpdateCoordinates);
+    return function () {
+      var _intersectionObserver2;
+      intersectionObserverRef === null || intersectionObserverRef === void 0 ? void 0 : (_intersectionObserver2 = intersectionObserverRef.current) === null || _intersectionObserver2 === void 0 ? void 0 : _intersectionObserver2.instance.cancel();
+      window.removeEventListener('resize', observeElementAndUpdateCoordinates);
+      if (scrollContainer) scrollContainer.removeEventListener('scroll', observeElementAndUpdateCoordinates);
+    };
+  }, [element, observer, scrollContainer, disabledScrollTracking, openState, observeElementAndUpdateCoordinates]);
+
+  // This effect is responsible for observing the scroll container for changes in size.
+  useLayoutEffect(function () {
+    if (!scrollContainer) {
+      return;
+    }
+    var resizeObserver = new ResizeObserver(function () {
+      observeElementAndUpdateCoordinates();
+    });
+    resizeObserver.observe(scrollContainer);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [element, observeElementAndUpdateCoordinates, scrollContainer]);
+  return coordinate;
+};
+
+export { useCoordinate };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/hooks/useCoordinate/index.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState, useMemo, useCallback } from 'react';\nimport { FrameDebounce, FrameDebounceType } from '../../utils/frameDebounce';\n\n/**\n * get coordinates of an element relative to window and listen for changes.\n *\n * @param element element of type T\n * @param disabledScrollTracking boolean to disable scroll tracking.\n * @param openState boolean to track if the element's open state changed.\n * @returns coordinate object of element.\n */\nexport const useCoordinate = function useCoordinate<T extends HTMLElement | null>(\n\telement: T,\n\tdisabledScrollTracking = false,\n\topenState: boolean\n): {\n\tbottom: number;\n\theight: number;\n\tleft: number;\n\tright: number;\n\ttop: number;\n\twidth: number;\n\tx: number;\n\ty: number;\n} {\n\tconst [coordinate, setCoordinate] = useState({\n\t\tbottom: 0,\n\t\theight: 0,\n\t\tleft: 0,\n\t\tright: 0,\n\t\ttop: 0,\n\t\twidth: 0,\n\t\tx: 0,\n\t\ty: 0\n\t});\n\t//create a single ref for us to store a FrameDebounce.\n\tconst intersectionObserverRef = useRef<{\n\t\tinstance: FrameDebounceType;\n\t}>();\n\n\tconst [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(null);\n\n\t//getBoundingClientRect() causes a reflow plus other perf issues.\n\t// its actually cheaper for the browser to fire intersection observers as we need.\n\tconst observer = useMemo(() => {\n\t\treturn new IntersectionObserver((entries) => {\n\t\t\tfor (const entry of entries) {\n\t\t\t\t// The `entry.boundingClientRect` is where all the dimensions are stored\n\t\t\t\tconst bounds = entry.boundingClientRect.toJSON();\n\n\t\t\t\tconst offsetBounds = {\n\t\t\t\t\t...bounds,\n\t\t\t\t\tleft: bounds.left + window.scrollX,\n\t\t\t\t\ttop: bounds.top + window.scrollY\n\t\t\t\t};\n\n\t\t\t\tsetCoordinate(offsetBounds);\n\t\t\t}\n\n\t\t\t// Disconnect the observer to stop from running in the background\n\t\t\tobserver.disconnect();\n\t\t});\n\t}, []);\n\n\tconst observeElementAndUpdateCoordinates = useCallback(() => {\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\t\tintersectionObserverRef?.current?.instance.debounce(() => {\n\t\t\tobserver.observe(element);\n\t\t});\n\t}, [element, observer]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * This block of code detects if the element is within a scrolling container so we can provide more exact calculations\n\t\t * in the event that the element's position needs to be recalculated relative to the container's new scroll position.\n\t\t *\n\t\t * If we detect that the element is within a scrolling container, we store a reference to the scrollable element. That way\n\t\t * we can assign event listeners to the scroll element so that we can recalculate the elements position based on the\n\t\t * scroll value.\n\t\t */\n\t\tif (!disabledScrollTracking) {\n\t\t\tlet elementParent = element.parentElement;\n\n\t\t\twhile (elementParent && scrollContainer === null) {\n\t\t\t\tconst style = window.getComputedStyle(elementParent);\n\t\t\t\tconst overflowY = style.getPropertyValue('overflow-y');\n\n\t\t\t\tif (overflowY === 'auto' || overflowY === 'scroll') {\n\t\t\t\t\tsetScrollContainer(elementParent);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tif (elementParent.tagName === 'BODY') {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\telementParent = elementParent.parentElement;\n\t\t\t}\n\t\t}\n\n\t\t// observe real quick to setup initial state.\n\t\tobserver.observe(element);\n\n\t\tif (!intersectionObserverRef.current) {\n\t\t\tintersectionObserverRef.current = {\n\t\t\t\tinstance: new FrameDebounce()\n\t\t\t};\n\t\t}\n\n\t\twindow.addEventListener('resize', observeElementAndUpdateCoordinates);\n\t\tif (scrollContainer)\n\t\t\tscrollContainer.addEventListener('scroll', observeElementAndUpdateCoordinates);\n\n\t\treturn () => {\n\t\t\tintersectionObserverRef?.current?.instance.cancel();\n\n\t\t\twindow.removeEventListener('resize', observeElementAndUpdateCoordinates);\n\t\t\tif (scrollContainer)\n\t\t\t\tscrollContainer.removeEventListener('scroll', observeElementAndUpdateCoordinates);\n\t\t};\n\t}, [\n\t\telement,\n\t\tobserver,\n\t\tscrollContainer,\n\t\tdisabledScrollTracking,\n\t\topenState,\n\t\tobserveElementAndUpdateCoordinates\n\t]);\n\n\t// This effect is responsible for observing the scroll container for changes in size.\n\tuseLayoutEffect(() => {\n\t\tif (!scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tobserveElementAndUpdateCoordinates();\n\t\t});\n\n\t\tresizeObserver.observe(scrollContainer);\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [element, observeElementAndUpdateCoordinates, scrollContainer]);\n\n\treturn coordinate;\n};\n"],"names":["useCoordinate","element","disabledScrollTracking","arguments","length","undefined","openState","_useState","useState","bottom","height","left","right","top","width","x","y","_useState2","_slicedToArray","coordinate","setCoordinate","intersectionObserverRef","useRef","_useState3","_useState4","scrollContainer","setScrollContainer","observer","useMemo","IntersectionObserver","entries","_iterator","_createForOfIteratorHelper","_step","s","n","done","entry","value","bounds","boundingClientRect","toJSON","offsetBounds","_objectSpread","window","scrollX","scrollY","err","e","f","disconnect","observeElementAndUpdateCoordinates","useCallback","_intersectionObserver","current","instance","debounce","observe","useLayoutEffect","elementParent","parentElement","style","getComputedStyle","overflowY","getPropertyValue","tagName","FrameDebounce","addEventListener","_intersectionObserver2","cancel","removeEventListener","resizeObserver","ResizeObserver"],"mappings":"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"}

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

@@ -0,0 +1,64 @@
+import { slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+/**
+ * Represents the dimensions of an element's border box.
+ */
+
+/**
+ * Calculates the dimensions of an element using the ResizeObserver API.
+ *
+ * @template T - The type of the element or HTMLElement.
+ * @param ref - The ref object that references the element.
+ * @returns {ElementDimensions} - The dimensions of the element.
+ */
+function useElementDimensions(ref) {
+  var _React$useState = React.useState(function () {
+      return {
+        height: null,
+        width: null
+      };
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dimensions = _React$useState2[0],
+    setDimensions = _React$useState2[1];
+  React.useEffect(function () {
+    if (!ref.current) return;
+    var expectedWidths = new WeakMap();
+    var expectedHeights = new WeakMap();
+    var observer = new ResizeObserver(function (entries) {
+      requestAnimationFrame(function () {
+        var _iterator = _createForOfIteratorHelper(entries),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+            var expectedWidth = expectedWidths.get(entry.target);
+            var expectedHeight = expectedHeights.get(entry.target);
+            if (entry.borderBoxSize[0].inlineSize === expectedWidth && entry.borderBoxSize[0].blockSize === expectedHeight) continue;
+            expectedWidths.set(entry.target, entry.borderBoxSize[0].inlineSize);
+            expectedHeights.set(entry.target, entry.borderBoxSize[0].blockSize);
+            setDimensions({
+              height: entry.borderBoxSize[0].blockSize,
+              width: entry.borderBoxSize[0].inlineSize
+            });
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+    });
+    observer.observe(ref.current);
+    return function () {
+      return observer.disconnect();
+    };
+    // ref won't trigger a re-render, so it's safe to exclude it from the dependencies array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return dimensions;
+}
+
+export { useElementDimensions };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/hooks/useElementDimensions/index.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Represents the dimensions of an element's border box.\n */\nexport type ElementDimensions = {\n\theight: number | null;\n\twidth: number | null;\n};\n\n/**\n * Calculates the dimensions of an element using the ResizeObserver API.\n *\n * @template T - The type of the element or HTMLElement.\n * @param ref - The ref object that references the element.\n * @returns {ElementDimensions} - The dimensions of the element.\n */\nexport function useElementDimensions<T>(\n\tref: React.RefObject<T extends HTMLElement ? T : HTMLElement>\n): ElementDimensions {\n\tconst [dimensions, setDimensions] = React.useState<ElementDimensions>(() => ({\n\t\theight: null,\n\t\twidth: null\n\t}));\n\n\tReact.useEffect(() => {\n\t\tif(!ref.current) return;\n\n\t\tconst expectedWidths = new WeakMap();\n\t\tconst expectedHeights = new WeakMap();\n\n\t\tconst observer = new ResizeObserver((entries) => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tfor (const entry of entries) {\n\t\t\t\t\tconst expectedWidth = expectedWidths.get(entry.target);\n\t\t\t\t\tconst expectedHeight = expectedHeights.get(entry.target);\n\t\t\t\t\tif(entry.borderBoxSize[0].inlineSize === expectedWidth &&\n\t\t\t\t\t\tentry.borderBoxSize[0].blockSize === expectedHeight) continue;\n\t\t\t\t\t\n\t\t\t\t\texpectedWidths.set(entry.target, entry.borderBoxSize[0].inlineSize);\n\t\t\t\t\texpectedHeights.set(entry.target, entry.borderBoxSize[0].blockSize);\n\t\t\t\t\tsetDimensions({\n\t\t\t\t\t\theight: entry.borderBoxSize[0].blockSize, \n\t\t\t\t\t\twidth: entry.borderBoxSize[0].inlineSize\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tobserver.observe(ref.current);\n\n\t\treturn () => observer.disconnect();\n\t// ref won't trigger a re-render, so it's safe to exclude it from the dependencies array\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n  \n\treturn dimensions;\n}\n"],"names":["useElementDimensions","ref","_React$useState","React","useState","height","width","_React$useState2","_slicedToArray","dimensions","setDimensions","useEffect","current","expectedWidths","WeakMap","expectedHeights","observer","ResizeObserver","entries","requestAnimationFrame","_iterator","_createForOfIteratorHelper","_step","s","n","done","entry","value","expectedWidth","get","target","expectedHeight","borderBoxSize","inlineSize","blockSize","set","err","e","f","observe","disconnect"],"mappings":";;;AAEA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,oBAAoBA,CACnCC,GAA6D,EACzC;AACpB,EAAA,IAAAC,eAAA,GAAoCC,KAAK,CAACC,QAAQ,CAAoB,YAAA;MAAA,OAAO;AAC5EC,QAAAA,MAAM,EAAE,IAAI;AACZC,QAAAA,KAAK,EAAE;OACP;AAAA,IAAA,CAAC,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAN,eAAA,EAAA,CAAA,CAAA;AAHIO,IAAAA,UAAU,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,aAAa,GAAAH,gBAAA,CAAA,CAAA,CAAA;EAKhCJ,KAAK,CAACQ,SAAS,CAAC,YAAM;AACrB,IAAA,IAAG,CAACV,GAAG,CAACW,OAAO,EAAE;AAEjB,IAAA,IAAMC,cAAc,GAAG,IAAIC,OAAO,EAAE;AACpC,IAAA,IAAMC,eAAe,GAAG,IAAID,OAAO,EAAE;AAErC,IAAA,IAAME,QAAQ,GAAG,IAAIC,cAAc,CAAC,UAACC,OAAO,EAAK;AAChDC,MAAAA,qBAAqB,CAAC,YAAM;AAAA,QAAA,IAAAC,SAAA,GAAAC,0BAAA,CACPH,OAAO,CAAA;UAAAI,KAAA;AAAA,QAAA,IAAA;UAA3B,KAAAF,SAAA,CAAAG,CAAA,EAAA,EAAA,CAAA,CAAAD,KAAA,GAAAF,SAAA,CAAAI,CAAA,EAAA,EAAAC,IAAA,GAA6B;AAAA,YAAA,IAAlBC,KAAK,GAAAJ,KAAA,CAAAK,KAAA;YACf,IAAMC,aAAa,GAAGf,cAAc,CAACgB,GAAG,CAACH,KAAK,CAACI,MAAM,CAAC;YACtD,IAAMC,cAAc,GAAGhB,eAAe,CAACc,GAAG,CAACH,KAAK,CAACI,MAAM,CAAC;YACxD,IAAGJ,KAAK,CAACM,aAAa,CAAC,CAAC,CAAC,CAACC,UAAU,KAAKL,aAAa,IACrDF,KAAK,CAACM,aAAa,CAAC,CAAC,CAAC,CAACE,SAAS,KAAKH,cAAc,EAAE;AAEtDlB,YAAAA,cAAc,CAACsB,GAAG,CAACT,KAAK,CAACI,MAAM,EAAEJ,KAAK,CAACM,aAAa,CAAC,CAAC,CAAC,CAACC,UAAU,CAAC;AACnElB,YAAAA,eAAe,CAACoB,GAAG,CAACT,KAAK,CAACI,MAAM,EAAEJ,KAAK,CAACM,aAAa,CAAC,CAAC,CAAC,CAACE,SAAS,CAAC;AACnExB,YAAAA,aAAa,CAAC;cACbL,MAAM,EAAEqB,KAAK,CAACM,aAAa,CAAC,CAAC,CAAC,CAACE,SAAS;AACxC5B,cAAAA,KAAK,EAAEoB,KAAK,CAACM,aAAa,CAAC,CAAC,CAAC,CAACC;AAC/B,aAAC,CAAC;AACH,UAAA;AAAC,QAAA,CAAA,CAAA,OAAAG,GAAA,EAAA;UAAAhB,SAAA,CAAAiB,CAAA,CAAAD,GAAA,CAAA;AAAA,QAAA,CAAA,SAAA;AAAAhB,UAAAA,SAAA,CAAAkB,CAAA,EAAA;AAAA,QAAA;AACF,MAAA,CAAC,CAAC;AACH,IAAA,CAAC,CAAC;AAEFtB,IAAAA,QAAQ,CAACuB,OAAO,CAACtC,GAAG,CAACW,OAAO,CAAC;IAE7B,OAAO,YAAA;AAAA,MAAA,OAAMI,QAAQ,CAACwB,UAAU,EAAE;AAAA,IAAA,CAAA;AACnC;AACA;EACA,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,OAAO/B,UAAU;AAClB;;;;"}

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

@@ -0,0 +1,56 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import { FOCUSABLE_ELEMENTS_SELECTOR } from '../../utils/trapFocus/index.js';
+
+/**
+ * Tracks whether the subtree of the given ref contains at least one element
+ * that participates in sequential focus navigation.
+ *
+ * Used by scrollable wrapper components (`MrlPanel`, `MrlModalContent`) to
+ * decide whether the wrapper itself needs `tabindex="0"`. Per ACT rule
+ * 0ssw9k (https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/) a
+ * scrollable region passes WCAG 2.1.1 Keyboard either by being focusable
+ * itself or by having a focusable descendant. When focusable descendants
+ * already exist, adding `tabindex="0"` to the wrapper produces a
+ * "meaningless tab stop" finding from manual auditors.
+ *
+ * The default return value is `true` so that, on the very first render
+ * (before the layout effect has measured the DOM), components err on the
+ * side of NOT adding a tab stop. The MutationObserver flips it to `false`
+ * synchronously inside the layout effect if the wrapper is genuinely
+ * empty of focusable descendants.
+ *
+ * @param {React.RefObject<HTMLElement | null>} ref - Ref pointing at the container whose subtree should be observed.
+ * @returns {boolean} `true` while the subtree contains at least one focusable element, `false` otherwise.
+ */
+function useHasFocusableDescendant(ref) {
+  var _React$useState = React.useState(true),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    hasFocusableDescendant = _React$useState2[0],
+    setHasFocusableDescendant = _React$useState2[1];
+  React.useLayoutEffect(function () {
+    var element = ref.current;
+    if (!element) return;
+    var measure = function measure() {
+      var next = element.querySelector(FOCUSABLE_ELEMENTS_SELECTOR) !== null;
+      setHasFocusableDescendant(function (prev) {
+        return prev === next ? prev : next;
+      });
+    };
+    measure();
+    var observer = new MutationObserver(measure);
+    observer.observe(element, {
+      attributeFilter: ['aria-disabled', 'disabled', 'hidden', 'tabindex', 'type'],
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, [ref]);
+  return hasFocusableDescendant;
+}
+
+export { useHasFocusableDescendant };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/hooks/useHasFocusableDescendant/index.ts"],"sourcesContent":["import * as React from 'react';\nimport { FOCUSABLE_ELEMENTS_SELECTOR } from '../../utils/trapFocus';\n\n/**\n * Tracks whether the subtree of the given ref contains at least one element\n * that participates in sequential focus navigation.\n *\n * Used by scrollable wrapper components (`MrlPanel`, `MrlModalContent`) to\n * decide whether the wrapper itself needs `tabindex=\"0\"`. Per ACT rule\n * 0ssw9k (https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/) a\n * scrollable region passes WCAG 2.1.1 Keyboard either by being focusable\n * itself or by having a focusable descendant. When focusable descendants\n * already exist, adding `tabindex=\"0\"` to the wrapper produces a\n * \"meaningless tab stop\" finding from manual auditors.\n *\n * The default return value is `true` so that, on the very first render\n * (before the layout effect has measured the DOM), components err on the\n * side of NOT adding a tab stop. The MutationObserver flips it to `false`\n * synchronously inside the layout effect if the wrapper is genuinely\n * empty of focusable descendants.\n *\n * @param {React.RefObject<HTMLElement | null>} ref - Ref pointing at the container whose subtree should be observed.\n * @returns {boolean} `true` while the subtree contains at least one focusable element, `false` otherwise.\n */\nexport function useHasFocusableDescendant(ref: React.RefObject<HTMLElement | null>): boolean {\n\tconst [hasFocusableDescendant, setHasFocusableDescendant] = React.useState(true);\n\n\tReact.useLayoutEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) return;\n\n\t\tconst measure = () => {\n\t\t\tconst next = element.querySelector(FOCUSABLE_ELEMENTS_SELECTOR) !== null;\n\t\t\tsetHasFocusableDescendant((prev) => (prev === next ? prev : next));\n\t\t};\n\n\t\tmeasure();\n\n\t\tconst observer = new MutationObserver(measure);\n\t\tobserver.observe(element, {\n\t\t\tattributeFilter: ['aria-disabled', 'disabled', 'hidden', 'tabindex', 'type'],\n\t\t\tattributes: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t});\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ref]);\n\n\treturn hasFocusableDescendant;\n}\n"],"names":["useHasFocusableDescendant","ref","_React$useState","React","useState","_React$useState2","_slicedToArray","hasFocusableDescendant","setHasFocusableDescendant","useLayoutEffect","element","current","measure","next","querySelector","FOCUSABLE_ELEMENTS_SELECTOR","prev","observer","MutationObserver","observe","attributeFilter","attributes","childList","subtree","disconnect"],"mappings":";;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,yBAAyBA,CAACC,GAAwC,EAAW;AAC5F,EAAA,IAAAC,eAAA,GAA4DC,KAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAzEK,IAAAA,sBAAsB,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,yBAAyB,GAAAH,gBAAA,CAAA,CAAA,CAAA;EAExDF,KAAK,CAACM,eAAe,CAAC,YAAM;AAC3B,IAAA,IAAMC,OAAO,GAAGT,GAAG,CAACU,OAAO;IAC3B,IAAI,CAACD,OAAO,EAAE;AAEd,IAAA,IAAME,OAAO,GAAG,SAAVA,OAAOA,GAAS;MACrB,IAAMC,IAAI,GAAGH,OAAO,CAACI,aAAa,CAACC,2BAA2B,CAAC,KAAK,IAAI;MACxEP,yBAAyB,CAAC,UAACQ,IAAI,EAAA;AAAA,QAAA,OAAMA,IAAI,KAAKH,IAAI,GAAGG,IAAI,GAAGH,IAAI;AAAA,MAAA,CAAC,CAAC;IACnE,CAAC;AAEDD,IAAAA,OAAO,EAAE;AAET,IAAA,IAAMK,QAAQ,GAAG,IAAIC,gBAAgB,CAACN,OAAO,CAAC;AAC9CK,IAAAA,QAAQ,CAACE,OAAO,CAACT,OAAO,EAAE;MACzBU,eAAe,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC;AAC5EC,MAAAA,UAAU,EAAE,IAAI;AAChBC,MAAAA,SAAS,EAAE,IAAI;AACfC,MAAAA,OAAO,EAAE;AACV,KAAC,CAAC;AAEF,IAAA,OAAO,YAAM;MACZN,QAAQ,CAACO,UAAU,EAAE;IACtB,CAAC;AACF,EAAA,CAAC,EAAE,CAACvB,GAAG,CAAC,CAAC;AAET,EAAA,OAAOM,sBAAsB;AAC9B;;;;"}

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

@@ -0,0 +1,62 @@
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+/**
+ * Return type for the `useScrollbarInfo` hook.
+ */
+
+/**
+ * Custom hook that provides information about the presence and dimensions of vertical and horizontal scrollbars
+ * in a scrollable container.
+ *
+ * @returns {UseScrollbarInfoReturn} Returns the scrollbar information and a ref to attach to the scrollable container
+ */
+function useScrollbarInfo() {
+  var _React$useState = React.useState({
+      hasHorizontalScrollbar: false,
+      hasVerticalScrollbar: false,
+      horizontalScrollbarHeight: 0,
+      verticalScrollbarWidth: 0
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    scrollbarInfo = _React$useState2[0],
+    setScrollbarInfo = _React$useState2[1];
+  var scrollableContainerRef = React.useRef(null);
+  React.useLayoutEffect(function () {
+    if (!scrollableContainerRef.current) return;
+    var observer = new ResizeObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      if (!entry) return;
+      var target = entry.target;
+
+      // Detects if scrollbars exist (works for both classic and overlay scrollbars)
+      // Vertical scrollbar exists when content height exceeds visible height
+      var hasVerticalScrollbar = target.scrollHeight > target.clientHeight;
+      // Horizontal scrollbar exists when content width exceeds visible width
+      var hasHorizontalScrollbar = target.scrollWidth > target.clientWidth;
+
+      // Gets dimensions only for classic scrollbars that take up layout space
+      // Vertical scrollbar width: difference between offsetWidth and clientWidth
+      var verticalScrollbarWidth = target.offsetWidth - target.clientWidth;
+      // Horizontal scrollbar height: difference between offsetHeight and clientHeight
+      var horizontalScrollbarHeight = target.offsetHeight - target.clientHeight;
+      setScrollbarInfo({
+        hasHorizontalScrollbar: hasHorizontalScrollbar,
+        hasVerticalScrollbar: hasVerticalScrollbar,
+        horizontalScrollbarHeight: horizontalScrollbarHeight,
+        verticalScrollbarWidth: verticalScrollbarWidth
+      });
+    });
+    observer.observe(scrollableContainerRef.current);
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return _objectSpread2(_objectSpread2({}, scrollbarInfo), {}, {
+    scrollableContainerRef: scrollableContainerRef
+  });
+}
+
+export { useScrollbarInfo };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/hooks/useScrollbarInfo/index.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ScrollbarInfo = {\n\t/** Indicates if a horizontal scrollbar is present */\n\thasHorizontalScrollbar: boolean;\n\t/** Indicates if a vertical scrollbar is present */\n\thasVerticalScrollbar: boolean;\n\t/** Width in pixels of the vertical scrollbar (0 for overlay scrollbars) */\n\tverticalScrollbarWidth: number;\n\t/** Height in pixels of the horizontal scrollbar (0 for overlay scrollbars) */\n\thorizontalScrollbarHeight: number;\n};\n\n/**\n * Return type for the `useScrollbarInfo` hook.\n */\nexport type UseScrollbarInfoReturn<T extends HTMLElement> = ScrollbarInfo & {\n\tscrollableContainerRef: React.MutableRefObject<T | null>;\n};\n\n/**\n * Custom hook that provides information about the presence and dimensions of vertical and horizontal scrollbars\n * in a scrollable container.\n *\n * @returns {UseScrollbarInfoReturn} Returns the scrollbar information and a ref to attach to the scrollable container\n */\nexport function useScrollbarInfo<T extends HTMLElement>(): UseScrollbarInfoReturn<T> {\n\tconst [scrollbarInfo, setScrollbarInfo] = React.useState<ScrollbarInfo>({\n\t\thasHorizontalScrollbar: false,\n\t\thasVerticalScrollbar: false,\n\t\thorizontalScrollbarHeight: 0,\n\t\tverticalScrollbarWidth: 0\n\t});\n\n\tconst scrollableContainerRef = React.useRef<T | null>(null);\n\n\tReact.useLayoutEffect(() => {\n\t\tif (!scrollableContainerRef.current) return;\n\n\t\tconst observer = new ResizeObserver(([entry]) => {\n\t\t\tif (!entry) return;\n\t\t\tconst target = entry.target as HTMLElement;\n\n\t\t\t// Detects if scrollbars exist (works for both classic and overlay scrollbars)\n\t\t\t// Vertical scrollbar exists when content height exceeds visible height\n\t\t\tconst hasVerticalScrollbar = target.scrollHeight > target.clientHeight;\n\t\t\t// Horizontal scrollbar exists when content width exceeds visible width\n\t\t\tconst hasHorizontalScrollbar = target.scrollWidth > target.clientWidth;\n\n\t\t\t// Gets dimensions only for classic scrollbars that take up layout space\n\t\t\t// Vertical scrollbar width: difference between offsetWidth and clientWidth\n\t\t\tconst verticalScrollbarWidth = target.offsetWidth - target.clientWidth;\n\t\t\t// Horizontal scrollbar height: difference between offsetHeight and clientHeight\n\t\t\tconst horizontalScrollbarHeight = target.offsetHeight - target.clientHeight;\n\n\t\t\tsetScrollbarInfo({\n\t\t\t\thasHorizontalScrollbar,\n\t\t\t\thasVerticalScrollbar,\n\t\t\t\thorizontalScrollbarHeight,\n\t\t\t\tverticalScrollbarWidth\n\t\t\t});\n\t\t});\n\n\t\tobserver.observe(scrollableContainerRef.current);\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, []);\n\n\treturn {\n\t\t...scrollbarInfo,\n\t\tscrollableContainerRef\n\t};\n}\n"],"names":["useScrollbarInfo","_React$useState","React","useState","hasHorizontalScrollbar","hasVerticalScrollbar","horizontalScrollbarHeight","verticalScrollbarWidth","_React$useState2","_slicedToArray","scrollbarInfo","setScrollbarInfo","scrollableContainerRef","useRef","useLayoutEffect","current","observer","ResizeObserver","_ref","_ref2","entry","target","scrollHeight","clientHeight","scrollWidth","clientWidth","offsetWidth","offsetHeight","observe","disconnect","_objectSpread"],"mappings":";;;AAaA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,gBAAgBA,GAAqD;AACpF,EAAA,IAAAC,eAAA,GAA0CC,KAAK,CAACC,QAAQ,CAAgB;AACvEC,MAAAA,sBAAsB,EAAE,KAAK;AAC7BC,MAAAA,oBAAoB,EAAE,KAAK;AAC3BC,MAAAA,yBAAyB,EAAE,CAAC;AAC5BC,MAAAA,sBAAsB,EAAE;AACzB,KAAC,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAR,eAAA,EAAA,CAAA,CAAA;AALKS,IAAAA,aAAa,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,gBAAgB,GAAAH,gBAAA,CAAA,CAAA,CAAA;AAOtC,EAAA,IAAMI,sBAAsB,GAAGV,KAAK,CAACW,MAAM,CAAW,IAAI,CAAC;EAE3DX,KAAK,CAACY,eAAe,CAAC,YAAM;AAC3B,IAAA,IAAI,CAACF,sBAAsB,CAACG,OAAO,EAAE;AAErC,IAAA,IAAMC,QAAQ,GAAG,IAAIC,cAAc,CAAC,UAAAC,IAAA,EAAa;AAAA,MAAA,IAAAC,KAAA,GAAAV,cAAA,CAAAS,IAAA,EAAA,CAAA,CAAA;AAAXE,QAAAA,KAAK,GAAAD,KAAA,CAAA,CAAA,CAAA;MAC1C,IAAI,CAACC,KAAK,EAAE;AACZ,MAAA,IAAMC,MAAM,GAAGD,KAAK,CAACC,MAAqB;;AAE1C;AACA;MACA,IAAMhB,oBAAoB,GAAGgB,MAAM,CAACC,YAAY,GAAGD,MAAM,CAACE,YAAY;AACtE;MACA,IAAMnB,sBAAsB,GAAGiB,MAAM,CAACG,WAAW,GAAGH,MAAM,CAACI,WAAW;;AAEtE;AACA;MACA,IAAMlB,sBAAsB,GAAGc,MAAM,CAACK,WAAW,GAAGL,MAAM,CAACI,WAAW;AACtE;MACA,IAAMnB,yBAAyB,GAAGe,MAAM,CAACM,YAAY,GAAGN,MAAM,CAACE,YAAY;AAE3EZ,MAAAA,gBAAgB,CAAC;AAChBP,QAAAA,sBAAsB,EAAtBA,sBAAsB;AACtBC,QAAAA,oBAAoB,EAApBA,oBAAoB;AACpBC,QAAAA,yBAAyB,EAAzBA,yBAAyB;AACzBC,QAAAA,sBAAsB,EAAtBA;AACD,OAAC,CAAC;AACH,IAAA,CAAC,CAAC;AAEFS,IAAAA,QAAQ,CAACY,OAAO,CAAChB,sBAAsB,CAACG,OAAO,CAAC;AAEhD,IAAA,OAAO,YAAM;MACZC,QAAQ,CAACa,UAAU,EAAE;IACtB,CAAC;EACF,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,OAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACIpB,aAAa,CAAA,EAAA,EAAA,EAAA;AAChBE,IAAAA,sBAAsB,EAAtBA;AAAsB,GAAA,CAAA;AAExB;;;;"}

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

@@ -0,0 +1,150 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
+import { getPosition } from './utilities.js';
+import debounce from 'lodash.debounce';
+
+/**
+ * useTriggerPosition hook.
+ *
+ * Calculates the position of a menu element based on the alignment settings relative to a trigger element.
+ *
+ * @param triggerRef - Reference to the DOM element that triggers the menu.
+ * @param elementRef - Reference to the DOM element that is the menu.
+ * @param menuAlign - The alignment configuration of the menu.
+ * @param isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.
+ * @param menuOffset - The offset of the menu from the trigger element.
+ * @param disable - Whether to disable the hook.
+ * @param disableFlipping - Whether to disable flipping logic when the menu overflows the screen.
+ * @returns {Position} The calculated position of the menu element.
+ */
+var useTriggerPosition = function useTriggerPosition(triggerRef, elementRef, menuAlign) {
+  var isElementVisible = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  var menuOffset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 10;
+  var disable = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var disableFlipping = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var offset = menuOffset;
+
+  // Holds the current calculated position of the menu
+  var _useState = useState({
+      flipped: false,
+      left: 0,
+      top: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuPosition = _useState2[0],
+    setMenuPosition = _useState2[1];
+
+  // Memoize alignment so it only recalculates when specific props change
+  var alignment = useMemo(function () {
+    return {
+      align: menuAlign.align,
+      customPosition: menuAlign.customPosition,
+      position: menuAlign.position
+    };
+  }, [menuAlign.align, menuAlign.position, menuAlign.customPosition]);
+
+  /**
+   * Calculates and updates the menu position relative to the trigger.
+   * Uses requestAnimationFrame to ensure layout is stable before measuring.
+   */
+  var updatePosition = useCallback(function () {
+    if (!elementRef.current || !isElementVisible) return;
+    requestAnimationFrame(function () {
+      var _triggerRef$current, _elementRef$current;
+      var triggerRect = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.getBoundingClientRect();
+      var elementRect = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
+
+      // Don't update if the element is not visible/rendered
+      if (!elementRect || elementRect.height === 0 || elementRect.width === 0) return;
+      var newPosition = getPosition(alignment, offset, elementRect, triggerRect, disableFlipping);
+
+      // Only update state if the position has changed
+      setMenuPosition(function (prevPosition) {
+        if (prevPosition.left !== newPosition.left || prevPosition.top !== newPosition.top) {
+          return newPosition;
+        }
+        return prevPosition;
+      });
+    });
+  }, [alignment, elementRef, isElementVisible, offset, triggerRef, disableFlipping]);
+
+  /**
+   * Debounced version of the updatePosition function used for scroll and resize events.
+   * 5ms debounce gives a balance between performance and responsiveness.
+   */
+  var debouncedUpdatePosition = useMemo(function () {
+    return debounce(updatePosition, 5);
+  }, [updatePosition]);
+  useEffect(function () {
+    if (disable) return;
+    var currentElement = elementRef.current;
+
+    /**
+     * We need to debounce the resize observer to prevent "resize loops"
+     * There are instances where the ResizeObserver will trigger a resize event
+     * before the browser has painted, which causes a loop of resize events
+     * and can throw errors or performance issues.
+     *
+     * The observers are purposefully using a different debounce than the event listeners.
+     * Observers need to be more aggressively debounced to prevent loops,
+     * while event listeners (resize/scroll) should update positioning more responsively.
+     */
+    var resizeObserver = new ResizeObserver(debounce(updatePosition));
+    var mutationObserver = new MutationObserver(debounce(updatePosition));
+
+    // Observe changes in size and style/className
+    if (currentElement) {
+      resizeObserver.observe(currentElement);
+      mutationObserver.observe(currentElement, {
+        attributeFilter: ['style', 'class'],
+        attributes: true
+      });
+    }
+
+    // Add listeners on open to respond to browser resizing and scrolling
+    if (isElementVisible) {
+      updatePosition();
+      window.addEventListener('resize', debouncedUpdatePosition);
+      window.addEventListener('scroll', debouncedUpdatePosition);
+    }
+
+    // Cleanup observers and listeners on unmount or re-render
+    return function () {
+      if (currentElement) {
+        resizeObserver.unobserve(currentElement);
+        mutationObserver.disconnect();
+      }
+      window.removeEventListener('resize', debouncedUpdatePosition);
+      window.removeEventListener('scroll', debouncedUpdatePosition);
+    };
+  }, [disable, triggerRef, elementRef, alignment, offset, isElementVisible, updatePosition, debouncedUpdatePosition]);
+
+  /**
+   * This effect handles an edge case where the menu is rendered,
+   * but its size is not immediately available in the first frame.
+   * A short timeout ensures we recalculate the position once layout stabilizes.
+   */
+  useEffect(function () {
+    if (!disable && isElementVisible) {
+      var timeoutId = setTimeout(updatePosition, 10);
+      return function () {
+        return clearTimeout(timeoutId);
+      };
+    }
+  }, [isElementVisible, disable, updatePosition]);
+
+  /**
+   * useLayoutEffect ensures the position is recalculated during the layout phase,
+   * just after DOM mutations but before the browser paints.
+   */
+  useLayoutEffect(function () {
+    if (!disable && isElementVisible && elementRef.current && triggerRef !== null && triggerRef !== void 0 && triggerRef.current) {
+      updatePosition();
+      requestAnimationFrame(updatePosition);
+    }
+  }, [isElementVisible, updatePosition, disable, elementRef, triggerRef]);
+  return menuPosition;
+};
+
+export { useTriggerPosition };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/hooks/useTriggerPosition/index.tsx"],"sourcesContent":["import { useMemo, useState, RefObject, useEffect, useCallback, useLayoutEffect } from 'react';\nimport { Alignment, Position } from './constants';\nimport { getPosition } from './utilities';\nimport debounce from 'lodash.debounce';\n\n/**\n * useTriggerPosition hook.\n *\n * Calculates the position of a menu element based on the alignment settings relative to a trigger element.\n *\n * @param triggerRef - Reference to the DOM element that triggers the menu.\n * @param elementRef - Reference to the DOM element that is the menu.\n * @param menuAlign - The alignment configuration of the menu.\n * @param isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.\n * @param menuOffset - The offset of the menu from the trigger element.\n * @param disable - Whether to disable the hook.\n * @param disableFlipping - Whether to disable flipping logic when the menu overflows the screen.\n * @returns {Position} The calculated position of the menu element.\n */\nexport const useTriggerPosition = (\n\ttriggerRef: RefObject<HTMLElement> | undefined,\n\telementRef: RefObject<HTMLElement>,\n\tmenuAlign: Alignment,\n\tisElementVisible: boolean = true,\n\tmenuOffset: number = 10,\n\tdisable = false,\n\tdisableFlipping = false\n): Position => {\n\tconst offset = menuOffset;\n\n\t// Holds the current calculated position of the menu\n\tconst [menuPosition, setMenuPosition] = useState<Position>({ flipped: false, left: 0, top: 0 });\n\n\t// Memoize alignment so it only recalculates when specific props change\n\tconst alignment = useMemo(\n\t\t() => ({\n\t\t\talign: menuAlign.align,\n\t\t\tcustomPosition: menuAlign.customPosition,\n\t\t\tposition: menuAlign.position\n\t\t}),\n\t\t[menuAlign.align, menuAlign.position, menuAlign.customPosition]\n\t);\n\n\t/**\n\t * Calculates and updates the menu position relative to the trigger.\n\t * Uses requestAnimationFrame to ensure layout is stable before measuring.\n\t */\n\tconst updatePosition = useCallback(() => {\n\t\tif (!elementRef.current || !isElementVisible) return;\n\n\t\trequestAnimationFrame(() => {\n\t\t\tconst triggerRect = triggerRef?.current?.getBoundingClientRect();\n\t\t\tconst elementRect = elementRef.current?.getBoundingClientRect();\n\n\t\t\t// Don't update if the element is not visible/rendered\n\t\t\tif (!elementRect || elementRect.height === 0 || elementRect.width === 0) return;\n\n\t\t\tconst newPosition = getPosition(alignment, offset, elementRect, triggerRect, disableFlipping);\n\n\t\t\t// Only update state if the position has changed\n\t\t\tsetMenuPosition((prevPosition) => {\n\t\t\t\tif (prevPosition.left !== newPosition.left || prevPosition.top !== newPosition.top) {\n\t\t\t\t\treturn newPosition;\n\t\t\t\t}\n\t\t\t\treturn prevPosition;\n\t\t\t});\n\t\t});\n\t}, [alignment, elementRef, isElementVisible, offset, triggerRef, disableFlipping]);\n\n\t/**\n\t * Debounced version of the updatePosition function used for scroll and resize events.\n\t * 5ms debounce gives a balance between performance and responsiveness.\n\t */\n\tconst debouncedUpdatePosition = useMemo(() => debounce(updatePosition, 5), [updatePosition]);\n\n\tuseEffect(() => {\n\t\tif (disable) return;\n\n\t\tconst currentElement = elementRef.current;\n\n\t\t/**\n\t\t * We need to debounce the resize observer to prevent \"resize loops\"\n\t\t * There are instances where the ResizeObserver will trigger a resize event\n\t\t * before the browser has painted, which causes a loop of resize events\n\t\t * and can throw errors or performance issues.\n\t\t *\n\t\t * The observers are purposefully using a different debounce than the event listeners.\n\t\t * Observers need to be more aggressively debounced to prevent loops,\n\t\t * while event listeners (resize/scroll) should update positioning more responsively.\n\t\t */\n\t\tconst resizeObserver = new ResizeObserver(debounce(updatePosition));\n\t\tconst mutationObserver = new MutationObserver(debounce(updatePosition));\n\n\t\t// Observe changes in size and style/className\n\t\tif (currentElement) {\n\t\t\tresizeObserver.observe(currentElement);\n\t\t\tmutationObserver.observe(currentElement, {\n\t\t\t\tattributeFilter: ['style', 'class'],\n\t\t\t\tattributes: true\n\t\t\t});\n\t\t}\n\n\t\t// Add listeners on open to respond to browser resizing and scrolling\n\t\tif (isElementVisible) {\n\t\t\tupdatePosition();\n\t\t\twindow.addEventListener('resize', debouncedUpdatePosition);\n\t\t\twindow.addEventListener('scroll', debouncedUpdatePosition);\n\t\t}\n\n\t\t// Cleanup observers and listeners on unmount or re-render\n\t\treturn () => {\n\t\t\tif (currentElement) {\n\t\t\t\tresizeObserver.unobserve(currentElement);\n\t\t\t\tmutationObserver.disconnect();\n\t\t\t}\n\t\t\twindow.removeEventListener('resize', debouncedUpdatePosition);\n\t\t\twindow.removeEventListener('scroll', debouncedUpdatePosition);\n\t\t};\n\t}, [\n\t\tdisable,\n\t\ttriggerRef,\n\t\telementRef,\n\t\talignment,\n\t\toffset,\n\t\tisElementVisible,\n\t\tupdatePosition,\n\t\tdebouncedUpdatePosition\n\t]);\n\n\t/**\n\t * This effect handles an edge case where the menu is rendered,\n\t * but its size is not immediately available in the first frame.\n\t * A short timeout ensures we recalculate the position once layout stabilizes.\n\t */\n\tuseEffect(() => {\n\t\tif (!disable && isElementVisible) {\n\t\t\tconst timeoutId = setTimeout(updatePosition, 10);\n\n\t\t\treturn () => clearTimeout(timeoutId);\n\t\t}\n\t}, [isElementVisible, disable, updatePosition]);\n\n\t/**\n\t * useLayoutEffect ensures the position is recalculated during the layout phase,\n\t * just after DOM mutations but before the browser paints.\n\t */\n\tuseLayoutEffect(() => {\n\t\tif (!disable && isElementVisible && elementRef.current && triggerRef?.current) {\n\t\t\tupdatePosition();\n\t\t\trequestAnimationFrame(updatePosition);\n\t\t}\n\t}, [isElementVisible, updatePosition, disable, elementRef, triggerRef]);\n\n\treturn menuPosition;\n};\n"],"names":["useTriggerPosition","triggerRef","elementRef","menuAlign","isElementVisible","arguments","length","undefined","menuOffset","disable","disableFlipping","offset","_useState","useState","flipped","left","top","_useState2","_slicedToArray","menuPosition","setMenuPosition","alignment","useMemo","align","customPosition","position","updatePosition","useCallback","current","requestAnimationFrame","_triggerRef$current","_elementRef$current","triggerRect","getBoundingClientRect","elementRect","height","width","newPosition","getPosition","prevPosition","debouncedUpdatePosition","debounce","useEffect","currentElement","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","attributeFilter","attributes","window","addEventListener","unobserve","disconnect","removeEventListener","timeoutId","setTimeout","clearTimeout","useLayoutEffect"],"mappings":";;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAC9BC,UAA8C,EAC9CC,UAAkC,EAClCC,SAAoB,EAKN;AAAA,EAAA,IAJdC,gBAAyB,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;AAAA,EAAA,IAChCG,UAAkB,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE;AAAA,EAAA,IACvBI,OAAO,GAAAJ,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,KAAK;AAAA,EAAA,IACfK,eAAe,GAAAL,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,KAAK;EAEvB,IAAMM,MAAM,GAAGH,UAAU;;AAEzB;EACA,IAAAI,SAAA,GAAwCC,QAAQ,CAAW;AAAEC,MAAAA,OAAO,EAAE,KAAK;AAAEC,MAAAA,IAAI,EAAE,CAAC;AAAEC,MAAAA,GAAG,EAAE;AAAE,KAAC,CAAC;IAAAC,UAAA,GAAAC,cAAA,CAAAN,SAAA,EAAA,CAAA,CAAA;AAAxFO,IAAAA,YAAY,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,eAAe,GAAAH,UAAA,CAAA,CAAA,CAAA;;AAEpC;EACA,IAAMI,SAAS,GAAGC,OAAO,CACxB,YAAA;IAAA,OAAO;MACNC,KAAK,EAAEpB,SAAS,CAACoB,KAAK;MACtBC,cAAc,EAAErB,SAAS,CAACqB,cAAc;MACxCC,QAAQ,EAAEtB,SAAS,CAACsB;KACpB;AAAA,EAAA,CAAC,EACF,CAACtB,SAAS,CAACoB,KAAK,EAAEpB,SAAS,CAACsB,QAAQ,EAAEtB,SAAS,CAACqB,cAAc,CAC/D,CAAC;;AAED;AACD;AACA;AACA;AACC,EAAA,IAAME,cAAc,GAAGC,WAAW,CAAC,YAAM;AACxC,IAAA,IAAI,CAACzB,UAAU,CAAC0B,OAAO,IAAI,CAACxB,gBAAgB,EAAE;AAE9CyB,IAAAA,qBAAqB,CAAC,YAAM;MAAA,IAAAC,mBAAA,EAAAC,mBAAA;AAC3B,MAAA,IAAMC,WAAW,GAAG/B,UAAU,aAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAA,CAAA6B,mBAAA,GAAV7B,UAAU,CAAE2B,OAAO,cAAAE,mBAAA,KAAA,MAAA,GAAA,MAAA,GAAnBA,mBAAA,CAAqBG,qBAAqB,EAAE;AAChE,MAAA,IAAMC,WAAW,GAAA,CAAAH,mBAAA,GAAG7B,UAAU,CAAC0B,OAAO,MAAA,IAAA,IAAAG,mBAAA,KAAA,MAAA,GAAA,MAAA,GAAlBA,mBAAA,CAAoBE,qBAAqB,EAAE;;AAE/D;AACA,MAAA,IAAI,CAACC,WAAW,IAAIA,WAAW,CAACC,MAAM,KAAK,CAAC,IAAID,WAAW,CAACE,KAAK,KAAK,CAAC,EAAE;AAEzE,MAAA,IAAMC,WAAW,GAAGC,WAAW,CAACjB,SAAS,EAAEV,MAAM,EAAEuB,WAAW,EAAEF,WAAW,EAAEtB,eAAe,CAAC;;AAE7F;MACAU,eAAe,CAAC,UAACmB,YAAY,EAAK;AACjC,QAAA,IAAIA,YAAY,CAACxB,IAAI,KAAKsB,WAAW,CAACtB,IAAI,IAAIwB,YAAY,CAACvB,GAAG,KAAKqB,WAAW,CAACrB,GAAG,EAAE;AACnF,UAAA,OAAOqB,WAAW;AACnB,QAAA;AACA,QAAA,OAAOE,YAAY;AACpB,MAAA,CAAC,CAAC;AACH,IAAA,CAAC,CAAC;AACH,EAAA,CAAC,EAAE,CAAClB,SAAS,EAAEnB,UAAU,EAAEE,gBAAgB,EAAEO,MAAM,EAAEV,UAAU,EAAES,eAAe,CAAC,CAAC;;AAElF;AACD;AACA;AACA;EACC,IAAM8B,uBAAuB,GAAGlB,OAAO,CAAC,YAAA;AAAA,IAAA,OAAMmB,QAAQ,CAACf,cAAc,EAAE,CAAC,CAAC;EAAA,CAAA,EAAE,CAACA,cAAc,CAAC,CAAC;AAE5FgB,EAAAA,SAAS,CAAC,YAAM;AACf,IAAA,IAAIjC,OAAO,EAAE;AAEb,IAAA,IAAMkC,cAAc,GAAGzC,UAAU,CAAC0B,OAAO;;AAEzC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACE,IAAMgB,cAAc,GAAG,IAAIC,cAAc,CAACJ,QAAQ,CAACf,cAAc,CAAC,CAAC;IACnE,IAAMoB,gBAAgB,GAAG,IAAIC,gBAAgB,CAACN,QAAQ,CAACf,cAAc,CAAC,CAAC;;AAEvE;AACA,IAAA,IAAIiB,cAAc,EAAE;AACnBC,MAAAA,cAAc,CAACI,OAAO,CAACL,cAAc,CAAC;AACtCG,MAAAA,gBAAgB,CAACE,OAAO,CAACL,cAAc,EAAE;AACxCM,QAAAA,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;AACnCC,QAAAA,UAAU,EAAE;AACb,OAAC,CAAC;AACH,IAAA;;AAEA;AACA,IAAA,IAAI9C,gBAAgB,EAAE;AACrBsB,MAAAA,cAAc,EAAE;AAChByB,MAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEZ,uBAAuB,CAAC;AAC1DW,MAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEZ,uBAAuB,CAAC;AAC3D,IAAA;;AAEA;AACA,IAAA,OAAO,YAAM;AACZ,MAAA,IAAIG,cAAc,EAAE;AACnBC,QAAAA,cAAc,CAACS,SAAS,CAACV,cAAc,CAAC;QACxCG,gBAAgB,CAACQ,UAAU,EAAE;AAC9B,MAAA;AACAH,MAAAA,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEf,uBAAuB,CAAC;AAC7DW,MAAAA,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEf,uBAAuB,CAAC;IAC9D,CAAC;AACF,EAAA,CAAC,EAAE,CACF/B,OAAO,EACPR,UAAU,EACVC,UAAU,EACVmB,SAAS,EACTV,MAAM,EACNP,gBAAgB,EAChBsB,cAAc,EACdc,uBAAuB,CACvB,CAAC;;AAEF;AACD;AACA;AACA;AACA;AACCE,EAAAA,SAAS,CAAC,YAAM;AACf,IAAA,IAAI,CAACjC,OAAO,IAAIL,gBAAgB,EAAE;AACjC,MAAA,IAAMoD,SAAS,GAAGC,UAAU,CAAC/B,cAAc,EAAE,EAAE,CAAC;MAEhD,OAAO,YAAA;QAAA,OAAMgC,YAAY,CAACF,SAAS,CAAC;AAAA,MAAA,CAAA;AACrC,IAAA;EACD,CAAC,EAAE,CAACpD,gBAAgB,EAAEK,OAAO,EAAEiB,cAAc,CAAC,CAAC;;AAE/C;AACD;AACA;AACA;AACCiC,EAAAA,eAAe,CAAC,YAAM;AACrB,IAAA,IAAI,CAAClD,OAAO,IAAIL,gBAAgB,IAAIF,UAAU,CAAC0B,OAAO,IAAI3B,UAAU,aAAVA,UAAU,KAAA,MAAA,IAAVA,UAAU,CAAE2B,OAAO,EAAE;AAC9EF,MAAAA,cAAc,EAAE;MAChBG,qBAAqB,CAACH,cAAc,CAAC;AACtC,IAAA;AACD,EAAA,CAAC,EAAE,CAACtB,gBAAgB,EAAEsB,cAAc,EAAEjB,OAAO,EAAEP,UAAU,EAAED,UAAU,CAAC,CAAC;AAEvE,EAAA,OAAOkB,YAAY;AACpB;;;;"}