@vkontakte/vkui 7.5.4 → 7.6.1

package/dist/components/CustomSelect/CustomSelect.js

@@ -4,92 +4,69 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { classNames, debounce } from "@vkontakte/vkjs";
+import { classNames } from "@vkontakte/vkjs";
+import { getRequiredValueByKey } from "../../helpers/getValueByKey.js";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
-import { useFocusWithin } from "../../hooks/useFocusWithin.js";
-import { useStateWithPrev } from "../../hooks/useStateWithPrev.js";
 import { callMultiple } from "../../lib/callMultiple.js";
 import { useDOM } from "../../lib/dom.js";
 import { defaultFilterFn } from "../../lib/select.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
-import { warnOnce } from "../../lib/warnOnce.js";
+import { preventDefault } from "../../lib/utils.js";
 import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown.js";
 import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption.js";
-import { DropdownIcon } from "../DropdownIcon/DropdownIcon.js";
-import { NOT_SELECTED, remapFromNativeValueToSelectValue, remapFromSelectValueToNativeValue } from "../NativeSelect/NativeSelect.js";
+import { NOT_SELECTED, remapFromNativeValueToSelectValue } from "../NativeSelect/NativeSelect.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
-import { CustomSelectClearButton } from "./CustomSelectClearButton.js";
 import { CustomSelectInput } from "./CustomSelectInput/CustomSelectInput.js";
+import { checkMixControlledAndUncontrolledState, checkOptionsValueType, filter, findSelectedIndex, getOptionByValue } from "./helpers.js";
+import { useAfterItems } from "./hooks/useAfterItems.js";
+import { useDropdownOpenedController } from "./hooks/useDropdownOpenedController.js";
+import { useFocusedOptionController } from "./hooks/useFocusedOptionController.js";
+import { useInputKeyboardController } from "./hooks/useInputKeyboardController.js";
+import { useInputValueController } from "./hooks/useInputValueController.js";
+import { useScrollListController } from "./hooks/useScrollListController.js";
+import { useSelectedOptionController } from "./hooks/useSelectedOptionController.js";
 const sizeYClassNames = {
     none: "vkuiCustomSelect__sizeYNone",
     compact: "vkuiCustomSelect__sizeYCompact"
 };
-const findIndexAfter = (options = [], startIndex = -1)=>{
-    if (startIndex >= options.length - 1) {
-        return -1;
-    }
-    return options.findIndex((option, i)=>i > startIndex && !option.disabled);
-};
-const findIndexBefore = (options = [], endIndex = options.length)=>{
-    let result = -1;
-    if (endIndex <= 0) {
-        return result;
-    }
-    for(let i = endIndex - 1; i >= 0; i--){
-        let option = options[i];
-        if (!option.disabled) {
-            result = i;
-            break;
-        }
-    }
-    return result;
-};
-const warn = warnOnce('CustomSelect');
-const checkOptionsValueType = (options)=>{
-    if (new Set(options.map((item)=>typeof item.value)).size > 1) {
-        warn('Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.', 'error');
-    }
-};
-const checkMixControlledAndUncontrolledState = (oldIsControlled, newIsControlled)=>{
-    if (!oldIsControlled && newIsControlled) {
-        warn(`Похоже, что компонент был переведен из состояния Uncontrolled в Controlled. Пожалуйста, не делайте так. Если вам нужно отобразить невыбранное состояние компонента, используйте value=null вместо undefined`, 'error');
-    }
-    if (oldIsControlled && !newIsControlled) {
-        warn(`Похоже, что компонент был переведен из состояния Controlled в Uncontrolled. Пожалуйста, не делайте так. Если вам нужно отобразить невыбранное состояние компонента, используйте value=null вместо undefined`, 'error');
-    }
-};
 function defaultRenderOptionFn(_param) {
     var { option } = _param, props = _object_without_properties(_param, [
         "option"
     ]);
     return /*#__PURE__*/ _jsx(CustomSelectOption, _object_spread({}, props));
 }
-const handleOptionDown = (e)=>{
-    e.preventDefault();
-};
-function findSelectedIndex(options = [], value) {
-    if (value === NOT_SELECTED.CUSTOM) {
-        return -1;
-    }
-    var _options_findIndex;
-    return (_options_findIndex = options.findIndex((item)=>{
-        value = typeof item.value === 'number' ? Number(value) : value;
-        return item.value === value;
-    })) !== null && _options_findIndex !== void 0 ? _options_findIndex : -1;
-}
-const filter = (options, inputValue, filterFn)=>{
-    return typeof filterFn === 'function' ? options.filter((option)=>filterFn(inputValue, option)) : options;
-};
-/* eslint-enable jsdoc/require-jsdoc */ function isMousePositionChanged(event, prevPosition) {
+function isMousePositionChanged(event, prevPosition) {
     return Math.abs(prevPosition.x - event.clientX) >= 1 || Math.abs(prevPosition.y - event.clientY) >= 1;
 }
+const FETCH_STATUS_RESET_DELAY = 2000;
+const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = 'Список опций загружается...', fetchingCompletedLabel = `Загружено опций: ${options.length}` })=>{
+    const [status, setStatus] = React.useState('none');
+    const content = getRequiredValueByKey(status, {
+        fetching: fetchingInProgressLabel,
+        loaded: typeof fetchingCompletedLabel === 'function' ? fetchingCompletedLabel(options.length) : fetchingCompletedLabel,
+        none: ''
+    });
+    useIsomorphicLayoutEffect(function updateStatus() {
+        if (fetching) {
+            setStatus('fetching');
+        } else {
+            setStatus('loaded');
+            setTimeout(()=>setStatus('none'), FETCH_STATUS_RESET_DELAY);
+        }
+    }, [
+        fetching
+    ]);
+    return /*#__PURE__*/ _jsx(VisuallyHidden, {
+        "aria-live": "polite",
+        children: content
+    });
+};
 /**
  * @see https://vkui.io/components/custom-select
  */ export function CustomSelect(props) {
-    const [opened, setOpened] = React.useState(false);
-    const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': optionsProp, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton = CustomSelectClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, onInputKeyDown, readOnly } = props, restProps = _object_without_properties(props, [
+    const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': options, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, 'onInputKeyDown': onInputKeyDownProp, readOnly, accessible = false, fetchingInProgressLabel, fetchingCompletedLabel } = props, restProps = _object_without_properties(props, [
         "before",
         "name",
         "className",
@@ -124,71 +101,92 @@ const filter = (options, inputValue, filterFn)=>{
         "required",
         "getSelectInputRef",
         "overscrollBehavior",
-        "onInputKeyDown",
-        "readOnly"
+        'onInputKeyDown',
+        "readOnly",
+        "accessible",
+        "fetchingInProgressLabel",
+        "fetchingCompletedLabel"
     ]);
     if (process.env.NODE_ENV === 'development') {
-        checkOptionsValueType(optionsProp);
+        checkOptionsValueType(options);
     }
     const { sizeY = 'none' } = useAdaptivity();
     const containerRef = React.useRef(null);
     const handleRootRef = useExternRef(containerRef, getRootRef);
-    const scrollBoxRef = React.useRef(null);
     const selectElRef = useExternRef(getRef);
-    const optionsWrapperRef = React.useRef(null);
-    const scrollPerformedRef = React.useRef(false);
-    const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
-    const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
-    const [inputValue, setInputValue] = React.useState('');
-    const [[nativeSelectValue, prevNativeSelectValue], setNativeSelectValue] = useStateWithPrev(()=>{
-        if (props.value !== undefined) {
-            return remapFromSelectValueToNativeValue(props.value);
-        }
-        if (defaultValue !== undefined) {
-            return remapFromSelectValueToNativeValue(defaultValue);
+    const selectInputRef = useExternRef(getSelectInputRef);
+    const propsValue = React.useMemo(()=>{
+        var _getOptionByValue;
+        if (props.value === undefined) {
+            return undefined;
         }
-        return NOT_SELECTED.NATIVE;
-    });
-    const [popperPlacement, setPopperPlacement] = React.useState(popupDirection);
-    const options = React.useMemo(()=>{
-        return filter(optionsProp, inputValue, filterFn);
+        var _getOptionByValue_value;
+        return (_getOptionByValue_value = (_getOptionByValue = getOptionByValue(options, props.value)) === null || _getOptionByValue === void 0 ? void 0 : _getOptionByValue.value) !== null && _getOptionByValue_value !== void 0 ? _getOptionByValue_value : null;
     }, [
+        options,
+        props.value
+    ]);
+    const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
+    const [popperPlacement, setPopperPlacement] = React.useState(popupDirection);
+    const { nativeSelectValue, setNativeSelectValue, selectedOptionValue, setSelectedOptionValue, onNativeSelectChange } = useSelectedOptionController({
+        value: propsValue,
+        defaultValue,
+        isControlledOutside,
+        allowClearButton,
+        onChange
+    });
+    const selected = React.useMemo(()=>options.find((option)=>option.value === selectedOptionValue), [
+        options,
+        selectedOptionValue
+    ]);
+    const { inputValue, onInputChange, resetInputValue, resetInputValueBySelectedOption } = useInputValueController({
+        options,
+        accessible,
+        selectedValue: selectedOptionValue,
+        onInputChange: onInputChangeProp
+    });
+    const filteredOptions = React.useMemo(()=>filter(options, searchable ? inputValue : '', filterFn), [
         filterFn,
         inputValue,
-        optionsProp
+        options,
+        searchable
     ]);
-    var _props_value, _ref;
-    const [selectedOptionIndex, setSelectedOptionIndex] = React.useState(findSelectedIndex(options, (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : defaultValue) !== null && _ref !== void 0 ? _ref : null));
-    React.useEffect(function updateOptionsIndexes() {
-        const value = props.value !== undefined ? props.value : remapFromNativeValueToSelectValue(nativeSelectValue);
-        const selectedIndex = findSelectedIndex(options, value);
-        setSelectedOptionIndex(selectedIndex);
-        setFocusedOptionIndex(selectedIndex);
+    const { scrollToElement, optionsWrapperRef, scrollBoxRef } = useScrollListController();
+    const { focusedOptionValue, setFocusedOptionValue, resetFocusedOption, focusOptionByIndex, focusOption, selectFocusedValue } = useFocusedOptionController({
+        selectedOptionValue,
+        filteredOptions,
+        scrollToElement
+    });
+    const scrollToSelectedOption = ()=>{
+        scrollToElement(findSelectedIndex(filteredOptions, selectedOptionValue), true);
+    };
+    const { opened, open, close, toggleOpened } = useDropdownOpenedController({
+        onOpen: callMultiple(selectFocusedValue, onOpen),
+        onOpened: scrollToSelectedOption,
+        onClose,
+        onClosed: accessible ? resetInputValueBySelectedOption : resetInputValue
+    });
+    React.useEffect(function updateOptionsValue() {
+        const value = propsValue !== undefined ? propsValue : remapFromNativeValueToSelectValue(nativeSelectValue);
+        setSelectedOptionValue(value);
+        setFocusedOptionValue(value);
     }, [
-        props.value,
+        propsValue,
         nativeSelectValue,
-        options,
-        filterFn
+        setFocusedOptionValue,
+        setSelectedOptionValue
     ]);
     React.useEffect(function syncIsControlledState() {
         setIsControlledOutside((oldIsControlled)=>{
-            const newIsControlled = props.value !== undefined;
+            const newIsControlled = propsValue !== undefined;
             checkMixControlledAndUncontrolledState(oldIsControlled, newIsControlled);
             return newIsControlled;
         });
     }, [
-        props.value
-    ]);
-    React.useEffect(function syncNativeSelectValueWithPropValue() {
-        if (props.value !== undefined) {
-            setNativeSelectValue(remapFromSelectValueToNativeValue(props.value));
-        }
-    }, [
-        props.value,
-        setNativeSelectValue
+        propsValue
     ]);
     useIsomorphicLayoutEffect(()=>{
-        if (options.some(({ value })=>nativeSelectValue === value) || allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE) {
+        if (filteredOptions.some(({ value })=>nativeSelectValue === value) || allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE) {
             var _selectElRef_current;
             const event = new Event('change', {
                 bubbles: true
@@ -198,117 +196,15 @@ const filter = (options, inputValue, filterFn)=>{
     }, [
         nativeSelectValue
     ]);
-    const selected = React.useMemo(()=>{
-        if (!options.length) {
-            return null;
-        }
-        return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;
-    }, [
-        options,
-        selectedOptionIndex
-    ]);
     const openedClassNames = React.useMemo(()=>opened && dropdownOffsetDistance === 0 && (popperPlacement.includes('top') ? "vkuiCustomSelect__popUp" : "vkuiCustomSelect__popDown") || undefined, [
         dropdownOffsetDistance,
         opened,
         popperPlacement
     ]);
-    const scrollToElement = React.useCallback((index, center = false)=>{
-        const dropdown = scrollBoxRef.current;
-        const optionsWrapper = optionsWrapperRef.current;
-        const item = dropdown && optionsWrapper ? optionsWrapper.children[index] : null;
-        if (!item || !dropdown) {
-            return;
-        }
-        const dropdownHeight = dropdown.offsetHeight;
-        const scrollTop = dropdown.scrollTop;
-        const itemTop = item.offsetTop;
-        const itemHeight = item.offsetHeight;
-        if (center) {
-            dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;
-        } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {
-            dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;
-        } else if (itemTop < scrollTop) {
-            dropdown.scrollTop = itemTop;
-        }
-    }, []);
-    const focusOptionByIndex = React.useCallback((index, scrollTo = true)=>{
-        var _options_length;
-        if (index === undefined || index < 0 || index > ((_options_length = options.length) !== null && _options_length !== void 0 ? _options_length : 0) - 1) {
-            return;
-        }
-        const option = options[index];
-        if (option === null || option === void 0 ? void 0 : option.disabled) {
-            return;
-        }
-        if (scrollTo) {
-            scrollToElement(index);
-        }
-        setFocusedOptionIndex(index);
-    }, [
-        options,
-        scrollToElement
-    ]);
-    const isValidIndex = React.useCallback((index)=>{
-        var _options_length;
-        return index >= 0 && index < ((_options_length = options.length) !== null && _options_length !== void 0 ? _options_length : 0);
-    }, [
-        options.length
-    ]);
-    useIsomorphicLayoutEffect(()=>{
-        if (!opened) {
-            scrollPerformedRef.current = false;
-            return;
-        }
-        if (scrollPerformedRef.current) {
-            return;
-        }
-        const isIndexValid = selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex);
-        if (scrollBoxRef.current && isIndexValid) {
-            scrollPerformedRef.current = true;
-            scrollToElement(selectedOptionIndex, true);
-        }
-    }, [
-        opened,
-        selectedOptionIndex,
-        scrollToElement,
-        isValidIndex
-    ]);
-    const [keyboardInput, setKeyboardInput] = React.useState('');
-    const resetKeyboardInput = React.useCallback(()=>{
-        setKeyboardInput('');
-    }, []);
-    const resetFocusedOption = React.useCallback(()=>{
-        setFocusedOptionIndex(-1);
-    }, []);
-    const onKeyboardInput = React.useCallback((key)=>{
-        if (!opened) {
-            setOpened(true);
-        }
-        resetFocusedOption();
-        const fullInput = keyboardInput + key;
-        setKeyboardInput(fullInput);
-    }, [
-        keyboardInput,
-        opened,
-        resetFocusedOption
-    ]);
-    const close = React.useCallback(()=>{
-        resetKeyboardInput();
-        setInputValue('');
-        setOpened(false);
-        resetFocusedOption();
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [
-        onClose,
-        resetKeyboardInput,
-        resetFocusedOption
-    ]);
-    const selectOption = React.useCallback((index)=>{
-        const item = options[index];
-        var _item_value;
-        setNativeSelectValue((_item_value = item === null || item === void 0 ? void 0 : item.value) !== null && _item_value !== void 0 ? _item_value : NOT_SELECTED.NATIVE);
+    const selectOption = React.useCallback((value)=>{
+        setNativeSelectValue(value !== null && value !== void 0 ? value : NOT_SELECTED.NATIVE);
         close();
-        const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync = isControlledOutside && props.value !== nativeSelectValue && nativeSelectValue === (item === null || item === void 0 ? void 0 : item.value);
+        const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync = isControlledOutside && propsValue !== nativeSelectValue && nativeSelectValue === value;
         if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {
             var _selectElRef_current;
             const event = new Event('change', {
@@ -318,33 +214,31 @@ const filter = (options, inputValue, filterFn)=>{
         }
     }, [
         close,
-        options,
-        selectElRef,
+        setNativeSelectValue,
         isControlledOutside,
-        props.value,
+        propsValue,
         nativeSelectValue,
-        setNativeSelectValue
+        selectElRef
     ]);
     const selectFocused = React.useCallback(()=>{
-        if (focusedOptionIndex === undefined || !isValidIndex(focusedOptionIndex)) {
+        if (focusedOptionValue === null) {
             return;
         }
-        selectOption(focusedOptionIndex);
+        selectOption(focusedOptionValue);
     }, [
-        focusedOptionIndex,
-        isValidIndex,
+        focusedOptionValue,
         selectOption
     ]);
-    const open = React.useCallback(()=>{
-        setOpened(true);
-        setFocusedOptionIndex(selectedOptionIndex);
-        if (typeof onOpen === 'function') {
-            onOpen();
-        }
-    }, [
-        onOpen,
-        selectedOptionIndex
-    ]);
+    const onInputKeyDown = useInputKeyboardController({
+        opened,
+        open,
+        close,
+        resetFocusedOption,
+        selectFocused,
+        focusOption,
+        scrollBoxRef,
+        onInputKeyDown: onInputKeyDownProp
+    });
     const onBlur = React.useCallback(()=>{
         var _selectElRef_current;
         close();
@@ -365,148 +259,15 @@ const filter = (options, inputValue, filterFn)=>{
     }, [
         selectElRef
     ]);
-    const onClick = React.useCallback(()=>{
-        if (opened) {
-            close();
-        } else {
-            open();
-        }
-    }, [
-        close,
-        open,
-        opened
-    ]);
-    const handleKeyUp = React.useMemo(()=>debounce(resetKeyboardInput, 1000), [
-        resetKeyboardInput
-    ]);
-    const focusOption = React.useCallback((type)=>{
-        let index = focusedOptionIndex;
-        if (type === 'next') {
-            const nextIndex = findIndexAfter(options, index);
-            index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index
-        } else if (type === 'prev') {
-            const beforeIndex = findIndexBefore(options, index);
-            index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index
-        }
-        focusOptionByIndex(index);
-    }, [
-        focusOptionByIndex,
-        focusedOptionIndex,
-        options
-    ]);
-    const onNativeSelectChange = (e)=>{
-        // для ситуаций, когда в опциях value это string а value/defaultValue это number
-        // и наоборот, приводим значение nativeSelectValue из стейта к строке.
-        // ведь nativeSelect всегда возвращает string в onChange, а пользователь
-        // может использовать number для опций
-        //
-        // native select всегда возвращает string в качестве value в onChange
-        // Когда селект контролируемый, то пользователь, в onChange может сохранить в свой стейт строку (например '3'), хотя
-        // в качестве value опции может использовать число (3),
-        // тогда строчное значение value ('3') из стейта пользователя
-        // будет передано в CustomSelect, и после синхронизации nativeSelectValue (3) и props.value ('3') и после клика на уже выбранную опцию (3),
-        // когда nativeSelectValue обновится на значение опции (число 3),
-        // сравнение nativeSelectValue (3) и prevNativeSelectValue ('3') может не сработать лишь из-за того, что они в разных типах.
-        const convertedNativeSelectValue = typeof nativeSelectValue === 'number' && (typeof props.value === 'string' || typeof prevNativeSelectValue === 'string') ? String(nativeSelectValue) : nativeSelectValue;
-        const isCalledWithSameControlledOptionValue = isControlledOutside && props.value === remapFromNativeValueToSelectValue(convertedNativeSelectValue);
-        const isNativeValueChanged = convertedNativeSelectValue !== prevNativeSelectValue && prevNativeSelectValue !== undefined;
-        const isTriggeredByClearButton = allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE;
-        const shouldCallOnChange = !isCalledWithSameControlledOptionValue && (isNativeValueChanged || isTriggeredByClearButton);
-        if (!shouldCallOnChange) {
-            return;
-        }
-        const remappedNativeValue = remapFromNativeValueToSelectValue(e.currentTarget.value);
-        if (e.target.value === NOT_SELECTED.NATIVE) {
-            e.target.value = '';
-        }
-        if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
-            e.currentTarget.value = '';
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(e, remappedNativeValue);
-    };
-    const onInputChange = React.useCallback((e)=>{
-        onInputChangeProp && onInputChangeProp(e);
-        setInputValue(e.target.value);
-    }, [
-        onInputChangeProp
-    ]);
-    const areOptionsShown = React.useCallback(()=>{
-        return scrollBoxRef.current !== null;
-    }, []);
-    const handleKeyDownSelect = React.useCallback((event)=>{
-        if (event.key.length === 1 && event.key !== ' ') {
-            onKeyboardInput(event.key);
-            return;
-        }
-        [
-            'ArrowUp',
-            'ArrowDown',
-            'Escape',
-            'Enter'
-        ].includes(event.key) && areOptionsShown() && event.preventDefault();
-        switch(event.key){
-            case 'ArrowUp':
-                if (opened) {
-                    areOptionsShown() && focusOption('prev');
-                } else {
-                    open();
-                }
-                break;
-            case 'ArrowDown':
-                if (opened) {
-                    areOptionsShown() && focusOption('next');
-                } else {
-                    open();
-                }
-                break;
-            case 'Escape':
-                close();
-                break;
-            case 'Backspace':
-            case 'Delete':
-                {
-                    if (!opened) {
-                        setOpened(true);
-                    }
-                    resetFocusedOption();
-                    break;
-                }
-            case 'Enter':
-            case 'Spacebar':
-            case ' ':
-                if (opened) {
-                    areOptionsShown() && selectFocused();
-                } else {
-                    open();
-                }
-                break;
-        }
-    }, [
-        areOptionsShown,
-        close,
-        focusOption,
-        onKeyboardInput,
-        open,
-        opened,
-        selectFocused,
-        resetFocusedOption
-    ]);
-    const handleInputKeydown = React.useCallback((event)=>{
-        onInputKeyDown === null || onInputKeyDown === void 0 ? void 0 : onInputKeyDown(event, opened);
-    }, [
-        opened,
-        onInputKeyDown
-    ]);
-    const _onInputKeyDown = callMultiple(handleKeyDownSelect, handleInputKeydown);
     const handleOptionClick = React.useCallback((e)=>{
         var _e_currentTarget_parentNode;
         const index = Array.prototype.indexOf.call((_e_currentTarget_parentNode = e.currentTarget.parentNode) === null || _e_currentTarget_parentNode === void 0 ? void 0 : _e_currentTarget_parentNode.children, e.currentTarget);
-        const option = options[index];
+        const option = filteredOptions[index];
         if (option && !option.disabled) {
-            selectOption(index);
+            selectOption(option.value);
         }
     }, [
-        options,
+        filteredOptions,
         selectOption
     ]);
     const lastMousePositionRef = React.useRef({
@@ -522,8 +283,8 @@ const filter = (options, inputValue, filterFn)=>{
     ]);
     const popupAriaId = React.useId();
     const renderOption = React.useCallback((option, index)=>{
-        const hovered = index === focusedOptionIndex;
-        const selected = index === selectedOptionIndex;
+        const hovered = option.value === focusedOptionValue;
+        const selected = option.value === selectedOptionValue;
         return /*#__PURE__*/ _jsx(React.Fragment, {
             children: renderOptionProp(_object_spread({
                 option,
@@ -532,7 +293,7 @@ const filter = (options, inputValue, filterFn)=>{
                 selected,
                 disabled: option.disabled,
                 onClick: handleOptionClick,
-                onMouseDown: handleOptionDown,
+                onMouseDown: preventDefault,
                 // Используем `onMouseMove` вместо `onMouseEnter/onMouseOver`.
                 // Потому что если при навигации с клавиатуры курсор наведён на
                 // список, то при первом автоматическом скролле списка вызывается событие MouseOver/MouseEnter
@@ -545,17 +306,17 @@ const filter = (options, inputValue, filterFn)=>{
             }, option))
         }, `${typeof option.value}-${option.value}`);
     }, [
-        focusedOptionIndex,
-        handleOptionClick,
-        focusOptionOnMouseMove,
+        focusedOptionValue,
+        selectedOptionValue,
         renderOptionProp,
-        selectedOptionIndex,
-        popupAriaId
+        handleOptionClick,
+        popupAriaId,
+        focusOptionOnMouseMove
     ]);
     const resolvedContent = React.useMemo(()=>{
-        const defaultDropdownContent = options.length > 0 ? /*#__PURE__*/ _jsx("div", {
+        const defaultDropdownContent = filteredOptions.length > 0 ? /*#__PURE__*/ _jsx("div", {
             ref: optionsWrapperRef,
-            children: options.map(renderOption)
+            children: filteredOptions.map(renderOption)
         }) : /*#__PURE__*/ _jsx(Footnote, {
             className: "vkuiCustomSelect__empty",
             children: emptyText
@@ -569,55 +330,27 @@ const filter = (options, inputValue, filterFn)=>{
         }
     }, [
         emptyText,
-        options,
+        filteredOptions,
+        optionsWrapperRef,
         renderDropdown,
         renderOption
     ]);
-    const selectInputRef = useExternRef(getSelectInputRef);
-    const controlledValueSet = isControlledOutside && props.value !== NOT_SELECTED.CUSTOM;
-    const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== NOT_SELECTED.NATIVE;
-    const clearButtonShown = allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);
-    const clearButton = React.useMemo(()=>{
-        if (!clearButtonShown) {
-            return null;
-        }
-        return /*#__PURE__*/ _jsx(ClearButton, {
-            className: iconProp === undefined ? "vkuiCustomSelect__clearIcon" : undefined,
-            onClick: function clearSelectState() {
-                setNativeSelectValue(NOT_SELECTED.NATIVE);
-                setInputValue('');
-                selectInputRef.current && selectInputRef.current.focus();
-            },
-            disabled: restProps.disabled,
-            "data-testid": clearButtonTestId
-        });
-    }, [
-        clearButtonShown,
+    const afterItems = useAfterItems({
+        value: propsValue,
+        nativeSelectValue,
+        isControlledOutside,
+        opened,
+        allowClearButton,
         ClearButton,
-        iconProp,
-        restProps.disabled,
+        onClearButtonClick: ()=>{
+            setNativeSelectValue(NOT_SELECTED.NATIVE);
+            resetInputValue();
+            selectInputRef.current && selectInputRef.current.focus();
+        },
         clearButtonTestId,
-        setNativeSelectValue,
-        selectInputRef
-    ]);
-    const icon = React.useMemo(()=>{
-        if (iconProp !== undefined) {
-            return iconProp;
-        }
-        return /*#__PURE__*/ _jsx(DropdownIcon, {
-            className: clearButtonShown ? "vkuiCustomSelect__dropdownIcon" : undefined,
-            opened: opened
-        });
-    }, [
-        clearButtonShown,
-        iconProp,
-        opened
-    ]);
-    const afterIcons = !readOnly && (icon || clearButtonShown) && /*#__PURE__*/ _jsxs(React.Fragment, {
-        children: [
-            clearButton,
-            icon
-        ]
+        disabled: restProps.disabled,
+        readOnly,
+        icon: iconProp
     });
     const { document } = useDOM();
     const passClickAndFocusToInputOnClick = React.useCallback((e)=>{
@@ -653,19 +386,16 @@ const filter = (options, inputValue, filterFn)=>{
             e.preventDefault();
         }
     };
-    const ariaActiveDescendantOptionIndex = focusedOptionIndex !== -1 ? focusedOptionIndex : undefined;
-    const ariaActiveDescendantId = ariaActiveDescendantOptionIndex !== undefined ? options[ariaActiveDescendantOptionIndex] && options[ariaActiveDescendantOptionIndex].value : null;
+    const ariaActiveDescendantId = focusedOptionValue !== null ? focusedOptionValue : undefined;
     const selectInputAriaProps = {
         'role': 'combobox',
         'aria-controls': popupAriaId,
-        'aria-owns': popupAriaId,
         'aria-expanded': opened,
         'aria-activedescendant': ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,
         'aria-labelledby': ariaLabelledBy,
         'aria-haspopup': 'listbox',
         'aria-autocomplete': 'none'
     };
-    const focusWithin = useFocusWithin(handleRootRef);
     const resetOptionFocusOnMouseLeave = React.useCallback((event)=>{
         // В Хроме eсли мышка пользователя находится над инпутом селекта,
         // и он с клавиатуры открывает опции, причём одна из опций
@@ -693,10 +423,6 @@ const filter = (options, inputValue, filterFn)=>{
             };
         },
         children: [
-            focusWithin && selected && !opened && /*#__PURE__*/ _jsx(VisuallyHidden, {
-                "aria-live": "polite",
-                children: selected.label
-            }),
             /*#__PURE__*/ _jsx(CustomSelectInput, _object_spread_props(_object_spread({
                 autoComplete: "off",
                 autoCapitalize: "none",
@@ -709,16 +435,23 @@ const filter = (options, inputValue, filterFn)=>{
                 className: openedClassNames,
                 readOnly: readOnly || !searchable,
                 fetching: fetching,
+                searchable: searchable,
+                accessible: accessible,
                 value: inputValue,
-                onKeyUp: handleKeyUp,
-                onKeyDown: !readOnly ? _onInputKeyDown : undefined,
+                onKeyDown: !readOnly ? onInputKeyDown : undefined,
                 onChange: onInputChange,
-                onClick: !readOnly ? onClick : undefined,
+                onClick: !readOnly ? toggleOpened : undefined,
                 before: before,
-                after: afterIcons,
+                after: afterItems,
                 selectType: selectType,
                 children: selected === null || selected === void 0 ? void 0 : selected.label
             })),
+            /*#__PURE__*/ _jsx(FetchingStatus, {
+                fetching: fetching,
+                options: filteredOptions,
+                fetchingInProgressLabel: fetchingInProgressLabel,
+                fetchingCompletedLabel: fetchingCompletedLabel
+            }),
             /*#__PURE__*/ _jsxs("select", {
                 tabIndex: -1,
                 ref: selectElRef,
@@ -736,7 +469,7 @@ const filter = (options, inputValue, filterFn)=>{
                     (allowClearButton || nativeSelectValue === NOT_SELECTED.NATIVE) && /*#__PURE__*/ _jsx("option", {
                         value: NOT_SELECTED.NATIVE
                     }, NOT_SELECTED.NATIVE),
-                    optionsProp.map((item)=>/*#__PURE__*/ _jsx("option", {
+                    options.map((item)=>/*#__PURE__*/ _jsx("option", {
                             value: item.value
                         }, `${item.value}`))
                 ]