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

package/esm/menu/components/menuButton.js

@@ -2,18 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, useCallback, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../../icons/iconChevronRight";
+import { IconChevronLeft } from "../../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { useDrive } from "../../utils/theme/useDrive";
 import { getMenuButtonState } from "../utils/getMenuButtonState";
+import { isSafeHref } from "../utils/isSafeHref";
+import { getSafeRel } from "../utils/getSafeRel";
 export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className = "", active = null, ref }) => {
     const { hasState, isActive } = getMenuButtonState(active, disabled);
     const driveMenuButtonActionClasses = useDriveClassName("zen-menu-button__action");
     const isDrive = useDrive();
+    const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
     const linkEvents = useMemo(() => ({
         onKeyDown: e => {
             if (e.key === " ") {
                 e.preventDefault();
                 const linkEl = e.target;
+                linkEl.dataset.spaceDown = "1";
                 linkEl.classList.add("zen-menu-button__action--active");
             }
         },
@@ -22,7 +28,10 @@ export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, lin
                 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();
+                }
             }
         }
     }), []);
@@ -40,13 +49,13 @@ export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, lin
                 createElement(icon, {
                     size: isDrive ? "huge" : "large",
                     className: classNames(["zen-caption__pre-content", "zen-menu-button__icon"])
-                }), _jsx("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && (_jsx(IconChevronRight, { size: isDrive ? "huge" : "large", className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
+                }), _jsx("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && (_jsx(ChevronIcon, { size: isDrive ? "huge" : "large", className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
     const linkTemplate = (_jsxs("a", Object.assign({ "data-id": id, role: "menuitem", className: 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 || !isSafeHref(link) ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: target, rel: getSafeRel(rel, target) }, linkEvents, { children: [!!icon &&
                 createElement(icon, {
                     size: isDrive ? "huge" : "large",
                     className: "zen-caption__pre-content"

package/esm/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/esm/menu/components/menuItem.js

@@ -1,34 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/naming-convention */
-import { Children, Fragment, cloneElement, useMemo, useRef, useContext, useCallback, isValidElement } from "react";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
+import { Fragment, cloneElement, useCallback } from "react";
 import { MenuButton } from "./menuButton";
-import { ControlledMenu } from "../controlledMenu";
 import { ControlledPopup } from "../../controlledPopup/controlledPopup";
-import { PathContext } from "../contexts/pathContext";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-import { generateId } from "../../commonHelpers/generateId";
-import { MenuAlignmentContext } from "../../header/headerContext";
-import { isSeparator } from "./menuSeparator";
-export const isMenuItem = (element) => {
-    if (!element || !element.type) {
-        return false;
-    }
-    if (element.type === ControlledMenu.Item) {
-        return true;
-    }
-    if ((typeof element.type === "object" || typeof element.type === "function") && "displayName" in element.type) {
-        return element.type.displayName === "MenuItem";
-    }
-    return false;
-};
+import { useMenuItemCore } from "../utils/useMenuItemCore";
+export { isMenuItem } from "../utils/isMenuItem";
 export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment }) => {
-    const aligmentContext = useContext(MenuAlignmentContext);
-    const contentAlignment = alignment || aligmentContext.alignment || "right-top";
-    const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = useContext(PathContext);
-    const memoizedDesktopActionOnClick = useCallback((itemId, e) => {
+    const { ref, isOpen, hasChildren, content, openedViaKeyboard, contentAlignment, path, onOpenBranch, handleOpenChange } = useMenuItemCore({
+        id,
+        children,
+        className,
+        alignment,
+        isMobile,
+        setIsOpen,
+        onClick
+    });
+    // MenuButton.onClick signature is (id, e) — adapt the hook's (e)-only handler
+    const memoizedDesktopActionOnClick = 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 = useCallback((itemId, e) => {
         onOpenBranch(id);
         !link && (onClick === null || onClick === void 0 ? void 0 : onClick(itemId, e));
@@ -46,54 +39,7 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
     }, [onClick, onOpenBranch, id, trigger]);
-    const memoizedOnOpenChange = useCallback(() => {
-        closeBranch();
-    }, [closeBranch]);
-    const ref = useRef(null);
-    const content = useMemo(() => {
-        const cont = [];
-        Children.map(children, (child) => {
-            if (!child) {
-                return;
-            }
-            if (typeof child === "string") {
-                cont.push(_jsx("li", { className: classNames(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, generateId()));
-                return;
-            }
-            if (isValidElement(child) && isSeparator(child)) {
-                const clone = cloneElement(child, {
-                    key: child.props.key || generateId()
-                });
-                cont.push(clone);
-                return;
-            }
-            if (isMenuItem(child)) {
-                const childProps = child.props;
-                const clone = cloneElement(child, {
-                    isMobile,
-                    key: childProps.id,
-                    setIsOpen
-                });
-                cont.push(clone);
-                return;
-            }
-            const childProps = child.props;
-            cont.push(_jsx("li", { className: classNames(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, childProps.id || childProps["data-id"] || generateId()));
-        });
-        return cont;
-    }, [children, isMobile, setIsOpen, className]);
-    const isOpen = useMemo(() => path.includes(id), [path, id]);
-    // Track previous isOpen state to detect when submenu opens
-    const wasOpenRef = useRef(false);
-    const localOpenedViaKeyboardRef = 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 (_jsx(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) {
@@ -109,6 +55,6 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
     else {
         popupTrigger = (_jsx(MenuButton, { id: id, ref: ref, name: name, icon: icon, disabled: disabled, hasChildren: true, onClick: memoizedTriggerOnClick, active: active }, id));
     }
-    return (_jsxs(Fragment, { children: [popupTrigger, _jsx(ControlledPopup, { className: 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: _jsx("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id));
+    return (_jsxs(Fragment, { children: [popupTrigger, _jsx(ControlledPopup, { className: 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: _jsx("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id));
 };
 MenuItem.displayName = "MenuItem";

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

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

package/esm/menu/contexts/usePathContext.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { PathContext } from "./pathContext";
+export function usePathContext() {
+    return useContext(PathContext);
+}

package/esm/menu/controlledMenu.js

@@ -1,45 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/naming-convention, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
-import { Children, cloneElement, isValidElement, useState, useMemo, useCallback, useEffect, useRef } from "react";
-import { MenuItem, isMenuItem } from "./components/menuItem";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { findContent } from "./utils/findContent";
-import { findFirstFocusable } from "./utils/findFirstFocusable";
-import { findLastFocusable } from "./utils/findLastFocusable";
-import { findNextFocusable } from "./utils/findNextFocusable";
-import { isButton } from "./utils/isButton";
-import { isLink } from "./utils/isLink";
-import { findPrevFocusable } from "./utils/findPrevFocusable";
-import { MenuButton } from "./components/menuButton";
-import { IconArrowLeft } from "../icons/iconArrowLeft";
 import { ControlledPopup } from "../controlledPopup/controlledPopup";
 import { MobileSheet } from "../mobileSheet/mobileSheet";
 import { DeviceType } from "../commonHelpers/hooks/deviceType";
 import { useDeviceType } from "../commonHelpers/hooks/useDeviceType";
-import { generateId } from "../commonHelpers/generateId";
-import { PathProvider } from "./contexts/pathProvider";
-import { isSeparator, MenuSeparator } from "./components/menuSeparator";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
+import { ControlledMenuList } from "./components/controlledMenuList/controlledMenuList";
+const EmbeddedMenuList = ControlledMenuList;
 export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment, closeOnScroll = true }) => {
     const [deviceType, setDeviceType] = useState(DeviceType.Desktop);
     const isMobile = deviceType === DeviceType.Mobile;
     const memoizedOnChange = useCallback(setIsOpen, [setIsOpen]);
     useDeviceType(setDeviceType);
     const menuListRef = useRef(null);
-    const [path, setPath] = useState([]);
-    // Track if the trigger was activated via keyboard
     const openedViaKeyboardRef = useRef(false);
-    // Track if submenu was navigated via keyboard (ArrowRight)
-    const navigatedViaKeyboardRef = useRef(false);
-    // Track if keyboard is actively being used for navigation (vs mouse/touch)
-    const keyboardActiveRef = useRef(false);
-    // Listen for keyboard activation on trigger
     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;
             }
         };
@@ -53,12 +34,6 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
             trigger.removeEventListener("mousedown", handleMouseDown);
         };
     }, [triggerRef]);
-    useEffect(() => {
-        if (path.length && !isOpen) {
-            setPath([]);
-        }
-    }, [isOpen, path, setPath]);
-    // Focus the menu list container or first item when menu opens (for keyboard navigation)
     useEffect(() => {
         var _a;
         if (isOpen && !isMobile && menuListRef.current) {
@@ -70,156 +45,14 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
             }
         }
     }, [isOpen, isMobile]);
-    const onOpenBranch = 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 = useCallback(() => {
-        setPath(v => {
-            const newPath = [...v];
-            newPath.pop();
-            return newPath;
-        });
-    }, [setPath]);
-    const [content, parent] = useMemo(() => {
-        let par = null;
-        let currentChildren = children;
-        if (isMobile && path.length > 0) {
-            const el = findContent(children, ControlledMenu.Item, path[path.length - 1]);
-            if (el || isValidElement(el)) {
-                const elProps = el.props;
-                currentChildren = elProps.children;
-                par = el;
-            }
-        }
-        let cont = [];
-        Children.map(currentChildren, (child) => {
-            if (!child) {
-                return;
-            }
-            if (typeof child === "string") {
-                cont.push(_jsx("li", { role: "presentation", className: classNames(["zen-menu-item__content"]), children: child }, generateId()));
-                return;
-            }
-            if (isValidElement(child) && isSeparator(child)) {
-                const clone = cloneElement(child, {
-                    key: child.props.key || generateId()
-                });
-                cont.push(clone);
-                return;
-            }
-            if (isValidElement(child) && isMenuItem(child)) {
-                const clone = cloneElement(child, {
-                    isMobile,
-                    key: child.props.id,
-                    setIsOpen,
-                    onClick: child.props.onClick
-                });
-                cont.push(clone);
-                return;
-            }
-            const childProps = child.props;
-            cont.push(_jsx("li", { className: classNames(["zen-menu-item__content"]), role: "presentation", children: child }, childProps.id || childProps["data-id"] || generateId()));
-        });
-        while (cont[0] && isSeparator(cont[0])) {
-            cont.shift();
-        }
-        while (cont[cont.length - 1] && isSeparator(cont[cont.length - 1])) {
-            cont.pop();
-        }
-        cont = cont.filter((el, indx, arr) => {
-            if (isSeparator(el) && arr[indx - 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 = findFirstFocusable(menuList)) === null || _a === void 0 ? void 0 : _a.focus();
-            return true;
-        }
-        if (e.key === "ArrowUp" || e.key === "End") {
-            e.preventDefault();
-            (_b = 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 (!isButton(target) && !isLink(target)) {
-            if (target === currentTarget) {
-                const menuList = currentTarget.querySelector("ul");
-                if (menuList) {
-                    handleUnfocusedKeyDown(e, menuList);
-                }
-            }
-            return;
-        }
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            (_a = findNextFocusable(target)) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-        if (e.key === "ArrowUp") {
-            e.preventDefault();
-            (_b = findPrevFocusable(target)) === null || _b === void 0 ? void 0 : _b.focus();
-            return;
-        }
-        if (e.key === "Home") {
-            e.preventDefault();
-            (_c = findFirstFocusable(target)) === null || _c === void 0 ? void 0 : _c.focus();
-            return;
-        }
-        if (e.key === "End") {
-            e.preventDefault();
-            (_d = findLastFocusable(target)) === null || _d === void 0 ? void 0 : _d.focus();
-            return;
-        }
-        if (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 = () => (_jsx("div", { ref: menuListRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, className: classNames(["zen-action-list", className]), children: _jsxs("ul", { role: "menu", className: classNames(["zen-menu-item", className, listClassName]), children: [parent ? (_jsx(MenuButton, { id: "root", name: parent.props.name || "", icon: IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, content] }) }));
     const hideMenu = useCallback(() => {
-        closeBranch();
         setIsOpen(false);
-    }, [closeBranch, setIsOpen]);
+    }, [setIsOpen]);
     if (isMobile) {
-        return (_jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsxs(MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [_jsx(MobileSheet.Title, { children: title }), _jsx(MobileSheet.Content, { children: renderMenuList() })] }) }) }));
+        return (_jsxs(MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [_jsx(MobileSheet.Title, { children: title }), _jsx(MobileSheet.Content, { children: _jsx(EmbeddedMenuList, { ref: menuListRef, setIsOpen: setIsOpen, isOpen: isOpen, className: className, listClassName: listClassName, children: children }) })] }));
     }
-    return (_jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: 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 (_jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: 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: _jsx(EmbeddedMenuList, { ref: menuListRef, setIsOpen: setIsOpen, isOpen: isOpen, className: className, listClassName: listClassName, children: children }) }));
 };
-ControlledMenu.Item = MenuItem;
-ControlledMenu.Separator = MenuSeparator;
+ControlledMenu.Item = ControlledMenuList.Item;
+ControlledMenu.Separator = ControlledMenuList.Separator;
 export const TRANSLATIONS = ["Back"];

package/esm/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/esm/menu/utils/buildMenuContent.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
+import { Children, cloneElement, isValidElement } from "react";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { isSeparator } from "../components/menuSeparator";
+import { isMenuItem } from "./isMenuItem";
+import { generateId } from "../../commonHelpers/generateId";
+export function buildMenuContent(children, isMobile, setIsOpen, className) {
+    const cont = [];
+    Children.map(children, (child) => {
+        if (!child) {
+            return;
+        }
+        if (typeof child === "string") {
+            cont.push(_jsx("li", { className: classNames(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, generateId()));
+            return;
+        }
+        if (isValidElement(child) && isSeparator(child)) {
+            const clone = cloneElement(child, { key: child.props.key || generateId() });
+            cont.push(clone);
+            return;
+        }
+        if (isMenuItem(child)) {
+            const childProps = child.props;
+            const clone = 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(_jsx("li", { className: classNames(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, childProps.id || childProps["data-id"] || generateId()));
+    });
+    return cont;
+}

package/esm/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/esm/menu/utils/findContent.js

@@ -1,17 +1,18 @@
 import React from "react";
-export const findContent = (children, targetComponent, id) => {
+export const findContent = (children, matcher, id) => {
     let found = null;
     React.Children.forEach(children, (child) => {
         if (found || !React.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 = findContent(childProps.children, targetComponent, id);
+            found = findContent(childProps.children, matcher, id);
         }
     });
     return found;

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

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

package/esm/menu/utils/getItemLabel.js

@@ -0,0 +1,4 @@
+export 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) || "";
+};

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

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

package/esm/menu/utils/getSafeRel.js

@@ -0,0 +1,10 @@
+export 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(" ");
+};

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

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

package/esm/menu/utils/isMenuItem.js

@@ -0,0 +1,9 @@
+export 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;
+};

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

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

package/esm/menu/utils/isSafeHref.js

@@ -0,0 +1,6 @@
+export const isSafeHref = (href) => {
+    if (!href)
+        return false;
+    const lower = href.toLowerCase().trimStart();
+    return !lower.startsWith("javascript:") && !lower.startsWith("data:") && !lower.startsWith("vbscript:");
+};

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

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

package/esm/menu/utils/normalizeSeparators.js

@@ -0,0 +1,19 @@
+import { isSeparator } from "../components/menuSeparator";
+export const normalizeSeparators = (items) => {
+    // Find the first non-separator index
+    let start = 0;
+    while (start < items.length && isSeparator(items[start])) {
+        start++;
+    }
+    // Find the last non-separator index
+    let end = items.length - 1;
+    while (end >= start && 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) => !(isSeparator(el) && arr[i - 1] && isSeparator(arr[i - 1])));
+};

package/esm/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/esm/menu/utils/resolveKeys.js

@@ -0,0 +1,18 @@
+export const verticalKeys = {
+    keyNext: "ArrowDown",
+    keyPrev: "ArrowUp",
+    keyOpenNested: "ArrowRight",
+    keyBack: "ArrowLeft"
+};
+export const resolveKeys = (target, isHorizontal) => {
+    const inSubMenu = isHorizontal && !!target.closest('[class*="zen-controlled-menu-submenu"]');
+    if (inSubMenu) {
+        return verticalKeys;
+    }
+    return {
+        keyNext: isHorizontal ? "ArrowRight" : "ArrowDown",
+        keyPrev: isHorizontal ? "ArrowLeft" : "ArrowUp",
+        keyOpenNested: isHorizontal ? "ArrowUp" : "ArrowRight",
+        keyBack: isHorizontal ? "ArrowDown" : "ArrowLeft"
+    };
+};

package/esm/menu/utils/useLastValidSheet.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement, ReactNode } from "react";
+export declare const useLastValidSheet: (nestedContent: ReactElement[] | null, nestedParent: ReactElement | null, path: string[], children: ReactNode) => {
+    sheetContent: ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[];
+    sheetParent: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+    sheetPathLength: number;
+    sheetParentName: string;
+};

package/esm/menu/utils/useLastValidSheet.js

@@ -0,0 +1,26 @@
+import { useRef } from "react";
+import { findContent } from "./findContent";
+import { getItemLabel } from "./getItemLabel";
+import { isMenuItem } from "../components/menuItem";
+// Preserves the last non-null nested sheet state so the MobileSheet has content
+// to render during its closing animation after `nestedContent` goes null.
+export const useLastValidSheet = (nestedContent, nestedParent, path, children) => {
+    const lastNestedContentRef = useRef([]);
+    const lastNestedParentRef = useRef(null);
+    const lastPathLengthRef = useRef(0);
+    const lastSheetTitleRef = useRef("");
+    const rootEl = path.length > 0 ? findContent(children, isMenuItem, path[0]) : null;
+    const currentSheetTitle = rootEl ? getItemLabel(rootEl) : "";
+    if (nestedContent !== null) {
+        lastNestedContentRef.current = nestedContent;
+        lastNestedParentRef.current = nestedParent;
+        lastPathLengthRef.current = path.length;
+        lastSheetTitleRef.current = currentSheetTitle;
+    }
+    return {
+        sheetContent: nestedContent !== null ? nestedContent : lastNestedContentRef.current,
+        sheetParent: nestedContent !== null ? nestedParent : lastNestedParentRef.current,
+        sheetPathLength: nestedContent !== null ? path.length : lastPathLengthRef.current,
+        sheetParentName: nestedContent !== null ? currentSheetTitle : lastSheetTitleRef.current
+    };
+};