@geotab/zenith 3.11.1 → 3.12.0-beta.0

package/dist/chart/accessibleChart/accessibleChartTable.js

@@ -44,7 +44,7 @@ injectString("tr", "Value", "De\u011Fer");
 injectString("zh-Hans", "Value", "\u503C");
 injectString("zh-TW", "Value", "\u503C");
 injectString("ro-RO", "Value", "Valoare");
-injectString("ar-SA", "Value", "\u0627\u0644\u0642\u064A\u0645\u0629");
+injectString("ar", "Value", "\u0627\u0644\u0642\u064A\u0645\u0629");
 injectString("cs", "Chart data", "Data grafu");
 injectString("da-DK", "Chart data", "Diagramdata");
 injectString("de", "Chart data", "Diagrammdaten");
@@ -71,7 +71,7 @@ injectString("tr", "Chart data", "Grafik verileri");
 injectString("zh-Hans", "Chart data", "\u56FE\u8868\u6570\u636E");
 injectString("zh-TW", "Chart data", "\u5716\u8868\u8CC7\u6599");
 injectString("ro-RO", "Chart data", "Date grafic");
-injectString("ar-SA", "Chart data", "\u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064A\u0627\u0646\u064A");
+injectString("ar", "Chart data", "\u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064A\u0627\u0646\u064A");
 injectString("cs", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range");
 injectString("da-DK", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range");
 injectString("de", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range");
@@ -98,7 +98,7 @@ injectString("tr", "Chart contains too many data points so their number has been
 injectString("zh-Hans", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range");
 injectString("zh-TW", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range");
 injectString("ro-RO", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range", "Graficul con\u021Bine prea multe puncte de date, a\u0219adar num\u0103rul lor a fost redus. Dac\u0103 dori\u021Bi s\u0103 vede\u021Bi mai mult, schimba\u021Bi intervalul raportului");
-injectString("ar-SA", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range", "\u064A\u062D\u062A\u0648\u064A \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064A\u0627\u0646\u064A \u0639\u0644\u0649 \u0639\u062F\u062F \u0643\u0628\u064A\u0631 \u062C\u062F\u0627\u064B \u0645\u0646 \u0646\u0642\u0627\u0637 \u0627\u0644\u0628\u064A\u0627\u0646\u0627\u062A \u0644\u0630\u0644\u0643 \u062A\u0645 \u062A\u0642\u0644\u064A\u0644 \u0639\u062F\u062F\u0647\u0627. \u0625\u0630\u0627 \u0623\u0631\u062F\u062A \u0631\u0624\u064A\u0629 \u0627\u0644\u0645\u0632\u064A\u062F\u060C \u063A\u064A\u0651\u0631 \u0646\u0637\u0627\u0642 \u0627\u0644\u062A\u0642\u0631\u064A\u0631");
+injectString("ar", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range", "\u064A\u062D\u062A\u0648\u064A \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064A\u0627\u0646\u064A \u0639\u0644\u0649 \u0639\u062F\u062F \u0643\u0628\u064A\u0631 \u062C\u062F\u0627\u064B \u0645\u0646 \u0646\u0642\u0627\u0637 \u0627\u0644\u0628\u064A\u0627\u0646\u0627\u062A \u0644\u0630\u0644\u0643 \u062A\u0645 \u062A\u0642\u0644\u064A\u0644 \u0639\u062F\u062F\u0647\u0627. \u0625\u0630\u0627 \u0623\u0631\u062F\u062A \u0631\u0624\u064A\u0629 \u0627\u0644\u0645\u0632\u064A\u062F\u060C \u063A\u064A\u0651\u0631 \u0646\u0637\u0627\u0642 \u0627\u0644\u062A\u0642\u0631\u064A\u0631");
 injectString("cs", "X-axis", "Osa X");
 injectString("da-DK", "X-axis", "X-akse");
 injectString("de", "X-axis", "X-Achse");
@@ -125,7 +125,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");
 injectString("cs", "Category", "Kategorie");
 injectString("da-DK", "Category", "Kategori");
 injectString("de", "Category", "Kategorie");
@@ -152,7 +152,7 @@ injectString("tr", "Category", "Kategori");
 injectString("zh-Hans", "Category", "\u7C7B\u522B");
 injectString("zh-TW", "Category", "\u7A2E\u985E");
 injectString("ro-RO", "Category", "Categorie");
-injectString("ar-SA", "Category", "\u0627\u0644\u0641\u0626\u0629");
+injectString("ar", "Category", "\u0627\u0644\u0641\u0626\u0629");
 const MAX_TABLE_ROWS = 150;
 const getXLabels = (type, data, translate) => {
   if (type === "pie") {

package/dist/chart/barChart/getDefaultOptions.d.ts

@@ -1,5 +1,5 @@
 import { IYAxisMeta } from "../interfaces";
-export declare const getDefaultOptions: (yAxis: IYAxisMeta[], isTimedData: boolean, isDark: boolean, translate: (s: string) => string) => {
+export declare const getDefaultOptions: (yAxis: IYAxisMeta[], isTimedData: boolean, isDark: boolean, translate: (s: string) => string, isRtl?: boolean) => {
     responsive: boolean;
     maintainAspectRatio: boolean;
     scales: {
@@ -10,6 +10,7 @@ export declare const getDefaultOptions: (yAxis: IYAxisMeta[], isTimedData: boole
             grid: {
                 display: boolean;
             };
+            reverse: boolean;
             type: string;
             ticks: {
                 source: string;

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);