@geotab/zenith 3.14.1 → 3.15.0-beta.0

package/dist/table/table.js

@@ -28,6 +28,57 @@ const tableBulkActions_1 = require("./children/tableBulkActions");
 const tablePagination_1 = require("./children/tablePagination");
 const tableEmpty_1 = require("./children/tableEmpty");
 const tableFooter_1 = require("./children/tableFooter");
+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");
@@ -154,6 +205,12 @@ const getGridClasses_1 = require("../gridLayout/utils/getGridClasses");
 const useNestedRows_1 = require("./nested/useNestedRows");
 const tableDetailPanel_1 = require("./children/tableDetailPanel");
 const useLanguage_1 = require("../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.
+const ROW_COUNT_TOKEN = "{count}";
 const TableInner = ({
   entities,
   columns,
@@ -166,6 +223,7 @@ const TableInner = ({
   className,
   height,
   onFeedEnd,
+  onScrollEnd,
   rowClassName,
   feedExpandable,
   expandedRows,
@@ -190,6 +248,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] = (0, react_1.useState)("");
+  const prevEntitiesCountRef = (0, react_1.useRef)(entities.length);
+  (0, react_1.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,
@@ -199,7 +285,7 @@ const TableInner = ({
   const {
     selectableColumns,
     selectableFeedWrapper
-  } = (0, useSelectableRows_1.useSelectableRows)(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable);
+  } = (0, useSelectableRows_1.useSelectableRows)(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable, isInfinite);
   const {
     sortableColumns,
     feedSortControl
@@ -263,7 +349,9 @@ const TableInner = ({
   const handleOnHidePanel = (0, react_1.useCallback)(() => setSelectMode(false), []);
   const handleOnTriggerClick = (0, react_1.useCallback)(() => setSelectMode(prev => !prev), []);
   const hasPostActions = (0, react_1.useMemo)(() => columnsPopup || isMobile && selectable || !isMobile && fullscreenButton || isFeedVisible, [columnsPopup, fullscreenButton, isFeedVisible, isMobile, selectable]);
-  const hasToolbar = (0, react_1.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 = (0, react_1.useMemo)(() => bulkActions || feedSortControl || showPagination || other.length || columnsPopup || !isMobile && fullscreenButton || isFeedVisible, [bulkActions, columnsPopup, feedSortControl, fullscreenButton, isFeedVisible, isMobile, other.length, showPagination]);
   const gridAutoHeight = (0, react_1.useMemo)(() => contentHeight ? `${contentHeight}px` : undefined, [contentHeight]);
   const minHeight = "400px";
   const gridHeight = (0, react_1.useMemo)(() => height || gridAutoHeight || minHeight, [gridAutoHeight, height]);
@@ -283,10 +371,10 @@ const TableInner = ({
         gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop,
         children: [(0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.Actions, {
           children: [!isMobile && bulkActions && selectionQty > 0 ? bulkActions : null, feedSortControl]
-        }), pagination || other.length > 0 ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.Pagination, {
+        }), showPagination || other.length > 0 ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.Pagination, {
           children: [(0, jsx_runtime_1.jsx)(entitiesListActions_1.EntitiesListActions.CustomElements, {
             children: other
-          }), !isMobile ? pagination : null]
+          }), showPagination ? pagination : null]
         }) : null, hasPostActions ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.PostActions, {
           children: [columnsPopup ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
             children: [(0, jsx_runtime_1.jsx)(columnsListButton_1.ColumnsListButton, {
@@ -304,6 +392,11 @@ const TableInner = ({
             children: bulkActions
           }) : null, !isMobile ? fullscreenButton : null]
         }) : null]
+      }) : null, isInfinite ? (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-visually-hidden",
+        role: "status",
+        "aria-live": "polite",
+        children: liveMessage
       }) : null, (0, jsx_runtime_1.jsxs)("div", {
         className: "zen-table__content",
         children: [(0, jsx_runtime_1.jsx)("div", {
@@ -317,7 +410,7 @@ const TableInner = ({
             entities: loadingEntities,
             expanded: isFeedExpanded,
             options: {
-              onFeedEnd: onFeedEnd,
+              onFeedEnd: feedEndCallback,
               visibleColumns
             },
             actions: actions,
@@ -330,6 +423,7 @@ const TableInner = ({
             activePage: activePage,
             active: activeIdForRow,
             onClick: onClickForRow,
+            isLoading: isLoading,
             children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})]
           }) : (0, jsx_runtime_1.jsxs)(dataGrid_1.DataGrid, {
             columns: loadingColumns,
@@ -340,6 +434,8 @@ const TableInner = ({
             onExpandedChange: onExpandedChange,
             active: activeIdForRow,
             onClick: onClickForRow,
+            onScrollEnd: onScrollEnd,
+            isLoading: isLoading,
             children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})]
           })
         }), detailPanel !== null && detailPanel !== void 0 ? detailPanel : null]

package/dist/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/dist/tag/tag.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../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.
+ */
+const Tag = ({ color, className, children }) => ((0, jsx_runtime_1.jsxs)("span", { className: (0, classNames_1.classNames)(["zen-tag", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-tag__dot", `zen-tag__dot--${color}`]), "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-tag__label", children: children })] }));
+exports.Tag = Tag;
+exports.Tag.displayName = "Tag";

package/dist/textIconButton/textIconButton.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)

package/dist/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/dist/toastRaw/toastRaw.js

@@ -44,6 +44,7 @@ injectString("bg-BG", "Close", "\u0417\u0430\u0442\u0432\u0430\u0440\u044F\u043D
 const toastAnimation_1 = require("./components/toastAnimation");
 const iconCheckRadio_1 = require("../icons/iconCheckRadio");
 const iconInfoCircle_1 = require("../icons/iconInfoCircle");
+const iconWarning_1 = require("../icons/iconWarning");
 const react_1 = require("react");
 const useDrive_1 = require("../utils/theme/useDrive");
 const button_1 = require("../button/button");
@@ -56,7 +57,8 @@ const themeContext_1 = require("../utils/theme/themeContext");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const typedIcons = {
   success: iconCheckRadio_1.IconCheckRadio,
-  info: iconInfoCircle_1.IconInfoCircle
+  info: iconInfoCircle_1.IconInfoCircle,
+  error: iconWarning_1.IconWarning
 };
 const getIcon = t => typedIcons[t];
 exports.TOAST_CLASSNAME = "zen-toast";

package/dist/toggleButtonRaw/toggleButtonRaw.js

@@ -27,13 +27,23 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 } : function (o, v) {
   o["default"] = v;
 });
-var __importStar = this && this.__importStar || function (mod) {
-  if (mod && mod.__esModule) return mod;
-  var result = {};
-  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  __setModuleDefault(result, mod);
-  return result;
-};
+var __importStar = this && this.__importStar || function () {
+  var ownKeys = function (o) {
+    ownKeys = Object.getOwnPropertyNames || function (o) {
+      var ar = [];
+      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+      return ar;
+    };
+    return ownKeys(o);
+  };
+  return function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+}();
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/dist/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/dist/tooltip/tooltip.js

@@ -27,13 +27,23 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 } : function (o, v) {
   o["default"] = v;
 });
-var __importStar = this && this.__importStar || function (mod) {
-  if (mod && mod.__esModule) return mod;
-  var result = {};
-  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  __setModuleDefault(result, mod);
-  return result;
-};
+var __importStar = this && this.__importStar || function () {
+  var ownKeys = function (o) {
+    ownKeys = Object.getOwnPropertyNames || function (o) {
+      var ar = [];
+      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+      return ar;
+    };
+    return ownKeys(o);
+  };
+  return function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+}();
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/dist/tooltipInfo/tooltipInfo.d.ts

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