@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/dist/filtersBar/filtersBarProvider.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFiltersBarComponent = exports.FiltersBarContextProvider = exports.FiltersBarContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const zen_1 = require("../utils/zen");
 exports.FiltersBarContext = (0, react_1.createContext)({
     setFiltersBarToggleAllFiltersFn: () => { },
     onUpdateNumberOfChangedFiltersFn: () => { }
@@ -10,10 +11,10 @@ exports.FiltersBarContext = (0, react_1.createContext)({
 const FiltersBarContextProvider = ({ value, children }) => {
     const filtersBarToggleAllFiltersRef = (0, react_1.useRef)(null);
     const setFiltersBarToggleFn = (0, react_1.useCallback)((fn) => {
-        var _a;
+        var _a, _b;
         if (((_a = filtersBarToggleAllFiltersRef.current) === null || _a === void 0 ? void 0 : _a.fn) !== fn) {
             filtersBarToggleAllFiltersRef.current = { fn: fn };
-            setTimeout(() => {
+            (_b = zen_1.zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, () => {
                 value.setFiltersBarToggleAllFiltersFn({ fn: fn });
             }, 0);
         }

package/dist/filtersBar/filtersBarProviderSearch.js

@@ -4,19 +4,21 @@ exports.useSearchComponent = exports.SearchContextProvider = exports.SearchConte
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const getNumberOfChangedFilters_1 = require("./utils/getNumberOfChangedFilters");
+const zen_1 = require("../utils/zen");
 exports.SearchContext = (0, react_1.createContext)({
     setSearchComponent: () => { }
 });
 const SearchContextProvider = ({ value, children }) => {
     const searchComponentRef = (0, react_1.useRef)(null);
     const setSearchComponentRef = (0, react_1.useCallback)((searchComponent) => {
+        var _a;
         const prevProps = searchComponentRef.current === null || !searchComponentRef.current ? undefined : searchComponentRef.current.props;
         const nextProps = !searchComponent ? undefined : searchComponent.props;
         const changedPropsNumber = prevProps && !nextProps || !prevProps && nextProps ? 1 :
             (0, getNumberOfChangedFilters_1.getNumberOfChangedFilters)(prevProps || {}, nextProps || {});
         searchComponentRef.current = searchComponent;
         if (changedPropsNumber > 0) {
-            setTimeout(() => {
+            (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
                 value.setSearchComponent(searchComponent);
             }, 0);
         }

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelCheckboxGroup/filtersBarSidePanelCheckboxGroup.js

@@ -4,9 +4,8 @@ exports.FiltersBarSidePanelCheckboxGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const checkbox_1 = require("../../../../checkbox/checkbox");
 const react_1 = require("react");
-const useUniqueId_1 = require("../../../../commonHelpers/useUniqueId");
 const FiltersBarSidePanelCheckboxGroup = ({ name, items, selectedItems, onChange }) => {
-    const reactId = (0, useUniqueId_1.useUniqueId)();
+    const reactId = (0, react_1.useId)();
     const checkboxGroupName = name || reactId;
     const onChangeHandler = (0, react_1.useCallback)((event) => {
         const target = event.target;

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRadioGroup/filtersBarSidePanelRadioGroup.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersBarSidePanelRadioGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useUniqueId_1 = require("../../../../commonHelpers/useUniqueId");
 const radioGroupRaw_1 = require("../../../../radioGroupRaw/radioGroupRaw");
+const react_1 = require("react");
 const FiltersBarSidePanelRadioGroup = (props) => {
-    const name = (0, useUniqueId_1.useUniqueId)();
+    const name = (0, react_1.useId)();
     return (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-radio-group", children: (0, jsx_runtime_1.jsx)(radioGroupRaw_1.RadioGroupRaw, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) });
 };
 exports.FiltersBarSidePanelRadioGroup = FiltersBarSidePanelRadioGroup;

package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -15,7 +15,6 @@ const themeContext_1 = require("../../utils/theme/themeContext");
 const filtersBarRange_1 = require("../components/filtersBarRange/filtersBarRange");
 const filtersBarPeriodPicker_1 = require("../components/filtersBarPeriodPicker/filtersBarPeriodPicker");
 const utils_1 = require("../../commonHelpers/utils");
-const react_dom_1 = require("react-dom");
 const shield_1 = require("../../shield/shield");
 const sidePanel_1 = require("../../sidePanel/sidePanel");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
@@ -159,6 +158,8 @@ const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
 const useBodyScroll_1 = require("../../utils/useBodyScroll");
 const footerButtons_1 = require("../../footerButtons/footerButtons");
 const pill_1 = require("../../pill/pill");
+const react_dom_1 = require("react-dom");
+const zen_1 = require("../../utils/zen");
 const getChangeHandlers = children => {
   const handlers = {};
   react_1.Children.map(children, child => {
@@ -181,7 +182,7 @@ const FiltersBarSidePanel = ({
   dispatch,
   onApplyAllFilters
 }) => {
-  var _a;
+  var _a, _b, _c;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
@@ -336,7 +337,7 @@ const FiltersBarSidePanel = ({
             type: "tertiary-black",
             className: "zen-side-panel-filters-bar__close-button",
             icon: iconClose_1.IconClose,
-            iconSize: "large",
+            iconSize: isMobile ? "huge" : "large",
             onClick: onClosePanel,
             iconPosition: textIconButton_2.ButtonIconPosition.Start,
             title: translate("Close")
@@ -391,7 +392,7 @@ const FiltersBarSidePanel = ({
           })
         })]
       })
-    }), (_a = parentElement !== null && parentElement !== void 0 ? parentElement : document.fullscreenElement) !== null && _a !== void 0 ? _a : document.body)]
+    }), (_b = parentElement !== null && parentElement !== void 0 ? parentElement : (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body)]
   });
 };
 exports.FiltersBarSidePanel = FiltersBarSidePanel;

package/dist/filtersBar/filtersContainer/filtersContainer.js

@@ -14,6 +14,7 @@ const react_1 = require("react");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const zen_1 = require("../../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");
@@ -105,27 +106,30 @@ const FiltersContainer = ({
   const showLeft = scrollButtonType === "start" || scrollButtonType === "both";
   const showRight = scrollButtonType === "end" || scrollButtonType === "both";
   (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)(() => {
@@ -134,15 +138,16 @@ const FiltersContainer = ({
     }
   }, [scrollableRef, children]);
   (0, react_1.useEffect)(() => {
+    var _a, _b, _c, _d;
     if (showLeft) {
       if (leftTimeoutRef.current) {
-        clearTimeout(leftTimeoutRef.current);
+        (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, leftTimeoutRef.current);
       }
       setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
         left: false
       }));
     } else {
-      leftTimeoutRef.current = window.setTimeout(() => {
+      leftTimeoutRef.current = (_b = zen_1.zen.window) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
         setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
           left: true
         }));
@@ -150,24 +155,25 @@ const FiltersContainer = ({
     }
     if (showRight) {
       if (rightTimeoutRef.current) {
-        clearTimeout(rightTimeoutRef.current);
+        (_c = zen_1.zen.clearTimeout) === null || _c === void 0 ? void 0 : _c.call(zen_1.zen, rightTimeoutRef.current);
       }
       setIsHiddenDisplay(prev => Object.assign(Object.assign({}, prev), {
         right: false
       }));
     } else {
-      rightTimeoutRef.current = window.setTimeout(() => {
+      rightTimeoutRef.current = (_d = zen_1.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_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, leftTimeoutRef.current);
       }
       if (rightTimeoutRef.current) {
-        clearTimeout(rightTimeoutRef.current);
+        (_b = zen_1.zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, rightTimeoutRef.current);
       }
     };
   }, [showLeft, showRight]);

package/dist/formField/hooks/useFormFieldClasses.js

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

package/dist/gridLayout/hooks/useTablet.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const topWindowContext_1 = require("../../utils/topWindow/topWindowContext");
 const getParentWindow_1 = require("../../utils/getParentWindow");
 const useResize_1 = require("../../commonHelpers/hooks/useResize");
+const zen_1 = require("../../utils/zen");
 const isTableUtil = (width) => {
     if (width > 640 && width <= 1024) {
         return true;
@@ -13,7 +14,7 @@ const isTableUtil = (width) => {
 };
 const useTablet = () => {
     const { topWindow } = (0, react_1.useContext)(topWindowContext_1.topWindowContext);
-    const win = (0, react_1.useMemo)(() => topWindow || (0, getParentWindow_1.getParentWindow)(window), [topWindow]);
+    const win = (0, react_1.useMemo)(() => topWindow || (0, getParentWindow_1.getParentWindow)(zen_1.zen), [topWindow]);
     const [isTablet, setIsTablet] = (0, react_1.useState)(isTableUtil(win.innerWidth));
     (0, useResize_1.useResize)(() => {
         setIsTablet(isTableUtil(win.innerWidth));

package/dist/groupButtonRaw/groupButtonRaw.js

@@ -8,12 +8,14 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
 const groupButtonOption_1 = require("./components/groupButtonOption");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 // TODO: tests
 const GroupButtonRaw = (props) => {
     var _a;
     const { fullWidth, groupData, className, isError, isReadOnly, controller, value: valueProp } = props;
     const nameGroupId = (0, react_1.useId)();
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-group-button");
+    const mobileClasses = (0, useMobileClassName_1.useMobileClassName)("zen-group-button");
     const { name = nameGroupId, disabled, onChange = () => { }, onBlur = () => { }, value = "" } = (0, useFormFieldValues_1.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 = (0, react_1.useCallback)(onChange, [onChange]);
     const onBlurHandlerMemo = (0, react_1.useCallback)(onBlur, [onBlur]);
@@ -22,6 +24,6 @@ const GroupButtonRaw = (props) => {
         return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: value.name, className: "zen-group-button__review" });
     }
     // TODO: is it a proper place for onBlur handler?
-    return (0, jsx_runtime_1.jsx)("div", { onBlur: onBlurHandlerMemo, className: (0, classNames_1.classNames)(["zen-group-button", isError ? "zen-group-button--error" : "", driveClasses || "", fullWidth ? "zen-group-button--full-width" : "", className || ""]), children: groupData.map((el, index) => (0, jsx_runtime_1.jsx)(groupButtonOption_1.GroupButtonOption, { nameGroup: name, labelName: el.name, value: el.value, disabled: !!disabled, checked: value === el.value, onChange: onChangeHandlerMemo }, `${name}_${index}_btngroup`)) });
+    return (0, jsx_runtime_1.jsx)("div", { onBlur: onBlurHandlerMemo, className: (0, classNames_1.classNames)(["zen-group-button", isError ? "zen-group-button--error" : "", mobileClasses || driveClasses || "", fullWidth ? "zen-group-button--full-width" : "", className || ""]), children: groupData.map((el, index) => (0, jsx_runtime_1.jsx)(groupButtonOption_1.GroupButtonOption, { nameGroup: name, labelName: el.name, value: el.value, disabled: !!disabled, checked: value === el.value, onChange: onChangeHandlerMemo }, `${name}_${index}_btngroup`)) });
 };
 exports.GroupButtonRaw = GroupButtonRaw;

package/dist/groupsFilterRaw/groupsFilterCurrentlySelectedState.js

@@ -120,6 +120,7 @@ const iconGlobe_1 = require("../icons/deprecated/iconGlobe");
 const iconBackArrow_1 = require("../icons/deprecated/iconBackArrow");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const toggleButtonRaw_1 = require("../toggleButtonRaw/toggleButtonRaw");
+const divider_1 = require("../divider/divider");
 const GroupsFilterCurrentlySelectedState = ({
   children,
   siteWideState,
@@ -192,8 +193,8 @@ const GroupsFilterCurrentlySelectedState = ({
         value: relation,
         onChange: handleRelationChange
       })]
-    }), (0, jsx_runtime_1.jsx)("div", {
-      className: "zen-groups-filter-menu__separator"
+    }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {
+      className: "zen-groups-filter-menu__divider"
     }), (0, jsx_runtime_1.jsx)("div", {
       className: "zen-groups-filter-menu__groups-box",
       children: children

package/dist/groupsFilterRaw/groupsFilterInitialState.js

@@ -207,6 +207,7 @@ const iconOrgFilter_1 = require("../icons/deprecated/iconOrgFilter");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const toggleButtonRaw_1 = require("../toggleButtonRaw/toggleButtonRaw");
+const divider_1 = require("../divider/divider");
 const GroupsFilterInitialState = ({
   children,
   siteWideState,
@@ -281,8 +282,8 @@ const GroupsFilterInitialState = ({
         className: "zen-groups-filter-menu__additional-info--faded zen-groups-filter-menu__filter-count",
         children: searchResult ? `${searchResult} ${translate("Results")}` : ""
       })]
-    }), (0, jsx_runtime_1.jsx)("div", {
-      className: "zen-groups-filter-menu__separator"
+    }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {
+      className: "zen-groups-filter-menu__divider"
     }), (0, jsx_runtime_1.jsx)("div", {
       className: "zen-groups-filter-menu__groups-box",
       children: children

package/dist/groupsFilterRaw/groupsFilterMenu.js

@@ -89,6 +89,7 @@ injectString("zh-Hans", "Apply", "\u5E94\u7528");
 injectString("zh-TW", "Apply", "\u5957\u7528");
 injectString("ro-RO", "Apply", "Aplica\u021Bi");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const divider_1 = require("../divider/divider");
 const GroupsFilterMenu = ({
   children,
   onCancelClick,
@@ -105,8 +106,8 @@ const GroupsFilterMenu = ({
     children: [(0, jsx_runtime_1.jsx)("div", {
       className: "zen-groups-filter-menu__content",
       children: children
-    }), hasFooter ? (0, jsx_runtime_1.jsx)("div", {
-      className: "zen-groups-filter-menu__separator zen-groups-filter-menu__separator--footer"
+    }), hasFooter ? (0, jsx_runtime_1.jsx)(divider_1.Divider, {
+      className: "zen-groups-filter-menu__divider zen-groups-filter-menu__divider--footer"
     }) : null, hasFooter ? (0, jsx_runtime_1.jsxs)("div", {
       className: "zen-groups-filter-menu__footer",
       children: [(0, jsx_runtime_1.jsx)(button_1.Button, {

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

@@ -251,6 +251,7 @@ const mobileSheet_1 = require("../mobileSheet/mobileSheet");
 const isFormItem_1 = require("../commonHelpers/isFormItem");
 const useFormField_1 = require("../commonHelpers/hooks/useFormField");
 const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+// eslint-disable-next-line complexity
 const GroupsFilterRaw = props => {
   var _a;
   const {
@@ -557,25 +558,41 @@ const GroupsFilterRaw = props => {
     errorHandler(e);
     return [];
   }), [dataLoader, errorHandler]);
-  (0, react_1.useEffect)(() => {
+  const loadData = (0, react_1.useCallback)(() => {
     dispatchUiState({
       type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
-      payload: false
+      payload: {
+        hasError: false,
+        isLoading: true
+      }
     });
     dataLoader().then(groups => {
       dispatchState({
         type: stateActionType_1.StateActionType.CreateGroupsMap,
         payload: groups
       });
+      dispatchUiState({
+        type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
+        payload: {
+          hasError: false,
+          isLoading: false
+        }
+      });
       setDataItems(groups);
     }).catch(e => {
       dispatchUiState({
         type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
-        payload: true
+        payload: {
+          hasError: true,
+          isLoading: false
+        }
       });
       errorHandler(e);
     });
   }, [dataLoader, errorHandler]);
+  (0, react_1.useEffect)(() => {
+    loadData();
+  }, [loadData]);
   (0, react_1.useEffect)(() => {
     const step = uiState.step;
     if (step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected) {
@@ -762,7 +779,7 @@ const GroupsFilterRaw = props => {
         id: groupsFilterId,
         placeholder: translate("Filter by group")
       })
-    }) : null, isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, {
+    }) : null, isStateHasData && !uiState.hasError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, {
       onCancelClick: handleCancel,
       onApplyClick: handleApply,
       onResetClick: handleReset,
@@ -792,10 +809,10 @@ const GroupsFilterRaw = props => {
         onRelationChange: onRelationChange,
         children: getGroupsBox()
       })]
-    }), !uiState.isLoadWithError && !isStateHasData && !Object.keys(state.groupsMap).length && (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, {
+    }), !uiState.hasError && !isStateHasData && !Object.keys(state.groupsMap).length && (0, jsx_runtime_1.jsx)(skeletonList_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
     children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
       onClick: handleApply,
@@ -816,6 +833,12 @@ const GroupsFilterRaw = props => {
       children: translate("Clear")
     })]
   }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
+  const isEmptyMap = dataItems.length === 0;
+  (0, react_1.useEffect)(() => {
+    if (isEmptyMap && uiState.isOpen && !uiState.isLoading && !uiState.hasError) {
+      loadData();
+    }
+  }, [uiState.isOpen, isEmptyMap, uiState.isLoading, uiState.hasError, loadData]);
   const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, {
     label: translate("Organization groups filter"),
     triggerRef: triggerRef,
@@ -857,6 +880,7 @@ const GroupsFilterRaw = props => {
   return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
     children: [chip ? (0, jsx_runtime_1.jsx)(chip_1.Chip, {
       status: selectedCount ? chipStatus || "active" : undefined,
+      dataRole: "dialog",
       isOpen: uiState.isOpen,
       disabled: false,
       onClick: handleTriggerClick,
@@ -864,6 +888,7 @@ const GroupsFilterRaw = props => {
       triggerRef: triggerRef,
       icon: chipIcon,
       id: chipId,
+      className: className || "",
       children: groupPlaceHolder !== translate("Groups") ? groupPlaceHolder : chipName
     }) : (0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, {
       value: uiState.searchValue,

package/dist/groupsFilterRaw/groupsFilterTrigger.js

@@ -74,6 +74,7 @@ injectString("ro-RO", "Open filter", "Deschide\u021Bi filtrul");
 const textInputRaw_1 = require("../textInputRaw/textInputRaw");
 const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 const GroupsFilterTrigger = _a => {
   var {
       value,
@@ -94,6 +95,7 @@ const GroupsFilterTrigger = _a => {
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const mobileComponentClass = (0, useMobileClassName_1.useMobileClassName)("zen-groups-filter");
   const groupsFilterId = (0, react_1.useId)();
   const handleKeydown = e => {
     if (e.key === "Enter" && !isOpenPopup) {
@@ -111,7 +113,7 @@ const GroupsFilterTrigger = _a => {
     handleClick();
   };
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
-    className: (0, classNames_1.classNames)(["zen-groups-filter"]),
+    className: (0, classNames_1.classNames)(["zen-groups-filter", mobileComponentClass || ""]),
     ref: ref
   }, otherProps, {
     onClick: clickHandler,

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

@@ -5,7 +5,8 @@ const groupsFilterInterfaces_1 = require("../groupsFilterInterfaces");
 const uiStateActionType_1 = require("./uiStateActionType");
 exports.uiInitialGroupsFilterState = {
     isOpen: false,
-    isLoadWithError: false,
+    hasError: false,
+    isLoading: false,
     step: groupsFilterInterfaces_1.FilterMenuStep.Initial,
     currentAdjustmentId: undefined,
     uncheckedAdjustmentIds: [],
@@ -23,7 +24,7 @@ function uiStateReducer(state, action) {
         case uiStateActionType_1.UiStateActionType.ToggleOpen:
             return state.isOpenAdvancedFilter ? state : Object.assign(Object.assign({}, state), { isOpen: !state.isOpen });
         case uiStateActionType_1.UiStateActionType.SetLoadWithError:
-            return Object.assign(Object.assign({}, state), { isLoadWithError: payload });
+            return Object.assign(Object.assign({}, state), { hasError: payload.hasError, isLoading: payload.isLoading });
         case uiStateActionType_1.UiStateActionType.SetStep:
             return Object.assign(Object.assign({}, state), { step: payload });
         case uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId:

package/dist/header/components/collapsedItemsControl/collapsedItemsControl.js

@@ -49,6 +49,7 @@ const handleCustomMenuWrapper_1 = require("./utils/handleCustomMenuWrapper");
 const pageHeaderButton_1 = require("../../../pageHeader/pageHeaderButton");
 const pageHeaderMenu_1 = require("../../../pageHeader/pageHeaderMenu");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
+const useMobile_1 = require("../../../commonHelpers/hooks/useMobile");
 exports.HeaderCustomContent = (0, react_1.createContext)({
   content: null,
   setContent: _1 => {}
@@ -73,6 +74,7 @@ const PageToolbarCollapsedItemsControl = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const isDrive = (0, useDrive_1.useDrive)();
+  const isMobile = (0, useMobile_1.useMobile)();
   const {
     content
   } = (0, react_1.useContext)(exports.HeaderCustomContent);
@@ -81,9 +83,9 @@ const PageToolbarCollapsedItemsControl = ({
     className: (0, classNames_1.classNames)(["zen-header-more-button", className || ""]),
     type: buttonType_1.ButtonType.TertiaryBlack,
     iconPosition: textIconButton_1.ButtonIconPosition.End,
-    iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large,
+    iconSize: isDrive || isMobile ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large,
     icon: iconDotVertical_1.IconDotVertical
-  }), [isDrive, translate, className]);
+  }), [isDrive, isMobile, translate, className]);
   const items = [];
   const clickHandler = (0, react_1.useCallback)(propsOnClick => (_, e) => {
     propsOnClick(e);

package/dist/header/components/mobileFilterControl/mobileFilterControl.js

@@ -41,6 +41,7 @@ const classNames_1 = require("../../../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
 const iconSettings6_1 = require("../../../icons/iconSettings6");
 const useDrive_1 = require("../../../utils/theme/useDrive");
+const useMobile_1 = require("../../../commonHelpers/hooks/useMobile");
 const MobileFilterControl = ({
   className,
   onClick,
@@ -51,10 +52,11 @@ const MobileFilterControl = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const isDrive = (0, useDrive_1.useDrive)();
+  const isMobile = (0, useMobile_1.useMobile)();
   const filterIconButton = (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
     iconPosition: textIconButton_1.ButtonIconPosition.End,
     icon: iconSettings6_1.IconSettings6,
-    iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large,
+    iconSize: isDrive || isMobile ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.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"),