@geotab/zenith 3.10.0 → 3.11.0-beta.1

package/dist/menu/utils/useMenuListKeyboardNav.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuListKeyboardNav = void 0;
+const react_1 = require("react");
+const findFirstFocusable_1 = require("./findFirstFocusable");
+const findLastFocusable_1 = require("./findLastFocusable");
+const findNextFocusable_1 = require("./findNextFocusable");
+const findPrevFocusable_1 = require("./findPrevFocusable");
+const isButton_1 = require("./isButton");
+const isLink_1 = require("./isLink");
+const resolveKeys_1 = require("./resolveKeys");
+const useMenuListKeyboardNav = (keyboardActiveRef, navigatedViaKeyboardRef, isHorizontal) => {
+    const handleNavigation = (0, react_1.useCallback)(
+    // eslint-disable-next-line complexity
+    (e, keyMap) => {
+        var _a, _b, _c, _d, _e, _f;
+        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) {
+                    if (e.key === keyMap.keyNext || e.key === "Home") {
+                        e.preventDefault();
+                        (_a = (0, findFirstFocusable_1.findFirstFocusable)(menuList)) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                    else if (e.key === keyMap.keyPrev || e.key === "End") {
+                        e.preventDefault();
+                        (_b = (0, findLastFocusable_1.findLastFocusable)(menuList)) === null || _b === void 0 ? void 0 : _b.focus();
+                    }
+                }
+            }
+            return;
+        }
+        const isItemWithChildren = (e.key === keyMap.keyOpenNested || e.key === "Enter" || e.key === " ") &&
+            target.classList.contains("zen-menu-button__action--has-children");
+        const isBackButton = (e.key === keyMap.keyBack || e.key === "Enter" || e.key === " ") && target.dataset.id === "root";
+        if (e.key === keyMap.keyNext) {
+            e.preventDefault();
+            (_c = (0, findNextFocusable_1.findNextFocusable)(target)) === null || _c === void 0 ? void 0 : _c.focus();
+            return;
+        }
+        if (e.key === keyMap.keyPrev) {
+            e.preventDefault();
+            (_d = (0, findPrevFocusable_1.findPrevFocusable)(target)) === null || _d === void 0 ? void 0 : _d.focus();
+            return;
+        }
+        if (e.key === "Home") {
+            e.preventDefault();
+            (_e = (0, findFirstFocusable_1.findFirstFocusable)(target)) === null || _e === void 0 ? void 0 : _e.focus();
+            return;
+        }
+        if (e.key === "End") {
+            e.preventDefault();
+            (_f = (0, findLastFocusable_1.findLastFocusable)(target)) === null || _f === void 0 ? void 0 : _f.focus();
+            return;
+        }
+        if ((0, isButton_1.isButton)(target) && (isItemWithChildren || isBackButton)) {
+            e.preventDefault();
+            navigatedViaKeyboardRef.current = true;
+            target.click();
+        }
+    }, [keyboardActiveRef, navigatedViaKeyboardRef]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        handleNavigation(e, (0, resolveKeys_1.resolveKeys)(e.target, isHorizontal));
+    }, [isHorizontal, handleNavigation]);
+    const onKeyDownVertical = (0, react_1.useCallback)((e) => {
+        handleNavigation(e, resolveKeys_1.verticalKeys);
+    }, [handleNavigation]);
+    const onMouseDown = (0, react_1.useCallback)(() => {
+        keyboardActiveRef.current = false;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return { onKeyDown, onKeyDownVertical, onMouseDown };
+};
+exports.useMenuListKeyboardNav = useMenuListKeyboardNav;

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

@@ -0,0 +1,6 @@
+export declare const useMenuPath: (isOpen?: boolean) => {
+    path: string[];
+    onOpenBranch: (branchId?: string) => void;
+    closeBranch: () => void;
+    closeAll: () => void;
+};

package/dist/menu/utils/useMenuPath.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuPath = void 0;
+const react_1 = require("react");
+const useMenuPath = (isOpen) => {
+    const [path, setPath] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen === false) {
+            setPath(v => (v.length ? [] : v));
+        }
+    }, [isOpen]);
+    const onOpenBranch = (0, react_1.useCallback)((branchId) => {
+        if (!branchId) {
+            return;
+        }
+        setPath(v => {
+            if (!v.includes(branchId)) {
+                return [...v, branchId];
+            }
+            const newPath = [...v];
+            newPath.pop();
+            return newPath;
+        });
+    }, []);
+    const closeBranch = (0, react_1.useCallback)(() => {
+        setPath(v => {
+            const newPath = [...v];
+            newPath.pop();
+            return newPath;
+        });
+    }, []);
+    const closeAll = (0, react_1.useCallback)(() => setPath([]), []);
+    return { path, onOpenBranch, closeBranch, closeAll };
+};
+exports.useMenuPath = useMenuPath;

package/dist/nav/navItem/navItem.js

@@ -94,17 +94,19 @@ const ButtonNavItem = (_a) => {
         }
     };
     const handleKeyPress = evt => {
-        if (evt.key !== "ArrowRight") {
+        if (hasNestedItems && (evt.key === "Enter" || evt.key === " ")) {
+            evt.preventDefault();
+            setMenuOpen(true);
             return;
         }
-        if (hasNestedItems) {
-            setMenuOpen(prevOpen => !prevOpen);
+        if (hasNestedItems && evt.key === "ArrowRight") {
+            setMenuOpen(true);
         }
     };
     const isMobile = (0, useMobile_1.useMobile)();
     const isActive = active || (hasNestedItems && menuOpen);
     const triggerId = (0, react_1.useId)();
-    const buttonElement = ((0, jsx_runtime_1.jsx)("button", { id: triggerId, ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: (0, jsx_runtime_1.jsx)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })) }));
+    const buttonElement = ((0, jsx_runtime_1.jsx)("button", { id: triggerId, ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, "aria-haspopup": hasNestedItems ? "menu" : undefined, "aria-expanded": hasNestedItems ? menuOpen : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: (0, jsx_runtime_1.jsx)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })) }));
     const trigger = collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: buttonElement, alignment: tooltipAlignment, children: title })) : (buttonElement);
     if (hasNestedItems) {
         // Process children to add appropriate level classes while allowing unlimited nesting

package/dist/nav/navSection/navSection.js

@@ -6,6 +6,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
 const nav_context_1 = require("../context/nav.context");
 const navItem_1 = require("../navItem/navItem");
+const getNavItemMain = (wrapper) => { var _a; return (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelector(".zen-nav-item__main")) !== null && _a !== void 0 ? _a : wrapper; };
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
@@ -26,11 +27,11 @@ const NavSection = ({ children, className }) => {
         if (!sectionRef.current) {
             return;
         }
-        const navItemElements = sectionRef.current.querySelectorAll(".zen-nav-item");
+        const navItemElements = sectionRef.current.querySelectorAll(":scope > .zen-nav-item");
         childRefs.current = Array.from(navItemElements);
     }, [children]);
     const arrowClickHandler = (0, react_1.useCallback)(evt => {
-        var _a, _b, _c;
+        var _a;
         const key = evt.key;
         if ((key !== "ArrowDown" && key !== "ArrowUp" && key !== "Home" && key !== "End" && key !== "PageUp" && key !== "PageDown") || // non-handled keys
             !children || // section is empty
@@ -39,7 +40,7 @@ const NavSection = ({ children, className }) => {
             return;
         }
         evt.preventDefault();
-        (_a = childRefs.current[focusedIndex.current]) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "-1");
+        (_a = getNavItemMain(childRefs.current[focusedIndex.current])) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "-1");
         if (key === "ArrowDown") {
             // get next in a loop
             focusedIndex.current = focusedIndex.current === react_1.Children.count(children) - 1 ? 0 : focusedIndex.current + 1;
@@ -54,8 +55,9 @@ const NavSection = ({ children, className }) => {
         if (key === "End" || key === "PageDown") {
             focusedIndex.current = react_1.Children.count(children) - 1;
         }
-        (_b = childRefs.current[focusedIndex.current]) === null || _b === void 0 ? void 0 : _b.setAttribute("tabindex", "0");
-        (_c = childRefs.current[focusedIndex.current]) === null || _c === void 0 ? void 0 : _c.focus();
+        const nextMain = getNavItemMain(childRefs.current[focusedIndex.current]);
+        nextMain === null || nextMain === void 0 ? void 0 : nextMain.setAttribute("tabindex", "0");
+        nextMain === null || nextMain === void 0 ? void 0 : nextMain.focus();
     }, [children]);
     const cssClasses = (0, classNames_1.classNames)(["zen-nav-section", className || "", collapsed ? "zen-nav-section--collapsed" : ""]);
     return ((0, jsx_runtime_1.jsx)("div", { ref: sectionRef, role: "menu", className: cssClasses, onKeyDown: arrowClickHandler, children: focusableChildren }));

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

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/naming-convention */
+import { Children, cloneElement, isValidElement, useState, useMemo, useCallback, useRef, forwardRef, Fragment } from "react";
+import { MenuItem, isMenuItem } from "../menuItem";
+import { classNames } from "../../../commonHelpers/classNames/classNames";
+import { findContent } from "../../utils/findContent";
+import { getItemLabel } from "../../utils/getItemLabel";
+import { normalizeSeparators } from "../../utils/normalizeSeparators";
+import { useMenuPath } from "../../utils/useMenuPath";
+import { useLastValidSheet } from "../../utils/useLastValidSheet";
+import { useMenuListKeyboardNav } from "../../utils/useMenuListKeyboardNav";
+import { MenuButton } from "../menuButton";
+import { IconArrowLeft } from "../../../icons/iconArrowLeft";
+import { DeviceType } from "../../../commonHelpers/hooks/deviceType";
+import { useDeviceType } from "../../../commonHelpers/hooks/useDeviceType";
+import { generateId } from "../../../commonHelpers/generateId";
+import { PathProvider } from "../../contexts/pathProvider";
+import { MobileSheet } from "../../../mobileSheet/mobileSheet";
+import { isSeparator, MenuSeparator } from "../menuSeparator";
+const ControlledMenuListBase = forwardRef(({ children, setIsOpen, isOpen, className = "", listClassName = "", ariaLabel, defaultTooltipAlignment, defaultAlignment, direction = "vertical" }, ref) => {
+    const [deviceType, setDeviceType] = useState(DeviceType.Desktop);
+    const isMobile = deviceType === DeviceType.Mobile;
+    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 } = useMenuPath(isOpen);
+    const navigatedViaKeyboardRef = useRef(false);
+    const keyboardActiveRef = useRef(false);
+    const internalRef = useRef(null);
+    const divRefCallback = useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const effectiveSetIsOpen = useCallback((v) => {
+        setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(v);
+        if (!v && !isEmbedded) {
+            closeAll();
+        }
+    }, [setIsOpen, closeAll, isEmbedded]);
+    const buildListItems = useCallback((childrenToProcess) => {
+        var _a;
+        const cont = [];
+        // If children is a Fragment, extract its children
+        let actualChildren = childrenToProcess;
+        if (isValidElement(childrenToProcess) && childrenToProcess.type === Fragment) {
+            actualChildren = (_a = childrenToProcess.props.children) !== null && _a !== void 0 ? _a : [];
+        }
+        Children.map(actualChildren, (child) => {
+            var _a, _b;
+            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)) {
+                cont.push(cloneElement(child, { key: (_a = child.key) !== null && _a !== void 0 ? _a : generateId() }));
+                return;
+            }
+            if (isValidElement(child) && isMenuItem(child)) {
+                const childProps = child.props;
+                cont.push(cloneElement(child, {
+                    isMobile,
+                    key: (_b = childProps.id) !== null && _b !== void 0 ? _b : generateId(),
+                    setIsOpen: effectiveSetIsOpen,
+                    onClick: childProps.onClick,
+                    tooltipAlignment: childProps.tooltipAlignment || defaultTooltipAlignment || undefined,
+                    alignment: childProps.alignment || defaultAlignment || undefined
+                }));
+                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()));
+        });
+        return 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] = useMemo(() => {
+        if (isEmbedded && isMobile && path.length > 0) {
+            const el = findContent(children, isMenuItem, path[path.length - 1]);
+            if (el && 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] = useMemo(() => {
+        if (isEmbedded || !isMobile || path.length === 0) {
+            return [null, null];
+        }
+        const el = findContent(children, isMenuItem, path[path.length - 1]);
+        if (!el || !isValidElement(el)) {
+            return [null, null];
+        }
+        return [buildListItems(el.props.children), el];
+    }, [children, isMobile, path, isEmbedded, buildListItems]);
+    const isHorizontal = direction === "horizontal";
+    const { onKeyDown, onKeyDownVertical, onMouseDown } = useMenuListKeyboardNav(keyboardActiveRef, navigatedViaKeyboardRef, isHorizontal);
+    const renderList = (listContent, backParent, listRef, applyDirection = true, keyDownHandler = onKeyDown) => (_jsx("div", { ref: listRef, tabIndex: -1, onKeyDown: keyDownHandler, onMouseDown: onMouseDown, className: classNames(["zen-action-list", className]), children: _jsxs("ul", { role: "menu", "aria-label": ariaLabel, className: classNames([
+                "zen-menu-item",
+                className,
+                listClassName,
+                applyDirection && direction === "horizontal" ? "zen-menu-item--horizontal" : ""
+            ]), children: [backParent ? (_jsx(MenuButton, { id: "root", name: getItemLabel(backParent), icon: IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, listContent] }) }));
+    const { sheetContent, sheetParent, sheetPathLength, sheetParentName } = useLastValidSheet(nestedContent, nestedParent, path, children);
+    return (_jsxs(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: [renderList(content, parent, divRefCallback), !isEmbedded && isMobile && (_jsxs(MobileSheet, { label: sheetParentName, isOpen: path.length > 0, triggerRef: internalRef, onHidePanel: closeAll, onCloseClick: closeAll, children: [_jsx(MobileSheet.Title, { children: sheetParentName }), _jsx(MobileSheet.Content, { children: renderList(sheetContent, sheetPathLength > 1 ? sheetParent : null, undefined, false, onKeyDownVertical) })] }))] }));
+});
+ControlledMenuListBase.displayName = "ControlledMenuList";
+export const ControlledMenuList = ControlledMenuListBase;
+ControlledMenuList.Item = MenuItem;
+ControlledMenuList.Separator = MenuSeparator;

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

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ControlledMenuList } from "./controlledMenuList/controlledMenuList";
+import { MenuItem } from "./menuItem";
+import { MenuSeparator } from "./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>
+ */
+export 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;
+        const list = (_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;
+    result.Separator = MenuSeparator;
+    return result;
+}

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

@@ -0,0 +1,93 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, forwardRef, useMemo } from "react";
+import { ControlledPopup } from "../../controlledPopup/controlledPopup";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { useMenuItemCore } from "../utils/useMenuItemCore";
+import { Tooltip } from "../../tooltip/tooltip";
+import { isSafeHref } from "../utils/isSafeHref";
+import { getSafeRel } from "../utils/getSafeRel";
+import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+export 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 = 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 = 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 } = useMenuItemCore({ id, children, className, alignment, isMobile, setIsOpen, onClick, onOpenChange });
+        const driveClass = useDriveClassName("zen-menu-button__action");
+        const liDefaultProps = Object.assign({ role: "presentation", className: 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 ? (_jsx(Tooltip, { trigger: button, alignment: effectiveTooltipAlignment, children: effectiveTooltip })) : (button);
+            const liElement = renderWrapper ? (renderWrapper(wrappedButton, containerRef, liDefaultProps)) : (_jsx("li", Object.assign({ ref: containerRef }, liDefaultProps, { tabIndex: tabIndex, children: wrappedButton })));
+            // Wrap li with Tooltip on mobile
+            return isMobileTooltip ? (_jsx(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 ? (_jsx("a", Object.assign({ role: "menuitem", "aria-label": ariaLabel, "aria-disabled": disabled, href: disabled || !isSafeHref(link) ? undefined : link, target: target, rel: getSafeRel(rel, target), className: classNames(["zen-menu-button__action", "zen-caption", driveClass !== null && driveClass !== void 0 ? driveClass : ""]), onClick: handleDesktopActionClick }, linkEvents, { children: triggerContent }))) : (_jsx("button", { ref: ref, type: "button", role: "menuitem", "aria-label": ariaLabel, disabled: !!disabled, className: 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(_jsx("button", { ref: ref, type: "button", role: "menuitem", "aria-label": ariaLabel, disabled: !!disabled, className: 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 (_jsxs(Fragment, { children: [wrapButton(_jsx("button", { ref: ref, type: "button", role: "menuitem", "aria-label": ariaLabel, disabled: !!disabled, "aria-haspopup": "menu", "aria-expanded": isOpen, className: 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 })) })), _jsx(ControlledPopup, { className: classNames([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: openedViaKeyboard ? "on" : "withTrigger", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: handleOpenChange, ariaLabel: ariaLabel, recalculateOnScroll: true, children: _jsx("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }));
+    });
+    CreatedItem.displayName = "MenuItem";
+    return CreatedItem;
+}

package/esm/menu/components/menuButton.js

@@ -5,6 +5,8 @@ import { IconChevronRight } from "../../icons/iconChevronRight";
 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");
@@ -14,6 +16,7 @@ export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, lin
             if (e.key === " ") {
                 e.preventDefault();
                 const linkEl = e.target;
+                linkEl.dataset.spaceDown = "1";
                 linkEl.classList.add("zen-menu-button__action--active");
             }
         },
@@ -22,7 +25,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();
+                }
             }
         }
     }), []);
@@ -46,7 +52,7 @@ export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, lin
             "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 {};