@geotab/zenith 3.14.1 → 3.15.0-beta.0

package/esm/table/loading/useLoading.d.ts

@@ -19,22 +19,22 @@ export declare const useLoading: <T extends IRowEntity<N>, N extends IEntityWith
         meta: {
             renderPlaceholder: () => import("react/jsx-runtime").JSX.Element;
             renderFeedPlaceholder: (_: ReactNode) => [ReactNode, ReactNode];
-            defaultWidth?: number | undefined;
-            multilineHeader?: boolean | undefined;
-            initialSortDirection?: import("../table").ColumnSortDirection | undefined;
+            defaultWidth?: number;
+            multilineHeader?: boolean;
+            initialSortDirection?: import("../table").ColumnSortDirection;
         };
         columnComponent: IListColumnBasic<T & ILoadingEntity<N>, N & ILoading>;
         id: string;
         title: string;
-        defaultValue?: string | undefined;
-        visibleOnHover?: boolean | undefined;
+        defaultValue?: string;
+        visibleOnHover?: boolean;
         wrappers?: import("../table").IListColumnWrapper<T, N>[] | undefined;
-        sortable?: boolean | undefined;
-        draggable?: boolean | undefined;
-        alwaysVisible?: boolean | undefined;
+        sortable?: boolean;
+        draggable?: boolean;
+        alwaysVisible?: boolean;
         colspan?: number | ((entity: T | N) => number | undefined) | undefined;
-        group?: string | undefined;
-        visible?: boolean | undefined;
+        group?: string;
+        visible?: boolean;
     }[];
     loadingEntities: T[];
 };

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

@@ -1,5 +1,5 @@
 import { IEntityWithId } from "../../commonHelpers/entity";
-export declare const NestedData: <TParent extends IEntityWithId, TChild extends IEntityWithId>({ entities, children, expandedRows, useChildrenDataHook, maxHooks }: {
+declare const NestedDataInt: <TParent extends IEntityWithId, TChild extends IEntityWithId>({ entities, children, expandedRows, useChildrenDataHook, maxHooks }: {
     entities: TParent[];
     expandedRows: string[];
     useChildrenDataHook: (parentId: string, enabled: boolean) => {
@@ -11,3 +11,5 @@ export declare const NestedData: <TParent extends IEntityWithId, TChild extends
     children: React.ReactNode;
     maxHooks?: number;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const NestedData: typeof NestedDataInt;
+export {};

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

@@ -11,8 +11,8 @@ export declare const useNestedRows: <T extends IRowEntity<N>, N extends IEntityW
         title: string;
         meta?: import("../../dataGrid/listColumn").IListColumnMeta<T, N> | undefined;
         columnComponent?: import("../../dataGrid/listColumn").IColumnComponent<T, N> | undefined;
-        wrappers?: import("../../dataGrid/listColumn").IListColumnWrapper<T, N>[] | undefined;
-        alwaysVisible?: boolean | undefined;
+        wrappers?: import("../table").IListColumnWrapper<T, N>[] | undefined;
+        alwaysVisible?: boolean;
         colspan?: number | ((entity: T | N) => number | undefined) | undefined;
     }[];
     nestedFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];

package/esm/table/selectable/selectableHeader.d.ts

@@ -13,7 +13,8 @@ interface ISelectableHeader extends IZenComponentProps {
     checkboxInHeader?: boolean;
     header?: boolean;
     turnOffSelectAll?: boolean;
+    turnOffSelectCurrentPage?: boolean;
 }
-export declare const SelectableHeader: ({ label, title, checked, indeterminate, disabled, onChange, calculateSelectionState, onSelect, checkboxInHeader, header, turnOffSelectAll }: ISelectableHeader) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectableHeader: ({ label, title, checked, indeterminate, disabled, onChange, calculateSelectionState, onSelect, checkboxInHeader, header, turnOffSelectAll, turnOffSelectCurrentPage }: ISelectableHeader) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/esm/table/selectable/selectableHeader.js

@@ -199,16 +199,17 @@ export const SelectableHeader = ({
   onSelect,
   checkboxInHeader,
   header,
-  turnOffSelectAll
+  turnOffSelectAll,
+  turnOffSelectCurrentPage
 }) => {
   const {
     translate
   } = useLanguage();
-  const listItems = useMemo(() => getSelectionOptions(translate).filter(option => !turnOffSelectAll || option.value !== SelectionState.All).map(option => ({
+  const listItems = useMemo(() => getSelectionOptions(translate).filter(option => !turnOffSelectAll || option.value !== SelectionState.All).filter(option => !turnOffSelectCurrentPage || option.value !== SelectionState.CurrentPage).map(option => ({
     id: option.id,
     name: option.label,
     onClick: () => onSelect && onSelect(option.id)
-  })).filter(option => option.id !== calculateSelectionState()), [calculateSelectionState, onSelect, translate, turnOffSelectAll]);
+  })).filter(option => option.id !== calculateSelectionState()), [calculateSelectionState, onSelect, translate, turnOffSelectAll, turnOffSelectCurrentPage]);
   const actionsMenu = useMemo(() => _jsx(Menu, {
     title: translate("Select menu"),
     className: "zen-selectable-column__menu",

package/esm/table/selectable/useSelectableRows.d.ts

@@ -33,7 +33,7 @@ export declare const getEmptySelection: () => {
     selected: string[];
 };
 export declare const SelectableWrapperName = "Selectable";
-export declare const useSelectableRows: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], entities: T[], isMobile: boolean, selectMode: boolean, setSelectMode: (value: boolean) => void, selectable?: ISelectableRowsOptions<T, N>) => {
+export declare const useSelectableRows: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], entities: T[], isMobile: boolean, selectMode: boolean, setSelectMode: (value: boolean) => void, selectable?: ISelectableRowsOptions<T, N>, isInfinite?: boolean) => {
     selectableColumns: IListColumn<T, N>[];
     selectableFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];
 };

package/esm/table/selectable/useSelectableRows.js

@@ -81,7 +81,9 @@ export const getEmptySelection = () => ({
   selected: []
 });
 export const SelectableWrapperName = "Selectable";
-export const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable) => {
+// Infinite scroll has no pages, so the header checkbox always means "select all" (never current page).
+const resolveCheckboxEmitsCurrentPage = (isInfinite, checkboxSelectsCurrentPage, turnOffSelectAll) => isInfinite ? false : checkboxSelectsCurrentPage !== null && checkboxSelectsCurrentPage !== void 0 ? checkboxSelectsCurrentPage : turnOffSelectAll;
+export const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable, isInfinite = false) => {
   var _a;
   const {
     translate
@@ -197,7 +199,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
   const selectableCheckboxInHeader = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxInHeader;
   const selectableSelectionLimit = selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit;
   const selectableHeader = selectable === null || selectable === void 0 ? void 0 : selectable.header;
-  const checkboxEmitsCurrentPage = selectableCheckboxSelectsCurrentPage !== null && selectableCheckboxSelectsCurrentPage !== void 0 ? selectableCheckboxSelectsCurrentPage : selectableTurnOffSelectAll;
+  const checkboxEmitsCurrentPage = resolveCheckboxEmitsCurrentPage(isInfinite, selectableCheckboxSelectsCurrentPage, selectableTurnOffSelectAll);
   const checkboxInHeaderValue = selectableCheckboxInHeader !== undefined ? selectableCheckboxInHeader : selectableSelectionLimit !== undefined ? false : undefined;
   const wrapper = useMemo(() => {
     if (!hasSelectable) {
@@ -268,12 +270,13 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
             setState(newState);
             onChangeSelectionState(newState);
           },
-          turnOffSelectAll: selectableTurnOffSelectAll
+          turnOffSelectAll: selectableTurnOffSelectAll,
+          turnOffSelectCurrentPage: isInfinite
         });
         return cell;
       }
     };
-  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, isInfinite, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
   const selectableFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!entity) {

package/esm/table/table.d.ts

@@ -54,6 +54,11 @@ export interface IFeedExpandable {
 export interface ITable<T extends IRowEntity<N>, N extends IEntityWithId = T> extends IZenComponentProps, IZenGridItem {
     entities: T[];
     columns: IListColumn<T, N>[];
+    /**
+     * Renders skeleton placeholder rows while data is being fetched. In infinite-scroll mode
+     * (see `onScrollEnd`) this also drives the `aria-busy` state and the screen-reader
+     * "Loading more rows" / "{count} more rows loaded" announcements.
+     */
     isLoading?: boolean;
     selectable?: ISelectableRowsOptions<T, N>;
     sortable?: ISortableOptions;
@@ -62,6 +67,15 @@ export interface ITable<T extends IRowEntity<N>, N extends IEntityWithId = T> ex
     children?: ReturnType<typeof TableBulkActions> | ReturnType<typeof TablePagination> | ReturnType<typeof TableFullscreen> | ReturnType<typeof TableEmpty> | ReturnType<typeof TableFooter>;
     height?: string;
     onFeedEnd?: () => void;
+    /**
+     * Called when the user scrolls within ~100 px of the grid bottom (once per approach to the bottom).
+     * Also fires after each `entities` change while the grid is already near the bottom — this drives
+     * viewport-fill on initial load and greedy load-ahead on appends, so it can fire without new scroll
+     * input. The caller is responsible for preventing concurrent fetches (e.g. ignore it while `isLoading`).
+     * Wiring this prop enables desktop infinite scroll: pagination is hidden and "Select current page"
+     * becomes "Select all". Takes precedence over `onFeedEnd` when both are provided.
+     */
+    onScrollEnd?: () => void;
     rowClassName?: TRowClassName<T>;
     feedExpandable?: IFeedExpandable;
     expandedRows?: string[];
@@ -79,5 +93,6 @@ interface ITableComponents {
     BulkLink: React.FC<IBulkActionLink>;
     DetailPanel: React.FC<ITableDetailPanel>;
 }
-declare const Table: (<T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, selectable, sortable, flexible, isLoading, loading, children, className, height, onFeedEnd, rowClassName, feedExpandable, expandedRows, onExpand, active, onClick }: ITable<T, N>) => import("react/jsx-runtime").JSX.Element) & ITableComponents;
+declare const TableInner: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, selectable, sortable, flexible, isLoading, loading, children, className, height, onFeedEnd, onScrollEnd, rowClassName, feedExpandable, expandedRows, onExpand, active, onClick }: ITable<T, N>) => import("react/jsx-runtime").JSX.Element;
+declare const Table: typeof TableInner & ITableComponents;
 export { type IListColumnWrapper, Table, getEmptySelection, ColumnSortDirection, getSortableValue, ActionsColumn, MainColumn, CheckboxColumn, ActionLinkColumn };

package/esm/table/table.js

@@ -1,6 +1,6 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DataFeed } from "../dataFeed/dataFeed";
 import { DataGrid as DataGridInternal } from "../dataGrid/dataGrid";
 import { useSelectableRows } from "./selectable/useSelectableRows";
@@ -38,6 +38,62 @@ import { getGridClasses } from "../gridLayout/utils/getGridClasses";
 import { useNestedRows } from "./nested/useNestedRows";
 import { TableDetailPanel } from "./children/tableDetailPanel";
 import { useLanguage } from "../utils/localization/useLanguage";
+// Interpolation placeholder used in the "{count} more rows loaded" translation key.
+// `translate()` has no interpolation overload, so the count is substituted at runtime via
+// `.replace()`. The translation KEY must stay a string literal (the build-time translation
+// injector statically extracts literal keys — see build-utils/translations/translation-injector.js),
+// so this constant is only the replacement token, keeping the `.replace()` call from hard-coding it.
+injectString("da-DK", "Loading more rows", "Indl\xE6ser flere r\xE6kker");
+injectString("en", "Loading more rows", "Loading more rows");
+injectString("fi-FI", "Loading more rows", "Ladataan lis\xE4\xE4 rivej\xE4");
+injectString("hu-HU", "Loading more rows", "Tov\xE1bbi sorok bet\xF6lt\xE9se");
+injectString("ms", "Loading more rows", "Memuatkan lebih banyak baris");
+injectString("nb-NO", "Loading more rows", "Laster inn flere rader");
+injectString("nl", "Loading more rows", "Meer rijen laden");
+injectString("pt-BR", "Loading more rows", "Carregando mais linhas");
+injectString("sk-SK", "Loading more rows", "Na\u010D\xEDtavanie \u010Fal\u0161\xEDch riadkov");
+injectString("sv", "Loading more rows", "Laddar fler rader");
+injectString("ar", "Loading more rows", "\u062C\u0627\u0631\u064D \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u0632\u064A\u062F \u0645\u0646 \u0627\u0644\u0635\u0641\u0648\u0641");
+injectString("lt-LT", "Loading more rows", "\u012Ekeliama daugiau eilu\u010Di\u0173");
+injectString("lv-LV", "Loading more rows", "Iel\u0101d\u0113 vair\u0101k rindu");
+injectString("ka-GE", "Loading more rows", "\u10DB\u10D4\u10E2\u10D8 \u10E1\u10E2\u10E0\u10D8\u10E5\u10DD\u10DC\u10D8\u10E1 \u10E9\u10D0\u10E2\u10D5\u10D8\u10E0\u10D7\u10D5\u10D0");
+injectString("el-GR", "Loading more rows", "\u03A6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7 \u03C0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03C9\u03BD \u03B3\u03C1\u03B1\u03BC\u03BC\u03CE\u03BD");
+injectString("et-EE", "Loading more rows", "Laen rohkem ridu");
+injectString("bg-BG", "Loading more rows", "\u0417\u0430\u0440\u0435\u0436\u0434\u0430\u043D\u0435 \u043D\u0430 \u043E\u0449\u0435 \u0440\u0435\u0434\u043E\u0432\u0435");
+injectString("da-DK", "1 more row loaded", "1 ekstra r\xE6kke indl\xE6st");
+injectString("en", "1 more row loaded", "1 more row loaded");
+injectString("fi-FI", "1 more row loaded", "1 rivi lis\xE4\xE4 ladattu");
+injectString("hu-HU", "1 more row loaded", "1 tov\xE1bbi sor bet\xF6ltve");
+injectString("ms", "1 more row loaded", "1 baris lagi dimuatkan");
+injectString("nb-NO", "1 more row loaded", "1 ekstra rad lastet inn");
+injectString("nl", "1 more row loaded", "1 extra rij geladen");
+injectString("pt-BR", "1 more row loaded", "1 linha adicional carregada");
+injectString("sk-SK", "1 more row loaded", "1 \u010Fal\u0161\xED riadok na\u010D\xEDtan\xFD");
+injectString("sv", "1 more row loaded", "1 ytterligare rad laddad");
+injectString("ar", "1 more row loaded", "\u062A\u0645 \u062A\u062D\u0645\u064A\u0644 \u0635\u0641 \u0648\u0627\u062D\u062F \u0625\u0636\u0627\u0641\u064A");
+injectString("lt-LT", "1 more row loaded", "\u012Ekelta dar 1 eilut\u0117");
+injectString("lv-LV", "1 more row loaded", "Iel\u0101d\u0113ta v\u0113l 1 rinda");
+injectString("ka-GE", "1 more row loaded", "\u10E9\u10D0\u10D8\u10E2\u10D5\u10D8\u10E0\u10D7\u10D0 \u10D9\u10D8\u10D3\u10D4\u10D5 1 \u10E1\u10E2\u10E0\u10D8\u10E5\u10DD\u10DC\u10D8");
+injectString("el-GR", "1 more row loaded", "\u03A6\u03BF\u03C1\u03C4\u03CE\u03B8\u03B7\u03BA\u03B5 1 \u03B1\u03BA\u03CC\u03BC\u03B7 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AE");
+injectString("et-EE", "1 more row loaded", "1 rida juurde laaditud");
+injectString("bg-BG", "1 more row loaded", "\u0417\u0430\u0440\u0435\u0434\u0435\u043D \u0435 1 \u043D\u043E\u0432 \u0440\u0435\u0434");
+injectString("da-DK", "{count} more rows loaded", "{count} ekstra r\xE6kker indl\xE6st");
+injectString("en", "{count} more rows loaded", "{count} more rows loaded");
+injectString("fi-FI", "{count} more rows loaded", "{count} rivi\xE4 lis\xE4\xE4 ladattu");
+injectString("hu-HU", "{count} more rows loaded", "{count} tov\xE1bbi sor bet\xF6ltve");
+injectString("ms", "{count} more rows loaded", "{count} baris lagi dimuatkan");
+injectString("nb-NO", "{count} more rows loaded", "{count} ekstra rader lastet inn");
+injectString("nl", "{count} more rows loaded", "{count} extra rijen geladen");
+injectString("pt-BR", "{count} more rows loaded", "{count} linhas adicionais carregadas");
+injectString("sk-SK", "{count} more rows loaded", "{count} \u010Fal\u0161\xEDch riadkov na\u010D\xEDtan\xFDch");
+injectString("sv", "{count} more rows loaded", "{count} ytterligare rader laddade");
+injectString("ar", "{count} more rows loaded", "\u062A\u0645 \u062A\u062D\u0645\u064A\u0644 {count} \u0635\u0641\u0648\u0641 \u0625\u0636\u0627\u0641\u064A\u0629");
+injectString("lt-LT", "{count} more rows loaded", "\u012Ekeltos dar {count} eilut\u0117s");
+injectString("lv-LV", "{count} more rows loaded", "Iel\u0101d\u0113tas v\u0113l {count} rindas");
+injectString("ka-GE", "{count} more rows loaded", "\u10E9\u10D0\u10D8\u10E2\u10D5\u10D8\u10E0\u10D7\u10D0 \u10D9\u10D8\u10D3\u10D4\u10D5 {count} \u10E1\u10E2\u10E0\u10D8\u10E5\u10DD\u10DC\u10D8");
+injectString("el-GR", "{count} more rows loaded", "\u03A6\u03BF\u03C1\u03C4\u03CE\u03B8\u03B7\u03BA\u03B1\u03BD {count} \u03B1\u03BA\u03CC\u03BC\u03B7 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AD\u03C2");
+injectString("et-EE", "{count} more rows loaded", "{count} rida juurde laaditud");
+injectString("bg-BG", "{count} more rows loaded", "\u0417\u0430\u0440\u0435\u0434\u0435\u043D\u0438 \u0441\u0430 {count} \u043D\u043E\u0432\u0438 \u0440\u0435\u0434\u0430");
 injectString("cs", "Selection panel", "Selection panel");
 injectString("da-DK", "Selection panel", "Valgpanel");
 injectString("de", "Selection panel", "Selection panel");
@@ -104,6 +160,7 @@ injectString("ka-GE", "Bulk select", "\u10DB\u10D0\u10E1\u10D8\u10E3\u10E0\u10D8
 injectString("el-GR", "Bulk select", "\u039C\u03B1\u03B6\u03B9\u03BA\u03AE \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE");
 injectString("et-EE", "Bulk select", "Massvalimine");
 injectString("bg-BG", "Bulk select", "\u041C\u0430\u0441\u043E\u0432 \u0438\u0437\u0431\u043E\u0440");
+const ROW_COUNT_TOKEN = "{count}";
 const TableInner = ({
   entities,
   columns,
@@ -116,6 +173,7 @@ const TableInner = ({
   className,
   height,
   onFeedEnd,
+  onScrollEnd,
   rowClassName,
   feedExpandable,
   expandedRows,
@@ -140,6 +198,34 @@ const TableInner = ({
     }
     setSelectMode(value);
   }, [isMobile, setSelectMode]);
+  const feedEndCallback = onScrollEnd !== null && onScrollEnd !== void 0 ? onScrollEnd : onFeedEnd;
+  // Desktop infinite scroll is active when onScrollEnd is wired. In that mode there are no pages:
+  // pagination is hidden and "Select current page" is suppressed (the checkbox selects all instead).
+  const isInfinite = !!onScrollEnd;
+  // Announce loading/loaded state to screen readers (the skeleton rows are not perceivable to them).
+  // Scoped to infinite scroll only: paged tables also pass `isLoading` for initial-fetch skeletons,
+  // and "Loading more rows" / "N more rows loaded" are semantically wrong outside infinite scroll.
+  const [liveMessage, setLiveMessage] = useState("");
+  const prevEntitiesCountRef = useRef(entities.length);
+  useEffect(() => {
+    if (!isInfinite) {
+      return;
+    }
+    if (isLoading) {
+      setLiveMessage(translate("Loading more rows"));
+    } else if (entities.length > prevEntitiesCountRef.current) {
+      // Announce the delta (newly appended rows), not the running total — hearing
+      // "500 rows loaded" on a later page is confusing when only a page just arrived.
+      // Separate singular key because `translate()` has no plural support, so a raw
+      // "1 more rows loaded" would be ungrammatical for screen-reader users.
+      const appendedCount = entities.length - prevEntitiesCountRef.current;
+      const message = appendedCount === 1 ? translate("1 more row loaded") : translate("{count} more rows loaded").replace(ROW_COUNT_TOKEN, String(appendedCount));
+      setLiveMessage(message);
+    } else {
+      setLiveMessage("");
+    }
+    prevEntitiesCountRef.current = entities.length;
+  }, [isInfinite, isLoading, entities.length, translate]);
   const {
     expanded,
     onExpandedChange,
@@ -149,7 +235,7 @@ const TableInner = ({
   const {
     selectableColumns,
     selectableFeedWrapper
-  } = useSelectableRows(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable);
+  } = useSelectableRows(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable, isInfinite);
   const {
     sortableColumns,
     feedSortControl
@@ -213,7 +299,9 @@ const TableInner = ({
   const handleOnHidePanel = useCallback(() => setSelectMode(false), []);
   const handleOnTriggerClick = useCallback(() => setSelectMode(prev => !prev), []);
   const hasPostActions = useMemo(() => columnsPopup || isMobile && selectable || !isMobile && fullscreenButton || isFeedVisible, [columnsPopup, fullscreenButton, isFeedVisible, isMobile, selectable]);
-  const hasToolbar = useMemo(() => bulkActions || feedSortControl || pagination && !isMobile || other.length || columnsPopup || !isMobile && fullscreenButton || isFeedVisible, [bulkActions, columnsPopup, feedSortControl, fullscreenButton, isFeedVisible, isMobile, other.length, pagination]);
+  // Pagination is desktop-only and is hidden in infinite-scroll mode (no pages).
+  const showPagination = !!pagination && !isMobile && !isInfinite;
+  const hasToolbar = useMemo(() => bulkActions || feedSortControl || showPagination || other.length || columnsPopup || !isMobile && fullscreenButton || isFeedVisible, [bulkActions, columnsPopup, feedSortControl, fullscreenButton, isFeedVisible, isMobile, other.length, showPagination]);
   const gridAutoHeight = useMemo(() => contentHeight ? `${contentHeight}px` : undefined, [contentHeight]);
   const minHeight = "400px";
   const gridHeight = useMemo(() => height || gridAutoHeight || minHeight, [gridAutoHeight, height]);
@@ -233,10 +321,10 @@ const TableInner = ({
         gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop,
         children: [_jsxs(EntitiesListActions.Actions, {
           children: [!isMobile && bulkActions && selectionQty > 0 ? bulkActions : null, feedSortControl]
-        }), pagination || other.length > 0 ? _jsxs(EntitiesListActions.Pagination, {
+        }), showPagination || other.length > 0 ? _jsxs(EntitiesListActions.Pagination, {
           children: [_jsx(EntitiesListActions.CustomElements, {
             children: other
-          }), !isMobile ? pagination : null]
+          }), showPagination ? pagination : null]
         }) : null, hasPostActions ? _jsxs(EntitiesListActions.PostActions, {
           children: [columnsPopup ? _jsxs(_Fragment, {
             children: [_jsx(ColumnsListButton, {
@@ -254,6 +342,11 @@ const TableInner = ({
             children: bulkActions
           }) : null, !isMobile ? fullscreenButton : null]
         }) : null]
+      }) : null, isInfinite ? _jsx("div", {
+        className: "zen-visually-hidden",
+        role: "status",
+        "aria-live": "polite",
+        children: liveMessage
       }) : null, _jsxs("div", {
         className: "zen-table__content",
         children: [_jsx("div", {
@@ -267,7 +360,7 @@ const TableInner = ({
             entities: loadingEntities,
             expanded: isFeedExpanded,
             options: {
-              onFeedEnd: onFeedEnd,
+              onFeedEnd: feedEndCallback,
               visibleColumns
             },
             actions: actions,
@@ -280,6 +373,7 @@ const TableInner = ({
             activePage: activePage,
             active: activeIdForRow,
             onClick: onClickForRow,
+            isLoading: isLoading,
             children: [emptyList || _jsx(_Fragment, {}), footer || _jsx(_Fragment, {})]
           }) : _jsxs(DataGridInternal, {
             columns: loadingColumns,
@@ -290,6 +384,8 @@ const TableInner = ({
             onExpandedChange: onExpandedChange,
             active: activeIdForRow,
             onClick: onClickForRow,
+            onScrollEnd: onScrollEnd,
+            isLoading: isLoading,
             children: [emptyList || _jsx(_Fragment, {}), footer || _jsx(_Fragment, {})]
           })
         }), detailPanel !== null && detailPanel !== void 0 ? detailPanel : null]

package/esm/tag/tag.d.ts

@@ -0,0 +1,19 @@
+import "./tag.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export type TTagColor = "red" | "yellow" | "green" | "blue" | "grey";
+export interface ITag extends IZenComponentProps {
+    /** Status dot color, mapped to the categorical data tokens (`--data--categorical-*`). */
+    color: TTagColor;
+    /** Label text displayed next to the dot. */
+    children: string;
+}
+/**
+ * A small status indicator: a categorical color dot followed by a label.
+ *
+ * Presentational and grid-agnostic — use it standalone, inside a table cell
+ * (via a column's inline `render`), a detail panel, or a mobile card.
+ */
+export declare const Tag: {
+    ({ color, className, children }: ITag): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/tag/tag.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+/**
+ * A small status indicator: a categorical color dot followed by a label.
+ *
+ * Presentational and grid-agnostic — use it standalone, inside a table cell
+ * (via a column's inline `render`), a detail panel, or a mobile card.
+ */
+export const Tag = ({ color, className, children }) => (_jsxs("span", { className: classNames(["zen-tag", className !== null && className !== void 0 ? className : ""]), children: [_jsx("span", { className: classNames(["zen-tag__dot", `zen-tag__dot--${color}`]), "aria-hidden": "true" }), _jsx("span", { className: "zen-tag__label", children: children })] }));
+Tag.displayName = "Tag";

package/esm/testHelpers/geotab-axe/index.d.ts

@@ -1,2 +1 @@
-/// <reference path="../../../testHelpers/geotab-axe/index.d.ts" />
 export {};

package/esm/toastRaw/toastRaw.d.ts

@@ -4,7 +4,7 @@ import { ReactNode, RefObject } from "react";
 import { TAnimationType } from "../feedbackContainer/types";
 import { IIcon } from "../icons/icon";
 import { TButtonIconPosition } from "../textIconButton/textIconButton";
-export type TToastType = "info" | "success";
+export type TToastType = "info" | "success" | "error";
 export interface IAction {
     text: string;
     onClick?: () => void;

package/esm/toastRaw/toastRaw.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ToastAnimation } from "./components/toastAnimation";
 import { IconCheckRadio } from "../icons/iconCheckRadio";
 import { IconInfoCircle } from "../icons/iconInfoCircle";
+import { IconWarning } from "../icons/iconWarning";
 import { createElement, useCallback, useContext, useMemo } from "react";
 import { useDrive } from "../utils/theme/useDrive";
 import { Button } from "../button/button";
@@ -48,7 +49,8 @@ injectString("et-EE", "Close", "Sulge");
 injectString("bg-BG", "Close", "\u0417\u0430\u0442\u0432\u0430\u0440\u044F\u043D\u0435");
 const typedIcons = {
   success: IconCheckRadio,
-  info: IconInfoCircle
+  info: IconInfoCircle,
+  error: IconWarning
 };
 const getIcon = t => typedIcons[t];
 export const TOAST_CLASSNAME = "zen-toast";

package/esm/toggleButtonRaw/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Exclusive } from "../commonHelpers/types/exclusive";
 import { IZenComponentProps, IReactFormItemController } from "../commonHelpers/zenComponent";
 interface IToggleButtonBaseRaw extends IZenComponentProps {

package/esm/tooltipInfo/tooltipInfo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./tooltipInfo.less";
 export interface ITooltipInfo {
     value?: React.ReactNode;