@geotab/zenith 3.1.1-beta.0 → 3.1.1-beta.1

package/dist/dropdown/dropdown.js

@@ -1,503 +1,36 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.Dropdown = exports.LIST_LIMIT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable complexity */
-const react_1 = require("react");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const dropdownList_1 = require("./dropdownList");
-const stateReducer_1 = require("./stateReducer/stateReducer");
-const stateActionType_1 = require("./stateReducer/stateActionType");
-const groupsHelper_1 = require("../groupsFilter/groupsHelper");
-const focusableSelector_1 = require("../utils/focusableSelector");
-const useEscape_1 = require("../commonHelpers/hooks/useEscape");
-const dropdownHelper_1 = require("./dropdownHelper");
-const dropdownTrigger_1 = require("./dropdownTrigger");
-const dialogHelpers_1 = require("../dialog/dialogHelpers");
-const useLanguage_1 = require("../utils/localization/useLanguage");
-const dropdownPopup_1 = require("./dropdownPopup");
-const useMobile_1 = require("../commonHelpers/hooks/useMobile");
-const useDebounce_1 = require("../commonHelpers/hooks/useDebounce");
-const skeletonList_1 = require("../skeletonList/skeletonList");
-const chip_1 = require("../chip/chip");
-const chipStatusProvider_1 = require("../chip/chipStatusProvider");
+const formField_1 = require("../formField/formField");
+const dropdownRaw_1 = require("../dropdownRaw/dropdownRaw");
 exports.LIST_LIMIT = 500;
-const Dropdown = ({ className, classNamePopup, mobileSheetStackingClassName, getData, errorHandler, dataItems, fetchState, onChange, value, defaultValue, placeholder, dialogAriaLabel, width, isLoading, title, triggerAriaLabel, disabled, inputId, filterName, showCounterPill = true, showSelection, fullWidthTriggerButton, hasApplyButton, searchField = true, multiselect = true, forceSelection = false, selectAllButton = true, getNamedItems, getSelectedItem, buttonType = "secondary", listLimit = exports.LIST_LIMIT, alignment = "bottom-left", error, sortFn, checkboxLabel, chip, chipId, chipName, chipIcon, setChecked, setSearch }) => {
-    var _a;
-    const isFullSelectionMode = (0, react_1.useMemo)(() => typeof value === "object" &&
-        "selected" in value &&
-        Array.isArray(value.selected) &&
-        "isAllSelected" in value &&
-        typeof value.isAllSelected === "boolean", [value]);
-    const isQueryMode = (0, react_1.useMemo)(() => typeof getData === "undefined" && typeof dataItems === "undefined", [getData, dataItems]);
-    const isCheckboxMode = (0, react_1.useMemo)(() => checkboxLabel && typeof value === "object" && "isChecked" in value && typeof value.isChecked === "boolean" || false, [checkboxLabel, value]);
-    const [initialInChecked] = (0, react_1.useState)(isCheckboxMode ? value.isChecked : undefined);
-    const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.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 = (0, chipStatusProvider_1.useChipStatus)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const abortToken = (0, react_1.useRef)(new AbortController());
-    const triggerRef = (0, react_1.useRef)(null);
-    const comboboxRef = (0, react_1.useRef)(null);
-    const inputRef = (0, react_1.useRef)(null);
-    const contentRef = (0, react_1.useRef)(null);
-    const prevSelectedIds = (0, react_1.useRef)({ selected: [], isAllSelected: undefined, isChecked: initialInChecked });
-    const prevSelection = (0, react_1.useRef)({ selected: [], isAllSelected: undefined, isChecked: initialInChecked });
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const getNamedItemsHasBeenCalled = (0, react_1.useRef)(false);
-    const selectedItemsLoader = (0, react_1.useRef)(undefined);
-    const previousMapDataItems = (0, react_1.useRef)(isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : (!getData && (dataItems === null || dataItems === void 0 ? void 0 : dataItems.length) ? dataItems : []));
-    const prevIsLoading = (0, react_1.useRef)(isLoading);
-    const prevIsChecked = (0, react_1.useRef)(isCheckboxMode ? value.isChecked : undefined);
-    const currentAllSelected = (0, react_1.useMemo)(() => (state.isNestedList || !multiselect || !isFullSelectionMode)
-        ? undefined : state.isAllSelected, [state.isNestedList, state.isAllSelected, multiselect, isFullSelectionMode]);
-    const currentIsChecked = (0, react_1.useMemo)(() => isCheckboxMode ?
-        value.isChecked : undefined, [isCheckboxMode, value]);
-    (0, react_1.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_1.StateActionType.CreateMap, payload: dta });
-                    previousMapDataItems.current = [...dta];
-                }).catch(errorHandler);
-            }
-        });
-        return () => clearTimeout(timeoutId);
-    }, [getData, errorHandler, state.groupsMap, initialInChecked]);
-    (0, react_1.useEffect)(() => {
-        const timeoutId = setTimeout(() => {
-            if (!getData && dataItems && dataItems.length && !(0, dropdownHelper_1.compareObjectsArrays)(dataItems, previousMapDataItems.current)) {
-                dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: dataItems });
-                previousMapDataItems.current = [...dataItems];
-            }
-        });
-        return () => clearTimeout(timeoutId);
-    }, [dataItems, getData, state.groupsMap]);
-    (0, react_1.useEffect)(() => {
-        if (prevIsLoading.current !== isLoading && Object.keys(state.groupsMap).length !== 0) {
-            isLoading === false && dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined });
-            prevIsLoading.current = isLoading;
-        }
-    }, [isLoading, dataItems, state.groupsMap]);
-    (0, react_1.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_1.StateActionType.SetDefaultIsChecked, payload: defaultIsCheckedValue });
-        }
-        if ((0, dropdownHelper_1.compareStringsArrays)(defaultSelectedValue, state.defaultValue) && defaultAllSelectedValue === state.defaultValueIsAllSelected) {
-            return;
-        }
-        dispatchState({ type: stateActionType_1.StateActionType.SetDefaultValue, payload: defaultSelectedValue });
-        isFullSelectionMode && defaultAllSelectedValue !== state.defaultValueIsAllSelected
-            && dispatchState({ type: stateActionType_1.StateActionType.SetDefaultAllSelected, payload: defaultAllSelectedValue });
-    }, [defaultValue, isCheckboxMode, isFullSelectionMode, state.defaultValue, state.defaultValueIsAllSelected, state.defaultValueIsChecked]);
-    const loadSelectedItems = (0, react_1.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_1.StateActionType.UpdateSelectedItems, payload: result });
-            getNamedItemsHasBeenCalled.current = false;
-        }).catch(() => {
-            dispatchState({ type: stateActionType_1.StateActionType.UpdateSelectedItems, payload: [] });
-        });
-    }, [getSelectedItem]);
-    (0, react_1.useEffect)(() => {
-        if (!getSelectedItem) {
-            return;
-        }
-        dispatchState({ type: stateActionType_1.StateActionType.UpdateNamelessItems, payload: undefined });
-    }, [getSelectedItem]);
-    (0, react_1.useEffect)(() => {
-        if (state.namelessIds.size === 0 || !getSelectedItem || state.pendingNamelessIds) {
-            return;
-        }
-        selectedItemsLoader.current = loadSelectedItems(state.namelessIds);
-        dispatchState({ type: stateActionType_1.StateActionType.SetPendingState, payload: true });
-    }, [getSelectedItem, loadSelectedItems, state.namelessIds, state.pendingNamelessIds]);
-    const handleChangeCurrentId = (0, react_1.useCallback)((id) => {
-        dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: id });
-        dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: "" });
-        isQueryMode && setSearch && setSearch("");
-    }, [isQueryMode, setSearch]);
-    const handleBackButtonClick = (0, react_1.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_1.StateActionType.SetCurrentId, payload: newCurrentId === groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID || state.inputValue ? undefined : newCurrentId });
-    }, [state.currentId, state.groupsMap, state.inputValue]);
-    const handleSelect = (0, react_1.useCallback)((val) => {
-        if (isFullSelectionMode && state.isAllSelected) {
-            dispatchState({ type: stateActionType_1.StateActionType.DeselectItemsFromAllSelected, payload: val.id });
-            return;
-        }
-        if (val.partial) {
-            dispatchState({ type: stateActionType_1.StateActionType.DeselectAllChildren, payload: val.id });
-        }
-        else {
-            dispatchState({ type: stateActionType_1.StateActionType.ChangeSelection, payload: { value: val.state, itemId: val.id } });
-        }
-    }, [isFullSelectionMode, state.isAllSelected]);
-    const handleClose = (0, react_1.useCallback)(() => {
-        dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: "" });
-        if (!triggerRef.current) {
-            return;
-        }
-        if ((0, dialogHelpers_1.isFocusable)(triggerRef.current)) {
-            triggerRef.current.focus();
-            return;
-        }
-        const focusable = [...Array.from(triggerRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR))];
-        (focusable[0] || triggerRef.current).focus();
-    }, []);
-    const handleEscape = (0, react_1.useCallback)((e) => {
-        var _a;
-        if (e && state.isOpenCombo) {
-            (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.stopImmediatePropagation();
-        }
-        dispatchState({ type: stateActionType_1.StateActionType.SetIsOpenCombo, payload: false });
-        dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
-        abortToken.current.abort();
-        abortToken.current = new AbortController();
-        handleClose();
-    }, [handleClose, state.isOpenCombo]);
-    const memoizedAllowClosing = (0, react_1.useMemo)(() => state.currentId === undefined || state.currentId === groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID, [state.currentId]);
-    const handleSingleSelection = (0, react_1.useCallback)((reset, selected) => {
-        const shouldBeClosed = !hasApplyButton && memoizedAllowClosing && (!reset && selected || reset);
-        dispatchState({ type: stateActionType_1.StateActionType.ChangeSingleSelection, payload: { value: selected, reset: reset } });
-        shouldBeClosed && handleEscape();
-        shouldBeClosed && dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: "" });
-    }, [handleEscape, hasApplyButton, memoizedAllowClosing]);
-    const handleSelectAllClick = (0, react_1.useCallback)((isAllSelect) => {
-        if (isFullSelectionMode) {
-            dispatchState({ type: stateActionType_1.StateActionType.ToggleValueForAllSelected, payload: undefined });
-            return;
-        }
-        dispatchState({ type: isAllSelect ? stateActionType_1.StateActionType.DeselectAllChildren : stateActionType_1.StateActionType.SelectAllChildren, payload: state.currentId || groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID });
-    }, [isFullSelectionMode, state.currentId]);
-    const handleSelectAllInSearch = (0, react_1.useCallback)((isAllSelect) => {
-        if (isFullSelectionMode && state.isAllSelected) {
-            dispatchState({ type: stateActionType_1.StateActionType.DeselectItemsFromAllSelected, payload: undefined });
-            return;
-        }
-        const dataForChange = (0, dropdownHelper_1.getDataForChange)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds, isAllSelect);
-        dispatchState({ type: stateActionType_1.StateActionType.ChangeBulkSelection, payload: { itemsIds: dataForChange, value: !isAllSelect } });
-    }, [isFullSelectionMode, state.isAllSelected, state.listData, state.isNestedList, state.selectedIds]);
-    const handleClearClick = (0, react_1.useCallback)(() => {
-        dispatchState({ type: stateActionType_1.StateActionType.ResetSelection, payload: undefined });
-    }, []);
-    const handleCancelClick = (0, react_1.useCallback)(() => {
-        dispatchState({ type: stateActionType_1.StateActionType.ResetStateToGlobal, payload: undefined });
-        dispatchState({ type: stateActionType_1.StateActionType.SetIsOpenCombo, payload: false });
-        dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
-        abortToken.current.abort();
-        abortToken.current = new AbortController();
-        handleClose();
-    }, [handleClose]);
-    const handleApplyClick = (0, react_1.useCallback)(() => {
-        dispatchState({ type: stateActionType_1.StateActionType.SetGlobalState, payload: Object.assign({ selected: state.selectedIds, isAllSelected: state.isAllSelected }, (isCheckboxMode ? { isChecked: state.isChecked } : {})) });
-        dispatchState({ type: stateActionType_1.StateActionType.SetIsOpenCombo, payload: false });
-        dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
-        abortToken.current.abort();
-        abortToken.current = new AbortController();
-        handleClose();
-        dispatchState({ type: stateActionType_1.StateActionType.SetDataProblem, payload: (0, dropdownHelper_1.checkIsDataProblem)(state.selectedIds, state.groupsMap) });
-        const preparedItems = (0, dropdownHelper_1.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(newValue);
-        }
-        else {
-            const newValue = isCheckboxMode
-                ? { selected: preparedItems, isChecked: state.isChecked }
-                : preparedItems;
-            onChange(newValue);
-        }
-    }, [state.selectedIds, state.isAllSelected, state.groupsMap, state.groupsMapSelected, state.isChecked, handleClose, isFullSelectionMode, isCheckboxMode, onChange]);
-    const customGetData = (0, react_1.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 = (0, react_1.useCallback)((dta, searchVal) => {
-        if (dta.length && !searchVal && (getData || dataItems || isQueryMode)) {
-            dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: dta });
-            previousMapDataItems.current = [...dta];
-        }
-        dispatchState({ type: stateActionType_1.StateActionType.SetListData, payload: dta });
-        searchVal && dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
-        dta.length ? dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined }) : dispatchState({ type: stateActionType_1.StateActionType.ShowEmptyList, payload: undefined });
-    }, [getData, dataItems, isQueryMode]);
-    const handleError = (0, react_1.useCallback)((e) => {
-        errorHandler(e);
-        dispatchState({ type: stateActionType_1.StateActionType.NothingToShow, payload: undefined });
-    }, [errorHandler]);
-    const handleDataQuery = (0, react_1.useCallback)((dta, searchVal) => {
-        if (dta.length && !searchVal && !(0, dropdownHelper_1.compareObjectsArrays)(dta, previousMapDataItems.current)) {
-            dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: dta });
-            previousMapDataItems.current = [...dta];
-        }
-        dispatchState({ type: stateActionType_1.StateActionType.SetListData, payload: dta });
-        searchVal && dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
-        dta.length ? dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined }) : dispatchState({ type: stateActionType_1.StateActionType.ShowEmptyList, payload: undefined });
-    }, []);
-    const handleQueryMode = (0, react_1.useCallback)((searchValue, isChecked) => {
-        setChecked && isChecked !== undefined && setChecked(isChecked);
-        setSearch && setSearch(searchValue || "");
-    }, [setChecked, setSearch]);
-    const debouncedGetData = (0, useDebounce_1.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 = (0, react_1.useCallback)((signal, searchValue, isChecked) => {
-        !isQueryMode && dispatchState({ type: stateActionType_1.StateActionType.ShowWaiting, payload: undefined });
-        isQueryMode ? handleQueryMode(searchValue, isChecked) : debouncedGetData(signal, searchValue, isChecked);
-    }, [debouncedGetData, handleQueryMode, isQueryMode]);
-    (0, react_1.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]);
-    (0, react_1.useEffect)(() => {
-        // when change inside
-        if (hasApplyButton) {
-            return;
-        }
-        const prevIsCheckedValue = isCheckboxMode ?
-            prevSelectedIds.current.isChecked : undefined;
-        if ((0, dropdownHelper_1.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 ((0, dropdownHelper_1.compareStringsArrays)(state.selectedIds, isFullSelectionMode || isCheckboxMode ? value.selected : value)
-            && state.isAllSelected === (isFullSelectionMode ? value.isAllSelected : undefined)
-            && state.isChecked === (isCheckboxMode ? value.isChecked : undefined)) {
-            return;
-        }
-        dispatchState({ type: stateActionType_1.StateActionType.SetDataProblem, payload: (0, dropdownHelper_1.checkIsDataProblem)(state.selectedIds, state.groupsMap) });
-        const preparedItems = (0, dropdownHelper_1.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(newValue);
-        }
-        else {
-            const newValue = isCheckboxMode
-                ? { selected: preparedItems, isChecked: state.isChecked }
-                : preparedItems;
-            onChange(newValue);
-        }
-    }, [onChange, value, state.selectedIds, state.groupsMapSelected, state.groupsMap, hasApplyButton, state.isAllSelected, isFullSelectionMode, state.isChecked, isCheckboxMode]);
-    (0, react_1.useEffect)(() => {
-        // when change outside
-        const selectedValue = isFullSelectionMode || isCheckboxMode ? value.selected : value;
-        const isAllSelectedValue = isFullSelectionMode ? value.isAllSelected : undefined;
-        const isCheckedValue = isCheckboxMode ? value.isChecked : undefined;
-        if ((0, dropdownHelper_1.compareStringsArrays)(prevSelection.current.selected, selectedValue) && isAllSelectedValue === prevSelection.current.isAllSelected && prevSelection.current.isChecked === isCheckedValue) {
-            return;
-        }
-        prevSelection.current = { selected: selectedValue, isAllSelected: isAllSelectedValue, isChecked: isCheckedValue };
-        if ((0, dropdownHelper_1.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_1.StateActionType.SetGlobalState,
-            payload: { selected: selectedValue, isAllSelected: isAllSelectedValue, isChecked: isCheckedValue } });
-        dispatchState({ type: stateActionType_1.StateActionType.SetState,
-            payload: { selected: selectedValue, isAllSelected: isAllSelectedValue } });
-        isCheckboxMode && isCheckedValue !== undefined && dispatchState({ type: stateActionType_1.StateActionType.SetIsChecked, payload: isCheckedValue });
-    }, [value, state.selectedIds, state.globalSelectedIds, hasApplyButton, isFullSelectionMode, state.isAllSelected,
-        state.globalIsAllSelected, isCheckboxMode, state.globalIsChecked, state.isChecked]);
-    (0, react_1.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]);
-    (0, useEscape_1.useEscape)(triggerRef, handleEscape, state.isOpenCombo);
-    const onSearchChange = (0, react_1.useCallback)((event) => {
-        const newValue = event ? event.currentTarget.value : "";
-        dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: newValue });
-        const currentAbort = abortToken.current;
-        controlData(currentAbort.signal, newValue, state.isChecked);
-    }, [controlData, state.isChecked]);
-    const onInputChange = (0, react_1.useCallback)((newValue) => {
-        dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: newValue || "" });
-        const currentAbort = abortToken.current;
-        controlData(currentAbort.signal, newValue, state.isChecked);
-    }, [controlData, state.isChecked]);
-    const containerClassName = (0, classNames_1.classNames)([
-        "zen-dropdown",
-        "zen-dropdown__container",
-        className || ""
-    ]);
-    const handleCheckboxChange = (0, react_1.useCallback)((e) => {
-        const isChecked = e.target.checked;
-        dispatchState({ type: stateActionType_1.StateActionType.SetIsChecked, payload: isChecked });
-        prevIsChecked.current = isChecked;
-        const currentAbort = abortToken.current;
-        controlData(currentAbort.signal, state.inputValue, isChecked);
-    }, [controlData, state.inputValue]);
-    const handleTriggerClick = (0, react_1.useCallback)((newVal) => {
-        const currentAbort = abortToken.current;
-        dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
-        dispatchState({ type: stateActionType_1.StateActionType.SetIsOpenCombo, payload: newVal });
-        newVal && controlData(currentAbort.signal, state.inputValue, state.isChecked);
-        !newVal && dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: "" });
-    }, [controlData, state.inputValue, state.isChecked]);
-    const handleReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
-        var _a;
-        if (!state.showList) {
-            return;
-        }
-        if (!isCurrentOpen) {
-            return;
-        }
-        const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.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]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (!state.isOpenCombo || !state.showList) {
-            return;
-        }
-        const firstFocusable = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.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]);
-    (0, react_1.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) => (0, dropdownHelper_1.prepareSelectedIdsToItems)(items, state.groupsMap, state.groupsMapSelected));
-    }, [getNamedItems, state.groupsMap, state.groupsMapSelected, state.namelessIds]);
-    (0, react_1.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]);
-    (0, react_1.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 = (0, react_1.useMemo)(() => !(forceSelection && !state.defaultValue.length && !hasApplyButton), [forceSelection, hasApplyButton, state.defaultValue.length]);
-    const memoizedIsClearButtonDisabled = (0, react_1.useMemo)(() => {
-        if (forceSelection && !multiselect && !state.defaultValue.length) {
-            return true;
-        }
-        const isStringsTheSame = (0, dropdownHelper_1.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 = (0, react_1.useMemo)(() => (0, dropdownHelper_1.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 = (0, react_1.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[groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) || 0;
-        }
-        return (0, dropdownHelper_1.getSelectedCount)(hasApplyButton ? state.globalSelectedIds : state.selectedIds);
-    }, [hasApplyButton, state.globalIsAllSelected, state.globalSelectedIds, state.groupsMap, state.isAllSelected, state.selectedIds]);
-    // eslint-disable-next-line complexity
-    const getPopupContent = (0, react_1.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 (0, jsx_runtime_1.jsx)(skeletonList_1.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 = (0, dropdownHelper_1.compareStringsArrays)(state.selectedIds, state.defaultValue);
-            return (0, jsx_runtime_1.jsx)(dropdownList_1.EmptyList, { width: currentWidth, onClearClick: handleClearClick, onCancelClick: handleCancelClick, onApplyClick: handleApplyClick, hasApplyButton: hasApplyButton, isApplyDisabled: (0, dropdownHelper_1.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 = (0, dropdownHelper_1.createListDataOptions)(state, translate, isSearchMode ? (0, dropdownHelper_1.sortDropdownItemArray)(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID)
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                : (0, dropdownHelper_1.sortDropdownItemArray)(((_b = state.groupsMap[state.currentId || groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
-            return (0, jsx_runtime_1.jsx)(dropdownList_1.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] ? (0, groupsHelper_1.getGroupDescription)(state.groupsMap[state.currentId], translate) : undefined, filterName: isMobile ? undefined : filterName, isAllSelected: currentAllSelected ? currentAllSelected : (isSearchMode ? (0, dropdownHelper_1.isEveryItemSelected)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds)
-                    : (currentAllSelected === undefined ? (0, dropdownHelper_1.isAllChildrenSelected)(state, state.currentId || groupsHelper_1.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
-                        && (0, dropdownHelper_1.isAllItemsHasOneParent)(state.listData.filter(el => el.id !== groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID), 
-                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        (((_c = state.groupsMap[groupsHelper_1.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 ? (0, dropdownHelper_1.getStringFromAllSelected)(state.groupsMap, translate)
-        : (0, dropdownHelper_1.getStringFromSelected)(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate);
-    const memoizedCurrentSelection = (0, react_1.useMemo)(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
-    const parentTriggerWidth = ((_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 420;
-    return (0, jsx_runtime_1.jsxs)("div", { className: containerClassName, ref: comboboxRef, children: [chip ? (0, jsx_runtime_1.jsx)(chip_1.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 }) :
-                (0, jsx_runtime_1.jsx)(dropdownTrigger_1.DropdownTrigger, { className: (0, classNames_1.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, error: error }), (0, jsx_runtime_1.jsx)(dropdownPopup_1.DropdownPopup, { alignment: alignment, triggerRef: triggerRef, classNamePopup: classNamePopup, mobileSheetStackingClassName: mobileSheetStackingClassName, 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, children: getPopupContent })] });
+const DropDownFormField = (0, formField_1.FormField)(dropdownRaw_1.DropdownRaw);
+// TODO: needed for Banner. Can use better type for children?
+// TODO: add tests
+const Dropdown = (_a) => {
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(DropDownFormField, Object.assign({}, props));
 };
 exports.Dropdown = Dropdown;
 exports.TRANSLATIONS = [
-    ...dropdownTrigger_1.TRANSLATIONS,
-    ...dropdownList_1.TRANSLATIONS
+    "Filter by group",
+    "Open filter",
+    "Clear search",
+    "Select all",
+    "Deselect all",
+    "Clear",
+    "Back",
+    "No data"
 ];

package/dist/dropdown/dropdownPopup.d.ts

@@ -1,34 +1,4 @@
-import { RefObject } from "react";
-import { TAlignment } from "../absolute/absolute";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-export interface IDropdownPopup extends IZenComponentProps {
-    alignment?: TAlignment;
-    triggerRef: RefObject<HTMLElement | null>;
-    classNamePopup?: string;
-    mobileSheetStackingClassName?: string;
-    isMobile: boolean;
-    dialogAriaLabel?: string;
-    disabled?: boolean;
-    filterName?: string;
-    hasApplyButton?: boolean;
-    inputId?: string;
-    isClearButtonDisabled: boolean;
-    isApplyButtonDisabled: boolean;
-    isWithFooter: boolean;
-    isOpenCombo: boolean;
-    searchField?: boolean;
-    placeholder?: string;
-    inputValue?: string;
-    handleApplyClick: () => void;
-    handleClearClick: () => void;
-    handleTriggerClick: (newVal: boolean) => void;
-    onInputChange: (newValue?: string) => void;
-    inputRef: RefObject<HTMLInputElement | null>;
-    contentRef: RefObject<HTMLDivElement | null>;
-    onReadyForFocus?: (isCurrentOpen: boolean) => void;
-    handleCheckboxChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    checkboxLabel?: string;
-    isChecked?: boolean;
-    isSearchInPopup?: boolean;
-}
-export declare const DropdownPopup: React.FC<IDropdownPopup>;
+/// <reference types="react" />
+import { IDropdownPopup as IDropdownPopupRaw } from "../dropdownRaw/dropdownPopup";
+export declare const DropdownPopup: import("react").FC<IDropdownPopupRaw>;
+export type IDropdownPopup = IDropdownPopupRaw;

package/dist/dropdown/dropdownPopup.js

@@ -1,35 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownPopup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const mobileSheet_1 = require("../mobileSheet/mobileSheet");
-const button_1 = require("../button/button");
-const buttonType_1 = require("../button/buttonType");
-const controlledPopup_1 = require("../controlledPopup/controlledPopup");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const searchInput_1 = require("../searchInput/searchInput");
-const useLanguage_1 = require("../utils/localization/useLanguage");
-const footerButtons_1 = require("../footerButtons/footerButtons");
-const checkbox_1 = require("../checkbox/checkbox");
-const useScrollWithAndroidKeyboard_1 = require("../utils/useScrollWithAndroidKeyboard");
-const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, mobileSheetStackingClassName, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const triggerId = (0, react_1.useId)();
-    const { handleFocus, handleBlur, wrapperClass } = (0, useScrollWithAndroidKeyboard_1.useScrollWithAndroidKeyboard)();
-    const memoizedHandleHide = (0, react_1.useCallback)(() => {
-        handleTriggerClick(false);
-    }, [handleTriggerClick]);
-    const memoizedMobileContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchField ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-dropdown-mobile-sheet__search", onChange: onInputChange, onBlur: handleBlur, onFocus: handleFocus, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, handleCheckboxChange ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__checkbox-container", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: children })] }), [searchField, onInputChange, handleBlur, handleFocus, inputValue, inputRef, inputId, triggerId, disabled, placeholder,
-        translate, handleCheckboxChange, isChecked, checkboxLabel, contentRef, children]);
-    const memoizedMobileFooter = (0, react_1.useMemo)(() => {
-        if (!isWithFooter) {
-            return null;
-        }
-        return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [hasApplyButton ? (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyButtonDisabled, className: "zen-ellipsis", title: translate("Apply"), children: translate("Apply") }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleClearClick, disabled: isClearButtonDisabled, className: "zen-ellipsis", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") })] });
-    }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-dropdown--mobile", classNamePopup || ""]), wrapperClassName: wrapperClass, stackingClassName: mobileSheetStackingClassName, label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedMobileContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
-    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: isOpenCombo, className: (0, classNames_1.classNames)(["zen-dropdown-popup zen-shadow-dropdown-default", classNamePopup || ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "withTrigger", alignment: alignment, shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: dialogAriaLabel || placeholder || translate("Filter by group"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, children: [searchField && isSearchInPopup ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-popup__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-dropdown-chip__search", onChange: onInputChange, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, children] }) }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, disabled, handleTriggerClick, inputId, inputRef, inputValue, isOpenCombo, isSearchInPopup, onInputChange, placeholder, searchField, translate, triggerId, triggerRef]);
-    return isMobile ? memoizedMobileView : memoizedDesktopView;
-};
-exports.DropdownPopup = DropdownPopup;
+const dropdownPopup_1 = require("../dropdownRaw/dropdownPopup");
+exports.DropdownPopup = dropdownPopup_1.DropdownPopup;