@geotab/zenith 3.11.1 → 3.12.0

package/dist/chart/barChart/getDefaultOptions.js

@@ -10,8 +10,10 @@ const defaultGridBorderStyle = {
     display: false,
     dash: [2, 2]
 };
-const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
+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: {
@@ -20,6 +22,7 @@ const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
             grid: {
                 display: false
             },
+            reverse: isRtl,
             type: isTimedData ? "time" : "category",
             ticks: isTimedData
                 ? {
@@ -57,7 +60,7 @@ 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/dist/chart/barChart.js

@@ -25,6 +25,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
 const chartAxis_1 = require("./chartAxis/chartAxis");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const isDateRange_1 = require("./utils/isDateRange");
 const getYAxisMeta_1 = require("./utils/getYAxisMeta");
 const getDefaultOptions_1 = require("./barChart/getDefaultOptions");
@@ -44,6 +45,7 @@ const BarChart = (_a) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isDrive = (0, useDrive_1.useDrive)();
     const isMobile = (0, useMobile_1.useMobile)();
+    const isRtl = (0, useIsRTL_1.useIsRTL)();
     const fontSize = (0, react_1.useMemo)(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     (0, react_1.useEffect)(() => {
@@ -59,15 +61,15 @@ const BarChart = (_a) => {
     const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, false), [data]);
     const isStacked = (0, react_1.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 = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(data, isStacked), [data, isStacked]);
-    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, isTimedData, dark, translate), [yAxisMeta, isTimedData, dark, translate]);
+    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, isTimedData, dark, translate, isRtl), [yAxisMeta, isTimedData, dark, translate, isRtl]);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
     const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();
     const chartData = (0, react_1.useMemo)(() => {
         const chData = (0, convertDates_1.convertDates)(data, toLocalDateTime);
         chData.datasets = chData.datasets.map((ds, i) => (0, getDefaultDatasetStyle_1.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 = (0, react_1.useMemo)(() => (0, tooltipPlugin_1.TooltipPlugin)(tooltipId, tooltip, "top", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
     const chartLegend = (0, react_1.useMemo)(() => (0, legendPlugin_1.legendPlugin)(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHidden, legend, legendId, toggleHidden]);
     const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartTooltip, chartLegend], [chartLegend, chartTooltip, plugins]);
@@ -75,6 +77,6 @@ const BarChart = (_a) => {
     const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
     const isMainHidden = (0, react_1.useMemo)(() => isHidden(0), [isHidden]);
     const toggleMainData = (0, react_1.useCallback)(() => toggleHidden(0), [toggleHidden]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary)) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: "right" })) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels }) : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary)) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: isRtl ? "left" : "right" })) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels }) : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] }));
 };
 exports.BarChart = BarChart;

package/dist/chart/chart.js

@@ -46,7 +46,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";
 const Chart = _a => {

package/dist/chart/chartAxis/chartAxis.js

@@ -37,7 +37,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");
@@ -64,7 +64,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");
 const ChartAxis = ({
   xLabel,
   yLabels,

package/dist/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/dist/chart/lineChart/getDefaultOptions.js

@@ -47,9 +47,11 @@ const getFormatFromDateRange = (minDate, maxDate, ticks) => {
     }
     return { unit: "millisecond", format: "HH:mm:ss.l" };
 };
-const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate) => {
+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: {
@@ -58,6 +60,7 @@ const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate)
             grid: {
                 display: false
             },
+            reverse: isRtl,
             type: isTimedData ? "time" : "linear",
             time: isTimedData
                 ? {
@@ -67,6 +70,8 @@ const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate)
                     }
                 }
                 : undefined,
+            min: isTimedData ? Date.parse(xAxis.minDate) : undefined,
+            max: isTimedData ? Date.parse(xAxis.maxDate) : undefined,
             ticks: isTimedData
                 ? {
                     autoSkip: false,
@@ -104,7 +109,7 @@ const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate)
             border: defaultGridBorderStyle,
             min: yAxis[i].min,
             max: yAxis[i].max,
-            position: i === 0 ? "left" : "right"
+            position: i === 0 ? primaryYPosition : secondaryYPosition
         };
     }
     return {

package/dist/chart/lineChart.js

@@ -32,8 +32,10 @@ const useAxisLabels_1 = require("./lineChart/useAxisLabels");
 const getYAxisMeta_1 = require("./utils/getYAxisMeta");
 const getDefaultOptions_1 = require("./lineChart/getDefaultOptions");
 const useHidden_1 = require("./utils/useHidden");
+const useLastVisibleXAxisMeta_1 = require("./utils/useLastVisibleXAxisMeta");
 const linePlugin_1 = require("./plugins/linePlugin/linePlugin");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const useChartTicks_1 = require("./lineChart/useChartTicks");
 const chartInsight_1 = require("./chartInsight/chartInsight");
 const getXAxisMeta_1 = require("./utils/getXAxisMeta");
@@ -46,6 +48,7 @@ const LineChart = (_a) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isDrive = (0, useDrive_1.useDrive)();
     const isMobile = (0, useMobile_1.useMobile)();
+    const isRtl = (0, useIsRTL_1.useIsRTL)();
     const fontSize = (0, react_1.useMemo)(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     (0, react_1.useEffect)(() => {
@@ -57,7 +60,7 @@ const LineChart = (_a) => {
     }, [fontSize, dark]);
     const legendId = (0, react_1.useId)();
     const tooltipId = (0, react_1.useId)();
-    const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();
+    const { isHidden, toggleHidden, hiddenCount } = (0, useHidden_1.useHidden)();
     const { toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
     const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, true), [data]);
     const chartData = (0, react_1.useMemo)(() => {
@@ -75,8 +78,9 @@ const LineChart = (_a) => {
     }, [data, isHidden, toLocalDateTime]);
     const yAxisMeta = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(chartData), [chartData]);
     const xAxisMeta = (0, react_1.useMemo)(() => (0, getXAxisMeta_1.getXAxisMeta)(chartData, isTimedData), [chartData, isTimedData]);
+    const stableXAxisMeta = (0, useLastVisibleXAxisMeta_1.useLastVisibleXAxisMeta)(xAxisMeta, hiddenCount, data.datasets.length);
     const { chartRef, ticks } = (0, useChartTicks_1.useChartTicks)();
-    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate), [yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate]);
+    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, stableXAxisMeta, isTimedData, ticks, dark, translate, isRtl), [yAxisMeta, stableXAxisMeta, isTimedData, ticks, dark, translate, isRtl]);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
     const chartTooltip = (0, react_1.useMemo)(() => (0, linePlugin_1.LinePlugin)(tooltipId, tooltip, dark), [tooltip, tooltipId, dark]);
     const chartLegend = (0, react_1.useMemo)(() => (0, legendPlugin_1.legendPlugin)(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, legend, legendId, isHidden, toggleHidden]);
@@ -85,6 +89,6 @@ const LineChart = (_a) => {
     const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
     const isMainHidden = (0, react_1.useMemo)(() => isHidden(0), [isHidden]);
     const toggleMainDataset = (0, react_1.useCallback)(() => toggleHidden(0), [toggleHidden]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), ref: chartRef, children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary !== false ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? (0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels }) : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "line", data: chartData, options: chartOptions })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), ref: chartRef, children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary !== false ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: isRtl ? "left" : "right" })) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels }) : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "line", data: chartData, options: chartOptions })] }));
 };
 exports.LineChart = LineChart;

package/dist/chart/plugins/linePlugin/linePlugin.js

@@ -44,11 +44,12 @@ 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;
@@ -99,8 +100,8 @@ const LinePlugin = (containerId, options, isDark) => ({
             if (zen_1.zen.document === undefined) {
                 return;
             }
-            const scrollTop = zen_1.zen.document.body.scrollTop + (((_a = zen_1.zen.document.body.parentElement) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
-            const scrollLeft = zen_1.zen.document.body.scrollLeft + (((_b = zen_1.zen.document.body.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0);
+            const scrollTop = zen_1.zen.document.body.scrollTop + (((_b = zen_1.zen.document.body.parentElement) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0);
+            const scrollLeft = zen_1.zen.document.body.scrollLeft + (((_c = zen_1.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/dist/chart/utils/getXAxisMeta.js

@@ -17,12 +17,15 @@ 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/dist/chart/utils/isDateRange.js

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

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

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

package/dist/chart/utils/useHidden.js

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

package/dist/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/dist/chart/utils/useLastVisibleXAxisMeta.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLastVisibleXAxisMeta = void 0;
+const react_1 = require("react");
+const useLastVisibleXAxisMeta = (xAxisMeta, hiddenCount, totalCount) => {
+    const allDatasetsHidden = totalCount > 0 && hiddenCount === totalCount;
+    const lastKnownMeta = (0, react_1.useRef)(xAxisMeta);
+    const lastVisibleXAxisMeta = (0, react_1.useRef)(xAxisMeta);
+    if (!allDatasetsHidden || lastKnownMeta.current.minDate !== xAxisMeta.minDate || lastKnownMeta.current.maxDate !== xAxisMeta.maxDate) {
+        lastVisibleXAxisMeta.current = xAxisMeta;
+        lastKnownMeta.current = xAxisMeta;
+    }
+    return lastVisibleXAxisMeta.current;
+};
+exports.useLastVisibleXAxisMeta = useLastVisibleXAxisMeta;

package/dist/checkboxListWithAction/checkboxListWithAction.js

@@ -35,7 +35,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");
@@ -62,7 +62,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");
@@ -89,7 +89,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.");
@@ -116,10 +116,12 @@ 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.");
 const checkbox_1 = require("../checkbox/checkbox");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../icons/iconChevronLeft");
+const useDirectionalIcon_1 = require("../utils/localization/useDirectionalIcon");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const CheckboxListWithAction = ({
@@ -135,6 +137,7 @@ const CheckboxListWithAction = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-checkbox-list-with-action");
+  const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
   const listId = (0, react_1.useId)();
   const checkboxId = `${listId}_check_list-item_`;
   const navigationInstructionsId = `${listId}_navigation_instructions`;
@@ -367,7 +370,7 @@ const CheckboxListWithAction = ({
       })), (0, jsx_runtime_1.jsxs)("div", Object.assign({
         className: "zen-checkbox-list-with-action__label-info"
       }, otherArgs, {
-        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, {
+        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && (0, jsx_runtime_1.jsx)(ChevronIcon, {
           size: "large"
         })]
       }))]

package/dist/chip/chip.js

@@ -34,7 +34,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");
 const react_1 = require("react");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");

package/dist/columnsSelector/columnsSelector.js

@@ -37,7 +37,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");
@@ -64,7 +64,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");
 const svgIconSize_1 = require("../svgIcon/svgIconSize");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const iconRefresh_1 = require("../icons/deprecated/iconRefresh");

package/dist/columnsSelector/columnsTab/columnsTab.js

@@ -37,7 +37,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");
 const ColumnsTab = ({
   columns,
   onColumnToggle,

package/dist/columnsSelector/columnsTabGroup/columnsTabGroup.js

@@ -38,7 +38,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");
 const ColumnsTabGroup = ({
   columns,
   onColumnToggle

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

@@ -7,10 +7,13 @@ const button_1 = require("../../../../button/button");
 const iconChevronLeft_1 = require("../../../../icons/iconChevronLeft");
 const iconChevronRight_1 = require("../../../../icons/iconChevronRight");
 const useDrive_1 = require("../../../../utils/theme/useDrive");
+const useDirectionalIcon_1 = require("../../../../utils/localization/useDirectionalIcon");
 const svgIconSize_1 = require("../../../../svgIcon/svgIconSize");
 const ArrowNavButton = ({ value, isHidden, disabled, className, arrowButtonHandler, onMouseDown, onMouseUp }) => {
     const isDrive = (0, useDrive_1.useDrive)();
     const iconSize = isDrive ? (0, svgIconSize_1.driveIconSize)("large") : "large";
-    return ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: (0, classNames_1.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" ? ((0, jsx_runtime_1.jsx)(iconChevronLeft_1.IconChevronLeft, { size: iconSize, className: "zen-arrow-nav-button__icon" })) : ((0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: iconSize, className: "zen-arrow-nav-button__icon" })) }));
+    const LeftIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronLeft_1.IconChevronLeft, iconChevronRight_1.IconChevronRight);
+    const RightIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: (0, classNames_1.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" ? ((0, jsx_runtime_1.jsx)(LeftIcon, { size: iconSize, className: "zen-arrow-nav-button__icon" })) : ((0, jsx_runtime_1.jsx)(RightIcon, { size: iconSize, className: "zen-arrow-nav-button__icon" })) }));
 };
 exports.ArrowNavButton = ArrowNavButton;

package/dist/commonStyles/columnsList.less

@@ -0,0 +1,59 @@
+@import (reference) "./common.less";
+
+// Shared styles for the DataGrid and Table flexible-columns selector popup.
+// Kept in one place so the bundle only emits .zen-columns-list once.
+
+// Make the popup a flex column so the list shrinks to min(550px, available viewport
+// space). Without this the list keeps its fixed 550px height and the popup adds its
+// own scrollbar on short viewports, producing a double scrollbar.
+.zen-popup:has(> .zen-columns-list) {
+    display: flex;
+    flex-direction: column;
+}
+
+.zen-columns-list {
+    .box-sizing();
+    width: 100%;
+    max-height: (550 / @rem);
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    // Establish a containing block so SelectList's absolutely-positioned aria-live
+    // region is clipped here instead of leaking into the popup's scroll area.
+    position: relative;
+
+    &__content {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: auto;
+    }
+
+    &__footer {
+        flex-shrink: 0;
+        border-block-start: 1px solid var(--borders-general);
+        padding: (2 / @rem) (8 / @rem);
+        display: flex;
+        justify-content: flex-end;
+        .zen-columns-list__reset:focus {
+            outline: none;
+            border: 1px solid var(--borders-form-field--active);
+        }
+    }
+
+    &__sub-section {
+        border-block-start: 1px solid var(--borders-general);
+        padding: (8 / @rem) 0;
+    }
+
+    &__sub-section:first-child {
+        border-block-start: none;
+    }
+
+    &__title {
+        padding: 0 (10 / @rem);
+        color: var(--text-secondary);
+        .zen-body-label-400();
+    }
+}

package/dist/commonStyles/link/link.less

@@ -1,4 +1,4 @@
-@import "../common.less";
+@import (reference) "../common.less";
 
 .zen-link {
     color: var(--text-hyperlink);

package/dist/commonStyles/pillStyles/pillContent.less

@@ -1,7 +1,6 @@
-@import "../common.less";
-@import "../typography/typography.less";
+@import (reference) "../common.less";
 
-@pill-min-width-default: 30px;
+@pill-min-width-default: (30 / @rem);
 @pill-max-width-default: 200px;
 
 // TODO: update to .zen-pill-content after old pill component removed remove
@@ -10,16 +9,16 @@
     @pill-height--drive: 34px;
     @pill-height--mobile: 34px;
 
-    .body-04();
+    .zen-body-s-400();
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-radius: 30px;
+    border-radius: (30 / @rem);
     height: @pill-height;
     display: grid;
     grid-auto-flow: column;
 
-    gap: 8px;
+    gap: (8 / @rem);
 
     &--icon-left {
         grid-template-columns: 12px 1fr;
@@ -38,18 +37,18 @@
 
         &.zen-pill-new-content--empty {
             grid-template-columns: 12px 18px;
-            gap: 8px;
+            gap: (8 / @rem);
         }
     }
 
     &--hidden {
-        gap: 4px;
+        gap: (4 / @rem);
     }
     &.zen-pill-new-content--drive,
     &.zen-pill-new-content--drive-tablet {
         height: @pill-height--drive;
         .zen-pill-non-actionable__icon {
-            min-width: 16px;
+            min-width: (16 / @rem);
             max-width: 16px;
             height: 16px;
         }
@@ -67,15 +66,15 @@
 
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
-                gap: 8px;
+                gap: (8 / @rem);
             }
         }
     }
     &.zen-pill-new-content--mobile {
         height: @pill-height--mobile;
-        .body-m-400-short();
+        .zen-body-m-400-short();
         .zen-pill-non-actionable__icon {
-            min-width: 16px;
+            min-width: (16 / @rem);
             max-width: 16px;
             height: 16px;
         }
@@ -93,14 +92,14 @@
 
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
-                gap: 8px;
+                gap: (8 / @rem);
             }
         }
     }
     &.zen-pill-new-content--drive {
-        .body-04-mobile-drive();
+        .zen-body-s-400-drive();
     }
     &.zen-pill-new-content--drive-tablet {
-        .body-04-tablet-drive();
+        .zen-body-s-400-drive();
     }
 }

package/dist/commonStyles/pillStyles/pillStyles.less

@@ -1,13 +1,12 @@
-@import "../typography/typography.less";
-@import "../colors/colors.less";
+@import "../common.less";
 
 .zen-pill-content {
-    .body-04();
+    .zen-body-s-400();
     display: flex;
     color: var(--text-primary);
     align-items: center;
     justify-content: space-between;
-    padding: 4px 12px 4px 12px;
-    border-radius: 30px;
+    padding: (4 / @rem) (12 / @rem) (4 / @rem) (12 / @rem);
+    border-radius: (30 / @rem);
     background: var(--backgrounds-content-1);
 }