@megafon/ui-core 3.0.0-beta.8 → 3.0.2

package/dist/lib/components/Select/Select.js

@@ -9,8 +9,6 @@ exports["default"] = exports.SelectTypes = exports.Verification = void 0;
 
 require("core-js/modules/es.array.concat");
 
-require("core-js/modules/es.array.every");
-
 require("core-js/modules/es.array.filter");
 
 require("core-js/modules/es.array.find");
@@ -19,14 +17,8 @@ require("core-js/modules/es.array.find-index");
 
 require("core-js/modules/es.array.map");
 
-require("core-js/modules/es.date.to-string");
-
-require("core-js/modules/es.object.to-string");
-
 require("core-js/modules/es.object.values");
 
-require("core-js/modules/es.reflect.construct");
-
 require("core-js/modules/es.regexp.constructor");
 
 require("core-js/modules/es.regexp.exec");
@@ -37,17 +29,11 @@ require("core-js/modules/es.string.replace");
 
 require("core-js/modules/es.string.split");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.string.trim");
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -59,41 +45,21 @@ var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 var _InputLabel = _interopRequireDefault(require("../InputLabel/InputLabel"));
 
+var _selectReducer = _interopRequireWildcard(require("./reducer/selectReducer"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _createSuper(Derived) {
-  return function () {
-    var Super = (0, _getPrototypeOf2["default"])(Derived),
-        result;
-
-    if (_isNativeReflectConstruct()) {
-      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return (0, _possibleConstructorReturn2["default"])(this, result);
-  };
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
+var UPDATE_ITEMS_LIST = _selectReducer.SelectActions.UPDATE_ITEMS_LIST,
+    UPDATE_VALUE_FROM_PROPS = _selectReducer.SelectActions.UPDATE_VALUE_FROM_PROPS,
+    COMBOBOX_VALUE_DEBOUNCE = _selectReducer.SelectActions.COMBOBOX_VALUE_DEBOUNCE,
+    COMBOBOX_INPUT_CHANGE = _selectReducer.SelectActions.COMBOBOX_INPUT_CHANGE,
+    TOGGLE_DROPDOWN = _selectReducer.SelectActions.TOGGLE_DROPDOWN,
+    UPDATE_SELECT_VALUE = _selectReducer.SelectActions.UPDATE_SELECT_VALUE,
+    SET_HOVERED_ITEM_INDEX = _selectReducer.SelectActions.SET_HOVERED_ITEM_INDEX;
 var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -102,498 +68,406 @@ exports.Verification = Verification;
 var SelectTypes = {
   CLASSIC: 'classic',
   COMBOBOX: 'combobox'
-};
+}; // List of cases to check on component change:
+// - Should correctly choose value and trigger callbacks with correct arguments on click or touch.
+// - Should correctly choose value and trigger callbacks with correct arguments on choose via filtration in combobox.
+// - Should highlight chosen item with bold only in cases without view
+// - Should scroll to chosen element (to make it visible), highlight it with bold and set hovered on dropdown open.
+// - Should scroll (to make hovered element visible) and highlight next/previous element on arrow up and arrow down presses when dropdown is opened.
+// - Should correctly set value on enter press while some element hovered.
+// - If select dropdown is closed and select focused, dropdown should toggle open on Enter press.
+// - Opened dropdown could be closed only via value choose, click outside of select and on TAB press.
+// - Should add event listener for outside of dropdown click on list open and remove it on list close.
+// - onClose callback shouldn't fire multiple times on outside click if dropdown was opened multiple times.
+
 exports.SelectTypes = SelectTypes;
 var cn = (0, _uiHelpers.cnCreate)('mfui-select');
 
-var Select = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Select, _React$Component);
+var Select = function Select(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'classic' : _ref$type,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      verification = _ref.verification,
+      noticeText = _ref.noticeText,
+      label = _ref.label,
+      labelId = _ref.labelId,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      _ref$notFoundText = _ref.notFoundText,
+      notFoundText = _ref$notFoundText === void 0 ? 'Ничего не нашлось' : _ref$notFoundText,
+      items = _ref.items,
+      placeholder = _ref.placeholder,
+      currentValue = _ref.currentValue,
+      onClosed = _ref.onClosed,
+      onOpened = _ref.onOpened,
+      onSelect = _ref.onSelect;
+
+  var _useReducer = (0, React.useReducer)(_selectReducer["default"], _selectReducer.initialState),
+      _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
+      selectState = _useReducer2[0],
+      changeSelectState = _useReducer2[1];
+
+  var itemWrapperNode = React.useRef(null);
+  var itemsNodeList = React.useRef([]);
+  var selectNode = React.useRef(null);
+  var itemsList = selectState.itemsList,
+      filterValue = selectState.comparableInputValue,
+      isOpened = selectState.isOpened,
+      hoveredItemIndex = selectState.hoveredItemIndex,
+      inputValue = selectState.inputValue;
+  var isTouch = (0, _uiHelpers.detectTouch)();
+  var currentIndex = itemsList.findIndex(function (elem) {
+    return elem.value === currentValue;
+  });
+  var handleClickOutside = (0, React.useCallback)(function (e) {
+    var _a;
+
+    if (e.target instanceof Node && ((_a = selectNode.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) || !isOpened) {
+      return;
+    }
 
-  var _super = _createSuper(Select);
+    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+    changeSelectState({
+      type: TOGGLE_DROPDOWN,
+      isOpened: false
+    });
+  }, [onClosed, isOpened]);
 
-  function Select(props) {
-    var _this;
+  var scrollList = function scrollList(itemIndex) {
+    if (!itemsNodeList.current.length) {
+      return;
+    }
 
-    (0, _classCallCheck2["default"])(this, Select);
-    _this = _super.call(this, props);
-    _this.isTouch = (0, _uiHelpers.detectTouch)();
-    _this.debouncedComboboxChange = (0, _lodash["default"])(function (filterValue) {
-      var items = _this.props.items;
-      var query = filterValue.replace(/[^A-Z-a-zА-ЯЁа-яё0-9]/g, function (w) {
-        return "\\".concat(w);
-      });
-      var filteredItems = items.filter(function (_ref) {
-        var title = _ref.title;
+    var wrapper = itemWrapperNode.current;
+    var item = itemsNodeList.current[itemIndex];
 
-        if (filterValue.length <= title.length) {
-          return RegExp(query, 'ig').test(title);
-        }
+    if (!item || !wrapper) {
+      return;
+    }
 
-        return false;
-      });
+    var wrapperScroll = wrapper === null || wrapper === void 0 ? void 0 : wrapper.scrollTop;
+    var wrapperHeight = wrapper === null || wrapper === void 0 ? void 0 : wrapper.offsetHeight;
+    var itemOffset = item.offsetTop;
+    var itemHeight = item.offsetHeight;
 
-      _this.setState({
-        filteredItems: filteredItems,
-        comparableInputValue: filterValue,
-        isOpened: true,
-        activeIndex: 0
-      });
-    }, 250);
+    if (itemOffset + itemHeight > wrapperScroll + wrapperHeight) {
+      wrapper.scrollTop = itemOffset + itemHeight - wrapperHeight;
+    }
 
-    _this.isEqualItems = function (items, prevItems) {
-      if (items.length !== prevItems.length) {
-        return false;
-      }
+    if (itemOffset < wrapperScroll) {
+      wrapper.scrollTop = itemOffset;
+    }
+  };
 
-      return items.every(function (item, i) {
-        var isEqualValue = item.value === prevItems[i].value;
-        var isEqualTitle = item.title === prevItems[i].title;
-        return isEqualValue && isEqualTitle;
+  (0, React.useEffect)(function () {
+    if (!isOpened) {
+      // Changes hovered item on dropdown close to currently chosen to hover it on dropdown open
+      changeSelectState({
+        type: SET_HOVERED_ITEM_INDEX,
+        hoveredItemIndex: currentIndex === -1 ? 0 : currentIndex
       });
-    };
-
-    _this.handleOpened = function () {
-      var onOpened = _this.props.onOpened;
-      onOpened && onOpened();
-    };
+      return undefined;
+    }
 
-    _this.handleClosed = function () {
-      var onClosed = _this.props.onClosed;
-      onClosed && onClosed();
+    onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+    scrollList(currentIndex);
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
     };
+  }, [isOpened, currentIndex, onOpened, handleClickOutside]);
+  (0, React.useEffect)(function () {
+    changeSelectState({
+      type: UPDATE_ITEMS_LIST,
+      items: items
+    });
+  }, [items]);
+  (0, React.useEffect)(function () {
+    if (currentIndex === -1) {
+      return;
+    }
 
-    _this.handleClickOutside = function (e) {
-      var isOpened = _this.state.isOpened;
-
-      if (e.target instanceof Node && _this.selectNode.contains(e.target) || !isOpened) {
-        return;
+    changeSelectState({
+      type: UPDATE_VALUE_FROM_PROPS,
+      hoveredItemIndex: currentIndex,
+      inputValue: itemsList[currentIndex].title,
+      comparableInputValue: itemsList[currentIndex].title
+    });
+  }, [currentIndex, itemsList]);
+  var debouncedComboboxChange = (0, _lodash["default"])(function (debounceFilterValue) {
+    var query = debounceFilterValue.replace(/[^A-Z-a-zА-ЯЁа-яё0-9]/g, function (w) {
+      return "\\".concat(w);
+    });
+    var debounceItemsList = items.filter(function (_ref2) {
+      var title = _ref2.title;
+
+      if (debounceFilterValue.length <= title.length) {
+        return RegExp(query, 'ig').test(title);
       }
 
-      _this.setState({
-        isOpened: false
-      }, function () {
-        if (!_this.state.isOpened) {
-          _this.handleClosed();
-        }
-      });
-    };
+      return false;
+    });
+    changeSelectState({
+      type: COMBOBOX_VALUE_DEBOUNCE,
+      items: debounceItemsList,
+      comparableInputValue: debounceFilterValue
+    });
+  }, 250);
+
+  var handleSelectClick = function handleSelectClick() {
+    var isCurrentlyOpened = isOpened;
+    changeSelectState({
+      type: TOGGLE_DROPDOWN,
+      isOpened: !isCurrentlyOpened
+    });
+    isCurrentlyOpened && (onClosed === null || onClosed === void 0 ? void 0 : onClosed());
+  };
 
-    _this.handleOpenDropdown = function () {
-      _this.setState(function (state) {
-        return {
-          isOpened: !state.isOpened
-        };
-      }, function () {
-        if (_this.state.isOpened) {
-          _this.handleOpened();
-        } else {
-          _this.handleClosed();
-        }
-      });
-    };
+  var handleSelectItem = function handleSelectItem(e) {
+    var currentItem = itemsList[hoveredItemIndex].value;
+    var item = itemsList.find(function (elem) {
+      return elem.value === currentItem;
+    });
 
-    _this.handleSelectItem = function (e) {
-      var _this$props = _this.props,
-          onSelect = _this$props.onSelect,
-          items = _this$props.items;
-      var _this$state = _this.state,
-          activeIndex = _this$state.activeIndex,
-          filteredItems = _this$state.filteredItems;
-      var currentItem = filteredItems[activeIndex].value;
-      var item = filteredItems.find(function (elem) {
-        return elem.value === currentItem;
-      });
-
-      if (!item) {
-        return;
-      }
+    if (!item) {
+      return;
+    }
 
-      var title = item.title;
+    var title = item.title;
+    changeSelectState({
+      type: UPDATE_SELECT_VALUE,
+      inputValue: title,
+      comparableInputValue: title,
+      items: items
+    });
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, item);
+    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+  };
 
-      _this.setState({
-        isOpened: false,
-        inputValue: title,
-        comparableInputValue: title,
-        filteredItems: items,
-        isChoosenItem: true
+  var handleHoverItem = function handleHoverItem(index) {
+    return function (e) {
+      e.preventDefault();
+      changeSelectState({
+        type: SET_HOVERED_ITEM_INDEX,
+        hoveredItemIndex: index
       });
-
-      onSelect && onSelect(e, item);
-
-      _this.handleClosed();
-    };
-
-    _this.handleHoverItem = function (index) {
-      return function (e) {
-        e.preventDefault();
-
-        _this.setState({
-          activeIndex: index
-        });
-      };
     };
+  };
 
-    _this.handleComboboxFocus = function (e) {
-      var _this$state2 = _this.state,
-          isOpened = _this$state2.isOpened,
-          filteredItems = _this$state2.filteredItems;
-      e.stopPropagation();
+  var handleComboboxFocus = function handleComboboxFocus(e) {
+    e.stopPropagation();
+    changeSelectState({
+      type: TOGGLE_DROPDOWN,
+      isOpened: !isOpened
+    });
 
-      _this.setState(function (state) {
-        return {
-          isOpened: !state.isOpened
-        };
-      });
+    if (!isOpened && itemsList) {
+      e.target.select();
+    }
+  };
 
-      _this.handleOpened();
+  var handleChangeCombobox = function handleChangeCombobox(e) {
+    var comboboxValue = e.target.value;
+    onSelect && onSelect(null);
+    changeSelectState({
+      type: COMBOBOX_INPUT_CHANGE,
+      inputValue: comboboxValue
+    });
+    debouncedComboboxChange(comboboxValue);
+  };
 
-      if (!isOpened && filteredItems) {
-        e.target.select();
-      }
-    };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (itemsList.length === 0 || disabled) {
+      return true;
+    }
 
-    _this.handleChangeCombobox = function (e) {
-      var onSelect = _this.props.onSelect;
-      var isChoosenItem = _this.state.isChoosenItem;
-      var filterValue = e.target.value;
+    if (e.key === 'ArrowDown' && isOpened && hoveredItemIndex < itemsList.length - 1) {
+      var nextIndex = hoveredItemIndex + 1;
+      e.preventDefault();
+      changeSelectState({
+        type: SET_HOVERED_ITEM_INDEX,
+        hoveredItemIndex: nextIndex
+      });
+      scrollList(nextIndex);
+      return false;
+    }
 
-      if (isChoosenItem) {
-        onSelect && onSelect(null);
-      }
+    if (e.key === 'ArrowUp' && isOpened && hoveredItemIndex > 0) {
+      var _nextIndex = hoveredItemIndex - 1;
 
-      _this.setState({
-        inputValue: filterValue,
-        isChoosenItem: false
+      e.preventDefault();
+      changeSelectState({
+        type: SET_HOVERED_ITEM_INDEX,
+        hoveredItemIndex: _nextIndex
       });
+      scrollList(_nextIndex);
+      return false;
+    }
 
-      _this.debouncedComboboxChange(filterValue);
-    };
-
-    _this.handleKeyDown = function (e) {
-      var _this$state3 = _this.state,
-          activeIndex = _this$state3.activeIndex,
-          isOpened = _this$state3.isOpened,
-          filteredItems = _this$state3.filteredItems;
-      var disabled = _this.props.disabled;
+    if (e.key === 'Enter' && isOpened) {
+      handleSelectItem(e);
+      return false;
+    }
 
-      if (filteredItems.length === 0 || disabled) {
-        return true;
-      }
+    if (e.key === 'Enter' && !isOpened) {
+      changeSelectState({
+        type: TOGGLE_DROPDOWN,
+        isOpened: true
+      });
+      onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+      return false;
+    }
 
-      if (e.key === 'ArrowDown' && isOpened && activeIndex < filteredItems.length - 1) {
-        _this.setState({
-          activeIndex: activeIndex + 1
-        }, function () {
-          _this.scrollList(_this.state.activeIndex);
-        });
+    if (e.key === 'Tab') {
+      changeSelectState({
+        type: TOGGLE_DROPDOWN,
+        isOpened: false
+      });
+      return false;
+    }
 
-        e.preventDefault();
-        return false;
-      }
+    return true;
+  };
 
-      if (e.key === 'ArrowUp' && isOpened && activeIndex > 0) {
-        _this.setState(function (prevState) {
-          return {
-            activeIndex: prevState.activeIndex - 1
-          };
-        }, function () {
-          _this.scrollList(_this.state.activeIndex);
+  var highlightString = function highlightString(title, isItemActive, view) {
+    if (type === SelectTypes.CLASSIC) {
+      if (typeof view === 'function' && !React.isValidElement(view)) {
+        return view({
+          filterValue: inputValue,
+          isItemActive: isItemActive
         });
-
-        e.preventDefault();
-        return false;
       }
 
-      if (e.key === 'Enter' && isOpened) {
-        _this.handleSelectItem(e);
-
-        return false;
-      }
-
-      if (e.key === 'Enter' && !isOpened) {
-        _this.setState({
-          isOpened: true
-        });
-
-        _this.handleOpened();
-
-        return false;
-      }
+      return view || title;
+    }
 
-      if (e.key === 'Tab') {
-        _this.setState({
-          isOpened: false
+    if (type === SelectTypes.COMBOBOX && view) {
+      if (typeof view === 'function' && !React.isValidElement(view)) {
+        return view({
+          filterValue: inputValue,
+          isItemActive: isItemActive
         });
-
-        return false;
       }
 
-      return true;
-    };
-
-    _this.highlightString = function (title, view) {
-      var type = _this.props.type;
-      var _this$state4 = _this.state,
-          comparableInputValue = _this$state4.comparableInputValue,
-          inputValue = _this$state4.inputValue;
-
-      if (type === SelectTypes.CLASSIC) {
-        if (typeof view === 'function' && !React.isValidElement(view)) {
-          return view({
-            filterValue: inputValue
-          });
-        }
-
-        return view || title;
-      }
-
-      if (type === SelectTypes.COMBOBOX && view) {
-        if (typeof view === 'function' && !React.isValidElement(view)) {
-          return view({
-            filterValue: inputValue
-          });
-        }
-
-        return view;
-      }
-
-      var stringFragments = title.split(RegExp("(".concat(comparableInputValue, ")"), 'ig'));
-      return /*#__PURE__*/React.createElement(React.Fragment, null, stringFragments.map(function (fragment, i) {
-        return /*#__PURE__*/React.createElement(React.Fragment, {
-          key: i
-        }, fragment.toLowerCase() === comparableInputValue.toLowerCase() && fragment !== '' ? /*#__PURE__*/React.createElement("span", {
-          className: cn('highlighted-fragment')
-        }, fragment) : fragment);
-      }));
-    };
-
-    _this.getItemWrapper = function (node) {
-      _this.itemWrapperNode = node;
-    };
-
-    _this.getSelectNode = function (node) {
-      _this.selectNode = node;
-    };
-
-    _this.getNodeList = function (node) {
-      return _this.itemsNodeList.push(node);
-    };
-
-    _this.state = {
-      isOpened: false,
-      activeIndex: 0,
-      filteredItems: props.items,
-      comparableInputValue: '',
-      inputValue: '',
-      isChoosenItem: false
-    };
-    _this.itemsNodeList = [];
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Select, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var currentValue = this.props.currentValue;
-      var filteredItems = this.state.filteredItems;
-      var currentIndex = filteredItems.findIndex(function (elem) {
-        return elem.value === currentValue;
-      });
-
-      if (currentIndex !== -1) {
-        this.setState({
-          activeIndex: currentIndex,
-          inputValue: filteredItems[currentIndex].title,
-          comparableInputValue: filteredItems[currentIndex].title
-        });
-      }
+      return view;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref2) {
-      var prevItems = _ref2.items;
-      var items = this.props.items;
-      var isOpened = this.state.isOpened;
-
-      if (!this.isEqualItems(items, prevItems)) {
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({
-          filteredItems: items
-        });
-      }
 
-      if (isOpened) {
-        document.addEventListener('click', this.handleClickOutside);
-        return;
-      }
+    var stringFragments = title.split(RegExp("(".concat(filterValue, ")"), 'ig'));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, stringFragments.map(function (fragment, i) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: i
+      }, fragment.toLowerCase() === filterValue.toLowerCase() && fragment !== '' ? /*#__PURE__*/React.createElement("span", {
+        className: cn('highlighted-fragment')
+      }, fragment) : fragment);
+    }));
+  };
 
-      document.removeEventListener('click', this.handleClickOutside);
+  var getNodeList = (0, React.useCallback)(function (node) {
+    if (filterValue.trim()) {
+      itemsNodeList.current = [];
+      return;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('click', this.handleClickOutside);
-    }
-  }, {
-    key: "scrollList",
-    value: function scrollList(activeIndex) {
-      if (!this.itemsNodeList) {
-        return;
-      }
 
-      var wrapper = this.itemWrapperNode;
-      var wrapperScroll = wrapper.scrollTop;
-      var wrapperHeight = wrapper.offsetHeight;
-      var item = this.itemsNodeList[activeIndex];
+    !filterValue && node && itemsNodeList.current.push(node);
+  }, [filterValue]);
 
-      if (!item) {
-        return;
-      }
+  var renderTitle = function renderTitle() {
+    var item = items.find(function (elem) {
+      return elem.value === currentValue;
+    });
+    var inputTitle = placeholder;
 
-      var itemOffset = item.offsetTop;
-      var itemHeight = item.offsetHeight;
+    if (item && item.title) {
+      inputTitle = item.selectedView ? item.selectedView : item.title;
+    }
 
-      if (itemOffset + itemHeight > wrapperScroll + wrapperHeight) {
-        wrapper.scrollTop = itemOffset + itemHeight - wrapperHeight;
-      }
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
+      className: cn('title', {
+        placeholder: !!placeholder && !currentValue
+      }, [classes === null || classes === void 0 ? void 0 : classes.title]),
+      role: "button",
+      tabIndex: 0,
+      onClick: handleSelectClick
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cn('title-inner', [classes === null || classes === void 0 ? void 0 : classes.titleInner])
+    }, inputTitle));
+  };
 
-      if (itemOffset < wrapperScroll) {
-        wrapper.scrollTop = itemOffset;
-      }
-    }
-  }, {
-    key: "renderTitle",
-    value: function renderTitle() {
-      var _this$props2 = this.props,
-          placeholder = _this$props2.placeholder,
-          items = _this$props2.items,
-          currentValue = _this$props2.currentValue,
-          classes = _this$props2.classes,
-          dataAttrs = _this$props2.dataAttrs;
-      var item = items.find(function (elem) {
-        return elem.value === currentValue;
-      });
-      var inputTitle = placeholder;
+  var renderCombobox = function renderCombobox() {
+    return /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+      className: cn('combobox'),
+      onFocus: handleComboboxFocus,
+      onChange: handleChangeCombobox,
+      type: "text",
+      value: inputValue,
+      placeholder: placeholder
+    }));
+  };
 
-      if (item && item.title) {
-        inputTitle = item.selectedView ? item.selectedView : item.title;
-      }
+  var renderChildren = function renderChildren() {
+    var currentItems = type === SelectTypes.COMBOBOX ? itemsList : items;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('list', [classes.list])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('list-inner'),
+      ref: itemWrapperNode
+    }, currentItems.map(function (_ref3, i) {
+      var title = _ref3.title,
+          value = _ref3.value,
+          view = _ref3.view;
+      var isItemActive = currentValue === value;
+      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItem, i + 1), {
+        className: cn('list-item', {
+          hovered: hoveredItemIndex === i
+        }, [classes.listItem]),
+        key: "".concat(i, "_").concat(value),
+        onClick: handleSelectItem,
+        onMouseEnter: handleHoverItem(i),
+        ref: getNodeList
+      }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItemTitle, i + 1), {
+        className: cn('item-title', {
+          active: isItemActive && !view
+        }, [classes.listItemTitle])
+      }), highlightString(title, isItemActive, view)));
+    }), type === SelectTypes.COMBOBOX && !currentItems.length && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notFound), {
+      className: cn('not-found')
+    }), notFoundText)));
+  };
 
-      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
-        className: cn('title', {
-          placeholder: !!placeholder && !currentValue
-        }, [classes === null || classes === void 0 ? void 0 : classes.title]),
-        role: "button",
-        tabIndex: 0,
-        onClick: this.handleOpenDropdown
-      }), /*#__PURE__*/React.createElement("div", {
-        className: cn('title-inner', [classes === null || classes === void 0 ? void 0 : classes.titleInner])
-      }, inputTitle));
-    }
-  }, {
-    key: "renderCombobox",
-    value: function renderCombobox() {
-      var _this$props3 = this.props,
-          placeholder = _this$props3.placeholder,
-          dataAttrs = _this$props3.dataAttrs;
-      var inputValue = this.state.inputValue;
-      return /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
-        className: cn('combobox'),
-        onFocus: this.handleComboboxFocus,
-        onChange: this.handleChangeCombobox,
-        type: "text",
-        value: inputValue,
-        placeholder: placeholder
-      }));
-    }
-  }, {
-    key: "renderChildren",
-    value: function renderChildren() {
-      var _this2 = this;
-
-      var _this$props4 = this.props,
-          type = _this$props4.type,
-          items = _this$props4.items,
-          notFoundText = _this$props4.notFoundText,
-          _this$props4$classes = _this$props4.classes,
-          classes = _this$props4$classes === void 0 ? {} : _this$props4$classes,
-          dataAttrs = _this$props4.dataAttrs;
-      var _this$state5 = this.state,
-          filteredItems = _this$state5.filteredItems,
-          activeIndex = _this$state5.activeIndex;
-      var currentItems = type === SelectTypes.COMBOBOX ? filteredItems : items;
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn('list', [classes.list])
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cn('list-inner'),
-        ref: this.getItemWrapper
-      }, currentItems.map(function (_ref3, i) {
-        var title = _ref3.title,
-            value = _ref3.value,
-            view = _ref3.view;
-        return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItem, i + 1), {
-          className: cn('list-item', {
-            active: activeIndex === i
-          }, [classes.listItem]),
-          key: "".concat(i, "_").concat(value),
-          onClick: _this2.handleSelectItem,
-          onMouseEnter: _this2.handleHoverItem(i),
-          ref: _this2.getNodeList
-        }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItemTitle, i + 1), {
-          className: cn('item-title', [classes.listItemTitle])
-        }), _this2.highlightString(title, view)));
-      }), type === SelectTypes.COMBOBOX && !currentItems.length && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notFound), {
-        className: cn('not-found')
-      }), notFoundText)));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-          type = _this$props5.type,
-          disabled = _this$props5.disabled,
-          verification = _this$props5.verification,
-          noticeText = _this$props5.noticeText,
-          label = _this$props5.label,
-          labelId = _this$props5.labelId,
-          required = _this$props5.required,
-          _this$props5$classNam = _this$props5.className,
-          className = _this$props5$classNam === void 0 ? '' : _this$props5$classNam,
-          _this$props5$classes = _this$props5.classes,
-          classes = _this$props5$classes === void 0 ? {} : _this$props5$classes,
-          dataAttrs = _this$props5.dataAttrs;
-      var isOpened = this.state.isOpened;
-      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-        className: cn({
-          open: isOpened,
-          disabled: disabled,
-          'no-touch': !this.isTouch,
-          valid: verification === Verification.VALID,
-          error: verification === Verification.ERROR
-        }, [className, classes.root]),
-        ref: this.getSelectNode
-      }), /*#__PURE__*/React.createElement("div", {
-        className: cn('inner')
-      }, label && /*#__PURE__*/React.createElement(_InputLabel["default"], {
-        dataAttrs: {
-          root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label
-        },
-        htmlFor: labelId
-      }, label, required && /*#__PURE__*/React.createElement("span", {
-        className: cn('require-mark')
-      }, "*")), /*#__PURE__*/React.createElement("div", {
-        className: cn('control', classes.control),
-        onKeyDown: this.handleKeyDown
-      }, type === SelectTypes.COMBOBOX && this.renderCombobox(), type === SelectTypes.CLASSIC && this.renderTitle()), this.renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.noticeText), {
-        className: cn('text', {
-          error: verification === Verification.ERROR,
-          success: verification === Verification.VALID
-        })
-      }), noticeText));
-    }
-  }]);
-  return Select;
-}(React.Component);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      open: isOpened,
+      disabled: disabled,
+      'no-touch': !isTouch,
+      valid: verification === Verification.VALID,
+      error: verification === Verification.ERROR
+    }, [className, classes.root]),
+    ref: selectNode
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, label && /*#__PURE__*/React.createElement(_InputLabel["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label
+    },
+    htmlFor: labelId
+  }, label, required && /*#__PURE__*/React.createElement("span", {
+    className: cn('require-mark')
+  }, "*")), /*#__PURE__*/React.createElement("div", {
+    className: cn('control', classes.control),
+    onKeyDown: handleKeyDown
+  }, type === SelectTypes.COMBOBOX && renderCombobox(), type === SelectTypes.CLASSIC && renderTitle()), renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.noticeText), {
+    className: cn('text', {
+      error: verification === Verification.ERROR,
+      success: verification === Verification.VALID
+    })
+  }), noticeText));
+};
 
 Select.propTypes = {
   type: PropTypes.oneOf(Object.values(SelectTypes)),
@@ -636,11 +510,5 @@ Select.propTypes = {
   onOpened: PropTypes.func,
   onClosed: PropTypes.func
 };
-Select.defaultProps = {
-  disabled: false,
-  required: false,
-  type: 'classic',
-  notFoundText: 'Ничего не нашлось'
-};
 var _default = Select;
 exports["default"] = _default;