@jetbrains/ring-ui-built 6.0.5-beta.0

package/components/select/select.js

@@ -0,0 +1,1285 @@
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, g as _objectSpread2, e as _objectWithoutProperties, p as _toPropertyKey, d as _createClass, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.string.trim.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.values.js';
+import React, { Fragment, Component } 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 '../dropdown/dropdown.js';
+import Avatar, { Size as Size$1 } from '../avatar/avatar.js';
+import Popup from '../popup/popup.js';
+import List, { ActiveItemContext } from '../list/list.js';
+import { S as Size, I as Input, m as modules_88cfaf40 } from '../_helpers/input.js';
+import { ControlLabel } from '../control-label/control-label.js';
+import Shortcuts from '../shortcuts/shortcuts.js';
+import { Button } from '../button/button.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+import getUID from '../global/get-uid.js';
+import rerenderHOC from '../global/rerender-hoc.js';
+import fuzzyHighlight from '../global/fuzzy-highlight.js';
+import memoize from '../global/memoize.js';
+import { I18nContext } from '../i18n/i18n-context.js';
+import composeRefs from '../global/composeRefs.js';
+import { refObject } from '../global/prop-types.js';
+import { isArray } from '../global/typescript-utils.js';
+import { ControlsHeight, ControlsHeightContext } from '../global/controls-height.js';
+import SelectPopup from './select__popup.js';
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.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.string.split.js';
+import 'core-js/modules/es.set.js';
+import '../avatar/fallback-avatar.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.string.includes.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import '../shortcuts/core.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';
+import 'react-virtualized/dist/es/WindowScroller';
+import 'react-virtualized/dist/es/CellMeasurer';
+import 'memoize-one';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark-14px';
+import '@jetbrains/icons/remove-14px';
+import '../list/list__custom.js';
+import '../global/get-event-key.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '../i18n/i18n.js';
+import '@jetbrains/icons/search';
+import '../loader-inline/loader-inline.js';
+import '../shortcuts/shortcuts-hoc.js';
+import '../tags-list/tags-list.js';
+import '../tag/tag.js';
+import '../caret/caret.js';
+import '../text/text.js';
+import '../_helpers/select__filter.js';
+
+var modules_9d0de074 = {"unit":"i__const_unit_0","button-shadow":"i__const_button_shadow_1","select":"select_rui_11de","value":"value_rui_11de ellipsis_rui_8bff font_rui_8bff","icons":"icons_rui_11de","light":"light_rui_2ac4","toolbar":"toolbar_rui_11de","button":"button_rui_11de","buttonSpaced":"buttonSpaced_rui_11de","inputMode":"inputMode_rui_11de","selectedIcon":"selectedIcon_rui_11de resetButton_rui_8bff","clearIcon":"clearIcon_rui_11de","sizeS":"sizeS_rui_11de","sizeM":"sizeM_rui_11de","sizeL":"sizeL_rui_11de","sizeFULL":"sizeFULL_rui_11de","sizeAUTO":"sizeAUTO_rui_11de","buttonMode":"buttonMode_rui_11de","open":"open_rui_11de","buttonContainer":"buttonContainer_rui_11de","buttonValue":"buttonValue_rui_11de ellipsis_rui_8bff","buttonValueOpen":"buttonValueOpen_rui_11de","buttonValueEmpty":"buttonValueEmpty_rui_11de","heightS":"heightS_rui_11de","label":"label_rui_11de","disabled":"disabled_rui_11de","avatar":"avatar_rui_11de","popup":"popup_rui_11de","chevron":"chevron_rui_11de","chevronIcon":"chevronIcon_rui_11de"};
+
+/**
+ * @name Select
+ */
+function noop() {}
+/**
+ * @enum {number}
+ */
+var Type;
+(function (Type) {
+  Type["BUTTON"] = "BUTTON";
+  Type["INPUT"] = "INPUT";
+  Type["CUSTOM"] = "CUSTOM";
+  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;
+};
+function getLowerCaseLabel(item) {
+  if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || List.isItemType(List.ListProps.Type.HINT, item) || typeof item.label !== 'string') {
+    return null;
+  }
+  return item.label.toLowerCase();
+}
+function doesLabelMatch(itemToCheck, fn) {
+  var lowerCaseLabel = getLowerCaseLabel(itemToCheck);
+  if (lowerCaseLabel == null) {
+    return true;
+  }
+  return fn(lowerCaseLabel);
+}
+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 function (itemToCheck, checkString) {
+    return doesLabelMatch(itemToCheck, function (lowerCaseLabel) {
+      return lowerCaseLabel.indexOf(checkString) >= 0;
+    });
+  };
+}
+function buildMultipleMap(selected) {
+  return selected.reduce(function (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) {
+    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]);
+    if (check(item, lowerCaseString, data)) {
+      var _state$multipleMap2;
+      exactMatch = item.label === filterString;
+      if (props.multiple && !(typeof props.multiple === 'object' && props.multiple.removeSelectedItems)) {
+        var _state$multipleMap;
+        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;
+        });
+      }
+      // 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;
+  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;
+      if (add.label) {
+        label = typeof add.label === 'function' ? add.label(filterString) : add.label;
+      } else {
+        label = filterString;
+      }
+      addButton = {
+        prefix: add.prefix,
+        label,
+        delayed: (_add$delayed = add.delayed) !== null && _add$delayed !== void 0 ? _add$delayed : true
+      };
+    }
+  }
+  return {
+    filteredData,
+    addButton
+  };
+}
+function getSelectedIndex(selected, data) {
+  var firstSelected = Array.isArray(selected) ? selected[0] : selected;
+  if (firstSelected == null) {
+    return null;
+  }
+  for (var i = 0; i < data.length; i++) {
+    var item = data[i];
+    if (item.key === undefined) {
+      continue;
+    }
+    if (item.key === firstSelected.key) {
+      return i;
+    }
+  }
+  return null;
+}
+var getItemLabel = function getItemLabel(_ref) {
+  var selectedLabel = _ref.selectedLabel,
+    label = _ref.label;
+  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;
+};
+function isSameSelected(prevSelected, selected) {
+  if (!prevSelected || !selected || prevSelected.length !== selected.length) {
+    return false;
+  }
+  var keysMap = selected.reduce(function (result, item) {
+    result[item.key] = true;
+    return result;
+  }, {});
+  return prevSelected.every(function (it) {
+    return keysMap[it.key];
+  });
+}
+/**
+ * @name Select
+ * @constructor
+ * @extends {Component}
+ */
+/**
+ * Displays a select.
+ */
+var Select = /*#__PURE__*/function (_Component) {
+  _inherits(Select, _Component);
+  var _super = _createSuper(Select);
+  function Select() {
+    var _this;
+    _classCallCheck(this, Select);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      data: [],
+      shownData: [],
+      selected: _this.props.multiple ? [] : null,
+      selectedIndex: null,
+      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,
+      prevSelected: null,
+      prevMultiple: _this.props.multiple,
+      multipleMap: {},
+      addButton: null
+    });
+    _defineProperty(_assertThisInitialized(_this), "id", getUID('select-'));
+    _defineProperty(_assertThisInitialized(_this), "shortcutsScope", _this.id);
+    _defineProperty(_assertThisInitialized(_this), "listId", "".concat(_this.id, ":list"));
+    _defineProperty(_assertThisInitialized(_this), "_focusHandler", function (e) {
+      _this.props.onFocus(e);
+      _this.setState({
+        shortcutsEnabled: true,
+        focused: true
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "_blurHandler", function () {
+      var _this$_popup;
+      _this.props.onBlur();
+      if (_this._popup && _this._popup.isVisible() && !_this._popup.isClickingPopup) {
+        window.setTimeout(function () {
+          _this.setState({
+            showPopup: false
+          });
+        });
+      }
+      if (!((_this$_popup = _this._popup) !== null && _this$_popup !== void 0 && _this$_popup.isClickingPopup)) {
+        _this.setState({
+          shortcutsEnabled: false,
+          focused: false
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "node", void 0);
+    _defineProperty(_assertThisInitialized(_this), "nodeRef", function (el) {
+      _this.node = el;
+    });
+    _defineProperty(_assertThisInitialized(_this), "_popup", null);
+    _defineProperty(_assertThisInitialized(_this), "onEmptyPopupEnter", function () {
+      if (_this.state.addButton) {
+        _this.addHandler();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "focus", function () {
+      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;
+      restoreFocusNode === null || restoreFocusNode === void 0 ? void 0 : restoreFocusNode.focus();
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onEnter", function () {
+      var _this$_popup2;
+      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) {
+        return true;
+      }
+      return undefined;
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onEsc", function (event) {
+      var _this$_popup3;
+      if (!((_this$_popup3 = _this._popup) !== null && _this$_popup3 !== void 0 && _this$_popup3.isVisible())) {
+        return true;
+      } else if (_this.props.multiple || !_this.props.getInitial) {
+        return false;
+      }
+      var selected = {
+        key: Math.random(),
+        label: _this.props.getInitial()
+      };
+      _this.setState({
+        selected,
+        filterValue: _this.getValueForFilter(selected)
+      }, function () {
+        _this.props.onChange(selected, event);
+        _this.props.onReset();
+      });
+      return undefined;
+    });
+    _defineProperty(_assertThisInitialized(_this), "_inputShortcutHandler", function () {
+      if (_this.state.focused && _this._popup && !_this._popup.isVisible()) {
+        _this._clickHandler();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "popupRef", function (el) {
+      _this._popup = el;
+    });
+    _defineProperty(_assertThisInitialized(_this), "addHandler", function () {
+      var value = _this.filterValue();
+      _this._hidePopup();
+      _this.props.onAdd(value);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getLowerCaseLabel", getLowerCaseLabel);
+    _defineProperty(_assertThisInitialized(_this), "doesLabelMatch", doesLabelMatch);
+    _defineProperty(_assertThisInitialized(_this), "_clickHandler", function () {
+      if (!_this.props.disabled) {
+        if (_this.state.showPopup) {
+          _this._hidePopup();
+        } else {
+          _this.props.onBeforeOpen();
+          _this._showPopup();
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_openPopupIfClosed", function () {
+      if (_this.props.disabled || _this.state.showPopup) {
+        return;
+      }
+      _this.props.onBeforeOpen();
+      _this._showPopup();
+    });
+    _defineProperty(_assertThisInitialized(_this), "_filterChangeHandler", function (e) {
+      _this._setFilter(e.currentTarget.value, e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "_setFilter", function (value, event) {
+      var _this$_popup4;
+      if (_this.isInputMode() && !_this.state.focused) {
+        return;
+      }
+      if (value === _this.state.filterValue) {
+        return;
+      }
+      var filterValue = value.replace(/^\s+/g, '');
+      _this.props.onFilter(filterValue);
+      if (_this.props.allowAny) {
+        var fakeSelected = {
+          key: Math.random(),
+          label: filterValue
+        };
+        _this.setState({
+          selected: filterValue === '' ? null : fakeSelected,
+          selectedIndex: null
+        }, function () {
+          _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({
+        filterValue
+      }, function () {
+        _this._showPopup();
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "_redrawPopup", function () {
+      if (_this.props.multiple) {
+        setTimeout(function () {
+          _this.isInputMode() && _this.clearFilter();
+          _this._showPopup();
+        }, 0);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_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');
+      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;
+      if (!_this.props.multiple) {
+        if (!tryKeepOpen) {
+          _this._hidePopup(isSelectItemEvent);
+        }
+        _this.setState({
+          selected,
+          selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
+        }, function () {
+          var newFilterValue = _this.isInputMode() && !_this.props.hideSelected ? getItemLabel(selected) : '';
+          _this.filterValue(newFilterValue);
+          _this.props.onFilter(newFilterValue);
+          _this.props.onSelect(selected, event);
+          _this.props.onChange(selected, event);
+        });
+      } else {
+        if (!tryKeepOpen) {
+          _this._hidePopup(isSelectItemEvent);
+        }
+        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;
+          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);
+          }
+          _this.props.onChange(nextSelection, event);
+          var 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
+              });
+            });
+          }
+          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));
+            nextState.multipleMap = restMultipleMap;
+          }
+          return _objectSpread2(_objectSpread2({}, prevState), nextState);
+        }, function () {
+          if (tryKeepOpen) {
+            _this._redrawPopup();
+          }
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_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;
+        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);
+          });
+        } else {
+          nextSelection = [];
+          currentSelection.forEach(function (item) {
+            _this.props.onDeselect && _this.props.onDeselect(item);
+          });
+        }
+        _this.props.onChange(nextSelection, event);
+        return {
+          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;
+          })) : {}
+        };
+      }, _this._redrawPopup);
+    });
+    _defineProperty(_assertThisInitialized(_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));
+          }
+        }
+      }
+      var isTagRemoved = _this.props.tags && event && event.target && event.target instanceof Element && event.target.matches('[data-test="ring-tag-remove"]');
+      if (!isTagRemoved) {
+        _this._hidePopup(isEsc);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "clearFilter", function (e) {
+      _this._setFilter('', e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "clear", function (event) {
+      if (event) {
+        event.stopPropagation();
+      }
+      var empty = _this.props.multiple ? [] : null;
+      _this.setState({
+        selected: empty,
+        selectedIndex: null,
+        filterValue: ''
+      }, function () {
+        if (_this.props.onChange) {
+          _this.props.onChange(empty, event);
+        }
+      });
+      return false;
+    });
+    _defineProperty(_assertThisInitialized(_this), "filter", void 0);
+    _defineProperty(_assertThisInitialized(_this), "filterRef", function (el) {
+      _this.filter = el;
+    });
+    return _this;
+  }
+  _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: {}
+          };
+        });
+        _this2._redrawPopup();
+      };
+      return {
+        isResetItem: true,
+        separator: reset.separator,
+        key: reset.label,
+        rgItemType: List.ListProps.Type.CUSTOM,
+        template: /*#__PURE__*/React.createElement(Button, {
+          text: true,
+          className: modules_9d0de074.button,
+          "data-test": "ring-select-reset-tags-button",
+          height: ControlsHeight.S
+        }, 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__*/React.createElement(I18nContext.Consumer, null, function (_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__*/React.createElement(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,
+          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
+        });
+      });
+    }
+  }, {
+    key: "_showPopup",
+    value: function _showPopup() {
+      if (!this.node) {
+        return;
+      }
+      var shownData = this.getListItems(this.filterValue());
+      this.setState({
+        showPopup: true,
+        shownData
+      });
+    }
+  }, {
+    key: "_hidePopup",
+    value: function _hidePopup(tryFocusAnchor) {
+      var _this4 = this;
+      if (this.node && this.state.showPopup) {
+        this.setState(function (prevState) {
+          return {
+            showPopup: false,
+            filterValue: _this4.props.allowAny ? prevState.filterValue : ''
+          };
+        });
+        if (tryFocusAnchor) {
+          this.focus();
+        }
+      }
+    }
+  }, {
+    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;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames({
+          [modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
+        }),
+        "data-test": "ring-select-toolbar"
+      }, renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        delayed: delayed,
+        className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
+        onClick: this.addHandler,
+        "data-test": "ring-select-toolbar-button"
+      }, prefix ? "".concat(prefix, " ").concat(label) : label), hint && /*#__PURE__*/React.createElement(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);
+    }
+  }, {
+    key: "getFilterFn",
+    value: function getFilterFn() {
+      return _getFilterFn(this.props.filter);
+    }
+  }, {
+    key: "getListItems",
+    value: function getListItems(rawFilterString, data) {
+      var _getListItems2 = _getListItems(this.props, this.state, rawFilterString, data),
+        filteredData = _getListItems2.filteredData,
+        addButton = _getListItems2.addButton;
+      this.setState({
+        addButton
+      });
+      return filteredData;
+    }
+  }, {
+    key: "filterValue",
+    value: function filterValue(setValue) {
+      if (typeof setValue === 'string' || typeof setValue === 'number') {
+        this.setState({
+          filterValue: setValue
+        });
+        return undefined;
+      } else {
+        return this.state.filterValue;
+      }
+    }
+  }, {
+    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)
+        });
+      }
+    }
+  }, {
+    key: "_selectionIsEmpty",
+    value: function _selectionIsEmpty() {
+      return Array.isArray(this.state.selected) && !this.state.selected.length || !this.state.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';
+    }
+  }, {
+    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();
+    }
+  }, {
+    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]));
+        }
+        return labels.filter(Boolean).join(', ');
+      } else {
+        return this.state.selected != null ? getItemLabel(this.state.selected) : null;
+      }
+    }
+  }, {
+    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__*/React.createElement("button", {
+          title: "Toggle options popup",
+          type: "button",
+          className: modules_9d0de074.selectedIcon,
+          key: "selected",
+          disabled: this.props.disabled,
+          onClick: this._clickHandler,
+          style: {
+            backgroundImage: "url(".concat(selected.icon, ")")
+          }
+        }));
+      }
+      if (clear && !disabled && !this._selectionIsEmpty()) {
+        icons.push( /*#__PURE__*/React.createElement(Button, {
+          title: "Clear selection",
+          "data-test": "ring-clear-select",
+          className: modules_9d0de074.clearIcon,
+          key: "close",
+          disabled: this.props.disabled,
+          onClick: this.clear,
+          height: height,
+          icon: closeIcon
+        }));
+      }
+      if (!hideArrow) {
+        icons.push( /*#__PURE__*/React.createElement(Button, {
+          title: "Toggle options popup",
+          className: modules_9d0de074.chevron,
+          iconClassName: modules_9d0de074.chevronIcon,
+          icon: chevronDownIcon,
+          key: "hide",
+          disabled: this.props.disabled,
+          height: height,
+          onClick: this._clickHandler
+        }));
+      }
+      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__*/React.createElement(Avatar, {
+        className: modules_9d0de074.avatar,
+        url: this.state.selected.avatar,
+        username: this.state.selected.username,
+        size: Size$1.Size20
+      });
+    }
+  }, {
+    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
+      };
+    }
+  }, {
+    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
+      });
+      var icons = this._getIcons();
+      var style = getStyle(icons.length);
+      var iconsNode = /*#__PURE__*/React.createElement("div", {
+        className: modules_9d0de074.icons
+      }, 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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+            ref: this.nodeRef,
+            className: classNames(classes, modules_9d0de074.inputMode),
+            "data-test": joinDataTestAttributes('ring-select', dataTest)
+          }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
+            map: this.getShortcutsMap(),
+            scope: this.shortcutsScope
+          }), /*#__PURE__*/React.createElement(Input, _extends({}, ariaProps, {
+            height: this.props.height,
+            autoComplete: "off",
+            id: this.props.id,
+            onClick: this._clickHandler,
+            inputRef: composeRefs(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: this.props.type === Type.INPUT && iconsNode
+          })), this._renderPopup()), this.props.error && /*#__PURE__*/React.createElement("div", {
+            className: classNames(modules_88cfaf40.errorText, modules_88cfaf40["size".concat(this.props.size)])
+          }, this.props.error));
+        case Type.BUTTON:
+          return /*#__PURE__*/React.createElement("div", {
+            ref: this.nodeRef,
+            className: classNames(classes, modules_9d0de074.buttonMode),
+            "data-test": joinDataTestAttributes('ring-select', dataTest)
+          }, selectedLabel && /*#__PURE__*/React.createElement(ControlLabel, {
+            type: this.props.labelType,
+            disabled: this.props.disabled,
+            htmlFor: this.props.id
+          }, selectedLabel), shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
+            map: this.getShortcutsMap(),
+            scope: this.shortcutsScope
+          }), /*#__PURE__*/React.createElement("div", {
+            className: modules_9d0de074.buttonContainer
+          }, /*#__PURE__*/React.createElement(Button, _extends({}, 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"
+          }), this._getAvatar(), this._getPlaceholder()), iconsNode), this._renderPopup());
+        case Type.INLINE:
+          return /*#__PURE__*/React.createElement("div", {
+            className: classes,
+            ref: this.nodeRef,
+            "data-test": joinDataTestAttributes('ring-select', dataTest)
+          }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
+            map: this.getShortcutsMap(),
+            scope: this.shortcutsScope
+          }), /*#__PURE__*/React.createElement(Anchor, _extends({}, 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
+          }), this._getPlaceholder()), this._renderPopup());
+        default:
+          if (this.props.customAnchor) {
+            return /*#__PURE__*/React.createElement(Fragment, null, shortcutsEnabled && /*#__PURE__*/React.createElement(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__*/React.createElement("span", {
+            id: this.props.id,
+            ref: this.nodeRef,
+            "data-test": "ring-select"
+          }, this._renderPopup());
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this5 = this;
+      return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, function (activeItemId) {
+        return _this5.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
+        });
+        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)
+        });
+        if (!Array.isArray(prevSelected) || !Array.isArray(_selected) || !isSameSelected(prevSelected, _selected)) {
+          Object.assign(nextState, {
+            selectedIndex
+          });
+        }
+      }
+      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 nextState;
+    }
+  }]);
+  return Select;
+}(Component);
+_defineProperty(Select, "defaultProps", {
+  data: [],
+  filter: false,
+  filterIcon: null,
+  filterRef: noop,
+  multiple: false,
+  clear: false,
+  loading: false,
+  disabled: false,
+  type: Type.BUTTON,
+  size: Size.M,
+  targetElement: null,
+  hideSelected: false,
+  allowAny: false,
+  hideArrow: false,
+  showPopup: false,
+  maxHeight: 600,
+  directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT],
+  selected: null,
+  label: null,
+  selectedLabel: null,
+  inputPlaceholder: '',
+  hint: null,
+  shortcutsEnabled: false,
+  onBeforeOpen: noop,
+  onLoadMore: noop,
+  onOpen: noop,
+  onClose: noop,
+  onFilter: noop,
+  onFocus: noop,
+  onBlur: noop,
+  onKeyDown: noop,
+  onSelect: noop,
+  onDeselect: noop,
+  onOutsideClick: noop,
+  onChange: noop,
+  onAdd: noop,
+  onDone: noop,
+  onReset: noop,
+  tags: null,
+  ringPopupTarget: null,
+  dir: 'ltr'
+});
+_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,
+  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);
+
+export { RerenderableSelect, Type, Select as default };