@megafon/ui-core 2.4.0 → 3.0.0-beta.10

package/dist/es/components/Select/Select.js

@@ -1,35 +1,32 @@
 import "core-js/modules/es.array.concat";
-import "core-js/modules/es.array.every";
 import "core-js/modules/es.array.filter";
 import "core-js/modules/es.array.find";
 import "core-js/modules/es.array.find-index";
 import "core-js/modules/es.array.map";
-import "core-js/modules/es.date.to-string";
-import "core-js/modules/es.object.to-string";
 import "core-js/modules/es.object.values";
-import "core-js/modules/es.reflect.construct";
 import "core-js/modules/es.regexp.constructor";
 import "core-js/modules/es.regexp.exec";
 import "core-js/modules/es.regexp.to-string";
 import "core-js/modules/es.string.replace";
 import "core-js/modules/es.string.split";
+import "core-js/modules/es.string.trim";
 import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
+import { Fragment, useEffect, useReducer, useCallback } from 'react';
 import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
 import * as PropTypes from 'prop-types';
 import InputLabel from "../InputLabel/InputLabel";
 import "./Select.css";
+import selectReducer, { initialState, SelectActions } from "./reducer/selectReducer";
+var UPDATE_ITEMS_LIST = SelectActions.UPDATE_ITEMS_LIST,
+    UPDATE_VALUE_FROM_PROPS = SelectActions.UPDATE_VALUE_FROM_PROPS,
+    COMBOBOX_VALUE_DEBOUNCE = SelectActions.COMBOBOX_VALUE_DEBOUNCE,
+    COMBOBOX_INPUT_CHANGE = SelectActions.COMBOBOX_INPUT_CHANGE,
+    TOGGLE_DROPDOWN = SelectActions.TOGGLE_DROPDOWN,
+    UPDATE_SELECT_VALUE = SelectActions.UPDATE_SELECT_VALUE,
+    SET_HOVERED_ITEM_INDEX = SelectActions.SET_HOVERED_ITEM_INDEX;
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -37,492 +34,413 @@ export var Verification = {
 export var SelectTypes = {
   CLASSIC: 'classic',
   COMBOBOX: 'combobox'
-};
-var cn = cnCreate('mfui-select');
-
-var Select = /*#__PURE__*/function (_React$Component) {
-  _inherits(Select, _React$Component);
+}; // 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.
 
-  var _super = _createSuper(Select);
+var cn = cnCreate('mfui-select');
 
-  function Select(props) {
-    var _this;
+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 = useReducer(selectReducer, initialState),
+      _useReducer2 = _slicedToArray(_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 = detectTouch();
+  var currentIndex = itemsList.findIndex(function (elem) {
+    return elem.value === currentValue;
+  }); // Used in various handlers instead useEffect with isOpened dependency because on initial component render isOpened is false
+  // so it triggers onClosed callback call
+
+  var handleClosed = function handleClosed() {
+    onClosed === null || onClosed === void 0 ? void 0 : onClosed(); // eslint-disable-next-line @typescript-eslint/no-use-before-define
+
+    document.removeEventListener('click', handleClickOutside);
+  };
+
+  var handleClickOutside = 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;
+    }
 
-    _classCallCheck(this, Select);
+    handleClosed();
+    changeSelectState({
+      type: TOGGLE_DROPDOWN,
+      isOpened: false
+    });
+  }, [isOpened]);
 
-    _this = _super.call(this, props);
-    _this.isTouch = detectTouch();
-    _this.debouncedComboboxChange = debounce(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 scrollList = function scrollList(itemIndex) {
+    if (!itemsNodeList.current.length) {
+      return;
+    }
 
-        if (filterValue.length <= title.length) {
-          return RegExp(query, 'ig').test(title);
-        }
+    var wrapper = itemWrapperNode.current;
+    var item = itemsNodeList.current[itemIndex];
 
-        return false;
-      });
+    if (!item || !wrapper) {
+      return;
+    }
 
-      _this.setState({
-        filteredItems: filteredItems,
-        comparableInputValue: filterValue,
-        isOpened: true,
-        activeIndex: 0
-      });
-    }, 250);
+    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.isEqualItems = function (items, prevItems) {
-      if (items.length !== prevItems.length) {
-        return false;
-      }
+    if (itemOffset + itemHeight > wrapperScroll + wrapperHeight) {
+      wrapper.scrollTop = itemOffset + itemHeight - wrapperHeight;
+    }
 
-      return items.every(function (item, i) {
-        var isEqualValue = item.value === prevItems[i].value;
-        var isEqualTitle = item.title === prevItems[i].title;
-        return isEqualValue && isEqualTitle;
+    if (itemOffset < wrapperScroll) {
+      wrapper.scrollTop = itemOffset;
+    }
+  };
+
+  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 === null || onOpened === void 0 ? void 0 : onOpened();
-    };
+      return undefined;
+    }
 
-    _this.handleClosed = function () {
-      var onClosed = _this.props.onClosed;
-      onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+    onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+    scrollList(currentIndex);
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
     };
+  }, [isOpened, currentIndex]);
+  useEffect(function () {
+    changeSelectState({
+      type: UPDATE_ITEMS_LIST,
+      items: items
+    });
+  }, [items]);
+  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 = debounce(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 && handleClosed();
+  };
+
+  var handleSelectItem = function handleSelectItem(e) {
+    var currentItem = itemsList[hoveredItemIndex].value;
+    var item = itemsList.find(function (elem) {
+      return elem.value === currentItem;
+    });
+
+    if (!item) {
+      return;
+    }
 
-    _this.handleOpenDropdown = function () {
-      _this.setState(function (state) {
-        return {
-          isOpened: !state.isOpened
-        };
-      }, function () {
-        if (_this.state.isOpened) {
-          _this.handleOpened();
-        } else {
-          _this.handleClosed();
-        }
+    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);
+    handleClosed();
+  };
+
+  var handleHoverItem = function handleHoverItem(index) {
+    return function (e) {
+      e.preventDefault();
+      changeSelectState({
+        type: SET_HOVERED_ITEM_INDEX,
+        hoveredItemIndex: index
       });
     };
+  };
 
-    _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;
-      }
+  var handleComboboxFocus = function handleComboboxFocus(e) {
+    e.stopPropagation();
+    changeSelectState({
+      type: TOGGLE_DROPDOWN,
+      isOpened: !isOpened
+    });
 
-      var title = item.title;
+    if (!isOpened && itemsList) {
+      e.target.select();
+    }
+  };
+
+  var handleChangeCombobox = function handleChangeCombobox(e) {
+    var comboboxValue = e.target.value;
+    onSelect && onSelect(null);
+    changeSelectState({
+      type: COMBOBOX_INPUT_CHANGE,
+      inputValue: comboboxValue
+    });
+    debouncedComboboxChange(comboboxValue);
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (itemsList.length === 0 || disabled) {
+      return true;
+    }
 
-      _this.setState({
-        isOpened: false,
-        inputValue: title,
-        comparableInputValue: title,
-        filteredItems: items,
-        isChoosenItem: true
+    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;
+    }
 
-      onSelect === null || onSelect === void 0 ? void 0 : 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();
+    if (e.key === 'ArrowUp' && isOpened && hoveredItemIndex > 0) {
+      var _nextIndex = hoveredItemIndex - 1;
 
-      _this.setState(function (state) {
-        return {
-          isOpened: !state.isOpened
-        };
+      e.preventDefault();
+      changeSelectState({
+        type: SET_HOVERED_ITEM_INDEX,
+        hoveredItemIndex: _nextIndex
       });
+      scrollList(_nextIndex);
+      return false;
+    }
 
-      _this.handleOpened();
-
-      if (!isOpened && filteredItems) {
-        e.target.select();
-      }
-    };
-
-    _this.handleChangeCombobox = function (e) {
-      var onSelect = _this.props.onSelect;
-      var isChoosenItem = _this.state.isChoosenItem;
-      var filterValue = e.target.value;
-
-      if (isChoosenItem) {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(null);
-      }
+    if (e.key === 'Enter' && isOpened) {
+      handleSelectItem(e);
+      return false;
+    }
 
-      _this.setState({
-        inputValue: filterValue,
-        isChoosenItem: false
+    if (e.key === 'Enter' && !isOpened) {
+      changeSelectState({
+        type: TOGGLE_DROPDOWN,
+        isOpened: true
       });
+      onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+      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 (filteredItems.length === 0 || disabled) {
-        return true;
-      }
-
-      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) {
-      _this.itemsNodeList.push(node);
-    };
-
-    _this.state = {
-      isOpened: false,
-      activeIndex: 0,
-      filteredItems: props.items,
-      comparableInputValue: '',
-      inputValue: '',
-      isChoosenItem: false
-    };
-    _this.itemsNodeList = [];
-    return _this;
-  }
-
-  _createClass(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;
-      }
-
-      document.removeEventListener('click', this.handleClickOutside);
+    var stringFragments = title.split(RegExp("(".concat(filterValue, ")"), 'ig'));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, stringFragments.map(function (fragment, i) {
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: i
+      }, fragment.toLowerCase() === filterValue.toLowerCase() && fragment !== '' ? /*#__PURE__*/React.createElement("span", {
+        className: cn('highlighted-fragment')
+      }, fragment) : fragment);
+    }));
+  };
+
+  var getNodeList = 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 itemOffset = item.offsetTop;
-      var itemHeight = item.offsetHeight;
+  var renderTitle = function renderTitle() {
+    var item = items.find(function (elem) {
+      return elem.value === currentValue;
+    });
+    var inputTitle = placeholder;
 
-      if (itemOffset + itemHeight > wrapperScroll + wrapperHeight) {
-        wrapper.scrollTop = itemOffset + itemHeight - wrapperHeight;
-      }
-
-      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;
-      var item = items.find(function (elem) {
-        return elem.value === currentValue;
-      });
-      var inputTitle = placeholder;
-
-      if (item && item.title) {
-        inputTitle = item.selectedView ? item.selectedView : item.title;
-      }
-
-      return /*#__PURE__*/React.createElement("div", {
-        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));
+    if (item && item.title) {
+      inputTitle = item.selectedView ? item.selectedView : item.title;
     }
-  }, {
-    key: "renderCombobox",
-    value: function renderCombobox() {
-      var placeholder = this.props.placeholder;
-      var inputValue = this.state.inputValue;
-      return /*#__PURE__*/React.createElement("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$props3 = this.props,
-          type = _this$props3.type,
-          items = _this$props3.items,
-          notFoundText = _this$props3.notFoundText,
-          _this$props3$classes = _this$props3.classes,
-          classes = _this$props3$classes === void 0 ? {} : _this$props3$classes;
-      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", {
-          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", {
-          className: cn('item-title', [classes.listItemTitle])
-        }, _this2.highlightString(title, view)));
-      }), type === SelectTypes.COMBOBOX && !currentItems.length && /*#__PURE__*/React.createElement("div", {
-        className: cn('not-found')
-      }, notFoundText)));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-          type = _this$props4.type,
-          disabled = _this$props4.disabled,
-          verification = _this$props4.verification,
-          noticeText = _this$props4.noticeText,
-          label = _this$props4.label,
-          labelId = _this$props4.labelId,
-          required = _this$props4.required,
-          _this$props4$classNam = _this$props4.className,
-          className = _this$props4$classNam === void 0 ? '' : _this$props4$classNam,
-          _this$props4$classes = _this$props4.classes,
-          classes = _this$props4$classes === void 0 ? {} : _this$props4$classes,
-          dataAttrs = _this$props4.dataAttrs;
-      var isOpened = this.state.isOpened;
-      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
-        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, {
-        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", {
-        className: cn('text', {
-          error: verification === Verification.ERROR,
-          success: verification === Verification.VALID
-        })
-      }, noticeText));
-    }
-  }]);
 
-  return Select;
-}(React.Component);
+    return /*#__PURE__*/React.createElement("div", _extends({}, 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));
+  };
+
+  var renderCombobox = function renderCombobox() {
+    return /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+      className: cn('combobox'),
+      onFocus: handleComboboxFocus,
+      onChange: handleChangeCombobox,
+      type: "text",
+      value: inputValue,
+      placeholder: placeholder
+    }));
+  };
+
+  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", _extends({}, 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", _extends({}, 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", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notFound), {
+      className: cn('not-found')
+    }), notFoundText)));
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, 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, {
+    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", _extends({}, 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)),
@@ -545,6 +463,16 @@ Select.propTypes = {
     listItem: PropTypes.string,
     listItemTitle: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    label: PropTypes.objectOf(PropTypes.string.isRequired),
+    title: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    noticeText: PropTypes.objectOf(PropTypes.string.isRequired),
+    listItem: PropTypes.objectOf(PropTypes.string.isRequired),
+    listItemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
+    notFound: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   items: PropTypes.arrayOf(PropTypes.exact({
     view: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
     selectedView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
@@ -552,14 +480,7 @@ Select.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
   })).isRequired,
   onSelect: PropTypes.func,
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   onOpened: PropTypes.func,
   onClosed: PropTypes.func
 };
-Select.defaultProps = {
-  disabled: false,
-  required: false,
-  type: 'classic',
-  notFoundText: 'Ничего не нашлось'
-};
 export default Select;