@geotab/zenith 3.14.1 → 3.15.0-beta.1

package/esm/list/itemData/itemData.d.ts

@@ -28,5 +28,6 @@ export interface IItemData {
     isTall?: boolean;
     target?: React.HTMLAttributeAnchorTarget;
 }
-export declare const ItemData: ({ id, ...rest }: IItemData) => import("react/jsx-runtime").JSX.Element;
+declare const ItemDataInner: ({ id, ...rest }: IItemData) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemData: typeof ItemDataInner;
 export {};

package/esm/list/itemData/itemDataInternal.d.ts

@@ -27,5 +27,6 @@ export interface IItemData {
     isTall?: boolean;
     target?: React.HTMLAttributeAnchorTarget;
 }
-export declare const ItemDataInternal: ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile, isTall, target }: IItemData) => import("react/jsx-runtime").JSX.Element;
+declare const ItemDataInternalInner: ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile, isTall, target }: IItemData) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemDataInternal: typeof ItemDataInternalInner;
 export {};

package/esm/list/list.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./list.less";
 import { TListType } from "./interfaces";

package/esm/list/utils/isDataListitem.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement, ReactNode } from "react";
 import { IItemData } from "../itemData/itemData";
-export declare const isDataListItem: (item: ReactNode) => item is ReactElement<IItemData, string | import("react").JSXElementConstructor<any>>;
+export declare const isDataListItem: (item: ReactNode) => item is ReactElement<IItemData>;

package/esm/list/viewportProvider/viewportContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface IViewportContext {
     isInViewport: (id: string) => boolean;
 }

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

@@ -1,4 +1,4 @@
-import { FC, ForwardRefExoticComponent, RefAttributes, ReactNode } from "react";
+import { FC, ForwardRefExoticComponent, RefAttributes, PropsWithChildren } from "react";
 import { IMenuControlledItem } from "../menuItem";
 import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
 import { IMenuSeparator } from "../menuSeparator";
@@ -19,9 +19,7 @@ export interface IControlledMenuListInternal extends IControlledMenuList {
     isOpen?: boolean;
     setIsOpen?: (v: boolean) => void;
 }
-export declare const ControlledMenuList: ForwardRefExoticComponent<IControlledMenuList & {
-    children?: ReactNode;
-} & RefAttributes<HTMLDivElement>> & {
+export declare const ControlledMenuList: ForwardRefExoticComponent<PropsWithChildren<IControlledMenuList> & RefAttributes<HTMLDivElement>> & {
     Item: FC<IMenuControlledItem>;
     Separator: FC<IMenuSeparator>;
 };

package/esm/menu/components/controlledMenuList/controlledMenuList.js

@@ -8,6 +8,7 @@ import { getItemLabel } from "../../utils/getItemLabel";
 import { normalizeSeparators } from "../../utils/normalizeSeparators";
 import { useMenuPath } from "../../utils/useMenuPath";
 import { useLastValidSheet } from "../../utils/useLastValidSheet";
+import { useDisplayContent } from "../../utils/useDisplayContent";
 import { useMenuListKeyboardNav } from "../../utils/useMenuListKeyboardNav";
 import { MenuButton } from "../menuButton";
 import { IconArrowLeft } from "../../../icons/iconArrowLeft";
@@ -95,6 +96,7 @@ const ControlledMenuListBase = forwardRef(({ children, setIsOpen, isOpen, classN
         }
         return [buildListItems(children), null];
     }, [children, isMobile, path, isEmbedded, buildListItems]);
+    const { displayContent, displayParent } = useDisplayContent(isOpen, content, parent);
     // Standalone mobile only: compute nested content for the inline MobileSheet.
     const [nestedContent, nestedParent] = useMemo(() => {
         if (isEmbedded || !isMobile || path.length === 0) {
@@ -115,7 +117,7 @@ const ControlledMenuListBase = forwardRef(({ children, setIsOpen, isOpen, classN
                 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) })] }))] }));
+    return (_jsxs(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: [renderList(displayContent, displayParent, 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;

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

@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+/**
+ * Freezes the displayed content/parent while the MobileSheet is closing so the
+ * sheet animates out over the submenu the user was in rather than flashing back
+ * to the root list.
+ *
+ * Refs are updated whenever the menu is open. When the user navigates back to
+ * root (parent === null) the frozen state is cleared, so closing from root does
+ * not freeze stale sub-level content.
+ *
+ * ⚠️ Stability contract: `content` and `parent` must be referentially stable
+ * across renders while the menu is open (e.g. produced by `useMemo`).
+ * Passing a new array or object literal on every render will cause the
+ * `useLayoutEffect` to re-run every cycle, defeating the freeze: the ref will
+ * always reflect the latest values so there is nothing to freeze when
+ * `isOpen` transitions to `false`.
+ */
+export declare const useDisplayContent: (isOpen: boolean | undefined, content: ReactElement[], parent: ReactElement | null) => {
+    displayContent: ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[];
+    displayParent: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+};

package/esm/menu/utils/useDisplayContent.js

@@ -0,0 +1,31 @@
+import { useRef, useLayoutEffect } from "react";
+/**
+ * Freezes the displayed content/parent while the MobileSheet is closing so the
+ * sheet animates out over the submenu the user was in rather than flashing back
+ * to the root list.
+ *
+ * Refs are updated whenever the menu is open. When the user navigates back to
+ * root (parent === null) the frozen state is cleared, so closing from root does
+ * not freeze stale sub-level content.
+ *
+ * ⚠️ Stability contract: `content` and `parent` must be referentially stable
+ * across renders while the menu is open (e.g. produced by `useMemo`).
+ * Passing a new array or object literal on every render will cause the
+ * `useLayoutEffect` to re-run every cycle, defeating the freeze: the ref will
+ * always reflect the latest values so there is nothing to freeze when
+ * `isOpen` transitions to `false`.
+ */
+export const useDisplayContent = (isOpen, content, parent) => {
+    const lastRef = useRef({ content: [], parent: null });
+    // content and parent are compared by reference — see stability contract above.
+    useLayoutEffect(() => {
+        if (isOpen !== false) {
+            lastRef.current = { content, parent };
+        }
+    }, [isOpen, content, parent]);
+    const isFreezing = isOpen === false && lastRef.current.parent !== null;
+    return {
+        displayContent: isFreezing ? lastRef.current.content : content,
+        displayParent: isFreezing ? lastRef.current.parent : parent
+    };
+};

package/esm/mobileSheet/components/mobileSheetTitle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 export interface IMobileSheetTitle extends IZenComponentProps {
 }

package/esm/nav/context/nav.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface INavContext {
     collapsed: boolean;
     onCollapseToggle?: (isCollapsed: boolean) => void;

package/esm/nav/navFooter/navEditFooter/navEditFooter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./navEditFooter.less";
 import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
 /**

package/esm/nav/navFooter/navFooter.d.ts

@@ -8,7 +8,7 @@ export interface INavFooter extends IZenComponentProps {
  */
 export declare const NavFooter: FC<INavFooter> & {
     Action: {
-        ({ children }: import("./navFooterAction/navFooterAction").INavFooterActionProps): import("react/jsx-runtime").JSX.Element | null;
+        ({ children, active }: import("./navFooterAction/navFooterAction").INavFooterActionProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;
     };
     Bottom: FC<IZenComponentProps>;

package/esm/nav/navFooter/navFooterAction/navFooterAction.d.ts

@@ -1,11 +1,12 @@
 import "./navFooterAction.less";
 import { PropsWithChildren } from "react";
 export interface INavFooterActionProps extends PropsWithChildren {
+    active?: boolean;
 }
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
 export declare const NavFooterAction: {
-    ({ children }: INavFooterActionProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ children, active }: INavFooterActionProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/esm/nav/navFooter/navFooterAction/navFooterAction.js

@@ -40,7 +40,8 @@ injectString("el-GR", "Configure", "\u0394\u03B9\u03B1\u03BC\u03CC\u03C1\u03C6\u
 injectString("et-EE", "Configure", "Seadista");
 injectString("bg-BG", "Configure", "\u041A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u0430\u043D\u0435");
 export const NavFooterAction = ({
-  children
+  children,
+  active
 }) => {
   const {
     translate
@@ -58,6 +59,7 @@ export const NavFooterAction = ({
     title: translate("Configure"),
     menuAlignment: "end-bottom",
     isMenuItem: false,
+    active: active,
     children: filteredItems
   });
 };

package/esm/nav/navItem/navItem.d.ts

@@ -3,6 +3,7 @@ import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import { FC, ReactNode } from "react";
 import { IIcon } from "../../icons/icon";
 import { TAlignment } from "../../absolute/absolute";
+import { TNavItemType } from "./navItemType";
 interface INavItemCommon extends IZenComponentProps {
     title: string;
     primaryIcon?: FC<IIcon> | ReactNode;
@@ -17,6 +18,7 @@ interface INavItemCommon extends IZenComponentProps {
     isExternalLink?: boolean;
     iconClass?: string;
     isPrimary?: boolean;
+    type?: TNavItemType;
     tabIndex?: 0 | -1;
     isMenuItem?: boolean;
     tooltipAlignment?: TAlignment;

package/esm/nav/navItem/navItem.js

@@ -9,32 +9,48 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-import { useRef, useState, useEffect, Children, cloneElement, createContext, useContext, useId } from "react";
-import { IconBeta } from "../../icons/iconBeta";
-import { IconChevronRight } from "../../icons/iconChevronRight";
-import { IconChevronLeft } from "../../icons/iconChevronLeft";
-import { IconOpen2 } from "../../icons/iconOpen2";
-import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
+import { useRef, useState, useEffect, Children, cloneElement, createContext, useContext, useId, isValidElement } from "react";
 import { Tooltip } from "../../tooltip/tooltip";
 import { ControlledMenu } from "../../menu/controlledMenu";
 import { useNavContext } from "../context/nav.context";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
-const ICON_SIZE = "huge";
-const SUBMENU_ICON_SIZE = "large";
+import { NavItemContent, ICON_SIZE, SUBMENU_ICON_SIZE } from "./navItemContent";
+import { createMenuItem } from "../../menu/components/createMenuItem";
+import { NavItemType } from "./navItemType";
 export const NavItemContext = createContext({ parentLevel: 0 });
 const defaultTooltipAlignment = "end";
 const isLinkNavItem = (item) => !!item.link;
-const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, children }) => {
-    const primaryIconRef = useRef(null);
-    const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
-    const PrimaryIconComponent = typeof primaryIcon === "function" ? primaryIcon : null;
-    const SecondaryIconComponent = secondaryIcon;
-    const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
-    const primaryIconComponent = primaryIcon ? (_jsx("span", { ref: primaryIconRef, className: classNames(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? (_jsx("span", { className: "zen-nav-item__beta", children: _jsx(IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? (_jsx("span", { className: "zen-nav-item__icon", children: _jsx(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? _jsx("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? (_jsxs("div", { className: "zen-nav-item__content-right", children: [counter ? _jsx("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? _jsx(ChevronIcon, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
-};
+const isNavItemElement = (child) => isValidElement(child) && child.type.displayName === "NavItem";
+const getWrapperClassName = ({ className, collapsed, active, isMobile, hasNested, isNested, isLink, type }) => classNames([
+    "zen-nav-item",
+    isLink ? "zen-nav-item--link" : "zen-nav-item--button",
+    isMobile ? "zen-nav-item--mobile" : "",
+    collapsed ? "zen-nav-item--collapsed" : "",
+    active ? "zen-nav-item--active" : "",
+    hasNested ? "zen-nav-item--has-nested" : "",
+    isNested ? "zen-nav-item--nested" : "",
+    type && type !== NavItemType.Default ? `zen-nav-item--${type}` : "",
+    className || ""
+]);
+const MobileNavMenuItem = createMenuItem((props) => {
+    const wrapperClassNames = getWrapperClassName(props);
+    return (_jsx("div", { className: wrapperClassNames, children: _jsx(NavItemContent, Object.assign({}, props, { hasSubmenu: props.hasChildren })) }));
+});
+// Recursively converts a NavItem subtree into a static tree of menu items for the mobile ControlledMenu.
+const buildMobileMenuItems = (children, parentId, onNavigate) => Children.toArray(children)
+    .filter(isNavItemElement)
+    .map(child => {
+    const link = isLinkNavItem(child.props) ? child.props.link : "";
+    const title = child.props.title;
+    const isExternal = child.props.isExternalLink;
+    const id = `${parentId}/${link}_${title}`;
+    const nested = buildMobileMenuItems(child.props.children, id, onNavigate);
+    const onClick = isLinkNavItem(child.props) ? onNavigate : nested.length === 0 ? child.props.onClick : undefined;
+    const wrappedOnClick = () => onClick && onClick();
+    return (_jsx(MobileNavMenuItem, Object.assign({ id: id }, child.props, { ariaLabel: child.props.title, isLink: isLinkNavItem(child.props), target: isExternal ? "_blank" : undefined, rel: isExternal ? "noopener noreferrer" : undefined, onClick: wrappedOnClick, onOpenChange: child.props.onDropdownStateChange, children: nested.length > 0 ? nested : undefined }), id));
+});
 const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, isMenuItem, level = 1 }) => {
     const ActionIconComponent = actionIcon;
     const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
@@ -47,18 +63,8 @@ const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, co
     };
     return (_jsx("button", { type: "button", className: "zen-nav-item__action", onClick: handleActionIconClick, "aria-label": actionIconTitle, title: actionIconTitle, role: isMenuItem ? "menuitem" : undefined, children: _jsx(ActionIconComponent, { size: iconSize }) }));
 };
-const getWrapperClassName = ({ className, collapsed, active, isMobile, hasNested, isNested, isLink }) => classNames([
-    "zen-nav-item",
-    isLink ? "zen-nav-item--link" : "zen-nav-item--button",
-    isMobile ? "zen-nav-item--mobile" : "",
-    collapsed ? "zen-nav-item--collapsed" : "",
-    active ? "zen-nav-item--active" : "",
-    hasNested ? "zen-nav-item--has-nested" : "",
-    isNested ? "zen-nav-item--nested" : "",
-    className || ""
-]);
 const LinkNavItem = (_a) => {
-    var { className, title, collapsed, active, link, isExternalLink, tabIndex, isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick } = _a, rest = __rest(_a, ["className", "title", "collapsed", "active", "link", "isExternalLink", "tabIndex", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick"]);
+    var { className, title, collapsed, active, link, isExternalLink, tabIndex, isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick, type } = _a, rest = __rest(_a, ["className", "title", "collapsed", "active", "link", "isExternalLink", "tabIndex", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick", "type"]);
     const isMobile = useMobile();
     const { parentLevel = 0, closeParentMenu } = useContext(NavItemContext);
     const { onNavigate } = useNavContext();
@@ -66,13 +72,13 @@ const LinkNavItem = (_a) => {
     const linkElement = (_jsx("a", { href: link, "aria-label": title, title: title, target: isExternalLink ? "_blank" : undefined, rel: isExternalLink ? "noopener noreferrer" : undefined, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, onClick: () => {
             closeParentMenu && closeParentMenu();
             onNavigate && onNavigate();
-        }, className: "zen-link--light zen-nav-item__main", children: _jsxs(NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: currentLevel }, rest, { children: [_jsx("span", { className: "zen-nav-item__title-text", children: title }), isExternalLink && !collapsed ? _jsx(IconOpen2, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })) }));
+        }, className: "zen-link--light zen-nav-item__main", children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: currentLevel, isExternalLink: isExternalLink }, rest)) }));
     const item = collapsed ? (_jsx(Tooltip, { trigger: linkElement, alignment: tooltipAlignment, children: title })) : (linkElement);
-    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active, isMobile, isLink: true }), children: [item, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
+    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active, isMobile, isLink: true, type }), children: [item, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
 };
 LinkNavItem.displayName = "LinkNavItem";
 const ButtonNavItem = (_a) => {
-    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "end-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick, onDropdownStateChange } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick", "onDropdownStateChange"]);
+    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "end-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick, onDropdownStateChange, type } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick", "onDropdownStateChange", "type"]);
     const [menuOpen, setMenuOpen] = useState(false);
     const { parentLevel = 0, closeParentMenu } = useContext(NavItemContext);
     useEffect(() => {
@@ -93,7 +99,7 @@ const ButtonNavItem = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     };
-    const handleKeyPress = evt => {
+    const handleKeyPress = (evt) => {
         if (hasNestedItems && (evt.key === "Enter" || evt.key === " ")) {
             evt.preventDefault();
             setMenuOpen(true);
@@ -104,32 +110,35 @@ const ButtonNavItem = (_a) => {
         }
     };
     const isMobile = useMobile();
+    const { onNavigate } = useNavContext();
     const isActive = active || (hasNestedItems && menuOpen);
     const triggerId = useId();
-    const buttonElement = (_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: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })) }));
+    const buttonElement = (_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: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest)) }));
     const trigger = collapsed ? (_jsx(Tooltip, { trigger: buttonElement, alignment: tooltipAlignment, children: title })) : (buttonElement);
     if (hasNestedItems) {
-        // Process children to add appropriate level classes while allowing unlimited nesting
         const childLevel = currentLevel + 1;
+        const popupClass = `zen-nav-popup zen-nav-l${childLevel}-popup`;
+        const popupClassMobile = `zen-nav-popup--mobile zen-nav-l${childLevel}-popup--mobile`;
+        const popupListClass = `zen-nav-popup__list zen-nav-l${childLevel}-popup__list`;
+        const popupListClassMobile = `zen-nav-popup__list--mobile zen-nav-l${childLevel}-popup__list--mobile`;
+        const closeLevelMenu = () => {
+            setMenuOpen(false);
+            closeParentMenu && closeParentMenu();
+        };
+        // For mobiles convert the entire subtree into a static NavMenuItem tree
+        if (isMobile) {
+            return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems, type }), children: [trigger, _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: classNames([popupClass, popupClassMobile]), listClassName: classNames([popupListClass, popupListClassMobile]), ariaLabelledby: triggerId, children: buildMobileMenuItems(children, triggerId, onNavigate) })] }));
+        }
+        // Desktop: clone children with level classes and render nested ControlledMenu popups per level.
         const processedChildren = validChildren.map(child => {
             const childElement = child;
             const levelClass = `zen-nav-item--level-${childLevel}`;
-            const levelClassMobile = `zen-nav-item--level-${childLevel}--mobile`;
             const nestedClass = childLevel > 1 ? "zen-nav-item--nested" : "";
-            return cloneElement(childElement, Object.assign(Object.assign({}, childElement.props), { className: classNames([levelClass, nestedClass, isMobile ? levelClassMobile : "", childElement.props.className || ""]), collapsed: false }));
+            return cloneElement(childElement, Object.assign(Object.assign({}, childElement.props), { className: classNames([levelClass, nestedClass, childElement.props.className || ""]), collapsed: false }));
         });
-        const popupLevel = childLevel;
-        const popupClass = `zen-nav-popup zen-nav-l${popupLevel}-popup`;
-        const popupClassMobile = `zen-nav-popup--mobile zen-nav-l${popupLevel}-popup--mobile`;
-        const popupListClass = `zen-nav-popup__list zen-nav-l${popupLevel}-popup__list`;
-        const popupListClassMobile = `zen-nav-popup__list--mobile zen-nav-l${popupLevel}-popup__list--mobile`;
-        const closeLevelMenu = () => {
-            setMenuOpen(false);
-            closeParentMenu && closeParentMenu();
-        };
-        return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, _jsx(NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: classNames([popupClass, isMobile ? popupClassMobile : ""]), listClassName: classNames([popupListClass, isMobile ? popupListClassMobile : ""]), ariaLabelledby: triggerId, children: processedChildren }) })] }));
+        return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems, type }), children: [trigger, _jsx(NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: popupClass, listClassName: popupListClass, ariaLabelledby: triggerId, children: processedChildren }) })] }));
     }
-    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
+    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems, type }), children: [trigger, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
 };
 ButtonNavItem.displayName = "ButtonNavItem";
 /**

package/esm/nav/navItem/navItemContent.d.ts

@@ -0,0 +1,19 @@
+import "./navItem.less";
+import { FC, ReactNode } from "react";
+import { IIcon } from "../../icons/icon";
+import { TIconSize } from "../../icons/iconSize";
+export declare const ICON_SIZE: TIconSize;
+export declare const SUBMENU_ICON_SIZE: TIconSize;
+export interface INavItemContent {
+    title: string;
+    primaryIcon?: FC<IIcon> | ReactNode;
+    secondaryIcon?: FC<IIcon>;
+    isBeta?: boolean;
+    counter?: string;
+    collapsed?: boolean;
+    hasSubmenu?: boolean;
+    iconClass?: string;
+    level?: number;
+    isExternalLink?: boolean;
+}
+export declare const NavItemContent: ({ title, primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level, isExternalLink }: INavItemContent) => import("react/jsx-runtime").JSX.Element;

package/esm/nav/navItem/navItemContent.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { IconBeta } from "../../icons/iconBeta";
+import { IconChevronRight } from "../../icons/iconChevronRight";
+import { IconChevronLeft } from "../../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
+import { IconOpen2 } from "../../icons/iconOpen2";
+export const ICON_SIZE = "huge";
+export const SUBMENU_ICON_SIZE = "large";
+export const NavItemContent = ({ title, primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, isExternalLink = false }) => {
+    const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
+    const PrimaryIconComponent = typeof primaryIcon === "function" ? primaryIcon : null;
+    const SecondaryIconComponent = secondaryIcon;
+    const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
+    const primaryIconComponent = primaryIcon ? (_jsx("span", { className: classNames(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-nav-item__content-left", children: !collapsed ? (_jsxs(_Fragment, { children: [isBeta ? (_jsx("span", { className: "zen-nav-item__beta", children: _jsx(IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent ? (_jsx("span", { className: "zen-nav-item__icon", children: _jsx(SecondaryIconComponent, { size: iconSize }) })) : null, _jsxs("span", { className: "zen-nav-item__title", children: [_jsx("span", { className: "zen-nav-item__title-text", children: title }), isExternalLink ? _jsx(IconOpen2, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })] })) : (primaryIconComponent) }), !collapsed && (counter || hasSubmenu) ? (_jsxs("div", { className: "zen-nav-item__content-right", children: [counter ? _jsx("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? _jsx(ChevronIcon, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
+};

package/esm/nav/navItem/navItemType.d.ts

@@ -0,0 +1,7 @@
+export declare const NavItemType: {
+    /** Standard navigation item: secondary text colour. */
+    readonly Default: "default";
+    /** Call to action: label and icons follow the hyperlink colour. */
+    readonly Tertiary: "tertiary";
+};
+export type TNavItemType = (typeof NavItemType)[keyof typeof NavItemType];

package/esm/nav/navItem/navItemType.js

@@ -0,0 +1,6 @@
+export const NavItemType = {
+    /** Standard navigation item: secondary text colour. */
+    Default: "default",
+    /** Call to action: label and icons follow the hyperlink colour. */
+    Tertiary: "tertiary"
+};

package/esm/nav/utils/navUtils.d.ts

@@ -1,10 +1,8 @@
-import { ReactElement, ReactNode } from "react";
+import { PropsWithChildren, ReactElement, ReactNode } from "react";
 import { IButtonNavItem, ILinkNavItem } from "../navItem/navItem";
 export declare const navHeaderImage = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIzIiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgMTIzIDE1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDcuNDE3OCA1LjY2MDFIMzkuNTkxNVY2Ljc0NTI2SDQ1LjM1MjdDNDUuNDE5MiA3LjA2NjkzIDQ1LjQ1MjggNy4yNzc1IDQ1LjQ1MjggNy4zNzA5QzQ1LjQ1MjggOC41OTE3NyA0NS4xOTczIDkuMzU1MjUgNDQuNjk0IDkuNjM5OTdDNDQuMTg1NCA5LjkyODEzIDQyLjgyODkgMTAuMDczOSA0MC42NjIzIDEwLjA3MzlDMzcuODI1NyAxMC4wNzM5IDM2LjA1NzggOS45MTk3IDM1LjQwNzkgOS42MTUxNEMzNC43NjUzIDkuMzE0NDkgMzQuNDM5NyA4LjQ4ODM4IDM0LjQzOTcgNy4xNTkwM0wzNC40MjY2IDUuNjMwOThMMzQuNDUzIDQuMjExNTVDMzQuNDUzIDIuOTAyNCAzNC43NDYyIDIuMDc0MzkgMzUuMzI0MiAxLjc1MDMzQzM1LjkwNzcgMS40MjMxOSAzNy4zOTE1IDEuMjU3MzEgMzkuNzM0MiAxLjI1NzMxQzQyLjI3MjQgMS4yNTczMSA0My44NjMxIDEuMzYwOTMgNDQuNDYyIDEuNTY0ODRDNDUuMDQ5IDEuNzY1MTkgNDUuMzQ2NyAyLjI5OTU3IDQ1LjM0NjcgMy4xNTMwMVYzLjQ1MjQ2SDQ3LjQyMTlWMy4wMTE4NEM0Ny40MjE5IDEuODE2NCA0Ni45NjM3IDEuMDM0NjIgNDYuMDYwMyAwLjY4ODIyN0M0NS4xNjY1IDAuMzQ1NzU4IDQzLjE1ODUgMC4xNzIwMjggNDAuMDkyIDAuMTcyMDI4QzM3LjAzMjQgMC4xNzIwMjggMzQuOTY3NSAwLjQzNzI1NyAzMy45NTQxIDAuOTYwMjMxQzMyLjkzNDUgMS40ODcwMSAzMi40MTc2IDIuNTU5NTcgMzIuNDE3NiA0LjE0ODFMMzIuNDA0MyA1LjA5NzMyTDMyLjQxNzYgNi42NzMxM0MzMi40MTc2IDguNTYyODkgMzIuODgyNiA5Ljc5NzMgMzMuNzk5NyAxMC4zNDI0QzM0LjcxMjEgMTAuODg0MSAzNi43ODg3IDExLjE1OSAzOS45NzI3IDExLjE1OUM0My4zNDA5IDExLjE1OSA0NS40NTU0IDEwLjkyNjggNDYuMjU3NyAxMC40NjgyQzQ3LjA2NTMgMTAuMDA2NiA0Ny40NzQ4IDguNzkyODMgNDcuNDc0OCA2Ljg2MTM2QzQ3LjQ3NDggNi4zNjIzOSA0Ny40NTY5IDUuOTY4MTEgNDcuNDIxNCA1LjY4OTMzTDQ3LjQxNzggNS42NjAxWiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNNDkuNDEyMSAxMS4wNDk4SDYxLjExNDVWOS45NjQ2M0g1MS41MjcxVjYuMDMyMjlINjAuNzE2NlY0Ljk0NzI1SDUxLjUyNzFWMS4zNjc2SDYxLjExNDVWMC4yODI0NEg0OS40MTIxVjExLjA0OThaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik03Ni44NTk5IDEuMDY0OEM3NS45OTk4IDAuNDcyNTUgNzMuODMzIDAuMTcyMDI4IDcwLjQxOTcgMC4xNzIwMjhDNjcuNDY2NSAwLjE3MjAyOCA2NS40MTkyIDAuNDM1NzEzIDY0LjMzNjQgMC45NTU5NTNDNjMuMjQ1NSAxLjQ4IDYyLjY5MjUgMi40Njk3MyA2Mi42OTI1IDMuODk2ODlMNjIuNjY2IDQuOTA5MDlWNS42NjE2NEM2Mi42NjYgOC4xMjI2MiA2My4wOTIzIDkuNjcxOTQgNjMuOTMyNyAxMC4yNjYxQzY0Ljc3MTEgMTAuODU4NSA2Ni45NTM3IDExLjE1OSA3MC40MTk3IDExLjE1OUM3My45MDQgMTEuMTU5IDc2LjA4ODggMTAuODU2MSA3Ni45MTM5IDEwLjI1OEM3Ny43NDExIDkuNjU4NTEgNzguMTYwNiA4LjA2NDUyIDc4LjE2MDYgNS41MjA1OUM3OC4xNjA2IDMuMTU4NDggNzcuNzIzMSAxLjY1OTQzIDc2Ljg1OTkgMS4wNjQ4Wk02NS40MDQ1IDEuODEzNzlDNjUuODgxOCAxLjQ0NDU4IDY3LjU2NDUgMS4yNTcxOSA3MC40MDY3IDEuMjU3MTlDNzIuODgxNiAxLjI1NzE5IDc0LjQ3MzEgMS40MTY5IDc1LjEzNjkgMS43MzE4Qzc1Ljc5MzEgMi4wNDMxMyA3Ni4xMjUyIDIuNzkwMjIgNzYuMTI1MiAzLjk1Mjk4TDc2LjEzODYgNC45NjM4N1Y1LjY2MTc2Qzc2LjEzODYgNy44NTIyOCA3NS44OTc1IDkuMTQ5NTYgNzUuNDIyMSA5LjUxNzQ2Qzc0Ljk0NDggOS44ODY5IDczLjI1NzQgMTAuMDczOSA3MC40MDY3IDEwLjA3MzlDNjcuNTY0NSAxMC4wNzM5IDY1Ljg4MTYgOS44ODcwMiA2NS40MDQ1IDkuNTE3NDZDNjQuOTI5MiA5LjE0OTQ0IDY0LjY4ODEgNy44NTIxNiA2NC42ODgxIDUuNjYxNzZDNjQuNjg4MSAzLjQ3NjM1IDY0LjkyOTIgMi4xODE2OSA2NS40MDQ1IDEuODEzNzlaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik05Mi44NDYzIDAuMjgyNDRINzguOTgyNFYxLjQ2OTQ0SDg0Ljg4MzVWMTEuMDQ5OEg4Ni45OTg2VjEuNDY5NDRIOTIuODQ2M1YwLjI4MjQ0WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMTAwLjMxOCAwLjI4MjQ0SDk3LjQxMTVMOTAuNzQwMiAxMS4wNDk4SDkyLjk4NTRMOTQuMzc3NCA4Ljc4NDE3SDEwMy40OThMMTA0LjkwMyAxMS4wNDk4SDEwNy4xMjJMMTAwLjMyOSAwLjI5OTA3NkwxMDAuMzE4IDAuMjgyNDRaTTEwMi44NjEgNy44MDg4MUg5NS4wMDFMOTguOTA0OCAxLjM3MTE3TDEwMi44NjEgNy44MDg4MVoiIGZpbGw9IiMyNTQ3N0IiLz4KPHBhdGggZD0iTTEyMC4yMDcgNS40MDM2OEMxMjEuNjkxIDUuMDczOTMgMTIyLjQ0MiA0LjMxNDYgMTIyLjQ0MiAzLjE0NTU0QzEyMi40NDIgMS45NzI5MiAxMjIuMDkxIDEuMTkyOTIgMTIxLjM5NyAwLjgyNzc1NEMxMjAuNzA5IDAuNDY1Nzk2IDExOS4yMzcgMC4yODI0NCAxMTcuMDIyIDAuMjgyNDRIMTA4Ljk3N1YxMS4wNDk4SDExNy44ODRDMTE5Ljc1NyAxMS4wNDk4IDEyMS4wOTEgMTAuODE1OCAxMjEuODUgMTAuMzU0MkMxMjIuNjEzIDkuODkwMDEgMTIzIDkuMDc2MzggMTIzIDcuOTM1ODRDMTIzIDYuNTQ2MzYgMTIyLjA2IDUuNjk0ODIgMTIwLjIwNyA1LjQwMzY4Wk0xMTkuNzA0IDQuNjI5NUMxMTkuMjIgNC44NjYzMyAxMTguMTE4IDQuOTg2MjMgMTE2LjQyNiA0Ljk4NjIzSDExMS4wOTJWMS4zNjc0OEgxMTYuOTgzQzExOC40MjggMS4zNjc0OCAxMTkuMzc1IDEuNDczIDExOS43OTYgMS42ODA5NkMxMjAuMjExIDEuODg1NTggMTIwLjQyIDIuMzQ2NTMgMTIwLjQyIDMuMDUxNTVDMTIwLjQyIDMuODY1NjYgMTIwLjE4IDQuMzk2NTkgMTE5LjcwNCA0LjYyOTVaTTExMS4wOTIgNi4wNzEyN0gxMTYuMzJDMTE4LjQ2MSA2LjA3MTI3IDExOS43ODkgNi4xNzk3NiAxMjAuMjY5IDYuMzkzM0MxMjAuNzM5IDYuNjAzMzkgMTIwLjk3OCA3LjE4NTU1IDEyMC45NzggOC4xMjM3MUMxMjAuOTc4IDguODc1NDMgMTIwLjc0MSA5LjM3MzgxIDEyMC4yNzQgOS42MDM5OUMxMTkuOCA5LjgzODIgMTE4Ljc3NyA5Ljk1NzAzIDExNy4yMzUgOS45NTcwM0wxMTUuMzkxIDkuOTY0NTJIMTExLjA5MlY2LjA3MTI3WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMCAwLjI3NzM1MUgyLjk4NzI1VjEuNTE1OEMzLjQ5ODA3IDEuMDA3MjEgNC4wNjYzOCAwLjYyNzU0NCA0LjY4OTk1IDAuMzc2NDU1QzUuMzE0NyAwLjEyNTYwNCA1Ljk5NDg0IDAgNi43MzI3MiAwQzcuNDc2OTEgMCA4LjE0ODc4IDAuMTY1MjkzIDguNzQ3MTQgMC40OTUyODZDOS4zNDYxNyAwLjgyNTUxNiA5LjgyNzg2IDEuMzA3ODUgMTAuMTkzMyAxLjk0MTgxQzEwLjY2NzcgMS4zMDc4NSAxMS4yNDk2IDAuODI1NTE2IDExLjkzOTggMC40OTUyODZDMTIuNjMgMC4xNjUyOTMgMTMuMzgzNSAwIDE0LjIwMTQgMEMxNS4wNDc1IDAgMTUuNzkyNiAwLjE3ODI0NiAxNi40MzQ2IDAuNTM0OTc1QzE3LjA3NzYgMC44OTE3MDQgMTcuNTM5IDEuMzU3MjggMTcuODIwNyAxLjkzMjA3QzE4LjEwMTggMi41MDY2MSAxOC4yNDIgMy40NDEyMSAxOC4yNDIgNC43MzU3NVYxMS4wNTY1SDE1LjIzMjZWNS41ODc4OUMxNS4yMzI2IDQuMzY1OTUgMTUuMDY0OSAzLjUzODU0IDE0LjcyOTIgMy4xMDYxMUMxNC4zOTM4IDIuNjczMzMgMTMuODkwMyAyLjQ1NzE4IDEzLjIxOTEgMi40NTcxOEMxMi43MDg1IDIuNDU3MTggMTIuMjUwOSAyLjU4OTIgMTEuODQ1NyAyLjg1MzI0QzExLjQ0MSAzLjExNzUyIDExLjE0IDMuNDgyMzMgMTAuOTQzIDMuOTQ4MDNDMTAuNzQ2MSA0LjQxMzcyIDEwLjY0NzYgNS4xNjE2NCAxMC42NDc2IDYuMTkxOVYxMS4wNTY0SDcuNjM4MjJWNS44MzU1M0M3LjYzODIyIDQuODcxMjIgNy41NTk5OSA0LjE3MjczIDcuNDAyMSAzLjc0MDE5QzcuMjQ1MTIgMy4zMDc0MSA3LjAwOSAyLjk4NTUgNi42OTUzMiAyLjc3NDFDNi4zODA3MSAyLjU2MjU4IDYuMDAwNzQgMi40NTcxOCA1LjU1NDM2IDIuNDU3MThDNS4wNTY2NiAyLjQ1NzE4IDQuNjA1MDMgMi41OTA4NiA0LjE5OTQ3IDIuODU4MzVDMy43OTMzOCAzLjEyNTk2IDMuNDg5OTMgMy41MDA1MSAzLjI4OTI1IDMuOTgyODRDMy4wODc2NSA0LjQ2NDk0IDIuOTg3MjUgNS4yMjQ1IDIuOTg3MjUgNi4yNjE2NlYxMS4wNTY1SDBWMC4yNzczNTFaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0xOC44MTg0IDAuMjc3MzY3SDIxLjg3MTJMMjQuOTYzOSA3LjA0MDg1TDI4LjM3NjkgMC4yNzczNjdIMzEuNDM4M0wyMy45ODE2IDE1SDIwLjg5NjZMMjMuMzQ0IDEwLjI1MjdMMTguODE4NCAwLjI3NzM2N1oiIGZpbGw9IiMwMDc4RDMiLz4KPC9zdmc+Cg==";
 export declare const navHeaderImageCollapsed = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDM4IDEzIiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTE1LjE5OTcgMC4yMjU0NTdIMTcuNjAyOEwyMC4wMzczIDYuMDk0TDIyLjcyNCAwLjIyNTQ1N0gyNS4xMzM5TDE5LjI2NDEgMTNIMTYuODM1NkwxOC43NjIyIDguODgwODhMMTUuMTk5NyAwLjIyNTQ1N1oiIGZpbGw9IiMwMDc4RDMiLz4KPHBhdGggZD0iTTAuMzg2NzE5IDAuMjQwNjUySDIuNzM4MjVWMS4zMTUyM0MzLjE0MDM2IDAuODczOTM1IDMuNTg3NzMgMC41NDQ1MDggNC4wNzg2IDAuMzI2NjQzQzQuNTcwMzkgMC4xMDg5ODQgNS4xMDU3OSAwIDUuNjg2NjUgMEM2LjI3MjQ2IDAgNi44MDEzNSAwLjE0MzQyMiA3LjI3MjM4IDAuNDI5NzVDNy43NDM5MiAwLjcxNjI4NCA4LjEyMzEgMS4xMzQ4IDguNDEwNzQgMS42ODQ4N0M4Ljc4NDI0IDEuMTM0OCA5LjI0MjI1IDAuNzE2Mjg0IDkuNzg1NiAwLjQyOTc1QzEwLjMyODkgMC4xNDM0MjIgMTAuOTIyMSAwIDExLjU2NTkgMEMxMi4yMzIgMCAxMi44MTg1IDAuMTU0NjYgMTMuMzIzOCAwLjQ2NDE4OEMxMy44MyAwLjc3MzcxNSAxNC4xOTMzIDEuMTc3NjkgMTQuNDE1IDEuNjc2NDJDMTQuNjM2MyAyLjE3NDk0IDE0Ljc0NjYgMi45ODU4NyAxNC43NDY2IDQuMTA5MTJWOS41OTM0OEgxMi4zNzc3VjQuODQ4NUMxMi4zNzc3IDMuNzg4MjUgMTIuMjQ1NiAzLjA3MDMyIDExLjk4MTQgMi42OTUxMUMxMS43MTczIDIuMzE5NiAxMS4zMjEgMi4xMzIwNSAxMC43OTI2IDIuMTMyMDVDMTAuMzkwNyAyLjEzMjA1IDEwLjAzMDUgMi4yNDY2IDkuNzExNTIgMi40NzU3QzkuMzkyOTkgMi43MDUwMSA5LjE1NTk4IDMuMDIxNTUgOS4wMDA4OSAzLjQyNTYzQzguODQ1OTIgMy44Mjk3IDguNzY4NDMgNC40Nzg2NiA4Ljc2ODQzIDUuMzcyNTlWOS41OTMzOEg2LjM5OTQ0VjUuMDYzMzhDNi4zOTk0NCA0LjIyNjY2IDYuMzM3ODYgMy42MjA2IDYuMjEzNTcgMy4yNDUyOUM2LjA5IDIuODY5NzggNS45MDQxMyAyLjU5MDQ2IDUuNjU3MiAyLjQwNzAzQzUuNDA5NTQgMi4yMjM1IDUuMTEwNDQgMi4xMzIwNSA0Ljc1OTA1IDIuMTMyMDVDNC4zNjcyNyAyLjEzMjA1IDQuMDExNzUgMi4yNDgwNCAzLjY5MjUgMi40ODAxNEMzLjM3MjgzIDIuNzEyMzMgMy4xMzM5NiAzLjAzNzMzIDIuOTc1OTggMy40NTU4NEMyLjgxNzI5IDMuODc0MTQgMi43MzgyNSA0LjUzMzIgMi43MzgyNSA1LjQzMzEyVjkuNTkzNDhIMC4zODY3MTlWMC4yNDA2NTJaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0zNy41Njg1IDQuODc0NjhIMzEuNDA3N1Y1LjgxNjI2SDM1Ljk0MjlDMzUuOTk1MiA2LjA5NTM3IDM2LjAyMTYgNi4yNzgwNyAzNi4wMjE2IDYuMzU5MTJDMzYuMDIxNiA3LjQxODQ0IDM1LjgyMDYgOC4wODA5IDM1LjQyNDMgOC4zMjc5NEMzNS4wMjQgOC41Nzc5OCAzMy45NTYyIDguNzA0NDkgMzIuMjUwNiA4LjcwNDQ5QzMwLjAxNzcgOC43MDQ0OSAyOC42MjYgOC41NzA2NiAyOC4xMTQ0IDguMzA2MzlDMjcuNjA4NiA4LjA0NTUzIDI3LjM1MjMgNy4zMjg3MyAyNy4zNTIzIDYuMTc1MjhMMjcuMzQxOSA0Ljg0OTQyTDI3LjM2MjcgMy42MTc4MUMyNy4zNjI3IDIuNDgxODggMjcuNTkzNSAxLjc2MzQzIDI4LjA0ODUgMS40ODIyNkMyOC41MDc5IDEuMTk4NDEgMjkuNjc1OSAxLjA1NDQ3IDMxLjUyIDEuMDU0NDdDMzMuNTE4MSAxLjA1NDQ3IDM0Ljc3MDIgMS4xNDQzOCAzNS4yNDE3IDEuMzIxMzFDMzUuNzAzOCAxLjQ5NTE1IDM1LjkzODEgMS45NTg4MiAzNS45MzgxIDIuNjk5MzNWMi45NTkxNkgzNy41NzE3VjIuNTc2ODRDMzcuNTcxNyAxLjUzOTU5IDM3LjIxMSAwLjg2MTI0NiAzNi40OTk5IDAuNTYwNjlDMzUuNzk2MyAwLjI2MzUzNSAzNC4yMTU2IDAuMTEyNzkzIDMxLjgwMTcgMC4xMTI3OTNDMjkuMzkzMiAwLjExMjc5MyAyNy43Njc3IDAuMzQyOTI4IDI2Ljk3IDAuNzk2NzAxQzI2LjE2NzQgMS4yNTM3NyAyNS43NjA0IDIuMTg0NDIgMjUuNzYwNCAzLjU2Mjc1TDI1Ljc1IDQuMzg2MzdMMjUuNzYwNCA1Ljc1MzY3QzI1Ljc2MDQgNy4zOTMzOCAyNi4xMjY1IDguNDY0NDYgMjYuODQ4NSA4LjkzNzQxQzI3LjU2NjYgOS40MDc0NyAyOS4yMDE0IDkuNjQ1OTYgMzEuNzA3OCA5LjY0NTk2QzM0LjM1OTIgOS42NDU5NiAzNi4wMjM3IDkuNDQ0NDkgMzYuNjU1MyA5LjA0NjZDMzcuMjkxIDguNjQ2MDMgMzcuNjEzMyA3LjU5Mjg5IDM3LjYxMzMgNS45MTY5OUMzNy42MTMzIDUuNDg0MDUgMzcuNTk5MyA1LjE0MTk0IDM3LjU3MTMgNC45MDAwNUwzNy41Njg1IDQuODc0NjhaIiBmaWxsPSIjMjU0NzdCIi8+Cjwvc3ZnPg==";
 export declare const detectOverlayScrollbar: () => boolean;
 export declare function isImageUrl(str?: string | ReactNode): boolean;
-export declare const filterPrimaryNavItems: <T extends {
-    children?: ReactNode;
-}>(element: ReactElement<T>, isNegative: boolean) => ReactElement<T> | null;
+export declare const filterPrimaryNavItems: <T extends PropsWithChildren>(element: ReactElement<T>, isNegative: boolean) => ReactElement<T> | null;
 export declare const collectNavItems: (element: ReactElement) => (ReactElement<ILinkNavItem> | ReactElement<IButtonNavItem>)[];

package/esm/overview/overview.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./overview.less";
 export declare enum OverviewOptionsType {
     Positive = "positive",

package/esm/pageHeader/pageHeader.d.ts

@@ -12,5 +12,5 @@ interface IPageHeaderComponents {
 }
 export declare const PageHeaderDisplayName = "PageHeader";
 export declare const PageHeaderInner: React.FC<IPageHeader>;
-export declare const PageHeader: React.FC<IPageHeader> & IPageHeaderComponents;
+export declare const PageHeader: typeof PageHeaderInner & IPageHeaderComponents;
 export {};

package/esm/pageHeader/pageHeaderButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IButton } from "../button/button";
 import { TButtonIconPosition } from "../textIconButton/textIconButton";
 import { TSvgIconSize } from "../svgIcon/svgIconSize";

package/esm/pageHeader/pageHeaderHelpers.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from "react";
 import React from "react";
-export declare const getItemsFromFragments: <T extends ReactElement<unknown, string | React.JSXElementConstructor<any>>>(items: T[]) => T[];
+export declare const getItemsFromFragments: <T extends ReactElement>(items: T[]) => T[];
 export declare const regulatePageHeaderChildren: (children: ReactElement | ReactElement[] | (ReactElement | null | undefined)[] | null | undefined) => ReactElement<unknown, string | React.JSXElementConstructor<any>>[][];

package/esm/pageHeader/pageHeaderMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IIcon } from "../icons/icon";
 import { IHeaderMenu } from "../header/headerMenu";
 export interface IPageHeaderMenu extends Omit<IHeaderMenu, "important" | "icon" | "inContextMenu"> {

package/esm/pagination/paginationArrow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PaginationType } from "./paginationType";
 export type TArrowsValue = "previous" | "next";
 export interface IPaginationArrow {

package/esm/pill/interfaces/pill.interface.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import { IIcon } from "../../icons/icon";
 export type TPillSize = "default" | "fullWidth" | Omit<string, "default" | "fullWidth">;

package/esm/pillBox/components/pillBoxItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IPillData } from "../pillBox";
 import "./pillBoxItem.less";
 interface IPillItem {
@@ -6,6 +5,6 @@ interface IPillItem {
     onRemove: (value: string) => void;
     className: string;
 }
-export declare const PillBoxItem: import("react").NamedExoticComponent<IPillItem>;
+export declare const PillBoxItem: import("react").MemoExoticComponent<({ item, onRemove, className }: IPillItem) => import("react/jsx-runtime").JSX.Element>;
 export declare const TRANSLATIONS: string[];
 export {};

package/esm/progressIndicator/progressIndicator.d.ts

@@ -0,0 +1,39 @@
+import "./progressIndicator.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export declare enum ProgressIndicatorType {
+    Positive = "positive",
+    Negative = "negative",
+    Default = "default",
+    Warning = "warning"
+}
+export interface IProgressIndicator extends Pick<IZenComponentProps, "className"> {
+    /**
+     * Accessible name describing what the value measures (e.g. `"Route progress"`).
+     * Applied as `aria-label` on the `progressbar` element, which requires a name.
+     * Not rendered visually — provide a localized string. Required.
+     */
+    label: string;
+    /** Lower bound of the value scale. Defaults to `0`. */
+    min?: number;
+    /** Upper bound of the value scale. Defaults to `100`. */
+    max?: number;
+    /** Current value on the `[min, max]` scale. Clamped into range. Defaults to `0`. */
+    now?: number;
+    /** Fill color category, mapped to design tokens. Defaults to {@link ProgressIndicatorType.Default}. */
+    type?: ProgressIndicatorType;
+}
+/**
+ * A compact, pill-shaped progress visual built for table cells.
+ *
+ * Presentational and grid-agnostic — use it inside a data grid column's inline
+ * `render`. It is distinct from `ProgressBar`: it exposes categorical fill
+ * colors (positive / negative / default / warning) rather than low/average/high
+ * semantics, and always renders as a full-width pill.
+ *
+ * A `label` is required: it names the `progressbar` for assistive technology
+ * (applied as `aria-label`) and is not rendered visually.
+ */
+export declare const ProgressIndicator: {
+    ({ label, min, max, now, type, className }: IProgressIndicator): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/progressIndicator/progressIndicator.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { getProgressIndicatorPercent, getProgressIndicatorValue } from "./progressIndicatorUtils";
+export var ProgressIndicatorType;
+(function (ProgressIndicatorType) {
+    ProgressIndicatorType["Positive"] = "positive";
+    ProgressIndicatorType["Negative"] = "negative";
+    ProgressIndicatorType["Default"] = "default";
+    ProgressIndicatorType["Warning"] = "warning";
+})(ProgressIndicatorType || (ProgressIndicatorType = {}));
+/**
+ * A compact, pill-shaped progress visual built for table cells.
+ *
+ * Presentational and grid-agnostic — use it inside a data grid column's inline
+ * `render`. It is distinct from `ProgressBar`: it exposes categorical fill
+ * colors (positive / negative / default / warning) rather than low/average/high
+ * semantics, and always renders as a full-width pill.
+ *
+ * A `label` is required: it names the `progressbar` for assistive technology
+ * (applied as `aria-label`) and is not rendered visually.
+ */
+export const ProgressIndicator = ({ label, min = 0, max = 100, now = 0, type = ProgressIndicatorType.Default, className }) => {
+    const percent = getProgressIndicatorPercent(min, max, now);
+    return (_jsx("div", { className: classNames(["zen-progress-indicator", className !== null && className !== void 0 ? className : ""]), children: _jsx("div", { className: classNames(["zen-progress-indicator__fill", `zen-progress-indicator__fill--${type}`]), role: "progressbar", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": getProgressIndicatorValue(min, max, now), style: { width: `${percent}%` } }) }));
+};
+ProgressIndicator.displayName = "ProgressIndicator";