@vkontakte/vkui 4.22.2 → 4.25.1

package/dist/components/CustomSelect/CustomSelect.js

@@ -10,11 +10,10 @@ import _typeof from "@babel/runtime/helpers/typeof";
 var _excluded = ["searchable", "name", "className", "getRef", "getRootRef", "popupDirection", "options", "sizeY", "platform", "style", "onChange", "onBlur", "onFocus", "onClick", "renderOption", "children", "emptyText", "onInputChange", "filterFn", "renderDropdown", "onOpen", "onClose", "fetching"],
     _excluded2 = ["option"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from 'react';
+import * as React from "react";
 import SelectMimicry from "../SelectMimicry/SelectMimicry";
-import { debounce, setRef } from "../../lib/utils";
+import { debounce, setRef, multiRef } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
-import CustomScrollView from "../CustomScrollView/CustomScrollView";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { withPlatform } from "../../hoc/withPlatform";
 import CustomSelectOption from "../CustomSelectOption/CustomSelectOption";
@@ -23,11 +22,12 @@ import Input from "../Input/Input";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import Caption from "../Typography/Caption/Caption";
 import { warnOnce } from "../../lib/warnOnce";
-import Spinner from "../Spinner/Spinner";
 import { defaultFilterFn } from "../../lib/select";
 import { is } from "../../lib/is";
+import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown";
 
-var findIndexAfter = function findIndexAfter(options) {
+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) {
@@ -39,11 +39,12 @@ var findIndexAfter = function findIndexAfter(options) {
   });
 };
 
-var findIndexBefore = function findIndexBefore(options) {
+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) {
+  if (options === undefined || endIndex <= 0) {
     return result;
   }
 
@@ -59,13 +60,13 @@ var findIndexBefore = function findIndexBefore(options) {
   return result;
 };
 
-var warn = warnOnce('CustomSelect');
+var warn = warnOnce("CustomSelect");
 
 var checkOptionsValueType = function checkOptionsValueType(options) {
   if (new Set(options.map(function (item) {
     return _typeof(item.value);
   })).size > 1) {
-    warn('Some values of your options have different types. CustomSelect onChange always returns a string type.');
+    warn("Some values of your options have different types. CustomSelect onChange always returns a string type.");
   }
 };
 
@@ -83,14 +84,16 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "keyboardInput", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "isControlledOutside", void 0);
+    _defineProperty(_assertThisInitialized(_this), "isControlledOutside", false);
 
-    _defineProperty(_assertThisInitialized(_this), "selectEl", void 0);
+    _defineProperty(_assertThisInitialized(_this), "selectEl", null);
 
     _defineProperty(_assertThisInitialized(_this), "scrollBoxRef", /*#__PURE__*/React.createRef());
 
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "resetKeyboardInput", function () {
-      _this.keyboardInput = '';
+      _this.keyboardInput = "";
     });
 
     _defineProperty(_assertThisInitialized(_this), "getSelectedItem", function () {
@@ -98,15 +101,15 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
           selectedOptionIndex = _this$state.selectedOptionIndex,
           options = _this$state.options;
 
-      if (!options.length) {
+      if (!(options !== null && options !== void 0 && options.length)) {
         return null;
       }
 
-      return options[selectedOptionIndex];
+      return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;
     });
 
     _defineProperty(_assertThisInitialized(_this), "filter", function (options, inputValue, filterFn) {
-      return typeof filterFn === 'function' ? options.filter(function (option) {
+      return typeof filterFn === "function" ? options.filter(function (option) {
         return filterFn(inputValue, option);
       }) : options;
     });
@@ -121,12 +124,12 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
       }, function () {
         var selectedOptionIndex = _this.state.selectedOptionIndex;
 
-        if (_this.isValidIndex(selectedOptionIndex)) {
+        if (selectedOptionIndex !== undefined && _this.isValidIndex(selectedOptionIndex)) {
           _this.scrollToElement(selectedOptionIndex, true);
         }
       });
 
-      typeof _this.props.onOpen === 'function' && _this.props.onOpen();
+      typeof _this.props.onOpen === "function" && _this.props.onOpen();
     });
 
     _defineProperty(_assertThisInitialized(_this), "close", function () {
@@ -134,37 +137,42 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
 
       _this.setState(function () {
         return {
-          inputValue: '',
+          inputValue: "",
           opened: false,
           focusedOptionIndex: -1,
           options: _this.props.options
         };
       });
 
-      typeof _this.props.onClose === 'function' && _this.props.onClose();
+      typeof _this.props.onClose === "function" && _this.props.onClose();
     });
 
     _defineProperty(_assertThisInitialized(_this), "selectFocused", function () {
       var focusedOptionIndex = _this.state.focusedOptionIndex;
 
-      _this.select(focusedOptionIndex);
+      if (focusedOptionIndex !== undefined) {
+        _this.select(focusedOptionIndex);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "select", function (index) {
+      var _this$state$options;
+
       if (!_this.isValidIndex(index)) {
         return;
       }
 
-      var item = _this.state.options[index];
+      var item = (_this$state$options = _this.state.options) === null || _this$state$options === void 0 ? void 0 : _this$state$options[index];
 
       _this.setState({
-        nativeSelectValue: item.value
+        nativeSelectValue: item === null || item === void 0 ? void 0 : item.value
       }, function () {
-        var event = new Event('change', {
+        var _this$selectEl;
+
+        var event = new Event("change", {
           bubbles: true
         });
-
-        _this.selectEl.dispatchEvent(event);
+        (_this$selectEl = _this.selectEl) === null || _this$selectEl === void 0 ? void 0 : _this$selectEl.dispatchEvent(event);
       });
 
       _this.close();
@@ -175,29 +183,33 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function () {
-      var event = new Event('focus');
+      var _this$selectEl2;
 
-      _this.selectEl.dispatchEvent(event);
+      var event = new Event("focus");
+      (_this$selectEl2 = _this.selectEl) === null || _this$selectEl2 === void 0 ? void 0 : _this$selectEl2.dispatchEvent(event);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
-      _this.close();
+      var _this$selectEl3;
 
-      var event = new Event('blur');
+      _this.close();
 
-      _this.selectEl.dispatchEvent(event);
+      var event = new Event("blur");
+      (_this$selectEl3 = _this.selectEl) === null || _this$selectEl3 === void 0 ? void 0 : _this$selectEl3.dispatchEvent(event);
     });
 
     _defineProperty(_assertThisInitialized(_this), "focusOptionByIndex", function (index) {
+      var _this$state$options$l, _this$state$options2, _this$state$options3;
+
       var scrollTo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
-      if (index < 0 || index > _this.state.options.length - 1) {
+      if (index === undefined || index < 0 || index > ((_this$state$options$l = (_this$state$options2 = _this.state.options) === null || _this$state$options2 === void 0 ? void 0 : _this$state$options2.length) !== null && _this$state$options$l !== void 0 ? _this$state$options$l : 0) - 1) {
         return;
       }
 
-      var option = _this.state.options[index];
+      var option = (_this$state$options3 = _this.state.options) === null || _this$state$options3 === void 0 ? void 0 : _this$state$options3[index];
 
-      if (option.disabled) {
+      if (option !== null && option !== void 0 && option.disabled) {
         return;
       }
 
@@ -214,10 +226,10 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
       var focusedOptionIndex = _this.state.focusedOptionIndex;
       var index = focusedOptionIndex;
 
-      if (type === 'next') {
+      if (type === "next") {
         var nextIndex = findIndexAfter(_this.state.options, index);
         index = nextIndex === -1 ? findIndexAfter(_this.state.options) : nextIndex; // Следующий за index или первый валидный до index
-      } else if (type === 'prev') {
+      } else if (type === "prev") {
         var beforeIndex = findIndexBefore(_this.state.options, index);
         index = beforeIndex === -1 ? findIndexBefore(_this.state.options) : beforeIndex; // Предшествующий index или последний валидный после index
       }
@@ -226,7 +238,9 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleOptionHover", function (e) {
-      _this.focusOptionByIndex(Array.prototype.indexOf.call(e.currentTarget.parentNode.children, e.currentTarget), false);
+      var _e$currentTarget$pare;
+
+      _this.focusOptionByIndex(Array.prototype.indexOf.call((_e$currentTarget$pare = e.currentTarget.parentNode) === null || _e$currentTarget$pare === void 0 ? void 0 : _e$currentTarget$pare.children, e.currentTarget), false);
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleOptionDown", function (e) {
@@ -234,8 +248,10 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleOptionClick", function (e) {
-      var index = Array.prototype.indexOf.call(e.currentTarget.parentNode.children, e.currentTarget);
-      var option = _this.state.options[index];
+      var _e$currentTarget$pare2, _this$state$options4;
+
+      var index = Array.prototype.indexOf.call((_e$currentTarget$pare2 = e.currentTarget.parentNode) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.children, e.currentTarget);
+      var option = (_this$state$options4 = _this.state.options) === null || _this$state$options4 === void 0 ? void 0 : _this$state$options4[index];
 
       if (option && !option.disabled) {
         _this.selectFocused();
@@ -249,13 +265,14 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onKeyboardInput", function (key) {
-      var fullInput = _this.keyboardInput + key;
+      var _this$state$options5;
 
-      var optionIndex = _this.state.options.findIndex(function (option) {
+      var fullInput = _this.keyboardInput + key;
+      var optionIndex = (_this$state$options5 = _this.state.options) === null || _this$state$options5 === void 0 ? void 0 : _this$state$options5.findIndex(function (option) {
         return option.label.toLowerCase().includes(fullInput);
       });
 
-      if (optionIndex > -1) {
+      if (optionIndex !== undefined && optionIndex > -1) {
         _this.focusOptionByIndex(optionIndex);
       }
 
@@ -271,16 +288,18 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onNativeSelectChange", function (e) {
-      var value = e.currentTarget.value;
+      var newSelectedOptionIndex = _this.findSelectedIndex(_this.state.options, e.currentTarget.value);
 
-      if (!_this.isControlledOutside) {
-        _this.setState({
-          selectedOptionIndex: _this.findSelectedIndex(_this.state.options, value)
-        });
-      }
+      if (_this.state.selectedOptionIndex !== newSelectedOptionIndex) {
+        var _this$props$onChange, _this$props;
 
-      if (_this.props.onChange) {
-        _this.props.onChange(e);
+        if (!_this.isControlledOutside) {
+          _this.setState({
+            selectedOptionIndex: newSelectedOptionIndex
+          });
+        }
+
+        (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e);
       }
     });
 
@@ -289,8 +308,8 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
         var _options = _this.props.onInputChange(e, _this.props.options);
 
         if (_options) {
-          if (process.env.NODE_ENV === 'development') {
-            warn('This filtration method is deprecated. Return value of onInputChange will' + ' be ignored in v5.0.0. For custom filtration please update props.options by yourself or use filterFn property');
+          if (process.env.NODE_ENV === "development") {
+            warn("This filtration method is deprecated. Return value of onInputChange will" + " be ignored in v5.0.0. For custom filtration please update props.options by yourself or use filterFn property");
           }
 
           _this.setState({
@@ -315,23 +334,23 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (event) {
-      ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) && _this.areOptionsShown && event.preventDefault();
+      ["ArrowUp", "ArrowDown", "Escape", "Enter"].includes(event.key) && _this.areOptionsShown && event.preventDefault();
 
       switch (event.key) {
-        case 'ArrowUp':
-          _this.areOptionsShown && _this.focusOption('prev');
+        case "ArrowUp":
+          _this.areOptionsShown && _this.focusOption("prev");
           break;
 
-        case 'ArrowDown':
-          _this.areOptionsShown && _this.focusOption('next');
+        case "ArrowDown":
+          _this.areOptionsShown && _this.focusOption("next");
           break;
 
-        case 'Escape':
+        case "Escape":
           _this.close();
 
           break;
 
-        case 'Enter':
+        case "Enter":
           _this.areOptionsShown && _this.selectFocused();
           break;
       }
@@ -340,41 +359,41 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleKeyDownSelect", function (event) {
       var opened = _this.state.opened;
 
-      if (event.key.length === 1 && event.key !== ' ') {
+      if (event.key.length === 1 && event.key !== " ") {
         _this.onKeyboardInput(event.key);
 
         return;
       }
 
-      ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) && _this.areOptionsShown && event.preventDefault();
+      ["ArrowUp", "ArrowDown", "Escape", "Enter"].includes(event.key) && _this.areOptionsShown && event.preventDefault();
 
       switch (event.key) {
-        case 'ArrowUp':
+        case "ArrowUp":
           if (opened) {
-            _this.areOptionsShown && _this.focusOption('prev');
+            _this.areOptionsShown && _this.focusOption("prev");
           } else {
             _this.open();
           }
 
           break;
 
-        case 'ArrowDown':
+        case "ArrowDown":
           if (opened) {
-            _this.areOptionsShown && _this.focusOption('next');
+            _this.areOptionsShown && _this.focusOption("next");
           } else {
             _this.open();
           }
 
           break;
 
-        case 'Escape':
+        case "Escape":
           _this.close();
 
           break;
 
-        case 'Enter':
-        case 'Spacebar':
-        case ' ':
+        case "Enter":
+        case "Spacebar":
+        case " ":
           if (opened) {
             _this.areOptionsShown && _this.selectFocused();
           } else {
@@ -410,15 +429,26 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "selectRef", function (element) {
       _this.selectEl = element;
-      setRef(element, _this.props.getRef);
+
+      if (_this.props.getRef) {
+        setRef(element, _this.props.getRef);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onPlacementChange", function (placement) {
+      _this.setState(function () {
+        return {
+          popperPlacement: placement
+        };
+      });
     });
 
-    var _value = props.value,
+    var value = props.value,
         defaultValue = props.defaultValue;
-    var initialValue = _value !== undefined ? _value : defaultValue;
-    _this.keyboardInput = '';
+    var initialValue = value !== undefined ? value : defaultValue;
+    _this.keyboardInput = "";
 
-    if (process.env.NODE_ENV === 'development') {
+    if (process.env.NODE_ENV === "development") {
       checkOptionsValueType(props.options);
     }
 
@@ -428,7 +458,7 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
       selectedOptionIndex: _this.findSelectedIndex(props.options, initialValue),
       nativeSelectValue: initialValue,
       options: props.options,
-      inputValue: ''
+      inputValue: ""
     };
 
     if (props.value !== undefined) {
@@ -446,15 +476,19 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "findSelectedIndex",
     value: function findSelectedIndex(options, value) {
-      return options.findIndex(function (item) {
-        value = typeof item.value === 'number' ? Number(value) : value;
+      var _options$findIndex;
+
+      return (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (item) {
+        value = typeof item.value === "number" ? Number(value) : value;
         return item.value === value;
-      });
+      })) !== null && _options$findIndex !== void 0 ? _options$findIndex : -1;
     }
   }, {
     key: "isValidIndex",
     value: function isValidIndex(index) {
-      return index >= 0 && index < this.state.options.length;
+      var _this$state$options$l2, _this$state$options6;
+
+      return index >= 0 && index < ((_this$state$options$l2 = (_this$state$options6 = this.state.options) === null || _this$state$options6 === void 0 ? void 0 : _this$state$options6.length) !== null && _this$state$options$l2 !== void 0 ? _this$state$options$l2 : 0);
     }
   }, {
     key: "scrollToElement",
@@ -463,7 +497,7 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
       var dropdown = this.scrollBoxRef.current;
       var item = dropdown ? dropdown.children[index] : null;
 
-      if (!item) {
+      if (!item || !dropdown) {
         return;
       }
 
@@ -485,19 +519,19 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps) {
       // Внутри useEffect и так is, можно убрать
       if (!is(prevProps.value, this.props.value) || prevProps.options !== this.props.options) {
-        if (process.env.NODE_ENV === 'development') {
+        if (process.env.NODE_ENV === "development") {
           checkOptionsValueType(this.props.options);
         }
 
         this.isControlledOutside = this.props.value !== undefined;
 
-        var _value2 = this.props.value === undefined ? this.state.nativeSelectValue : this.props.value;
+        var _value = this.props.value === undefined ? this.state.nativeSelectValue : this.props.value;
 
-        var _options3 = this.props.searchable ? this.filter(this.props.options, this.state.inputValue, this.props.filterFn) : this.props.options;
+        var _options3 = this.props.searchable && this.state.inputValue !== undefined ? this.filter(this.props.options, this.state.inputValue, this.props.filterFn) : this.props.options;
 
         this.setState({
-          nativeSelectValue: _value2,
-          selectedOptionIndex: this.findSelectedIndex(_options3, _value2),
+          nativeSelectValue: _value,
+          selectedOptionIndex: this.findSelectedIndex(_options3, _value),
           options: _options3
         });
       }
@@ -505,73 +539,69 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this$state$popperPla;
+
       var _this$state3 = this.state,
           opened = _this$state3.opened,
-          nativeSelectValue = _this$state3.nativeSelectValue;
-
-      var _this$props = this.props,
-          searchable = _this$props.searchable,
-          name = _this$props.name,
-          className = _this$props.className,
-          getRef = _this$props.getRef,
-          getRootRef = _this$props.getRootRef,
-          popupDirection = _this$props.popupDirection,
-          options = _this$props.options,
-          sizeY = _this$props.sizeY,
-          platform = _this$props.platform,
-          style = _this$props.style,
-          onChange = _this$props.onChange,
-          onBlur = _this$props.onBlur,
-          onFocus = _this$props.onFocus,
-          onClick = _this$props.onClick,
-          renderOption = _this$props.renderOption,
-          children = _this$props.children,
-          emptyText = _this$props.emptyText,
-          onInputChange = _this$props.onInputChange,
-          filterFn = _this$props.filterFn,
-          renderDropdown = _this$props.renderDropdown,
-          onOpen = _this$props.onOpen,
-          onClose = _this$props.onClose,
-          fetching = _this$props.fetching,
-          restProps = _objectWithoutProperties(_this$props, _excluded);
+          nativeSelectValue = _this$state3.nativeSelectValue,
+          stateOptions = _this$state3.options;
+
+      var _this$props2 = this.props,
+          searchable = _this$props2.searchable,
+          name = _this$props2.name,
+          className = _this$props2.className,
+          getRef = _this$props2.getRef,
+          getRootRef = _this$props2.getRootRef,
+          popupDirection = _this$props2.popupDirection,
+          options = _this$props2.options,
+          sizeY = _this$props2.sizeY,
+          platform = _this$props2.platform,
+          style = _this$props2.style,
+          onChange = _this$props2.onChange,
+          onBlur = _this$props2.onBlur,
+          onFocus = _this$props2.onFocus,
+          onClick = _this$props2.onClick,
+          renderOption = _this$props2.renderOption,
+          children = _this$props2.children,
+          emptyText = _this$props2.emptyText,
+          onInputChange = _this$props2.onInputChange,
+          filterFn = _this$props2.filterFn,
+          renderDropdown = _this$props2.renderDropdown,
+          onOpen = _this$props2.onOpen,
+          onClose = _this$props2.onClose,
+          fetching = _this$props2.fetching,
+          restProps = _objectWithoutProperties(_this$props2, _excluded);
 
       var selected = this.getSelectedItem();
       var label = selected ? selected.label : undefined;
-      var defaultDropdownContent = createScopedElement(CustomScrollView, {
-        boxRef: this.scrollBoxRef
-      }, this.state.options.map(this.renderOption), this.state.options.length === 0 && createScopedElement(Caption, {
+      var defaultDropdownContent = stateOptions !== undefined && stateOptions.length > 0 ? stateOptions.map(this.renderOption) : createScopedElement(Caption, {
         level: "1",
         weight: "regular",
         vkuiClass: "CustomSelect__empty"
-      }, this.props.emptyText));
+      }, this.props.emptyText);
       var resolvedContent;
 
-      if (typeof renderDropdown === 'function') {
+      if (typeof renderDropdown === "function") {
         resolvedContent = renderDropdown({
           defaultDropdownContent: defaultDropdownContent
         });
-      } else if (fetching) {
-        resolvedContent = createScopedElement("div", {
-          vkuiClass: "CustomSelect__fetching"
-        }, createScopedElement(Spinner, {
-          size: "small"
-        }));
       } else {
         resolvedContent = defaultDropdownContent;
       }
 
+      var isPopperDirectionTop = (_this$state$popperPla = this.state.popperPlacement) === null || _this$state$popperPla === void 0 ? void 0 : _this$state$popperPla.includes("top");
       return createScopedElement("label", {
-        vkuiClass: getClassName('CustomSelect', platform),
+        vkuiClass: getClassName("CustomSelect", platform),
         className: className,
         style: style,
-        ref: getRootRef,
+        ref: multiRef(this.containerRef, getRootRef),
         onClick: this.onLabelClick
       }, opened && searchable ? createScopedElement(Input, _extends({}, restProps, {
         autoFocus: true,
         onBlur: this.onBlur,
         vkuiClass: classNames({
-          'CustomSelect__open': opened,
-          'CustomSelect__open--popupDirectionTop': popupDirection === 'top'
+          CustomSelect__open: opened,
+          "CustomSelect__open--popupDirectionTop": isPopperDirectionTop
         }),
         value: this.state.inputValue,
         onKeyDown: this.onInputKeyDown,
@@ -590,8 +620,8 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
         onFocus: this.onFocus,
         onBlur: this.onBlur,
         vkuiClass: classNames({
-          'CustomSelect__open': opened,
-          'CustomSelect__open--popupDirectionTop': popupDirection === 'top'
+          CustomSelect__open: opened,
+          "CustomSelect__open--popupDirectionTop": isPopperDirectionTop
         })
       }), label), createScopedElement("select", {
         ref: this.selectRef,
@@ -608,17 +638,20 @@ var CustomSelect = /*#__PURE__*/function (_React$Component) {
           key: "".concat(item.value),
           value: item.value
         });
-      })), opened && createScopedElement("div", {
-        vkuiClass: classNames('CustomSelect__options', "CustomSelect__options--sizeY-".concat(sizeY), {
-          'CustomSelect__options--popupDirectionTop': popupDirection === 'top'
-        }),
-        onMouseLeave: this.resetFocusedOption
+      })), opened && createScopedElement(CustomSelectDropdown, {
+        targetRef: this.containerRef,
+        placement: popupDirection,
+        scrollBoxRef: this.scrollBoxRef,
+        onPlacementChange: this.onPlacementChange,
+        onMouseLeave: this.resetFocusedOption,
+        fetching: fetching
       }, resolvedContent));
     }
   }]);
 
   return CustomSelect;
-}(React.Component);
+}(React.Component); // eslint-disable-next-line import/no-default-export
+
 
 _defineProperty(CustomSelect, "defaultProps", {
   searchable: false,
@@ -629,7 +662,7 @@ _defineProperty(CustomSelect, "defaultProps", {
     return createScopedElement(CustomSelectOption, props);
   },
   options: [],
-  emptyText: 'Ничего не найдено',
+  emptyText: "Ничего не найдено",
   filterFn: defaultFilterFn
 });