@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/esm/filtersBar/filtersContainer/filtersContainer.js

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState, Children, cloneElement, useCallback } from
 import { IconChevronRight } from "../../icons/iconChevronRight";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+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");
@@ -97,27 +98,30 @@ export const FiltersContainer = ({
   const showLeft = scrollButtonType === "start" || scrollButtonType === "both";
   const showRight = scrollButtonType === "end" || scrollButtonType === "both";
   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(() => {
@@ -126,15 +130,16 @@ export const FiltersContainer = ({
     }
   }, [scrollableRef, children]);
   useEffect(() => {
+    var _a, _b, _c, _d;
     if (showLeft) {
       if (leftTimeoutRef.current) {
-        clearTimeout(leftTimeoutRef.current);
+        (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, leftTimeoutRef.current);
       }
       setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
         left: false
       }));
     } else {
-      leftTimeoutRef.current = window.setTimeout(() => {
+      leftTimeoutRef.current = (_b = zen.window) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
         setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
           left: true
         }));
@@ -142,24 +147,25 @@ export const FiltersContainer = ({
     }
     if (showRight) {
       if (rightTimeoutRef.current) {
-        clearTimeout(rightTimeoutRef.current);
+        (_c = zen.clearTimeout) === null || _c === void 0 ? void 0 : _c.call(zen, rightTimeoutRef.current);
       }
       setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
         right: false
       }));
     } else {
-      rightTimeoutRef.current = window.setTimeout(() => {
+      rightTimeoutRef.current = (_d = zen.window) === null || _d === void 0 ? void 0 : _d.setTimeout(() => {
         setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
           right: true
         }));
       }, fadeTransitionDuration);
     }
     return () => {
+      var _a, _b;
       if (leftTimeoutRef.current) {
-        clearTimeout(leftTimeoutRef.current);
+        (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, leftTimeoutRef.current);
       }
       if (rightTimeoutRef.current) {
-        clearTimeout(rightTimeoutRef.current);
+        (_b = zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, rightTimeoutRef.current);
       }
     };
   }, [showLeft, showRight]);

package/esm/formField/hooks/useFormFieldClasses.js

@@ -12,12 +12,13 @@ export const useFormFieldClasses = (props, component) => {
     const { banner: bannerComp } = useBanner(props);
     const { errorBanner } = useError(props);
     const banner = errorBanner || bannerComp;
+    const fullWidthTriggerButton = component.displayName === "DropdownRaw" && props.fullWidthTriggerButton;
     const classes = classNames([
         "zen-form-field",
         isMobile ? "zen-form-field--mobile" : "",
         banner ? "zen-form-field--with-banner" : "",
-        (!props.label || !rangeRawLabelCheck(component, props)) ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
-        !isOldFormFieldComponent(component) ? "zen-form-field--new-component" : "",
+        !props.label || !rangeRawLabelCheck(component, props) ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
+        !isOldFormFieldComponent(component) && !fullWidthTriggerButton ? "zen-form-field--new-component" : "",
         isFormSection ? "zen-form-field--form-item" : "",
         props.className || ""
     ]);

package/esm/gridLayout/hooks/useTablet.js

@@ -2,6 +2,7 @@ import { useContext, useMemo, useState } from "react";
 import { topWindowContext } from "../../utils/topWindow/topWindowContext";
 import { getParentWindow } from "../../utils/getParentWindow";
 import { useResize } from "../../commonHelpers/hooks/useResize";
+import { zen } from "../../utils/zen";
 const isTableUtil = (width) => {
     if (width > 640 && width <= 1024) {
         return true;
@@ -10,7 +11,7 @@ const isTableUtil = (width) => {
 };
 export const useTablet = () => {
     const { topWindow } = useContext(topWindowContext);
-    const win = useMemo(() => topWindow || getParentWindow(window), [topWindow]);
+    const win = useMemo(() => topWindow || getParentWindow(zen), [topWindow]);
     const [isTablet, setIsTablet] = useState(isTableUtil(win.innerWidth));
     useResize(() => {
         setIsTablet(isTableUtil(win.innerWidth));

package/esm/groupButtonRaw/groupButtonRaw.js

@@ -5,12 +5,14 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
 import { GroupButtonOption } from "./components/groupButtonOption";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
 // TODO: tests
 export const GroupButtonRaw = (props) => {
     var _a;
     const { fullWidth, groupData, className, isError, isReadOnly, controller, value: valueProp } = props;
     const nameGroupId = useId();
     const driveClasses = useDriveClassName("zen-group-button");
+    const mobileClasses = useMobileClassName("zen-group-button");
     const { name = nameGroupId, disabled, onChange = () => { }, onBlur = () => { }, value = "" } = useFormFieldValues(controller, Object.assign(Object.assign({}, props), { value: valueProp || ((_a = groupData.find((el) => el.selected)) === null || _a === void 0 ? void 0 : _a.value) || (controller === null || controller === void 0 ? void 0 : controller.defaultValue) || "" }));
     const onChangeHandlerMemo = useCallback(onChange, [onChange]);
     const onBlurHandlerMemo = useCallback(onBlur, [onBlur]);
@@ -19,5 +21,5 @@ export const GroupButtonRaw = (props) => {
         return _jsx(ReviewTextControl, { value: value.name, className: "zen-group-button__review" });
     }
     // TODO: is it a proper place for onBlur handler?
-    return _jsx("div", { onBlur: onBlurHandlerMemo, className: classNames(["zen-group-button", isError ? "zen-group-button--error" : "", driveClasses || "", fullWidth ? "zen-group-button--full-width" : "", className || ""]), children: groupData.map((el, index) => _jsx(GroupButtonOption, { nameGroup: name, labelName: el.name, value: el.value, disabled: !!disabled, checked: value === el.value, onChange: onChangeHandlerMemo }, `${name}_${index}_btngroup`)) });
+    return _jsx("div", { onBlur: onBlurHandlerMemo, className: classNames(["zen-group-button", isError ? "zen-group-button--error" : "", mobileClasses || driveClasses || "", fullWidth ? "zen-group-button--full-width" : "", className || ""]), children: groupData.map((el, index) => _jsx(GroupButtonOption, { nameGroup: name, labelName: el.name, value: el.value, disabled: !!disabled, checked: value === el.value, onChange: onChangeHandlerMemo }, `${name}_${index}_btngroup`)) });
 };

package/esm/groupsFilterRaw/groupsFilterCurrentlySelectedState.js

@@ -8,6 +8,7 @@ import { IconGlobe } from "../icons/deprecated/iconGlobe";
 import { IconBackArrow } from "../icons/deprecated/iconBackArrow";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { ToggleButtonRaw } from "../toggleButtonRaw/toggleButtonRaw";
+import { Divider } from "../divider/divider";
 injectString("cs", "Back", "Zp\u011Bt");
 injectString("da-DK", "Back", "Tilbage");
 injectString("de", "Back", "Zur\xFCck");
@@ -184,8 +185,8 @@ export const GroupsFilterCurrentlySelectedState = ({
         value: relation,
         onChange: handleRelationChange
       })]
-    }), _jsx("div", {
-      className: "zen-groups-filter-menu__separator"
+    }), _jsx(Divider, {
+      className: "zen-groups-filter-menu__divider"
     }), _jsx("div", {
       className: "zen-groups-filter-menu__groups-box",
       children: children

package/esm/groupsFilterRaw/groupsFilterInitialState.js

@@ -7,6 +7,7 @@ import { IconOrgFilter } from "../icons/deprecated/iconOrgFilter";
 import { IconChevronRight } from "../icons/iconChevronRight";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { ToggleButtonRaw } from "../toggleButtonRaw/toggleButtonRaw";
+import { Divider } from "../divider/divider";
 injectString("cs", "View currently selected filters", "Zobrazit aktu\xE1ln\u011B vybran\xE9 filtry");
 injectString("da-DK", "View currently selected filters", "Se aktuelt valgte filtre");
 injectString("de", "View currently selected filters", "Aktuell ausgew\xE4hlte Filter ansehen");
@@ -273,8 +274,8 @@ export const GroupsFilterInitialState = ({
         className: "zen-groups-filter-menu__additional-info--faded zen-groups-filter-menu__filter-count",
         children: searchResult ? `${searchResult} ${translate("Results")}` : ""
       })]
-    }), _jsx("div", {
-      className: "zen-groups-filter-menu__separator"
+    }), _jsx(Divider, {
+      className: "zen-groups-filter-menu__divider"
     }), _jsx("div", {
       className: "zen-groups-filter-menu__groups-box",
       children: children

package/esm/groupsFilterRaw/groupsFilterMenu.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "../button/button";
 import { ButtonType } from "../button/buttonType";
 import { useLanguage } from "../utils/localization/useLanguage";
+import { Divider } from "../divider/divider";
 injectString("cs", "Clear", "Vymazat");
 injectString("da-DK", "Clear", "Ryd");
 injectString("de", "Clear", "L\xF6schen");
@@ -97,8 +98,8 @@ export const GroupsFilterMenu = ({
     children: [_jsx("div", {
       className: "zen-groups-filter-menu__content",
       children: children
-    }), hasFooter ? _jsx("div", {
-      className: "zen-groups-filter-menu__separator zen-groups-filter-menu__separator--footer"
+    }), hasFooter ? _jsx(Divider, {
+      className: "zen-groups-filter-menu__divider zen-groups-filter-menu__divider--footer"
     }) : null, hasFooter ? _jsxs("div", {
       className: "zen-groups-filter-menu__footer",
       children: [_jsx(Button, {

package/esm/groupsFilterRaw/groupsFilterRaw.d.ts

@@ -6,9 +6,9 @@ import { TGroupsFilterRaw } from "./types";
 import { IFormFieldComponent } from "../formField/types";
 interface IGroupsFilterOptions {
     /**
-    * @deprecated
-    * @param placeholder - will be removed in the next major release
-    */
+     * @deprecated
+     * @param placeholder - will be removed in the next major release
+     */
     placeholder?: string;
 }
 export interface IGroupsFilterRaw extends IZenComponentProps, IChipsParent {
@@ -18,19 +18,20 @@ export interface IGroupsFilterRaw extends IZenComponentProps, IChipsParent {
     onChange: (state: IGroupsFilterTotalState) => void;
     isWithColor?: boolean;
     /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
+     * @deprecated
+     * @param translate - will be removed in the next major release
+     */
     translate?: (s: string) => string;
     fullSize?: boolean;
     options?: IGroupsFilterOptions;
     listLimit?: number;
     /**
-    * @deprecated
-    * @param advancedDialog - will be removed in the next major release
-    */
+     * @deprecated
+     * @param advancedDialog - will be removed in the next major release
+     */
     advancedDialog?: IAdvancedEntitiesNavigatorDialog;
     classNamePopup?: string;
+    className?: string;
 }
 export declare const GroupsFilterRaw: (props: TGroupsFilterRaw & IFormFieldComponent) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/esm/groupsFilterRaw/groupsFilterRaw.js

@@ -35,6 +35,7 @@ import { MobileSheet } from "../mobileSheet/mobileSheet";
 import { isFormItem } from "../commonHelpers/isFormItem";
 import { useFormField } from "../commonHelpers/hooks/useFormField";
 import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
+// eslint-disable-next-line complexity
 injectString("cs", "Groups", "Skupiny");
 injectString("da-DK", "Groups", "Grupper");
 injectString("de", "Groups", "Gruppen");
@@ -549,25 +550,41 @@ export const GroupsFilterRaw = props => {
     errorHandler(e);
     return [];
   }), [dataLoader, errorHandler]);
-  useEffect(() => {
+  const loadData = useCallback(() => {
     dispatchUiState({
       type: UiStateActionType.SetLoadWithError,
-      payload: false
+      payload: {
+        hasError: false,
+        isLoading: true
+      }
     });
     dataLoader().then(groups => {
       dispatchState({
         type: StateActionType.CreateGroupsMap,
         payload: groups
       });
+      dispatchUiState({
+        type: UiStateActionType.SetLoadWithError,
+        payload: {
+          hasError: false,
+          isLoading: false
+        }
+      });
       setDataItems(groups);
     }).catch(e => {
       dispatchUiState({
         type: UiStateActionType.SetLoadWithError,
-        payload: true
+        payload: {
+          hasError: true,
+          isLoading: false
+        }
       });
       errorHandler(e);
     });
   }, [dataLoader, errorHandler]);
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
   useEffect(() => {
     const step = uiState.step;
     if (step !== FilterMenuStep.CurrentlySelected) {
@@ -754,7 +771,7 @@ export const GroupsFilterRaw = props => {
         id: groupsFilterId,
         placeholder: translate("Filter by group")
       })
-    }) : null, isStateHasData && !uiState.isLoadWithError && _jsxs(GroupsFilterMenu, {
+    }) : null, isStateHasData && !uiState.hasError && _jsxs(GroupsFilterMenu, {
       onCancelClick: handleCancel,
       onApplyClick: handleApply,
       onResetClick: handleReset,
@@ -784,10 +801,10 @@ export const GroupsFilterRaw = props => {
         onRelationChange: onRelationChange,
         children: getGroupsBox()
       })]
-    }), !uiState.isLoadWithError && !isStateHasData && !Object.keys(state.groupsMap).length && _jsx(SkeletonList, {
+    }), !uiState.hasError && !isStateHasData && !Object.keys(state.groupsMap).length && _jsx(SkeletonList, {
       className: "zen-groups-filter__waiting"
     })]
-  }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.isLoadWithError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate, isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult, getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick]);
+  }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.hasError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate, isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult, getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick]);
   const memoizedFooterButtons = useMemo(() => _jsxs(FooterButtons, {
     children: [_jsx(Button, {
       onClick: handleApply,
@@ -808,6 +825,12 @@ export const GroupsFilterRaw = props => {
       children: translate("Clear")
     })]
   }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
+  const isEmptyMap = dataItems.length === 0;
+  useEffect(() => {
+    if (isEmptyMap && uiState.isOpen && !uiState.isLoading && !uiState.hasError) {
+      loadData();
+    }
+  }, [uiState.isOpen, isEmptyMap, uiState.isLoading, uiState.hasError, loadData]);
   const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, {
     label: translate("Organization groups filter"),
     triggerRef: triggerRef,
@@ -849,6 +872,7 @@ export const GroupsFilterRaw = props => {
   return _jsxs(_Fragment, {
     children: [chip ? _jsx(Chip, {
       status: selectedCount ? chipStatus || "active" : undefined,
+      dataRole: "dialog",
       isOpen: uiState.isOpen,
       disabled: false,
       onClick: handleTriggerClick,
@@ -856,6 +880,7 @@ export const GroupsFilterRaw = props => {
       triggerRef: triggerRef,
       icon: chipIcon,
       id: chipId,
+      className: className || "",
       children: groupPlaceHolder !== translate("Groups") ? groupPlaceHolder : chipName
     }) : _jsx(GroupsFilterTrigger, {
       value: uiState.searchValue,

package/esm/groupsFilterRaw/groupsFilterTrigger.js

@@ -14,6 +14,7 @@ import { GroupsFilterLabelBox } from "./groupsFilterLabelBox";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
 import { useLanguage } from "../utils/localization/useLanguage";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
 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");
@@ -86,6 +87,7 @@ export const GroupsFilterTrigger = _a => {
   const {
     translate
   } = useLanguage();
+  const mobileComponentClass = useMobileClassName("zen-groups-filter");
   const groupsFilterId = useId();
   const handleKeydown = e => {
     if (e.key === "Enter" && !isOpenPopup) {
@@ -103,7 +105,7 @@ export const GroupsFilterTrigger = _a => {
     handleClick();
   };
   return _jsxs("div", Object.assign({
-    className: classNames(["zen-groups-filter"]),
+    className: classNames(["zen-groups-filter", mobileComponentClass || ""]),
     ref: ref
   }, otherProps, {
     onClick: clickHandler,

package/esm/groupsFilterRaw/types.d.ts

@@ -4,18 +4,18 @@ import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/z
 import { IGroupsFilterTotalState, IGroupItem, IAdvancedEntitiesNavigatorDialog } from "./groupsFilterInterfaces";
 interface IGroupsFilterOptions {
     /**
-    * @deprecated
-    * @param placeholder - will be removed in the next major release
-    */
+     * @deprecated
+     * @param placeholder - will be removed in the next major release
+     */
     placeholder?: string;
 }
 export interface IGroupsFilterBase extends IZenComponentProps, IChipsParent {
     dataLoader: () => Promise<IGroupItem[]>;
     isWithColor?: boolean;
     /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
+     * @deprecated
+     * @param translate - will be removed in the next major release
+     */
     translate?: (s: string) => string;
     fullSize?: boolean;
     options?: IGroupsFilterOptions;
@@ -23,6 +23,7 @@ export interface IGroupsFilterBase extends IZenComponentProps, IChipsParent {
     advancedDialog?: IAdvancedEntitiesNavigatorDialog;
     errorHandler: (e: Error) => void;
     classNamePopup?: string;
+    className?: string;
 }
 export interface IGroupsFilterRawDefault extends IGroupsFilterBase {
     initialFilterState?: IGroupsFilterTotalState;

package/esm/groupsFilterRaw/uiStateReducer/uiStateAction.d.ts

@@ -16,9 +16,13 @@ interface IClearUncheckedStateAction {
     type: UiStateActionType.ClearUncheckedState;
     payload: undefined;
 }
+interface ILoadingData {
+    hasError: boolean;
+    isLoading: boolean;
+}
 interface ISetLoadWithErrorAction {
     type: UiStateActionType.SetLoadWithError;
-    payload: boolean;
+    payload: ILoadingData;
 }
 interface ISetStepUiAction {
     type: UiStateActionType.SetStep;

package/esm/groupsFilterRaw/uiStateReducer/uiStateReducer.d.ts

@@ -7,7 +7,8 @@ export interface IUiGroupsFilterState {
     uncheckedAdjustmentIds: string[];
     uncheckedAdvancedState: IFilterState | undefined;
     isOpen: boolean;
-    isLoadWithError: boolean;
+    hasError: boolean;
+    isLoading: boolean;
     searchValue: string;
     isOpenAdvancedFilter: boolean;
 }
@@ -15,7 +16,8 @@ export interface IUiStateReducer extends Reducer<IUiGroupsFilterState, TUiStateA
 }
 export declare const uiInitialGroupsFilterState: {
     isOpen: boolean;
-    isLoadWithError: boolean;
+    hasError: boolean;
+    isLoading: boolean;
     step: FilterMenuStep;
     currentAdjustmentId: undefined;
     uncheckedAdjustmentIds: never[];

package/esm/groupsFilterRaw/uiStateReducer/uiStateReducer.js

@@ -2,7 +2,8 @@ import { FilterMenuStep } from "../groupsFilterInterfaces";
 import { UiStateActionType } from "./uiStateActionType";
 export const uiInitialGroupsFilterState = {
     isOpen: false,
-    isLoadWithError: false,
+    hasError: false,
+    isLoading: false,
     step: FilterMenuStep.Initial,
     currentAdjustmentId: undefined,
     uncheckedAdjustmentIds: [],
@@ -20,7 +21,7 @@ export function uiStateReducer(state, action) {
         case UiStateActionType.ToggleOpen:
             return state.isOpenAdvancedFilter ? state : Object.assign(Object.assign({}, state), { isOpen: !state.isOpen });
         case UiStateActionType.SetLoadWithError:
-            return Object.assign(Object.assign({}, state), { isLoadWithError: payload });
+            return Object.assign(Object.assign({}, state), { hasError: payload.hasError, isLoading: payload.isLoading });
         case UiStateActionType.SetStep:
             return Object.assign(Object.assign({}, state), { step: payload });
         case UiStateActionType.SetCurrentAdjustmentId:

package/esm/header/components/collapsedItemsControl/collapsedItemsControl.js

@@ -15,6 +15,7 @@ import { handleCustomMenuWrapper } from "./utils/handleCustomMenuWrapper";
 import { PageHeaderButtonDisplayName } from "../../../pageHeader/pageHeaderButton";
 import { PageHeaderMenuDisplayName } from "../../../pageHeader/pageHeaderMenu";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
+import { useMobile } from "../../../commonHelpers/hooks/useMobile";
 injectString("cs", "More", "V\xEDce");
 injectString("da-DK", "More", "Mere");
 injectString("de", "More", "Mehr");
@@ -64,6 +65,7 @@ export const PageToolbarCollapsedItemsControl = ({
     translate
   } = useLanguage();
   const isDrive = useDrive();
+  const isMobile = useMobile();
   const {
     content
   } = useContext(HeaderCustomContent);
@@ -72,9 +74,9 @@ export const PageToolbarCollapsedItemsControl = ({
     className: classNames(["zen-header-more-button", className || ""]),
     type: ButtonType.TertiaryBlack,
     iconPosition: ButtonIconPosition.End,
-    iconSize: isDrive ? SvgIconSize.Huge : SvgIconSize.Large,
+    iconSize: isDrive || isMobile ? SvgIconSize.Huge : SvgIconSize.Large,
     icon: IconDotVertical
-  }), [isDrive, translate, className]);
+  }), [isDrive, isMobile, translate, className]);
   const items = [];
   const clickHandler = useCallback(propsOnClick => (_, e) => {
     propsOnClick(e);

package/esm/header/components/mobileFilterControl/mobileFilterControl.js

@@ -7,6 +7,7 @@ import { classNames } from "../../../commonHelpers/classNames/classNames";
 import { useLanguage } from "../../../utils/localization/useLanguage";
 import { IconSettings6 } from "../../../icons/iconSettings6";
 import { useDrive } from "../../../utils/theme/useDrive";
+import { useMobile } from "../../../commonHelpers/hooks/useMobile";
 injectString("cs", "Show all filters", "Uk\xE1zat v\u0161echny filtry");
 injectString("da-DK", "Show all filters", "Vis alle filtre");
 injectString("de", "Show all filters", "Alle Filter anzeigen");
@@ -43,10 +44,11 @@ export const MobileFilterControl = ({
     translate
   } = useLanguage();
   const isDrive = useDrive();
+  const isMobile = useMobile();
   const filterIconButton = _jsx(TextIconButton, {
     iconPosition: ButtonIconPosition.End,
     icon: IconSettings6,
-    iconSize: isDrive ? SvgIconSize.Huge : SvgIconSize.Large,
+    iconSize: isDrive || isMobile ? SvgIconSize.Huge : SvgIconSize.Large,
     className: "zen-mobile-filter-control__actions zen-mobile-filter-control__actions--button",
     iconClasses: "zen-mobile-filter-control__actions--icon",
     title: translate("Show all filters"),

package/esm/header/components/mobileSearchControl/mobileSearchControl.js

@@ -9,6 +9,7 @@ import { useLanguage } from "../../../utils/localization/useLanguage";
 import { IconSearch } from "../../../icons/iconSearch";
 import { useDrive } from "../../../utils/theme/useDrive";
 import { useDriveClassName } from "../../../utils/theme/useDriveClassName";
+import { useMobile } from "../../../commonHelpers/hooks/useMobile";
 injectString("cs", "Cancel search", "Zru\u0161it hled\xE1n\xED");
 injectString("da-DK", "Cancel search", "Annuller s\xF8gning");
 injectString("de", "Cancel search", "Suche abbrechen");
@@ -97,6 +98,7 @@ export const MobileSearchControl = ({
     translate
   } = useLanguage();
   const isDrive = useDrive();
+  const isMobile = useMobile();
   const driveClassname = useDriveClassName("zen-mobile-search-control");
   const cancelSearchButton = _jsx(Button, {
     className: "zen-mobile-search-control__actions zen-mobile-search-control__actions--button",
@@ -111,7 +113,7 @@ export const MobileSearchControl = ({
     type: ButtonType.TertiaryBlack,
     onClick: () => onClick(true),
     iconPosition: ButtonIconPosition.End,
-    iconSize: isDrive ? SvgIconSize.Huge : SvgIconSize.Large,
+    iconSize: isDrive || isMobile ? SvgIconSize.Huge : SvgIconSize.Large,
     iconClasses: "zen-mobile-search-control__actions--icon",
     icon: IconSearch
   });

package/esm/header/header.js

@@ -23,6 +23,8 @@ import { SearchContextProvider } from "../filtersBar/filtersBarProviderSearch";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { TriggerContextProvider } from "../filtersBar/filtersBarProviderTrigger";
 import { useHeaderButtons } from "../utils/headerButtons/headerButtonsProvider";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
+import { zen } from "../utils/zen";
 export var HeaderType;
 (function (HeaderType) {
     HeaderType["Desktop"] = "desktop";
@@ -33,6 +35,7 @@ export const Header = ({ children, className, onFiltersBarOpen
 // eslint-disable-next-line complexity
  }) => {
     var _a, _b;
+    const isClientReady = useClientReady();
     const toolbarRef = useRef(null);
     const leftElementsRef = useRef(null);
     const rightElementsRef = useRef(null);
@@ -80,8 +83,8 @@ export const Header = ({ children, className, onFiltersBarOpen
         setIsFilterHidden(isDownDirection);
     }, [getPreviousScrollPosition, previousScrollPosition, headerRef]);
     const handleScroll = useThrottle((e) => {
-        var _a;
-        const isKeyboardLikelyOpen = ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.matches("input, textarea, [contenteditable]")) || false;
+        var _a, _b;
+        const isKeyboardLikelyOpen = ((_b = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) === null || _b === void 0 ? void 0 : _b.matches("input, textarea, [contenteditable]")) || false;
         const isMobileFilterOpen = (mobileFilterTrigger === null || mobileFilterTrigger === void 0 ? void 0 : mobileFilterTrigger.current) && mobileFilterTrigger.current.getAttribute("aria-expanded") === "true" || false;
         if (isMobileFilterOpen || isKeyboardLikelyOpen) {
             return;
@@ -89,19 +92,22 @@ export const Header = ({ children, className, onFiltersBarOpen
         scrollCallback(e);
     }, 200);
     useEffect(() => {
+        var _a;
         if (scrollableParentEl && isMobile) {
             scrollableParentEl.addEventListener("scroll", handleScroll);
         }
-        window.addEventListener("scroll", handleScroll);
+        (_a = zen.addEventListener) === null || _a === void 0 ? void 0 : _a.call(zen, "scroll", handleScroll);
         return () => {
+            var _a;
             if (scrollableParentEl) {
                 scrollableParentEl.removeEventListener("scroll", handleScroll);
             }
-            window.removeEventListener("scroll", handleScroll);
+            (_a = zen.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(zen, "scroll", handleScroll);
         };
     }, [isMobile, handleScroll, scrollableParentEl]);
     useEffect(() => {
-        !isMobile && window.removeEventListener("scroll", handleScroll);
+        var _a;
+        !isMobile && ((_a = zen.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(zen, "scroll", handleScroll));
     }, [handleScroll, isMobile]);
     const headerItems = getArrayOfChildren(children);
     const { leftElements, resizableElements, rightElements, tabs, filtersBar } = useMemo(() => filterItems(priority ? [...headerItems, ...additionalButtons] : [...additionalButtons, ...headerItems], isMobile), [additionalButtons, headerItems, isMobile, priority]);
@@ -242,6 +248,9 @@ export const Header = ({ children, className, onFiltersBarOpen
             return;
         }
     }, [mobileFilterControlRef, mobileFilterNewLineControlRef, isMobileFilterButtonExists, mobileFilterTrigger, isFilterInNewLine]);
+    if (!isClientReady) {
+        return null;
+    }
     return _jsx(HeaderMenuProvider, { alignment: "left-top", children: _jsx(HeaderCustomContent.Provider, { value: { content, setContent }, children: _jsx(FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: _jsx(SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: _jsx(TriggerContextProvider, { value: { triggerComponent: mobileFilterTrigger }, children: _jsxs("div", { className: fullClassName, ref: headerRef, children: [mainLineContainer, newLineContainer, tabs ? _jsxs("div", { className: classNames(["zen-main-header__tabs", "zen-main-header--border", isMobile ? "zen-main-header__tabs--mobile" : "", driveClassnameTab || ""]), children: [" ", tabs, " "] }) : null, memoizedFiltersBar ? _jsx("div", { className: "zen-main-header__filtersBar", children: memoizedFiltersBar }) : null, _jsx("div", { className: "zen-main-header__section zen-main-header__section--hidden", ref: hiddenContainerRef, children: hiddenItemForRender }), _jsx("div", { className: "zen-main-header__section zen-main-header__section--hidden", children: _jsx("div", { className: "zen-main-header__section--inline", ref: moreButtonRef, children: moreButton }) })] }) }) }) }) }) });
 };
 export const HeaderDisplayName = "Header";

package/esm/header/headerHelpers.d.ts

@@ -10,4 +10,4 @@ export declare const filterItems: <T extends React.ReactElement<unknown, string
     tabs: T | null;
     filtersBar: T | null;
 };
-export declare const findFirstScrollableParent: (element: HTMLElement) => HTMLElement;
+export declare const findFirstScrollableParent: (element: HTMLElement) => HTMLElement | undefined;

package/esm/header/headerHelpers.js

@@ -4,6 +4,7 @@ import { TabsDisplayName } from "../tabs/tabs";
 import { FiltersBarDisplayName } from "../filtersBar/filtersBar";
 import { HeaderButton, HeaderButtonDisplayName } from "./headerButton";
 import { HeaderMenuDisplayName } from "./headerMenu";
+import { zen } from "../utils/zen";
 export const HeaderCustomMenuWrapper = "HeaderCustomMenuWrapper";
 export const getArrayOfChildren = (children) => {
     if (!children) {
@@ -108,13 +109,15 @@ export const filterItems = (items, isMobile) => {
     return Object.assign(Object.assign({}, result), { resizableElements: [...preparedResizableElements.reverse()] });
 };
 export const findFirstScrollableParent = (element) => {
+    var _a, _b;
     let parent = element.parentElement;
     while (parent) {
-        const style = window.getComputedStyle(parent);
-        if (style.overflowY === "auto" || style.overflowY === "scroll") {
+        const style = (_a = zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen, parent);
+        if ((style === null || style === void 0 ? void 0 : style.overflowY) === "auto" || (style === null || style === void 0 ? void 0 : style.overflowY) === "scroll") {
             return parent;
         }
         parent = parent.parentElement;
     }
-    return document.body;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    return (_b = zen === null || zen === void 0 ? void 0 : zen.document) === null || _b === void 0 ? void 0 : _b.body;
 };