@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/CustomSelect/CustomSelect.js

@@ -1,12 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _typeof from "@babel/runtime/helpers/typeof";
-var _excluded = ["option"],
-  _excluded2 = ["before", "name", "className", "getRef", "getRootRef", "popupDirection", "style", "onChange", "children", "onInputChange", "renderDropdown", "onOpen", "onClose", "fetching", "forceDropdownPortal", "selectType", "autoHideScrollbar", "autoHideScrollbarDelay", "searchable", "renderOption", "options", "emptyText", "filterFn", "icon", "dropdownOffsetDistance", "fixDropdownWidth"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { SizeType } from '../../lib/adaptivity';
 import { defaultFilterFn, getFormFieldModeFromSelectType } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { debounce, getTitleFromChildren } from '../../lib/utils';
@@ -17,507 +13,543 @@ import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { Input } from '../Input/Input';
 import { SelectMimicry } from '../SelectMimicry/SelectMimicry';
 import { Footnote } from '../Typography/Footnote/Footnote';
-import "./CustomSelect.module.css";
-var findIndexAfter = function findIndexAfter() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
-  if (startIndex >= options.length - 1) {
-    return -1;
-  }
-  return options.findIndex(function (option, i) {
-    return i > startIndex && !option.disabled;
-  });
+import { CustomSelectClearButton } from './CustomSelectClearButton';
+import styles from './CustomSelect.module.css';
+const sizeYClassNames = {
+    none: styles['CustomSelect--sizeY-none'],
+    [SizeType.COMPACT]: styles['CustomSelect--sizeY-compact']
 };
-var findIndexBefore = function findIndexBefore() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var endIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : options.length;
-  var result = -1;
-  if (endIndex <= 0) {
-    return result;
-  }
-  for (var i = endIndex - 1; i >= 0; i--) {
-    var _option = options[i];
-    if (!_option.disabled) {
-      result = i;
-      break;
+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;
+    return result;
 };
-var warn = warnOnce('CustomSelect');
-var checkOptionsValueType = function checkOptionsValueType(options) {
-  if (new Set(options.map(function (item) {
-    return _typeof(item.value);
-  })).size > 1) {
-    warn('Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.', 'error');
-  }
+const warn = warnOnce('CustomSelect');
+const checkOptionsValueType = (options)=>{
+    if (new Set(options.map((item)=>typeof item.value)).size > 1) {
+        warn('Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.', 'error');
+    }
 };
-function defaultRenderOptionFn(_ref) {
-  var option = _ref.option,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(CustomSelectOption, props);
+function defaultRenderOptionFn({ option , ...props }) {
+    return /*#__PURE__*/ React.createElement(CustomSelectOption, props);
 }
-var handleOptionDown = function handleOptionDown(e) {
-  e.preventDefault();
+const handleOptionDown = (e)=>{
+    e.preventDefault();
 };
-function findSelectedIndex(options, value) {
-  var _options$findIndex;
-  return (_options$findIndex = options.findIndex(function (item) {
-    value = typeof item.value === 'number' ? Number(value) : value;
-    return item.value === value;
-  })) !== null && _options$findIndex !== void 0 ? _options$findIndex : -1;
+function findSelectedIndex(options, value, withClear) {
+    if (withClear && value === '') {
+        return -1;
+    }
+    return options.findIndex((item)=>{
+        value = typeof item.value === 'number' ? Number(value) : value;
+        return item.value === value;
+    }) ?? -1;
 }
-var filter = function filter(options, inputValue, filterFn) {
-  return typeof filterFn === 'function' ? options.filter(function (option) {
-    return filterFn(inputValue, option);
-  }) : options;
+const filter = (options, inputValue, filterFn)=>{
+    return typeof filterFn === 'function' ? options.filter((option)=>filterFn(inputValue, option)) : options;
 };
-var defaultOptions = [];
+const defaultOptions = [];
 /**
  * @see https://vkcom.github.io/VKUI/#/CustomSelect
- */
-export function CustomSelect(props) {
-  var _props$value, _props$value2;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    opened = _React$useState2[0],
-    setOpened = _React$useState2[1];
-  var before = props.before,
-    name = props.name,
-    className = props.className,
-    getRef = props.getRef,
-    getRootRef = props.getRootRef,
-    popupDirection = props.popupDirection,
-    style = props.style,
-    onChange = props.onChange,
-    children = props.children,
-    onInputChangeProp = props.onInputChange,
-    renderDropdown = props.renderDropdown,
-    onOpen = props.onOpen,
-    onClose = props.onClose,
-    fetching = props.fetching,
-    forceDropdownPortal = props.forceDropdownPortal,
-    _props$selectType = props.selectType,
-    selectType = _props$selectType === void 0 ? 'default' : _props$selectType,
-    autoHideScrollbar = props.autoHideScrollbar,
-    autoHideScrollbarDelay = props.autoHideScrollbarDelay,
-    _props$searchable = props.searchable,
-    searchable = _props$searchable === void 0 ? false : _props$searchable,
-    _props$renderOption = props.renderOption,
-    renderOptionProp = _props$renderOption === void 0 ? defaultRenderOptionFn : _props$renderOption,
-    _props$options = props.options,
-    optionsProp = _props$options === void 0 ? defaultOptions : _props$options,
-    _props$emptyText = props.emptyText,
-    emptyText = _props$emptyText === void 0 ? 'Ничего не найдено' : _props$emptyText,
-    _props$filterFn = props.filterFn,
-    filterFn = _props$filterFn === void 0 ? defaultFilterFn : _props$filterFn,
-    _props$icon = props.icon,
-    icon = _props$icon === void 0 ? /*#__PURE__*/React.createElement(DropdownIcon, {
-      opened: opened
-    }) : _props$icon,
-    _props$dropdownOffset = props.dropdownOffsetDistance,
-    dropdownOffsetDistance = _props$dropdownOffset === void 0 ? 0 : _props$dropdownOffset,
-    _props$fixDropdownWid = props.fixDropdownWidth,
-    fixDropdownWidth = _props$fixDropdownWid === void 0 ? true : _props$fixDropdownWid,
-    restProps = _objectWithoutProperties(props, _excluded2);
-  if (process.env.NODE_ENV === 'development') {
-    checkOptionsValueType(optionsProp);
-  }
-  var containerRef = React.useRef(null);
-  var handleRootRef = useExternRef(containerRef, getRootRef);
-  var scrollBoxRef = React.useRef(null);
-  var selectElRef = React.useRef(null);
-  var _React$useState3 = React.useState(-1),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    focusedOptionIndex = _React$useState4[0],
-    setFocusedOptionIndex = _React$useState4[1];
-  var _React$useState5 = React.useState(props.value !== undefined),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isControlledOutside = _React$useState6[0],
-    setIsControlledOutside = _React$useState6[1];
-  var _React$useState7 = React.useState(''),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    inputValue = _React$useState8[0],
-    setInputValue = _React$useState8[1];
-  var _React$useState9 = React.useState((_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : props.defaultValue),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    nativeSelectValue = _React$useState10[0],
-    setNativeSelectValue = _React$useState10[1];
-  var _React$useState11 = React.useState(''),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    keyboardInput = _React$useState12[0],
-    setKeyboardInput = _React$useState12[1];
-  var _React$useState13 = React.useState(undefined),
-    _React$useState14 = _slicedToArray(_React$useState13, 2),
-    popperPlacement = _React$useState14[0],
-    setPopperPlacement = _React$useState14[1];
-  var _React$useState15 = React.useState(optionsProp),
-    _React$useState16 = _slicedToArray(_React$useState15, 2),
-    options = _React$useState16[0],
-    setOptions = _React$useState16[1];
-  var _React$useState17 = React.useState(findSelectedIndex(optionsProp, (_props$value2 = props.value) !== null && _props$value2 !== void 0 ? _props$value2 : props.defaultValue)),
-    _React$useState18 = _slicedToArray(_React$useState17, 2),
-    selectedOptionIndex = _React$useState18[0],
-    setSelectedOptionIndex = _React$useState18[1];
-  React.useEffect(function () {
-    setIsControlledOutside(props.value !== undefined);
-    setNativeSelectValue(function (nativeSelectValue) {
-      var _props$value3;
-      return (_props$value3 = props.value) !== null && _props$value3 !== void 0 ? _props$value3 : nativeSelectValue;
-    });
-  }, [props.value]);
-  useIsomorphicLayoutEffect(function () {
-    if (options.some(function (_ref2) {
-      var value = _ref2.value;
-      return nativeSelectValue === value;
-    })) {
-      var _selectElRef$current;
-      var _event = new Event('change', {
-        bubbles: true
-      });
-      (_selectElRef$current = selectElRef.current) === null || _selectElRef$current === void 0 ? void 0 : _selectElRef$current.dispatchEvent(_event);
-    }
-  }, [nativeSelectValue]);
-  var selected = React.useMemo(function () {
-    if (!options.length) {
-      return null;
-    }
-    return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;
-  }, [options, selectedOptionIndex]);
-  var openedClassNames = React.useMemo(function () {
-    return classNames(opened && dropdownOffsetDistance === 0 && (popperPlacement !== null && popperPlacement !== void 0 && popperPlacement.includes('top') ? "vkuiCustomSelect--pop-up" : "vkuiCustomSelect--pop-down"));
-  }, [dropdownOffsetDistance, opened, popperPlacement]);
-  var resetKeyboardInput = React.useCallback(function () {
-    setKeyboardInput('');
-  }, []);
-  var scrollToElement = React.useCallback(function (index) {
-    var center = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var dropdown = scrollBoxRef.current;
-    var item = dropdown ? dropdown.children[index] : null;
-    if (!item || !dropdown) {
-      return;
-    }
-    var dropdownHeight = dropdown.offsetHeight;
-    var scrollTop = dropdown.scrollTop;
-    var itemTop = item.offsetTop;
-    var 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;
-    }
-  }, []);
-  var isValidIndex = React.useCallback(function (index) {
-    var _options$length;
-    return index >= 0 && index < ((_options$length = options.length) !== null && _options$length !== void 0 ? _options$length : 0);
-  }, [options.length]);
-  var focusOptionByIndex = React.useCallback(function (index) {
-    var _options$length2;
-    var scrollTo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    if (index === undefined || index < 0 || index > ((_options$length2 = options.length) !== null && _options$length2 !== void 0 ? _options$length2 : 0) - 1) {
-      return;
-    }
-    var option = options[index];
-    if (option !== null && option !== void 0 && option.disabled) {
-      return;
-    }
-    if (scrollTo) {
-      scrollToElement(index);
-    }
-
-    // Это оптимизация, прежде всего, под `onMouseOver`
-    setFocusedOptionIndex(function (focusedOptionIndex) {
-      return focusedOptionIndex !== index ? index : focusedOptionIndex;
-    });
-  }, [options, scrollToElement]);
-  var areOptionsShown = React.useCallback(function () {
-    return scrollBoxRef.current !== null;
-  }, []);
-  var setScrollBoxRef = React.useCallback(function (ref) {
-    scrollBoxRef.current = ref;
-    if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {
-      {
-        scrollToElement(selectedOptionIndex, true);
-      }
+ */ export function CustomSelect(props) {
+    const [opened, setOpened] = React.useState(false);
+    const { before , name , className , getRef , getRootRef , popupDirection , style , onChange , children , onInputChange: onInputChangeProp , renderDropdown , onOpen , onClose , fetching , forceDropdownPortal , selectType ='default' , autoHideScrollbar , autoHideScrollbarDelay , searchable =false , renderOption: renderOptionProp = defaultRenderOptionFn , options: optionsProp = defaultOptions , emptyText ='Ничего не найдено' , filterFn =defaultFilterFn , icon: iconProp , ClearButton =CustomSelectClearButton , allowClearButton =false , dropdownOffsetDistance =0 , fixDropdownWidth =true , ...restProps } = props;
+    if (process.env.NODE_ENV === 'development') {
+        checkOptionsValueType(optionsProp);
     }
-  }, [isValidIndex, scrollToElement, selectedOptionIndex]);
-  var onKeyboardInput = React.useCallback(function (key) {
-    var fullInput = keyboardInput + key;
-    var optionIndex = options.findIndex(function (option) {
-      return getTitleFromChildren(option.label).toLowerCase().includes(fullInput);
-    });
-    if (optionIndex !== undefined && optionIndex > -1) {
-      focusOptionByIndex(optionIndex);
-    }
-    setKeyboardInput(fullInput);
-  }, [focusOptionByIndex, keyboardInput, 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 [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
+    const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
+    const [inputValue, setInputValue] = React.useState('');
+    const [nativeSelectValue, setNativeSelectValue] = React.useState(()=>props.value ?? props.defaultValue ?? (allowClearButton ? '' : undefined));
+    const [keyboardInput, setKeyboardInput] = React.useState('');
+    const [popperPlacement, setPopperPlacement] = React.useState(undefined);
+    const [options, setOptions] = React.useState(optionsProp);
+    const [selectedOptionIndex, setSelectedOptionIndex] = React.useState(findSelectedIndex(optionsProp, props.value ?? props.defaultValue, allowClearButton));
+    React.useEffect(()=>{
+        setIsControlledOutside(props.value !== undefined);
+        setNativeSelectValue((nativeSelectValue)=>props.value ?? nativeSelectValue);
+    }, [
+        props.value
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (options.some(({ value  })=>nativeSelectValue === value) || allowClearButton && nativeSelectValue === '') {
+            const event = new Event('change', {
+                bubbles: true
+            });
+            selectElRef.current?.dispatchEvent(event);
+        }
+    }, [
+        nativeSelectValue
+    ]);
+    const selected = React.useMemo(()=>{
+        if (!options.length) {
+            return null;
+        }
+        return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;
+    }, [
+        options,
+        selectedOptionIndex
+    ]);
+    const openedClassNames = React.useMemo(()=>classNames(opened && dropdownOffsetDistance === 0 && (popperPlacement?.includes('top') ? styles['CustomSelect--pop-up'] : styles['CustomSelect--pop-down'])), [
+        dropdownOffsetDistance,
+        opened,
+        popperPlacement
+    ]);
+    const resetKeyboardInput = React.useCallback(()=>{
+        setKeyboardInput('');
+    }, []);
+    const scrollToElement = React.useCallback((index, center = false)=>{
+        const dropdown = scrollBoxRef.current;
+        const item = dropdown ? dropdown.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 isValidIndex = React.useCallback((index)=>{
+        return index >= 0 && index < (options.length ?? 0);
+    }, [
+        options.length
+    ]);
+    const focusOptionByIndex = React.useCallback((index, scrollTo = true)=>{
+        if (index === undefined || index < 0 || index > (options.length ?? 0) - 1) {
+            return;
+        }
+        const option = options[index];
+        if (option?.disabled) {
+            return;
+        }
+        if (scrollTo) {
+            scrollToElement(index);
+        }
+        // Это оптимизация, прежде всего, под `onMouseOver`
+        setFocusedOptionIndex((focusedOptionIndex)=>focusedOptionIndex !== index ? index : focusedOptionIndex);
+    }, [
+        options,
+        scrollToElement
+    ]);
+    const areOptionsShown = React.useCallback(()=>{
+        return scrollBoxRef.current !== null;
+    }, []);
+    const setScrollBoxRef = React.useCallback((ref)=>{
+        scrollBoxRef.current = ref;
+        if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {
+            {
+                scrollToElement(selectedOptionIndex, true);
+            }
+        }
+    }, [
+        isValidIndex,
+        scrollToElement,
+        selectedOptionIndex
+    ]);
+    const onKeyboardInput = React.useCallback((key)=>{
+        const fullInput = keyboardInput + key;
+        const optionIndex = options.findIndex((option)=>{
+            return getTitleFromChildren(option.label).toLowerCase().includes(fullInput);
+        });
+        if (optionIndex !== undefined && optionIndex > -1) {
+            focusOptionByIndex(optionIndex);
+        }
+        setKeyboardInput(fullInput);
+    }, [
+        focusOptionByIndex,
+        keyboardInput,
+        options
+    ]);
+    /**
    * Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.
    *  Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.
-   */
-  var close = React.useCallback(function () {
-    resetKeyboardInput();
-    setInputValue('');
-    setOpened(false);
-    setFocusedOptionIndex(-1);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, resetKeyboardInput]);
-  var selectFocused = React.useCallback(function () {
-    if (focusedOptionIndex !== undefined && isValidIndex(focusedOptionIndex)) {
-      var item = options[focusedOptionIndex];
-      setNativeSelectValue(item === null || item === void 0 ? void 0 : item.value);
-      close();
-    }
-  }, [close, focusedOptionIndex, isValidIndex, options]);
-  var open = React.useCallback(function () {
-    setOpened(true);
-    setFocusedOptionIndex(selectedOptionIndex);
-    if (typeof onOpen === 'function') {
-      onOpen();
-    }
-  }, [onOpen, selectedOptionIndex]);
-  var onBlur = React.useCallback(function () {
-    var _selectElRef$current2;
-    close();
-    var event = new Event('blur');
-    (_selectElRef$current2 = selectElRef.current) === null || _selectElRef$current2 === void 0 ? void 0 : _selectElRef$current2.dispatchEvent(event);
-  }, [close]);
-  var resetFocusedOption = React.useCallback(function () {
-    setFocusedOptionIndex(-1);
-  }, []);
-  var onFocus = React.useCallback(function () {
-    var _selectElRef$current3;
-    var event = new Event('focus');
-    (_selectElRef$current3 = selectElRef.current) === null || _selectElRef$current3 === void 0 ? void 0 : _selectElRef$current3.dispatchEvent(event);
-  }, []);
-  var onClick = React.useCallback(function () {
-    if (opened) {
-      close();
-    } else {
-      open();
-    }
-  }, [close, open, opened]);
-  var handleKeyUp = React.useMemo(function () {
-    return debounce(resetKeyboardInput, 1000);
-  }, [resetKeyboardInput]);
-  var focusOption = React.useCallback(function (type) {
-    var index = focusedOptionIndex;
-    if (type === 'next') {
-      var nextIndex = findIndexAfter(options, index);
-      index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index
-    } else if (type === 'prev') {
-      var beforeIndex = findIndexBefore(options, index);
-      index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index
-    }
-
-    focusOptionByIndex(index);
-  }, [focusOptionByIndex, focusedOptionIndex, options]);
-  React.useEffect(function updateOptionsAndSelectedOptionIndex() {
-    var _ref3, _props$value4;
-    var value = (_ref3 = (_props$value4 = props.value) !== null && _props$value4 !== void 0 ? _props$value4 : nativeSelectValue) !== null && _ref3 !== void 0 ? _ref3 : props.defaultValue;
-    var options = searchable && inputValue !== undefined ? filter(optionsProp, inputValue, filterFn) : optionsProp;
-    setOptions(options);
-    setSelectedOptionIndex(findSelectedIndex(options, value));
-  }, [filterFn, inputValue, nativeSelectValue, optionsProp, props.defaultValue, props.value, searchable]);
-
-  /**
-   * Нужен для правильного поведения обработчика onClick на select. Фильтрует клики, которые были сделаны по
-   * выпадающему списку.
-   */
-  var onLabelClick = React.useCallback(function (e) {
-    var _scrollBoxRef$current;
-    if ((_scrollBoxRef$current = scrollBoxRef.current) !== null && _scrollBoxRef$current !== void 0 && _scrollBoxRef$current.contains(e.target)) {
-      e.preventDefault();
-    }
-  }, []);
-  var onNativeSelectChange = function onNativeSelectChange(e) {
-    var newSelectedOptionIndex = findSelectedIndex(options, e.currentTarget.value);
-    if (selectedOptionIndex !== newSelectedOptionIndex) {
-      if (!isControlledOutside) {
-        setSelectedOptionIndex(newSelectedOptionIndex);
-      }
-      onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }
-  };
-  var onInputKeyDown = React.useCallback(function (event) {
-    ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) && areOptionsShown() && event.preventDefault();
-    switch (event.key) {
-      case 'ArrowUp':
-        areOptionsShown() && focusOption('prev');
-        break;
-      case 'ArrowDown':
-        areOptionsShown() && focusOption('next');
-        break;
-      case 'Escape':
-        close();
-        break;
-      case 'Enter':
-        areOptionsShown() && selectFocused();
-        break;
-    }
-  }, [areOptionsShown, close, focusOption, selectFocused]);
-  var onInputChange = React.useCallback(function (e) {
-    // TODO v6 удалить `onInputChangeProp`.
-    if (onInputChangeProp) {
-      var _options = onInputChangeProp(e, optionsProp);
-      if (_options) {
-        if (process.env.NODE_ENV === 'development') {
-          warn('Этот метод фильтрации устарел. Возвращаемое значение onInputChange будет ' + 'проигнорировано в v6.0.0. Для фильтрации обновляйте props.options самостоятельно или используйте свойство filterFn.');
+   */ const close = React.useCallback(()=>{
+        resetKeyboardInput();
+        setInputValue('');
+        setOpened(false);
+        setFocusedOptionIndex(-1);
+        onClose?.();
+    }, [
+        onClose,
+        resetKeyboardInput
+    ]);
+    const selectFocused = React.useCallback(()=>{
+        if (focusedOptionIndex !== undefined && isValidIndex(focusedOptionIndex)) {
+            const item = options[focusedOptionIndex];
+            setNativeSelectValue(item?.value);
+            close();
         }
-        setOptions(_options);
-        setSelectedOptionIndex(findSelectedIndex(_options, nativeSelectValue));
-      }
-    } else {
-      var _options2 = filter(optionsProp, e.target.value, filterFn);
-      setOptions(_options2);
-      setSelectedOptionIndex(findSelectedIndex(_options2, nativeSelectValue));
-    }
-    setInputValue(e.target.value);
-  }, [filterFn, nativeSelectValue, onInputChangeProp, optionsProp]);
-  var handleKeyDownSelect = React.useCallback(function (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':
+    }, [
+        close,
+        focusedOptionIndex,
+        isValidIndex,
+        options
+    ]);
+    const open = React.useCallback(()=>{
+        setOpened(true);
+        setFocusedOptionIndex(selectedOptionIndex);
+        if (typeof onOpen === 'function') {
+            onOpen();
+        }
+    }, [
+        onOpen,
+        selectedOptionIndex
+    ]);
+    const onBlur = React.useCallback(()=>{
+        close();
+        const event = new Event('blur');
+        selectElRef.current?.dispatchEvent(event);
+    }, [
+        close,
+        selectElRef
+    ]);
+    const resetFocusedOption = React.useCallback(()=>{
+        setFocusedOptionIndex(-1);
+    }, []);
+    const onFocus = React.useCallback(()=>{
+        const event = new Event('focus');
+        selectElRef.current?.dispatchEvent(event);
+    }, [
+        selectElRef
+    ]);
+    const onClick = React.useCallback(()=>{
         if (opened) {
-          areOptionsShown() && focusOption('prev');
+            close();
         } else {
-          open();
+            open();
         }
-        break;
-      case 'ArrowDown':
-        if (opened) {
-          areOptionsShown() && focusOption('next');
+    }, [
+        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
+    ]);
+    React.useEffect(function updateOptionsAndSelectedOptionIndex() {
+        const value = props.value ?? nativeSelectValue ?? props.defaultValue;
+        const options = searchable && inputValue !== undefined ? filter(optionsProp, inputValue, filterFn) : optionsProp;
+        setOptions(options);
+        setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));
+    }, [
+        filterFn,
+        inputValue,
+        nativeSelectValue,
+        optionsProp,
+        props.defaultValue,
+        props.value,
+        searchable,
+        allowClearButton
+    ]);
+    /**
+   * Нужен для правильного поведения обработчика onClick на select. Фильтрует клики, которые были сделаны по
+   * выпадающему списку.
+   */ const onLabelClick = React.useCallback((e)=>{
+        if (scrollBoxRef.current?.contains(e.target)) {
+            e.preventDefault();
+        }
+    }, []);
+    const onNativeSelectChange = (e)=>{
+        const newSelectedOptionIndex = findSelectedIndex(options, e.currentTarget.value, allowClearButton);
+        if (selectedOptionIndex !== newSelectedOptionIndex) {
+            if (!isControlledOutside) {
+                setSelectedOptionIndex(newSelectedOptionIndex);
+            }
+            onChange?.(e);
+        }
+    };
+    const onInputKeyDown = React.useCallback((event)=>{
+        [
+            'ArrowUp',
+            'ArrowDown',
+            'Escape',
+            'Enter'
+        ].includes(event.key) && areOptionsShown() && event.preventDefault();
+        switch(event.key){
+            case 'ArrowUp':
+                areOptionsShown() && focusOption('prev');
+                break;
+            case 'ArrowDown':
+                areOptionsShown() && focusOption('next');
+                break;
+            case 'Escape':
+                close();
+                break;
+            case 'Enter':
+                areOptionsShown() && selectFocused();
+                break;
+        }
+    }, [
+        areOptionsShown,
+        close,
+        focusOption,
+        selectFocused
+    ]);
+    const onInputChange = React.useCallback((e)=>{
+        // TODO v6 удалить `onInputChangeProp`.
+        if (onInputChangeProp) {
+            const options = onInputChangeProp(e, optionsProp);
+            if (options) {
+                if (process.env.NODE_ENV === 'development') {
+                    warn('Этот метод фильтрации устарел. Возвращаемое значение onInputChange будет ' + 'проигнорировано в v6.0.0. Для фильтрации обновляйте props.options самостоятельно или используйте свойство filterFn.');
+                }
+                setOptions(options);
+                setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));
+            }
         } else {
-          open();
+            const options = filter(optionsProp, e.target.value, filterFn);
+            setOptions(options);
+            setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));
         }
-        break;
-      case 'Escape':
-        close();
-        break;
-      case 'Enter':
-      case 'Spacebar':
-      case ' ':
-        if (opened) {
-          areOptionsShown() && selectFocused();
+        setInputValue(e.target.value);
+    }, [
+        filterFn,
+        nativeSelectValue,
+        onInputChangeProp,
+        optionsProp,
+        allowClearButton
+    ]);
+    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 'Enter':
+            case 'Spacebar':
+            case ' ':
+                if (opened) {
+                    areOptionsShown() && selectFocused();
+                } else {
+                    open();
+                }
+                break;
+        }
+    }, [
+        areOptionsShown,
+        close,
+        focusOption,
+        onKeyboardInput,
+        open,
+        opened,
+        selectFocused
+    ]);
+    const handleOptionClick = React.useCallback((e)=>{
+        const index = Array.prototype.indexOf.call(e.currentTarget.parentNode?.children, e.currentTarget);
+        const option = options[index];
+        if (option && !option.disabled) {
+            selectFocused();
+        }
+    }, [
+        options,
+        selectFocused
+    ]);
+    const handleOptionHover = React.useCallback((e)=>{
+        focusOptionByIndex(Array.prototype.indexOf.call(e.currentTarget.parentNode?.children, e.currentTarget), false);
+    }, [
+        focusOptionByIndex
+    ]);
+    const renderOption = React.useCallback((option, index)=>{
+        const hovered = index === focusedOptionIndex;
+        const selected = index === selectedOptionIndex;
+        return /*#__PURE__*/ React.createElement(React.Fragment, {
+            key: `${option.value}`
+        }, renderOptionProp({
+            option,
+            hovered,
+            children: option.label,
+            selected,
+            disabled: option.disabled,
+            onClick: handleOptionClick,
+            onMouseDown: handleOptionDown,
+            // Используем `onMouseOver` вместо `onMouseEnter`.
+            // При параметре `searchable`, обновляется "ребёнок", из-за чего `onMouseEnter` не срабатывает в следующих кейсах:
+            //  1. До загрузки выпадающего списка, курсор мышки находится над произвольным элементом этого списка.
+            //     > Лечение: только увод курсора мыши и возвращении его обратно вызывает событие `onMouseEnter` на этот элемент.
+            //  2. Если это тач-устройство.
+            //     > Лечение: нужно нажать на какой-нибудь произвольный элемент списка, после чего `onMouseEnter` будет работать на соседние элементы,
+            //     но не на тот, на который нажали в первый раз.
+            // Более подробно по ссылке https://github.com/facebook/react/issues/13956#issuecomment-1082055744
+            onMouseOver: handleOptionHover
+        }));
+    }, [
+        focusedOptionIndex,
+        handleOptionClick,
+        handleOptionHover,
+        renderOptionProp,
+        selectedOptionIndex
+    ]);
+    const resolvedContent = React.useMemo(()=>{
+        const defaultDropdownContent = options?.length > 0 ? options.map(renderOption) : /*#__PURE__*/ React.createElement(Footnote, {
+            className: styles['CustomSelect__empty']
+        }, emptyText);
+        if (typeof renderDropdown === 'function') {
+            return renderDropdown({
+                defaultDropdownContent
+            });
         } else {
-          open();
+            return defaultDropdownContent;
         }
-        break;
-    }
-  }, [areOptionsShown, close, focusOption, onKeyboardInput, open, opened, selectFocused]);
-  var handleOptionClick = React.useCallback(function (e) {
-    var _e$currentTarget$pare;
-    var index = Array.prototype.indexOf.call((_e$currentTarget$pare = e.currentTarget.parentNode) === null || _e$currentTarget$pare === void 0 ? void 0 : _e$currentTarget$pare.children, e.currentTarget);
-    var option = options[index];
-    if (option && !option.disabled) {
-      selectFocused();
-    }
-  }, [options, selectFocused]);
-  var handleOptionHover = React.useCallback(function (e) {
-    var _e$currentTarget$pare2;
-    focusOptionByIndex(Array.prototype.indexOf.call((_e$currentTarget$pare2 = e.currentTarget.parentNode) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.children, e.currentTarget), false);
-  }, [focusOptionByIndex]);
-  var renderOption = React.useCallback(function (option, index) {
-    var hovered = index === focusedOptionIndex;
-    var selected = index === selectedOptionIndex;
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: "".concat(option.value)
-    }, renderOptionProp({
-      option: option,
-      hovered: hovered,
-      children: option.label,
-      selected: selected,
-      disabled: option.disabled,
-      onClick: handleOptionClick,
-      onMouseDown: handleOptionDown,
-      // Используем `onMouseOver` вместо `onMouseEnter`.
-      // При параметре `searchable`, обновляется "ребёнок", из-за чего `onMouseEnter` не срабатывает в следующих кейсах:
-      //  1. До загрузки выпадающего списка, курсор мышки находится над произвольным элементом этого списка.
-      //     > Лечение: только увод курсора мыши и возвращении его обратно вызывает событие `onMouseEnter` на этот элемент.
-      //  2. Если это тач-устройство.
-      //     > Лечение: нужно нажать на какой-нибудь произвольный элемент списка, после чего `onMouseEnter` будет работать на соседние элементы,
-      //     но не на тот, на который нажали в первый раз.
-      // Более подробно по ссылке https://github.com/facebook/react/issues/13956#issuecomment-1082055744
-      onMouseOver: handleOptionHover
-    }));
-  }, [focusedOptionIndex, handleOptionClick, handleOptionHover, renderOptionProp, selectedOptionIndex]);
-  var resolvedContent = React.useMemo(function () {
-    var defaultDropdownContent = (options === null || options === void 0 ? void 0 : options.length) > 0 ? options.map(renderOption) : /*#__PURE__*/React.createElement(Footnote, {
-      className: "vkuiCustomSelect__empty"
-    }, emptyText);
-    if (typeof renderDropdown === 'function') {
-      return renderDropdown({
-        defaultDropdownContent: defaultDropdownContent
-      });
-    } else {
-      return defaultDropdownContent;
-    }
-  }, [emptyText, options, renderDropdown, renderOption]);
-  return /*#__PURE__*/React.createElement("label", {
-    className: classNames("vkuiCustomSelect", className),
-    style: style,
-    ref: handleRootRef,
-    onClick: onLabelClick
-  }, opened && searchable ? /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
-    autoFocus: true,
-    onBlur: onBlur,
-    className: openedClassNames,
-    value: inputValue,
-    onKeyDown: onInputKeyDown,
-    onChange: onInputChange
-    // TODO Ожидается, что клик поймает нативный select, но его перехватывает Input. К сожалению, это приводит к конфликтам типизации.
-    // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.
-    // @ts-expect-error: TS2322 MouseEventHandler<HTMLSelectElement> !== MouseEventHandler<HTMLInputElement>
-    ,
-    onClick: props.onClick,
-    before: before,
-    after: icon,
-    mode: getFormFieldModeFromSelectType(selectType)
-  })) : /*#__PURE__*/React.createElement(SelectMimicry, _extends({}, restProps, {
-    "aria-hidden": true,
-    onClick: onClick,
-    onKeyDown: handleKeyDownSelect,
-    onKeyUp: handleKeyUp,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    className: openedClassNames,
-    before: before,
-    after: icon,
-    selectType: selectType
-  }), selected === null || selected === void 0 ? void 0 : selected.label), /*#__PURE__*/React.createElement("select", {
-    ref: selectElRef,
-    name: name,
-    onChange: onNativeSelectChange,
-    onBlur: props.onBlur,
-    onFocus: props.onFocus,
-    onClick: props.onClick,
-    value: nativeSelectValue,
-    "aria-hidden": true,
-    className: "vkuiCustomSelect__control"
-  }, optionsProp.map(function (item) {
-    return /*#__PURE__*/React.createElement("option", {
-      key: "".concat(item.value),
-      value: item.value
-    });
-  })), opened && /*#__PURE__*/React.createElement(CustomSelectDropdown, {
-    targetRef: containerRef,
-    placement: popupDirection,
-    scrollBoxRef: setScrollBoxRef,
-    onPlacementChange: setPopperPlacement,
-    onMouseLeave: resetFocusedOption,
-    fetching: fetching,
-    offsetDistance: dropdownOffsetDistance,
-    sameWidth: fixDropdownWidth,
-    forcePortal: forceDropdownPortal,
-    autoHideScrollbar: autoHideScrollbar,
-    autoHideScrollbarDelay: autoHideScrollbarDelay
-  }, resolvedContent));
+    }, [
+        emptyText,
+        options,
+        renderDropdown,
+        renderOption
+    ]);
+    const clearButtonShown = allowClearButton && !opened && nativeSelectValue !== '';
+    const clearButton = React.useMemo(()=>{
+        if (!clearButtonShown) {
+            return null;
+        }
+        return /*#__PURE__*/ React.createElement(ClearButton, {
+            className: iconProp === undefined ? styles['CustomSelect--clear-icon'] : undefined,
+            onClick: ()=>setNativeSelectValue('')
+        });
+    }, [
+        clearButtonShown,
+        ClearButton,
+        iconProp
+    ]);
+    const icon = React.useMemo(()=>{
+        if (iconProp !== undefined) {
+            return iconProp;
+        }
+        return /*#__PURE__*/ React.createElement(DropdownIcon, {
+            className: clearButtonShown ? styles['CustomSelect__dropdown-icon'] : undefined,
+            opened: opened
+        });
+    }, [
+        clearButtonShown,
+        iconProp,
+        opened
+    ]);
+    const afterIcons = (icon || clearButtonShown) && /*#__PURE__*/ React.createElement(React.Fragment, null, clearButton, icon);
+    return /*#__PURE__*/ React.createElement("label", {
+        className: classNames(styles['CustomSelect'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
+        style: style,
+        ref: handleRootRef,
+        onClick: onLabelClick
+    }, opened && searchable ? /*#__PURE__*/ React.createElement(Input, {
+        ...restProps,
+        autoFocus: true,
+        onBlur: onBlur,
+        className: openedClassNames,
+        value: inputValue,
+        onKeyDown: onInputKeyDown,
+        onChange: onInputChange,
+        // TODO Ожидается, что клик поймает нативный select, но его перехватывает Input. К сожалению, это приводит к конфликтам типизации.
+        // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.
+        // @ts-expect-error: TS2322 MouseEventHandler<HTMLSelectElement> !== MouseEventHandler<HTMLInputElement>
+        onClick: props.onClick,
+        before: before,
+        after: afterIcons,
+        mode: getFormFieldModeFromSelectType(selectType)
+    }) : /*#__PURE__*/ React.createElement(SelectMimicry, {
+        ...restProps,
+        "aria-hidden": true,
+        onClick: onClick,
+        onKeyDown: handleKeyDownSelect,
+        onKeyUp: handleKeyUp,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        className: openedClassNames,
+        before: before,
+        after: afterIcons,
+        selectType: selectType
+    }, selected?.label), /*#__PURE__*/ React.createElement("select", {
+        ref: selectElRef,
+        name: name,
+        onChange: onNativeSelectChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onClick: props.onClick,
+        value: nativeSelectValue,
+        "aria-hidden": true,
+        className: styles['CustomSelect__control']
+    }, allowClearButton && /*#__PURE__*/ React.createElement("option", {
+        key: "",
+        value: ""
+    }), optionsProp.map((item)=>/*#__PURE__*/ React.createElement("option", {
+            key: `${item.value}`,
+            value: item.value
+        }))), opened && /*#__PURE__*/ React.createElement(CustomSelectDropdown, {
+        targetRef: containerRef,
+        placement: popupDirection,
+        scrollBoxRef: setScrollBoxRef,
+        onPlacementChange: setPopperPlacement,
+        onMouseLeave: resetFocusedOption,
+        fetching: fetching,
+        offsetDistance: dropdownOffsetDistance,
+        sameWidth: fixDropdownWidth,
+        forcePortal: forceDropdownPortal,
+        autoHideScrollbar: autoHideScrollbar,
+        autoHideScrollbarDelay: autoHideScrollbarDelay
+    }, resolvedContent));
 }
+
 //# sourceMappingURL=CustomSelect.js.map