@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/dist/groupsFilterRaw/groupsFilterRaw.js

@@ -1,10 +1,208 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.GroupsFilterRaw = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const groupsFilterInterfaces_1 = require("./groupsFilterInterfaces");
 const groupsFilterMenu_1 = require("./groupsFilterMenu");
+injectString("cs", "Groups", "Skupiny");
+injectString("da-DK", "Groups", "Grupper");
+injectString("de", "Groups", "Gruppen");
+injectString("en", "Groups", "Groups");
+injectString("es", "Groups", "Grupos");
+injectString("fi-FI", "Groups", "Ryhm\xE4t");
+injectString("fr", "Groups", "Groupes");
+injectString("fr-FR", "Groups", "Groupes");
+injectString("hu-HU", "Groups", "Csoportok");
+injectString("id", "Groups", "Grup");
+injectString("it", "Groups", "Gruppi");
+injectString("ja", "Groups", "\u30B0\u30EB\u30FC\u30D7");
+injectString("ko-KR", "Groups", "\uADF8\uB8F9");
+injectString("ms", "Groups", "Kumpulan");
+injectString("nb-NO", "Groups", "Grupper");
+injectString("nl", "Groups", "Groepen");
+injectString("pl", "Groups", "Grupy");
+injectString("pt-BR", "Groups", "Grupos");
+injectString("sk-SK", "Groups", "Skupiny");
+injectString("sv", "Groups", "Grupper");
+injectString("th", "Groups", "\u0E01\u0E25\u0E38\u0E48\u0E21");
+injectString("tr", "Groups", "Gruplar");
+injectString("zh-Hans", "Groups", "\u7EC4");
+injectString("zh-TW", "Groups", "\u7FA4\u7D44");
+injectString("cs", "Or", "Nebo");
+injectString("da-DK", "Or", "Eller");
+injectString("de", "Or", "Oder");
+injectString("en", "Or", "Or");
+injectString("es", "Or", "O");
+injectString("fi-FI", "Or", "Tai");
+injectString("fr", "Or", "Ou");
+injectString("fr-FR", "Or", "Ou");
+injectString("hu-HU", "Or", "Vagy");
+injectString("id", "Or", "Atau");
+injectString("it", "Or", "O");
+injectString("ja", "Or", "\u307E\u305F\u306F");
+injectString("ko-KR", "Or", "\uB610\uB294");
+injectString("ms", "Or", "Atau");
+injectString("nb-NO", "Or", "Eller");
+injectString("nl", "Or", "Of");
+injectString("pl", "Or", "Lub");
+injectString("pt-BR", "Or", "Ou");
+injectString("sk-SK", "Or", "Alebo");
+injectString("sv", "Or", "Eller");
+injectString("th", "Or", "\u0E2B\u0E23\u0E37\u0E2D");
+injectString("tr", "Or", "Veya");
+injectString("zh-Hans", "Or", "\u6216");
+injectString("zh-TW", "Or", "\u6216");
+injectString("cs", "And", "A");
+injectString("da-DK", "And", "Og");
+injectString("de", "And", "Und");
+injectString("en", "And", "And");
+injectString("es", "And", "Y");
+injectString("fi-FI", "And", "Ja");
+injectString("fr", "And", "Et");
+injectString("fr-FR", "And", "Et");
+injectString("hu-HU", "And", "\xC9s");
+injectString("id", "And", "Dan");
+injectString("it", "And", "E");
+injectString("ja", "And", "\u3068");
+injectString("ko-KR", "And", "\uADF8\uB9AC\uACE0");
+injectString("ms", "And", "Dan");
+injectString("nb-NO", "And", "Og");
+injectString("nl", "And", "En");
+injectString("pl", "And", "Oraz");
+injectString("pt-BR", "And", "E");
+injectString("sk-SK", "And", "A");
+injectString("sv", "And", "Och");
+injectString("th", "And", "\u0E41\u0E25\u0E30");
+injectString("tr", "And", "Ve");
+injectString("zh-Hans", "And", "\u548C");
+injectString("zh-TW", "And", "\u548C");
+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");
+injectString("en", "Filter by group", "Filter by group");
+injectString("es", "Filter by group", "Filtrar por grupo");
+injectString("fi-FI", "Filter by group", "Suodata ryhm\xE4n mukaan");
+injectString("fr", "Filter by group", "Filtrer par groupe");
+injectString("fr-FR", "Filter by group", "Filtrer par groupe");
+injectString("hu-HU", "Filter by group", "Sz\u0171rd csoport alapj\xE1n.");
+injectString("id", "Filter by group", "Filter berdasarkan grup");
+injectString("it", "Filter by group", "Filtrare per gruppo");
+injectString("ja", "Filter by group", "\u30B0\u30EB\u30FC\u30D7\u306B\u3088\u308B\u30D5\u30A3\u30EB\u30BF\u30EA\u30F3\u30B0");
+injectString("ko-KR", "Filter by group", "\uADF8\uB8F9\uBCC4 \uD544\uD130\uB9C1");
+injectString("ms", "Filter by group", "Saring mengikut kumpulan");
+injectString("nb-NO", "Filter by group", "Filtrer etter gruppe");
+injectString("nl", "Filter by group", "Filteren op groep");
+injectString("pl", "Filter by group", "Filtruj wed\u0142ug grupy");
+injectString("pt-BR", "Filter by group", "Filtrar por grupo");
+injectString("sk-SK", "Filter by group", "Filtrova\u0165 pod\u013Ea skupiny");
+injectString("sv", "Filter by group", "Filtrera efter grupp");
+injectString("th", "Filter by group", "\u0E01\u0E23\u0E2D\u0E07\u0E15\u0E32\u0E21\u0E01\u0E25\u0E38\u0E48\u0E21");
+injectString("tr", "Filter by group", "Gruba g\xF6re filtrele");
+injectString("zh-Hans", "Filter by group", "\u6309\u7EC4\u8FC7\u6EE4");
+injectString("zh-TW", "Filter by group", "\u4F9D\u7FA4\u7D44\u7BE9\u9078");
+injectString("cs", "Apply", "Pou\u017E\xEDt");
+injectString("da-DK", "Apply", "Anvend");
+injectString("de", "Apply", "Anwenden");
+injectString("en", "Apply", "Apply");
+injectString("es", "Apply", "Aplicar");
+injectString("fi-FI", "Apply", "K\xE4yt\xE4");
+injectString("fr", "Apply", "Appliquer");
+injectString("fr-FR", "Apply", "Appliquer");
+injectString("hu-HU", "Apply", "Alkalmazd.");
+injectString("id", "Apply", "Terapkan");
+injectString("it", "Apply", "Applicare");
+injectString("ja", "Apply", "\u9069\u7528");
+injectString("ko-KR", "Apply", "\uC801\uC6A9");
+injectString("ms", "Apply", "Gunakan");
+injectString("nb-NO", "Apply", "Bruk");
+injectString("nl", "Apply", "Toepassen");
+injectString("pl", "Apply", "Zastosuj");
+injectString("pt-BR", "Apply", "Aplicar");
+injectString("sk-SK", "Apply", "Pou\u017Ei");
+injectString("sv", "Apply", "Ans\xF6k");
+injectString("th", "Apply", "\u0E43\u0E0A\u0E49");
+injectString("tr", "Apply", "Uygula");
+injectString("zh-Hans", "Apply", "\u5E94\u7528");
+injectString("zh-TW", "Apply", "\u5957\u7528");
+injectString("cs", "Cancel", "Zru\u0161it");
+injectString("da-DK", "Cancel", "Annuller");
+injectString("de", "Cancel", "Abbrechen");
+injectString("en", "Cancel", "Cancel");
+injectString("es", "Cancel", "Cancelar");
+injectString("fi-FI", "Cancel", "Peruuta");
+injectString("fr", "Cancel", "Annuler");
+injectString("fr-FR", "Cancel", "Annuler");
+injectString("hu-HU", "Cancel", "M\xE9gse");
+injectString("id", "Cancel", "Batalkan");
+injectString("it", "Cancel", "Annullare");
+injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
+injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
+injectString("ms", "Cancel", "Batal");
+injectString("nb-NO", "Cancel", "Avbryt");
+injectString("nl", "Cancel", "Annuleren");
+injectString("pl", "Cancel", "Anuluj");
+injectString("pt-BR", "Cancel", "Cancelar");
+injectString("sk-SK", "Cancel", "Zru\u0161.");
+injectString("sv", "Cancel", "Avbryt");
+injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
+injectString("tr", "Cancel", "\u0130ptal");
+injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
+injectString("zh-TW", "Cancel", "\u53D6\u6D88");
+injectString("cs", "Clear", "Vymazat");
+injectString("da-DK", "Clear", "Ryd");
+injectString("de", "Clear", "L\xF6schen");
+injectString("en", "Clear", "Clear");
+injectString("es", "Clear", "Borrar");
+injectString("fi-FI", "Clear", "Tyhjenn\xE4");
+injectString("fr", "Clear", "Effacer");
+injectString("fr-FR", "Clear", "Effacer");
+injectString("hu-HU", "Clear", "T\xF6r\xF6ld.");
+injectString("id", "Clear", "Hapus");
+injectString("it", "Clear", "Cancella");
+injectString("ja", "Clear", "\u30AF\u30EA\u30A2");
+injectString("ko-KR", "Clear", "\uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear", "Kosongkan");
+injectString("nb-NO", "Clear", "T\xF8m");
+injectString("nl", "Clear", "Wissen");
+injectString("pl", "Clear", "Wyczy\u015B\u0107");
+injectString("pt-BR", "Clear", "Limpar");
+injectString("sk-SK", "Clear", "Vyma\u017E");
+injectString("sv", "Clear", "Rensa");
+injectString("th", "Clear", "\u0E25\u0E49\u0E32\u0E07");
+injectString("tr", "Clear", "Temizle");
+injectString("zh-Hans", "Clear", "\u6E05\u9664");
+injectString("zh-TW", "Clear", "\u6E05\u9664");
+injectString("cs", "Organization groups filter", "Filtr skupin organizace");
+injectString("da-DK", "Organization groups filter", "Filter for organisationsgrupper");
+injectString("de", "Organization groups filter", "Filter f\xFCr Firmengruppen");
+injectString("en", "Organization groups filter", "Organization groups filter");
+injectString("es", "Organization groups filter", "Filtro de grupos de la organizaci\xF3n");
+injectString("fi-FI", "Organization groups filter", "Organisaatioryhmien suodatin");
+injectString("fr", "Organization groups filter", "Filtre de groupes organisationnels");
+injectString("fr-FR", "Organization groups filter", "Filtre des groupes de l\u2019entreprise");
+injectString("hu-HU", "Organization groups filter", "Szervezeti csoportok sz\u0171r\xE9se");
+injectString("id", "Organization groups filter", "Filter grup organisasi");
+injectString("it", "Organization groups filter", "Filtro di gruppi dell'organizzazione");
+injectString("ja", "Organization groups filter", "\u56E3\u4F53\u30B0\u30EB\u30FC\u30D7\u30D5\u30A3\u30EB\u30BF\u30FC");
+injectString("ko-KR", "Organization groups filter", "\uC870\uC9C1 \uADF8\uB8F9 \uD544\uD130");
+injectString("ms", "Organization groups filter", "Penyaring kumpulan organisasi");
+injectString("nb-NO", "Organization groups filter", "Filter for organisasjonsgrupper.");
+injectString("nl", "Organization groups filter", "Filter voor organisatiegroepen");
+injectString("pl", "Organization groups filter", "Filtr grup organizacji");
+injectString("pt-BR", "Organization groups filter", "Filtro de grupos da organiza\xE7\xE3o");
+injectString("sk-SK", "Organization groups filter", "Filter organiza\u010Dn\xFDch skup\xEDn");
+injectString("sv", "Organization groups filter", "Filter f\xF6r organisationsgrupper");
+injectString("th", "Organization groups filter", "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E01\u0E25\u0E38\u0E48\u0E21\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23");
+injectString("tr", "Organization groups filter", "Organizasyon gruplar\u0131 filtresi");
+injectString("zh-Hans", "Organization groups filter", "\u7EC4\u7EC7\u7EC4\u7B5B\u9009\u5668");
+injectString("zh-TW", "Organization groups filter", "\u7D44\u7E54\u7FA4\u7D44\u7BE9\u9078");
 const groupsFilterInitialState_1 = require("./groupsFilterInitialState");
 const groupsFilterAdjustmentState_1 = require("./groupsFilterAdjustmentState");
 const groupsFilterCurrentlySelectedState_1 = require("./groupsFilterCurrentlySelectedState");
@@ -38,319 +236,629 @@ const isFormItem_1 = require("../commonHelpers/isFormItem");
 const useFormField_1 = require("../commonHelpers/hooks/useFormField");
 const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
 // eslint-disable-next-line max-len, complexity
-const GroupsFilterRaw = (props) => {
+const GroupsFilterRaw = props => {
+  var _a;
+  const {
+    fullSize,
+    className,
+    classNamePopup,
+    dataLoader,
+    errorHandler,
+    initialFilterState,
+    isWithColor,
+    onChange,
+    options,
+    listLimit = 500,
+    isError,
+    isReadOnly,
+    chip,
+    chipIcon,
+    chipId,
+    chipName
+  } = props;
+  const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
+  const {
+    field
+  } = (0, useFormField_1.useFormField)(props.controller);
+  const isFormItemValue = (0, isFormItem_1.isFormItem)(props);
+  let initialFilterStateInner, onChangeInner;
+  if (isFormItemValue) {
+    initialFilterStateInner = (_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue;
+    onChangeInner = state => {
+      field === null || field === void 0 ? void 0 : field.onChange(state);
+    };
+  } else {
+    initialFilterStateInner = initialFilterState;
+    onChangeInner = onChange;
+  }
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const [groupPlaceHolder, setGroupPlaceHolder] = (0, react_1.useState)((options === null || options === void 0 ? void 0 : options.placeholder) || translate("Groups"));
+  const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(translate, initialFilterState));
+  const [uiState, dispatchUiState] = (0, react_1.useReducer)(uiStateReducer_1.uiStateReducer, uiStateReducer_1.uiInitialGroupsFilterState);
+  const [dataItems, setDataItems] = (0, react_1.useState)([]);
+  const isMobile = (0, useMobile_1.useMobile)();
+  const inputRef = (0, react_1.useRef)(null);
+  const emptyInputRef = (0, react_1.useRef)(null);
+  const triggerRef = (0, react_1.useRef)(null);
+  const menuRef = (0, react_1.useRef)(null);
+  const prevInitialState = (0, react_1.useRef)(initialFilterStateInner);
+  const prevSearchField = (0, react_1.useRef)("");
+  const groupsFilterId = (0, react_1.useId)();
+  const blocksMap = (0, react_1.useMemo)(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
+  const onOptionsToggle = (0, react_1.useCallback)(() => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.ToggleOpen,
+      payload: undefined
+    });
+  }, []);
+  const handleSetStep = (0, react_1.useCallback)(newStep => {
     var _a;
-    const { fullSize, className, dataLoader, errorHandler, initialFilterState, isWithColor, onChange, options, listLimit = 500, isError, isReadOnly, chip, chipIcon, chipId, chipName } = props;
-    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
-    const { field } = (0, useFormField_1.useFormField)(props.controller);
-    const isFormItemValue = (0, isFormItem_1.isFormItem)(props);
-    let initialFilterStateInner, onChangeInner;
-    if (isFormItemValue) {
-        initialFilterStateInner = (_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue;
-        onChangeInner = (state) => {
-            field === null || field === void 0 ? void 0 : field.onChange(state);
-        };
+    uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.ClearUncheckedState,
+      payload: undefined
+    });
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetStep,
+      payload: newStep
+    });
+    if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && newStep !== groupsFilterInterfaces_1.FilterMenuStep.Initial) {
+      inputRef.current.value = "";
+      dispatchUiState({
+        type: uiStateActionType_1.UiStateActionType.SetSearchValue,
+        payload: ""
+      });
     }
-    else {
-        initialFilterStateInner = initialFilterState;
-        onChangeInner = onChange;
+  }, [uiState.step]);
+  const onSearchChange = (0, react_1.useCallback)(event => {
+    const newValue = event.currentTarget.value;
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetSearchValue,
+      payload: newValue
+    });
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetIsOpen,
+      payload: true
+    });
+    uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.Initial && handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+  }, [handleSetStep, uiState.step]);
+  const onSearchChipChange = (0, react_1.useCallback)(newValue => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetSearchValue,
+      payload: newValue || ""
+    });
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetIsOpen,
+      payload: true
+    });
+    uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.Initial && handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+  }, [handleSetStep, uiState.step]);
+  const handleFocusOnClose = (0, react_1.useCallback)(() => {
+    var _a, _b, _c;
+    if (chip) {
+      (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    } else {
+      !isMobile && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus());
+      isMobile && ((_c = emptyInputRef.current) === null || _c === void 0 ? void 0 : _c.focus());
     }
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const [groupPlaceHolder, setGroupPlaceHolder] = (0, react_1.useState)((options === null || options === void 0 ? void 0 : options.placeholder) || translate("Groups"));
-    const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(translate, initialFilterState));
-    const [uiState, dispatchUiState] = (0, react_1.useReducer)(uiStateReducer_1.uiStateReducer, uiStateReducer_1.uiInitialGroupsFilterState);
-    const [dataItems, setDataItems] = (0, react_1.useState)([]);
-    const isMobile = (0, useMobile_1.useMobile)();
-    const inputRef = (0, react_1.useRef)(null);
-    const emptyInputRef = (0, react_1.useRef)(null);
-    const triggerRef = (0, react_1.useRef)(null);
-    const menuRef = (0, react_1.useRef)(null);
-    const prevInitialState = (0, react_1.useRef)(initialFilterStateInner);
-    const prevSearchField = (0, react_1.useRef)("");
-    const groupsFilterId = (0, react_1.useId)();
-    const blocksMap = (0, react_1.useMemo)(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
-    const onOptionsToggle = (0, react_1.useCallback)(() => { dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ToggleOpen, payload: undefined }); }, []);
-    const handleSetStep = (0, react_1.useCallback)((newStep) => {
-        var _a;
-        uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ClearUncheckedState, payload: undefined });
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetStep, payload: newStep });
-        if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && newStep !== groupsFilterInterfaces_1.FilterMenuStep.Initial) {
-            inputRef.current.value = "";
-            dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: "" });
-        }
-    }, [uiState.step]);
-    const onSearchChange = (0, react_1.useCallback)((event) => {
-        const newValue = event.currentTarget.value;
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: newValue });
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: true });
-        uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.Initial && handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
-    }, [handleSetStep, uiState.step]);
-    const onSearchChipChange = (0, react_1.useCallback)((newValue) => {
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: newValue || "" });
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: true });
-        uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.Initial && handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
-    }, [handleSetStep, uiState.step]);
-    const handleFocusOnClose = (0, react_1.useCallback)(() => {
-        var _a, _b, _c;
-        if (chip) {
-            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else {
-            !isMobile && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus());
-            isMobile && ((_c = emptyInputRef.current) === null || _c === void 0 ? void 0 : _c.focus());
-        }
-    }, [chip, isMobile]);
-    const handleCancel = (0, react_1.useCallback)(() => {
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
-        dispatchState({ type: stateActionType_1.StateActionType.SetState, payload: state.frozenState });
-        dispatchState({ type: stateActionType_1.StateActionType.SideWide, payload: state.frozenSideWideState });
-        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
-        handleFocusOnClose();
-    }, [state.frozenState, state.frozenSideWideState, handleSetStep, handleFocusOnClose]);
-    const handleApply = (0, react_1.useCallback)(() => {
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: "" });
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ClearUncheckedState, payload: undefined });
-        if (inputRef.current) {
-            inputRef.current.value = "";
-        }
-        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
-        dispatchState({ type: stateActionType_1.StateActionType.FreezeState, payload: (0, stateReducerHelper_1.getCurrentState)(state) });
-        dispatchState({ type: stateActionType_1.StateActionType.FreezeSideWide, payload: state.sideWideState });
-        handleFocusOnClose();
-    }, [handleSetStep, state, handleFocusOnClose]);
-    const handleReset = (0, react_1.useCallback)(() => {
-        dispatchState({ type: stateActionType_1.StateActionType.ResetSelection, payload: undefined });
-    }, []);
-    const handleChipClose = (0, react_1.useCallback)(() => {
-        dispatchState({ type: stateActionType_1.StateActionType.ResetSelection, payload: undefined });
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: "" });
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ClearUncheckedState, payload: undefined });
-        if (inputRef.current) {
-            inputRef.current.value = "";
-        }
-        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
-        dispatchState({ type: stateActionType_1.StateActionType.FreezeState, payload: stateReducer_1.defaultPreparedFilterState });
-        dispatchState({ type: stateActionType_1.StateActionType.FreezeSideWide, payload: false });
-    }, [handleSetStep]);
-    const handleCheckboxChange = (0, react_1.useCallback)((value) => {
-        if (value.partial) {
-            dispatchState({ type: stateActionType_1.StateActionType.DeselectAllChildren, payload: value.id });
-        }
-        else {
-            dispatchState({ type: stateActionType_1.StateActionType.ChangeSelection, payload: { value: value.state, itemId: value.id } });
-        }
-    }, [dispatchState]);
-    const handleCheckboxItemClick = (0, react_1.useCallback)((id) => {
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId, payload: id });
-        handleSetStep(id ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
-    }, [dispatchUiState, handleSetStep]);
-    const handleCheckboxItemAdjustmentClick = (0, react_1.useCallback)((value) => {
-        if (value.id === groupsFilterBox_1.ADVANCED_FILTER_ID) {
-            const currentVal = value.state ? uiState.uncheckedAdvancedState : state.advancedFilterState;
-            !value.state && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetUncheckedAdvancedState, payload: currentVal });
-            !value.state && dispatchState({ type: stateActionType_1.StateActionType.SetAdvancedFilterState, payload: (0, groupsHelper_1.getDefaultFilterState)() });
-            value.state && dispatchState({ type: stateActionType_1.StateActionType.SetAdvancedFilterState, payload: currentVal || state.frozenState.advancedFilterState || (0, groupsHelper_1.getDefaultFilterState)() });
-            return;
-        }
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetUncheckedAdjustmentIds, payload: !value.state ?
-                [...uiState.uncheckedAdjustmentIds, value.id] : uiState.uncheckedAdjustmentIds.filter(id => id !== value.id) });
-        dispatchState({ type: stateActionType_1.StateActionType.ChangeSelection, payload: { value: value.state, itemId: value.id } });
-    }, [dispatchState, dispatchUiState, state.advancedFilterState, state.frozenState.advancedFilterState, uiState.uncheckedAdvancedState, uiState.uncheckedAdjustmentIds]);
-    const basicHandleBackButtonClick = (0, react_1.useCallback)(() => {
-        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
-    }, [handleSetStep]);
-    const handleBackButtonClick = (0, react_1.useCallback)(() => {
-        const currentEl = uiState.currentAdjustmentId ? (0, stateReducerHelper_1.getGroupsTreeItem)(state, uiState.currentAdjustmentId) : undefined;
-        if (!uiState.currentAdjustmentId || !(currentEl === null || currentEl === void 0 ? void 0 : currentEl.parent)) {
-            basicHandleBackButtonClick();
-            return;
-        }
-        const isNotRoot = currentEl.parent.id && currentEl.parent.id !== groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID;
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId, payload: isNotRoot ? currentEl.parent.id : undefined });
-        handleSetStep(isNotRoot ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
-    }, [basicHandleBackButtonClick, handleSetStep, state, uiState.currentAdjustmentId]);
-    const handleHomeButtonClick = (0, react_1.useCallback)(() => {
-        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
-        uiState.currentAdjustmentId && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId, payload: undefined });
-    }, [handleSetStep, uiState.currentAdjustmentId, dispatchUiState]);
-    const handleCurrentlySelectedClick = (0, react_1.useCallback)(() => {
-        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected);
-    }, [handleSetStep]);
-    const selectAllHandler = (0, react_1.useCallback)((isAllSelected) => {
-        if (!uiState.currentAdjustmentId) {
-            return;
+  }, [chip, isMobile]);
+  const handleCancel = (0, react_1.useCallback)(() => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetIsOpen,
+      payload: false
+    });
+    dispatchState({
+      type: stateActionType_1.StateActionType.SetState,
+      payload: state.frozenState
+    });
+    dispatchState({
+      type: stateActionType_1.StateActionType.SideWide,
+      payload: state.frozenSideWideState
+    });
+    handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    handleFocusOnClose();
+  }, [state.frozenState, state.frozenSideWideState, handleSetStep, handleFocusOnClose]);
+  const handleApply = (0, react_1.useCallback)(() => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetIsOpen,
+      payload: false
+    });
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetSearchValue,
+      payload: ""
+    });
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.ClearUncheckedState,
+      payload: undefined
+    });
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+    handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    dispatchState({
+      type: stateActionType_1.StateActionType.FreezeState,
+      payload: (0, stateReducerHelper_1.getCurrentState)(state)
+    });
+    dispatchState({
+      type: stateActionType_1.StateActionType.FreezeSideWide,
+      payload: state.sideWideState
+    });
+    handleFocusOnClose();
+  }, [handleSetStep, state, handleFocusOnClose]);
+  const handleReset = (0, react_1.useCallback)(() => {
+    dispatchState({
+      type: stateActionType_1.StateActionType.ResetSelection,
+      payload: undefined
+    });
+  }, []);
+  const handleChipClose = (0, react_1.useCallback)(() => {
+    dispatchState({
+      type: stateActionType_1.StateActionType.ResetSelection,
+      payload: undefined
+    });
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetIsOpen,
+      payload: false
+    });
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetSearchValue,
+      payload: ""
+    });
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.ClearUncheckedState,
+      payload: undefined
+    });
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+    handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    dispatchState({
+      type: stateActionType_1.StateActionType.FreezeState,
+      payload: stateReducer_1.defaultPreparedFilterState
+    });
+    dispatchState({
+      type: stateActionType_1.StateActionType.FreezeSideWide,
+      payload: false
+    });
+  }, [handleSetStep]);
+  const handleCheckboxChange = (0, react_1.useCallback)(value => {
+    if (value.partial) {
+      dispatchState({
+        type: stateActionType_1.StateActionType.DeselectAllChildren,
+        payload: value.id
+      });
+    } else {
+      dispatchState({
+        type: stateActionType_1.StateActionType.ChangeSelection,
+        payload: {
+          value: value.state,
+          itemId: value.id
         }
-        dispatchState({ type: isAllSelected ? stateActionType_1.StateActionType.DeselectAllChildren : stateActionType_1.StateActionType.SelectAllChildren, payload: uiState.currentAdjustmentId });
-    }, [uiState.currentAdjustmentId, dispatchState]);
-    const handleTriggerClick = () => {
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ToggleOpen, payload: undefined });
+      });
+    }
+  }, [dispatchState]);
+  const handleCheckboxItemClick = (0, react_1.useCallback)(id => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId,
+      payload: id
+    });
+    handleSetStep(id ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
+  }, [dispatchUiState, handleSetStep]);
+  const handleCheckboxItemAdjustmentClick = (0, react_1.useCallback)(value => {
+    if (value.id === groupsFilterBox_1.ADVANCED_FILTER_ID) {
+      const currentVal = value.state ? uiState.uncheckedAdvancedState : state.advancedFilterState;
+      !value.state && dispatchUiState({
+        type: uiStateActionType_1.UiStateActionType.SetUncheckedAdvancedState,
+        payload: currentVal
+      });
+      !value.state && dispatchState({
+        type: stateActionType_1.StateActionType.SetAdvancedFilterState,
+        payload: (0, groupsHelper_1.getDefaultFilterState)()
+      });
+      value.state && dispatchState({
+        type: stateActionType_1.StateActionType.SetAdvancedFilterState,
+        payload: currentVal || state.frozenState.advancedFilterState || (0, groupsHelper_1.getDefaultFilterState)()
+      });
+      return;
+    }
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetUncheckedAdjustmentIds,
+      payload: !value.state ? [...uiState.uncheckedAdjustmentIds, value.id] : uiState.uncheckedAdjustmentIds.filter(id => id !== value.id)
+    });
+    dispatchState({
+      type: stateActionType_1.StateActionType.ChangeSelection,
+      payload: {
+        value: value.state,
+        itemId: value.id
+      }
+    });
+  }, [dispatchState, dispatchUiState, state.advancedFilterState, state.frozenState.advancedFilterState, uiState.uncheckedAdvancedState, uiState.uncheckedAdjustmentIds]);
+  const basicHandleBackButtonClick = (0, react_1.useCallback)(() => {
+    handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+  }, [handleSetStep]);
+  const handleBackButtonClick = (0, react_1.useCallback)(() => {
+    const currentEl = uiState.currentAdjustmentId ? (0, stateReducerHelper_1.getGroupsTreeItem)(state, uiState.currentAdjustmentId) : undefined;
+    if (!uiState.currentAdjustmentId || !(currentEl === null || currentEl === void 0 ? void 0 : currentEl.parent)) {
+      basicHandleBackButtonClick();
+      return;
+    }
+    const isNotRoot = currentEl.parent.id && currentEl.parent.id !== groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID;
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId,
+      payload: isNotRoot ? currentEl.parent.id : undefined
+    });
+    handleSetStep(isNotRoot ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
+  }, [basicHandleBackButtonClick, handleSetStep, state, uiState.currentAdjustmentId]);
+  const handleHomeButtonClick = (0, react_1.useCallback)(() => {
+    handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    uiState.currentAdjustmentId && dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId,
+      payload: undefined
+    });
+  }, [handleSetStep, uiState.currentAdjustmentId, dispatchUiState]);
+  const handleCurrentlySelectedClick = (0, react_1.useCallback)(() => {
+    handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected);
+  }, [handleSetStep]);
+  const selectAllHandler = (0, react_1.useCallback)(isAllSelected => {
+    if (!uiState.currentAdjustmentId) {
+      return;
+    }
+    dispatchState({
+      type: isAllSelected ? stateActionType_1.StateActionType.DeselectAllChildren : stateActionType_1.StateActionType.SelectAllChildren,
+      payload: uiState.currentAdjustmentId
+    });
+  }, [uiState.currentAdjustmentId, dispatchState]);
+  const handleTriggerClick = () => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.ToggleOpen,
+      payload: undefined
+    });
+  };
+  const handleAdvancedDialogOpen = (0, react_1.useCallback)(() => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetAdvancedFilterIsOpen,
+      payload: true
+    });
+  }, []);
+  const handleAdvancedDialogClose = (0, react_1.useCallback)(() => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetAdvancedFilterIsOpen,
+      payload: false
+    });
+  }, []);
+  const handleAdvancedDialogApply = (0, react_1.useCallback)(val => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetAdvancedFilterIsOpen,
+      payload: false
+    });
+    dispatchState({
+      type: stateActionType_1.StateActionType.SetAdvancedFilterState,
+      payload: val.items.length ? val : (0, groupsHelper_1.getDefaultFilterState)()
+    });
+  }, []);
+  const getAdvancedData = (0, react_1.useCallback)((_, searchValue) => dataLoader().then(data => searchValue ? data.filter(el => (el.name || el.id).toLocaleLowerCase().indexOf(searchValue.toLocaleLowerCase()) > -1) : data).catch(e => {
+    errorHandler(e);
+    return [];
+  }), [dataLoader, errorHandler]);
+  (0, react_1.useEffect)(() => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
+      payload: false
+    });
+    dataLoader().then(groups => {
+      dispatchState({
+        type: stateActionType_1.StateActionType.CreateGroupsMap,
+        payload: groups
+      });
+      setDataItems(groups);
+    }).catch(e => {
+      dispatchUiState({
+        type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
+        payload: true
+      });
+      errorHandler(e);
+    });
+  }, [dataLoader, errorHandler]);
+  (0, react_1.useEffect)(() => {
+    const step = uiState.step;
+    if (step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected) {
+      return;
+    }
+    const groupsBlocks = (0, groupsFilterAdvancedValue_1.getAdvancedFilterValue)({
+      blocks: blocksMap[uiState.step],
+      state,
+      isWithColor: isWithColor || false,
+      uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [],
+      uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined,
+      listLimit
+    });
+    const label = (0, groupsFilterAdvancedValue_1.getAdvancedLabel)({
+      groupsBlocks
+    });
+    const selectedValues = dataItems.filter(item => {
+      var _a;
+      return (_a = state.frozenState.simpleFilterState) === null || _a === void 0 ? void 0 : _a.find(id => id === item.id);
+    }).map(item => item.name);
+    const selectedValuesLabel = selectedValues.join(` ${state.frozenState.relation === groupsFilterInterfaces_1.RelationOperator.OR ? translate("Or") : translate("And")} `);
+    if (!label && !selectedValuesLabel) {
+      setGroupPlaceHolder((options === null || options === void 0 ? void 0 : options.placeholder) || translate("Groups"));
+      return;
+    }
+    const separator = `${label && selectedValuesLabel ? ` ${state.frozenState.relation === groupsFilterInterfaces_1.RelationOperator.OR ? translate("Or") : translate("And")} ` : ""}`;
+    setGroupPlaceHolder(`${label}${separator}${selectedValuesLabel}`);
+  }, [uiState.searchValue, uiState.step, blocksMap, state, isWithColor, listLimit, uiState.currentAdjustmentId, uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState, dataItems, options === null || options === void 0 ? void 0 : options.placeholder, translate]);
+  const getGroupsBox = (0, react_1.useCallback)(() => (0, jsx_runtime_1.jsx)(groupsFilterBox_1.GroupsFilterBox, {
+    step: uiState.step,
+    currentId: uiState.currentAdjustmentId,
+    isWithColor: isWithColor || false,
+    state: state,
+    search: uiState.searchValue,
+    blocks: uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial ? [] : blocksMap[uiState.step],
+    onChange: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? handleCheckboxItemAdjustmentClick : handleCheckboxChange,
+    onClick: handleCheckboxItemClick,
+    uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [],
+    uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined,
+    listLimit: listLimit
+  }), [blocksMap, handleCheckboxChange, handleCheckboxItemAdjustmentClick, handleCheckboxItemClick, isWithColor, listLimit, state, uiState.currentAdjustmentId, uiState.searchValue, uiState.step, uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState]);
+  const onSideWideChange = newState => {
+    dispatchState({
+      type: stateActionType_1.StateActionType.SideWide,
+      payload: newState
+    });
+  };
+  const onRelationChange = newRelation => {
+    dispatchState({
+      type: stateActionType_1.StateActionType.Relation,
+      payload: newRelation
+    });
+  };
+  const getSearchResult = (0, react_1.useCallback)(() => {
+    const result = (0, stateReducerHelper_1.getSearchResultFromObject)(state, uiState.searchValue);
+    return result ? (result.builtInGroups.length + result.userGroups.length).toString() : "0";
+  }, [state, uiState.searchValue]);
+  const getAdvancedDialog = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(advancedGroupsFilter_1.AdvancedGroupsFilter, {
+    isOpen: uiState.isOpenAdvancedFilter,
+    onClose: handleAdvancedDialogClose,
+    onApply: handleAdvancedDialogApply,
+    state: state.advancedFilterState,
+    getData: getAdvancedData,
+    errorHandler: errorHandler,
+    dataItems: dataItems,
+    isMobile: isMobile
+  }), [uiState.isOpenAdvancedFilter, handleAdvancedDialogClose, handleAdvancedDialogApply, dataItems, state.advancedFilterState, getAdvancedData, errorHandler, isMobile]);
+  (0, react_1.useEffect)(() => {
+    if (!state.globalChanges) {
+      return;
+    }
+    const newState = {
+      groups: (0, groupsFilterHelper_1.convertPreparedFilters)(state.frozenState),
+      sideWide: state.frozenSideWideState
     };
-    const handleAdvancedDialogOpen = (0, react_1.useCallback)(() => {
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetAdvancedFilterIsOpen, payload: true });
-    }, []);
-    const handleAdvancedDialogClose = (0, react_1.useCallback)(() => {
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetAdvancedFilterIsOpen, payload: false });
-    }, []);
-    const handleAdvancedDialogApply = (0, react_1.useCallback)((val) => {
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetAdvancedFilterIsOpen, payload: false });
-        dispatchState({ type: stateActionType_1.StateActionType.SetAdvancedFilterState, payload: val.items.length ? val : (0, groupsHelper_1.getDefaultFilterState)() });
-    }, []);
-    const getAdvancedData = (0, react_1.useCallback)((_, searchValue) => dataLoader().then(data => (searchValue ? data.filter(el => (el.name || el.id).toLocaleLowerCase().indexOf(searchValue.toLocaleLowerCase()) > -1) : data)).catch((e) => {
-        errorHandler(e);
-        return [];
-    }), [dataLoader, errorHandler]);
-    (0, react_1.useEffect)(() => {
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetLoadWithError, payload: false });
-        dataLoader().then(groups => {
-            dispatchState({ type: stateActionType_1.StateActionType.CreateGroupsMap, payload: groups });
-            setDataItems(groups);
-        }).catch((e) => {
-            dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetLoadWithError, payload: true });
-            errorHandler(e);
-        });
-    }, [dataLoader, errorHandler]);
-    (0, react_1.useEffect)(() => {
-        const step = uiState.step;
-        if (step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected) {
-            return;
-        }
-        const groupsBlocks = (0, groupsFilterAdvancedValue_1.getAdvancedFilterValue)({
-            blocks: blocksMap[uiState.step],
-            state,
-            isWithColor: isWithColor || false,
-            uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [],
-            uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined,
-            listLimit
-        });
-        const label = (0, groupsFilterAdvancedValue_1.getAdvancedLabel)({ groupsBlocks });
-        const selectedValues = dataItems.filter((item) => { var _a; return (_a = state.frozenState.simpleFilterState) === null || _a === void 0 ? void 0 : _a.find((id) => id === item.id); }).map((item) => item.name);
-        const selectedValuesLabel = selectedValues.join(` ${translate(state.frozenState.relation)} `);
-        if (!label && !selectedValuesLabel) {
-            setGroupPlaceHolder((options === null || options === void 0 ? void 0 : options.placeholder) || translate("Groups"));
-            return;
-        }
-        const separator = `${label && selectedValuesLabel ? ` ${translate(state.frozenState.relation)} ` : ""}`;
-        setGroupPlaceHolder(`${label}${separator}${selectedValuesLabel}`);
-    }, [uiState.searchValue, uiState.step, blocksMap, state, isWithColor, listLimit, uiState.currentAdjustmentId,
-        uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState, dataItems, options === null || options === void 0 ? void 0 : options.placeholder, translate]);
-    const getGroupsBox = (0, react_1.useCallback)(() => (0, jsx_runtime_1.jsx)(groupsFilterBox_1.GroupsFilterBox, { step: uiState.step, currentId: uiState.currentAdjustmentId, isWithColor: isWithColor || false, state: state, search: uiState.searchValue, blocks: uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial ? [] : blocksMap[uiState.step], onChange: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? handleCheckboxItemAdjustmentClick : handleCheckboxChange, onClick: handleCheckboxItemClick, uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [], uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined, listLimit: listLimit }), [blocksMap, handleCheckboxChange, handleCheckboxItemAdjustmentClick, handleCheckboxItemClick, isWithColor, listLimit, state, uiState.currentAdjustmentId, uiState.searchValue, uiState.step,
-        uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState]);
-    const onSideWideChange = (newState) => { dispatchState({ type: stateActionType_1.StateActionType.SideWide, payload: newState }); };
-    const onRelationChange = (newRelation) => { dispatchState({ type: stateActionType_1.StateActionType.Relation, payload: newRelation }); };
-    const getSearchResult = (0, react_1.useCallback)(() => {
-        const result = (0, stateReducerHelper_1.getSearchResultFromObject)(state, uiState.searchValue);
-        return result ? (result.builtInGroups.length + result.userGroups.length).toString() : "0";
-    }, [state, uiState.searchValue]);
-    const getAdvancedDialog = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(advancedGroupsFilter_1.AdvancedGroupsFilter, { isOpen: uiState.isOpenAdvancedFilter, onClose: handleAdvancedDialogClose, onApply: handleAdvancedDialogApply, state: state.advancedFilterState, getData: getAdvancedData, errorHandler: errorHandler, dataItems: dataItems, isMobile: isMobile }), [uiState.isOpenAdvancedFilter, handleAdvancedDialogClose, handleAdvancedDialogApply, dataItems, state.advancedFilterState, getAdvancedData, errorHandler, isMobile]);
-    (0, react_1.useEffect)(() => {
-        if (!state.globalChanges) {
-            return;
-        }
-        const newState = {
-            groups: (0, groupsFilterHelper_1.convertPreparedFilters)(state.frozenState),
-            sideWide: state.frozenSideWideState
-        };
-        if ((initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide) === state.frozenSideWideState && (0, groupsFilterHelper_1.comparePreparedFilters)((0, groupsFilterHelper_1.prepareFilters)(initialFilterStateInner.groups), state.frozenState)) {
-            return;
-        }
-        const selectedValues = dataItems.filter(item => { var _a; return (_a = state.frozenState.simpleFilterState) === null || _a === void 0 ? void 0 : _a.find(id => id === item.id); }).map(item => item.name);
-        setGroupPlaceHolder(selectedValues.length > 0 ? selectedValues.join(", ") : translate("Groups"));
-        onChangeInner(Object.assign({}, newState));
-        dispatchState({ type: stateActionType_1.StateActionType.TurnOfGlobalChanges, payload: undefined });
-    }, [state.globalChanges, dataItems, translate, state.frozenState, state.frozenSideWideState, onChangeInner, initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide, initialFilterStateInner]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (((_a = prevInitialState.current) === null || _a === void 0 ? void 0 : _a.sideWide) === (initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide)
-            && (0, groupsFilterHelper_1.comparePreparedFilters)((0, groupsFilterHelper_1.prepareFilters)(initialFilterStateInner ? initialFilterStateInner.groups : (0, groupsHelper_1.getDefaultFilterState)()), (0, groupsFilterHelper_1.prepareFilters)(prevInitialState.current ? prevInitialState.current.groups : (0, groupsHelper_1.getDefaultFilterState)()))) {
-            return;
-        }
-        const stateForDispatch = (initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.groups) ?
-            { value: (0, groupsFilterHelper_1.prepareFilters)(initialFilterStateInner.groups), global: initialFilterStateInner.sideWide } : { value: (0, groupsFilterHelper_1.prepareFilters)((0, groupsHelper_1.getDefaultFilterState)()), global: false };
-        if (Object.keys(state.groupsMap).length > 0) {
-            prevInitialState.current = initialFilterStateInner ? Object.assign({}, initialFilterStateInner) : undefined;
-            dispatchState({ type: stateActionType_1.StateActionType.CreateInitialState, payload: stateForDispatch });
-            !(initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.groups) && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetStep, payload: groupsFilterInterfaces_1.FilterMenuStep.Initial });
-        }
-    }, [initialFilterStateInner, state.groupsMap]);
-    const handleReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
-        var _a, _b, _c;
-        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
-            return;
-        }
-        if (!isCurrentOpen) {
-            (_b = emptyInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-            return;
-        }
-        (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
-    }, [inputRef]);
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c, _d;
-        if (!uiState.isOpen) {
-            return;
-        }
-        if (uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial || uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && uiState.searchValue === ""
-            && prevSearchField.current !== uiState.searchValue) {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            prevSearchField.current = uiState.searchValue;
-        }
-        else {
-            const firstFocusable = chip ? (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)[1] : (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
-            prevSearchField.current = "";
-            if (firstFocusable && !((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value)) {
-                firstFocusable.focus();
-            }
-        }
-    }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep, chip]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        uiState.isOpen && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-    }, [inputRef, uiState.isOpen]);
-    (0, react_1.useEffect)(() => {
-        if (!uiState.isOpen && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, groupsFilterHelper_1.isFilterHasSelection)(state.frozenState)) {
-            dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetStep, payload: groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected });
-        }
-    }, [uiState.isOpen, state.frozenState, uiState.step]);
-    function handleEscape(e) {
-        var _a;
-        if (e && uiState.isOpen) {
-            (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.stopImmediatePropagation();
-        }
-        if (uiState.isOpenAdvancedFilter) {
-            handleAdvancedDialogClose();
-            return;
-        }
-        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
-        if (triggerRef.current) {
-            triggerRef.current.focus();
-        }
+    if ((initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide) === state.frozenSideWideState && (0, groupsFilterHelper_1.comparePreparedFilters)((0, groupsFilterHelper_1.prepareFilters)(initialFilterStateInner.groups), state.frozenState)) {
+      return;
+    }
+    const selectedValues = dataItems.filter(item => {
+      var _a;
+      return (_a = state.frozenState.simpleFilterState) === null || _a === void 0 ? void 0 : _a.find(id => id === item.id);
+    }).map(item => item.name);
+    setGroupPlaceHolder(selectedValues.length > 0 ? selectedValues.join(", ") : translate("Groups"));
+    onChangeInner(Object.assign({}, newState));
+    dispatchState({
+      type: stateActionType_1.StateActionType.TurnOfGlobalChanges,
+      payload: undefined
+    });
+  }, [state.globalChanges, dataItems, translate, state.frozenState, state.frozenSideWideState, onChangeInner, initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide, initialFilterStateInner]);
+  (0, react_1.useEffect)(() => {
+    var _a;
+    if (((_a = prevInitialState.current) === null || _a === void 0 ? void 0 : _a.sideWide) === (initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide) && (0, groupsFilterHelper_1.comparePreparedFilters)((0, groupsFilterHelper_1.prepareFilters)(initialFilterStateInner ? initialFilterStateInner.groups : (0, groupsHelper_1.getDefaultFilterState)()), (0, groupsFilterHelper_1.prepareFilters)(prevInitialState.current ? prevInitialState.current.groups : (0, groupsHelper_1.getDefaultFilterState)()))) {
+      return;
+    }
+    const stateForDispatch = (initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.groups) ? {
+      value: (0, groupsFilterHelper_1.prepareFilters)(initialFilterStateInner.groups),
+      global: initialFilterStateInner.sideWide
+    } : {
+      value: (0, groupsFilterHelper_1.prepareFilters)((0, groupsHelper_1.getDefaultFilterState)()),
+      global: false
+    };
+    if (Object.keys(state.groupsMap).length > 0) {
+      prevInitialState.current = initialFilterStateInner ? Object.assign({}, initialFilterStateInner) : undefined;
+      dispatchState({
+        type: stateActionType_1.StateActionType.CreateInitialState,
+        payload: stateForDispatch
+      });
+      !(initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.groups) && dispatchUiState({
+        type: uiStateActionType_1.UiStateActionType.SetStep,
+        payload: groupsFilterInterfaces_1.FilterMenuStep.Initial
+      });
+    }
+  }, [initialFilterStateInner, state.groupsMap]);
+  const handleReadyForFocus = (0, react_1.useCallback)(isCurrentOpen => {
+    var _a, _b, _c;
+    if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+      return;
+    }
+    if (!isCurrentOpen) {
+      (_b = emptyInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+      return;
+    }
+    (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+  }, [inputRef]);
+  (0, react_1.useEffect)(() => {
+    var _a, _b, _c, _d;
+    if (!uiState.isOpen) {
+      return;
+    }
+    if (uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial || uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && uiState.searchValue === "" && prevSearchField.current !== uiState.searchValue) {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      prevSearchField.current = uiState.searchValue;
+    } else {
+      const firstFocusable = chip ? (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)[1] : (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+      prevSearchField.current = "";
+      if (firstFocusable && !((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value)) {
+        firstFocusable.focus();
+      }
+    }
+  }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep, chip]);
+  (0, react_1.useEffect)(() => {
+    var _a;
+    uiState.isOpen && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+  }, [inputRef, uiState.isOpen]);
+  (0, react_1.useEffect)(() => {
+    if (!uiState.isOpen && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, groupsFilterHelper_1.isFilterHasSelection)(state.frozenState)) {
+      dispatchUiState({
+        type: uiStateActionType_1.UiStateActionType.SetStep,
+        payload: groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected
+      });
+    }
+  }, [uiState.isOpen, state.frozenState, uiState.step]);
+  function handleEscape(e) {
+    var _a;
+    if (e && uiState.isOpen) {
+      (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.stopImmediatePropagation();
+    }
+    if (uiState.isOpenAdvancedFilter) {
+      handleAdvancedDialogClose();
+      return;
     }
-    (0, useEscape_1.useEscape)(triggerRef, handleEscape, uiState.isOpen);
-    const selectedCount = (0, stateReducerHelper_1.getFrozenCount)(state);
-    const isStateHasData = Object.keys(state.groupsMap).length > 0;
-    const isApplyDisabled = !(0, stateReducerHelper_1.isStateChanged)(state);
-    const memoizedContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-groups-filter-menu", isMobile ? "zen-groups-filter-menu--mobile" : ""]), ref: menuRef, children: [(chip || isMobile) ? (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__input-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-groups-filter__chip-input", onChange: onSearchChipChange, value: uiState.searchValue, ref: inputRef, id: groupsFilterId, placeholder: translate("Filter by group") }) }) : null, isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: isApplyDisabled, hasFooter: !isMobile, children: [uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, jsx_runtime_1.jsx)(groupsFilterInitialState_1.GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Adjustment && (0, jsx_runtime_1.jsx)(groupsFilterAdjustmentState_1.GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: (0, groupsFilterStatesHelper_1.getBackButtonName)(state, uiState.currentAdjustmentId), isAllSelected: (0, groupsFilterStatesHelper_1.isAllChildrenSelected)(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && (0, jsx_runtime_1.jsx)(groupsFilterCurrentlySelectedState_1.GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !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]);
-    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, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled, className: "zen-groups-filter-menu__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleCancel, className: "zen-groups-filter-menu__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, className: "zen-groups-filter-menu__reset-button zen-ellipsis", onClick: handleReset, children: translate("Clear") })] }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: translate("Organization groups filter"), triggerRef: triggerRef, isOpen: uiState.isOpen, onHidePanel: onOptionsToggle, onCloseClick: onOptionsToggle, preventFirstFocus: true, onReadyForFocus: handleReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: translate("Filter by group") }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedFooterButtons })] }), [translate, uiState.isOpen, onOptionsToggle, handleReadyForFocus, memoizedContent, memoizedFooterButtons]);
-    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: uiState.isOpen, className: (0, classNames_1.classNames)(["zen-groups-filter__popup",
-            uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: memoizedContent }), [className, memoizedContent, onOptionsToggle, translate, uiState.isOpen, uiState.isOpenAdvancedFilter]);
-    const triggerClassName = (0, classNames_1.classNames)(["zen-groups-filter-trigger", isError ? "zen-groups-filter-trigger--error" : ""]);
-    if (isReadOnly) {
-        // TODO: how many items should we show?
-        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: groupPlaceHolder });
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.SetIsOpen,
+      payload: false
+    });
+    if (triggerRef.current) {
+      triggerRef.current.focus();
     }
-    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, isOpen: uiState.isOpen, disabled: false, onClick: handleTriggerClick, onClose: selectedCount ? handleChipClose : undefined, triggerRef: triggerRef, icon: chipIcon, id: chipId, children: groupPlaceHolder !== translate("Groups") ? groupPlaceHolder : chipName })
-                : (0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, { value: uiState.searchValue, className: triggerClassName, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: isMobile ? emptyInputRef : inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: groupPlaceHolder }), isMobile ? memoizedMobileView : memoizedDesktopView, uiState.isOpenAdvancedFilter && getAdvancedDialog] });
+  }
+  (0, useEscape_1.useEscape)(triggerRef, handleEscape, uiState.isOpen);
+  const selectedCount = (0, stateReducerHelper_1.getFrozenCount)(state);
+  const isStateHasData = Object.keys(state.groupsMap).length > 0;
+  const isApplyDisabled = !(0, stateReducerHelper_1.isStateChanged)(state);
+  const memoizedContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-groups-filter-menu", isMobile ? "zen-groups-filter-menu--mobile" : ""]),
+    ref: menuRef,
+    children: [chip || isMobile ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-groups-filter__input-container",
+      children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, {
+        className: "zen-groups-filter__chip-input",
+        onChange: onSearchChipChange,
+        value: uiState.searchValue,
+        ref: inputRef,
+        id: groupsFilterId,
+        placeholder: translate("Filter by group")
+      })
+    }) : null, isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, {
+      onCancelClick: handleCancel,
+      onApplyClick: handleApply,
+      onResetClick: handleReset,
+      isApplyDisabled: isApplyDisabled,
+      hasFooter: !isMobile,
+      children: [uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, jsx_runtime_1.jsx)(groupsFilterInitialState_1.GroupsFilterInitialState, {
+        siteWideState: state.sideWideState,
+        onDialogButtonClick: handleAdvancedDialogOpen,
+        count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state),
+        onSiteWideChange: onSideWideChange,
+        onCurrentlySelectedClick: handleCurrentlySelectedClick,
+        searchResult: uiState.searchValue ? getSearchResult() : "",
+        children: getGroupsBox()
+      }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Adjustment && (0, jsx_runtime_1.jsx)(groupsFilterAdjustmentState_1.GroupsFilterAdjustmentState, {
+        onBackButtonClick: handleBackButtonClick,
+        onHomeButtonClick: handleHomeButtonClick,
+        onSelectAllClick: selectAllHandler,
+        backButtonName: (0, groupsFilterStatesHelper_1.getBackButtonName)(state, uiState.currentAdjustmentId),
+        isAllSelected: (0, groupsFilterStatesHelper_1.isAllChildrenSelected)(state, uiState.currentAdjustmentId),
+        children: getGroupsBox()
+      }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && (0, jsx_runtime_1.jsx)(groupsFilterCurrentlySelectedState_1.GroupsFilterCurrentlySelectedState, {
+        siteWideState: state.sideWideState,
+        relation: state.relation,
+        count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state),
+        onBackButtonClick: basicHandleBackButtonClick,
+        onSiteWideChange: onSideWideChange,
+        onRelationChange: onRelationChange,
+        children: getGroupsBox()
+      })]
+    }), !uiState.isLoadWithError && !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]);
+  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,
+      type: buttonType_1.ButtonType.Primary,
+      disabled: isApplyDisabled,
+      className: "zen-groups-filter-menu__apply-button zen-ellipsis",
+      title: translate("Apply"),
+      children: translate("Apply")
+    }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+      onClick: handleCancel,
+      className: "zen-groups-filter-menu__cancel-button zen-ellipsis",
+      title: translate("Cancel"),
+      children: translate("Cancel")
+    }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+      type: buttonType_1.ButtonType.Tertiary,
+      className: "zen-groups-filter-menu__reset-button zen-ellipsis",
+      onClick: handleReset,
+      children: translate("Clear")
+    })]
+  }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
+  const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, {
+    label: translate("Organization groups filter"),
+    triggerRef: triggerRef,
+    isOpen: uiState.isOpen,
+    onHidePanel: onOptionsToggle,
+    onCloseClick: onOptionsToggle,
+    preventFirstFocus: true,
+    onReadyForFocus: handleReadyForFocus,
+    children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, {
+      children: translate("Filter by group")
+    }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, {
+      children: memoizedContent
+    }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, {
+      children: memoizedFooterButtons
+    })]
+  }), [translate, uiState.isOpen, onOptionsToggle, handleReadyForFocus, memoizedContent, memoizedFooterButtons]);
+  const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, {
+    isOpen: uiState.isOpen,
+    className: (0, classNames_1.classNames)(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", classNamePopup || ""]),
+    onOpenChange: onOptionsToggle,
+    useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger",
+    shouldHoldScroll: true,
+    triggerRef: triggerRef,
+    ariaLabel: translate("Organization groups filter"),
+    recalculateOnScroll: true,
+    children: memoizedContent
+  }), [classNamePopup, memoizedContent, onOptionsToggle, translate, uiState.isOpen, uiState.isOpenAdvancedFilter]);
+  const triggerClassName = (0, classNames_1.classNames)(["zen-groups-filter-trigger", isError ? "zen-groups-filter-trigger--error" : "", className || ""]);
+  if (isReadOnly) {
+    // TODO: how many items should we show?
+    return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, {
+      value: groupPlaceHolder
+    });
+  }
+  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,
+      isOpen: uiState.isOpen,
+      disabled: false,
+      onClick: handleTriggerClick,
+      onClose: selectedCount ? handleChipClose : undefined,
+      triggerRef: triggerRef,
+      icon: chipIcon,
+      id: chipId,
+      children: groupPlaceHolder !== translate("Groups") ? groupPlaceHolder : chipName
+    }) : (0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, {
+      value: uiState.searchValue,
+      className: triggerClassName,
+      onChange: onSearchChange,
+      isOpenPopup: uiState.isOpen,
+      count: selectedCount,
+      withGlobeIcon: state.frozenSideWideState && selectedCount > 0,
+      inputRef: isMobile ? emptyInputRef : inputRef,
+      handleClick: handleTriggerClick,
+      ref: triggerRef,
+      fullSize: fullSize,
+      placeholder: groupPlaceHolder
+    }), isMobile ? memoizedMobileView : memoizedDesktopView, uiState.isOpenAdvancedFilter && getAdvancedDialog]
+  });
 };
 exports.GroupsFilterRaw = GroupsFilterRaw;
-exports.TRANSLATIONS = [
-    "Organization groups filter",
-    ...groupsFilterMenu_1.TRANSLATIONS,
-    ...groupsFilterTrigger_1.TRANSLATIONS,
-    ...groupsFilterAdjustmentState_1.TRANSLATIONS,
-    ...groupsFilterInitialState_1.TRANSLATIONS,
-    ...groupsFilterCurrentlySelectedState_1.TRANSLATIONS
-];
+exports.TRANSLATIONS = ["Organization groups filter", ...groupsFilterMenu_1.TRANSLATIONS, ...groupsFilterTrigger_1.TRANSLATIONS, ...groupsFilterAdjustmentState_1.TRANSLATIONS, ...groupsFilterInitialState_1.TRANSLATIONS, ...groupsFilterCurrentlySelectedState_1.TRANSLATIONS];