@geotab/zenith 3.11.1 → 3.12.0

package/esm/summaryTile/summaryTile.js

@@ -1,4 +1,12 @@
 import { injectString } from "../utils/localization/translationsDictionary";
+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) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
@@ -38,7 +46,7 @@ injectString("tr", "Information", "Bilgi");
 injectString("zh-Hans", "Information", "\u4FE1\u606F");
 injectString("zh-TW", "Information", "\u8CC7\u8A0A");
 injectString("ro-RO", "Information", "Informa\u021Bii");
-injectString("ar-SA", "Information", "\u0645\u0639\u0644\u0648\u0645\u0627\u062A");
+injectString("ar", "Information", "\u0645\u0639\u0644\u0648\u0645\u0627\u062A");
 export var SummaryTileType;
 (function (SummaryTileType) {
   SummaryTileType["Error"] = "error";
@@ -58,6 +66,14 @@ export var SummaryTileSize;
   SummaryTileSize["Medium"] = "medium";
 })(SummaryTileSize || (SummaryTileSize = {}));
 export const SummaryTileDisplayName = "SummaryTile";
+function getAriaCurrentProps(tileType, isInteractive) {
+  if (tileType === SummaryTileType.Active && isInteractive) {
+    return {
+      "aria-current": "page"
+    };
+  }
+  return {};
+}
 /**
  * Displays a concise, user-friendly overview of data — primarily used above reports
  * to help users quickly grasp key metrics from large datasets without diving into the details.
@@ -72,20 +88,32 @@ export const SummaryTileDisplayName = "SummaryTile";
  *
  * Use inside `SummaryTileBar` to group multiple tiles in a scrollable row.
  */
-export const SummaryTile = ({
-  className,
-  children,
-  size = SummaryTileSize.Small,
-  title,
-  tileType = SummaryTileType.Default,
-  id,
-  onClick,
-  tooltipText,
-  tooltipAlignment = "top",
-  tooltipAriaLabel,
-  isLoading = false,
-  dataAnalyticsId
-}) => {
+export const SummaryTile = _a => {
+  var {
+      className,
+      children,
+      size = SummaryTileSize.Small,
+      title,
+      tileType = SummaryTileType.Default,
+      id,
+      onClick,
+      tooltipText,
+      tooltipAlignment = "top",
+      tooltipAriaLabel,
+      tooltipSize: _tooltipSize,
+      isLoading = false,
+      dataAnalyticsId,
+      grid: _grid,
+      gridStart: _gridStart,
+      gridLg: _gridLg,
+      gridLgStart: _gridLgStart,
+      gridMd: _gridMd,
+      gridMdStart: _gridMdStart,
+      gridSm: _gridSm,
+      gridSmStart: _gridSmStart,
+      gridFitContent: _gridFitContent
+    } = _a,
+    ariaProps = __rest(_a, ["className", "children", "size", "title", "tileType", "id", "onClick", "tooltipText", "tooltipAlignment", "tooltipAriaLabel", "tooltipSize", "isLoading", "dataAnalyticsId", "grid", "gridStart", "gridLg", "gridLgStart", "gridMd", "gridMdStart", "gridSm", "gridSmStart", "gridFitContent"]);
   const {
     translate
   } = useLanguage();
@@ -110,7 +138,7 @@ export const SummaryTile = ({
     "data-analytics-id": analyticsId
   };
   if (isLoading) {
-    return _jsxs("div", Object.assign({}, componentProps, {
+    return _jsxs("div", Object.assign({}, componentProps, ariaProps, {
       children: [_jsx("div", {
         className: "zen-summary-tile__title-block",
         children: _jsx(Skeleton, {
@@ -139,20 +167,22 @@ export const SummaryTile = ({
     }),
     children: tooltipText
   }) : null;
-  const ariaCurrentProps = tileType === SummaryTileType.Active && isInteractive ? {
-    "aria-current": "page"
-  } : {};
+  const ariaCurrentProps = getAriaCurrentProps(tileType, isInteractive);
   // When both onClick and tooltipText are present, the tooltip trigger
   // (a <button>) cannot be nested inside the tile <button>. Render the
   // tooltip trigger as a sibling outside the clickable tile.
   if (onClick && tooltipText) {
-    return _jsxs("div", {
-      className: componentProps.className,
-      "data-summary-tile-id": componentProps["data-summary-tile-id"],
+    const {
+        onClick: _onClick,
+        "data-analytics-id": _dataAnalyticsId
+      } = componentProps,
+      containerProps = __rest(componentProps, ["onClick", "data-analytics-id"]);
+    return _jsxs("div", Object.assign({}, containerProps, {
+      role: ariaProps.role === "tab" ? "presentation" : undefined,
       children: [_jsxs("button", Object.assign({
         className: "zen-summary-tile__clickable-area",
         onClick: componentProps.onClick
-      }, ariaCurrentProps, {
+      }, ariaCurrentProps, ariaProps, {
         "data-analytics-id": analyticsId,
         children: [_jsx("div", {
           className: "zen-summary-tile__title-block",
@@ -164,11 +194,14 @@ export const SummaryTile = ({
           className: "zen-summary-tile__content",
           children: children
         })]
-      })), tooltipTrigger]
-    });
+      })), ariaProps.role ? _jsx("span", {
+        "aria-hidden": "true",
+        children: tooltipTrigger
+      }) : tooltipTrigger]
+    }));
   }
   const RootElement = isInteractive ? "button" : "div";
-  return _jsxs(RootElement, Object.assign({}, componentProps, ariaCurrentProps, {
+  return _jsxs(RootElement, Object.assign({}, componentProps, ariaCurrentProps, ariaProps, {
     children: [_jsxs("div", {
       className: "zen-summary-tile__title-block",
       children: [_jsx("div", {

package/esm/summaryTileBar/summaryTileBar.d.ts

@@ -1,12 +1,14 @@
 import "./summaryTileBar.less";
+import * as React from "react";
 import { ReactElement } from "react";
 import { ISummaryTile } from "../summaryTile/summaryTile";
-export interface ISummaryTileBar {
+export interface ISummaryTileBar extends Pick<React.AriaAttributes, "aria-label" | "aria-labelledby"> {
     children: ReactElement<ISummaryTile> | ReactElement<ISummaryTile>[];
     className?: string;
+    role?: "list" | "tablist";
 }
 export declare const SummaryTileBar: {
-    ({ className, children }: ISummaryTileBar): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }: ISummaryTileBar): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const SummaryTileBarDisplayName = "SummaryTileBar";

package/esm/summaryTileBar/summaryTileBar.js

@@ -7,14 +7,14 @@ import { useScrolling } from "../commonHelpers/arrowNavigation/hooks/useScrollin
 import { useManualScrolling } from "../commonHelpers/arrowNavigation/hooks/useManualScrolling";
 import { DeviceType } from "../commonHelpers/hooks/deviceType";
 import { useDeviceType } from "../commonHelpers/hooks/useDeviceType";
-export const SummaryTileBar = ({ className, children }) => {
+export const SummaryTileBar = ({ className, children, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => {
     const { isScrollable, scrollableElementRef, onMouseDown, onMouseUp } = useHoldOnScroll();
     const { scroll } = useManualScrolling({ elementRef: scrollableElementRef });
     const { onScroll, state } = useScrolling();
     const [deviceType, setDeviceType] = useState(DeviceType.Mobile);
     const isMobile = deviceType === DeviceType.Mobile;
     useDeviceType(setDeviceType);
-    return (_jsxs("div", { className: classNames(["zen-card-deck", isMobile ? "zen-card-deck--mobile" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx("div", { className: "zen-card-deck__cards-container", ref: scrollableElementRef, onScroll: onScroll, children: _jsx("ul", { className: "zen-card-deck__cards", role: "list", children: Children.map(children, child => (_jsx("li", { children: child }))) }) }), !isScrollable && (_jsxs("div", { className: "zen-card-deck__arrows", children: [_jsx(ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "left", isHidden: false, disabled: state.scrolledLeft, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp }), _jsx(ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "right", isHidden: false, disabled: state.scrolledRight, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }))] }));
+    return (_jsxs("div", { className: classNames(["zen-card-deck", isMobile ? "zen-card-deck--mobile" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx("div", { className: "zen-card-deck__cards-container", ref: scrollableElementRef, onScroll: onScroll, children: _jsx("ul", { className: "zen-card-deck__cards", role: role !== null && role !== void 0 ? role : "list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children: Children.map(children, child => (_jsx("li", { role: role === "tablist" ? "presentation" : undefined, children: child }))) }) }), !isScrollable && (_jsxs("div", { className: "zen-card-deck__arrows", children: [_jsx(ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "left", isHidden: false, disabled: state.scrolledLeft, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp }), _jsx(ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "right", isHidden: false, disabled: state.scrolledRight, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }))] }));
 };
 export const SummaryTileBarDisplayName = "SummaryTileBar";
 SummaryTileBar.displayName = SummaryTileBarDisplayName;

package/esm/table/actions/actionsMenu.js

@@ -34,7 +34,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");
 injectString("cs", "Actions", "Akce");
 injectString("da-DK", "Actions", "Handlinger");
 injectString("de", "Actions", "Aktionen");
@@ -61,7 +61,7 @@ injectString("tr", "Actions", "Eylemler");
 injectString("zh-Hans", "Actions", "\u64CD\u4F5C");
 injectString("zh-TW", "Actions", "\u52D5\u4F5C");
 injectString("ro-RO", "Actions", "M\u0103suri");
-injectString("ar-SA", "Actions", "\u0625\u062C\u0631\u0627\u0621\u0627\u062A");
+injectString("ar", "Actions", "\u0625\u062C\u0631\u0627\u0621\u0627\u062A");
 const getMenuItems = (entity, isNested, render, primaryActions) => {
   if (!render && !primaryActions) {
     return null;

package/esm/table/children/useTableChildren.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, RefObject } from "react";
-export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, selectAll: () => void, turnOffSelectAll?: boolean, activeId?: string, gridRef?: RefObject<HTMLElement | null>, onCloseDetailPanel?: () => void) => {
+export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, activeId?: string, gridRef?: RefObject<HTMLElement | null>, onCloseDetailPanel?: () => void) => {
     bulkActions: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     pagination: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     activePage: number | undefined;

package/esm/table/children/useTableChildren.js

@@ -24,7 +24,7 @@ const isChildElement = function (child, expectedType) {
     }
     return false;
 };
-export const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, selectAll, turnOffSelectAll, activeId, gridRef, onCloseDetailPanel) => useMemo(() => {
+export const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel) => useMemo(() => {
     let bulkActions = undefined;
     let tablePagination = undefined;
     let activePage = undefined;
@@ -39,7 +39,7 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
         }
         if (isChildElement(child, TableBulkActions.displayName)) {
             const bulkActionButtons = child.props.children || [];
-            bulkActions = (_jsx(BulkActions, { gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, onSelectAll: selectAll, turnOffSelectAll: turnOffSelectAll, children: bulkActionButtons }));
+            bulkActions = (_jsx(BulkActions, { gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, children: bulkActionButtons }));
             return;
         }
         if (isChildElement(child, TablePagination.displayName)) {
@@ -100,4 +100,4 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
         detailPanel: detailPanel,
         other: other
     };
-}, [children, clearSelection, isMobile, selected, gridRef, allSelected, selectAll, turnOffSelectAll, activeId, onCloseDetailPanel]);
+}, [children, clearSelection, isMobile, selected, gridRef, allSelected, activeId, onCloseDetailPanel]);

package/esm/table/detailPanel/detailPanel.js

@@ -33,7 +33,7 @@ injectString("tr", "Details", "Ayr\u0131nt\u0131lar");
 injectString("zh-Hans", "Details", "\u8BE6\u7EC6\u4FE1\u606F");
 injectString("zh-TW", "Details", "\u8A73\u7D30\u8CC7\u8A0A");
 injectString("ro-RO", "Details", "Detalii");
-injectString("ar-SA", "Details", "\u0627\u0644\u062A\u0641\u0627\u0635\u064A\u0644");
+injectString("ar", "Details", "\u0627\u0644\u062A\u0641\u0627\u0635\u064A\u0644");
 export const DetailPanel = ({
   id,
   children,

package/esm/table/detailPanel/detailPanelHeader.js

@@ -31,7 +31,7 @@ injectString("tr", "Details", "Ayr\u0131nt\u0131lar");
 injectString("zh-Hans", "Details", "\u8BE6\u7EC6\u4FE1\u606F");
 injectString("zh-TW", "Details", "\u8A73\u7D30\u8CC7\u8A0A");
 injectString("ro-RO", "Details", "Detalii");
-injectString("ar-SA", "Details", "\u0627\u0644\u062A\u0641\u0627\u0635\u064A\u0644");
+injectString("ar", "Details", "\u0627\u0644\u062A\u0641\u0627\u0635\u064A\u0644");
 injectString("cs", "Close", "Zav\u0159\xEDt");
 injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
@@ -58,7 +58,7 @@ injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
 injectString("ro-RO", "Close", "\xCEnchide");
-injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
+injectString("ar", "Close", "\u0625\u063A\u0644\u0627\u0642");
 export const DetailPanelHeader = ({
   id,
   title,

package/esm/table/flexible/columnSettings.js

@@ -28,7 +28,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");
@@ -55,7 +55,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");
 export const ColumnSettings = ({
   onReset,
   showFooter = true,

package/esm/table/flexible/columnsList.js

@@ -1,118 +1,53 @@
-import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo } from "react";
 import { CheckboxState } from "../../checkbox/checkboxState";
 import { SelectList } from "../../selectList/selectList";
 import { groupColumns } from "./groupColumns";
-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,
-  lastVisibleColumnId,
-  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, lastVisibleColumnId, 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: !!c.alwaysVisible || c.id === lastVisibleColumnId,
+        showCheckbox: true,
+        children: c.title
+    })), [columns, sortColumnsInt, lastVisibleColumnId]);
+    const allDisabled = useMemo(() => items.every(item => item.disabled), [items]);
+    const state = columns.reduce((res, c) => {
+        res.set(c.id, settings.get(c.id) !== 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.id, 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: !!c.alwaysVisible || c.id === lastVisibleColumnId,
-    showCheckbox: true,
-    children: c.title
-  })), [columns, sortColumnsInt, lastVisibleColumnId]);
-  const allDisabled = useMemo(() => items.every(item => item.disabled), [items]);
-  const state = columns.reduce((res, c) => {
-    res.set(c.id, settings.get(c.id) !== 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.id, 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,
-  onChange,
-  sortGroups,
-  sortColumns
-}) {
-  const groupped = groupColumns(columns);
-  const sortGroupsInt = useCallback((a, b) => {
-    if (sortGroups) {
-      return sortGroups(a[0], b[0]);
-    }
-    return 0;
-  }, [sortGroups]);
-  const visibleColumns = columns.filter(c => settings.get(c.id) !== false);
-  const lastVisibleColumnId = visibleColumns.length === 1 ? visibleColumns[0].id : undefined;
-  return Array.from(groupped.entries()).sort(sortGroupsInt).map(([title, cs]) => _jsx(SubColumnsList, {
-    title: title,
-    columns: cs,
-    settings: settings,
-    lastVisibleColumnId: lastVisibleColumnId,
-    onChange: onChange,
-    sortColumns: sortColumns
-  }, cs.map(c => c.id).join("-")));
-}
+export function ColumnSettingsList({ columns, settings, onChange, sortGroups, sortColumns }) {
+    const groupped = groupColumns(columns);
+    const sortGroupsInt = useCallback((a, b) => {
+        if (sortGroups) {
+            return sortGroups(a[0], b[0]);
+        }
+        return 0;
+    }, [sortGroups]);
+    const visibleColumns = columns.filter(c => settings.get(c.id) !== false);
+    const lastVisibleColumnId = visibleColumns.length === 1 ? visibleColumns[0].id : undefined;
+    return Array.from(groupped.entries())
+        .sort(sortGroupsInt)
+        .map(([title, cs]) => (_jsx(SubColumnsList, { title: title, columns: cs, settings: settings, lastVisibleColumnId: lastVisibleColumnId, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
+}

package/esm/table/flexible/columnsPopup.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from "react";
 import { IColumnSettings } from "./interfaces";
 import { IListColumn } from "../table";
-import "./columnsPopup.less";
+import "../../commonStyles/columnsList.less";
 import { IRowEntity } from "../../dataGrid/row/row";
 import { IEntityWithId } from "../../commonHelpers/entity";
 interface IColumnsPopupProps<T extends IRowEntity<N>, N extends IEntityWithId> {

package/esm/table/flexible/columnsPopup.js

@@ -31,7 +31,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 ColumnsPopup = ({
   onReset,
   onChange,

package/esm/table/nested/useNestedRows.js

@@ -30,7 +30,7 @@ injectString("tr", "Collapse", "Daralt");
 injectString("zh-Hans", "Collapse", "\u6298\u53E0");
 injectString("zh-TW", "Collapse", "\u647A\u758A");
 injectString("ro-RO", "Collapse", "Restr\xE2nge\u021Bi");
-injectString("ar-SA", "Collapse", "\u0637\u064A");
+injectString("ar", "Collapse", "\u0637\u064A");
 injectString("cs", "Expand", "Rozbalit");
 injectString("da-DK", "Expand", "Udvid");
 injectString("de", "Expand", "Erweitern");
@@ -57,7 +57,7 @@ injectString("tr", "Expand", "Geni\u015Flet");
 injectString("zh-Hans", "Expand", "\u5C55\u5F00");
 injectString("zh-TW", "Expand", "\u5C55\u958B");
 injectString("ro-RO", "Expand", "Extinde\u021Bi");
-injectString("ar-SA", "Expand", "\u062A\u0648\u0633\u064A\u0639");
+injectString("ar", "Expand", "\u062A\u0648\u0633\u064A\u0639");
 export const NestedWrapperName = "Nested";
 export const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
   const {

package/esm/table/selectable/selectableHeader.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");
 injectString("cs", "Multiple row selection menu", "Nab\xEDdka s\xA0v\xEDcen\xE1sobn\xFDm v\xFDb\u011Brem \u0159\xE1dk\u016F");
 injectString("da-DK", "Multiple row selection menu", "Menu til valg af flere r\xE6kker");
 injectString("de", "Multiple row selection menu", "Men\xFC Auswahl mehrerer Reihen");
@@ -114,7 +115,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 getSelectionOptions = translate => [{
   id: "all",
   value: SelectionState.All,

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

@@ -16,6 +16,14 @@ export interface ISelectableRowsOptions<T extends IRowEntity<N>, N extends IEnti
     checkboxTitle?: (entity: T | N) => string;
     headerTitle?: (state: SelectionState) => string;
     turnOffSelectAll?: boolean;
+    /**
+     * When `true`, the header checkbox emits the current page's IDs instead of `{ all: true }`.
+     * When `undefined`, falls back to `turnOffSelectAll` for backward compatibility.
+     *
+     * Note: avoid setting this to `false` alongside `turnOffSelectAll: true` — the checkbox
+     * will emit `{ all: true }` while the dropdown hides the "Select all" option, which is inconsistent.
+     */
+    checkboxSelectsCurrentPage?: boolean;
     checkboxPlaceholder?: boolean;
     strategy?: TSelectionStrategy;
     selectAll?: boolean;

package/esm/table/selectable/useSelectableRows.js

@@ -36,7 +36,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", "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");
@@ -63,7 +63,7 @@ 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");
 export const getEmptySelection = () => ({
   all: false,
   selected: []
@@ -179,8 +179,16 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     return translate("Deselect all");
   }, [selectable, selectableState, state, translate]);
   const isEntityChecked = useCallback((entity, isNested) => isRowChecked(selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested), [selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+  const hasSelectable = !!selectable;
+  const selectableCheckboxSelectsCurrentPage = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxSelectsCurrentPage;
+  const selectableTurnOffSelectAll = selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll;
+  const selectableCheckboxInHeader = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxInHeader;
+  const selectableSelectionLimit = selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit;
+  const selectableHeader = selectable === null || selectable === void 0 ? void 0 : selectable.header;
+  const checkboxEmitsCurrentPage = selectableCheckboxSelectsCurrentPage !== null && selectableCheckboxSelectsCurrentPage !== void 0 ? selectableCheckboxSelectsCurrentPage : selectableTurnOffSelectAll;
+  const checkboxInHeaderValue = selectableCheckboxInHeader !== undefined ? selectableCheckboxInHeader : selectableSelectionLimit !== undefined ? false : undefined;
   const wrapper = useMemo(() => {
-    if (!selectable) {
+    if (!hasSelectable) {
       return null;
     }
     return {
@@ -224,7 +232,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
           onChange: newValue => {
             var _a, _b;
             if (newValue) {
-              const newState = selectable.turnOffSelectAll ? SelectionState.CurrentPage : SelectionState.All;
+              const newState = checkboxEmitsCurrentPage ? SelectionState.CurrentPage : SelectionState.All;
               setState(newState);
               onChangeSelectionState(newState);
             } else {
@@ -242,18 +250,18 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
             }
           },
           calculateSelectionState: () => selectableState,
-          checkboxInHeader: selectable.checkboxInHeader !== undefined ? selectable.checkboxInHeader : selectable.selectionLimit !== undefined ? false : undefined,
-          header: selectable.header,
+          checkboxInHeader: checkboxInHeaderValue,
+          header: selectableHeader,
           onSelect: newState => {
             setState(newState);
             onChangeSelectionState(newState);
           },
-          turnOffSelectAll: selectable.turnOffSelectAll
+          turnOffSelectAll: selectableTurnOffSelectAll
         });
         return cell;
       }
     };
-  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
   const selectableFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!entity) {

package/esm/table/sortable/mobileSortControl.js

@@ -35,7 +35,7 @@ injectString("tr", "Selected", "Se\xE7ildi");
 injectString("zh-Hans", "Selected", "\u9009\u4E2D\u7684");
 injectString("zh-TW", "Selected", "\u5DF2\u9078\u53D6");
 injectString("ro-RO", "Selected", "Selec\u021Bie");
-injectString("ar-SA", "Selected", "\u0645\u062D\u062F\u062F");
+injectString("ar", "Selected", "\u0645\u062D\u062F\u062F");
 injectString("en", "Sort by Descending", "Sort by Descending");
 const SORT_ASC = "sort-ascending";
 const SORT_DESC = "sort-descending";