@geotab/zenith 3.6.3 → 3.7.0-beta.0

package/dist/list/hooks/useDragAndDrop.js

@@ -17,9 +17,11 @@ const zen_1 = require("../../utils/zen");
  *                          If not provided, defaults to 'zen-list-item' based classes
  * @param onBeforeDragOver - Optional callback function called before placing the placeholder at a new position.
  *                       Receives the target position and should return false to prevent the drag operation.
+ * @param itemsGap - Optional gap size in pixels between list items. Used to adjust placeholder positioning
+ *                   calculations during drag operations. Defaults to 0.
  * @returns An object containing the `onDragStart` event handler to be attached to draggable elements
  */
-const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDragOver) => {
+const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDragOver, itemsGap = 0) => {
     const dragImageRef = (0, react_1.useRef)(null);
     const dragMoveRef = (0, react_1.useRef)(undefined);
     const { moveScroll, cancelMoveScroll } = (0, useContainerScroll_1.useContainerScroll)();
@@ -50,8 +52,12 @@ const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDr
         if (!containerRef.current) {
             return;
         }
-        const items = containerRef.current.querySelectorAll(`.${cssMarks.general}`);
         const rect = element.getBoundingClientRect();
+        // preventing placeholder alignment when dragged element is not properly positioned yet
+        if (rect.top < 0) {
+            return;
+        }
+        const items = containerRef.current.querySelectorAll(`.${cssMarks.general}`);
         const listRect = containerRef.current.getBoundingClientRect();
         if (rect.top < listRect.top) {
             if (onBeforeDragOver && !onBeforeDragOver(0)) {
@@ -79,13 +85,14 @@ const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDr
             return;
         }
         const dragItemTopOffset = 4;
+        const halfGap = itemsGap / 2;
         for (let i = 0; i < items.length; i++) {
             const item = items[i];
             if (item.classList.contains(cssMarks.placeholder) || item.classList.contains(cssMarks.dragging)) {
                 continue;
             }
             const itemRect = item.getBoundingClientRect();
-            if (item !== element && rect.top > itemRect.top + dragItemTopOffset && rect.top <= itemRect.bottom) {
+            if (item !== element && rect.top > itemRect.top + dragItemTopOffset - halfGap && rect.top <= itemRect.bottom + halfGap) {
                 if (onBeforeDragOver && !onBeforeDragOver(i + 1)) {
                     return;
                 }
@@ -101,7 +108,7 @@ const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDr
                 return;
             }
         }
-    }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging]);
+    }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging, itemsGap]);
     const onDragStart = (0, react_1.useCallback)((e) => {
         var _a, _b, _c, _d, _e;
         e.preventDefault();

package/dist/menu/components/menuItem.js

@@ -28,7 +28,7 @@ exports.isMenuItem = isMenuItem;
 const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment }) => {
     const aligmentContext = (0, react_1.useContext)(headerContext_1.MenuAlignmentContext);
     const contentAlignment = alignment || aligmentContext.alignment || "right-top";
-    const { path, onOpenBranch, closeBranch } = (0, react_1.useContext)(pathContext_1.PathContext);
+    const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = (0, react_1.useContext)(pathContext_1.PathContext);
     const memoizedDesktopActionOnClick = (0, react_1.useCallback)((itemId, e) => {
         setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(false);
         onClick === null || onClick === void 0 ? void 0 : onClick(itemId, e);
@@ -87,6 +87,16 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
         return cont;
     }, [children, isMobile, setIsOpen, className]);
     const isOpen = (0, react_1.useMemo)(() => path.includes(id), [path, id]);
+    // Track previous isOpen state to detect when submenu opens
+    const wasOpenRef = (0, react_1.useRef)(false);
+    const localOpenedViaKeyboardRef = (0, react_1.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 (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedDesktopActionOnClick, className: className, active: active, hasChildren: false }, id);
     }
@@ -103,7 +113,7 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
     else {
         popupTrigger = (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: id, ref: ref, name: name, icon: icon, disabled: disabled, hasChildren: true, onClick: memoizedTriggerOnClick, active: active }, id);
     }
-    return (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [popupTrigger, (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: "on", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id);
+    return (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [popupTrigger, (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: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id);
 };
 exports.MenuItem = MenuItem;
 exports.MenuItem.displayName = "MenuItem";

package/dist/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/dist/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/dist/menu/contexts/pathProvider.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PathProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const pathContext_1 = require("./pathContext");
-const PathProvider = ({ children, path, onOpenBranch, closeBranch }) => ((0, jsx_runtime_1.jsx)(pathContext_1.PathContext.Provider, { value: { path, onOpenBranch, closeBranch }, children: children }));
+const PathProvider = ({ children, path, onOpenBranch, closeBranch, navigatedViaKeyboardRef, keyboardActiveRef }) => ((0, jsx_runtime_1.jsx)(pathContext_1.PathContext.Provider, { value: { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef, keyboardActiveRef }, children: children }));
 exports.PathProvider = PathProvider;

package/dist/menu/controlledMenu.js

@@ -22,17 +22,57 @@ const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
 const utils_1 = require("../commonHelpers/utils");
 const pathProvider_1 = require("./contexts/pathProvider");
 const menuSeparator_1 = require("./components/menuSeparator");
+const focusableSelector_1 = require("../utils/focusableSelector");
 const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment }) => {
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Desktop);
     const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
     const memoizedOnChange = (0, react_1.useCallback)(setIsOpen, [setIsOpen]);
     (0, useDeviceType_1.useDeviceType)(setDeviceType);
+    const menuListRef = (0, react_1.useRef)(null);
     const [path, setPath] = (0, react_1.useState)([]);
+    // Track if the trigger was activated via keyboard
+    const openedViaKeyboardRef = (0, react_1.useRef)(false);
+    // Track if submenu was navigated via keyboard (ArrowRight)
+    const navigatedViaKeyboardRef = (0, react_1.useRef)(false);
+    // Track if keyboard is actively being used for navigation (vs mouse/touch)
+    const keyboardActiveRef = (0, react_1.useRef)(false);
+    // Listen for keyboard activation on trigger
+    (0, react_1.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]);
     (0, react_1.useEffect)(() => {
         if (path.length && !isOpen) {
             setPath([]);
         }
     }, [isOpen, path, setPath]);
+    // Focus the menu list container or first item when menu opens (for keyboard navigation)
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isOpen && !isMobile && menuListRef.current) {
+            if (openedViaKeyboardRef.current) {
+                (_a = menuListRef.current.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                menuListRef.current.focus();
+            }
+        }
+    }, [isOpen, isMobile]);
     const onOpenBranch = (0, react_1.useCallback)((branchId) => {
         if (!branchId) {
             return;
@@ -110,48 +150,76 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
         });
         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 = (0, findFirstFocusable_1.findFirstFocusable)(menuList)) === null || _a === void 0 ? void 0 : _a.focus();
+            return true;
+        }
+        if (e.key === "ArrowUp" || e.key === "End") {
+            e.preventDefault();
+            (_b = (0, findLastFocusable_1.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 ((0, isButton_1.isButton)(target) || (0, isLink_1.isLink)(target)) {
-            if (e.key === "ArrowDown") {
-                e.preventDefault();
-                (_a = (0, findNextFocusable_1.findNextFocusable)(target)) === null || _a === void 0 ? void 0 : _a.focus();
-                return;
-            }
-            if (e.key === "ArrowUp") {
-                e.preventDefault();
-                (_b = (0, findPrevFocusable_1.findPrevFocusable)(target)) === null || _b === void 0 ? void 0 : _b.focus();
-                return;
-            }
-            if (e.key === "Home") {
-                e.preventDefault();
-                (_c = (0, findFirstFocusable_1.findFirstFocusable)(target)) === null || _c === void 0 ? void 0 : _c.focus();
-                return;
-            }
-            if (e.key === "End") {
-                e.preventDefault();
-                (_d = (0, findLastFocusable_1.findLastFocusable)(target)) === null || _d === void 0 ? void 0 : _d.focus();
-                return;
+        const currentTarget = e.currentTarget;
+        if (!(0, isButton_1.isButton)(target) && !(0, isLink_1.isLink)(target)) {
+            if (target === currentTarget) {
+                const menuList = currentTarget.querySelector("ul");
+                if (menuList) {
+                    handleUnfocusedKeyDown(e, menuList);
+                }
             }
+            return;
         }
-        if ((0, isButton_1.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 = (0, findNextFocusable_1.findNextFocusable)(target)) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            (_b = (0, findPrevFocusable_1.findPrevFocusable)(target)) === null || _b === void 0 ? void 0 : _b.focus();
+            return;
+        }
+        if (e.key === "Home") {
+            e.preventDefault();
+            (_c = (0, findFirstFocusable_1.findFirstFocusable)(target)) === null || _c === void 0 ? void 0 : _c.focus();
+            return;
+        }
+        if (e.key === "End") {
+            e.preventDefault();
+            (_d = (0, findLastFocusable_1.findLastFocusable)(target)) === null || _d === void 0 ? void 0 : _d.focus();
+            return;
+        }
+        if ((0, isButton_1.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 = () => (0, jsx_runtime_1.jsx)("div", { onKeyDown: onKeyDown, className: (0, classNames_1.classNames)(["zen-action-list", className]), children: (0, jsx_runtime_1.jsxs)("ul", { role: "menu", className: (0, classNames_1.classNames)(["zen-menu-item", className, listClassName]), children: [parent ? (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: parent.props.name || "", icon: iconArrowLeft_1.IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
+    const renderMenuList = () => (0, jsx_runtime_1.jsx)("div", { ref: menuListRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, className: (0, classNames_1.classNames)(["zen-action-list", className]), children: (0, jsx_runtime_1.jsxs)("ul", { role: "menu", className: (0, classNames_1.classNames)(["zen-menu-item", className, listClassName]), children: [parent ? (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: parent.props.name || "", icon: iconArrowLeft_1.IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
     const hideMenu = (0, react_1.useCallback)(() => {
         closeBranch();
         setIsOpen(false);
     }, [closeBranch, setIsOpen]);
     if (isMobile) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderMenuList() })] }) }) });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderMenuList() })] }) }) });
     }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.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() }) }) });
 };
 exports.ControlledMenu = ControlledMenu;
 exports.ControlledMenu.Item = menuItem_1.MenuItem;

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

@@ -54,7 +54,7 @@ const NavContent = ({ children }) => {
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle
+const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle, onEditModeToggle
 // eslint-disable-next-line complexity
  }) => {
     const menuRef = (0, react_1.useRef)(null);
@@ -97,7 +97,8 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
     const onEditStateToggle = (0, react_1.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]);
     (0, react_1.useEffect)(() => {
         const wasMobile = prevIsMobileRef.current;
         prevIsMobileRef.current = isMobile;

package/dist/nav/navEditList/navEditList.js

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

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

@@ -7,7 +7,7 @@ const button_1 = require("../button/button");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const lazyContent_1 = require("../skeleton/lazyContent");
-const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible = true, errorHandler, descriptionId }) => {
+const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, tertiaryAction, onActionClick, isVisible = true, errorHandler, descriptionId }) => {
     const headerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill-popup__header-text");
     const descriptionDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill-popup__description");
     const mainActionClick = (0, react_1.useCallback)((onClick) => () => {
@@ -18,12 +18,17 @@ const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction
         onClick && onClick();
         onActionClick();
     }, [onActionClick]);
+    const tertiaryActionClick = (0, react_1.useCallback)((onClick) => () => {
+        onClick && onClick();
+        onActionClick();
+    }, [onActionClick]);
     const renderMainButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: mainActionClick(data.onClick), type: "primary", children: data.text })), [mainActionClick]);
-    const renderSecondaryButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: secondaryActionClick(data.onClick), type: "tertiary", children: data.text })), [secondaryActionClick]);
+    const renderSecondaryButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: secondaryActionClick(data.onClick), type: "secondary", children: data.text })), [secondaryActionClick]);
+    const renderTertiaryButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: tertiaryActionClick(data.onClick), type: "tertiary", children: data.text })), [tertiaryActionClick]);
     const renderDescription = (0, react_1.useCallback)(data => (0, jsx_runtime_1.jsx)("div", { id: descriptionId, className: (0, classNames_1.classNames)(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName, descriptionId]);
     const renderCount = (0, react_1.useCallback)((data) => data ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     const renderDate = (0, react_1.useCallback)((data) => data ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__header-text", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(date || count) && isVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__content-header", children: [date && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 80, type: "text", content: date, isVisible: isVisible, errorHandler: errorHandler, render: renderDate }), count && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 80, type: "text", content: count, isVisible: isVisible, errorHandler: errorHandler, render: renderCount })] }), descriptionText &&
-                (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 200, type: "text", content: descriptionText, isVisible: isVisible, errorHandler: errorHandler, render: renderDescription }), (mainAction || secondaryAction) && isVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__actions", children: [mainAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: mainAction, errorHandler: errorHandler, render: renderMainButton, isVisible: isVisible }), secondaryAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: secondaryAction, errorHandler: errorHandler, render: renderSecondaryButton, isVisible: isVisible })] })] });
+                (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 200, type: "text", content: descriptionText, isVisible: isVisible, errorHandler: errorHandler, render: renderDescription }), (mainAction || secondaryAction || tertiaryAction) && isVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__actions", children: [mainAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: mainAction, errorHandler: errorHandler, render: renderMainButton, isVisible: isVisible }), secondaryAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: secondaryAction, errorHandler: errorHandler, render: renderSecondaryButton, isVisible: isVisible }), tertiaryAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: tertiaryAction, errorHandler: errorHandler, render: renderTertiaryButton, isVisible: isVisible })] })] });
 };
 exports.PillContent = PillContent;

package/dist/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 {};