@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/select/select.js

@@ -0,0 +1,1336 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { Component, Fragment } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import chevronDown from '@jetbrains/icons/chevron-10px';
+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 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 Theme from '../global/theme.js';
+import memoize from '../global/memoize.js';
+import SelectPopup from './select__popup.js';
+import { A as Anchor } from '../_helpers/anchor.js';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../global/url.js';
+import '../global/dom.js';
+import '../avatar/fallback-avatar.js';
+import 'react-dom';
+import '../global/schedule-raf.js';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+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';
+import '@jetbrains/icons/remove-10px';
+import '../_helpers/checkbox.js';
+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 '../_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 '../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":"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"};
+
+/**
+ * @name Select
+ */
+
+function noop() {}
+/**
+ * @enum {number}
+ */
+
+
+const Type = {
+  BUTTON: 'BUTTON',
+  INPUT: 'INPUT',
+  CUSTOM: 'CUSTOM',
+  INLINE: 'INLINE',
+  MATERIAL: 'MATERIAL',
+  INPUT_WITHOUT_CONTROLS: 'INPUT_WITHOUT_CONTROLS'
+};
+const ICON_WIDTH = 20;
+const getStyle = memoize(iconsLength => ({
+  paddingRight: 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) {
+    return null;
+  }
+
+  return item.label.toLowerCase();
+}
+
+function doesLabelMatch(itemToCheck, fn) {
+  const lowerCaseLabel = getLowerCaseLabel(itemToCheck);
+
+  if (lowerCaseLabel == null) {
+    return true;
+  }
+
+  return fn(lowerCaseLabel);
+}
+
+function getFilterFn(filter) {
+  if (filter.fn) {
+    return filter.fn;
+  }
+
+  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 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) {
+    filterString = ''; // ignore multiple if it is exactly the selected item
+  }
+
+  const lowerCaseString = filterString.toLowerCase();
+  const filteredData = [];
+  let exactMatch = false;
+  const check = getFilterFn(props.filter);
+
+  for (let i = 0; i < data.length; i++) {
+    const item = { ...data[i]
+    };
+
+    if (check(item, lowerCaseString, data)) {
+      exactMatch = item.label === filterString;
+
+      if (props.multiple && !props.multiple.removeSelectedItems) {
+        item.checkbox = !!state.multipleMap[item.key];
+      }
+
+      if (props.multiple && props.multiple.limit) {
+        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])) {
+        filteredData.push(item);
+      }
+    }
+  }
+
+  let addButton = null;
+  const {
+    add
+  } = props;
+
+  if (add && filterString && !exactMatch || add && add.alwaysVisible) {
+    if (!(add.regexp && !add.regexp.test(filterString)) && !(add.minlength && filterString.length < +add.minlength) || add.alwaysVisible) {
+      let label;
+
+      if (add.label) {
+        label = typeof add.label === 'function' ? add.label(filterString) : add.label;
+      } else {
+        label = filterString;
+      }
+
+      addButton = {
+        prefix: add.prefix,
+        label,
+        delayed: add.hasOwnProperty('delayed') ? add.delayed : true
+      };
+    }
+  }
+
+  return {
+    filteredData,
+    addButton
+  };
+}
+
+function getSelectedIndex(selected, data, multiple) {
+  const firstSelected = multiple ? selected[0] : selected;
+
+  if (firstSelected == null) {
+    return null;
+  }
+
+  for (let i = 0; i < data.length; i++) {
+    const item = data[i];
+
+    if (item.key === undefined) {
+      continue;
+    }
+
+    if (item.key === firstSelected.key) {
+      return i;
+    }
+  }
+
+  return null;
+}
+
+const getItemLabel = _ref => {
+  let {
+    selectedLabel,
+    label
+  } = _ref;
+  return selectedLabel != null ? selectedLabel : label;
+};
+
+const getValueForFilter = (selected, type, filterValue) => selected && isInputMode(type) ? getItemLabel(selected) : filterValue;
+
+function isSameSelected(prevSelected, selected) {
+  if (!prevSelected || !selected || prevSelected.length !== selected.length) {
+    return false;
+  }
+
+  const keysMap = selected.reduce((result, item) => {
+    result[item.key] = true;
+    return result;
+  }, {});
+  return prevSelected.every(it => keysMap[it.key]);
+}
+/**
+ * @name Select
+ * @constructor
+ * @extends {Component}
+ */
+
+/**
+ * Displays a select.
+ */
+
+
+class Select extends Component {
+  constructor() {
+    var _this;
+
+    super(...arguments);
+    _this = this;
+
+    _defineProperty(this, "state", {
+      data: [],
+      shownData: [],
+      selected: this.props.multiple ? [] : null,
+      selectedIndex: null,
+      filterValue: this.props.filter && this.props.filter.value || '',
+      shortcutsEnabled: false,
+      popupShortcuts: false,
+      showPopup: false,
+      prevData: this.props.data,
+      prevSelected: null,
+      prevMultiple: this.props.multiple,
+      multipleMap: {},
+      addButton: null
+    });
+
+    _defineProperty(this, "id", getUID('select-'));
+
+    _defineProperty(this, "shortcutsScope", this.id);
+
+    _defineProperty(this, "listId", `${this.id}:list`);
+
+    _defineProperty(this, "_focusHandler", () => {
+      this.props.onFocus();
+      this.setState({
+        shortcutsEnabled: true,
+        focused: true
+      });
+    });
+
+    _defineProperty(this, "_blurHandler", () => {
+      this.props.onBlur();
+
+      if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup) {
+        window.setTimeout(() => {
+          this.setState({
+            showPopup: false
+          });
+        });
+      }
+
+      if (!this._popup.isClickingPopup) {
+        this.setState({
+          shortcutsEnabled: false,
+          focused: false
+        });
+      }
+    });
+
+    _defineProperty(this, "nodeRef", el => {
+      this.node = el;
+    });
+
+    _defineProperty(this, "_popup", null);
+
+    _defineProperty(this, "onEmptyPopupEnter", () => {
+      if (this.state.addButton) {
+        this.addHandler();
+      }
+    });
+
+    _defineProperty(this, "_onEnter", () => {
+      if (this.state.addButton && this.state.shownData.length === 0) {
+        this.addHandler();
+      }
+
+      this.props.onDone();
+
+      if (!this._popup.isVisible() && this.props.allowAny) {
+        return true;
+      }
+
+      return undefined;
+    });
+
+    _defineProperty(this, "_onEsc", event => {
+      if (!this._popup.isVisible()) {
+        return true;
+      } else if (this.props.multiple || !this.props.getInitial) {
+        return false;
+      }
+
+      const selected = {
+        key: Math.random(),
+        label: this.props.getInitial()
+      };
+      this.setState({
+        selected,
+        filterValue: this.getValueForFilter(selected)
+      }, () => {
+        this.props.onChange(selected, event);
+        this.props.onReset();
+      });
+      return undefined;
+    });
+
+    _defineProperty(this, "_inputShortcutHandler", () => {
+      if (this.state.focused && this._popup && !this._popup.isVisible()) {
+        this._clickHandler();
+      }
+    });
+
+    _defineProperty(this, "addHandler", () => {
+      const value = this.filterValue();
+
+      this._hidePopup();
+
+      this.props.onAdd(value);
+    });
+
+    _defineProperty(this, "getLowerCaseLabel", getLowerCaseLabel);
+
+    _defineProperty(this, "doesLabelMatch", doesLabelMatch);
+
+    _defineProperty(this, "_clickHandler", () => {
+      if (!this.props.disabled) {
+        if (this.state.showPopup) {
+          this._hidePopup();
+        } else {
+          this.props.onBeforeOpen();
+
+          this._showPopup();
+        }
+      }
+    });
+
+    _defineProperty(this, "_filterChangeHandler", e => {
+      this._setFilter(e.target.value, e);
+    });
+
+    _defineProperty(this, "_setFilter", function (value) {
+      let event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      if (_this.isInputMode() && !_this.state.focused) {
+        return;
+      }
+
+      if (value === _this.state.filterValue) {
+        return;
+      }
+
+      const filterValue = value.replace(/^\s+/g, '');
+
+      _this.props.onFilter(filterValue);
+
+      if (_this.props.allowAny) {
+        const fakeSelected = {
+          key: Math.random(),
+          label: filterValue
+        };
+
+        _this.setState({
+          selected: filterValue === '' ? null : fakeSelected,
+          selectedIndex: null
+        }, () => {
+          _this.props.onSelect(fakeSelected, event);
+
+          _this.props.onChange(fakeSelected, event);
+        });
+      }
+
+      !_this._popup.isVisible() && _this.props.onBeforeOpen();
+
+      _this.setState({
+        filterValue
+      }, () => {
+        _this._showPopup();
+      });
+    });
+
+    _defineProperty(this, "_redrawPopup", () => {
+      if (this.props.multiple) {
+        setTimeout(() => {
+          //setTimeout solves events order and bubbling issue
+          this.isInputMode() && this.clearFilter();
+
+          this._showPopup();
+        }, 0);
+      }
+    });
+
+    _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 isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
+
+      if (isSelectItemEvent) {
+        event.preventDefault();
+      }
+
+      if (!isItem(selected) && !isCustomItem(selected) || selected.disabled || selected.isResetItem) {
+        return;
+      }
+
+      if (!_this.props.multiple) {
+        _this._hidePopup(isSelectItemEvent);
+
+        _this.setState({
+          selected,
+          selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
+        }, () => {
+          const 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 {
+        const {
+          tryKeepOpen
+        } = opts;
+
+        if (!tryKeepOpen) {
+          _this._hidePopup(isSelectItemEvent);
+        }
+
+        if (selected.key == null) {
+          throw new Error('Multiple selection requires each item to have the "key" property');
+        }
+
+        _this.setState(prevState => {
+          const currentSelection = prevState.selected;
+          let nextSelection;
+
+          if (!prevState.multipleMap[selected.key]) {
+            nextSelection = currentSelection.concat(selected);
+            _this.props.onSelect && _this.props.onSelect(selected, event);
+          } else {
+            nextSelection = currentSelection.filter(item => item.key !== selected.key);
+            _this.props.onDeselect && _this.props.onDeselect(selected);
+          }
+
+          _this.props.onChange(nextSelection, event);
+
+          const nextState = {
+            selected: nextSelection,
+            selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
+          };
+
+          if (_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
+            });
+          }
+
+          if (!prevState.multipleMap[selected.key]) {
+            nextState.multipleMap = { ...prevState.multipleMap,
+              [selected.key]: true
+            };
+          } else {
+            const {
+              [selected.key]: _,
+              ...restMultipleMap
+            } = prevState.multipleMap;
+            nextState.multipleMap = restMultipleMap;
+          }
+
+          return nextState;
+        }, () => {
+          if (tryKeepOpen) {
+            _this._redrawPopup();
+          }
+        });
+      }
+    });
+
+    _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);
+
+      _this.setState(prevState => {
+        const currentSelection = prevState.selected;
+        let nextSelection;
+
+        if (isSelectAll) {
+          nextSelection = _this.props.data.filter(item => (isItem(item) || isCustomItem(item)) && !item.disabled);
+          nextSelection.filter(item => !_this.props.selected.find(selectedItem => item.key === selectedItem.key)).forEach(item => {
+            _this.props.onSelect && _this.props.onSelect(item);
+          });
+        } else {
+          nextSelection = [];
+          currentSelection.forEach(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(item => ({ ...item,
+            checkbox: isSelectAll
+          })),
+          multipleMap: isSelectAll ? buildMultipleMap(_this.props.data.filter(item => !item.disabled)) : {}
+        };
+      }, _this._redrawPopup);
+    });
+
+    _defineProperty(this, "_onCloseAttempt", (event, isEsc) => {
+      if (this.isInputMode()) {
+        if (!this.props.allowAny) {
+          if (this.props.hideSelected || !this.state.selected || this.props.multiple) {
+            this.clearFilter();
+          } else if (this.state.selected) {
+            this.filterValue(getItemLabel(this.state.selected));
+          }
+        }
+      }
+
+      const isTagRemoved = this.props.tags && event && event.target && event.target.matches('[data-test="ring-tag-remove"]');
+
+      if (!isTagRemoved) {
+        this._hidePopup(isEsc);
+      }
+    });
+
+    _defineProperty(this, "clearFilter", e => {
+      this._setFilter('', e);
+    });
+
+    _defineProperty(this, "clear", event => {
+      if (event) {
+        event.stopPropagation();
+      }
+
+      const empty = Select._getEmptyValue(this.props.multiple);
+
+      this.setState({
+        selected: empty,
+        selectedIndex: null,
+        filterValue: ''
+      }, () => {
+        if (this.props.onChange) {
+          this.props.onChange(empty, event);
+        }
+      });
+      return false;
+    });
+
+    _defineProperty(this, "popupRef", el => {
+      this._popup = el;
+    });
+
+    _defineProperty(this, "buttonRef", el => {
+      this.button = el;
+    });
+
+    _defineProperty(this, "filterRef", el => {
+      this.filter = el;
+    });
+  }
+
+  static _getEmptyValue(multiple) {
+    return multiple ? [] : null;
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      multiple,
+      data,
+      type
+    } = nextProps;
+    const {
+      prevSelected,
+      prevData,
+      prevMultiple,
+      filterValue
+    } = prevState;
+    const nextState = {
+      prevData: data,
+      prevSelected: nextProps.selected,
+      prevMultiple: multiple
+    };
+
+    if ('data' in nextProps && data !== prevData) {
+      const {
+        filteredData,
+        addButton
+      } = getListItems(nextProps, prevState, filterValue, data);
+      Object.assign(nextState, {
+        shownData: filteredData,
+        addButton
+      });
+
+      if (prevState.selected) {
+        Object.assign(nextState, {
+          selectedIndex: getSelectedIndex(prevState.selected, data, multiple),
+          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);
+      Object.assign(nextState, {
+        selected,
+        prevFilterValue: getValueForFilter(selected, type, filterValue)
+      });
+
+      if (!multiple || !isSameSelected(prevSelected, selected)) {
+        Object.assign(nextState, {
+          selectedIndex
+        });
+      }
+    }
+
+    if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
+      nextState.selected = Select._getEmptyValue(multiple);
+    }
+
+    const {
+      selected
+    } = { ...prevState,
+      ...nextState
+    };
+
+    if (selected && multiple) {
+      nextState.multipleMap = buildMultipleMap(selected);
+      const {
+        filteredData,
+        addButton
+      } = getListItems(nextProps, nextState, filterValue, data);
+      Object.assign(nextState, {
+        shownData: filteredData,
+        addButton
+      });
+    }
+
+    return nextState;
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      showPopup,
+      selected
+    } = this.state;
+    const {
+      onClose,
+      onOpen,
+      onChange,
+      multiple
+    } = this.props;
+
+    if (prevState.showPopup && !showPopup) {
+      onClose(selected);
+    } else if (!prevState.showPopup && showPopup) {
+      onOpen();
+    }
+
+    if (multiple !== prevProps.multiple && !deepEqual(multiple, prevProps.multiple)) {
+      onChange(selected);
+    }
+  }
+
+  getValueForFilter(selected) {
+    return getValueForFilter(selected, this.props.type, this.state.filterValue);
+  }
+
+  _getSelectedIndex(selected, data) {
+    return getSelectedIndex(selected, data, this.props.multiple);
+  }
+
+  _getResetOption() {
+    const isOptionsSelected = this.state.selected && this.state.selected.length;
+    const hasTagsResetProp = this.props.tags && this.props.tags.reset;
+
+    if (!isOptionsSelected || !hasTagsResetProp) {
+      return null;
+    }
+
+    const {
+      reset
+    } = this.props.tags;
+
+    const resetHandler = (item, event) => {
+      this.clear(event);
+      this.clearFilter();
+      this.props.onFilter('');
+      this.setState(prevState => ({
+        shownData: prevState.shownData.slice(reset.separator ? 2 : 1),
+        multipleMap: {}
+      }));
+
+      this._redrawPopup();
+    };
+
+    return {
+      isResetItem: true,
+      separator: reset.separator,
+      key: reset.label,
+      rgItemType: List.ListProps.Type.CUSTOM,
+      template: /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        className: modules_9d0de074.button,
+        "data-test": "ring-select-reset-tags-button"
+      }, reset.label),
+      glyph: reset.glyph,
+      onClick: resetHandler
+    };
+  }
+
+  _prependResetOption(shownData) {
+    const resetOption = this._getResetOption();
+
+    const margin = {
+      rgItemType: List.ListProps.Type.MARGIN
+    };
+
+    if (resetOption) {
+      const resetItems = [margin, resetOption, margin];
+
+      if (resetOption.separator) {
+        resetItems.push({
+          rgItemType: List.ListProps.Type.SEPARATOR
+        });
+      }
+
+      return resetItems.concat(shownData);
+    }
+
+    return shownData;
+  }
+
+  _renderPopup() {
+    const anchorElement = this.props.targetElement || this.node;
+    const {
+      showPopup,
+      shownData
+    } = this.state;
+
+    const _shownData = this._prependResetOption(shownData);
+
+    let message = null;
+
+    if (this.props.loading) {
+      message = this.props.loadingMessage;
+    } else if (!shownData.length) {
+      message = this.props.notFoundMessage;
+    }
+
+    return /*#__PURE__*/React.createElement(SelectPopup, {
+      data: _shownData,
+      message: message,
+      toolbar: showPopup && this.getToolbar(),
+      loading: this.props.loading,
+      activeIndex: this.state.selectedIndex,
+      hidden: !showPopup,
+      ref: this.popupRef,
+      maxHeight: this.props.maxHeight,
+      minWidth: this.props.minWidth,
+      directions: this.props.directions,
+      className: this.props.popupClassName,
+      style: this.props.popupStyle,
+      top: this.props.top,
+      left: this.props.left,
+      filter: this.isInputMode() ? false : this.props.filter // disable popup filter in INPUT mode
+      ,
+      multiple: this.props.multiple,
+      filterValue: this.state.filterValue,
+      anchorElement: anchorElement,
+      onCloseAttempt: this._onCloseAttempt,
+      onSelect: this._listSelectHandler,
+      onSelectAll: this._listSelectAllHandler,
+      onFilter: this._filterChangeHandler,
+      onClear: this.clearFilter,
+      onLoadMore: this.props.onLoadMore,
+      isInputMode: this.isInputMode(),
+      selected: this.state.selected,
+      tags: this.props.tags,
+      compact: this.props.compact,
+      renderOptimization: this.props.renderOptimization,
+      ringPopupTarget: this.props.ringPopupTarget,
+      disableMoveOverflow: this.props.disableMoveOverflow,
+      disableScrollToActive: this.props.disableScrollToActive,
+      dir: this.props.dir,
+      onEmptyPopupEnter: this.onEmptyPopupEnter,
+      listId: this.listId
+    });
+  }
+
+  _showPopup() {
+    if (!this.node) {
+      return;
+    }
+
+    const shownData = this.getListItems(this.filterValue());
+    this.setState({
+      showPopup: !!shownData.length || !this.props.allowAny,
+      shownData
+    });
+  }
+
+  _hidePopup(tryFocusAnchor) {
+    if (this.node && this.state.showPopup) {
+      this.setState({
+        showPopup: false,
+        filterValue: ''
+      });
+
+      if (tryFocusAnchor) {
+        const restoreFocusNode = this.props.targetElement || this.node.querySelector('[data-test~=ring-select__focus]');
+
+        if (restoreFocusNode) {
+          restoreFocusNode.focus();
+        }
+      }
+    }
+  }
+
+  getToolbar() {
+    const {
+      hint
+    } = this.props;
+    const {
+      prefix,
+      label,
+      delayed
+    } = this.state.addButton || {};
+    const isToolbarHasElements = this.state.addButton || hint;
+
+    if (!isToolbarHasElements) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames({
+        [modules_9d0de074.toolbar]: !!this.state.addButton
+      }),
+      "data-test": "ring-select-toolbar"
+    }, 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 ? `${prefix} ${label}` : label), hint && /*#__PURE__*/React.createElement(List.ListHint, {
+      label: hint,
+      "data-test": "ring-select-toolbar-hint"
+    }));
+  }
+
+  getFilterFn() {
+    return getFilterFn(this.props.filter);
+  }
+
+  getListItems(rawFilterString, data) {
+    const {
+      filteredData,
+      addButton
+    } = getListItems(this.props, this.state, rawFilterString, data);
+    this.setState({
+      addButton
+    });
+    return filteredData;
+  }
+
+  filterValue(setValue) {
+    if (typeof setValue === 'string' || typeof setValue === 'number') {
+      this.setState({
+        filterValue: setValue
+      });
+    } else {
+      return this.state.filterValue;
+    }
+
+    return undefined;
+  }
+
+  isInputMode() {
+    return isInputMode(this.props.type);
+  }
+
+  _rebuildMultipleMap(selected, multiple) {
+    if (selected && multiple) {
+      this.setState({
+        multipleMap: buildMultipleMap(selected)
+      });
+    }
+  }
+
+  _selectionIsEmpty() {
+    return this.props.multiple && !this.state.selected.length || !this.state.selected;
+  }
+
+  _getLabel() {
+    return this.props.label || this.props.selectedLabel || 'Select an option';
+  }
+
+  _getSelectedString() {
+    if (this.props.multiple) {
+      const labels = [];
+
+      for (let i = 0; i < this.state.selected.length; i++) {
+        labels.push(getItemLabel(this.state.selected[i]));
+      }
+
+      return labels.filter(Boolean).join(', ');
+    } else {
+      return getItemLabel(this.state.selected);
+    }
+  }
+
+  _getIcons() {
+    const {
+      selected
+    } = this.state;
+    const {
+      disabled,
+      clear,
+      hideArrow
+    } = this.props;
+    const icons = [];
+
+    if (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(${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,
+        icon: closeIcon
+      }));
+    }
+
+    if (!hideArrow) {
+      icons.push( /*#__PURE__*/React.createElement(Button, {
+        title: "Toggle options popup",
+        className: modules_9d0de074.chevron,
+        iconClassName: modules_9d0de074.chevronIcon,
+        icon: chevronDown,
+        key: "hide",
+        disabled: this.props.disabled,
+        onClick: this._clickHandler
+      }));
+    }
+
+    return icons;
+  }
+
+  _getAvatar() {
+    return this.state.selected && (this.state.selected.avatar || this.state.selected.showGeneratedAvatar) && /*#__PURE__*/React.createElement(Avatar, {
+      className: modules_9d0de074.avatar,
+      url: this.state.selected.avatar,
+      username: this.state.selected.username,
+      size: Size$1.Size20
+    });
+  }
+
+  getShortcutsMap() {
+    return {
+      enter: this._onEnter,
+      esc: this._onEsc,
+      up: this._inputShortcutHandler,
+      down: this._inputShortcutHandler,
+      right: noop,
+      left: noop,
+      'shift+up': noop,
+      'shift+down': noop,
+      space: noop
+    };
+  }
+
+  renderSelect(activeItemId) {
+    var _this$_popup, _this$_popup$list;
+
+    const dataTest = this.props['data-test'];
+    const {
+      shortcutsEnabled
+    } = this.state;
+    const classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, {
+      [modules_9d0de074[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
+      [modules_9d0de074.disabled]: this.props.disabled
+    });
+
+    const icons = this._getIcons();
+
+    const style = getStyle(icons.length);
+    const iconsNode = /*#__PURE__*/React.createElement("span", {
+      className: modules_9d0de074.icons
+    }, icons);
+    const ariaProps = this.state.showPopup ? {
+      'aria-owns': this.listId,
+      'aria-activedescendant': activeItemId
+    } : {};
+
+    switch (this.props.type) {
+      case Type.INPUT_WITHOUT_CONTROLS:
+      case Type.INPUT:
+        return /*#__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, {
+          autoComplete: "off",
+          id: this.props.id,
+          onClick: this._clickHandler,
+          inputRef: this.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,
+          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({ ...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());
+
+      case Type.BUTTON:
+        return /*#__PURE__*/React.createElement("div", {
+          ref: this.nodeRef,
+          className: classNames(classes, modules_9d0de074.buttonMode),
+          "data-test": joinDataTestAttributes('ring-select', dataTest)
+        }, 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, {
+          id: this.props.id,
+          onClick: this._clickHandler,
+          className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
+            [modules_9d0de074.buttonValueOpen]: this.state.showPopup
+          }),
+          disabled: this.props.disabled,
+          style: style,
+          "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,
+          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, {
+          id: this.props.id,
+          onClick: this._clickHandler,
+          "data-test": "ring-select__focus",
+          disabled: this.props.disabled,
+          active: this.state.showPopup
+        }), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), 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: { ...ariaProps,
+              id: this.props.id,
+              onClick: this._clickHandler,
+              disabled: this.props.disabled,
+              children: this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString(),
+              '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());
+    }
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => this.renderSelect(activeItemId)));
+  }
+
+}
+
+_defineProperty(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]),
+  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,
+  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,
+  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,
+  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 };