@geotab/zenith 3.16.0 → 3.17.0-beta.1

package/esm/pagination/paginationText/paginationText.js

@@ -1,6 +1,7 @@
 import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLanguage } from "../../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");
@@ -37,12 +38,14 @@ injectString("bg-BG", "Showing {from} - {to} of {total}", "\u041F\u043E\u043A\u0
 export const PaginationText = ({
   amount,
   from,
-  to
+  to,
+  variant = "showing"
 }) => {
   const {
     translate
   } = 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 _jsx("span", {
     "aria-live": "polite",
     "aria-atomic": "true",
@@ -50,4 +53,4 @@ export const PaginationText = ({
     children: children
   });
 };
-export const TRANSLATIONS = ["Showing {from} - {to} of {total}"];
+export const TRANSLATIONS = ["Showing {from} - {to} of {total}", "{from}-{to} of {total}"];

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

@@ -4,7 +4,7 @@ import { Button } from "../button/button";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { LazyContent } from "../skeleton/lazyContent";
-export const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, tertiaryAction, onActionClick, isVisible = true, errorHandler, descriptionId }) => {
+export const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, tertiaryAction, onActionClick, isVisible = true, errorHandler, descriptionId, descriptionRef }) => {
     const headerDriveClassName = useDriveClassName("zen-status-pill-popup__header-text");
     const descriptionDriveClassName = useDriveClassName("zen-status-pill-popup__description");
     const mainActionClick = useCallback((onClick) => () => {
@@ -31,7 +31,7 @@ export const PillContent = ({ date, count, descriptionText, mainAction, secondar
         var _a, _b;
         return (_jsx(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 = useCallback(data => (_jsx("div", { id: descriptionId, className: classNames(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data })), [descriptionDriveClassName, descriptionId]);
+    const renderDescription = useCallback(data => (_jsx("div", { id: descriptionId, ref: descriptionRef, className: classNames(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data })), [descriptionDriveClassName, descriptionId, descriptionRef]);
     const renderCount = useCallback(data => data ? (_jsx("div", { className: classNames([
             "zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left",
             headerDriveClassName || ""

package/esm/pillExpandable/pillExpandable.js

@@ -87,6 +87,12 @@ const PillExpandablePopover = ({
     popoverRef.current = node;
     setContainerNode(node);
   }, [setContainerNode]);
+  const handleMobileReadyForFocus = 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).
   useEffect(() => {
@@ -125,6 +131,7 @@ const PillExpandablePopover = ({
       isOpen: isOpen,
       onHidePanel: onClose,
       onCloseClick: onClose,
+      onReadyForFocus: handleMobileReadyForFocus,
       id: popupId,
       children: [_jsx(MobileSheet.Title, {
         className: "zen-status-pill-popup__mobile-title",
@@ -141,13 +148,15 @@ const PillExpandablePopover = ({
   }
   return _jsx(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: alignments,
     children: _jsxs("div", {
       ref: handlePopoverRef,
@@ -173,6 +182,7 @@ const PillExpandableChild = ({
 }) => {
   const pillId = useId();
   const descriptionId = useId();
+  const [descriptionElement, setDescriptionElement] = useState(null);
   const {
     level,
     expandedChildPillIds,
@@ -227,7 +237,7 @@ const PillExpandableChild = ({
       onExpand: handleChildToggle,
       type: type,
       errorHandler: errorHandler,
-      descriptionId: descriptionId,
+      descriptionId: isExpanded && descriptionElement ? descriptionId : undefined,
       dataAnalyticsId: dataAnalyticsId
     }), _jsx(PillContent, {
       onActionClick: handleChildToggle,
@@ -239,7 +249,8 @@ const PillExpandableChild = ({
       tertiaryAction: content.tertiaryAction,
       isVisible: isExpanded,
       errorHandler: errorHandler,
-      descriptionId: descriptionId
+      descriptionId: descriptionId,
+      descriptionRef: setDescriptionElement
     })]
   });
 };
@@ -409,6 +420,7 @@ const PillExpandableBase = ({
 }) => {
   const popupId = useId();
   const descriptionId = useId();
+  const [descriptionElement, setDescriptionElement] = useState(null);
   const isDrive = useDrive();
   const [isMobile, setIsMobile] = useState(false);
   const handleDeviceTypeChange = useCallback(deviceType => {
@@ -533,6 +545,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);
@@ -563,7 +576,6 @@ const PillExpandableBase = ({
     },
     children: _jsxs("div", {
       className: classNames(["zen-status-pill", className || ""]),
-      "aria-haspopup": "true",
       children: [_jsxs("div", {
         className: "zen-status-pill__pill-container",
         onClick: handlePopupToggle,
@@ -576,6 +588,8 @@ const PillExpandableBase = ({
           errorHandler: errorHandler,
           isBeta: isBeta,
           isMobile: isMobile,
+          descriptionId: isPopupOpen && descriptionElement ? descriptionId : undefined,
+          ariaHasPopup: "dialog",
           dataAnalyticsId: dataAnalyticsId
         }), uniqueChildren && _jsx(PillExpandableSimple, {
           icon: secondaryIcon || effectiveIcon,
@@ -584,7 +598,8 @@ const PillExpandableBase = ({
           type: type,
           errorHandler: errorHandler,
           className: "zen-status-pill__counter",
-          isMobile: isMobile
+          isMobile: isMobile,
+          isDecorative: true
         })]
       }), _jsx(PillExpandablePopover, {
         useMobileSheet: useMobileSheet,

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

@@ -1,3 +1,3 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PillContent } from "./pillContent";
-export const PillExpandablePopoverContent = ({ variant, customContent, onActionClick, descriptionText, date, count, mainAction, secondaryAction, tertiaryAction, errorHandler, descriptionId, childToDisplay }) => (_jsxs(_Fragment, { children: [variant === "placeholder" && customContent, variant === "default" && (_jsx(PillContent, { onActionClick: onActionClick, descriptionText: descriptionText, date: date, count: count, mainAction: mainAction, secondaryAction: secondaryAction, tertiaryAction: tertiaryAction, errorHandler: errorHandler, descriptionId: descriptionId })), childToDisplay.length > 0 && _jsx("div", { className: "zen-status-pill-popup__children", children: childToDisplay })] }));
+export const PillExpandablePopoverContent = ({ variant, customContent, onActionClick, descriptionText, date, count, mainAction, secondaryAction, tertiaryAction, errorHandler, descriptionId, descriptionRef, childToDisplay }) => (_jsxs(_Fragment, { children: [variant === "placeholder" && customContent, variant === "default" && (_jsx(PillContent, { onActionClick: onActionClick, descriptionText: descriptionText, date: date, count: count, mainAction: mainAction, secondaryAction: secondaryAction, tertiaryAction: tertiaryAction, errorHandler: errorHandler, descriptionId: descriptionId, descriptionRef: descriptionRef })), childToDisplay.length > 0 && _jsx("div", { className: "zen-status-pill-popup__children", children: childToDisplay })] }));

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

package/esm/pillExpandable/pillExpandableSimple.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, useCallback } from "react";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { IconChevronTop } from "../icons/iconChevronTop";
 import { IconChevronBottom } from "../icons/iconChevronBottom";
 import { IconException } from "../icons/iconException";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, isMobile, ref, className, descriptionId, dataAnalyticsId
+export const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId
 // eslint-disable-next-line complexity
  }) => {
     const iconDriveClassName = useDriveClassName("icon");
@@ -18,13 +18,7 @@ export const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIc
     const iconSize = isBeta ? "big" : isLargeIcon ? "large" : "big";
     const hasText = (text || "").trim().length > 0;
     const isTextCentered = icon === false && !includeExpandIcon;
-    return (_jsxs("button", Object.assign({ type: "button", className: classNames([
-            "zen-status-pill__container",
-            `zen-status-pill__container--${type}`,
-            containerDriveClassName || "",
-            className || "",
-            "zen-ellipsis"
-        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-expanded": includeExpandIcon ? (expanded !== null && expanded !== void 0 ? expanded : false) : undefined, "aria-describedby": descriptionId }, (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {}), { children: [icon !== false && (_jsx("div", { className: classNames([
+    const content = (_jsxs(_Fragment, { children: [icon !== false && (_jsx("div", { className: classNames([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,
                     isLargeIcon ? "zen-status-pill__icon--large" : "",
@@ -38,6 +32,22 @@ export const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIc
                     isTextCentered ? "zen-status-pill__text--centered" : ""
                 ]), children: text })), includeExpandIcon && (_jsx("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, children: _jsx("div", { className: "zen-status-pill__icon", children: createElement(ChevronIcon, {
                         size: iconSize
-                    }) }) }))] })));
+                    }) }) }))] }));
+    if (isDecorative) {
+        return (_jsx("span", { className: classNames([
+                "zen-status-pill__container",
+                `zen-status-pill__container--${type}`,
+                containerDriveClassName || "",
+                className || "",
+                "zen-ellipsis"
+            ]), "aria-hidden": "true", children: content }));
+    }
+    return (_jsx("button", Object.assign({ type: "button", className: classNames([
+            "zen-status-pill__container",
+            `zen-status-pill__container--${type}`,
+            containerDriveClassName || "",
+            className || "",
+            "zen-ellipsis"
+        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-expanded": includeExpandIcon ? (expanded !== null && expanded !== void 0 ? expanded : false) : undefined, "aria-describedby": descriptionId, "aria-haspopup": ariaHasPopup, "data-role": ariaHasPopup }, (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {}), { children: content })));
 };
 PillExpandableSimple.displayName = "PillExpandableSimple";

package/esm/selectList/selectList.js

@@ -139,6 +139,7 @@ const SelectListInnerComp = ({
       showCheckbox: showCheckbox,
       state: state.itemsState.get(item.id),
       focused: state.activeIndex === index,
+      divider: index < items.length - 1 ? item.divider : undefined,
       onChange: onChangeItem,
       onClick: onClickItem,
       onFocusItem: onFocusItem

package/esm/selectList/selectListItem.d.ts

@@ -10,5 +10,14 @@ export interface ISelectListItem extends IZenIdComponentProps {
     onClick?: (id: string) => void;
     onFocusItem?: (id: string) => void;
     multiLevel?: boolean;
+    /** When true, renders a 1px separator line below this item. */
+    divider?: boolean;
+    title?: string;
+    /**
+     * When true, renders the item label in `--text-error-message` red. Visual signal only — does not prevent selection.
+     * Only applies in single-select (SelectList) mode; ignored in multiselect (CheckboxListWithAction).
+     * Disabled+destructive renders with `--accents-error--main` (#ffeceb) on a transparent background, no hover feedback.
+     */
+    destructive?: boolean;
 }
-export declare const SelectListItem: ({ id, disabled, state, showCheckbox, focused, onChange, onClick, onFocusItem, multiLevel, className, children }: ISelectListItem) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectListItem: ({ id, disabled, state, showCheckbox, focused, onChange, onClick, onFocusItem, multiLevel, divider, title, destructive, className, children }: ISelectListItem) => import("react/jsx-runtime").JSX.Element;

package/esm/selectList/selectListItem.js

@@ -23,7 +23,16 @@ const getTabIndex = (showCheckbox, focused, disabled) => {
         return -1;
     return focused ? 0 : -1;
 };
-export const SelectListItem = ({ id, disabled = false, state = CheckboxState.Off, showCheckbox = false, focused = false, onChange, onClick, onFocusItem, multiLevel, className = "", children }) => {
+const getItemClassName = (showCheckbox, focused, destructive, driveClassName, className, divider) => classNames([
+    "zen-select-item",
+    showCheckbox ? "zen-select-item--with-checkbox" : "",
+    focused ? "zen-select-item--focused" : "",
+    destructive ? "zen-select-item--destructive" : "",
+    driveClassName || "",
+    className,
+    divider ? "zen-select-item--divider" : ""
+]);
+export const SelectListItem = ({ id, disabled = false, state = CheckboxState.Off, showCheckbox = false, focused = false, onChange, onClick, onFocusItem, multiLevel, divider, title, destructive, className = "", children }) => {
     const driveClassName = useDriveClassName("zen-select-item");
     const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
     const onClickFunc = () => {
@@ -36,16 +45,10 @@ export const SelectListItem = ({ id, disabled = false, state = CheckboxState.Off
         }
         onChange && onChange(id, newState);
     };
-    return (_jsx("li", { "data-id": id, className: classNames([
-            "zen-select-item",
-            showCheckbox ? "zen-select-item--with-checkbox" : "",
-            focused ? "zen-select-item--focused" : "",
-            driveClassName || "",
-            className
-        ]), role: showCheckbox ? "menuitemcheckbox" : "option", "aria-selected": showCheckbox ? undefined : state === CheckboxState.On, "aria-checked": getAriaChecked(showCheckbox, state), "aria-disabled": disabled, tabIndex: getTabIndex(showCheckbox, focused, disabled), onFocus: !showCheckbox && !disabled && onFocusItem ? () => onFocusItem(id) : undefined, onClick: onClickFunc, id: id, children: _jsxs("div", { className: classNames([
+    return (_jsx("li", { "data-id": id, className: getItemClassName(showCheckbox, focused, destructive, driveClassName, className, divider), role: showCheckbox ? "menuitemcheckbox" : "option", "aria-selected": showCheckbox ? undefined : state === CheckboxState.On, "aria-checked": getAriaChecked(showCheckbox, state), "aria-disabled": disabled, tabIndex: getTabIndex(showCheckbox, focused, disabled), onFocus: !showCheckbox && !disabled && onFocusItem ? () => onFocusItem(id) : undefined, onClick: onClickFunc, id: id, children: _jsxs("div", { className: classNames([
                 "zen-select-list__item-content",
                 "zen-select-item__wrapper",
                 "zen-ellipsis",
                 multiLevel ? "zen-select-item__wrapper--with-arrow" : ""
-            ]), children: [showCheckbox ? (_jsx(CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === CheckboxState.On, indeterminate: state === CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? _jsx(ChevronIcon, { size: "large" }) : null] }) }));
+            ]), title: title || undefined, children: [showCheckbox ? (_jsx(CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === CheckboxState.On, indeterminate: state === CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? _jsx(ChevronIcon, { size: "large" }) : null] }) }));
 };

package/esm/table/children/tablePagination.d.ts

@@ -1,5 +1,5 @@
 import { IPagination } from "../../pagination/pagination";
-export interface ITablePagination extends Pick<IPagination, "activePage" | "total" | "perPage" | "onChange" | "disabled"> {
+export interface ITablePagination extends Pick<IPagination, "total">, Partial<Pick<IPagination, "activePage" | "perPage" | "onChange" | "disabled">> {
 }
 export declare const TablePagination: {
     (_: ITablePagination): import("react/jsx-runtime").JSX.Element;

package/esm/table/children/useTableChildren.d.ts

@@ -1,7 +1,9 @@
 import { ReactElement, ReactNode, RefObject } from "react";
-export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, activeId?: string, gridRef?: RefObject<HTMLElement | null>, onCloseDetailPanel?: () => void) => {
-    bulkActions: ReactElement | undefined;
+export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, activeId?: string, gridRef?: RefObject<HTMLElement | null>, onCloseDetailPanel?: () => void, isInfinite?: boolean, loadedCount?: number, excludedCount?: number, canUsePaginationTotal?: boolean, hasMoreRows?: boolean) => {
+    bulkActions: import("react/jsx-runtime").JSX.Element | undefined;
+    hasSelection: boolean;
     pagination: ReactElement | undefined;
+    paginationTotal: number | undefined;
     activePage: undefined;
     fullscreenButton: ReactElement | undefined;
     emptyList: ReactElement | undefined;

package/esm/table/children/useTableChildren.js

@@ -24,35 +24,58 @@ const isChildElement = function (child, expectedType) {
     }
     return false;
 };
-export const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel) => useMemo(() => {
-    let bulkActions = undefined;
+export const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel, 
+// Desktop infinite scroll (Table's `onScrollEnd`): when true, a `Table.Pagination` child is
+// rendered as the chevron-less "loaded" variant (see `pagination.tsx`) instead of the normal
+// paged controls, driven by `loadedCount` (the number of rows currently rendered).
+isInfinite = false, loadedCount = 0, excludedCount = 0, canUsePaginationTotal = true, hasMoreRows = false) => useMemo(() => {
+    let bulkActionButtons;
     let tablePagination = undefined;
     let activePage = undefined;
+    // A plain `let` reassigned only inside the `Children.forEach` callback below would be seen
+    // by TS as always `undefined` at the return statement (its pre-callback narrowed type) —
+    // see the `as ReactElement | undefined` casts used for the other fields above/below for the
+    // same reason. A property on a mutable object sidesteps that: property reads aren't narrowed
+    // the same way, so `paginationMeta.total` correctly types as `number | undefined` below.
+    const paginationMeta = {};
     let tableFullscreen = undefined;
     let emptyList = undefined;
     let footer = undefined;
     let detailPanel = undefined;
     const other = [];
     Children.forEach(children, child => {
+        var _a, _b;
         if (!child) {
             return;
         }
         if (isChildElement(child, TableBulkActions.displayName)) {
-            const bulkActionButtons = child.props.children || [];
-            bulkActions = (_jsx(BulkActions, { gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, children: bulkActionButtons }));
+            bulkActionButtons = child.props.children || [];
             return;
         }
         if (isChildElement(child, TablePagination.displayName)) {
-            tablePagination = createElement(Pagination, {
-                activePage: child.props.activePage,
-                total: child.props.total || 0,
-                perPage: child.props.perPage || 10,
-                onChange: child.props.onChange,
-                type: PaginationType.Compact,
-                includeText: true,
-                gridRef: gridRef,
-                disabled: child.props.disabled
-            });
+            paginationMeta.present = true;
+            const total = child.props.total || 0;
+            tablePagination = isInfinite
+                ? createElement(Pagination, {
+                    // activePage/perPage/onChange/gridRef/disabled are all paged-only (see
+                    // Pagination's `variant` dispatch) and optional on IPagination for exactly
+                    // this reason — intentionally omitted here rather than passed for no effect.
+                    total,
+                    variant: "loaded",
+                    loadedCount,
+                    includeText: true
+                })
+                : createElement(Pagination, {
+                    activePage: (_a = child.props.activePage) !== null && _a !== void 0 ? _a : 0,
+                    total,
+                    perPage: child.props.perPage || 10,
+                    onChange: (_b = child.props.onChange) !== null && _b !== void 0 ? _b : (() => undefined),
+                    type: PaginationType.Compact,
+                    includeText: true,
+                    gridRef: gridRef,
+                    disabled: child.props.disabled
+                });
+            paginationMeta.total = child.props.total;
             activePage = child.props.activePage;
             return;
         }
@@ -90,9 +113,20 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
         }
         other.push(child);
     });
+    const allRowsLoaded = (!paginationMeta.present && !hasMoreRows) || (paginationMeta.total !== undefined && loadedCount >= paginationMeta.total);
+    const hasExclusions = allSelected && excludedCount > 0;
+    const selectedCount = allSelected && !allRowsLoaded
+        ? canUsePaginationTotal && paginationMeta.total !== undefined
+            ? Math.max(0, paginationMeta.total - excludedCount)
+            : undefined
+        : selected;
+    const hasSelection = selectedCount === undefined || selectedCount > 0;
+    const bulkActions = bulkActionButtons !== undefined ? (_jsx(BulkActions, { gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop, selected: selectedCount !== null && selectedCount !== void 0 ? selectedCount : selected, allSelected: allSelected && !hasExclusions && hasSelection, selectionCountUnknown: hasExclusions && selectedCount === undefined, onClearSelection: clearSelection, children: bulkActionButtons })) : undefined;
     return {
-        bulkActions: bulkActions,
+        bulkActions,
+        hasSelection,
         pagination: tablePagination,
+        paginationTotal: paginationMeta.total,
         activePage: activePage,
         fullscreenButton: tableFullscreen,
         emptyList: emptyList,
@@ -100,4 +134,18 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
         detailPanel: detailPanel,
         other: other
     };
-}, [children, clearSelection, isMobile, selected, gridRef, allSelected, activeId, onCloseDetailPanel]);
+}, [
+    children,
+    clearSelection,
+    isMobile,
+    selected,
+    gridRef,
+    allSelected,
+    activeId,
+    onCloseDetailPanel,
+    isInfinite,
+    loadedCount,
+    excludedCount,
+    canUsePaginationTotal,
+    hasMoreRows
+]);

package/esm/table/nested/nestedData.d.ts

@@ -1,5 +1,26 @@
+import { ReactNode } from "react";
 import { IEntityWithId } from "../../commonHelpers/entity";
-declare const NestedDataInt: <TParent extends IEntityWithId, TChild extends IEntityWithId>({ entities, children, expandedRows, useChildrenDataHook, maxHooks }: {
+export declare const DEFAULT_SHOW_MORE_CAP = 10;
+/**
+ * Caps how many child rows render per parent, appending a "+N more" affordance.
+ * Desktop only: on mobile an expanded parent always renders its full child list, uncapped and
+ * with no "+N more" row, because the feed has no comparable density constraint.
+ * Memoize the object you pass — a new reference each render re-derives the entity tree.
+ */
+export type IShowMoreOptions<TParent> = {
+    /** Defaults to 10. */
+    cap?: number;
+    label?: (remaining: number) => ReactNode;
+    /** When true for a parent, all its children render with no cap and no "+N more" row. */
+    isUncapped?: (parent: TParent) => boolean;
+} & ({
+    onClick: (parent: TParent) => void;
+    href?: never;
+} | {
+    href: (parent: TParent) => string;
+    onClick?: never;
+});
+declare const NestedDataInt: <TParent extends IEntityWithId, TChild extends IEntityWithId>({ entities, children, expandedRows, useChildrenDataHook, maxHooks, showMore, hideChildrenOnMobile }: {
     entities: TParent[];
     expandedRows: string[];
     useChildrenDataHook: (parentId: string, enabled: boolean) => {
@@ -10,6 +31,13 @@ declare const NestedDataInt: <TParent extends IEntityWithId, TChild extends IEnt
     };
     children: React.ReactNode;
     maxHooks?: number;
+    showMore?: IShowMoreOptions<TParent>;
+    /**
+     * Mobile only. When true, parents render as plain rows on the feed: no children and no
+     * expand control. Pair it with a column renderer (e.g. `MainColumn`'s `mainText.createLink`)
+     * to send the user to a view that owns the full child list. Desktop is unaffected.
+     */
+    hideChildrenOnMobile?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const NestedData: typeof NestedDataInt;
 export {};

package/esm/table/nested/nestedData.js

@@ -1,6 +1,21 @@
+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 { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { cloneElement, memo, useMemo } from "react";
-const NestedDataInt = ({ entities, children, expandedRows, useChildrenDataHook, maxHooks = 100 }) => {
+import { createShowMoreRow, withFullChildren } from "../../commonHelpers/showMoreRow";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+export const DEFAULT_SHOW_MORE_CAP = 10;
+const NestedDataInt = ({ entities, children, expandedRows, useChildrenDataHook, maxHooks = 100, showMore, hideChildrenOnMobile }) => {
+    const isMobile = useMobile();
     // Call hooks in a consistent order - this MUST be at the top level and cannot be wrapped in useEffect
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const hookResults = [];
@@ -15,23 +30,49 @@ const NestedDataInt = ({ entities, children, expandedRows, useChildrenDataHook,
     }
     // Memoize the entities with children calculation to avoid unnecessary re-renders
     const entitiesWithChildren = useMemo(() => entities.map((entity, index) => {
+        var _a, _b;
         const isExpanded = expandedRows.includes(entity.id);
         if (index < maxHooks) {
             const { data: childrenData, isLoading, error, isError } = hookResults[index];
+            // Must come before the skeleton branch below: that one attaches placeholder
+            // children to every collapsed parent, which is what makes the feed render an
+            // expand control. Dropping `children` entirely is what removes it.
+            if (isMobile && hideChildrenOnMobile) {
+                // `children` is destructured off rather than spread over, so a
+                // consumer-supplied array cannot survive and re-add the control.
+                const _c = entity, { children: _hidden } = _c, rest = __rest(_c, ["children"]);
+                const withoutChildren = rest;
+                // Selection still covers every real child (ticket decision #4) even though
+                // none of them render.
+                return childrenData ? withFullChildren(withoutChildren, childrenData) : withoutChildren;
+            }
             if (isLoading || !isExpanded) {
-                return Object.assign(Object.assign({}, entity), { children: new Array(3)
+                const placeholderEntity = Object.assign(Object.assign({}, entity), { children: new Array(3)
                         .fill("")
                         .map((_1, j) => ({ id: `loading-${entity.id}-${j}`, isLoading: true })) });
+                // Skeletons render, but already-fetched children stay available so selecting
+                // the parent covers every child rather than the placeholders.
+                return childrenData ? withFullChildren(placeholderEntity, childrenData) : placeholderEntity;
             }
             if (isError && error) {
                 return Object.assign(Object.assign({}, entity), { children: [] });
             }
             if (childrenData) {
+                const cap = (_a = showMore === null || showMore === void 0 ? void 0 : showMore.cap) !== null && _a !== void 0 ? _a : DEFAULT_SHOW_MORE_CAP;
+                // The cap is a desktop density affordance; the mobile feed renders every child.
+                if (showMore && !isMobile && childrenData.length > cap && !((_b = showMore.isUncapped) === null || _b === void 0 ? void 0 : _b.call(showMore, entity))) {
+                    const remaining = childrenData.length - cap;
+                    const showMoreActivation = "href" in showMore && showMore.href
+                        ? { href: showMore.href(entity) }
+                        : { onActivate: () => showMore.onClick(entity) };
+                    const showMoreRow = createShowMoreRow(Object.assign({ parentId: entity.id, remaining, label: showMore.label }, showMoreActivation));
+                    return withFullChildren(Object.assign(Object.assign({}, entity), { children: [...childrenData.slice(0, cap), showMoreRow] }), childrenData);
+                }
                 return Object.assign(Object.assign({}, entity), { children: childrenData });
             }
         }
         return entity;
-    }), [entities, expandedRows, maxHooks, hookResults]);
+    }), [entities, expandedRows, maxHooks, hookResults, showMore, isMobile, hideChildrenOnMobile]);
     /* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any */
     const table = useMemo(() => cloneElement(children, {
         entities: entitiesWithChildren