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

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

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

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

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

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

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

@@ -1,81 +0,0 @@
-/**
- * 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

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

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

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

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

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

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