@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/dist/select/select.js

@@ -2,24 +2,26 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
 import React, { Component, Fragment } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import chevronDown from '@jetbrains/icons/chevron-10px';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import closeIcon from '@jetbrains/icons/close';
 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 Input, { Size } from '../input/input.js';
+import { Size, Input } from '../input/input.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
-import Button from '../button/button.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 Theme from '../global/theme.js';
 import memoize from '../global/memoize.js';
+import { isArray } from '../global/typescript-utils.js';
+import { ControlsHeightContext } from '../global/controls-height.js';
 import SelectPopup from './select__popup.js';
 import { A as Anchor } from '../_helpers/anchor.js';
+import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
@@ -62,15 +64,12 @@ 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';
-import '../_helpers/inject-styles.js';
-import '../global/conic-gradient.js';
-import 'conic-gradient';
-import '../global/supports-css.js';
-import '../global/inject-styles.js';
-import '../global/radial-gradient-mask.js';
+import '../_helpers/loader-inline.js';
 import '../shortcuts/shortcuts-hoc.js';
 import '../tags-list/tags-list.js';
 import '../tag/tag.js';
@@ -78,7 +77,7 @@ import '../caret/caret.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
 
-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"};
+var modules_9d0de074 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","select":"select_rui_bf62","value":"value_rui_bf62 ellipsis_rui_750f font_rui_750f","icons":"icons_rui_bf62","toolbar":"toolbar_rui_bf62","button":"button_rui_bf62","buttonSpaced":"buttonSpaced_rui_bf62","inputMode":"inputMode_rui_bf62","selectedIcon":"selectedIcon_rui_bf62 resetButton_rui_750f","clearIcon":"clearIcon_rui_bf62","sizeS":"sizeS_rui_bf62","sizeM":"sizeM_rui_bf62","sizeL":"sizeL_rui_bf62","sizeFULL":"sizeFULL_rui_bf62","sizeAUTO":"sizeAUTO_rui_bf62","buttonMode":"buttonMode_rui_bf62","open":"open_rui_bf62","buttonContainer":"buttonContainer_rui_bf62","buttonValue":"buttonValue_rui_bf62 ellipsis_rui_750f","buttonValueOpen":"buttonValueOpen_rui_bf62","label":"label_rui_bf62","disabled":"disabled_rui_bf62","avatar":"avatar_rui_bf62","popup":"popup_rui_bf62","chevron":"chevron_rui_bf62","chevronIcon":"chevronIcon_rui_bf62","heightS":"heightS_rui_bf62"};
 
 /**
  * @name Select
@@ -90,23 +89,26 @@ 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["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
+})(Type || (Type = {}));
+
+const ICONS_OFFSET = 12;
 const ICON_WIDTH = 20;
 const getStyle = memoize(iconsLength => ({
-  paddingRight: iconsLength * ICON_WIDTH
+  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) || 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 +126,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) && !props.allowAny && state.selected && !Array.isArray(state.selected) && filterString === state.selected.label) {
     filterString = ''; // ignore multiple if it is exactly the selected item
   }
 
@@ -158,18 +164,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 +192,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 +205,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 +216,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 +243,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 +287,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,
@@ -287,8 +304,8 @@ class Select extends Component {
 
     _defineProperty(this, "listId", `${this.id}:list`);
 
-    _defineProperty(this, "_focusHandler", () => {
-      this.props.onFocus();
+    _defineProperty(this, "_focusHandler", e => {
+      this.props.onFocus(e);
       this.setState({
         shortcutsEnabled: true,
         focused: true
@@ -296,6 +313,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 +325,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 +333,8 @@ class Select extends Component {
       }
     });
 
+    _defineProperty(this, "node", void 0);
+
     _defineProperty(this, "nodeRef", el => {
       this.node = el;
     });
@@ -327,13 +348,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 +364,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 +392,10 @@ class Select extends Component {
       }
     });
 
+    _defineProperty(this, "popupRef", el => {
+      this._popup = el;
+    });
+
     _defineProperty(this, "addHandler", () => {
       const value = this.filterValue();
 
@@ -402,53 +431,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();
@@ -458,8 +482,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) {
@@ -519,7 +546,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
             });
@@ -537,7 +564,9 @@ class Select extends Component {
             nextState.multipleMap = restMultipleMap;
           }
 
-          return nextState;
+          return { ...prevState,
+            ...nextState
+          };
         }, () => {
           if (tryKeepOpen) {
             _this._redrawPopup();
@@ -548,8 +577,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;
@@ -586,13 +617,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);
@@ -608,8 +639,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,
@@ -622,23 +652,13 @@ class Select extends Component {
       return false;
     });
 
-    _defineProperty(this, "popupRef", el => {
-      this._popup = el;
-    });
-
-    _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,
@@ -669,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
         });
@@ -692,7 +711,7 @@ class Select extends Component {
     }
 
     if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
-      nextState.selected = Select._getEmptyValue(multiple);
+      nextState.selected = multiple ? [] : null;
     }
 
     const {
@@ -701,7 +720,7 @@ class Select extends Component {
       ...nextState
     };
 
-    if (selected && multiple) {
+    if (selected && Array.isArray(selected)) {
       nextState.multipleMap = buildMultipleMap(selected);
       const {
         filteredData,
@@ -744,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();
@@ -817,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;
@@ -879,10 +894,10 @@ class Select extends Component {
 
   _hidePopup(tryFocusAnchor) {
     if (this.node && this.state.showPopup) {
-      this.setState({
+      this.setState(prevState => ({
         showPopup: false,
-        filterValue: ''
-      });
+        filterValue: this.props.allowAny ? prevState.filterValue : ''
+      }));
 
       if (tryFocusAnchor) {
         const restoreFocusNode = this.props.targetElement || this.node.querySelector('[data-test~=ring-select__focus]');
@@ -946,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)
       });
@@ -966,15 +980,17 @@ 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';
+    var _ref2, _this$props$label;
+
+    return (_ref2 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref2 !== void 0 ? _ref2 : '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++) {
@@ -983,7 +999,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;
     }
   }
 
@@ -998,7 +1014,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",
@@ -1029,7 +1045,7 @@ class Select extends Component {
         title: "Toggle options popup",
         className: modules_9d0de074.chevron,
         iconClassName: modules_9d0de074.chevronIcon,
-        icon: chevronDown,
+        icon: chevronDownIcon,
         key: "hide",
         disabled: this.props.disabled,
         onClick: this._clickHandler
@@ -1040,7 +1056,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,
@@ -1063,13 +1081,13 @@ 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 {
       shortcutsEnabled
     } = this.state;
-    const classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, {
+    const classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, modules_9d0de074[`height${this.props.height || this.context}`], {
       [modules_9d0de074[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
       [modules_9d0de074.disabled]: this.props.disabled
     });
@@ -1096,6 +1114,7 @@ class Select extends Component {
           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,
@@ -1113,9 +1132,10 @@ 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)
-          }) : undefined
-        })), this.props.type === Type.INPUT && iconsNode, this._renderPopup());
+            ...((_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,
+          afterInput: this.props.type === Type.INPUT && iconsNode
+        })), this._renderPopup());
 
       case Type.BUTTON:
         return /*#__PURE__*/React.createElement("div", {
@@ -1128,6 +1148,7 @@ class Select extends Component {
         }), /*#__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, {
@@ -1138,31 +1159,6 @@ class Select extends Component {
           "data-test": "ring-select__button ring-select__focus"
         }), this._getAvatar(), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), iconsNode), this._renderPopup());
 
-      case Type.MATERIAL:
-        return /*#__PURE__*/React.createElement("div", {
-          ref: this.nodeRef,
-          className: classNames(classes, modules_9d0de074.materialMode),
-          "data-test": joinDataTestAttributes('ring-select', dataTest)
-        }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
-          map: this.getShortcutsMap(),
-          scope: this.shortcutsScope
-        }), !this._selectionIsEmpty() && this.props.selectedLabel && /*#__PURE__*/React.createElement("span", {
-          className: modules_9d0de074.selectedLabel
-        }, this.props.selectedLabel), /*#__PURE__*/React.createElement("button", _extends({}, ariaProps, {
-          id: this.props.id,
-          onClick: this._clickHandler,
-          type: "button",
-          disabled: this.props.disabled,
-          className: classNames(this.props.buttonClassName, modules_9d0de074.value, {
-            [modules_9d0de074.open]: this.state.showPopup,
-            [modules_9d0de074.label]: this._selectionIsEmpty()
-          }),
-          "aria-label": this._getLabel(),
-          style: style,
-          "data-test": "ring-select__focus",
-          ref: this.buttonRef
-        }), this._getAvatar(), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), iconsNode, this._renderPopup());
-
       case Type.INLINE:
         return /*#__PURE__*/React.createElement("div", {
           className: classes,
@@ -1214,7 +1210,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.BUTTON,
+  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: 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,
+  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,
@@ -1264,83 +1308,12 @@ _defineProperty(Select, "propTypes", {
   hideArrow: PropTypes.bool,
   compact: PropTypes.bool,
   size: PropTypes.oneOf(Object.values(Size)),
-  theme: PropTypes.string,
   customAnchor: PropTypes.func,
   disableMoveOverflow: PropTypes.bool,
   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 };