@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/esm/checkbox/checkbox.js

@@ -18,12 +18,14 @@ import { getCheckboxState } from "./checkboxUtils";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { CheckboxIconCheckmark } from "./checkboxIconCheckmark";
 import { CheckboxIconMinus } from "./checkboxIconMinus";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
 export 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 = getCheckboxState(checked, indeterminate);
     const generatedId = React.useId();
     const intId = id || generatedId;
     const driveClasses = useDriveClassName("zen-checkbox");
+    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 }, rest));
     const iconAndLabel = _jsxs(_Fragment, { children: [_jsx("div", { className: "zen-checkbox__box", children: state === CheckboxState.Indeterminate ? _jsx(CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) :
@@ -33,5 +35,5 @@ export const Checkbox = (_a) => {
     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 })] });
     }
-    return _jsxs("div", { className: classNames(["zen-checkbox", driveClasses || "", className]), children: [checkbox, _jsx("label", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] });
+    return _jsxs("div", { className: classNames(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, _jsx("label", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] });
 };

package/esm/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/esm/chip/chip.js

@@ -8,32 +8,36 @@ import { getChipStateClassName, getChipTriggerStateClassName } from "./utils/get
 import { IconClose } from "../icons/iconClose";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useChip } from "./utils/useChip";
-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");
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
+import "../utils/globalThisPolyfill";
+import { zen } from "../utils/zen";
+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");
 function isChipTrigger(props) {
   return "triggerRef" in props;
 }
@@ -47,7 +51,8 @@ export const Chip = props => {
     status,
     quantity,
     onClose,
-    title
+    title,
+    dataRole
   } = props;
   const isTriggerMode = isChipTrigger(props);
   const readonly = !isTriggerMode ? props.readonly : undefined;
@@ -60,11 +65,14 @@ export const Chip = props => {
   const hasQuantity = typeof quantity === "number";
   const chipId = useId();
   const isDrive = useDrive();
+  const isMobile = useMobile();
   const {
     translate
   } = useLanguage();
   const driveTextClass = useDriveClassName("zen-chip-text-content");
+  const mobileTextClass = useMobileClassName("zen-chip-text-content");
   const driveChipClass = useDriveClassName("zen-chip");
+  const mobileChipClass = useMobileClassName("zen-chip");
   const hasIcon = !!icon;
   const isClosable = !!onClose;
   const hasContent = !!children;
@@ -101,8 +109,8 @@ export const Chip = props => {
     }
   }, [disabled, readonly, active, onChange]);
   const chipTriggerKeyDownHandler = 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.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) {
@@ -116,7 +124,7 @@ export const Chip = props => {
   }, [disabled, readonly, handleClick]);
   const onKeyUpHandler = 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]);
@@ -128,8 +136,11 @@ export const Chip = props => {
     e.stopPropagation();
     e.preventDefault();
     isClosable && onClose(id || chipId);
-  }, [isClosable, onClose, id, chipId]);
-  const memoizedClasses = useMemo(() => ["zen-chip", driveChipClass !== null && driveChipClass !== void 0 ? driveChipClass : "", isTriggerMode ? getChipTriggerStateClassName(!!disabled, isOpen, status) : 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 = useMemo(() => ["zen-chip", isMobile ? "zen-chip--mobile" : "", driveChipClass || mobileChipClass || "", isTriggerMode ? getChipTriggerStateClassName(!!disabled, isOpen, status) : 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 = useMemo(() => _jsxs("label", {
     className: classNames(memoizedClasses),
     ref: ref,
@@ -147,56 +158,59 @@ export const Chip = props => {
       disabled: disabled,
       readOnly: readonly
     }), children ? _jsx("div", {
-      className: classNames(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]),
+      className: classNames(["zen-chip-text-content", driveTextClass || mobileTextClass || ""]),
       children: children
-    }) : null, svgIcon, isClosable && _jsx("button", {
-      type: "button",
-      className: "zen-chip__close-button",
-      onClick: handleClose,
-      title: closeAriaText || translate("Close"),
-      "aria-label": closeAriaText || translate("Close"),
-      children: _jsx(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 = useMemo(() => {
     const extraAttributes = title ? {
       "aria-label": title
     } : chipTitle ? {
       "aria-label": chipTitle
     } : {};
-    return _jsx("div", Object.assign({
-      role: "button",
-      tabIndex: 0
-    }, extraAttributes, {
-      onClick: handleClick,
-      onKeyDown: chipTriggerKeyDownHandler,
+    return _jsxs("div", {
       className: classNames(memoizedClasses),
-      "data-id": id || chipId,
-      ref: triggerRef,
-      children: _jsxs("div", {
-        className: "zen-chip__content-wrapper",
-        children: [hasContent ? _jsx("div", {
-          className: classNames(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]),
-          children: children
-        }) : null, svgIcon, isClosable && _jsx("button", {
-          type: "button",
-          className: "zen-chip__close-button",
-          onClick: handleClose,
-          title: closeAriaText || translate("Close"),
-          "aria-label": closeAriaText || translate("Close"),
+      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 ? {
+        "data-role": dataRole
+      } : {}, {
+        ref: triggerRef,
+        children: _jsxs("div", {
+          className: "zen-chip__content-wrapper",
+          children: [hasContent ? _jsx("div", {
+            id: `${id || chipId}_content`,
+            className: classNames(["zen-chip-text-content", driveTextClass || mobileTextClass || ""]),
+            children: children
+          }) : null, svgIcon, hasQuantity && quantity ? _jsx("div", {
+            className: "zen-chip__quantity",
+            children: quantity
+          }) : null]
+        })
+      })), isClosable && _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: _jsx("div", {
+          className: "zen-chip__close-icon-wrapper",
           children: _jsx(IconClose, {
-            size: isDrive ? "huger" : "large",
-            className: "zen-pill-non-actionable__close-icon"
+            size: isDrive ? "huger" : "large"
           })
-        }), hasQuantity && quantity ? _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;
 };

package/esm/commonHelpers/arrowNavigation/arrowNavigationHelper.js

@@ -1,11 +1,14 @@
+import { zen } from "../../utils/zen";
 export const clearTimerInterval = (timerId) => {
+    var _a;
     if (timerId !== null) {
-        clearInterval(timerId);
+        (_a = zen.clearInterval) === null || _a === void 0 ? void 0 : _a.call(zen, timerId);
     }
 };
 export const clearTimerTimeout = (timerId) => {
+    var _a;
     if (timerId !== null) {
-        clearTimeout(timerId);
+        (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timerId);
     }
 };
 export const getScrollOptions = (action, element) => {

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

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

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

@@ -1,11 +1,13 @@
 import { useEffect } from "react";
 import { getScrollOptions, scrollElement, clearTimerInterval } from "../arrowNavigationHelper";
+import { zen } from "../../../utils/zen";
 export const useScrollWhileHolding = ({ action, container, intervalTimer }) => {
     useEffect(() => {
+        var _a;
         if (!container || !action) {
             return;
         }
-        intervalTimer.current = window.setInterval(() => {
+        intervalTimer.current = (_a = zen.setInterval) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
             const { left, top } = getScrollOptions(action, container);
             scrollElement(container, { left, top });
             if ((left === container.scrollWidth && action === "right") || (left === 0 && action === "left")) {

package/esm/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/esm/commonHelpers/hooks/deviceProvider.js

@@ -0,0 +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 });

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

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

package/esm/commonHelpers/hooks/useClientReady.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react";
+import { isDomEnv } from "../isDomEnv";
+export const useClientReady = () => {
+    const [isClientReady, setIsClientReady] = useState(false);
+    useEffect(() => {
+        if (isDomEnv()) {
+            setIsClientReady(true);
+        }
+    }, []);
+    return isClientReady;
+};

package/esm/commonHelpers/hooks/useDebounce.js

@@ -1,12 +1,15 @@
 import { useCallback, useEffect, useRef } from "react";
+import { zen } from "../../utils/zen";
 export const useDebounce = function (callback, delay = 400) {
     const timeoutRef = useRef(undefined);
     useEffect(() => () => {
-        timeoutRef.current && clearTimeout(timeoutRef.current);
+        var _a;
+        timeoutRef.current && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutRef.current));
     }, []);
     return useCallback((...rest) => {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
+        var _a, _b;
+        (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutRef.current);
+        timeoutRef.current = (_b = zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, () => {
             callback(...rest);
         }, delay);
     }, [callback, delay]);

package/esm/commonHelpers/hooks/useDebouncedMemo.js

@@ -1,12 +1,14 @@
 import { useEffect, useRef, useState } from "react";
+import { zen } from "../../utils/zen";
 export function useDebouncedMemo(factory, deps, delay) {
     const [state, setState] = useState(() => factory());
     const mountedRef = useRef(false);
     const timeoutRef = useRef(undefined);
     useEffect(() => {
+        var _a, _b;
         if (mountedRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = setTimeout(() => {
+            (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutRef.current);
+            timeoutRef.current = (_b = zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, () => {
                 setState(factory());
             }, delay);
         }
@@ -14,7 +16,8 @@ export function useDebouncedMemo(factory, deps, delay) {
             mountedRef.current = true;
         }
         return () => {
-            clearTimeout(timeoutRef.current);
+            var _a;
+            (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutRef.current);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [delay, factory, ...deps]);

package/esm/commonHelpers/hooks/useDeviceType.js

@@ -3,6 +3,7 @@ import { useResize } from "./useResize";
 import { DeviceType } from "./deviceType";
 import { topWindowContext } from "../../utils/topWindow/topWindowContext";
 import { getParentWindow } from "../../utils/getParentWindow";
+import { zen } from "../../utils/zen";
 const MobileMaxWidth = 640;
 export const getDeviceType = (width) => {
     if (width > MobileMaxWidth) {
@@ -12,7 +13,7 @@ export const getDeviceType = (width) => {
 };
 export const useDeviceType = (callback) => {
     const { topWindow } = useContext(topWindowContext);
-    const win = useMemo(() => topWindow || getParentWindow(window), [topWindow]);
+    const win = useMemo(() => topWindow || getParentWindow(zen), [topWindow]);
     const [deviceType, setDeviceType] = useState(getDeviceType(win.innerWidth));
     useResize(() => {
         setDeviceType(getDeviceType(win.innerWidth));

package/esm/commonHelpers/hooks/useKeydown.js

@@ -1,11 +1,14 @@
 import { useEffect } from "react";
+import { zen } from "../../utils/zen";
 export const useKeydown = (callback, subscriptionTrigger, condition) => {
     useEffect(() => {
+        var _a;
         if (condition ? condition(subscriptionTrigger) : subscriptionTrigger) {
-            document.body.addEventListener("keydown", callback);
+            (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.addEventListener("keydown", callback);
         }
         return () => {
-            document.body.removeEventListener("keydown", callback);
+            var _a;
+            (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.removeEventListener("keydown", callback);
         };
     }, [callback, condition, subscriptionTrigger]);
 };

package/esm/commonHelpers/hooks/useMobile.js

@@ -1,11 +1,14 @@
-import { useMemo, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 import { DeviceType } from "./deviceType";
 import { getDeviceType, useDeviceType } from "./useDeviceType";
 import { getParentWindow } from "../../utils/getParentWindow";
-const initialParent = getParentWindow(window);
+import { DeviceContext } from "./deviceProvider";
+import { zen } from "../../utils/zen";
+const initialParent = getParentWindow(zen);
 export const initialValue = getDeviceType(initialParent.innerWidth);
 export const useMobile = () => {
-    const [deviceType, setDeviceType] = useState(initialValue);
+    const deviceTypeFromProvider = useContext(DeviceContext);
+    const [deviceType, setDeviceType] = useState(deviceTypeFromProvider || initialValue);
     useDeviceType(setDeviceType);
     const isMobile = useMemo(() => deviceType === DeviceType.Mobile, [deviceType]);
     return isMobile;

package/esm/commonHelpers/hooks/usePillSize.js

@@ -2,6 +2,7 @@ import { useState, useRef, useCallback, useLayoutEffect, useMemo, useEffect } fr
 import { classNames } from "../classNames/classNames";
 import { useResize } from "./useResize";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+import { useMobileClassName } from "../../utils/theme/useMobileClassName";
 const PILL_WIDTH_WITHOUT_CONTENT = 64;
 export const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTitle }) => {
     const isFixedSize = size && size !== "default" && size !== "fullWidth";
@@ -11,6 +12,7 @@ export const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTi
     const [textContent, setTextContent] = useState(initialTitle || "");
     const ref = useRef(null);
     const driveClass = useDriveClassName("zen-pill-new-content");
+    const mobileClass = useMobileClassName("zen-pill-new-content");
     useEffect(() => {
         var _a;
         if (initialTitle) {
@@ -28,7 +30,7 @@ export const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTi
     }, [isContentHidden, textContent]);
     const contentClasses = classNames([
         "zen-pill-new-content",
-        driveClass || "",
+        mobileClass || driveClass || "",
         iconPosition === "left" ? "zen-pill-new-content--icon-left" : iconPosition === "right" ? "zen-pill-new-content--icon-right" : "",
         isContentHidden ? "zen-pill-new-content--hidden" : "",
         isClosable ? "zen-pill-new-content--closable" : "",

package/esm/commonHelpers/hooks/usePortal.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare const usePortal: (children: ReactNode, container?: Element | DocumentFragment, key?: null | string) => import("react").ReactPortal | null;

package/esm/commonHelpers/hooks/usePortal.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+export const usePortal = (children, container, key) => {
+    const [portalContainer, setPortalContainer] = useState(container);
+    useEffect(() => {
+        if (portalContainer || !container) {
+            return;
+        }
+        setPortalContainer(container);
+    }, [portalContainer, container]);
+    return portalContainer ? createPortal(children, portalContainer, key) : null;
+};

package/esm/commonHelpers/hooks/useResize.js

@@ -1,13 +1,15 @@
 import { useEffect } from "react";
+import { zen } from "../../utils/zen";
 export const useResize = (callback, active) => {
     useEffect(() => {
+        var _a;
         if (!active) {
-            return;
+            return undefined;
         }
-        window.addEventListener("resize", callback);
-        // eslint-disable-next-line consistent-return
+        (_a = zen.addEventListener) === null || _a === void 0 ? void 0 : _a.call(zen, "resize", callback);
         return () => {
-            window.removeEventListener("resize", callback);
+            var _a;
+            (_a = zen.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(zen, "resize", callback);
         };
     }, [callback, active]);
 };

package/esm/commonHelpers/hooks/useResizeObserver.js

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useRef, useState } from "react";
+import { zen } from "../../utils/zen";
 const isRefObject = (target) => !!target && target.hasOwnProperty("current");
 const getTarget = (target) => {
     const targetObj = isRefObject(target) ? target.current : target;
@@ -7,17 +8,21 @@ const getTarget = (target) => {
 export const useResizeObserver = ({ target }) => {
     const [result, setResult] = useState(null);
     const timeoutRef = useRef(null);
-    const observer = useRef(new ResizeObserver((entities) => {
-        timeoutRef.current && cancelAnimationFrame(timeoutRef.current);
-        timeoutRef.current = requestAnimationFrame(() => setResult(entities[0]));
-    }));
+    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 observer = useRef(observerCallback);
     useLayoutEffect(() => {
         const targetObj = getTarget(target);
         const observerObj = observer.current;
-        targetObj && observerObj.observe(targetObj);
+        targetObj && (observerObj === null || observerObj === void 0 ? void 0 : observerObj.observe(targetObj));
         return () => {
-            timeoutRef.current && cancelAnimationFrame(timeoutRef.current);
-            observerObj.disconnect();
+            var _a;
+            timeoutRef.current && ((_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutRef.current));
+            observerObj === null || observerObj === void 0 ? void 0 : observerObj.disconnect();
         };
     }, [target]);
     return { result };

package/esm/commonHelpers/hooks/useScroll.js

@@ -1,5 +1,8 @@
 import { useEffect } from "react";
-export const useScroll = (callback, active, triggerRef = document.body) => {
+import { zen } from "../../utils/zen";
+export const useScroll = (callback, active, triggerRef) => {
+    var _a;
+    if (triggerRef === void 0) { triggerRef = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body; }
     useEffect(() => {
         if (!active || triggerRef === null) {
             return;

package/esm/commonHelpers/hooks/useThrottle.d.ts

@@ -1 +1 @@
-export declare const useThrottle: <T extends unknown[]>(callback: (...rest: T) => void, delay?: number) => (...rest: T) => () => void;
+export declare const useThrottle: <T extends unknown[]>(callback: (...rest: T) => void, delay?: number) => (...rest: T) => () => void | undefined;

package/esm/commonHelpers/hooks/useThrottle.js

@@ -1,16 +1,18 @@
 import { useCallback, useRef } from "react";
+import { zen } from "../../utils/zen";
 export const useThrottle = function (callback, delay = 400) {
     const timeoutRef = useRef(undefined);
     const latestValuesRef = useRef(undefined);
     return useCallback((...rest) => {
+        var _a;
         if (!timeoutRef.current) {
-            timeoutRef.current = setTimeout(() => {
+            timeoutRef.current = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
                 latestValuesRef.current && callback(...(latestValuesRef.current));
                 timeoutRef.current = undefined;
                 latestValuesRef.current = undefined;
             }, delay);
         }
         latestValuesRef.current = rest;
-        return () => clearTimeout(timeoutRef.current);
+        return () => { var _a; return (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutRef.current); };
     }, [callback, delay]);
 };