@geotab/zenith 3.10.0 → 3.11.0-beta.1

package/README.md

@@ -47,6 +47,12 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.11.0
+
+- Add `ControlledMenuList` component and `createMenuItem`/`createControlledMenuList` factories for typed, path-based menu navigation with keyboard support
+- Improve `NavItem` keyboard navigation
+- Fix gap for `Nav` component
+
 ### 3.10.0
 
 - Add `wrap` and `vertical` props to `ListItem`

package/dist/index.css

@@ -3433,6 +3433,11 @@ html:lang(ar) .zen-menu-button__action--drive-tablet {
 .zen-menu-item__content {
   list-style-type: none;
 }
+.zen-menu-item--horizontal {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
 .zen-popup {
   font-family: var(--main-font);
   font-size: 14px;
@@ -3480,6 +3485,8 @@ html:lang(ar) .zen-popup {
   }
 }
 .zen-menu-separator {
+  border-block-start: 1px solid var(--borders-general);
+  list-style-type: none;
   border-top: 1px solid var(--borders-general);
   height: 0;
 }
@@ -17799,7 +17806,7 @@ html:lang(ar) .zen-nav-item__title-text {
 .zen-nav-item__content-left {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   flex: 1 1 auto;
   min-width: 0;
 }

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

@@ -0,0 +1,27 @@
+import { FC, ForwardRefExoticComponent, RefAttributes, ReactNode } from "react";
+import { IMenuControlledItem } from "../menuItem";
+import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
+import { IMenuSeparator } from "../menuSeparator";
+import { TAlignment } from "../../../absolute/absolute";
+export type TMenuListDirection = "vertical" | "horizontal";
+export interface IControlledMenuList extends IZenComponentProps {
+    listClassName?: string;
+    ariaLabel?: string;
+    /** Default tooltip alignment injected into MenuItem children that don't specify their own. */
+    defaultTooltipAlignment?: TAlignment;
+    /** Default submenu alignment injected into MenuItem children that don't specify their own. */
+    defaultAlignment?: TAlignment;
+    /** Layout direction of the menu list. Defaults to "vertical". */
+    direction?: TMenuListDirection;
+}
+/** Internal props injected by ControlledMenu — not part of the public API. */
+export interface IControlledMenuListInternal extends IControlledMenuList {
+    isOpen?: boolean;
+    setIsOpen?: (v: boolean) => void;
+}
+export declare const ControlledMenuList: ForwardRefExoticComponent<IControlledMenuList & {
+    children?: ReactNode;
+} & RefAttributes<HTMLDivElement>> & {
+    Item: FC<IMenuControlledItem>;
+    Separator: FC<IMenuSeparator>;
+};

package/dist/menu/components/controlledMenuList/controlledMenuList.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlledMenuList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/naming-convention */
+const react_1 = require("react");
+const menuItem_1 = require("../menuItem");
+const classNames_1 = require("../../../commonHelpers/classNames/classNames");
+const findContent_1 = require("../../utils/findContent");
+const getItemLabel_1 = require("../../utils/getItemLabel");
+const normalizeSeparators_1 = require("../../utils/normalizeSeparators");
+const useMenuPath_1 = require("../../utils/useMenuPath");
+const useLastValidSheet_1 = require("../../utils/useLastValidSheet");
+const useMenuListKeyboardNav_1 = require("../../utils/useMenuListKeyboardNav");
+const menuButton_1 = require("../menuButton");
+const iconArrowLeft_1 = require("../../../icons/iconArrowLeft");
+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 mobileSheet_1 = require("../../../mobileSheet/mobileSheet");
+const menuSeparator_1 = require("../menuSeparator");
+const ControlledMenuListBase = (0, react_1.forwardRef)(({ children, setIsOpen, isOpen, className = "", listClassName = "", ariaLabel, defaultTooltipAlignment, defaultAlignment, direction = "vertical" }, ref) => {
+    const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Desktop);
+    const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
+    (0, useDeviceType_1.useDeviceType)(setDeviceType);
+    // True when mounted inside ControlledMenu, which injects setIsOpen and isOpen.
+    // Standalone usage leaves both undefined.
+    const isEmbedded = setIsOpen !== undefined;
+    const { path, onOpenBranch, closeBranch, closeAll } = (0, useMenuPath_1.useMenuPath)(isOpen);
+    const navigatedViaKeyboardRef = (0, react_1.useRef)(false);
+    const keyboardActiveRef = (0, react_1.useRef)(false);
+    const internalRef = (0, react_1.useRef)(null);
+    const divRefCallback = (0, react_1.useCallback)((node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const effectiveSetIsOpen = (0, react_1.useCallback)((v) => {
+        setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(v);
+        if (!v && !isEmbedded) {
+            closeAll();
+        }
+    }, [setIsOpen, closeAll, isEmbedded]);
+    const buildListItems = (0, react_1.useCallback)((childrenToProcess) => {
+        var _a;
+        const cont = [];
+        // If children is a Fragment, extract its children
+        let actualChildren = childrenToProcess;
+        if ((0, react_1.isValidElement)(childrenToProcess) && childrenToProcess.type === react_1.Fragment) {
+            actualChildren = (_a = childrenToProcess.props.children) !== null && _a !== void 0 ? _a : [];
+        }
+        react_1.Children.map(actualChildren, (child) => {
+            var _a, _b;
+            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)) {
+                cont.push((0, react_1.cloneElement)(child, { key: (_a = child.key) !== null && _a !== void 0 ? _a : (0, generateId_1.generateId)() }));
+                return;
+            }
+            if ((0, react_1.isValidElement)(child) && (0, menuItem_1.isMenuItem)(child)) {
+                const childProps = child.props;
+                cont.push((0, react_1.cloneElement)(child, {
+                    isMobile,
+                    key: (_b = childProps.id) !== null && _b !== void 0 ? _b : (0, generateId_1.generateId)(),
+                    setIsOpen: effectiveSetIsOpen,
+                    onClick: childProps.onClick,
+                    tooltipAlignment: childProps.tooltipAlignment || defaultTooltipAlignment || undefined,
+                    alignment: childProps.alignment || defaultAlignment || undefined
+                }));
+                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)()));
+        });
+        return (0, normalizeSeparators_1.normalizeSeparators)(cont);
+    }, [isMobile, effectiveSetIsOpen, defaultTooltipAlignment, defaultAlignment]);
+    // Embedded (ControlledMenu): switch content based on path so the outer MobileSheet
+    // shows nested items with the back button as a list row.
+    // Standalone: always show top-level content; nested navigation uses its own MobileSheet.
+    const [content, parent] = (0, react_1.useMemo)(() => {
+        if (isEmbedded && isMobile && path.length > 0) {
+            const el = (0, findContent_1.findContent)(children, menuItem_1.isMenuItem, path[path.length - 1]);
+            if (el && (0, react_1.isValidElement)(el)) {
+                return [buildListItems(el.props.children), el];
+            }
+        }
+        return [buildListItems(children), null];
+    }, [children, isMobile, path, isEmbedded, buildListItems]);
+    // Standalone mobile only: compute nested content for the inline MobileSheet.
+    const [nestedContent, nestedParent] = (0, react_1.useMemo)(() => {
+        if (isEmbedded || !isMobile || path.length === 0) {
+            return [null, null];
+        }
+        const el = (0, findContent_1.findContent)(children, menuItem_1.isMenuItem, path[path.length - 1]);
+        if (!el || !(0, react_1.isValidElement)(el)) {
+            return [null, null];
+        }
+        return [buildListItems(el.props.children), el];
+    }, [children, isMobile, path, isEmbedded, buildListItems]);
+    const isHorizontal = direction === "horizontal";
+    const { onKeyDown, onKeyDownVertical, onMouseDown } = (0, useMenuListKeyboardNav_1.useMenuListKeyboardNav)(keyboardActiveRef, navigatedViaKeyboardRef, isHorizontal);
+    const renderList = (listContent, backParent, listRef, applyDirection = true, keyDownHandler = onKeyDown) => ((0, jsx_runtime_1.jsx)("div", { ref: listRef, tabIndex: -1, onKeyDown: keyDownHandler, onMouseDown: onMouseDown, className: (0, classNames_1.classNames)(["zen-action-list", className]), children: (0, jsx_runtime_1.jsxs)("ul", { role: "menu", "aria-label": ariaLabel, className: (0, classNames_1.classNames)([
+                "zen-menu-item",
+                className,
+                listClassName,
+                applyDirection && direction === "horizontal" ? "zen-menu-item--horizontal" : ""
+            ]), children: [backParent ? ((0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: (0, getItemLabel_1.getItemLabel)(backParent), icon: iconArrowLeft_1.IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, listContent] }) }));
+    const { sheetContent, sheetParent, sheetPathLength, sheetParentName } = (0, useLastValidSheet_1.useLastValidSheet)(nestedContent, nestedParent, path, children);
+    return ((0, jsx_runtime_1.jsxs)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: [renderList(content, parent, divRefCallback), !isEmbedded && isMobile && ((0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: sheetParentName, isOpen: path.length > 0, triggerRef: internalRef, onHidePanel: closeAll, onCloseClick: closeAll, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: sheetParentName }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderList(sheetContent, sheetPathLength > 1 ? sheetParent : null, undefined, false, onKeyDownVertical) })] }))] }));
+});
+ControlledMenuListBase.displayName = "ControlledMenuList";
+exports.ControlledMenuList = ControlledMenuListBase;
+exports.ControlledMenuList.Item = menuItem_1.MenuItem;
+exports.ControlledMenuList.Separator = menuSeparator_1.MenuSeparator;

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

@@ -0,0 +1,37 @@
+import { FC, ReactNode } from "react";
+import { IControlledMenuListInternal } from "./controlledMenuList/controlledMenuList";
+import { IMenuControlledItem } from "./menuItem";
+import { IMenuSeparator } from "./menuSeparator";
+export interface ICreateControlledMenuListRenderProps {
+    children: ReactNode;
+}
+type CreatedListComponent<T> = FC<T & IControlledMenuListInternal & {
+    children?: ReactNode;
+}> & {
+    Item: FC<IMenuControlledItem>;
+    Separator: FC<IMenuSeparator>;
+};
+/**
+ * Factory that creates a typed ControlledMenuList component with custom props.
+ *
+ * The `renderContent` function receives all consumer props plus `children` (the built ControlledMenuList element),
+ * allowing the consumer to wrap the list with custom markup.
+ *
+ * @example
+ * interface INavSection { sectionTitle: string }
+ *
+ * const NavSection = createControlledMenuList<INavSection>(({ sectionTitle, children }) => (
+ *     <div>
+ *         <div className="section-header">{sectionTitle}</div>
+ *         {children}
+ *     </div>
+ * ));
+ *
+ * // Usage — accepts INavSection + IControlledMenuList props:
+ * <NavSection sectionTitle="Reports" setIsOpen={setIsOpen} isOpen={isOpen}>
+ *     <NavSection.Item id="daily" name="Daily Reports" />
+ *     <NavSection.Item id="weekly" name="Weekly Reports" />
+ * </NavSection>
+ */
+export declare function createControlledMenuList<T extends object>(renderContent: (props: T & ICreateControlledMenuListRenderProps) => ReactNode): CreatedListComponent<T>;
+export {};

package/dist/menu/components/createControlledMenuList.js

@@ -0,0 +1,55 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createControlledMenuList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const controlledMenuList_1 = require("./controlledMenuList/controlledMenuList");
+const menuItem_1 = require("./menuItem");
+const menuSeparator_1 = require("./menuSeparator");
+/**
+ * Factory that creates a typed ControlledMenuList component with custom props.
+ *
+ * The `renderContent` function receives all consumer props plus `children` (the built ControlledMenuList element),
+ * allowing the consumer to wrap the list with custom markup.
+ *
+ * @example
+ * interface INavSection { sectionTitle: string }
+ *
+ * const NavSection = createControlledMenuList<INavSection>(({ sectionTitle, children }) => (
+ *     <div>
+ *         <div className="section-header">{sectionTitle}</div>
+ *         {children}
+ *     </div>
+ * ));
+ *
+ * // Usage — accepts INavSection + IControlledMenuList props:
+ * <NavSection sectionTitle="Reports" setIsOpen={setIsOpen} isOpen={isOpen}>
+ *     <NavSection.Item id="daily" name="Daily Reports" />
+ *     <NavSection.Item id="weekly" name="Weekly Reports" />
+ * </NavSection>
+ */
+function createControlledMenuList(renderContent) {
+    const CreatedList = allProps => {
+        const { setIsOpen, listClassName, isOpen, defaultTooltipAlignment, defaultAlignment, direction, className, children } = allProps, rest = __rest(allProps, ["setIsOpen", "listClassName", "isOpen", "defaultTooltipAlignment", "defaultAlignment", "direction", "className", "children"]);
+        // Cast required to pass internal props (isOpen, setIsOpen) not in the public interface.
+        const InternalList = controlledMenuList_1.ControlledMenuList;
+        const list = ((0, jsx_runtime_1.jsx)(InternalList, { setIsOpen: setIsOpen, listClassName: listClassName, isOpen: isOpen, defaultTooltipAlignment: defaultTooltipAlignment, defaultAlignment: defaultAlignment, direction: direction, className: className, children: children }));
+        return renderContent(Object.assign(Object.assign({}, rest), { children: list }));
+    };
+    CreatedList.displayName = "ControlledMenuList";
+    const result = CreatedList;
+    result.Item = menuItem_1.MenuItem;
+    result.Separator = menuSeparator_1.MenuSeparator;
+    return result;
+}
+exports.createControlledMenuList = createControlledMenuList;

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

@@ -0,0 +1,67 @@
+import { ReactNode, ForwardRefExoticComponent, RefAttributes, ForwardedRef } from "react";
+import { TAlignment } from "../../absolute/absolute";
+import { IMenuItem } from "./menuItem";
+import "./menuButton.less";
+export interface ICreateMenuItemRenderProps {
+    hasChildren: boolean;
+    isOpen: boolean;
+    isMobile: boolean;
+}
+export interface ICreateMenuItemWrapperProps {
+    role: "presentation";
+    className: string;
+    tabIndex?: number;
+}
+/**
+ * Factory that creates a typed Menu item component with full MenuItem functionality
+ * (nested submenus, keyboard navigation, mobile sheet support), but with a
+ * consumer-defined typed interface instead of the fixed MenuItem props.
+ *
+ * The `renderTrigger` function receives all consumer props plus `hasChildren` and
+ * `isOpen` so the trigger content can reflect submenu state.
+ *
+ * @example
+ * interface INavItem { label: string; count?: number }
+ *
+ * const NavMenuItem = createMenuItem<INavItem>(({ label, count, hasChildren, isOpen }) => (
+ *     <>
+ *         <span>{label}</span>
+ *         {count !== undefined && <Badge>{count}</Badge>}
+ *         {hasChildren && <ChevronRight rotated={isOpen} />}
+ *     </>
+ * ));
+ *
+ * // Usage — supports nesting exactly like Menu.Item:
+ * <Menu title="Nav">
+ *     <NavMenuItem id="reports" label="Reports" count={3}>
+ *         <Menu.Item id="charts" name="Charts" />
+ *         <Menu.Item id="tables" name="Tables" />
+ *     </NavMenuItem>
+ * </Menu>
+ *
+ * @example
+ * // renderWrapper: replace the default <li> with a custom host element
+ * <NavMenuItem
+ *     id="settings"
+ *     label="Settings"
+ *     renderWrapper={(children, ref, defaultProps) => (
+ *         <li ref={ref} {...defaultProps} data-testid="nav-settings">
+ *             {children}
+ *         </li>
+ *     )}
+ * />
+ */
+type PublicMenuItemProps<T> = T & Pick<IMenuItem, "id" | "children" | "className" | "alignment" | "disabled" | "onClick" | "link" | "target" | "rel"> & {
+    ariaLabel?: string;
+    onOpenChange?: (isOpen: boolean) => void;
+    renderWrapper?: (children: ReactNode, ref: ForwardedRef<HTMLLIElement>, defaultProps: ICreateMenuItemWrapperProps) => ReactNode;
+    tabIndex?: number;
+    tooltip?: ReactNode;
+    tooltipAlignment?: TAlignment;
+};
+export interface ICreateMenuItemOptions<T> {
+    /** Hook-compatible function called during render to derive a default tooltip from item props. Can call useContext. */
+    renderTooltip?: (props: T) => ReactNode | undefined;
+}
+export declare function createMenuItem<T extends object>(renderTrigger: (props: T & ICreateMenuItemRenderProps) => ReactNode, options?: ICreateMenuItemOptions<T>): ForwardRefExoticComponent<PublicMenuItemProps<T> & RefAttributes<HTMLLIElement>>;
+export {};

package/dist/menu/components/createMenuItem.js

@@ -0,0 +1,97 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMenuItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const controlledPopup_1 = require("../../controlledPopup/controlledPopup");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useMenuItemCore_1 = require("../utils/useMenuItemCore");
+const tooltip_1 = require("../../tooltip/tooltip");
+const isSafeHref_1 = require("../utils/isSafeHref");
+const getSafeRel_1 = require("../utils/getSafeRel");
+const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+function createMenuItem(renderTrigger, options) {
+    var _a;
+    // Defined at factory level so it is always the same function reference —
+    // safe to call unconditionally inside the component (rules of hooks).
+    const resolveDefaultTooltip = (_a = options === null || options === void 0 ? void 0 : options.renderTooltip) !== null && _a !== void 0 ? _a : (() => undefined);
+    const CreatedItem = (0, react_1.forwardRef)((allProps, containerRef) => {
+        const { id, children, className, alignment, disabled, isMobile = false, setIsOpen, ariaLabel, onClick, onOpenChange, link, target, rel, renderWrapper, tabIndex, tooltip, tooltipAlignment } = allProps, rest = __rest(allProps, ["id", "children", "className", "alignment", "disabled", "isMobile", "setIsOpen", "ariaLabel", "onClick", "onOpenChange", "link", "target", "rel", "renderWrapper", "tabIndex", "tooltip", "tooltipAlignment"]);
+        const linkEvents = (0, react_1.useMemo)(() => ({
+            onKeyDown: (e) => {
+                if (e.key === " ") {
+                    e.preventDefault();
+                    const linkEl = e.currentTarget;
+                    linkEl.dataset.spaceDown = "1";
+                    linkEl.classList.add("zen-menu-button__action--active");
+                }
+            },
+            onKeyUp: (e) => {
+                if (e.key === " ") {
+                    e.preventDefault();
+                    const linkEl = e.currentTarget;
+                    linkEl.classList.remove("zen-menu-button__action--active");
+                    if (linkEl.dataset.spaceDown) {
+                        delete linkEl.dataset.spaceDown;
+                        linkEl.click();
+                    }
+                }
+            }
+        }), []);
+        const { ref, isOpen, hasChildren, content, openedViaKeyboard, contentAlignment, path, handleDesktopActionClick, handleTriggerClick, handleOpenChange } = (0, useMenuItemCore_1.useMenuItemCore)({ id, children, className, alignment, isMobile, setIsOpen, onClick, onOpenChange });
+        const driveClass = (0, useDriveClassName_1.useDriveClassName)("zen-menu-button__action");
+        const liDefaultProps = Object.assign({ role: "presentation", className: (0, classNames_1.classNames)(["zen-menu-button", className !== null && className !== void 0 ? className : ""]) }, (tabIndex !== undefined && { tabIndex }));
+        // Resolved at component top level so renderTooltip can safely call hooks (e.g. useContext).
+        const defaultTooltip = resolveDefaultTooltip(Object.assign(Object.assign({}, rest), { isMobile }));
+        const effectiveTooltip = tooltip !== null && tooltip !== void 0 ? tooltip : defaultTooltip;
+        const effectiveTooltipAlignment = tooltipAlignment;
+        const wrapButton = (button) => {
+            // On mobile, tooltip wraps the <li> instead of the button so Tooltip doesn't
+            // intercept the button's onClick and shows on tap instead.
+            // Items with children are excluded — wrapping <li> would fire both the tooltip and
+            // the submenu drill-in on the same tap.
+            const isMobileTooltip = isMobile && !!effectiveTooltip && !hasChildren;
+            const wrappedButton = effectiveTooltip && !isMobileTooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: button, alignment: effectiveTooltipAlignment, children: effectiveTooltip })) : (button);
+            const liElement = renderWrapper ? (renderWrapper(wrappedButton, containerRef, liDefaultProps)) : ((0, jsx_runtime_1.jsx)("li", Object.assign({ ref: containerRef }, liDefaultProps, { tabIndex: tabIndex, children: wrappedButton })));
+            // Wrap li with Tooltip on mobile
+            return isMobileTooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: liElement, alignment: effectiveTooltipAlignment, children: effectiveTooltip })) : (liElement);
+        };
+        // Leaf node — no submenu
+        if (!hasChildren) {
+            const triggerContent = renderTrigger(Object.assign(Object.assign({}, rest), { hasChildren: false, isOpen: false, isMobile }));
+            return wrapButton(link ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ role: "menuitem", "aria-label": ariaLabel, "aria-disabled": disabled, href: disabled || !(0, isSafeHref_1.isSafeHref)(link) ? undefined : link, target: target, rel: (0, getSafeRel_1.getSafeRel)(rel, target), className: (0, classNames_1.classNames)(["zen-menu-button__action", "zen-caption", driveClass !== null && driveClass !== void 0 ? driveClass : ""]), onClick: handleDesktopActionClick }, linkEvents, { children: triggerContent }))) : ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", role: "menuitem", "aria-label": ariaLabel, disabled: !!disabled, className: (0, classNames_1.classNames)(["zen-menu-button__action", "zen-button", "zen-caption", driveClass !== null && driveClass !== void 0 ? driveClass : ""]), onClick: handleDesktopActionClick, children: triggerContent })));
+        }
+        // Mobile — button drills into sub-level via PathContext
+        if (isMobile) {
+            return wrapButton((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", role: "menuitem", "aria-label": ariaLabel, disabled: !!disabled, className: (0, classNames_1.classNames)([
+                    "zen-menu-button__action",
+                    "zen-button",
+                    "zen-caption",
+                    "zen-menu-button__action--has-children",
+                    driveClass !== null && driveClass !== void 0 ? driveClass : ""
+                ]), onClick: handleTriggerClick, children: renderTrigger(Object.assign(Object.assign({}, rest), { hasChildren: true, isOpen, isMobile })) }));
+        }
+        // Desktop with submenu
+        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [wrapButton((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", role: "menuitem", "aria-label": ariaLabel, disabled: !!disabled, "aria-haspopup": "menu", "aria-expanded": isOpen, className: (0, classNames_1.classNames)([
+                        "zen-menu-button__action",
+                        "zen-button",
+                        "zen-caption",
+                        "zen-menu-button__action--has-children",
+                        driveClass !== null && driveClass !== void 0 ? driveClass : ""
+                    ]), onClick: handleTriggerClick, children: renderTrigger(Object.assign(Object.assign({}, rest), { hasChildren: true, isOpen, isMobile: false })) })), (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: ariaLabel, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }));
+    });
+    CreatedItem.displayName = "MenuItem";
+    return CreatedItem;
+}
+exports.createMenuItem = createMenuItem;

package/dist/menu/components/menuButton.js

@@ -8,6 +8,8 @@ const iconChevronRight_1 = require("../../icons/iconChevronRight");
 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");
@@ -17,6 +19,7 @@ const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, link, targ
             if (e.key === " ") {
                 e.preventDefault();
                 const linkEl = e.target;
+                linkEl.dataset.spaceDown = "1";
                 linkEl.classList.add("zen-menu-button__action--active");
             }
         },
@@ -25,7 +28,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();
+                }
             }
         }
     }), []);
@@ -49,7 +55,7 @@ const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, link, targ
             "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;