@geotab/zenith 3.6.3 → 3.7.0

package/esm/menu/components/menuItem.js

@@ -24,7 +24,7 @@ export const isMenuItem = (element) => {
 export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment }) => {
     const aligmentContext = useContext(MenuAlignmentContext);
     const contentAlignment = alignment || aligmentContext.alignment || "right-top";
-    const { path, onOpenBranch, closeBranch } = useContext(PathContext);
+    const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = useContext(PathContext);
     const memoizedDesktopActionOnClick = useCallback((itemId, e) => {
         setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(false);
         onClick === null || onClick === void 0 ? void 0 : onClick(itemId, e);
@@ -83,6 +83,16 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
         return cont;
     }, [children, isMobile, setIsOpen, className]);
     const isOpen = useMemo(() => path.includes(id), [path, id]);
+    // Track previous isOpen state to detect when submenu opens
+    const wasOpenRef = useRef(false);
+    const localOpenedViaKeyboardRef = useRef(false);
+    // Capture keyboard navigation state synchronously when isOpen transitions to true
+    if (isOpen && !wasOpenRef.current && navigatedViaKeyboardRef) {
+        localOpenedViaKeyboardRef.current = navigatedViaKeyboardRef.current;
+        navigatedViaKeyboardRef.current = false; // Reset for next navigation
+    }
+    wasOpenRef.current = isOpen;
+    const openedViaKeyboard = localOpenedViaKeyboardRef.current;
     if (content.length === 0) {
         return _jsx(MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedDesktopActionOnClick, className: className, active: active, hasChildren: false }, id);
     }
@@ -99,6 +109,6 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
     else {
         popupTrigger = _jsx(MenuButton, { id: id, ref: ref, name: name, icon: icon, disabled: disabled, hasChildren: true, onClick: memoizedTriggerOnClick, active: active }, id);
     }
-    return _jsxs(Fragment, { children: [popupTrigger, _jsx(ControlledPopup, { className: classNames([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: "on", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: _jsx("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id);
+    return _jsxs(Fragment, { children: [popupTrigger, _jsx(ControlledPopup, { className: classNames([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: openedViaKeyboard ? "on" : "withTrigger", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: _jsx("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id);
 };
 MenuItem.displayName = "MenuItem";

package/esm/menu/contexts/pathContext.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 export interface IPathContext {
     path: string[];
     onOpenBranch: (id: string) => void;
     closeBranch: () => void;
+    navigatedViaKeyboardRef?: RefObject<boolean>;
+    keyboardActiveRef?: RefObject<boolean>;
 }
 export declare const PathContext: import("react").Context<IPathContext>;

package/esm/menu/contexts/pathProvider.d.ts

@@ -2,5 +2,5 @@ import { PropsWithChildren } from "react";
 import { IPathContext } from "./pathContext";
 interface IPathProvider extends IPathContext, PropsWithChildren {
 }
-export declare const PathProvider: ({ children, path, onOpenBranch, closeBranch }: IPathProvider) => import("react/jsx-runtime").JSX.Element;
+export declare const PathProvider: ({ children, path, onOpenBranch, closeBranch, navigatedViaKeyboardRef, keyboardActiveRef }: IPathProvider) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/menu/contexts/pathProvider.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PathContext } from "./pathContext";
-export const PathProvider = ({ children, path, onOpenBranch, closeBranch }) => (_jsx(PathContext.Provider, { value: { path, onOpenBranch, closeBranch }, children: children }));
+export const PathProvider = ({ children, path, onOpenBranch, closeBranch, navigatedViaKeyboardRef, keyboardActiveRef }) => (_jsx(PathContext.Provider, { value: { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef, keyboardActiveRef }, children: children }));

package/esm/menu/controlledMenu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/naming-convention, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
-import { Children, cloneElement, isValidElement, useState, useMemo, useCallback, useEffect } from "react";
+import { Children, cloneElement, isValidElement, useState, useMemo, useCallback, useEffect, useRef } from "react";
 import { MenuItem, isMenuItem } from "./components/menuItem";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { findContent } from "./utils/findContent";
@@ -19,17 +19,57 @@ import { useDeviceType } from "../commonHelpers/hooks/useDeviceType";
 import { generateId } from "../commonHelpers/utils";
 import { PathProvider } from "./contexts/pathProvider";
 import { isSeparator, MenuSeparator } from "./components/menuSeparator";
+import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment }) => {
     const [deviceType, setDeviceType] = useState(DeviceType.Desktop);
     const isMobile = deviceType === DeviceType.Mobile;
     const memoizedOnChange = useCallback(setIsOpen, [setIsOpen]);
     useDeviceType(setDeviceType);
+    const menuListRef = useRef(null);
     const [path, setPath] = useState([]);
+    // Track if the trigger was activated via keyboard
+    const openedViaKeyboardRef = useRef(false);
+    // Track if submenu was navigated via keyboard (ArrowRight)
+    const navigatedViaKeyboardRef = useRef(false);
+    // Track if keyboard is actively being used for navigation (vs mouse/touch)
+    const keyboardActiveRef = useRef(false);
+    // Listen for keyboard activation on trigger
+    useEffect(() => {
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return undefined;
+        const handleKeyDown = (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                openedViaKeyboardRef.current = true;
+            }
+        };
+        const handleMouseDown = () => {
+            openedViaKeyboardRef.current = false;
+        };
+        trigger.addEventListener("keydown", handleKeyDown);
+        trigger.addEventListener("mousedown", handleMouseDown);
+        return () => {
+            trigger.removeEventListener("keydown", handleKeyDown);
+            trigger.removeEventListener("mousedown", handleMouseDown);
+        };
+    }, [triggerRef]);
     useEffect(() => {
         if (path.length && !isOpen) {
             setPath([]);
         }
     }, [isOpen, path, setPath]);
+    // Focus the menu list container or first item when menu opens (for keyboard navigation)
+    useEffect(() => {
+        var _a;
+        if (isOpen && !isMobile && menuListRef.current) {
+            if (openedViaKeyboardRef.current) {
+                (_a = menuListRef.current.querySelector(FOCUSABLE_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                menuListRef.current.focus();
+            }
+        }
+    }, [isOpen, isMobile]);
     const onOpenBranch = useCallback((branchId) => {
         if (!branchId) {
             return;
@@ -107,48 +147,76 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
         });
         return [cont, par];
     }, [children, isMobile, path, setIsOpen]);
+    // Handle keyboard navigation when no menu item is focused (e.g., when menu just opened)
+    const handleUnfocusedKeyDown = (e, menuList) => {
+        var _a, _b;
+        if (e.key === "ArrowDown" || e.key === "Home") {
+            e.preventDefault();
+            (_a = findFirstFocusable(menuList)) === null || _a === void 0 ? void 0 : _a.focus();
+            return true;
+        }
+        if (e.key === "ArrowUp" || e.key === "End") {
+            e.preventDefault();
+            (_b = findLastFocusable(menuList)) === null || _b === void 0 ? void 0 : _b.focus();
+            return true;
+        }
+        return false;
+    };
+    const onMouseDown = () => {
+        keyboardActiveRef.current = false;
+    };
     const onKeyDown = (e) => {
         var _a, _b, _c, _d;
+        keyboardActiveRef.current = true;
         const target = e.target;
-        if (isButton(target) || isLink(target)) {
-            if (e.key === "ArrowDown") {
-                e.preventDefault();
-                (_a = findNextFocusable(target)) === null || _a === void 0 ? void 0 : _a.focus();
-                return;
-            }
-            if (e.key === "ArrowUp") {
-                e.preventDefault();
-                (_b = findPrevFocusable(target)) === null || _b === void 0 ? void 0 : _b.focus();
-                return;
-            }
-            if (e.key === "Home") {
-                e.preventDefault();
-                (_c = findFirstFocusable(target)) === null || _c === void 0 ? void 0 : _c.focus();
-                return;
-            }
-            if (e.key === "End") {
-                e.preventDefault();
-                (_d = findLastFocusable(target)) === null || _d === void 0 ? void 0 : _d.focus();
-                return;
+        const currentTarget = e.currentTarget;
+        if (!isButton(target) && !isLink(target)) {
+            if (target === currentTarget) {
+                const menuList = currentTarget.querySelector("ul");
+                if (menuList) {
+                    handleUnfocusedKeyDown(e, menuList);
+                }
             }
+            return;
         }
-        if (isButton(target)) {
-            if (e.key === "ArrowRight" && target.classList.contains("zen-menu-button__action--has-children")) {
-                e.preventDefault();
-                target.click();
-                return;
-            }
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            (_a = findNextFocusable(target)) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            (_b = findPrevFocusable(target)) === null || _b === void 0 ? void 0 : _b.focus();
+            return;
+        }
+        if (e.key === "Home") {
+            e.preventDefault();
+            (_c = findFirstFocusable(target)) === null || _c === void 0 ? void 0 : _c.focus();
+            return;
+        }
+        if (e.key === "End") {
+            e.preventDefault();
+            (_d = findLastFocusable(target)) === null || _d === void 0 ? void 0 : _d.focus();
+            return;
+        }
+        if (isButton(target) && (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") && target.classList.contains("zen-menu-button__action--has-children")) {
+            e.preventDefault();
+            navigatedViaKeyboardRef.current = true;
+            target.click();
         }
     };
-    const renderMenuList = () => _jsx("div", { onKeyDown: onKeyDown, className: classNames(["zen-action-list", className]), children: _jsxs("ul", { role: "menu", className: classNames(["zen-menu-item", className, listClassName]), children: [parent ? _jsx(MenuButton, { id: "root", name: parent.props.name || "", icon: IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
+    const renderMenuList = () => _jsx("div", { ref: menuListRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, className: classNames(["zen-action-list", className]), children: _jsxs("ul", { role: "menu", className: classNames(["zen-menu-item", className, listClassName]), children: [parent ? _jsx(MenuButton, { id: "root", name: parent.props.name || "", icon: IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
     const hideMenu = useCallback(() => {
         closeBranch();
         setIsOpen(false);
     }, [closeBranch, setIsOpen]);
     if (isMobile) {
-        return _jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: _jsxs(MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [_jsx(MobileSheet.Title, { children: title }), _jsx(MobileSheet.Content, { children: renderMenuList() })] }) }) });
+        return _jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsxs(MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [_jsx(MobileSheet.Title, { children: title }), _jsx(MobileSheet.Content, { children: renderMenuList() })] }) }) });
     }
-    return _jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: classNames(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, children: renderMenuList() }) }) });
+    return _jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: classNames(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, 
+                // focusOnOpen is false - ControlledMenu handles focus based on input method
+                // (keyboard vs mouse) in its own useEffect
+                focusOnOpen: false, children: renderMenuList() }) }) });
 };
 ControlledMenu.Item = MenuItem;
 ControlledMenu.Separator = MenuSeparator;

package/esm/nav/nav.d.ts

@@ -7,8 +7,9 @@ export interface INav extends IZenComponentProps {
     onMenuVisibilityToggle?: (isOpen: boolean) => void;
     isMobileMenuOpen?: boolean;
     onIsMobileMenuOpenToggle?: (isOpen: boolean) => void;
+    onEditModeToggle?: (isEdit: boolean) => void;
 }
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export declare const Nav: ({ children, className, collapsed, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen, onIsMobileMenuOpenToggle }: INav) => import("react/jsx-runtime").JSX.Element;
+export declare const Nav: ({ children, className, collapsed, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen, onIsMobileMenuOpenToggle, onEditModeToggle }: INav) => import("react/jsx-runtime").JSX.Element;

package/esm/nav/nav.js

@@ -51,7 +51,7 @@ const NavContent = ({ children }) => {
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle
+export const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle, onEditModeToggle
 // eslint-disable-next-line complexity
  }) => {
     const menuRef = useRef(null);
@@ -94,7 +94,8 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
     const onEditStateToggle = useCallback((isEdit) => {
         isEdit && !isMobile && onCollapseToggle && onCollapseToggle(false);
         editListItems && editFooter && setIsEditState(isEdit);
-    }, [onCollapseToggle, setIsEditState, editListItems, editFooter, isMobile]);
+        onEditModeToggle && onEditModeToggle(isEdit);
+    }, [onCollapseToggle, setIsEditState, editListItems, editFooter, isMobile, onEditModeToggle]);
     useEffect(() => {
         const wasMobile = prevIsMobileRef.current;
         prevIsMobileRef.current = isMobile;

package/esm/nav/navEditList/navEditList.js

@@ -9,10 +9,11 @@ const marksClassNames = {
     dragging: "zen-nav-edit-list__item--dragging",
     dragged: "zen-nav-edit-list__item--dragged"
 };
+const EDIT_ITEM_GAP = 10;
 export const NavEditList = ({ children, className, onItemsChangeOrder, onBeforeItemDrag }) => {
     const appsListRef = useRef(null);
     const dragHandler = onItemsChangeOrder ? onItemsChangeOrder : () => { };
-    const { onDragStart } = useDragAndDrop(appsListRef, dragHandler, marksClassNames, onBeforeItemDrag);
+    const { onDragStart } = useDragAndDrop(appsListRef, dragHandler, marksClassNames, onBeforeItemDrag, EDIT_ITEM_GAP);
     const childrenArray = useMemo(() => onItemsChangeOrder ? Children.map(children, child => attachDndHandler(child, onDragStart)) : children, [children, onItemsChangeOrder, onDragStart]);
     return _jsx("div", { className: classNames(["zen-nav-edit-list", className || ""]), ref: appsListRef, children: childrenArray });
 };

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

@@ -27,6 +27,7 @@ export interface ILinkNavItem extends INavItemCommon {
 export interface IButtonNavItem extends INavItemCommon {
     onClick?: () => void;
     menuAlignment?: TAlignment;
+    onDropdownStateChange?: (isOpen: boolean) => void;
 }
 interface INavItemContext {
     parentLevel?: number;

package/esm/nav/navItem/navItem.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-import { useRef, useState, Children, cloneElement, createContext, useContext } from "react";
+import { useRef, useState, useEffect, Children, cloneElement, createContext, useContext } from "react";
 import { IconBeta } from "../../icons/iconBeta";
 import { IconChevronRight } from "../../icons/iconChevronRight";
 import { IconOpen2 } from "../../icons/iconOpen2";
@@ -70,9 +70,12 @@ const LinkNavItem = (_a) => {
 };
 LinkNavItem.displayName = "LinkNavItem";
 const ButtonNavItem = (_a) => {
-    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick"]);
+    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-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"]);
     const [menuOpen, setMenuOpen] = useState(false);
     const { parentLevel = 0, closeParentMenu } = useContext(NavItemContext);
+    useEffect(() => {
+        onDropdownStateChange === null || onDropdownStateChange === void 0 ? void 0 : onDropdownStateChange(menuOpen);
+    }, [menuOpen, onDropdownStateChange]);
     const triggerRef = useRef(null);
     const currentLevel = parentLevel + 1;
     const validChildren = Children.toArray(children).filter(child => {

package/esm/pillExpandable/pillContent.d.ts

@@ -7,10 +7,11 @@ interface IPillContent {
     descriptionText?: TLazyContent<ReactNode>;
     mainAction?: TLazyContent<IPillExpandableAction>;
     secondaryAction?: TLazyContent<IPillExpandableAction>;
+    tertiaryAction?: TLazyContent<IPillExpandableAction>;
     onActionClick: () => void;
     isVisible?: boolean;
     errorHandler: (err: any) => ReactNode | undefined;
     descriptionId?: string;
 }
-export declare const PillContent: ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible, errorHandler, descriptionId }: IPillContent) => import("react/jsx-runtime").JSX.Element;
+export declare const PillContent: ({ date, count, descriptionText, mainAction, secondaryAction, tertiaryAction, onActionClick, isVisible, errorHandler, descriptionId }: IPillContent) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/pillExpandable/pillContent.js

@@ -4,7 +4,7 @@ import { Button } from "../button/button";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { LazyContent } from "../skeleton/lazyContent";
-export const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible = true, errorHandler, descriptionId }) => {
+export const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, tertiaryAction, onActionClick, isVisible = true, errorHandler, descriptionId }) => {
     const headerDriveClassName = useDriveClassName("zen-status-pill-popup__header-text");
     const descriptionDriveClassName = useDriveClassName("zen-status-pill-popup__description");
     const mainActionClick = useCallback((onClick) => () => {
@@ -15,11 +15,16 @@ export const PillContent = ({ date, count, descriptionText, mainAction, secondar
         onClick && onClick();
         onActionClick();
     }, [onActionClick]);
+    const tertiaryActionClick = useCallback((onClick) => () => {
+        onClick && onClick();
+        onActionClick();
+    }, [onActionClick]);
     const renderMainButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: mainActionClick(data.onClick), type: "primary", children: data.text })), [mainActionClick]);
-    const renderSecondaryButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: secondaryActionClick(data.onClick), type: "tertiary", children: data.text })), [secondaryActionClick]);
+    const renderSecondaryButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: secondaryActionClick(data.onClick), type: "secondary", children: data.text })), [secondaryActionClick]);
+    const renderTertiaryButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: tertiaryActionClick(data.onClick), type: "tertiary", children: data.text })), [tertiaryActionClick]);
     const renderDescription = useCallback(data => _jsx("div", { id: descriptionId, className: classNames(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName, descriptionId]);
     const renderCount = useCallback((data) => data ? _jsx("div", { className: classNames(["zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     const renderDate = useCallback((data) => data ? _jsx("div", { className: classNames(["zen-status-pill-popup__header-text", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     return _jsxs(_Fragment, { children: [(date || count) && isVisible && _jsxs("div", { className: "zen-status-pill-popup__content-header", children: [date && _jsx(LazyContent, { width: 80, type: "text", content: date, isVisible: isVisible, errorHandler: errorHandler, render: renderDate }), count && _jsx(LazyContent, { width: 80, type: "text", content: count, isVisible: isVisible, errorHandler: errorHandler, render: renderCount })] }), descriptionText &&
-                _jsx(LazyContent, { width: 200, type: "text", content: descriptionText, isVisible: isVisible, errorHandler: errorHandler, render: renderDescription }), (mainAction || secondaryAction) && isVisible && _jsxs("div", { className: "zen-status-pill-popup__actions", children: [mainAction && _jsx(LazyContent, { type: "button", content: mainAction, errorHandler: errorHandler, render: renderMainButton, isVisible: isVisible }), secondaryAction && _jsx(LazyContent, { type: "button", content: secondaryAction, errorHandler: errorHandler, render: renderSecondaryButton, isVisible: isVisible })] })] });
+                _jsx(LazyContent, { width: 200, type: "text", content: descriptionText, isVisible: isVisible, errorHandler: errorHandler, render: renderDescription }), (mainAction || secondaryAction || tertiaryAction) && isVisible && _jsxs("div", { className: "zen-status-pill-popup__actions", children: [mainAction && _jsx(LazyContent, { type: "button", content: mainAction, errorHandler: errorHandler, render: renderMainButton, isVisible: isVisible }), secondaryAction && _jsx(LazyContent, { type: "button", content: secondaryAction, errorHandler: errorHandler, render: renderSecondaryButton, isVisible: isVisible }), tertiaryAction && _jsx(LazyContent, { type: "button", content: tertiaryAction, errorHandler: errorHandler, render: renderTertiaryButton, isVisible: isVisible })] })] });
 };

package/esm/pillExpandable/pillExpandable.d.ts

@@ -1,5 +1,6 @@
 import "./pillExpandable.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { Exclusive } from "../commonHelpers/types/exclusive";
 import React, { FC, ReactNode } from "react";
 import { TViewMoreButton } from "./getProps";
 import { IIcon } from "../icons/icon";
@@ -20,6 +21,7 @@ export interface IBaseData {
     count?: TLazyContent<number>;
     mainAction?: TLazyContent<IPillExpandableAction>;
     secondaryAction?: TLazyContent<IPillExpandableAction>;
+    tertiaryAction?: TLazyContent<IPillExpandableAction>;
     getData?: undefined;
 }
 export interface IPromisedBaseData {
@@ -29,16 +31,20 @@ export interface IPromisedBaseData {
     count?: undefined;
     mainAction?: undefined;
     secondaryAction?: undefined;
+    tertiaryAction?: undefined;
 }
 type TProps = IBaseData | IPromisedBaseData;
-export interface IPillExpandable extends IZenComponentProps {
+export type TPopoverVariant = "default" | "placeholder";
+export type TPopoverSize = "small" | "medium" | "large";
+type TPillTypeBase = "error" | "success" | "warning" | "info" | "default";
+export type TPillType = TPillTypeBase | "upsell";
+/** Base props shared by all PillExpandable variants */
+export interface IPillExpandableBase extends IZenComponentProps {
     uniquePills?: number;
     text: string;
-    type?: "error" | "success" | "warning" | "info" | "default";
     viewMoreAction?: TViewMoreButton;
     className?: string;
     popupClassName?: string;
-    icon?: FC<IIcon> | false;
     secondaryIcon?: FC<IIcon> | false;
     isFlat?: boolean;
     isLoading?: boolean;
@@ -47,8 +53,25 @@ export interface IPillExpandable extends IZenComponentProps {
     isBeta?: boolean;
     hideCounterNumber?: boolean;
     autoExpandChildren?: boolean;
+    /** Popover size: small (220px), medium (320px), large (420px). Default: "medium" */
+    popoverSize?: TPopoverSize;
+    /** Title displayed in the popover title bar. If provided, the title bar will be shown. */
+    title?: string;
+}
+/** Props for standard PillExpandable (non-upsell) */
+interface IPillExpandableStandard extends IPillExpandableBase {
+    type?: TPillTypeBase;
+    icon?: FC<IIcon> | false;
+}
+/** Props for upsell PillExpandable - icon and children are not allowed */
+interface IPillExpandableUpsell extends IPillExpandableBase {
+    type: "upsell";
+    icon?: never;
+    children?: never;
 }
+/** Combined type using Exclusive to prevent mixing upsell with standard props */
+export type IPillExpandable = Exclusive<IPillExpandableStandard, IPillExpandableUpsell>;
 type TPillExpandable = IPillExpandable & TProps;
-export declare const PillExpandable: React.MemoExoticComponent<({ children, errorHandler, getData, text, description, date, count, mainAction, secondaryAction, viewMoreAction, uniquePills, type, className, popupClassName, isLoading, isFlat, icon, secondaryIcon, isBeta, loadingWidth, hideCounterNumber, autoExpandChildren }: TPillExpandable) => import("react/jsx-runtime").JSX.Element>;
+export declare const PillExpandable: React.MemoExoticComponent<({ children, errorHandler, getData, text, description, date, count, mainAction, secondaryAction, tertiaryAction, viewMoreAction, uniquePills, type, className, popupClassName, isLoading, isFlat, icon, secondaryIcon, isBeta, loadingWidth, hideCounterNumber, autoExpandChildren, popoverSize, title }: TPillExpandable) => import("react/jsx-runtime").JSX.Element>;
 export declare const TRANSLATIONS: string[];
 export {};