@jetbrains/ring-ui-built 6.1.1-beta.0 → 7.0.0-beta.10

package/components/select/select.js

@@ -1,24 +1,14 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, e as _classCallCheck, f as _callSuper, c as _objectWithoutProperties, n as _toPropertyKey } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.find.js';
-import 'core-js/modules/es.array.index-of.js';
-import 'core-js/modules/es.array.map.js';
+import { _ as _defineProperty, b as _objectSpread2, a as _objectWithoutProperties, c as _toPropertyKey } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.object.values.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
 import 'core-js/modules/es.string.trim.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
-import { Fragment, Component } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { Component, Fragment } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import closeIcon from '@jetbrains/icons/close-12px';
-import deepEqual from 'deep-equal';
+import { dequal } from 'dequal';
 import '../dropdown/dropdown.js';
 import Avatar, { Size as Size$1 } from '../avatar/avatar.js';
 import Popup from '../popup/popup.js';
@@ -34,49 +24,32 @@ import fuzzyHighlight from '../global/fuzzy-highlight.js';
 import memoize from '../global/memoize.js';
 import { I18nContext } from '../i18n/i18n-context.js';
 import { createComposedRef } from '../global/composeRefs.js';
-import { refObject } from '../global/prop-types.js';
 import { isArray } from '../global/typescript-utils.js';
-import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
+import { ControlsHeight, ControlsHeightContext } from '../global/controls-height.js';
 import SelectPopup from './select__popup.js';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { A as Anchor } from '../_helpers/anchor.js';
-import 'core-js/modules/es.object.entries.js';
 import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../global/url.js';
-import 'core-js/modules/es.string.match.js';
 import '../global/dom.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.js';
 import '../avatar/fallback-avatar.js';
-import 'core-js/modules/es.array.from.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import 'react-dom';
 import '../global/schedule-raf.js';
 import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
-import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.array.sort.js';
-import 'core-js/modules/es.string.includes.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../shortcuts/core.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.splice.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
-import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.symbol.description.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
@@ -109,7 +82,7 @@ import '../caret/caret.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
 
-var modules_9d0de074 = {"button-shadow":"i__const_button_shadow_0","select":"select_rui_e9c2","value":"value_rui_e9c2 ellipsis_rui_f295 font_rui_f295","icons":"icons_rui_e9c2","light":"light_rui_2ac4","toolbar":"toolbar_rui_e9c2","button":"button_rui_e9c2","buttonSpaced":"buttonSpaced_rui_e9c2","inputMode":"inputMode_rui_e9c2","selectedIcon":"selectedIcon_rui_e9c2 resetButton_rui_f295","clearIcon":"clearIcon_rui_e9c2","sizeS":"sizeS_rui_e9c2","sizeM":"sizeM_rui_e9c2","sizeL":"sizeL_rui_e9c2","sizeFULL":"sizeFULL_rui_e9c2","sizeAUTO":"sizeAUTO_rui_e9c2","buttonMode":"buttonMode_rui_e9c2","open":"open_rui_e9c2","buttonContainer":"buttonContainer_rui_e9c2","buttonValue":"buttonValue_rui_e9c2 ellipsis_rui_f295","buttonValueOpen":"buttonValueOpen_rui_e9c2","buttonValueEmpty":"buttonValueEmpty_rui_e9c2","heightS":"heightS_rui_e9c2","label":"label_rui_e9c2","disabled":"disabled_rui_e9c2","avatar":"avatar_rui_e9c2","popup":"popup_rui_e9c2","chevron":"chevron_rui_e9c2","chevronIcon":"chevronIcon_rui_e9c2"};
+var modules_9d0de074 = {"button-shadow":"i__const_button_shadow_0","select":"select_rui_e9c2","value":"value_rui_e9c2 ellipsis_rui_f295 font_rui_f295","icons":"icons_rui_e9c2","light":"light_rui_2ac4","toolbar":"toolbar_rui_e9c2","button":"button_rui_e9c2","buttonSpaced":"buttonSpaced_rui_e9c2","inputMode":"inputMode_rui_e9c2","heightS":"heightS_rui_e9c2","heightL":"heightL_rui_e9c2","selectedIcon":"selectedIcon_rui_e9c2 resetButton_rui_f295","clearIcon":"clearIcon_rui_e9c2","sizeS":"sizeS_rui_e9c2","sizeM":"sizeM_rui_e9c2","sizeL":"sizeL_rui_e9c2","sizeFULL":"sizeFULL_rui_e9c2","sizeAUTO":"sizeAUTO_rui_e9c2","buttonMode":"buttonMode_rui_e9c2","open":"open_rui_e9c2","buttonContainer":"buttonContainer_rui_e9c2","buttonValue":"buttonValue_rui_e9c2 ellipsis_rui_f295","buttonValueOpen":"buttonValueOpen_rui_e9c2","buttonValueEmpty":"buttonValueEmpty_rui_e9c2","label":"label_rui_e9c2","disabled":"disabled_rui_e9c2","avatar":"avatar_rui_e9c2","popup":"popup_rui_e9c2","chevron":"chevron_rui_e9c2","chevronIcon":"chevronIcon_rui_e9c2"};
 
 function noop() {}
 /**
@@ -123,16 +96,12 @@ var Type;
   Type["INLINE"] = "INLINE";
   Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
 })(Type || (Type = {}));
-var ICONS_OFFSET = 5;
-var ICON_WIDTH = 20;
-var getStyle = memoize(function (iconsLength) {
-  return {
-    paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
-  };
-});
-var _isInputMode = function isInputMode(type) {
-  return type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
-};
+const ICONS_OFFSET = 5;
+const ICON_WIDTH = 20;
+const getStyle = memoize(iconsLength => ({
+  paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
+}));
+const isInputMode = type => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
 function getLowerCaseLabel(item) {
   if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || List.isItemType(List.ListProps.Type.HINT, item) || typeof item.label !== 'string') {
     return null;
@@ -140,49 +109,41 @@ function getLowerCaseLabel(item) {
   return item.label.toLowerCase();
 }
 function doesLabelMatch(itemToCheck, fn) {
-  var lowerCaseLabel = getLowerCaseLabel(itemToCheck);
+  const lowerCaseLabel = getLowerCaseLabel(itemToCheck);
   if (lowerCaseLabel == null) {
     return true;
   }
   return fn(lowerCaseLabel);
 }
-function _getFilterFn(filter) {
+function getFilterFn(filter) {
   if (typeof filter === 'object') {
     if (filter.fn) {
       return filter.fn;
     }
     if (filter.fuzzy) {
-      return function (itemToCheck, checkString) {
-        return doesLabelMatch(itemToCheck, function (lowerCaseLabel) {
-          return fuzzyHighlight(checkString, lowerCaseLabel).matched;
-        });
-      };
+      return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => fuzzyHighlight(checkString, lowerCaseLabel).matched);
     }
   }
-  return function (itemToCheck, checkString) {
-    return doesLabelMatch(itemToCheck, function (lowerCaseLabel) {
-      return lowerCaseLabel.indexOf(checkString) >= 0;
-    });
-  };
+  return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => lowerCaseLabel.indexOf(checkString) >= 0);
 }
 function buildMultipleMap(selected) {
-  return selected.reduce(function (acc, item) {
+  return selected.reduce((acc, item) => {
     acc[item.key] = true;
     return acc;
   }, {});
 }
-function _getListItems(props, state, rawFilterString) {
-  var data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : props.data;
-  var filterString = rawFilterString.trim();
-  if (_isInputMode(props.type) && !props.allowAny && state.selected && !Array.isArray(state.selected) && filterString === state.selected.label) {
+function getListItems(props, state, rawFilterString) {
+  let data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : props.data;
+  let filterString = rawFilterString.trim();
+  if (isInputMode(props.type) && !props.allowAny && state.selected && !Array.isArray(state.selected) && filterString === state.selected.label) {
     filterString = ''; // ignore multiple if it is exactly the selected item
   }
-  var lowerCaseString = filterString.toLowerCase();
-  var filteredData = [];
-  var exactMatch = false;
-  var check = _getFilterFn(props.filter);
-  var _loop = function _loop() {
-    var item = _objectSpread2({}, data[i]);
+  const lowerCaseString = filterString.toLowerCase();
+  const filteredData = [];
+  let exactMatch = false;
+  const check = getFilterFn(props.filter);
+  for (let i = 0; i < data.length; i++) {
+    const item = _objectSpread2({}, data[i]);
     if (check(item, lowerCaseString, data)) {
       var _state$multipleMap2;
       exactMatch = item.label === filterString;
@@ -191,25 +152,22 @@ function _getListItems(props, state, rawFilterString) {
         item.checkbox = !!((_state$multipleMap = state.multipleMap) !== null && _state$multipleMap !== void 0 && _state$multipleMap[item.key]);
       }
       if (props.multiple && typeof props.multiple === 'object' && props.multiple.limit && Array.isArray(state.selected)) {
-        item.disabled = props.multiple.limit === state.selected.length && !state.selected.find(function (selectedItem) {
-          return selectedItem.key === item.key;
-        });
+        item.disabled = props.multiple.limit === state.selected.length && !state.selected.find(selectedItem => selectedItem.key === item.key);
       }
       // Ignore item if it's multiple and is already selected
       if (!(props.multiple && typeof props.multiple === 'object' && props.multiple.removeSelectedItems && (_state$multipleMap2 = state.multipleMap) !== null && _state$multipleMap2 !== void 0 && _state$multipleMap2[item.key])) {
         filteredData.push(item);
       }
     }
-  };
-  for (var i = 0; i < data.length; i++) {
-    _loop();
   }
-  var addButton = null;
-  var add = props.add;
+  let addButton = null;
+  const {
+    add
+  } = props;
   if (add && filterString && !exactMatch || add && add.alwaysVisible) {
     if (!(add.regexp && !add.regexp.test(filterString)) && !(add.minlength && filterString.length < +add.minlength) || add.alwaysVisible) {
       var _add$delayed;
-      var label;
+      let label;
       if (add.label) {
         label = typeof add.label === 'function' ? add.label(filterString) : add.label;
       } else {
@@ -228,12 +186,12 @@ function _getListItems(props, state, rawFilterString) {
   };
 }
 function getSelectedIndex(selected, data) {
-  var firstSelected = Array.isArray(selected) ? selected[0] : selected;
+  const firstSelected = Array.isArray(selected) ? selected[0] : selected;
   if (firstSelected == null) {
     return null;
   }
-  for (var i = 0; i < data.length; i++) {
-    var item = data[i];
+  for (let i = 0; i < data.length; i++) {
+    const item = data[i];
     if (item.key === undefined) {
       continue;
     }
@@ -243,28 +201,26 @@ function getSelectedIndex(selected, data) {
   }
   return null;
 }
-var getItemLabel = function getItemLabel(_ref) {
-  var selectedLabel = _ref.selectedLabel,
-    label = _ref.label;
+const getItemLabel = _ref => {
+  let {
+    selectedLabel,
+    label
+  } = _ref;
   if (selectedLabel != null) {
     return selectedLabel;
   }
   return typeof label === 'string' ? label : '';
 };
-var _getValueForFilter = function getValueForFilter(selected, type, filterValue) {
-  return selected && !isArray(selected) && _isInputMode(type) ? getItemLabel(selected) : filterValue;
-};
+const getValueForFilter = (selected, type, filterValue) => selected && !isArray(selected) && isInputMode(type) ? getItemLabel(selected) : filterValue;
 function isSameSelected(prevSelected, selected) {
   if (!prevSelected || !selected || prevSelected.length !== selected.length) {
     return false;
   }
-  var keysMap = selected.reduce(function (result, item) {
+  const keysMap = selected.reduce((result, item) => {
     result[item.key] = true;
     return result;
   }, {});
-  return prevSelected.every(function (it) {
-    return keysMap[it.key];
-  });
+  return prevSelected.every(it => keysMap[it.key]);
 }
 /**
  * @name Select
@@ -274,216 +230,218 @@ function isSameSelected(prevSelected, selected) {
 /**
  * Displays a select.
  */
-var Select = /*#__PURE__*/function (_Component) {
-  function Select() {
+class Select extends Component {
+  constructor() {
     var _this;
-    _classCallCheck(this, Select);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, Select, [].concat(args));
-    _defineProperty(_this, "state", {
+    super(...arguments);
+    _this = this;
+    _defineProperty(this, "state", {
       data: [],
       shownData: [],
-      selected: _this.props.multiple ? [] : null,
+      selected: this.props.multiple ? [] : null,
       selectedIndex: null,
-      filterValue: _this.props.filter && typeof _this.props.filter === 'object' && _this.props.filter.value || '',
+      filterValue: this.props.filter && typeof this.props.filter === 'object' && this.props.filter.value || '',
       shortcutsEnabled: false,
       popupShortcuts: false,
-      showPopup: _this.props.showPopup,
-      prevData: _this.props.data,
+      showPopup: this.props.showPopup,
+      prevData: this.props.data,
       prevSelected: null,
-      prevMultiple: _this.props.multiple,
+      prevMultiple: this.props.multiple,
       multipleMap: {},
       addButton: null
     });
-    _defineProperty(_this, "id", getUID('select-'));
-    _defineProperty(_this, "shortcutsScope", _this.id);
-    _defineProperty(_this, "listId", "".concat(_this.id, ":list"));
-    _defineProperty(_this, "_focusHandler", function (e) {
-      _this.props.onFocus(e);
-      _this.setState({
+    _defineProperty(this, "id", getUID('select-'));
+    _defineProperty(this, "shortcutsScope", this.id);
+    _defineProperty(this, "listId", "".concat(this.id, ":list"));
+    _defineProperty(this, "_focusHandler", e => {
+      this.props.onFocus(e);
+      this.setState({
         shortcutsEnabled: true,
         focused: true
       });
     });
-    _defineProperty(_this, "_blurHandler", function () {
+    _defineProperty(this, "isClickingSelect", false);
+    _defineProperty(this, "mouseDownHandler", () => {
+      this.isClickingSelect = true;
+    });
+    _defineProperty(this, "mouseUpHandler", () => {
+      this.isClickingSelect = false;
+    });
+    _defineProperty(this, "_blurHandler", () => {
       var _this$_popup;
-      _this.props.onBlur();
-      if (_this._popup && _this._popup.isVisible() && !_this._popup.isClickingPopup) {
-        window.setTimeout(function () {
-          _this.setState({
+      this.props.onBlur();
+      if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup && !this.isClickingSelect) {
+        window.setTimeout(() => {
+          this.setState({
             showPopup: false
           });
         });
       }
-      if (!((_this$_popup = _this._popup) !== null && _this$_popup !== void 0 && _this$_popup.isClickingPopup)) {
-        _this.setState({
+      if (!((_this$_popup = this._popup) !== null && _this$_popup !== void 0 && _this$_popup.isClickingPopup)) {
+        this.setState({
           shortcutsEnabled: false,
           focused: false
         });
       }
     });
-    _defineProperty(_this, "node", void 0);
-    _defineProperty(_this, "nodeRef", function (el) {
-      _this.node = el;
+    _defineProperty(this, "node", void 0);
+    _defineProperty(this, "nodeRef", el => {
+      this.node = el;
     });
-    _defineProperty(_this, "_popup", null);
-    _defineProperty(_this, "onEmptyPopupEnter", function () {
-      if (_this.state.addButton) {
-        _this.addHandler();
+    _defineProperty(this, "_popup", null);
+    _defineProperty(this, "onEmptyPopupEnter", () => {
+      if (this.state.addButton) {
+        this.addHandler();
       }
     });
-    _defineProperty(_this, "focus", function () {
+    _defineProperty(this, "focus", () => {
       var _this$node;
-      var focusableSelectExists = (_this$node = _this.node) === null || _this$node === void 0 ? void 0 : _this$node.querySelector('[data-test~=ring-select__focus]');
-      var restoreFocusNode = _this.props.targetElement || focusableSelectExists;
+      const focusableSelectExists = (_this$node = this.node) === null || _this$node === void 0 ? void 0 : _this$node.querySelector('[data-test~=ring-select__focus]');
+      const restoreFocusNode = this.props.targetElement || focusableSelectExists;
       restoreFocusNode === null || restoreFocusNode === void 0 || restoreFocusNode.focus();
     });
-    _defineProperty(_this, "_onEnter", function () {
+    _defineProperty(this, "_onEnter", () => {
       var _this$_popup2;
-      if (_this.state.addButton && _this.state.shownData.length === 0) {
-        _this.addHandler();
+      if (this.state.addButton && this.state.shownData.length === 0) {
+        this.addHandler();
       }
-      _this.props.onDone();
-      if (!((_this$_popup2 = _this._popup) !== null && _this$_popup2 !== void 0 && _this$_popup2.isVisible()) && _this.props.allowAny) {
+      this.props.onDone();
+      if (!((_this$_popup2 = this._popup) !== null && _this$_popup2 !== void 0 && _this$_popup2.isVisible()) && this.props.allowAny) {
         return true;
       }
       return undefined;
     });
-    _defineProperty(_this, "_onEsc", function (event) {
+    _defineProperty(this, "_onEsc", event => {
       var _this$_popup3;
-      if (!((_this$_popup3 = _this._popup) !== null && _this$_popup3 !== void 0 && _this$_popup3.isVisible())) {
+      if (!((_this$_popup3 = this._popup) !== null && _this$_popup3 !== void 0 && _this$_popup3.isVisible())) {
         return true;
-      } else if (_this.props.multiple || !_this.props.getInitial) {
+      } else if (this.props.multiple || !this.props.getInitial) {
         return false;
       }
-      var selected = {
+      const selected = {
         key: Math.random(),
-        label: _this.props.getInitial()
+        label: this.props.getInitial()
       };
-      _this.setState({
+      this.setState({
         selected,
-        filterValue: _this.getValueForFilter(selected)
-      }, function () {
-        _this.props.onChange(selected, event);
-        _this.props.onReset();
+        filterValue: this.getValueForFilter(selected)
+      }, () => {
+        this.props.onChange(selected, event);
+        this.props.onReset();
       });
       return undefined;
     });
-    _defineProperty(_this, "_inputShortcutHandler", function () {
-      if (_this.state.focused && _this._popup && !_this._popup.isVisible()) {
-        _this._clickHandler();
+    _defineProperty(this, "_inputShortcutHandler", () => {
+      if (this.state.focused && this._popup && !this._popup.isVisible()) {
+        this._clickHandler();
       }
     });
-    _defineProperty(_this, "popupRef", function (el) {
-      _this._popup = el;
+    _defineProperty(this, "popupRef", el => {
+      this._popup = el;
     });
-    _defineProperty(_this, "_showPopup", function () {
-      if (!_this.node) {
+    _defineProperty(this, "_showPopup", () => {
+      if (!this.node) {
         return;
       }
-      var shownData = _this.getListItems(_this.filterValue());
-      _this.setState({
+      const shownData = this.getListItems(this.filterValue());
+      this.setState({
         showPopup: true,
         shownData
       });
     });
-    _defineProperty(_this, "_hidePopup", function (tryFocusAnchor) {
-      if (_this.node && _this.state.showPopup) {
-        _this.setState(function (prevState) {
-          return {
-            showPopup: false,
-            filterValue: _this.props.allowAny ? prevState.filterValue : ''
-          };
-        });
+    _defineProperty(this, "_hidePopup", tryFocusAnchor => {
+      if (this.node && this.state.showPopup) {
+        this.setState(prevState => ({
+          showPopup: false,
+          filterValue: this.props.allowAny ? prevState.filterValue : ''
+        }));
         if (tryFocusAnchor) {
-          _this.focus();
+          this.focus();
         }
       }
     });
-    _defineProperty(_this, "addHandler", function () {
-      var value = _this.filterValue();
-      _this._hidePopup();
-      _this.props.onAdd(value);
+    _defineProperty(this, "addHandler", () => {
+      const value = this.filterValue();
+      this._hidePopup();
+      this.props.onAdd(value);
     });
-    _defineProperty(_this, "getLowerCaseLabel", getLowerCaseLabel);
-    _defineProperty(_this, "doesLabelMatch", doesLabelMatch);
-    _defineProperty(_this, "_clickHandler", function () {
-      if (!_this.props.disabled) {
-        if (_this.state.showPopup) {
-          _this._hidePopup();
+    _defineProperty(this, "getLowerCaseLabel", getLowerCaseLabel);
+    _defineProperty(this, "doesLabelMatch", doesLabelMatch);
+    _defineProperty(this, "_clickHandler", () => {
+      if (!this.props.disabled) {
+        if (this.state.showPopup) {
+          this._hidePopup();
         } else {
-          _this.props.onBeforeOpen();
-          _this._showPopup();
+          this.props.onBeforeOpen();
+          this._showPopup();
         }
       }
     });
-    _defineProperty(_this, "_openPopupIfClosed", function () {
-      if (_this.props.disabled || _this.state.showPopup) {
+    _defineProperty(this, "_openPopupIfClosed", () => {
+      if (this.props.disabled || this.state.showPopup) {
         return;
       }
-      _this.props.onBeforeOpen();
-      _this._showPopup();
+      this.props.onBeforeOpen();
+      this._showPopup();
     });
-    _defineProperty(_this, "_filterChangeHandler", function (e) {
-      _this._setFilter(e.currentTarget.value, e);
+    _defineProperty(this, "_filterChangeHandler", e => {
+      this._setFilter(e.currentTarget.value, e);
     });
-    _defineProperty(_this, "_setFilter", function (value, event) {
+    _defineProperty(this, "_setFilter", (value, event) => {
       var _this$_popup4;
-      if (_this.isInputMode() && !_this.state.focused) {
+      if (this.isInputMode() && !this.state.focused) {
         return;
       }
-      if (value === _this.state.filterValue) {
+      if (value === this.state.filterValue) {
         return;
       }
-      var filterValue = value.replace(/^\s+/g, '');
-      _this.props.onFilter(filterValue);
-      if (_this.props.allowAny) {
-        var fakeSelected = {
+      const filterValue = value.replace(/^\s+/g, '');
+      this.props.onFilter(filterValue);
+      if (this.props.allowAny) {
+        const fakeSelected = {
           key: Math.random(),
           label: filterValue
         };
-        _this.setState({
+        this.setState({
           selected: filterValue === '' ? null : fakeSelected,
           selectedIndex: null
-        }, function () {
-          _this.props.onSelect(fakeSelected, event);
-          _this.props.onChange(fakeSelected, event);
+        }, () => {
+          this.props.onSelect(fakeSelected, event);
+          this.props.onChange(fakeSelected, event);
         });
       }
-      !((_this$_popup4 = _this._popup) !== null && _this$_popup4 !== void 0 && _this$_popup4.isVisible()) && _this.props.onBeforeOpen();
-      _this.setState({
+      if (!((_this$_popup4 = this._popup) !== null && _this$_popup4 !== void 0 && _this$_popup4.isVisible())) {
+        this.props.onBeforeOpen();
+      }
+      this.setState({
         filterValue
-      }, function () {
-        _this._showPopup();
+      }, () => {
+        this._showPopup();
       });
     });
-    _defineProperty(_this, "_redrawPopup", function () {
-      if (_this.props.multiple) {
-        setTimeout(function () {
-          _this.isInputMode() && _this.clearFilter();
-          _this._showPopup();
+    _defineProperty(this, "_redrawPopup", () => {
+      if (this.props.multiple) {
+        setTimeout(() => {
+          if (this.isInputMode()) {
+            this.clearFilter();
+          }
+          this._showPopup();
         }, 0);
       }
     });
-    _defineProperty(_this, "_listSelectHandler", function (selected, event) {
+    _defineProperty(this, "_listSelectHandler", function (selected, event) {
       var _this$props$tryKeepOp;
-      var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      var isItem = function isItem(item) {
-        return List.isItemType(List.ListProps.Type.ITEM, item);
-      };
-      var isCustomItem = function isCustomItem(item) {
-        return List.isItemType(List.ListProps.Type.CUSTOM, item);
-      };
-      var isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
+      let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      const isItem = item => List.isItemType(List.ListProps.Type.ITEM, item);
+      const isCustomItem = item => List.isItemType(List.ListProps.Type.CUSTOM, item);
+      const isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
       if (isSelectItemEvent) {
         event.preventDefault();
       }
       if (!isItem(selected) && !isCustomItem(selected) || selected.disabled || selected.isResetItem) {
         return;
       }
-      var tryKeepOpen = (_this$props$tryKeepOp = _this.props.tryKeepOpen) !== null && _this$props$tryKeepOp !== void 0 ? _this$props$tryKeepOp : opts.tryKeepOpen;
+      const tryKeepOpen = (_this$props$tryKeepOp = _this.props.tryKeepOpen) !== null && _this$props$tryKeepOp !== void 0 ? _this$props$tryKeepOp : opts.tryKeepOpen;
       if (!_this.props.multiple) {
         if (!tryKeepOpen) {
           _this._hidePopup(isSelectItemEvent);
@@ -491,8 +449,8 @@ var Select = /*#__PURE__*/function (_Component) {
         _this.setState({
           selected,
           selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
-        }, function () {
-          var newFilterValue = _this.isInputMode() && !_this.props.hideSelected ? getItemLabel(selected) : '';
+        }, () => {
+          const newFilterValue = _this.isInputMode() && !_this.props.hideSelected ? getItemLabel(selected) : '';
           _this.filterValue(newFilterValue);
           _this.props.onFilter(newFilterValue);
           _this.props.onSelect(selected, event);
@@ -505,78 +463,68 @@ var Select = /*#__PURE__*/function (_Component) {
         if (selected.key == null) {
           throw new Error('Multiple selection requires each item to have the "key" property');
         }
-        _this.setState(function (prevState) {
-          var currentSelection = prevState.selected;
-          var nextSelection;
+        _this.setState(prevState => {
+          const currentSelection = prevState.selected;
+          let nextSelection;
           if (!prevState.multipleMap[selected.key]) {
             nextSelection = currentSelection.concat(selected);
-            _this.props.onSelect && _this.props.onSelect(selected, event);
           } else {
-            nextSelection = currentSelection.filter(function (item) {
-              return item.key !== selected.key;
-            });
-            _this.props.onDeselect && _this.props.onDeselect(selected);
+            nextSelection = currentSelection.filter(item => item.key !== selected.key);
           }
-          _this.props.onChange(nextSelection, event);
-          var nextState = {
+          const nextState = {
             filterValue: '',
             selected: nextSelection,
             selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
           };
           if (typeof _this.props.multiple === 'object' && _this.props.multiple.limit && nextSelection.length === _this.props.multiple.limit) {
-            nextState.shownData = prevState.shownData.map(function (item) {
-              return nextSelection.find(function (selectedItem) {
-                return selectedItem.key === item.key;
-              }) ? item : _objectSpread2(_objectSpread2({}, item), {}, {
-                disabled: true
-              });
-            });
+            nextState.shownData = prevState.shownData.map(item => nextSelection.find(selectedItem => selectedItem.key === item.key) ? item : _objectSpread2(_objectSpread2({}, item), {}, {
+              disabled: true
+            }));
           }
           if (!prevState.multipleMap[selected.key]) {
             nextState.multipleMap = _objectSpread2(_objectSpread2({}, prevState.multipleMap), {}, {
               [selected.key]: true
             });
           } else {
-            var _prevState$multipleMa = prevState.multipleMap,
-              _selected$key = selected.key;
-              _prevState$multipleMa[_selected$key];
-              var restMultipleMap = _objectWithoutProperties(_prevState$multipleMa, [_selected$key].map(_toPropertyKey));
+            const _prevState$multipleMa = prevState.multipleMap,
+              _selected$key = selected.key,
+              restMultipleMap = _objectWithoutProperties(_prevState$multipleMa, [_selected$key].map(_toPropertyKey));
             nextState.multipleMap = restMultipleMap;
           }
           return _objectSpread2(_objectSpread2({}, prevState), nextState);
-        }, function () {
+        }, () => {
+          if (_this.state.multipleMap[selected.key]) {
+            var _this$props$onSelect, _this$props;
+            (_this$props$onSelect = (_this$props = _this.props).onSelect) === null || _this$props$onSelect === void 0 || _this$props$onSelect.call(_this$props, selected, event);
+          } else {
+            var _this$props$onDeselec, _this$props2;
+            (_this$props$onDeselec = (_this$props2 = _this.props).onDeselect) === null || _this$props$onDeselec === void 0 || _this$props$onDeselec.call(_this$props2, selected);
+          }
+          _this.props.onChange(_this.state.selected, event);
           if (tryKeepOpen) {
             _this._redrawPopup();
           }
         });
       }
     });
-    _defineProperty(_this, "_listSelectAllHandler", function () {
-      var isSelectAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var isItem = function isItem(item) {
-        return List.isItemType(List.ListProps.Type.ITEM, item);
-      };
-      var isCustomItem = function isCustomItem(item) {
-        return List.isItemType(List.ListProps.Type.CUSTOM, item);
-      };
-      _this.setState(function (prevState) {
-        var currentSelection = prevState.selected;
-        var nextSelection;
+    _defineProperty(this, "_listSelectAllHandler", function () {
+      let isSelectAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      const isItem = item => List.isItemType(List.ListProps.Type.ITEM, item);
+      const isCustomItem = item => List.isItemType(List.ListProps.Type.CUSTOM, item);
+      _this.setState(prevState => {
+        const currentSelection = prevState.selected;
+        let nextSelection;
         if (isSelectAll) {
-          nextSelection = _this.props.data.filter(function (item) {
-            return (isItem(item) || isCustomItem(item)) && !item.disabled;
-          });
-          nextSelection.filter(function (item) {
-            return !_this.props.selected.find(function (selectedItem) {
-              return item.key === selectedItem.key;
-            });
-          }).forEach(function (item) {
-            _this.props.onSelect && _this.props.onSelect(item);
+          nextSelection = _this.props.data.filter(item => (isItem(item) || isCustomItem(item)) && !item.disabled);
+          nextSelection.filter(item => !_this.props.selected.find(selectedItem => item.key === selectedItem.key)).forEach(item => {
+            var _this$props$onSelect2, _this$props3;
+            (_this$props$onSelect2 = (_this$props3 = _this.props).onSelect) === null || _this$props$onSelect2 === void 0 || _this$props$onSelect2.call(_this$props3, item);
           });
         } else {
           nextSelection = [];
-          currentSelection.forEach(function (item) {
-            _this.props.onDeselect && _this.props.onDeselect(item);
+          currentSelection.forEach(item => {
+            var _this$props$onDeselec2, _this$props4;
+            (_this$props$onDeselec2 = (_this$props4 = _this.props).onDeselect) === null || _this$props$onDeselec2 === void 0 || _this$props$onDeselec2.call(_this$props4, item);
           });
         }
         _this.props.onChange(nextSelection, event);
@@ -584,617 +532,583 @@ var Select = /*#__PURE__*/function (_Component) {
           filterValue: '',
           selected: nextSelection,
           selectedIndex: isSelectAll ? _this._getSelectedIndex(nextSelection, _this.props.data) : null,
-          shownData: prevState.shownData.map(function (item) {
-            return _objectSpread2(_objectSpread2({}, item), {}, {
-              checkbox: isSelectAll
-            });
-          }),
-          multipleMap: isSelectAll ? buildMultipleMap(_this.props.data.filter(function (item) {
-            return !item.disabled;
-          })) : {}
+          shownData: prevState.shownData.map(item => _objectSpread2(_objectSpread2({}, item), {}, {
+            checkbox: isSelectAll
+          })),
+          multipleMap: isSelectAll ? buildMultipleMap(_this.props.data.filter(item => !item.disabled)) : {}
         };
       }, _this._redrawPopup);
     });
-    _defineProperty(_this, "_onCloseAttempt", function (event, isEsc) {
-      if (_this.isInputMode()) {
-        if (!_this.props.allowAny) {
-          if (_this.props.hideSelected || !_this.state.selected || _this.props.multiple) {
-            _this.clearFilter();
-          } else if (_this.state.selected && !Array.isArray(_this.state.selected)) {
-            _this.filterValue(getItemLabel(_this.state.selected));
+    _defineProperty(this, "_onCloseAttempt", (event, isEsc) => {
+      if (this.isInputMode()) {
+        if (!this.props.allowAny) {
+          if (this.props.hideSelected || !this.state.selected || this.props.multiple) {
+            this.clearFilter();
+          } else if (this.state.selected && !Array.isArray(this.state.selected)) {
+            this.filterValue(getItemLabel(this.state.selected));
           }
         }
       }
-      var isTagRemoved = _this.props.tags && event && event.target && event.target instanceof Element && event.target.matches('[data-test="ring-tag-remove"]');
+      const isTagRemoved = this.props.tags && event && event.target && event.target instanceof Element && event.target.matches('[data-test="ring-tag-remove"]');
       if (!isTagRemoved) {
-        _this._hidePopup(isEsc);
+        this._hidePopup(isEsc);
       }
     });
-    _defineProperty(_this, "clearFilter", function (e) {
-      _this._setFilter('', e);
+    _defineProperty(this, "clearFilter", e => {
+      this._setFilter('', e);
     });
-    _defineProperty(_this, "clear", function (event) {
+    _defineProperty(this, "clear", event => {
       if (event) {
         event.stopPropagation();
       }
-      var empty = _this.props.multiple ? [] : null;
-      _this.setState({
+      const empty = this.props.multiple ? [] : null;
+      this.setState({
         selected: empty,
         selectedIndex: null,
         filterValue: ''
-      }, function () {
-        if (_this.props.onChange) {
-          _this.props.onChange(empty, event);
+      }, () => {
+        if (this.props.onChange) {
+          this.props.onChange(empty, event);
         }
       });
       return false;
     });
-    _defineProperty(_this, "filter", void 0);
-    _defineProperty(_this, "filterRef", function (el) {
-      _this.filter = el;
+    _defineProperty(this, "filter", void 0);
+    _defineProperty(this, "filterRef", el => {
+      this.filter = el;
     });
-    _defineProperty(_this, "composedFilterRef", createComposedRef());
-    return _this;
+    _defineProperty(this, "composedFilterRef", createComposedRef());
   }
-  _inherits(Select, _Component);
-  return _createClass(Select, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this$state = this.state,
-        showPopup = _this$state.showPopup,
-        selected = _this$state.selected;
-      var _this$props = this.props,
-        onClose = _this$props.onClose,
-        onOpen = _this$props.onOpen,
-        onChange = _this$props.onChange,
-        multiple = _this$props.multiple;
-      if (prevState.showPopup && !showPopup) {
-        onClose(selected);
-      } else if (!prevState.showPopup && showPopup) {
-        onOpen();
-      }
-      if (multiple !== prevProps.multiple && !deepEqual(multiple, prevProps.multiple)) {
-        onChange(selected);
-      }
-    }
-  }, {
-    key: "getValueForFilter",
-    value: function getValueForFilter(selected) {
-      return _getValueForFilter(selected, this.props.type, this.state.filterValue);
-    }
-  }, {
-    key: "_getSelectedIndex",
-    value: function _getSelectedIndex(selected, data) {
-      return getSelectedIndex(selected, data);
-    }
-  }, {
-    key: "_getResetOption",
-    value: function _getResetOption() {
-      var _this2 = this;
-      var isOptionsSelected = Array.isArray(this.state.selected) && this.state.selected.length;
-      var reset = this.props.tags && typeof this.props.tags === 'object' ? this.props.tags.reset : null;
-      if (!isOptionsSelected || !reset) {
-        return null;
-      }
-      var resetHandler = function resetHandler(item, event) {
-        _this2.clear(event);
-        _this2.clearFilter();
-        _this2.props.onFilter('');
-        _this2.setState(function (prevState) {
-          return {
-            shownData: prevState.shownData.slice(reset.separator ? 2 : 1),
-            multipleMap: {}
-          };
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      multiple,
+      data,
+      type
+    } = nextProps;
+    const {
+      prevSelected,
+      prevData,
+      prevMultiple,
+      filterValue
+    } = prevState;
+    const nextState = {
+      prevData: data,
+      prevSelected: nextProps.selected,
+      prevMultiple: multiple
+    };
+    if ('data' in nextProps && data !== prevData) {
+      const {
+        filteredData,
+        addButton
+      } = getListItems(nextProps, prevState, filterValue, data);
+      Object.assign(nextState, {
+        shownData: filteredData,
+        addButton
+      });
+      if (prevState.selected) {
+        Object.assign(nextState, {
+          selectedIndex: getSelectedIndex(prevState.selected, data),
+          filterValue: getValueForFilter(prevState.selected, type, filterValue)
         });
-        _this2._redrawPopup();
-      };
-      return {
-        isResetItem: true,
-        separator: reset.separator,
-        key: reset.label,
-        rgItemType: List.ListProps.Type.CUSTOM,
-        template: /*#__PURE__*/jsx(Button, {
-          text: true,
-          className: modules_9d0de074.button,
-          "data-test": "ring-select-reset-tags-button",
-          height: ControlsHeight.S,
-          children: reset.label
-        }),
-        glyph: reset.glyph,
-        onClick: resetHandler
-      };
-    }
-  }, {
-    key: "_prependResetOption",
-    value: function _prependResetOption(shownData) {
-      var resetOption = this._getResetOption();
-      if (resetOption) {
-        var resetItems = [resetOption];
-        if (resetOption.separator) {
-          resetItems.push({
-            rgItemType: List.ListProps.Type.SEPARATOR
-          });
-        }
-        return resetItems.concat(shownData);
       }
-      return shownData;
     }
-  }, {
-    key: "_renderPopup",
-    value: function _renderPopup() {
-      var _this3 = this;
-      var anchorElement = this.props.targetElement || this.node;
-      var _this$state2 = this.state,
-        showPopup = _this$state2.showPopup,
-        shownData = _this$state2.shownData;
-      var _shownData = this._prependResetOption(shownData);
-      return /*#__PURE__*/jsx(I18nContext.Consumer, {
-        children: function children(_ref2) {
-          var translate = _ref2.translate;
-          var message;
-          if (_this3.props.loading) {
-            var _this3$props$loadingM;
-            message = (_this3$props$loadingM = _this3.props.loadingMessage) !== null && _this3$props$loadingM !== void 0 ? _this3$props$loadingM : translate('loading');
-          } else if (!shownData.length) {
-            var _this3$props$notFound;
-            message = (_this3$props$notFound = _this3.props.notFoundMessage) !== null && _this3$props$notFound !== void 0 ? _this3$props$notFound : translate('noOptionsFound');
-          }
-          return /*#__PURE__*/jsx(SelectPopup, {
-            data: _shownData,
-            message: message,
-            toolbar: showPopup && _this3.getToolbar(),
-            topbar: _this3.getTopbar(),
-            loading: _this3.props.loading,
-            activeIndex: _this3.state.selectedIndex,
-            hidden: !showPopup,
-            ref: _this3.popupRef,
-            maxHeight: _this3.props.maxHeight,
-            minWidth: _this3.props.minWidth,
-            directions: _this3.props.directions,
-            className: _this3.props.popupClassName,
-            style: _this3.props.popupStyle,
-            top: _this3.props.top,
-            left: _this3.props.left,
-            offset: _this3.props.offset,
-            filter: _this3.isInputMode() ? false : _this3.props.filter // disable popup filter in INPUT mode
-            ,
-            filterIcon: _this3.props.filterIcon,
-            filterRef: _this3.props.filterRef,
-            multiple: _this3.props.multiple,
-            filterValue: _this3.state.filterValue,
-            anchorElement: anchorElement,
-            onCloseAttempt: _this3._onCloseAttempt,
-            onOutsideClick: _this3.props.onOutsideClick,
-            onSelect: _this3._listSelectHandler,
-            onSelectAll: _this3._listSelectAllHandler,
-            onFilter: _this3._filterChangeHandler,
-            onClear: _this3.clearFilter,
-            onLoadMore: _this3.props.onLoadMore,
-            isInputMode: _this3.isInputMode(),
-            selected: _this3.state.selected,
-            tags: _this3.props.tags,
-            compact: _this3.props.compact,
-            renderOptimization: _this3.props.renderOptimization,
-            ringPopupTarget: _this3.props.ringPopupTarget,
-            disableMoveOverflow: _this3.props.disableMoveOverflow,
-            disableScrollToActive: _this3.props.disableScrollToActive,
-            dir: _this3.props.dir,
-            onEmptyPopupEnter: _this3.onEmptyPopupEnter,
-            listId: _this3.listId,
-            preventListOverscroll: _this3.props.preventListOverscroll
-          });
-        }
+    if ('selected' in nextProps && nextProps.selected !== prevSelected) {
+      const selected = nextProps.selected || (multiple ? [] : null);
+      const selectedIndex = getSelectedIndex(selected, data || prevData);
+      Object.assign(nextState, {
+        selected,
+        filterValue: getValueForFilter(selected, type, filterValue)
       });
-    }
-  }, {
-    key: "getToolbar",
-    value: function getToolbar() {
-      var _this$props2 = this.props,
-        hint = _this$props2.hint,
-        renderBottomToolbar = _this$props2.renderBottomToolbar;
-      var _ref3 = this.state.addButton || {},
-        prefix = _ref3.prefix,
-        label = _ref3.label,
-        delayed = _ref3.delayed;
-      var isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
-      if (!isToolbarHasElements) {
-        return null;
+      if (!Array.isArray(prevSelected) || !Array.isArray(selected) || !isSameSelected(prevSelected, selected)) {
+        Object.assign(nextState, {
+          selectedIndex
+        });
       }
-      return /*#__PURE__*/jsxs("div", {
-        className: classNames({
-          [modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
-        }),
-        "data-test": "ring-select-toolbar",
-        children: [renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/jsx(Button, {
-          text: true,
-          delayed: delayed,
-          className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
-          onClick: this.addHandler,
-          "data-test": "ring-select-toolbar-button",
-          children: prefix ? "".concat(prefix, " ").concat(label) : label
-        }), hint && /*#__PURE__*/jsx(List.ListHint, {
-          label: hint,
-          "data-test": "ring-select-toolbar-hint"
-        })]
-      });
     }
-  }, {
-    key: "getTopbar",
-    value: function getTopbar() {
-      var _this$props$renderTop, _this$props3;
-      return (_this$props$renderTop = (_this$props3 = this.props).renderTopToolbar) === null || _this$props$renderTop === void 0 ? void 0 : _this$props$renderTop.call(_this$props3);
+    if (prevMultiple !== multiple && !dequal(prevMultiple, multiple)) {
+      nextState.selected = multiple ? [] : null;
     }
-  }, {
-    key: "getFilterFn",
-    value: function getFilterFn() {
-      return _getFilterFn(this.props.filter);
+    if (multiple && !nextState.selected) {
+      nextState.selected = prevState.selected;
     }
-  }, {
-    key: "getListItems",
-    value: function getListItems(rawFilterString, data) {
-      var _getListItems2 = _getListItems(this.props, this.state, rawFilterString, data),
-        filteredData = _getListItems2.filteredData,
-        addButton = _getListItems2.addButton;
-      this.setState({
+    const {
+      selected
+    } = _objectSpread2(_objectSpread2({}, prevState), nextState);
+    if (selected && Array.isArray(selected)) {
+      nextState.multipleMap = buildMultipleMap(selected);
+      const {
+        filteredData,
+        addButton
+      } = getListItems(nextProps, nextState, filterValue, data);
+      Object.assign(nextState, {
+        shownData: filteredData,
         addButton
       });
-      return filteredData;
     }
-  }, {
-    key: "filterValue",
-    value: function filterValue(setValue) {
-      if (typeof setValue === 'string' || typeof setValue === 'number') {
-        this.setState({
-          filterValue: setValue
+    return nextState;
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      showPopup,
+      selected
+    } = this.state;
+    const {
+      onClose,
+      onOpen,
+      onChange,
+      multiple
+    } = this.props;
+    if (prevState.showPopup && !showPopup) {
+      onClose(selected);
+    } else if (!prevState.showPopup && showPopup) {
+      onOpen();
+    }
+    if (multiple !== prevProps.multiple && !dequal(multiple, prevProps.multiple)) {
+      onChange(selected);
+    }
+  }
+  getValueForFilter(selected) {
+    return getValueForFilter(selected, this.props.type, this.state.filterValue);
+  }
+  _getSelectedIndex(selected, data) {
+    return getSelectedIndex(selected, data);
+  }
+  _getResetOption() {
+    const isOptionsSelected = Array.isArray(this.state.selected) && this.state.selected.length;
+    const reset = this.props.tags && typeof this.props.tags === 'object' ? this.props.tags.reset : null;
+    if (!isOptionsSelected || !reset) {
+      return null;
+    }
+    const resetHandler = (item, event) => {
+      this.clear(event);
+      this.clearFilter();
+      this.props.onFilter('');
+      this.setState(prevState => ({
+        shownData: prevState.shownData.slice(reset.separator ? 2 : 1),
+        multipleMap: {}
+      }));
+      this._redrawPopup();
+    };
+    return {
+      isResetItem: true,
+      separator: reset.separator,
+      key: reset.label,
+      rgItemType: List.ListProps.Type.CUSTOM,
+      template: /*#__PURE__*/jsx(Button, {
+        text: true,
+        className: modules_9d0de074.button,
+        "data-test": "ring-select-reset-tags-button",
+        height: ControlsHeight.S,
+        children: reset.label
+      }),
+      glyph: reset.glyph,
+      onClick: resetHandler
+    };
+  }
+  _prependResetOption(shownData) {
+    const resetOption = this._getResetOption();
+    if (resetOption) {
+      const resetItems = [resetOption];
+      if (resetOption.separator) {
+        resetItems.push({
+          rgItemType: List.ListProps.Type.SEPARATOR
         });
-        return undefined;
-      } else {
-        return this.state.filterValue;
       }
+      return resetItems.concat(shownData);
     }
-  }, {
-    key: "isInputMode",
-    value: function isInputMode() {
-      return _isInputMode(this.props.type);
-    }
-  }, {
-    key: "_rebuildMultipleMap",
-    value: function _rebuildMultipleMap(selected) {
-      if (Array.isArray(selected)) {
-        this.setState({
-          multipleMap: buildMultipleMap(selected)
+    return shownData;
+  }
+  _renderPopup() {
+    const anchorElement = this.props.targetElement || this.node;
+    const {
+      showPopup,
+      shownData
+    } = this.state;
+    const _shownData = this._prependResetOption(shownData);
+    return /*#__PURE__*/jsx(I18nContext.Consumer, {
+      children: _ref2 => {
+        let {
+          translate
+        } = _ref2;
+        let message;
+        if (this.props.loading) {
+          var _this$props$loadingMe;
+          message = (_this$props$loadingMe = this.props.loadingMessage) !== null && _this$props$loadingMe !== void 0 ? _this$props$loadingMe : translate('loading');
+        } else if (!shownData.length) {
+          var _this$props$notFoundM;
+          message = (_this$props$notFoundM = this.props.notFoundMessage) !== null && _this$props$notFoundM !== void 0 ? _this$props$notFoundM : translate('noOptionsFound');
+        }
+        return /*#__PURE__*/jsx(SelectPopup, {
+          data: _shownData,
+          message: message,
+          toolbar: showPopup && this.getToolbar(),
+          topbar: this.getTopbar(),
+          loading: this.props.loading,
+          activeIndex: this.state.selectedIndex,
+          hidden: !showPopup,
+          ref: this.popupRef,
+          maxHeight: this.props.maxHeight,
+          minWidth: this.props.minWidth,
+          directions: this.props.directions,
+          className: this.props.popupClassName,
+          style: this.props.popupStyle,
+          top: this.props.top,
+          left: this.props.left,
+          offset: this.props.offset,
+          filter: this.isInputMode() ? false : this.props.filter // disable popup filter in INPUT mode
+          ,
+          filterIcon: this.props.filterIcon,
+          filterRef: this.props.filterRef,
+          multiple: this.props.multiple,
+          filterValue: this.state.filterValue,
+          anchorElement: anchorElement,
+          onCloseAttempt: this._onCloseAttempt,
+          onOutsideClick: this.props.onOutsideClick,
+          onSelect: this._listSelectHandler,
+          onSelectAll: this._listSelectAllHandler,
+          onFilter: this._filterChangeHandler,
+          onClear: this.clearFilter,
+          onLoadMore: this.props.onLoadMore,
+          isInputMode: this.isInputMode(),
+          selected: this.state.selected,
+          tags: this.props.tags,
+          compact: this.props.compact,
+          renderOptimization: this.props.renderOptimization,
+          ringPopupTarget: this.props.ringPopupTarget,
+          disableMoveOverflow: this.props.disableMoveOverflow,
+          disableScrollToActive: this.props.disableScrollToActive,
+          dir: this.props.dir,
+          onEmptyPopupEnter: this.onEmptyPopupEnter,
+          listId: this.listId,
+          preventListOverscroll: this.props.preventListOverscroll
         });
       }
+    });
+  }
+  getToolbar() {
+    const {
+      hint,
+      renderBottomToolbar
+    } = this.props;
+    const {
+      prefix,
+      label,
+      delayed
+    } = this.state.addButton || {};
+    const isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
+    if (!isToolbarHasElements) {
+      return null;
+    }
+    return /*#__PURE__*/jsxs("div", {
+      className: classNames({
+        [modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
+      }),
+      "data-test": "ring-select-toolbar",
+      children: [renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/jsx(Button, {
+        text: true,
+        delayed: delayed,
+        className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
+        onClick: this.addHandler,
+        "data-test": "ring-select-toolbar-button",
+        children: prefix ? "".concat(prefix, " ").concat(label) : label
+      }), hint && /*#__PURE__*/jsx(List.ListHint, {
+        label: hint,
+        "data-test": "ring-select-toolbar-hint"
+      })]
+    });
+  }
+  getTopbar() {
+    var _this$props$renderTop, _this$props5;
+    return (_this$props$renderTop = (_this$props5 = this.props).renderTopToolbar) === null || _this$props$renderTop === void 0 ? void 0 : _this$props$renderTop.call(_this$props5);
+  }
+  getFilterFn() {
+    return getFilterFn(this.props.filter);
+  }
+  getListItems(rawFilterString, data) {
+    const {
+      filteredData,
+      addButton
+    } = getListItems(this.props, this.state, rawFilterString, data);
+    this.setState({
+      addButton
+    });
+    return filteredData;
+  }
+  filterValue(setValue) {
+    if (typeof setValue === 'string' || typeof setValue === 'number') {
+      this.setState({
+        filterValue: setValue
+      });
+      return undefined;
+    } else {
+      return this.state.filterValue;
     }
-  }, {
-    key: "_selectionIsEmpty",
-    value: function _selectionIsEmpty() {
-      return Array.isArray(this.state.selected) && !this.state.selected.length || !this.state.selected;
+  }
+  isInputMode() {
+    return isInputMode(this.props.type);
+  }
+  _rebuildMultipleMap(selected) {
+    if (Array.isArray(selected)) {
+      this.setState({
+        multipleMap: buildMultipleMap(selected)
+      });
     }
-  }, {
-    key: "_getLabel",
-    value: function _getLabel() {
-      var _ref4, _this$props$label;
-      return (_ref4 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref4 !== void 0 ? _ref4 : 'Select an option';
+  }
+  _selectionIsEmpty() {
+    return Array.isArray(this.state.selected) && !this.state.selected.length || !this.state.selected;
+  }
+  _getLabel() {
+    var _ref3, _this$props$label;
+    return (_ref3 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref3 !== void 0 ? _ref3 : 'Select an option';
+  }
+  _getPlaceholder() {
+    if (this._selectionIsEmpty()) {
+      var _this$props$label2;
+      return (_this$props$label2 = this.props.label) !== null && _this$props$label2 !== void 0 ? _this$props$label2 : 'Select an option';
     }
-  }, {
-    key: "_getPlaceholder",
-    value: function _getPlaceholder() {
-      if (this._selectionIsEmpty()) {
-        var _this$props$label2;
-        return (_this$props$label2 = this.props.label) !== null && _this$props$label2 !== void 0 ? _this$props$label2 : 'Select an option';
+    return this._getSelectedString();
+  }
+  _getSelectedString() {
+    if (Array.isArray(this.state.selected)) {
+      const labels = [];
+      for (let i = 0; i < this.state.selected.length; i++) {
+        labels.push(getItemLabel(this.state.selected[i]));
       }
-      return this._getSelectedString();
+      return labels.filter(Boolean).join(', ');
+    } else {
+      return this.state.selected != null ? getItemLabel(this.state.selected) : null;
     }
-  }, {
-    key: "_getSelectedString",
-    value: function _getSelectedString() {
-      if (Array.isArray(this.state.selected)) {
-        var labels = [];
-        for (var i = 0; i < this.state.selected.length; i++) {
-          labels.push(getItemLabel(this.state.selected[i]));
+  }
+  _getIcons() {
+    const {
+      selected
+    } = this.state;
+    const {
+      disabled,
+      clear,
+      hideArrow
+    } = this.props;
+    const icons = [];
+    const height = this.props.height || this.context;
+    if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
+      icons.push(/*#__PURE__*/jsx("button", {
+        title: "Toggle options popup",
+        type: "button",
+        className: modules_9d0de074.selectedIcon,
+        disabled: this.props.disabled,
+        onClick: this._clickHandler,
+        style: {
+          backgroundImage: "url(".concat(selected.icon, ")")
         }
-        return labels.filter(Boolean).join(', ');
-      } else {
-        return this.state.selected != null ? getItemLabel(this.state.selected) : null;
-      }
+      }, "selected"));
     }
-  }, {
-    key: "_getIcons",
-    value: function _getIcons() {
-      var selected = this.state.selected;
-      var _this$props4 = this.props,
-        disabled = _this$props4.disabled,
-        clear = _this$props4.clear,
-        hideArrow = _this$props4.hideArrow;
-      var icons = [];
-      var height = this.props.height || this.context;
-      if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
-        icons.push( /*#__PURE__*/jsx("button", {
-          title: "Toggle options popup",
-          type: "button",
-          className: modules_9d0de074.selectedIcon,
-          disabled: this.props.disabled,
-          onClick: this._clickHandler,
-          style: {
-            backgroundImage: "url(".concat(selected.icon, ")")
-          }
-        }, "selected"));
-      }
-      if (clear && !disabled && !this._selectionIsEmpty()) {
-        icons.push( /*#__PURE__*/jsx(Button, {
-          title: "Clear selection",
-          "data-test": "ring-clear-select",
-          className: modules_9d0de074.clearIcon,
-          disabled: this.props.disabled,
-          onClick: this.clear,
-          height: height,
-          icon: closeIcon
-        }, "close"));
-      }
-      if (!hideArrow) {
-        icons.push( /*#__PURE__*/jsx(Button, {
-          title: "Toggle options popup",
-          className: modules_9d0de074.chevron,
-          iconClassName: modules_9d0de074.chevronIcon,
-          icon: chevronDownIcon,
-          disabled: this.props.disabled,
-          height: height,
-          onClick: this._clickHandler
-        }, "hide"));
-      }
-      return icons;
-    }
-  }, {
-    key: "_getAvatar",
-    value: function _getAvatar() {
-      var _this$state$selected, _this$state$selected2;
-      return !Array.isArray(this.state.selected) && (((_this$state$selected = this.state.selected) === null || _this$state$selected === void 0 ? void 0 : _this$state$selected.avatar) || ((_this$state$selected2 = this.state.selected) === null || _this$state$selected2 === void 0 ? void 0 : _this$state$selected2.showGeneratedAvatar)) && /*#__PURE__*/jsx(Avatar, {
-        className: modules_9d0de074.avatar,
-        url: this.state.selected.avatar,
-        username: this.state.selected.username,
-        size: Size$1.Size20
-      });
+    if (clear && !disabled && !this._selectionIsEmpty()) {
+      icons.push(/*#__PURE__*/jsx(Button, {
+        title: "Clear selection",
+        "data-test": "ring-clear-select",
+        className: modules_9d0de074.clearIcon,
+        disabled: this.props.disabled,
+        onClick: this.clear,
+        height: height,
+        icon: closeIcon
+      }, "close"));
     }
-  }, {
-    key: "getShortcutsMap",
-    value: function getShortcutsMap() {
-      return {
-        enter: this._onEnter,
-        esc: this._onEsc,
-        up: this._inputShortcutHandler,
-        down: this._inputShortcutHandler,
-        right: noop,
-        left: noop,
-        'shift+up': noop,
-        'shift+down': noop,
-        space: noop
-      };
+    if (!hideArrow) {
+      icons.push(/*#__PURE__*/jsx(Button, {
+        title: "Toggle options popup",
+        className: modules_9d0de074.chevron,
+        iconClassName: modules_9d0de074.chevronIcon,
+        icon: chevronDownIcon,
+        disabled: this.props.disabled,
+        height: height,
+        onClick: this._clickHandler
+      }, "hide"));
     }
-  }, {
-    key: "renderSelect",
-    value: function renderSelect(activeItemId) {
-      var _this$props$label3, _this$props$label4, _this$_popup5, _this$props$buttonCla;
-      var dataTest = this.props['data-test'];
-      var selectedLabel = this.props.selectedLabel;
-      var shortcutsEnabled = this.state.shortcutsEnabled;
-      var classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, modules_9d0de074["height".concat(this.props.height || this.context)], {
-        [modules_9d0de074["size".concat(this.props.size)]]: this.props.type !== Type.INLINE,
-        [modules_9d0de074.disabled]: this.props.disabled
+    return icons;
+  }
+  _getAvatar() {
+    var _this$state$selected, _this$state$selected2;
+    return !Array.isArray(this.state.selected) && (((_this$state$selected = this.state.selected) === null || _this$state$selected === void 0 ? void 0 : _this$state$selected.avatar) || ((_this$state$selected2 = this.state.selected) === null || _this$state$selected2 === void 0 ? void 0 : _this$state$selected2.showGeneratedAvatar)) && /*#__PURE__*/jsx(Avatar, {
+      className: modules_9d0de074.avatar,
+      url: this.state.selected.avatar,
+      username: this.state.selected.username,
+      size: Size$1.Size20
+    });
+  }
+  getShortcutsMap() {
+    return {
+      enter: this._onEnter,
+      esc: this._onEsc,
+      up: this._inputShortcutHandler,
+      down: this._inputShortcutHandler,
+      right: noop,
+      left: noop,
+      'shift+up': noop,
+      'shift+down': noop,
+      space: noop
+    };
+  }
+  renderSelect(activeItemId) {
+    var _this$props$label3, _this$props$label4, _this$_popup5, _this$props$buttonCla;
+    const dataTest = this.props['data-test'];
+    const {
+      selectedLabel
+    } = this.props;
+    const {
+      shortcutsEnabled
+    } = this.state;
+    const classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, modules_9d0de074["height".concat(this.props.height || this.context)], {
+      [modules_9d0de074["size".concat(this.props.size)]]: this.props.type !== Type.INLINE,
+      [modules_9d0de074.disabled]: this.props.disabled
+    });
+    let style;
+    let iconsNode;
+    if (this.props.type === Type.INPUT || this.props.type === Type.BUTTON) {
+      const icons = this._getIcons();
+      style = getStyle(icons.length);
+      iconsNode = /*#__PURE__*/jsx("div", {
+        className: modules_9d0de074.icons,
+        children: icons
       });
-      var style;
-      var iconsNode;
-      if (this.props.type === Type.INPUT || this.props.type === Type.BUTTON) {
-        var icons = this._getIcons();
-        style = getStyle(icons.length);
-        iconsNode = /*#__PURE__*/jsx("div", {
-          className: modules_9d0de074.icons,
-          children: icons
-        });
-      }
-      var ariaProps = this.state.showPopup ? {
-        'aria-owns': this.listId,
-        'aria-activedescendant': activeItemId,
-        'aria-label': (_this$props$label3 = this.props.label) !== null && _this$props$label3 !== void 0 ? _this$props$label3 : undefined
-      } : {
-        'aria-label': (_this$props$label4 = this.props.label) !== null && _this$props$label4 !== void 0 ? _this$props$label4 : undefined
-      };
-      switch (this.props.type) {
-        case Type.INPUT_WITHOUT_CONTROLS:
-        case Type.INPUT:
-          return /*#__PURE__*/jsxs(Fragment$1, {
-            children: [/*#__PURE__*/jsxs("div", {
-              ref: this.nodeRef,
-              className: classNames(classes, modules_9d0de074.inputMode),
-              "data-test": joinDataTestAttributes('ring-select', dataTest),
-              children: [shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
-                map: this.getShortcutsMap(),
-                scope: this.shortcutsScope
-              }), /*#__PURE__*/jsx(Input, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
-                height: this.props.height,
-                autoComplete: "off",
-                id: this.props.id,
-                onClick: this._clickHandler,
-                inputRef: this.composedFilterRef(this.filterRef, this.props.filterRef),
-                disabled: this.props.disabled,
-                value: this.state.filterValue,
-                borderless: this.props.type === Type.INPUT_WITHOUT_CONTROLS,
-                style: style,
-                size: Size.FULL,
-                onChange: this._filterChangeHandler,
-                onFocus: this._focusHandler,
-                onBlur: this._blurHandler
-                // Input with error style without description
-                ,
-                error: this.props.error != null ? '' : null,
-                label: this.props.type === Type.INPUT ? this._getLabel() : null,
-                placeholder: this.props.inputPlaceholder,
-                onKeyDown: this.props.onKeyDown,
-                "data-test": "ring-select__focus",
-                enableShortcuts: shortcutsEnabled ? Object.keys(_objectSpread2(_objectSpread2({}, this.getShortcutsMap()), (_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 || (_this$_popup5 = _this$_popup5.list) === null || _this$_popup5 === void 0 ? void 0 : _this$_popup5.shortcutsMap)) : undefined,
-                icon: this.props.filterIcon,
-                afterInput: iconsNode
-              })), this._renderPopup()]
-            }), this.props.error && /*#__PURE__*/jsx("div", {
-              className: classNames(modules_88cfaf40.errorText, modules_88cfaf40["size".concat(this.props.size)]),
-              children: this.props.error
-            })]
-          });
-        case Type.BUTTON:
-          return /*#__PURE__*/jsxs("div", {
-            ref: this.nodeRef,
-            className: classNames(classes, modules_9d0de074.buttonMode),
-            "data-test": joinDataTestAttributes('ring-select', dataTest),
-            children: [selectedLabel && /*#__PURE__*/jsx(ControlLabel, {
-              type: this.props.labelType,
-              disabled: this.props.disabled,
-              htmlFor: this.props.id,
-              children: selectedLabel
-            }), shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
-              map: this.getShortcutsMap(),
-              scope: this.shortcutsScope
-            }), /*#__PURE__*/jsxs("div", {
-              className: modules_9d0de074.buttonContainer,
-              children: [/*#__PURE__*/jsxs(Button, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
-                height: this.props.height,
-                id: this.props.id,
-                onClick: this._clickHandler,
-                className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
-                  [modules_9d0de074.buttonValueOpen]: this.state.showPopup,
-                  [modules_9d0de074.buttonValueEmpty]: this._selectionIsEmpty()
-                }),
-                disabled: this.props.disabled,
-                style: style,
-                "data-test": "ring-select__button ring-select__focus",
-                children: [this._getAvatar(), this._getPlaceholder()]
-              })), iconsNode]
-            }), this._renderPopup()]
-          });
-        case Type.INLINE:
-          return /*#__PURE__*/jsxs("div", {
-            className: classes,
+    }
+    const ariaProps = this.state.showPopup ? {
+      'aria-owns': this.listId,
+      'aria-activedescendant': activeItemId,
+      'aria-label': (_this$props$label3 = this.props.label) !== null && _this$props$label3 !== void 0 ? _this$props$label3 : undefined
+    } : {
+      'aria-label': (_this$props$label4 = this.props.label) !== null && _this$props$label4 !== void 0 ? _this$props$label4 : undefined
+    };
+    switch (this.props.type) {
+      case Type.INPUT_WITHOUT_CONTROLS:
+      case Type.INPUT:
+        return /*#__PURE__*/jsxs(Fragment$1, {
+          children: [/*#__PURE__*/jsxs("div", {
             ref: this.nodeRef,
+            className: classNames(classes, modules_9d0de074.inputMode),
             "data-test": joinDataTestAttributes('ring-select', dataTest),
+            role: "presentation" // has interactive elements inside
+            ,
+            onMouseDown: this.mouseDownHandler,
+            onMouseUp: this.mouseUpHandler,
             children: [shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
               map: this.getShortcutsMap(),
               scope: this.shortcutsScope
-            }), /*#__PURE__*/jsx(Anchor, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
-              className: (_this$props$buttonCla = this.props.buttonClassName) !== null && _this$props$buttonCla !== void 0 ? _this$props$buttonCla : undefined,
+            }), /*#__PURE__*/jsx(Input, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+              height: this.props.height,
+              autoComplete: "off",
               id: this.props.id,
               onClick: this._clickHandler,
-              "data-test": "ring-select__focus",
+              inputRef: this.composedFilterRef(this.filterRef, this.props.filterRef),
               disabled: this.props.disabled,
-              active: this.state.showPopup,
-              children: this._getPlaceholder()
+              value: this.state.filterValue,
+              borderless: this.props.type === Type.INPUT_WITHOUT_CONTROLS,
+              style: style,
+              size: Size.FULL,
+              onChange: this._filterChangeHandler,
+              onFocus: this._focusHandler,
+              onBlur: this._blurHandler
+              // Input with error style without description
+              ,
+              error: this.props.error != null ? '' : null,
+              label: this.props.type === Type.INPUT ? this._getLabel() : null,
+              placeholder: this.props.inputPlaceholder,
+              onKeyDown: this.props.onKeyDown,
+              "data-test": "ring-select__focus",
+              enableShortcuts: shortcutsEnabled ? Object.keys(_objectSpread2(_objectSpread2({}, this.getShortcutsMap()), (_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 || (_this$_popup5 = _this$_popup5.list) === null || _this$_popup5 === void 0 ? void 0 : _this$_popup5.shortcutsMap)) : undefined,
+              icon: this.props.filterIcon,
+              afterInput: iconsNode
             })), this._renderPopup()]
-          });
-        default:
-          if (this.props.customAnchor) {
-            return /*#__PURE__*/jsxs(Fragment, {
-              children: [shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
-                map: this.getShortcutsMap(),
-                scope: this.shortcutsScope
-              }), this.props.customAnchor({
-                wrapperProps: {
-                  ref: this.nodeRef,
-                  'data-test': joinDataTestAttributes('ring-select', dataTest)
-                },
-                buttonProps: _objectSpread2(_objectSpread2({}, ariaProps), {}, {
-                  id: this.props.id,
-                  onClick: this._clickHandler,
-                  disabled: this.props.disabled,
-                  children: this._getPlaceholder(),
-                  'data-test': 'ring-select__focus'
-                }),
-                popup: this._renderPopup()
-              })]
-            });
-          }
-          return /*#__PURE__*/jsx("span", {
-            id: this.props.id,
-            ref: this.nodeRef,
-            "data-test": "ring-select",
-            children: this._renderPopup()
-          });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      return /*#__PURE__*/jsx(ActiveItemContext.Provider, {
-        children: /*#__PURE__*/jsx(ActiveItemContext.ValueContext.Consumer, {
-          children: function children(activeItemId) {
-            return _this4.renderSelect(activeItemId);
-          }
-        })
-      });
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      var multiple = nextProps.multiple,
-        data = nextProps.data,
-        type = nextProps.type;
-      var prevSelected = prevState.prevSelected,
-        prevData = prevState.prevData,
-        prevMultiple = prevState.prevMultiple,
-        filterValue = prevState.filterValue;
-      var nextState = {
-        prevData: data,
-        prevSelected: nextProps.selected,
-        prevMultiple: multiple
-      };
-      if ('data' in nextProps && data !== prevData) {
-        var _getListItems3 = _getListItems(nextProps, prevState, filterValue, data),
-          filteredData = _getListItems3.filteredData,
-          addButton = _getListItems3.addButton;
-        Object.assign(nextState, {
-          shownData: filteredData,
-          addButton
+          }), this.props.error && /*#__PURE__*/jsx("div", {
+            className: classNames(modules_88cfaf40.errorText, modules_88cfaf40["size".concat(this.props.size)]),
+            children: this.props.error
+          })]
         });
-        if (prevState.selected) {
-          Object.assign(nextState, {
-            selectedIndex: getSelectedIndex(prevState.selected, data),
-            filterValue: _getValueForFilter(prevState.selected, type, filterValue)
-          });
-        }
-      }
-      if ('selected' in nextProps && nextProps.selected !== prevSelected) {
-        var _selected = nextProps.selected || (multiple ? [] : null);
-        var selectedIndex = getSelectedIndex(_selected, data || prevData);
-        Object.assign(nextState, {
-          selected: _selected,
-          filterValue: _getValueForFilter(_selected, type, filterValue)
+      case Type.BUTTON:
+        return /*#__PURE__*/jsxs("div", {
+          ref: this.nodeRef,
+          className: classNames(classes, modules_9d0de074.buttonMode),
+          "data-test": joinDataTestAttributes('ring-select', dataTest),
+          children: [selectedLabel && /*#__PURE__*/jsx(ControlLabel, {
+            type: this.props.labelType,
+            disabled: this.props.disabled,
+            htmlFor: this.props.id,
+            children: selectedLabel
+          }), shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
+            map: this.getShortcutsMap(),
+            scope: this.shortcutsScope
+          }), /*#__PURE__*/jsxs("div", {
+            className: modules_9d0de074.buttonContainer,
+            children: [/*#__PURE__*/jsxs(Button, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+              height: this.props.height,
+              id: this.props.id,
+              onClick: this._clickHandler,
+              className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
+                [modules_9d0de074.buttonValueOpen]: this.state.showPopup,
+                [modules_9d0de074.buttonValueEmpty]: this._selectionIsEmpty()
+              }),
+              disabled: this.props.disabled,
+              style: style,
+              "data-test": "ring-select__button ring-select__focus",
+              children: [this._getAvatar(), this._getPlaceholder()]
+            })), iconsNode]
+          }), this._renderPopup()]
         });
-        if (!Array.isArray(prevSelected) || !Array.isArray(_selected) || !isSameSelected(prevSelected, _selected)) {
-          Object.assign(nextState, {
-            selectedIndex
+      case Type.INLINE:
+        return /*#__PURE__*/jsxs("div", {
+          className: classes,
+          ref: this.nodeRef,
+          "data-test": joinDataTestAttributes('ring-select', dataTest),
+          children: [shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
+            map: this.getShortcutsMap(),
+            scope: this.shortcutsScope
+          }), /*#__PURE__*/jsx(Anchor, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+            className: (_this$props$buttonCla = this.props.buttonClassName) !== null && _this$props$buttonCla !== void 0 ? _this$props$buttonCla : undefined,
+            id: this.props.id,
+            onClick: this._clickHandler,
+            "data-test": "ring-select__focus",
+            disabled: this.props.disabled,
+            active: this.state.showPopup,
+            children: this._getPlaceholder()
+          })), this._renderPopup()]
+        });
+      default:
+        if (this.props.customAnchor) {
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
+              map: this.getShortcutsMap(),
+              scope: this.shortcutsScope
+            }), this.props.customAnchor({
+              wrapperProps: {
+                ref: this.nodeRef,
+                'data-test': joinDataTestAttributes('ring-select', dataTest)
+              },
+              buttonProps: _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+                id: this.props.id,
+                onClick: this._clickHandler,
+                disabled: this.props.disabled,
+                children: this._getPlaceholder(),
+                'data-test': 'ring-select__focus'
+              }),
+              popup: this._renderPopup()
+            })]
           });
         }
-      }
-      if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
-        nextState.selected = multiple ? [] : null;
-      }
-      if (multiple && !nextState.selected) {
-        nextState.selected = prevState.selected;
-      }
-      var _prevState$nextState = _objectSpread2(_objectSpread2({}, prevState), nextState),
-        selected = _prevState$nextState.selected;
-      if (selected && Array.isArray(selected)) {
-        nextState.multipleMap = buildMultipleMap(selected);
-        var _getListItems4 = _getListItems(nextProps, nextState, filterValue, data),
-          _filteredData = _getListItems4.filteredData,
-          _addButton = _getListItems4.addButton;
-        Object.assign(nextState, {
-          shownData: _filteredData,
-          addButton: _addButton
+        return /*#__PURE__*/jsx("span", {
+          id: this.props.id,
+          ref: this.nodeRef,
+          "data-test": "ring-select",
+          children: this._renderPopup()
         });
-      }
-      return nextState;
     }
-  }]);
-}(Component);
+  }
+  render() {
+    return /*#__PURE__*/jsx(ActiveItemContext.Provider, {
+      children: /*#__PURE__*/jsx(ActiveItemContext.ValueContext.Consumer, {
+        children: activeItemId => this.renderSelect(activeItemId)
+      })
+    });
+  }
+}
 _defineProperty(Select, "defaultProps", {
   data: [],
   filter: false,
@@ -1263,69 +1177,6 @@ _defineProperty(Select, "defaultProps", {
 _defineProperty(Select, "contextType", ControlsHeightContext);
 _defineProperty(Select, "Type", Type);
 _defineProperty(Select, "Size", Size);
-Select.propTypes = {
-  className: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  id: PropTypes.string,
-  multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  allowAny: PropTypes.bool,
-  filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  filterIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  filterRef: PropTypes.oneOfType([PropTypes.func, refObject(PropTypes.instanceOf(HTMLInputElement))]),
-  getInitial: PropTypes.func,
-  onClose: PropTypes.func,
-  onOpen: PropTypes.func,
-  onDone: PropTypes.func,
-  onFilter: PropTypes.func,
-  onChange: PropTypes.func,
-  onReset: PropTypes.func,
-  onLoadMore: PropTypes.func,
-  onAdd: PropTypes.func,
-  onBeforeOpen: PropTypes.func,
-  onSelect: PropTypes.func,
-  onDeselect: PropTypes.func,
-  onOutsideClick: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  selected: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  data: PropTypes.array,
-  tags: PropTypes.object,
-  targetElement: PropTypes.object,
-  loading: PropTypes.bool,
-  loadingMessage: PropTypes.string,
-  notFoundMessage: PropTypes.string,
-  maxHeight: PropTypes.number,
-  minWidth: PropTypes.number,
-  directions: PropTypes.array,
-  popupClassName: PropTypes.string,
-  popupStyle: PropTypes.object,
-  preventListOverscroll: PropTypes.bool,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  renderOptimization: PropTypes.bool,
-  ringPopupTarget: PropTypes.string,
-  error: PropTypes.string,
-  hint: List.ListHint.propTypes.label,
-  add: PropTypes.object,
-  type: PropTypes.oneOf(Object.values(Type)),
-  disabled: PropTypes.bool,
-  hideSelected: PropTypes.bool,
-  label: PropTypes.string,
-  selectedLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  inputPlaceholder: PropTypes.string,
-  clear: PropTypes.bool,
-  hideArrow: PropTypes.bool,
-  showPopup: PropTypes.bool,
-  tryKeepOpen: PropTypes.bool,
-  compact: PropTypes.bool,
-  size: PropTypes.oneOf(Object.values(Size)),
-  customAnchor: PropTypes.func,
-  disableMoveOverflow: PropTypes.bool,
-  disableScrollToActive: PropTypes.bool,
-  dir: PropTypes.oneOf(['ltr', 'rtl']),
-  'data-test': PropTypes.string
-};
-var RerenderableSelect = rerenderHOC(Select);
+const RerenderableSelect = rerenderHOC(Select);
 
 export { RerenderableSelect, Type, Select as default };