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

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

@@ -0,0 +1,128 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../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 = React.useState({
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 0,
+      x: 0,
+      y: 0
+    }),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    coordinate = _useState2[0],
+    setCoordinate = _useState2[1];
+  //create a single ref for us to store a FrameDebounce.
+  var intersectionObserverRef = React.useRef();
+  var _useState3 = React.useState(null),
+    _useState4 = _rollupPluginBabelHelpers.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 = React.useMemo(() => {
+    return new IntersectionObserver(entries => {
+      for (var entry of entries) {
+        // The `entry.boundingClientRect` is where all the dimensions are stored
+        var bounds = entry.boundingClientRect.toJSON();
+        var offsetBounds = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, bounds), {}, {
+          left: bounds.left + window.scrollX,
+          top: bounds.top + window.scrollY
+        });
+        setCoordinate(offsetBounds);
+      }
+
+      // Disconnect the observer to stop from running in the background
+      observer.disconnect();
+    });
+  }, []);
+  var observeElementAndUpdateCoordinates = React.useCallback(() => {
+    var _intersectionObserver;
+    if (!element) {
+      return;
+    }
+    intersectionObserverRef === null || intersectionObserverRef === void 0 ? void 0 : (_intersectionObserver = intersectionObserverRef.current) === null || _intersectionObserver === void 0 ? void 0 : _intersectionObserver.instance.debounce(() => {
+      observer.observe(element);
+    });
+  }, [element, observer]);
+  React.useLayoutEffect(() => {
+    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 index.FrameDebounce()
+      };
+    }
+    window.addEventListener('resize', observeElementAndUpdateCoordinates);
+    if (scrollContainer) scrollContainer.addEventListener('scroll', observeElementAndUpdateCoordinates);
+    return () => {
+      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.
+  React.useLayoutEffect(() => {
+    if (!scrollContainer) {
+      return;
+    }
+    var resizeObserver = new ResizeObserver(() => {
+      observeElementAndUpdateCoordinates();
+    });
+    resizeObserver.observe(scrollContainer);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [element, observeElementAndUpdateCoordinates, scrollContainer]);
+  return coordinate;
+};
+
+exports.useCoordinate = useCoordinate;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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","entry","bounds","boundingClientRect","toJSON","offsetBounds","_objectSpread","window","scrollX","scrollY","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/cjs/hooks/useElementDimensions/index.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(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__namespace.useState(() => ({
+      height: null,
+      width: null
+    })),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    dimensions = _React$useState2[0],
+    setDimensions = _React$useState2[1];
+  React__namespace.useEffect(() => {
+    if (!ref.current) return;
+    var expectedWidths = new WeakMap();
+    var expectedHeights = new WeakMap();
+    var observer = new ResizeObserver(entries => {
+      requestAnimationFrame(() => {
+        for (var entry of entries) {
+          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
+          });
+        }
+      });
+    });
+    observer.observe(ref.current);
+    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;
+}
+
+exports.useElementDimensions = useElementDimensions;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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","entry","expectedWidth","get","target","expectedHeight","borderBoxSize","inlineSize","blockSize","set","observe","disconnect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,oBAAoBA,CACnCC,GAA6D,EACzC;AACpB,EAAA,IAAAC,eAAA,GAAoCC,gBAAK,CAACC,QAAQ,CAAoB,OAAO;AAC5EC,MAAAA,MAAM,EAAE,IAAI;AACZC,MAAAA,KAAK,EAAE;AACR,KAAC,CAAC,CAAC;IAAAC,gBAAA,GAAAC,uCAAA,CAAAN,eAAA,EAAA,CAAA,CAAA;AAHIO,IAAAA,UAAU,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,aAAa,GAAAH,gBAAA,CAAA,CAAA,CAAA;EAKhCJ,gBAAK,CAACQ,SAAS,CAAC,MAAM;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,CAAEC,OAAO,IAAK;AAChDC,MAAAA,qBAAqB,CAAC,MAAM;AAC3B,QAAA,KAAK,IAAMC,KAAK,IAAIF,OAAO,EAAE;UAC5B,IAAMG,aAAa,GAAGR,cAAc,CAACS,GAAG,CAACF,KAAK,CAACG,MAAM,CAAC;UACtD,IAAMC,cAAc,GAAGT,eAAe,CAACO,GAAG,CAACF,KAAK,CAACG,MAAM,CAAC;UACxD,IAAGH,KAAK,CAACK,aAAa,CAAC,CAAC,CAAC,CAACC,UAAU,KAAKL,aAAa,IACrDD,KAAK,CAACK,aAAa,CAAC,CAAC,CAAC,CAACE,SAAS,KAAKH,cAAc,EAAE;AAEtDX,UAAAA,cAAc,CAACe,GAAG,CAACR,KAAK,CAACG,MAAM,EAAEH,KAAK,CAACK,aAAa,CAAC,CAAC,CAAC,CAACC,UAAU,CAAC;AACnEX,UAAAA,eAAe,CAACa,GAAG,CAACR,KAAK,CAACG,MAAM,EAAEH,KAAK,CAACK,aAAa,CAAC,CAAC,CAAC,CAACE,SAAS,CAAC;AACnEjB,UAAAA,aAAa,CAAC;YACbL,MAAM,EAAEe,KAAK,CAACK,aAAa,CAAC,CAAC,CAAC,CAACE,SAAS;AACxCrB,YAAAA,KAAK,EAAEc,KAAK,CAACK,aAAa,CAAC,CAAC,CAAC,CAACC;AAC/B,WAAC,CAAC;AACH,QAAA;AACD,MAAA,CAAC,CAAC;AACH,IAAA,CAAC,CAAC;AAEFV,IAAAA,QAAQ,CAACa,OAAO,CAAC5B,GAAG,CAACW,OAAO,CAAC;AAE7B,IAAA,OAAO,MAAMI,QAAQ,CAACc,UAAU,EAAE;AACnC;AACA;EACA,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,OAAOrB,UAAU;AAClB;;;;"}

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

@@ -0,0 +1,76 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../utils/trapFocus/index.js');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * 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__namespace.useState(true),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    hasFocusableDescendant = _React$useState2[0],
+    setHasFocusableDescendant = _React$useState2[1];
+  React__namespace.useLayoutEffect(() => {
+    var element = ref.current;
+    if (!element) return;
+    var measure = () => {
+      var next = element.querySelector(index.FOCUSABLE_ELEMENTS_SELECTOR) !== null;
+      setHasFocusableDescendant(prev => 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 () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+  return hasFocusableDescendant;
+}
+
+exports.useHasFocusableDescendant = useHasFocusableDescendant;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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,gBAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;IAAAC,gBAAA,GAAAC,uCAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAzEK,IAAAA,sBAAsB,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,yBAAyB,GAAAH,gBAAA,CAAA,CAAA,CAAA;EAExDF,gBAAK,CAACM,eAAe,CAAC,MAAM;AAC3B,IAAA,IAAMC,OAAO,GAAGT,GAAG,CAACU,OAAO;IAC3B,IAAI,CAACD,OAAO,EAAE;IAEd,IAAME,OAAO,GAAGA,MAAM;MACrB,IAAMC,IAAI,GAAGH,OAAO,CAACI,aAAa,CAACC,iCAA2B,CAAC,KAAK,IAAI;MACxEP,yBAAyB,CAAEQ,IAAI,IAAMA,IAAI,KAAKH,IAAI,GAAGG,IAAI,GAAGH,IAAK,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,MAAM;MACZN,QAAQ,CAACO,UAAU,EAAE;IACtB,CAAC;AACF,EAAA,CAAC,EAAE,CAACvB,GAAG,CAAC,CAAC;AAET,EAAA,OAAOM,sBAAsB;AAC9B;;;;"}

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

@@ -0,0 +1,84 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(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__namespace.useState({
+      hasHorizontalScrollbar: false,
+      hasVerticalScrollbar: false,
+      horizontalScrollbarHeight: 0,
+      verticalScrollbarWidth: 0
+    }),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    scrollbarInfo = _React$useState2[0],
+    setScrollbarInfo = _React$useState2[1];
+  var scrollableContainerRef = React__namespace.useRef(null);
+  React__namespace.useLayoutEffect(() => {
+    if (!scrollableContainerRef.current) return;
+    var observer = new ResizeObserver(_ref => {
+      var _ref2 = _rollupPluginBabelHelpers.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,
+        hasVerticalScrollbar,
+        horizontalScrollbarHeight,
+        verticalScrollbarWidth
+      });
+    });
+    observer.observe(scrollableContainerRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, scrollbarInfo), {}, {
+    scrollableContainerRef
+  });
+}
+
+exports.useScrollbarInfo = useScrollbarInfo;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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,gBAAK,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,uCAAA,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,gBAAK,CAACW,MAAM,CAAW,IAAI,CAAC;EAE3DX,gBAAK,CAACY,eAAe,CAAC,MAAM;AAC3B,IAAA,IAAI,CAACF,sBAAsB,CAACG,OAAO,EAAE;AAErC,IAAA,IAAMC,QAAQ,GAAG,IAAIC,cAAc,CAACC,IAAA,IAAa;AAAA,MAAA,IAAAC,KAAA,GAAAV,uCAAA,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;QAChBP,sBAAsB;QACtBC,oBAAoB;QACpBC,yBAAyB;AACzBC,QAAAA;AACD,OAAC,CAAC;AACH,IAAA,CAAC,CAAC;AAEFS,IAAAA,QAAQ,CAACY,OAAO,CAAChB,sBAAsB,CAACG,OAAO,CAAC;AAEhD,IAAA,OAAO,MAAM;MACZC,QAAQ,CAACa,UAAU,EAAE;IACtB,CAAC;EACF,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,OAAAC,uCAAA,CAAAA,uCAAA,CAAA,EAAA,EACIpB,aAAa,CAAA,EAAA,EAAA,EAAA;AAChBE,IAAAA;AAAsB,GAAA,CAAA;AAExB;;;;"}

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

@@ -0,0 +1,150 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var utilities = require('./utilities.js');
+var debounce = require('lodash.debounce');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var debounce__default = /*#__PURE__*/_interopDefault(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 = React.useState({
+      flipped: false,
+      left: 0,
+      top: 0
+    }),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    menuPosition = _useState2[0],
+    setMenuPosition = _useState2[1];
+
+  // Memoize alignment so it only recalculates when specific props change
+  var alignment = React.useMemo(() => ({
+    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 = React.useCallback(() => {
+    if (!elementRef.current || !isElementVisible) return;
+    requestAnimationFrame(() => {
+      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 = utilities.getPosition(alignment, offset, elementRect, triggerRect, disableFlipping);
+
+      // Only update state if the position has changed
+      setMenuPosition(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 = React.useMemo(() => debounce__default.default(updatePosition, 5), [updatePosition]);
+  React.useEffect(() => {
+    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__default.default(updatePosition));
+    var mutationObserver = new MutationObserver(debounce__default.default(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 () => {
+      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.
+   */
+  React.useEffect(() => {
+    if (!disable && isElementVisible) {
+      var timeoutId = setTimeout(updatePosition, 10);
+      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.
+   */
+  React.useLayoutEffect(() => {
+    if (!disable && isElementVisible && elementRef.current && triggerRef !== null && triggerRef !== void 0 && triggerRef.current) {
+      updatePosition();
+      requestAnimationFrame(updatePosition);
+    }
+  }, [isElementVisible, updatePosition, disable, elementRef, triggerRef]);
+  return menuPosition;
+};
+
+exports.useTriggerPosition = useTriggerPosition;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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":"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"}