@geotab/zenith 3.16.0 → 3.17.0-beta.0

package/esm/formLayout/utils/applyLayoutPosition/applyLayoutPosition.js

@@ -4,108 +4,55 @@ import { Banner } from "../../../banner/banner";
 import { FormLayoutTitle } from "../../components/formLayoutTitle";
 import { FormLayoutColumnTitle } from "../../components/columnTitle/formLayoutColumnTitle";
 const STATIC_COMPONENTS = [FormStepper, FormStepperButtons, Banner, FormLayoutTitle, FormLayoutColumnTitle];
-const transform = components => {
-    const state = {};
-    // eslint-disable-next-line
-    // @ts-ignore
-    const movableComponents = components.filter((child) => !STATIC_COMPONENTS.includes(child.type));
-    // 1. Initialize state
-    components.forEach((child, index) => {
-        // eslint-disable-next-line
-        // @ts-ignore
-        if (STATIC_COMPONENTS.includes(child.type)) {
-            state[index] = {
-                value: child,
-                realPos: index,
-                oldPos: null,
-                newPos: null,
-                newRealPos: index
-            };
+const isStaticComponent = (child) => STATIC_COMPONENTS.includes(child.type);
+const getLayoutPosition = (child) => child.props.layoutPosition;
+const findNextFreeIndex = (fields, startIndex) => {
+    for (let offset = 0; offset < fields.length; offset++) {
+        const candidateIndex = (startIndex + offset) % fields.length;
+        if (fields[candidateIndex] === null) {
+            return candidateIndex;
+        }
+    }
+    return -1;
+};
+const clampLayoutPosition = (layoutPosition, maxPosition) => Math.max(0, Math.min(Math.trunc(layoutPosition), maxPosition));
+const transform = (components) => {
+    const movableComponents = components.filter(child => !isStaticComponent(child));
+    const positionedComponents = new Array(movableComponents.length).fill(null);
+    movableComponents.forEach(child => {
+        const layoutPosition = getLayoutPosition(child);
+        if (layoutPosition === undefined || !Number.isFinite(layoutPosition)) {
             return;
         }
-        // eslint-disable-next-line
-        // @ts-ignore
-        const layoutPosition = child.props.layoutPosition;
-        const newPositions = Object.values(state).map(field => field.newPos);
-        let newPos;
-        if (layoutPosition !== undefined) {
-            newPos = layoutPosition < 0 ? 0 : layoutPosition > movableComponents.length - 1 ? movableComponents.length - 1 : layoutPosition;
-            // eslint-disable-next-line
-            if (newPositions.indexOf(newPos) !== -1) {
-                if (layoutPosition >= movableComponents.length - 1) {
-                    newPos = 0;
-                }
-                // eslint-disable-next-line
-                while (newPositions.indexOf(newPos) !== -1) {
-                    newPos++;
-                }
-            }
+        const clampedLayoutPosition = clampLayoutPosition(layoutPosition, movableComponents.length - 1);
+        const targetIndex = findNextFreeIndex(positionedComponents, clampedLayoutPosition);
+        if (targetIndex !== -1) {
+            positionedComponents[targetIndex] = child;
         }
-        else {
-            newPos = null;
-        }
-        state[index] = {
-            value: child,
-            realPos: index,
-            oldPos: movableComponents.indexOf(child),
-            newPos: newPos,
-            newRealPos: null
-        };
     });
-    // 2. Adjust positions
-    components
-        .sort((a, b) => a.props.layoutPosition - b.props.layoutPosition)
-        .forEach((child, index) => {
-        // eslint-disable-next-line
-        // @ts-ignore
-        if (STATIC_COMPONENTS.includes(child.type)) {
+    const placedComponents = new Set(positionedComponents);
+    movableComponents.forEach(child => {
+        if (placedComponents.has(child)) {
             return;
         }
-        if (state[index].newPos !== null) {
-            return;
+        const targetIndex = findNextFreeIndex(positionedComponents, 0);
+        if (targetIndex !== -1) {
+            positionedComponents[targetIndex] = child;
         }
-        // eslint-disable-next-line
-        // @ts-ignore
-        const layoutPosition = child.props.layoutPosition;
-        const newPositions = Object.values(state)
-            .map(field => field.newPos)
-            .filter(pos => pos !== null);
-        let newPos = 0;
-        if (newPositions.indexOf(newPos) !== -1) {
-            if (layoutPosition >= movableComponents.length - 1) {
-                newPos = 0;
-            }
-            while (newPositions.indexOf(newPos) !== -1) {
-                newPos++;
-            }
-        }
-        state[index] = {
-            value: child,
-            realPos: index,
-            oldPos: movableComponents.indexOf(child),
-            newPos: newPos,
-            newRealPos: null
-        };
     });
-    // 3. Update newRealPos
-    components.forEach((child) => {
-        // eslint-disable-next-line
-        // @ts-ignore
-        if (STATIC_COMPONENTS.includes(child.type)) {
+    const reorderedMovableComponents = positionedComponents.filter((child) => child !== null);
+    const reorderedComponents = [...components];
+    let movableIndex = 0;
+    components.forEach((child, index) => {
+        if (isStaticComponent(child)) {
+            reorderedComponents[index] = child;
             return;
         }
-        const index = components.indexOf(child);
-        const newPos = state[index].newPos;
-        const withOldPos = Object.values(state).find(field => field.oldPos === newPos);
-        if (withOldPos) {
-            state[index].newRealPos = withOldPos.realPos;
-        }
+        reorderedComponents[index] = reorderedMovableComponents[movableIndex];
+        movableIndex++;
     });
-    return Object.values(state)
-        .sort((a, b) => a.newRealPos - b.newRealPos)
-        .map(el => el.value);
+    return reorderedComponents;
 };
-// TODO: test with titles
 export const applyLayoutPosition = (components, result) => {
     const state = transform(components);
     result.length = 0;

package/esm/header/components/collapsedItemsControl/collapsedItemsControl.d.ts

@@ -5,7 +5,7 @@ import { IMenuItem } from "../../../menu/components/menuItem";
 export interface ICustomContent {
     [key: string]: React.ReactElement<PropsWithChildren> | undefined;
 }
-export interface IHeaderCustomMenuComponent extends Pick<IMenuItem, "id" | "name" | "disabled" | "link" | "target" | "rel" | "icon"> {
+export interface IHeaderCustomMenuComponent extends Pick<IMenuItem, "id" | "name" | "disabled" | "link" | "target" | "rel" | "icon" | "iconOpen" | "destructive"> {
 }
 export interface IHeaderCustomContent {
     content: ICustomContent | null;

package/esm/header/components/collapsedItemsControl/collapsedItemsControl.js

@@ -100,7 +100,9 @@ export const PageToolbarCollapsedItemsControl = ({
         link: child.props.link,
         target: child.props.target,
         rel: child.props.rel,
-        icon: child.props.icon
+        icon: child.props.icon,
+        iconOpen: child.props.iconOpen,
+        destructive: child.props.destructive
       });
       items.push(el);
     }
@@ -113,7 +115,9 @@ export const PageToolbarCollapsedItemsControl = ({
         link: child.props.link,
         target: child.props.target,
         rel: child.props.rel,
-        icon: child.props.icon
+        icon: child.props.icon,
+        iconOpen: child.props.iconOpen,
+        destructive: child.props.destructive
       }, child.props.children);
       items.push(el);
     }

package/esm/header/headerButton.d.ts

@@ -7,6 +7,8 @@ export interface IHeaderButton extends Omit<IButton, "onClick"> {
     important?: boolean;
     inContextMenu?: boolean;
     icon?: React.FC<IIcon>;
+    iconOpen?: boolean;
+    destructive?: boolean;
     iconPosition?: TButtonIconPosition;
     iconClasses?: string;
     iconSize?: TSvgIconSize;
@@ -14,6 +16,6 @@ export interface IHeaderButton extends Omit<IButton, "onClick"> {
 }
 export declare const HeaderButtonDisplayName = "HeaderButton";
 export declare const HeaderButton: {
-    ({ id, children, icon, iconPosition, className, important, onClick, inContextMenu, ...restProps }: IHeaderButton): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, icon, iconOpen, destructive, iconPosition, className, important, onClick, inContextMenu, disabled, focusableWhenDisabled, ...restProps }: IHeaderButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/header/headerButton.js

@@ -15,9 +15,11 @@ import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconBu
 import { classNames } from "../commonHelpers/classNames/classNames";
 export const HeaderButtonDisplayName = "HeaderButton";
 export const HeaderButton = (_a) => {
-    var { id, children, icon, iconPosition = ButtonIconPosition.Start, className = "", important, onClick, inContextMenu } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "important", "onClick", "inContextMenu"]);
+    var { id, children, icon, iconOpen, destructive, iconPosition = ButtonIconPosition.Start, className = "", important, onClick, inContextMenu, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconOpen", "destructive", "iconPosition", "className", "important", "onClick", "inContextMenu", "disabled", "focusableWhenDisabled"]);
     const fullClassName = classNames(["zen-header-button", className]);
-    const props = Object.assign(Object.assign({}, restProps), { "data-important": important ? "1" : "0" });
+    const props = Object.assign(Object.assign({}, restProps), { disabled, "data-important": important ? "1" : "0", 
+        // Defaults on when disabled; pass `focusableWhenDisabled={false}` to opt back into native `disabled`.
+        focusableWhenDisabled: focusableWhenDisabled !== null && focusableWhenDisabled !== void 0 ? focusableWhenDisabled : Boolean(disabled) });
     return icon ? (_jsx(TextIconButton, Object.assign({ id: id, icon: icon, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children }))) : (_jsx(Button, Object.assign({ id: id, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
 };
 HeaderButton.displayName = HeaderButtonDisplayName;

package/esm/header/headerMenu.d.ts

@@ -10,6 +10,8 @@ export interface IHeaderMenu extends Omit<IButton, "onClick"> {
     important?: boolean;
     inContextMenu?: boolean;
     icon?: FC<IIcon>;
+    iconOpen?: boolean;
+    destructive?: boolean;
     iconSize?: TSvgIconSize;
     alignment?: TAlignment;
     onlyIcon?: boolean;

package/esm/header/headerMenu.js

@@ -21,7 +21,7 @@ import { useDrive } from "../utils/theme/useDrive";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 export const HeaderMenuDisplayName = "HeaderMenu";
 export const HeaderMenu = (_a) => {
-    var { name, children, icon, iconSize = "large", className = "", important, alignment = "bottom-end", inContextMenu, onlyIcon } = _a, restProps = __rest(_a, ["name", "children", "icon", "iconSize", "className", "important", "alignment", "inContextMenu", "onlyIcon"]);
+    var { name, children, icon, iconOpen, destructive, iconSize = "large", className = "", important, alignment = "bottom-end", inContextMenu, onlyIcon } = _a, restProps = __rest(_a, ["name", "children", "icon", "iconOpen", "destructive", "iconSize", "className", "important", "alignment", "inContextMenu", "onlyIcon"]);
     const isMobile = useMobile();
     const isDrive = useDrive();
     const driveClassName = useDriveClassName("zen-header-button-with-dropdown");

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

@@ -722,6 +722,7 @@ export { PageLayout } from "./pageLayout/pageLayout";
 export { Pagination } from "./pagination/pagination";
 export { PaginationType } from "./pagination/paginationType";
 export { Pill } from "./pill/pill";
+export { DEFAULT_MAX_PILLS, PillBox } from "./pillBox/pillBox";
 export { PillExpandable } from "./pillExpandable/pillExpandable";
 export { Popup } from "./popup/popup";
 export { PrimaryIcon } from "./primaryIcon/primaryIcon";
@@ -747,8 +748,9 @@ export { getTypeClassName } from "./summaryTile/utils/getTypeClassName";
 export { SummaryTileBar, SummaryTileBarDisplayName } from "./summaryTileBar/summaryTileBar";
 export { TabBar } from "./tabBar/tabBar";
 export { TabBarContent } from "./tabBar/tabBarContent";
-export { NestedData } from "./table/nested/nestedData";
+export { DEFAULT_SHOW_MORE_CAP, NestedData } from "./table/nested/nestedData";
 export { useNestedRows } from "./table/nested/useNestedRows";
+export { useShowMore } from "./table/nested/useShowMore";
 export { Table, getEmptySelection, ColumnSortDirection, getSortableValue, ActionsColumn, MainColumn, CheckboxColumn, ActionLinkColumn } from "./table/table";
 export { TabsDisplayName, Tabs } from "./tabs/tabs";
 export { ButtonIconPosition, TextIconButton } from "./textIconButton/textIconButton";

package/esm/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/esm/menu/components/menuButton.js

@@ -3,62 +3,81 @@ import { createElement, useCallback, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../../icons/iconChevronRight";
 import { IconChevronLeft } from "../../icons/iconChevronLeft";
+import { IconOpen } from "../../icons/iconOpen";
 import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { useDrive } from "../../utils/theme/useDrive";
 import { getMenuButtonState } from "../utils/getMenuButtonState";
 import { isSafeHref } from "../utils/isSafeHref";
 import { getSafeRel } from "../utils/getSafeRel";
-export 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) => 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) => 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 || !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 ? createElement(iconComponent, { size, className }) : null;
+const resolveTarget = (target, iconOpen) => target !== null && target !== void 0 ? target : (iconOpen ? "_blank" : undefined);
+export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, iconOpen, destructive, name, link, target, rel, className = "", active = null, ref, dataAnalyticsId }) => {
     const { hasState, isActive } = getMenuButtonState(active, disabled);
     const driveMenuButtonActionClasses = useDriveClassName("zen-menu-button__action");
     const isDrive = useDrive();
+    const iconSize = isDrive ? "huge" : "large";
+    const destructiveClass = destructive ? "zen-menu-button__action--destructive" : "";
+    const effectiveTarget = resolveTarget(target, iconOpen);
     const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
-    const linkEvents = 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 = useCallback((e) => {
-        onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
-    }, [id, onClick]);
-    const buttonTemplate = (_jsxs("button", { type: "button", "data-id": id, ref: ref, disabled: !!disabled, title: name, className: 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 &&
-                createElement(icon, {
-                    size: isDrive ? "huge" : "large",
-                    className: classNames(["zen-caption__pre-content", "zen-menu-button__icon"])
-                }), _jsx("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && (_jsx(ChevronIcon, { size: isDrive ? "huge" : "large", className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
-    const linkTemplate = (_jsxs("a", Object.assign({ "data-id": id, role: "menuitem", className: classNames([
-            "zen-menu-button__action",
-            "zen-caption",
-            disabled ? "zen-menu-button__action--disabled" : "",
-            driveMenuButtonActionClasses || ""
-        ]), href: disabled || !isSafeHref(link) ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: target, rel: getSafeRel(rel, target), "data-analytics-id": dataAnalyticsId }, linkEvents, { children: [!!icon &&
-                createElement(icon, {
-                    size: isDrive ? "huge" : "large",
-                    className: "zen-caption__pre-content"
-                }), name] })));
+    const linkEvents = useMemo(() => createDisabledGuardedLinkKeyEvents(disabled), [disabled]);
+    const onClickHandler = useCallback((e) => handleDisabledGuardedClick(e, disabled, id, onClick), [id, onClick, disabled]);
+    const iconAfterElement = createMenuIcon(iconOpen ? IconOpen : undefined, iconSize, "zen-menu-button__icon-after");
+    const buttonTemplate = (_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, classNames(["zen-caption__pre-content", "zen-menu-button__icon"])), _jsx("span", { className: "zen-menu-button__action-text", children: name }), iconAfterElement, !!hasChildren && _jsx(ChevronIcon, { size: iconSize, className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) })] }));
+    const linkTemplate = (_jsxs("a", Object.assign({ "data-id": id, role: "menuitem", className: getMenuLinkActionClassName(disabled, destructiveClass, driveMenuButtonActionClasses) }, getMenuLinkAccessibilityProps(disabled, link), { onClick: onClickHandler, target: effectiveTarget, rel: getSafeRel(rel, effectiveTarget), "data-analytics-id": dataAnalyticsId }, linkEvents, { children: [createMenuIcon(icon, iconSize, "zen-caption__pre-content"), iconAfterElement ? _jsx("span", { className: "zen-menu-button__action-text", children: name }) : name, iconAfterElement] })));
     return (_jsx("li", { role: "presentation", className: classNames(["zen-menu-button", className]), children: link ? linkTemplate : buttonTemplate }));
 };

package/esm/menu/components/menuItem.js

@@ -6,7 +6,7 @@ import { ControlledPopup } from "../../controlledPopup/controlledPopup";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useMenuItemCore } from "../utils/useMenuItemCore";
 export { isMenuItem } from "../utils/isMenuItem";
-export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment, dataAnalyticsId }) => {
+export 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 } = useMenuItemCore({
         id,
         children,
@@ -40,10 +40,10 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
         onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
     }, [onClick, onOpenBranch, id, trigger]);
     if (!hasChildren) {
-        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, dataAnalyticsId: dataAnalyticsId }, id));
+        return (_jsx(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 (_jsx(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 (_jsx(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) {
@@ -53,7 +53,7 @@ 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, dataAnalyticsId: dataAnalyticsId }, id));
+        popupTrigger = (_jsx(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 (_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: handleOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: _jsx("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id));
 };

package/esm/miniTabs/miniTabs.js

@@ -6,6 +6,7 @@ import { MiniTabsHeaderItem } from "./miniTabsHeaderItem";
 import { MiniTabsItem } from "./miniTabsItem";
 import { tabsKeyboardHandler } from "../commonHelpers/tabsKeyboard";
 import { getChildrenForRender } from "./miniTabsHelper";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export var MiniTabsSize;
 (function (MiniTabsSize) {
     MiniTabsSize["Small"] = "small";
@@ -18,16 +19,17 @@ export const MiniTabs = ({ activeTabId, onTabChange, children, size = MiniTabsSi
     const [tabs, setTabs] = useState([]);
     const activeButtonRef = useRef(null);
     const tabsRef = useRef(null);
+    const isRTL = useIsRTL();
     const handleTabItemClick = (e) => {
         const newState = e.target.id || e.currentTarget.id || undefined;
         newState && newState !== activeTabId && onTabChange(newState);
     };
     const keyDownHandler = useCallback((e) => {
-        const newActiveTabId = tabsKeyboardHandler(e, tabs, activeTabId);
+        const newActiveTabId = tabsKeyboardHandler(e, tabs, activeTabId, isRTL);
         if (newActiveTabId && newActiveTabId !== activeTabId) {
             onTabChange(newActiveTabId);
         }
-    }, [tabs, activeTabId, onTabChange]);
+    }, [tabs, activeTabId, onTabChange, isRTL]);
     useEffect(() => setTabs(getChildrenForRender(children).slice(0, maxTabsValue)), [children]);
     useEffect(() => {
         var _a;

package/esm/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/esm/pageHeader/pageHeaderButton.js

@@ -14,9 +14,11 @@ import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconBu
 import { classNames } from "../commonHelpers/classNames/classNames";
 export const PageHeaderButtonDisplayName = "PageHeaderButton";
 export const PageHeaderButton = (_a) => {
-    var { id, children, icon, iconPosition = ButtonIconPosition.Start, className = "", onClick, title } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "onClick", "title"]);
+    var { id, children, icon, iconPosition = ButtonIconPosition.Start, className = "", onClick, title, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "onClick", "title", "disabled", "focusableWhenDisabled"]);
     const fullClassName = 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 (_jsx(TextIconButton, Object.assign({ id: id, icon: icon, title: title, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
 };
 PageHeaderButton.displayName = PageHeaderButtonDisplayName;

package/esm/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/esm/pagination/pagination.js

@@ -1,3 +1,14 @@
+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;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
@@ -5,7 +16,12 @@ import { PaginationArrow } from "./paginationArrow";
 import { PaginationButtonsRow } from "./paginationButtonsRow";
 import { PaginationText } from "./paginationText/paginationText";
 import { PaginationType } from "./paginationType";
-export const Pagination = ({ className, activePage, total, perPage, onChange, disabled, includeText = false, type = 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.Compact, total, includeText = false, loadedCount = 0 }) => (_jsx("div", { className: classNames(["zen-pagination", `zen-pagination--type-${type}`, className ? className : ""]), children: includeText ? _jsx(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.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;
@@ -48,3 +64,7 @@ export const Pagination = ({ className, activePage, total, perPage, onChange, di
     const isSinglePage = total <= perPage;
     return (_jsxs("div", { className: classNames(["zen-pagination", `zen-pagination--type-${type}`, className ? className : ""]), children: [includeText ? (_jsx(PaginationText, { amount: total, from: total === 0 ? total : activePage * perPage + 1, to: Math.min((activePage + 1) * perPage, total) })) : null, isSinglePage ? null : (_jsx(PaginationArrow, { value: "previous", disabled: activePage === 0 || disabled, arrowButtonHandler: () => handlePageChange(activePage - 1), type: type })), type === PaginationType.Normal ? (_jsx(PaginationButtonsRow, { paginationValues: getPaginationValues(), activePage: activePage, upperBoundIndex: totalNumberOfPages - 1, onChange: handlePageChange })) : null, isSinglePage ? null : (_jsx(PaginationArrow, { value: "next", disabled: activePage >= totalNumberOfPages - 1 || disabled, arrowButtonHandler: () => handlePageChange(activePage + 1), type: type }))] }));
 };
+export const Pagination = (_a) => {
+    var { variant = "paged" } = _a, props = __rest(_a, ["variant"]);
+    return variant === "loaded" ? (_jsx(PaginationLoaded, { className: props.className, type: props.type, total: props.total, includeText: props.includeText, loadedCount: props.loadedCount })) : (_jsx(PaginationPaged, Object.assign({}, props)));
+};

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