@geotab/zenith 3.14.1 → 3.15.0-beta.1

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;

package/dist/utils/compareElementsUtils/isArraysEqualDeeply.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isArraysEqualDeeply = void 0;
+exports.isArraysEqualDeeply = isArraysEqualDeeply;
 const isArraysEqualShallow_1 = require("./isArraysEqualShallow");
 const isBothArraysShallow_1 = require("./isBothArraysShallow");
 const isElementsEqual_1 = require("./isElementsEqual");
@@ -16,4 +16,3 @@ function isArraysEqualDeeply(a, b) {
     }
     return (0, isElementsEqual_1.isPropertiesEqual)(a, b);
 }
-exports.isArraysEqualDeeply = isArraysEqualDeeply;

package/dist/utils/compareElementsUtils/isElementsEqual.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isElementsEqual = exports.isPropertiesEqual = exports.isObjectsNotEqualShallow = exports.isPrimitivesNotEqual = exports.isArraysNotEqual = exports.isBothObjectsShallow = exports.isBothFunctions = exports.isBothArrays = exports.isBothObjects = void 0;
+exports.isPropertiesEqual = exports.isObjectsNotEqualShallow = exports.isPrimitivesNotEqual = exports.isArraysNotEqual = exports.isBothObjectsShallow = exports.isBothFunctions = exports.isBothArrays = exports.isBothObjects = void 0;
+exports.isElementsEqual = isElementsEqual;
 const isArraysEqualDeeply_1 = require("./isArraysEqualDeeply");
 const isArraysEqualShallow_1 = require("./isArraysEqualShallow");
 const isBothArraysShallow_1 = require("./isBothArraysShallow");
@@ -95,4 +96,3 @@ function isElementsEqual(...args) {
     }
     return (0, exports.isPropertiesEqual)(elem1, elem2);
 }
-exports.isElementsEqual = isElementsEqual;

package/dist/utils/escapeHtml.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.htmlEscape = void 0;
+exports.htmlEscape = htmlEscape;
 function htmlEscape(str) {
     return String(str || "")
         .replace(/&/g, "&")
@@ -9,4 +9,3 @@ function htmlEscape(str) {
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
 }
-exports.htmlEscape = htmlEscape;

package/dist/utils/localization/directionContext.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TTextDirection } from "./getTextDirection";
 export declare const directionContext: import("react").Context<TTextDirection>;

package/dist/utils/localization/languageContext.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const languageContext: import("react").Context<"it" | "th" | "tr" | "ms" | "id" | "ar" | "en" | "es" | "de" | "cs" | "fr-FR" | "fr" | "ja" | "nl" | "pl" | "pt-BR" | "sv" | "zh-Hans" | "ko-KR" | "zh-TW" | "da-DK" | "fi-FI" | "hu-HU" | "nb-NO" | "sk-SK" | "pt-PT" | "ro-RO" | "bg-BG" | "et-EE" | "el-GR" | "lv-LV" | "lt-LT" | "ka-GE">;

package/dist/utils/localization/translations/en.json

@@ -344,5 +344,16 @@
     "Customize view": "Customize view",
     "Select menu": "Select menu",
     "Increase value": "Increase value",
-    "Decrease value": "Decrease value"
+    "Decrease value": "Decrease value",
+    "Loading more rows": "Loading more rows",
+    "1 more row loaded": "1 more row loaded",
+    "{count} more rows loaded": "{count} more rows loaded",
+    "Line chart": "Line chart",
+    "Bar chart": "Bar chart",
+    "Pie chart": "Pie chart",
+    "Summary: {COUNT} slices.": "Summary: {COUNT} slices.",
+    "Largest:": "Largest:",
+    "Smallest:": "Smallest:",
+    "Rest: {COUNT} other slices account for {PCT}%.": "Rest: {COUNT} other slices account for {PCT}%.",
+    "Details, {COUNT} items:": "Details, {COUNT} items:"
 }

package/dist/utils/theme/themeContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare enum Theme {
     Default = 0,
     Drive = 1

package/dist/utils/topWindow/topWindowContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { zen } from "../zen";
 interface ITopWindow {
     topWindow: Window | typeof zen | undefined;

package/dist/utils/useFadeComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const useFadeComponent: (initialState: boolean, onTransitionEnd?: (currentIsOpen: boolean) => void) => {
     renderComponent: boolean;
     showContent: boolean;

package/dist/utils/userFormat/userFormatContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface IUserFormat {
     dateFormat: string;
     timeFormat: string;

package/dist/waiting/waiting.d.ts

@@ -5,5 +5,6 @@ export interface IWaiting extends IZenComponentProps {
     delay?: number;
     hideOverlay?: boolean;
     description?: string;
+    label?: string;
 }
-export declare const Waiting: ({ isLoading, delay, hideOverlay, className, description }: IWaiting) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Waiting: ({ isLoading, delay, hideOverlay, className, description, label }: IWaiting) => import("react/jsx-runtime").JSX.Element | null;

package/dist/waiting/waiting.js

@@ -6,23 +6,40 @@ const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const zen_1 = require("../utils/zen");
-const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "", description }) => {
+const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "", description, label }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
+    const [statusText, setStatusText] = (0, react_1.useState)("");
     const spinnerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-waiting__spinner");
+    const showWaiting = isLoading && (delay <= 0 || visible);
     (0, react_1.useEffect)(() => {
         var _a;
         let timer;
-        if (isLoading) {
-            timer = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => setVisible(true), delay);
+        if (!isLoading) {
+            setVisible(false);
+        }
+        else if (delay <= 0) {
+            setVisible(true);
         }
         else {
-            setVisible(false);
+            timer = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => setVisible(true), delay);
+        }
+        return () => {
+            var _a;
+            timer && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timer));
+        };
+    }, [isLoading, delay]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        let timer;
+        setStatusText("");
+        if (isLoading && showWaiting) {
+            timer = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => setStatusText(description || label || ""), 0);
         }
         return () => {
             var _a;
             timer && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timer));
         };
-    }, [isLoading, setVisible, delay]);
-    return visible ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-waiting", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__overlay", hideOverlay ? "zen-waiting__overlay--hidden" : ""]) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-waiting__spinner-container", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner", spinnerDriveClassName || ""]), children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "spinnerGradient", x1: "0", y1: "0", x2: "1", y2: "0", gradientUnits: "objectBoundingBox", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "var(--borders-form-field--active)", stopOpacity: "1" }), (0, jsx_runtime_1.jsx)("stop", { offset: "33.33%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.8" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.5" }), (0, jsx_runtime_1.jsx)("stop", { offset: "66.67%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.2" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0" })] }) }), (0, jsx_runtime_1.jsx)("path", { className: "zen-waiting__spinner-animation", stroke: "url(#spinnerGradient)", strokeWidth: "6", strokeLinecap: "round", d: "M 32 4 A 28 28 0 1 1 32 60 A 28 28 0 1 1 32 4 Z" })] }) }), description && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner-text"]), children: description })] })] })) : null;
+    }, [isLoading, showWaiting, description, label]);
+    return isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { role: "status", className: "zen-waiting__status", children: statusText ? (0, jsx_runtime_1.jsx)("span", { className: "zen-visually-hidden", children: statusText }) : null }), showWaiting ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-waiting", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__overlay", hideOverlay ? "zen-waiting__overlay--hidden" : ""]) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-waiting__spinner-container", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner", spinnerDriveClassName || ""]), children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "spinnerGradient", x1: "0", y1: "0", x2: "1", y2: "0", gradientUnits: "objectBoundingBox", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "var(--borders-form-field--active)", stopOpacity: "1" }), (0, jsx_runtime_1.jsx)("stop", { offset: "33.33%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.8" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.5" }), (0, jsx_runtime_1.jsx)("stop", { offset: "66.67%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.2" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0" })] }) }), (0, jsx_runtime_1.jsx)("path", { className: "zen-waiting__spinner-animation", stroke: "url(#spinnerGradient)", strokeWidth: "6", strokeLinecap: "round", d: "M 32 4 A 28 28 0 1 1 32 60 A 28 28 0 1 1 32 4 Z" })] }) }), description && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner-text"]), children: description })] })] })) : null] })) : null;
 };
 exports.Waiting = Waiting;

package/esm/alert/banner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-export declare const Banner: import("react").FC<import("../banner/banner").IBanner> & {
-    ErrorSummary: import("react").FC<import("../banner/bannerErrorSummary").IBannerErrorSummary>;
+export declare const Banner: import("react").FC<import("..").IBanner> & {
+    ErrorSummary: typeof import("../banner/bannerErrorSummary").BannerErrorSummary;
 };

package/esm/alert/hooks/useAlertState.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IAlertItem } from "../../feedbackContainer/types";
 export interface IUseAlertState {
     alerts: IAlertItem[];

package/esm/banner/bannerMultipLine.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./banner.less";
 import { TBannerSize } from "./bannerUtils";
 import { IBannerAction } from "./banner";

package/esm/banner/bannerSingleLine.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./banner.less";
 import { TBannerSize } from "./bannerUtils";
 import { IBannerAction } from "./banner";

package/esm/banner/utils/isSummaryErrorElement.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IBannerErrorSummary } from "../bannerErrorSummary";
-export declare const isSummaryErrorElement: (child: React.ReactNode) => child is import("react").ReactElement<IBannerErrorSummary, string | import("react").JSXElementConstructor<any>>;
+export declare const isSummaryErrorElement: (child: React.ReactNode) => child is React.ReactElement<IBannerErrorSummary>;

package/esm/card/components/content.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 export interface IContent extends Pick<IZenComponentProps, "children"> {
 }

package/esm/chart/accessibleChart/accessibleChart.js

@@ -2,4 +2,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { UserFormatProvider } from "../../utils/userFormat/userFormatProvider";
 import { AccessibleChartNarrative } from "./accessibleChartNarrative";
 import { AccessibleChartTable } from "./accessibleChartTable";
-export const AccessibleChart = (props) => (_jsxs(UserFormatProvider, { dateFormat: "d MMMM yyyy", children: [props.type !== "pie" && _jsx(AccessibleChartNarrative, Object.assign({}, props)), _jsx(AccessibleChartTable, Object.assign({}, props))] }));
+export const AccessibleChart = (props) => (_jsxs(UserFormatProvider, { dateFormat: "d MMMM yyyy", children: [_jsx(AccessibleChartNarrative, Object.assign({}, props)), _jsx(AccessibleChartTable, Object.assign({}, props))] }));

package/esm/chart/accessibleChart/accessibleChartNarrative.d.ts

@@ -3,4 +3,4 @@ import { IBarChartOptions } from "../barChart/interfaces";
 import { ILineChartOptions, ILineChartPoint } from "../lineChart/interfaces";
 export declare function collectAllPoints(dataset: AccessibleChartDataset, dateFormatter: (d: Date | string, format?: string) => string, miniChartLabels?: string[], options?: ILineChartOptions | IBarChartOptions): IAccessiblePoint[];
 export declare function simplifyData(data: ILineChartPoint[]): ILineChartPoint[];
-export declare const AccessibleChartNarrative: ({ data, options }: IAccessibleChart) => import("react/jsx-runtime").JSX.Element;
+export declare const AccessibleChartNarrative: ({ data, type, options, narrativeId }: IAccessibleChart) => import("react/jsx-runtime").JSX.Element;

package/esm/chart/accessibleChart/accessibleChartNarrative.js

@@ -9,6 +9,7 @@ import { getFormattedLabel } from "../utils/getFormattedLabel";
 import { truncateDecimals } from "../../utils/truncateDecimals";
 import { calculateMinTruncationPrecision } from "../utils/calculateMinTruncationPrecision";
 import { removeTrendDataFromDatasets } from "../utils/removeTrendDataFromDatasets";
+import { generatePieNarrative } from "./generatePieNarrative";
 injectString("cs", "Data", "Data");
 injectString("da-DK", "Data", "Data");
 injectString("de", "Data", "Daten");
@@ -1025,7 +1026,9 @@ function detectDatasetTrend(dataset, translate, dateFormatter, miniChartLabels,
 }
 export const AccessibleChartNarrative = ({
   data,
-  options
+  type,
+  options,
+  narrativeId
 }) => {
   const {
     translate
@@ -1037,6 +1040,7 @@ export const AccessibleChartNarrative = ({
   } = useContext(userFormatContext);
   const dateFormatter = useCallback((d, format = dateFormat) => formatDate(toLocalDateTime(d), format, translate), [toLocalDateTime, dateFormat, translate]);
   const filteredDatasets = removeTrendDataFromDatasets(data.datasets);
+  const pieAnalysis = useMemo(() => type === "pie" ? generatePieNarrative(data, translate) : null, [type, data, translate]);
   const datasetsWithAnalysis = useMemo(() => filteredDatasets.map(dataset => {
     const datasetObj = Object.assign({}, dataset);
     try {
@@ -1048,9 +1052,11 @@ export const AccessibleChartNarrative = ({
       return errMsg;
     }
   }), [filteredDatasets, translate, dateFormatter, miniChartLabels, options]);
+  const lines = pieAnalysis !== null && pieAnalysis !== void 0 ? pieAnalysis : datasetsWithAnalysis;
   return _jsx("div", {
+    id: narrativeId,
     className: "screen-reader-only",
-    children: datasetsWithAnalysis.map((analysis, index) => _jsx("div", {
+    children: lines.map((analysis, index) => _jsx("div", {
       children: analysis
     }, index))
   });