@contentful/f36-menu 4.0.0

package/dist/module.js

@@ -0,0 +1,700 @@
+import $eBAEH$react, {useRef as $eBAEH$useRef, useEffect as $eBAEH$useEffect, useCallback as $eBAEH$useCallback, useMemo as $eBAEH$useMemo, useState as $eBAEH$useState} from "react";
+import {useId as $eBAEH$useId, mergeRefs as $eBAEH$mergeRefs} from "@contentful/f36-core";
+import {Popover as $eBAEH$Popover} from "@contentful/f36-popover";
+import {cx as $eBAEH$cx, css as $eBAEH$css} from "emotion";
+import $eBAEH$contentfulf36tokens from "@contentful/f36-tokens";
+import {SectionHeading as $eBAEH$SectionHeading} from "@contentful/f36-typography";
+import {ChevronRightIcon as $eBAEH$ChevronRightIcon} from "@contentful/f36-icons";
+
+
+
+
+const $d3c8cb97d16f8911$var$ARROW_KEY_TYPES = {
+    vertical: {
+        prev: 'ArrowUp',
+        next: 'ArrowDown'
+    },
+    horizontal: {
+        prev: 'ArrowLeft',
+        next: 'ArrowRight'
+    }
+};
+const $d3c8cb97d16f8911$export$e8d01079a7f85a7 = ({ itemsContainerRef: itemsContainerRef , itemsSelector: itemsSelector , keyType: keyType = 'vertical'  })=>{
+    const [focusedIndex, setFocusedIndex] = $eBAEH$useState(0);
+    const handleArrowsKeyDown = $eBAEH$useCallback((event)=>{
+        const container = itemsContainerRef.current;
+        if (!container) return;
+        const items = container.querySelectorAll(itemsSelector);
+        if (items.length === 0) return;
+        const lastItemIndex = items.length - 1;
+        const focusFirstItem = ()=>setFocusedIndex(0)
+        ;
+        const focusLastItem = ()=>setFocusedIndex(lastItemIndex)
+        ;
+        const focusNextItem = ()=>{
+            if (focusedIndex === lastItemIndex) focusFirstItem();
+            else setFocusedIndex(focusedIndex + 1);
+        };
+        const focusPrevItem = ()=>{
+            if (focusedIndex === 0) focusLastItem();
+            else setFocusedIndex(focusedIndex - 1);
+        };
+        const keyToFnMap = {
+            [$d3c8cb97d16f8911$var$ARROW_KEY_TYPES[keyType].next]: focusNextItem,
+            [$d3c8cb97d16f8911$var$ARROW_KEY_TYPES[keyType].prev]: focusPrevItem
+        };
+        const fn = keyToFnMap[event.key];
+        if (fn) {
+            event.preventDefault();
+            fn();
+        }
+    }, [
+        focusedIndex,
+        itemsSelector,
+        itemsContainerRef,
+        keyType
+    ]);
+    return {
+        focusedIndex: focusedIndex,
+        handleArrowsKeyDown: handleArrowsKeyDown,
+        setFocusedIndex: setFocusedIndex
+    };
+};
+
+
+
+
+const $c66e4ce1999d7489$var$MenuContext = $eBAEH$react.createContext(undefined);
+const $c66e4ce1999d7489$export$21c7ab35b39f78ec = ()=>{
+    const context = $eBAEH$react.useContext($c66e4ce1999d7489$var$MenuContext);
+    if (context === undefined) throw new Error('useMenuContext must be used within a MenuContextProvider');
+    return context;
+};
+const $c66e4ce1999d7489$export$2cad3fd48ac06579 = $c66e4ce1999d7489$var$MenuContext.Provider;
+
+
+const $815624c5c2e33d2d$var$MENU_ITEMS_SELECTOR = '[role="menuitem"]:not(:disabled)';
+function $815624c5c2e33d2d$export$d9b273488cd8ce6f(props) {
+    const { closeOnSelect: closeOnSelect = true , closeOnBlur: closeOnBlur = true , closeOnEsc: closeOnEsc = true , children: children , onOpen: onOpen , ...otherProps } = props;
+    const { isOpen: isOpen , handleOpen: handleOpen , handleClose: handleClose , isControlled: isControlled  } = $815624c5c2e33d2d$var$useMenuOpenState(props);
+    const triggerRef = $eBAEH$useRef(null);
+    const menuListRef = $eBAEH$useRef(null);
+    const menuId = $eBAEH$useId(null, 'menu');
+    const { focusedIndex: focusedIndex , handleArrowsKeyDown: handleArrowsKeyDown , setFocusedIndex: setFocusedIndex  } = $d3c8cb97d16f8911$export$e8d01079a7f85a7({
+        itemsContainerRef: menuListRef,
+        itemsSelector: $815624c5c2e33d2d$var$MENU_ITEMS_SELECTOR
+    });
+    $eBAEH$useEffect(()=>{
+        if (isOpen && menuListRef.current) {
+            const menuItems = menuListRef.current.querySelectorAll($815624c5c2e33d2d$var$MENU_ITEMS_SELECTOR);
+            if (menuItems.length > 0 && focusedIndex < menuItems.length) // timeout trick to prevent scroll from jumping
+            // when the popover is not positioned correctly yet in the opening phase
+            setTimeout(()=>{
+                menuItems[focusedIndex].focus({
+                    preventScroll: false
+                });
+            }, 0);
+        }
+    }, [
+        isOpen,
+        focusedIndex
+    ]);
+    const focusMenuItem = $eBAEH$useCallback((item)=>{
+        const menuItems = menuListRef.current.querySelectorAll($815624c5c2e33d2d$var$MENU_ITEMS_SELECTOR);
+        const itemIndex = [
+            ...menuItems
+        ].findIndex((menuItem)=>item === menuItem
+        );
+        if (itemIndex !== -1) setFocusedIndex(itemIndex);
+    }, [
+        setFocusedIndex
+    ]);
+    const closeAndFocusTrigger = $eBAEH$useCallback(()=>{
+        var ref;
+        handleClose();
+        (ref = triggerRef.current) === null || ref === void 0 ? void 0 : ref.focus({
+            preventScroll: true
+        });
+    }, [
+        handleClose
+    ]);
+    const handleMenuListKeyDown = $eBAEH$useCallback((event)=>{
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            closeAndFocusTrigger();
+            return;
+        } // we don't want to propagate other keydown events except `Tab`
+        event.stopPropagation();
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            closeAndFocusTrigger();
+            return;
+        }
+        handleArrowsKeyDown(event);
+    }, [
+        closeAndFocusTrigger,
+        handleArrowsKeyDown
+    ]);
+    const contextValue = $eBAEH$useMemo(()=>{
+        return {
+            isOpen: isOpen,
+            menuId: menuId,
+            focusMenuItem: focusMenuItem,
+            getTriggerProps: (_props = {
+            }, _ref = null)=>{
+                return {
+                    onClick: (event)=>{
+                        var ref;
+                        // if the user made component controlled by providing isOpen prop
+                        // but onOpen callback is not provided, we won't add toggle logic
+                        // to the trigger component. So they can make any toggle logic on their own.
+                        const isFullyControlled = isControlled && !onOpen;
+                        if (!isFullyControlled) {
+                            if (isOpen) handleClose();
+                            else handleOpen();
+                        }
+                        (ref = _props.onClick) === null || ref === void 0 ? void 0 : ref.call(_props, event);
+                    },
+                    ref: $eBAEH$mergeRefs(triggerRef, _ref)
+                };
+            },
+            getMenuListProps: (_props = {
+            }, _ref = null)=>{
+                return {
+                    ref: $eBAEH$mergeRefs(menuListRef, _ref),
+                    onKeyDown: (event)=>{
+                        var ref;
+                        handleMenuListKeyDown(event);
+                        (ref = _props.onKeyDown) === null || ref === void 0 ? void 0 : ref.call(_props, event);
+                    },
+                    onBlur: (event)=>{
+                        var ref, ref1, ref2, ref3;
+                        (ref = _props.onBlur) === null || ref === void 0 ? void 0 : ref.call(_props, event);
+                        if (!closeOnBlur) return;
+                        const relatedTarget = event.relatedTarget;
+                        const targetIsMenu = menuListRef.current === relatedTarget || ((ref1 = menuListRef.current) === null || ref1 === void 0 ? void 0 : ref1.contains(relatedTarget));
+                        const targetIsTrigger = triggerRef.current === relatedTarget || ((ref2 = triggerRef.current) === null || ref2 === void 0 ? void 0 : ref2.contains(relatedTarget));
+                        const targetIsSubmenu = (relatedTarget === null || relatedTarget === void 0 ? void 0 : (ref3 = relatedTarget.parentElement) === null || ref3 === void 0 ? void 0 : ref3.dataset.parentMenu) === menuId;
+                        if (targetIsMenu || targetIsTrigger || targetIsSubmenu) {
+                            event.stopPropagation();
+                            return;
+                        }
+                        handleClose();
+                    }
+                };
+            },
+            getMenuItemProps: (_props = {
+            })=>{
+                return {
+                    onClick: (event)=>{
+                        var ref;
+                        (ref = _props.onClick) === null || ref === void 0 ? void 0 : ref.call(_props, event);
+                        const isSubmenuTrigger = Boolean(event.target.getAttribute('aria-haspopup'));
+                        if (closeOnSelect && !isSubmenuTrigger) closeAndFocusTrigger();
+                    }
+                };
+            },
+            propsToPropagateToSubmenus: {
+                closeOnSelect: closeOnSelect,
+                closeOnBlur: closeOnBlur,
+                closeOnEsc: closeOnEsc
+            }
+        };
+    }, [
+        menuId,
+        isOpen,
+        handleMenuListKeyDown,
+        closeOnSelect,
+        handleClose,
+        handleOpen,
+        focusMenuItem,
+        closeOnBlur,
+        closeOnEsc,
+        closeAndFocusTrigger,
+        isControlled,
+        onOpen
+    ]);
+    return(/*#__PURE__*/ $eBAEH$react.createElement($c66e4ce1999d7489$export$2cad3fd48ac06579, {
+        value: contextValue
+    }, /*#__PURE__*/ $eBAEH$react.createElement($eBAEH$Popover, {
+        ...otherProps,
+        isOpen: isOpen,
+        onClose: handleClose,
+        id: menuId,
+        closeOnEsc: closeOnEsc,
+        autoFocus: false,
+        closeOnBlur: false
+    }, children)));
+}
+const $815624c5c2e33d2d$var$useMenuOpenState = (props)=>{
+    const { isOpen: isOpen , defaultIsOpen: defaultIsOpen , onOpen: onOpen , onClose: onClose  } = props;
+    const [isOpenState, setIsOpen] = $eBAEH$useState(defaultIsOpen || false);
+    const isControlled = isOpen !== undefined;
+    const isOpenValue = isControlled ? isOpen : isOpenState;
+    const handleClose = $eBAEH$useCallback(()=>{
+        if (!isControlled) setIsOpen(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [
+        isControlled,
+        onClose
+    ]);
+    const handleOpen = $eBAEH$useCallback(()=>{
+        if (!isControlled) setIsOpen(true);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    }, [
+        isControlled,
+        onOpen
+    ]);
+    return {
+        isOpen: isOpenValue,
+        isControlled: isControlled,
+        handleClose: handleClose,
+        handleOpen: handleOpen
+    };
+};
+
+
+
+
+
+
+const $5f642d41e782730b$var$SubmenuContext = $eBAEH$react.createContext(undefined);
+const $5f642d41e782730b$export$958673a266cbe049 = ()=>{
+    const context = $eBAEH$react.useContext($5f642d41e782730b$var$SubmenuContext);
+    return context;
+};
+const $5f642d41e782730b$export$81b3dbd1f003f0c7 = $5f642d41e782730b$var$SubmenuContext.Provider;
+
+
+
+
+
+const $e1ca220e91193b42$export$396ce14bde1b7929 = ()=>{
+    return(/*#__PURE__*/ $eBAEH$css({
+        position: 'sticky',
+        top: 0,
+        left: 0,
+        backgroundColor: $eBAEH$contentfulf36tokens.colorWhite,
+        borderBottom: `1px solid ${$eBAEH$contentfulf36tokens.gray300}`,
+        padding: `${$eBAEH$contentfulf36tokens.spacingXs} 0`,
+        zIndex: 1001
+    }));
+};
+const $e1ca220e91193b42$export$fd3dbc8a890448f = ()=>{
+    return(/*#__PURE__*/ $eBAEH$css({
+        position: 'sticky',
+        bottom: 0,
+        left: 0,
+        backgroundColor: $eBAEH$contentfulf36tokens.colorWhite,
+        borderTop: `1px solid ${$eBAEH$contentfulf36tokens.gray300}`,
+        padding: `${$eBAEH$contentfulf36tokens.spacingXs} 0`,
+        zIndex: 1001
+    }));
+};
+const $e1ca220e91193b42$export$10ce7613b0465b57 = (props)=>({
+        container: /*#__PURE__*/ $eBAEH$css({
+            overflowY: 'auto',
+            position: 'relative',
+            padding: 0,
+            paddingTop: props.hasStickyHeader ? 0 : $eBAEH$contentfulf36tokens.spacingXs,
+            paddingBottom: props.hasStickyFooter ? 0 : $eBAEH$contentfulf36tokens.spacingXs
+        })
+    })
+;
+
+
+
+
+
+const $042de7e263db0945$export$77451990ddb9d17c = (props)=>{
+    const { children: children , testId: testId = 'cf-ui-menu-list-header' , className: className , ...otherProps } = props;
+    const styles = $e1ca220e91193b42$export$396ce14bde1b7929();
+    return(/*#__PURE__*/ $eBAEH$react.createElement("div", {
+        "data-test-id": testId,
+        className: $eBAEH$cx(styles, className),
+        ...otherProps
+    }, children));
+};
+$042de7e263db0945$export$77451990ddb9d17c.displayName = 'MenuListHeader';
+
+
+
+
+
+const $5a5dcb1ec14dca9d$export$3e8a81e7ad0650f4 = (props)=>{
+    const { children: children , testId: testId = 'cf-ui-menu-list-footer' , className: className , ...otherProps } = props;
+    const styles = $e1ca220e91193b42$export$fd3dbc8a890448f();
+    return(/*#__PURE__*/ $eBAEH$react.createElement("div", {
+        "data-test-id": testId,
+        className: $eBAEH$cx(styles, className),
+        ...otherProps
+    }, children));
+};
+$5a5dcb1ec14dca9d$export$3e8a81e7ad0650f4.displayName = 'MenuListFooter';
+
+
+function $511d273ec51beeae$var$assertChild(child) {
+    var ref;
+    return Boolean(child === null || child === void 0 ? void 0 : (ref = child.type) === null || ref === void 0 ? void 0 : ref.displayName);
+}
+const $511d273ec51beeae$var$_MenuList = (props, ref)=>{
+    const { children: children , testId: testId = 'cf-ui-menu-list' , className: className , ...otherProps } = props;
+    const { getMenuListProps: getMenuListProps  } = $c66e4ce1999d7489$export$21c7ab35b39f78ec();
+    const submenuContext = $5f642d41e782730b$export$958673a266cbe049();
+    let header = null;
+    let footer = null;
+    const items = [];
+    $eBAEH$react.Children.forEach(children, (child)=>{
+        let appendChild = true;
+        if ($511d273ec51beeae$var$assertChild(child)) {
+            if (child.type.displayName === $042de7e263db0945$export$77451990ddb9d17c.displayName) {
+                header = child;
+                appendChild = false;
+            } else if (child.type.displayName === $5a5dcb1ec14dca9d$export$3e8a81e7ad0650f4.displayName) {
+                footer = child;
+                appendChild = false;
+            }
+        }
+        if (appendChild) items.push(child);
+    });
+    const styles = $e1ca220e91193b42$export$10ce7613b0465b57({
+        hasStickyHeader: Boolean(header),
+        hasStickyFooter: Boolean(footer)
+    });
+    const extendedOtherProps = submenuContext ? submenuContext.getSubmenuListProps(otherProps) : otherProps;
+    return(/*#__PURE__*/ $eBAEH$react.createElement($eBAEH$Popover.Content, {
+        role: "menu",
+        ...extendedOtherProps,
+        ...getMenuListProps(extendedOtherProps, ref),
+        className: $eBAEH$cx(styles.container, className),
+        testId: testId
+    }, header, items, footer));
+};
+const $511d273ec51beeae$export$d4c4e98c5044dc8 = /*#__PURE__*/ $eBAEH$react.forwardRef($511d273ec51beeae$var$_MenuList);
+
+
+
+
+
+
+
+
+
+
+
+const $0cc53a77e90ceec6$export$adaad53e003c74d0 = ()=>{
+    return {
+        root: /*#__PURE__*/ $eBAEH$css({
+            display: 'block',
+            width: '100%',
+            background: 'none',
+            border: 0,
+            margin: 0,
+            outline: 'none',
+            fontSize: $eBAEH$contentfulf36tokens.fontSizeM,
+            lineHeight: $eBAEH$contentfulf36tokens.lineHeightM,
+            fontWeight: $eBAEH$contentfulf36tokens.fontWeightNormal,
+            position: 'relative',
+            textAlign: 'left',
+            padding: `${$eBAEH$contentfulf36tokens.spacingXs} ${$eBAEH$contentfulf36tokens.spacingM}`,
+            wordBreak: 'break-word',
+            whiteSpace: 'break-spaces',
+            cursor: 'pointer',
+            hyphens: 'auto',
+            minWidth: '150px',
+            textDecoration: 'none',
+            color: $eBAEH$contentfulf36tokens.gray800,
+            '&:focus, &:hover': {
+                backgroundColor: $eBAEH$contentfulf36tokens.gray100
+            },
+            '&:active': {
+                backgroundColor: $eBAEH$contentfulf36tokens.gray200
+            },
+            '&:disabled': {
+                opacity: 0.5,
+                cursor: 'auto'
+            }
+        })
+    };
+};
+
+
+const $ea346231d142cd67$var$MENU_ITEM_DEFAULT_TAG = 'button';
+function $ea346231d142cd67$var$_MenuItem(props, ref) {
+    const { testId: testId , className: className , as: as , isInitiallyFocused: isInitiallyFocused , ...otherProps } = props;
+    const id = $eBAEH$useId(null, 'menu-item');
+    const itemTestId = testId || `cf-ui-${id}`;
+    const styles = $0cc53a77e90ceec6$export$adaad53e003c74d0();
+    const { getMenuItemProps: getMenuItemProps , focusMenuItem: focusMenuItem  } = $c66e4ce1999d7489$export$21c7ab35b39f78ec();
+    const itemRef = $eBAEH$useRef(null);
+    $eBAEH$useEffect(()=>{
+        if (isInitiallyFocused && itemRef.current) focusMenuItem(itemRef.current);
+    }, [
+        isInitiallyFocused,
+        focusMenuItem
+    ]);
+    const Element = as !== null && as !== void 0 ? as : $ea346231d142cd67$var$MENU_ITEM_DEFAULT_TAG;
+    return(/*#__PURE__*/ $eBAEH$react.createElement(Element, {
+        role: "menuitem",
+        ...otherProps,
+        ...getMenuItemProps(otherProps),
+        className: $eBAEH$cx(styles.root, className),
+        "data-test-id": itemTestId,
+        ref: $eBAEH$mergeRefs(itemRef, ref),
+        tabIndex: -1
+    }, props.children));
+}
+const $ea346231d142cd67$export$2ce376c2cc3355c8 = /*#__PURE__*/ $eBAEH$react.forwardRef($ea346231d142cd67$var$_MenuItem);
+
+
+
+
+
+const $94016b6f927b504d$export$27d2ad3c5815583e = (props)=>{
+    const child = $eBAEH$react.Children.only(props.children);
+    const { getTriggerProps: getTriggerProps  } = $c66e4ce1999d7489$export$21c7ab35b39f78ec();
+    return(/*#__PURE__*/ $eBAEH$react.createElement($eBAEH$Popover.Trigger, null, /*#__PURE__*/ $eBAEH$react.cloneElement(child, {
+        ...getTriggerProps(child.props, child.ref),
+        ['aria-haspopup']: 'menu'
+    })));
+};
+
+
+
+
+
+
+const $90fd1006b83bc4dd$export$4605da6f9a8ef405 = ()=>/*#__PURE__*/ $eBAEH$css({
+        border: 'none',
+        width: '100%',
+        height: '1px',
+        background: $eBAEH$contentfulf36tokens.gray300,
+        margin: `${$eBAEH$contentfulf36tokens.spacingXs} 0`
+    })
+;
+
+
+const $a6a319b65dbbd900$export$acb07b4664ac227c = (props)=>{
+    const { children: children , testId: testId = 'cf-ui-menu-divider' , className: className , ...otherProps } = props;
+    const styles = $90fd1006b83bc4dd$export$4605da6f9a8ef405();
+    return(/*#__PURE__*/ $eBAEH$react.createElement("hr", {
+        "aria-orientation": "horizontal",
+        "data-test-id": testId,
+        className: $eBAEH$cx(styles, className),
+        ...otherProps
+    }));
+};
+
+
+
+
+
+
+const $7f43fb9a4d140447$export$2698fa8b3a0a79e6 = ()=>/*#__PURE__*/ $eBAEH$css({
+        textAlign: 'left',
+        padding: `${$eBAEH$contentfulf36tokens.spacingXs} ${$eBAEH$contentfulf36tokens.spacingM}`,
+        lineHeight: $eBAEH$contentfulf36tokens.lineHeightM,
+        'hr + &': {
+            marginTop: '-8px'
+        }
+    })
+;
+
+
+
+const $7c6385c774644580$export$5d1e6c648985631e = (props)=>{
+    const { children: children , testId: testId = 'cf-ui-menu-section-title' , className: className , ...otherProps } = props;
+    const styles = $7f43fb9a4d140447$export$2698fa8b3a0a79e6();
+    return(/*#__PURE__*/ $eBAEH$react.createElement($eBAEH$SectionHeading // Techincally, menus cannot contain headings according to ARIA.
+    , {
+        // We hide the heading from assistive technology, and only use it
+        // as a label
+        "aria-hidden": "true",
+        testId: testId,
+        className: $eBAEH$cx(styles, className),
+        marginBottom: "none",
+        ...otherProps
+    }, children));
+};
+
+
+
+
+
+
+
+const $407bba9f98210b35$var$SUBMENU_OFFSET = [
+    -8,
+    2
+];
+const $407bba9f98210b35$export$49229ebf838c159b = (props)=>{
+    const { onClose: onClose , onOpen: onOpen , ...otherProps } = props;
+    const { isOpen: isParentMenuOpen , menuId: menuId , propsToPropagateToSubmenus: propsToPropagateToSubmenus  } = $c66e4ce1999d7489$export$21c7ab35b39f78ec();
+    const triggerRef = $eBAEH$useRef(null);
+    const mouseLeaveTimerRef = $eBAEH$useRef(null);
+    const [isOpen, setIsOpen] = $eBAEH$useState(false);
+    const handleOpen = $eBAEH$useCallback(()=>{
+        setIsOpen(true);
+        window.clearTimeout(mouseLeaveTimerRef.current);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    }, [
+        onOpen
+    ]);
+    const handleClose = $eBAEH$useCallback(()=>{
+        setIsOpen(false);
+        window.clearTimeout(mouseLeaveTimerRef.current);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [
+        onClose
+    ]);
+    const closeAndFocusTrigger = $eBAEH$useCallback(()=>{
+        var ref;
+        handleClose();
+        (ref = triggerRef.current) === null || ref === void 0 ? void 0 : ref.focus({
+            preventScroll: true
+        });
+    }, [
+        handleClose
+    ]);
+    $eBAEH$useEffect(()=>{
+        // close when parent menu closed
+        if (isParentMenuOpen === false) setIsOpen(false);
+    }, [
+        isParentMenuOpen
+    ]);
+    const contextValue = $eBAEH$useMemo(()=>{
+        return {
+            isOpen: isOpen,
+            getSubmenuListProps: (_props)=>{
+                return {
+                    'data-parent-menu': menuId,
+                    onMouseOver: (event)=>{
+                        var ref;
+                        handleOpen();
+                        (ref = _props.onMouseOver) === null || ref === void 0 ? void 0 : ref.call(_props, event);
+                    },
+                    onMouseLeave: (event)=>{
+                        var ref;
+                        closeAndFocusTrigger();
+                        (ref = _props.onMouseLeave) === null || ref === void 0 ? void 0 : ref.call(_props, event);
+                    }
+                };
+            },
+            getSubmenuTriggerProps: (_props, _ref)=>{
+                return {
+                    ref: $eBAEH$mergeRefs(triggerRef, _ref),
+                    onKeyDown: (event)=>{
+                        var ref;
+                        if (event.key === 'ArrowRight') {
+                            event.preventDefault();
+                            handleOpen();
+                        }
+                        (ref = _props.onKeyDown) === null || ref === void 0 ? void 0 : ref.call(_props, event);
+                    },
+                    onMouseOver: (event)=>{
+                        var ref;
+                        handleOpen();
+                        (ref = _props.onMouseOver) === null || ref === void 0 ? void 0 : ref.call(_props, event);
+                    },
+                    onMouseLeave: (event)=>{
+                        var ref;
+                        mouseLeaveTimerRef.current = window.setTimeout(closeAndFocusTrigger, 300);
+                        (ref = _props.onMouseLeave) === null || ref === void 0 ? void 0 : ref.call(_props, event);
+                    }
+                };
+            }
+        };
+    }, [
+        isOpen,
+        menuId,
+        handleOpen,
+        closeAndFocusTrigger
+    ]);
+    return(/*#__PURE__*/ $eBAEH$react.createElement($5f642d41e782730b$export$81b3dbd1f003f0c7, {
+        value: contextValue
+    }, /*#__PURE__*/ $eBAEH$react.createElement($815624c5c2e33d2d$export$d9b273488cd8ce6f, {
+        ...propsToPropagateToSubmenus,
+        ...otherProps,
+        isOpen: isOpen,
+        onClose: handleClose,
+        onOpen: handleOpen,
+        placement: "right-start",
+        offset: $407bba9f98210b35$var$SUBMENU_OFFSET,
+        isAutoalignmentEnabled: false
+    })));
+};
+
+
+
+
+
+
+
+
+
+
+const $f5b15ecf1bfa860d$export$ce276565acbba1c9 = ()=>{
+    return {
+        root: ({ isActive: isActive  })=>/*#__PURE__*/ $eBAEH$css({
+                display: 'flex',
+                alignItems: 'center',
+                paddingRight: $eBAEH$contentfulf36tokens.spacingXs,
+                ...isActive ? {
+                    backgroundColor: $eBAEH$contentfulf36tokens.gray100
+                } : {
+                }
+            })
+        ,
+        content: /*#__PURE__*/ $eBAEH$css({
+            marginRight: $eBAEH$contentfulf36tokens.spacingM
+        }),
+        icon: /*#__PURE__*/ $eBAEH$css({
+            name: "1hapt0s",
+            styles: "margin-left:auto;fill:currentColor;"
+        })
+    };
+};
+
+
+const $423d6b42721d64f8$var$_SubmenuTrigger = (props, ref)=>{
+    const { className: className , children: children  } = props;
+    const { getSubmenuTriggerProps: getSubmenuTriggerProps , isOpen: isOpen  } = $5f642d41e782730b$export$958673a266cbe049();
+    const styles = $f5b15ecf1bfa860d$export$ce276565acbba1c9();
+    return(/*#__PURE__*/ $eBAEH$react.createElement($94016b6f927b504d$export$27d2ad3c5815583e, null, /*#__PURE__*/ $eBAEH$react.createElement($ea346231d142cd67$export$2ce376c2cc3355c8, {
+        ...props,
+        ...getSubmenuTriggerProps(props, ref),
+        className: $eBAEH$cx(styles.root({
+            isActive: isOpen
+        }), className)
+    }, /*#__PURE__*/ $eBAEH$react.createElement("span", {
+        className: styles.content
+    }, children), /*#__PURE__*/ $eBAEH$react.createElement($eBAEH$ChevronRightIcon, {
+        className: styles.icon
+    }))));
+};
+const $423d6b42721d64f8$export$ecabc99eeffab7ca = /*#__PURE__*/ $eBAEH$react.forwardRef($423d6b42721d64f8$var$_SubmenuTrigger);
+
+
+const $e1cb616583324cbb$export$d9b273488cd8ce6f = $815624c5c2e33d2d$export$d9b273488cd8ce6f;
+$e1cb616583324cbb$export$d9b273488cd8ce6f.List = $511d273ec51beeae$export$d4c4e98c5044dc8;
+$e1cb616583324cbb$export$d9b273488cd8ce6f.ListHeader = $042de7e263db0945$export$77451990ddb9d17c;
+$e1cb616583324cbb$export$d9b273488cd8ce6f.ListFooter = $5a5dcb1ec14dca9d$export$3e8a81e7ad0650f4;
+$e1cb616583324cbb$export$d9b273488cd8ce6f.Item = $ea346231d142cd67$export$2ce376c2cc3355c8;
+$e1cb616583324cbb$export$d9b273488cd8ce6f.Trigger = $94016b6f927b504d$export$27d2ad3c5815583e;
+$e1cb616583324cbb$export$d9b273488cd8ce6f.Divider = $a6a319b65dbbd900$export$acb07b4664ac227c;
+$e1cb616583324cbb$export$d9b273488cd8ce6f.SectionTitle = $7c6385c774644580$export$5d1e6c648985631e;
+$e1cb616583324cbb$export$d9b273488cd8ce6f.Submenu = $407bba9f98210b35$export$49229ebf838c159b;
+$e1cb616583324cbb$export$d9b273488cd8ce6f.SubmenuTrigger = $423d6b42721d64f8$export$ecabc99eeffab7ca;
+
+
+
+
+
+
+
+
+
+
+
+export {$e1cb616583324cbb$export$d9b273488cd8ce6f as Menu, $511d273ec51beeae$export$d4c4e98c5044dc8 as MenuList, $ea346231d142cd67$export$2ce376c2cc3355c8 as MenuItem, $94016b6f927b504d$export$27d2ad3c5815583e as MenuTrigger, $a6a319b65dbbd900$export$acb07b4664ac227c as MenuDivider, $7c6385c774644580$export$5d1e6c648985631e as MenuSectionTitle, $407bba9f98210b35$export$49229ebf838c159b as Submenu, $423d6b42721d64f8$export$ecabc99eeffab7ca as SubmenuTrigger};
+//# sourceMappingURL=module.js.map