@geotab/zenith 3.16.0 → 3.17.0-beta.0

package/dist/pillExpandable/pillExpandableSimple.js

@@ -8,7 +8,7 @@ const iconChevronTop_1 = require("../icons/iconChevronTop");
 const iconChevronBottom_1 = require("../icons/iconChevronBottom");
 const iconException_1 = require("../icons/iconException");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId, dataAnalyticsId
+const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId
 // eslint-disable-next-line complexity
  }) => {
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
@@ -21,13 +21,7 @@ const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = tr
     const iconSize = isBeta ? "big" : isLargeIcon ? "large" : "big";
     const hasText = (text || "").trim().length > 0;
     const isTextCentered = icon === false && !includeExpandIcon;
-    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: (0, classNames_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,
                     isLargeIcon ? "zen-status-pill__icon--large" : "",
@@ -41,7 +35,23 @@ const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = tr
                     isTextCentered ? "zen-status-pill__text--centered" : ""
                 ]), children: text })), includeExpandIcon && ((0, jsx_runtime_1.jsx)("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, children: (0, jsx_runtime_1.jsx)("div", { className: "zen-status-pill__icon", children: (0, react_1.createElement)(ChevronIcon, {
                         size: iconSize
-                    }) }) }))] })));
+                    }) }) }))] }));
+    if (isDecorative) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)([
+                "zen-status-pill__container",
+                `zen-status-pill__container--${type}`,
+                containerDriveClassName || "",
+                className || "",
+                "zen-ellipsis"
+            ]), "aria-hidden": "true", children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", className: (0, classNames_1.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 })));
 };
 exports.PillExpandableSimple = PillExpandableSimple;
 exports.PillExpandableSimple.displayName = "PillExpandableSimple";

package/dist/selectList/selectList.js

@@ -147,6 +147,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/dist/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/dist/selectList/selectListItem.js

@@ -26,7 +26,16 @@ const getTabIndex = (showCheckbox, focused, disabled) => {
         return -1;
     return focused ? 0 : -1;
 };
-const SelectListItem = ({ id, disabled = false, state = checkboxState_1.CheckboxState.Off, showCheckbox = false, focused = false, onChange, onClick, onFocusItem, multiLevel, className = "", children }) => {
+const getItemClassName = (showCheckbox, focused, destructive, driveClassName, className, divider) => (0, classNames_1.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" : ""
+]);
+const SelectListItem = ({ id, disabled = false, state = checkboxState_1.CheckboxState.Off, showCheckbox = false, focused = false, onChange, onClick, onFocusItem, multiLevel, divider, title, destructive, className = "", children }) => {
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-select-item");
     const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
     const onClickFunc = () => {
@@ -39,17 +48,11 @@ const SelectListItem = ({ id, disabled = false, state = checkboxState_1.Checkbox
         }
         onChange && onChange(id, newState);
     };
-    return ((0, jsx_runtime_1.jsx)("li", { "data-id": id, className: (0, classNames_1.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_1.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: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)("li", { "data-id": id, className: getItemClassName(showCheckbox, focused, destructive, driveClassName, className, divider), role: showCheckbox ? "menuitemcheckbox" : "option", "aria-selected": showCheckbox ? undefined : state === checkboxState_1.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: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)([
                 "zen-select-list__item-content",
                 "zen-select-item__wrapper",
                 "zen-ellipsis",
                 multiLevel ? "zen-select-item__wrapper--with-arrow" : ""
-            ]), children: [showCheckbox ? ((0, jsx_runtime_1.jsx)(checkboxNonInteractive_1.CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === checkboxState_1.CheckboxState.On, indeterminate: state === checkboxState_1.CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? (0, jsx_runtime_1.jsx)(ChevronIcon, { size: "large" }) : null] }) }));
+            ]), title: title || undefined, children: [showCheckbox ? ((0, jsx_runtime_1.jsx)(checkboxNonInteractive_1.CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === checkboxState_1.CheckboxState.On, indeterminate: state === checkboxState_1.CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? (0, jsx_runtime_1.jsx)(ChevronIcon, { size: "large" }) : null] }) }));
 };
 exports.SelectListItem = SelectListItem;

package/dist/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/dist/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/dist/table/children/useTableChildren.js

@@ -27,35 +27,58 @@ const isChildElement = function (child, expectedType) {
     }
     return false;
 };
-const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel) => (0, react_1.useMemo)(() => {
-    let bulkActions = undefined;
+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) => (0, react_1.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 = [];
     react_1.Children.forEach(children, child => {
+        var _a, _b;
         if (!child) {
             return;
         }
         if (isChildElement(child, tableBulkActions_1.TableBulkActions.displayName)) {
-            const bulkActionButtons = child.props.children || [];
-            bulkActions = ((0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions, { gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, children: bulkActionButtons }));
+            bulkActionButtons = child.props.children || [];
             return;
         }
         if (isChildElement(child, tablePagination_1.TablePagination.displayName)) {
-            tablePagination = (0, react_1.createElement)(pagination_1.Pagination, {
-                activePage: child.props.activePage,
-                total: child.props.total || 0,
-                perPage: child.props.perPage || 10,
-                onChange: child.props.onChange,
-                type: paginationType_1.PaginationType.Compact,
-                includeText: true,
-                gridRef: gridRef,
-                disabled: child.props.disabled
-            });
+            paginationMeta.present = true;
+            const total = child.props.total || 0;
+            tablePagination = isInfinite
+                ? (0, react_1.createElement)(pagination_1.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
+                })
+                : (0, react_1.createElement)(pagination_1.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_1.PaginationType.Compact,
+                    includeText: true,
+                    gridRef: gridRef,
+                    disabled: child.props.disabled
+                });
+            paginationMeta.total = child.props.total;
             activePage = child.props.activePage;
             return;
         }
@@ -93,9 +116,20 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
         }
         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 ? ((0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions, { gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.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,
@@ -103,5 +137,19 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
         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
+]);
 exports.useTableChildren = useTableChildren;

package/dist/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/dist/table/nested/nestedData.js

@@ -1,9 +1,24 @@
 "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.NestedData = void 0;
+exports.NestedData = exports.DEFAULT_SHOW_MORE_CAP = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const NestedDataInt = ({ entities, children, expandedRows, useChildrenDataHook, maxHooks = 100 }) => {
+const showMoreRow_1 = require("../../commonHelpers/showMoreRow");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+exports.DEFAULT_SHOW_MORE_CAP = 10;
+const NestedDataInt = ({ entities, children, expandedRows, useChildrenDataHook, maxHooks = 100, showMore, hideChildrenOnMobile }) => {
+    const isMobile = (0, useMobile_1.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 = [];
@@ -18,23 +33,49 @@ const NestedDataInt = ({ entities, children, expandedRows, useChildrenDataHook,
     }
     // Memoize the entities with children calculation to avoid unnecessary re-renders
     const entitiesWithChildren = (0, react_1.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 ? (0, showMoreRow_1.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 ? (0, showMoreRow_1.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 : exports.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 = (0, showMoreRow_1.createShowMoreRow)(Object.assign({ parentId: entity.id, remaining, label: showMore.label }, showMoreActivation));
+                    return (0, showMoreRow_1.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 = (0, react_1.useMemo)(() => (0, react_1.cloneElement)(children, {
         entities: entitiesWithChildren

package/dist/table/nested/useNestedRows.js

@@ -102,6 +102,20 @@ const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
     }
   }, [intExpanded, onExpand]);
   const firstColumnId = (0, react_1.useMemo)(() => columns.length > 0 ? columns[0].id : null, [columns]);
+  // `announceState` adds aria-expanded to the button itself. Only the feed needs it: the desktop
+  // grid is a treegrid whose <tr> already carries aria-expanded (see dataGrid/row/row.tsx), and
+  // repeating it on the control inside that row would announce the state twice.
+  const renderExpandButton = (0, react_1.useCallback)((isExpanded, onExpandCallback, announceState = false) => (0, jsx_runtime_1.jsx)("button", {
+    className: "zen-nested-button__button",
+    onClick: onExpandCallback,
+    "aria-expanded": announceState ? isExpanded : undefined,
+    "aria-label": isExpanded ? translate("Collapse") : translate("Expand"),
+    children: isExpanded ? (0, jsx_runtime_1.jsx)(iconChevronTop_1.IconChevronTop, {
+      size: "large"
+    }) : (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, {
+      size: "large"
+    })
+  }), [translate]);
   const wrapper = (0, react_1.useMemo)(() => ({
     name: exports.NestedWrapperName,
     render(value, entity, isNested) {
@@ -121,16 +135,7 @@ const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
       if ("children" in entity) {
         return (0, jsx_runtime_1.jsxs)("div", {
           className: "zen-nested-button",
-          children: [(0, jsx_runtime_1.jsx)("button", {
-            className: "zen-nested-button__button",
-            onClick: onExpandCallback,
-            "aria-label": isExpanded ? translate("Collapse") : translate("Expand"),
-            children: isExpanded ? (0, jsx_runtime_1.jsx)(iconChevronTop_1.IconChevronTop, {
-              size: "large"
-            }) : (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, {
-              size: "large"
-            })
-          }), (0, jsx_runtime_1.jsx)("div", {
+          children: [renderExpandButton(isExpanded, onExpandCallback), (0, jsx_runtime_1.jsx)("div", {
             className: "zen-nested-button__content",
             children: value
           })]
@@ -141,7 +146,7 @@ const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
     renderHeader(title) {
       return title;
     }
-  }), [expanded, onExpandedChange, isMobile, translate]);
+  }), [expanded, onExpandedChange, isMobile, renderExpandButton]);
   const nestedColumns = (0, react_1.useMemo)(() => {
     const newColumns = columns.map(c => Object.assign({}, c));
     // Add nested wrapper to the first column
@@ -167,16 +172,7 @@ const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
     };
     return [(0, jsx_runtime_1.jsxs)("div", {
       className: "zen-nested-button",
-      children: [(0, jsx_runtime_1.jsx)("button", {
-        className: "zen-nested-button__button",
-        onClick: onExpandCallback,
-        "aria-label": isExpanded ? translate("Collapse") : translate("Expand"),
-        children: isExpanded ? (0, jsx_runtime_1.jsx)(iconChevronTop_1.IconChevronTop, {
-          size: "large"
-        }) : (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, {
-          size: "large"
-        })
-      }), (0, jsx_runtime_1.jsx)("div", {
+      children: [renderExpandButton(isExpanded, onExpandCallback, true), (0, jsx_runtime_1.jsx)("div", {
         className: "zen-nested-button__content",
         children: primaryData
       })]
@@ -184,7 +180,7 @@ const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
       className: "zen-nested-button__padding",
       children: secondaryData
     }, "nested-value")];
-  }, [expanded, onExpandedChange, isMobile, translate]);
+  }, [expanded, onExpandedChange, isMobile, renderExpandButton]);
   return {
     nestedColumns,
     nestedFeedWrapper,

package/dist/table/nested/useShowMore.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import { IEntityWithId } from "../../commonHelpers/entity";
+import { IShowMoreOptions } from "./nestedData";
+export type IUseShowMoreConfig<TParent> = {
+    /** Passed through to `IShowMoreOptions.cap`. Defaults to 10. */
+    cap?: number;
+    /** Passed through to `IShowMoreOptions.label`. */
+    label?: (remaining: number) => ReactNode;
+} & ({
+    /**
+     * Runs in addition to the reveal, not instead of it - the hook marks the parent revealed
+     * either way. Use it for side effects such as analytics.
+     */
+    onClick?: (parent: TParent) => void;
+    href?: never;
+} | {
+    /**
+     * Passed straight through to `IShowMoreOptions.href`. In this mode "+N more" navigates
+     * instead of revealing in place, so the hook keeps no reveal state and `onCollapse`
+     * does nothing.
+     */
+    href: (parent: TParent) => string;
+    onClick?: never;
+});
+/**
+ * Builds `NestedData`'s `showMore` option so consumers don't hand-roll the reveal state.
+ *
+ * Without `href`, this owns the "click +N more to reveal the rest in place" pattern: it tracks
+ * which parents have been revealed and derives `isUncapped` and `onClick` from that. Call the
+ * returned `onCollapse(parentId)` from your own `onExpand` when a parent collapses, so
+ * re-expanding it shows the capped view again instead of staying revealed.
+ *
+ * With `href`, the config is passed straight through and no reveal state exists.
+ *
+ * The returned `showMore` is referentially stable across renders - config callbacks are read
+ * through a ref, so passing an inline config object does not produce a new `showMore` each render.
+ */
+export declare const useShowMore: <TParent extends IEntityWithId>(config?: IUseShowMoreConfig<TParent>) => {
+    showMore: IShowMoreOptions<TParent>;
+    onCollapse: (parentId: string) => void;
+};

package/dist/table/nested/useShowMore.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useShowMore = void 0;
+const react_1 = require("react");
+/**
+ * Builds `NestedData`'s `showMore` option so consumers don't hand-roll the reveal state.
+ *
+ * Without `href`, this owns the "click +N more to reveal the rest in place" pattern: it tracks
+ * which parents have been revealed and derives `isUncapped` and `onClick` from that. Call the
+ * returned `onCollapse(parentId)` from your own `onExpand` when a parent collapses, so
+ * re-expanding it shows the capped view again instead of staying revealed.
+ *
+ * With `href`, the config is passed straight through and no reveal state exists.
+ *
+ * The returned `showMore` is referentially stable across renders - config callbacks are read
+ * through a ref, so passing an inline config object does not produce a new `showMore` each render.
+ */
+const useShowMore = (config) => {
+    const [revealedParents, setRevealedParents] = (0, react_1.useState)(new Set());
+    // Latest-ref so an inline config object - the common call shape - doesn't change `showMore`'s
+    // identity every render. Written during render because `href` is read while NestedData
+    // renders, so an effect-updated ref would be a render stale on first paint.
+    const configRef = (0, react_1.useRef)(config);
+    configRef.current = config;
+    const cap = config === null || config === void 0 ? void 0 : config.cap;
+    const hasLabel = !!(config === null || config === void 0 ? void 0 : config.label);
+    const hasHref = !!(config && "href" in config && config.href);
+    const showMore = (0, react_1.useMemo)(() => {
+        const label = hasLabel ? (remaining) => { var _a, _b; return (_b = (_a = configRef.current) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.call(_a, remaining); } : undefined;
+        if (hasHref) {
+            return { cap, label, href: (parent) => configRef.current.href(parent) };
+        }
+        return {
+            cap,
+            label,
+            isUncapped: (parent) => revealedParents.has(parent.id),
+            onClick: (parent) => {
+                var _a, _b;
+                setRevealedParents(prev => (prev.has(parent.id) ? prev : new Set(prev).add(parent.id)));
+                (_b = (_a = configRef.current) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, parent);
+            }
+        };
+    }, [revealedParents, cap, hasLabel, hasHref]);
+    const onCollapse = (0, react_1.useCallback)((parentId) => {
+        setRevealedParents(prev => {
+            if (!prev.has(parentId)) {
+                return prev;
+            }
+            const next = new Set(prev);
+            next.delete(parentId);
+            return next;
+        });
+    }, []);
+    return { showMore, onCollapse };
+};
+exports.useShowMore = useShowMore;

package/dist/table/selectable/interfaces.d.ts

@@ -5,6 +5,23 @@ export declare enum SelectionState {
     None = "none"
 }
 export interface ISelectionValue {
+    /**
+     * Whether every selectable row across every page is selected.
+     */
     all: boolean;
+    /**
+     * Included IDs by default. With `ISelectableRowsOptions.allowExclusions: true`,
+     * these are excluded IDs while `all` is true, and included IDs while `all` is false.
+     * Consumers opting in must resolve the effective selection before running bulk actions.
+     */
     selected: string[];
 }
+/**
+ * One checkbox row in the order it is rendered. Expanded nested rows are part of this list,
+ * directly after their parent, so a drag or shift-click range can span nesting levels the
+ * same way it spans sibling rows.
+ */
+export interface IDragSelectionRow {
+    id: string;
+    isNested: boolean;
+}

package/dist/table/selectable/useDragSelection.d.ts

@@ -0,0 +1,10 @@
+import { MouseEvent as ReactMouseEvent, RefObject } from "react";
+import { IDragSelectionRow } from "./interfaces";
+/**
+ * @param rows every checkbox row in render order, expanded nested rows included, so ranges can
+ * span nesting levels.
+ */
+export declare const useDragSelection: (rows: IDragSelectionRow[], gridRef: RefObject<HTMLElement | null> | undefined, onBatchSelect: (rangeIds: string[], select: boolean, base: Set<string>) => void, getBaseSelection: () => Set<string>, isSelectable: (row: IDragSelectionRow) => boolean, isEnabled: boolean) => {
+    onCheckboxMouseDown: (id: string, checked: boolean, e: ReactMouseEvent) => void;
+    suppressNextChangeRef: RefObject<boolean>;
+};