@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/dist/selectList/selectList.js

@@ -25,6 +25,7 @@ const isChildOf_1 = require("../utils/isChildOf");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const react_2 = require("react");
 const getScrollableParent_1 = require("../utils/getScrollableParent");
+const zen_1 = require("../utils/zen");
 exports.defaultListItemHeight = 40;
 const MemoizedSelectListItem = (0, react_2.memo)(selectListItem_1.SelectListItem);
 const SelectListInnerComp = ({ id, items, value, disabled, activeIndex = -1, title, multiselect = false, showCheckbox = false, standalone, className = "", onClickItem, onChangeItem, onKeyDown, onFocus, onBlur, style = {}, ref: listRef }) => {
@@ -59,8 +60,8 @@ const SelectList = (_a) => {
         dispatchState({ type: selectList_actionTypes_1.ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect } });
     }, [multiselect]);
     (0, react_2.useEffect)(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (state.activeIndex >= 0 && document.activeElement && listRef && listRef.current && (0, isChildOf_1.isChildOf)(document.activeElement, listRef.current)) {
+        var _a;
+        if (state.activeIndex >= 0 && ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && listRef.current && (0, isChildOf_1.isChildOf)(zen_1.zen.document.activeElement, listRef.current)) {
             const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
             itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
         }

package/dist/selectRaw/select.helpers.js

@@ -6,6 +6,7 @@ const checkboxState_1 = require("../checkbox/checkboxState");
 const selectList_helpers_1 = require("../selectList/selectList.helpers");
 const getParentWithHiddenOverflow_1 = require("../utils/getParentWithHiddenOverflow");
 const getRelativeParent_1 = require("../utils/getRelativeParent");
+const zen_1 = require("../utils/zen");
 const getSelectValue = (state, items) => {
     var _a;
     const newValIndex = (0, selectList_helpers_1.getFirstActiveIndex)(state, items, false);
@@ -28,11 +29,14 @@ const getElementInnerRect = (elRect, bordersRect) => ({
 const positionPopup = (triggerElement, popupEl, acceptableMinPopupHeight = 0, maxPopupHeight = Number.POSITIVE_INFINITY) => {
     popupEl.style.height = "auto";
     const triggerRect = triggerElement.getBoundingClientRect();
-    const relativeParent = (0, getRelativeParent_1.getRelativeParent)(triggerElement) || document.body;
+    if (!zen_1.zen.document) {
+        return;
+    }
+    const relativeParent = (0, getRelativeParent_1.getRelativeParent)(triggerElement) || zen_1.zen.document.body;
     const parentDomRect = relativeParent.getBoundingClientRect();
     const parentBorders = (0, getBorders_1.getBorders)(relativeParent);
     const parentRect = getElementInnerRect(parentDomRect, parentBorders);
-    const cuttingParent = (0, getParentWithHiddenOverflow_1.getParentWithHiddenOverflow)(triggerElement) || document.body;
+    const cuttingParent = (0, getParentWithHiddenOverflow_1.getParentWithHiddenOverflow)(triggerElement) || zen_1.zen.document.body;
     const cuttingParentDomRect = cuttingParent.getBoundingClientRect();
     const cuttingParentBorders = (0, getBorders_1.getBorders)(relativeParent);
     const cuttingParentRect = getElementInnerRect(cuttingParentDomRect, cuttingParentBorders);

package/dist/selectRaw/selectRaw.js

@@ -40,6 +40,7 @@ const absolute_1 = require("../absolute/absolute");
 const usePopupWidth_1 = require("./hooks/usePopupWidth");
 const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const zen_1 = require("../utils/zen");
 // get default active item (based on items array)
 const getItemById = (items, id) => items.find(item => item.id === id);
 const closedListActionGetters = {
@@ -93,7 +94,8 @@ const SelectRaw = (props) => {
         dispatchState({ type: selectList_actionTypes_1.ListAction.Reset, payload: { items, value: itemsValue, multiselect: false } });
     }, [value, items]);
     react_1.default.useEffect(() => {
-        if (state.activeIndex >= 0 && document.activeElement && ref.current && (0, isChildOf_1.isChildOf)(document.activeElement, ref.current)) {
+        var _a;
+        if (state.activeIndex >= 0 && ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && ref.current && (0, isChildOf_1.isChildOf)(zen_1.zen.document.activeElement, ref.current)) {
             const itemEl = ref.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
             itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
         }

package/dist/shield/shield.js

@@ -6,7 +6,9 @@ const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useFadeComponent_1 = require("../utils/useFadeComponent");
 const react_dom_1 = require("react-dom");
+const zen_1 = require("../utils/zen");
 const Shield = ({ className, dataShieldId, isVisible }) => {
+    var _a, _b;
     const { renderComponent, showContent, setIsOpen, handleTransitionEnd } = (0, useFadeComponent_1.useFadeComponent)(isVisible || false);
     (0, react_1.useEffect)(() => {
         setIsOpen(isVisible || false);
@@ -14,6 +16,6 @@ const Shield = ({ className, dataShieldId, isVisible }) => {
     if (!renderComponent && !isVisible) {
         return isVisible === undefined ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-shield", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }) : null;
     }
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)(["zen-shield", "zen-shield-faded", showContent ? "zen-shield-faded--visible" : "", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }), document.fullscreenElement || document.body);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)(["zen-shield", "zen-shield-faded", showContent ? "zen-shield-faded--visible" : "", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }), ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body));
 };
 exports.Shield = Shield;

package/dist/sidePanel/sidePanel.js

@@ -11,14 +11,18 @@ const useTrapFocus_1 = require("../commonHelpers/hooks/useTrapFocus");
 const isChildOf_1 = require("../utils/isChildOf");
 const getParentByClass_1 = require("../utils/getParentByClass");
 const sidePanelCell_1 = require("./sidePanelCell/sidePanelCell");
-const useUniqueId_1 = require("../commonHelpers/useUniqueId");
-const react_dom_1 = require("react-dom");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const themeContext_1 = require("../utils/theme/themeContext");
 const useFadeComponent_1 = require("../utils/useFadeComponent");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const isAlertTarget_1 = require("../alert/utils/isAlertTarget");
+const isToastTarget_1 = require("../toast/utils/isToastTarget");
+const usePortal_1 = require("../commonHelpers/hooks/usePortal");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
+const zen_1 = require("../utils/zen");
 /* eslint-enable @typescript-eslint/naming-convention */
 const isChildPopup = (target, stopElement) => {
+    var _a;
     const parentPopup = (0, getParentByClass_1.getParentByClass)(target, "zen-absolute");
     const parentSidePanel = (0, getParentByClass_1.getParentByClass)(target, "zen-side-panel");
     if (!parentPopup && !parentSidePanel) {
@@ -28,7 +32,7 @@ const isChildPopup = (target, stopElement) => {
         return true;
     }
     const popupTrigger = parentPopup
-        ? document.querySelector(`[data-popup-id='${parentPopup.id}']`)
+        ? (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-popup-id='${parentPopup.id}']`)
         : undefined;
     if (!popupTrigger) {
         return false;
@@ -53,23 +57,25 @@ var SidePanelCloseReason;
 })(SidePanelCloseReason || (exports.SidePanelCloseReason = SidePanelCloseReason = {}));
 exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = "zen-custom-component-popup";
 const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, triggerRef, panelPosition = "right", useTrapFocusWithTrigger, preventFirstFocus, width, onTransitionEnd }) => {
+    var _a, _b;
     const { renderComponent, showContent, readyForFocus, setIsOpen, handleTransitionEnd } = (0, useFadeComponent_1.useFadeComponent)(isOpen, onTransitionEnd);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     const isMobile = (0, useMobile_1.useMobile)();
     const sidePanelRef = (0, react_1.useRef)(null);
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-side-panel");
-    const autoId = (0, useUniqueId_1.useUniqueId)();
+    const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
     const prevReadyForFocus = (0, react_1.useRef)(false);
+    const isClientReady = (0, useClientReady_1.useClientReady)();
     (0, react_1.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) {
@@ -82,12 +88,16 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
         const focusable = Array.from(triggerRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR));
         (focusable[0] || triggerRef.current).focus();
     }
-    (0, useTrapFocus_1.useTrapFocus)(sidePanelRef, useTrapFocusWithTrigger ? triggerRef : undefined, showContent);
-    (0, useEscape_1.useEscape)(sidePanelRef, handleEscape, renderComponent);
+    (0, useTrapFocus_1.useTrapFocus)(sidePanelRef, useTrapFocusWithTrigger ? triggerRef : undefined, showContent && isClientReady);
+    (0, useEscape_1.useEscape)(sidePanelRef, handleEscape, renderComponent && isClientReady);
     (0, react_1.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;
             }
@@ -101,18 +111,18 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
                 "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(`.${exports.CUSTOM_POPUP_COMPONENT_CLASSNAME}`);
+            const isOpenAdvancedDialog = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.querySelector(".zen-advanced-groups-filter")) !== null;
+            const isOpenDropdownMobile = (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.querySelector(".zen-dropdown--mobile");
+            const isOpenPeriodPicker = (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.querySelector(".zen-filters-bar-period-picker__popup");
+            const isOpenTimePicker = (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.querySelector(".zen-time-picker__popup");
+            const isOpenYearPicker = (_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.querySelector(".zen-parallel-selection-popup");
+            const openedCustomComponents = (_f = zen_1.zen.document) === null || _f === void 0 ? void 0 : _f.querySelectorAll(`.${exports.CUSTOM_POPUP_COMPONENT_CLASSNAME}`);
             const isClickInChildPopup = (0, exports.isChildPopup)(e.target, sidePanelRef.current)
                 || isOpenDropdownMobile && (0, isChildOf_1.isChildOf)(e.target, isOpenDropdownMobile)
                 || isOpenPeriodPicker && (0, isChildOf_1.isChildOf)(e.target, isOpenPeriodPicker)
                 || isOpenPeriodPicker && isOpenTimePicker && (0, isChildOf_1.isChildOf)(e.target, isOpenTimePicker)
                 || isOpenPeriodPicker && isOpenYearPicker && (0, isChildOf_1.isChildOf)(e.target, isOpenYearPicker)
-                || openedCustomComponents.length && Array.from(openedCustomComponents).some(el => (0, isChildOf_1.isChildOf)(e.target, el));
+                || (openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) && Array.from(openedCustomComponents).some(el => (0, isChildOf_1.isChildOf)(e.target, el));
             const isClickInPopup = !isClickInChildPopup
                 ? false
                 : isClickInChildPopup;
@@ -121,7 +131,9 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
                     ? e.target === triggerRef.current || (0, isChildOf_1.isChildOf)(e.target, triggerRef.current)
                     : false
                 : false;
-            if (isClickInPopup || isClickOnTrigger || isGroupsFilterBackButton || isOpenAdvancedDialog) {
+            const isAlert = (0, isAlertTarget_1.isAlertTarget)(e);
+            const isToast = (0, isToastTarget_1.isToastTarget)(e);
+            if (isClickInPopup || isClickOnTrigger || isGroupsFilterBackButton || isOpenAdvancedDialog || isAlert || isToast) {
                 return;
             }
             onHidePanel(SidePanelCloseReason.ClickOutside);
@@ -134,13 +146,13 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
             }
         }
         if (renderComponent) {
-            document.body.addEventListener("click", closeOnClickOutside, true);
+            (_c = zen_1.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_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.removeEventListener("click", closeOnClickOutside, true); };
+    }, [renderComponent, readyForFocus, onHidePanel, triggerRef, useTrapFocusWithTrigger, preventFirstFocus, isClientReady]);
     (0, react_1.useEffect)(() => {
         setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
@@ -154,17 +166,22 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
         }
         return {};
     }, [width, isMobile, panelPosition]);
-    if (!renderComponent && !isOpen) {
-        return null;
-    }
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)([
+    const portalContainer = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    const portal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.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;
 };
 exports.SidePanel = SidePanel;
 exports.SidePanel.Cell = sidePanelCell_1.SidePanelCell;

package/dist/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/dist/skeletonList/skeletonList.js

@@ -4,10 +4,10 @@ exports.SkeletonList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const skeleton_1 = require("../skeleton/skeleton");
-const SkeletonList = ({ className, width, size = "small" }) => {
+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/dist/stepperRaw/stepperRaw.js

@@ -22,6 +22,8 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const onBeforeInput_1 = require("./utils/onBeforeInput");
 const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 // according to design
 exports.INPUT_DEFAULT_WIDTH = 47;
 exports.INPUT_DEFAULT_WIDTH_DRIVE = 56;
@@ -40,10 +42,13 @@ const StepperRaw = props => {
     ariaDescribedby
   } = props;
   const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-stepper-field");
+  const mobileComponentClass = (0, useMobileClassName_1.useMobileClassName)("zen-stepper-field");
   const driveInputClass = (0, useDriveClassName_1.useDriveClassName)("zen-text-input");
+  const mobileInputClass = (0, useMobileClassName_1.useMobileClassName)("zen-text-input");
   const isDrive = (0, useDrive_1.useDrive)();
+  const isMobile = (0, useMobile_1.useMobile)();
   const validStep = (0, getValidStep_1.getValidStep)(step);
-  const inputWidth = (0, getValidInputWidth_1.getValidInputWidth)(width || (isDrive ? exports.INPUT_DEFAULT_WIDTH_DRIVE : exports.INPUT_DEFAULT_WIDTH), isDrive);
+  const inputWidth = (0, getValidInputWidth_1.getValidInputWidth)(width || (isDrive || isMobile ? exports.INPUT_DEFAULT_WIDTH_DRIVE : exports.INPUT_DEFAULT_WIDTH), isDrive || isMobile);
   const {
     onBlur,
     onChange,
@@ -79,7 +84,7 @@ const StepperRaw = props => {
     });
   }
   return (0, jsx_runtime_1.jsx)("div", {
-    className: (0, classNames_1.classNames)(["zen-stepper-field", driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]),
+    className: (0, classNames_1.classNames)(["zen-stepper-field", mobileComponentClass || driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]),
     children: (0, jsx_runtime_1.jsxs)("div", {
       className: "zen-stepper-field__input-wrapper",
       children: [(0, jsx_runtime_1.jsx)("input", {
@@ -93,7 +98,7 @@ const StepperRaw = props => {
         disabled: disabled,
         type: "number",
         step: step,
-        className: (0, classNames_1.classNames)(["zen-stepper-field__input", "zen-text-input", driveInputClass || "", isErrorShown ? "zen-stepper-field__input--error" : ""]),
+        className: (0, classNames_1.classNames)(["zen-stepper-field__input", "zen-text-input", mobileInputClass || driveInputClass || "", isErrorShown ? "zen-stepper-field__input--error" : ""]),
         style: {
           width: `${inputWidth}px`
         },
@@ -113,7 +118,7 @@ const StepperRaw = props => {
           icon: iconChevronTopSmall_1.IconChevronTopSmall,
           type: buttonType_1.ButtonType.TertiaryBlack,
           iconPosition: textIconButton_1.ButtonIconPosition.Start,
-          iconSize: isDrive ? "huge" : "large",
+          iconSize: isDrive || isMobile ? "huge" : "large",
           className: "zen-stepper-field__control",
           tabIndex: -1,
           onClick: () => {
@@ -126,7 +131,7 @@ const StepperRaw = props => {
           icon: iconChevronDownSmall_1.IconChevronDownSmall,
           type: buttonType_1.ButtonType.TertiaryBlack,
           iconPosition: textIconButton_1.ButtonIconPosition.Start,
-          iconSize: isDrive ? "huge" : "large",
+          iconSize: isDrive || isMobile ? "huge" : "large",
           className: "zen-stepper-field__control",
           tabIndex: -1,
           onClick: () => {

package/dist/table/flexible/useFlexibleColumns.js

@@ -12,8 +12,10 @@ const columnsPopup_1 = require("./columnsPopup");
 const columnSettingsStorage_1 = require("./columnSettingsStorage");
 const actionsColumn_1 = require("../../dataGrid/columns/actionsColumn/actionsColumn");
 const mergeColumnSettings_1 = require("./mergeColumnSettings");
+const zen_1 = require("../../utils/zen");
 const getColumnSettings = (pageName, defaultValue) => {
-    const storage = new columnSettingsStorage_1.ColumnSettingsStorage(pageName || "", localStorage, defaultValue);
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const storage = new columnSettingsStorage_1.ColumnSettingsStorage(pageName || "", zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.localStorage, defaultValue);
     return storage.getItem();
 };
 exports.getColumnSettings = getColumnSettings;

package/dist/table/flexible/useSettingsStorage.js

@@ -3,12 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSettingsStorage = void 0;
 const react_1 = require("react");
 const flexibleColumnsStorage_1 = require("../../dataGrid/withFlexibleColumns/flexibleColumnsStorage");
+const zen_1 = require("../../utils/zen");
 const useSettingsStorage = (pageName, storage) => {
-    const settingsStorage = (0, react_1.useMemo)(() => storage || new flexibleColumnsStorage_1.ColumnsSettingsStorage(pageName || "", localStorage), [pageName, storage]);
+    const settingsStorage = (0, react_1.useMemo)(
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    () => storage || new flexibleColumnsStorage_1.ColumnsSettingsStorage(pageName || "", zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.localStorage), [pageName, storage]);
     const saveSettingsToTheStorage = (0, react_1.useCallback)((newSettings) => 
     // not to block main thread this operation can be postponed
     new Promise((resolve, reject) => {
-        setTimeout(() => {
+        var _a;
+        (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
             try {
                 settingsStorage.setItem(newSettings);
                 resolve();

package/dist/table/sortable/sortableHeader.js

@@ -163,8 +163,6 @@ const SortableHeaderCell = ({
     className: (0, classNames_1.classNames)(["zen-sortable-column", isSortedBy ? `zen-sortable-column--active` : "", isMobile ? `zen-sortable-column--mobile` : ""]),
     children: (0, jsx_runtime_1.jsx)("div", {
       className: (0, classNames_1.classNames)(["zen-caption", "zen-sortable-column__button", "zen-sortable-column-button", isSortedBy ? `zen-sortable-column-button--active` : "", sortDirection === interfaces_1.ColumnSortDirection.Ascending ? "zen-sortable-column-button--dir-asc" : "zen-sortable-column-button--dir-desc"]),
-      title: iconTitle,
-      "aria-label": iconTitle,
       onClick: onHeaderClick,
       children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
         children: [isMobile ? iconButton : null, (0, jsx_runtime_1.jsx)("div", {

package/dist/table/sortable/sortableStorage.js

@@ -1,7 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SortableColumnsStorage = void 0;
+const zen_1 = require("../../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)
+    };
+};
 class SortableColumnsStorage {
     constructor(pageName, defaultSortState) {
         Object.defineProperty(this, "defaultSortState", {
@@ -22,7 +31,8 @@ class SortableColumnsStorage {
             writable: true,
             value: void 0
         });
-        this.storage = localStorage;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        this.storage = (zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.localStorage) || createFakeStorage();
         this.storeKey = `${STORAGE_PREFIX}${pageName}`;
     }
     getItem() {

package/dist/table/sortable/useSortableColumns.js

@@ -3,9 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSortableColumns = exports.getSortableValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const interfaces_1 = require("./interfaces");
 const sortableStorage_1 = require("./sortableStorage");
 const sortableHeader_1 = require("./sortableHeader");
 const actionsColumn_1 = require("../../dataGrid/columns/actionsColumn/actionsColumn");
+const zen_1 = require("../../utils/zen");
+const getAriaSortValue = (isSortedBy, sortDirection) => {
+    if (!isSortedBy || sortDirection === undefined) {
+        return undefined;
+    }
+    return sortDirection === interfaces_1.ColumnSortDirection.Ascending ? "ascending" : "descending";
+};
 const SortableWrapperName = "Sortable";
 const getSortableValue = (pageName, defaultValue) => {
     const storage = new sortableStorage_1.SortableColumnsStorage(pageName, defaultValue);
@@ -18,7 +26,8 @@ const useSortableColumns = (columns, sortable, isMobile) => {
     const saveSettingsToTheStore = (0, react_1.useCallback)((newSettings) => 
     // not to block main thread this operation can be postponed
     new Promise((resolve, reject) => {
-        setTimeout(() => {
+        var _a;
+        (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
             try {
                 settingsStore.setItem(newSettings);
                 resolve();
@@ -49,7 +58,10 @@ const useSortableColumns = (columns, sortable, isMobile) => {
                     var _a;
                     return (0, jsx_runtime_1.jsx)(sortableHeader_1.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/dist/tabs/tabItem/tabItem.js

@@ -4,8 +4,10 @@ exports.TabItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
 const TabItem = ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity }) => {
     const driveClassname = (0, useDriveClassName_1.useDriveClassName)("zen-tab-item");
-    return (0, jsx_runtime_1.jsx)("button", { id: tabId, type: "button", className: (0, classNames_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "zen-tab-item__content", children: [icon && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && (0, jsx_runtime_1.jsx)("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) });
+    const mobileClassname = (0, useMobileClassName_1.useMobileClassName)("zen-tab-item");
+    return (0, jsx_runtime_1.jsx)("button", { id: tabId, type: "button", className: (0, classNames_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "zen-tab-item__content", children: [icon && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && (0, jsx_runtime_1.jsx)("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) });
 };
 exports.TabItem = TabItem;

package/dist/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/dist/tabs/tabs.js

@@ -68,6 +68,9 @@ const tabItem_1 = require("./tabItem/tabItem");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const tabsKeyboard_1 = require("../commonHelpers/tabsKeyboard");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
+require("../utils/globalThisPolyfill");
+const zen_1 = require("../utils/zen");
 exports.TabsDisplayName = "Tabs";
 const getScrollButtonType = element => {
   const scrollLeft = element.scrollLeft;
@@ -91,12 +94,15 @@ const Tabs = ({
   onTabChange
 }) => {
   const driveClassname = (0, useDriveClassName_1.useDriveClassName)("zen-tabs");
+  const mobileClassname = (0, useMobileClassName_1.useMobileClassName)("zen-tabs");
   const scrollableStep = 200;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
   const driveClassNameScroller = (0, useDriveClassName_1.useDriveClassName)("zen-tabs__scroller");
+  const mobileClassNameScroller = (0, useMobileClassName_1.useMobileClassName)("zen-tabs__scroller");
   const driveClassNameGradient = (0, useDriveClassName_1.useDriveClassName)("zen-tabs__gradient");
+  const mobileClassNameGradient = (0, useMobileClassName_1.useMobileClassName)("zen-tabs__gradient");
   const [scrollButtonType, setScrollButtonType] = (0, react_1.useState)("");
   const scrollableRef = (0, react_1.useRef)(null);
   const scrollRef = (0, react_1.useRef)(0);
@@ -109,7 +115,7 @@ const Tabs = ({
     }
   };
   const keyDownHandler = (0, react_1.useCallback)(e => {
-    var _a;
+    var _a, _b;
     if (e.key === "Shift") {
       return;
     }
@@ -123,7 +129,8 @@ const Tabs = ({
       return;
     }
     if (e.key === "Tab") {
-      const nextTabId = (0, tabsKeyboard_1.tabsKeyboardTabHandler)(e, tabs, document.activeElement);
+      // eslint-disable-next-line
+      const nextTabId = (0, tabsKeyboard_1.tabsKeyboardTabHandler)(e, tabs, (_a = zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
       if (nextTabId) {
         focusableTabIdRef.current = nextTabId;
       }
@@ -131,31 +138,34 @@ const Tabs = ({
     }
     const newActiveTabId = (0, tabsKeyboard_1.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]);
   (0, react_1.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_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timer));
+        timer = (_b = zen_1.zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, () => {
           setScrollButtonType(getScrollButtonType(scrollableElt));
         }, 200);
       }
     };
     const scrollableElement = scrollableRef.current;
     scrollableElement.addEventListener("scroll", resizeHandler);
-    window.addEventListener("resize", resizeHandler);
+    (_a = zen_1.zen.addEventListener) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, "resize", resizeHandler);
     resizeHandler();
     return () => {
-      timer && window.clearTimeout(timer);
+      var _a, _b;
+      timer && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timer));
       scrollableElement.removeEventListener("scroll", resizeHandler);
-      window.removeEventListener("resize", resizeHandler);
+      (_b = zen_1.zen.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, "resize", resizeHandler);
     };
   }, [scrollableRef]);
   (0, react_1.useEffect)(() => {
@@ -164,6 +174,7 @@ const Tabs = ({
     }
   }, [scrollableRef, tabs, activeTabId]);
   const handleScrollButtonClick = (0, react_1.useCallback)((scrollableElt, delta) => () => {
+    var _a;
     if (scrollableElt) {
       let iterations = 0;
       const maxIterations = 100;
@@ -171,6 +182,7 @@ const Tabs = ({
       const end = start + delta;
       const duration = 300;
       const animateScroll = timestamp => {
+        var _a;
         if (!scrollRef.current) {
           scrollRef.current = timestamp;
         }
@@ -178,12 +190,12 @@ const Tabs = ({
         scrollableElt.scrollLeft = start + (end - start) * progress;
         if (progress < 1 && iterations < maxIterations) {
           iterations++;
-          window.requestAnimationFrame(animateScroll);
+          (_a = zen_1.zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, animateScroll);
         } else {
           scrollRef.current = 0;
         }
       };
-      window.requestAnimationFrame(animateScroll);
+      (_a = zen_1.zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, animateScroll);
     }
   }, []);
   (0, react_1.useEffect)(() => {
@@ -197,15 +209,15 @@ const Tabs = ({
     }
   }, [activeTabId]);
   return (0, jsx_runtime_1.jsx)("div", {
-    className: (0, classNames_1.classNames)(["zen-tabs", driveClassname || "", className !== null && className !== void 0 ? className : ""]),
+    className: (0, classNames_1.classNames)(["zen-tabs", driveClassname || mobileClassname || "", className !== null && className !== void 0 ? className : ""]),
     children: (0, jsx_runtime_1.jsxs)("div", {
       className: (0, classNames_1.classNames)(["zen-tabs__tabs-container", className !== null && className !== void 0 ? className : "", scrollButtonType]),
       children: [scrollButtonType === "start" || scrollButtonType === "both" ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
         children: [(0, jsx_runtime_1.jsx)("div", {
-          className: (0, classNames_1.classNames)(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--left"])
+          className: (0, classNames_1.classNames)(["zen-tabs__gradient", driveClassNameGradient || mobileClassNameGradient || "", "zen-tabs__gradient--left"])
         }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
           title: translate("Scroll left"),
-          className: (0, classNames_1.classNames)(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__start"]),
+          className: (0, classNames_1.classNames)(["zen-tabs__scroller", driveClassNameScroller || mobileClassNameScroller || "", "zen-tabs__start"]),
           icon: iconChevronRight_1.IconChevronRight,
           type: "tertiary",
           iconPosition: textIconButton_1.ButtonIconPosition.Start,
@@ -234,10 +246,10 @@ const Tabs = ({
         })
       }), scrollButtonType === "end" || scrollButtonType === "both" ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
         children: [(0, jsx_runtime_1.jsx)("div", {
-          className: (0, classNames_1.classNames)(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--right"])
+          className: (0, classNames_1.classNames)(["zen-tabs__gradient", driveClassNameGradient || mobileClassNameGradient || "", "zen-tabs__gradient--right"])
         }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
           title: translate("Scroll right"),
-          className: (0, classNames_1.classNames)(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__end"]),
+          className: (0, classNames_1.classNames)(["zen-tabs__scroller", driveClassNameScroller || mobileClassNameScroller || "", "zen-tabs__end"]),
           icon: iconChevronRight_1.IconChevronRight,
           type: "tertiary",
           onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep),