@geotab/zenith 3.7.0 → 3.8.0-beta.0

package/esm/chart/pieChart.js

@@ -10,16 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useId, useMemo } from "react";
+import { useContext, useEffect, useId, useMemo, useRef } from "react";
 import { Pie } from "../react-chartjs/typedCharts";
 import { Chart as ChartJS, PieController, ArcElement } from "chart.js/auto";
 import "../react-chartjs/dateAdapter";
 import { deepMerge } from "../commonHelpers/utils";
+import { zen } from "../utils/zen";
 import { useDrive } from "../utils/theme/useDrive";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { themeContext } from "../utils/theme/themeContext";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { legendPlugin } from "./plugins/legend/legendPlugin";
 import { useSummary } from "./lineChart/useSummary";
 import { getDefaultOptions } from "./pieChart/getDefaultOptions";
 import { getDefaultDatasetStyle } from "./pieChart/getDefaultDatasetStyle";
@@ -28,21 +28,31 @@ import { TooltipPlugin } from "./plugins/tooltip/tooltipPlugin";
 import { ChartInsight } from "./chartInsight/chartInsight";
 import { Summary } from "../summary/summary";
 import { AccessibleChart } from "./accessibleChart/accessibleChart";
+import { centerTextPlugin } from "./pieChart/centerTextPlugin";
+import { pieLegendPlugin } from "./pieChart/pieLegendPlugin";
+import { legendPlugin } from "./plugins/legend/legendPlugin";
 ChartJS.register(PieController, ArcElement);
 export const PieChart = (_a) => {
     var { data, options = {}, insight, summary, legend, tooltip, plugins, className } = _a, rest = __rest(_a, ["data", "options", "insight", "summary", "legend", "tooltip", "plugins", "className"]);
+    const { isHorizontal } = options;
     const isDrive = useDrive();
     const isMobile = useMobile();
-    const fontSize = useMemo(() => isDrive ? (isMobile ? 14 : 16) : 12, [isDrive, isMobile]);
+    const fontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = useContext(themeContext);
     const legendId = useId();
     const tooltipId = useId();
+    const containerRef = useRef(null);
     useEffect(() => {
+        var _a;
+        const el = containerRef.current;
+        const styles = el ? (_a = zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen, el) : undefined;
+        const fontFamily = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--main-font").trim()) || "Roboto";
+        const color = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--text-primary").trim()) || "";
         ChartJS.defaults.font = {
-            family: "Roboto",
+            family: fontFamily,
             size: fontSize
         };
-        ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+        ChartJS.defaults.color = color;
     }, [fontSize, dark]);
     const defOptions = useMemo(() => getDefaultOptions(), []);
     const chartOptions = deepMerge(defOptions, options);
@@ -50,16 +60,31 @@ export const PieChart = (_a) => {
     const chartData = useMemo(() => {
         const chData = Object.assign({}, data);
         chData.datasets = chData.datasets.map(ds => getDefaultDatasetStyle(ds));
-        chData.datasets[0].data = chData.datasets[0].data.map((value, index) => isHidden(index) ? 0 : value);
+        chData.datasets[0].data = chData.datasets[0].data.map((value, index) => (isHidden(index) ? 0 : value));
         return chData;
     }, [data, isHidden]);
     const chartTooltip = useMemo(() => TooltipPlugin(tooltipId, tooltip, "left", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
-    const chartLegend = useMemo(() => legendPlugin(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, legend, legendId, isHidden, toggleHidden]);
-    const chartPlugins = useMemo(() => [...(plugins || []), chartLegend, chartTooltip], [chartLegend, chartTooltip, plugins]);
+    const effectiveLegend = useMemo(() => (isHorizontal && legend !== false ? Object.assign(Object.assign({}, legend), { position: "right", showBar: true, showPercentage: true }) : legend), [isHorizontal, legend]);
+    const legendData = useMemo(() => {
+        var _a;
+        return (Object.assign(Object.assign({}, data), { datasets: [Object.assign(Object.assign({}, data.datasets[0]), { backgroundColor: (_a = chartData.datasets[0]) === null || _a === void 0 ? void 0 : _a.backgroundColor }), ...data.datasets.slice(1)] }));
+    }, [data, chartData]);
+    const chartLegend = useMemo(() => isHorizontal
+        ? pieLegendPlugin(legendId, effectiveLegend, isDrive, legendData, isHidden, toggleHidden)
+        : legendPlugin(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHorizontal, effectiveLegend, legend, legendId, legendData, isHidden, toggleHidden]);
+    const resolvedCenterText = useMemo(() => {
+        if (!options.centerText)
+            return undefined;
+        const { getValue, value, label } = options.centerText;
+        if (getValue) {
+            const visibleValues = chartData.datasets[0].data.filter((_, i) => !isHidden(i));
+            return { value: getValue(visibleValues), label };
+        }
+        return { value, label };
+    }, [options.centerText, chartData, isHidden]);
+    const chartCenterText = useMemo(() => centerTextPlugin(resolvedCenterText), [resolvedCenterText]);
+    const chartPlugins = useMemo(() => [...(plugins || []), chartLegend, chartTooltip, chartCenterText], [chartLegend, chartTooltip, chartCenterText, plugins]);
     const intSummary = useSummary(summary, chartData);
-    return _jsxs("div", { className: classNames(["zen-chart", className || ""]), children: [insight
-                ? _jsx(ChartInsight, Object.assign({}, insight))
-                : null, summary
-                ? _jsx(Summary, Object.assign({}, intSummary))
-                : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), _jsx(AccessibleChart, { type: "pie", data: chartData })] });
+    const legendRight = isHorizontal;
+    return (_jsxs("div", { ref: containerRef, className: classNames(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary ? _jsx(Summary, Object.assign({}, intSummary)) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), _jsx(AccessibleChart, { type: "pie", data: chartData })] }));
 };

package/esm/chart/plugins/legend/renderLegend.js

@@ -2,16 +2,18 @@ import { classNames } from "../../../commonHelpers/classNames/classNames";
 import { htmlEscape } from "../../../utils/escapeHtml";
 export const renderLegend = (element, isDrive, items) => {
     const classes = classNames(["zen-legend", isDrive ? "zen-legend--drive" : ""]);
-    const listItems = items.map((item, index) => `<li class="zen-legend__item" data-index="${index}">
+    const listItems = items
+        .map((item, index) => `<li class="zen-legend__item" data-index="${index}">
             <span class="zen-legend__item-color" style="background-color: ${item.color};"></span>
             <p class="${classNames(["zen-legend__item-label", item.hidden ? "zen-legend__item-label--hidden" : ""])}">${htmlEscape(item.text)}</p>
             ${item.value !== undefined
         ? `<p class="${classNames(["zen-legend__item-value", item.hidden ? "zen-legend__item-value--hidden" : ""])}">${htmlEscape(item.value)}</p>`
         : ""}
-        </li>`).join("");
+        </li>`)
+        .join("");
     element.innerHTML = `<ul class='${classes}'>${listItems}</ul>`;
     const itemElements = element.querySelectorAll(".zen-legend__item");
-    itemElements.forEach((item) => {
+    itemElements.forEach(item => {
         item.addEventListener("click", () => {
             const index = item.getAttribute("data-index");
             const legendItem = items[Number(index)];

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

@@ -37,6 +37,6 @@ export function getInterpolatedValue(xScale, data, datasetIndex, xPixel) {
     if (x1 === x2) {
         return y1;
     }
-    const interpolatedY = y1 + (y2 - y1) * (x - x1) / (x2 - x1);
+    const interpolatedY = y1 + ((y2 - y1) * (x - x1)) / (x2 - x1);
     return interpolatedY;
 }

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

@@ -54,7 +54,8 @@ export const LinePlugin = (containerId, options, isDark) => ({
             drawLine(ctx, x, topY, bottomY);
             const datasets = chart.data.datasets;
             let lowestValueY = Infinity;
-            const items = datasets.map((dataset, dsIndex) => {
+            const items = datasets
+                .map((dataset, dsIndex) => {
                 if (!chart.isDatasetVisible(dsIndex)) {
                     return undefined;
                 }
@@ -83,7 +84,8 @@ export const LinePlugin = (containerId, options, isDark) => ({
                     return item;
                 }
                 return undefined;
-            }).filter((item) => item !== undefined);
+            })
+                .filter((item) => item !== undefined);
             if (items.length === 0) {
                 hideTooltip(containerId);
                 return;

package/esm/chart/plugins/tooltip/calculatePositions.js

@@ -1,37 +1,37 @@
 const arrowHeight = 12;
 export const positionOrder = {
-    "left": ["top", "right", "bottom"],
-    "top": ["left", "right", "bottom"],
-    "right": ["top", "left", "bottom"],
-    "bottom": ["left", "top", "right"]
+    left: ["top", "right", "bottom"],
+    top: ["left", "right", "bottom"],
+    right: ["top", "left", "bottom"],
+    bottom: ["left", "top", "right"]
 };
 export const calculatePositions = {
-    "top": {
-        "className": "zen-chart-tooltip__arrow--bottom",
+    top: {
+        className: "zen-chart-tooltip__arrow--bottom",
         calculate: (x, y, tooltipRect) => {
             const top = y - tooltipRect.height - arrowHeight;
             const left = x - tooltipRect.width / 2 - 1;
             return { top, left };
         }
     },
-    "bottom": {
-        "className": "zen-chart-tooltip__arrow--top",
+    bottom: {
+        className: "zen-chart-tooltip__arrow--top",
         calculate: (x, y, tooltipRect) => {
             const top = y + arrowHeight;
             const left = x - tooltipRect.width / 2 - 1;
             return { top, left };
         }
     },
-    "left": {
-        "className": "zen-chart-tooltip__arrow--right",
+    left: {
+        className: "zen-chart-tooltip__arrow--right",
         calculate: (x, y, tooltipRect) => {
             const top = y - tooltipRect.height / 2;
             const left = x - tooltipRect.width - arrowHeight;
             return { top, left };
         }
     },
-    "right": {
-        "className": "zen-chart-tooltip__arrow--left",
+    right: {
+        className: "zen-chart-tooltip__arrow--left",
         calculate: (x, y, tooltipRect) => {
             const top = y - tooltipRect.height / 2;
             const left = x + arrowHeight;

package/esm/chart/plugins/tooltip/renderTooltip.js

@@ -26,7 +26,7 @@ export const renderTooltip = (tooltipId, x, y, position, items, title, subtitle,
     const titleHtml = title ? `<div class="zen-chart-tooltip__header">${htmlEscape(title)}</div>` : "";
     const subtitleHtml = subtitle ? `<div class="zen-chart-tooltip__subheader">${htmlEscape(subtitle)}</div>` : "";
     const noteHtml = note ? `<div class="zen-chart-tooltip__note">${htmlEscape(note)}</div>` : "";
-    const itemsList = items.map((item) => `<div class="zen-chart-tooltip__item">
+    const itemsList = items.map(item => `<div class="zen-chart-tooltip__item">
             <div class="zen-chart-tooltip__color" style="background-color: ${item.color}"></div>
             <div class="zen-chart-tooltip__label">${htmlEscape(item.label)}</div>
             ${item.value !== undefined ? `<div class="zen-chart-tooltip__value">${htmlEscape(item.value)}</div>` : ""}

package/esm/chart/plugins/tooltip/tooltipPlugin.js

@@ -2,7 +2,7 @@ import { getBarTooltipItems, getBarTooltipTitle } from "../../barChart/getBarToo
 import { getPieTooltipItems } from "../../pieChart/getPieTooltipItems";
 import { destroyTooltip, hideTooltip, renderTooltip } from "./renderTooltip";
 import { zen } from "../../../utils/zen";
-const getCenterOfSector = (element) => {
+const getCenterOfSector = element => {
     const midAngle = (element.startAngle + element.endAngle) / 2;
     const centerRadius = (element.innerRadius + element.outerRadius) / 2;
     const centerX = element.x + Math.cos(midAngle) * centerRadius;
@@ -60,7 +60,8 @@ export const TooltipPlugin = (containerId, options, alignment = "top", isHidden,
                 }
                 chart.zenithTooltip.enabled = false;
                 chart.update();
-            }, mouseOut: () => {
+            },
+            mouseOut: () => {
                 chart.zenithTooltip.enabled = false;
                 chart.update();
             }

package/esm/chart/utils/getYAxisMeta.js

@@ -3,7 +3,9 @@ import { mergeRanges } from "./mergeRanges";
 import { normalizeRange } from "./normalizeRange";
 export const getYAxisMeta = (data, stacked = false) => {
     if (data.datasets.length === 0) {
-        return [Object.assign({ name: "y" }, getRange({ data: [] }))];
+        return [
+            Object.assign({ name: "y" }, getRange({ data: [] }))
+        ];
     }
     if (stacked) {
         const axisMap = {};
@@ -18,7 +20,7 @@ export const getYAxisMeta = (data, stacked = false) => {
             const valuesByX = axisMap[name].valuesByX;
             ds.data.forEach((point) => {
                 const xKey = typeof point === "object" && "x" in point ? point.x : "";
-                const yValue = typeof point === "object" && "y" in point ? point.y : (typeof point === "number" ? point : 0);
+                const yValue = typeof point === "object" && "y" in point ? point.y : typeof point === "number" ? point : 0;
                 const existing = valuesByX.get(xKey) || { positive: 0, negative: 0 };
                 if (yValue !== null && yValue >= 0) {
                     existing.positive += yValue;
@@ -31,7 +33,7 @@ export const getYAxisMeta = (data, stacked = false) => {
         });
         return Object.values(axisMap).map(axis => {
             const stackedValues = [];
-            axis.valuesByX.forEach((value) => {
+            axis.valuesByX.forEach(value => {
                 // Always include 0 as the baseline for stacked charts
                 if (value.positive > 0) {
                     stackedValues.push(value.positive);

package/esm/chart/utils/removeTrendDataFromDatasets.js

@@ -1,5 +1,5 @@
 import { isArraysEqualDeeply } from "../../utils/compareElementsUtils/isArraysEqualDeeply";
-export const removeTrendDataFromDatasets = (datasets) => datasets.filter((dataset) => {
+export const removeTrendDataFromDatasets = (datasets) => datasets.filter(dataset => {
     if (!("trendData" in dataset)) {
         return true;
     }

package/esm/checkbox/checkbox.js

@@ -28,7 +28,7 @@ export const Checkbox = (_a) => {
     const isMobile = useMobile();
     const checkboxIconClasses = useMemo(() => classNames(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
     const checkbox = (_jsx(TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title, "aria-describedby": describedBy }, rest)));
-    const iconAndLabel = (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-checkbox__box", children: state === CheckboxState.Indeterminate ? (_jsx(CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === CheckboxState.On ? (_jsx(CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? _jsx("div", { className: classNames(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children }) : null] }));
+    const iconAndLabel = (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-checkbox__box", children: state === CheckboxState.Indeterminate ? (_jsx(CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === CheckboxState.On ? (_jsx(CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? (_jsx("div", { className: classNames(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
     if (wrapped) {
         return (_jsxs("label", { className: classNames(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, _jsx("div", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] }));
     }

package/esm/checkbox/checkboxIconCheckmark.js

@@ -2,10 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 export const CheckboxIconCheckmark = ({ className, size }) => {
-    const classes = useMemo(() => classNames([
-        "zen-icon",
-        (size ? `zen-icon--${size}` : ""),
-        className !== null && className !== void 0 ? className : ""
-    ]), [size, className]);
-    return _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 14", focusable: "false", tabIndex: -1, "aria-hidden": "true", className: classes, "data-name": "CheckboxIconCheckmark", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 1a1.25 1.25 0 01.25 1.75l-7.5 10a1.25 1.25 0 01-1.842.174l-5-4.553a1.25 1.25 0 011.684-1.849l3.983 3.628 6.675-8.9A1.25 1.25 0 0115 1z" }) });
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 14", focusable: "false", tabIndex: -1, "aria-hidden": "true", className: classes, "data-name": "CheckboxIconCheckmark", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 1a1.25 1.25 0 01.25 1.75l-7.5 10a1.25 1.25 0 01-1.842.174l-5-4.553a1.25 1.25 0 011.684-1.849l3.983 3.628 6.675-8.9A1.25 1.25 0 0115 1z" }) }));
 };

package/esm/checkbox/checkboxIconMinus.js

@@ -2,10 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 export const CheckboxIconMinus = ({ className, size }) => {
-    const classes = useMemo(() => classNames([
-        "zen-icon",
-        (size ? `zen-icon--${size}` : ""),
-        className !== null && className !== void 0 ? className : ""
-    ]), [size, className]);
-    return _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 10 2", focusable: "false", tabIndex: -1, "aria-hidden": "true", className: classes, "data-name": "CheckboxIconMinus", children: _jsx("line", { x1: "1", y1: "1", x2: "9", y2: "1", strokeWidth: "2", strokeLinecap: "round" }) });
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 10 2", focusable: "false", tabIndex: -1, "aria-hidden": "true", className: classes, "data-name": "CheckboxIconMinus", children: _jsx("line", { x1: "1", y1: "1", x2: "9", y2: "1", strokeWidth: "2", strokeLinecap: "round" }) }));
 };

package/esm/checkboxListWithAction/checkboxListWithAction.js

@@ -32,6 +32,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("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");
@@ -58,6 +59,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("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");
@@ -84,7 +86,34 @@ 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("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.");
 injectString("en", "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("es", "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("fi-FI", "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("fr", "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("fr-FR", "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("hu-HU", "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("id", "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("it", "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("ja", "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("ko-KR", "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("ms", "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("nb-NO", "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("nl", "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("pl", "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("pt-BR", "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("pt-PT", "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("sk-SK", "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("sv", "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("th", "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("tr", "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-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.");
 export const CheckboxListWithAction = ({
   label,
   options,

package/esm/checkboxNonInteractive/checkboxNonInteractive.js

@@ -6,7 +6,5 @@ import { IconMinusIcon } from "../icons/deprecated/iconMinusIcon";
 import { IconCheckmark } from "../icons/deprecated/iconCheckmark";
 export const CheckboxNonInteractive = ({ checked, indeterminate, disabled, className = "", children }) => {
     const state = getCheckboxState(checked, indeterminate);
-    return _jsx("div", { className: classNames(["zen-checkbox", className]), "data-checked": state === CheckboxState.On, "data-indeterminate": state === CheckboxState.Indeterminate, "data-disabled": disabled, children: _jsxs("div", { className: "zen-checkbox__label", children: [_jsx("div", { className: "zen-checkbox__box", children: state === CheckboxState.Indeterminate
-                        ? _jsx(IconMinusIcon, { className: "zen-checkbox__icon" })
-                        : _jsx(IconCheckmark, { className: classNames(["zen-checkbox__icon", state === CheckboxState.Off ? "zen-checkbox__icon--hidden" : ""]) }) }), children ? _jsx("div", { className: "zen-checkbox__label-text", children: children }) : null] }) });
+    return (_jsx("div", { className: classNames(["zen-checkbox", className]), "data-checked": state === CheckboxState.On, "data-indeterminate": state === CheckboxState.Indeterminate, "data-disabled": disabled, children: _jsxs("div", { className: "zen-checkbox__label", children: [_jsx("div", { className: "zen-checkbox__box", children: state === CheckboxState.Indeterminate ? (_jsx(IconMinusIcon, { className: "zen-checkbox__icon" })) : (_jsx(IconCheckmark, { className: classNames(["zen-checkbox__icon", state === CheckboxState.Off ? "zen-checkbox__icon--hidden" : ""]) })) }), children ? _jsx("div", { className: "zen-checkbox__label-text", children: children }) : null] }) }));
 };

package/esm/chip/chip.d.ts

@@ -19,6 +19,7 @@ interface IChipBase extends IZenComponentProps {
     title?: string;
     onClose?: (id: string) => void;
     dataRole?: string;
+    ariaControls?: string;
 }
 export interface IChip extends IChipBase {
     readonly?: boolean;

package/esm/chip/chip.js

@@ -38,6 +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");
 function isChipTrigger(props) {
   return "triggerRef" in props;
 }
@@ -52,7 +53,8 @@ export const Chip = props => {
     quantity,
     onClose,
     title,
-    dataRole
+    dataRole,
+    ariaControls
   } = props;
   const isTriggerMode = isChipTrigger(props);
   const readonly = !isTriggerMode ? props.readonly : undefined;
@@ -168,21 +170,27 @@ export const Chip = props => {
     } : chipTitle ? {
       "aria-label": chipTitle
     } : {};
+    const roleAttributes = !dataRole || dataRole !== "combobox" ? {
+      role: "button",
+      "aria-haspopup": "dialog"
+    } : {
+      role: "combobox",
+      "aria-haspopup": "listbox"
+    };
     return _jsxs("div", {
       className: classNames(memoizedClasses),
       children: [_jsx("div", Object.assign({
-        role: "button",
         tabIndex: 0,
         className: classNames(["zen-chip__trigger", isClosable ? "zen-chip__trigger--with-icon" : ""]),
-        "aria-label": "Rate Plans, filter",
         onClick: handleClick,
         onKeyDown: chipTriggerKeyDownHandler
       }, extraAttributes, {
         "data-id": id || chipId,
-        "aria-expanded": active,
-        "aria-haspopup": "dialog"
-      }, dataRole ? {
+        "aria-expanded": isOpen
+      }, roleAttributes, dataRole ? {
         "data-role": dataRole
+      } : {}, ariaControls ? {
+        "aria-controls": ariaControls
       } : {}, {
         ref: triggerRef,
         children: _jsxs("div", {
@@ -211,6 +219,6 @@ export const Chip = props => {
         })
       })]
     });
-  }, [title, chipTitle, handleClick, chipTriggerKeyDownHandler, memoizedClasses, id, chipId, triggerRef, hasContent, driveTextClass, mobileTextClass, children, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive, active, dataRole, hasQuantity, quantity]);
+  }, [title, chipTitle, dataRole, memoizedClasses, isClosable, handleClick, chipTriggerKeyDownHandler, id, chipId, isOpen, ariaControls, triggerRef, hasContent, driveTextClass, mobileTextClass, children, svgIcon, hasQuantity, quantity, handleClose, closeAriaText, translate, isDrive]);
   return isTriggerMode ? chipTriggerComponent : chipComponent;
 };

package/esm/columnsSelector/columnsSelector.d.ts

@@ -11,6 +11,6 @@ export interface IColumnsSelector {
 }
 /**
  * @deprecated - will be removed in future releases
-*/
+ */
 export declare const ColumnsSelector: ({ id, columns, onColumnToggle, additionalColumns, onAdditionalColumnToggle, onColumnsReset }: IColumnsSelector) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/esm/columnsSelector/columnsSelector.js

@@ -11,7 +11,7 @@ import { IconSettings3 } from "../icons/iconSettings3";
 import { Button } from "../button/button";
 /**
  * @deprecated - will be removed in future releases
-*/
+ */
 injectString("cs", "Column Settings", "Nastaven\xED sloupc\u016F");
 injectString("da-DK", "Column Settings", "Kolonneindstillinger");
 injectString("de", "Column Settings", "Spalteneinstellungen");
@@ -38,6 +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("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,6 +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");
 export const ColumnsSelector = ({
   id,
   columns = [],

package/esm/columnsSelector/columnsTab/columnsTab.js

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

package/esm/columnsSelector/columnsTabGroup/columnsTabGroup.js

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

package/esm/comboboxSelected/comboboxSelected.js

@@ -4,10 +4,7 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { Pill } from "../pill/pill";
 import { PillBox } from "../pillBox/pillBox";
 export const ComboboxSelected = ({ selection, onRemove, className, pillEmptyText }) => {
-    const isCommonPill = selection.length === 0 || selection.length === 1 && selection[0].id === ENTIRE_ORGANIZATION_GROUP_ID;
-    return _jsx("div", { className: classNames(["zen-combobox-selected", className || ""]), children: isCommonPill && pillEmptyText ? _jsx(Pill, { children: pillEmptyText })
-            : _jsx(PillBox, { selectedPills: selection.map(el => (el.name ? el : Object.assign(Object.assign({}, el), { name: "..." }))), onRemove: onRemove }) });
+    const isCommonPill = selection.length === 0 || (selection.length === 1 && selection[0].id === ENTIRE_ORGANIZATION_GROUP_ID);
+    return (_jsx("div", { className: classNames(["zen-combobox-selected", className || ""]), children: isCommonPill && pillEmptyText ? (_jsx(Pill, { children: pillEmptyText })) : (_jsx(PillBox, { selectedPills: selection.map(el => (el.name ? el : Object.assign(Object.assign({}, el), { name: "..." }))), onRemove: onRemove })) }));
 };
-export const TRANSLATIONS = [
-    "Remove selection"
-];
+export const TRANSLATIONS = ["Remove selection"];

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

@@ -8,7 +8,5 @@ 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" }) });
+    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" })) }));
 };

package/esm/commonHelpers/arrowNavigation/hooks/useClearTimers.js

@@ -11,6 +11,8 @@ export const useClearTimers = ({ action, timeoutTimer, intervalTimer }) => {
             timeoutTimer.current = null;
             intervalTimer.current = null;
         }
-        return () => { clearTimers(); };
+        return () => {
+            clearTimers();
+        };
     }, [action, timeoutTimer, intervalTimer]);
 };

package/esm/commonHelpers/hooks/deviceProvider.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 export const DeviceContext = React.createContext(undefined);
-export const DeviceProvider = ({ deviceType, children }) => _jsx(DeviceContext.Provider, { value: deviceType, children: children });
+export const DeviceProvider = ({ deviceType, children }) => (_jsx(DeviceContext.Provider, { value: deviceType, children: children }));

package/esm/commonHelpers/hooks/useFetch.js

@@ -8,9 +8,11 @@ export const useFetch = (initialState, fetchPromise) => {
             return;
         }
         dispatch({ type: FetchActionType.Init, payload: undefined });
-        fetchPromise.then(res => {
+        fetchPromise
+            .then(res => {
             dispatch({ type: FetchActionType.Success, payload: res });
-        }).catch((e) => {
+        })
+            .catch((e) => {
             dispatch({ type: FetchActionType.Fail, payload: e });
         });
     }, [fetchPromise, dispatch]);

package/esm/commonHelpers/hooks/useResizeObserver.js

@@ -9,11 +9,13 @@ export const useResizeObserver = ({ target }) => {
     const [result, setResult] = useState(null);
     const timeoutRef = useRef(null);
     const ResizeObserverFn = zen.ResizeObserver;
-    const observerCallback = ResizeObserverFn ? new ResizeObserverFn((entities) => {
-        var _a, _b;
-        timeoutRef.current && ((_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutRef.current));
-        timeoutRef.current = (_b = zen.requestAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(zen, () => setResult(entities[0]));
-    }) : undefined;
+    const observerCallback = ResizeObserverFn
+        ? new ResizeObserverFn(entities => {
+            var _a, _b;
+            timeoutRef.current && ((_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutRef.current));
+            timeoutRef.current = (_b = zen.requestAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(zen, () => setResult(entities[0]));
+        })
+        : undefined;
     const observer = useRef(observerCallback);
     useLayoutEffect(() => {
         const targetObj = getTarget(target);

package/esm/commonHelpers/hooks/useThrottle.js

@@ -7,7 +7,7 @@ export const useThrottle = function (callback, delay = 400) {
         var _a;
         if (!timeoutRef.current) {
             timeoutRef.current = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
-                latestValuesRef.current && callback(...(latestValuesRef.current));
+                latestValuesRef.current && callback(...latestValuesRef.current);
                 timeoutRef.current = undefined;
                 latestValuesRef.current = undefined;
             }, delay);