@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/esm/sidePanel/sidePanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useContext, useEffect, useMemo, useRef } from "react";
+import { useContext, useEffect, useId, useMemo, useRef } from "react";
 import { isFocusable } from "../dialog/dialogHelpers";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { useEscape } from "../commonHelpers/hooks/useEscape";
@@ -8,14 +8,18 @@ import { useTrapFocus } from "../commonHelpers/hooks/useTrapFocus";
 import { isChildOf } from "../utils/isChildOf";
 import { getParentByClass } from "../utils/getParentByClass";
 import { SidePanelCell } from "./sidePanelCell/sidePanelCell";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
-import { createPortal } from "react-dom";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { themeContext } from "../utils/theme/themeContext";
 import { useFadeComponent } from "../utils/useFadeComponent";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { isAlertTarget } from "../alert/utils/isAlertTarget";
+import { isToastTarget } from "../toast/utils/isToastTarget";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
+import { zen } from "../utils/zen";
 /* eslint-enable @typescript-eslint/naming-convention */
 export const isChildPopup = (target, stopElement) => {
+    var _a;
     const parentPopup = getParentByClass(target, "zen-absolute");
     const parentSidePanel = getParentByClass(target, "zen-side-panel");
     if (!parentPopup && !parentSidePanel) {
@@ -25,7 +29,7 @@ export const isChildPopup = (target, stopElement) => {
         return true;
     }
     const popupTrigger = parentPopup
-        ? document.querySelector(`[data-popup-id='${parentPopup.id}']`)
+        ? (_a = zen.document) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-popup-id='${parentPopup.id}']`)
         : undefined;
     if (!popupTrigger) {
         return false;
@@ -48,23 +52,25 @@ export var SidePanelCloseReason;
 })(SidePanelCloseReason || (SidePanelCloseReason = {}));
 export const CUSTOM_POPUP_COMPONENT_CLASSNAME = "zen-custom-component-popup";
 export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, triggerRef, panelPosition = "right", useTrapFocusWithTrigger, preventFirstFocus, width, onTransitionEnd }) => {
+    var _a, _b;
     const { renderComponent, showContent, readyForFocus, setIsOpen, handleTransitionEnd } = useFadeComponent(isOpen, onTransitionEnd);
     const { dark } = useContext(themeContext);
     const isMobile = useMobile();
     const sidePanelRef = useRef(null);
     const driveClassName = useDriveClassName("zen-side-panel");
-    const autoId = useUniqueId();
+    const autoId = useId();
     const popupId = id || autoId;
     const prevReadyForFocus = useRef(false);
+    const isClientReady = useClientReady();
     useEffect(() => {
-        if (triggerRef && triggerRef.current) {
+        if (triggerRef && triggerRef.current && isClientReady) {
             const triggerRole = triggerRef.current.dataset.role;
             triggerRef.current.setAttribute("aria-haspopup", triggerRole ? triggerRole : "true");
             triggerRef.current.setAttribute("aria-expanded", renderComponent ? "true" : "false");
             triggerRef.current.setAttribute("aria-controls", popupId);
             triggerRef.current.setAttribute("data-popup-id", popupId);
         }
-    }, [triggerRef, renderComponent, popupId]);
+    }, [triggerRef, renderComponent, popupId, isClientReady]);
     function handleEscape() {
         onHidePanel(SidePanelCloseReason.Escape);
         if (!triggerRef || !triggerRef.current) {
@@ -77,12 +83,16 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
         const focusable = Array.from(triggerRef.current.querySelectorAll(FOCUSABLE_SELECTOR));
         (focusable[0] || triggerRef.current).focus();
     }
-    useTrapFocus(sidePanelRef, useTrapFocusWithTrigger ? triggerRef : undefined, showContent);
-    useEscape(sidePanelRef, handleEscape, renderComponent);
+    useTrapFocus(sidePanelRef, useTrapFocusWithTrigger ? triggerRef : undefined, showContent && isClientReady);
+    useEscape(sidePanelRef, handleEscape, renderComponent && isClientReady);
     useEffect(() => {
-        var _a, _b;
+        var _a, _b, _c;
+        if (!isClientReady) {
+            return undefined;
+        }
         // eslint-disable-next-line complexity
         const closeOnClickOutside = (e) => {
+            var _a, _b, _c, _d, _e, _f;
             if (!sidePanelRef.current || !e.target) {
                 return;
             }
@@ -96,18 +106,18 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
                 "zen-groups-filter-menu__action-button-back"
             ]
                 .some((groupsFilterButton) => e.target.classList.contains(groupsFilterButton));
-            const isOpenAdvancedDialog = document.querySelector(".zen-advanced-groups-filter") !== null;
-            const isOpenDropdownMobile = document.querySelector(".zen-dropdown--mobile");
-            const isOpenPeriodPicker = document.querySelector(".zen-filters-bar-period-picker__popup");
-            const isOpenTimePicker = document.querySelector(".zen-time-picker__popup");
-            const isOpenYearPicker = document.querySelector(".zen-parallel-selection-popup");
-            const openedCustomComponents = document.querySelectorAll(`.${CUSTOM_POPUP_COMPONENT_CLASSNAME}`);
+            const isOpenAdvancedDialog = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.querySelector(".zen-advanced-groups-filter")) !== null;
+            const isOpenDropdownMobile = (_b = zen.document) === null || _b === void 0 ? void 0 : _b.querySelector(".zen-dropdown--mobile");
+            const isOpenPeriodPicker = (_c = zen.document) === null || _c === void 0 ? void 0 : _c.querySelector(".zen-filters-bar-period-picker__popup");
+            const isOpenTimePicker = (_d = zen.document) === null || _d === void 0 ? void 0 : _d.querySelector(".zen-time-picker__popup");
+            const isOpenYearPicker = (_e = zen.document) === null || _e === void 0 ? void 0 : _e.querySelector(".zen-parallel-selection-popup");
+            const openedCustomComponents = (_f = zen.document) === null || _f === void 0 ? void 0 : _f.querySelectorAll(`.${CUSTOM_POPUP_COMPONENT_CLASSNAME}`);
             const isClickInChildPopup = isChildPopup(e.target, sidePanelRef.current)
                 || isOpenDropdownMobile && isChildOf(e.target, isOpenDropdownMobile)
                 || isOpenPeriodPicker && isChildOf(e.target, isOpenPeriodPicker)
                 || isOpenPeriodPicker && isOpenTimePicker && isChildOf(e.target, isOpenTimePicker)
                 || isOpenPeriodPicker && isOpenYearPicker && isChildOf(e.target, isOpenYearPicker)
-                || openedCustomComponents.length && Array.from(openedCustomComponents).some(el => isChildOf(e.target, el));
+                || (openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) && Array.from(openedCustomComponents).some(el => isChildOf(e.target, el));
             const isClickInPopup = !isClickInChildPopup
                 ? false
                 : isClickInChildPopup;
@@ -116,7 +126,9 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
                     ? e.target === triggerRef.current || isChildOf(e.target, triggerRef.current)
                     : false
                 : false;
-            if (isClickInPopup || isClickOnTrigger || isGroupsFilterBackButton || isOpenAdvancedDialog) {
+            const isAlert = isAlertTarget(e);
+            const isToast = isToastTarget(e);
+            if (isClickInPopup || isClickOnTrigger || isGroupsFilterBackButton || isOpenAdvancedDialog || isAlert || isToast) {
                 return;
             }
             onHidePanel(SidePanelCloseReason.ClickOutside);
@@ -129,13 +141,13 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
             }
         }
         if (renderComponent) {
-            document.body.addEventListener("click", closeOnClickOutside, true);
+            (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body.addEventListener("click", closeOnClickOutside, true);
         }
         else {
             prevReadyForFocus.current = false;
         }
-        return () => document.body.removeEventListener("click", closeOnClickOutside, true);
-    }, [renderComponent, readyForFocus, onHidePanel, triggerRef, useTrapFocusWithTrigger, preventFirstFocus]);
+        return () => { var _a; return (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.removeEventListener("click", closeOnClickOutside, true); };
+    }, [renderComponent, readyForFocus, onHidePanel, triggerRef, useTrapFocusWithTrigger, preventFirstFocus, isClientReady]);
     useEffect(() => {
         setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
@@ -149,16 +161,21 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
         }
         return {};
     }, [width, isMobile, panelPosition]);
-    if (!renderComponent && !isOpen) {
-        return null;
-    }
-    return createPortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: classNames([
+    const portalContainer = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    const portal = usePortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: classNames([
             "zen-side-panel",
             driveClassName || "",
             dark ? "zen-dark" : "",
             showContent ? "zen-side-panel--shown" : "",
             positioningClass,
             className !== null && className !== void 0 ? className : ""
-        ]), children: memoizedChildForRender })), document.fullscreenElement || document.body);
+        ]), children: memoizedChildForRender })), portalContainer);
+    if (!renderComponent && !isOpen) {
+        return null;
+    }
+    if (!isClientReady) {
+        return undefined;
+    }
+    return portal;
 };
 SidePanel.Cell = SidePanelCell;

package/esm/skeletonList/skeletonList.d.ts

@@ -4,6 +4,7 @@ type ISkeletonListSize = "small" | "medium" | "large";
 export interface ISkeletonList extends Omit<IZenComponentProps, "children"> {
     width?: number;
     size?: ISkeletonListSize;
+    height?: number;
 }
-export declare const SkeletonList: ({ className, width, size }: ISkeletonList) => import("react/jsx-runtime").JSX.Element;
+export declare const SkeletonList: ({ className, width, size, height }: ISkeletonList) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/skeletonList/skeletonList.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { Skeleton } from "../skeleton/skeleton";
-export const SkeletonList = ({ className, width, size = "small" }) => {
+export const SkeletonList = ({ className, width, size = "small", height }) => {
     const styleWidth = width ? { style: { width: `${width}px` } } : {};
     const itemWidth = 115;
-    const itemHeight = 14;
+    const itemHeight = height || 14;
     const getSizeCount = (value) => {
         if (value === "large") {
             return 12;

package/esm/stepperRaw/stepperRaw.js

@@ -16,6 +16,8 @@ import { useDrive } from "../utils/theme/useDrive";
 import { onBeforeInput } from "./utils/onBeforeInput";
 import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
 // according to design
 export const INPUT_DEFAULT_WIDTH = 47;
 export const INPUT_DEFAULT_WIDTH_DRIVE = 56;
@@ -34,10 +36,13 @@ export const StepperRaw = props => {
     ariaDescribedby
   } = props;
   const driveComponentClass = useDriveClassName("zen-stepper-field");
+  const mobileComponentClass = useMobileClassName("zen-stepper-field");
   const driveInputClass = useDriveClassName("zen-text-input");
+  const mobileInputClass = useMobileClassName("zen-text-input");
   const isDrive = useDrive();
+  const isMobile = useMobile();
   const validStep = getValidStep(step);
-  const inputWidth = getValidInputWidth(width || (isDrive ? INPUT_DEFAULT_WIDTH_DRIVE : INPUT_DEFAULT_WIDTH), isDrive);
+  const inputWidth = getValidInputWidth(width || (isDrive || isMobile ? INPUT_DEFAULT_WIDTH_DRIVE : INPUT_DEFAULT_WIDTH), isDrive || isMobile);
   const {
     onBlur,
     onChange,
@@ -73,7 +78,7 @@ export const StepperRaw = props => {
     });
   }
   return _jsx("div", {
-    className: classNames(["zen-stepper-field", driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]),
+    className: classNames(["zen-stepper-field", mobileComponentClass || driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]),
     children: _jsxs("div", {
       className: "zen-stepper-field__input-wrapper",
       children: [_jsx("input", {
@@ -87,7 +92,7 @@ export const StepperRaw = props => {
         disabled: disabled,
         type: "number",
         step: step,
-        className: classNames(["zen-stepper-field__input", "zen-text-input", driveInputClass || "", isErrorShown ? "zen-stepper-field__input--error" : ""]),
+        className: classNames(["zen-stepper-field__input", "zen-text-input", mobileInputClass || driveInputClass || "", isErrorShown ? "zen-stepper-field__input--error" : ""]),
         style: {
           width: `${inputWidth}px`
         },
@@ -107,7 +112,7 @@ export const StepperRaw = props => {
           icon: IconChevronTopSmall,
           type: ButtonType.TertiaryBlack,
           iconPosition: ButtonIconPosition.Start,
-          iconSize: isDrive ? "huge" : "large",
+          iconSize: isDrive || isMobile ? "huge" : "large",
           className: "zen-stepper-field__control",
           tabIndex: -1,
           onClick: () => {
@@ -120,7 +125,7 @@ export const StepperRaw = props => {
           icon: IconChevronDownSmall,
           type: ButtonType.TertiaryBlack,
           iconPosition: ButtonIconPosition.Start,
-          iconSize: isDrive ? "huge" : "large",
+          iconSize: isDrive || isMobile ? "huge" : "large",
           className: "zen-stepper-field__control",
           tabIndex: -1,
           onClick: () => {

package/esm/table/flexible/useFlexibleColumns.js

@@ -9,8 +9,10 @@ import { ColumnsPopup } from "./columnsPopup";
 import { ColumnSettingsStorage } from "./columnSettingsStorage";
 import { ActionsColumn } from "../../dataGrid/columns/actionsColumn/actionsColumn";
 import { mergeColumnsSettings } from "./mergeColumnSettings";
+import { zen } from "../../utils/zen";
 export const getColumnSettings = (pageName, defaultValue) => {
-    const storage = new ColumnSettingsStorage(pageName || "", localStorage, defaultValue);
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const storage = new ColumnSettingsStorage(pageName || "", zen === null || zen === void 0 ? void 0 : zen.localStorage, defaultValue);
     return storage.getItem();
 };
 const FlexibleWrapperName = "Flexible";

package/esm/table/flexible/useSettingsStorage.js

@@ -1,11 +1,15 @@
 import { useCallback, useMemo } from "react";
 import { ColumnsSettingsStorage } from "../../dataGrid/withFlexibleColumns/flexibleColumnsStorage";
+import { zen } from "../../utils/zen";
 export const useSettingsStorage = (pageName, storage) => {
-    const settingsStorage = useMemo(() => storage || new ColumnsSettingsStorage(pageName || "", localStorage), [pageName, storage]);
+    const settingsStorage = useMemo(
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    () => storage || new ColumnsSettingsStorage(pageName || "", zen === null || zen === void 0 ? void 0 : zen.localStorage), [pageName, storage]);
     const saveSettingsToTheStorage = useCallback((newSettings) => 
     // not to block main thread this operation can be postponed
     new Promise((resolve, reject) => {
-        setTimeout(() => {
+        var _a;
+        (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
             try {
                 settingsStorage.setItem(newSettings);
                 resolve();

package/esm/table/sortable/sortableHeader.js

@@ -155,8 +155,6 @@ export const SortableHeaderCell = ({
     className: classNames(["zen-sortable-column", isSortedBy ? `zen-sortable-column--active` : "", isMobile ? `zen-sortable-column--mobile` : ""]),
     children: _jsx("div", {
       className: classNames(["zen-caption", "zen-sortable-column__button", "zen-sortable-column-button", isSortedBy ? `zen-sortable-column-button--active` : "", sortDirection === ColumnSortDirection.Ascending ? "zen-sortable-column-button--dir-asc" : "zen-sortable-column-button--dir-desc"]),
-      title: iconTitle,
-      "aria-label": iconTitle,
       onClick: onHeaderClick,
       children: _jsxs(_Fragment, {
         children: [isMobile ? iconButton : null, _jsx("div", {

package/esm/table/sortable/sortableStorage.js

@@ -1,4 +1,13 @@
+import { zen } from "../../utils/zen";
 const STORAGE_PREFIX = "columnsSort_";
+const createFakeStorage = () => {
+    const settings = new Map();
+    return {
+        getItem: (key) => settings.get(key) || null,
+        setItem: (key, s) => settings.set(key, s),
+        removeItem: (key) => settings.delete(key)
+    };
+};
 export class SortableColumnsStorage {
     constructor(pageName, defaultSortState) {
         Object.defineProperty(this, "defaultSortState", {
@@ -19,7 +28,8 @@ export class SortableColumnsStorage {
             writable: true,
             value: void 0
         });
-        this.storage = localStorage;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        this.storage = (zen === null || zen === void 0 ? void 0 : zen.localStorage) || createFakeStorage();
         this.storeKey = `${STORAGE_PREFIX}${pageName}`;
     }
     getItem() {

package/esm/table/sortable/useSortableColumns.js

@@ -1,8 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
+import { ColumnSortDirection } from "./interfaces";
 import { SortableColumnsStorage } from "./sortableStorage";
 import { SortableHeaderCell } from "./sortableHeader";
 import { ActionsColumn } from "../../dataGrid/columns/actionsColumn/actionsColumn";
+import { zen } from "../../utils/zen";
+const getAriaSortValue = (isSortedBy, sortDirection) => {
+    if (!isSortedBy || sortDirection === undefined) {
+        return undefined;
+    }
+    return sortDirection === ColumnSortDirection.Ascending ? "ascending" : "descending";
+};
 const SortableWrapperName = "Sortable";
 export const getSortableValue = (pageName, defaultValue) => {
     const storage = new SortableColumnsStorage(pageName, defaultValue);
@@ -14,7 +22,8 @@ export const useSortableColumns = (columns, sortable, isMobile) => {
     const saveSettingsToTheStore = useCallback((newSettings) => 
     // not to block main thread this operation can be postponed
     new Promise((resolve, reject) => {
-        setTimeout(() => {
+        var _a;
+        (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
             try {
                 settingsStore.setItem(newSettings);
                 resolve();
@@ -45,7 +54,10 @@ export const useSortableColumns = (columns, sortable, isMobile) => {
                     var _a;
                     return _jsx(SortableHeaderCell, { columnName: column.id, isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortSettings.sortDirection : undefined, title: title, tooltip: column.title, onSortChange: onSort, initialSortDirection: (_a = column.meta) === null || _a === void 0 ? void 0 : _a.initialSortDirection });
                 },
-                render: (value, _) => value
+                render: (value, _) => value,
+                getHeaderProps: () => ({
+                    ariaSort: getAriaSortValue(isSortedBy, isSortedBy ? sortSettings.sortDirection : undefined)
+                })
             };
             const columnWrappers = (column.wrappers || []).filter(w => w.name !== SortableWrapperName);
             return Object.assign(Object.assign({}, column), { wrappers: [...columnWrappers, wrapper] });

package/esm/tabs/tabItem/tabItem.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+import { useMobileClassName } from "../../utils/theme/useMobileClassName";
 export const TabItem = ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity }) => {
     const driveClassname = useDriveClassName("zen-tab-item");
-    return _jsx("button", { id: tabId, type: "button", className: classNames(["zen-tab-item", driveClassname || "", active ? "zen-tab-item--active" : ""]), role: "tab", "aria-controls": ariaControl, "aria-selected": active ? "true" : "false", "aria-label": tabName, title: tabName, onClick: handleButtonClick, children: _jsxs("div", { className: "zen-tab-item__content", children: [icon && _jsx("span", { className: classNames(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon }), _jsx("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && _jsx("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) });
+    const mobileClassname = useMobileClassName("zen-tab-item");
+    return _jsx("button", { id: tabId, type: "button", className: classNames(["zen-tab-item", driveClassname || mobileClassname || "", active ? "zen-tab-item--active" : ""]), role: "tab", "aria-controls": ariaControl, "aria-selected": active ? "true" : "false", "aria-label": tabName, title: tabName, onClick: handleButtonClick, children: _jsxs("div", { className: "zen-tab-item__content", children: [icon && _jsx("span", { className: classNames(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon }), _jsx("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && _jsx("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) });
 };

package/esm/tabs/tabs.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import "./tabs.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IIcon } from "../icons/icon";
+import "../utils/globalThisPolyfill";
 export interface ITabElement {
     name: string;
     icon?: React.ReactElement | React.FC<IIcon>;

package/esm/tabs/tabs.js

@@ -8,6 +8,9 @@ import { TabItem } from "./tabItem/tabItem";
 import { IconChevronRight } from "../icons/iconChevronRight";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
 import { tabsKeyboardHandler, tabsKeyboardTabHandler } from "../commonHelpers/tabsKeyboard";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
+import "../utils/globalThisPolyfill";
+import { zen } from "../utils/zen";
 injectString("cs", "Scroll left", "P\u0159ej\xEDt doleva");
 injectString("da-DK", "Scroll left", "Rul til venstre");
 injectString("de", "Scroll left", "Nach links scrollen");
@@ -83,12 +86,15 @@ export const Tabs = ({
   onTabChange
 }) => {
   const driveClassname = useDriveClassName("zen-tabs");
+  const mobileClassname = useMobileClassName("zen-tabs");
   const scrollableStep = 200;
   const {
     translate
   } = useLanguage();
   const driveClassNameScroller = useDriveClassName("zen-tabs__scroller");
+  const mobileClassNameScroller = useMobileClassName("zen-tabs__scroller");
   const driveClassNameGradient = useDriveClassName("zen-tabs__gradient");
+  const mobileClassNameGradient = useMobileClassName("zen-tabs__gradient");
   const [scrollButtonType, setScrollButtonType] = useState("");
   const scrollableRef = useRef(null);
   const scrollRef = useRef(0);
@@ -101,7 +107,7 @@ export const Tabs = ({
     }
   };
   const keyDownHandler = useCallback(e => {
-    var _a;
+    var _a, _b;
     if (e.key === "Shift") {
       return;
     }
@@ -115,7 +121,8 @@ export const Tabs = ({
       return;
     }
     if (e.key === "Tab") {
-      const nextTabId = tabsKeyboardTabHandler(e, tabs, document.activeElement);
+      // eslint-disable-next-line
+      const nextTabId = tabsKeyboardTabHandler(e, tabs, (_a = zen === null || zen === void 0 ? void 0 : zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
       if (nextTabId) {
         focusableTabIdRef.current = nextTabId;
       }
@@ -123,31 +130,34 @@ export const Tabs = ({
     }
     const newActiveTabId = tabsKeyboardHandler(e, tabs, focusableTabIdRef.current) || activeTabId;
     focusableTabIdRef.current = newActiveTabId;
-    const focusableTab = (_a = scrollableRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.zen-tab-item[id='${newActiveTabId}']`);
+    const focusableTab = (_b = scrollableRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(`.zen-tab-item[id='${newActiveTabId}']`);
     focusableTab === null || focusableTab === void 0 ? void 0 : focusableTab.focus();
   }, [tabs, activeTabId, onTabChange]);
   useEffect(() => {
+    var _a;
     if (!scrollableRef.current) {
       return () => {};
     }
     let timer = undefined;
     const resizeHandler = () => {
+      var _a, _b;
       const scrollableElt = scrollableRef.current;
       if (scrollableElt) {
-        timer && window.clearTimeout(timer);
-        timer = window.setTimeout(() => {
+        timer && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timer));
+        timer = (_b = zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, () => {
           setScrollButtonType(getScrollButtonType(scrollableElt));
         }, 200);
       }
     };
     const scrollableElement = scrollableRef.current;
     scrollableElement.addEventListener("scroll", resizeHandler);
-    window.addEventListener("resize", resizeHandler);
+    (_a = zen.addEventListener) === null || _a === void 0 ? void 0 : _a.call(zen, "resize", resizeHandler);
     resizeHandler();
     return () => {
-      timer && window.clearTimeout(timer);
+      var _a, _b;
+      timer && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timer));
       scrollableElement.removeEventListener("scroll", resizeHandler);
-      window.removeEventListener("resize", resizeHandler);
+      (_b = zen.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(zen, "resize", resizeHandler);
     };
   }, [scrollableRef]);
   useEffect(() => {
@@ -156,6 +166,7 @@ export const Tabs = ({
     }
   }, [scrollableRef, tabs, activeTabId]);
   const handleScrollButtonClick = useCallback((scrollableElt, delta) => () => {
+    var _a;
     if (scrollableElt) {
       let iterations = 0;
       const maxIterations = 100;
@@ -163,6 +174,7 @@ export const Tabs = ({
       const end = start + delta;
       const duration = 300;
       const animateScroll = timestamp => {
+        var _a;
         if (!scrollRef.current) {
           scrollRef.current = timestamp;
         }
@@ -170,12 +182,12 @@ export const Tabs = ({
         scrollableElt.scrollLeft = start + (end - start) * progress;
         if (progress < 1 && iterations < maxIterations) {
           iterations++;
-          window.requestAnimationFrame(animateScroll);
+          (_a = zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, animateScroll);
         } else {
           scrollRef.current = 0;
         }
       };
-      window.requestAnimationFrame(animateScroll);
+      (_a = zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, animateScroll);
     }
   }, []);
   useEffect(() => {
@@ -189,15 +201,15 @@ export const Tabs = ({
     }
   }, [activeTabId]);
   return _jsx("div", {
-    className: classNames(["zen-tabs", driveClassname || "", className !== null && className !== void 0 ? className : ""]),
+    className: classNames(["zen-tabs", driveClassname || mobileClassname || "", className !== null && className !== void 0 ? className : ""]),
     children: _jsxs("div", {
       className: classNames(["zen-tabs__tabs-container", className !== null && className !== void 0 ? className : "", scrollButtonType]),
       children: [scrollButtonType === "start" || scrollButtonType === "both" ? _jsxs(_Fragment, {
         children: [_jsx("div", {
-          className: classNames(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--left"])
+          className: classNames(["zen-tabs__gradient", driveClassNameGradient || mobileClassNameGradient || "", "zen-tabs__gradient--left"])
         }), _jsx(TextIconButton, {
           title: translate("Scroll left"),
-          className: classNames(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__start"]),
+          className: classNames(["zen-tabs__scroller", driveClassNameScroller || mobileClassNameScroller || "", "zen-tabs__start"]),
           icon: IconChevronRight,
           type: "tertiary",
           iconPosition: ButtonIconPosition.Start,
@@ -226,10 +238,10 @@ export const Tabs = ({
         })
       }), scrollButtonType === "end" || scrollButtonType === "both" ? _jsxs(_Fragment, {
         children: [_jsx("div", {
-          className: classNames(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--right"])
+          className: classNames(["zen-tabs__gradient", driveClassNameGradient || mobileClassNameGradient || "", "zen-tabs__gradient--right"])
         }), _jsx(TextIconButton, {
           title: translate("Scroll right"),
-          className: classNames(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__end"]),
+          className: classNames(["zen-tabs__scroller", driveClassNameScroller || mobileClassNameScroller || "", "zen-tabs__end"]),
           icon: IconChevronRight,
           type: "tertiary",
           onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep),

package/esm/testHelpers/fakeFetch.js

@@ -1,7 +1,10 @@
+import { zen } from "../utils/zen";
 let loadTimeout = null;
 export const fetchData = () => {
-    loadTimeout && clearTimeout(loadTimeout);
+    var _a;
+    loadTimeout && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, loadTimeout));
     return new Promise((res, rej) => {
-        loadTimeout = window.setTimeout(() => Math.random() > 0.5 ? res("Fetched Data") : rej(new Error("Error while fetching data")), 5000);
+        var _a;
+        loadTimeout = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => Math.random() > 0.5 ? res("Fetched Data") : rej(new Error("Error while fetching data")), 5000);
     });
 };

package/esm/testHelpers/geotab-axe/index.js

@@ -7,7 +7,7 @@ const horizontalLine = "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u
 const runAxe = (el) => new Promise(resolve => {
     const parent = el.parentNode;
     const sibling = el.nextSibling;
-    document.body.appendChild(el);
+    document === null || document === void 0 ? void 0 : document.body.appendChild(el);
     axe.configure({
         rules: [{
                 id: "target-size",
@@ -26,14 +26,14 @@ const runAxe = (el) => new Promise(resolve => {
             throw err;
         }
         resolve(results);
-        parent ? parent.insertBefore(el, sibling) : document.body.removeChild(el);
+        parent ? parent.insertBefore(el, sibling) : document === null || document === void 0 ? void 0 : document.body.removeChild(el);
     });
 });
 const toHtml = (str) => {
     if (str.indexOf("<html") > -1) {
         return domParser.parseFromString(str, "text/html").body;
     }
-    const html = document.createElement("template");
+    const html = document === null || document === void 0 ? void 0 : document.createElement("template");
     html.insertAdjacentHTML("afterbegin", str);
     return html;
 };

package/esm/textIconButton/textIconButton.js

@@ -23,14 +23,14 @@ export const ButtonIconPosition = {
 export const TextIconButton = (_a) => {
     var { icon, iconClasses, iconPosition = ButtonIconPosition.Start, iconSize, children, className, contentClasses, ref } = _a, restProps = __rest(_a, ["icon", "iconClasses", "iconPosition", "iconSize", "children", "className", "contentClasses", "ref"]);
     const isDrive = useDrive();
-    const defaultIconSize = isDrive ? SvgIconSize.Huge : SvgIconSize.Large;
     const isMobile = useMobile();
+    const defaultIconSize = isDrive || isMobile ? SvgIconSize.Huge : SvgIconSize.Large;
     const buttonIconSize = iconSize ? iconSize : defaultIconSize;
     const svgIconClasses = React.useMemo(() => {
         const postfix = iconPosition === ButtonIconPosition.End ? "post-content" : "pre-content";
         return classNames([`zen-caption__${children ? postfix : "icon"}`, iconClasses !== null && iconClasses !== void 0 ? iconClasses : ""]);
     }, [iconPosition, iconClasses, children]);
-    const buttonExtraClasses = React.useMemo(() => classNames(["zen-caption", !isMobile && isDrive ? "zen-button--huge" : "", className !== null && className !== void 0 ? className : ""]), [className, isMobile, isDrive]);
+    const buttonExtraClasses = React.useMemo(() => classNames(["zen-caption", "zen-text-icon-button", !isMobile && isDrive ? "zen-button--huge" : "", className !== null && className !== void 0 ? className : ""]), [className, isMobile, isDrive]);
     // init react functional component
     const svgIcon = React.useMemo(() => React.createElement(icon, {
         className: svgIconClasses,

package/esm/textInputRaw/textInputRaw.js

@@ -3,15 +3,17 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
 export const TextInputRaw = (props) => {
     const driveComponentClass = useDriveClassName("zen-text-input");
+    const mobileComponentClass = useMobileClassName("zen-text-input");
     const { required, min, max, maxLength, minLength, value = "", onChange, onBlur, disabled, name, pattern } = useFormFieldValues(props.controller, props);
     if (props.isReadOnly) {
         return _jsx(ReviewTextControl, { value: value, password: props.type === "password" });
     }
     return _jsx("input", { id: props.id, ref: props.ref, type: props.type || "text", className: classNames([
             "zen-text-input",
-            driveComponentClass || "",
+            mobileComponentClass || driveComponentClass || "",
             props.className || "",
             props.isError ? "zen-text-input--error" : ""
         ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: props.placeholder, disabled: disabled, onChange: onChange, onKeyDown: props.onKeyDown, onBlur: onBlur, maxLength: maxLength, autoComplete: props.autocomplete, 

package/esm/timePickerRaw/timePickerRaw.js

@@ -10,6 +10,7 @@ import { Button } from "../button/button";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
 import { getSelectItemsForTimePicker } from "./timePickerUtils";
+import { Divider } from "../divider/divider";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { getAriaAttributes } from "../commonHelpers/getAriaAttributes";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
@@ -288,8 +289,8 @@ export const TimePickerRaw = props => {
                 hour: newHourValue
               }));
             }
-          }), _jsx("div", {
-            className: "zen-time-picker-select__separator"
+          }), _jsx(Divider, {
+            className: "zen-time-picker-select__divider"
           }), _jsx(TimeSelect, {
             title: translate("Select minutes"),
             selected: timeValue.minutes,