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

package/esm/icons/iconCornerUpRight.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerUpRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const isRTL = useIsRTL();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerUpRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 20.87a1 1 0 001-1v-9h12.586l-2.293 2.293a1 1 0 001.414 1.414l4-4a1 1 0 000-1.414l-4-4a1 1 0 10-1.414 1.414l2.293 2.293H4a1 1 0 00-1 1v10a1 1 0 001 1z" })] }));
 };

package/esm/index.d.ts

@@ -775,6 +775,7 @@ export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelp
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
 export { useDirection } from "./utils/localization/useDirection";
+export { useDirectionalIcon } from "./utils/localization/useDirectionalIcon";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";
 export { ThemeDrive } from "./utils/theme/themeDrive";

package/esm/index.js

@@ -759,6 +759,7 @@ export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelp
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
 export { useDirection } from "./utils/localization/useDirection";
+export { useDirectionalIcon } from "./utils/localization/useDirectionalIcon";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";
 export { ThemeDrive } from "./utils/theme/themeDrive";

package/esm/lineChartMini/lineChartMini.js

@@ -18,6 +18,7 @@ import { getDefaultDatasetStyle } from "../lineChart/utils";
 import { useDrive } from "../utils/theme/useDrive";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { themeContext } from "../utils/theme/themeContext";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 import { AccessibleChart } from "../chart/accessibleChart/accessibleChart";
 ChartJS.defaults.font = {
     family: "Roboto",
@@ -30,17 +31,26 @@ const defaultGridStyle = {
 const defaultGridBorderStyle = {
     display: false
 };
-const defaultOptions = {
+const getDefaultOptions = (isRtl) => ({
     responsive: true,
     maintainAspectRatio: false,
+    layout: {
+        padding: {
+            left: isRtl ? 16 : 0,
+            right: isRtl ? 0 : 16
+        }
+    },
     scales: {
         x: {
             grid: defaultGridStyle,
-            border: defaultGridBorderStyle
+            border: defaultGridBorderStyle,
+            reverse: isRtl,
+            offset: false
         },
         y: {
             grid: defaultGridStyle,
             border: defaultGridBorderStyle,
+            position: isRtl ? "right" : "left",
             ticks: {
                 display: false
             }
@@ -54,7 +64,7 @@ const defaultOptions = {
             enabled: false
         }
     }
-};
+});
 export const LineChartMini = (_a) => {
     var _b, _c;
     var { data, options = {} } = _a, rest = __rest(_a, ["data", "options"]);
@@ -62,6 +72,7 @@ export const LineChartMini = (_a) => {
     const isMobile = useMobile();
     const memoizedFontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = useContext(themeContext);
+    const isRtl = useIsRTL();
     useEffect(() => {
         ChartJS.defaults.font = {
             family: "Roboto",
@@ -70,6 +81,7 @@ export const LineChartMini = (_a) => {
         ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [memoizedFontSize, dark]);
     const adaptedData = Object.assign({}, data);
+    const defaultOptions = useMemo(() => getDefaultOptions(isRtl), [isRtl]);
     const adaptedOptions = deepMerge(defaultOptions, options);
     if (((_b = adaptedData.labels) === null || _b === void 0 ? void 0 : _b.length) === 2) {
         const maxLabelsCount = Math.max(...data.datasets.map(ds => ds.data.length));

package/esm/list/itemData/itemDataInternal.js

@@ -6,6 +6,8 @@ import { useLanguage } from "../../utils/localization/useLanguage";
 import { Button } from "../../button/button";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../../icons/iconChevronRight";
+import { IconChevronLeft } from "../../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { IconDotVertical } from "../../icons/iconDotVertical";
 import { Menu } from "../../menu/menu";
 import { isActiveElement } from "../utils/isActiveElement";
@@ -87,6 +89,7 @@ const ItemDataInternalInner = ({
   const {
     translate
   } = useLanguage();
+  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const driveClassName = useMemo(() => isDrive ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet" : "", [isDrive, isMobile]);
   const mobileClassName = useMobileClassName("zen-item-data");
   const aceClassName = useMemo(() => isTall ? "zen-item-data--tall" : "", [isTall]);
@@ -194,7 +197,7 @@ const ItemDataInternalInner = ({
           onClick: onClick,
           title: translate("Open"),
           "aria-label": translate("Open"),
-          children: _jsx(IconChevronRight, {
+          children: _jsx(ChevronIcon, {
             size: "large",
             className: "zen-item-data__click-icon"
           })

package/esm/list/list.d.ts

@@ -10,6 +10,7 @@ type IListBase = {
     isLoading?: boolean;
     waitingItems?: number;
     onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>) => void;
+    vertical?: boolean;
 } & IZenComponentProps;
 type IListStandard = IListBase & {
     type?: Omit<TListType, "data">;

package/esm/list/list.js

@@ -10,7 +10,7 @@ import { useLazyLoading } from "./hooks/useLazyLoading";
 import { getLoadingItems } from "./utils/getLoadingItems";
 import { classNames } from "../commonHelpers/classNames/classNames";
 export const List = (props) => {
-    const { type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, className } = props;
+    const { type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, vertical, className } = props;
     const isTall = type === "data" && "variant" in props ? props.variant === "tall" : undefined;
     const listId = useId();
     const listRef = useRef(null);
@@ -53,5 +53,5 @@ export const List = (props) => {
         const defaultWaitingItems = type === "data" ? 50 : 10;
         return getLoadingItems(type || "standard", waitingItems || defaultWaitingItems, listId, isDrive, isMobile, isTall);
     }, [isDrive, isTall, isLoading, isMobile, listId, type, waitingItems]);
-    return (_jsx(ViewportProvider, { isInViewport: isInViewport, children: _jsxs("ul", { className: classNames(["zen-list", className || ""]), onKeyDown: onKeyDown, ref: listRef, children: [childrenArray, loadingChildren] }) }));
+    return (_jsx(ViewportProvider, { isInViewport: isInViewport, children: _jsxs("ul", { className: classNames(["zen-list", vertical ? "zen-list--vertical" : "", className || ""]), onKeyDown: onKeyDown, ref: listRef, children: [childrenArray, loadingChildren] }) }));
 };

package/esm/list/listItem/listItem.d.ts

@@ -13,7 +13,5 @@ export interface IListItem extends IZenComponentProps {
     link?: string;
     target?: React.HTMLAttributeAnchorTarget;
     onDragStart?: (e: React.PointerEvent<HTMLElement>) => void;
-    wrap?: boolean;
-    vertical?: boolean;
 }
-export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart, wrap, vertical }: IListItem) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart }: IListItem) => import("react/jsx-runtime").JSX.Element;

package/esm/list/listItem/listItem.js

@@ -12,6 +12,8 @@ import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useIconSize } from "../../utils/theme/useIconSize";
 import { IconChevronRight } from "../../icons/iconChevronRight";
+import { IconChevronLeft } from "../../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { isActiveElement } from "../utils/isActiveElement";
 import { useMobileClassName } from "../../utils/theme/useMobileClassName";
 injectString("cs", "More", "V\xEDce");
@@ -79,9 +81,7 @@ export const ListItem = ({
   onClick,
   link,
   target,
-  onDragStart,
-  wrap,
-  vertical
+  onDragStart
 }) => {
   const isMobile = useMobile();
   const driveClassName = useDriveClassName("zen-list-item");
@@ -91,6 +91,7 @@ export const ListItem = ({
     translate
   } = useLanguage();
   const itemRef = useRef(null);
+  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const renderActions = useCallback(() => {
     if (!actions || actions.length === 0) {
       return null;
@@ -171,7 +172,7 @@ export const ListItem = ({
   const clickableClassName = useMemo(() => onClick || link ? "zen-list-item--clickable" : "", [link, onClick]);
   return _jsxs("li", {
     id: id,
-    className: classNames(["zen-list-item", mobileClassName || driveClassName || "", clickableClassName, wrap ? "zen-list-item--wrap" : "", vertical ? "zen-list-item--vertical" : "", className || ""]),
+    className: classNames(["zen-list-item", mobileClassName || driveClassName || "", clickableClassName, className || ""]),
     onClick: handleClick,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ref: itemRef,
@@ -203,7 +204,7 @@ export const ListItem = ({
       link: link,
       target: target,
       title: translate("View details"),
-      children: _jsx(IconChevronRight, {
+      children: _jsx(ChevronIcon, {
         size: isMobile ? "huge" : "large",
         className: "zen-list-item__click-icon"
       })

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,123 @@
+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";
+import { IconArrowRight } from "../../../icons/iconArrowRight";
+import { useDirectionalIcon } from "../../../utils/localization/useDirectionalIcon";
+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;
+    const BackArrowIcon = useDirectionalIcon(IconArrowLeft, IconArrowRight);
+    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: BackArrowIcon, 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;
+}