@geotab/zenith 3.11.1 → 3.12.0

package/dist/stepperRaw/stepperRaw.js

@@ -1,5 +1,8 @@
 "use strict";
 
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,6 +20,8 @@ const getValidStep_1 = require("./utils/getValidStep");
 const getValidValue_1 = require("./utils/getValidValue");
 const getValidInputWidth_1 = require("./utils/getValidInputWidth");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+injectString("en", "Increase value", "Increase value");
+injectString("en", "Decrease value", "Decrease value");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useDrive_1 = require("../utils/theme/useDrive");
 const onBeforeInput_1 = require("./utils/onBeforeInput");

package/dist/summary/summary.js

@@ -39,7 +39,7 @@ injectString("tr", "Summary color", "\xD6zet rengi");
 injectString("zh-Hans", "Summary color", "\u6458\u8981\u989C\u8272");
 injectString("zh-TW", "Summary color", "\u6458\u8981\u8272\u5F69");
 injectString("ro-RO", "Summary color", "Culoare sumar");
-injectString("ar-SA", "Summary color", "\u0644\u0648\u0646 \u0627\u0644\u0645\u0644\u062E\u0635");
+injectString("ar", "Summary color", "\u0644\u0648\u0646 \u0627\u0644\u0645\u0644\u062E\u0635");
 injectString("cs", "Information", "Informace");
 injectString("da-DK", "Information", "Information");
 injectString("de", "Information", "Information");
@@ -66,7 +66,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");
 const Summary = ({
   color,
   title,

package/dist/summaryTile/summaryTile.d.ts

@@ -19,7 +19,9 @@ export declare enum SummaryTileSize {
     Small = "small",
     Medium = "medium"
 }
-export interface ISummaryTile extends IZenComponentProps, IZenGridItem {
+export interface ISummaryTile extends IZenComponentProps, IZenGridItem, Pick<React.AriaAttributes, "aria-selected" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-busy"> {
+    /** ARIA role forwarded to the root element. */
+    role?: React.AriaRole;
     /**
      * Reflects the state or mood of the tile. Defaults to `SummaryTileType.Default`.
      *
@@ -75,6 +77,6 @@ export declare const SummaryTileDisplayName = "SummaryTile";
  * Use inside `SummaryTileBar` to group multiple tiles in a scrollable row.
  */
 export declare const SummaryTile: {
-    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, tooltipAriaLabel, isLoading, dataAnalyticsId }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, tooltipAriaLabel, tooltipSize: _tooltipSize, isLoading, dataAnalyticsId, grid: _grid, gridStart: _gridStart, gridLg: _gridLg, gridLgStart: _gridLgStart, gridMd: _gridMd, gridMdStart: _gridMdStart, gridSm: _gridSm, gridSmStart: _gridSmStart, gridFitContent: _gridFitContent, ...ariaProps }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/summaryTile/summaryTile.js

@@ -34,6 +34,14 @@ var __importStar = this && this.__importStar || function (mod) {
   __setModuleDefault(result, mod);
   return result;
 };
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 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;
+};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -65,7 +73,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");
 const React = __importStar(require("react"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const tooltip_1 = require("../tooltip/tooltip");
@@ -97,6 +105,14 @@ var SummaryTileSize;
   SummaryTileSize["Medium"] = "medium";
 })(SummaryTileSize || (exports.SummaryTileSize = SummaryTileSize = {}));
 exports.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.
@@ -111,20 +127,32 @@ exports.SummaryTileDisplayName = "SummaryTile";
  *
  * Use inside `SummaryTileBar` to group multiple tiles in a scrollable row.
  */
-const SummaryTile = ({
-  className,
-  children,
-  size = SummaryTileSize.Small,
-  title,
-  tileType = SummaryTileType.Default,
-  id,
-  onClick,
-  tooltipText,
-  tooltipAlignment = "top",
-  tooltipAriaLabel,
-  isLoading = false,
-  dataAnalyticsId
-}) => {
+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
   } = (0, useLanguage_1.useLanguage)();
@@ -149,7 +177,7 @@ const SummaryTile = ({
     "data-analytics-id": analyticsId
   };
   if (isLoading) {
-    return (0, jsx_runtime_1.jsxs)("div", Object.assign({}, componentProps, {
+    return (0, jsx_runtime_1.jsxs)("div", Object.assign({}, componentProps, ariaProps, {
       children: [(0, jsx_runtime_1.jsx)("div", {
         className: "zen-summary-tile__title-block",
         children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, {
@@ -178,20 +206,22 @@ 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 (0, jsx_runtime_1.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 (0, jsx_runtime_1.jsxs)("div", Object.assign({}, containerProps, {
+      role: ariaProps.role === "tab" ? "presentation" : undefined,
       children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({
         className: "zen-summary-tile__clickable-area",
         onClick: componentProps.onClick
-      }, ariaCurrentProps, {
+      }, ariaCurrentProps, ariaProps, {
         "data-analytics-id": analyticsId,
         children: [(0, jsx_runtime_1.jsx)("div", {
           className: "zen-summary-tile__title-block",
@@ -203,11 +233,14 @@ const SummaryTile = ({
           className: "zen-summary-tile__content",
           children: children
         })]
-      })), tooltipTrigger]
-    });
+      })), ariaProps.role ? (0, jsx_runtime_1.jsx)("span", {
+        "aria-hidden": "true",
+        children: tooltipTrigger
+      }) : tooltipTrigger]
+    }));
   }
   const RootElement = isInteractive ? "button" : "div";
-  return (0, jsx_runtime_1.jsxs)(RootElement, Object.assign({}, componentProps, ariaCurrentProps, {
+  return (0, jsx_runtime_1.jsxs)(RootElement, Object.assign({}, componentProps, ariaCurrentProps, ariaProps, {
     children: [(0, jsx_runtime_1.jsxs)("div", {
       className: "zen-summary-tile__title-block",
       children: [(0, jsx_runtime_1.jsx)("div", {

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

@@ -10,14 +10,14 @@ const useScrolling_1 = require("../commonHelpers/arrowNavigation/hooks/useScroll
 const useManualScrolling_1 = require("../commonHelpers/arrowNavigation/hooks/useManualScrolling");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
-const SummaryTileBar = ({ className, children }) => {
+const SummaryTileBar = ({ className, children, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => {
     const { isScrollable, scrollableElementRef, onMouseDown, onMouseUp } = (0, useHoldOnScroll_1.useHoldOnScroll)();
     const { scroll } = (0, useManualScrolling_1.useManualScrolling)({ elementRef: scrollableElementRef });
     const { onScroll, state } = (0, useScrolling_1.useScrolling)();
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Mobile);
     const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
     (0, useDeviceType_1.useDeviceType)(setDeviceType);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-card-deck", isMobile ? "zen-card-deck--mobile" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-card-deck__cards-container", ref: scrollableElementRef, onScroll: onScroll, children: (0, jsx_runtime_1.jsx)("ul", { className: "zen-card-deck__cards", role: "list", children: react_1.Children.map(children, child => ((0, jsx_runtime_1.jsx)("li", { children: child }))) }) }), !isScrollable && ((0, jsx_runtime_1.jsxs)("div", { className: "zen-card-deck__arrows", children: [(0, jsx_runtime_1.jsx)(arrowButton_1.ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "left", isHidden: false, disabled: state.scrolledLeft, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp }), (0, jsx_runtime_1.jsx)(arrowButton_1.ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "right", isHidden: false, disabled: state.scrolledRight, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-card-deck", isMobile ? "zen-card-deck--mobile" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-card-deck__cards-container", ref: scrollableElementRef, onScroll: onScroll, children: (0, jsx_runtime_1.jsx)("ul", { className: "zen-card-deck__cards", role: role !== null && role !== void 0 ? role : "list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children: react_1.Children.map(children, child => ((0, jsx_runtime_1.jsx)("li", { role: role === "tablist" ? "presentation" : undefined, children: child }))) }) }), !isScrollable && ((0, jsx_runtime_1.jsxs)("div", { className: "zen-card-deck__arrows", children: [(0, jsx_runtime_1.jsx)(arrowButton_1.ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "left", isHidden: false, disabled: state.scrolledLeft, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp }), (0, jsx_runtime_1.jsx)(arrowButton_1.ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "right", isHidden: false, disabled: state.scrolledRight, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }))] }));
 };
 exports.SummaryTileBar = SummaryTileBar;
 exports.SummaryTileBarDisplayName = "SummaryTileBar";

package/dist/table/actions/actionsMenu.js

@@ -42,7 +42,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");
@@ -69,7 +69,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/dist/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/dist/table/children/useTableChildren.js

@@ -27,7 +27,7 @@ const isChildElement = function (child, expectedType) {
     }
     return false;
 };
-const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, selectAll, turnOffSelectAll, activeId, gridRef, onCloseDetailPanel) => (0, react_1.useMemo)(() => {
+const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel) => (0, react_1.useMemo)(() => {
     let bulkActions = undefined;
     let tablePagination = undefined;
     let activePage = undefined;
@@ -42,7 +42,7 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
         }
         if (isChildElement(child, tableBulkActions_1.TableBulkActions.displayName)) {
             const bulkActionButtons = child.props.children || [];
-            bulkActions = ((0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions, { gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, onSelectAll: selectAll, turnOffSelectAll: turnOffSelectAll, children: bulkActionButtons }));
+            bulkActions = ((0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions, { gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, children: bulkActionButtons }));
             return;
         }
         if (isChildElement(child, tablePagination_1.TablePagination.displayName)) {
@@ -103,5 +103,5 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
         detailPanel: detailPanel,
         other: other
     };
-}, [children, clearSelection, isMobile, selected, gridRef, allSelected, selectAll, turnOffSelectAll, activeId, onCloseDetailPanel]);
+}, [children, clearSelection, isMobile, selected, gridRef, allSelected, activeId, onCloseDetailPanel]);
 exports.useTableChildren = useTableChildren;

package/dist/table/detailPanel/detailPanel.js

@@ -39,7 +39,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");
 const mobileSheet_1 = require("../../mobileSheet/mobileSheet");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const DetailPanel = ({

package/dist/table/detailPanel/detailPanelHeader.js

@@ -38,7 +38,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");
@@ -65,7 +65,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");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const DetailPanelHeader = ({
   id,

package/dist/table/flexible/columnSettings.js

@@ -36,7 +36,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");
@@ -63,7 +63,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 ColumnSettings = ({
   onReset,
   showFooter = true,

package/dist/table/flexible/columnsList.js

@@ -1,127 +1,57 @@
 "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 checkboxState_1 = require("../../checkbox/checkboxState");
 const selectList_1 = require("../../selectList/selectList");
 const groupColumns_1 = require("./groupColumns");
-const useLanguage_1 = require("../../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 = (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, lastVisibleColumnId, 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: !!c.alwaysVisible || c.id === lastVisibleColumnId,
+        showCheckbox: true,
+        children: c.title
+    })), [columns, sortColumnsInt, lastVisibleColumnId]);
+    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.id) !== 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.id, 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: !!c.alwaysVisible || c.id === lastVisibleColumnId,
-    showCheckbox: true,
-    children: c.title
-  })), [columns, sortColumnsInt, lastVisibleColumnId]);
-  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.id) !== 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.id, 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,
-  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]);
-  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]) => (0, jsx_runtime_1.jsx)(SubColumnsList, {
-    title: title,
-    columns: cs,
-    settings: settings,
-    lastVisibleColumnId: lastVisibleColumnId,
-    onChange: onChange,
-    sortColumns: sortColumns
-  }, cs.map(c => c.id).join("-")));
+function ColumnSettingsList({ columns, settings, 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]);
+    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]) => ((0, jsx_runtime_1.jsx)(SubColumnsList, { title: title, columns: cs, settings: settings, lastVisibleColumnId: lastVisibleColumnId, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
 }
-exports.ColumnSettingsList = ColumnSettingsList;
+exports.ColumnSettingsList = ColumnSettingsList;

package/dist/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/dist/table/flexible/columnsPopup.js

@@ -38,7 +38,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 useLanguage_1 = require("../../utils/localization/useLanguage");
 const ColumnsPopup = ({
   onReset,

package/dist/table/nested/useNestedRows.js

@@ -37,7 +37,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");
@@ -64,7 +64,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");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 exports.NestedWrapperName = "Nested";
 const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {

package/dist/table/selectable/selectableHeader.js

@@ -41,7 +41,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");
@@ -68,7 +68,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");
@@ -95,7 +95,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");
@@ -122,7 +123,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: interfaces_1.SelectionState.All,

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