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

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

@@ -0,0 +1,442 @@
+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;
+};
+import * as React from 'react';
+import { MrlPortal } from '../../portal/MrlPortal';
+import { useTriggerPosition } from '../../../hooks/useTriggerPosition';
+import { useClickOutside } from '../../../hooks/useClickOutside';
+import { useSubMenuElementPosition } from '../hooks/useSubMenuElementPosition';
+import { PORTAL_LAYERS } from '../../../utils/layers';
+import { findAdjacentInteractiveElement, preventDefault, isElementAriaDisabled } from '../../../utils';
+import classnames from 'classnames';
+import { MrlMenuContext } from '../context/MrlMenuContext';
+import styles from './MrlMenu.module.scss.js';
+import itemStyles from '../MrlMenuItem/MrlMenuItem.module.scss.js';
+import { useTransition, animated } from '@react-spring/web';
+import { isTouchDevice } from '../../../utils/isTouch';
+import { getScrollableParent } from '../utilities/get-scrollable-parent';
+import { useMenuScroll } from '../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
+ */
+export 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: 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 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) {
+            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 ' ':
+                        preventDefault(e);
+                        openMenu();
+                }
+                return;
+            }
+            switch (e.key) {
+                case 'ArrowDown':
+                case 'ArrowUp':
+                    if (!disableArrowOpen && !isTriggerDisabled()) {
+                        preventDefault(e);
+                        openMenu();
+                    }
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (isTriggerDisabled())
+                        return;
+                    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';
+    useClickOutside(menuRef, triggerRef, clickOutsideEvent, closeMenu, disableClickOutside);
+    const handleMenuKeyUp = (e) => {
+        const actions = ['ArrowUp', 'ArrowDown', 'ArrowRight', 'Enter', 'Escape', ' '];
+        if (actions.includes(e.key)) {
+            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':
+                    preventDefault(e);
+                    nextIndex = currentIndex < menuItems.length - 1 ? currentIndex + 1 : currentIndex;
+                    (_a = menuItems[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                    break;
+                case 'ArrowUp':
+                    preventDefault(e);
+                    nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+                    (_b = menuItems[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+                    break;
+                case 'ArrowRight':
+                case 'ArrowLeft':
+                    preventDefault(e);
+                    break;
+                case 'Escape':
+                    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
+                            preventDefault(e);
+                            if (triggerRef) {
+                                const prevElement = 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(e);
+                            if (triggerRef) {
+                                const nextElement = 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', 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 (isTouchDevice()) {
+                    triggerElement.addEventListener('touchend', showMenuTap);
+                }
+                if (menuElement) {
+                    menuElement.addEventListener('mouseover', showMenuHover);
+                    menuElement.addEventListener('mouseout', hideMenuHover);
+                }
+            }
+            if (closeOnScroll) {
+                scrollableParent = getScrollableParent(triggerElement);
+                if (scrollableParent) {
+                    scrollableParent.addEventListener('scroll', () => closeMenu(), {
+                        capture: true,
+                        passive: true
+                    });
+                }
+            }
+            return () => {
+                triggerElement.removeEventListener('mousedown', 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 (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(itemStyles['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(itemStyles['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 = 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 = 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 = 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 = useTransition(state.isOpen, position === 'static' ? transitionStatic : transitionConfig);
+    const menuClasses = classnames(styles['MrlMenu'], 'MrlMenu', {
+        [styles['MrlMenu--submenu']]: isSubMenu,
+        [styles.open]: state.isOpen,
+        [styles['MrlMenu--compact']]: spacing === 'compact',
+        [styles['MrlMenu--static']]: position === 'static',
+        [styles['MrlMenu--internal']]: isInternal,
+        [styles['MrlMenu--scrolling']]: menuScroll.isScrolling,
+        [styles['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(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);
+    const contextTriggerRef = isSubMenu ? parentContext === null || parentContext === void 0 ? void 0 : parentContext.triggerRef : triggerRef;
+    return (React.createElement(MrlMenuContext.Provider, { value: {
+            closeMenu,
+            closeParent: !isSubMenu ? closeMenu : undefined,
+            triggerRef: contextTriggerRef
+        } }, isSubMenu || position === 'static' ? (renderMenu()) : (React.createElement(MrlPortal, Object.assign({ layer: portalProps.layer || PORTAL_LAYERS.MENU }, portalProps), renderMenu()))));
+    /* eslint-enable */
+}
+MrlMenu.componentType = 'Menu';

package/dist/esm/components/menu/MrlMenu/MrlMenu.module.css

@@ -0,0 +1,41 @@
+.MrlMenu--qA8g1 {
+  background: var(--mrl-color-background);
+  border-radius: var(--mrl-border-radius-functional-large);
+  box-shadow: var(--mrl-shadows-raised);
+  flex-direction: column;
+  opacity: 0;
+  overflow: visible;
+  z-index: 500;
+}
+.MrlMenu--qA8g1 ul[role=menu] {
+  min-height: var(--mrl-spacing-10);
+  overflow-x: visible;
+  padding: var(--mrl-spacing-04);
+}
+.MrlMenu--internal--tT8nK {
+  box-shadow: none;
+}
+.MrlMenu--internal--tT8nK ul[role=menu] {
+  padding: 0;
+}
+.MrlMenu--compact--BJPOI ul[role=menu] {
+  padding: var(--mrl-space-stack-related);
+}
+.MrlMenu--scrolling--RzEb4 ul[role=menu] {
+  box-sizing: border-box;
+  min-height: calc(3 * var(--mrl-spacing-08) + 3 * var(--mrl-spacing-03));
+  overflow: hidden auto;
+}
+.MrlMenu--ignore--mcm7y {
+  max-height: calc(100vh - 32px);
+}
+.MrlMenu--ignore--mcm7y ul[role=menu] {
+  overflow: hidden auto;
+}
+.MrlMenu--submenu--L9zHN {
+  left: 97%;
+  position: absolute;
+}
+.MrlMenu--qA8g1.open--4Zy6p {
+  display: flex;
+}

package/dist/esm/components/menu/MrlMenu/MrlMenu.module.scss.js

@@ -0,0 +1,10 @@
+import "./MrlMenu.module.css";
+export default {
+	"MrlMenu": "MrlMenu--qA8g1",
+	"MrlMenu--internal": "MrlMenu--internal--tT8nK",
+	"MrlMenu--compact": "MrlMenu--compact--BJPOI",
+	"MrlMenu--scrolling": "MrlMenu--scrolling--RzEb4",
+	"MrlMenu--ignore": "MrlMenu--ignore--mcm7y",
+	"MrlMenu--submenu": "MrlMenu--submenu--L9zHN",
+	"open": "open--4Zy6p"
+};

package/dist/esm/components/menu/MrlMenu/index.js

@@ -0,0 +1 @@
+export * from './MrlMenu';

package/dist/esm/components/menu/MrlMenu/utilities.js

@@ -0,0 +1,81 @@
+/**
+ * Find the closest menu parent of an element
+ *
+ * @param el - The element to start searching from
+ * @returns The closest menu parent or null if none is found
+ */
+export const findClosestMenuParent = (el) => el === null || el === void 0 ? void 0 : el.closest('[role="menu"]');
+/**
+ * Calculate the horizontal positioning of the submenu
+ *
+ * @param overlapsRight - Whether the menu overlaps the right side of the screen
+ * @param overlapsLeft - Whether the menu overlaps the left side of the screen
+ * @param menuRect - The bounding rectangle of the menu
+ * @param triggerRef - The ref of the trigger element
+ * @returns The left position of the menu
+ */
+export const calculateLeftPosition = (overlapsRight, overlapsLeft, menuRect, triggerRef) => {
+    var _a;
+    if (overlapsRight && overlapsLeft) {
+        // if we overlap on the left and right, provide an offset value so the menu
+        // isn't flush left with the trigger element (per design specs)
+        return '55px';
+    }
+    else if (overlapsRight) {
+        // if we overlap on the right, move the menu to the left side of the trigger
+        return `-${menuRect.width - 5}px`;
+    }
+    else if (triggerRef.current) {
+        // otherwise display on the right
+        return `${((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) + 13}px`;
+    }
+    return '0';
+};
+/**
+ * Calculate vertical positioning of the submenu
+ *
+ * @param overlapsRight - Whether the menu overlaps the right side of the screen
+ * @param overlapsLeft - Whether the menu overlaps the left side of the screen
+ * @param triggerRef - The ref of the trigger element
+ * @param menuRect - The bounding rectangle of the menu
+ * @param parentMenu - The parent menu element
+ * @param triggerRect - The bounding rectangle of the trigger element
+ * @returns The top position of the menu
+ */
+export const calculateTopPosition = (overlapsRight, overlapsLeft, triggerRef, menuRect, parentMenu, triggerRect) => {
+    if (triggerRef.current) {
+        const parentContainer = parentMenu.parentElement;
+        if (parentContainer) {
+            const menuBottom = triggerRect.top + menuRect.height;
+            const parentRect = parentContainer.getBoundingClientRect();
+            // if we overlap both left and right, we want to position the menu above or below the trigger
+            if (overlapsRight && overlapsLeft) {
+                // if the menu overlaps and is below the trigger, position it above, otherwise position it below
+                return menuBottom > window.innerHeight
+                    ? `${triggerRef.current.offsetTop - menuRect.height - 21 - parentMenu.scrollTop}px`
+                    : `${triggerRef.current.offsetTop + triggerRect.height - parentMenu.scrollTop}px`;
+            }
+            else if (menuBottom > parentRect.bottom) {
+                // if the menu's bottom edge is below the parent container's bottom, align bottom
+                const topPosition = parentRect.height - menuRect.height;
+                const offset = hasOverflowY(parentMenu) ? 20 : 0;
+                return `${topPosition - offset}px`;
+            }
+            else {
+                // otherwise align it with the top of the trigger
+                return `${triggerRef.current.offsetTop - parentMenu.scrollTop - 12}px`;
+            }
+        }
+    }
+    return '0';
+};
+/*
+ * Check if an element has overflow-y set to auto
+ *
+ * @param element - The element to check
+ * @returns Whether the element has overflow-y set to auto
+ */
+const hasOverflowY = (element) => {
+    const style = window.getComputedStyle(element);
+    return style.overflowY === 'auto';
+};

package/dist/esm/components/menu/MrlMenuGroup/MrlMenuGroup.js

@@ -0,0 +1,29 @@
+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;
+};
+import { MrlTextHeading } from '../../text';
+import { MrlDivider } from '../../divider';
+import * as React from 'react';
+import styles from './MrlMenuGroup.module.scss.js';
+/**
+ * MrlMenuGroup
+ * @param props - component properties
+ * @returns JSX.Element
+ */
+export const MrlMenuGroup = (_a) => {
+    var { children, divider = true, groupLabel } = _a, rest = __rest(_a, ["children", "divider", "groupLabel"]);
+    return (React.createElement("li", Object.assign({ role: "none" }, rest),
+        groupLabel && (React.createElement(MrlTextHeading, { attrs: {
+                className: styles['MrlMenuGroup--label']
+            }, hierarchy: "primary", kind: "title", level: "2", size: "small" }, groupLabel)),
+        React.createElement("ul", { role: "none" }, children),
+        divider && React.createElement(MrlDivider, null)));
+};

package/dist/esm/components/menu/MrlMenuGroup/MrlMenuGroup.module.css

@@ -0,0 +1,3 @@
+.MrlMenuGroup--label--NWFQ2 {
+  margin-bottom: var(--mrl-spacing-03);
+}

package/dist/esm/components/menu/MrlMenuGroup/MrlMenuGroup.module.scss.js

@@ -0,0 +1,4 @@
+import "./MrlMenuGroup.module.css";
+export default {
+	"MrlMenuGroup--label": "MrlMenuGroup--label--NWFQ2"
+};

package/dist/esm/components/menu/MrlMenuGroup/index.js

@@ -0,0 +1 @@
+export * from './MrlMenuGroup';