@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/dist/select/select.js

@@ -9,15 +9,16 @@ 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 Input, { Size } from '../input/input.js';
+import ThemedInput, { Size } from '../input/input.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
-import Button from '../button/button.js';
+import ThemedButton 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 Theme from '../global/theme.js';
 import memoize from '../global/memoize.js';
+import { isArray } from '../global/typescript-utils.js';
 import SelectPopup from './select__popup.js';
 import { A as Anchor } from '../_helpers/anchor.js';
 import '../icon/icon.js';
@@ -62,6 +63,8 @@ import '../list/list__title.js';
 import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';
@@ -78,7 +81,7 @@ import '../caret/caret.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
 
-var modules_9d0de074 = {"unit":"8px","resetButton":"resetButton_rui_750f","select":"select_rui_5270","value":"value_rui_5270 ellipsis_rui_750f font_rui_750f","icons":"icons_rui_5270","toolbar":"toolbar_rui_5270","button":"button_rui_5270","buttonSpaced":"buttonSpaced_rui_5270","selectedIcon":"selectedIcon_rui_5270 resetButton_rui_750f","clearIcon":"clearIcon_rui_5270","sizeS":"sizeS_rui_5270","sizeM":"sizeM_rui_5270","sizeL":"sizeL_rui_5270","sizeFULL":"sizeFULL_rui_5270","sizeAUTO":"sizeAUTO_rui_5270","buttonMode":"buttonMode_rui_5270","materialMode":"materialMode_rui_5270","open":"open_rui_5270","buttonContainer":"buttonContainer_rui_5270","buttonValue":"buttonValue_rui_5270 ellipsis_rui_750f","buttonValueOpen":"buttonValueOpen_rui_5270","label":"label_rui_5270","disabled":"disabled_rui_5270","selectedLabel":"selectedLabel_rui_5270","avatar":"avatar_rui_5270","popup":"popup_rui_5270","chevron":"chevron_rui_5270","chevronIcon":"chevronIcon_rui_5270"};
+var modules_9d0de074 = {"unit":"8px","select":"select_rui_9815","value":"value_rui_9815 ellipsis_rui_750f font_rui_750f","icons":"icons_rui_9815","toolbar":"toolbar_rui_9815","button":"button_rui_9815","buttonSpaced":"buttonSpaced_rui_9815","inputMode":"inputMode_rui_9815","buttonMode":"buttonMode_rui_9815","selectedIcon":"selectedIcon_rui_9815 resetButton_rui_750f","clearIcon":"clearIcon_rui_9815","sizeS":"sizeS_rui_9815","sizeM":"sizeM_rui_9815","sizeL":"sizeL_rui_9815","sizeFULL":"sizeFULL_rui_9815","sizeAUTO":"sizeAUTO_rui_9815","materialMode":"materialMode_rui_9815","open":"open_rui_9815","buttonContainer":"buttonContainer_rui_9815","buttonValue":"buttonValue_rui_9815 ellipsis_rui_750f","buttonValueOpen":"buttonValueOpen_rui_9815","label":"label_rui_9815","disabled":"disabled_rui_9815","selectedLabel":"selectedLabel_rui_9815","avatar":"avatar_rui_9815","popup":"popup_rui_9815","chevron":"chevron_rui_9815","chevronIcon":"chevronIcon_rui_9815"};
 
 /**
  * @name Select
@@ -90,14 +93,17 @@ function noop() {}
  */
 
 
-const Type = {
-  BUTTON: 'BUTTON',
-  INPUT: 'INPUT',
-  CUSTOM: 'CUSTOM',
-  INLINE: 'INLINE',
-  MATERIAL: 'MATERIAL',
-  INPUT_WITHOUT_CONTROLS: 'INPUT_WITHOUT_CONTROLS'
-};
+var Type;
+
+(function (Type) {
+  Type["BUTTON"] = "BUTTON";
+  Type["INPUT"] = "INPUT";
+  Type["CUSTOM"] = "CUSTOM";
+  Type["INLINE"] = "INLINE";
+  Type["MATERIAL"] = "MATERIAL";
+  Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
+})(Type || (Type = {}));
+
 const ICON_WIDTH = 20;
 const getStyle = memoize(iconsLength => ({
   paddingRight: iconsLength * ICON_WIDTH
@@ -106,7 +112,7 @@ const getStyle = memoize(iconsLength => ({
 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) || item.label == null) {
+  if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || List.isItemType(List.ListProps.Type.HINT, item) || typeof item.label !== 'string') {
     return null;
   }
 
@@ -124,27 +130,31 @@ function doesLabelMatch(itemToCheck, fn) {
 }
 
 function getFilterFn(filter) {
-  if (filter.fn) {
-    return filter.fn;
-  }
+  if (typeof filter === 'object') {
+    if (filter.fn) {
+      return filter.fn;
+    }
 
-  if (filter.fuzzy) {
-    return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => fuzzyHighlight(checkString, lowerCaseLabel).matched);
+    if (filter.fuzzy) {
+      return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => fuzzyHighlight(checkString, lowerCaseLabel).matched);
+    }
   }
 
   return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => lowerCaseLabel.indexOf(checkString) >= 0);
 }
 
-const buildMultipleMap = selected => selected.reduce((acc, item) => {
-  acc[item.key] = true;
-  return acc;
-}, {});
+function buildMultipleMap(selected) {
+  return selected.reduce((acc, item) => {
+    acc[item.key] = true;
+    return acc;
+  }, {});
+}
 
 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) && state.selected && filterString === state.selected.label) {
+  if (isInputMode(props.type) && state.selected && !Array.isArray(state.selected) && filterString === state.selected.label) {
     filterString = ''; // ignore multiple if it is exactly the selected item
   }
 
@@ -158,18 +168,22 @@ function getListItems(props, state, rawFilterString) {
     };
 
     if (check(item, lowerCaseString, data)) {
+      var _state$multipleMap2;
+
       exactMatch = item.label === filterString;
 
-      if (props.multiple && !props.multiple.removeSelectedItems) {
-        item.checkbox = !!state.multipleMap[item.key];
+      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 && props.multiple.limit) {
+      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(selectedItem => selectedItem.key === item.key);
       } // Ignore item if it's multiple and is already selected
 
 
-      if (!(props.multiple && props.multiple.removeSelectedItems && state.multipleMap[item.key])) {
+      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);
       }
     }
@@ -182,6 +196,8 @@ function getListItems(props, state, rawFilterString) {
 
   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;
+
       let label;
 
       if (add.label) {
@@ -193,7 +209,7 @@ function getListItems(props, state, rawFilterString) {
       addButton = {
         prefix: add.prefix,
         label,
-        delayed: add.hasOwnProperty('delayed') ? add.delayed : true
+        delayed: (_add$delayed = add.delayed) !== null && _add$delayed !== void 0 ? _add$delayed : true
       };
     }
   }
@@ -204,8 +220,8 @@ function getListItems(props, state, rawFilterString) {
   };
 }
 
-function getSelectedIndex(selected, data, multiple) {
-  const firstSelected = multiple ? selected[0] : selected;
+function getSelectedIndex(selected, data) {
+  const firstSelected = Array.isArray(selected) ? selected[0] : selected;
 
   if (firstSelected == null) {
     return null;
@@ -231,10 +247,15 @@ const getItemLabel = _ref => {
     selectedLabel,
     label
   } = _ref;
-  return selectedLabel != null ? selectedLabel : label;
+
+  if (selectedLabel != null) {
+    return selectedLabel;
+  }
+
+  return typeof label === 'string' ? label : '';
 };
 
-const getValueForFilter = (selected, type, filterValue) => 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) {
@@ -270,7 +291,7 @@ class Select extends Component {
       shownData: [],
       selected: this.props.multiple ? [] : null,
       selectedIndex: null,
-      filterValue: this.props.filter && this.props.filter.value || '',
+      filterValue: this.props.filter && typeof this.props.filter === 'object' && this.props.filter.value || '',
       shortcutsEnabled: false,
       popupShortcuts: false,
       showPopup: false,
@@ -296,6 +317,8 @@ class Select extends Component {
     });
 
     _defineProperty(this, "_blurHandler", () => {
+      var _this$_popup;
+
       this.props.onBlur();
 
       if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup) {
@@ -306,7 +329,7 @@ class Select extends Component {
         });
       }
 
-      if (!this._popup.isClickingPopup) {
+      if (!((_this$_popup = this._popup) !== null && _this$_popup !== void 0 && _this$_popup.isClickingPopup)) {
         this.setState({
           shortcutsEnabled: false,
           focused: false
@@ -314,6 +337,8 @@ class Select extends Component {
       }
     });
 
+    _defineProperty(this, "node", void 0);
+
     _defineProperty(this, "nodeRef", el => {
       this.node = el;
     });
@@ -327,13 +352,15 @@ class Select extends Component {
     });
 
     _defineProperty(this, "_onEnter", () => {
+      var _this$_popup2;
+
       if (this.state.addButton && this.state.shownData.length === 0) {
         this.addHandler();
       }
 
       this.props.onDone();
 
-      if (!this._popup.isVisible() && this.props.allowAny) {
+      if (!((_this$_popup2 = this._popup) !== null && _this$_popup2 !== void 0 && _this$_popup2.isVisible()) && this.props.allowAny) {
         return true;
       }
 
@@ -341,7 +368,9 @@ class Select extends Component {
     });
 
     _defineProperty(this, "_onEsc", event => {
-      if (!this._popup.isVisible()) {
+      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;
@@ -367,6 +396,10 @@ class Select extends Component {
       }
     });
 
+    _defineProperty(this, "popupRef", el => {
+      this._popup = el;
+    });
+
     _defineProperty(this, "addHandler", () => {
       const value = this.filterValue();
 
@@ -392,53 +425,48 @@ class Select extends Component {
     });
 
     _defineProperty(this, "_filterChangeHandler", e => {
-      this._setFilter(e.target.value, e);
+      this._setFilter(e.currentTarget.value, e);
     });
 
-    _defineProperty(this, "_setFilter", function (value) {
-      let event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _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;
       }
 
       const filterValue = value.replace(/^\s+/g, '');
+      this.props.onFilter(filterValue);
 
-      _this.props.onFilter(filterValue);
-
-      if (_this.props.allowAny) {
+      if (this.props.allowAny) {
         const fakeSelected = {
           key: Math.random(),
           label: filterValue
         };
-
-        _this.setState({
+        this.setState({
           selected: filterValue === '' ? null : fakeSelected,
           selectedIndex: null
         }, () => {
-          _this.props.onSelect(fakeSelected, event);
-
-          _this.props.onChange(fakeSelected, event);
+          this.props.onSelect(fakeSelected, event);
+          this.props.onChange(fakeSelected, event);
         });
       }
 
-      !_this._popup.isVisible() && _this.props.onBeforeOpen();
-
-      _this.setState({
+      !((_this$_popup4 = this._popup) !== null && _this$_popup4 !== void 0 && _this$_popup4.isVisible()) && this.props.onBeforeOpen();
+      this.setState({
         filterValue
       }, () => {
-        _this._showPopup();
+        this._showPopup();
       });
     });
 
     _defineProperty(this, "_redrawPopup", () => {
       if (this.props.multiple) {
         setTimeout(() => {
-          //setTimeout solves events order and bubbling issue
           this.isInputMode() && this.clearFilter();
 
           this._showPopup();
@@ -448,8 +476,11 @@ class Select extends Component {
 
     _defineProperty(this, "_listSelectHandler", function (selected, event) {
       let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      const isItem = List.isItemType.bind(null, List.ListProps.Type.ITEM);
-      const isCustomItem = List.isItemType.bind(null, List.ListProps.Type.CUSTOM);
+
+      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) {
@@ -509,7 +540,7 @@ class Select extends Component {
             selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
           };
 
-          if (_this.props.multiple.limit && nextSelection.length === _this.props.multiple.limit) {
+          if (typeof _this.props.multiple === 'object' && _this.props.multiple.limit && nextSelection.length === _this.props.multiple.limit) {
             nextState.shownData = prevState.shownData.map(item => nextSelection.find(selectedItem => selectedItem.key === item.key) ? item : { ...item,
               disabled: true
             });
@@ -527,7 +558,9 @@ class Select extends Component {
             nextState.multipleMap = restMultipleMap;
           }
 
-          return nextState;
+          return { ...prevState,
+            ...nextState
+          };
         }, () => {
           if (tryKeepOpen) {
             _this._redrawPopup();
@@ -538,8 +571,10 @@ class Select extends Component {
 
     _defineProperty(this, "_listSelectAllHandler", function () {
       let isSelectAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      const isItem = List.isItemType.bind(null, List.ListProps.Type.ITEM);
-      const isCustomItem = List.isItemType.bind(null, List.ListProps.Type.CUSTOM);
+
+      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;
@@ -576,13 +611,13 @@ class Select extends Component {
         if (!this.props.allowAny) {
           if (this.props.hideSelected || !this.state.selected || this.props.multiple) {
             this.clearFilter();
-          } else if (this.state.selected) {
+          } else if (this.state.selected && !Array.isArray(this.state.selected)) {
             this.filterValue(getItemLabel(this.state.selected));
           }
         }
       }
 
-      const isTagRemoved = this.props.tags && event && event.target && 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);
@@ -598,8 +633,7 @@ class Select extends Component {
         event.stopPropagation();
       }
 
-      const empty = Select._getEmptyValue(this.props.multiple);
-
+      const empty = this.props.multiple ? [] : null;
       this.setState({
         selected: empty,
         selectedIndex: null,
@@ -612,23 +646,19 @@ class Select extends Component {
       return false;
     });
 
-    _defineProperty(this, "popupRef", el => {
-      this._popup = el;
-    });
+    _defineProperty(this, "button", void 0);
 
     _defineProperty(this, "buttonRef", el => {
       this.button = el;
     });
 
+    _defineProperty(this, "filter", void 0);
+
     _defineProperty(this, "filterRef", el => {
       this.filter = el;
     });
   }
 
-  static _getEmptyValue(multiple) {
-    return multiple ? [] : null;
-  }
-
   static getDerivedStateFromProps(nextProps, prevState) {
     const {
       multiple,
@@ -659,22 +689,21 @@ class Select extends Component {
 
       if (prevState.selected) {
         Object.assign(nextState, {
-          selectedIndex: getSelectedIndex(prevState.selected, data, multiple),
+          selectedIndex: getSelectedIndex(prevState.selected, data),
           prevFilterValue: getValueForFilter(prevState.selected, type, filterValue)
         });
       }
     }
 
     if ('selected' in nextProps && nextProps.selected !== prevSelected) {
-      const selected = nextProps.selected || Select._getEmptyValue(multiple);
-
-      const selectedIndex = getSelectedIndex(selected, data || prevData, multiple);
+      const selected = nextProps.selected || (multiple ? [] : null);
+      const selectedIndex = getSelectedIndex(selected, data || prevData);
       Object.assign(nextState, {
         selected,
         prevFilterValue: getValueForFilter(selected, type, filterValue)
       });
 
-      if (!multiple || !isSameSelected(prevSelected, selected)) {
+      if (!Array.isArray(prevSelected) || !Array.isArray(selected) || !isSameSelected(prevSelected, selected)) {
         Object.assign(nextState, {
           selectedIndex
         });
@@ -682,7 +711,7 @@ class Select extends Component {
     }
 
     if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
-      nextState.selected = Select._getEmptyValue(multiple);
+      nextState.selected = multiple ? [] : null;
     }
 
     const {
@@ -691,7 +720,7 @@ class Select extends Component {
       ...nextState
     };
 
-    if (selected && multiple) {
+    if (selected && Array.isArray(selected)) {
       nextState.multipleMap = buildMultipleMap(selected);
       const {
         filteredData,
@@ -734,21 +763,17 @@ class Select extends Component {
   }
 
   _getSelectedIndex(selected, data) {
-    return getSelectedIndex(selected, data, this.props.multiple);
+    return getSelectedIndex(selected, data);
   }
 
   _getResetOption() {
-    const isOptionsSelected = this.state.selected && this.state.selected.length;
-    const hasTagsResetProp = this.props.tags && this.props.tags.reset;
+    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 || !hasTagsResetProp) {
+    if (!isOptionsSelected || !reset) {
       return null;
     }
 
-    const {
-      reset
-    } = this.props.tags;
-
     const resetHandler = (item, event) => {
       this.clear(event);
       this.clearFilter();
@@ -766,7 +791,7 @@ class Select extends Component {
       separator: reset.separator,
       key: reset.label,
       rgItemType: List.ListProps.Type.CUSTOM,
-      template: /*#__PURE__*/React.createElement(Button, {
+      template: /*#__PURE__*/React.createElement(ThemedButton, {
         text: true,
         className: modules_9d0de074.button,
         "data-test": "ring-select-reset-tags-button"
@@ -807,7 +832,7 @@ class Select extends Component {
 
     const _shownData = this._prependResetOption(shownData);
 
-    let message = null;
+    let message;
 
     if (this.props.loading) {
       message = this.props.loadingMessage;
@@ -904,7 +929,7 @@ class Select extends Component {
         [modules_9d0de074.toolbar]: !!this.state.addButton
       }),
       "data-test": "ring-select-toolbar"
-    }, this.state.addButton && /*#__PURE__*/React.createElement(Button, {
+    }, this.state.addButton && /*#__PURE__*/React.createElement(ThemedButton, {
       text: true,
       delayed: delayed,
       className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
@@ -936,19 +961,18 @@ class Select extends Component {
       this.setState({
         filterValue: setValue
       });
+      return undefined;
     } else {
       return this.state.filterValue;
     }
-
-    return undefined;
   }
 
   isInputMode() {
     return isInputMode(this.props.type);
   }
 
-  _rebuildMultipleMap(selected, multiple) {
-    if (selected && multiple) {
+  _rebuildMultipleMap(selected) {
+    if (Array.isArray(selected)) {
       this.setState({
         multipleMap: buildMultipleMap(selected)
       });
@@ -956,15 +980,15 @@ class Select extends Component {
   }
 
   _selectionIsEmpty() {
-    return this.props.multiple && !this.state.selected.length || !this.state.selected;
+    return Array.isArray(this.state.selected) && !this.state.selected.length || !this.state.selected;
   }
 
   _getLabel() {
-    return this.props.label || this.props.selectedLabel || 'Select an option';
+    return this.props.label || (typeof this.props.selectedLabel === 'string' ? this.props.selectedLabel : null) || 'Select an option';
   }
 
   _getSelectedString() {
-    if (this.props.multiple) {
+    if (Array.isArray(this.state.selected)) {
       const labels = [];
 
       for (let i = 0; i < this.state.selected.length; i++) {
@@ -973,7 +997,7 @@ class Select extends Component {
 
       return labels.filter(Boolean).join(', ');
     } else {
-      return getItemLabel(this.state.selected);
+      return this.state.selected != null ? getItemLabel(this.state.selected) : null;
     }
   }
 
@@ -988,7 +1012,7 @@ class Select extends Component {
     } = this.props;
     const icons = [];
 
-    if (selected !== null && selected !== void 0 && selected.icon) {
+    if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
       icons.push( /*#__PURE__*/React.createElement("button", {
         title: "Toggle options popup",
         type: "button",
@@ -1003,7 +1027,7 @@ class Select extends Component {
     }
 
     if (clear && !disabled && !this._selectionIsEmpty()) {
-      icons.push( /*#__PURE__*/React.createElement(Button, {
+      icons.push( /*#__PURE__*/React.createElement(ThemedButton, {
         title: "Clear selection",
         "data-test": "ring-clear-select",
         className: modules_9d0de074.clearIcon,
@@ -1015,7 +1039,7 @@ class Select extends Component {
     }
 
     if (!hideArrow) {
-      icons.push( /*#__PURE__*/React.createElement(Button, {
+      icons.push( /*#__PURE__*/React.createElement(ThemedButton, {
         title: "Toggle options popup",
         className: modules_9d0de074.chevron,
         iconClassName: modules_9d0de074.chevronIcon,
@@ -1030,7 +1054,9 @@ class Select extends Component {
   }
 
   _getAvatar() {
-    return this.state.selected && (this.state.selected.avatar || this.state.selected.showGeneratedAvatar) && /*#__PURE__*/React.createElement(Avatar, {
+    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,
@@ -1053,7 +1079,7 @@ class Select extends Component {
   }
 
   renderSelect(activeItemId) {
-    var _this$_popup, _this$_popup$list;
+    var _this$_popup5, _this$_popup5$list;
 
     const dataTest = this.props['data-test'];
     const {
@@ -1085,7 +1111,7 @@ class Select extends Component {
         }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
           map: this.getShortcutsMap(),
           scope: this.shortcutsScope
-        }), /*#__PURE__*/React.createElement(Input, _extends({}, ariaProps, {
+        }), /*#__PURE__*/React.createElement(ThemedInput, _extends({}, ariaProps, {
           autoComplete: "off",
           id: this.props.id,
           onClick: this._clickHandler,
@@ -1103,7 +1129,7 @@ class Select extends Component {
           onKeyDown: this.props.onKeyDown,
           "data-test": "ring-select__focus",
           enableShortcuts: shortcutsEnabled ? Object.keys({ ...this.getShortcutsMap(),
-            ...((_this$_popup = this._popup) === null || _this$_popup === void 0 ? void 0 : (_this$_popup$list = _this$_popup.list) === null || _this$_popup$list === void 0 ? void 0 : _this$_popup$list.shortcutsMap)
+            ...((_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 ? void 0 : (_this$_popup5$list = _this$_popup5.list) === null || _this$_popup5$list === void 0 ? void 0 : _this$_popup5$list.shortcutsMap)
           }) : undefined
         })), this.props.type === Type.INPUT && iconsNode, this._renderPopup());
 
@@ -1117,7 +1143,7 @@ class Select extends Component {
           scope: this.shortcutsScope
         }), /*#__PURE__*/React.createElement("div", {
           className: modules_9d0de074.buttonContainer
-        }, /*#__PURE__*/React.createElement(Button, _extends({}, ariaProps, {
+        }, /*#__PURE__*/React.createElement(ThemedButton, _extends({}, ariaProps, {
           id: this.props.id,
           onClick: this._clickHandler,
           className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
@@ -1204,7 +1230,55 @@ class Select extends Component {
 
 }
 
-_defineProperty(Select, "propTypes", {
+_defineProperty(Select, "defaultProps", {
+  data: [],
+  filter: false,
+  multiple: false,
+  clear: false,
+  loading: false,
+  disabled: false,
+  loadingMessage: 'Loading...',
+  notFoundMessage: 'No options found',
+  type: Type.MATERIAL,
+  size: Size.M,
+  targetElement: null,
+  hideSelected: false,
+  allowAny: false,
+  hideArrow: 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: '',
+  selectedLabel: '',
+  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,
+  onChange: noop,
+  onAdd: noop,
+  onDone: noop,
+  onReset: noop,
+  tags: null,
+  ringPopupTarget: null,
+  dir: 'ltr'
+});
+
+_defineProperty(Select, "Type", Type);
+
+_defineProperty(Select, "Size", Size);
+
+_defineProperty(Select, "Theme", Theme);
+
+Select.propTypes = {
   className: PropTypes.string,
   buttonClassName: PropTypes.string,
   id: PropTypes.string,
@@ -1260,77 +1334,7 @@ _defineProperty(Select, "propTypes", {
   disableScrollToActive: PropTypes.bool,
   dir: PropTypes.oneOf(['ltr', 'rtl']),
   'data-test': PropTypes.string
-});
-
-_defineProperty(Select, "defaultProps", {
-  data: [],
-  filter: false,
-  // enable filter (not in INPUT modes)
-  multiple: false,
-  // multiple can be an object - see demo for more information
-  clear: false,
-  // enable clear button that clears the "selected" state
-  loading: false,
-  // show a loading indicator while data is loading
-  disabled: false,
-  // disable select
-  loadingMessage: 'Loading...',
-  notFoundMessage: 'No options found',
-  type: Type.MATERIAL,
-  size: Size.M,
-  targetElement: null,
-  // element to bind the popup to (select BUTTON or INPUT by default)
-  hideSelected: false,
-  // INPUT mode: clears the input after an option is selected (useful when the selection is displayed in some custom way elsewhere)
-  allowAny: false,
-  // INPUT mode: allows any value to be entered, hides the dropdown icon
-  hideArrow: false,
-  // hide dropdown arrow icon
-  maxHeight: 600,
-  // height of the options list, including the filter and the 'Add' button
-  directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT],
-  selected: null,
-  // current selection (item / array of items)
-  label: '',
-  // BUTTON or INPUT label (nothing selected)
-  selectedLabel: '',
-  // BUTTON or INPUT label (something selected)
-  inputPlaceholder: '',
-  // Placeholder for input modes
-  hint: null,
-  // hint text to display under the list
-  shortcutsEnabled: false,
-  onBeforeOpen: noop,
-  onLoadMore: noop,
-  onOpen: noop,
-  onClose: noop,
-  onFilter: noop,
-  // search string as first argument
-  onFocus: noop,
-  onBlur: noop,
-  onKeyDown: noop,
-  onSelect: noop,
-  // single + multi
-  onDeselect: noop,
-  // multi
-  onChange: noop,
-  // multi
-  onAdd: noop,
-  // search string as first argument
-  onDone: noop,
-  onReset: noop,
-  tags: null,
-  onRemoveTag: noop,
-  ringPopupTarget: null,
-  dir: 'ltr'
-});
-
-_defineProperty(Select, "Type", Type);
-
-_defineProperty(Select, "Size", Size);
-
-_defineProperty(Select, "Theme", Theme);
-
+};
 const RerenderableSelect = rerenderHOC(Select);
 
 export { RerenderableSelect, Select as default };