@geotab/zenith 3.7.0 → 3.8.0-beta.1

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

package/esm/commonHelpers/hooks/useTrapFocus.js

@@ -7,21 +7,25 @@ import { isElementHidden } from "../../utils/isElementHidden";
 import { zen } from "../../utils/zen";
 const findFirstVisible = (elems, isElementVisible) => elems.find(elem => isElementVisible(elem));
 export const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition, isElementVisible) => {
-    // eslint-disable-next-line complexity
-    const handleKeyDown = useCallback((e) => {
+    /* eslint-disable complexity */
+    const handleKeyDown = useCallback(e => {
         var _a, _b, _c, _d, _e, _f;
+        /* eslint-enable complexity */
         const getChildCondition = () => {
             var _a, _b;
             return triggerRef
-                ? !isChildOf(e.target, containerRef.current)
-                    && e.target !== ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.body) && !isChildOf(e.target, triggerRef.current)
+                ? !isChildOf(e.target, containerRef.current) &&
+                    e.target !== ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.body) &&
+                    !isChildOf(e.target, triggerRef.current)
                 : !isChildOf(e.target, containerRef.current) && e.target !== ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
         };
         if (!containerRef.current || getChildCondition()) {
             return;
         }
-        const checkIsElementOutside = (target, containerEl, triggerEl) => !triggerEl ? !isElementInsideContainer(target, containerEl.current)
-            : !isElementInsideContainer(target, containerEl.current) && !isElementInsideContainer(target, triggerEl.current);
+        const checkIsElementOutside = (target, containerEl, triggerEl) => !triggerEl
+            ? !isElementInsideContainer(target, containerEl.current)
+            : !isElementInsideContainer(target, containerEl.current) &&
+                !isElementInsideContainer(target, triggerEl.current);
         const isTargetOutside = e.target ? checkIsElementOutside(e.target, containerRef, triggerRef) : undefined;
         const triggerSelectors = ((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(FOCUSABLE_SELECTOR)) || [];
         const containerSelectors = containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR);

package/esm/commonHelpers/isDomEnv.js

@@ -1,7 +1,2 @@
 /* eslint-disable */
-export const isDomEnv = () => {
-    var _a;
-    return !!(typeof window !== "undefined" &&
-        typeof (window === null || window === void 0 ? void 0 : window.document) !== "undefined" &&
-        typeof ((_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.createElement) !== "undefined");
-};
+export const isDomEnv = () => { var _a; return !!(typeof window !== "undefined" && typeof (window === null || window === void 0 ? void 0 : window.document) !== "undefined" && typeof ((_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.createElement) !== "undefined"); };

package/esm/commonHelpers/keyboard.js

@@ -1,5 +1,2 @@
-export const getKeysPressed = (e) => (e.ctrlKey ? "Ctrl+" : "") +
-    (e.altKey ? "Alt+" : "") +
-    (e.shiftKey ? "Shift+" : "") +
-    e.code;
+export const getKeysPressed = (e) => (e.ctrlKey ? "Ctrl+" : "") + (e.altKey ? "Alt+" : "") + (e.shiftKey ? "Shift+" : "") + e.code;
 export const isKeyForSearch = (key) => /Key[A-Z]|Digit[0-9]|Backspace/.test(key);

package/esm/commonHelpers/utils.js

@@ -5,7 +5,7 @@ export function flattenArrays(arrayOfArrays) {
     return arrayOfArrays.reduce((akk, arr) => akk.concat(arr), []);
 }
 function isObject(item) {
-    return (typeof item === "object" && !Array.isArray(item) && item !== null);
+    return typeof item === "object" && !Array.isArray(item) && item !== null;
 }
 export function deepMerge(obj1, obj2) {
     const output = Object.assign({}, obj1);

package/esm/commonStyles/typography/components/typographyItem.js

@@ -37,5 +37,5 @@ export const TypographyItem = ({ content = "The brown fox jumped over the lazy d
             setLetterSpacing(letterSpacing === "normal" ? "0px" : letterSpacing);
         }
     }, [isMobile]);
-    return _jsx("div", { className: "story-typography-item", children: _jsxs("div", { className: "story-typography-item__content-wrapper", children: [_jsx("p", { ref: ref, className: classNames(["story-typography-item__content", contentClassName]), children: content }), _jsxs("div", { className: "story-typography-item__content-description", children: [_jsxs("div", { className: "story-typography-item__content-description-column", children: [_jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Font" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: font })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Weight" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: fontWeightState })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Size" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: fontSizeState })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Line Height" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: lineHeightState })] })] }), _jsxs("div", { className: "story-typography-item__content-description-column", children: [_jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Letter Spacing" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: letterSpacingState })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Device" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: deviceName })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Tag" }), _jsxs("span", { className: "story-typography-item__content-description-value heading-04", children: ["<", tag, ">"] })] })] })] })] }) });
+    return (_jsx("div", { className: "story-typography-item", children: _jsxs("div", { className: "story-typography-item__content-wrapper", children: [_jsx("p", { ref: ref, className: classNames(["story-typography-item__content", contentClassName]), children: content }), _jsxs("div", { className: "story-typography-item__content-description", children: [_jsxs("div", { className: "story-typography-item__content-description-column", children: [_jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Font" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: font })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Weight" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: fontWeightState })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Size" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: fontSizeState })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Line Height" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: lineHeightState })] })] }), _jsxs("div", { className: "story-typography-item__content-description-column", children: [_jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Letter Spacing" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: letterSpacingState })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Device" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: deviceName })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Tag" }), _jsxs("span", { className: "story-typography-item__content-description-value heading-04", children: ["<", tag, ">"] })] })] })] })] }) }));
 };

package/esm/controlledPopup/controlledPopup.d.ts

@@ -19,10 +19,7 @@ export interface IControlledPopup extends IZenComponentProps {
     useTrapFocusWithTrigger?: TTrapFocus;
     shouldHoldScroll?: boolean;
     onOpenChange: (isOpen: boolean) => void;
-    /**
-        @deprecated - this prop is deprecated and will be removed in the next major version.
-    */
-    role?: string;
+    role?: string | false;
     ariaLabel?: string;
     ariaLabelledby?: string;
     recalculateOnScroll?: boolean;
@@ -30,4 +27,4 @@ export interface IControlledPopup extends IZenComponentProps {
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;

package/esm/controlledPopup/controlledPopup.js

@@ -3,7 +3,7 @@ import { useEffect, useId } from "react";
 import { Absolute } from "../absolute/absolute";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
-export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen }) => {
+export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
     const autoId = useId();
     const popupId = id || autoId;
     const isClientReady = useClientReady();
@@ -21,5 +21,5 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return (_jsx(Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll, role: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, focusOnOpen: focusOnOpen, children: children }));
+    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, focusOnOpen: focusOnOpen, children: children })));
 };