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

package/dist/cjs/components/menu/hooks/useBrowserEdgeScroll.js

@@ -0,0 +1,186 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var debounce = require('lodash.debounce');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var debounce__default = /*#__PURE__*/_interopDefault(debounce);
+
+/**
+ * useBrowserEdgeScroll hook
+ *
+ * This hook will calculate if an element's top or bottom edge bleed over the viewport edge
+ * and will provide a max height value for the element to allow it to scroll instead of bleed over
+ *
+ * @param elementRef - reference to the DOM element that is the menu
+ * @param elementPosition - the position of the menu
+ * @param elementAlign - the alignment of the menu
+ * @param disable - disable the hook from running
+ * @returns AdjustedElementStyle - returns the new updated style for scrolling the menu
+ */
+var useBrowserEdgeScroll = function useBrowserEdgeScroll(elementRef) {
+  var elementPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'bottom';
+  var elementAlign = arguments.length > 2 ? arguments[2] : undefined;
+  var disable = arguments.length > 3 ? arguments[3] : undefined;
+  var _useState = React.useState({}),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    heightStyle = _useState2[0],
+    setHeightStyle = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    isScrolling = _useState4[0],
+    setIsScrolling = _useState4[1];
+
+  // Use a ref to store the initial dimensions of the menu
+  var menuRectSizeRef = React.useRef(null);
+  var updateMenuStyle = React.useCallback(() => {
+    if (disable || !elementRef.current || elementPosition === 'static') return;
+    if (elementRef.current) {
+      if (!menuRectSizeRef.current) {
+        menuRectSizeRef.current = elementRef.current.getBoundingClientRect();
+      }
+      var newMaxHeight = calculateNewMaxHeight(elementPosition, elementAlign, elementRef, menuRectSizeRef.current, window.innerHeight);
+      if (newMaxHeight !== null) {
+        setIsScrolling(true);
+        setHeightStyle({
+          maxHeight: newMaxHeight
+        });
+      } else {
+        setIsScrolling(false);
+        setHeightStyle({});
+      }
+    }
+  }, [disable, elementRef, elementAlign, elementPosition]);
+  var updateMenuStyleDebounced = debounce__default.default(updateMenuStyle, 10);
+  React.useLayoutEffect(() => {
+    if (disable || !elementRef.current || elementPosition === 'static') return;
+
+    /**
+     * Resize observer is setup to watch for changes in the element's size or position
+     *
+     * If a resize is detected, the element's style will be updated to allow for scrolling if necessary
+     */
+    var observer = new ResizeObserver(updateMenuStyleDebounced);
+    observer.observe(elementRef.current);
+    window.addEventListener('resize', updateMenuStyleDebounced);
+    if (elementRef.current) {
+      updateMenuStyle();
+    }
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', updateMenuStyleDebounced);
+      menuRectSizeRef.current = null;
+    };
+
+    // Passing a ref in shouldn't make things work, but in this scenario
+    // it's the only way to get the menu to update when it's ref becomes available
+    // this is used for when the menu initializes, the ref may not be available so this
+    // is allowing the menu to wait before initializing the menu style without a setTimeout
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef.current, elementPosition, updateMenuStyle]);
+  var updateOnImageLoad = () => {
+    var _elementRef$current;
+    var elementRect = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
+    if (elementRect) {
+      menuRectSizeRef.current = elementRect;
+      updateMenuStyleDebounced();
+    }
+  };
+
+  /**
+   * Listen for image additions to the element and update the menu style when they load
+   */
+  React.useEffect(() => {
+    var _elementRef$current2;
+    var images = (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.querySelectorAll('img');
+    if (images) {
+      images.forEach(img => {
+        img.addEventListener('load', updateOnImageLoad);
+      });
+    }
+    return () => {
+      if (images) {
+        images.forEach(img => {
+          img.removeEventListener('load', updateOnImageLoad);
+        });
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef.current, updateMenuStyleDebounced]);
+  return {
+    isScrolling,
+    styles: heightStyle
+  };
+};
+
+/**
+ * Calculates the new max height of the menu based on the menu alignment and the viewport height
+ *
+ * @param elementPosition - the alignment of the menu
+ * @param elementAlign - the alignment of the menu
+ * @param elementRef - reference to the DOM element that is the menu
+ * @param menuRect - the bounding client rect of the menu
+ * @param viewportHeight - the height of the viewport
+ * @returns {string} - the new max height of the menu
+ */
+var calculateNewMaxHeight = (elementPosition, elementAlign, elementRef, menuRect, viewportHeight) => {
+  var scrollBuffer = 35;
+  var scrollThreshold = 20;
+  switch (elementPosition) {
+    case 'bottom':
+      return calculateBottomAlignment(menuRect, viewportHeight, scrollBuffer, scrollThreshold);
+    case 'top':
+      return calculateTopAlignment(menuRect, elementRef, scrollBuffer, scrollThreshold);
+    case 'left':
+    case 'right':
+      return calculateSideAlignment(elementAlign, menuRect, viewportHeight, scrollThreshold, scrollBuffer);
+    case 'ignore':
+      return checkElementIsScrolling(elementRef);
+    default:
+      return null;
+  }
+};
+var calculateBottomAlignment = (menuRect, viewportHeight, scrollBuffer, scrollThreshold) => {
+  // Evaluate from the bottom of the viewport to the top of the menu
+  if (menuRect.bottom > viewportHeight - scrollThreshold) {
+    var calculatedHeight = Math.max(0, viewportHeight - menuRect.top - scrollBuffer);
+    return "".concat(Math.floor(calculatedHeight), "px");
+  }
+  return null;
+};
+var calculateTopAlignment = (menuRect, elementRef, scrollBuffer, scrollThreshold) => {
+  var _elementRef$current3;
+  var currentRect = (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.getBoundingClientRect();
+  // Evaluate distance from the top of the viewport to the bottom of the menu
+  if (currentRect && currentRect.top <= scrollThreshold) {
+    var calculatedHeight = Math.max(0, currentRect.bottom - scrollThreshold);
+    return "".concat(Math.floor(calculatedHeight), "px");
+  }
+  return null;
+};
+var calculateSideAlignment = (elementAlign, menuRect, viewportHeight, scrollThreshold, scrollBuffer) => {
+  // Evaluate distance from the top of the viewport to the bottom of the menu
+  if (elementAlign === 'end' && menuRect.top < scrollThreshold) {
+    var calculatedHeight = Math.max(0, menuRect.bottom - scrollBuffer);
+    return "".concat(Math.floor(calculatedHeight), "px");
+  }
+
+  // Evaluate from the bottom of the viewport to the top of the menu
+  if (elementAlign === 'start' && menuRect.bottom > viewportHeight - scrollThreshold) {
+    var _calculatedHeight = Math.max(0, viewportHeight - menuRect.top - scrollBuffer);
+    return "".concat(Math.floor(_calculatedHeight), "px");
+  }
+  return null;
+};
+var checkElementIsScrolling = elementRef => {
+  var el = elementRef.current;
+  if (el && el.scrollTop > 0) {
+    return 'scrolling';
+  }
+  return null;
+};
+
+exports.useBrowserEdgeScroll = useBrowserEdgeScroll;
+//# sourceMappingURL=useBrowserEdgeScroll.js.map

package/dist/cjs/components/menu/hooks/useBrowserEdgeScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBrowserEdgeScroll.js","sources":["../../../../../src/components/menu/hooks/useBrowserEdgeScroll.ts"],"sourcesContent":["import { useState, useLayoutEffect, useCallback, useRef, useEffect } from 'react';\nimport { MenuAlignment, MenuPosition } from '../constants';\nimport debounce from 'lodash.debounce';\n\ninterface ElementScrollStyles {\n\tisScrolling: boolean;\n\tstyles: AdjustedElementStyle;\n}\n\nexport interface AdjustedElementStyle {\n\tmaxHeight?: string;\n}\n\n/**\n * useBrowserEdgeScroll hook\n *\n * This hook will calculate if an element's top or bottom edge bleed over the viewport edge\n * and will provide a max height value for the element to allow it to scroll instead of bleed over\n *\n * @param elementRef - reference to the DOM element that is the menu\n * @param elementPosition - the position of the menu\n * @param elementAlign - the alignment of the menu\n * @param disable - disable the hook from running\n * @returns AdjustedElementStyle - returns the new updated style for scrolling the menu\n */\nexport const useBrowserEdgeScroll = (\n\telementRef: React.RefObject<HTMLElement>,\n\telementPosition: MenuPosition = 'bottom',\n\telementAlign: MenuAlignment,\n\tdisable?: boolean\n): ElementScrollStyles | null => {\n\tconst [heightStyle, setHeightStyle] = useState<AdjustedElementStyle>({});\n\n\tconst [isScrolling, setIsScrolling] = useState<boolean>(false);\n\n\t// Use a ref to store the initial dimensions of the menu\n\tconst menuRectSizeRef = useRef<DOMRect | null>(null);\n\n\tconst updateMenuStyle = useCallback(() => {\n\t\tif (disable || !elementRef.current || elementPosition === 'static') return;\n\n\t\tif (elementRef.current) {\n\t\t\tif (!menuRectSizeRef.current) {\n\t\t\t\tmenuRectSizeRef.current = elementRef.current.getBoundingClientRect();\n\t\t\t}\n\n\t\t\tconst newMaxHeight = calculateNewMaxHeight(\n\t\t\t\telementPosition,\n\t\t\t\telementAlign,\n\t\t\t\telementRef,\n\t\t\t\tmenuRectSizeRef.current,\n\t\t\t\twindow.innerHeight\n\t\t\t);\n\n\t\t\tif (newMaxHeight !== null) {\n\t\t\t\tsetIsScrolling(true);\n\t\t\t\tsetHeightStyle({ maxHeight: newMaxHeight });\n\t\t\t} else {\n\t\t\t\tsetIsScrolling(false);\n\t\t\t\tsetHeightStyle({});\n\t\t\t}\n\t\t}\n\t}, [\n\t\tdisable,\n\t\telementRef,\n\t\telementAlign,\n\t\telementPosition\n\t]);\n\n\tconst updateMenuStyleDebounced = debounce(updateMenuStyle, 10);\n\n\tuseLayoutEffect(() => {\n\t\tif (disable || !elementRef.current || elementPosition === 'static') return;\n\n\t\t/**\n\t\t * Resize observer is setup to watch for changes in the element's size or position\n\t\t *\n\t\t * If a resize is detected, the element's style will be updated to allow for scrolling if necessary\n\t\t */\n\t\tconst observer = new ResizeObserver(updateMenuStyleDebounced);\n\t\tobserver.observe(elementRef.current);\n\n\t\twindow.addEventListener('resize', updateMenuStyleDebounced);\n\n\t\tif (elementRef.current) {\n\t\t\tupdateMenuStyle();\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t\twindow.removeEventListener('resize', updateMenuStyleDebounced);\n\t\t\tmenuRectSizeRef.current = null;\n\t\t};\n\n\t\t// Passing a ref in shouldn't make things work, but in this scenario\n\t\t// it's the only way to get the menu to update when it's ref becomes available\n\t\t// this is used for when the menu initializes, the ref may not be available so this\n\t\t// is allowing the menu to wait before initializing the menu style without a setTimeout\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [elementRef.current, elementPosition, updateMenuStyle]);\n\n\tconst updateOnImageLoad = () => {\n\t\tconst elementRect = elementRef.current?.getBoundingClientRect();\n\t\tif (elementRect) {\n\t\t\tmenuRectSizeRef.current = elementRect;\n\t\t\tupdateMenuStyleDebounced();\n\t\t}\n\t};\n\n\t/**\n\t * Listen for image additions to the element and update the menu style when they load\n\t */\n\tuseEffect(() => {\n\t\tconst images = elementRef.current?.querySelectorAll('img');\n\t\tif (images) {\n\t\t\timages.forEach((img) => {\n\t\t\t\timg.addEventListener('load', updateOnImageLoad);\n\t\t\t});\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (images) {\n\t\t\t\timages.forEach((img) => {\n\t\t\t\t\timg.removeEventListener('load', updateOnImageLoad);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [elementRef.current, updateMenuStyleDebounced]);\n\n\treturn { isScrolling, styles: heightStyle };\n};\n\n/**\n * Calculates the new max height of the menu based on the menu alignment and the viewport height\n *\n * @param elementPosition - the alignment of the menu\n * @param elementAlign - the alignment of the menu\n * @param elementRef - reference to the DOM element that is the menu\n * @param menuRect - the bounding client rect of the menu\n * @param viewportHeight - the height of the viewport\n * @returns {string} - the new max height of the menu\n */\nconst calculateNewMaxHeight = (\n\telementPosition: MenuPosition,\n\telementAlign: MenuAlignment,\n\telementRef: React.RefObject<HTMLElement>,\n\tmenuRect: DOMRect,\n\tviewportHeight: number\n): string | null => {\n\tconst scrollBuffer = 35;\n\tconst scrollThreshold = 20;\n\n\tswitch (elementPosition) {\n\tcase 'bottom':\n\t\treturn calculateBottomAlignment(menuRect, viewportHeight, scrollBuffer, scrollThreshold);\n\tcase 'top':\n\t\treturn calculateTopAlignment(menuRect, elementRef, scrollBuffer, scrollThreshold);\n\tcase 'left':\n\tcase 'right':\n\t\treturn calculateSideAlignment(\n\t\t\telementAlign,\n\t\t\tmenuRect,\n\t\t\tviewportHeight,\n\t\t\tscrollThreshold,\n\t\t\tscrollBuffer\n\t\t);\n\tcase 'ignore':\n\t\treturn checkElementIsScrolling(elementRef);\n\tdefault:\n\t\treturn null;\n\t}\n};\n\nconst calculateBottomAlignment = (\n\tmenuRect: DOMRect,\n\tviewportHeight: number,\n\tscrollBuffer: number,\n\tscrollThreshold: number\n): string | null => {\n\t// Evaluate from the bottom of the viewport to the top of the menu\n\tif (menuRect.bottom > viewportHeight - scrollThreshold) {\n\t\tconst calculatedHeight = Math.max(0, viewportHeight - menuRect.top - scrollBuffer);\n\t\treturn `${Math.floor(calculatedHeight)}px`;\n\t}\n\treturn null;\n};\n\nconst calculateTopAlignment = (\n\tmenuRect: DOMRect,\n\telementRef: React.RefObject<HTMLElement>,\n\tscrollBuffer: number,\n\tscrollThreshold: number\n): string | null => {\n\tconst currentRect = elementRef.current?.getBoundingClientRect();\n\t// Evaluate distance from the top of the viewport to the bottom of the menu\n\tif (currentRect && currentRect.top <= scrollThreshold) {\n\t\tconst calculatedHeight = Math.max(0, currentRect.bottom - scrollThreshold);\n\t\treturn `${Math.floor(calculatedHeight)}px`;\n\t}\n\treturn null;\n};\n\nconst calculateSideAlignment = (\n\telementAlign: MenuAlignment,\n\tmenuRect: DOMRect,\n\tviewportHeight: number,\n\tscrollThreshold: number,\n\tscrollBuffer: number\n): string | null => {\n\t// Evaluate distance from the top of the viewport to the bottom of the menu\n\tif (elementAlign === 'end' && menuRect.top < scrollThreshold) {\n\t\tconst calculatedHeight = Math.max(0, menuRect.bottom - scrollBuffer);\n\t\treturn `${Math.floor(calculatedHeight)}px`;\n\t}\n\n\t// Evaluate from the bottom of the viewport to the top of the menu\n\tif (elementAlign === 'start' && menuRect.bottom > viewportHeight - scrollThreshold) {\n\t\tconst calculatedHeight = Math.max(0, viewportHeight - menuRect.top - scrollBuffer);\n\t\treturn `${Math.floor(calculatedHeight)}px`;\n\t}\n\n\treturn null;\n};\n\nconst checkElementIsScrolling = (elementRef: React.RefObject<HTMLElement>): string | null => {\n\tconst el = elementRef.current;\n\n\tif (el && el.scrollTop > 0) {\n\t\treturn 'scrolling';\n\t}\n\n\treturn null;\n};\n"],"names":["useBrowserEdgeScroll","elementRef","elementPosition","arguments","length","undefined","elementAlign","disable","_useState","useState","_useState2","_slicedToArray","heightStyle","setHeightStyle","_useState3","_useState4","isScrolling","setIsScrolling","menuRectSizeRef","useRef","updateMenuStyle","useCallback","current","getBoundingClientRect","newMaxHeight","calculateNewMaxHeight","window","innerHeight","maxHeight","updateMenuStyleDebounced","debounce","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","disconnect","removeEventListener","updateOnImageLoad","_elementRef$current","elementRect","useEffect","_elementRef$current2","images","querySelectorAll","forEach","img","styles","menuRect","viewportHeight","scrollBuffer","scrollThreshold","calculateBottomAlignment","calculateTopAlignment","calculateSideAlignment","checkElementIsScrolling","bottom","calculatedHeight","Math","max","top","concat","floor","_elementRef$current3","currentRect","el","scrollTop"],"mappings":"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"}

package/dist/cjs/components/menu/hooks/useMenuScroll.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+
+var SCREEN_OFFSET = 16;
+var DEFAULT_SCROLL_STATE = {
+  isScrolling: false,
+  maxHeight: undefined
+};
+
+/**
+ * useMenuScroll hook
+ *
+ * Detects when a menu cannot fit on screen in either its preferred or flipped position,
+ * and constrains its height to enable internal scrolling.
+ *
+ * Behavior by position:
+ * - **top/bottom**: If the menu doesn't fit in the preferred direction AND doesn't fit
+ *   in the opposite direction (flip), it reverts to the original position and constrains
+ *   the height to the space between the trigger edge and the viewport edge.
+ * - **left/right**: Only checks vertical overflow. If the menu is taller than the viewport,
+ *   it constrains the height to the available vertical space.
+ *
+ * Uses `scrollHeight` on the list element to determine the natural (unconstrained) content
+ * height. This value remains stable even when `maxHeight` is applied, preventing feedback
+ * loops with external positioning hooks that use ResizeObserver.
+ *
+ * Uses `useLayoutEffect` for the initial calculation so that `maxHeight` is applied
+ * synchronously before the browser paints. This prevents visible flicker when the menu
+ * opens in a constrained space, because the positioning hook (useTriggerPosition) will
+ * see the already-constrained height on its first measurement via requestAnimationFrame.
+ *
+ * @param triggerRef - Reference to the trigger element that opens the menu
+ * @param listRef - Reference to the ul element inside the menu (the scrollable container)
+ * @param position - The preferred menu position relative to the trigger
+ * @param menuOffset - The gap between the trigger and the menu in pixels
+ * @param isOpen - Whether the menu is currently open
+ * @param disable - Whether to disable the hook entirely
+ * @returns An object with `maxHeight` (inline style value) and `isScrolling` (class toggle)
+ */
+var useMenuScroll = (triggerRef, listRef, position, menuOffset, isOpen, disable) => {
+  var _useState = React.useState(DEFAULT_SCROLL_STATE),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    scrollState = _useState2[0],
+    setScrollState = _useState2[1];
+  var calculateScroll = React.useCallback(() => {
+    // Reset scroll constraints when the menu closes or refs aren't available.
+    if (!isOpen || disable || !(triggerRef !== null && triggerRef !== void 0 && triggerRef.current) || !listRef.current) {
+      setScrollState(prev => {
+        if (prev.maxHeight === undefined && !prev.isScrolling) return prev;
+        return DEFAULT_SCROLL_STATE;
+      });
+      return;
+    }
+    var triggerRect = triggerRef.current.getBoundingClientRect();
+    var naturalHeight = listRef.current.scrollHeight;
+    var viewportHeight = window.innerHeight;
+    var maxHeight;
+    var isScrolling = false;
+    switch (position) {
+      case 'bottom':
+        {
+          var availableBelow = viewportHeight - triggerRect.bottom - menuOffset - SCREEN_OFFSET;
+          var availableAbove = triggerRect.top - menuOffset - SCREEN_OFFSET;
+          if (naturalHeight > availableBelow && naturalHeight > availableAbove) {
+            isScrolling = true;
+            maxHeight = availableBelow;
+          }
+          break;
+        }
+      case 'top':
+        {
+          var _availableAbove = triggerRect.top - menuOffset - SCREEN_OFFSET;
+          var _availableBelow = viewportHeight - triggerRect.bottom - menuOffset - SCREEN_OFFSET;
+          if (naturalHeight > _availableAbove && naturalHeight > _availableBelow) {
+            isScrolling = true;
+            maxHeight = _availableAbove;
+          }
+          break;
+        }
+      case 'left':
+      case 'right':
+        {
+          var availableVertical = viewportHeight - 2 * SCREEN_OFFSET;
+          if (naturalHeight > availableVertical) {
+            isScrolling = true;
+            maxHeight = availableVertical;
+          }
+          break;
+        }
+    }
+
+    /**
+     * Floor the maxHeight and subtract 1px to avoid sub-pixel rounding that can
+     * cause the element being positioned to flip between flipped/unflipped states.
+     */
+    var safeMaxHeight = maxHeight !== undefined ? Math.floor(maxHeight) - 1 : undefined;
+    setScrollState(prev => {
+      if (prev.maxHeight === safeMaxHeight && prev.isScrolling === isScrolling) return prev;
+      return {
+        isScrolling,
+        maxHeight: safeMaxHeight
+      };
+    });
+  }, [isOpen, disable, triggerRef, listRef, position, menuOffset]);
+
+  /**
+   * Calculate synchronously before paint to prevent flicker.
+   * This ensures maxHeight is applied to the DOM before useTriggerPosition's
+   * requestAnimationFrame fires, so it measures the constrained height on its first pass.
+   */
+  React.useLayoutEffect(() => {
+    if (isOpen && !disable) {
+      calculateScroll();
+    }
+  }, [isOpen, disable, calculateScroll]);
+
+  /**
+   * Respond to window resize and content size changes (e.g. images loading,
+   * lazy content, dynamically added items).
+   */
+  React.useEffect(() => {
+    if (!isOpen || disable) return;
+    window.addEventListener('resize', calculateScroll);
+    var listElement = listRef.current;
+    var resizeObserver;
+    if (listElement) {
+      resizeObserver = new ResizeObserver(calculateScroll);
+      resizeObserver.observe(listElement);
+    }
+    return () => {
+      var _resizeObserver;
+      window.removeEventListener('resize', calculateScroll);
+      (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.disconnect();
+    };
+  }, [isOpen, disable, calculateScroll, listRef]);
+  return scrollState;
+};
+
+exports.useMenuScroll = useMenuScroll;
+//# sourceMappingURL=useMenuScroll.js.map

package/dist/cjs/components/menu/hooks/useMenuScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuScroll.js","sources":["../../../../../src/components/menu/hooks/useMenuScroll.ts"],"sourcesContent":["import { useState, useCallback, useEffect, useLayoutEffect, RefObject } from 'react';\nimport { MenuPosition } from '../constants';\n\nconst SCREEN_OFFSET = 16;\n\ninterface UseMenuScrollResult {\n\t/** The constrained max height for the menu list when scrolling is active */\n\tmaxHeight: number | undefined;\n\t/** Whether the menu content exceeds available space and requires internal scrolling */\n\tisScrolling: boolean;\n}\n\nconst DEFAULT_SCROLL_STATE: UseMenuScrollResult = {\n\tisScrolling: false,\n\tmaxHeight: undefined\n};\n\n/**\n * useMenuScroll hook\n *\n * Detects when a menu cannot fit on screen in either its preferred or flipped position,\n * and constrains its height to enable internal scrolling.\n *\n * Behavior by position:\n * - **top/bottom**: If the menu doesn't fit in the preferred direction AND doesn't fit\n *   in the opposite direction (flip), it reverts to the original position and constrains\n *   the height to the space between the trigger edge and the viewport edge.\n * - **left/right**: Only checks vertical overflow. If the menu is taller than the viewport,\n *   it constrains the height to the available vertical space.\n *\n * Uses `scrollHeight` on the list element to determine the natural (unconstrained) content\n * height. This value remains stable even when `maxHeight` is applied, preventing feedback\n * loops with external positioning hooks that use ResizeObserver.\n *\n * Uses `useLayoutEffect` for the initial calculation so that `maxHeight` is applied\n * synchronously before the browser paints. This prevents visible flicker when the menu\n * opens in a constrained space, because the positioning hook (useTriggerPosition) will\n * see the already-constrained height on its first measurement via requestAnimationFrame.\n *\n * @param triggerRef - Reference to the trigger element that opens the menu\n * @param listRef - Reference to the ul element inside the menu (the scrollable container)\n * @param position - The preferred menu position relative to the trigger\n * @param menuOffset - The gap between the trigger and the menu in pixels\n * @param isOpen - Whether the menu is currently open\n * @param disable - Whether to disable the hook entirely\n * @returns An object with `maxHeight` (inline style value) and `isScrolling` (class toggle)\n */\nexport const useMenuScroll = (\n\ttriggerRef: RefObject<HTMLElement> | undefined,\n\tlistRef: RefObject<HTMLUListElement>,\n\tposition: MenuPosition,\n\tmenuOffset: number,\n\tisOpen: boolean,\n\tdisable: boolean\n): UseMenuScrollResult => {\n\tconst [scrollState, setScrollState] = useState<UseMenuScrollResult>(DEFAULT_SCROLL_STATE);\n\n\tconst calculateScroll = useCallback(() => {\n\t\t// Reset scroll constraints when the menu closes or refs aren't available.\n\t\tif (!isOpen || disable || !triggerRef?.current || !listRef.current) {\n\t\t\tsetScrollState((prev) => {\n\t\t\t\tif (prev.maxHeight === undefined && !prev.isScrolling) return prev;\n\t\t\t\treturn DEFAULT_SCROLL_STATE;\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\n\t\tconst triggerRect = triggerRef.current.getBoundingClientRect();\n\t\tconst naturalHeight = listRef.current.scrollHeight;\n\t\tconst viewportHeight = window.innerHeight;\n\n\t\tlet maxHeight: number | undefined;\n\t\tlet isScrolling = false;\n\n\t\tswitch (position) {\n\t\t\tcase 'bottom': {\n\t\t\t\tconst availableBelow = viewportHeight - triggerRect.bottom - menuOffset - SCREEN_OFFSET;\n\t\t\t\tconst availableAbove = triggerRect.top - menuOffset - SCREEN_OFFSET;\n\n\t\t\t\tif (naturalHeight > availableBelow && naturalHeight > availableAbove) {\n\t\t\t\t\tisScrolling = true;\n\t\t\t\t\tmaxHeight = availableBelow;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'top': {\n\t\t\t\tconst availableAbove = triggerRect.top - menuOffset - SCREEN_OFFSET;\n\t\t\t\tconst availableBelow = viewportHeight - triggerRect.bottom - menuOffset - SCREEN_OFFSET;\n\n\t\t\t\tif (naturalHeight > availableAbove && naturalHeight > availableBelow) {\n\t\t\t\t\tisScrolling = true;\n\t\t\t\t\tmaxHeight = availableAbove;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'left':\n\t\t\tcase 'right': {\n\t\t\t\tconst availableVertical = viewportHeight - 2 * SCREEN_OFFSET;\n\n\t\t\t\tif (naturalHeight > availableVertical) {\n\t\t\t\t\tisScrolling = true;\n\t\t\t\t\tmaxHeight = availableVertical;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Floor the maxHeight and subtract 1px to avoid sub-pixel rounding that can\n\t\t * cause the element being positioned to flip between flipped/unflipped states.\n\t\t */\n\t\tconst safeMaxHeight = maxHeight !== undefined ? Math.floor(maxHeight) - 1 : undefined;\n\n\t\tsetScrollState((prev) => {\n\t\t\tif (prev.maxHeight === safeMaxHeight && prev.isScrolling === isScrolling) return prev;\n\t\t\treturn { isScrolling, maxHeight: safeMaxHeight };\n\t\t});\n\t}, [isOpen, disable, triggerRef, listRef, position, menuOffset]);\n\n\t/**\n\t * Calculate synchronously before paint to prevent flicker.\n\t * This ensures maxHeight is applied to the DOM before useTriggerPosition's\n\t * requestAnimationFrame fires, so it measures the constrained height on its first pass.\n\t */\n\tuseLayoutEffect(() => {\n\t\tif (isOpen && !disable) {\n\t\t\tcalculateScroll();\n\t\t}\n\t}, [isOpen, disable, calculateScroll]);\n\n\t/**\n\t * Respond to window resize and content size changes (e.g. images loading,\n\t * lazy content, dynamically added items).\n\t */\n\tuseEffect(() => {\n\t\tif (!isOpen || disable) return;\n\n\t\twindow.addEventListener('resize', calculateScroll);\n\n\t\tconst listElement = listRef.current;\n\t\tlet resizeObserver: ResizeObserver | undefined;\n\n\t\tif (listElement) {\n\t\t\tresizeObserver = new ResizeObserver(calculateScroll);\n\t\t\tresizeObserver.observe(listElement);\n\t\t}\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', calculateScroll);\n\t\t\tresizeObserver?.disconnect();\n\t\t};\n\t}, [isOpen, disable, calculateScroll, listRef]);\n\n\treturn scrollState;\n};\n"],"names":["SCREEN_OFFSET","DEFAULT_SCROLL_STATE","isScrolling","maxHeight","undefined","useMenuScroll","triggerRef","listRef","position","menuOffset","isOpen","disable","_useState","useState","_useState2","_slicedToArray","scrollState","setScrollState","calculateScroll","useCallback","current","prev","triggerRect","getBoundingClientRect","naturalHeight","scrollHeight","viewportHeight","window","innerHeight","availableBelow","bottom","availableAbove","top","availableVertical","safeMaxHeight","Math","floor","useLayoutEffect","useEffect","addEventListener","listElement","resizeObserver","ResizeObserver","observe","_resizeObserver","removeEventListener","disconnect"],"mappings":"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"}

package/dist/cjs/components/menu/hooks/useSubMenuElementPosition.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var utilities = require('../MrlMenu/utilities.js');
+
+/**
+ * Calculates the position of the sub menu element
+ *
+ * @param triggerRef - The trigger element ref
+ * @param menuRef - The menu element ref
+ * @param isSubMenu - Is the menu a sub menu
+ * @param isOpen - Is the element visible
+ * @param originalMenuRect - The menu element rect
+ * @param disable - Should the menu be disabled
+ * @returns The sub menu position
+ */
+var useSubMenuElementPosition = (triggerRef, menuRef, isSubMenu, isOpen, originalMenuRect, disable) => {
+  var _useState = React.useState({
+      left: 'calc(100% - 5px)',
+      top: ''
+    }),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    subMenuPosition = _useState2[0],
+    setSubMenuPosition = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    menuRect = _useState4[0],
+    setMenuRect = _useState4[1];
+  React.useEffect(() => {
+    if (!disable && isOpen && menuRef.current && !originalMenuRect) {
+      setMenuRect(menuRef.current.getBoundingClientRect());
+    }
+  }, [disable, isOpen, menuRef, originalMenuRect]);
+  React.useEffect(() => {
+    if (disable || !(triggerRef !== null && triggerRef !== void 0 && triggerRef.current) || !menuRef.current || !isSubMenu || !isOpen || !menuRect || !isSubMenu) return;
+    var parentMenu = utilities.findClosestMenuParent(triggerRef.current);
+    var triggerRect = triggerRef.current.getBoundingClientRect();
+    if (!(parentMenu !== null && parentMenu !== void 0 && parentMenu.parentElement)) return;
+    var parentMenuRect = parentMenu.getBoundingClientRect();
+    var menuHeight = menuRef.current.getBoundingClientRect().height;
+    var overlapsRight = window.innerWidth < menuRect.right;
+    var overlapsLeft = triggerRect.left - menuRect.width < menuRect.width;
+    var newLeft = utilities.calculateLeftPosition(overlapsRight, overlapsLeft, menuRect, triggerRef);
+    var newTop = utilities.calculateTopPosition(overlapsRight, overlapsLeft, triggerRef, menuRect, parentMenu, triggerRect);
+
+    // if the submenu height is smaller than the menu height, we want to top align the submenu so it doesn't go off
+    // of the top of the screen
+    if (menuHeight > parentMenuRect.height) {
+      newTop = "0px";
+    }
+    setSubMenuPosition({
+      left: newLeft,
+      top: newTop
+    });
+  }, [disable, triggerRef, menuRef, menuRect, isSubMenu, isOpen]);
+  return subMenuPosition;
+};
+
+exports.useSubMenuElementPosition = useSubMenuElementPosition;
+//# sourceMappingURL=useSubMenuElementPosition.js.map

package/dist/cjs/components/menu/hooks/useSubMenuElementPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubMenuElementPosition.js","sources":["../../../../../src/components/menu/hooks/useSubMenuElementPosition.ts"],"sourcesContent":["import { useState, useEffect, RefObject } from 'react';\nimport {\n\tfindClosestMenuParent,\n\tcalculateLeftPosition,\n\tcalculateTopPosition\n} from '../MrlMenu/utilities';\n\ninterface SubMenuPosition {\n\tleft: string;\n\ttop: string;\n}\n\n/**\n * Calculates the position of the sub menu element\n *\n * @param triggerRef - The trigger element ref\n * @param menuRef - The menu element ref\n * @param isSubMenu - Is the menu a sub menu\n * @param isOpen - Is the element visible\n * @param originalMenuRect - The menu element rect\n * @param disable - Should the menu be disabled\n * @returns The sub menu position\n */\nexport const useSubMenuElementPosition = (\n\ttriggerRef: RefObject<HTMLElement> | undefined,\n\tmenuRef: RefObject<HTMLDivElement>,\n\tisSubMenu: boolean,\n\tisOpen: boolean,\n\toriginalMenuRect: DOMRect | null,\n\tdisable?: boolean\n): SubMenuPosition => {\n\tconst [subMenuPosition, setSubMenuPosition] = useState<SubMenuPosition>({\n\t\tleft: 'calc(100% - 5px)',\n\t\ttop: ''\n\t});\n\n\tconst [menuRect, setMenuRect] = useState<DOMRect | null>(null);\n\n\tuseEffect(() => {\n\t\tif (!disable && isOpen && menuRef.current && !originalMenuRect) {\n\t\t\tsetMenuRect(menuRef.current.getBoundingClientRect());\n\t\t}\n\t}, [\n\t\tdisable,\n\t\tisOpen,\n\t\tmenuRef,\n\t\toriginalMenuRect\n\t]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tdisable ||\n\t\t\t!triggerRef?.current ||\n\t\t\t!menuRef.current ||\n\t\t\t!isSubMenu ||\n\t\t\t!isOpen ||\n\t\t\t!menuRect ||\n\t\t\t!isSubMenu\n\t\t)\n\t\t\treturn;\n\n\t\tconst parentMenu = findClosestMenuParent(triggerRef.current);\n\t\tconst triggerRect = triggerRef.current.getBoundingClientRect();\n\n\t\tif (!parentMenu?.parentElement) return;\n\n\t\tconst parentMenuRect = parentMenu.getBoundingClientRect();\n\t\tconst menuHeight = menuRef.current.getBoundingClientRect().height;\n\n\t\tconst overlapsRight = window.innerWidth < menuRect.right;\n\t\tconst overlapsLeft = triggerRect.left - menuRect.width < menuRect.width;\n\n\t\tconst newLeft = calculateLeftPosition(overlapsRight, overlapsLeft, menuRect, triggerRef);\n\n\t\tlet newTop = calculateTopPosition(\n\t\t\toverlapsRight,\n\t\t\toverlapsLeft,\n\t\t\ttriggerRef,\n\t\t\tmenuRect,\n\t\t\tparentMenu,\n\t\t\ttriggerRect\n\t\t);\n\n\t\t// if the submenu height is smaller than the menu height, we want to top align the submenu so it doesn't go off\n\t\t// of the top of the screen\n\t\tif (menuHeight > parentMenuRect.height) {\n\t\t\tnewTop = `0px`;\n\t\t}\n\n\t\tsetSubMenuPosition({ left: newLeft, top: newTop });\n\t}, [\n\t\tdisable,\n\t\ttriggerRef,\n\t\tmenuRef,\n\t\tmenuRect,\n\t\tisSubMenu,\n\t\tisOpen\n\t]);\n\n\treturn subMenuPosition;\n};\n"],"names":["useSubMenuElementPosition","triggerRef","menuRef","isSubMenu","isOpen","originalMenuRect","disable","_useState","useState","left","top","_useState2","_slicedToArray","subMenuPosition","setSubMenuPosition","_useState3","_useState4","menuRect","setMenuRect","useEffect","current","getBoundingClientRect","parentMenu","findClosestMenuParent","triggerRect","parentElement","parentMenuRect","menuHeight","height","overlapsRight","window","innerWidth","right","overlapsLeft","width","newLeft","calculateLeftPosition","newTop","calculateTopPosition"],"mappings":"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"}

package/dist/cjs/components/menu/utilities/flip-position.js

@@ -0,0 +1,24 @@
+'use strict';
+
+/**
+ * Flips the given position to its opposite.
+ *
+ * @param pos - The position to flip. Can be 'left', 'right', 'top', or 'bottom'.
+ * @returns The flipped position. Will be 'right' for 'left', 'left' for 'right', 'bottom' for 'top', and 'top' for 'bottom'.
+ */
+var flipPosition = pos => {
+  switch (pos) {
+    case 'left':
+      return 'right';
+    case 'right':
+      return 'left';
+    case 'top':
+      return 'bottom';
+    case 'bottom':
+      return 'top';
+  }
+  return pos;
+};
+
+exports.flipPosition = flipPosition;
+//# sourceMappingURL=flip-position.js.map

package/dist/cjs/components/menu/utilities/flip-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-position.js","sources":["../../../../../src/components/menu/utilities/flip-position.ts"],"sourcesContent":["import { MenuPosition } from '../constants';\n\n/**\n * Flips the given position to its opposite.\n *\n * @param pos - The position to flip. Can be 'left', 'right', 'top', or 'bottom'.\n * @returns The flipped position. Will be 'right' for 'left', 'left' for 'right', 'bottom' for 'top', and 'top' for 'bottom'.\n */\nexport const flipPosition = (pos: MenuPosition): MenuPosition => {\n\tswitch (pos) {\n\t\tcase 'left':\n\t\t\treturn 'right';\n\t\tcase 'right':\n\t\t\treturn 'left';\n\t\tcase 'top':\n\t\t\treturn 'bottom';\n\t\tcase 'bottom':\n\t\t\treturn 'top';\n\t}\n\treturn pos;\n};\n"],"names":["flipPosition","pos"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,YAAY,GAAIC,GAAiB,IAAmB;AAChE,EAAA,QAAQA,GAAG;AACV,IAAA,KAAK,MAAM;AACV,MAAA,OAAO,OAAO;AACf,IAAA,KAAK,OAAO;AACX,MAAA,OAAO,MAAM;AACd,IAAA,KAAK,KAAK;AACT,MAAA,OAAO,QAAQ;AAChB,IAAA,KAAK,QAAQ;AACZ,MAAA,OAAO,KAAK;AACd;AACA,EAAA,OAAOA,GAAG;AACX;;;;"}

package/dist/cjs/components/menu/utilities/get-scrollable-parent.js

@@ -0,0 +1,24 @@
+'use strict';
+
+/**
+ * Returns the closest scrollable parent of the provided element.
+ *
+ * @param element - The element to start from
+ * @returns The closest scrollable ancestor or the document's scrolling element
+ */
+function getScrollableParent(element) {
+  if (!element) return window;
+  var current = element;
+  while (current && current !== document.body) {
+    var overflowY = window.getComputedStyle(current).overflowY;
+    var isScrollable = ['auto', 'scroll', 'overlay'].includes(overflowY);
+    if (isScrollable && current.scrollHeight > current.clientHeight) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return window;
+}
+
+exports.getScrollableParent = getScrollableParent;
+//# sourceMappingURL=get-scrollable-parent.js.map

package/dist/cjs/components/menu/utilities/get-scrollable-parent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-scrollable-parent.js","sources":["../../../../../src/components/menu/utilities/get-scrollable-parent.ts"],"sourcesContent":["/**\n * Returns the closest scrollable parent of the provided element.\n *\n * @param element - The element to start from\n * @returns The closest scrollable ancestor or the document's scrolling element\n */\nexport function getScrollableParent(element: HTMLElement | null): HTMLElement | Window {\n\tif (!element) return window;\n\n\tlet current: HTMLElement | null = element;\n\n\twhile (current && current !== document.body) {\n\t\tconst overflowY = window.getComputedStyle(current).overflowY;\n\t\tconst isScrollable = ['auto', 'scroll', 'overlay'].includes(overflowY);\n\n\t\tif (isScrollable && current.scrollHeight > current.clientHeight) {\n\t\t\treturn current;\n\t\t}\n\n\t\tcurrent = current.parentElement;\n\t}\n\n\treturn window;\n}\n"],"names":["getScrollableParent","element","window","current","document","body","overflowY","getComputedStyle","isScrollable","includes","scrollHeight","clientHeight","parentElement"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,mBAAmBA,CAACC,OAA2B,EAAwB;AACtF,EAAA,IAAI,CAACA,OAAO,EAAE,OAAOC,MAAM;EAE3B,IAAIC,OAA2B,GAAGF,OAAO;AAEzC,EAAA,OAAOE,OAAO,IAAIA,OAAO,KAAKC,QAAQ,CAACC,IAAI,EAAE;IAC5C,IAAMC,SAAS,GAAGJ,MAAM,CAACK,gBAAgB,CAACJ,OAAO,CAAC,CAACG,SAAS;AAC5D,IAAA,IAAME,YAAY,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,CAACC,QAAQ,CAACH,SAAS,CAAC;IAEtE,IAAIE,YAAY,IAAIL,OAAO,CAACO,YAAY,GAAGP,OAAO,CAACQ,YAAY,EAAE;AAChE,MAAA,OAAOR,OAAO;AACf,IAAA;IAEAA,OAAO,GAAGA,OAAO,CAACS,aAAa;AAChC,EAAA;AAEA,EAAA,OAAOV,MAAM;AACd;;;;"}