@muraldevkit/ui-toolkit 4.66.0-dev-DhSN.1 → 4.66.0-dev-T3Jw.1

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

@@ -1,98 +0,0 @@
-@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

@@ -1,17 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

@@ -1,23 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-"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

@@ -1,472 +0,0 @@
-"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';