@geotab/zenith 3.7.0-beta.0 → 3.8.0-beta.0

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

@@ -5,16 +5,18 @@ const classNames_1 = require("../../../commonHelpers/classNames/classNames");
 const escapeHtml_1 = require("../../../utils/escapeHtml");
 const renderLegend = (element, isDrive, items) => {
     const classes = (0, classNames_1.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="${(0, classNames_1.classNames)(["zen-legend__item-label", item.hidden ? "zen-legend__item-label--hidden" : ""])}">${(0, escapeHtml_1.htmlEscape)(item.text)}</p>
             ${item.value !== undefined
         ? `<p class="${(0, classNames_1.classNames)(["zen-legend__item-value", item.hidden ? "zen-legend__item-value--hidden" : ""])}">${(0, escapeHtml_1.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/dist/chart/plugins/linePlugin/getInterpolatedValue.js

@@ -40,7 +40,7 @@ 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;
 }
 exports.getInterpolatedValue = getInterpolatedValue;

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

@@ -57,7 +57,8 @@ const LinePlugin = (containerId, options, isDark) => ({
             (0, drawLine_1.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;
                 }
@@ -86,7 +87,8 @@ const LinePlugin = (containerId, options, isDark) => ({
                     return item;
                 }
                 return undefined;
-            }).filter((item) => item !== undefined);
+            })
+                .filter((item) => item !== undefined);
             if (items.length === 0) {
                 (0, renderTooltip_1.hideTooltip)(containerId);
                 return;

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

@@ -3,38 +3,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculatePositions = exports.positionOrder = void 0;
 const arrowHeight = 12;
 exports.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"]
 };
 exports.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/dist/chart/plugins/tooltip/renderTooltip.js

@@ -29,7 +29,7 @@ const renderTooltip = (tooltipId, x, y, position, items, title, subtitle, note,
     const titleHtml = title ? `<div class="zen-chart-tooltip__header">${(0, escapeHtml_1.htmlEscape)(title)}</div>` : "";
     const subtitleHtml = subtitle ? `<div class="zen-chart-tooltip__subheader">${(0, escapeHtml_1.htmlEscape)(subtitle)}</div>` : "";
     const noteHtml = note ? `<div class="zen-chart-tooltip__note">${(0, escapeHtml_1.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">${(0, escapeHtml_1.htmlEscape)(item.label)}</div>
             ${item.value !== undefined ? `<div class="zen-chart-tooltip__value">${(0, escapeHtml_1.htmlEscape)(item.value)}</div>` : ""}

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

@@ -5,7 +5,7 @@ const getBarTooltipItems_1 = require("../../barChart/getBarTooltipItems");
 const getPieTooltipItems_1 = require("../../pieChart/getPieTooltipItems");
 const renderTooltip_1 = require("./renderTooltip");
 const zen_1 = require("../../../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;
@@ -63,7 +63,8 @@ const TooltipPlugin = (containerId, options, alignment = "top", isHidden, isDark
                 }
                 chart.zenithTooltip.enabled = false;
                 chart.update();
-            }, mouseOut: () => {
+            },
+            mouseOut: () => {
                 chart.zenithTooltip.enabled = false;
                 chart.update();
             }

package/dist/chart/utils/getYAxisMeta.js

@@ -6,7 +6,9 @@ const mergeRanges_1 = require("./mergeRanges");
 const normalizeRange_1 = require("./normalizeRange");
 const getYAxisMeta = (data, stacked = false) => {
     if (data.datasets.length === 0) {
-        return [Object.assign({ name: "y" }, (0, getRange_1.getRange)({ data: [] }))];
+        return [
+            Object.assign({ name: "y" }, (0, getRange_1.getRange)({ data: [] }))
+        ];
     }
     if (stacked) {
         const axisMap = {};
@@ -21,7 +23,7 @@ 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;
@@ -34,7 +36,7 @@ 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/dist/chart/utils/removeTrendDataFromDatasets.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeTrendDataFromDatasets = void 0;
 const isArraysEqualDeeply_1 = require("../../utils/compareElementsUtils/isArraysEqualDeeply");
-const removeTrendDataFromDatasets = (datasets) => datasets.filter((dataset) => {
+const removeTrendDataFromDatasets = (datasets) => datasets.filter(dataset => {
     if (!("trendData" in dataset)) {
         return true;
     }

package/dist/checkbox/checkbox.d.ts

@@ -13,5 +13,7 @@ export interface ICheckbox extends IZenComponentProps {
     reverse?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     wrapped?: boolean;
+    tabIndex?: number;
+    describedBy?: string;
 }
-export declare const Checkbox: ({ reverse, fullWidth, id, checked, indeterminate, title, className, children, disabled, wrapped, ...rest }: ICheckbox) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ reverse, fullWidth, id, checked, indeterminate, title, className, children, disabled, wrapped, describedBy, ...rest }: ICheckbox) => import("react/jsx-runtime").JSX.Element;

package/dist/checkbox/checkbox.js

@@ -46,21 +46,18 @@ const checkboxIconCheckmark_1 = require("./checkboxIconCheckmark");
 const checkboxIconMinus_1 = require("./checkboxIconMinus");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const Checkbox = (_a) => {
-    var { reverse, fullWidth, id, checked, indeterminate, title, className = "", children, disabled, wrapped } = _a, rest = __rest(_a, ["reverse", "fullWidth", "id", "checked", "indeterminate", "title", "className", "children", "disabled", "wrapped"]);
+    var { reverse, fullWidth, id, checked, indeterminate, title, className = "", children, disabled, wrapped, describedBy } = _a, rest = __rest(_a, ["reverse", "fullWidth", "id", "checked", "indeterminate", "title", "className", "children", "disabled", "wrapped", "describedBy"]);
     const state = (0, checkboxUtils_1.getCheckboxState)(checked, indeterminate);
     const generatedId = react_1.default.useId();
     const intId = id || generatedId;
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-checkbox");
     const isMobile = (0, useMobile_1.useMobile)();
     const checkboxIconClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
-    const checkbox = (0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title }, rest));
-    const iconAndLabel = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? (0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) :
-                    state === checkboxState_1.CheckboxState.On ? (0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) : null }), children
-                ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })
-                : null] });
+    const checkbox = ((0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title, "aria-describedby": describedBy }, rest)));
+    const iconAndLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? ((0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === checkboxState_1.CheckboxState.On ? ((0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
     if (wrapped) {
-        return (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] });
+        return ((0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] }));
     }
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, (0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, (0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] }));
 };
 exports.Checkbox = Checkbox;

package/dist/checkbox/checkboxIconCheckmark.js

@@ -5,11 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const CheckboxIconCheckmark = ({ className, size }) => {
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
-        "zen-icon",
-        (size ? `zen-icon--${size}` : ""),
-        className !== null && className !== void 0 ? className : ""
-    ]), [size, className]);
-    return (0, jsx_runtime_1.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: (0, jsx_runtime_1.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 = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.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" }) }));
 };
 exports.CheckboxIconCheckmark = CheckboxIconCheckmark;

package/dist/checkbox/checkboxIconMinus.js

@@ -5,11 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const CheckboxIconMinus = ({ className, size }) => {
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
-        "zen-icon",
-        (size ? `zen-icon--${size}` : ""),
-        className !== null && className !== void 0 ? className : ""
-    ]), [size, className]);
-    return (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("line", { x1: "1", y1: "1", x2: "9", y2: "1", strokeWidth: "2", strokeLinecap: "round" }) });
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("line", { x1: "1", y1: "1", x2: "9", y2: "1", strokeWidth: "2", strokeLinecap: "round" }) }));
 };
 exports.CheckboxIconMinus = CheckboxIconMinus;

package/dist/checkboxListWithAction/checkboxListWithAction.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./checkboxListWithAction.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IColor } from "../groupsFilterRaw/groupsFilterInterfaces";
@@ -23,6 +24,7 @@ export interface ICheckboxListWithAction extends IZenComponentProps {
     search?: string[];
     onChange: (value: IChangeCheckbox) => void;
     onClick: (id: string) => void;
+    handleTab?: (e: React.KeyboardEvent, shift?: boolean) => void;
 }
-export declare const CheckboxListWithAction: ({ label, options, onChange, onClick, search, className }: ICheckboxListWithAction) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxListWithAction: ({ label, options, onChange, onClick, search, className, handleTab }: ICheckboxListWithAction) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/dist/checkboxListWithAction/checkboxListWithAction.js

@@ -35,6 +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("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");
@@ -61,6 +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("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");
@@ -87,6 +89,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.");
 const checkbox_1 = require("../checkbox/checkbox");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
@@ -98,7 +128,8 @@ const CheckboxListWithAction = ({
   onChange,
   onClick,
   search = [],
-  className
+  className,
+  handleTab
 }) => {
   const {
     translate
@@ -106,6 +137,11 @@ const CheckboxListWithAction = ({
   const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-checkbox-list-with-action");
   const listId = (0, react_1.useId)();
   const checkboxId = `${listId}_check_list-item_`;
+  const navigationInstructionsId = `${listId}_navigation_instructions`;
+  const listRef = (0, react_1.useRef)(null);
+  const [focusedRowIndex, setFocusedRowIndex] = (0, react_1.useState)(0);
+  const [focusedElementType, setFocusedElementType] = (0, react_1.useState)("checkbox");
+  const isInitialized = (0, react_1.useRef)(false);
   const handleChange = e => {
     const evtTarget = e.target;
     const elId = evtTarget.getAttribute("id").replace(checkboxId, "");
@@ -120,7 +156,171 @@ const CheckboxListWithAction = ({
     const evtTarget = e.target;
     const elId = evtTarget.getAttribute("data-btn") || ((_a = evtTarget.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("data-btn")) || "";
     onClick(elId);
+    setFocusedElementType("checkbox");
   };
+  const getFocusableElements = (0, react_1.useCallback)(() => {
+    if (!listRef.current || !options) return [];
+    const elements = [];
+    options.forEach((opt, rowIndex) => {
+      var _a;
+      const listItem = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`li[data-item="${opt.property}"]`);
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (listItem) {
+        const checkbox = listItem.querySelector('input[type="checkbox"]');
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (checkbox) {
+          elements.push({
+            element: checkbox,
+            rowIndex,
+            type: "checkbox",
+            blocked: opt.blocked
+          });
+        }
+        if (opt.isWithAction) {
+          const button = listItem.querySelector("button[data-btn]");
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          if (button) {
+            elements.push({
+              element: button,
+              rowIndex,
+              type: "button",
+              blocked: opt.blocked
+            });
+          }
+        }
+      }
+    });
+    return elements;
+  }, [options]);
+  const updateTabIndex = (0, react_1.useCallback)((newRowIndex, newElementType) => {
+    const elements = getFocusableElements();
+    elements.forEach(({
+      element,
+      rowIndex,
+      type,
+      blocked
+    }) => {
+      const isActive = rowIndex === newRowIndex && type === newElementType && !blocked;
+      element.setAttribute("tabindex", isActive ? "0" : "-1");
+    });
+  }, [getFocusableElements]);
+  const handleKeyDown = (0, react_1.useCallback)(
+  // eslint-disable-next-line complexity
+  e => {
+    var _a;
+    const elements = getFocusableElements();
+    if (elements.length === 0 || !options) return;
+    let newRowIndex = focusedRowIndex;
+    let newElementType = focusedElementType;
+    let preventDefault = false;
+    if (e.key === "Enter") {
+      const evtTarget = e.target;
+      const elId = ((_a = evtTarget.getAttribute("id")) === null || _a === void 0 ? void 0 : _a.replace(checkboxId, "")) || "";
+      elId && onChange({
+        id: elId,
+        state: evtTarget.checked,
+        partial: evtTarget.dataset.indeterminate === "true"
+      });
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      // Go to next row
+      do {
+        newRowIndex = (newRowIndex + 1) % options.length;
+      } while (options[newRowIndex].blocked && newRowIndex !== focusedRowIndex);
+      preventDefault = true;
+    } else if (e.key === "ArrowUp") {
+      // Go to previous row
+      do {
+        newRowIndex = (newRowIndex - 1 + options.length) % options.length;
+      } while (options[newRowIndex].blocked && newRowIndex !== focusedRowIndex);
+      preventDefault = true;
+    } else if (e.key === "ArrowRight") {
+      // Go to button if exists in current row and not blocked
+      if (options[focusedRowIndex].isWithAction && focusedElementType === "checkbox" && !options[focusedRowIndex].blocked) {
+        newElementType = "button";
+        preventDefault = true;
+      }
+    } else if (e.key === "ArrowLeft") {
+      // Go to checkbox if currently on button and checkbox not blocked
+      if (focusedElementType === "button" && !options[focusedRowIndex].blocked) {
+        newElementType = "checkbox";
+        preventDefault = true;
+      }
+    } else if (e.key === "Home") {
+      // Go to first non-blocked row
+      newRowIndex = 0;
+      while (newRowIndex < options.length && options[newRowIndex].blocked) {
+        newRowIndex++;
+      }
+      if (newRowIndex < options.length) {
+        newElementType = "checkbox";
+        preventDefault = true;
+      }
+    } else if (e.key === "End") {
+      // Go to last non-blocked row
+      newRowIndex = options.length - 1;
+      while (newRowIndex >= 0 && options[newRowIndex].blocked) {
+        newRowIndex--;
+      }
+      if (newRowIndex >= 0) {
+        newElementType = "checkbox";
+        preventDefault = true;
+      }
+    } else if (e.key === "Tab") {
+      if (handleTab) {
+        handleTab(e, e.shiftKey);
+        return;
+      }
+    }
+    if (preventDefault) {
+      e.preventDefault();
+      setFocusedRowIndex(newRowIndex);
+      setFocusedElementType(newElementType);
+      updateTabIndex(newRowIndex, newElementType);
+      // Find and focus the target element
+      const targetElement = elements.find(({
+        rowIndex,
+        type,
+        blocked
+      }) => rowIndex === newRowIndex && type === newElementType && !blocked);
+      targetElement === null || targetElement === void 0 ? void 0 : targetElement.element.focus();
+    }
+  }, [getFocusableElements, options, focusedRowIndex, focusedElementType, checkboxId, onChange, handleTab, updateTabIndex]);
+  const handleFocus = (0, react_1.useCallback)(e => {
+    const elements = getFocusableElements();
+    const focusedElement = e.target;
+    const targetElementInfo = elements.find(({
+      element
+    }) => element === focusedElement);
+    if (targetElementInfo && !targetElementInfo.blocked && (targetElementInfo.rowIndex !== focusedRowIndex || targetElementInfo.type !== focusedElementType)) {
+      setFocusedRowIndex(targetElementInfo.rowIndex);
+      setFocusedElementType(targetElementInfo.type);
+      updateTabIndex(targetElementInfo.rowIndex, targetElementInfo.type);
+    }
+  }, [focusedRowIndex, focusedElementType, getFocusableElements, updateTabIndex]);
+  // Initialize tabindex when options first become available
+  (0, react_1.useEffect)(() => {
+    if (options && options.length > 0 && !isInitialized.current) {
+      // Find first non-blocked row
+      let firstValidRow = 0;
+      while (firstValidRow < options.length && options[firstValidRow].blocked) {
+        firstValidRow++;
+      }
+      if (firstValidRow < options.length) {
+        setFocusedRowIndex(firstValidRow);
+        setFocusedElementType("checkbox");
+        updateTabIndex(firstValidRow, "checkbox");
+        isInitialized.current = true;
+      }
+    }
+  }, [options, updateTabIndex]);
+  // Update tabindex when focused position changes (only after initialization)
+  (0, react_1.useEffect)(() => {
+    if (isInitialized.current) {
+      updateTabIndex(focusedRowIndex, focusedElementType);
+    }
+  }, [focusedRowIndex, focusedElementType, updateTabIndex]);
   const getLabelColorInfo = (color, withRightPadding, isHidden, extraArgs) => {
     if (!color) {
       return null;
@@ -178,7 +378,8 @@ const CheckboxListWithAction = ({
       type: "button",
       onClick: handleClick,
       title: title,
-      className: classN
+      className: classN,
+      tabIndex: -1
     }, otherArgs, {
       children: childEl
     })) : (0, jsx_runtime_1.jsx)("div", {
@@ -208,6 +409,9 @@ const CheckboxListWithAction = ({
     };
     return optionsArr ? (0, jsx_runtime_1.jsx)("ul", {
       className: "zen-checkbox-list-with-action__list",
+      ref: listRef,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
       children: optionsArr.map((opt, ind) => {
         const titleForRender = opt.title || opt.label;
         const labelForRender = selectSearchTerm(opt.label);
@@ -223,7 +427,9 @@ const CheckboxListWithAction = ({
             checked: opt.checked,
             disabled: opt.blocked,
             title: translate("Toggle {groupName} filter").replace("{groupName}", titleForRender),
+            describedBy: opt.isWithAction ? navigationInstructionsId : undefined,
             "data-indeterminate": opt.partialChecked,
+            tabIndex: -1,
             children: opt.isWithAction ? null : labelElement
           }), opt.isWithAction && labelElement]
         }, `li_${ind}_${opt.property}`);
@@ -235,7 +441,12 @@ const CheckboxListWithAction = ({
     children: [label ? (0, jsx_runtime_1.jsx)("div", {
       className: "zen-checkbox-list-with-action__title",
       children: label
-    }) : null, build(options)]
+    }) : null, build(options), (0, jsx_runtime_1.jsx)("div", {
+      id: navigationInstructionsId,
+      className: "zen-checkbox-list-with-action__sr-only",
+      "aria-hidden": "true",
+      children: translate("Has additional actions. Use right arrow to access button, left arrow to return.")
+    })]
   });
 };
 exports.CheckboxListWithAction = CheckboxListWithAction;

package/dist/checkboxNonInteractive/checkboxNonInteractive.js

@@ -9,8 +9,6 @@ const iconMinusIcon_1 = require("../icons/deprecated/iconMinusIcon");
 const iconCheckmark_1 = require("../icons/deprecated/iconCheckmark");
 const CheckboxNonInteractive = ({ checked, indeterminate, disabled, className = "", children }) => {
     const state = (0, checkboxUtils_1.getCheckboxState)(checked, indeterminate);
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", className]), "data-checked": state === checkboxState_1.CheckboxState.On, "data-indeterminate": state === checkboxState_1.CheckboxState.Indeterminate, "data-disabled": disabled, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-checkbox__label", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate
-                        ? (0, jsx_runtime_1.jsx)(iconMinusIcon_1.IconMinusIcon, { className: "zen-checkbox__icon" })
-                        : (0, jsx_runtime_1.jsx)(iconCheckmark_1.IconCheckmark, { className: (0, classNames_1.classNames)(["zen-checkbox__icon", state === checkboxState_1.CheckboxState.Off ? "zen-checkbox__icon--hidden" : ""]) }) }), children ? (0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__label-text", children: children }) : null] }) });
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", className]), "data-checked": state === checkboxState_1.CheckboxState.On, "data-indeterminate": state === checkboxState_1.CheckboxState.Indeterminate, "data-disabled": disabled, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-checkbox__label", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? ((0, jsx_runtime_1.jsx)(iconMinusIcon_1.IconMinusIcon, { className: "zen-checkbox__icon" })) : ((0, jsx_runtime_1.jsx)(iconCheckmark_1.IconCheckmark, { className: (0, classNames_1.classNames)(["zen-checkbox__icon", state === checkboxState_1.CheckboxState.Off ? "zen-checkbox__icon--hidden" : ""]) })) }), children ? (0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__label-text", children: children }) : null] }) }));
 };
 exports.CheckboxNonInteractive = CheckboxNonInteractive;

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