@geotab/zenith 3.11.1 → 3.12.0-beta.0

package/esm/dataGrid/entitiesListActions/actions/fullscreenButton.js

@@ -35,7 +35,7 @@ injectString("tr", "Exit full screen table view", "Exit full screen table view")
 injectString("zh-Hans", "Exit full screen table view", "Exit full screen table view");
 injectString("zh-TW", "Exit full screen table view", "Exit full screen table view");
 injectString("ro-RO", "Exit full screen table view", "Exit full screen table view");
-injectString("ar-SA", "Exit full screen table view", "\u0627\u0644\u062E\u0631\u0648\u062C \u0645\u0646 \u0639\u0631\u0636 \u0627\u0644\u062C\u062F\u0648\u0644 \u0628\u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629");
+injectString("ar", "Exit full screen table view", "\u0627\u0644\u062E\u0631\u0648\u062C \u0645\u0646 \u0639\u0631\u0636 \u0627\u0644\u062C\u062F\u0648\u0644 \u0628\u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629");
 injectString("cs", "Convert table to full screen", "Konvertovat tabulku do re\u017Eimu pln\xE9ho zobrazen\xED");
 injectString("da-DK", "Convert table to full screen", "Konverter tabel til fuld sk\xE6rm");
 injectString("de", "Convert table to full screen", "Tabelle in Vollbild umwandeln");
@@ -62,7 +62,7 @@ injectString("tr", "Convert table to full screen", "Tabloyu tam ekrana d\xF6n\xF
 injectString("zh-Hans", "Convert table to full screen", "\u5C06\u8868\u683C\u8F6C\u6362\u4E3A\u5168\u5C4F");
 injectString("zh-TW", "Convert table to full screen", "\u5C07\u8868\u683C\u8F49\u63DB\u70BA\u5168\u87A2\u5E55\u986F\u793A");
 injectString("ro-RO", "Convert table to full screen", "Schimba\u021Bi tabelul pe ecran complet");
-injectString("ar-SA", "Convert table to full screen", "\u062A\u062D\u0648\u064A\u0644 \u0627\u0644\u062C\u062F\u0648\u0644 \u0625\u0644\u0649 \u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629");
+injectString("ar", "Convert table to full screen", "\u062A\u062D\u0648\u064A\u0644 \u0627\u0644\u062C\u062F\u0648\u0644 \u0625\u0644\u0649 \u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629");
 export const FullScreenButton = ({
   fullScreen,
   title,

package/esm/dataGrid/listColumn.d.ts

@@ -2,6 +2,8 @@ import { ReactNode } from "react";
 import { ColumnSortDirection } from "../table/table";
 export interface IListColumnMeta<T, N = T> {
     readonly defaultWidth?: number;
+    readonly minWidth?: number;
+    readonly maxWidth?: number;
     readonly defaultValue?: string;
     readonly lazyLoad?: boolean;
     readonly visibleOnHover?: boolean;

package/esm/dataGrid/row/row.d.ts

@@ -16,7 +16,8 @@ export interface IDataGridRow<T extends IRowEntity<N>, N extends IEntityWithId>
     ariaPosinset: number;
     ariaSetsize: number;
     isActive?: boolean;
+    active?: string;
     onClick?: (id: string) => void;
 }
 export declare const MIN_CELL_WIDTH = 100;
-export declare const DataGridRow: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive }: IDataGridRow<T, N>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridRow: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive, active }: IDataGridRow<T, N>) => import("react/jsx-runtime").JSX.Element;

package/esm/dataGrid/row/row.js

@@ -3,10 +3,12 @@ import { memo, useCallback, useId, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { DataGridCell } from "../cell/cell";
 export const MIN_CELL_WIDTH = 100;
-const getColumnWidth = (defaultWidth) => Math.floor(Math.max(defaultWidth, MIN_CELL_WIDTH));
-const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive }) => {
+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 }) => {
     const isVisible = visibleRows.has(entity.id);
     const listOfDefaultWidthColumns = useMemo(() => columns.map(column => column.meta.defaultWidth), [columns]);
+    const listOfMinWidthColumns = useMemo(() => columns.map(column => column.meta.minWidth), [columns]);
+    const listOfMaxWidthColumns = useMemo(() => columns.map(column => column.meta.maxWidth), [columns]);
     const getColWidth = useCallback((columnIndex, colspan) => {
         const colsp = colspan || 1;
         let columnWidth = 0;
@@ -15,26 +17,28 @@ const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow,
                 continue;
             }
             const defaultWidth = listOfDefaultWidthColumns[columnIndex + i];
+            const minWidth = listOfMinWidthColumns[columnIndex + i];
             // If the column is the last one or doesn't have a default width, it should be limited to the remaining space
-            const width = getColumnWidth(defaultWidth || flexibleColumnWidth);
+            const width = getColumnWidth(defaultWidth || flexibleColumnWidth, minWidth);
             columnWidth += width;
         }
         return columnWidth;
-    }, [flexibleColumnWidth, listOfDefaultWidthColumns]);
+    }, [flexibleColumnWidth, listOfDefaultWidthColumns, listOfMinWidthColumns]);
     const getCellParams = useCallback((columnIndex, colspan) => {
         const width = getColWidth(columnIndex, colspan);
         const defaultWidth = listOfDefaultWidthColumns[columnIndex];
+        const maxWidth = listOfMaxWidthColumns[columnIndex];
         const limited = !!defaultWidth && defaultWidth > 0;
         const isFirst = columnIndex === 0;
         const isLast = columnIndex === listOfDefaultWidthColumns.length - 1;
-        return { limited, isFirst, isLast, width };
-    }, [getColWidth, listOfDefaultWidthColumns]);
+        return { limited, isFirst, isLast, width, maxWidth };
+    }, [getColWidth, listOfDefaultWidthColumns, listOfMaxWidthColumns]);
     const mainRowId = useId();
     const renderCells = useCallback((rowEntity, isNested) => columns.reduce((acc, column, index) => {
         const colspanFn = column.colspan;
         let colspan = colspanFn ? (typeof colspanFn === "function" ? colspanFn(rowEntity) : colspanFn) : undefined;
         colspan = colspan && colspan > 1 ? colspan : undefined;
-        const { limited, width } = getCellParams(index, colspan);
+        const { limited, width, maxWidth } = getCellParams(index, colspan);
         if (acc.colspan > 0) {
             acc.colspan--;
             return acc;
@@ -49,9 +53,9 @@ const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow,
                     ? column.columnComponent.renderNested.bind(column.columnComponent)
                     : column.columnComponent.render.bind(column.columnComponent))
             : column.columnComponent.render.bind(column.columnComponent);
-        acc.cells.push(_jsx(DataGridCell, { render: e => renderFn(e, isNested), renderPlaceholder: column.meta.renderPlaceholder, renderWrappers: renderWrappers, defaultValue: column.meta.defaultValue, entity: rowEntity, index: index, limited: limited, visibleOnHover: column.meta.visibleOnHover, width: column.meta.visibleOnHover ? 0 : width, isVisible: isVisible, colspan: colspan, onClick: !isNested && onExpandedChange ? () => onExpandedChange(!expanded) : onClick ? () => onClick(rowEntity.id) : undefined, isActive: isActive, className: isNested ? "zen-data-grid__row-cell--nested" : "" }, `${rowEntity.id}_${column.name}`));
+        acc.cells.push(_jsx(DataGridCell, { render: e => renderFn(e, isNested), renderPlaceholder: column.meta.renderPlaceholder, renderWrappers: renderWrappers, defaultValue: column.meta.defaultValue, entity: rowEntity, index: index, limited: limited, visibleOnHover: column.meta.visibleOnHover, width: column.meta.visibleOnHover ? 0 : width, maxWidth: column.meta.visibleOnHover ? undefined : maxWidth, isVisible: isVisible, colspan: colspan, onClick: !isNested && onExpandedChange ? () => onExpandedChange(!expanded) : onClick ? () => onClick(rowEntity.id) : undefined, isActive: isNested ? active === rowEntity.id : isActive || active === rowEntity.id, className: isNested ? "zen-data-grid__row-cell--nested" : "" }, `${rowEntity.id}_${column.name}`));
         return acc;
-    }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange, isActive, onClick]);
+    }, { 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}`)))] }));

package/esm/dataGrid/withFlexibleColumns/components/columnSettings.js

@@ -29,7 +29,7 @@ injectString("tr", "Reset column settings", "S\xFCtun ayarlar\u0131n\u0131 s\u01
 injectString("zh-Hans", "Reset column settings", "\u91CD\u7F6E\u5217\u8BBE\u7F6E");
 injectString("zh-TW", "Reset column settings", "\u91CD\u8A2D\u6B04\u8A2D\u5B9A");
 injectString("ro-RO", "Reset column settings", "Reseta\u021Bi set\u0103rile coloanelor");
-injectString("ar-SA", "Reset column settings", "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646 \u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0623\u0639\u0645\u062F\u0629");
+injectString("ar", "Reset column settings", "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646 \u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0623\u0639\u0645\u062F\u0629");
 injectString("cs", "Reset", "Obnovit");
 injectString("da-DK", "Reset", "Nulstil");
 injectString("de", "Reset", "Zur\xFCcksetzen");
@@ -56,7 +56,7 @@ injectString("tr", "Reset", "S\u0131f\u0131rla");
 injectString("zh-Hans", "Reset", "\u91CD\u7F6E");
 injectString("zh-TW", "Reset", "\u91CD\u8A2D");
 injectString("ro-RO", "Reset", "Reseta\u021Bi");
-injectString("ar-SA", "Reset", "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646");
+injectString("ar", "Reset", "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646");
 const ColumnSettingsInner = ({
   onReset,
   showFooter = true,

package/esm/dataGrid/withFlexibleColumns/components/columnSettingsList.d.ts

@@ -1,7 +1,7 @@
 import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
 import { IColumnsGroup } from "../../extensions/groupColumns";
 import { IListFlexibleColumnStrict } from "../columns/flexibleColumn";
-import "./flexibleColumnsPopup.less";
+import "../../../commonStyles/columnsList.less";
 import { IRowEntity } from "../../row/row";
 interface IColumnSettingsList<T extends IRowEntity<T>> extends IZenComponentProps {
     columns: IListFlexibleColumnStrict<T, T>[];

package/esm/dataGrid/withFlexibleColumns/components/columnSettingsList.js

@@ -1,117 +1,51 @@
-import { injectString } from "../../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo } from "react";
 import { groupColumns } from "../../extensions/groupColumns";
 import { SelectList } from "../../../selectList/selectList";
 import { CheckboxState } from "../../../checkbox/checkboxState";
-import { useLanguage } from "../../../utils/localization/useLanguage";
-injectString("cs", "Select visible columns", "Vyberte viditeln\xE9 sloupce");
-injectString("da-DK", "Select visible columns", "V\xE6lg synlige kolonner");
-injectString("de", "Select visible columns", "Sichtbare Spalten ausw\xE4hlen");
-injectString("en", "Select visible columns", "Select visible columns");
-injectString("es", "Select visible columns", "Seleccionar columnas visibles");
-injectString("fi-FI", "Select visible columns", "Valitse n\xE4kyv\xE4t sarakkeet");
-injectString("fr", "Select visible columns", "S\xE9lectionner les colonnes visibles");
-injectString("fr-FR", "Select visible columns", "S\xE9lectionner les colonnes visibles");
-injectString("hu-HU", "Select visible columns", "L\xE1that\xF3 oszlopok kiv\xE1laszt\xE1sa");
-injectString("id", "Select visible columns", "Pilih kolom yang terlihat");
-injectString("it", "Select visible columns", "Selezionare colonne visibili");
-injectString("ja", "Select visible columns", "\u8868\u793A\u5217\u3092\u9078\u629E");
-injectString("ko-KR", "Select visible columns", "\uD45C\uC2DC\uB418\uB294 \uC5F4 \uC120\uD0DD");
-injectString("ms", "Select visible columns", "Pilih lajur yang boleh dilihat");
-injectString("nb-NO", "Select visible columns", "Velg synlige kolonner");
-injectString("nl", "Select visible columns", "Zichtbare kolommen selecteren");
-injectString("pl", "Select visible columns", "Wybierz widoczne kolumny");
-injectString("pt-BR", "Select visible columns", "Selecionar colunas vis\xEDveis");
-injectString("pt-PT", "Select visible columns", "Selecionar colunas vis\xEDveis");
-injectString("sk-SK", "Select visible columns", "Vybra\u0165 vidite\u013En\xE9 st\u013Apce");
-injectString("sv", "Select visible columns", "V\xE4lj synbara kolumner");
-injectString("th", "Select visible columns", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C\u0E17\u0E35\u0E48\u0E21\u0E2D\u0E07\u0E40\u0E2B\u0E47\u0E19\u0E44\u0E14\u0E49");
-injectString("tr", "Select visible columns", "G\xF6r\xFCn\xFCr s\xFCtunlar\u0131 se\xE7");
-injectString("zh-Hans", "Select visible columns", "\u9009\u62E9\u53EF\u89C1\u5217");
-injectString("zh-TW", "Select visible columns", "\u9078\u53D6\u53EF\u898B\u6B04");
-injectString("ro-RO", "Select visible columns", "Selecta\u021Bi coloanele vizibile");
-injectString("ar-SA", "Select visible columns", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0623\u0639\u0645\u062F\u0629 \u0627\u0644\u0645\u0631\u0626\u064A\u0629");
-const SubColumnsList = ({
-  title,
-  columns,
-  settings,
-  disabledColumns,
-  onChange,
-  sortColumns
-}) => {
-  const id = useId();
-  const {
-    translate
-  } = useLanguage();
-  const sortColumnsInt = useCallback((a, b) => {
-    if (sortColumns) {
-      return sortColumns(a.title, b.title);
+const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, sortColumns }) => {
+    const id = useId();
+    const sortColumnsInt = useCallback((a, b) => {
+        if (sortColumns) {
+            return sortColumns(a.title, b.title);
+        }
+        return 0;
+    }, [sortColumns]);
+    const items = useMemo(() => columns.sort(sortColumnsInt).map(c => ({
+        id: c.id,
+        title: c.title,
+        disabled: (disabledColumns === null || disabledColumns === void 0 ? void 0 : disabledColumns.includes(c.name)) || false,
+        showCheckbox: true,
+        children: c.title
+    })), [columns, disabledColumns, sortColumnsInt]);
+    const allDisabled = useMemo(() => items.every(item => item.disabled), [items]);
+    const state = columns.reduce((res, c) => {
+        res.set(c.id, settings.get(c.name) !== false ? CheckboxState.On : CheckboxState.Off);
+        return res;
+    }, new Map());
+    const onChangeItem = useCallback((newState) => {
+        const newSettings = new Map(settings);
+        newState.forEach((stateVal, itemId) => {
+            var _a;
+            newSettings.set((_a = columns.find(c => c.id === itemId)) === null || _a === void 0 ? void 0 : _a.name, stateVal === CheckboxState.On);
+        });
+        onChange && onChange(newSettings);
+    }, [columns, settings, onChange]);
+    const list = useMemo(() => (_jsx(SelectList, { id: id, items: items, value: state, title: title || "", multiselect: true, showCheckbox: true, onChange: onChangeItem, disabled: allDisabled })), [id, items, state, title, onChangeItem, allDisabled]);
+    if (!title) {
+        return list;
     }
-    return 0;
-  }, [sortColumns]);
-  const items = useMemo(() => columns.sort(sortColumnsInt).map(c => ({
-    id: c.id,
-    title: c.title,
-    disabled: (disabledColumns === null || disabledColumns === void 0 ? void 0 : disabledColumns.includes(c.name)) || false,
-    showCheckbox: true,
-    children: c.title
-  })), [columns, disabledColumns, sortColumnsInt]);
-  const allDisabled = useMemo(() => items.every(item => item.disabled), [items]);
-  const state = columns.reduce((res, c) => {
-    res.set(c.id, settings.get(c.name) !== false ? CheckboxState.On : CheckboxState.Off);
-    return res;
-  }, new Map());
-  const onChangeItem = useCallback(newState => {
-    const newSettings = new Map(settings);
-    newState.forEach((stateVal, itemId) => {
-      var _a;
-      newSettings.set((_a = columns.find(c => c.id === itemId)) === null || _a === void 0 ? void 0 : _a.name, stateVal === CheckboxState.On);
-    });
-    onChange && onChange(newSettings);
-  }, [columns, settings, onChange]);
-  const list = useMemo(() => _jsx(SelectList, {
-    id: id,
-    items: items,
-    value: state,
-    title: title || translate("Select visible columns"),
-    multiselect: true,
-    showCheckbox: true,
-    onChange: onChangeItem,
-    disabled: allDisabled
-  }), [id, items, state, title, translate, onChangeItem, allDisabled]);
-  if (!title) {
-    return list;
-  }
-  return _jsxs("div", {
-    className: "zen-columns-list__sub-section",
-    children: [_jsx("div", {
-      className: "zen-columns-list__title zen-ellipsis",
-      children: title
-    }), list]
-  });
+    return (_jsxs("div", { className: "zen-columns-list__sub-section", children: [_jsx("div", { className: "zen-columns-list__title zen-ellipsis", "aria-hidden": "true", children: title }), list] }));
 };
-export function ColumnSettingsList({
-  columns,
-  settings,
-  disabledColumns,
-  onChange,
-  sortGroups,
-  sortColumns
-}) {
-  const groupped = groupColumns(columns);
-  const sortGroupsInt = useCallback((a, b) => {
-    if (sortGroups) {
-      return sortGroups(a[0], b[0]);
-    }
-    return 0;
-  }, [sortGroups]);
-  return Array.from(groupped.entries()).sort(sortGroupsInt).map(([title, cs]) => _jsx(SubColumnsList, {
-    title: title,
-    columns: cs,
-    settings: settings,
-    disabledColumns: disabledColumns,
-    onChange: onChange,
-    sortColumns: sortColumns
-  }, cs.map(c => c.id).join("-")));
-}
+export function ColumnSettingsList({ columns, settings, disabledColumns, onChange, sortGroups, sortColumns }) {
+    const groupped = groupColumns(columns);
+    const sortGroupsInt = useCallback((a, b) => {
+        if (sortGroups) {
+            return sortGroups(a[0], b[0]);
+        }
+        return 0;
+    }, [sortGroups]);
+    return Array.from(groupped.entries())
+        .sort(sortGroupsInt)
+        .map(([title, cs]) => (_jsx(SubColumnsList, { title: title, columns: cs, settings: settings, disabledColumns: disabledColumns, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
+}

package/esm/dataGrid/withFlexibleColumns/components/columnSettingsSidePanel.js

@@ -1,9 +1,11 @@
+import { injectString } from "../../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { MobileSheet } from "../../../mobileSheet/mobileSheet";
 import { Button } from "../../../button/button";
 import { useLanguage } from "../../../utils/localization/useLanguage";
 import { FooterButtons } from "../../../footerButtons/footerButtons";
+injectString("en", "Customize view", "Customize view");
 const ColumnSettingsSidePanelComp = ({
   triggerRef,
   isOpen,

package/esm/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -43,7 +43,7 @@ injectString("tr", "Column Settings", "S\xFCtun Ayarlar\u0131");
 injectString("zh-Hans", "Column Settings", "\u5217\u8BBE\u7F6E");
 injectString("zh-TW", "Column Settings", "\u6B04\u8A2D\u5B9A");
 injectString("ro-RO", "Column Settings", "Set\u0103ri coloane");
-injectString("ar-SA", "Column Settings", "\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0623\u0639\u0645\u062F\u0629");
+injectString("ar", "Column Settings", "\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0623\u0639\u0645\u062F\u0629");
 export const withFlexibleColumns = DataGridComponent => {
   const FlexibleColumnsComponent = props => {
     var _a, _b;

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

@@ -7,6 +7,10 @@ import { DeviceType } from "../../../../commonHelpers/hooks/deviceType";
 type TBulkAction = IBulkActionLink | IBulkActionButton;
 export interface IBulkActionsProps extends IZenComponentProps {
     selected: number;
+    /**
+     * When `true`, displays "All selected" instead of a count, and enables action buttons
+     * even when `selected` is 0 (i.e., cross-page "select all" is active).
+     */
     allSelected?: boolean;
     onClearSelection: () => void;
     onSelectAll?: () => void;

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

@@ -39,7 +39,7 @@ injectString("tr", "{1} selected", "{1} se\xE7ildi");
 injectString("zh-Hans", "{1} selected", "\u5DF2\u9009\u4E2D {1} \u9879");
 injectString("zh-TW", "{1} selected", "\u5DF2\u9078\u53D6 {1} \u500B");
 injectString("ro-RO", "{1} selected", "{1} selectate");
-injectString("ar-SA", "{1} selected", "{1} \u0645\u062D\u062F\u062F");
+injectString("ar", "{1} selected", "{1} \u0645\u062D\u062F\u062F");
 injectString("cs", "All", "V\u0161e");
 injectString("da-DK", "All", "Alle");
 injectString("de", "All", "Alle");
@@ -66,7 +66,7 @@ injectString("tr", "All", "T\xFCm\xFC");
 injectString("zh-Hans", "All", "\u5168\u90E8");
 injectString("zh-TW", "All", "\u5168\u90E8");
 injectString("ro-RO", "All", "Toate");
-injectString("ar-SA", "All", "\u0627\u0644\u0643\u0644");
+injectString("ar", "All", "\u0627\u0644\u0643\u0644");
 injectString("cs", "Clear selection", "Vymazat v\xFDb\u011Br");
 injectString("da-DK", "Clear selection", "Ryd markering");
 injectString("de", "Clear selection", "Auswahl l\xF6schen");
@@ -93,7 +93,7 @@ injectString("tr", "Clear selection", "Se\xE7imi temizle");
 injectString("zh-Hans", "Clear selection", "\u6E05\u9664\u9009\u62E9");
 injectString("zh-TW", "Clear selection", "\u6E05\u9664\u9078\u53D6\u9805\u76EE");
 injectString("ro-RO", "Clear selection", "\u0218terge\u021Bi selec\u021Bia");
-injectString("ar-SA", "Clear selection", "\u0645\u0633\u062D \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
+injectString("ar", "Clear selection", "\u0645\u0633\u062D \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
 injectString("cs", "Select all", "Vybrat v\u0161e");
 injectString("da-DK", "Select all", "V\xE6lg alle");
 injectString("de", "Select all", "Alle ausw\xE4hlen");
@@ -120,7 +120,7 @@ injectString("tr", "Select all", "T\xFCm\xFCn\xFC se\xE7");
 injectString("zh-Hans", "Select all", "\u5168\u9009");
 injectString("zh-TW", "Select all", "\u5168\u9078");
 injectString("ro-RO", "Select all", "Selecta\u021Bi tot");
-injectString("ar-SA", "Select all", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
+injectString("ar", "Select all", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
 injectString("cs", "More", "V\xEDce");
 injectString("da-DK", "More", "Mere");
 injectString("de", "More", "Mehr");
@@ -147,7 +147,7 @@ injectString("tr", "More", "Di\u011Fer");
 injectString("zh-Hans", "More", "\u66F4\u591A");
 injectString("zh-TW", "More", "\u66F4\u591A");
 injectString("ro-RO", "More", "Mai multe");
-injectString("ar-SA", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
+injectString("ar", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
 export const BulkActions = ({
   selected,
   allSelected,

package/esm/dataGrid/withSelectableRows/withSelectableRows.js

@@ -33,7 +33,7 @@ injectString("tr", "Select all", "T\xFCm\xFCn\xFC se\xE7");
 injectString("zh-Hans", "Select all", "\u5168\u9009");
 injectString("zh-TW", "Select all", "\u5168\u9078");
 injectString("ro-RO", "Select all", "Selecta\u021Bi tot");
-injectString("ar-SA", "Select all", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
+injectString("ar", "Select all", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
 injectString("cs", "Select current page", "Vybrat aktu\xE1ln\xED str\xE1nku");
 injectString("da-DK", "Select current page", "V\xE6lg aktuel side");
 injectString("de", "Select current page", "Aktuelle Seite ausw\xE4hlen");
@@ -60,7 +60,7 @@ injectString("tr", "Select current page", "Ge\xE7erli sayfay\u0131 se\xE7");
 injectString("zh-Hans", "Select current page", "\u9009\u62E9\u5F53\u524D\u9875\u9762");
 injectString("zh-TW", "Select current page", "\u9078\u53D6\u76EE\u524D\u9801\u9762");
 injectString("ro-RO", "Select current page", "Selecta\u021Bi pagina actual\u0103");
-injectString("ar-SA", "Select current page", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u062D\u0627\u0644\u064A\u0629");
+injectString("ar", "Select current page", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u062D\u0627\u0644\u064A\u0629");
 injectString("cs", "Deselect all", "Zru\u0161it v\xFDb\u011Br v\u0161ech");
 injectString("da-DK", "Deselect all", "Frav\xE6lg alle");
 injectString("de", "Deselect all", "Auswahl f\xFCr alle aufheben");
@@ -87,7 +87,8 @@ injectString("tr", "Deselect all", "T\xFCm\xFCn\xFCn se\xE7imini iptal et");
 injectString("zh-Hans", "Deselect all", "\u53D6\u6D88\u5168\u9009");
 injectString("zh-TW", "Deselect all", "\u53D6\u6D88\u5168\u9078");
 injectString("ro-RO", "Deselect all", "Deselecta\u021Bi tot");
-injectString("ar-SA", "Deselect all", "\u0625\u0644\u063A\u0627\u0621 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
+injectString("ar", "Deselect all", "\u0625\u0644\u063A\u0627\u0621 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
+injectString("en", "Select menu", "Select menu");
 const getSelectionOptions = translate => [{
   id: "all",
   value: SelectionState.All,

package/esm/dataGrid/withSortableColumns/columns/sortableColumnWrapper.js

@@ -34,7 +34,7 @@ injectString("tr", "Sort by {COLUMN_NAME} descending", "{COLUMN_NAME} s\xFCtunun
 injectString("zh-Hans", "Sort by {COLUMN_NAME} descending", "\u6309 {COLUMN_NAME} \u964D\u5E8F\u6392\u5E8F");
 injectString("zh-TW", "Sort by {COLUMN_NAME} descending", "\u4F9D\u300C{COLUMN_NAME}\u300D\u905E\u6E1B\u6392\u5E8F");
 injectString("ro-RO", "Sort by {COLUMN_NAME} descending", "Sorta\u021Bi descendent dup\u0103 {COLUMN_NAME}");
-injectString("ar-SA", "Sort by {COLUMN_NAME} descending", "\u062A\u0631\u062A\u064A\u0628 \u062D\u0633\u0628 {COLUMN_NAME} \u062A\u0646\u0627\u0632\u0644\u064A\u0627\u064B");
+injectString("ar", "Sort by {COLUMN_NAME} descending", "\u062A\u0631\u062A\u064A\u0628 \u062D\u0633\u0628 {COLUMN_NAME} \u062A\u0646\u0627\u0632\u0644\u064A\u0627\u064B");
 injectString("cs", "Sort by {COLUMN_NAME} ascending", "Se\u0159adit vzestupn\u011B podle {COLUMN_NAME}");
 injectString("da-DK", "Sort by {COLUMN_NAME} ascending", "Sorter efter {COLUMN_NAME} stigende");
 injectString("de", "Sort by {COLUMN_NAME} ascending", "Aufsteigend nach {COLUMN_NAME} sortieren");
@@ -61,7 +61,7 @@ injectString("tr", "Sort by {COLUMN_NAME} ascending", "{COLUMN_NAME} s\xFCtununa
 injectString("zh-Hans", "Sort by {COLUMN_NAME} ascending", "\u6309 {COLUMN_NAME} \u5347\u5E8F\u6392\u5E8F");
 injectString("zh-TW", "Sort by {COLUMN_NAME} ascending", "\u4F9D\u300C{COLUMN_NAME}\u300D\u905E\u589E\u6392\u5E8F");
 injectString("ro-RO", "Sort by {COLUMN_NAME} ascending", "Sorta\u021Bi ascendent dup\u0103 {COLUMN_NAME}");
-injectString("ar-SA", "Sort by {COLUMN_NAME} ascending", "\u062A\u0631\u062A\u064A\u0628 \u062D\u0633\u0628 {COLUMN_NAME} \u062A\u0635\u0627\u0639\u062F\u064A\u0627\u064B");
+injectString("ar", "Sort by {COLUMN_NAME} ascending", "\u062A\u0631\u062A\u064A\u0628 \u062D\u0633\u0628 {COLUMN_NAME} \u062A\u0635\u0627\u0639\u062F\u064A\u0627\u064B");
 const getSortButtonTitle = (sortDirection, title, translate) => {
   const titleTemplate = sortDirection === ColumnSortDirection.Descending ? translate("Sort by {COLUMN_NAME} descending") : translate("Sort by {COLUMN_NAME} ascending");
   return titleTemplate.replace("{COLUMN_NAME}", title);

package/esm/dateInputInner/dateInputInner.js

@@ -36,7 +36,7 @@ injectString("tr", "Start date has been adjusted.", "Start date has been adjuste
 injectString("zh-Hans", "Start date has been adjusted.", "Start date has been adjusted.");
 injectString("zh-TW", "Start date has been adjusted.", "\u5DF2\u8ABF\u6574\u958B\u59CB\u65E5\u671F\u3002");
 injectString("ro-RO", "Start date has been adjusted.", "Data de \xEEncepere a fost modificat\u0103.");
-injectString("ar-SA", "Start date has been adjusted.", "\u062A\u0645 \u062A\u0639\u062F\u064A\u0644 \u062A\u0627\u0631\u064A\u062E \u0627\u0644\u0628\u062F\u0621.");
+injectString("ar", "Start date has been adjusted.", "\u062A\u0645 \u062A\u0639\u062F\u064A\u0644 \u062A\u0627\u0631\u064A\u062E \u0627\u0644\u0628\u062F\u0621.");
 injectString("cs", "End date has been adjusted.", "End date has been adjusted.");
 injectString("da-DK", "End date has been adjusted.", "Slutdatoen er blevet justeret.");
 injectString("de", "End date has been adjusted.", "End date has been adjusted.");
@@ -63,7 +63,7 @@ injectString("tr", "End date has been adjusted.", "End date has been adjusted.")
 injectString("zh-Hans", "End date has been adjusted.", "End date has been adjusted.");
 injectString("zh-TW", "End date has been adjusted.", "\u5DF2\u8ABF\u6574\u7D50\u675F\u65E5\u671F\u3002");
 injectString("ro-RO", "End date has been adjusted.", "Data de \xEEncheiere a fost modificat\u0103.");
-injectString("ar-SA", "End date has been adjusted.", "\u062A\u0645 \u062A\u0639\u062F\u064A\u0644 \u062A\u0627\u0631\u064A\u062E \u0627\u0644\u0627\u0646\u062A\u0647\u0627\u0621.");
+injectString("ar", "End date has been adjusted.", "\u062A\u0645 \u062A\u0639\u062F\u064A\u0644 \u062A\u0627\u0631\u064A\u062E \u0627\u0644\u0627\u0646\u062A\u0647\u0627\u0621.");
 injectString("cs", "Start time has been adjusted.", "Start time has been adjusted.");
 injectString("da-DK", "Start time has been adjusted.", "Starttidspunktet er blevet justeret.");
 injectString("de", "Start time has been adjusted.", "Start time has been adjusted.");
@@ -90,7 +90,7 @@ injectString("tr", "Start time has been adjusted.", "Start time has been adjuste
 injectString("zh-Hans", "Start time has been adjusted.", "Start time has been adjusted.");
 injectString("zh-TW", "Start time has been adjusted.", "\u5DF2\u8ABF\u6574\u958B\u59CB\u6642\u9593\u3002");
 injectString("ro-RO", "Start time has been adjusted.", "Ora de \xEEncepere a fost modificat\u0103.");
-injectString("ar-SA", "Start time has been adjusted.", "\u062A\u0645 \u062A\u0639\u062F\u064A\u0644 \u0648\u0642\u062A \u0627\u0644\u0628\u062F\u0621.");
+injectString("ar", "Start time has been adjusted.", "\u062A\u0645 \u062A\u0639\u062F\u064A\u0644 \u0648\u0642\u062A \u0627\u0644\u0628\u062F\u0621.");
 injectString("cs", "End time has been adjusted.", "End time has been adjusted.");
 injectString("da-DK", "End time has been adjusted.", "Sluttidspunktet er blevet justeret.");
 injectString("de", "End time has been adjusted.", "End time has been adjusted.");
@@ -117,7 +117,7 @@ injectString("tr", "End time has been adjusted.", "End time has been adjusted.")
 injectString("zh-Hans", "End time has been adjusted.", "End time has been adjusted.");
 injectString("zh-TW", "End time has been adjusted.", "\u5DF2\u8ABF\u6574\u7D50\u675F\u6642\u9593\u3002");
 injectString("ro-RO", "End time has been adjusted.", "Ora de \xEEncheiere a fost modificat\u0103.");
-injectString("ar-SA", "End time has been adjusted.", "\u062A\u0645 \u062A\u0639\u062F\u064A\u0644 \u0648\u0642\u062A \u0627\u0644\u0627\u0646\u062A\u0647\u0627\u0621.");
+injectString("ar", "End time has been adjusted.", "\u062A\u0645 \u062A\u0639\u062F\u064A\u0644 \u0648\u0642\u062A \u0627\u0644\u0627\u0646\u062A\u0647\u0627\u0621.");
 injectString("cs", "Start date", "Datum za\u010D\xE1tku");
 injectString("da-DK", "Start date", "Startdato");
 injectString("de", "Start date", "Startdatum");
@@ -144,7 +144,7 @@ injectString("tr", "Start date", "Ba\u015Flang\u0131\xE7 tarihi");
 injectString("zh-Hans", "Start date", "\u8D77\u59CB\u65E5\u671F");
 injectString("zh-TW", "Start date", "\u958B\u59CB\u65E5\u671F");
 injectString("ro-RO", "Start date", "Dat\u0103 de \xEEncepere");
-injectString("ar-SA", "Start date", "\u062A\u0627\u0631\u064A\u062E \u0627\u0644\u0628\u062F\u0621");
+injectString("ar", "Start date", "\u062A\u0627\u0631\u064A\u062E \u0627\u0644\u0628\u062F\u0621");
 injectString("cs", "Pick a date", "Vyberte datum");
 injectString("da-DK", "Pick a date", "V\xE6lg en dato");
 injectString("de", "Pick a date", "Datum ausw\xE4hlen");
@@ -171,7 +171,7 @@ injectString("tr", "Pick a date", "Bir tarih se\xE7in");
 injectString("zh-Hans", "Pick a date", "\u9009\u62E9\u65E5\u671F");
 injectString("zh-TW", "Pick a date", "\u9078\u64C7\u65E5\u671F");
 injectString("ro-RO", "Pick a date", "Alege\u021Bi o dat\u0103");
-injectString("ar-SA", "Pick a date", "\u0627\u062E\u062A\u064A\u0627\u0631 \u062A\u0627\u0631\u064A\u062E");
+injectString("ar", "Pick a date", "\u0627\u062E\u062A\u064A\u0627\u0631 \u062A\u0627\u0631\u064A\u062E");
 injectString("cs", "End date", "Datum konce");
 injectString("da-DK", "End date", "Slutdato");
 injectString("de", "End date", "Enddatum");
@@ -198,7 +198,7 @@ injectString("tr", "End date", "Biti\u015F tarihi");
 injectString("zh-Hans", "End date", "\u7ED3\u675F\u65E5\u671F");
 injectString("zh-TW", "End date", "\u7D50\u675F\u65E5\u671F");
 injectString("ro-RO", "End date", "Dat\u0103 de \xEEncheiere");
-injectString("ar-SA", "End date", "\u062A\u0627\u0631\u064A\u062E \u0627\u0644\u0627\u0646\u062A\u0647\u0627\u0621");
+injectString("ar", "End date", "\u062A\u0627\u0631\u064A\u062E \u0627\u0644\u0627\u0646\u062A\u0647\u0627\u0621");
 export const DateInputInner = ({
   id,
   value,

package/esm/dateInputInner/dateInputInnerControlBlock.js

@@ -33,7 +33,7 @@ injectString("tr", "The time must be set", "Saat ayarlanmal\u0131d\u0131r.");
 injectString("zh-Hans", "The time must be set", "\u5FC5\u987B\u8BBE\u5B9A\u65F6\u95F4\u3002");
 injectString("zh-TW", "The time must be set", "\u5FC5\u9808\u8A2D\u5B9A\u6642\u9593");
 injectString("ro-RO", "The time must be set", "Trebuie setat\u0103 ora");
-injectString("ar-SA", "The time must be set", "\u064A\u062C\u0628 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u0648\u0642\u062A.");
+injectString("ar", "The time must be set", "\u064A\u062C\u0628 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u0648\u0642\u062A.");
 injectString("cs", "The date must be set", "Je t\u0159eba nastavit datum.");
 injectString("da-DK", "The date must be set", "Datoen skal indstilles.");
 injectString("de", "The date must be set", "Das Datum muss festgelegt werden.");
@@ -60,7 +60,7 @@ injectString("tr", "The date must be set", "Tarih ayarlanmal\u0131d\u0131r.");
 injectString("zh-Hans", "The date must be set", "\u5FC5\u987B\u8BBE\u5B9A\u65E5\u671F\u3002");
 injectString("zh-TW", "The date must be set", "\u5FC5\u9808\u8A2D\u5B9A\u65E5\u671F");
 injectString("ro-RO", "The date must be set", "Trebuie setat\u0103 data");
-injectString("ar-SA", "The date must be set", "\u064A\u062C\u0628 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u062A\u0627\u0631\u064A\u062E.");
+injectString("ar", "The date must be set", "\u064A\u062C\u0628 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u062A\u0627\u0631\u064A\u062E.");
 export const DateInputInnerControlBlock = props => {
   const {
     className,

package/esm/dateInputRaw/dateInputRaw.js

@@ -51,7 +51,7 @@ injectString("tr", "Pick a date", "Bir tarih se\xE7in");
 injectString("zh-Hans", "Pick a date", "\u9009\u62E9\u65E5\u671F");
 injectString("zh-TW", "Pick a date", "\u9078\u64C7\u65E5\u671F");
 injectString("ro-RO", "Pick a date", "Alege\u021Bi o dat\u0103");
-injectString("ar-SA", "Pick a date", "\u0627\u062E\u062A\u064A\u0627\u0631 \u062A\u0627\u0631\u064A\u062E");
+injectString("ar", "Pick a date", "\u0627\u062E\u062A\u064A\u0627\u0631 \u062A\u0627\u0631\u064A\u062E");
 injectString("cs", "Clear", "Vymazat");
 injectString("da-DK", "Clear", "Ryd");
 injectString("de", "Clear", "L\xF6schen");
@@ -78,7 +78,7 @@ injectString("tr", "Clear", "Temizle");
 injectString("zh-Hans", "Clear", "\u6E05\u9664");
 injectString("zh-TW", "Clear", "\u6E05\u9664");
 injectString("ro-RO", "Clear", "\u0218terge\u021Bi");
-injectString("ar-SA", "Clear", "\u0645\u0633\u062D");
+injectString("ar", "Clear", "\u0645\u0633\u062D");
 injectString("cs", "Apply", "Pou\u017E\xEDt");
 injectString("da-DK", "Apply", "Anvend");
 injectString("de", "Apply", "Anwenden");
@@ -105,7 +105,7 @@ injectString("tr", "Apply", "Uygula");
 injectString("zh-Hans", "Apply", "\u5E94\u7528");
 injectString("zh-TW", "Apply", "\u5957\u7528");
 injectString("ro-RO", "Apply", "Aplica\u021Bi");
-injectString("ar-SA", "Apply", "\u062A\u0637\u0628\u064A\u0642");
+injectString("ar", "Apply", "\u062A\u0637\u0628\u064A\u0642");
 export const DateInputRaw = props => {
   var _a;
   const {
@@ -162,7 +162,7 @@ export const DateInputRaw = props => {
   const isDefaultState = useMemo(() => cutSeconds(defaultValueInner) === cutSeconds(customDate), [defaultValueInner, customDate]);
   const isValueState = useMemo(() => cutSeconds(value) === cutSeconds(customDate), [value, customDate]);
   const componentId = useUniqueId();
-  const cssClass = classNames(["zen-date-input", className !== null && className !== void 0 ? className : "", error ? "zen-date-input--error" : "", !value || cutSeconds(defaultValueInner) === cutSeconds(value) ? "" : "zen-date-input--active"]);
+  const cssClass = classNames(["zen-date-input", className !== null && className !== void 0 ? className : "", error || props.isError ? "zen-date-input--error" : "", !value || cutSeconds(defaultValueInner) === cutSeconds(value) ? "" : "zen-date-input--active"]);
   const title = useMemo(() => dropDownTitle || translate("Pick a date"), [dropDownTitle, translate]);
   const toggleVisibility = useCallback(() => setIsOpen(currentIsOpen => !currentIsOpen), []);
   const getButtonLabel = useCallback(getTitle => getLabel(value, dateFormat, timeFormat, translate, toLocalDateTime, timeSelect, buttonLabel, getTitle), [value, dateFormat, timeFormat, translate, toLocalDateTime, buttonLabel, timeSelect]);

package/esm/dateInputRaw/utils/getLabel.js

@@ -26,7 +26,7 @@ injectString("tr", "Pick a date", "Bir tarih se\xE7in");
 injectString("zh-Hans", "Pick a date", "\u9009\u62E9\u65E5\u671F");
 injectString("zh-TW", "Pick a date", "\u9078\u64C7\u65E5\u671F");
 injectString("ro-RO", "Pick a date", "Alege\u021Bi o dat\u0103");
-injectString("ar-SA", "Pick a date", "\u0627\u062E\u062A\u064A\u0627\u0631 \u062A\u0627\u0631\u064A\u062E");
+injectString("ar", "Pick a date", "\u0627\u062E\u062A\u064A\u0627\u0631 \u062A\u0627\u0631\u064A\u062E");
 injectString("cs", "Date filter:", "Date filter:");
 injectString("da-DK", "Date filter:", "Date filter:");
 injectString("de", "Date filter:", "Date filter:");
@@ -53,7 +53,7 @@ injectString("tr", "Date filter:", "Date filter:");
 injectString("zh-Hans", "Date filter:", "Date filter:");
 injectString("zh-TW", "Date filter:", "Date filter:");
 injectString("ro-RO", "Date filter:", "Filtru de date:");
-injectString("ar-SA", "Date filter:", "\u062A\u0635\u0641\u064A\u0629 \u0627\u0644\u062A\u0627\u0631\u064A\u062E:");
+injectString("ar", "Date filter:", "\u062A\u0635\u0641\u064A\u0629 \u0627\u0644\u062A\u0627\u0631\u064A\u062E:");
 export const getLabel = (value, dateFormat, timeFormat, translate, toLocalDateTime, timeSelect, buttonLabel, buttonTitle) => {
   if (!value) {
     return buttonLabel ? buttonLabel : translate("Pick a date");