@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/esm/dropdownRaw/dropdownRaw.js

@@ -0,0 +1,537 @@
+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 { StateActionType } from "./stateReducer/stateActionType";
+import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
+import { useEscape } from "../commonHelpers/hooks/useEscape";
+import { checkIsDataProblem, compareObjectsArrays, compareStringsArrays, createListDataOptions, getDataForChange, getListDataWithDisabled, getSelectedCount, getStringFromAllSelected, getStringFromSelected, isAllChildrenSelected, isAllItemsHasOneParent, isEveryItemSelected, prepareSelectedIdsToItems, sortDropdownItemArray } from "./dropdownHelper";
+import { DropdownTrigger } from "./dropdownTrigger";
+import { isFocusable } from "../dialog/dialogHelpers";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { DropdownPopup } from "./dropdownPopup";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { useDebounce } from "../commonHelpers/hooks/useDebounce";
+import { SkeletonList } from "../skeletonList/skeletonList";
+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 { 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: [] });
+        });
+    }, [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;
+        // 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 })] });
+};
+DropdownRaw.displayName = "DropdownRaw";
+export const TRANSLATIONS = [
+    "Filter by group",
+    "Open filter",
+    "Clear search",
+    "Select all",
+    "Deselect all",
+    "Clear",
+    "Back",
+    "No data"
+];

package/{dist/dropdown → esm/dropdownRaw}/dropdownSearchableTrigger.d.ts

@@ -17,9 +17,11 @@ interface IDropdownSearchableTrigger {
     isError?: boolean;
     fullWidth?: boolean;
     ref?: RefObject<HTMLDivElement | null>;
+    name?: string;
+    onBlur?: () => void;
 }
 export declare const DropdownSearchableTrigger: {
-    ({ value, className, onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref, ...otherProps }: IDropdownSearchableTrigger): import("react/jsx-runtime").JSX.Element;
+    ({ value, className, onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref, name, onBlur, ...otherProps }: IDropdownSearchableTrigger): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/esm/dropdownRaw/dropdownSearchableTrigger.js

@@ -0,0 +1,59 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId, useRef } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { TextInputRaw } from "../textInputRaw/textInputRaw";
+import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
+import { IconCrossThin } from "../icons/deprecated/iconCrossThin";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { useDrive } from "../utils/theme/useDrive";
+import { FormSectionContext } from "../formSection/utils/formSectionProvider";
+// eslint-disable-next-line complexity
+export const DropdownSearchableTrigger = (_a) => {
+    var { value, className = "", onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref, name, onBlur } = _a, otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "isError", "fullWidth", "ref", "name", "onBlur"]);
+    const { isFormSection } = useContext(FormSectionContext);
+    const { translate } = useLanguage();
+    const triggerId = useId();
+    const driveComponentClass = useDriveClassName("zen-dropdown-searchable-trigger");
+    const isDrive = useDrive();
+    const inputStyle = width ? { style: { width: `${width}px` } } : {};
+    const isLargeNumber = count && count > 99;
+    const clearRef = useRef(null);
+    const handleKeydown = (e) => {
+        if (e.key === "Enter" && !isOpenPopup) {
+            handleClick(true);
+        }
+        if (e.key === "Escape" && isOpenPopup && e.nativeEvent) {
+            e.nativeEvent.stopImmediatePropagation();
+            handleClick(false);
+        }
+    };
+    const clickHandler = (e) => {
+        if (e.target === inputRef.current && isOpenPopup || e.target === clearRef.current && isOpenPopup) {
+            return;
+        }
+        handleClick(!isOpenPopup);
+    };
+    const handleClearSearch = () => {
+        onChange(undefined);
+    };
+    return _jsxs("div", Object.assign({ className: classNames(["zen-dropdown-searchable-trigger", isError ? "zen-dropdown-searchable-trigger--error" : "",
+            driveComponentClass || "", isFormSection ? "zen-dropdown-searchable-trigger--form-item" : "", disabled ? "zen-dropdown-searchable-trigger--disabled" : ""]) }, inputStyle, { ref: ref }, otherProps, { onClick: disabled ? () => { } : clickHandler, role: "combobox", "aria-label": placeholder, children: [_jsxs("div", { onBlur: onBlur, className: classNames(["zen-dropdown-searchable-trigger__search-container", className]), children: [_jsx("div", { className: "zen-dropdown-searchable-trigger__input-container", onKeyDown: handleKeydown, children: _jsx(TextInputRaw, { value: value, placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"), className: classNames(["zen-dropdown-searchable-trigger__input", "zen-ellipsis", currentSelection ? "zen-dropdown-searchable-trigger__input--selected" : ""]), onChange: onChange, disabled: disabled, type: "text", ref: inputRef, id: id || triggerId }) }), count ? _jsx("div", { className: "zen-dropdown-searchable-trigger__label-element", children: _jsx("div", { className: "zen-dropdown-searchable-trigger__counter", children: _jsx("span", { children: isLargeNumber ? "99+" : count }) }) }) : null, value && _jsx("button", { type: "button", className: "zen-dropdown-searchable-trigger__close-button", ref: clearRef, title: translate("Clear search"), onClick: handleClearSearch, children: _jsx(IconCrossThin, { size: isDrive ? "big" : "small" }) })] }), _jsx("button", { name: name, type: "button", onMouseDown: e => e.preventDefault(), tabIndex: -1, "aria-hidden": "true", className: classNames(["zen-dropdown-searchable-trigger__popup-trigger", isOpenPopup ? "zen-dropdown-searchable-trigger__popup-trigger--active" : ""]), title: title || translate(isOpenPopup ? "Close filter" : "Open filter"), children: _jsx(IconChevronDownSmall, { className: isOpenPopup ? "zen-dropdown-searchable-trigger__arrow-icon--up" : "zen-dropdown-searchable-trigger__arrow-icon--down", size: isDrive ? "huge" : "large" }) })] }));
+};
+DropdownSearchableTrigger.displayName = "DropdownSearchableTrigger";
+export const TRANSLATIONS = [
+    "Filter by group",
+    "Open filter",
+    "Clear search"
+];