@geotab/zenith 3.16.0 → 3.17.0-beta.1

package/dist/index.d.ts

@@ -736,6 +736,7 @@ export { PageLayout } from "./pageLayout/pageLayout";
 export { type IPagination, Pagination } from "./pagination/pagination";
 export { PaginationType } from "./pagination/paginationType";
 export { Pill } from "./pill/pill";
+export { DEFAULT_MAX_PILLS, type IPillData, type IPillBox, PillBox } from "./pillBox/pillBox";
 export { type IPillExpandableAction, type IBaseData, type IPromisedBaseData, type TPopoverSize, type IPillExpandable, PillExpandable } from "./pillExpandable/pillExpandable";
 export { type IPopup, Popup } from "./popup/popup";
 export { type IPrimaryIcon, PrimaryIcon } from "./primaryIcon/primaryIcon";
@@ -762,8 +763,9 @@ export { type ISummaryTileBar, SummaryTileBar, SummaryTileBarDisplayName } from
 export { type ITab, type ITabBar, TabBar } from "./tabBar/tabBar";
 export { type ITabBarContent, TabBarContent } from "./tabBar/tabBarContent";
 export { type ITableDetailPanel } from "./table/children/tableDetailPanel";
-export { NestedData } from "./table/nested/nestedData";
+export { DEFAULT_SHOW_MORE_CAP, type IShowMoreOptions, NestedData } from "./table/nested/nestedData";
 export { useNestedRows } from "./table/nested/useNestedRows";
+export { type IUseShowMoreConfig, useShowMore } from "./table/nested/useShowMore";
 export { type IListColumn, type TFeedResult, type IFeedExpandable, type ITable, type IListColumnWrapper, Table, getEmptySelection, ColumnSortDirection, getSortableValue, ActionsColumn, MainColumn, CheckboxColumn, ActionLinkColumn } from "./table/table";
 export { type ITabElement, type ITabs, TabsDisplayName, Tabs } from "./tabs/tabs";
 export { type TTagColor, type ITag } from "./tag/tag";

package/dist/index.js

@@ -16,9 +16,9 @@ exports.IconPinLocation2 = exports.IconPinLocation = exports.IconPinFilled = exp
 exports.IconSettings8 = exports.IconSettings7 = exports.IconSettings6 = exports.IconSettings4 = exports.IconSettings3 = exports.IconSettings2 = exports.IconSettings1 = exports.IconServer3 = exports.IconServer2 = exports.IconServer = exports.IconSend = exports.IconSecuredLines = exports.IconSecured = exports.IconSeatbelt = exports.IconSearchPage = exports.IconSearchLines = exports.IconSearchDocument = exports.IconSearch = exports.IconSdCard = exports.IconRuler = exports.IconRoute = exports.IconRotateRepeat2 = exports.IconRotateRepeat = exports.IconRotateCounterclockwise = exports.IconRotateClockwise = exports.IconResizeSmall = exports.IconResizeBig = exports.IconRepeat2 = exports.IconRepeat = exports.IconRemovePeople = exports.IconRefrigeration = exports.IconRedo2 = exports.IconRedo = exports.IconRecord = exports.IconReceipt = exports.IconRadar = exports.IconQuestion = exports.IconPuzzle = exports.IconPullRequest = exports.IconProcessor = exports.IconPrinter = exports.IconPound = exports.IconPotato = exports.IconPlusSquare = exports.IconPlusLines = exports.IconPlusFile = exports.IconPlusCircle = exports.IconPlus = exports.IconPlay = exports.IconPinLocation3 = void 0;
 exports.IconUsb = exports.IconUpload = exports.IconUnlocked = exports.IconUndock = exports.IconUndo2 = exports.IconUndo = exports.IconUnderline = exports.IconUmbrella = exports.IconTruck = exports.IconTrendNeutral = exports.IconTrailer = exports.IconToggleSmall = exports.IconToggleLarge = exports.IconThumbsUp = exports.IconThumbsDown = exports.IconThermometer = exports.IconThermograph = exports.IconTextSize = exports.IconTelevision2 = exports.IconTelevision = exports.IconTarget3 = exports.IconTarget2 = exports.IconTarget = exports.IconTachographTimeCard = exports.IconTachograph = exports.IconTable = exports.IconSupport = exports.IconSun = exports.IconStrikeThrough = exports.IconStore = exports.IconStorage = exports.IconStopwatch = exports.IconStarFilled = exports.IconStarAi = exports.IconStar = exports.IconSquare = exports.IconSpeaker = exports.IconSortVertical = exports.IconSortHorizontal = exports.IconSort2Vertical = exports.IconSort2Horizontal = exports.IconSmiley = exports.IconSign = exports.IconSidebar = exports.IconShield4 = exports.IconShield3 = exports.IconShield2 = exports.IconShield = exports.IconShare3 = exports.IconShare = void 0;
 exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageTapToUpload = exports.ImageNothingFound = exports.ImageNoMatchingAssets = exports.ImageLooking = exports.ImageCloudUpload = exports.ImageAdjustFilter = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = exports.IconWatch = exports.IconWarning = exports.IconWallet1 = exports.IconWallet = exports.IconVolumeOn = exports.IconVolumeOff = exports.IconVolumeMinimum = exports.IconVolumeHalf = exports.IconVolumeFull = exports.IconVolumeDown = exports.IconVoice = exports.IconVisitPage = exports.IconVideoReplay = exports.IconVideo2 = exports.IconVideo = exports.IconUsbHub = void 0;
-exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.getProgressIndicatorPercent = exports.getProgressIndicatorValue = exports.ProgressIndicatorType = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.PrimaryIcon = exports.Popup = exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.PageHeaderMenu = exports.PageHeaderMenuDisplayName = exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = exports.PageHeader = exports.PageHeaderDisplayName = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MODAL_SCROLL_LOCK_CLASS = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.isDragNotClick = exports.changeOrder = void 0;
-exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.useExperimentalFeature = exports.EXPERIMENTAL_FLAGS = exports.ZenithExperimentalProvider = exports.AbortablePromise = exports.getTrendIndicatorDirection = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = void 0;
-exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.useDirection = exports.injectString = exports.dictionaries = void 0;
+exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.getProgressIndicatorPercent = exports.getProgressIndicatorValue = exports.ProgressIndicatorType = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.PrimaryIcon = exports.Popup = exports.PillExpandable = exports.PillBox = exports.DEFAULT_MAX_PILLS = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.PageHeaderMenu = exports.PageHeaderMenuDisplayName = exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = exports.PageHeader = exports.PageHeaderDisplayName = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MODAL_SCROLL_LOCK_CLASS = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.isDragNotClick = exports.changeOrder = void 0;
+exports.useExperimentalFeature = exports.EXPERIMENTAL_FLAGS = exports.ZenithExperimentalProvider = exports.AbortablePromise = exports.getTrendIndicatorDirection = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useShowMore = exports.useNestedRows = exports.NestedData = exports.DEFAULT_SHOW_MORE_CAP = exports.TabBarContent = exports.TabBar = exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = void 0;
+exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.useDirection = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = void 0;
 /* eslint-disable max-len */
 var absolute_1 = require("./absolute/absolute");
 Object.defineProperty(exports, "Absolute", { enumerable: true, get: function () { return absolute_1.Absolute; } });
@@ -1572,6 +1572,9 @@ var paginationType_1 = require("./pagination/paginationType");
 Object.defineProperty(exports, "PaginationType", { enumerable: true, get: function () { return paginationType_1.PaginationType; } });
 var pill_1 = require("./pill/pill");
 Object.defineProperty(exports, "Pill", { enumerable: true, get: function () { return pill_1.Pill; } });
+var pillBox_1 = require("./pillBox/pillBox");
+Object.defineProperty(exports, "DEFAULT_MAX_PILLS", { enumerable: true, get: function () { return pillBox_1.DEFAULT_MAX_PILLS; } });
+Object.defineProperty(exports, "PillBox", { enumerable: true, get: function () { return pillBox_1.PillBox; } });
 var pillExpandable_1 = require("./pillExpandable/pillExpandable");
 Object.defineProperty(exports, "PillExpandable", { enumerable: true, get: function () { return pillExpandable_1.PillExpandable; } });
 var popup_1 = require("./popup/popup");
@@ -1634,9 +1637,12 @@ Object.defineProperty(exports, "TabBar", { enumerable: true, get: function () {
 var tabBarContent_1 = require("./tabBar/tabBarContent");
 Object.defineProperty(exports, "TabBarContent", { enumerable: true, get: function () { return tabBarContent_1.TabBarContent; } });
 var nestedData_1 = require("./table/nested/nestedData");
+Object.defineProperty(exports, "DEFAULT_SHOW_MORE_CAP", { enumerable: true, get: function () { return nestedData_1.DEFAULT_SHOW_MORE_CAP; } });
 Object.defineProperty(exports, "NestedData", { enumerable: true, get: function () { return nestedData_1.NestedData; } });
 var useNestedRows_1 = require("./table/nested/useNestedRows");
 Object.defineProperty(exports, "useNestedRows", { enumerable: true, get: function () { return useNestedRows_1.useNestedRows; } });
+var useShowMore_1 = require("./table/nested/useShowMore");
+Object.defineProperty(exports, "useShowMore", { enumerable: true, get: function () { return useShowMore_1.useShowMore; } });
 var table_1 = require("./table/table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return table_1.Table; } });
 Object.defineProperty(exports, "getEmptySelection", { enumerable: true, get: function () { return table_1.getEmptySelection; } });

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

@@ -9,6 +9,8 @@ interface IMenuButtonInternal {
 export interface IMenuButton extends IZenIdComponentProps {
     name: string;
     icon?: FC<IIcon>;
+    iconOpen?: boolean;
+    destructive?: boolean;
     disabled?: boolean;
     link?: string;
     target?: string;
@@ -18,5 +20,5 @@ export interface IMenuButton extends IZenIdComponentProps {
     ref?: RefObject<HTMLButtonElement | null>;
     dataAnalyticsId?: string;
 }
-export declare const MenuButton: ({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className, active, ref, dataAnalyticsId }: IMenuButton & IMenuButtonInternal) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuButton: ({ id, onClick, hasChildren, disabled, icon, iconOpen, destructive, name, link, target, rel, className, active, ref, dataAnalyticsId }: IMenuButton & IMenuButtonInternal) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/menu/components/menuButton.js

@@ -6,63 +6,82 @@ const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
 const iconChevronLeft_1 = require("../../icons/iconChevronLeft");
+const iconOpen_1 = require("../../icons/iconOpen");
 const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useDrive_1 = require("../../utils/theme/useDrive");
 const getMenuButtonState_1 = require("../utils/getMenuButtonState");
 const isSafeHref_1 = require("../utils/isSafeHref");
 const getSafeRel_1 = require("../utils/getSafeRel");
-const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className = "", active = null, ref, dataAnalyticsId }) => {
+// Templates below drop native `disabled` to stay focusable/hoverable; this guard blocks activation instead.
+const handleDisabledGuardedClick = (e, disabled, id, onClick) => {
+    if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
+};
+// Skip Space-to-activate when disabled, so it doesn't flash `--active` or self-click via `linkEl.click()`.
+const createDisabledGuardedLinkKeyEvents = (disabled) => ({
+    onKeyDown: (e) => {
+        if (disabled || e.key !== " ") {
+            return;
+        }
+        e.preventDefault();
+        const linkEl = e.target;
+        linkEl.dataset.spaceDown = "1";
+        linkEl.classList.add("zen-menu-button__action--active");
+    },
+    onKeyUp: (e) => {
+        if (disabled || e.key !== " ") {
+            return;
+        }
+        e.preventDefault();
+        const linkEl = e.target;
+        linkEl.classList.remove("zen-menu-button__action--active");
+        if (linkEl.dataset.spaceDown) {
+            delete linkEl.dataset.spaceDown;
+            linkEl.click();
+        }
+    }
+});
+const getMenuButtonActionClassName = (hasChildren, hasState, isActive, disabled, destructiveClass, driveClasses) => (0, classNames_1.classNames)([
+    "zen-menu-button__action",
+    "zen-button",
+    "zen-caption",
+    hasChildren ? "zen-menu-button__action--has-children" : "",
+    hasState && isActive ? "zen-menu-button__action--active" : "",
+    disabled ? "zen-menu-button__action--disabled" : "",
+    disabled ? "zen-button--disabled" : "",
+    disabled ? "zen-button--disabled-focusable" : "",
+    destructiveClass,
+    driveClasses || ""
+]);
+const getMenuLinkActionClassName = (disabled, destructiveClass, driveClasses) => (0, classNames_1.classNames)(["zen-menu-button__action", "zen-caption", disabled ? "zen-menu-button__action--disabled" : "", destructiveClass, driveClasses || ""]);
+// An <a> without `href` isn't tabbable, so `tabIndex="0"` keeps a disabled link item in the tab order.
+const getMenuLinkAccessibilityProps = (disabled, link) => ({
+    href: disabled || !(0, isSafeHref_1.isSafeHref)(link) ? undefined : link,
+    tabIndex: disabled ? 0 : undefined,
+    "aria-disabled": disabled
+});
+const getMenuItemRole = (hasState) => (hasState ? "menuitemcheckbox" : "menuitem");
+const getMenuItemAriaChecked = (hasState, isActive) => (hasState ? isActive : undefined);
+const createMenuIcon = (iconComponent, size, className) => iconComponent ? (0, react_1.createElement)(iconComponent, { size, className }) : null;
+const resolveTarget = (target, iconOpen) => target !== null && target !== void 0 ? target : (iconOpen ? "_blank" : undefined);
+const MenuButton = ({ id, onClick, hasChildren, disabled, icon, iconOpen, destructive, name, link, target, rel, className = "", active = null, ref, dataAnalyticsId }) => {
     const { hasState, isActive } = (0, getMenuButtonState_1.getMenuButtonState)(active, disabled);
     const driveMenuButtonActionClasses = (0, useDriveClassName_1.useDriveClassName)("zen-menu-button__action");
     const isDrive = (0, useDrive_1.useDrive)();
+    const iconSize = isDrive ? "huge" : "large";
+    const destructiveClass = destructive ? "zen-menu-button__action--destructive" : "";
+    const effectiveTarget = resolveTarget(target, iconOpen);
     const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
-    const linkEvents = (0, react_1.useMemo)(() => ({
-        onKeyDown: e => {
-            if (e.key === " ") {
-                e.preventDefault();
-                const linkEl = e.target;
-                linkEl.dataset.spaceDown = "1";
-                linkEl.classList.add("zen-menu-button__action--active");
-            }
-        },
-        onKeyUp: e => {
-            if (e.key === " ") {
-                e.preventDefault();
-                const linkEl = e.target;
-                linkEl.classList.remove("zen-menu-button__action--active");
-                if (linkEl.dataset.spaceDown) {
-                    delete linkEl.dataset.spaceDown;
-                    linkEl.click();
-                }
-            }
-        }
-    }), []);
-    const onClickHandler = (0, react_1.useCallback)((e) => {
-        onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
-    }, [id, onClick]);
-    const buttonTemplate = ((0, jsx_runtime_1.jsxs)("button", { type: "button", "data-id": id, ref: ref, disabled: !!disabled, title: name, className: (0, classNames_1.classNames)([
-            "zen-menu-button__action",
-            "zen-button",
-            "zen-caption",
-            hasChildren ? "zen-menu-button__action--has-children" : "",
-            hasState && isActive ? "zen-menu-button__action--active" : "",
-            driveMenuButtonActionClasses || ""
-        ]), role: hasState ? "menuitemcheckbox" : "menuitem", onClick: onClickHandler, "aria-checked": hasState ? isActive : undefined, "data-analytics-id": dataAnalyticsId, children: [!!icon &&
-                (0, react_1.createElement)(icon, {
-                    size: isDrive ? "huge" : "large",
-                    className: (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__icon"])
-                }), (0, jsx_runtime_1.jsx)("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && ((0, jsx_runtime_1.jsx)(ChevronIcon, { size: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
-    const linkTemplate = ((0, jsx_runtime_1.jsxs)("a", Object.assign({ "data-id": id, role: "menuitem", className: (0, classNames_1.classNames)([
-            "zen-menu-button__action",
-            "zen-caption",
-            disabled ? "zen-menu-button__action--disabled" : "",
-            driveMenuButtonActionClasses || ""
-        ]), href: disabled || !(0, isSafeHref_1.isSafeHref)(link) ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: target, rel: (0, getSafeRel_1.getSafeRel)(rel, target), "data-analytics-id": dataAnalyticsId }, linkEvents, { children: [!!icon &&
-                (0, react_1.createElement)(icon, {
-                    size: isDrive ? "huge" : "large",
-                    className: "zen-caption__pre-content"
-                }), name] })));
+    const linkEvents = (0, react_1.useMemo)(() => createDisabledGuardedLinkKeyEvents(disabled), [disabled]);
+    const onClickHandler = (0, react_1.useCallback)((e) => handleDisabledGuardedClick(e, disabled, id, onClick), [id, onClick, disabled]);
+    const iconAfterElement = createMenuIcon(iconOpen ? iconOpen_1.IconOpen : undefined, iconSize, "zen-menu-button__icon-after");
+    const buttonTemplate = ((0, jsx_runtime_1.jsxs)("button", { type: "button", "data-id": id, ref: ref, title: name, className: getMenuButtonActionClassName(hasChildren, hasState, isActive, disabled, destructiveClass, driveMenuButtonActionClasses), role: getMenuItemRole(hasState), onClick: onClickHandler, "aria-disabled": disabled ? true : undefined, "aria-checked": getMenuItemAriaChecked(hasState, isActive), "data-analytics-id": dataAnalyticsId, children: [createMenuIcon(icon, iconSize, (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__icon"])), (0, jsx_runtime_1.jsx)("span", { className: "zen-menu-button__action-text", children: name }), iconAfterElement, !!hasChildren && (0, jsx_runtime_1.jsx)(ChevronIcon, { size: iconSize, className: (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__more-icon"]) })] }));
+    const linkTemplate = ((0, jsx_runtime_1.jsxs)("a", Object.assign({ "data-id": id, role: "menuitem", className: getMenuLinkActionClassName(disabled, destructiveClass, driveMenuButtonActionClasses) }, getMenuLinkAccessibilityProps(disabled, link), { onClick: onClickHandler, target: effectiveTarget, rel: (0, getSafeRel_1.getSafeRel)(rel, effectiveTarget), "data-analytics-id": dataAnalyticsId }, linkEvents, { children: [createMenuIcon(icon, iconSize, "zen-caption__pre-content"), iconAfterElement ? (0, jsx_runtime_1.jsx)("span", { className: "zen-menu-button__action-text", children: name }) : name, iconAfterElement] })));
     return ((0, jsx_runtime_1.jsx)("li", { role: "presentation", className: (0, classNames_1.classNames)(["zen-menu-button", className]), children: link ? linkTemplate : buttonTemplate }));
 };
 exports.MenuButton = MenuButton;

package/dist/menu/components/menuItem.js

@@ -10,7 +10,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useMenuItemCore_1 = require("../utils/useMenuItemCore");
 var isMenuItem_1 = require("../utils/isMenuItem");
 Object.defineProperty(exports, "isMenuItem", { enumerable: true, get: function () { return isMenuItem_1.isMenuItem; } });
-const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment, dataAnalyticsId }) => {
+const MenuItem = ({ id, children, name, icon, iconOpen, destructive, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment, dataAnalyticsId }) => {
     const { ref, isOpen, hasChildren, content, openedViaKeyboard, contentAlignment, path, onOpenBranch, handleOpenChange } = (0, useMenuItemCore_1.useMenuItemCore)({
         id,
         children,
@@ -44,10 +44,10 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
         onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
     }, [onClick, onOpenBranch, id, trigger]);
     if (!hasChildren) {
-        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, dataAnalyticsId: dataAnalyticsId }, id));
+        return ((0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: id, name: name, icon: icon, iconOpen: iconOpen, destructive: destructive, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedDesktopActionOnClick, className: className, active: active, hasChildren: false, dataAnalyticsId: dataAnalyticsId }, id));
     }
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedMobileActionOnClick, active: active, hasChildren: true, dataAnalyticsId: dataAnalyticsId }, id));
+        return ((0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: id, name: name, icon: icon, iconOpen: iconOpen, destructive: destructive, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedMobileActionOnClick, active: active, hasChildren: true, dataAnalyticsId: dataAnalyticsId }, id));
     }
     let popupTrigger;
     if (trigger) {
@@ -57,7 +57,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, dataAnalyticsId: dataAnalyticsId }, id));
+        popupTrigger = ((0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: id, ref: ref, name: name, icon: icon, iconOpen: iconOpen, destructive: destructive, disabled: disabled, hasChildren: true, onClick: memoizedTriggerOnClick, active: active, dataAnalyticsId: dataAnalyticsId }, 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: handleOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id));
 };

package/dist/miniTabs/miniTabs.js

@@ -9,6 +9,7 @@ const miniTabsHeaderItem_1 = require("./miniTabsHeaderItem");
 const miniTabsItem_1 = require("./miniTabsItem");
 const tabsKeyboard_1 = require("../commonHelpers/tabsKeyboard");
 const miniTabsHelper_1 = require("./miniTabsHelper");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 var MiniTabsSize;
 (function (MiniTabsSize) {
     MiniTabsSize["Small"] = "small";
@@ -21,16 +22,17 @@ const MiniTabs = ({ activeTabId, onTabChange, children, size = MiniTabsSize.Medi
     const [tabs, setTabs] = (0, react_2.useState)([]);
     const activeButtonRef = (0, react_2.useRef)(null);
     const tabsRef = (0, react_2.useRef)(null);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
     const handleTabItemClick = (e) => {
         const newState = e.target.id || e.currentTarget.id || undefined;
         newState && newState !== activeTabId && onTabChange(newState);
     };
     const keyDownHandler = (0, react_2.useCallback)((e) => {
-        const newActiveTabId = (0, tabsKeyboard_1.tabsKeyboardHandler)(e, tabs, activeTabId);
+        const newActiveTabId = (0, tabsKeyboard_1.tabsKeyboardHandler)(e, tabs, activeTabId, isRTL);
         if (newActiveTabId && newActiveTabId !== activeTabId) {
             onTabChange(newActiveTabId);
         }
-    }, [tabs, activeTabId, onTabChange]);
+    }, [tabs, activeTabId, onTabChange, isRTL]);
     (0, react_2.useEffect)(() => setTabs((0, miniTabsHelper_1.getChildrenForRender)(children).slice(0, maxTabsValue)), [children]);
     (0, react_2.useEffect)(() => {
         var _a;

package/dist/pageHeader/pageHeaderButton.d.ts

@@ -13,6 +13,6 @@ export interface IPageHeaderButton extends Omit<IButton, "onClick" | "icon" | "t
 }
 export declare const PageHeaderButtonDisplayName = "PageHeaderButton";
 export declare const PageHeaderButton: {
-    ({ id, children, icon, iconPosition, className, onClick, title, ...restProps }: IPageHeaderButton): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, icon, iconPosition, className, onClick, title, disabled, focusableWhenDisabled, ...restProps }: IPageHeaderButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/pageHeader/pageHeaderButton.js

@@ -17,9 +17,11 @@ const textIconButton_1 = require("../textIconButton/textIconButton");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 exports.PageHeaderButtonDisplayName = "PageHeaderButton";
 const PageHeaderButton = (_a) => {
-    var { id, children, icon, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", onClick, title } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "onClick", "title"]);
+    var { id, children, icon, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", onClick, title, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "onClick", "title", "disabled", "focusableWhenDisabled"]);
     const fullClassName = (0, classNames_1.classNames)(["zen-page-header-button", className || ""]);
-    const props = Object.assign({}, restProps);
+    const props = Object.assign(Object.assign({}, restProps), { disabled, 
+        // Defaults on when disabled; pass `focusableWhenDisabled={false}` to opt back into native `disabled`.
+        focusableWhenDisabled: focusableWhenDisabled !== null && focusableWhenDisabled !== void 0 ? focusableWhenDisabled : Boolean(disabled) });
     return ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ id: id, icon: icon, title: title, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
 };
 exports.PageHeaderButton = PageHeaderButton;

package/dist/pagination/pagination.d.ts

@@ -3,14 +3,29 @@ import "./pagination.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { PaginationType } from "./paginationType";
 export interface IPagination extends IZenComponentProps {
-    activePage: number;
+    /**
+     * Required for the default "paged" variant (see `IPaginationPaged`, enforced there). Unused —
+     * and not required — when `variant === "loaded"`, since there are no pages to be "active" on.
+     */
+    activePage?: number;
     total: number;
-    perPage: number;
-    onChange: (newActivePage: number) => void;
+    /** Required for "paged" (see `IPaginationPaged`). Unused by "loaded". */
+    perPage?: number;
+    /** Required for "paged" (see `IPaginationPaged`). Unused by "loaded". */
+    onChange?: (newActivePage: number) => void;
     className?: string;
     includeText?: boolean;
     type?: PaginationType;
     gridRef?: RefObject<HTMLElement | null>;
     disabled?: boolean;
+    /**
+     * "paged" (default): standard prev/next controls + "Showing X - Y of Z" text.
+     * "loaded": desktop-infinite-scroll variant — prev/next controls are always hidden (there are
+     * no pages) and the text reads "1-{loadedCount} of {total}" instead. Used by Table when
+     * `onScrollEnd` is wired and a `Table.Pagination` child supplies `total`.
+     */
+    variant?: "paged" | "loaded";
+    /** Number of rows currently loaded/rendered. Only used when `variant === "loaded"`. */
+    loadedCount?: number;
 }
-export declare const Pagination: ({ className, activePage, total, perPage, onChange, disabled, includeText, type, gridRef }: IPagination) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ variant, ...props }: IPagination) => import("react/jsx-runtime").JSX.Element;

package/dist/pagination/pagination.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -8,7 +19,12 @@ const paginationArrow_1 = require("./paginationArrow");
 const paginationButtonsRow_1 = require("./paginationButtonsRow");
 const paginationText_1 = require("./paginationText/paginationText");
 const paginationType_1 = require("./paginationType");
-const Pagination = ({ className, activePage, total, perPage, onChange, disabled, includeText = false, type = paginationType_1.PaginationType.Compact, gridRef }) => {
+// Desktop infinite scroll: there are no pages, so the page-control buttons are skipped entirely and
+// only the compact "1-{loadedCount} of {total}" text is rendered. Split out as its own tiny
+// component (rather than a branch inside `Pagination`) so it doesn't count against that function's
+// complexity budget.
+const PaginationLoaded = ({ className, type = paginationType_1.PaginationType.Compact, total, includeText = false, loadedCount = 0 }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-pagination", `zen-pagination--type-${type}`, className ? className : ""]), children: includeText ? (0, jsx_runtime_1.jsx)(paginationText_1.PaginationText, { amount: total, from: total === 0 ? 0 : 1, to: Math.min(loadedCount, total), variant: "loaded" }) : null }));
+const PaginationPaged = ({ className, activePage, total, perPage, onChange, disabled, includeText = false, type = paginationType_1.PaginationType.Compact, gridRef }) => {
     var _a, _b;
     const gridNode = ((_a = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-data-grid")) ? gridRef.current : (_b = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(".zen-data-grid");
     const displayedPagesCount = 6;
@@ -51,4 +67,8 @@ const Pagination = ({ className, activePage, total, perPage, onChange, disabled,
     const isSinglePage = total <= perPage;
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-pagination", `zen-pagination--type-${type}`, className ? className : ""]), children: [includeText ? ((0, jsx_runtime_1.jsx)(paginationText_1.PaginationText, { amount: total, from: total === 0 ? total : activePage * perPage + 1, to: Math.min((activePage + 1) * perPage, total) })) : null, isSinglePage ? null : ((0, jsx_runtime_1.jsx)(paginationArrow_1.PaginationArrow, { value: "previous", disabled: activePage === 0 || disabled, arrowButtonHandler: () => handlePageChange(activePage - 1), type: type })), type === paginationType_1.PaginationType.Normal ? ((0, jsx_runtime_1.jsx)(paginationButtonsRow_1.PaginationButtonsRow, { paginationValues: getPaginationValues(), activePage: activePage, upperBoundIndex: totalNumberOfPages - 1, onChange: handlePageChange })) : null, isSinglePage ? null : ((0, jsx_runtime_1.jsx)(paginationArrow_1.PaginationArrow, { value: "next", disabled: activePage >= totalNumberOfPages - 1 || disabled, arrowButtonHandler: () => handlePageChange(activePage + 1), type: type }))] }));
 };
+const Pagination = (_a) => {
+    var { variant = "paged" } = _a, props = __rest(_a, ["variant"]);
+    return variant === "loaded" ? ((0, jsx_runtime_1.jsx)(PaginationLoaded, { className: props.className, type: props.type, total: props.total, includeText: props.includeText, loadedCount: props.loadedCount })) : ((0, jsx_runtime_1.jsx)(PaginationPaged, Object.assign({}, props)));
+};
 exports.Pagination = Pagination;

package/dist/pagination/paginationText/paginationText.d.ts

@@ -2,7 +2,13 @@ interface IPaginationText {
     amount: number;
     from: number;
     to: number;
+    /**
+     * "showing" (default): the paged-table text, e.g. "Showing 1 - 10 of 100".
+     * "loaded": the compact desktop-infinite-scroll variant, e.g. "1-10 of 100", rendered in
+     * place of page-control buttons (which don't apply when there are no pages).
+     */
+    variant?: "showing" | "loaded";
 }
-export declare const PaginationText: ({ amount, from, to }: IPaginationText) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationText: ({ amount, from, to, variant }: IPaginationText) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/pagination/paginationText/paginationText.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TRANSLATIONS = exports.PaginationText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
+injectString("en", "{from}-{to} of {total}", "{from}-{to} of {total}");
 injectString("cs", "Showing {from} - {to} of {total}", "Zobrazuji {from}\u2013{to} z\xA0{total}");
 injectString("da-DK", "Showing {from} - {to} of {total}", "Viser {fra} - {til} af {total}");
 injectString("de", "Showing {from} - {to} of {total}", "{from} - {to} von {total} werden angezeigt");
@@ -45,12 +46,14 @@ injectString("bg-BG", "Showing {from} - {to} of {total}", "\u041F\u043E\u043A\u0
 const PaginationText = ({
   amount,
   from,
-  to
+  to,
+  variant = "showing"
 }) => {
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
-  const children = translate("Showing {from} - {to} of {total}").replace("{from}", from.toString()).replace("{to}", to.toString()).replace("{total}", amount.toString());
+  const template = variant === "loaded" ? translate("{from}-{to} of {total}") : translate("Showing {from} - {to} of {total}");
+  const children = template.replace("{from}", from.toString()).replace("{to}", to.toString()).replace("{total}", amount.toString());
   return (0, jsx_runtime_1.jsx)("span", {
     "aria-live": "polite",
     "aria-atomic": "true",
@@ -59,4 +62,4 @@ const PaginationText = ({
   });
 };
 exports.PaginationText = PaginationText;
-exports.TRANSLATIONS = ["Showing {from} - {to} of {total}"];
+exports.TRANSLATIONS = ["Showing {from} - {to} of {total}", "{from}-{to} of {total}"];

package/dist/pillExpandable/pillContent.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { IPillExpandableAction } from "./pillExpandable";
 import { TLazyContent } from "../skeleton/lazyContent";
 interface IPillContent {
@@ -12,6 +12,7 @@ interface IPillContent {
     isVisible?: boolean;
     errorHandler: (err: any) => ReactNode | undefined;
     descriptionId?: string;
+    descriptionRef?: Ref<HTMLDivElement>;
 }
-export declare const PillContent: ({ date, count, descriptionText, mainAction, secondaryAction, tertiaryAction, 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, descriptionRef }: 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, tertiaryAction, onActionClick, isVisible = true, errorHandler, descriptionId }) => {
+const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, tertiaryAction, onActionClick, isVisible = true, errorHandler, descriptionId, descriptionRef }) => {
     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) => () => {
@@ -34,7 +34,7 @@ const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction
         var _a, _b;
         return ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: tertiaryActionClick(data.onClick), type: "tertiary", dataAnalyticsId: (_a = data.dataAnalyticsId) !== null && _a !== void 0 ? _a : (_b = data.linkOptions) === null || _b === void 0 ? void 0 : _b.dataAnalyticsId, 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 renderDescription = (0, react_1.useCallback)(data => ((0, jsx_runtime_1.jsx)("div", { id: descriptionId, ref: descriptionRef, className: (0, classNames_1.classNames)(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data })), [descriptionDriveClassName, descriptionId, descriptionRef]);
     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 || ""

package/dist/pillExpandable/pillExpandable.js

@@ -95,6 +95,12 @@ const PillExpandablePopover = ({
     popoverRef.current = node;
     setContainerNode(node);
   }, [setContainerNode]);
+  const handleMobileReadyForFocus = (0, react_1.useCallback)(currentIsOpen => {
+    var _a;
+    if (!currentIsOpen) {
+      (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [triggerRef]);
   // Focus first focusable element in desktop popover when content is ready.
   // Mobile MobileSheet handles its own first-focus (close button).
   (0, react_1.useEffect)(() => {
@@ -133,6 +139,7 @@ const PillExpandablePopover = ({
       isOpen: isOpen,
       onHidePanel: onClose,
       onCloseClick: onClose,
+      onReadyForFocus: handleMobileReadyForFocus,
       id: popupId,
       children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, {
         className: "zen-status-pill-popup__mobile-title",
@@ -149,13 +156,15 @@ const PillExpandablePopover = ({
   }
   return (0, jsx_runtime_1.jsx)(absolute_1.Absolute, {
     recalculateTrigger: isPopupContentReady,
-    recalculateOnScroll: true,
+    closeOnScroll: true,
     useTrapFocusWithTrigger: "on",
     className: popupClassName,
     id: popupId,
     onOpenChange: onChange,
     isOpen: isOpen,
     triggerRef: triggerRef,
+    role: "dialog",
+    ariaLabel: title || text,
     alignmentsFn: pillExpandableAlignments_1.alignments,
     children: (0, jsx_runtime_1.jsxs)("div", {
       ref: handlePopoverRef,
@@ -181,6 +190,7 @@ const PillExpandableChild = ({
 }) => {
   const pillId = (0, react_1.useId)();
   const descriptionId = (0, react_1.useId)();
+  const [descriptionElement, setDescriptionElement] = (0, react_1.useState)(null);
   const {
     level,
     expandedChildPillIds,
@@ -235,7 +245,7 @@ const PillExpandableChild = ({
       onExpand: handleChildToggle,
       type: type,
       errorHandler: errorHandler,
-      descriptionId: descriptionId,
+      descriptionId: isExpanded && descriptionElement ? descriptionId : undefined,
       dataAnalyticsId: dataAnalyticsId
     }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
       onActionClick: handleChildToggle,
@@ -247,7 +257,8 @@ const PillExpandableChild = ({
       tertiaryAction: content.tertiaryAction,
       isVisible: isExpanded,
       errorHandler: errorHandler,
-      descriptionId: descriptionId
+      descriptionId: descriptionId,
+      descriptionRef: setDescriptionElement
     })]
   });
 };
@@ -417,6 +428,7 @@ const PillExpandableBase = ({
 }) => {
   const popupId = (0, react_1.useId)();
   const descriptionId = (0, react_1.useId)();
+  const [descriptionElement, setDescriptionElement] = (0, react_1.useState)(null);
   const isDrive = (0, useDrive_1.useDrive)();
   const [isMobile, setIsMobile] = (0, react_1.useState)(false);
   const handleDeviceTypeChange = (0, react_1.useCallback)(deviceType => {
@@ -541,6 +553,7 @@ const PillExpandableBase = ({
     tertiaryAction: content.tertiaryAction,
     errorHandler: errorHandler,
     descriptionId,
+    descriptionRef: setDescriptionElement,
     childToDisplay
   }), [effectiveVariant, childrenAnalysis, content, errorHandler, descriptionId, childToDisplay]);
   const showFooter = Boolean(moreCounter && viewMoreAction && childCount > MAX_PILLS_TO_DISPLAY_IN_POPUP);
@@ -571,7 +584,6 @@ const PillExpandableBase = ({
     },
     children: (0, jsx_runtime_1.jsxs)("div", {
       className: (0, classNames_1.classNames)(["zen-status-pill", className || ""]),
-      "aria-haspopup": "true",
       children: [(0, jsx_runtime_1.jsxs)("div", {
         className: "zen-status-pill__pill-container",
         onClick: handlePopupToggle,
@@ -584,6 +596,8 @@ const PillExpandableBase = ({
           errorHandler: errorHandler,
           isBeta: isBeta,
           isMobile: isMobile,
+          descriptionId: isPopupOpen && descriptionElement ? descriptionId : undefined,
+          ariaHasPopup: "dialog",
           dataAnalyticsId: dataAnalyticsId
         }), uniqueChildren && (0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
           icon: secondaryIcon || effectiveIcon,
@@ -592,7 +606,8 @@ const PillExpandableBase = ({
           type: type,
           errorHandler: errorHandler,
           className: "zen-status-pill__counter",
-          isMobile: isMobile
+          isMobile: isMobile,
+          isDecorative: true
         })]
       }), (0, jsx_runtime_1.jsx)(PillExpandablePopover, {
         useMobileSheet: useMobileSheet,

package/dist/pillExpandable/pillExpandablePopoverContent.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { TLazyContent } from "../skeleton/lazyContent";
 import { IPillExpandableAction, TPopoverVariant } from "./pillExpandable";
 interface IPillExpandablePopoverContent {
@@ -13,7 +13,8 @@ interface IPillExpandablePopoverContent {
     tertiaryAction?: TLazyContent<IPillExpandableAction>;
     errorHandler: (e: unknown) => ReactNode | undefined;
     descriptionId?: string;
+    descriptionRef?: Ref<HTMLDivElement>;
     childToDisplay: ReactNode[];
 }
-export declare const PillExpandablePopoverContent: ({ variant, customContent, onActionClick, descriptionText, date, count, mainAction, secondaryAction, tertiaryAction, errorHandler, descriptionId, childToDisplay }: IPillExpandablePopoverContent) => import("react/jsx-runtime").JSX.Element;
+export declare const PillExpandablePopoverContent: ({ variant, customContent, onActionClick, descriptionText, date, count, mainAction, secondaryAction, tertiaryAction, errorHandler, descriptionId, descriptionRef, childToDisplay }: IPillExpandablePopoverContent) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/pillExpandable/pillExpandablePopoverContent.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PillExpandablePopoverContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const pillContent_1 = require("./pillContent");
-const PillExpandablePopoverContent = ({ variant, customContent, onActionClick, descriptionText, date, count, mainAction, secondaryAction, tertiaryAction, errorHandler, descriptionId, childToDisplay }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [variant === "placeholder" && customContent, variant === "default" && ((0, jsx_runtime_1.jsx)(pillContent_1.PillContent, { onActionClick: onActionClick, descriptionText: descriptionText, date: date, count: count, mainAction: mainAction, secondaryAction: secondaryAction, tertiaryAction: tertiaryAction, errorHandler: errorHandler, descriptionId: descriptionId })), childToDisplay.length > 0 && (0, jsx_runtime_1.jsx)("div", { className: "zen-status-pill-popup__children", children: childToDisplay })] }));
+const PillExpandablePopoverContent = ({ variant, customContent, onActionClick, descriptionText, date, count, mainAction, secondaryAction, tertiaryAction, errorHandler, descriptionId, descriptionRef, childToDisplay }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [variant === "placeholder" && customContent, variant === "default" && ((0, jsx_runtime_1.jsx)(pillContent_1.PillContent, { onActionClick: onActionClick, descriptionText: descriptionText, date: date, count: count, mainAction: mainAction, secondaryAction: secondaryAction, tertiaryAction: tertiaryAction, errorHandler: errorHandler, descriptionId: descriptionId, descriptionRef: descriptionRef })), childToDisplay.length > 0 && (0, jsx_runtime_1.jsx)("div", { className: "zen-status-pill-popup__children", children: childToDisplay })] }));
 exports.PillExpandablePopoverContent = PillExpandablePopoverContent;

package/dist/pillExpandable/pillExpandableSimple.d.ts

@@ -10,10 +10,12 @@ interface IPillExpandableSimple extends IPillExpandableBase {
     isMobile?: boolean;
     ref?: RefObject<HTMLButtonElement | null>;
     descriptionId?: string;
+    ariaHasPopup?: "dialog";
+    isDecorative?: boolean;
     type?: TPillType;
 }
 export declare const PillExpandableSimple: {
-    ({ onExpand, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId, dataAnalyticsId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    ({ onExpand, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};