@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/esm/dataGrid/withSortableColumns/withSortableColumns.js

@@ -5,6 +5,7 @@ import { toBasicColumn } from "../extensions/toBasicColumn";
 import { ActionsColumn } from "../columns/actionsColumn/actionsColumn";
 import { SortableColumnWrapper } from "./columns/sortableColumnWrapper";
 import { ColumnSortDirection } from "./columns/columnSortDirection";
+import { zen } from "../../utils/zen";
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -22,7 +23,8 @@ function InnerColumnsList(props) {
     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();

package/esm/dateInputRaw/dateInputRaw.js

@@ -24,6 +24,7 @@ import { Chip } from "../chip/chip";
 import { useChipStatus } from "../chip/chipStatusProvider";
 import { getAriaAttributes } from "../commonHelpers/getAriaAttributes";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { zen } from "../utils/zen";
 injectString("cs", "Pick a date", "Vyberte datum");
 injectString("da-DK", "Pick a date", "V\xE6lg en dato");
 injectString("de", "Pick a date", "Datum ausw\xE4hlen");
@@ -190,6 +191,7 @@ export const DateInputRaw = props => {
     onChange(defaultValue);
   }, [defaultValue, defaultValueInner, onChange]);
   useEffect(() => {
+    // required to sync custom date in toolbar and sidebar
     setCustomDate(value);
   }, [value]);
   const memoizedHandleClose = useCallback(() => {
@@ -293,8 +295,9 @@ export const DateInputRaw = props => {
     })]
   }), [classNamePopup, component, isOpen, memoizedHandleClose, memoizedMobileFooter, onReadyForFocus, renderContent, title, translate]);
   useEffect(() => {
+    var _a;
     if (!isMobile && !isOpen && prevIsOpenRef.current) {
-      setTimeout(() => {
+      (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
         var _a;
         (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, 0);
@@ -304,7 +307,9 @@ export const DateInputRaw = props => {
   const buttonCurrentLabel = getButtonLabel();
   const buttonCurrentTitle = getButtonLabel(true);
   const chipTriggerComponent = useMemo(() => _jsx(Chip, {
+    className: className,
     status: isDefaultState ? undefined : chipStatus || "active",
+    dataRole: "dialog",
     title: isDefaultState ? chipName : buttonCurrentTitle,
     isOpen: isOpen,
     disabled: disabled,
@@ -314,7 +319,7 @@ export const DateInputRaw = props => {
     icon: chipIcon || IconCalendar,
     id: chipId,
     children: isDefaultState ? chipName : buttonCurrentLabel
-  }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearAndApply, chipIcon, chipId, chipName, buttonCurrentLabel, buttonCurrentTitle]);
+  }), [className, isDefaultState, chipStatus, chipName, buttonCurrentTitle, isOpen, disabled, toggleVisibility, handleClearAndApply, chipIcon, chipId, buttonCurrentLabel]);
   if (isReadOnly) {
     const readOnlyValue = getButtonLabel() === translate("Pick a date") ? " " : getButtonLabel();
     return _jsx(ReviewTextControl, {

package/esm/dateRangeRaw/dateRangeRaw.js

@@ -10,7 +10,7 @@ import { useLanguage } from "../utils/localization/useLanguage";
 import { userFormatContext } from "../utils/userFormat/userFormatContext";
 import { CUSTOM_CALENDAR_ID, DateRangeInner } from "../dateRangeInner/dateRangeInner";
 import { useUniqueId } from "../commonHelpers/useUniqueId";
-import { getOptionsPeriodMap, getRangeOptionsArray, getSelectedRangeFromValue, getDateRangeAdjustedStep, DEFAULT_STEP_OPTION, dateRangeAdjustedFn } from "../filtersBar/components/filtersBarPeriodPicker/getRangeOption";
+import { getOptionsPeriodMap, getRangeOptionsArray, getSelectedRangeFromValue, getDateRangeAdjustedStep, DEFAULT_STEP_OPTION, dateRangeAdjustedFn, isValidDateFn, isDateValid } from "../filtersBar/components/filtersBarPeriodPicker/getRangeOption";
 import { normalizeDates } from "../filtersBar/components/filtersBarPeriodPicker/normalizeDates";
 import { ControlledPopup } from "../controlledPopup/controlledPopup";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
@@ -27,6 +27,8 @@ import { useChipStatus } from "../chip/chipStatusProvider";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { parseLabel } from "./utils/parseLabel";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
+import { zen } from "../utils/zen";
 // eslint-disable-next-line complexity
 injectString("cs", "Custom", "Vlastn\xED");
 injectString("da-DK", "Custom", "Brugerdefineret");
@@ -257,6 +259,7 @@ export const DateRangeRaw = props => {
   const isDrive = useDrive();
   const chipStatus = useChipStatus();
   const driveWrapperTriggerClassName = useDriveClassName("zen-date-range-wrapper");
+  const mobileWrapperTriggerClassName = useMobileClassName("zen-date-range-wrapper");
   const drivePopupClassName = useDriveClassName("zen-date-range-popup");
   const driveWrapperPopupClassName = useDriveClassName("zen-date-range-popup-wrapper");
   const [showMobileCalendar, setShowMobileCalendar] = useState(false);
@@ -273,7 +276,9 @@ export const DateRangeRaw = props => {
   const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === CUSTOM_CALENDAR_ID;
   const [isOpen, setIsOpen] = useState(false);
   const prevIsOpenRef = useRef(false);
-  const [customDate, setCustomDate] = useState(normalizeDates(value === null || value === void 0 ? void 0 : value.from.toISOString(), value === null || value === void 0 ? void 0 : value.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
+  const datesValidation = useCallback(val => isValidDateFn(allowUnsetValue)(val), [allowUnsetValue]);
+  const isDatesValid = useRef(datesValidation(value));
+  const [customDate, setCustomDate] = useState(normalizeDates(isDateValid(value === null || value === void 0 ? void 0 : value.from) ? value.from.toISOString() : undefined, isDateValid(value === null || value === void 0 ? void 0 : value.to) ? value.to.toISOString() : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
   const isDefaultState = !defaultValue && !selectedRange || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label !== CUSTOM_CALENDAR_ID || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label === CUSTOM_CALENDAR_ID && customDate.from && customDate.to && new Date(customDate.from).toISOString() === defaultValue.from.toISOString() && new Date(customDate.to).toISOString() === defaultValue.to.toISOString();
   const triggerRef = useRef(null);
   const [prevSelection, setPrevSelection] = useState(getSelectedRangeFromValue(optionsMap, value));
@@ -305,13 +310,19 @@ export const DateRangeRaw = props => {
   }, [dateFormat, options, translate, toLocalDateTime]);
   useEffect(() => {
     const currentValue = getSelectedRangeFromValue(optionsMap, value);
+    isDatesValid.current = datesValidation(value);
+    if (!isDatesValid.current) {
+      console.error("Invalid Date objects provided to DateRange", value);
+      return;
+    }
     if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.label) || (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from.getTime()) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.from.getTime()) || (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to.getTime()) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.to.getTime())) {
       setSelectedRange(currentValue);
       setPrevSelection(currentValue);
     }
-  }, [optionsMap, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to, value]);
+  }, [datesValidation, optionsMap, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to, value]);
+  const handleDateRangeSelection = useCallback(
   // eslint-disable-next-line complexity
-  const handleDateRangeSelection = useCallback(newVal => {
+  newVal => {
     var _a, _b;
     const selection = options.find(option => option.id === newVal);
     newVal === CUSTOM_CALENDAR_ID && setShowMobileCalendar(true);
@@ -333,9 +344,19 @@ export const DateRangeRaw = props => {
       }, newRange)));
       previousStepOption.current = "";
     } else {
-      const startDateForNormalize = ((_a = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _a === void 0 ? void 0 : _a.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().from.toISOString() : value === null || value === void 0 ? void 0 : value.from.toISOString();
-      const endDateForNormalize = ((_b = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _b === void 0 ? void 0 : _b.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().to.toISOString() : value === null || value === void 0 ? void 0 : value.to.toISOString();
-      const normalizedDates = normalizeDates(startDateForNormalize, endDateForNormalize, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+      const startDateForNormalize = ((_a = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _a === void 0 ? void 0 : _a.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().from : value === null || value === void 0 ? void 0 : value.from;
+      const endDateForNormalize = ((_b = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _b === void 0 ? void 0 : _b.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().to : value === null || value === void 0 ? void 0 : value.to;
+      if (!datesValidation(startDateForNormalize === undefined && endDateForNormalize === undefined ? undefined : {
+        from: startDateForNormalize,
+        to: endDateForNormalize
+      })) {
+        console.error("Invalid Date objects provided to DateRange", {
+          from: startDateForNormalize,
+          to: endDateForNormalize
+        });
+        return;
+      }
+      const normalizedDates = normalizeDates(startDateForNormalize === null || startDateForNormalize === void 0 ? void 0 : startDateForNormalize.toISOString(), endDateForNormalize === null || endDateForNormalize === void 0 ? void 0 : endDateForNormalize.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
       const newRange = newVal === CUSTOM_CALENDAR_ID ? {
         from: new Date(normalizedDates.from),
         to: new Date(normalizedDates.to)
@@ -355,7 +376,7 @@ export const DateRangeRaw = props => {
       }));
     }
     !hasApplyButton && newVal !== CUSTOM_CALENDAR_ID && setIsOpen(false);
-  }, [options, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to]);
+  }, [options, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to, datesValidation]);
   const handleRangeSelection = useCallback(() => {
     if (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) {
       const newState = {
@@ -417,13 +438,19 @@ export const DateRangeRaw = props => {
     labeledValue && (onChange === null || onChange === void 0 ? void 0 : onChange(labeledValue));
   }, [onChange, optionsMap, toLocalDateTime, toReverseOffsetDateTime, translate]);
   useEffect(() => {
+    // required to sync custom date in toolbar and sidebar
+    isDatesValid.current = datesValidation(value);
+    if (!isDatesValid.current) {
+      console.error("Invalid Date objects provided to DateRange", value);
+      return;
+    }
     setCustomDate({
       from: value === null || value === void 0 ? void 0 : value.from.toISOString(),
       to: value === null || value === void 0 ? void 0 : value.to.toISOString()
     });
     const currentValue = getSelectedRangeFromValue(optionsMapRef.current, value);
     setPrevSelection(currentValue);
-  }, [value, isEqualMaps]);
+  }, [value, isEqualMaps, datesValidation]);
   const range = useMemo(() => ({
     from: customDate.from,
     to: customDate.to
@@ -556,7 +583,10 @@ export const DateRangeRaw = props => {
     })]
   }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, onReadyForFocus, showMobileCalendar, title, translate, mobileContentRef]);
   const checkIsRangeDisable = useCallback(isIncrease => {
-    if (!selectedRange) {
+    if (!selectedRange || !datesValidation({
+      from: selectedRange.from,
+      to: selectedRange.to
+    })) {
       return true;
     }
     const step = previousStepOption.current ? previousStepOption.current : getDateRangeAdjustedStep(translate, selectedRange.label);
@@ -567,7 +597,7 @@ export const DateRangeRaw = props => {
     }, isIncrease, toLocalDateTime, toReverseOffsetDateTime);
     const normalizeNewValue = normalizeDates(newValue.from.toISOString(), newValue.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
     return newValue.from.getTime() !== new Date(normalizeNewValue.from).getTime() || newValue.to.getTime() !== new Date(normalizeNewValue.to).getTime();
-  }, [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, selectedRange, toLocalDateTime, toReverseOffsetDateTime, translate]);
+  }, [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, selectedRange, toLocalDateTime, toReverseOffsetDateTime, translate, datesValidation]);
   const increaseRange = useCallback(() => {
     selectedRange && handleStepperClick(selectedRange, true);
   }, [handleStepperClick, selectedRange]);
@@ -575,8 +605,9 @@ export const DateRangeRaw = props => {
     selectedRange && handleStepperClick(selectedRange, false);
   }, [handleStepperClick, selectedRange]);
   useEffect(() => {
+    var _a;
     if (!isMobile && !isOpen && prevIsOpenRef.current) {
-      setTimeout(() => {
+      (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
         var _a;
         (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, 0);
@@ -604,7 +635,9 @@ export const DateRangeRaw = props => {
     children: buttonLabel
   }), [onBlur, name, buttonTitle, cssClass, type, disabled, toggleVisibility, buttonLabel]);
   const chipTriggerComponent = useMemo(() => _jsx(Chip, {
+    className: classNames([className || ""]),
     status: isDefaultState ? undefined : chipStatus || "active",
+    dataRole: "dialog",
     title: isDefaultState ? chipName : buttonTitle,
     isOpen: isOpen,
     disabled: disabled,
@@ -614,7 +647,7 @@ export const DateRangeRaw = props => {
     icon: chipIcon || IconCalendar,
     id: chipId,
     children: isDefaultState ? chipName : buttonLabel
-  }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, chipName, buttonLabel, buttonTitle]);
+  }), [className, isDefaultState, chipStatus, chipName, buttonTitle, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, buttonLabel]);
   if (isReadOnly) {
     return _jsx(ReviewTextControl, {
       value: buttonLabel
@@ -622,7 +655,7 @@ export const DateRangeRaw = props => {
   }
   return _jsxs(_Fragment, {
     children: [stepper ? _jsxs("div", {
-      className: classNames(["zen-date-range-wrapper", driveWrapperTriggerClassName || "", classNameWrapper || ""]),
+      className: classNames(["zen-date-range-wrapper", mobileWrapperTriggerClassName || driveWrapperTriggerClassName || "", classNameWrapper || ""]),
       children: [_jsx("button", {
         type: "button",
         disabled: checkIsRangeDisable(false),
@@ -630,7 +663,7 @@ export const DateRangeRaw = props => {
         className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--left"]),
         title: translate("Previous"),
         children: _jsx(IconChevronLeftSmall, {
-          size: isDrive ? "huge" : "large"
+          size: isDrive || isMobile ? "huge" : "large"
         })
       }), popupTriggerComponent, _jsx("button", {
         type: "button",
@@ -639,7 +672,7 @@ export const DateRangeRaw = props => {
         className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--right"]),
         title: translate("Next"),
         children: _jsx(IconChevronRightSmall, {
-          size: isDrive ? "huge" : "large"
+          size: isDrive || isMobile ? "huge" : "large"
         })
       })]
     }) : chip ? chipTriggerComponent : popupTriggerComponent, isMobile ? memoizedMobileView : memoizedDesktopView]

package/esm/dialog/dialog.d.ts

@@ -9,4 +9,4 @@ export interface IDialog {
 /**
  * @deprecated - use Modal instead
 */
-export declare const Dialog: ({ isOpen, children, isElementVisible }: IDialog) => import("react").ReactPortal;
+export declare const Dialog: ({ isOpen, children, isElementVisible }: IDialog) => import("react").ReactPortal | null;

package/esm/dialog/dialog.js

@@ -1,36 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, isValidElement, useContext } from "react";
-import { createPortal } from "react-dom";
 import { DialogContent } from "./dialogContent";
 import { isFocusable } from "./dialogHelpers";
 import { themeContext } from "../utils/theme/themeContext";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useBodyScroll } from "../utils/useBodyScroll";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
+import { zen } from "../utils/zen";
 /**
  * @deprecated - use Modal instead
 */
 export const Dialog = ({ isOpen, children, isElementVisible }) => {
-    const lastActiveOutsideElement = useRef(document.activeElement);
-    const modalRoot = document.fullscreenElement || document.body;
+    var _a, _b, _c;
+    const lastActiveOutsideElement = useRef((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
+    const modalRoot = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
     const { dark } = useContext(themeContext);
     const { resetScroll } = useBodyScroll();
+    const isClientReady = useClientReady();
     useEffect(() => {
+        if (!isClientReady) {
+            return () => { };
+        }
         const copyActive = lastActiveOutsideElement.current;
         return () => {
             isFocusable(copyActive) && copyActive.focus();
         };
-    }, []);
+    }, [isClientReady]);
     useEffect(() => {
+        var _a;
+        if (!isClientReady) {
+            return;
+        }
         if (isOpen) {
             return;
         }
-        const modalCont = document.body.querySelectorAll(".zen-dialog");
-        if (!modalCont.length) {
+        const modalCont = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.querySelectorAll(".zen-dialog");
+        if (!(modalCont === null || modalCont === void 0 ? void 0 : modalCont.length)) {
             resetScroll();
         }
-    }, [isOpen, resetScroll]);
+    }, [isClientReady, isOpen, resetScroll]);
     const labeledId = useId();
     const darkClass = dark ? "zen-dark" : "";
-    const createDialog = (id) => _jsxs("div", { className: classNames(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${window.pageYOffset}px` }, children: [_jsx(DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), _jsx("div", { className: "zen-dialog__shield" })] });
-    return createPortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
+    const createDialog = (id) => _jsxs("div", { className: classNames(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen.pageYOffset || 0}px` }, children: [_jsx(DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), _jsx("div", { className: "zen-dialog__shield" })] });
+    const portal = usePortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
+    if (!isClientReady) {
+        return null;
+    }
+    return portal;
 };

package/esm/dialog/dialogHelpers.js

@@ -1,18 +1,22 @@
 import { ButtonType } from "../button/buttonType";
+import { zen } from "../utils/zen";
 export const isElementInsideContainer = (element, container) => {
+    var _a;
     let el = element;
     while (el) {
         if (el === container) {
             return true;
         }
         el = el.parentNode;
-        if (el === document.body && el !== container) {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (el === ((_a = zen === null || zen === void 0 ? void 0 : zen.document) === null || _a === void 0 ? void 0 : _a.body) && el !== container) {
             return false;
         }
     }
     return false;
 };
 export const isFocusable = (element) => {
+    var _a;
     if (!element) {
         return false;
     }
@@ -22,8 +26,8 @@ export const isFocusable = (element) => {
     if (element.tabIndex === -1) {
         return false;
     }
-    const style = window.getComputedStyle(element);
-    if (style.display === "none" || style.visibility === "hidden") {
+    const style = (_a = zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen, element);
+    if ((style === null || style === void 0 ? void 0 : style.display) === "none" || (style === null || style === void 0 ? void 0 : style.visibility) === "hidden") {
         return false;
     }
     return true;

package/esm/dropdownRaw/dropdownHelper.js

@@ -65,7 +65,10 @@ export const createOptions = (stateObj, translate, listItem, isAllSelected) => {
             actionListData.add(el.id);
         }
     });
-    const preparedOptions = prepareComboOptionsForList(actionListData, translate, listItem, () => stateObj.selectedIds, (id) => getSelectedChildren(stateObj, id), !stateObj.isNestedList, (id) => stateObj.groupsMap[id] ? getGroupDescription(stateObj.groupsMap[id], translate) : "", isAllSelected);
+    const preparedOptions = prepareComboOptionsForList(actionListData, translate, listItem, () => stateObj.selectedIds, (id) => getSelectedChildren(stateObj, id), !stateObj.isNestedList, (id) => {
+        const group = stateObj.groupsMap[id];
+        return group ? getGroupDescription(group, translate) : "";
+    }, isAllSelected);
     return preparedOptions;
 };
 export const sortDropdownItemArray = (arr, sortFn) => {

package/esm/dropdownRaw/dropdownRaw.js

@@ -27,6 +27,7 @@ import { getAriaAttributes } from "../commonHelpers/getAriaAttributes";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
 import { FormSectionContext } from "../formSection/utils/formSectionProvider";
 import { LIST_LIMIT } from "../dropdown/dropdown";
+import { zen } from "../utils/zen";
 injectString("cs", "Filter by group", "Filtrovat podle skupiny");
 injectString("da-DK", "Filter by group", "Filtrer efter gruppe");
 injectString("de", "Filter by group", "Nach Gruppe filtern");
@@ -157,7 +158,8 @@ export const DropdownRaw = props => {
   const currentAllSelected = useMemo(() => state.isNestedList || !multiselect || !isFullSelectionMode ? undefined : state.isAllSelected, [state.isNestedList, state.isAllSelected, multiselect, isFullSelectionMode]);
   const currentIsChecked = useMemo(() => isCheckboxMode ? value.isChecked : undefined, [isCheckboxMode, value]);
   useEffect(() => {
-    const timeoutId = setTimeout(() => {
+    var _a;
+    const timeoutId = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
       if (Object.keys(state.groupsMap).length === 0 && getData) {
         const currentAbort = abortToken.current;
         (initialInChecked !== undefined ? getData(currentAbort.signal, undefined, initialInChecked) : getData(currentAbort.signal, undefined)).then(dta => {
@@ -169,10 +171,14 @@ export const DropdownRaw = props => {
         }).catch(errorHandler);
       }
     });
-    return () => clearTimeout(timeoutId);
+    return () => {
+      var _a;
+      return (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutId);
+    };
   }, [getData, errorHandler, state.groupsMap, initialInChecked]);
   useEffect(() => {
-    const timeoutId = setTimeout(() => {
+    var _a;
+    const timeoutId = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
       if (!getData && dataItems && dataItems.length && !compareObjectsArrays(dataItems, previousMapDataItems.current)) {
         dispatchState({
           type: StateActionType.CreateMap,
@@ -181,7 +187,10 @@ export const DropdownRaw = props => {
         previousMapDataItems.current = [...dataItems];
       }
     });
-    return () => clearTimeout(timeoutId);
+    return () => {
+      var _a;
+      return (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutId);
+    };
   }, [dataItems, getData, state.groupsMap]);
   useEffect(() => {
     if (prevIsLoading.current !== isLoading && Object.keys(state.groupsMap).length !== 0) {
@@ -529,13 +538,17 @@ export const DropdownRaw = props => {
     isQueryMode ? handleQueryMode(searchValue, isChecked) : debouncedGetData(signal, searchValue, isChecked);
   }, [debouncedGetData, handleQueryMode, isQueryMode]);
   useEffect(() => {
-    const timeoutId = setTimeout(() => {
+    var _a;
+    const timeoutId = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
       if (!isQueryMode || (fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading)) {
         return;
       }
       handleDataQuery((fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [], state.inputValue);
     });
-    return () => clearTimeout(timeoutId);
+    return () => {
+      var _a;
+      return (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutId);
+    };
   }, [fetchState === null || fetchState === void 0 ? void 0 : fetchState.data, handleDataQuery, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, isQueryMode, state.inputValue]);
   useEffect(() => {
     // when change inside
@@ -769,9 +782,9 @@ export const DropdownRaw = props => {
     }
     if (state.showList) {
       const isSearchMode = state.inputValue && !state.currentId;
-      const currentListData = createListDataOptions(state, translate, isSearchMode ? sortDropdownItemArray(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId)
+      const currentListData = createListDataOptions(state, translate, isSearchMode ? sortDropdownItemArray(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId) :
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      : sortDropdownItemArray(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
+      sortDropdownItemArray(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
       return _jsx(DropdownList, {
         onBackButtonClick: handleBackButtonClick,
         onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick,
@@ -825,6 +838,7 @@ export const DropdownRaw = props => {
       triggerRef: triggerRef,
       icon: chipIcon,
       id: chipId,
+      dataRole: "dialog",
       children: currentStringFromSelected || chipName
     }) : _jsx(DropdownTrigger, Object.assign({
       name: name,

package/esm/favoriteButton/favoriteButton.js

@@ -7,6 +7,8 @@ import { IconStarFilled } from "../icons/iconStarFilled";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useDrive } from "../utils/theme/useDrive";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
 injectString("cs", "Favorite", "Obl\xEDben\xE9");
 injectString("da-DK", "Favorite", "Favorit");
 injectString("de", "Favorite", "Favorit");
@@ -42,13 +44,15 @@ export const FavoriteButton = ({
     translate
   } = useLanguage();
   const driveClassName = useDriveClassName("zen-favorite-button");
+  const mobileClassName = useMobileClassName("zen-favorite-button");
   const isDrive = useDrive();
-  const iconSize = useMemo(() => isDrive ? "huge" : "large", [isDrive]);
+  const isMobile = useMobile();
+  const iconSize = useMemo(() => isDrive || isMobile ? "huge" : "large", [isDrive, isMobile]);
   const filledClassName = isFavorite ? "zen-favorite-button--filled" : "";
   const onClick = useCallback(() => onChange(!isFavorite), [isFavorite, onChange]);
   return _jsxs("button", {
     onClick: onClick,
-    className: classNames(["zen-favorite-button", driveClassName || "", filledClassName, className || ""]),
+    className: classNames(["zen-favorite-button", mobileClassName || driveClassName || "", filledClassName, className || ""]),
     title: translate("Favorite"),
     "aria-label": translate("Favorite"),
     "aria-pressed": isFavorite,

package/esm/feedbackContainer/feedbackContainer.js

@@ -2,17 +2,21 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useMemo } from "react";
 import { FeedbackContext } from "./feedbackContext";
 import { AlertRaw } from "../alertRaw/alertRaw";
-import { createPortal } from "react-dom";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { ToastRaw } from "../toastRaw/toastRaw";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { getAlertAnimation } from "./utils/getAlertAnimation";
 import { getToastAnimation } from "./utils/getToastAnimation";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
+import { zen } from "../utils/zen";
 export const FeedbackContainer = () => {
+    var _a, _b;
     const { alerts, removeAlert, toasts, removeToast, activeFeedback, removedAlertId, removedToastId, mode } = React.useContext(FeedbackContext);
     const prevAlertsLength = React.useRef(alerts.length);
     const prevToastsLength = React.useRef(toasts.length);
     const isAPIMode = mode === "api";
+    const isClientReady = useClientReady();
     const isMobile = useMobile();
     const isAlertAdded = alerts.length > prevAlertsLength.current;
     const isToastAdded = toasts.length > prevToastsLength.current;
@@ -30,15 +34,18 @@ export const FeedbackContainer = () => {
             removeAlert(alert.id);
             removedAlertId.current = indx;
             alert.onClose();
-        }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : getAlertAnimation(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons }, alert.id)), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
+        }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : getAlertAnimation(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons, className: alert.className }, alert.id)), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
     const alertClasses = useMemo(() => classNames(["zen-alerts", isMobile ? "zen-alerts--mobile" : ""]), [isMobile]);
     const toastClasses = useMemo(() => classNames(["zen-toasts", isMobile ? "zen-toasts--mobile" : ""]), [isMobile]);
-    const alertsPortal = useMemo(() => createPortal(_jsx("div", { className: alertClasses, children: alertsToRender }), document.body), [alertsToRender, alertClasses]);
-    const toastsToRender = useMemo(() => toasts.map((toast, indx, arr) => _jsx(ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : getToastAnimation(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, isOpen: true, onClose: () => {
+    const toastsToRender = useMemo(() => toasts.map((toast, indx, arr) => _jsx(ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : getToastAnimation(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, className: toast.className, isOpen: true, onClose: () => {
             removeToast(toast.id);
             removedToastId.current = indx;
             toast.onClose();
         }, type: toast.type, hasIcon: toast.hasIcon, action: toast.action }, toast.id)), [toasts, sameToastsLength, isToastAdded, removedToastId, isMobile, activeFeedback, removeToast]);
-    const toastsPortal = useMemo(() => createPortal(_jsx("div", { className: toastClasses, children: toastsToRender }), document.body), [toastsToRender, toastClasses]);
+    const alertsPortal = usePortal(_jsx("div", { className: alertClasses, children: alertsToRender }), (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body);
+    const toastsPortal = usePortal(_jsx("div", { className: toastClasses, children: toastsToRender }), (_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    if (!isClientReady) {
+        return null;
+    }
     return _jsxs(_Fragment, { children: [!isAPIMode && alertsPortal, !isAPIMode && toastsPortal] });
 };

package/esm/feedbackContainer/hooks/useFeedbackAlert.js

@@ -5,13 +5,14 @@ import { useFeedbackAlertState } from "./useFeedbackAlertState";
 import { addZenithAlert } from "../utils/addZenithAlert";
 import { removeZenithAlert } from "../utils/removeZenithAlert";
 import { getParentWindow } from "../../utils/getParentWindow";
+import { zen } from "../../utils/zen";
 const ALERTS_MAX_NUMBER_DESKTOP = 3;
 const ALERTS_MAX_NUMBER_MOBILE = 4;
 export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
     const isMobile = useMobile();
     const { alerts, setAlerts, alertsQueue, setAlertsQueue, alertsAnimation, setAlertsAnimation, removedAlertId, apiAlertActions, setApiAlertActions } = useFeedbackAlertState();
     const isAPIMode = mode === "api";
-    const topView = getParentWindow(window) || window;
+    const topView = getParentWindow(zen) || zen;
     const alertsMaxNumber = isMobile ? ALERTS_MAX_NUMBER_MOBILE : ALERTS_MAX_NUMBER_DESKTOP;
     const removeAlert = useCallback((id, important) => {
         if (isAPIMode) {

package/esm/feedbackContainer/hooks/useFeedbackToast.js

@@ -3,6 +3,7 @@ import { useMobile } from "../../commonHelpers/hooks/useMobile";
 import { useFeedbackToastState } from "./useFeedbackToastState";
 import { isToastValid } from "../utils/isToastValid";
 import { getParentWindow } from "../../utils/getParentWindow";
+import { zen } from "../../utils/zen";
 const TOAST_MAX_NUMBER_DESKTOP = 5;
 const TOASTS_MAX_NUMBER_MOBILE = 3;
 export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
@@ -10,7 +11,7 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
     const { toasts, setToasts, toastsQueue, setToastsQueue, toastsAnimation, setToastsAnimation, removedToastId, apiToastActions, setApiToastActions } = useFeedbackToastState();
     const isMobile = useMobile();
     const toastMaxNumber = isMobile ? TOASTS_MAX_NUMBER_MOBILE : TOAST_MAX_NUMBER_DESKTOP;
-    const topView = getParentWindow(window) || window;
+    const topView = getParentWindow(zen) || zen;
     const removeToast = useCallback((id, important) => {
         if (isAPIMode) {
             if (!apiToastActions.find(el => el.id === id)) {

package/esm/feedbackProvider/utils/getDefaultProviderMode.js

@@ -1,16 +1,18 @@
 import { getParentWindow } from "../../utils/getParentWindow";
+import { zen } from "../../utils/zen";
 export const getDefaultProviderMode = (mode) => {
+    var _a, _b;
     if (mode) {
         return mode;
     }
-    const parent = getParentWindow(window);
-    const isTopWindow = window === parent;
+    const parent = getParentWindow(zen);
+    const isTopWindow = zen === parent;
     // if initialized in iframe
     if (!isTopWindow) {
         return "api";
     }
     // if "default" Provided already initialized on the same page
-    if (parent.document.querySelector(".zen-alerts") || parent.document.querySelector(".zen-toasts")) {
+    if (((_a = parent.document) === null || _a === void 0 ? void 0 : _a.querySelector(".zen-alerts")) || ((_b = parent.document) === null || _b === void 0 ? void 0 : _b.querySelector(".zen-toasts"))) {
         return "api";
     }
     return "default";

package/esm/filterButton/filterButton.js

@@ -16,10 +16,14 @@ import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
 import { Button } from "../button/button";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useDrive } from "../utils/theme/useDrive";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
 export const FilterButton = (_a) => {
     var { id, title, disabled, quantity, className, children, onClick, onMouseOver, onMouseOut, fullWidth, maxWidth, minWidth, isActive = false, type = "secondary", ariaLabel, ref, onBlur, name } = _a, other = __rest(_a, ["id", "title", "disabled", "quantity", "className", "children", "onClick", "onMouseOver", "onMouseOut", "fullWidth", "maxWidth", "minWidth", "isActive", "type", "ariaLabel", "ref", "onBlur", "name"]);
     const driveComponentClass = useDriveClassName("zen-filter-button");
+    const mobileComponentClass = useMobileClassName("zen-filter-button");
     const isDrive = useDrive();
+    const isMobile = useMobile();
     const hasQuantity = typeof quantity === "number";
     const isLargeNumber = hasQuantity && quantity > 99;
     const onClickEvent = useMemo(() => onClick
@@ -28,10 +32,10 @@ export const FilterButton = (_a) => {
     const inlineStyle = useMemo(() => maxWidth || minWidth ? { style: Object.assign(Object.assign({}, (maxWidth ? { maxWidth: `${maxWidth}px` } : {})), (minWidth ? { minWidth: `${minWidth}px` } : {})) } : {}, [maxWidth, minWidth]);
     return _jsxs(Button, Object.assign({ id: id, name: name, onBlur: onBlur, title: title, disabled: disabled, type: type, className: classNames([
             "zen-filter-button",
-            driveComponentClass || "",
+            mobileComponentClass || driveComponentClass || "",
             `zen-filter-button--${type}`,
             className || "",
             isActive ? "zen-filter-button--active" : "",
             fullWidth ? "zen-filter-button--full-width" : ""
-        ]), onClick: onClickEvent, onMouseOver: onMouseOver, onMouseOut: onMouseOut, ref: ref, htmlType: "button", "aria-label": ariaLabel }, inlineStyle, other, { children: [children ? _jsx("div", { className: classNames(["zen-filter-button__label", "zen-ellipsis", fullWidth ? "zen-filter-button__label--full-width" : ""]), children: children }) : null, _jsxs("div", { className: "zen-filter-button__tags", children: [hasQuantity ? _jsx("div", { className: "zen-filter-button__quantity", children: isLargeNumber ? "99+" : quantity }) : null, _jsx("div", { className: "zen-filter-button__icon", children: _jsx(IconChevronDownSmall, { size: isDrive ? "huge" : "large" }) })] })] }));
+        ]), onClick: onClickEvent, onMouseOver: onMouseOver, onMouseOut: onMouseOut, ref: ref, htmlType: "button", "aria-label": ariaLabel }, inlineStyle, other, { children: [children ? _jsx("div", { className: classNames(["zen-filter-button__label", "zen-ellipsis", fullWidth ? "zen-filter-button__label--full-width" : ""]), children: children }) : null, _jsxs("div", { className: "zen-filter-button__tags", children: [hasQuantity ? _jsx("div", { className: "zen-filter-button__quantity", children: isLargeNumber ? "99+" : quantity }) : null, _jsx("div", { className: "zen-filter-button__icon", children: _jsx(IconChevronDownSmall, { size: isDrive || isMobile ? "huge" : "large" }) })] })] }));
 };