@geotab/zenith 3.11.1 → 3.12.0-beta.0

package/esm/chart/barChart/getDefaultOptions.js

@@ -7,8 +7,10 @@ const defaultGridBorderStyle = {
     display: false,
     dash: [2, 2]
 };
-export const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
+export const getDefaultOptions = (yAxis, isTimedData, isDark, translate, isRtl = false) => {
     const textColor = isDark ? "#C0CCD8" : "#4E677E";
+    const primaryYPosition = isRtl ? "right" : "left";
+    const secondaryYPosition = isRtl ? "left" : "right";
     const scales = {
         x: {
             title: {
@@ -17,6 +19,7 @@ export const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
             grid: {
                 display: false
             },
+            reverse: isRtl,
             type: isTimedData ? "time" : "category",
             ticks: isTimedData
                 ? {
@@ -54,7 +57,7 @@ export const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
             border: defaultGridBorderStyle,
             min: yAxis[i].min,
             max: yAxis[i].max,
-            position: i === 0 ? "left" : "right"
+            position: i === 0 ? primaryYPosition : secondaryYPosition
         };
     }
     return {

package/esm/chart/barChart.js

@@ -22,6 +22,7 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { legendPlugin } from "./plugins/legend/legendPlugin";
 import { ChartAxis } from "./chartAxis/chartAxis";
 import { useLanguage } from "../utils/localization/useLanguage";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 import { isDateRange } from "./utils/isDateRange";
 import { getYAxisMeta } from "./utils/getYAxisMeta";
 import { getDefaultOptions } from "./barChart/getDefaultOptions";
@@ -41,6 +42,7 @@ export const BarChart = (_a) => {
     const { translate } = useLanguage();
     const isDrive = useDrive();
     const isMobile = useMobile();
+    const isRtl = useIsRTL();
     const fontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = useContext(themeContext);
     useEffect(() => {
@@ -56,15 +58,15 @@ export const BarChart = (_a) => {
     const isTimedData = useMemo(() => isDateRange(data, false), [data]);
     const isStacked = useMemo(() => { var _a, _b; return ((_b = (_a = options.scales) === null || _a === void 0 ? void 0 : _a.y) === null || _b === void 0 ? void 0 : _b.stacked) === true; }, [options]);
     const yAxisMeta = useMemo(() => getYAxisMeta(data, isStacked), [data, isStacked]);
-    const defOptions = useMemo(() => getDefaultOptions(yAxisMeta, isTimedData, dark, translate), [yAxisMeta, isTimedData, dark, translate]);
+    const defOptions = useMemo(() => getDefaultOptions(yAxisMeta, isTimedData, dark, translate, isRtl), [yAxisMeta, isTimedData, dark, translate, isRtl]);
     const chartOptions = deepMerge(defOptions, options);
     const { isHidden, toggleHidden } = useHidden();
     const chartData = useMemo(() => {
         const chData = convertDates(data, toLocalDateTime);
         chData.datasets = chData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i));
-        chData.datasets = chData.datasets.map((ds, i) => (Object.assign(Object.assign({}, ds), { hidden: isHidden(i) })));
+        chData.datasets = chData.datasets.map((ds, i) => (Object.assign(Object.assign({}, ds), { hidden: isHidden(i), order: isRtl ? chData.datasets.length - 1 - i : i })));
         return chData;
-    }, [data, isHidden, toLocalDateTime]);
+    }, [data, isHidden, toLocalDateTime, isRtl]);
     const chartTooltip = useMemo(() => TooltipPlugin(tooltipId, tooltip, "top", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
     const chartLegend = useMemo(() => legendPlugin(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHidden, legend, legendId, toggleHidden]);
     const chartPlugins = useMemo(() => [...(plugins || []), chartTooltip, chartLegend], [chartLegend, chartTooltip, plugins]);
@@ -72,5 +74,5 @@ export const BarChart = (_a) => {
     const intSummary = useSummary(summary, chartData);
     const isMainHidden = useMemo(() => isHidden(0), [isHidden]);
     const toggleMainData = useCallback(() => toggleHidden(0), [toggleHidden]);
-    return (_jsxs("div", { className: classNames(["zen-chart", className || ""]), children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary ? _jsx(Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary)) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? (_jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: "right" })) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels }) : null, _jsx(AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] }));
+    return (_jsxs("div", { className: classNames(["zen-chart", className || ""]), children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary ? _jsx(Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary)) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? (_jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: isRtl ? "left" : "right" })) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels }) : null, _jsx(AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] }));
 };

package/esm/chart/chart.js

@@ -38,7 +38,7 @@ injectString("tr", "Chart data table and visualization", "Chart data table and v
 injectString("zh-Hans", "Chart data table and visualization", "Chart data table and visualization");
 injectString("zh-TW", "Chart data table and visualization", "Chart data table and visualization");
 injectString("ro-RO", "Chart data table and visualization", "Tabelul \u0219i vizualizarea datelor din grafic");
-injectString("ar-SA", "Chart data table and visualization", "\u062C\u062F\u0648\u0644 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064A\u0627\u0646\u064A \u0648\u0627\u0644\u062A\u0635\u0648\u0631");
+injectString("ar", "Chart data table and visualization", "\u062C\u062F\u0648\u0644 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064A\u0627\u0646\u064A \u0648\u0627\u0644\u062A\u0635\u0648\u0631");
 const isPieChart = (type, _) => type === "pie";
 const isBarChart = (type, _) => type === "bar";
 export const Chart = _a => {

package/esm/chart/chartAxis/chartAxis.js

@@ -29,7 +29,7 @@ injectString("tr", "Y-axis", "Y ekseni");
 injectString("zh-Hans", "Y-axis", "Y \u8F74");
 injectString("zh-TW", "Y-axis", "Y \u8EF8");
 injectString("ro-RO", "Y-axis", "Axa Y");
-injectString("ar-SA", "Y-axis", "\u0627\u0644\u0645\u062D\u0648\u0631 \u0635");
+injectString("ar", "Y-axis", "\u0627\u0644\u0645\u062D\u0648\u0631 \u0635");
 injectString("cs", "X-axis", "Osa X");
 injectString("da-DK", "X-axis", "X-akse");
 injectString("de", "X-axis", "X-Achse");
@@ -56,7 +56,7 @@ injectString("tr", "X-axis", "X ekseni");
 injectString("zh-Hans", "X-axis", "X \u8F74");
 injectString("zh-TW", "X-axis", "X \u8EF8");
 injectString("ro-RO", "X-axis", "Axa X");
-injectString("ar-SA", "X-axis", "\u0627\u0644\u0645\u062D\u0648\u0631 \u0633");
+injectString("ar", "X-axis", "\u0627\u0644\u0645\u062D\u0648\u0631 \u0633");
 export const ChartAxis = ({
   xLabel,
   yLabels,

package/esm/chart/lineChart/getDefaultOptions.d.ts

@@ -1,5 +1,5 @@
 import { IXAxisMeta, IYAxisMeta } from "../interfaces";
-export declare const getDefaultOptions: (yAxis: IYAxisMeta[], xAxis: IXAxisMeta, isTimedData: boolean, ticks: number, isDark: boolean, translate: (s: string) => string) => {
+export declare const getDefaultOptions: (yAxis: IYAxisMeta[], xAxis: IXAxisMeta, isTimedData: boolean, ticks: number, isDark: boolean, translate: (s: string) => string, isRtl?: boolean) => {
     responsive: boolean;
     maintainAspectRatio: boolean;
     scales: {
@@ -10,6 +10,7 @@ export declare const getDefaultOptions: (yAxis: IYAxisMeta[], xAxis: IXAxisMeta,
             grid: {
                 display: boolean;
             };
+            reverse: boolean;
             type: string;
             time: {
                 unit: string;
@@ -17,6 +18,8 @@ export declare const getDefaultOptions: (yAxis: IYAxisMeta[], xAxis: IXAxisMeta,
                     [x: string]: string;
                 };
             } | undefined;
+            min: number | undefined;
+            max: number | undefined;
             ticks: {
                 autoSkip: boolean;
                 maxRotation: number;

package/esm/chart/lineChart/getDefaultOptions.js

@@ -44,9 +44,11 @@ const getFormatFromDateRange = (minDate, maxDate, ticks) => {
     }
     return { unit: "millisecond", format: "HH:mm:ss.l" };
 };
-export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate) => {
+export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate, isRtl = false) => {
     const time = getFormatFromDateRange(xAxis.minDate, xAxis.maxDate, ticks);
     const textColor = isDark ? "#C0CCD8" : "#4E677E";
+    const primaryYPosition = isRtl ? "right" : "left";
+    const secondaryYPosition = isRtl ? "left" : "right";
     const scales = {
         x: {
             title: {
@@ -55,6 +57,7 @@ export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, tran
             grid: {
                 display: false
             },
+            reverse: isRtl,
             type: isTimedData ? "time" : "linear",
             time: isTimedData
                 ? {
@@ -64,6 +67,8 @@ export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, tran
                     }
                 }
                 : undefined,
+            min: isTimedData ? Date.parse(xAxis.minDate) : undefined,
+            max: isTimedData ? Date.parse(xAxis.maxDate) : undefined,
             ticks: isTimedData
                 ? {
                     autoSkip: false,
@@ -101,7 +106,7 @@ export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, tran
             border: defaultGridBorderStyle,
             min: yAxis[i].min,
             max: yAxis[i].max,
-            position: i === 0 ? "left" : "right"
+            position: i === 0 ? primaryYPosition : secondaryYPosition
         };
     }
     return {

package/esm/chart/lineChart.js

@@ -29,8 +29,10 @@ import { useAxisLabels } from "./lineChart/useAxisLabels";
 import { getYAxisMeta } from "./utils/getYAxisMeta";
 import { getDefaultOptions } from "./lineChart/getDefaultOptions";
 import { useHidden } from "./utils/useHidden";
+import { useLastVisibleXAxisMeta } from "./utils/useLastVisibleXAxisMeta";
 import { LinePlugin } from "./plugins/linePlugin/linePlugin";
 import { useLanguage } from "../utils/localization/useLanguage";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 import { useChartTicks } from "./lineChart/useChartTicks";
 import { ChartInsight } from "./chartInsight/chartInsight";
 import { getXAxisMeta } from "./utils/getXAxisMeta";
@@ -43,6 +45,7 @@ export const LineChart = (_a) => {
     const { translate } = useLanguage();
     const isDrive = useDrive();
     const isMobile = useMobile();
+    const isRtl = useIsRTL();
     const fontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = useContext(themeContext);
     useEffect(() => {
@@ -54,7 +57,7 @@ export const LineChart = (_a) => {
     }, [fontSize, dark]);
     const legendId = useId();
     const tooltipId = useId();
-    const { isHidden, toggleHidden } = useHidden();
+    const { isHidden, toggleHidden, hiddenCount } = useHidden();
     const { toLocalDateTime } = useContext(userFormatContext);
     const isTimedData = useMemo(() => isDateRange(data, true), [data]);
     const chartData = useMemo(() => {
@@ -72,8 +75,9 @@ export const LineChart = (_a) => {
     }, [data, isHidden, toLocalDateTime]);
     const yAxisMeta = useMemo(() => getYAxisMeta(chartData), [chartData]);
     const xAxisMeta = useMemo(() => getXAxisMeta(chartData, isTimedData), [chartData, isTimedData]);
+    const stableXAxisMeta = useLastVisibleXAxisMeta(xAxisMeta, hiddenCount, data.datasets.length);
     const { chartRef, ticks } = useChartTicks();
-    const defOptions = useMemo(() => getDefaultOptions(yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate), [yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate]);
+    const defOptions = useMemo(() => getDefaultOptions(yAxisMeta, stableXAxisMeta, isTimedData, ticks, dark, translate, isRtl), [yAxisMeta, stableXAxisMeta, isTimedData, ticks, dark, translate, isRtl]);
     const chartOptions = deepMerge(defOptions, options);
     const chartTooltip = useMemo(() => LinePlugin(tooltipId, tooltip, dark), [tooltip, tooltipId, dark]);
     const chartLegend = useMemo(() => legendPlugin(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, legend, legendId, isHidden, toggleHidden]);
@@ -82,5 +86,5 @@ export const LineChart = (_a) => {
     const intSummary = useSummary(summary, chartData);
     const isMainHidden = useMemo(() => isHidden(0), [isHidden]);
     const toggleMainDataset = useCallback(() => toggleHidden(0), [toggleHidden]);
-    return (_jsxs("div", { className: classNames(["zen-chart", className || ""]), ref: chartRef, children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary !== false ? _jsx(Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? _jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels }) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels }) : null, _jsx(AccessibleChart, { type: "line", data: chartData, options: chartOptions })] }));
+    return (_jsxs("div", { className: classNames(["zen-chart", className || ""]), ref: chartRef, children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary !== false ? _jsx(Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? (_jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: isRtl ? "left" : "right" })) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels }) : null, _jsx(AccessibleChart, { type: "line", data: chartData, options: chartOptions })] }));
 };

package/esm/chart/plugins/linePlugin/linePlugin.js

@@ -41,11 +41,12 @@ export const LinePlugin = (containerId, options, isDark) => ({
         canvas.addEventListener("mouseout", chart.verticalLine.mouseOut);
     },
     afterDraw: (chart) => {
-        var _a, _b;
+        var _a, _b, _c;
         if (options === false) {
             return;
         }
-        if (chart.verticalLine.enabled) {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if ((_a = chart.verticalLine) === null || _a === void 0 ? void 0 : _a.enabled) {
             const ctx = chart.ctx;
             const x = chart.verticalLine.x;
             const y = chart.verticalLine.y;
@@ -96,8 +97,8 @@ export const LinePlugin = (containerId, options, isDark) => ({
             if (zen.document === undefined) {
                 return;
             }
-            const scrollTop = zen.document.body.scrollTop + (((_a = zen.document.body.parentElement) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
-            const scrollLeft = zen.document.body.scrollLeft + (((_b = zen.document.body.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0);
+            const scrollTop = zen.document.body.scrollTop + (((_b = zen.document.body.parentElement) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0);
+            const scrollLeft = zen.document.body.scrollLeft + (((_c = zen.document.body.parentElement) === null || _c === void 0 ? void 0 : _c.scrollLeft) || 0);
             let elementIdx = undefined;
             const elementIds = new Set(chart.getActiveElements().map(el => el.index));
             if (elementIds.size === 1) {

package/esm/chart/utils/getXAxisMeta.js

@@ -14,12 +14,15 @@ export const getXAxisMeta = (data, isTimedData) => {
                 const point = dataset.data[j];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 if (point && typeof point === "object" && point.x) {
-                    const date = point.x;
-                    if (date.getTime() < new Date(minDate).getTime()) {
-                        minDate = new Date(date.valueOf());
+                    const date = new Date(point.x);
+                    if (isNaN(date.getTime())) {
+                        continue;
                     }
-                    if (date.getTime() > new Date(maxDate).getTime()) {
-                        maxDate = new Date(date.valueOf());
+                    if (date.getTime() < minDate.getTime()) {
+                        minDate = date;
+                    }
+                    if (date.getTime() > maxDate.getTime()) {
+                        maxDate = date;
                     }
                 }
             }

package/esm/chart/utils/isDateRange.js

@@ -9,7 +9,7 @@ export const isDateRange = (data, defaultValue) => {
     }
     const point = dataset.data[0];
     if (point.x) {
-        return typeof point.x === "string" && isDateString(point.x);
+        return (typeof point.x === "string" && isDateString(point.x)) || (point.x instanceof Date && !isNaN(point.x.getTime()));
     }
     return defaultValue;
 };

package/esm/chart/utils/useHidden.d.ts

@@ -1,4 +1,5 @@
 export declare const useHidden: () => {
     isHidden: (index: number) => boolean;
     toggleHidden: (index: number) => void;
+    hiddenCount: number;
 };

package/esm/chart/utils/useHidden.js

@@ -12,5 +12,5 @@ export const useHidden = () => {
         }
         setHiddenDatasets(hidden);
     }, [hiddenDatasets, setHiddenDatasets]);
-    return { isHidden, toggleHidden };
+    return { isHidden, toggleHidden, hiddenCount: hiddenDatasets.size };
 };

package/esm/chart/utils/useLastVisibleXAxisMeta.d.ts

@@ -0,0 +1,2 @@
+import { IXAxisMeta } from "../interfaces";
+export declare const useLastVisibleXAxisMeta: (xAxisMeta: IXAxisMeta, hiddenCount: number, totalCount: number) => IXAxisMeta;

package/esm/chart/utils/useLastVisibleXAxisMeta.js

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+export const useLastVisibleXAxisMeta = (xAxisMeta, hiddenCount, totalCount) => {
+    const allDatasetsHidden = totalCount > 0 && hiddenCount === totalCount;
+    const lastKnownMeta = useRef(xAxisMeta);
+    const lastVisibleXAxisMeta = useRef(xAxisMeta);
+    if (!allDatasetsHidden || lastKnownMeta.current.minDate !== xAxisMeta.minDate || lastKnownMeta.current.maxDate !== xAxisMeta.maxDate) {
+        lastVisibleXAxisMeta.current = xAxisMeta;
+        lastKnownMeta.current = xAxisMeta;
+    }
+    return lastVisibleXAxisMeta.current;
+};

package/esm/checkboxListWithAction/checkboxListWithAction.js

@@ -4,6 +4,8 @@ import { Fragment, useCallback, useEffect, useId, useRef, useState } from "react
 import { Checkbox } from "../checkbox/checkbox";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../icons/iconChevronRight";
+import { IconChevronLeft } from "../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 injectString("cs", "Number of selected child groups - {count}", "Po\u010Det vybran\xFDch pod\u0159\xEDzen\xFDch skupin\xA0\u2013 {count}");
@@ -32,7 +34,7 @@ injectString("tr", "Number of selected child groups - {count}", "Se\xE7ilen alt
 injectString("zh-Hans", "Number of selected child groups - {count}", "\u9009\u4E2D\u7684\u5B50\u7EC4\u6570\u91CF - {count}");
 injectString("zh-TW", "Number of selected child groups - {count}", "\u6240\u9078\u5B50\u7FA4\u7D44\u7684\u6578\u76EE - {count}");
 injectString("ro-RO", "Number of selected child groups - {count}", "Num\u0103r de grupuri derivate selectate \u2013 {count}");
-injectString("ar-SA", "Number of selected child groups - {count}", "\u0639\u062F\u062F \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0627\u062A \u0627\u0644\u0641\u0631\u0639\u064A\u0629 \u0627\u0644\u0645\u062D\u062F\u062F\u0629 - {count}");
+injectString("ar", "Number of selected child groups - {count}", "\u0639\u062F\u062F \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0627\u062A \u0627\u0644\u0641\u0631\u0639\u064A\u0629 \u0627\u0644\u0645\u062D\u062F\u062F\u0629 - {count}");
 injectString("cs", "View {groupName} children", "Zobrazit pod\u0159\xEDzen\xE9 pro {groupName}");
 injectString("da-DK", "View {groupName} children", "Se {groupName} b\xF8rn");
 injectString("de", "View {groupName} children", "Untergruppen von {groupName} ansehen");
@@ -59,7 +61,7 @@ injectString("tr", "View {groupName} children", "{groupName} alt \xF6\u011Feleri
 injectString("zh-Hans", "View {groupName} children", "\u67E5\u770B {groupName} \u5B50\u7EC4");
 injectString("zh-TW", "View {groupName} children", "\u6AA2\u8996\u300C{groupName}\u300D\u5B50\u7FA4\u7D44");
 injectString("ro-RO", "View {groupName} children", "Vede\u021Bi derivatele {groupName}");
-injectString("ar-SA", "View {groupName} children", "\u0639\u0631\u0636 \u0639\u0646\u0627\u0635\u0631 {groupName} \u0627\u0644\u0641\u0631\u0639\u064A\u0629");
+injectString("ar", "View {groupName} children", "\u0639\u0631\u0636 \u0639\u0646\u0627\u0635\u0631 {groupName} \u0627\u0644\u0641\u0631\u0639\u064A\u0629");
 injectString("cs", "Toggle {groupName} filter", "P\u0159epnout filtr pro {groupName}");
 injectString("da-DK", "Toggle {groupName} filter", "Sl\xE5 {groupName} filter til og fra");
 injectString("de", "Toggle {groupName} filter", "Filter f\xFCr {groupName} ein-/ausschalten");
@@ -86,7 +88,7 @@ injectString("tr", "Toggle {groupName} filter", "{groupName} filtresini de\u011F
 injectString("zh-Hans", "Toggle {groupName} filter", "\u5207\u6362 {groupName} \u7B5B\u9009\u5668");
 injectString("zh-TW", "Toggle {groupName} filter", "\u5207\u63DB\u300C{groupName}\u300D\u7BE9\u9078\u689D\u4EF6");
 injectString("ro-RO", "Toggle {groupName} filter", "Activa\u021Bi filtrul {groupName}");
-injectString("ar-SA", "Toggle {groupName} filter", "\u062A\u0628\u062F\u064A\u0644 \u062A\u0635\u0641\u064A\u0629 {groupName}");
+injectString("ar", "Toggle {groupName} filter", "\u062A\u0628\u062F\u064A\u0644 \u062A\u0635\u0641\u064A\u0629 {groupName}");
 injectString("cs", "Has additional actions. Use right arrow to access button, left arrow to return.", "Has additional actions. Use right arrow to access button, left arrow to return.");
 injectString("da-DK", "Has additional actions. Use right arrow to access button, left arrow to return.", "Has additional actions. Use right arrow to access button, left arrow to return.");
 injectString("de", "Has additional actions. Use right arrow to access button, left arrow to return.", "Has additional actions. Use right arrow to access button, left arrow to return.");
@@ -113,7 +115,7 @@ injectString("tr", "Has additional actions. Use right arrow to access button, le
 injectString("zh-Hans", "Has additional actions. Use right arrow to access button, left arrow to return.", "Has additional actions. Use right arrow to access button, left arrow to return.");
 injectString("zh-TW", "Has additional actions. Use right arrow to access button, left arrow to return.", "Has additional actions. Use right arrow to access button, left arrow to return.");
 injectString("ro-RO", "Has additional actions. Use right arrow to access button, left arrow to return.", "Has additional actions. Use right arrow to access button, left arrow to return.");
-injectString("ar-SA", "Has additional actions. Use right arrow to access button, left arrow to return.", "\u064A\u062D\u062A\u0648\u064A \u0639\u0644\u0649 \u0625\u062C\u0631\u0627\u0621\u0627\u062A \u0625\u0636\u0627\u0641\u064A\u0629. \u0627\u0633\u062A\u062E\u062F\u0645 \u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u0623\u064A\u0645\u0646 \u0644\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0632\u0631\u060C \u0648\u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u0623\u064A\u0633\u0631 \u0644\u0644\u0639\u0648\u062F\u0629.");
+injectString("ar", "Has additional actions. Use right arrow to access button, left arrow to return.", "\u064A\u062D\u062A\u0648\u064A \u0639\u0644\u0649 \u0625\u062C\u0631\u0627\u0621\u0627\u062A \u0625\u0636\u0627\u0641\u064A\u0629. \u0627\u0633\u062A\u062E\u062F\u0645 \u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u0623\u064A\u0645\u0646 \u0644\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0632\u0631\u060C \u0648\u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u0623\u064A\u0633\u0631 \u0644\u0644\u0639\u0648\u062F\u0629.");
 export const CheckboxListWithAction = ({
   label,
   options,
@@ -127,6 +129,7 @@ export const CheckboxListWithAction = ({
     translate
   } = useLanguage();
   const driveComponentClass = useDriveClassName("zen-checkbox-list-with-action");
+  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const listId = useId();
   const checkboxId = `${listId}_check_list-item_`;
   const navigationInstructionsId = `${listId}_navigation_instructions`;
@@ -359,7 +362,7 @@ export const CheckboxListWithAction = ({
       })), _jsxs("div", Object.assign({
         className: "zen-checkbox-list-with-action__label-info"
       }, otherArgs, {
-        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && _jsx(IconChevronRight, {
+        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && _jsx(ChevronIcon, {
           size: "large"
         })]
       }))]

package/esm/chip/chip.js

@@ -38,7 +38,7 @@ injectString("tr", "Clear selection", "Se\xE7imi temizle");
 injectString("zh-Hans", "Clear selection", "\u6E05\u9664\u9009\u62E9");
 injectString("zh-TW", "Clear selection", "\u6E05\u9664\u9078\u53D6\u9805\u76EE");
 injectString("ro-RO", "Clear selection", "\u0218terge\u021Bi selec\u021Bia");
-injectString("ar-SA", "Clear selection", "\u0645\u0633\u062D \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
+injectString("ar", "Clear selection", "\u0645\u0633\u062D \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
 function isChipTrigger(props) {
   return "triggerRef" in props;
 }

package/esm/columnsSelector/columnsSelector.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");
 injectString("cs", "Reset to default", "Obnovit v\xFDchoz\xED");
 injectString("da-DK", "Reset to default", "Nulstil til standard");
 injectString("de", "Reset to default", "Auf Standard zur\xFCcksetzen");
@@ -65,7 +65,7 @@ injectString("tr", "Reset to default", "Varsay\u0131lana s\u0131f\u0131rla");
 injectString("zh-Hans", "Reset to default", "\u91CD\u7F6E\u4E3A\u9ED8\u8BA4\u503C");
 injectString("zh-TW", "Reset to default", "\u91CD\u8A2D\u70BA\u9810\u8A2D\u503C");
 injectString("ro-RO", "Reset to default", "Reseta\u021Bi la implicit");
-injectString("ar-SA", "Reset to default", "\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u062A\u0639\u064A\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u0627\u0641\u062A\u0631\u0627\u0636\u064A");
+injectString("ar", "Reset to default", "\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u062A\u0639\u064A\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u0627\u0641\u062A\u0631\u0627\u0636\u064A");
 export const ColumnsSelector = ({
   id,
   columns = [],

package/esm/columnsSelector/columnsTab/columnsTab.js

@@ -29,7 +29,7 @@ injectString("tr", "Columns", "S\xFCtunlar");
 injectString("zh-Hans", "Columns", "\u5217");
 injectString("zh-TW", "Columns", "\u6B04");
 injectString("ro-RO", "Columns", "Coloane");
-injectString("ar-SA", "Columns", "\u0627\u0644\u0623\u0639\u0645\u062F\u0629");
+injectString("ar", "Columns", "\u0627\u0644\u0623\u0639\u0645\u062F\u0629");
 export const ColumnsTab = ({
   columns,
   onColumnToggle,

package/esm/columnsSelector/columnsTabGroup/columnsTabGroup.js

@@ -30,7 +30,7 @@ injectString("tr", "Additional Properties", "Ek \xD6zellikler");
 injectString("zh-Hans", "Additional Properties", "\u5176\u4ED6\u5C5E\u6027");
 injectString("zh-TW", "Additional Properties", "\u5176\u4ED6\u5C6C\u6027");
 injectString("ro-RO", "Additional Properties", "Propriet\u0103\u021Bi suplimentare");
-injectString("ar-SA", "Additional Properties", "\u062E\u0635\u0627\u0626\u0635 \u0625\u0636\u0627\u0641\u064A\u0629");
+injectString("ar", "Additional Properties", "\u062E\u0635\u0627\u0626\u0635 \u0625\u0636\u0627\u0641\u064A\u0629");
 export const ColumnsTabGroup = ({
   columns,
   onColumnToggle

package/esm/commonHelpers/arrowNavigation/components/arrowButton/arrowButton.js

@@ -4,9 +4,12 @@ import { Button } from "../../../../button/button";
 import { IconChevronLeft } from "../../../../icons/iconChevronLeft";
 import { IconChevronRight } from "../../../../icons/iconChevronRight";
 import { useDrive } from "../../../../utils/theme/useDrive";
+import { useDirectionalIcon } from "../../../../utils/localization/useDirectionalIcon";
 import { driveIconSize } from "../../../../svgIcon/svgIconSize";
 export const ArrowNavButton = ({ value, isHidden, disabled, className, arrowButtonHandler, onMouseDown, onMouseUp }) => {
     const isDrive = useDrive();
     const iconSize = isDrive ? driveIconSize("large") : "large";
-    return (_jsx(Button, { type: "tertiary-black", className: classNames(["zen-arrow-nav-button", isHidden ? "zen-arrow-nav-button--invisible" : "", className !== null && className !== void 0 ? className : ""]), "aria-label": value, disabled: disabled, onClick: arrowButtonHandler, "data-action": value, onMouseDown: onMouseDown, onMouseUp: onMouseUp, children: value === "left" ? (_jsx(IconChevronLeft, { size: iconSize, className: "zen-arrow-nav-button__icon" })) : (_jsx(IconChevronRight, { size: iconSize, className: "zen-arrow-nav-button__icon" })) }));
+    const LeftIcon = useDirectionalIcon(IconChevronLeft, IconChevronRight);
+    const RightIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
+    return (_jsx(Button, { type: "tertiary-black", className: classNames(["zen-arrow-nav-button", isHidden ? "zen-arrow-nav-button--invisible" : "", className !== null && className !== void 0 ? className : ""]), "aria-label": value, disabled: disabled, onClick: arrowButtonHandler, "data-action": value, onMouseDown: onMouseDown, onMouseUp: onMouseUp, children: value === "left" ? (_jsx(LeftIcon, { size: iconSize, className: "zen-arrow-nav-button__icon" })) : (_jsx(RightIcon, { size: iconSize, className: "zen-arrow-nav-button__icon" })) }));
 };

package/esm/controlledPopup/controlledPopup.d.ts

@@ -9,6 +9,7 @@ import { TAlignment as TAlignmentAbsolute } from "../absolute/absolute";
 export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
 export interface IControlledPopup extends IZenComponentProps {
     triggerRef: RefObject<HTMLElement | null>;
+    /** Alignment of the popup relative to its trigger. Defaults to `"bottom-left"` (flips to `"bottom-right"` in RTL). */
     alignment?: TAlignmentAbsolute;
     id?: string;
     className?: string;

package/esm/controlledPopup/controlledPopup.js

@@ -3,10 +3,12 @@ import { useEffect, useId } from "react";
 import { Absolute } from "../absolute/absolute";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
+import { useRTLAlignment } from "../utils/localization/useRTLAlignment";
 export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
     const autoId = useId();
     const popupId = id || autoId;
     const isClientReady = useClientReady();
+    const rtlAlignment = useRTLAlignment(alignment !== null && alignment !== void 0 ? alignment : "bottom-left");
     useEffect(() => {
         if (!triggerRef.current || !isClientReady) {
             return;
@@ -21,5 +23,5 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: 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 (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: rtlAlignment, id: popupId, isOpen: isOpen, className: 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 })));
 };

package/esm/dataFeed/feedExpandControl/feedExpandControl.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { ButtonType } from "../../button/buttonType";
@@ -6,6 +7,8 @@ import { IconLayoutWindow4 } from "../../icons/iconLayoutWindow4";
 import { SvgIconSize } from "../../svgIcon/svgIconSize";
 import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIconButton";
 import { useLanguage } from "../../utils/localization/useLanguage";
+injectString("en", "Collapse feed", "Collapse feed");
+injectString("en", "Expand feed", "Expand feed");
 export const FeedExpandControl = ({
   className = "",
   isExpanded,

package/esm/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/esm/dataGrid/cell/cell.js

@@ -4,7 +4,7 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { isPromiseLike } from "../columns/basicColumn";
 import { isActiveElement } from "../../list/utils/isActiveElement";
 import { zen } from "../../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] = useState("");
     const placeholderRenderer = useCallback(() => {
         const renderFn = renderPlaceholder || (() => "...");
@@ -69,6 +69,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 }));
 };
 export const DataGridCell = memo(Cell);

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

@@ -32,7 +32,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 CheckboxHandler = ({
   onClick,
   ref

package/esm/dataGrid/dataGrid.js

@@ -37,7 +37,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");
 export const NOT_INTERACTIVE_MODIFIER = "zen-data-grid--not-interactive";
 export const DRAGGING_MODIFIER = "zen-data-grid--dragging";
 export const HORIZONTAL_SCROLL_MODIFIER = "zen-data-grid--horizontal-scroll";
@@ -49,7 +49,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, MIN_CELL_WIDTH));
+const getColumnWidth = (defaultWidth, minWidth) => Math.floor(Math.max(defaultWidth, minWidth !== null && minWidth !== void 0 ? minWidth : MIN_CELL_WIDTH));
 export const EmptyList = ({
   children
 }) => _jsx("div", {
@@ -144,12 +144,13 @@ const DataGridInner = ({
     setVisibleRows(visible);
   }, [entities]);
   const listOfDefaultWidthColumns = useMemo(() => columnsList.map(column => column.meta.defaultWidth), [columnsList]);
+  const listOfMinWidthColumns = useMemo(() => columnsList.map(column => column.meta.minWidth), [columnsList]);
   const {
     result: observerResult
   } = 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);
@@ -172,18 +173,19 @@ const DataGridInner = ({
   }, [updateScroll, scheduleLazyRender]);
   const getCellParams = 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 = useCallback((column, columnIndex) => {
     var _a;
     const {
@@ -222,6 +224,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/esm/dataGrid/emptySearchList/emptySearchList.js

@@ -36,7 +36,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.");
 export const EmptySearchList = _a => {
   var props = __rest(_a, []);
   const {

package/esm/dataGrid/entitiesListActions/actions/columnsListButton.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");
 const ColumnsListButtonInner = ({
   onClick,
   ref