@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-avUr.1

package/dist/cjs/components/loader/MrlSpinner/MrlSpinner.module.css

@@ -0,0 +1,98 @@
+@keyframes spin--Jnujm {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.MrlSpinner-container--jyBxd {
+  height: var(--mrl-spacing-06);
+  overflow: hidden;
+  position: relative;
+  width: var(--mrl-spacing-06);
+}
+.MrlSpinner-container--xsmall--12m-l {
+  align-items: center;
+  display: flex;
+  height: var(--mrl-spacing-05);
+  justify-content: center;
+  width: var(--mrl-spacing-05);
+}
+.MrlSpinner-container--medium--wsy20 {
+  height: var(--mrl-spacing-07);
+  width: var(--mrl-spacing-07);
+}
+.MrlSpinner-container--large--WyXIK {
+  height: var(--mrl-spacing-09);
+  width: var(--mrl-spacing-09);
+}
+.MrlSpinner-container--large--WyXIK.MrlSpinner-container--logo--tmSHs {
+  height: 93px;
+}
+
+.MrlSpinner--xYJKA {
+  align-items: center;
+  animation: 500ms spin--Jnujm var(--mrl-timing-m3) infinite;
+  display: flex;
+  height: var(--mrl-spacing-06);
+  justify-content: center;
+  width: var(--mrl-spacing-06);
+}
+.MrlSpinner--xYJKA::before {
+  background: conic-gradient(from 11.31deg at 50% 50%, rgba(var(--mrl-blue-70), 0) 0deg, rgba(var(--mrl-blue-70), 0) 0.26deg, rgba(var(--mrl-blue-70), 0) 60deg, rgba(var(--mrl-blue-70), 0.26) 114.38deg, rgba(var(--mrl-blue-70), 1) 217.5deg, rgba(var(--mrl-blue-70), 1) 360deg);
+  border-radius: 6px;
+  clip-path: path("M10 1c0-.552-.449-1.005-.999-.95C3.947.55 0 4.813 0 10c0 5.523 4.477 10 10 10s10-4.477 10-10a9.987 9.987 0 0 0-4.152-8.112c-.452-.327-1.073-.154-1.347.332-.268.477-.099 1.077.337 1.408a8 8 0 1 1-5.836-1.566C9.55 1.993 10 1.552 10 1Z");
+  content: "";
+  display: block;
+  height: 20px;
+  width: 20px;
+}
+.MrlSpinner--xsmall--B4qhm {
+  height: var(--mrl-spacing-06);
+  width: var(--mrl-spacing-06);
+}
+.MrlSpinner--xsmall--B4qhm::before {
+  transform: scale(0.6);
+}
+.MrlSpinner--medium--ez6JK {
+  height: var(--mrl-spacing-07);
+  width: var(--mrl-spacing-07);
+}
+.MrlSpinner--medium--ez6JK::before {
+  transform: scale(1.2);
+}
+.MrlSpinner--large--xL-m0 {
+  height: var(--mrl-spacing-09);
+  width: var(--mrl-spacing-09);
+}
+.MrlSpinner--large--xL-m0::before {
+  transform: scale(2);
+}
+.MrlSpinner--inverse--Gz0IY::before {
+  background: conic-gradient(from 11.31deg at 50% 50%, rgba(var(--mrl-white), 0) 0deg, rgba(var(--mrl-white), 0) 0.26deg, rgba(var(--mrl-white), 0) 60deg, rgba(var(--mrl-white), 0.26) 114.38deg, rgba(var(--mrl-white), 1) 217.5deg, rgba(var(--mrl-white), 1) 360deg);
+}
+
+.MrlSpinner-container--logo--tmSHs {
+  text-align: center;
+}
+.MrlSpinner-container--logo--tmSHs.MrlSpinner-container--jyBxd {
+  display: block;
+  min-height: calc(var(--mrl-spacing-12) + var(--mrl-spacing-02));
+  width: 99px;
+}
+.MrlSpinner-container--logo--tmSHs .MrlSpinner--xYJKA {
+  margin: 0 auto;
+}
+
+.MrlSpinnerLogo--v-Y-u {
+  display: block;
+  margin-top: var(--mrl-spacing-07);
+  width: 99px;
+}
+
+@media (prefers-reduced-motion) {
+  .MrlSpinner--xYJKA {
+    animation: 1.5s spin--Jnujm linear 4;
+  }
+}

package/dist/cjs/components/loader/MrlSpinner/MrlSpinner.module.scss.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlSpinner.module.css");
+exports.default = {
+	"MrlSpinner-container": "MrlSpinner-container--jyBxd",
+	"MrlSpinner-container--xsmall": "MrlSpinner-container--xsmall--12m-l",
+	"MrlSpinner-container--medium": "MrlSpinner-container--medium--wsy20",
+	"MrlSpinner-container--large": "MrlSpinner-container--large--WyXIK",
+	"MrlSpinner-container--logo": "MrlSpinner-container--logo--tmSHs",
+	"MrlSpinner": "MrlSpinner--xYJKA",
+	"spin": "spin--Jnujm",
+	"MrlSpinner--xsmall": "MrlSpinner--xsmall--B4qhm",
+	"MrlSpinner--medium": "MrlSpinner--medium--ez6JK",
+	"MrlSpinner--large": "MrlSpinner--large--xL-m0",
+	"MrlSpinner--inverse": "MrlSpinner--inverse--Gz0IY",
+	"MrlSpinnerLogo": "MrlSpinnerLogo--v-Y-u"
+};

package/dist/cjs/components/loader/MrlSpinner/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlSpinner"), exports);

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spinnerDefaults = exports.progressBarDefaults = void 0;
+/**
+ * Default values for props on the MrlProgressBar component;
+ * Shared between the component and Storybook
+ */
+exports.progressBarDefaults = {
+    percent: 0,
+    showText: false,
+    name: 'Progress Bar'
+};
+/**
+ * Default values for props on the MrlSpinner component;
+ * Shared between the component and Storybook
+ */
+exports.spinnerDefaults = {
+    kind: 'default',
+    role: 'status',
+    size: 'small',
+    text: 'Loading',
+    logo: false
+};

package/dist/cjs/components/loader/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlProgressBar"), exports);
+__exportStar(require("./MrlSpinner"), exports);
+__exportStar(require("./constants"), exports);

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

@@ -0,0 +1,472 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlMenu = void 0;
+const React = __importStar(require("react"));
+const MrlPortal_1 = require("../../portal/MrlPortal");
+const useTriggerPosition_1 = require("../../../hooks/useTriggerPosition");
+const useClickOutside_1 = require("../../../hooks/useClickOutside");
+const useSubMenuElementPosition_1 = require("../hooks/useSubMenuElementPosition");
+const layers_1 = require("../../../utils/layers");
+const utils_1 = require("../../../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const MrlMenuContext_1 = require("../context/MrlMenuContext");
+const MrlMenu_module_scss_1 = __importDefault(require("./MrlMenu.module.scss.js"));
+const MrlMenuItem_module_scss_1 = __importDefault(require("../MrlMenuItem/MrlMenuItem.module.scss.js"));
+const web_1 = require("@react-spring/web");
+const isTouch_1 = require("../../../utils/isTouch");
+const get_scrollable_parent_1 = require("../utilities/get-scrollable-parent");
+const useMenuScroll_1 = require("../hooks/useMenuScroll");
+const 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(_a) {
+    var { actionState = { actionType: null, isOpen: false }, alignment = 'center', children, closeOnScroll = false, closeParent, customPosition, clickOutsideEvent = 'mouseup', disableArrowOpen, disableFlipping = false, id, isInternal = false, isSubMenu = false, spacing = 'default', menuOffset = 10, portalProps = { id: layers_1.PORTAL_LAYERS.MENU.name }, position = 'bottom', triggerStopPropagation = false, onClose, triggerRef } = _a, remainingProps = __rest(_a, ["actionState", "alignment", "children", "closeOnScroll", "closeParent", "customPosition", "clickOutsideEvent", "disableArrowOpen", "disableFlipping", "id", "isInternal", "isSubMenu", "spacing", "menuOffset", "portalProps", "position", "triggerStopPropagation", "onClose", "triggerRef"]);
+    const defaultOpenState = position === 'static' || false;
+    const [state, setState] = React.useState({
+        actionType: null,
+        isOpen: defaultOpenState
+    });
+    const menuRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    const [menuItems, setMenuItems] = React.useState([]);
+    const [menuRect, setMenuRect] = React.useState(null);
+    /**
+     * Checks if the trigger element is disabled
+     * @returns {boolean} - true if the trigger element is disabled, false otherwise
+     */
+    const isTriggerDisabled = React.useCallback(() => {
+        return (0, utils_1.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
+     */
+    const toggleMenuTrigger = React.useCallback((e) => {
+        if (isTriggerDisabled())
+            return;
+        if (triggerStopPropagation) {
+            (0, utils_1.preventDefault)(e);
+        }
+        setState((prevState) => ({ actionType: 'click', isOpen: !prevState.isOpen }));
+    }, [triggerStopPropagation, isTriggerDisabled]);
+    /**
+     * Used to display the menu when hovering over a menu item that has a submenu
+     */
+    const showMenuHover = React.useCallback(() => {
+        setState({ actionType: 'click', isOpen: true });
+    }, []);
+    const showMenuTap = React.useCallback(() => {
+        setState((prevState) => ({ actionType: 'click', isOpen: !prevState.isOpen }));
+    }, []);
+    const hideMenuHover = React.useCallback((event) => {
+        const 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
+     */
+    const toggleMenuKey = React.useCallback((e) => {
+        const openMenu = () => {
+            if (isTriggerDisabled())
+                return;
+            setState({ actionType: e.key, isOpen: true });
+        };
+        if (!state.isOpen) {
+            if (isSubMenu) {
+                switch (e.key) {
+                    case 'ArrowRight':
+                    case 'Enter':
+                    case ' ':
+                        (0, utils_1.preventDefault)(e);
+                        openMenu();
+                }
+                return;
+            }
+            switch (e.key) {
+                case 'ArrowDown':
+                case 'ArrowUp':
+                    if (!disableArrowOpen && !isTriggerDisabled()) {
+                        (0, utils_1.preventDefault)(e);
+                        openMenu();
+                    }
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (isTriggerDisabled())
+                        return;
+                    (0, utils_1.preventDefault)(e);
+                    openMenu();
+            }
+        }
+    }, [state.isOpen, isTriggerDisabled, disableArrowOpen, isSubMenu]);
+    const closeMenu = React.useCallback((shouldCloseParent = 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
+     */
+    const disableClickOutside = !state.isOpen || position === 'static';
+    (0, useClickOutside_1.useClickOutside)(menuRef, triggerRef, clickOutsideEvent, closeMenu, disableClickOutside);
+    const handleMenuKeyUp = (e) => {
+        const actions = ['ArrowUp', 'ArrowDown', 'ArrowRight', 'Enter', 'Escape', ' '];
+        if (actions.includes(e.key)) {
+            (0, utils_1.preventDefault)(e);
+        }
+    };
+    /**
+     * Focus management when someone is using a keyboard to navigate the menu
+     * @param e - keyboard event
+     */
+    const handleMenuKey = (e) => {
+        var _a, _b, _c;
+        const currentIndex = menuItems.findIndex((item) => document.activeElement === item);
+        let nextIndex;
+        if (state.isOpen) {
+            switch (e.key) {
+                case 'ArrowDown':
+                    (0, utils_1.preventDefault)(e);
+                    nextIndex = currentIndex < menuItems.length - 1 ? currentIndex + 1 : currentIndex;
+                    (_a = menuItems[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                    break;
+                case 'ArrowUp':
+                    (0, utils_1.preventDefault)(e);
+                    nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+                    (_b = menuItems[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+                    break;
+                case 'ArrowRight':
+                case 'ArrowLeft':
+                    (0, utils_1.preventDefault)(e);
+                    break;
+                case 'Escape':
+                    (0, utils_1.preventDefault)(e);
+                    (_c = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                    closeMenu(false);
+                    break;
+                case 'Tab':
+                    if (!isSubMenu && position !== 'static') {
+                        if (e.shiftKey) {
+                            // Handle shift + tab: move focus to the previous item
+                            (0, utils_1.preventDefault)(e);
+                            if (triggerRef) {
+                                const prevElement = (0, utils_1.findAdjacentInteractiveElement)(triggerRef, 'previous');
+                                prevElement === null || prevElement === void 0 ? void 0 : prevElement.focus();
+                            }
+                        }
+                        else {
+                            // Regular tab: close the menu or move to the next item
+                            (0, utils_1.preventDefault)(e);
+                            if (triggerRef) {
+                                const nextElement = (0, utils_1.findAdjacentInteractiveElement)(triggerRef);
+                                nextElement === null || nextElement === void 0 ? void 0 : nextElement.focus();
+                            }
+                        }
+                        closeMenu();
+                    }
+                    break;
+            }
+        }
+    };
+    /**
+     * useEffect hooks to handle menu state changes
+     */
+    React.useEffect(() => {
+        if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) {
+            triggerRef.current.setAttribute('aria-haspopup', 'menu');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    React.useEffect(() => {
+        if (position === 'static') {
+            setState({ actionType: 'click', isOpen: true });
+        }
+    }, [position]);
+    React.useEffect(() => {
+        var _a;
+        (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', state.isOpen.toString());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state.isOpen]);
+    React.useEffect(() => {
+        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.useEffect(() => {
+        const triggerElement = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current;
+        const menuElement = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current;
+        const menuItems = menuElement === null || menuElement === void 0 ? void 0 : menuElement.querySelectorAll(MENU_ITEM_SELECTOR);
+        let scrollableParent;
+        if (triggerElement) {
+            triggerElement.addEventListener('mousedown', utils_1.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 ((0, isTouch_1.isTouchDevice)()) {
+                    triggerElement.addEventListener('touchend', showMenuTap);
+                }
+                if (menuElement) {
+                    menuElement.addEventListener('mouseover', showMenuHover);
+                    menuElement.addEventListener('mouseout', hideMenuHover);
+                }
+            }
+            if (closeOnScroll) {
+                scrollableParent = (0, get_scrollable_parent_1.getScrollableParent)(triggerElement);
+                if (scrollableParent) {
+                    scrollableParent.addEventListener('scroll', () => closeMenu(), {
+                        capture: true,
+                        passive: true
+                    });
+                }
+            }
+            return () => {
+                triggerElement.removeEventListener('mousedown', utils_1.preventDefault);
+                if (!isSubMenu)
+                    triggerElement.removeEventListener('click', toggleMenuTrigger);
+                triggerElement.removeEventListener('keydown', toggleMenuKey);
+                if (menuItems) {
+                    menuItems.forEach((item) => {
+                        if (!item.getAttribute('aria-haspopup')) {
+                            item.removeEventListener('mousedown', () => closeMenu());
+                        }
+                    });
+                }
+                if (isSubMenu) {
+                    triggerElement.removeEventListener('mouseover', showMenuHover);
+                    triggerElement.removeEventListener('mouseout', hideMenuHover);
+                    if ((0, isTouch_1.isTouchDevice)()) {
+                        triggerElement.removeEventListener('touchstart', showMenuHover);
+                    }
+                    if (menuElement) {
+                        menuElement.removeEventListener('mouseover', showMenuHover);
+                        menuElement.removeEventListener('mouseout', hideMenuHover);
+                    }
+                }
+                if (closeOnScroll && scrollableParent) {
+                    scrollableParent.removeEventListener('scroll', () => 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.useEffect(() => {
+        var _a, _b, _c, _d;
+        if (state.isOpen) {
+            const foundMenuItems = Array.from(((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(MENU_ITEM_SELECTOR)) || []);
+            setMenuItems(foundMenuItems);
+        }
+        if (state.isOpen && isSubMenu) {
+            (_b = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _b === void 0 ? void 0 : _b.classList.add(MrlMenuItem_module_scss_1.default['MrlMenuItem--item--submenuOpen']);
+        }
+        else if (!state.isOpen && isSubMenu) {
+            (_c = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _c === void 0 ? void 0 : _c.classList.remove(MrlMenuItem_module_scss_1.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) {
+            const newRect = (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.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.useEffect(() => {
+        if (menuItems.length > 0) {
+            let menuItemToFocus;
+            switch (state.actionType) {
+                case 'Enter':
+                case 'ArrowDown':
+                case ' ':
+                    menuItemToFocus = menuItems[0];
+                    menuItemToFocus === null || menuItemToFocus === void 0 ? void 0 : menuItemToFocus.focus();
+                    break;
+                case 'ArrowUp':
+                    menuItemToFocus = menuItems[menuItems.length - 1];
+                    menuItemToFocus === null || menuItemToFocus === void 0 ? void 0 : menuItemToFocus.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(() => {
+                        if (listRef.current) {
+                            listRef.current.scrollTo(0, listRef.current.scrollHeight);
+                        }
+                    }, 20);
+            }
+            if (isSubMenu && state.actionType === 'ArrowRight') {
+                menuItemToFocus = menuItems[0];
+                menuItemToFocus === null || menuItemToFocus === void 0 ? void 0 : menuItemToFocus.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.
+     */
+    const 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.
+     */
+    const menuScroll = (0, useMenuScroll_1.useMenuScroll)(triggerRef, listRef, position, menuOffset, state.isOpen, disableMenuScroll);
+    /**
+     * Primary menu positioning, alignment, and transition styling
+     *
+     * This hook is only enabled if isSubMenu is FALSE
+     */
+    const disableTriggerPosition = isSubMenu || !state.isOpen || position === 'static';
+    const menuPositionStyles = (0, useTriggerPosition_1.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
+     */
+    const subMenuPosition = (0, useSubMenuElementPosition_1.useSubMenuElementPosition)(triggerRef, menuRef, isSubMenu, state.isOpen, menuRect, 
+    // disable the subelement positioning if it's not a submenu
+    !isSubMenu);
+    const inlineStyles = {
+        menu: {
+            left: menuPositionStyles.left,
+            position: 'fixed',
+            top: menuPositionStyles.top
+        },
+        submenu: {
+            left: subMenuPosition.left,
+            top: subMenuPosition.top
+        }
+    };
+    /**
+     * React Spring transitions for the menu
+     */
+    const 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)' }
+    };
+    const transitionStatic = {
+        config: { duration: 0 },
+        enter: { opacity: 1, transform: 'translateY(0)' }
+    };
+    const transitions = (0, web_1.useTransition)(state.isOpen, position === 'static' ? transitionStatic : transitionConfig);
+    const menuClasses = (0, classnames_1.default)(MrlMenu_module_scss_1.default['MrlMenu'], 'MrlMenu', {
+        [MrlMenu_module_scss_1.default['MrlMenu--submenu']]: isSubMenu,
+        [MrlMenu_module_scss_1.default.open]: state.isOpen,
+        [MrlMenu_module_scss_1.default['MrlMenu--compact']]: spacing === 'compact',
+        [MrlMenu_module_scss_1.default['MrlMenu--static']]: position === 'static',
+        [MrlMenu_module_scss_1.default['MrlMenu--internal']]: isInternal,
+        [MrlMenu_module_scss_1.default['MrlMenu--scrolling']]: menuScroll.isScrolling,
+        [MrlMenu_module_scss_1.default['MrlMenu--ignore']]: position === 'ignore'
+    });
+    const positionStyles = isSubMenu
+        ? inlineStyles.submenu
+        : position !== 'static'
+            ? inlineStyles.menu
+            : {};
+    const menuScrollStyles = (menuScroll.maxHeight !== undefined && { maxHeight: menuScroll.maxHeight }) || undefined;
+    const renderMenu = () => {
+        return (React.createElement(React.Fragment, null, transitions((style, item) => item && (React.createElement(web_1.animated.div, Object.assign({ className: menuClasses, id: id, style: Object.assign(Object.assign({}, positionStyles), style), onKeyUp: handleMenuKeyUp, onKeyDown: handleMenuKey, ref: menuRef, role: "none" }, remainingProps),
+            React.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
+    const parentContext = React.useContext(MrlMenuContext_1.MrlMenuContext);
+    const contextTriggerRef = isSubMenu ? parentContext === null || parentContext === void 0 ? void 0 : parentContext.triggerRef : triggerRef;
+    return (React.createElement(MrlMenuContext_1.MrlMenuContext.Provider, { value: {
+            closeMenu,
+            closeParent: !isSubMenu ? closeMenu : undefined,
+            triggerRef: contextTriggerRef
+        } }, isSubMenu || position === 'static' ? (renderMenu()) : (React.createElement(MrlPortal_1.MrlPortal, Object.assign({ layer: portalProps.layer || layers_1.PORTAL_LAYERS.MENU }, portalProps), renderMenu()))));
+    /* eslint-enable */
+}
+exports.MrlMenu = MrlMenu;
+MrlMenu.componentType = 'Menu';