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

package/esm/dropdownRaw/dropdownRaw.js

@@ -1,9 +1,10 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable complexity */
 import { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { DropdownList, EmptyList } from "./dropdownList";
-import { getInitialState, stateReducer } from "./stateReducer/stateReducer";
+import { getInitialState, stateReducer, ROOT_GROUP_ID } from "./stateReducer/stateReducer";
 import { StateActionType } from "./stateReducer/stateActionType";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { useEscape } from "../commonHelpers/hooks/useEscape";
@@ -19,519 +20,873 @@ import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
 import { getSelectedValues } from "./utils/getSelectedValues";
 import { Chip } from "../chip/chip";
 import { useChipStatus } from "../chip/chipStatusProvider";
-import { ENTIRE_ORGANIZATION_GROUP_ID, getGroupDescription } from "../groupsFilterRaw/groupsHelper";
+import { getGroupDescription } from "../groupsFilterRaw/groupsHelper";
 import { isFormItem } from "../commonHelpers/isFormItem";
 import { useFormField } from "../commonHelpers/hooks/useFormField";
 import { getAriaAttributes } from "../commonHelpers/getAriaAttributes";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
 import { FormSectionContext } from "../formSection/utils/formSectionProvider";
 import { LIST_LIMIT } from "../dropdown/dropdown";
-export const DropdownRaw = (props) => {
-    var _a, _b;
-    const { className, classNamePopup, getData, errorHandler, dataItems, onChange, defaultValue, placeholder, dialogAriaLabel, width, isLoading, title, triggerAriaLabel, inputId, filterName, showCounterPill = true, showSelection, fullWidthTriggerButton, hasApplyButton, searchField = true, multiselect = true, forceSelection = false, selectAllButton = true, getNamedItems, getSelectedItem, buttonType = "secondary", listLimit = LIST_LIMIT, alignment = "bottom-left", isReadOnly, sortFn, checkboxLabel, chip, chipId, chipName, chipIcon, setChecked, setSearch, fetchState, isLoadingError, mobileSheetStackingClassName } = props;
-    const { isFormSection } = useContext(FormSectionContext);
-    const accessibilityProps = getAriaAttributes(props);
-    const isFormItemVal = isFormItem(props);
-    const { field } = useFormField(props.controller);
-    const { name, value = [], disabled, onBlur } = useFormFieldValues(props.controller, props);
-    let onChangeInner, defaultValueInner;
-    if (isFormItemVal) {
-        onChangeInner = (val) => {
-            field === null || field === void 0 ? void 0 : field.onChange(val.map((item) => item.id));
-        };
-        defaultValueInner = ((_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue) || [];
-    }
-    else {
-        onChangeInner = onChange;
-        defaultValueInner = defaultValue;
-    }
-    const isFullSelectionMode = useMemo(() => typeof value === "object" &&
-        "selected" in value &&
-        Array.isArray(value.selected) &&
-        "isAllSelected" in value &&
-        typeof (value === null || value === void 0 ? void 0 : value.isAllSelected) === "boolean", [value]);
-    const isQueryMode = useMemo(() => typeof getData === "undefined" && typeof dataItems === "undefined", [getData, dataItems]);
-    const isCheckboxMode = useMemo(() => checkboxLabel && typeof value === "object" && "isChecked" in value && typeof value.isChecked === "boolean" || false, [checkboxLabel, value]);
-    const [initialInChecked] = useState(isCheckboxMode ? value.isChecked : undefined);
-    const [state, dispatchState] = useReducer(stateReducer, getInitialState(isFullSelectionMode, isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : dataItems || [], isFullSelectionMode || isCheckboxMode ? value.selected : value, listLimit, defaultValue ? (isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue) : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? (isFullSelectionMode ? defaultValue.isAllSelected : undefined) : undefined, isCheckboxMode ? value.isChecked : undefined, isCheckboxMode && defaultValue ? defaultValue.isChecked : undefined));
-    const chipStatus = useChipStatus();
-    const isMobile = useMobile();
-    const abortToken = useRef(new AbortController());
-    const triggerRef = useRef(null);
-    const comboboxRef = useRef(null);
-    const inputRef = useRef(null);
-    const contentRef = useRef(null);
-    const prevSelectedIds = useRef({ selected: [], isAllSelected: undefined, isChecked: initialInChecked });
-    const prevSelection = useRef({ selected: [], isAllSelected: undefined, isChecked: initialInChecked });
-    const { translate } = useLanguage();
-    const getNamedItemsHasBeenCalled = useRef(false);
-    const selectedItemsLoader = useRef(undefined);
-    const previousMapDataItems = useRef(isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : (!getData && (dataItems === null || dataItems === void 0 ? void 0 : dataItems.length) ? dataItems : []));
-    const prevIsLoading = useRef(isLoading);
-    const prevIsChecked = useRef(isCheckboxMode ? value.isChecked : undefined);
-    const currentAllSelected = useMemo(() => (state.isNestedList || !multiselect || !isFullSelectionMode)
-        ? undefined : state.isAllSelected, [state.isNestedList, state.isAllSelected, multiselect, isFullSelectionMode]);
-    const currentIsChecked = useMemo(() => isCheckboxMode ?
-        value.isChecked : undefined, [isCheckboxMode, value]);
-    useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            if (Object.keys(state.groupsMap).length === 0 && getData) {
-                const currentAbort = abortToken.current;
-                (initialInChecked !== undefined ? getData(currentAbort.signal, undefined, initialInChecked) : getData(currentAbort.signal, undefined)).then((dta) => {
-                    dta.length && dispatchState({ type: StateActionType.CreateMap, payload: dta });
-                    previousMapDataItems.current = [...dta];
-                }).catch(errorHandler);
-            }
-        });
-        return () => clearTimeout(timeoutId);
-    }, [getData, errorHandler, state.groupsMap, initialInChecked]);
-    useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            if (!getData && dataItems && dataItems.length && !compareObjectsArrays(dataItems, previousMapDataItems.current)) {
-                dispatchState({ type: StateActionType.CreateMap, payload: dataItems });
-                previousMapDataItems.current = [...dataItems];
-            }
-        });
-        return () => clearTimeout(timeoutId);
-    }, [dataItems, getData, state.groupsMap]);
-    useEffect(() => {
-        if (prevIsLoading.current !== isLoading && Object.keys(state.groupsMap).length !== 0) {
-            isLoading === false && dispatchState({ type: StateActionType.ShowList, payload: undefined });
-            prevIsLoading.current = isLoading;
-        }
-    }, [isLoading, dataItems, state.groupsMap]);
-    useEffect(() => {
-        const defaultSelectedValue = defaultValue ? (isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue) : [];
-        const defaultAllSelectedValue = defaultValue ? (isFullSelectionMode ? defaultValue.isAllSelected : undefined)
-            : (isFullSelectionMode ? false : undefined);
-        const defaultIsCheckedValue = defaultValue ?
-            (isCheckboxMode ? defaultValue.isChecked || false : undefined)
-            : (isCheckboxMode ? false : undefined);
-        if (defaultIsCheckedValue !== state.defaultValueIsChecked) {
-            defaultIsCheckedValue !== undefined && dispatchState({ type: StateActionType.SetDefaultIsChecked, payload: defaultIsCheckedValue });
-        }
-        if (compareStringsArrays(defaultSelectedValue, state.defaultValue) && defaultAllSelectedValue === state.defaultValueIsAllSelected) {
-            return;
-        }
-        dispatchState({ type: StateActionType.SetDefaultValue, payload: defaultSelectedValue });
-        isFullSelectionMode && defaultAllSelectedValue !== state.defaultValueIsAllSelected
-            && dispatchState({ type: StateActionType.SetDefaultAllSelected, payload: defaultAllSelectedValue });
-    }, [defaultValue, defaultValueInner, isCheckboxMode, isFullSelectionMode, state.defaultValue, state.defaultValueIsAllSelected, state.defaultValueIsChecked]);
-    const loadSelectedItems = useCallback((ids) => {
-        if (!getSelectedItem || !ids.size) {
-            return;
-        }
-        const promises = [];
-        Array.from(ids).forEach((id, ind) => {
-            if (ind > 99) {
-                return;
-            }
-            const itemOrPromise = getSelectedItem(id);
-            promises.push(Promise.resolve(itemOrPromise));
-        });
-        // eslint-disable-next-line consistent-return
-        return Promise.all(promises).then((items) => {
-            const result = items.filter(el => el !== undefined);
-            dispatchState({ type: StateActionType.UpdateSelectedItems, payload: result });
-            getNamedItemsHasBeenCalled.current = false;
-        }).catch(() => {
-            dispatchState({ type: StateActionType.UpdateSelectedItems, payload: [] });
+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");
+export const DropdownRaw = props => {
+  var _a, _b;
+  const {
+    className,
+    classNamePopup,
+    getData,
+    errorHandler,
+    dataItems,
+    onChange,
+    defaultValue,
+    placeholder,
+    dialogAriaLabel,
+    width,
+    isLoading,
+    title,
+    triggerAriaLabel,
+    inputId,
+    filterName,
+    showCounterPill = true,
+    showSelection,
+    fullWidthTriggerButton,
+    hasApplyButton,
+    searchField = true,
+    multiselect = true,
+    forceSelection = false,
+    selectAllButton = true,
+    getNamedItems,
+    getSelectedItem,
+    buttonType = "secondary",
+    listLimit = LIST_LIMIT,
+    alignment = "bottom-left",
+    isReadOnly,
+    sortFn,
+    checkboxLabel,
+    chip,
+    chipId,
+    chipName,
+    chipIcon,
+    setChecked,
+    setSearch,
+    fetchState,
+    isLoadingError,
+    mobileSheetStackingClassName,
+    isError,
+    firstParentNodeIsVisible
+  } = props;
+  const {
+    isFormSection
+  } = useContext(FormSectionContext);
+  const accessibilityProps = getAriaAttributes(props);
+  const isFormItemVal = isFormItem(props);
+  const {
+    field
+  } = useFormField(props.controller);
+  const {
+    name,
+    value = [],
+    disabled,
+    onBlur
+  } = useFormFieldValues(props.controller, props);
+  let onChangeInner, defaultValueInner;
+  if (isFormItemVal) {
+    onChangeInner = val => {
+      field === null || field === void 0 ? void 0 : field.onChange(val.map(item => item.id));
+    };
+    defaultValueInner = ((_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue) || [];
+  } else {
+    onChangeInner = onChange;
+    defaultValueInner = defaultValue;
+  }
+  const isFullSelectionMode = useMemo(() => typeof value === "object" && "selected" in value && Array.isArray(value.selected) && "isAllSelected" in value && typeof (value === null || value === void 0 ? void 0 : value.isAllSelected) === "boolean", [value]);
+  const isQueryMode = useMemo(() => typeof getData === "undefined" && typeof dataItems === "undefined", [getData, dataItems]);
+  const isCheckboxMode = useMemo(() => checkboxLabel && typeof value === "object" && "isChecked" in value && typeof value.isChecked === "boolean" || false, [checkboxLabel, value]);
+  const [initialInChecked] = useState(isCheckboxMode ? value.isChecked : undefined);
+  const [state, dispatchState] = useReducer(stateReducer, getInitialState(isFullSelectionMode, isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : dataItems || [], isFullSelectionMode || isCheckboxMode ? value.selected : value, listLimit, defaultValue ? isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? isFullSelectionMode ? defaultValue.isAllSelected : undefined : undefined, isCheckboxMode ? value.isChecked : undefined, isCheckboxMode && defaultValue ? defaultValue.isChecked : undefined, firstParentNodeIsVisible));
+  const chipStatus = useChipStatus();
+  const isMobile = useMobile();
+  const abortToken = useRef(new AbortController());
+  const triggerRef = useRef(null);
+  const comboboxRef = useRef(null);
+  const inputRef = useRef(null);
+  const contentRef = useRef(null);
+  const prevSelectedIds = useRef({
+    selected: [],
+    isAllSelected: undefined,
+    isChecked: initialInChecked
+  });
+  const prevSelection = useRef({
+    selected: [],
+    isAllSelected: undefined,
+    isChecked: initialInChecked
+  });
+  const {
+    translate
+  } = useLanguage();
+  const getNamedItemsHasBeenCalled = useRef(false);
+  const selectedItemsLoader = useRef(undefined);
+  const previousMapDataItems = useRef(isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : !getData && (dataItems === null || dataItems === void 0 ? void 0 : dataItems.length) ? dataItems : []);
+  const prevIsLoading = useRef(isLoading);
+  const prevIsChecked = useRef(isCheckboxMode ? value.isChecked : undefined);
+  const currentAllSelected = useMemo(() => state.isNestedList || !multiselect || !isFullSelectionMode ? undefined : state.isAllSelected, [state.isNestedList, state.isAllSelected, multiselect, isFullSelectionMode]);
+  const currentIsChecked = useMemo(() => isCheckboxMode ? value.isChecked : undefined, [isCheckboxMode, value]);
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (Object.keys(state.groupsMap).length === 0 && getData) {
+        const currentAbort = abortToken.current;
+        (initialInChecked !== undefined ? getData(currentAbort.signal, undefined, initialInChecked) : getData(currentAbort.signal, undefined)).then(dta => {
+          dta.length && dispatchState({
+            type: StateActionType.CreateMap,
+            payload: dta
+          });
+          previousMapDataItems.current = [...dta];
+        }).catch(errorHandler);
+      }
+    });
+    return () => clearTimeout(timeoutId);
+  }, [getData, errorHandler, state.groupsMap, initialInChecked]);
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (!getData && dataItems && dataItems.length && !compareObjectsArrays(dataItems, previousMapDataItems.current)) {
+        dispatchState({
+          type: StateActionType.CreateMap,
+          payload: dataItems
         });
-    }, [getSelectedItem]);
-    useEffect(() => {
-        if (isLoadingError) {
-            dispatchState({ type: StateActionType.SetIsOpenCombo, payload: false });
-        }
-    }, [isLoadingError]);
-    useEffect(() => {
-        if (!getSelectedItem) {
-            return;
-        }
-        dispatchState({ type: StateActionType.UpdateNamelessItems, payload: undefined });
-    }, [getSelectedItem]);
-    useEffect(() => {
-        if (state.namelessIds.size === 0 || !getSelectedItem || state.pendingNamelessIds) {
-            return;
-        }
-        selectedItemsLoader.current = loadSelectedItems(state.namelessIds);
-        dispatchState({ type: StateActionType.SetPendingState, payload: true });
-    }, [getSelectedItem, loadSelectedItems, state.namelessIds, state.pendingNamelessIds]);
-    const handleChangeCurrentId = useCallback((id) => {
-        dispatchState({ type: StateActionType.SetCurrentId, payload: id });
-        dispatchState({ type: StateActionType.SetInputValue, payload: "" });
-        isQueryMode && setSearch && setSearch("");
-    }, [isQueryMode, setSearch]);
-    const handleBackButtonClick = useCallback(() => {
-        var _a, _b;
+        previousMapDataItems.current = [...dataItems];
+      }
+    });
+    return () => clearTimeout(timeoutId);
+  }, [dataItems, getData, state.groupsMap]);
+  useEffect(() => {
+    if (prevIsLoading.current !== isLoading && Object.keys(state.groupsMap).length !== 0) {
+      isLoading === false && dispatchState({
+        type: StateActionType.ShowList,
+        payload: undefined
+      });
+      prevIsLoading.current = isLoading;
+    }
+  }, [isLoading, dataItems, state.groupsMap]);
+  useEffect(() => {
+    const defaultSelectedValue = defaultValue ? isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue : [];
+    const defaultAllSelectedValue = defaultValue ? isFullSelectionMode ? defaultValue.isAllSelected : undefined : isFullSelectionMode ? false : undefined;
+    const defaultIsCheckedValue = defaultValue ? isCheckboxMode ? defaultValue.isChecked || false : undefined : isCheckboxMode ? false : undefined;
+    if (defaultIsCheckedValue !== state.defaultValueIsChecked) {
+      defaultIsCheckedValue !== undefined && dispatchState({
+        type: StateActionType.SetDefaultIsChecked,
+        payload: defaultIsCheckedValue
+      });
+    }
+    if (compareStringsArrays(defaultSelectedValue, state.defaultValue) && defaultAllSelectedValue === state.defaultValueIsAllSelected) {
+      return;
+    }
+    dispatchState({
+      type: StateActionType.SetDefaultValue,
+      payload: defaultSelectedValue
+    });
+    isFullSelectionMode && defaultAllSelectedValue !== state.defaultValueIsAllSelected && dispatchState({
+      type: StateActionType.SetDefaultAllSelected,
+      payload: defaultAllSelectedValue
+    });
+  }, [defaultValue, defaultValueInner, isCheckboxMode, isFullSelectionMode, state.defaultValue, state.defaultValueIsAllSelected, state.defaultValueIsChecked]);
+  const loadSelectedItems = useCallback(ids => {
+    if (!getSelectedItem || !ids.size) {
+      return;
+    }
+    const promises = [];
+    Array.from(ids).forEach((id, ind) => {
+      if (ind > 99) {
+        return;
+      }
+      const itemOrPromise = getSelectedItem(id);
+      promises.push(Promise.resolve(itemOrPromise));
+    });
+    // eslint-disable-next-line consistent-return
+    return Promise.all(promises).then(items => {
+      const result = items.filter(el => el !== undefined);
+      dispatchState({
+        type: StateActionType.UpdateSelectedItems,
+        payload: result
+      });
+      getNamedItemsHasBeenCalled.current = false;
+    }).catch(() => {
+      dispatchState({
+        type: StateActionType.UpdateSelectedItems,
+        payload: []
+      });
+    });
+  }, [getSelectedItem]);
+  useEffect(() => {
+    if (isLoadingError) {
+      dispatchState({
+        type: StateActionType.SetIsOpenCombo,
+        payload: false
+      });
+    }
+  }, [isLoadingError]);
+  useEffect(() => {
+    if (!getSelectedItem) {
+      return;
+    }
+    dispatchState({
+      type: StateActionType.UpdateNamelessItems,
+      payload: undefined
+    });
+  }, [getSelectedItem]);
+  useEffect(() => {
+    if (state.namelessIds.size === 0 || !getSelectedItem || state.pendingNamelessIds) {
+      return;
+    }
+    selectedItemsLoader.current = loadSelectedItems(state.namelessIds);
+    dispatchState({
+      type: StateActionType.SetPendingState,
+      payload: true
+    });
+  }, [getSelectedItem, loadSelectedItems, state.namelessIds, state.pendingNamelessIds]);
+  useEffect(() => {
+    dispatchState({
+      type: StateActionType.SetFirstParentNodeIsVisible,
+      payload: firstParentNodeIsVisible
+    });
+  }, [firstParentNodeIsVisible]);
+  const handleChangeCurrentId = useCallback(id => {
+    dispatchState({
+      type: StateActionType.SetCurrentId,
+      payload: id
+    });
+    dispatchState({
+      type: StateActionType.SetInputValue,
+      payload: ""
+    });
+    isQueryMode && setSearch && setSearch("");
+  }, [isQueryMode, setSearch]);
+  const handleBackButtonClick = useCallback(() => {
+    var _a, _b;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const newCurrentId = state.currentId ? (_b = (_a = state.groupsMap[state.currentId]) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.id : undefined;
+    dispatchState({
+      type: StateActionType.SetCurrentId,
+      payload: newCurrentId === state.rootId || state.inputValue ? undefined : newCurrentId
+    });
+  }, [state.currentId, state.groupsMap, state.inputValue, state.rootId]);
+  const handleSelect = useCallback(val => {
+    if (isFullSelectionMode && state.isAllSelected) {
+      dispatchState({
+        type: StateActionType.DeselectItemsFromAllSelected,
+        payload: val.id
+      });
+      return;
+    }
+    if (val.partial) {
+      dispatchState({
+        type: StateActionType.DeselectAllChildren,
+        payload: val.id
+      });
+    } else {
+      dispatchState({
+        type: StateActionType.ChangeSelection,
+        payload: {
+          value: val.state,
+          itemId: val.id
+        }
+      });
+    }
+  }, [isFullSelectionMode, state.isAllSelected]);
+  const handleClose = useCallback(() => {
+    dispatchState({
+      type: StateActionType.SetInputValue,
+      payload: ""
+    });
+    if (!triggerRef.current) {
+      return;
+    }
+    if (isFocusable(triggerRef.current)) {
+      triggerRef.current.focus();
+      return;
+    }
+    const focusable = [...Array.from(triggerRef.current.querySelectorAll(FOCUSABLE_SELECTOR))];
+    (focusable[0] || triggerRef.current).focus();
+  }, []);
+  const handleEscape = useCallback(() => {
+    dispatchState({
+      type: StateActionType.SetIsOpenCombo,
+      payload: false
+    });
+    dispatchState({
+      type: StateActionType.SetCurrentId,
+      payload: undefined
+    });
+    abortToken.current.abort();
+    abortToken.current = new AbortController();
+    handleClose();
+  }, [handleClose]);
+  const memoizedAllowClosing = useMemo(() => state.currentId === undefined || state.currentId === state.rootId, [state.currentId, state.rootId]);
+  const handleSingleSelection = useCallback((reset, selected) => {
+    const shouldBeClosed = !hasApplyButton && memoizedAllowClosing && (!reset && selected || reset);
+    dispatchState({
+      type: StateActionType.ChangeSingleSelection,
+      payload: {
+        value: selected,
+        reset: reset
+      }
+    });
+    shouldBeClosed && handleEscape();
+    shouldBeClosed && dispatchState({
+      type: StateActionType.SetInputValue,
+      payload: ""
+    });
+  }, [handleEscape, hasApplyButton, memoizedAllowClosing]);
+  const handleSelectAllClick = useCallback(isAllSelect => {
+    if (isFullSelectionMode) {
+      dispatchState({
+        type: StateActionType.ToggleValueForAllSelected,
+        payload: undefined
+      });
+      return;
+    }
+    dispatchState({
+      type: isAllSelect ? StateActionType.DeselectAllChildren : StateActionType.SelectAllChildren,
+      payload: state.currentId || state.rootId
+    });
+  }, [isFullSelectionMode, state.currentId, state.rootId]);
+  const handleSelectAllInSearch = useCallback(isAllSelect => {
+    if (isFullSelectionMode && state.isAllSelected) {
+      dispatchState({
+        type: StateActionType.DeselectItemsFromAllSelected,
+        payload: undefined
+      });
+      return;
+    }
+    const dataForChange = getDataForChange(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds, isAllSelect);
+    dispatchState({
+      type: StateActionType.ChangeBulkSelection,
+      payload: {
+        itemsIds: dataForChange,
+        value: !isAllSelect
+      }
+    });
+  }, [isFullSelectionMode, state.isAllSelected, state.listData, state.isNestedList, state.selectedIds]);
+  const handleClearClick = useCallback(() => {
+    dispatchState({
+      type: StateActionType.ResetSelection,
+      payload: undefined
+    });
+  }, []);
+  const handleCancelClick = useCallback(() => {
+    dispatchState({
+      type: StateActionType.ResetStateToGlobal,
+      payload: undefined
+    });
+    dispatchState({
+      type: StateActionType.SetIsOpenCombo,
+      payload: false
+    });
+    dispatchState({
+      type: StateActionType.SetCurrentId,
+      payload: undefined
+    });
+    abortToken.current.abort();
+    abortToken.current = new AbortController();
+    handleClose();
+  }, [handleClose]);
+  const handleApplyClick = useCallback(() => {
+    dispatchState({
+      type: StateActionType.SetGlobalState,
+      payload: Object.assign({
+        selected: state.selectedIds,
+        isAllSelected: state.isAllSelected
+      }, isCheckboxMode ? {
+        isChecked: state.isChecked
+      } : {})
+    });
+    dispatchState({
+      type: StateActionType.SetIsOpenCombo,
+      payload: false
+    });
+    dispatchState({
+      type: StateActionType.SetCurrentId,
+      payload: undefined
+    });
+    abortToken.current.abort();
+    abortToken.current = new AbortController();
+    handleClose();
+    dispatchState({
+      type: StateActionType.SetDataProblem,
+      payload: checkIsDataProblem(state.selectedIds, state.groupsMap)
+    });
+    const preparedItems = prepareSelectedIdsToItems(state.selectedIds, state.groupsMap, state.groupsMapSelected);
+    if (isFullSelectionMode) {
+      const newValue = isCheckboxMode ? {
+        selected: preparedItems,
+        isAllSelected: state.isAllSelected || false,
+        isChecked: state.isChecked
+      } : {
+        selected: preparedItems,
+        isAllSelected: state.isAllSelected || false
+      };
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    } else {
+      const newValue = isCheckboxMode ? {
+        selected: preparedItems,
+        isChecked: state.isChecked
+      } : preparedItems;
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }
+  }, [state.selectedIds, state.isAllSelected, state.isChecked, state.groupsMap, state.groupsMapSelected, isCheckboxMode, handleClose, isFullSelectionMode, onChange]);
+  const customGetData = useCallback(str => str && dataItems ? Promise.resolve(dataItems.filter(el => {
+    var _a;
+    return (((_a = el.name) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "").indexOf(str.trim().toLocaleLowerCase()) > -1;
+  })) : Promise.resolve(dataItems || []), [dataItems]);
+  const handleData = useCallback((dta, searchVal) => {
+    if (dta.length && !searchVal && (getData || dataItems || isQueryMode)) {
+      dispatchState({
+        type: StateActionType.CreateMap,
+        payload: dta
+      });
+      previousMapDataItems.current = [...dta];
+    }
+    dispatchState({
+      type: StateActionType.SetListData,
+      payload: dta
+    });
+    searchVal && dispatchState({
+      type: StateActionType.SetCurrentId,
+      payload: undefined
+    });
+    dta.length ? dispatchState({
+      type: StateActionType.ShowList,
+      payload: undefined
+    }) : dispatchState({
+      type: StateActionType.ShowEmptyList,
+      payload: undefined
+    });
+  }, [getData, dataItems, isQueryMode]);
+  const handleError = useCallback(e => {
+    errorHandler(e);
+    dispatchState({
+      type: StateActionType.NothingToShow,
+      payload: undefined
+    });
+  }, [errorHandler]);
+  const handleDataQuery = useCallback((dta, searchVal) => {
+    if (dta.length && !searchVal && !compareObjectsArrays(dta, previousMapDataItems.current)) {
+      dispatchState({
+        type: StateActionType.CreateMap,
+        payload: dta
+      });
+      previousMapDataItems.current = [...dta];
+    }
+    dispatchState({
+      type: StateActionType.SetListData,
+      payload: dta
+    });
+    searchVal && dispatchState({
+      type: StateActionType.SetCurrentId,
+      payload: undefined
+    });
+    dta.length ? dispatchState({
+      type: StateActionType.ShowList,
+      payload: undefined
+    }) : dispatchState({
+      type: StateActionType.ShowEmptyList,
+      payload: undefined
+    });
+  }, []);
+  const handleQueryMode = useCallback((searchValue, isChecked) => {
+    setChecked && isChecked !== undefined && setChecked(isChecked);
+    setSearch && setSearch(searchValue || "");
+  }, [setChecked, setSearch]);
+  const debouncedGetData = useDebounce((signal, searchValue, isChecked) => getData ? (isCheckboxMode ? getData(signal, searchValue, isChecked) : getData(signal, searchValue)).then(dta => handleData(dta, searchValue)).catch(handleError) : customGetData(searchValue).then(dta => handleData(dta, searchValue)).catch(handleError), 200);
+  const controlData = useCallback((signal, searchValue, isChecked) => {
+    !isQueryMode && dispatchState({
+      type: StateActionType.ShowWaiting,
+      payload: undefined
+    });
+    isQueryMode ? handleQueryMode(searchValue, isChecked) : debouncedGetData(signal, searchValue, isChecked);
+  }, [debouncedGetData, handleQueryMode, isQueryMode]);
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (!isQueryMode || (fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading)) {
+        return;
+      }
+      handleDataQuery((fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [], state.inputValue);
+    });
+    return () => clearTimeout(timeoutId);
+  }, [fetchState === null || fetchState === void 0 ? void 0 : fetchState.data, handleDataQuery, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, isQueryMode, state.inputValue]);
+  useEffect(() => {
+    // when change inside
+    if (hasApplyButton) {
+      return;
+    }
+    const prevIsCheckedValue = isCheckboxMode ? prevSelectedIds.current.isChecked : undefined;
+    if (compareStringsArrays(prevSelectedIds.current.selected, state.selectedIds) && prevSelectedIds.current.isAllSelected === state.isAllSelected && prevIsCheckedValue === state.isChecked) {
+      return;
+    }
+    prevSelectedIds.current = {
+      selected: state.selectedIds,
+      isAllSelected: state.isAllSelected,
+      isChecked: state.isChecked
+    };
+    if (compareStringsArrays(state.selectedIds, isFullSelectionMode || isCheckboxMode ? value.selected : value) && state.isAllSelected === (isFullSelectionMode ? value.isAllSelected : undefined) && state.isChecked === (isCheckboxMode ? value.isChecked : undefined)) {
+      return;
+    }
+    dispatchState({
+      type: StateActionType.SetDataProblem,
+      payload: checkIsDataProblem(state.selectedIds, state.groupsMap)
+    });
+    const preparedItems = prepareSelectedIdsToItems(state.selectedIds, state.groupsMap, state.groupsMapSelected);
+    if (isFullSelectionMode) {
+      const newValue = isCheckboxMode ? {
+        selected: preparedItems,
+        isAllSelected: state.isAllSelected || false,
+        isChecked: state.isChecked
+      } : {
+        selected: preparedItems,
+        isAllSelected: state.isAllSelected || false
+      };
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    } else {
+      const newValue = isCheckboxMode ? {
+        selected: preparedItems,
+        isChecked: state.isChecked
+      } : preparedItems;
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }
+    // eslint-disable-next-line max-len
+  }, [onChangeInner, value, state.selectedIds, state.groupsMapSelected, state.groupsMap, hasApplyButton, state.isAllSelected, isFullSelectionMode, state.isChecked, isCheckboxMode, onChange]);
+  useEffect(() => {
+    // when change outside
+    const selectedValue = isFullSelectionMode || isCheckboxMode ? value.selected : value;
+    const isAllSelectedValue = isFullSelectionMode ? value.isAllSelected : undefined;
+    const isCheckedValue = isCheckboxMode ? value.isChecked : undefined;
+    if (compareStringsArrays(prevSelection.current.selected, selectedValue) && isAllSelectedValue === prevSelection.current.isAllSelected && prevSelection.current.isChecked === isCheckedValue) {
+      return;
+    }
+    prevSelection.current = {
+      selected: selectedValue,
+      isAllSelected: isAllSelectedValue,
+      isChecked: isCheckedValue
+    };
+    if (compareStringsArrays(hasApplyButton ? state.globalSelectedIds : state.selectedIds, selectedValue) && isAllSelectedValue === (hasApplyButton ? state.globalIsAllSelected : state.isAllSelected) && isCheckedValue === (hasApplyButton ? state.globalIsChecked : state.isChecked)) {
+      return;
+    }
+    // prevSelectedIds.current = { selected: selectedValue, isAllSelected: isAllSelectedValue, isChecked: isCheckedValue };
+    hasApplyButton && dispatchState({
+      type: StateActionType.SetGlobalState,
+      payload: {
+        selected: selectedValue,
+        isAllSelected: isAllSelectedValue,
+        isChecked: isCheckedValue
+      }
+    });
+    dispatchState({
+      type: StateActionType.SetState,
+      payload: {
+        selected: selectedValue,
+        isAllSelected: isAllSelectedValue
+      }
+    });
+    isCheckboxMode && isCheckedValue !== undefined && dispatchState({
+      type: StateActionType.SetIsChecked,
+      payload: isCheckedValue
+    });
+  }, [value, state.selectedIds, state.globalSelectedIds, hasApplyButton, isFullSelectionMode, state.isAllSelected, state.globalIsAllSelected, isCheckboxMode, state.globalIsChecked, state.isChecked]);
+  useEffect(() => {
+    if (!isCheckboxMode || prevIsChecked.current === undefined) {
+      return;
+    }
+    if (state.isChecked === prevIsChecked.current) {
+      return;
+    }
+    prevIsChecked.current = state.isChecked;
+    const currentAbort = abortToken.current;
+    controlData(currentAbort.signal, state.inputValue, state.isChecked);
+  }, [controlData, state.inputValue, state.isChecked, isCheckboxMode]);
+  useEscape(triggerRef, handleEscape, state.isOpenCombo);
+  const onSearchChange = useCallback(event => {
+    const newValue = event ? event.currentTarget.value : "";
+    dispatchState({
+      type: StateActionType.SetInputValue,
+      payload: newValue
+    });
+    const currentAbort = abortToken.current;
+    controlData(currentAbort.signal, newValue, state.isChecked);
+  }, [controlData, state.isChecked]);
+  const onInputChange = useCallback(newValue => {
+    dispatchState({
+      type: StateActionType.SetInputValue,
+      payload: newValue || ""
+    });
+    const currentAbort = abortToken.current;
+    controlData(currentAbort.signal, newValue, state.isChecked);
+  }, [controlData, state.isChecked]);
+  const containerClassName = classNames(["zen-dropdown", isFormSection ? "zen-dropdown--form-item" : "", "zen-dropdown__container", className || ""]);
+  const handleCheckboxChange = useCallback(e => {
+    const isChecked = e.target.checked;
+    dispatchState({
+      type: StateActionType.SetIsChecked,
+      payload: isChecked
+    });
+    prevIsChecked.current = isChecked;
+    const currentAbort = abortToken.current;
+    controlData(currentAbort.signal, state.inputValue, isChecked);
+  }, [controlData, state.inputValue]);
+  const handleTriggerClick = useCallback(newVal => {
+    const currentAbort = abortToken.current;
+    dispatchState({
+      type: StateActionType.SetCurrentId,
+      payload: undefined
+    });
+    dispatchState({
+      type: StateActionType.SetIsOpenCombo,
+      payload: newVal
+    });
+    newVal && controlData(currentAbort.signal, state.inputValue, state.isChecked);
+    !newVal && dispatchState({
+      type: StateActionType.SetInputValue,
+      payload: ""
+    });
+  }, [controlData, state.inputValue, state.isChecked]);
+  const handleReadyForFocus = useCallback(isCurrentOpen => {
+    var _a;
+    if (!state.showList) {
+      return;
+    }
+    if (!isCurrentOpen) {
+      return;
+    }
+    const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
+    if (firstFocusable && (state.currentId || !searchField)) {
+      firstFocusable.focus();
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && inputRef.current.focus();
+    }
+  }, [searchField, state.currentId, state.showList, contentRef]);
+  useEffect(() => {
+    var _a;
+    if (!state.isOpenCombo || !state.showList) {
+      return;
+    }
+    const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
+    if (firstFocusable && (state.currentId || !searchField)) {
+      firstFocusable.focus();
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && inputRef.current.focus();
+    }
+  }, [state.isOpenCombo, state.currentId, state.showList, searchField]);
+  useEffect(() => {
+    const shouldExit = !getNamedItems || Object.keys(state.groupsMap).length === 0 && Object.keys(state.groupsMapSelected).length === 0 || getNamedItemsHasBeenCalled.current || state.groupsMapSelected.size === 0;
+    if (shouldExit) {
+      return;
+    }
+    getNamedItemsHasBeenCalled.current = true;
+    getNamedItems(items => prepareSelectedIdsToItems(items, state.groupsMap, state.groupsMapSelected));
+  }, [getNamedItems, state.groupsMap, state.groupsMapSelected, state.namelessIds]);
+  useEffect(() => {
+    if (state.hasDataProblem && multiselect && state.isNestedList) {
+      // eslint-disable-next-line max-len
+      console.error("The data retrieved using the getData function could not form a valid object for displaying nested data. The currently displayed data contains nested elements. It is expected that selecting a nested item should deselect its parent, which cannot be achieved with the formed object.");
+    }
+  }, [state.hasDataProblem, multiselect, state.isNestedList]);
+  useEffect(() => {
+    if (state.isNestedList && isFullSelectionMode) {
+      // eslint-disable-next-line max-len
+      console.error("The IDropdownFullSelection interface is not designed to handle nested data. The IDropdownFullSelection interface is intended for use with flat data. If you need to use it with nested data, please use the IDropdown interface instead.");
+    }
+  }, [state.isNestedList, isFullSelectionMode]);
+  const memoizedWithFooter = useMemo(() => !(forceSelection && !state.defaultValue.length && !hasApplyButton), [forceSelection, hasApplyButton, state.defaultValue.length]);
+  const memoizedIsClearButtonDisabled = useMemo(() => {
+    if (forceSelection && !multiselect && !state.defaultValue.length) {
+      return true;
+    }
+    const isStringsTheSame = compareStringsArrays(state.selectedIds, state.defaultValue);
+    const isCheckedEqualDefault = currentIsChecked !== undefined ? currentIsChecked === state.defaultValueIsChecked : true;
+    if (currentAllSelected !== undefined && state.defaultValueIsAllSelected !== undefined && state.defaultValueIsAllSelected && isCheckedEqualDefault) {
+      return currentAllSelected === state.defaultValueIsAllSelected;
+    }
+    return currentAllSelected !== undefined ? state.defaultValueIsAllSelected === currentAllSelected && isStringsTheSame && isCheckedEqualDefault : isStringsTheSame && isCheckedEqualDefault;
+  }, [currentAllSelected, currentIsChecked, forceSelection, multiselect, state.defaultValue, state.defaultValueIsAllSelected, state.defaultValueIsChecked, state.selectedIds]);
+  const memoizedIsApplyButtonDisabled = useMemo(() => compareStringsArrays(state.globalSelectedIds, state.selectedIds) && (isFullSelectionMode ? state.globalIsAllSelected === state.isAllSelected : true) && (isCheckboxMode ? state.globalIsChecked === state.isChecked : true), [isCheckboxMode, isFullSelectionMode, state.globalIsAllSelected, state.globalIsChecked, state.globalSelectedIds, state.isAllSelected, state.isChecked, state.selectedIds]);
+  const countSelected = useMemo(() => {
+    var _a, _b;
+    if (hasApplyButton && state.globalIsAllSelected || !hasApplyButton && state.isAllSelected) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      return ((_b = (_a = state.groupsMap[ROOT_GROUP_ID]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    }
+    return getSelectedCount(hasApplyButton ? state.globalSelectedIds : state.selectedIds);
+  }, [hasApplyButton, state.globalIsAllSelected, state.globalSelectedIds, state.groupsMap, state.isAllSelected, state.selectedIds]);
+  // eslint-disable-next-line complexity
+  const getPopupContent = useMemo(() => {
+    var _a, _b, _c;
+    const triggerRefWidth = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+    let currentWidth = triggerRefWidth ? Math.round(triggerRefWidth) : undefined;
+    if (currentWidth && currentWidth > 420) {
+      currentWidth = 420;
+    }
+    if (currentWidth && currentWidth < 180) {
+      currentWidth = 180;
+    }
+    if (state.showWaiting || isLoading || isQueryMode && (fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading)) {
+      return _jsx(SkeletonList, {
+        className: "zen-dropdown-list__container zen-dropdown-list__container--empty",
+        width: currentWidth
+      });
+    }
+    if (state.showEmptyList || isQueryMode && (fetchState === null || fetchState === void 0 ? void 0 : fetchState.error)) {
+      const isClearButtonDisabled = compareStringsArrays(state.selectedIds, state.defaultValue);
+      return _jsx(EmptyList, {
+        width: currentWidth,
+        onClearClick: handleClearClick,
+        onCancelClick: handleCancelClick,
+        onApplyClick: handleApplyClick,
+        hasApplyButton: hasApplyButton,
+        isApplyDisabled: compareStringsArrays(state.globalSelectedIds, state.selectedIds),
+        isClearButtonDisabled: isClearButtonDisabled,
+        isWithFooter: memoizedWithFooter && Object.keys(state.groupsMap).length === 0 && (!hasApplyButton && !isClearButtonDisabled || hasApplyButton || false),
+        hasError: state.showEmptyList && isQueryMode && (fetchState === null || fetchState === void 0 ? void 0 : fetchState.error) !== null
+      });
+    }
+    if (state.showList) {
+      const isSearchMode = state.inputValue && !state.currentId;
+      const currentListData = createListDataOptions(state, translate, isSearchMode ? sortDropdownItemArray(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId)
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      : sortDropdownItemArray(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
+      return _jsx(DropdownList, {
+        onBackButtonClick: handleBackButtonClick,
+        onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick,
+        onClearClick: handleClearClick,
+        onCancelClick: handleCancelClick,
+        onApplyClick: handleApplyClick,
+        onChange: handleSelect,
+        onSelect: handleChangeCurrentId,
+        onSingleSelect: handleSingleSelection,
+        activeValue: state.selectedIds.length ? state.selectedIds[0] : "root",
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        const newCurrentId = state.currentId ? (_b = (_a = state.groupsMap[state.currentId]) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.id : undefined;
-        dispatchState({ type: StateActionType.SetCurrentId, payload: newCurrentId === ENTIRE_ORGANIZATION_GROUP_ID || state.inputValue ? undefined : newCurrentId });
-    }, [state.currentId, state.groupsMap, state.inputValue]);
-    const handleSelect = useCallback((val) => {
-        if (isFullSelectionMode && state.isAllSelected) {
-            dispatchState({ type: StateActionType.DeselectItemsFromAllSelected, payload: val.id });
-            return;
-        }
-        if (val.partial) {
-            dispatchState({ type: StateActionType.DeselectAllChildren, payload: val.id });
-        }
-        else {
-            dispatchState({ type: StateActionType.ChangeSelection, payload: { value: val.state, itemId: val.id } });
-        }
-    }, [isFullSelectionMode, state.isAllSelected]);
-    const handleClose = useCallback(() => {
-        dispatchState({ type: StateActionType.SetInputValue, payload: "" });
-        if (!triggerRef.current) {
-            return;
-        }
-        if (isFocusable(triggerRef.current)) {
-            triggerRef.current.focus();
-            return;
-        }
-        const focusable = [...Array.from(triggerRef.current.querySelectorAll(FOCUSABLE_SELECTOR))];
-        (focusable[0] || triggerRef.current).focus();
-    }, []);
-    const handleEscape = useCallback(() => {
-        dispatchState({ type: StateActionType.SetIsOpenCombo, payload: false });
-        dispatchState({ type: StateActionType.SetCurrentId, payload: undefined });
-        abortToken.current.abort();
-        abortToken.current = new AbortController();
-        handleClose();
-    }, [handleClose]);
-    const memoizedAllowClosing = useMemo(() => state.currentId === undefined || state.currentId === ENTIRE_ORGANIZATION_GROUP_ID, [state.currentId]);
-    const handleSingleSelection = useCallback((reset, selected) => {
-        const shouldBeClosed = !hasApplyButton && memoizedAllowClosing && (!reset && selected || reset);
-        dispatchState({ type: StateActionType.ChangeSingleSelection, payload: { value: selected, reset: reset } });
-        shouldBeClosed && handleEscape();
-        shouldBeClosed && dispatchState({ type: StateActionType.SetInputValue, payload: "" });
-    }, [handleEscape, hasApplyButton, memoizedAllowClosing]);
-    const handleSelectAllClick = useCallback((isAllSelect) => {
-        if (isFullSelectionMode) {
-            dispatchState({ type: StateActionType.ToggleValueForAllSelected, payload: undefined });
-            return;
-        }
-        dispatchState({ type: isAllSelect ? StateActionType.DeselectAllChildren : StateActionType.SelectAllChildren, payload: state.currentId || ENTIRE_ORGANIZATION_GROUP_ID });
-    }, [isFullSelectionMode, state.currentId]);
-    const handleSelectAllInSearch = useCallback((isAllSelect) => {
-        if (isFullSelectionMode && state.isAllSelected) {
-            dispatchState({ type: StateActionType.DeselectItemsFromAllSelected, payload: undefined });
-            return;
-        }
-        const dataForChange = getDataForChange(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds, isAllSelect);
-        dispatchState({ type: StateActionType.ChangeBulkSelection, payload: { itemsIds: dataForChange, value: !isAllSelect } });
-    }, [isFullSelectionMode, state.isAllSelected, state.listData, state.isNestedList, state.selectedIds]);
-    const handleClearClick = useCallback(() => {
-        dispatchState({ type: StateActionType.ResetSelection, payload: undefined });
-    }, []);
-    const handleCancelClick = useCallback(() => {
-        dispatchState({ type: StateActionType.ResetStateToGlobal, payload: undefined });
-        dispatchState({ type: StateActionType.SetIsOpenCombo, payload: false });
-        dispatchState({ type: StateActionType.SetCurrentId, payload: undefined });
-        abortToken.current.abort();
-        abortToken.current = new AbortController();
-        handleClose();
-    }, [handleClose]);
-    const handleApplyClick = useCallback(() => {
-        dispatchState({ type: StateActionType.SetGlobalState, payload: Object.assign({ selected: state.selectedIds, isAllSelected: state.isAllSelected }, (isCheckboxMode ? { isChecked: state.isChecked } : {})) });
-        dispatchState({ type: StateActionType.SetIsOpenCombo, payload: false });
-        dispatchState({ type: StateActionType.SetCurrentId, payload: undefined });
-        abortToken.current.abort();
-        abortToken.current = new AbortController();
-        handleClose();
-        dispatchState({ type: StateActionType.SetDataProblem, payload: checkIsDataProblem(state.selectedIds, state.groupsMap) });
-        const preparedItems = prepareSelectedIdsToItems(state.selectedIds, state.groupsMap, state.groupsMapSelected);
-        if (isFullSelectionMode) {
-            const newValue = (isCheckboxMode
-                ? { selected: preparedItems, isAllSelected: state.isAllSelected || false, isChecked: state.isChecked }
-                : { selected: preparedItems, isAllSelected: state.isAllSelected || false });
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
-        else {
-            const newValue = isCheckboxMode
-                ? { selected: preparedItems, isChecked: state.isChecked }
-                : preparedItems;
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
-    }, [state.selectedIds, state.isAllSelected, state.isChecked, state.groupsMap, state.groupsMapSelected, isCheckboxMode, handleClose, isFullSelectionMode, onChange]);
-    const customGetData = useCallback((str) => (str && dataItems
-        ? Promise.resolve(dataItems.filter(el => { var _a; return (((_a = el.name) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "").indexOf(str.trim().toLocaleLowerCase()) > -1; }))
-        : Promise.resolve(dataItems || [])), [dataItems]);
-    const handleData = useCallback((dta, searchVal) => {
-        if (dta.length && !searchVal && (getData || dataItems || isQueryMode)) {
-            dispatchState({ type: StateActionType.CreateMap, payload: dta });
-            previousMapDataItems.current = [...dta];
-        }
-        dispatchState({ type: StateActionType.SetListData, payload: dta });
-        searchVal && dispatchState({ type: StateActionType.SetCurrentId, payload: undefined });
-        dta.length ? dispatchState({ type: StateActionType.ShowList, payload: undefined }) : dispatchState({ type: StateActionType.ShowEmptyList, payload: undefined });
-    }, [getData, dataItems, isQueryMode]);
-    const handleError = useCallback((e) => {
-        errorHandler(e);
-        dispatchState({ type: StateActionType.NothingToShow, payload: undefined });
-    }, [errorHandler]);
-    const handleDataQuery = useCallback((dta, searchVal) => {
-        if (dta.length && !searchVal && !compareObjectsArrays(dta, previousMapDataItems.current)) {
-            dispatchState({ type: StateActionType.CreateMap, payload: dta });
-            previousMapDataItems.current = [...dta];
-        }
-        dispatchState({ type: StateActionType.SetListData, payload: dta });
-        searchVal && dispatchState({ type: StateActionType.SetCurrentId, payload: undefined });
-        dta.length ? dispatchState({ type: StateActionType.ShowList, payload: undefined }) : dispatchState({ type: StateActionType.ShowEmptyList, payload: undefined });
-    }, []);
-    const handleQueryMode = useCallback((searchValue, isChecked) => {
-        setChecked && isChecked !== undefined && setChecked(isChecked);
-        setSearch && setSearch(searchValue || "");
-    }, [setChecked, setSearch]);
-    const debouncedGetData = useDebounce((signal, searchValue, isChecked) => getData ? (isCheckboxMode ? getData(signal, searchValue, isChecked) : getData(signal, searchValue)).then((dta) => handleData(dta, searchValue)).catch(handleError)
-        : customGetData(searchValue).then((dta) => handleData(dta, searchValue)).catch(handleError), 200);
-    const controlData = useCallback((signal, searchValue, isChecked) => {
-        !isQueryMode && dispatchState({ type: StateActionType.ShowWaiting, payload: undefined });
-        isQueryMode ? handleQueryMode(searchValue, isChecked) : debouncedGetData(signal, searchValue, isChecked);
-    }, [debouncedGetData, handleQueryMode, isQueryMode]);
-    useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            if (!isQueryMode || (fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading)) {
-                return;
-            }
-            handleDataQuery((fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [], state.inputValue);
-        });
-        return () => clearTimeout(timeoutId);
-    }, [fetchState === null || fetchState === void 0 ? void 0 : fetchState.data, handleDataQuery, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, isQueryMode, state.inputValue]);
-    useEffect(() => {
-        // when change inside
-        if (hasApplyButton) {
-            return;
-        }
-        const prevIsCheckedValue = isCheckboxMode ?
-            prevSelectedIds.current.isChecked : undefined;
-        if (compareStringsArrays(prevSelectedIds.current.selected, state.selectedIds)
-            && prevSelectedIds.current.isAllSelected === state.isAllSelected
-            && prevIsCheckedValue === state.isChecked) {
-            return;
-        }
-        prevSelectedIds.current = { selected: state.selectedIds, isAllSelected: state.isAllSelected, isChecked: state.isChecked };
-        if (compareStringsArrays(state.selectedIds, isFullSelectionMode || isCheckboxMode ? value.selected : value)
-            && state.isAllSelected === (isFullSelectionMode ? value.isAllSelected : undefined)
-            && state.isChecked === (isCheckboxMode ? value.isChecked : undefined)) {
-            return;
-        }
-        dispatchState({ type: StateActionType.SetDataProblem, payload: checkIsDataProblem(state.selectedIds, state.groupsMap) });
-        const preparedItems = prepareSelectedIdsToItems(state.selectedIds, state.groupsMap, state.groupsMapSelected);
-        if (isFullSelectionMode) {
-            const newValue = (isCheckboxMode
-                ? { selected: preparedItems, isAllSelected: state.isAllSelected || false, isChecked: state.isChecked }
-                : { selected: preparedItems, isAllSelected: state.isAllSelected || false });
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
-        else {
-            const newValue = isCheckboxMode
-                ? { selected: preparedItems, isChecked: state.isChecked }
-                : preparedItems;
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
-        // eslint-disable-next-line max-len
-    }, [onChangeInner, value, state.selectedIds, state.groupsMapSelected, state.groupsMap, hasApplyButton, state.isAllSelected, isFullSelectionMode, state.isChecked, isCheckboxMode, onChange]);
-    useEffect(() => {
-        // when change outside
-        const selectedValue = isFullSelectionMode || isCheckboxMode ? value.selected : value;
-        const isAllSelectedValue = isFullSelectionMode ? value.isAllSelected : undefined;
-        const isCheckedValue = isCheckboxMode ? value.isChecked : undefined;
-        if (compareStringsArrays(prevSelection.current.selected, selectedValue) && isAllSelectedValue === prevSelection.current.isAllSelected && prevSelection.current.isChecked === isCheckedValue) {
-            return;
-        }
-        prevSelection.current = { selected: selectedValue, isAllSelected: isAllSelectedValue, isChecked: isCheckedValue };
-        if (compareStringsArrays(hasApplyButton ? state.globalSelectedIds : state.selectedIds, selectedValue)
-            && isAllSelectedValue === (hasApplyButton ? state.globalIsAllSelected : state.isAllSelected)
-            && isCheckedValue === (hasApplyButton ? state.globalIsChecked : state.isChecked)) {
-            return;
-        }
-        // prevSelectedIds.current = { selected: selectedValue, isAllSelected: isAllSelectedValue, isChecked: isCheckedValue };
-        hasApplyButton && dispatchState({ type: StateActionType.SetGlobalState,
-            payload: { selected: selectedValue, isAllSelected: isAllSelectedValue, isChecked: isCheckedValue } });
-        dispatchState({ type: StateActionType.SetState,
-            payload: { selected: selectedValue, isAllSelected: isAllSelectedValue } });
-        isCheckboxMode && isCheckedValue !== undefined && dispatchState({ type: StateActionType.SetIsChecked, payload: isCheckedValue });
-    }, [value, state.selectedIds, state.globalSelectedIds, hasApplyButton, isFullSelectionMode, state.isAllSelected,
-        state.globalIsAllSelected, isCheckboxMode, state.globalIsChecked, state.isChecked]);
-    useEffect(() => {
-        if (!isCheckboxMode || prevIsChecked.current === undefined) {
-            return;
-        }
-        if (state.isChecked === prevIsChecked.current) {
-            return;
-        }
-        prevIsChecked.current = state.isChecked;
-        const currentAbort = abortToken.current;
-        controlData(currentAbort.signal, state.inputValue, state.isChecked);
-    }, [controlData, state.inputValue, state.isChecked, isCheckboxMode]);
-    useEscape(triggerRef, handleEscape, state.isOpenCombo);
-    const onSearchChange = useCallback((event) => {
-        const newValue = event ? event.currentTarget.value : "";
-        dispatchState({ type: StateActionType.SetInputValue, payload: newValue });
-        const currentAbort = abortToken.current;
-        controlData(currentAbort.signal, newValue, state.isChecked);
-    }, [controlData, state.isChecked]);
-    const onInputChange = useCallback((newValue) => {
-        dispatchState({ type: StateActionType.SetInputValue, payload: newValue || "" });
-        const currentAbort = abortToken.current;
-        controlData(currentAbort.signal, newValue, state.isChecked);
-    }, [controlData, state.isChecked]);
-    const containerClassName = classNames([
-        "zen-dropdown",
-        isFormSection ? "zen-dropdown--form-item" : "",
-        "zen-dropdown__container",
-        className || ""
-    ]);
-    const handleCheckboxChange = useCallback((e) => {
-        const isChecked = e.target.checked;
-        dispatchState({ type: StateActionType.SetIsChecked, payload: isChecked });
-        prevIsChecked.current = isChecked;
-        const currentAbort = abortToken.current;
-        controlData(currentAbort.signal, state.inputValue, isChecked);
-    }, [controlData, state.inputValue]);
-    const handleTriggerClick = useCallback((newVal) => {
-        const currentAbort = abortToken.current;
-        dispatchState({ type: StateActionType.SetCurrentId, payload: undefined });
-        dispatchState({ type: StateActionType.SetIsOpenCombo, payload: newVal });
-        newVal && controlData(currentAbort.signal, state.inputValue, state.isChecked);
-        !newVal && dispatchState({ type: StateActionType.SetInputValue, payload: "" });
-    }, [controlData, state.inputValue, state.isChecked]);
-    const handleReadyForFocus = useCallback((isCurrentOpen) => {
-        var _a;
-        if (!state.showList) {
-            return;
-        }
-        if (!isCurrentOpen) {
-            return;
-        }
-        const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
-        if (firstFocusable && (state.currentId || !searchField)) {
-            firstFocusable.focus();
-        }
-        else {
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && inputRef.current.focus();
-        }
-    }, [searchField, state.currentId, state.showList, contentRef]);
-    useEffect(() => {
-        var _a;
-        if (!state.isOpenCombo || !state.showList) {
-            return;
-        }
-        const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
-        if (firstFocusable && (state.currentId || !searchField)) {
-            firstFocusable.focus();
-        }
-        else {
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && inputRef.current.focus();
-        }
-    }, [state.isOpenCombo, state.currentId, state.showList, searchField]);
-    useEffect(() => {
-        const shouldExit = !getNamedItems ||
-            (Object.keys(state.groupsMap).length === 0 && Object.keys(state.groupsMapSelected).length === 0) ||
-            getNamedItemsHasBeenCalled.current ||
-            state.groupsMapSelected.size === 0;
-        if (shouldExit) {
-            return;
-        }
-        getNamedItemsHasBeenCalled.current = true;
-        getNamedItems((items) => prepareSelectedIdsToItems(items, state.groupsMap, state.groupsMapSelected));
-    }, [getNamedItems, state.groupsMap, state.groupsMapSelected, state.namelessIds]);
-    useEffect(() => {
-        if (state.hasDataProblem && multiselect && state.isNestedList) {
-            // eslint-disable-next-line max-len
-            console.error("The data retrieved using the getData function could not form a valid object for displaying nested data. The currently displayed data contains nested elements. It is expected that selecting a nested item should deselect its parent, which cannot be achieved with the formed object.");
-        }
-    }, [state.hasDataProblem, multiselect, state.isNestedList]);
-    useEffect(() => {
-        if (state.isNestedList && isFullSelectionMode) {
-            // eslint-disable-next-line max-len
-            console.error("The IDropdownFullSelection interface is not designed to handle nested data. The IDropdownFullSelection interface is intended for use with flat data. If you need to use it with nested data, please use the IDropdown interface instead.");
-        }
-    }, [state.isNestedList, isFullSelectionMode]);
-    const memoizedWithFooter = useMemo(() => !(forceSelection && !state.defaultValue.length && !hasApplyButton), [forceSelection, hasApplyButton, state.defaultValue.length]);
-    const memoizedIsClearButtonDisabled = useMemo(() => {
-        if (forceSelection && !multiselect && !state.defaultValue.length) {
-            return true;
-        }
-        const isStringsTheSame = compareStringsArrays(state.selectedIds, state.defaultValue);
-        const isCheckedEqualDefault = currentIsChecked !== undefined ? currentIsChecked === state.defaultValueIsChecked : true;
-        if (currentAllSelected !== undefined && state.defaultValueIsAllSelected !== undefined && state.defaultValueIsAllSelected && isCheckedEqualDefault) {
-            return currentAllSelected === state.defaultValueIsAllSelected;
-        }
-        return currentAllSelected !== undefined ? state.defaultValueIsAllSelected === currentAllSelected && isStringsTheSame && isCheckedEqualDefault : isStringsTheSame && isCheckedEqualDefault;
-    }, [currentAllSelected, currentIsChecked, forceSelection, multiselect, state.defaultValue, state.defaultValueIsAllSelected, state.defaultValueIsChecked, state.selectedIds]);
-    const memoizedIsApplyButtonDisabled = useMemo(() => compareStringsArrays(state.globalSelectedIds, state.selectedIds)
-        && (isFullSelectionMode ? state.globalIsAllSelected === state.isAllSelected : true)
-        && (isCheckboxMode ? state.globalIsChecked === state.isChecked : true), [isCheckboxMode, isFullSelectionMode, state.globalIsAllSelected, state.globalIsChecked, state.globalSelectedIds, state.isAllSelected, state.isChecked, state.selectedIds]);
-    const countSelected = useMemo(() => {
-        var _a, _b;
-        if (hasApplyButton && state.globalIsAllSelected || !hasApplyButton && state.isAllSelected) {
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            return ((_b = (_a = state.groupsMap[ENTIRE_ORGANIZATION_GROUP_ID]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) || 0;
-        }
-        return getSelectedCount(hasApplyButton ? state.globalSelectedIds : state.selectedIds);
-    }, [hasApplyButton, state.globalIsAllSelected, state.globalSelectedIds, state.groupsMap, state.isAllSelected, state.selectedIds]);
-    // eslint-disable-next-line complexity
-    const getPopupContent = useMemo(() => {
-        var _a, _b, _c;
-        const triggerRefWidth = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-        let currentWidth = triggerRefWidth ? Math.round(triggerRefWidth) : undefined;
-        if (currentWidth && currentWidth > 420) {
-            currentWidth = 420;
-        }
-        if (currentWidth && currentWidth < 180) {
-            currentWidth = 180;
-        }
-        if (state.showWaiting || isLoading || (isQueryMode && (fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading))) {
-            return _jsx(SkeletonList, { className: "zen-dropdown-list__container zen-dropdown-list__container--empty", width: currentWidth });
-        }
-        if (state.showEmptyList || (isQueryMode && (fetchState === null || fetchState === void 0 ? void 0 : fetchState.error))) {
-            const isClearButtonDisabled = compareStringsArrays(state.selectedIds, state.defaultValue);
-            return _jsx(EmptyList, { width: currentWidth, onClearClick: handleClearClick, onCancelClick: handleCancelClick, onApplyClick: handleApplyClick, hasApplyButton: hasApplyButton, isApplyDisabled: compareStringsArrays(state.globalSelectedIds, state.selectedIds), isClearButtonDisabled: isClearButtonDisabled, isWithFooter: memoizedWithFooter && Object.keys(state.groupsMap).length === 0 && ((!hasApplyButton && !isClearButtonDisabled) || hasApplyButton || false), hasError: state.showEmptyList && (isQueryMode && (fetchState === null || fetchState === void 0 ? void 0 : fetchState.error) !== null) });
-        }
-        if (state.showList) {
-            const isSearchMode = state.inputValue && !state.currentId;
-            const currentListData = createListDataOptions(state, translate, isSearchMode ? sortDropdownItemArray(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== ENTIRE_ORGANIZATION_GROUP_ID)
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                : sortDropdownItemArray(((_b = state.groupsMap[state.currentId || ENTIRE_ORGANIZATION_GROUP_ID]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
-            return _jsx(DropdownList, { onBackButtonClick: handleBackButtonClick, onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick, onClearClick: handleClearClick, onCancelClick: handleCancelClick, onApplyClick: handleApplyClick, onChange: handleSelect, onSelect: handleChangeCurrentId, onSingleSelect: handleSingleSelection, activeValue: state.selectedIds.length ? state.selectedIds[0] : "root", 
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                backButtonName: state.currentId && state.groupsMap[state.currentId] ? getGroupDescription(state.groupsMap[state.currentId], translate) : undefined, filterName: isMobile ? undefined : filterName, isAllSelected: currentAllSelected ? currentAllSelected : (isSearchMode ? isEveryItemSelected(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds)
-                    : (currentAllSelected === undefined ? isAllChildrenSelected(state, state.currentId || ENTIRE_ORGANIZATION_GROUP_ID) : false)), isMultiselect: multiselect, forceSelection: forceSelection, 
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                listData: currentListData, width: width || currentWidth === 180 ? undefined : currentWidth, minWidth: currentWidth, hasSelectAllButton: selectAllButton && multiselect, hasApplyButton: hasApplyButton, isApplyDisabled: memoizedIsApplyButtonDisabled, isSelectAllButtonDisable: currentListData.length === 0
-                    || isSearchMode !== "" && state.isNestedList
-                        && isAllItemsHasOneParent(state.listData.filter(el => el.id !== ENTIRE_ORGANIZATION_GROUP_ID), 
-                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        (((_c = state.groupsMap[ENTIRE_ORGANIZATION_GROUP_ID]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)), isClearButtonDisabled: memoizedIsClearButtonDisabled, isWithFooter: memoizedWithFooter && !isMobile, isMobile: isMobile, handleCheckboxChange: isCheckboxMode && !isMobile ? handleCheckboxChange : undefined, checkboxLabel: checkboxLabel, isChecked: state.isChecked });
-        }
-        return null;
-    }, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton,
-        memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllInSearch,
-        handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width,
-        selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel]);
-    const currentStringFromSelected = isFullSelectionMode && hasApplyButton && state.globalIsAllSelected ||
-        isFullSelectionMode && !hasApplyButton && state.isAllSelected ? getStringFromAllSelected(state.groupsMap, translate)
-        : getStringFromSelected(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate);
-    const memoizedCurrentSelection = useMemo(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
-    const parentTriggerWidth = ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 420;
-    if (isReadOnly) {
-        // TODO: how many items should we show?
-        return _jsx(ReviewTextControl, { value: getSelectedValues(state.groupsMapSelected) });
-    }
-    return _jsxs("div", { className: containerClassName, ref: comboboxRef, children: [chip ? _jsx(Chip, { status: memoizedIsClearButtonDisabled ? undefined : chipStatus || "active", isOpen: state.isOpenCombo, disabled: disabled, onClick: handleTriggerClick, onClose: memoizedIsClearButtonDisabled ? undefined : handleClearClick, triggerRef: triggerRef, icon: chipIcon, id: chipId, children: currentStringFromSelected || chipName }) :
-                _jsx(DropdownTrigger, Object.assign({ name: name, onBlur: onBlur, className: classNames([!width && !fullWidthTriggerButton && parentTriggerWidth < 420 && !searchField ? "zen-dropdown__trigger-button--width-parent" : ""]), currentSelection: memoizedCurrentSelection, isActive: state.isOpenCombo, id: inputId, disabled: disabled, count: showCounterPill ? countSelected : 0, fullWidth: fullWidthTriggerButton, inputValue: state.inputValue, placeholder: placeholder || translate("Filter by group"), searchField: searchField && !isMobile ? searchField : false, onSearchChange: onSearchChange, handleClick: handleTriggerClick, width: width && width > 420 ? 420 : width, title: title, triggerAriaLabel: triggerAriaLabel, triggerRef: triggerRef, inputRef: inputRef, buttonType: buttonType }, accessibilityProps)), _jsx(DropdownPopup, { alignment: alignment, triggerRef: triggerRef, classNamePopup: classNamePopup, isMobile: isMobile, dialogAriaLabel: dialogAriaLabel, disabled: disabled, filterName: filterName, hasApplyButton: hasApplyButton, inputId: inputId, isClearButtonDisabled: memoizedIsClearButtonDisabled, isApplyButtonDisabled: memoizedIsApplyButtonDisabled, isWithFooter: memoizedWithFooter, isOpenCombo: state.isOpenCombo, searchField: searchField, placeholder: placeholder, inputValue: state.inputValue, handleApplyClick: handleApplyClick, handleClearClick: multiselect ? handleClearClick : handleSingleSelection.bind(this, true), handleTriggerClick: handleTriggerClick, onInputChange: onInputChange, inputRef: inputRef, contentRef: contentRef, onReadyForFocus: handleReadyForFocus, handleCheckboxChange: isCheckboxMode && isMobile ? handleCheckboxChange : undefined, checkboxLabel: checkboxLabel, isChecked: state.isChecked, isSearchInPopup: chip, mobileSheetStackingClassName: mobileSheetStackingClassName, children: getPopupContent })] });
+        backButtonName: state.currentId && state.groupsMap[state.currentId] ? getGroupDescription(state.groupsMap[state.currentId], translate) : undefined,
+        filterName: isMobile ? undefined : filterName,
+        isAllSelected: currentAllSelected ? currentAllSelected : isSearchMode ? isEveryItemSelected(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds) : currentAllSelected === undefined ? isAllChildrenSelected(state, state.currentId || state.rootId) : false,
+        isMultiselect: multiselect,
+        forceSelection: forceSelection,
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        listData: currentListData,
+        width: width || currentWidth === 180 ? undefined : currentWidth,
+        minWidth: currentWidth,
+        hasSelectAllButton: selectAllButton && multiselect,
+        hasApplyButton: hasApplyButton,
+        isApplyDisabled: memoizedIsApplyButtonDisabled,
+        isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode !== "" && state.isNestedList && isAllItemsHasOneParent(state.listData.filter(el => el.id !== state.rootId),
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),
+        isClearButtonDisabled: memoizedIsClearButtonDisabled,
+        isWithFooter: memoizedWithFooter && !isMobile,
+        isMobile: isMobile,
+        handleCheckboxChange: isCheckboxMode && !isMobile ? handleCheckboxChange : undefined,
+        checkboxLabel: checkboxLabel,
+        isChecked: state.isChecked
+      });
+    }
+    return null;
+  }, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel]);
+  const currentStringFromSelected = isFullSelectionMode && hasApplyButton && state.globalIsAllSelected || isFullSelectionMode && !hasApplyButton && state.isAllSelected ? getStringFromAllSelected(state.groupsMap, translate, state.rootId) : getStringFromSelected(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate, state.rootId);
+  const memoizedCurrentSelection = useMemo(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
+  const parentTriggerWidth = ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 420;
+  if (isReadOnly) {
+    // TODO: how many items should we show?
+    return _jsx(ReviewTextControl, {
+      value: getSelectedValues(state.groupsMapSelected)
+    });
+  }
+  return _jsxs("div", {
+    className: containerClassName,
+    ref: comboboxRef,
+    children: [chip ? _jsx(Chip, {
+      status: memoizedIsClearButtonDisabled ? undefined : chipStatus || "active",
+      isOpen: state.isOpenCombo,
+      disabled: disabled,
+      onClick: handleTriggerClick,
+      onClose: memoizedIsClearButtonDisabled ? undefined : handleClearClick,
+      triggerRef: triggerRef,
+      icon: chipIcon,
+      id: chipId,
+      children: currentStringFromSelected || chipName
+    }) : _jsx(DropdownTrigger, Object.assign({
+      name: name,
+      onBlur: onBlur,
+      className: classNames([!width && !fullWidthTriggerButton && parentTriggerWidth < 420 && !searchField ? "zen-dropdown__trigger-button--width-parent" : "", isError ? "zen-dropdown__trigger-button--error" : ""]),
+      currentSelection: memoizedCurrentSelection,
+      isActive: state.isOpenCombo,
+      id: inputId,
+      isError: isError,
+      disabled: disabled,
+      count: showCounterPill ? countSelected : 0,
+      fullWidth: fullWidthTriggerButton,
+      inputValue: state.inputValue,
+      placeholder: placeholder || translate("Filter by group"),
+      searchField: searchField && !isMobile ? searchField : false,
+      onSearchChange: onSearchChange,
+      handleClick: handleTriggerClick,
+      width: width && width > 420 ? 420 : width,
+      title: title,
+      triggerAriaLabel: triggerAriaLabel,
+      triggerRef: triggerRef,
+      inputRef: inputRef,
+      buttonType: buttonType
+    }, accessibilityProps)), _jsx(DropdownPopup, {
+      alignment: alignment,
+      triggerRef: triggerRef,
+      classNamePopup: classNamePopup,
+      isMobile: isMobile,
+      dialogAriaLabel: dialogAriaLabel,
+      disabled: disabled,
+      filterName: filterName,
+      hasApplyButton: hasApplyButton,
+      inputId: inputId,
+      isClearButtonDisabled: memoizedIsClearButtonDisabled,
+      isApplyButtonDisabled: memoizedIsApplyButtonDisabled,
+      isWithFooter: memoizedWithFooter,
+      isOpenCombo: state.isOpenCombo,
+      searchField: searchField,
+      placeholder: placeholder,
+      inputValue: state.inputValue,
+      handleApplyClick: handleApplyClick,
+      handleClearClick: multiselect ? handleClearClick : handleSingleSelection.bind(this, true),
+      handleTriggerClick: handleTriggerClick,
+      onInputChange: onInputChange,
+      inputRef: inputRef,
+      contentRef: contentRef,
+      onReadyForFocus: handleReadyForFocus,
+      handleCheckboxChange: isCheckboxMode && isMobile ? handleCheckboxChange : undefined,
+      checkboxLabel: checkboxLabel,
+      isChecked: state.isChecked,
+      isSearchInPopup: chip,
+      mobileSheetStackingClassName: mobileSheetStackingClassName,
+      children: getPopupContent
+    })]
+  });
 };
 DropdownRaw.displayName = "DropdownRaw";
-export const TRANSLATIONS = [
-    "Filter by group",
-    "Open filter",
-    "Clear search",
-    "Select all",
-    "Deselect all",
-    "Clear",
-    "Back",
-    "No data"
-];
+export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];