@geotab/zenith 3.10.0 → 3.11.0-beta.0

package/dist/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/dist/index.js

@@ -17,7 +17,7 @@ exports.IconShield3 = exports.IconShield2 = exports.IconShield = exports.IconSha
 exports.IconVolumeHalf = exports.IconVolumeFull = exports.IconVolumeDown = exports.IconVoice = exports.IconVisitPage = exports.IconVideoReplay = exports.IconVideo2 = exports.IconVideo = exports.IconUsbHub = exports.IconUsb = exports.IconUpload = exports.IconUnlocked = exports.IconUndock = exports.IconUndo2 = exports.IconUndo = exports.IconUnderline = exports.IconUmbrella = exports.IconTrailer = exports.IconThumbsUp = exports.IconThumbsDown = exports.IconThermometer = exports.IconThermograph = exports.IconTextSize = exports.IconTelevision2 = exports.IconTelevision = exports.IconTarget3 = exports.IconTarget2 = exports.IconTarget = exports.IconTachographTimeCard = exports.IconTachograph = exports.IconTable = exports.IconSupport = exports.IconSun = exports.IconStrikeThrough = exports.IconStore = exports.IconStorage = exports.IconStopwatch = exports.IconStarFilled = exports.IconStarAi = exports.IconStar = exports.IconSquare = exports.IconSpeaker = exports.IconSortVertical = exports.IconSortHorizontal = exports.IconSort2Vertical = exports.IconSort2Horizontal = exports.IconSmiley = exports.IconSign = exports.IconSidebar = exports.IconShield4 = void 0;
 exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.isDragNotClick = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageTapToUpload = exports.ImageNothingFound = exports.ImageNoMatchingAssets = exports.ImageLooking = exports.ImageCloudUpload = exports.ImageAdjustFilter = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = exports.IconWatch = exports.IconWarning = exports.IconWallet1 = exports.IconWallet = exports.IconVolumeOn = exports.IconVolumeOff = exports.IconVolumeMinimum = void 0;
 exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.PrimaryIcon = exports.Popup = exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.PageHeaderMenu = exports.PageHeaderMenuDisplayName = exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = exports.PageHeader = exports.PageHeaderDisplayName = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = void 0;
-exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.useDirection = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = void 0;
+exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.useDirectionalIcon = exports.useDirection = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = void 0;
 /* eslint-disable max-len */
 var absolute_1 = require("./absolute/absolute");
 Object.defineProperty(exports, "Absolute", { enumerable: true, get: function () { return absolute_1.Absolute; } });
@@ -1665,6 +1665,8 @@ Object.defineProperty(exports, "dictionaries", { enumerable: true, get: function
 Object.defineProperty(exports, "injectString", { enumerable: true, get: function () { return translationsDictionary_1.injectString; } });
 var useDirection_1 = require("./utils/localization/useDirection");
 Object.defineProperty(exports, "useDirection", { enumerable: true, get: function () { return useDirection_1.useDirection; } });
+var useDirectionalIcon_1 = require("./utils/localization/useDirectionalIcon");
+Object.defineProperty(exports, "useDirectionalIcon", { enumerable: true, get: function () { return useDirectionalIcon_1.useDirectionalIcon; } });
 var useLanguage_1 = require("./utils/localization/useLanguage");
 Object.defineProperty(exports, "useLanguage", { enumerable: true, get: function () { return useLanguage_1.useLanguage; } });
 var themeDark_1 = require("./utils/theme/themeDark");

package/dist/lineChartMini/lineChartMini.js

@@ -21,6 +21,7 @@ const utils_2 = require("../lineChart/utils");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const accessibleChart_1 = require("../chart/accessibleChart/accessibleChart");
 auto_1.Chart.defaults.font = {
     family: "Roboto",
@@ -33,17 +34,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
             }
@@ -57,7 +67,7 @@ const defaultOptions = {
             enabled: false
         }
     }
-};
+});
 const LineChartMini = (_a) => {
     var _b, _c;
     var { data, options = {} } = _a, rest = __rest(_a, ["data", "options"]);
@@ -65,6 +75,7 @@ const LineChartMini = (_a) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const memoizedFontSize = (0, react_1.useMemo)(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
+    const isRtl = (0, useIsRTL_1.useIsRTL)();
     (0, react_1.useEffect)(() => {
         auto_1.Chart.defaults.font = {
             family: "Roboto",
@@ -73,6 +84,7 @@ const LineChartMini = (_a) => {
         auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [memoizedFontSize, dark]);
     const adaptedData = Object.assign({}, data);
+    const defaultOptions = (0, react_1.useMemo)(() => getDefaultOptions(isRtl), [isRtl]);
     const adaptedOptions = (0, utils_1.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/dist/list/itemData/itemDataInternal.js

@@ -14,6 +14,8 @@ const useLanguage_1 = require("../../utils/localization/useLanguage");
 const button_1 = require("../../button/button");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../../icons/iconChevronLeft");
+const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const iconDotVertical_1 = require("../../icons/iconDotVertical");
 const menu_1 = require("../../menu/menu");
 const isActiveElement_1 = require("../utils/isActiveElement");
@@ -95,6 +97,7 @@ const ItemDataInternalInner = ({
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
   const driveClassName = (0, react_1.useMemo)(() => isDrive ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet" : "", [isDrive, isMobile]);
   const mobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-item-data");
   const aceClassName = (0, react_1.useMemo)(() => isTall ? "zen-item-data--tall" : "", [isTall]);
@@ -202,7 +205,7 @@ const ItemDataInternalInner = ({
           onClick: onClick,
           title: translate("Open"),
           "aria-label": translate("Open"),
-          children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, {
+          children: (0, jsx_runtime_1.jsx)(ChevronIcon, {
             size: "large",
             className: "zen-item-data__click-icon"
           })

package/dist/list/listItem/listItem.js

@@ -74,6 +74,8 @@ const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useIconSize_1 = require("../../utils/theme/useIconSize");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../../icons/iconChevronLeft");
+const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const isActiveElement_1 = require("../utils/isActiveElement");
 const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
 const ListItem = ({
@@ -97,6 +99,7 @@ const ListItem = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const itemRef = (0, react_1.useRef)(null);
+  const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
   const renderActions = (0, react_1.useCallback)(() => {
     if (!actions || actions.length === 0) {
       return null;
@@ -209,7 +212,7 @@ const ListItem = ({
       link: link,
       target: target,
       title: translate("View details"),
-      children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, {
+      children: (0, jsx_runtime_1.jsx)(ChevronIcon, {
         size: isMobile ? "huge" : "large",
         className: "zen-list-item__click-icon"
       })

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,126 @@
+"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 iconArrowRight_1 = require("../../../icons/iconArrowRight");
+const useDirectionalIcon_1 = require("../../../utils/localization/useDirectionalIcon");
+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;
+    const BackArrowIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconArrowLeft_1.IconArrowLeft, iconArrowRight_1.IconArrowRight);
+    (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: BackArrowIcon, 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

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

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

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