@geotab/zenith 3.10.0-beta.7 → 3.11.0-beta.0

package/dist/menu/components/menuButton.js

@@ -5,18 +5,24 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../../icons/iconChevronLeft");
+const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useDrive_1 = require("../../utils/theme/useDrive");
 const getMenuButtonState_1 = require("../utils/getMenuButtonState");
+const isSafeHref_1 = require("../utils/isSafeHref");
+const getSafeRel_1 = require("../utils/getSafeRel");
 const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className = "", active = null, ref }) => {
     const { hasState, isActive } = (0, getMenuButtonState_1.getMenuButtonState)(active, disabled);
     const driveMenuButtonActionClasses = (0, useDriveClassName_1.useDriveClassName)("zen-menu-button__action");
     const isDrive = (0, useDrive_1.useDrive)();
+    const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
     const linkEvents = (0, react_1.useMemo)(() => ({
         onKeyDown: e => {
             if (e.key === " ") {
                 e.preventDefault();
                 const linkEl = e.target;
+                linkEl.dataset.spaceDown = "1";
                 linkEl.classList.add("zen-menu-button__action--active");
             }
         },
@@ -25,7 +31,10 @@ const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, link, targ
                 e.preventDefault();
                 const linkEl = e.target;
                 linkEl.classList.remove("zen-menu-button__action--active");
-                linkEl.click();
+                if (linkEl.dataset.spaceDown) {
+                    delete linkEl.dataset.spaceDown;
+                    linkEl.click();
+                }
             }
         }
     }), []);
@@ -43,13 +52,13 @@ const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, link, targ
                 (0, react_1.createElement)(icon, {
                     size: isDrive ? "huge" : "large",
                     className: (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__icon"])
-                }), (0, jsx_runtime_1.jsx)("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && ((0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
+                }), (0, jsx_runtime_1.jsx)("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && ((0, jsx_runtime_1.jsx)(ChevronIcon, { size: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
     const linkTemplate = ((0, jsx_runtime_1.jsxs)("a", Object.assign({ "data-id": id, role: "menuitem", className: (0, classNames_1.classNames)([
             "zen-menu-button__action",
             "zen-caption",
             disabled ? "zen-menu-button__action--disabled" : "",
             driveMenuButtonActionClasses || ""
-        ]), href: disabled ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: target, rel: rel }, linkEvents, { children: [!!icon &&
+        ]), href: disabled || !(0, isSafeHref_1.isSafeHref)(link) ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: target, rel: (0, getSafeRel_1.getSafeRel)(rel, target) }, linkEvents, { children: [!!icon &&
                 (0, react_1.createElement)(icon, {
                     size: isDrive ? "huge" : "large",
                     className: "zen-caption__pre-content"

package/dist/menu/components/menuItem.d.ts

@@ -2,6 +2,7 @@ import { FC, ReactElement } from "react";
 import { IMenuButton } from "./menuButton";
 import "./menuItem.less";
 import { TAlignment } from "../../absolute/absolute";
+export { isMenuItem } from "../utils/isMenuItem";
 interface IMenuItemInternal {
     isMobile?: boolean;
     setIsOpen?: (v: boolean) => void;
@@ -12,6 +13,4 @@ export interface IMenuControlledItem extends IMenuItem {
 export interface IMenuItem extends IMenuButton {
     alignment?: TAlignment;
 }
-export declare const isMenuItem: (element: ReactElement | undefined) => boolean;
 export declare const MenuItem: FC<Omit<IMenuItem & IMenuControlledItem & IMenuItemInternal, "hasChildren">>;
-export {};

package/dist/menu/components/menuItem.js

@@ -2,37 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = exports.isMenuItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
 const react_1 = require("react");
 const menuButton_1 = require("./menuButton");
-const controlledMenu_1 = require("../controlledMenu");
 const controlledPopup_1 = require("../../controlledPopup/controlledPopup");
-const pathContext_1 = require("../contexts/pathContext");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const generateId_1 = require("../../commonHelpers/generateId");
-const headerContext_1 = require("../../header/headerContext");
-const menuSeparator_1 = require("./menuSeparator");
-const isMenuItem = (element) => {
-    if (!element || !element.type) {
-        return false;
-    }
-    if (element.type === controlledMenu_1.ControlledMenu.Item) {
-        return true;
-    }
-    if ((typeof element.type === "object" || typeof element.type === "function") && "displayName" in element.type) {
-        return element.type.displayName === "MenuItem";
-    }
-    return false;
-};
-exports.isMenuItem = isMenuItem;
+const useMenuItemCore_1 = require("../utils/useMenuItemCore");
+var isMenuItem_1 = require("../utils/isMenuItem");
+Object.defineProperty(exports, "isMenuItem", { enumerable: true, get: function () { return isMenuItem_1.isMenuItem; } });
 const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment }) => {
-    const aligmentContext = (0, react_1.useContext)(headerContext_1.MenuAlignmentContext);
-    const contentAlignment = alignment || aligmentContext.alignment || "right-top";
-    const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = (0, react_1.useContext)(pathContext_1.PathContext);
-    const memoizedDesktopActionOnClick = (0, react_1.useCallback)((itemId, e) => {
+    const { ref, isOpen, hasChildren, content, openedViaKeyboard, contentAlignment, path, onOpenBranch, handleOpenChange } = (0, useMenuItemCore_1.useMenuItemCore)({
+        id,
+        children,
+        className,
+        alignment,
+        isMobile,
+        setIsOpen,
+        onClick
+    });
+    // MenuButton.onClick signature is (id, e) — adapt the hook's (e)-only handler
+    const memoizedDesktopActionOnClick = (0, react_1.useCallback)((_, e) => {
         setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(false);
-        onClick === null || onClick === void 0 ? void 0 : onClick(itemId, e);
-    }, [setIsOpen, onClick]);
+        onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
+    }, [setIsOpen, onClick, id]);
+    // MenuItem-specific callbacks (not provided by hook)
     const memoizedMobileActionOnClick = (0, react_1.useCallback)((itemId, e) => {
         onOpenBranch(id);
         !link && (onClick === null || onClick === void 0 ? void 0 : onClick(itemId, e));
@@ -50,54 +43,7 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
     }, [onClick, onOpenBranch, id, trigger]);
-    const memoizedOnOpenChange = (0, react_1.useCallback)(() => {
-        closeBranch();
-    }, [closeBranch]);
-    const ref = (0, react_1.useRef)(null);
-    const content = (0, react_1.useMemo)(() => {
-        const cont = [];
-        react_1.Children.map(children, (child) => {
-            if (!child) {
-                return;
-            }
-            if (typeof child === "string") {
-                cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, (0, generateId_1.generateId)()));
-                return;
-            }
-            if ((0, react_1.isValidElement)(child) && (0, menuSeparator_1.isSeparator)(child)) {
-                const clone = (0, react_1.cloneElement)(child, {
-                    key: child.props.key || (0, generateId_1.generateId)()
-                });
-                cont.push(clone);
-                return;
-            }
-            if ((0, exports.isMenuItem)(child)) {
-                const childProps = child.props;
-                const clone = (0, react_1.cloneElement)(child, {
-                    isMobile,
-                    key: childProps.id,
-                    setIsOpen
-                });
-                cont.push(clone);
-                return;
-            }
-            const childProps = child.props;
-            cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, childProps.id || childProps["data-id"] || (0, generateId_1.generateId)()));
-        });
-        return cont;
-    }, [children, isMobile, setIsOpen, className]);
-    const isOpen = (0, react_1.useMemo)(() => path.includes(id), [path, id]);
-    // Track previous isOpen state to detect when submenu opens
-    const wasOpenRef = (0, react_1.useRef)(false);
-    const localOpenedViaKeyboardRef = (0, react_1.useRef)(false);
-    // Capture keyboard navigation state synchronously when isOpen transitions to true
-    if (isOpen && !wasOpenRef.current && navigatedViaKeyboardRef) {
-        localOpenedViaKeyboardRef.current = navigatedViaKeyboardRef.current;
-        navigatedViaKeyboardRef.current = false; // Reset for next navigation
-    }
-    wasOpenRef.current = isOpen;
-    const openedViaKeyboard = localOpenedViaKeyboardRef.current;
-    if (content.length === 0) {
+    if (!hasChildren) {
         return ((0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedDesktopActionOnClick, className: className, active: active, hasChildren: false }, id));
     }
     if (isMobile) {
@@ -113,7 +59,7 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
     else {
         popupTrigger = ((0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: id, ref: ref, name: name, icon: icon, disabled: disabled, hasChildren: true, onClick: memoizedTriggerOnClick, active: active }, id));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [popupTrigger, (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: openedViaKeyboard ? "on" : "withTrigger", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [popupTrigger, (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: openedViaKeyboard ? "on" : "withTrigger", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: handleOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id));
 };
 exports.MenuItem = MenuItem;
 exports.MenuItem.displayName = "MenuItem";

package/dist/menu/contexts/usePathContext.d.ts

@@ -0,0 +1,2 @@
+import { IPathContext } from "./pathContext";
+export declare function usePathContext(): IPathContext;

package/dist/menu/contexts/usePathContext.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePathContext = void 0;
+const react_1 = require("react");
+const pathContext_1 = require("./pathContext");
+function usePathContext() {
+    return (0, react_1.useContext)(pathContext_1.PathContext);
+}
+exports.usePathContext = usePathContext;

package/dist/menu/controlledMenu.js

@@ -2,47 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.ControlledMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/naming-convention, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
 const react_1 = require("react");
-const menuItem_1 = require("./components/menuItem");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const findContent_1 = require("./utils/findContent");
-const findFirstFocusable_1 = require("./utils/findFirstFocusable");
-const findLastFocusable_1 = require("./utils/findLastFocusable");
-const findNextFocusable_1 = require("./utils/findNextFocusable");
-const isButton_1 = require("./utils/isButton");
-const isLink_1 = require("./utils/isLink");
-const findPrevFocusable_1 = require("./utils/findPrevFocusable");
-const menuButton_1 = require("./components/menuButton");
-const iconArrowLeft_1 = require("../icons/iconArrowLeft");
 const controlledPopup_1 = require("../controlledPopup/controlledPopup");
 const mobileSheet_1 = require("../mobileSheet/mobileSheet");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
-const generateId_1 = require("../commonHelpers/generateId");
-const pathProvider_1 = require("./contexts/pathProvider");
-const menuSeparator_1 = require("./components/menuSeparator");
 const focusableSelector_1 = require("../utils/focusableSelector");
+const controlledMenuList_1 = require("./components/controlledMenuList/controlledMenuList");
+const EmbeddedMenuList = controlledMenuList_1.ControlledMenuList;
 const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment, closeOnScroll = true }) => {
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Desktop);
     const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
     const memoizedOnChange = (0, react_1.useCallback)(setIsOpen, [setIsOpen]);
     (0, useDeviceType_1.useDeviceType)(setDeviceType);
     const menuListRef = (0, react_1.useRef)(null);
-    const [path, setPath] = (0, react_1.useState)([]);
-    // Track if the trigger was activated via keyboard
     const openedViaKeyboardRef = (0, react_1.useRef)(false);
-    // Track if submenu was navigated via keyboard (ArrowRight)
-    const navigatedViaKeyboardRef = (0, react_1.useRef)(false);
-    // Track if keyboard is actively being used for navigation (vs mouse/touch)
-    const keyboardActiveRef = (0, react_1.useRef)(false);
-    // Listen for keyboard activation on trigger
     (0, react_1.useEffect)(() => {
         const trigger = triggerRef.current;
         if (!trigger)
             return undefined;
         const handleKeyDown = (e) => {
-            if (e.key === "Enter" || e.key === " ") {
+            if (e.key === "Enter" || e.key === " " || e.key === "ArrowRight") {
                 openedViaKeyboardRef.current = true;
             }
         };
@@ -56,12 +37,6 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
             trigger.removeEventListener("mousedown", handleMouseDown);
         };
     }, [triggerRef]);
-    (0, react_1.useEffect)(() => {
-        if (path.length && !isOpen) {
-            setPath([]);
-        }
-    }, [isOpen, path, setPath]);
-    // Focus the menu list container or first item when menu opens (for keyboard navigation)
     (0, react_1.useEffect)(() => {
         var _a;
         if (isOpen && !isMobile && menuListRef.current) {
@@ -73,157 +48,15 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
             }
         }
     }, [isOpen, isMobile]);
-    const onOpenBranch = (0, react_1.useCallback)((branchId) => {
-        if (!branchId) {
-            return;
-        }
-        if (!path.includes(branchId)) {
-            setPath([...path, branchId]);
-            return;
-        }
-        if (path.includes(branchId)) {
-            setPath(v => {
-                const newPath = [...v];
-                newPath.pop();
-                return newPath;
-            });
-        }
-    }, [setPath, path]);
-    const closeBranch = (0, react_1.useCallback)(() => {
-        setPath(v => {
-            const newPath = [...v];
-            newPath.pop();
-            return newPath;
-        });
-    }, [setPath]);
-    const [content, parent] = (0, react_1.useMemo)(() => {
-        let par = null;
-        let currentChildren = children;
-        if (isMobile && path.length > 0) {
-            const el = (0, findContent_1.findContent)(children, exports.ControlledMenu.Item, path[path.length - 1]);
-            if (el || (0, react_1.isValidElement)(el)) {
-                const elProps = el.props;
-                currentChildren = elProps.children;
-                par = el;
-            }
-        }
-        let cont = [];
-        react_1.Children.map(currentChildren, (child) => {
-            if (!child) {
-                return;
-            }
-            if (typeof child === "string") {
-                cont.push((0, jsx_runtime_1.jsx)("li", { role: "presentation", className: (0, classNames_1.classNames)(["zen-menu-item__content"]), children: child }, (0, generateId_1.generateId)()));
-                return;
-            }
-            if ((0, react_1.isValidElement)(child) && (0, menuSeparator_1.isSeparator)(child)) {
-                const clone = (0, react_1.cloneElement)(child, {
-                    key: child.props.key || (0, generateId_1.generateId)()
-                });
-                cont.push(clone);
-                return;
-            }
-            if ((0, react_1.isValidElement)(child) && (0, menuItem_1.isMenuItem)(child)) {
-                const clone = (0, react_1.cloneElement)(child, {
-                    isMobile,
-                    key: child.props.id,
-                    setIsOpen,
-                    onClick: child.props.onClick
-                });
-                cont.push(clone);
-                return;
-            }
-            const childProps = child.props;
-            cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content"]), role: "presentation", children: child }, childProps.id || childProps["data-id"] || (0, generateId_1.generateId)()));
-        });
-        while (cont[0] && (0, menuSeparator_1.isSeparator)(cont[0])) {
-            cont.shift();
-        }
-        while (cont[cont.length - 1] && (0, menuSeparator_1.isSeparator)(cont[cont.length - 1])) {
-            cont.pop();
-        }
-        cont = cont.filter((el, indx, arr) => {
-            if ((0, menuSeparator_1.isSeparator)(el) && arr[indx - 1] && (0, menuSeparator_1.isSeparator)(arr[indx - 1])) {
-                return false;
-            }
-            return true;
-        });
-        return [cont, par];
-    }, [children, isMobile, path, setIsOpen]);
-    // Handle keyboard navigation when no menu item is focused (e.g., when menu just opened)
-    const handleUnfocusedKeyDown = (e, menuList) => {
-        var _a, _b;
-        if (e.key === "ArrowDown" || e.key === "Home") {
-            e.preventDefault();
-            (_a = (0, findFirstFocusable_1.findFirstFocusable)(menuList)) === null || _a === void 0 ? void 0 : _a.focus();
-            return true;
-        }
-        if (e.key === "ArrowUp" || e.key === "End") {
-            e.preventDefault();
-            (_b = (0, findLastFocusable_1.findLastFocusable)(menuList)) === null || _b === void 0 ? void 0 : _b.focus();
-            return true;
-        }
-        return false;
-    };
-    const onMouseDown = () => {
-        keyboardActiveRef.current = false;
-    };
-    const onKeyDown = e => {
-        var _a, _b, _c, _d;
-        keyboardActiveRef.current = true;
-        const target = e.target;
-        const currentTarget = e.currentTarget;
-        if (!(0, isButton_1.isButton)(target) && !(0, isLink_1.isLink)(target)) {
-            if (target === currentTarget) {
-                const menuList = currentTarget.querySelector("ul");
-                if (menuList) {
-                    handleUnfocusedKeyDown(e, menuList);
-                }
-            }
-            return;
-        }
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            (_a = (0, findNextFocusable_1.findNextFocusable)(target)) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-        if (e.key === "ArrowUp") {
-            e.preventDefault();
-            (_b = (0, findPrevFocusable_1.findPrevFocusable)(target)) === null || _b === void 0 ? void 0 : _b.focus();
-            return;
-        }
-        if (e.key === "Home") {
-            e.preventDefault();
-            (_c = (0, findFirstFocusable_1.findFirstFocusable)(target)) === null || _c === void 0 ? void 0 : _c.focus();
-            return;
-        }
-        if (e.key === "End") {
-            e.preventDefault();
-            (_d = (0, findLastFocusable_1.findLastFocusable)(target)) === null || _d === void 0 ? void 0 : _d.focus();
-            return;
-        }
-        if ((0, isButton_1.isButton)(target) &&
-            (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") &&
-            target.classList.contains("zen-menu-button__action--has-children")) {
-            e.preventDefault();
-            navigatedViaKeyboardRef.current = true;
-            target.click();
-        }
-    };
-    const renderMenuList = () => ((0, jsx_runtime_1.jsx)("div", { ref: menuListRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, className: (0, classNames_1.classNames)(["zen-action-list", className]), children: (0, jsx_runtime_1.jsxs)("ul", { role: "menu", className: (0, classNames_1.classNames)(["zen-menu-item", className, listClassName]), children: [parent ? ((0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: parent.props.name || "", icon: iconArrowLeft_1.IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, content] }) }));
     const hideMenu = (0, react_1.useCallback)(() => {
-        closeBranch();
         setIsOpen(false);
-    }, [closeBranch, setIsOpen]);
+    }, [setIsOpen]);
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderMenuList() })] }) }) }));
+        return ((0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: (0, jsx_runtime_1.jsx)(EmbeddedMenuList, { ref: menuListRef, setIsOpen: setIsOpen, isOpen: isOpen, className: className, listClassName: listClassName, children: children }) })] }));
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.classNames)(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, closeOnScroll: closeOnScroll, 
-                // focusOnOpen is false - ControlledMenu handles focus based on input method
-                // (keyboard vs mouse) in its own useEffect
-                focusOnOpen: false, children: renderMenuList() }) }) }));
+    return ((0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.classNames)(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, focusOnOpen: false, closeOnScroll: closeOnScroll, children: (0, jsx_runtime_1.jsx)(EmbeddedMenuList, { ref: menuListRef, setIsOpen: setIsOpen, isOpen: isOpen, className: className, listClassName: listClassName, children: children }) }));
 };
 exports.ControlledMenu = ControlledMenu;
-exports.ControlledMenu.Item = menuItem_1.MenuItem;
-exports.ControlledMenu.Separator = menuSeparator_1.MenuSeparator;
+exports.ControlledMenu.Item = controlledMenuList_1.ControlledMenuList.Item;
+exports.ControlledMenu.Separator = controlledMenuList_1.ControlledMenuList.Separator;
 exports.TRANSLATIONS = ["Back"];

package/dist/menu/utils/buildMenuContent.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare function buildMenuContent(children: ReactNode, isMobile: boolean, setIsOpen: ((v: boolean) => void) | undefined, className: string | undefined): ReactNode[];

package/dist/menu/utils/buildMenuContent.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildMenuContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const menuSeparator_1 = require("../components/menuSeparator");
+const isMenuItem_1 = require("./isMenuItem");
+const generateId_1 = require("../../commonHelpers/generateId");
+function buildMenuContent(children, isMobile, setIsOpen, className) {
+    const cont = [];
+    react_1.Children.map(children, (child) => {
+        if (!child) {
+            return;
+        }
+        if (typeof child === "string") {
+            cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, (0, generateId_1.generateId)()));
+            return;
+        }
+        if ((0, react_1.isValidElement)(child) && (0, menuSeparator_1.isSeparator)(child)) {
+            const clone = (0, react_1.cloneElement)(child, { key: child.props.key || (0, generateId_1.generateId)() });
+            cont.push(clone);
+            return;
+        }
+        if ((0, isMenuItem_1.isMenuItem)(child)) {
+            const childProps = child.props;
+            const clone = (0, react_1.cloneElement)(child, { isMobile, key: childProps.id, setIsOpen });
+            cont.push(clone);
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const childProps = child.props;
+        cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, childProps.id || childProps["data-id"] || (0, generateId_1.generateId)()));
+    });
+    return cont;
+}
+exports.buildMenuContent = buildMenuContent;

package/dist/menu/utils/findContent.d.ts

@@ -1,2 +1,2 @@
-import React, { ReactNode, ReactElement } from "react";
-export declare const findContent: (children: ReactNode, targetComponent: React.FC | React.ComponentClass, id?: string) => ReactElement | null;
+import { ReactNode, ReactElement } from "react";
+export declare const findContent: (children: ReactNode, matcher: (child: ReactElement) => boolean, id?: string) => ReactElement | null;

package/dist/menu/utils/findContent.js

@@ -5,19 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findContent = void 0;
 const react_1 = __importDefault(require("react"));
-const findContent = (children, targetComponent, id) => {
+const findContent = (children, matcher, id) => {
     let found = null;
     react_1.default.Children.forEach(children, (child) => {
         if (found || !react_1.default.isValidElement(child)) {
             return;
         }
         const childProps = child.props;
-        if (id ? child.type === targetComponent && childProps.id === id : child.type === targetComponent) {
+        const matches = matcher(child);
+        if (id ? matches && childProps.id === id : matches) {
             found = child;
             return;
         }
         if (childProps.children) {
-            found = (0, exports.findContent)(childProps.children, targetComponent, id);
+            found = (0, exports.findContent)(childProps.children, matcher, id);
         }
     });
     return found;

package/dist/menu/utils/getItemLabel.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from "react";
+export declare const getItemLabel: (el: ReactElement | null) => string;

package/dist/menu/utils/getItemLabel.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemLabel = void 0;
+const getItemLabel = (el) => {
+    const props = el === null || el === void 0 ? void 0 : el.props;
+    return (props === null || props === void 0 ? void 0 : props.name) || (props === null || props === void 0 ? void 0 : props.title) || "";
+};
+exports.getItemLabel = getItemLabel;

package/dist/menu/utils/getSafeRel.d.ts

@@ -0,0 +1 @@
+export declare const getSafeRel: (rel?: string, target?: string) => string | undefined;

package/dist/menu/utils/getSafeRel.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSafeRel = void 0;
+const getSafeRel = (rel, target) => {
+    if (target !== "_blank")
+        return rel;
+    const parts = rel ? rel.split(/\s+/) : [];
+    if (!parts.includes("noopener"))
+        parts.push("noopener");
+    if (!parts.includes("noreferrer"))
+        parts.push("noreferrer");
+    return parts.join(" ");
+};
+exports.getSafeRel = getSafeRel;

package/dist/menu/utils/isMenuItem.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from "react";
+export declare const isMenuItem: (element: ReactElement | undefined) => boolean;

package/dist/menu/utils/isMenuItem.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMenuItem = void 0;
+const isMenuItem = (element) => {
+    if (!element || !element.type) {
+        return false;
+    }
+    if ((typeof element.type === "object" || typeof element.type === "function") && "displayName" in element.type) {
+        return element.type.displayName === "MenuItem";
+    }
+    return false;
+};
+exports.isMenuItem = isMenuItem;

package/dist/menu/utils/isSafeHref.d.ts

@@ -0,0 +1 @@
+export declare const isSafeHref: (href?: string) => boolean;

package/dist/menu/utils/isSafeHref.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSafeHref = void 0;
+const isSafeHref = (href) => {
+    if (!href)
+        return false;
+    const lower = href.toLowerCase().trimStart();
+    return !lower.startsWith("javascript:") && !lower.startsWith("data:") && !lower.startsWith("vbscript:");
+};
+exports.isSafeHref = isSafeHref;

package/dist/menu/utils/normalizeSeparators.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from "react";
+export declare const normalizeSeparators: (items: ReactElement[]) => ReactElement[];

package/dist/menu/utils/normalizeSeparators.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeSeparators = void 0;
+const menuSeparator_1 = require("../components/menuSeparator");
+const normalizeSeparators = (items) => {
+    // Find the first non-separator index
+    let start = 0;
+    while (start < items.length && (0, menuSeparator_1.isSeparator)(items[start])) {
+        start++;
+    }
+    // Find the last non-separator index
+    let end = items.length - 1;
+    while (end >= start && (0, menuSeparator_1.isSeparator)(items[end])) {
+        end--;
+    }
+    // If all items are separators or array is empty
+    if (start > end) {
+        return [];
+    }
+    // Slice to remove leading/trailing separators and filter consecutive duplicates
+    return items.slice(start, end + 1).filter((el, i, arr) => !((0, menuSeparator_1.isSeparator)(el) && arr[i - 1] && (0, menuSeparator_1.isSeparator)(arr[i - 1])));
+};
+exports.normalizeSeparators = normalizeSeparators;

package/dist/menu/utils/resolveKeys.d.ts

@@ -0,0 +1,12 @@
+export declare const verticalKeys: {
+    keyNext: string;
+    keyPrev: string;
+    keyOpenNested: string;
+    keyBack: string;
+};
+export declare const resolveKeys: (target: HTMLElement, isHorizontal: boolean) => {
+    keyNext: string;
+    keyPrev: string;
+    keyOpenNested: string;
+    keyBack: string;
+};

package/dist/menu/utils/resolveKeys.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveKeys = exports.verticalKeys = void 0;
+exports.verticalKeys = {
+    keyNext: "ArrowDown",
+    keyPrev: "ArrowUp",
+    keyOpenNested: "ArrowRight",
+    keyBack: "ArrowLeft"
+};
+const resolveKeys = (target, isHorizontal) => {
+    const inSubMenu = isHorizontal && !!target.closest('[class*="zen-controlled-menu-submenu"]');
+    if (inSubMenu) {
+        return exports.verticalKeys;
+    }
+    return {
+        keyNext: isHorizontal ? "ArrowRight" : "ArrowDown",
+        keyPrev: isHorizontal ? "ArrowLeft" : "ArrowUp",
+        keyOpenNested: isHorizontal ? "ArrowUp" : "ArrowRight",
+        keyBack: isHorizontal ? "ArrowDown" : "ArrowLeft"
+    };
+};
+exports.resolveKeys = resolveKeys;