@geotab/zenith 3.11.1 → 3.12.0

package/dist/controlledPopup/controlledPopup.js

@@ -6,10 +6,12 @@ const react_1 = require("react");
 const absolute_1 = require("../absolute/absolute");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
+const useRTLAlignment_1 = require("../utils/localization/useRTLAlignment");
 const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
     const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
     const isClientReady = (0, useClientReady_1.useClientReady)();
+    const rtlAlignment = (0, useRTLAlignment_1.useRTLAlignment)(alignment !== null && alignment !== void 0 ? alignment : "bottom-left");
     (0, react_1.useEffect)(() => {
         if (!triggerRef.current || !isClientReady) {
             return;
@@ -24,6 +26,6 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
+    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, Object.assign({ triggerRef: triggerRef, alignment: rtlAlignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
 };
 exports.ControlledPopup = ControlledPopup;

package/dist/dataFeed/feedExpandControl/feedExpandControl.js

@@ -1,10 +1,15 @@
 "use strict";
 
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TRANSLATIONS = exports.FeedExpandControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("en", "Collapse feed", "Collapse feed");
+injectString("en", "Expand feed", "Expand feed");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const buttonType_1 = require("../../button/buttonType");
 const iconLayoutWindow3_1 = require("../../icons/iconLayoutWindow3");

package/dist/dataGrid/cell/cell.d.ts

@@ -13,8 +13,9 @@ export interface IDataGridCell<T extends IEntityWithId> extends IZenComponentPro
     defaultValue: string | undefined;
     entity: T;
     width?: number;
+    maxWidth?: number;
     colspan?: number;
     onClick?: () => void;
     isActive?: boolean;
 }
-export declare const DataGridCell: <T extends IEntityWithId>({ index, limited, visibleOnHover, isVisible, width, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }: IDataGridCell<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridCell: <T extends IEntityWithId>({ index, limited, visibleOnHover, isVisible, width, maxWidth, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }: IDataGridCell<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/dataGrid/cell/cell.js

@@ -7,7 +7,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const basicColumn_1 = require("../columns/basicColumn");
 const isActiveElement_1 = require("../../list/utils/isActiveElement");
 const zen_1 = require("../../utils/zen");
-const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }) => {
+const Cell = ({ index, limited, visibleOnHover, isVisible, width, maxWidth, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }) => {
     const [content, setContent] = (0, react_1.useState)("");
     const placeholderRenderer = (0, react_1.useCallback)(() => {
         const renderFn = renderPlaceholder || (() => "...");
@@ -72,6 +72,6 @@ const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, render
             visibleOnHover ? "zen-data-grid__row-cell--visible-on-hover" : "",
             onClick ? "zen-data-grid__row-cell--clickable" : "",
             limited ? "zen-ellipsis" : ""
-        ]), style: { minWidth: width || "auto", maxWidth: width || "auto" }, role: "gridcell", children: content }));
+        ]), style: { minWidth: width || "auto", maxWidth: maxWidth ? `${Math.max(width !== null && width !== void 0 ? width : 0, maxWidth)}px` : width || "auto" }, role: "gridcell", children: content }));
 };
 exports.DataGridCell = (0, react_1.memo)(Cell);

package/dist/dataGrid/columns/checkboxColumn/checkboxHeaderCell.js

@@ -38,7 +38,7 @@ injectString("tr", "Multiple row selection menu", "\xC7oklu s\u0131ra se\xE7imi
 injectString("zh-Hans", "Multiple row selection menu", "\u591A\u884C\u9009\u62E9\u83DC\u5355");
 injectString("zh-TW", "Multiple row selection menu", "\u591A\u5217\u9078\u64C7\u9078\u55AE");
 injectString("ro-RO", "Multiple row selection menu", "Meniu de selectare cu mai multe r\xE2nduri");
-injectString("ar-SA", "Multiple row selection menu", "\u0642\u0627\u0626\u0645\u0629 \u062A\u062D\u062F\u064A\u062F \u0635\u0641\u0648\u0641 \u0645\u062A\u0639\u062F\u062F\u0629");
+injectString("ar", "Multiple row selection menu", "\u0642\u0627\u0626\u0645\u0629 \u062A\u062D\u062F\u064A\u062F \u0635\u0641\u0648\u0641 \u0645\u062A\u0639\u062F\u062F\u0629");
 const iconChevronDownSmall_1 = require("../../../icons/iconChevronDownSmall");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
 const CheckboxHandler = ({

package/dist/dataGrid/dataGrid.js

@@ -34,7 +34,7 @@ injectString("tr", "Action", "Eylem");
 injectString("zh-Hans", "Action", "\u64CD\u4F5C");
 injectString("zh-TW", "Action", "\u52D5\u4F5C");
 injectString("ro-RO", "Action", "M\u0103sur\u0103");
-injectString("ar-SA", "Action", "\u0625\u062C\u0631\u0627\u0621");
+injectString("ar", "Action", "\u0625\u062C\u0631\u0627\u0621");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const row_1 = require("./row/row");
@@ -57,7 +57,7 @@ const getHeaderPropsFromWrappers = wrappers => wrappers.reduce((result, wrapper)
   const props = (_a = wrapper.getHeaderProps) === null || _a === void 0 ? void 0 : _a.call(wrapper);
   return props ? Object.assign(Object.assign({}, result), props) : result;
 }, {});
-const getColumnWidth = defaultWidth => Math.floor(Math.max(defaultWidth, exports.MIN_CELL_WIDTH));
+const getColumnWidth = (defaultWidth, minWidth) => Math.floor(Math.max(defaultWidth, minWidth !== null && minWidth !== void 0 ? minWidth : exports.MIN_CELL_WIDTH));
 const EmptyList = ({
   children
 }) => (0, jsx_runtime_1.jsx)("div", {
@@ -154,12 +154,13 @@ const DataGridInner = ({
     setVisibleRows(visible);
   }, [entities]);
   const listOfDefaultWidthColumns = (0, react_1.useMemo)(() => columnsList.map(column => column.meta.defaultWidth), [columnsList]);
+  const listOfMinWidthColumns = (0, react_1.useMemo)(() => columnsList.map(column => column.meta.minWidth), [columnsList]);
   const {
     result: observerResult
   } = (0, useResizeObserver_1.useResizeObserver)({
     target: gridRef.current
   });
-  const allocatedSpace = listOfDefaultWidthColumns.reduce((acc, width) => acc + (width === undefined ? 0 : getColumnWidth(width)), 0);
+  const allocatedSpace = listOfDefaultWidthColumns.reduce((acc, width, index) => acc + (width === undefined ? 0 : getColumnWidth(width, listOfMinWidthColumns[index])), 0);
   const unallocatedSpace = observerResult && observerResult.contentRect.width - allocatedSpace || 0;
   const flexibleColumnsQty = listOfDefaultWidthColumns.filter(width => width === undefined).length;
   const flexibleColumnWidth = getColumnWidth(unallocatedSpace / flexibleColumnsQty);
@@ -182,18 +183,19 @@ const DataGridInner = ({
   }, [updateScroll, scheduleLazyRender]);
   const getCellParams = (0, react_1.useCallback)(columnIndex => {
     const defaultWidth = listOfDefaultWidthColumns[columnIndex];
+    const minWidth = listOfMinWidthColumns[columnIndex];
     const limited = !!defaultWidth && defaultWidth > 0;
     const isFirst = columnIndex === 0;
     const isLast = columnIndex === listOfDefaultWidthColumns.length - 1;
     // 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);
     return {
       limited,
       isFirst,
       isLast,
       width
     };
-  }, [listOfDefaultWidthColumns, flexibleColumnWidth]);
+  }, [listOfDefaultWidthColumns, listOfMinWidthColumns, flexibleColumnWidth]);
   const renderHeaderCell = (0, react_1.useCallback)((column, columnIndex) => {
     var _a;
     const {
@@ -232,6 +234,7 @@ const DataGridInner = ({
     expanded: expandedRows && expandedRows.indexOf(entity.id) > -1,
     onExpandedChange: entity.children && entity.children.length > 0 ? isExpanded => onExpandedChange && onExpandedChange(entity.id, isExpanded) : undefined,
     isActive: active === entity.id,
+    active: active,
     onClick: onClick,
     isTreeGrid: isTreeGrid,
     ariaPosinset: entityIndex + 1,

package/dist/dataGrid/emptySearchList/emptySearchList.js

@@ -44,7 +44,7 @@ injectString("tr", "Try adjusting your search or filter.", "Araman\u0131z\u0131
 injectString("zh-Hans", "Try adjusting your search or filter.", "\u5C1D\u8BD5\u8C03\u6574\u60A8\u7684\u641C\u7D22\u6216\u7B5B\u9009\u6761\u4EF6\u3002");
 injectString("zh-TW", "Try adjusting your search or filter.", "\u8ACB\u5617\u8A66\u8ABF\u6574\u60A8\u7684\u641C\u5C0B\u6216\u7BE9\u9078\u689D\u4EF6\u3002");
 injectString("ro-RO", "Try adjusting your search or filter.", "\xCEncerca\u021Bi s\u0103 ajusta\u021Bi c\u0103utarea sau filtrul.");
-injectString("ar-SA", "Try adjusting your search or filter.", "\u062D\u0627\u0648\u0644 \u062A\u0639\u062F\u064A\u0644 \u0627\u0644\u0628\u062D\u062B \u0623\u0648 \u0627\u0644\u062A\u0635\u0641\u064A\u0629.");
+injectString("ar", "Try adjusting your search or filter.", "\u062D\u0627\u0648\u0644 \u062A\u0639\u062F\u064A\u0644 \u0627\u0644\u0628\u062D\u062B \u0623\u0648 \u0627\u0644\u062A\u0635\u0641\u064A\u0629.");
 const EmptySearchList = _a => {
   var props = __rest(_a, []);
   const {

package/dist/dataGrid/entitiesListActions/actions/columnsListButton.js

@@ -39,7 +39,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");
 const ColumnsListButtonInner = ({
   onClick,
   ref

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

@@ -43,7 +43,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");
@@ -70,7 +70,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");
 const FullScreenButton = ({
   fullScreen,
   title,

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

@@ -6,10 +6,12 @@ const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const cell_1 = require("../cell/cell");
 exports.MIN_CELL_WIDTH = 100;
-const getColumnWidth = (defaultWidth) => Math.floor(Math.max(defaultWidth, exports.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 : exports.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 = (0, react_1.useMemo)(() => columns.map(column => column.meta.defaultWidth), [columns]);
+    const listOfMinWidthColumns = (0, react_1.useMemo)(() => columns.map(column => column.meta.minWidth), [columns]);
+    const listOfMaxWidthColumns = (0, react_1.useMemo)(() => columns.map(column => column.meta.maxWidth), [columns]);
     const getColWidth = (0, react_1.useCallback)((columnIndex, colspan) => {
         const colsp = colspan || 1;
         let columnWidth = 0;
@@ -18,26 +20,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 = (0, react_1.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 = (0, react_1.useId)();
     const renderCells = (0, react_1.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;
@@ -52,9 +56,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((0, jsx_runtime_1.jsx)(cell_1.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((0, jsx_runtime_1.jsx)(cell_1.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 = (0, react_1.useMemo)(() => renderCells(entity, false), [entity, renderCells]);
     const nestedCells = (0, react_1.useMemo)(() => (expanded && entity.children ? entity.children : []).map(nestedEntity => renderCells(nestedEntity, true)), [entity.children, expanded, renderCells]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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: (0, classNames_1.classNames)(["zen-data-grid__row", className || "", isLastRow ? "zen-data-grid__row--last" : ""]), children: cells }, mainRowId), nestedCells.map((nestedRow, index) => ((0, jsx_runtime_1.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/dist/dataGrid/withFlexibleColumns/components/columnSettings.js

@@ -37,7 +37,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");
@@ -64,7 +64,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/dist/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/dist/dataGrid/withFlexibleColumns/components/columnSettingsList.js

@@ -1,126 +1,55 @@
 "use strict";
-
-const {
-  injectString
-} = require("../../../utils/localization/translationsDictionary");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnSettingsList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const groupColumns_1 = require("../../extensions/groupColumns");
 const selectList_1 = require("../../../selectList/selectList");
 const checkboxState_1 = require("../../../checkbox/checkboxState");
-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 useLanguage_1 = require("../../../utils/localization/useLanguage");
-const SubColumnsList = ({
-  title,
-  columns,
-  settings,
-  disabledColumns,
-  onChange,
-  sortColumns
-}) => {
-  const id = (0, react_1.useId)();
-  const {
-    translate
-  } = (0, useLanguage_1.useLanguage)();
-  const sortColumnsInt = (0, react_1.useCallback)((a, b) => {
-    if (sortColumns) {
-      return sortColumns(a.title, b.title);
+const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, sortColumns }) => {
+    const id = (0, react_1.useId)();
+    const sortColumnsInt = (0, react_1.useCallback)((a, b) => {
+        if (sortColumns) {
+            return sortColumns(a.title, b.title);
+        }
+        return 0;
+    }, [sortColumns]);
+    const items = (0, react_1.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 = (0, react_1.useMemo)(() => items.every(item => item.disabled), [items]);
+    const state = columns.reduce((res, c) => {
+        res.set(c.id, settings.get(c.name) !== false ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
+        return res;
+    }, new Map());
+    const onChangeItem = (0, react_1.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_1.CheckboxState.On);
+        });
+        onChange && onChange(newSettings);
+    }, [columns, settings, onChange]);
+    const list = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(selectList_1.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 = (0, react_1.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 = (0, react_1.useMemo)(() => items.every(item => item.disabled), [items]);
-  const state = columns.reduce((res, c) => {
-    res.set(c.id, settings.get(c.name) !== false ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
-    return res;
-  }, new Map());
-  const onChangeItem = (0, react_1.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_1.CheckboxState.On);
-    });
-    onChange && onChange(newSettings);
-  }, [columns, settings, onChange]);
-  const list = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(selectList_1.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 (0, jsx_runtime_1.jsxs)("div", {
-    className: "zen-columns-list__sub-section",
-    children: [(0, jsx_runtime_1.jsx)("div", {
-      className: "zen-columns-list__title zen-ellipsis",
-      children: title
-    }), list]
-  });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "zen-columns-list__sub-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-columns-list__title zen-ellipsis", "aria-hidden": "true", children: title }), list] }));
 };
-function ColumnSettingsList({
-  columns,
-  settings,
-  disabledColumns,
-  onChange,
-  sortGroups,
-  sortColumns
-}) {
-  const groupped = (0, groupColumns_1.groupColumns)(columns);
-  const sortGroupsInt = (0, react_1.useCallback)((a, b) => {
-    if (sortGroups) {
-      return sortGroups(a[0], b[0]);
-    }
-    return 0;
-  }, [sortGroups]);
-  return Array.from(groupped.entries()).sort(sortGroupsInt).map(([title, cs]) => (0, jsx_runtime_1.jsx)(SubColumnsList, {
-    title: title,
-    columns: cs,
-    settings: settings,
-    disabledColumns: disabledColumns,
-    onChange: onChange,
-    sortColumns: sortColumns
-  }, cs.map(c => c.id).join("-")));
+function ColumnSettingsList({ columns, settings, disabledColumns, onChange, sortGroups, sortColumns }) {
+    const groupped = (0, groupColumns_1.groupColumns)(columns);
+    const sortGroupsInt = (0, react_1.useCallback)((a, b) => {
+        if (sortGroups) {
+            return sortGroups(a[0], b[0]);
+        }
+        return 0;
+    }, [sortGroups]);
+    return Array.from(groupped.entries())
+        .sort(sortGroupsInt)
+        .map(([title, cs]) => ((0, jsx_runtime_1.jsx)(SubColumnsList, { title: title, columns: cs, settings: settings, disabledColumns: disabledColumns, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
 }
-exports.ColumnSettingsList = ColumnSettingsList;
+exports.ColumnSettingsList = ColumnSettingsList;

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

@@ -1,5 +1,8 @@
 "use strict";
 
+const {
+  injectString
+} = require("../../../utils/localization/translationsDictionary");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,6 +13,7 @@ const mobileSheet_1 = require("../../../mobileSheet/mobileSheet");
 const button_1 = require("../../../button/button");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
 const footerButtons_1 = require("../../../footerButtons/footerButtons");
+injectString("en", "Customize view", "Customize view");
 const ColumnSettingsSidePanelComp = ({
   triggerRef,
   isOpen,

package/dist/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -25,33 +25,33 @@ const useLanguage_1 = require("../../utils/localization/useLanguage");
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-injectString("cs", "Column Settings", "Nastaven\xED sloupc\u016F");
-injectString("da-DK", "Column Settings", "Kolonneindstillinger");
-injectString("de", "Column Settings", "Spalteneinstellungen");
-injectString("en", "Column Settings", "Column Settings");
-injectString("es", "Column Settings", "Configuraci\xF3n de columnas");
-injectString("fi-FI", "Column Settings", "Sarakkeiden asetukset");
-injectString("fr", "Column Settings", "Param\xE8tres des colonnes");
-injectString("fr-FR", "Column Settings", "Param\xE8tres des colonnes");
-injectString("hu-HU", "Column Settings", "Oszlopbe\xE1ll\xEDt\xE1sok");
-injectString("id", "Column Settings", "Pengaturan Kolom");
-injectString("it", "Column Settings", "Impostazioni colonna");
-injectString("ja", "Column Settings", "\u5217\u306E\u8A2D\u5B9A");
-injectString("ko-KR", "Column Settings", "\uC5F4 \uC124\uC815");
-injectString("ms", "Column Settings", "Tetapan Lajur");
-injectString("nb-NO", "Column Settings", "Kolonneinnstillinger");
-injectString("nl", "Column Settings", "Kolominstellingen");
-injectString("pl", "Column Settings", "Ustawienia kolumn");
-injectString("pt-BR", "Column Settings", "Configura\xE7\xF5es da coluna");
-injectString("pt-PT", "Column Settings", "Configura\xE7\xF5es de coluna");
-injectString("sk-SK", "Column Settings", "Nastavenia st\u013Apcov");
-injectString("sv", "Column Settings", "Kolumninst\xE4llningar");
-injectString("th", "Column Settings", "\u0E01\u0E32\u0E23\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C");
-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("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", "Select visible columns", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0623\u0639\u0645\u062F\u0629 \u0627\u0644\u0645\u0631\u0626\u064A\u0629");
 const withFlexibleColumns = DataGridComponent => {
   const FlexibleColumnsComponent = props => {
     var _a, _b;
@@ -218,7 +218,7 @@ const withFlexibleColumns = DataGridComponent => {
           children: listOfColumns
         })
       }) : (0, jsx_runtime_1.jsx)(popup_1.Popup, {
-        ariaLabel: translate("Column Settings"),
+        ariaLabel: translate("Select visible columns"),
         triggerRef: popupTriggerRef,
         alignment: "bottom-right",
         children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, {
@@ -238,4 +238,4 @@ const withFlexibleColumns = DataGridComponent => {
   return FlexibleColumnsComponent;
 };
 exports.withFlexibleColumns = withFlexibleColumns;
-exports.withFlexibleColumns.translations = ["Column Settings", ...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations, ...emptySearchList_1.EmptySearchList.translations];
+exports.withFlexibleColumns.translations = ["Select visible columns", ...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations, ...emptySearchList_1.EmptySearchList.translations];

package/dist/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;