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

package/dist/cjs/components/loader/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/components/loader/constants.ts"],"sourcesContent":["type CreateArrayWithLengthX<\n\tLENGTH extends number,\n\tACC extends unknown[] = []\n> = ACC['length'] extends LENGTH ? ACC : CreateArrayWithLengthX<LENGTH, [...ACC, 1]>;\n\ntype NumericRange<\n\tSTART_ARR extends number[],\n\tEND extends number,\n\tACC extends number = never\n> = START_ARR['length'] extends END\n\t? ACC | END\n\t: NumericRange<[...START_ARR, 1], END, ACC | START_ARR['length']>;\n\nexport type ProgressRange = NumericRange<CreateArrayWithLengthX<0>, 100>;\n\n/**\n * Default values for props on the MrlProgressBar component;\n * Shared between the component and Storybook\n */\nexport const progressBarDefaults: ProgressBarComponent = {\n\tpercent: 0,\n\tshowText: false,\n\tname: 'Progress Bar'\n};\n\nexport interface ProgressBarComponent {\n\t/**\n\t * Custom content that lives below the progress bar.\n\t *\n\t * Note: This should be limited to descriptive text regarding\n\t * what is in progress.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Custom class to be applied to the component.\n\t */\n\tclassName?: string;\n\t/**\n\t * Display an infinite loading indicator until completion\n\t *\n\t * Note: do not use with `time`.\n\t */\n\tindeterminate?: boolean;\n\n\t/**\n\t * Name of the progress bar (applied via aria-label)\n\t */\n\tname: string;\n\n\t/**\n\t * The percent complete.\n\t *\n\t * Note: This should be a whole number between 0 and 100.\n\t */\n\tpercent?: ProgressRange;\n\t/**\n\t * Display the percent complete text\n\t */\n\tshowText?: boolean;\n\t/**\n\t * Custom text to use under the progress bar.\n\t */\n\ttext?: string;\n\t/**\n\t * The length of time to reach 100% in milliseconds.\n\t *\n\t * Note: do not use with `indeterminate`.\n\t */\n\ttime?: number;\n}\n\nexport type SpinnerSize = 'large' | 'medium' | 'small' | 'xsmall';\nexport type SpinnerStyle = 'default' | 'inverse';\n\n/**\n * Default values for props on the MrlSpinner component;\n * Shared between the component and Storybook\n */\nexport const spinnerDefaults: SpinnerComponent = {\n\tkind: 'default',\n\trole: 'status',\n\tsize: 'small',\n\ttext: 'Loading',\n\tlogo: false\n};\n\nexport interface SpinnerComponent {\n\t/**\n\t * Custom class to be applied to the component.\n\t */\n\tclassName?: string;\n\t/**\n\t * Display the Mural logo under the spinner.\n\t */\n\tlogo?: boolean;\n\t/**\n\t * Style of the spinner.\n\t */\n\tkind?: SpinnerStyle;\n\t/**\n\t * The role of the spinner.\n\t *\n\t * Note: Use with care. This prop has accessibility implications.\n\t */\n\trole?: string;\n\t/**\n\t * Size of the spinner.\n\t */\n\tsize?: SpinnerSize;\n\t/**\n\t * Hidden text label while loading\n\t */\n\ttext?: string;\n}\n"],"names":["progressBarDefaults","percent","showText","name","spinnerDefaults","kind","role","size","text","logo"],"mappings":";;AAeA;AACA;AACA;AACA;AACO,IAAMA,mBAAyC,GAAG;AACxDC,EAAAA,OAAO,EAAE,CAAC;AACVC,EAAAA,QAAQ,EAAE,KAAK;AACfC,EAAAA,IAAI,EAAE;AACP;AAmDA;AACA;AACA;AACA;AACO,IAAMC,eAAiC,GAAG;AAChDC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,IAAI,EAAE,OAAO;AACbC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,IAAI,EAAE;AACP;;;;;"}

package/dist/cjs/components/menu/MrlMenu/MrlMenu.js

@@ -0,0 +1,570 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index$3 = require('../../../hooks/useTriggerPosition/index.js');
+var index$1 = require('../../../hooks/useClickOutside/index.js');
+var useSubMenuElementPosition = require('../hooks/useSubMenuElementPosition.js');
+var index = require('../../../utils/layers/index.js');
+var classnames = require('classnames');
+var MrlMenuContext = require('../context/MrlMenuContext.js');
+var MrlMenu_module = require('./MrlMenu.module.scss.js');
+var MrlMenuItem_module = require('../MrlMenuItem/MrlMenuItem.module.scss.js');
+var web = require('@react-spring/web');
+var index$2 = require('../../../utils/isTouch/index.js');
+var getScrollableParent = require('../utilities/get-scrollable-parent.js');
+var useMenuScroll = require('../hooks/useMenuScroll.js');
+var isElementAriaDisabled = require('../../../utils/isElementAriaDisabled/isElementAriaDisabled.js');
+var preventDefault = require('../../../utils/preventDefault/preventDefault.js');
+var findAdjacentInteractiveElement = require('../../../utils/findAdjacentInteractiveElement/findAdjacentInteractiveElement.js');
+var MrlPortal = require('../../portal/MrlPortal.js');
+
+function _interopNamespaceDefault(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__*/_interopNamespaceDefault(React);
+
+var _excluded = ["actionState", "alignment", "children", "closeOnScroll", "closeParent", "customPosition", "clickOutsideEvent", "disableArrowOpen", "disableFlipping", "id", "isInternal", "isSubMenu", "spacing", "menuOffset", "portalProps", "position", "triggerStopPropagation", "onClose", "triggerRef"];
+var MENU_ITEM_SELECTOR = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+
+/**
+ * MrlMenu component
+ *
+ * Renders a menu component with alignment relative to a trigger element
+ * @param {MrlMenuProps} props - The props for the MrlMenu component
+ * @returns {Element} - rendered MrlMenu component
+ */
+function MrlMenu(_ref) {
+  var _ref$actionState = _ref.actionState,
+    actionState = _ref$actionState === void 0 ? {
+      actionType: null,
+      isOpen: false
+    } : _ref$actionState,
+    _ref$alignment = _ref.alignment,
+    alignment = _ref$alignment === void 0 ? 'center' : _ref$alignment,
+    children = _ref.children,
+    _ref$closeOnScroll = _ref.closeOnScroll,
+    closeOnScroll = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
+    closeParent = _ref.closeParent,
+    customPosition = _ref.customPosition,
+    _ref$clickOutsideEven = _ref.clickOutsideEvent,
+    clickOutsideEvent = _ref$clickOutsideEven === void 0 ? 'mouseup' : _ref$clickOutsideEven,
+    disableArrowOpen = _ref.disableArrowOpen,
+    _ref$disableFlipping = _ref.disableFlipping,
+    disableFlipping = _ref$disableFlipping === void 0 ? false : _ref$disableFlipping,
+    id = _ref.id,
+    _ref$isInternal = _ref.isInternal,
+    isInternal = _ref$isInternal === void 0 ? false : _ref$isInternal,
+    _ref$isSubMenu = _ref.isSubMenu,
+    isSubMenu = _ref$isSubMenu === void 0 ? false : _ref$isSubMenu,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    _ref$menuOffset = _ref.menuOffset,
+    menuOffset = _ref$menuOffset === void 0 ? 10 : _ref$menuOffset,
+    _ref$portalProps = _ref.portalProps,
+    portalProps = _ref$portalProps === void 0 ? {
+      id: index.PORTAL_LAYERS.MENU.name
+    } : _ref$portalProps,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'bottom' : _ref$position,
+    _ref$triggerStopPropa = _ref.triggerStopPropagation,
+    triggerStopPropagation = _ref$triggerStopPropa === void 0 ? false : _ref$triggerStopPropa,
+    onClose = _ref.onClose,
+    triggerRef = _ref.triggerRef,
+    remainingProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var defaultOpenState = position === 'static' || false;
+  var _React$useState = React__namespace.useState({
+      actionType: null,
+      isOpen: defaultOpenState
+    }),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    state = _React$useState2[0],
+    setState = _React$useState2[1];
+  var menuRef = React__namespace.useRef(null);
+  var listRef = React__namespace.useRef(null);
+  var _React$useState3 = React__namespace.useState([]),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    menuItems = _React$useState4[0],
+    setMenuItems = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(null),
+    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
+    menuRect = _React$useState6[0],
+    setMenuRect = _React$useState6[1];
+
+  /**
+   * Checks if the trigger element is disabled
+   * @returns {boolean} - true if the trigger element is disabled, false otherwise
+   */
+  var isTriggerDisabled = React__namespace.useCallback(function () {
+    return isElementAriaDisabled.isElementAriaDisabled(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
+  }, [triggerRef]);
+
+  /**
+   * Sets up trigger event listeners to open and close the menu
+   * @param e - mouse event
+   */
+  var toggleMenuTrigger = React__namespace.useCallback(function (e) {
+    if (isTriggerDisabled()) return;
+    if (triggerStopPropagation) {
+      preventDefault.preventDefault(e);
+    }
+    setState(function (prevState) {
+      return {
+        actionType: 'click',
+        isOpen: !prevState.isOpen
+      };
+    });
+  }, [triggerStopPropagation, isTriggerDisabled]);
+
+  /**
+   * Used to display the menu when hovering over a menu item that has a submenu
+   */
+  var showMenuHover = React__namespace.useCallback(function () {
+    setState({
+      actionType: 'click',
+      isOpen: true
+    });
+  }, []);
+  var showMenuTap = React__namespace.useCallback(function () {
+    setState(function (prevState) {
+      return {
+        actionType: 'click',
+        isOpen: !prevState.isOpen
+      };
+    });
+  }, []);
+  var hideMenuHover = React__namespace.useCallback(function (event) {
+    var relatedTarget = event.relatedTarget;
+
+    // If the related target is not a child of the menu, close the menu
+    // This prevents the menu from closing when hovering over a submenu item or trigger
+    if (triggerRef && menuRef.current && !menuRef.current.contains(relatedTarget) && triggerRef.current && !triggerRef.current.contains(relatedTarget)) {
+      setState({
+        actionType: null,
+        isOpen: false
+      });
+    }
+  }, [triggerRef]);
+
+  /**
+   * Sets up trigger event listeners to open and close the menu with a keyboard
+   */
+  var toggleMenuKey = React__namespace.useCallback(function (e) {
+    var openMenu = function openMenu() {
+      if (isTriggerDisabled()) return;
+      setState({
+        actionType: e.key,
+        isOpen: true
+      });
+    };
+    if (!state.isOpen) {
+      if (isSubMenu) {
+        switch (e.key) {
+          case 'ArrowRight':
+          case 'Enter':
+          case ' ':
+            preventDefault.preventDefault(e);
+            openMenu();
+        }
+        return;
+      }
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          if (!disableArrowOpen && !isTriggerDisabled()) {
+            preventDefault.preventDefault(e);
+            openMenu();
+          }
+          break;
+        case 'Enter':
+        case ' ':
+          if (isTriggerDisabled()) return;
+          preventDefault.preventDefault(e);
+          openMenu();
+      }
+    }
+  }, [state.isOpen, isTriggerDisabled, disableArrowOpen, isSubMenu]);
+  var closeMenu = React__namespace.useCallback(function () {
+    var shouldCloseParent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    if (position === 'static') return;
+
+    /**
+     * What is closeParent?
+     *
+     * It is passed from the context provider to the MenuItem (which helps render our submenus)
+     * When we render the submenu, we pass the closeMenu function as "closeParent" to the submenu.
+     * This allows us to trigger closing the parent menu when the submenu is closed. And that's
+     * what this call is for.
+     */
+    if (shouldCloseParent && closeParent) closeParent();
+    setState({
+      actionType: null,
+      isOpen: false
+    });
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [position, closeParent, onClose]);
+
+  /**
+   * Click outside to dismiss the menu
+   * @param e
+   */
+  var disableClickOutside = !state.isOpen || position === 'static';
+  index$1.useClickOutside(menuRef, triggerRef, clickOutsideEvent, closeMenu, disableClickOutside);
+  var handleMenuKeyUp = function handleMenuKeyUp(e) {
+    var actions = ['ArrowUp', 'ArrowDown', 'ArrowRight', 'Enter', 'Escape', ' '];
+    if (actions.includes(e.key)) {
+      preventDefault.preventDefault(e);
+    }
+  };
+
+  /**
+   * Focus management when someone is using a keyboard to navigate the menu
+   * @param e - keyboard event
+   */
+  var handleMenuKey = function handleMenuKey(e) {
+    var _menuItems$nextIndex, _menuItems$nextIndex2, _triggerRef$current;
+    var currentIndex = menuItems.findIndex(function (item) {
+      return document.activeElement === item;
+    });
+    var nextIndex;
+    if (state.isOpen) {
+      switch (e.key) {
+        case 'ArrowDown':
+          preventDefault.preventDefault(e);
+          nextIndex = currentIndex < menuItems.length - 1 ? currentIndex + 1 : currentIndex;
+          (_menuItems$nextIndex = menuItems[nextIndex]) === null || _menuItems$nextIndex === void 0 ? void 0 : _menuItems$nextIndex.focus();
+          break;
+        case 'ArrowUp':
+          preventDefault.preventDefault(e);
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+          (_menuItems$nextIndex2 = menuItems[nextIndex]) === null || _menuItems$nextIndex2 === void 0 ? void 0 : _menuItems$nextIndex2.focus();
+          break;
+        case 'ArrowRight':
+        case 'ArrowLeft':
+          preventDefault.preventDefault(e);
+          break;
+        case 'Escape':
+          preventDefault.preventDefault(e);
+          triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
+          closeMenu(false);
+          break;
+        case 'Tab':
+          if (!isSubMenu && position !== 'static') {
+            if (e.shiftKey) {
+              // Handle shift + tab: move focus to the previous item
+              preventDefault.preventDefault(e);
+              if (triggerRef) {
+                var prevElement = findAdjacentInteractiveElement.findAdjacentInteractiveElement(triggerRef, 'previous');
+                prevElement === null || prevElement === void 0 ? void 0 : prevElement.focus();
+              }
+            } else {
+              // Regular tab: close the menu or move to the next item
+              preventDefault.preventDefault(e);
+              if (triggerRef) {
+                var nextElement = findAdjacentInteractiveElement.findAdjacentInteractiveElement(triggerRef);
+                nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+              }
+            }
+            closeMenu();
+          }
+          break;
+      }
+    }
+  };
+
+  /**
+   * useEffect hooks to handle menu state changes
+   */
+
+  React__namespace.useEffect(function () {
+    if (triggerRef !== null && triggerRef !== void 0 && triggerRef.current) {
+      triggerRef.current.setAttribute('aria-haspopup', 'menu');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React__namespace.useEffect(function () {
+    if (position === 'static') {
+      setState({
+        actionType: 'click',
+        isOpen: true
+      });
+    }
+  }, [position]);
+  React__namespace.useEffect(function () {
+    var _triggerRef$current2;
+    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.setAttribute('aria-expanded', state.isOpen.toString());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.isOpen]);
+  React__namespace.useEffect(function () {
+    if (!isSubMenu && position !== 'static') setState({
+      actionType: actionState.actionType,
+      isOpen: actionState.isOpen
+    });
+  }, [actionState.isOpen, actionState.actionType, isSubMenu, position]);
+
+  // setup event handlers for mouse, keyboard, and scroll interactions
+  React__namespace.useEffect(function () {
+    var triggerElement = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current;
+    var menuElement = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current;
+    var menuItems = menuElement === null || menuElement === void 0 ? void 0 : menuElement.querySelectorAll(MENU_ITEM_SELECTOR);
+    var scrollableParent;
+    if (triggerElement) {
+      triggerElement.addEventListener('mousedown', preventDefault.preventDefault);
+      if (!isSubMenu) triggerElement.addEventListener('click', toggleMenuTrigger);
+      triggerElement.addEventListener('keydown', toggleMenuKey);
+
+      // Setup event listeners for when the menu is a submenu
+      if (isSubMenu) {
+        triggerElement.addEventListener('mouseover', showMenuHover);
+        triggerElement.addEventListener('mouseout', hideMenuHover);
+        if (index$2.isTouchDevice()) {
+          triggerElement.addEventListener('touchend', showMenuTap);
+        }
+        if (menuElement) {
+          menuElement.addEventListener('mouseover', showMenuHover);
+          menuElement.addEventListener('mouseout', hideMenuHover);
+        }
+      }
+      if (closeOnScroll) {
+        scrollableParent = getScrollableParent.getScrollableParent(triggerElement);
+        if (scrollableParent) {
+          scrollableParent.addEventListener('scroll', function () {
+            return closeMenu();
+          }, {
+            capture: true,
+            passive: true
+          });
+        }
+      }
+      return function () {
+        triggerElement.removeEventListener('mousedown', preventDefault.preventDefault);
+        if (!isSubMenu) triggerElement.removeEventListener('click', toggleMenuTrigger);
+        triggerElement.removeEventListener('keydown', toggleMenuKey);
+        if (menuItems) {
+          menuItems.forEach(function (item) {
+            if (!item.getAttribute('aria-haspopup')) {
+              item.removeEventListener('mousedown', function () {
+                return closeMenu();
+              });
+            }
+          });
+        }
+        if (isSubMenu) {
+          triggerElement.removeEventListener('mouseover', showMenuHover);
+          triggerElement.removeEventListener('mouseout', hideMenuHover);
+          if (index$2.isTouchDevice()) {
+            triggerElement.removeEventListener('touchstart', showMenuHover);
+          }
+          if (menuElement) {
+            menuElement.removeEventListener('mouseover', showMenuHover);
+            menuElement.removeEventListener('mouseout', hideMenuHover);
+          }
+        }
+        if (closeOnScroll && scrollableParent) {
+          scrollableParent.removeEventListener('scroll', function () {
+            return closeMenu();
+          });
+        }
+      };
+    }
+  }, [closeOnScroll, isSubMenu, triggerRef, toggleMenuTrigger, toggleMenuKey, showMenuHover, hideMenuHover, closeMenu, showMenuTap]);
+
+  // This use effect handles a few things when we open the menu:
+  // - making sure that the menu component is aware of it's menu items
+  // - adding a class to the trigger element when the submenu is open for styling
+  // - storing the menu rect in state for positioning calculations
+  React__namespace.useEffect(function () {
+    if (state.isOpen) {
+      var _menuRef$current;
+      var foundMenuItems = Array.from(((_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.querySelectorAll(MENU_ITEM_SELECTOR)) || []);
+      setMenuItems(foundMenuItems);
+    }
+    if (state.isOpen && isSubMenu) {
+      var _triggerRef$current3;
+      triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.classList.add(MrlMenuItem_module.default['MrlMenuItem--item--submenuOpen']);
+    } else if (!state.isOpen && isSubMenu) {
+      var _triggerRef$current4;
+      triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.classList.remove(MrlMenuItem_module.default['MrlMenuItem--item--submenuOpen']);
+    }
+
+    // For consistent submenu calculations, we are storing the menu rect in state
+    // Anytime we need to use the menu rect, we want to make sure the values are based
+    // on the original state of the menu for proper transformations
+    if (!menuRect && menuRef.current) {
+      var _menuRef$current2;
+      var newRect = (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.getBoundingClientRect();
+      setMenuRect(newRect || null);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.isOpen, menuRect, isSubMenu]);
+
+  /**
+   * Focus management for when the menu is opening or closing
+   */
+  React__namespace.useEffect(function () {
+    var _menuItemToFocus, _menuItemToFocus2;
+    if (menuItems.length > 0) {
+      var menuItemToFocus;
+      switch (state.actionType) {
+        case 'Enter':
+        case 'ArrowDown':
+        case ' ':
+          menuItemToFocus = menuItems[0];
+          (_menuItemToFocus = menuItemToFocus) === null || _menuItemToFocus === void 0 ? void 0 : _menuItemToFocus.focus();
+          break;
+        case 'ArrowUp':
+          menuItemToFocus = menuItems[menuItems.length - 1];
+          (_menuItemToFocus2 = menuItemToFocus) === null || _menuItemToFocus2 === void 0 ? void 0 : _menuItemToFocus2.focus();
+
+          // Scroll to the bottom of the menu when the last item is focused
+          // setTimeout is required to ensure the element has been rendered
+          // and the scrollHeight is accurate prior to scrolling
+          setTimeout(function () {
+            if (listRef.current) {
+              listRef.current.scrollTo(0, listRef.current.scrollHeight);
+            }
+          }, 20);
+      }
+      if (isSubMenu && state.actionType === 'ArrowRight') {
+        var _menuItemToFocus3;
+        menuItemToFocus = menuItems[0];
+        (_menuItemToFocus3 = menuItemToFocus) === null || _menuItemToFocus3 === void 0 ? void 0 : _menuItemToFocus3.focus();
+      }
+    }
+  }, [isSubMenu, menuItems, state.actionType]);
+
+  /**
+   * Menu scroll behavior
+   *
+   * When the menu cannot fit in the preferred or flipped position,
+   * this hook constrains the menu height and enables internal scrolling.
+   * Called before useTriggerPosition so that isScrolling can disable flipping,
+   * preventing the positioning hook from fighting the scroll constraint.
+   */
+  var disableMenuScroll = isSubMenu || !state.isOpen || position === 'static' || position === 'ignore';
+
+  /**
+   * Sets overflow (scrolling) on menu when there is no space to display
+   * the menu in the preferred or flipped position.
+   */
+  var menuScroll = useMenuScroll.useMenuScroll(triggerRef, listRef, position, menuOffset, state.isOpen, disableMenuScroll);
+
+  /**
+   * Primary menu positioning, alignment, and transition styling
+   *
+   * This hook is only enabled if isSubMenu is FALSE
+   */
+  var disableTriggerPosition = isSubMenu || !state.isOpen || position === 'static';
+  var menuPositionStyles = index$3.useTriggerPosition(triggerRef, menuRef, {
+    align: alignment,
+    customPosition: customPosition,
+    position: position
+  }, state.isOpen, menuOffset, disableTriggerPosition, disableFlipping || menuScroll.isScrolling);
+
+  /**
+   * Submenu positioning and alignment
+   *
+   * This hook is only enabled if isSubMenu is TRUE
+   */
+  var subMenuPosition = useSubMenuElementPosition.useSubMenuElementPosition(triggerRef, menuRef, isSubMenu, state.isOpen, menuRect,
+  // disable the subelement positioning if it's not a submenu
+  !isSubMenu);
+  var inlineStyles = {
+    menu: {
+      left: menuPositionStyles.left,
+      position: 'fixed',
+      top: menuPositionStyles.top
+    },
+    submenu: {
+      left: subMenuPosition.left,
+      top: subMenuPosition.top
+    }
+  };
+
+  /**
+   * React Spring transitions for the menu
+   */
+  var transitionConfig = {
+    config: {
+      duration: state.isOpen ? 300 : 150
+    },
+    enter: {
+      opacity: 1,
+      transform: 'translateY(0)'
+    },
+    from: {
+      opacity: 0,
+      transform: 'translateY(4px)'
+    },
+    leave: {
+      opacity: 0,
+      transform: 'translateY(4px)'
+    }
+  };
+  var transitionStatic = {
+    config: {
+      duration: 0
+    },
+    enter: {
+      opacity: 1,
+      transform: 'translateY(0)'
+    }
+  };
+  var transitions = web.useTransition(state.isOpen, position === 'static' ? transitionStatic : transitionConfig);
+  var menuClasses = classnames(MrlMenu_module.default['MrlMenu'], 'MrlMenu', _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, MrlMenu_module.default['MrlMenu--submenu'], isSubMenu), MrlMenu_module.default.open, state.isOpen), MrlMenu_module.default['MrlMenu--compact'], spacing === 'compact'), MrlMenu_module.default['MrlMenu--static'], position === 'static'), MrlMenu_module.default['MrlMenu--internal'], isInternal), MrlMenu_module.default['MrlMenu--scrolling'], menuScroll.isScrolling), MrlMenu_module.default['MrlMenu--ignore'], position === 'ignore'));
+  var positionStyles = isSubMenu ? inlineStyles.submenu : position !== 'static' ? inlineStyles.menu : {};
+  var menuScrollStyles = menuScroll.maxHeight !== undefined && {
+    maxHeight: menuScroll.maxHeight
+  } || undefined;
+  var renderMenu = function renderMenu() {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, transitions(function (style, item) {
+      return item && /*#__PURE__*/React__namespace.createElement(web.animated.div, _rollupPluginBabelHelpers.extends({
+        className: menuClasses,
+        id: id,
+        style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, positionStyles), style),
+        onKeyUp: handleMenuKeyUp,
+        onKeyDown: handleMenuKey,
+        ref: menuRef,
+        role: "none"
+      }, remainingProps), /*#__PURE__*/React__namespace.createElement("ul", {
+        ref: listRef,
+        role: "menu",
+        style: menuScrollStyles
+      }, children));
+    }));
+  };
+
+  // For managing and restoring focus to the original menu trigger
+  // Ensures the triggerRef in context is always the parent triggerRef
+  var parentContext = React__namespace.useContext(MrlMenuContext.MrlMenuContext);
+  var contextTriggerRef = isSubMenu ? parentContext === null || parentContext === void 0 ? void 0 : parentContext.triggerRef : triggerRef;
+  return /*#__PURE__*/React__namespace.createElement(MrlMenuContext.MrlMenuContext.Provider, {
+    value: {
+      closeMenu: closeMenu,
+      closeParent: !isSubMenu ? closeMenu : undefined,
+      triggerRef: contextTriggerRef
+    }
+  }, isSubMenu || position === 'static' ? renderMenu() : /*#__PURE__*/React__namespace.createElement(MrlPortal.MrlPortal, _rollupPluginBabelHelpers.extends({
+    layer: portalProps.layer || index.PORTAL_LAYERS.MENU
+  }, portalProps), renderMenu()));
+  /* eslint-enable */
+}
+MrlMenu.componentType = 'Menu';
+
+exports.MrlMenu = MrlMenu;
+//# sourceMappingURL=MrlMenu.js.map