@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/dist/chart/pieChart.js

@@ -21,7 +21,6 @@ const utils_1 = require("../commonHelpers/utils");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
-const generateId_1 = require("../commonHelpers/generateId");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
 const useSummary_1 = require("./lineChart/useSummary");
@@ -39,6 +38,8 @@ const PieChart = (_a) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const fontSize = (0, react_1.useMemo)(() => isDrive ? (isMobile ? 14 : 16) : 12, [isDrive, isMobile]);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
+    const legendId = (0, react_1.useId)();
+    const tooltipId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
         auto_1.Chart.defaults.font = {
             family: "Roboto",
@@ -46,8 +47,6 @@ const PieChart = (_a) => {
         };
         auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [fontSize, dark]);
-    const legendId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
-    const tooltipId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
     const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(), []);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
     const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();

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

@@ -5,12 +5,14 @@ const renderLegend_1 = require("./renderLegend");
 const getLineLegendItems_1 = require("../../lineChart/getLineLegendItems");
 const getBarLegendItems_1 = require("../../barChart/getBarLegendItems");
 const getPieLegendItems_1 = require("../../pieChart/getPieLegendItems");
+const zen_1 = require("../../../utils/zen");
 exports.LEGEND_PLUGIN_ID = "zenithLegend";
 const legendPlugin = (containerId, options, isDrive, isHidden, toggleHidden) => ({
     id: exports.LEGEND_PLUGIN_ID,
     isDrive: isDrive,
     afterUpdate(chart) {
-        const container = document.getElementById(containerId);
+        var _a;
+        const container = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(containerId);
         if (!container) {
             return;
         }

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

@@ -5,6 +5,7 @@ const formatValue_1 = require("../legend/formatValue");
 const renderTooltip_1 = require("../tooltip/renderTooltip");
 const getInterpolatedValue_1 = require("./getInterpolatedValue");
 const drawLine_1 = require("./drawLine");
+const zen_1 = require("../../../utils/zen");
 const LinePlugin = (containerId, options, isDark) => ({
     id: "verticalLine",
     afterInit: (chart) => {
@@ -85,7 +86,7 @@ const LinePlugin = (containerId, options, isDark) => ({
                     return item;
                 }
                 return undefined;
-            }).filter(item => !!item);
+            }).filter((item) => item !== undefined);
             if (items.length === 0) {
                 (0, renderTooltip_1.hideTooltip)(containerId);
                 return;
@@ -93,8 +94,11 @@ const LinePlugin = (containerId, options, isDark) => ({
             const chartRect = chart.canvas.getBoundingClientRect();
             const top = chartRect.top + (lowestValueY || y);
             const left = chartRect.left + x;
-            const scrollTop = document.body.scrollTop + (((_a = document.body.parentElement) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
-            const scrollLeft = document.body.scrollLeft + (((_b = document.body.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0);
+            if (zen_1.zen.document === undefined) {
+                return;
+            }
+            const scrollTop = zen_1.zen.document.body.scrollTop + (((_a = zen_1.zen.document.body.parentElement) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
+            const scrollLeft = zen_1.zen.document.body.scrollLeft + (((_b = zen_1.zen.document.body.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0);
             let elementIdx = undefined;
             const elementIds = new Set(chart.getActiveElements().map(el => el.index));
             if (elementIds.size === 1) {

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

@@ -2,23 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.destroyTooltip = exports.hideTooltip = exports.renderTooltip = void 0;
 const escapeHtml_1 = require("../../../utils/escapeHtml");
+const zen_1 = require("../../../utils/zen");
 const calculatePositions_1 = require("./calculatePositions");
 const isOutOfViewport_1 = require("./isOutOfViewport");
 const getOrCreateTooltip = (id, isDark) => {
-    let tooltipEl = document.body.querySelector(`#${id}`);
-    if (!tooltipEl) {
-        tooltipEl = document.createElement("div");
+    var _a;
+    let tooltipEl = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(id);
+    if (!tooltipEl && zen_1.zen.document) {
+        tooltipEl = zen_1.zen.document.createElement("div");
         tooltipEl.id = id;
         tooltipEl.className = "zen-chart-tooltip";
         tooltipEl.setAttribute("role", "tooltip");
         tooltipEl.setAttribute("aria-hidden", "true");
-        document.body.appendChild(tooltipEl);
+        zen_1.zen.document.body.appendChild(tooltipEl);
     }
-    tooltipEl.classList.toggle("zen-dark", isDark);
+    tooltipEl === null || tooltipEl === void 0 ? void 0 : tooltipEl.classList.toggle("zen-dark", isDark);
     return tooltipEl;
 };
 const renderTooltip = (tooltipId, x, y, position, items, title, subtitle, note, isDark) => {
+    var _a;
     const element = getOrCreateTooltip(tooltipId, isDark);
+    if (zen_1.zen.document === undefined || !element) {
+        return;
+    }
     element.style.display = "block";
     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>` : "";
@@ -30,12 +36,13 @@ const renderTooltip = (tooltipId, x, y, position, items, title, subtitle, note,
         </div>`);
     const itemsHtml = `<div class="zen-chart-tooltip__items">${itemsList.join("")}</div>`;
     element.innerHTML = `${titleHtml}${subtitleHtml}${itemsHtml}${noteHtml}`;
-    const arrow = document.createElement("div");
+    const arrow = zen_1.zen.document.createElement("div");
     arrow.className = "zen-chart-tooltip__arrow";
     element.appendChild(arrow);
     const tooltipRect = element.getBoundingClientRect();
     const positionsOrder = [position, ...calculatePositions_1.positionOrder[position]];
-    const bodyRect = document.body.getBoundingClientRect();
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const bodyRect = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.getBoundingClientRect();
     let finalPosition = undefined;
     for (let i = 0; i < positionsOrder.length; i++) {
         const pos = positionsOrder[i];
@@ -63,16 +70,18 @@ const renderTooltip = (tooltipId, x, y, position, items, title, subtitle, note,
 };
 exports.renderTooltip = renderTooltip;
 const hideTooltip = (tooltipId) => {
-    const element = document.body.querySelector(`#${tooltipId}`);
+    var _a;
+    const element = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(tooltipId);
     if (element) {
         element.style.display = "none";
     }
 };
 exports.hideTooltip = hideTooltip;
 const destroyTooltip = (tooltipId) => {
-    const element = document.body.querySelector(`#${tooltipId}`);
+    var _a, _b;
+    const element = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(tooltipId);
     if (element) {
-        document.body.removeChild(element);
+        (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body.removeChild(element);
     }
 };
 exports.destroyTooltip = destroyTooltip;

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

@@ -4,6 +4,7 @@ exports.TooltipPlugin = void 0;
 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 midAngle = (element.startAngle + element.endAngle) / 2;
     const centerRadius = (element.innerRadius + element.outerRadius) / 2;
@@ -95,8 +96,11 @@ const TooltipPlugin = (containerId, options, alignment = "top", isHidden, isDark
                 values = (0, getPieTooltipItems_1.getPieTooltipItems)(chart.data, datasetIndex, index, options);
             }
             const chartRect = chart.canvas.getBoundingClientRect();
-            const scrollTop = document.body.scrollTop + (((_a = document.body.parentElement) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
-            const scrollLeft = document.body.scrollLeft + (((_b = document.body.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0);
+            if (!zen_1.zen.document) {
+                return;
+            }
+            const scrollTop = zen_1.zen.document.body.scrollTop + (((_a = zen_1.zen.document.body.parentElement) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
+            const scrollLeft = zen_1.zen.document.body.scrollLeft + (((_b = zen_1.zen.document.body.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0);
             const top = chartRect.top + y + scrollTop;
             const left = chartRect.left + x + scrollLeft;
             if (values.length > 0) {

package/dist/checkbox/checkbox.js

@@ -44,12 +44,14 @@ const checkboxUtils_1 = require("./checkboxUtils");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 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"]);
     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" }) :
@@ -59,6 +61,6 @@ const Checkbox = (_a) => {
     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)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", 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/chip/chip.d.ts

@@ -2,6 +2,7 @@
 import "./chip.less";
 import { IZenComponentProps } from "./../commonHelpers/zenComponent";
 import { IIcon } from "../icons/icon";
+import "../utils/globalThisPolyfill";
 export interface IChipsParent {
     chip?: boolean;
     chipId?: string;
@@ -17,6 +18,7 @@ interface IChipBase extends IZenComponentProps {
     quantity?: undefined;
     title?: string;
     onClose?: (id: string) => void;
+    dataRole?: string;
 }
 export interface IChip extends IChipBase {
     readonly?: boolean;

package/dist/chip/chip.js

@@ -8,32 +8,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Chip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-injectString("cs", "Close", "Zav\u0159\xEDt");
-injectString("da-DK", "Close", "Luk");
-injectString("de", "Close", "Schlie\xDFen");
-injectString("en", "Close", "Close");
-injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
-injectString("fr", "Close", "Fermer");
-injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
-injectString("id", "Close", "Tutup");
-injectString("it", "Close", "Chiudere");
-injectString("ja", "Close", "\u9589\u3058\u308B");
-injectString("ko-KR", "Close", "\uB2EB\uAE30");
-injectString("ms", "Close", "Tutup");
-injectString("nb-NO", "Close", "Lukk");
-injectString("nl", "Close", "Sluiten");
-injectString("pl", "Close", "Zamknij");
-injectString("pt-BR", "Close", "Fechar");
-injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
-injectString("sv", "Close", "St\xE4ng");
-injectString("th", "Close", "\u0E1B\u0E34\u0E14");
-injectString("tr", "Close", "Kapat");
-injectString("zh-Hans", "Close", "\u5173\u95ED");
-injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("cs", "Clear selection", "Vymazat v\xFDb\u011Br");
+injectString("da-DK", "Clear selection", "Ryd markering");
+injectString("de", "Clear selection", "Auswahl l\xF6schen");
+injectString("en", "Clear selection", "Clear selection");
+injectString("es", "Clear selection", "Borrar selecci\xF3n");
+injectString("fi-FI", "Clear selection", "Tyhjenn\xE4 valinta");
+injectString("fr", "Clear selection", "Effacer la s\xE9lection");
+injectString("fr-FR", "Clear selection", "Effacer la s\xE9lection");
+injectString("hu-HU", "Clear selection", "T\xF6r\xF6ld a kijel\xF6l\xE9st.");
+injectString("id", "Clear selection", "Hapus pilihan");
+injectString("it", "Clear selection", "Cancellare selezione");
+injectString("ja", "Clear selection", "\u9078\u629E\u3092\u30AF\u30EA\u30A2\u3057\u307E\u3059");
+injectString("ko-KR", "Clear selection", "\uC120\uD0DD \uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear selection", "Kosongkan pilihan");
+injectString("nb-NO", "Clear selection", "Fjern utvalg");
+injectString("nl", "Clear selection", "Selectie wissen");
+injectString("pl", "Clear selection", "Wyczy\u015B\u0107 wyb\xF3r");
+injectString("pt-BR", "Clear selection", "Limpar sele\xE7\xE3o");
+injectString("pt-PT", "Clear selection", "Limpar sele\xE7\xE3o");
+injectString("sk-SK", "Clear selection", "Vyma\u017E v\xFDber.");
+injectString("sv", "Clear selection", "Rensa val");
+injectString("th", "Clear selection", "\u0E25\u0E49\u0E32\u0E07\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01");
+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");
 const react_1 = require("react");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
@@ -42,6 +42,10 @@ const getChipStateClassName_1 = require("./utils/getChipStateClassName");
 const iconClose_1 = require("../icons/iconClose");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useChip_1 = require("./utils/useChip");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
+require("../utils/globalThisPolyfill");
+const zen_1 = require("../utils/zen");
 function isChipTrigger(props) {
   return "triggerRef" in props;
 }
@@ -55,7 +59,8 @@ const Chip = props => {
     status,
     quantity,
     onClose,
-    title
+    title,
+    dataRole
   } = props;
   const isTriggerMode = isChipTrigger(props);
   const readonly = !isTriggerMode ? props.readonly : undefined;
@@ -68,11 +73,14 @@ const Chip = props => {
   const hasQuantity = typeof quantity === "number";
   const chipId = (0, react_1.useId)();
   const isDrive = (0, useDrive_1.useDrive)();
+  const isMobile = (0, useMobile_1.useMobile)();
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
   const driveTextClass = (0, useDriveClassName_1.useDriveClassName)("zen-chip-text-content");
+  const mobileTextClass = (0, useMobileClassName_1.useMobileClassName)("zen-chip-text-content");
   const driveChipClass = (0, useDriveClassName_1.useDriveClassName)("zen-chip");
+  const mobileChipClass = (0, useMobileClassName_1.useMobileClassName)("zen-chip");
   const hasIcon = !!icon;
   const isClosable = !!onClose;
   const hasContent = !!children;
@@ -109,8 +117,8 @@ const Chip = props => {
     }
   }, [disabled, readonly, active, onChange]);
   const chipTriggerKeyDownHandler = (0, react_1.useCallback)(e => {
-    var _a;
-    if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-chip__close-button")) {
+    var _a, _b;
+    if ((_b = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) === null || _b === void 0 ? void 0 : _b.classList.contains("zen-chip__close-button")) {
       return;
     }
     if (e.key === "Enter" && !disabled && !readonly) {
@@ -124,7 +132,7 @@ const Chip = props => {
   }, [disabled, readonly, handleClick]);
   const onKeyUpHandler = (0, react_1.useCallback)(e => {
     var _a;
-    if (e.key === "Tab" || e.key === "Enter" || e.key === " ") {
+    if (e.key === "Tab" || e.key === "Enter" || e.key === " " || e.key === "ArrowLeft" || e.key === "ArrowRight") {
       (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add("zen-chip--keyboard-nav");
     }
   }, [ref]);
@@ -136,8 +144,11 @@ const Chip = props => {
     e.stopPropagation();
     e.preventDefault();
     isClosable && onClose(id || chipId);
-  }, [isClosable, onClose, id, chipId]);
-  const memoizedClasses = (0, react_1.useMemo)(() => ["zen-chip", driveChipClass !== null && driveChipClass !== void 0 ? driveChipClass : "", isTriggerMode ? (0, getChipStateClassName_1.getChipTriggerStateClassName)(!!disabled, isOpen, status) : (0, getChipStateClassName_1.getChipStateClassName)(!!disabled, !!readonly, active, status), className !== null && className !== void 0 ? className : ""], [driveChipClass, isTriggerMode, disabled, isOpen, status, readonly, active, className]);
+    if (triggerRef && typeof triggerRef !== "function" && triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, [isClosable, onClose, id, chipId, triggerRef]);
+  const memoizedClasses = (0, react_1.useMemo)(() => ["zen-chip", isMobile ? "zen-chip--mobile" : "", driveChipClass || mobileChipClass || "", isTriggerMode ? (0, getChipStateClassName_1.getChipTriggerStateClassName)(!!disabled, isOpen, status) : (0, getChipStateClassName_1.getChipStateClassName)(!!disabled, !!readonly, active, status), className !== null && className !== void 0 ? className : "", isTriggerMode ? "zen-chip--trigger" : "zen-chip--standard"], [isMobile, driveChipClass, mobileChipClass, isTriggerMode, disabled, isOpen, status, readonly, active, className]);
   const chipComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("label", {
     className: (0, classNames_1.classNames)(memoizedClasses),
     ref: ref,
@@ -155,57 +166,60 @@ const Chip = props => {
       disabled: disabled,
       readOnly: readonly
     }), children ? (0, jsx_runtime_1.jsx)("div", {
-      className: (0, classNames_1.classNames)(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]),
+      className: (0, classNames_1.classNames)(["zen-chip-text-content", driveTextClass || mobileTextClass || ""]),
       children: children
-    }) : null, svgIcon, isClosable && (0, jsx_runtime_1.jsx)("button", {
-      type: "button",
-      className: "zen-chip__close-button",
-      onClick: handleClose,
-      title: closeAriaText || translate("Close"),
-      "aria-label": closeAriaText || translate("Close"),
-      children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
-        size: isDrive ? "huger" : "large",
-        className: "zen-pill-non-actionable__close-icon"
-      })
-    })]
-  }), [memoizedClasses, ref, title, chipTitle, id, chipId, active, onBlurHandler, onKeyUpHandler, onKeyDownHandler, onChangeHandler, disabled, readonly, children, driveTextClass, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive]);
+    }) : null, svgIcon]
+  }), [memoizedClasses, ref, title, chipTitle, id, chipId, active, onBlurHandler, onKeyUpHandler, onKeyDownHandler, onChangeHandler, disabled, readonly, children, driveTextClass, mobileTextClass, svgIcon]);
   const chipTriggerComponent = (0, react_1.useMemo)(() => {
     const extraAttributes = title ? {
       "aria-label": title
     } : chipTitle ? {
       "aria-label": chipTitle
     } : {};
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({
-      role: "button",
-      tabIndex: 0
-    }, extraAttributes, {
-      onClick: handleClick,
-      onKeyDown: chipTriggerKeyDownHandler,
+    return (0, jsx_runtime_1.jsxs)("div", {
       className: (0, classNames_1.classNames)(memoizedClasses),
-      "data-id": id || chipId,
-      ref: triggerRef,
-      children: (0, jsx_runtime_1.jsxs)("div", {
-        className: "zen-chip__content-wrapper",
-        children: [hasContent ? (0, jsx_runtime_1.jsx)("div", {
-          className: (0, classNames_1.classNames)(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]),
-          children: children
-        }) : null, svgIcon, isClosable && (0, jsx_runtime_1.jsx)("button", {
-          type: "button",
-          className: "zen-chip__close-button",
-          onClick: handleClose,
-          title: closeAriaText || translate("Close"),
-          "aria-label": closeAriaText || translate("Close"),
+      children: [(0, jsx_runtime_1.jsx)("div", Object.assign({
+        role: "button",
+        tabIndex: 0,
+        className: (0, classNames_1.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 ? {
+        "data-role": dataRole
+      } : {}, {
+        ref: triggerRef,
+        children: (0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-chip__content-wrapper",
+          children: [hasContent ? (0, jsx_runtime_1.jsx)("div", {
+            id: `${id || chipId}_content`,
+            className: (0, classNames_1.classNames)(["zen-chip-text-content", driveTextClass || mobileTextClass || ""]),
+            children: children
+          }) : null, svgIcon, hasQuantity && quantity ? (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-chip__quantity",
+            children: quantity
+          }) : null]
+        })
+      })), isClosable && (0, jsx_runtime_1.jsx)("button", {
+        type: "button",
+        className: "zen-chip__close-button",
+        onClick: handleClose,
+        title: closeAriaText || translate("Clear selection"),
+        "aria-label": closeAriaText || translate("Clear selection"),
+        "aria-describedby": `${id || chipId}_content`,
+        children: (0, jsx_runtime_1.jsx)("div", {
+          className: "zen-chip__close-icon-wrapper",
           children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
-            size: isDrive ? "huger" : "large",
-            className: "zen-pill-non-actionable__close-icon"
+            size: isDrive ? "huger" : "large"
           })
-        }), hasQuantity && quantity ? (0, jsx_runtime_1.jsx)("div", {
-          className: "zen-chip__quantity",
-          children: quantity
-        }) : null]
-      })
-    }));
-  }, [title, chipTitle, handleClick, chipTriggerKeyDownHandler, memoizedClasses, id, chipId, triggerRef, hasContent, driveTextClass, children, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive, hasQuantity, quantity]);
+        })
+      })]
+    });
+  }, [title, chipTitle, handleClick, chipTriggerKeyDownHandler, memoizedClasses, id, chipId, triggerRef, hasContent, driveTextClass, mobileTextClass, children, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive, active, dataRole, hasQuantity, quantity]);
   return isTriggerMode ? chipTriggerComponent : chipComponent;
 };
 exports.Chip = Chip;

package/dist/commonHelpers/arrowNavigation/arrowNavigationHelper.js

@@ -1,15 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.scrollElement = exports.extractButtonAction = exports.getScrollOptions = exports.clearTimerTimeout = exports.clearTimerInterval = void 0;
+const zen_1 = require("../../utils/zen");
 const clearTimerInterval = (timerId) => {
+    var _a;
     if (timerId !== null) {
-        clearInterval(timerId);
+        (_a = zen_1.zen.clearInterval) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timerId);
     }
 };
 exports.clearTimerInterval = clearTimerInterval;
 const clearTimerTimeout = (timerId) => {
+    var _a;
     if (timerId !== null) {
-        clearTimeout(timerId);
+        (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timerId);
     }
 };
 exports.clearTimerTimeout = clearTimerTimeout;

package/dist/commonHelpers/arrowNavigation/hooks/useHoldOnScroll.js

@@ -6,6 +6,7 @@ const arrowNavigationHelper_1 = require("../arrowNavigationHelper");
 const useClearTimers_1 = require("./useClearTimers");
 const useScrollWhileHolding_1 = require("./useScrollWhileHolding");
 const useResize_1 = require("../../hooks/useResize");
+const zen_1 = require("../../../utils/zen");
 const useHoldOnScroll = () => {
     const scrollableElementRef = (0, react_1.useRef)(null);
     const timerRef = (0, react_1.useRef)(null);
@@ -13,12 +14,13 @@ const useHoldOnScroll = () => {
     const [action, setAction] = (0, react_1.useState)(null);
     const [isScrollable, setIsScrollable] = (0, react_1.useState)(true);
     const onMouseDown = (e) => {
+        var _a;
         const actionName = (0, arrowNavigationHelper_1.extractButtonAction)(e);
         if (!actionName) {
             return;
         }
         setAction(actionName);
-        timerRef.current = window.setTimeout(() => {
+        timerRef.current = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
             action && setAction(actionName);
         }, 500);
     };

package/dist/commonHelpers/arrowNavigation/hooks/useScrollWhileHolding.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScrollWhileHolding = void 0;
 const react_1 = require("react");
 const arrowNavigationHelper_1 = require("../arrowNavigationHelper");
+const zen_1 = require("../../../utils/zen");
 const useScrollWhileHolding = ({ action, container, intervalTimer }) => {
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!container || !action) {
             return;
         }
-        intervalTimer.current = window.setInterval(() => {
+        intervalTimer.current = (_a = zen_1.zen.setInterval) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
             const { left, top } = (0, arrowNavigationHelper_1.getScrollOptions)(action, container);
             (0, arrowNavigationHelper_1.scrollElement)(container, { left, top });
             if ((left === container.scrollWidth && action === "right") || (left === 0 && action === "left")) {

package/dist/commonHelpers/hooks/deviceProvider.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { DeviceType } from "./deviceType";
+export declare const DeviceContext: React.Context<DeviceType | undefined>;
+export declare const DeviceProvider: React.FC<{
+    deviceType: DeviceType;
+    children: React.ReactNode;
+}>;

package/dist/commonHelpers/hooks/deviceProvider.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeviceProvider = exports.DeviceContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+exports.DeviceContext = react_1.default.createContext(undefined);
+const DeviceProvider = ({ deviceType, children }) => (0, jsx_runtime_1.jsx)(exports.DeviceContext.Provider, { value: deviceType, children: children });
+exports.DeviceProvider = DeviceProvider;

package/dist/commonHelpers/hooks/useClientReady.d.ts

@@ -0,0 +1 @@
+export declare const useClientReady: () => boolean;

package/dist/commonHelpers/hooks/useClientReady.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClientReady = void 0;
+const react_1 = require("react");
+const isDomEnv_1 = require("../isDomEnv");
+const useClientReady = () => {
+    const [isClientReady, setIsClientReady] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if ((0, isDomEnv_1.isDomEnv)()) {
+            setIsClientReady(true);
+        }
+    }, []);
+    return isClientReady;
+};
+exports.useClientReady = useClientReady;

package/dist/commonHelpers/hooks/useDebounce.js

@@ -2,14 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDebounce = void 0;
 const react_1 = require("react");
+const zen_1 = require("../../utils/zen");
 const useDebounce = function (callback, delay = 400) {
     const timeoutRef = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(() => () => {
-        timeoutRef.current && clearTimeout(timeoutRef.current);
+        var _a;
+        timeoutRef.current && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutRef.current));
     }, []);
     return (0, react_1.useCallback)((...rest) => {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
+        var _a, _b;
+        (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutRef.current);
+        timeoutRef.current = (_b = zen_1.zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, () => {
             callback(...rest);
         }, delay);
     }, [callback, delay]);

package/dist/commonHelpers/hooks/useDebouncedMemo.js

@@ -2,14 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDebouncedMemo = void 0;
 const react_1 = require("react");
+const zen_1 = require("../../utils/zen");
 function useDebouncedMemo(factory, deps, delay) {
     const [state, setState] = (0, react_1.useState)(() => factory());
     const mountedRef = (0, react_1.useRef)(false);
     const timeoutRef = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(() => {
+        var _a, _b;
         if (mountedRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = setTimeout(() => {
+            (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutRef.current);
+            timeoutRef.current = (_b = zen_1.zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, () => {
                 setState(factory());
             }, delay);
         }
@@ -17,7 +19,8 @@ function useDebouncedMemo(factory, deps, delay) {
             mountedRef.current = true;
         }
         return () => {
-            clearTimeout(timeoutRef.current);
+            var _a;
+            (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutRef.current);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [delay, factory, ...deps]);

package/dist/commonHelpers/hooks/useDeviceType.js

@@ -6,6 +6,7 @@ const useResize_1 = require("./useResize");
 const deviceType_1 = require("./deviceType");
 const topWindowContext_1 = require("../../utils/topWindow/topWindowContext");
 const getParentWindow_1 = require("../../utils/getParentWindow");
+const zen_1 = require("../../utils/zen");
 const MobileMaxWidth = 640;
 const getDeviceType = (width) => {
     if (width > MobileMaxWidth) {
@@ -16,7 +17,7 @@ const getDeviceType = (width) => {
 exports.getDeviceType = getDeviceType;
 const useDeviceType = (callback) => {
     const { topWindow } = (0, react_1.useContext)(topWindowContext_1.topWindowContext);
-    const win = (0, react_1.useMemo)(() => topWindow || (0, getParentWindow_1.getParentWindow)(window), [topWindow]);
+    const win = (0, react_1.useMemo)(() => topWindow || (0, getParentWindow_1.getParentWindow)(zen_1.zen), [topWindow]);
     const [deviceType, setDeviceType] = (0, react_1.useState)((0, exports.getDeviceType)(win.innerWidth));
     (0, useResize_1.useResize)(() => {
         setDeviceType((0, exports.getDeviceType)(win.innerWidth));