@geotab/zenith 3.16.0 → 3.17.0-beta.0

package/esm/commonHelpers/isAriaProp.js

@@ -0,0 +1,9 @@
+/**
+ * Whether a prop key is an aria attribute, in either the hyphenated (`aria-label`) or the
+ * camelCase (`ariaLabel`) spelling.
+ *
+ * Pair it with `getAriaAttributes` when a component has to split a rest-props object: the helper
+ * collects the aria half, this predicate identifies the half it leaves behind. Sharing one rule
+ * keeps the two halves from disagreeing and silently dropping a prop.
+ */
+export const isAriaProp = (key) => key.startsWith("aria-") || (key.startsWith("aria") && key.length > 4 && key[4] === key[4].toUpperCase());

package/esm/commonHelpers/showMoreRow.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import { IEntityWithId } from "./entity";
+export declare const SHOW_MORE_KIND = "showMore";
+export type IShowMoreActivation = {
+    onActivate: () => void;
+    href?: never;
+} | {
+    href: string;
+    onActivate?: never;
+};
+export type IShowMoreRow = IEntityWithId & {
+    __zenMoreRowsType: typeof SHOW_MORE_KIND;
+    remaining: number;
+    parentId: string;
+    label?: (remaining: number) => ReactNode;
+} & IShowMoreActivation;
+export declare const isShowMoreRow: (entity: IEntityWithId) => entity is IShowMoreRow;
+export declare const createShowMoreRow: (params: {
+    parentId: string;
+    remaining: number;
+    label?: (remaining: number) => ReactNode;
+} & IShowMoreActivation) => IShowMoreRow;
+export declare const withFullChildren: <T extends {
+    children?: unknown[];
+}>(entity: T, fullChildren: readonly unknown[]) => T;
+export declare const getChildrenForSelection: <N extends IEntityWithId>(entity: {
+    children?: N[];
+}) => N[] | undefined;

package/esm/commonHelpers/showMoreRow.js

@@ -0,0 +1,22 @@
+export const SHOW_MORE_KIND = "showMore";
+export const isShowMoreRow = (entity) => 
+// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
+entity.__zenMoreRowsType === SHOW_MORE_KIND;
+export const createShowMoreRow = (params) => {
+    const base = {
+        id: `__zen-show-more__${params.parentId}`,
+        __zenMoreRowsType: SHOW_MORE_KIND,
+        remaining: params.remaining,
+        parentId: params.parentId,
+        label: params.label
+    };
+    if ("href" in params && params.href !== undefined) {
+        return Object.assign(Object.assign({}, base), { href: params.href });
+    }
+    return Object.assign(Object.assign({}, base), { onActivate: params.onActivate });
+};
+// `children` is sliced down for rendering, so the un-capped list is stashed here to keep
+// selection operating on every real child.
+const FULL_CHILDREN_KEY = "__zenFullChildren";
+export const withFullChildren = (entity, fullChildren) => (Object.assign(Object.assign({}, entity), { [FULL_CHILDREN_KEY]: fullChildren }));
+export const getChildrenForSelection = (entity) => { var _a; return (_a = entity[FULL_CHILDREN_KEY]) !== null && _a !== void 0 ? _a : entity.children; };

package/esm/commonHelpers/tabsKeyboard.d.ts

@@ -1,3 +1,3 @@
 import { IEntityWithId } from "./entity";
-export declare const tabsKeyboardHandler: (e: React.KeyboardEvent, tabsArr: IEntityWithId[], activeId: string) => string | null;
+export declare const tabsKeyboardHandler: (e: React.KeyboardEvent, tabsArr: IEntityWithId[], activeId: string, isRTL?: boolean) => string | null;
 export declare const tabsKeyboardTabHandler: (e: React.KeyboardEvent, tabsArr: IEntityWithId[], activeElement: HTMLElement) => string | undefined;

package/esm/commonHelpers/tabsKeyboard.js

@@ -1,7 +1,14 @@
-export const tabsKeyboardHandler = (e, tabsArr, activeId) => {
+export const tabsKeyboardHandler = (e, tabsArr, activeId, isRTL = false) => {
     const getCurrentIndex = () => tabsArr.findIndex(el => el.id === activeId);
     switch (e.key) {
         case "ArrowLeft": {
+            e.preventDefault();
+            if (isRTL) {
+                const currentIndex = getCurrentIndex();
+                const nextPaneIndex = currentIndex > -1 ? currentIndex + 1 : undefined;
+                const newPaneId = nextPaneIndex !== undefined && nextPaneIndex < tabsArr.length ? tabsArr[nextPaneIndex].id : tabsArr[0].id;
+                return newPaneId;
+            }
             const currentIndex = getCurrentIndex();
             const prevPaneIndex = currentIndex > -1 ? currentIndex - 1 : undefined;
             const newPaneId = prevPaneIndex !== undefined && prevPaneIndex > -1 ? tabsArr[prevPaneIndex].id : tabsArr[tabsArr.length - 1].id;
@@ -12,6 +19,13 @@ export const tabsKeyboardHandler = (e, tabsArr, activeId) => {
             return tabsArr[0].id;
         }
         case "ArrowRight": {
+            e.preventDefault();
+            if (isRTL) {
+                const currentIndex = getCurrentIndex();
+                const prevPaneIndex = currentIndex > -1 ? currentIndex - 1 : undefined;
+                const newPaneId = prevPaneIndex !== undefined && prevPaneIndex > -1 ? tabsArr[prevPaneIndex].id : tabsArr[tabsArr.length - 1].id;
+                return newPaneId;
+            }
             const currentIndex = getCurrentIndex();
             const nextPaneIndex = currentIndex > -1 ? currentIndex + 1 : undefined;
             const newPaneId = nextPaneIndex !== undefined && nextPaneIndex < tabsArr.length ? tabsArr[nextPaneIndex].id : tabsArr[0].id;

package/esm/commonStyles/colors/colorsConstant.js

@@ -53,67 +53,67 @@ export const Colors = {
         {
             colorName: "action-primary",
             text: "Primary",
-            variable: "--text-primary--default",
+            variable: "--action-primary--default",
             description: "For immediate attention to interactive elements"
         },
         {
             colorName: "action-primary-hover",
             text: "Primary - Hover",
-            variable: "--text-primary--hover",
+            variable: "--action-primary--hover",
             description: "For indication when users hover over interactive elements"
         },
         {
             colorName: "action-primary-active",
             text: "Primary - Active",
-            variable: "--text-primary--active",
+            variable: "--action-primary--active",
             description: "For indication when an element is clicked or tapped"
         },
         {
             colorName: "action-secondary",
             text: "Secondary - Default",
-            variable: "--text-secondary--default",
+            variable: "--action-secondary--default",
             description: "Primary text and icons colour for text and icons"
         },
         {
             colorName: "action-secondary-hover",
             text: "Secondary - Hover",
-            variable: "--text-secondary--hover",
+            variable: "--action-secondary--hover",
             description: "For indication when users hover over less prominent interactive elements"
         },
         {
             colorName: "action-secondary-active",
             text: "Secondary - Active",
-            variable: "--text-secondary--active",
+            variable: "--action-secondary--active",
             description: "For indication when a secondary element is clicked or tapped"
         },
         {
             colorName: "action-destructive",
             text: "Destructive - Default",
-            variable: "--text-destructive--default",
+            variable: "--action-destructive--default",
             description: "For highlighting actions or elements that carry significant consequences"
         },
         {
             colorName: "action-destructive-hover",
             text: "Destructive Hover",
-            variable: "--text-destructive--hover",
+            variable: "--action-destructive--hover",
             description: "For visual feedback when users hover over elements representing potentially irreversible actions"
         },
         {
             colorName: "action-destructive-active",
             text: "Destructive - Active",
-            variable: "--text-destructive--active",
+            variable: "--action-destructive--active",
             description: "For when potentially irreversible actions are clicked"
         },
         {
             colorName: "action-tertiary-hover",
             text: "Tertiary hover",
-            variable: "--text-tertiary--hover",
+            variable: "--action-tertiary--hover",
             description: "For subtle visual feedback when users hover over less prominent interactive elements"
         },
         {
             colorName: "action-tertiary-active",
             text: "Tertiary active",
-            variable: "--text-tertiary--active",
+            variable: "--action-tertiary--active",
             description: "For less prominent interactive elements, when they are clicked or tapped"
         }
     ],

package/esm/dataFeed/dataFeedColumnsItems.js

@@ -6,6 +6,8 @@ import { DataFeedCell } from "./dataFeedCell/dataFeedCell";
 import { ActionsMenu } from "../table/actions/actionsMenu";
 import { useVisibleColumns } from "./hooks/useVisibleColumns";
 import { Menu } from "../menu/menu";
+import { isShowMoreRow } from "../commonHelpers/showMoreRow";
+import { ShowMoreCell } from "../commonHelpers/ShowMoreCell";
 const getIconFromColumnComponent = (column, entity, isNested) => {
     const renderIcon = "renderIcon" in column.columnComponent ? column.columnComponent.renderIcon : undefined;
     if (renderIcon) {
@@ -126,7 +128,7 @@ const FeedItemInner = ({ columnsList, feedWrappers, expanded, collapsedColumnsQt
         entity,
         onClick
     ]);
-    const nestedCells = useMemo(() => (entity.children && isRowExpanded ? entity.children : []).map(nestedEntity => renderCells(nestedEntity)), [entity.children, isRowExpanded, renderCells]);
+    const nestedCells = useMemo(() => (entity.children && isRowExpanded ? entity.children : []).map(nestedEntity => isShowMoreRow(nestedEntity) ? _jsx(ShowMoreCell, { row: nestedEntity }, nestedEntity.id) : renderCells(nestedEntity)), [entity.children, isRowExpanded, renderCells]);
     const cells = useMemo(() => renderCells(entity, nestedCells), [entity, nestedCells, renderCells]);
     return cells;
 };

package/esm/dataGrid/columns/checkboxColumn/checkboxCell.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactElement } from "react";
+import { FC, MouseEvent as ReactMouseEvent, PropsWithChildren, ReactElement } from "react";
 import { IZenIdComponentProps } from "../../../commonHelpers/zenComponent";
 import "./checkboxColumn.less";
 interface ICheckboxCellProps extends IZenIdComponentProps {
@@ -8,6 +8,7 @@ interface ICheckboxCellProps extends IZenIdComponentProps {
     disabled?: boolean;
     children?: ReactElement<typeof CheckboxCell.Content>;
     onChange?: (id: string, checked: boolean) => void;
+    onMouseDown?: (id: string, checked: boolean, e: ReactMouseEvent) => void;
 }
 interface ICheckboxCell extends FC<ICheckboxCellProps> {
     Content: FC<PropsWithChildren>;

package/esm/dataGrid/columns/checkboxColumn/checkboxCell.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox } from "../../../checkbox/checkbox";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
-export const CheckboxCell = ({ id, checked, indeterminate, label, disabled, className, onChange, children }) => (_jsxs("div", { className: classNames(["zen-checkbox-column", className || ""]), children: [_jsx(Checkbox, { className: "zen-checkbox-column__checkbox", checked: checked, indeterminate: indeterminate, disabled: disabled, title: label, onChange: e => onChange && onChange(id, e.target.checked), wrapped: true }), children] }));
+export const CheckboxCell = ({ id, checked, indeterminate, label, disabled, className, onChange, onMouseDown, children }) => (_jsxs("div", { className: classNames(["zen-checkbox-column", className || ""]), onMouseDown: onMouseDown ? e => onMouseDown(id, checked, e) : undefined, children: [_jsx(Checkbox, { className: "zen-checkbox-column__checkbox", checked: checked, indeterminate: indeterminate, disabled: disabled, title: label, onChange: e => onChange && onChange(id, e.target.checked), wrapped: true }), children] }));
 CheckboxCell.Content = function content({ children }) {
     return _jsx("div", { className: "zen-checkbox-column__content", children: children });
 };

package/esm/dataGrid/columns/checkboxColumn/checkboxColumnWrapper.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from "react";
+import { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from "react";
 import { IListColumnWrapper } from "../../listColumn";
 import "./checkboxColumn.less";
 import { SimpleEventHandler } from "../../../commonHelpers/simpleEventHandler";
@@ -17,7 +17,8 @@ export interface ICheckboxColumnWrapper<T extends object> extends IListColumnWra
     attach(event: "toggle", handler: (state: [Event, HTMLButtonElement]) => void): this;
     attach(event: "change", handler: (state: [string, boolean]) => void): this;
     attach(event: "change-all", handler: (state: [boolean]) => void): this;
-    detach(event: "change" | "toggle" | "change-all", handler?: (state: unknown) => void): this;
+    attach(event: "mousedown", handler: (state: [string, boolean, ReactMouseEvent]) => void): this;
+    detach(event: "change" | "toggle" | "change-all" | "mousedown", handler?: (state: unknown) => void): this;
 }
 export declare enum SelectionState {
     All = 0,
@@ -34,6 +35,7 @@ export declare class CheckboxColumnWrapper<T extends IEntityWithId> extends Simp
     private state;
     private readonly actionsClickHandler;
     private readonly changeHandler;
+    private readonly mouseDownHandler;
     private readonly changeHandlerAll;
     constructor(selections: Set<string>, options: ICheckboxColumnOptions<T>, menuTriggerRef: RefObject<HTMLButtonElement | null>);
     get selectionState(): SelectionState;

package/esm/dataGrid/columns/checkboxColumn/checkboxColumnWrapper.js

@@ -64,6 +64,15 @@ export class CheckboxColumnWrapper extends SimpleEventHandler {
                 this.fire("change", [id, checked]);
             }
         });
+        // Only fired for enabled checkboxes, so a disabled row can never become a drag anchor.
+        Object.defineProperty(this, "mouseDownHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (id, checked, e) => {
+                this.fire("mousedown", [id, checked, e]);
+            }
+        });
         Object.defineProperty(this, "changeHandlerAll", {
             enumerable: true,
             configurable: true,
@@ -89,7 +98,7 @@ export class CheckboxColumnWrapper extends SimpleEventHandler {
         }
         const allowed = this.condition(entity);
         const isDisable = this.disabled ? this.disabled(entity) : this.state === SelectionState.All;
-        const cell = (_jsx(CheckboxCell, { id: entity.id, className: allowed ? "" : "zen-checkbox-column--no-checkbox", checked: this.state === SelectionState.All || this.selections.has(entity.id), indeterminate: false, disabled: isDisable, label: this.options.createTitle(entity), onChange: this.changeHandler, children: _jsx(CheckboxCell.Content, { children: value }) }));
+        const cell = (_jsx(CheckboxCell, { id: entity.id, className: allowed ? "" : "zen-checkbox-column--no-checkbox", checked: this.state === SelectionState.All || this.selections.has(entity.id), indeterminate: false, disabled: isDisable, label: this.options.createTitle(entity), onChange: this.changeHandler, onMouseDown: isDisable ? undefined : this.mouseDownHandler, children: _jsx(CheckboxCell.Content, { children: value }) }));
         return cell;
     }
     renderHeader(title) {

package/esm/dataGrid/dataGrid.d.ts

@@ -11,7 +11,7 @@ export interface IDataGrid<T, N = T> extends Omit<IZenComponentProps, "children"
     description?: string;
     emptyCellTitle?: string;
     resetScroll?: boolean;
-    children?: ReturnType<typeof EmptyList> | ReturnType<typeof Footer>;
+    children?: ReturnType<typeof EmptyList> | ReturnType<typeof Footer> | ReturnType<typeof EndOfList>;
     rowClassName?: TRowClassName<T>;
     expandedRows?: string[];
     onExpandedChange?: (id: string, isExpanded: boolean) => void;
@@ -37,10 +37,14 @@ export declare const VERTICAL_SCROLL_MODIFIER = "zen-data-grid--vertical-scroll"
 export declare const MIN_CELL_WIDTH = 100;
 export declare const EmptyList: FC<PropsWithChildren>;
 export declare const Footer: FC<PropsWithChildren>;
+export declare const EndOfList: FC<PropsWithChildren<{
+    style?: React.CSSProperties;
+}>>;
 declare const DataGridInner: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, className, description, emptyCellTitle, children, rowClassName, expandedRows, onExpandedChange, active, onClick, onScrollEnd, isLoading }: IDataGrid<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export interface IDataGridStaticProps {
     EmptyList: typeof EmptyList;
     Footer: typeof Footer;
+    EndOfList: typeof EndOfList;
 }
 declare const DataGrid: (<T extends IRowEntity<N>, N extends IEntityWithId = T>(props: IDataGrid<T, N> & {
     ref?: React.ForwardedRef<HTMLElement>;

package/esm/dataGrid/dataGrid.js

@@ -1,6 +1,6 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Children, cloneElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { DataGridRow } from "./row/row";
 import { DataGridHeaderCell } from "./headerCell/headerCell";
@@ -68,6 +68,19 @@ export const Footer = ({
   className: "zen-data-grid__footer",
   children: children
 });
+// Rendered right after the last data row (desktop infinite scroll only) to indicate there is no
+// more data to load. See Table's `isEndOfList` (table.tsx). `style` is set by DataGridInner to the
+// table's actual rendered width (see `tableRef`/`tableObserverResult` below), so the row — and the
+// centered content inside it (see `lazyLoadingEnd.less`) — spans the full table width even when
+// columns overflow the visible viewport, rather than just the currently-scrolled-into-view portion.
+export const EndOfList = ({
+  children,
+  style
+}) => _jsx("div", {
+  className: "zen-data-grid__end-of-list",
+  style: style,
+  children: children
+});
 const FIRST_RENDERED_ROWS = 100;
 const SCROLL_END_THRESHOLD = 100;
 const DataGridInner = ({
@@ -97,6 +110,12 @@ const DataGridInner = ({
   const [verticalScrollApplied, setVerticalScrollApplied] = useState(false);
   // Refs
   const gridRef = useRef(null);
+  // Separate from `gridRef` (which is the outer *scrolling container*, used above for available
+  // column-allocation space). This tracks the `<table>` element itself, whose rendered width
+  // already reflects `max(sum of column widths, container width)` per its `min-width: 100%` CSS —
+  // i.e. it's wider than the container when columns overflow. Used to size the end-of-list row to
+  // the table's true full width instead of just the visible/scrolled-into-view portion.
+  const tableRef = useRef(null);
   const bodyRef = useRef(null);
   const lazyRenderTimerRef = useRef(0);
   const scrollEndFiredRef = useRef(false);
@@ -104,6 +123,7 @@ const DataGridInner = ({
   const rowsMap = useMemo(() => new Map(entities.map(entity => [entity.id, entity])), [entities]);
   const emptyList = useMemo(() => Children.toArray(children).find(child => child.type === EmptyList), [children]);
   const footer = useMemo(() => Children.toArray(children).find(child => child.type === Footer), [children]);
+  const endOfList = useMemo(() => Children.toArray(children).find(child => child.type === EndOfList), [children]);
   useImperativeHandle(ref, () => gridRef.current, []);
   const getVisibleRows = () => {
     if (!gridRef.current || !bodyRef.current) {
@@ -161,6 +181,14 @@ const DataGridInner = ({
   } = useResizeObserver({
     target: gridRef.current
   });
+  // Only observe the table's width when an `EndOfList` child is actually present — avoids a
+  // second ResizeObserver instance (and its resulting re-renders) on the vast majority of
+  // `DataGrid` usages that never render this row.
+  const {
+    result: tableObserverResult
+  } = useResizeObserver({
+    target: endOfList ? tableRef.current : null
+  });
   const allocatedSpace = listOfDefaultWidthColumns.reduce((acc, width, index) => acc + (width === undefined ? 0 : getColumnWidth(width, listOfMinWidthColumns[index])), 0);
   const unallocatedSpace = observerResult && observerResult.contentRect.width - allocatedSpace || 0;
   const flexibleColumnsQty = listOfDefaultWidthColumns.filter(width => width === undefined).length;
@@ -298,6 +326,7 @@ const DataGridInner = ({
         "aria-label": description,
         "aria-busy": !!isLoading,
         role: isTreeGrid ? "treegrid" : undefined,
+        ref: tableRef,
         children: [_jsx("thead", {
           className: "zen-data-grid__header",
           children: _jsx("tr", {
@@ -308,12 +337,19 @@ const DataGridInner = ({
           ref: bodyRef,
           children: body
         })]
-      }), emptyList && entities.length === 0 ? emptyList : null, footer]
+      }), endOfList ? cloneElement(endOfList, {
+        style: Object.assign(Object.assign({}, tableObserverResult ? {
+          width: tableObserverResult.contentRect.width
+        } : {}), observerResult ? {
+          "--zen-end-of-list-viewport-width": `${observerResult.contentRect.width}px`
+        } : {})
+      }) : null, emptyList && entities.length === 0 ? emptyList : null, footer]
     })
   });
 };
 const DataGrid = forwardRef(DataGridInner);
 DataGrid.EmptyList = EmptyList;
 DataGrid.Footer = Footer;
+DataGrid.EndOfList = EndOfList;
 export { DataGrid };
 export const TRANSLATIONS = ["Action"];

package/esm/dataGrid/lazyLoadingEnd/lazyLoadingEnd.d.ts

@@ -0,0 +1,3 @@
+import "./lazyLoadingEnd.less";
+export declare const LazyLoadingEnd: () => import("react/jsx-runtime").JSX.Element;
+export declare const TRANSLATIONS: string[];

package/esm/dataGrid/lazyLoadingEnd/lazyLoadingEnd.js

@@ -0,0 +1,45 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageNothingFound } from "../../images/imageNothingFound";
+import { useLanguage } from "../../utils/localization/useLanguage";
+// Shown as the last "row" of a desktop infinite-scroll table (Table's `onScrollEnd`) once all rows
+// have been loaded, i.e. `entities.length >= total` from the `Table.Pagination` child. See
+// `dataGrid.tsx`'s `EndOfList` slot and `table.tsx`'s `isEndOfList`.
+//
+// Two layers: the outer `zen-lazy-loading-end` is sized by `dataGrid.tsx` to the table's actual
+// rendered width (can be much wider than the viewport once columns overflow), so its background/
+// border span the full table at any scroll position. The inner `__sticky` wrapper is given an
+// explicit, narrower width (the scrollport's own width, via `dataGrid.tsx`'s
+// `--zen-end-of-list-viewport-width` CSS variable) and `position: sticky; inset-inline-start: 0`, so
+// it floats and tracks the *currently visible* horizontal scroll position — `position: sticky` alone
+// doesn't shrink a normal block box's width, so without the explicit width it would just render at
+// the outer layer's full table width and never visibly move. With it, the icon and text stay centered
+// on whatever part of the table you're actually looking at, rather than on the table's mathematical
+// midpoint (which could be scrolled far out of view). See lazyLoadingEnd.less.
+injectString("en", "No further results found", "No further results found");
+injectString("en", "We couldn't find any more data matching your current selection. Try broadening your search.", "We couldn't find any more data matching your current selection. Try broadening your search.");
+export const LazyLoadingEnd = () => {
+  const {
+    translate
+  } = useLanguage();
+  return _jsx("div", {
+    className: "zen-lazy-loading-end",
+    children: _jsxs("div", {
+      className: "zen-lazy-loading-end__sticky",
+      children: [_jsx(ImageNothingFound, {
+        className: "zen-lazy-loading-end__image",
+        focusable: false
+      }), _jsxs("div", {
+        className: "zen-lazy-loading-end__content",
+        children: [_jsx("div", {
+          className: "zen-lazy-loading-end__title",
+          children: translate("No further results found")
+        }), _jsx("div", {
+          className: "zen-lazy-loading-end__description",
+          children: translate("We couldn't find any more data matching your current selection. Try broadening your search.")
+        })]
+      })]
+    })
+  });
+};
+export const TRANSLATIONS = ["No further results found", "We couldn't find any more data matching your current selection. Try broadening your search."];

package/esm/dataGrid/row/row.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { memo, useCallback, useId, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { DataGridCell } from "../cell/cell";
+import { isShowMoreRow } from "../../commonHelpers/showMoreRow";
+import { ShowMoreCell } from "../../commonHelpers/ShowMoreCell";
 export const MIN_CELL_WIDTH = 100;
 const getColumnWidth = (defaultWidth, minWidth) => Math.floor(Math.max(defaultWidth, minWidth !== null && minWidth !== void 0 ? minWidth : MIN_CELL_WIDTH));
 const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive, active }) => {
@@ -57,7 +59,23 @@ const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow,
         return acc;
     }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange, isActive, active, onClick]);
     const cells = useMemo(() => renderCells(entity, false), [entity, renderCells]);
-    const nestedCells = useMemo(() => (expanded && entity.children ? entity.children : []).map(nestedEntity => renderCells(nestedEntity, true)), [entity.children, expanded, renderCells]);
-    return (_jsxs(_Fragment, { children: [_jsx("tr", { "data-row-id": id, id: mainRowId, role: "row", "aria-level": isTreeGrid ? 1 : undefined, "aria-posinset": isTreeGrid ? ariaPosinset : undefined, "aria-setsize": isTreeGrid ? ariaSetsize : undefined, "aria-expanded": isTreeGrid ? expanded : undefined, className: classNames(["zen-data-grid__row", className || "", isLastRow ? "zen-data-grid__row--last" : ""]), children: cells }, mainRowId), nestedCells.map((nestedRow, index) => (_jsx("tr", { id: `${mainRowId}_child_${index}`, role: "row", "aria-level": 2, "aria-posinset": index + 1, "aria-setsize": nestedCells.length, className: "zen-data-grid__row zen-data-grid__row--nested", children: nestedRow }, `${mainRowId}_child_${index}`)))] }));
+    const nestedRows = useMemo(() => {
+        const nestedEntities = expanded && entity.children ? entity.children : [];
+        return nestedEntities.map((nestedEntity, index) => {
+            const childKey = `${mainRowId}_child_${index}`;
+            const sharedProps = {
+                id: childKey,
+                role: "row",
+                "aria-level": 2,
+                "aria-posinset": index + 1,
+                "aria-setsize": nestedEntities.length
+            };
+            if (isShowMoreRow(nestedEntity)) {
+                return (_jsx("tr", Object.assign({}, sharedProps, { className: "zen-data-grid__row zen-data-grid__row--nested zen-data-grid__row--show-more", children: _jsx("td", { colSpan: columns.length, className: "zen-data-grid__row-cell zen-data-grid__row-cell--nested zen-data-grid__row-cell--show-more", children: _jsx(ShowMoreCell, { row: nestedEntity }) }) }), childKey));
+            }
+            return (_jsx("tr", Object.assign({ "data-row-id": nestedEntity.id }, sharedProps, { className: "zen-data-grid__row zen-data-grid__row--nested", children: renderCells(nestedEntity, true) }), childKey));
+        });
+    }, [entity.children, expanded, renderCells, columns.length, mainRowId]);
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { "data-row-id": id, id: mainRowId, role: "row", "aria-level": isTreeGrid ? 1 : undefined, "aria-posinset": isTreeGrid ? ariaPosinset : undefined, "aria-setsize": isTreeGrid ? ariaSetsize : undefined, "aria-expanded": isTreeGrid ? expanded : undefined, className: classNames(["zen-data-grid__row", className || "", isLastRow ? "zen-data-grid__row--last" : ""]), children: cells }, mainRowId), nestedRows] }));
 };
 export const DataGridRow = memo(Row);

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActions.d.ts

@@ -12,6 +12,8 @@ export interface IBulkActionsProps extends IZenComponentProps {
      * even when `selected` is 0 (i.e., cross-page "select all" is active).
      */
     allSelected?: boolean;
+    /** Show a selection label without a count when the selected total is unknown. */
+    selectionCountUnknown?: boolean;
     onClearSelection: () => void;
     onSelectAll?: () => void;
     gridType?: DeviceType;
@@ -23,7 +25,7 @@ export interface IBulkActions extends IBulkActionsProps {
     ActionButton: (props: IBulkActionButton) => ReactNode;
 }
 export declare const BulkActions: {
-    ({ selected, allSelected, className, onClearSelection, onSelectAll, gridType, children, turnOffSelectAll }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ selected, allSelected, selectionCountUnknown, className, onClearSelection, onSelectAll, gridType, children, turnOffSelectAll }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
     ActionLink: ({ title, icon, link, disabled, type, ref }: IBulkActionLink) => import("react/jsx-runtime").JSX.Element;
     ActionButton: ({ title, icon, clickHandler, onClick, disabled, type, ref }: IBulkActionButton) => import("react/jsx-runtime").JSX.Element;
     translations: string[];

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActions.js

@@ -13,6 +13,39 @@ import { useResizeObserver } from "../../../../commonHelpers/hooks/useResizeObse
 import { Menu } from "../../../../menu/menu";
 import { IconDotVertical } from "../../../../icons/iconDotVertical";
 import { Button } from "../../../../button/button";
+injectString("cs", "Selected", "Vybr\xE1no");
+injectString("da-DK", "Selected", "Valgt");
+injectString("de", "Selected", "Ausgew\xE4hlt");
+injectString("en", "Selected", "Selected");
+injectString("es", "Selected", "Seleccionado");
+injectString("fi-FI", "Selected", "Valittu");
+injectString("fr", "Selected", "S\xE9lectionn\xE9");
+injectString("fr-FR", "Selected", "S\xE9lectionn\xE9");
+injectString("hu-HU", "Selected", "Kiv\xE1lasztott");
+injectString("id", "Selected", "Dipilih");
+injectString("it", "Selected", "Selezionato");
+injectString("ja", "Selected", "\u9078\u629E\u8ECA\u4E21");
+injectString("ko-KR", "Selected", "\uC120\uD0DD\uB428");
+injectString("ms", "Selected", "Dipilih");
+injectString("nb-NO", "Selected", "Valgt");
+injectString("nl", "Selected", "Geselecteerd");
+injectString("pl", "Selected", "Wybrano");
+injectString("pt-BR", "Selected", "Selecionado");
+injectString("pt-PT", "Selected", "Selecionado");
+injectString("sk-SK", "Selected", "Vybran\xE9");
+injectString("sv", "Selected", "Valda");
+injectString("th", "Selected", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E25\u0E49\u0E27");
+injectString("tr", "Selected", "Se\xE7ildi");
+injectString("zh-Hans", "Selected", "\u9009\u4E2D\u7684");
+injectString("zh-TW", "Selected", "\u5DF2\u9078\u53D6");
+injectString("ro-RO", "Selected", "Selec\u021Bie");
+injectString("ar-001", "Selected", "\u0627\u0644\u0645\u062D\u062F\u062F");
+injectString("lt-LT", "Selected", "Pasirinkta");
+injectString("lv-LV", "Selected", "Atlas\u012Bts");
+injectString("ka-GE", "Selected", "\u10D0\u10E0\u10E9\u10D4\u10E3\u10DA\u10D8");
+injectString("el-GR", "Selected", "\u0395\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03B1");
+injectString("et-EE", "Selected", "Valitud");
+injectString("bg-BG", "Selected", "\u0418\u0437\u0431\u0440\u0430\u043D\u0438");
 injectString("cs", "{1} selected", "{1} vybran\xFD/vybran\xE9");
 injectString("da-DK", "{1} selected", "{1} valgt");
 injectString("de", "{1} selected", "{1} ausgew\xE4hlt");
@@ -181,6 +214,7 @@ injectString("bg-BG", "More", "\u041F\u043E\u0432\u0435\u0447\u0435");
 export const BulkActions = ({
   selected,
   allSelected,
+  selectionCountUnknown,
   className,
   onClearSelection,
   onSelectAll,
@@ -214,7 +248,8 @@ export const BulkActions = ({
     widthDelta
   });
   const isMobile = gridType === DeviceType.Mobile;
-  const text = translate("{1} selected").replace("{1}", allSelected ? translate("All") : selected.toFixed());
+  const hasSelection = selected > 0 || allSelected || selectionCountUnknown;
+  const text = selectionCountUnknown ? translate("Selected") : translate("{1} selected").replace("{1}", allSelected ? translate("All") : selected.toFixed());
   return _jsxs("div", {
     className: classNames(["zen-bulk-actions", className || "", isMobile ? "zen-bulk-actions--condensed" : ""]),
     ref: bulkActionsElement,
@@ -240,7 +275,7 @@ export const BulkActions = ({
       className: "zen-bulk-actions__action-button-holder",
       ref: buttonHolder,
       children: [Children.map(visibleElements, element => cloneElement(element, {
-        disabled: selected > 0 || allSelected ? element.props.disabled : true
+        disabled: hasSelection ? element.props.disabled : true
       })), nonFittingElements.length > 0 ? _jsx(Menu, {
         title: translate("More"),
         trigger: _jsx(TextIconButton, {
@@ -261,7 +296,7 @@ export const BulkActions = ({
             id: props.id || "",
             name: props.title,
             icon: props.icon,
-            disabled: props.disabled,
+            disabled: hasSelection ? props.disabled : true,
             onClick: clickHandler,
             link: link
           }, props.id);
@@ -276,4 +311,4 @@ export const BulkActions = ({
 };
 BulkActions.ActionLink = BulkActionLink;
 BulkActions.ActionButton = BulkActionButton;
-BulkActions.translations = ["Clear selection", "More options", "{1} selected", "Selecting..."];
+BulkActions.translations = ["Clear selection", "More options", "{1} selected", "Selecting...", "Selected"];