@jetbrains/ring-ui-built 7.0.65 → 7.0.70

package/components/select/select.js

@@ -1,15 +1,12 @@
-import { _ as _defineProperty, b as _objectSpread2, a as _objectWithoutProperties, d as _toPropertyKey } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/es.string.trim.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Component, Fragment } from 'react';
 import classNames from 'classnames';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import closeIcon from '@jetbrains/icons/close-12px';
 import { dequal } from 'dequal';
-import '../dropdown/dropdown.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+import { isArray } from '../global/typescript-utils.js';
+import { A as Anchor } from '../_helpers/anchor.js';
 import Avatar from '../avatar/avatar.js';
 import Popup from '../popup/popup.js';
 import List, { ActiveItemContext } from '../list/list.js';
@@ -17,26 +14,17 @@ import { S as Size, I as Input, i as inputStyles } from '../_helpers/input.js';
 import { ControlLabel } from '../control-label/control-label.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import { Button } from '../button/button.js';
-import joinDataTestAttributes from '../global/data-tests.js';
 import getUID from '../global/get-uid.js';
 import rerenderHOC from '../global/rerender-hoc.js';
 import fuzzyHighlight from '../global/fuzzy-highlight.js';
 import memoize from '../global/memoize.js';
 import { I18nContext } from '../i18n/i18n-context.js';
 import { createComposedRef } from '../global/compose-refs.js';
-import { isArray } from '../global/typescript-utils.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import SelectPopup from './select-popup.js';
 import { ControlsHeight } from '../global/configuration.js';
 import { Size as Size$1 } from '../avatar/avatar-size.js';
-import { A as Anchor } from '../_helpers/anchor.js';
-import '@jetbrains/icons/chevron-12px-down';
 import 'util-deprecate';
-import '../icon/icon.js';
-import '../icon/icon.constants.js';
-import '../_helpers/icon-svg.js';
-import '../link/clickable-link.js';
-import '../_helpers/button.classes.js';
 import '../global/url.js';
 import '../global/dom.js';
 import '../_helpers/avatar-info.js';
@@ -45,7 +33,6 @@ import 'react-dom';
 import '../global/schedule-raf.js';
 import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
-import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../popup/position-css.js';
@@ -53,7 +40,6 @@ import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
-import 'core-js/modules/es.symbol.description.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
@@ -64,8 +50,12 @@ import '../list/list-item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
+import '../icon/icon.js';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
 import '../control-help/control-help.js';
 import '../link/link.js';
+import '../link/clickable-link.js';
 import '../_helpers/link.js';
 import '../_helpers/list.js';
 import '../list/consts.js';
@@ -75,6 +65,8 @@ import '../global/get-event-key.js';
 import '../list/list-title.js';
 import '../list/list-separator.js';
 import '../list/list-hint.js';
+import '@jetbrains/icons/chevron-12px-down';
+import '../_helpers/button.classes.js';
 import '../i18n/i18n.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';
@@ -139,8 +131,7 @@ function buildMultipleMap(selected) {
   }, {});
 }
 // eslint-disable-next-line complexity
-function getListItems(props, state, rawFilterString) {
-  let data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : props.data;
+function getListItems(props, state, rawFilterString, data = props.data) {
   let filterString = rawFilterString.trim();
   if (isInputMode(props.type) && !props.allowAny && state.selected && !Array.isArray(state.selected) && filterString === state.selected.label) {
     filterString = ''; // ignore multiple if it is exactly the selected item
@@ -150,19 +141,19 @@ function getListItems(props, state, rawFilterString) {
   let exactMatch = false;
   const check = getFilterFn(props.filter);
   for (let i = 0; i < data.length; i++) {
-    const item = _objectSpread2({}, data[i]);
+    const item = {
+      ...data[i]
+    };
     if (check(item, lowerCaseString, data)) {
-      var _state$multipleMap2;
       exactMatch = item.label === filterString;
       if (props.multiple && !(typeof props.multiple === 'object' && props.multiple.removeSelectedItems)) {
-        var _state$multipleMap;
-        item.checkbox = !!((_state$multipleMap = state.multipleMap) !== null && _state$multipleMap !== void 0 && _state$multipleMap[item.key]);
+        item.checkbox = !!state.multipleMap?.[item.key];
       }
       if (props.multiple && typeof props.multiple === 'object' && props.multiple.limit && Array.isArray(state.selected)) {
         item.disabled = props.multiple.limit === state.selected.length && !state.selected.find(selectedItem => selectedItem.key === item.key);
       }
       // Ignore item if it's multiple and is already selected
-      if (!(props.multiple && typeof props.multiple === 'object' && props.multiple.removeSelectedItems && (_state$multipleMap2 = state.multipleMap) !== null && _state$multipleMap2 !== void 0 && _state$multipleMap2[item.key])) {
+      if (!(props.multiple && typeof props.multiple === 'object' && props.multiple.removeSelectedItems && state.multipleMap?.[item.key])) {
         filteredData.push(item);
       }
     }
@@ -192,11 +183,10 @@ function getListItems(props, state, rawFilterString) {
     addButton
   };
 }
-const getItemLabel = _ref => {
-  let {
-    selectedLabel,
-    label
-  } = _ref;
+const getItemLabel = ({
+  selectedLabel,
+  label
+}) => {
   if (selectedLabel !== null && selectedLabel !== undefined) {
     return selectedLabel;
   }
@@ -212,360 +202,71 @@ const getValueForFilter = (selected, type, filterValue) => selected && !isArray(
  * Displays a select.
  */
 class Select extends Component {
-  constructor() {
-    var _this;
-    super(...arguments);
-    _this = this;
-    _defineProperty(this, "state", {
-      data: [],
-      shownData: [],
-      selected: this.props.multiple ? [] : null,
-      lastInteractedKey: null,
-      filterValue: this.props.filter && typeof this.props.filter === 'object' && this.props.filter.value || '',
-      shortcutsEnabled: false,
-      popupShortcuts: false,
-      showPopup: this.props.showPopup,
-      prevData: [],
-      prevSelected: null,
-      prevMultiple: this.props.multiple,
-      multipleMap: {},
-      addButton: null
-    });
-    _defineProperty(this, "id", getUID('select-'));
-    _defineProperty(this, "shortcutsScope", this.id);
-    _defineProperty(this, "listId", "".concat(this.id, ":list"));
-    _defineProperty(this, "_focusHandler", e => {
-      this.props.onFocus(e);
-      this.setState({
-        shortcutsEnabled: true,
-        focused: true
-      });
-    });
-    _defineProperty(this, "isClickingSelect", false);
-    _defineProperty(this, "mouseDownHandler", () => {
-      this.isClickingSelect = true;
-    });
-    _defineProperty(this, "mouseUpHandler", () => {
-      this.isClickingSelect = false;
-    });
-    _defineProperty(this, "_blurHandler", () => {
-      var _this$_popup;
-      this.props.onBlur();
-      if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup && !this.isClickingSelect) {
-        window.setTimeout(() => {
-          this.setState({
-            showPopup: false
-          });
-        });
-      }
-      if (!((_this$_popup = this._popup) !== null && _this$_popup !== void 0 && _this$_popup.isClickingPopup)) {
-        this.setState({
-          shortcutsEnabled: false,
-          focused: false
-        });
-      }
-    });
-    _defineProperty(this, "node", void 0);
-    _defineProperty(this, "nodeRef", el => {
-      this.node = el;
-    });
-    _defineProperty(this, "_popup", null);
-    _defineProperty(this, "onEmptyPopupEnter", () => {
-      if (this.state.addButton) {
-        this.addHandler();
-      }
-    });
-    _defineProperty(this, "focus", () => {
-      var _this$node;
-      const focusableSelectExists = (_this$node = this.node) === null || _this$node === void 0 ? void 0 : _this$node.querySelector('[data-test~=ring-select__focus]');
-      const restoreFocusNode = this.props.targetElement || focusableSelectExists;
-      restoreFocusNode === null || restoreFocusNode === void 0 || restoreFocusNode.focus();
-    });
-    _defineProperty(this, "_onEnter", () => {
-      var _this$_popup2;
-      if (this.state.addButton && this.state.shownData.length === 0) {
-        this.addHandler();
-      }
-      this.props.onDone();
-      if (!((_this$_popup2 = this._popup) !== null && _this$_popup2 !== void 0 && _this$_popup2.isVisible()) && this.props.allowAny) {
-        return true;
-      }
-      return undefined;
-    });
-    _defineProperty(this, "_onEsc", event => {
-      var _this$_popup3;
-      if (!((_this$_popup3 = this._popup) !== null && _this$_popup3 !== void 0 && _this$_popup3.isVisible())) {
-        return true;
-      }
-      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, "popupRef", el => {
-      this._popup = el;
-    });
-    _defineProperty(this, "_showPopup", () => {
-      if (!this.node) {
-        return;
-      }
-      const shownData = this.getListItems(this.filterValue());
-      this.setState({
-        showPopup: true,
-        shownData
-      });
-    });
-    _defineProperty(this, "_hidePopup", tryFocusAnchor => {
-      if (this.node && this.state.showPopup) {
-        this.setState(prevState => ({
-          showPopup: false,
-          filterValue: this.props.allowAny ? prevState.filterValue : '',
-          lastInteractedKey: null
-        }));
-        if (tryFocusAnchor) {
-          this.focus();
-        }
-      }
-    });
-    _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, "_openPopupIfClosed", () => {
-      if (this.props.disabled || this.state.showPopup) {
-        return;
-      }
-      this.props.onBeforeOpen();
-      this._showPopup();
-    });
-    _defineProperty(this, "_filterChangeHandler", e => {
-      this._setFilter(e.currentTarget.value, e);
-    });
-    _defineProperty(this, "_setFilter", (value, event) => {
-      var _this$_popup4;
-      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
-        }, () => {
-          this.props.onSelect(fakeSelected, event);
-          this.props.onChange(fakeSelected, event);
-        });
-      }
-      if (!((_this$_popup4 = this._popup) !== null && _this$_popup4 !== void 0 && _this$_popup4.isVisible())) {
-        this.props.onBeforeOpen();
-      }
-      this.setState({
-        filterValue
-      }, () => {
-        this._showPopup();
-      });
-    });
-    _defineProperty(this, "_redrawPopup", () => {
-      if (this.props.multiple) {
-        setTimeout(() => {
-          //setTimeout solves events order and bubbling issue
-          if (this.isInputMode()) {
-            this.clearFilter();
-          }
-          this._showPopup();
-        }, 0);
-      }
-    });
-    _defineProperty(this, "_listSelectHandler", function (selected, event) {
-      var _selected$key, _this$props$tryKeepOp;
-      let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      const isItem = item => List.isItemType(List.ListProps.Type.ITEM, item);
-      const isCustomItem = item => List.isItemType(List.ListProps.Type.CUSTOM, item);
-      const isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
-      if (isSelectItemEvent) {
-        event.preventDefault();
-      }
-      if (!isItem(selected) && !isCustomItem(selected) || selected.disabled || selected.isResetItem) {
-        return;
-      }
-      const lastInteractedKey = (_selected$key = selected === null || selected === void 0 ? void 0 : selected.key) !== null && _selected$key !== void 0 ? _selected$key : null;
-      const tryKeepOpen = (_this$props$tryKeepOp = _this.props.tryKeepOpen) !== null && _this$props$tryKeepOp !== void 0 ? _this$props$tryKeepOp : opts.tryKeepOpen;
-      if (!_this.props.multiple) {
-        var _selected$key2;
-        if (!tryKeepOpen) {
-          _this._hidePopup(isSelectItemEvent);
-        }
-        _this.setState({
-          selected,
-          lastInteractedKey: (_selected$key2 = selected === null || selected === void 0 ? void 0 : selected.key) !== null && _selected$key2 !== void 0 ? _selected$key2 : null
-        }, () => {
-          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 {
-        if (!tryKeepOpen) {
-          _this._hidePopup(isSelectItemEvent);
-        }
-        if (selected.key === null || selected.key === undefined) {
-          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);
-          } else {
-            nextSelection = currentSelection.filter(item => item.key !== selected.key);
-          }
-          const nextState = {
-            filterValue: '',
-            selected: nextSelection,
-            lastInteractedKey: tryKeepOpen ? lastInteractedKey : null
-          };
-          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 : _objectSpread2(_objectSpread2({}, item), {}, {
-              disabled: true
-            }));
-          }
-          if (!prevState.multipleMap[selected.key]) {
-            nextState.multipleMap = _objectSpread2(_objectSpread2({}, prevState.multipleMap), {}, {
-              [selected.key]: true
-            });
-          } else {
-            const _prevState$multipleMa = prevState.multipleMap,
-              _selected$key3 = selected.key,
-              {
-                [_selected$key3]: _
-              } = _prevState$multipleMa,
-              restMultipleMap = _objectWithoutProperties(_prevState$multipleMa, [_selected$key3].map(_toPropertyKey));
-            nextState.multipleMap = restMultipleMap;
-          }
-          return _objectSpread2(_objectSpread2({}, prevState), nextState);
-        }, () => {
-          if (_this.state.multipleMap[selected.key]) {
-            var _this$props$onSelect, _this$props;
-            (_this$props$onSelect = (_this$props = _this.props).onSelect) === null || _this$props$onSelect === void 0 || _this$props$onSelect.call(_this$props, selected, event);
-          } else {
-            var _this$props$onDeselec, _this$props2;
-            (_this$props$onDeselec = (_this$props2 = _this.props).onDeselect) === null || _this$props$onDeselec === void 0 || _this$props$onDeselec.call(_this$props2, selected);
-          }
-          _this.props.onChange(_this.state.selected, event);
-          if (tryKeepOpen) {
-            _this._redrawPopup();
-          }
-        });
-      }
-    });
-    _defineProperty(this, "_listSelectAllHandler", function () {
-      let isSelectAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      const isItem = item => List.isItemType(List.ListProps.Type.ITEM, item);
-      const isCustomItem = item => List.isItemType(List.ListProps.Type.CUSTOM, item);
-      _this.setState(prevState => {
-        const currentSelection = prevState.selected;
-        let nextSelection;
-        if (isSelectAll) {
-          nextSelection = _this.props.data.filter(item => (isItem(item) || isCustomItem(item)) && !item.disabled);
-          nextSelection.filter(item => !_this.props.selected.find(selectedItem => item.key === selectedItem.key)).forEach(item => {
-            var _this$props$onSelect2, _this$props3;
-            (_this$props$onSelect2 = (_this$props3 = _this.props).onSelect) === null || _this$props$onSelect2 === void 0 || _this$props$onSelect2.call(_this$props3, item);
-          });
-        } else {
-          nextSelection = [];
-          currentSelection.forEach(item => {
-            var _this$props$onDeselec2, _this$props4;
-            (_this$props$onDeselec2 = (_this$props4 = _this.props).onDeselect) === null || _this$props$onDeselec2 === void 0 || _this$props$onDeselec2.call(_this$props4, item);
-          });
-        }
-        _this.props.onChange(nextSelection, event);
-        return {
-          filterValue: '',
-          selected: nextSelection,
-          shownData: prevState.shownData.map(item => _objectSpread2(_objectSpread2({}, item), {}, {
-            checkbox: isSelectAll
-          })),
-          multipleMap: isSelectAll ? buildMultipleMap(_this.props.data.filter(item => !item.disabled)) : {}
-        };
-      }, _this._redrawPopup);
-    });
-    _defineProperty(this, "_onCloseAttempt", (event, isEsc) => {
-      if (this.isInputMode()) {
-        if (!this.props.allowAny) {
-          if (this.props.hideSelected || !this.state.selected || this.props.multiple) {
-            this.clearFilter();
-          } else if (this.state.selected && !Array.isArray(this.state.selected)) {
-            this.filterValue(getItemLabel(this.state.selected));
-          }
-        }
-      }
-      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);
-      }
-    });
-    _defineProperty(this, "clearFilter", e => {
-      this._setFilter('', e);
-    });
-    _defineProperty(this, "clear", event => {
-      if (event) {
-        event.stopPropagation();
-      }
-      const empty = this.props.multiple ? [] : null;
-      this.setState({
-        selected: empty,
-        lastInteractedKey: null,
-        filterValue: ''
-      }, () => {
-        if (this.props.onChange) {
-          this.props.onChange(empty, event);
-        }
-      });
-      return false;
-    });
-    _defineProperty(this, "filter", void 0);
-    _defineProperty(this, "filterRef", el => {
-      this.filter = el;
-    });
-    _defineProperty(this, "composedFilterRef", createComposedRef());
-  }
+  static defaultProps = {
+    data: [],
+    filter: false,
+    // enable filter (not in INPUT modes)
+    filterIcon: null,
+    filterRef: noop,
+    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
+    type: Type.BUTTON,
+    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
+    hideArrow: false,
+    // hide dropdown arrow icon
+    showPopup: false,
+    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: null,
+    // BUTTON or INPUT label (nothing selected)
+    selectedLabel: null,
+    // 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
+    onOutsideClick: noop,
+    // multi
+    onChange: noop,
+    // multi
+    onAdd: noop,
+    // search string as first argument
+    onDone: noop,
+    onReset: noop,
+    tags: null,
+    ringPopupTarget: null,
+    dir: 'ltr',
+    offset: 4
+  };
   static getDerivedStateFromProps(nextProps, prevState) {
     const {
       multiple,
@@ -613,7 +314,10 @@ class Select extends Component {
     }
     const {
       selected
-    } = _objectSpread2(_objectSpread2({}, prevState), nextState);
+    } = {
+      ...prevState,
+      ...nextState
+    };
     if (selected && Array.isArray(selected)) {
       nextState.multipleMap = buildMultipleMap(selected);
       const {
@@ -631,6 +335,21 @@ class Select extends Component {
     }
     return nextState;
   }
+  state = {
+    data: [],
+    shownData: [],
+    selected: this.props.multiple ? [] : null,
+    lastInteractedKey: null,
+    filterValue: this.props.filter && typeof this.props.filter === 'object' && this.props.filter.value || '',
+    shortcutsEnabled: false,
+    popupShortcuts: false,
+    showPopup: this.props.showPopup,
+    prevData: [],
+    prevSelected: null,
+    prevMultiple: this.props.multiple,
+    multipleMap: {},
+    addButton: null
+  };
   componentDidUpdate(prevProps, prevState) {
     const {
       showPopup,
@@ -651,6 +370,92 @@ class Select extends Component {
       onChange(selected);
     }
   }
+  static contextType = ControlsHeightContext;
+  static Type = Type;
+  static Size = Size;
+  id = getUID('select-');
+  shortcutsScope = this.id;
+  listId = `${this.id}:list`;
+  _focusHandler = e => {
+    this.props.onFocus(e);
+    this.setState({
+      shortcutsEnabled: true,
+      focused: true
+    });
+  };
+  isClickingSelect = false;
+  mouseDownHandler = () => {
+    this.isClickingSelect = true;
+  };
+  mouseUpHandler = () => {
+    this.isClickingSelect = false;
+  };
+  _blurHandler = () => {
+    this.props.onBlur();
+    if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup && !this.isClickingSelect) {
+      window.setTimeout(() => {
+        this.setState({
+          showPopup: false
+        });
+      });
+    }
+    if (!this._popup?.isClickingPopup) {
+      this.setState({
+        shortcutsEnabled: false,
+        focused: false
+      });
+    }
+  };
+  node;
+  nodeRef = el => {
+    this.node = el;
+  };
+  _popup = null;
+  onEmptyPopupEnter = () => {
+    if (this.state.addButton) {
+      this.addHandler();
+    }
+  };
+  focus = () => {
+    const focusableSelectExists = this.node?.querySelector('[data-test~=ring-select__focus]');
+    const restoreFocusNode = this.props.targetElement || focusableSelectExists;
+    restoreFocusNode?.focus();
+  };
+  _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;
+  };
+  _onEsc = event => {
+    if (!this._popup?.isVisible()) {
+      return true;
+    }
+    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;
+  };
+  _inputShortcutHandler = () => {
+    if (this.state.focused && this._popup && !this._popup.isVisible()) {
+      this._clickHandler();
+    }
+  };
   getValueForFilter(selected) {
     return getValueForFilter(selected, this.props.type, this.state.filterValue);
   }
@@ -677,6 +482,9 @@ class Select extends Component {
     }
     return items.findIndex(item => !isNonOptionItem(item));
   }
+  popupRef = el => {
+    this._popup = el;
+  };
   _getResetOption() {
     const isOptionsSelected = Array.isArray(this.state.selected) && this.state.selected.length;
     const reset = this.props.tags && typeof this.props.tags === 'object' ? this.props.tags.reset : null;
@@ -732,10 +540,9 @@ class Select extends Component {
     const _shownData = this._prependResetOption(shownData);
     const activeIndex = this._getActiveIndex(_shownData);
     return jsx(I18nContext.Consumer, {
-      children: _ref2 => {
-        let {
-          translate
-        } = _ref2;
+      children: ({
+        translate
+      }) => {
         let message;
         if (this.props.loading) {
           var _this$props$loadingMe;
@@ -790,6 +597,33 @@ class Select extends Component {
       }
     });
   }
+  _showPopup = () => {
+    if (!this.node) {
+      return;
+    }
+    const shownData = this.getListItems(this.filterValue());
+    this.setState({
+      showPopup: true,
+      shownData
+    });
+  };
+  _hidePopup = tryFocusAnchor => {
+    if (this.node && this.state.showPopup) {
+      this.setState(prevState => ({
+        showPopup: false,
+        filterValue: this.props.allowAny ? prevState.filterValue : '',
+        lastInteractedKey: null
+      }));
+      if (tryFocusAnchor) {
+        this.focus();
+      }
+    }
+  };
+  addHandler = () => {
+    const value = this.filterValue();
+    this._hidePopup();
+    this.props.onAdd(value);
+  };
   getToolbar() {
     const {
       hint,
@@ -815,7 +649,7 @@ class Select extends Component {
         className: classNames(styles.button, styles.buttonSpaced),
         onClick: this.addHandler,
         "data-test": 'ring-select-toolbar-button',
-        children: prefix ? "".concat(prefix, " ").concat(label) : label
+        children: prefix ? `${prefix} ${label}` : label
       }), hint && jsx(List.ListHint, {
         label: hint,
         "data-test": 'ring-select-toolbar-hint'
@@ -823,9 +657,10 @@ class Select extends Component {
     });
   }
   getTopbar() {
-    var _this$props$renderTop, _this$props5;
-    return (_this$props$renderTop = (_this$props5 = this.props).renderTopToolbar) === null || _this$props$renderTop === void 0 ? void 0 : _this$props$renderTop.call(_this$props5);
+    return this.props.renderTopToolbar?.();
   }
+  getLowerCaseLabel = getLowerCaseLabel;
+  doesLabelMatch = doesLabelMatch;
   getFilterFn() {
     return getFilterFn(this.props.filter);
   }
@@ -851,6 +686,56 @@ class Select extends Component {
   isInputMode() {
     return isInputMode(this.props.type);
   }
+  _clickHandler = () => {
+    if (!this.props.disabled) {
+      if (this.state.showPopup) {
+        this._hidePopup();
+      } else {
+        this.props.onBeforeOpen();
+        this._showPopup();
+      }
+    }
+  };
+  _openPopupIfClosed = () => {
+    if (this.props.disabled || this.state.showPopup) {
+      return;
+    }
+    this.props.onBeforeOpen();
+    this._showPopup();
+  };
+  _filterChangeHandler = e => {
+    this._setFilter(e.currentTarget.value, e);
+  };
+  _setFilter = (value, event) => {
+    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
+      }, () => {
+        this.props.onSelect(fakeSelected, event);
+        this.props.onChange(fakeSelected, event);
+      });
+    }
+    if (!this._popup?.isVisible()) {
+      this.props.onBeforeOpen();
+    }
+    this.setState({
+      filterValue
+    }, () => {
+      this._showPopup();
+    });
+  };
   _rebuildMultipleMap(selected) {
     if (Array.isArray(selected)) {
       this.setState({
@@ -858,12 +743,169 @@ class Select extends Component {
       });
     }
   }
+  _redrawPopup = () => {
+    if (this.props.multiple) {
+      setTimeout(() => {
+        //setTimeout solves events order and bubbling issue
+        if (this.isInputMode()) {
+          this.clearFilter();
+        }
+        this._showPopup();
+      }, 0);
+    }
+  };
+  _listSelectHandler = (selected, event, opts = {}) => {
+    var _selected$key, _this$props$tryKeepOp;
+    const isItem = item => List.isItemType(List.ListProps.Type.ITEM, item);
+    const isCustomItem = item => List.isItemType(List.ListProps.Type.CUSTOM, item);
+    const isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
+    if (isSelectItemEvent) {
+      event.preventDefault();
+    }
+    if (!isItem(selected) && !isCustomItem(selected) || selected.disabled || selected.isResetItem) {
+      return;
+    }
+    const lastInteractedKey = (_selected$key = selected?.key) !== null && _selected$key !== void 0 ? _selected$key : null;
+    const tryKeepOpen = (_this$props$tryKeepOp = this.props.tryKeepOpen) !== null && _this$props$tryKeepOp !== void 0 ? _this$props$tryKeepOp : opts.tryKeepOpen;
+    if (!this.props.multiple) {
+      var _selected$key2;
+      if (!tryKeepOpen) {
+        this._hidePopup(isSelectItemEvent);
+      }
+      this.setState({
+        selected,
+        lastInteractedKey: (_selected$key2 = selected?.key) !== null && _selected$key2 !== void 0 ? _selected$key2 : null
+      }, () => {
+        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 {
+      if (!tryKeepOpen) {
+        this._hidePopup(isSelectItemEvent);
+      }
+      if (selected.key === null || selected.key === undefined) {
+        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);
+        } else {
+          nextSelection = currentSelection.filter(item => item.key !== selected.key);
+        }
+        const nextState = {
+          filterValue: '',
+          selected: nextSelection,
+          lastInteractedKey: tryKeepOpen ? lastInteractedKey : null
+        };
+        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
+          });
+        }
+        if (!prevState.multipleMap[selected.key]) {
+          nextState.multipleMap = {
+            ...prevState.multipleMap,
+            [selected.key]: true
+          };
+        } else {
+          const {
+            [selected.key]: _,
+            ...restMultipleMap
+          } = prevState.multipleMap;
+          nextState.multipleMap = restMultipleMap;
+        }
+        return {
+          ...prevState,
+          ...nextState
+        };
+      }, () => {
+        if (this.state.multipleMap[selected.key]) {
+          this.props.onSelect?.(selected, event);
+        } else {
+          this.props.onDeselect?.(selected);
+        }
+        this.props.onChange(this.state.selected, event);
+        if (tryKeepOpen) {
+          this._redrawPopup();
+        }
+      });
+    }
+  };
+  _listSelectAllHandler = (isSelectAll = true) => {
+    const isItem = item => List.isItemType(List.ListProps.Type.ITEM, item);
+    const isCustomItem = item => List.isItemType(List.ListProps.Type.CUSTOM, item);
+    this.setState(prevState => {
+      const currentSelection = prevState.selected;
+      let nextSelection;
+      if (isSelectAll) {
+        nextSelection = this.props.data.filter(item => (isItem(item) || isCustomItem(item)) && !item.disabled);
+        nextSelection.filter(item => !this.props.selected.find(selectedItem => item.key === selectedItem.key)).forEach(item => {
+          this.props.onSelect?.(item);
+        });
+      } else {
+        nextSelection = [];
+        currentSelection.forEach(item => {
+          this.props.onDeselect?.(item);
+        });
+      }
+      this.props.onChange(nextSelection, event);
+      return {
+        filterValue: '',
+        selected: nextSelection,
+        shownData: prevState.shownData.map(item => ({
+          ...item,
+          checkbox: isSelectAll
+        })),
+        multipleMap: isSelectAll ? buildMultipleMap(this.props.data.filter(item => !item.disabled)) : {}
+      };
+    }, this._redrawPopup);
+  };
+  _onCloseAttempt = (event, isEsc) => {
+    if (this.isInputMode()) {
+      if (!this.props.allowAny) {
+        if (this.props.hideSelected || !this.state.selected || this.props.multiple) {
+          this.clearFilter();
+        } else if (this.state.selected && !Array.isArray(this.state.selected)) {
+          this.filterValue(getItemLabel(this.state.selected));
+        }
+      }
+    }
+    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);
+    }
+  };
+  clearFilter = e => {
+    this._setFilter('', e);
+  };
+  clear = event => {
+    if (event) {
+      event.stopPropagation();
+    }
+    const empty = this.props.multiple ? [] : null;
+    this.setState({
+      selected: empty,
+      lastInteractedKey: null,
+      filterValue: ''
+    }, () => {
+      if (this.props.onChange) {
+        this.props.onChange(empty, event);
+      }
+    });
+    return false;
+  };
   _selectionIsEmpty() {
     return Array.isArray(this.state.selected) && !this.state.selected.length || !this.state.selected;
   }
   _getLabel() {
-    var _ref3, _this$props$label;
-    return (_ref3 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref3 !== void 0 ? _ref3 : 'Select an option';
+    var _ref, _this$props$label;
+    return (_ref = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref !== void 0 ? _ref : 'Select an option';
   }
   _getPlaceholder() {
     if (this._selectionIsEmpty()) {
@@ -896,7 +938,7 @@ class Select extends Component {
     } = this.props;
     const icons = [];
     const height = this.getHeight();
-    if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
+    if (!Array.isArray(selected) && selected?.icon) {
       icons.push(jsx("button", {
         title: 'Toggle options popup',
         type: 'button',
@@ -904,7 +946,7 @@ class Select extends Component {
         disabled: this.props.disabled,
         onClick: this._clickHandler,
         style: {
-          backgroundImage: "url(".concat(selected.icon, ")")
+          backgroundImage: `url(${selected.icon})`
         }
       }, 'selected'));
     }
@@ -933,14 +975,18 @@ class Select extends Component {
     return icons;
   }
   _getAvatar() {
-    var _this$state$selected, _this$state$selected2;
-    return !Array.isArray(this.state.selected) && (((_this$state$selected = this.state.selected) === null || _this$state$selected === void 0 ? void 0 : _this$state$selected.avatar) || ((_this$state$selected2 = this.state.selected) === null || _this$state$selected2 === void 0 ? void 0 : _this$state$selected2.showGeneratedAvatar)) && jsx(Avatar, {
+    return !Array.isArray(this.state.selected) && (this.state.selected?.avatar || this.state.selected?.showGeneratedAvatar) && jsx(Avatar, {
       className: styles.avatar,
       url: this.state.selected.avatar,
       username: this.state.selected.username,
       size: Size$1.Size20
     });
   }
+  filter;
+  filterRef = el => {
+    this.filter = el;
+  };
+  composedFilterRef = createComposedRef();
   getShortcutsMap() {
     return {
       enter: this._onEnter,
@@ -956,7 +1002,7 @@ class Select extends Component {
   }
   // eslint-disable-next-line complexity
   renderSelect(activeItemId) {
-    var _ref4, _this$props$label3, _this$_popup5, _this$props$buttonCla;
+    var _ref2, _this$props$label3, _this$props$buttonCla;
     const dataTest = this.props['data-test'];
     const {
       selectedLabel
@@ -964,8 +1010,8 @@ class Select extends Component {
     const {
       shortcutsEnabled
     } = this.state;
-    const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles["height".concat(this.getHeight())], {
-      [styles["size".concat(this.props.size)]]: this.props.type !== Type.INLINE,
+    const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.getHeight()}`], {
+      [styles[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
       [styles.disabled]: this.props.disabled
     });
     let style;
@@ -983,7 +1029,7 @@ class Select extends Component {
       'aria-expanded': this.state.showPopup,
       'aria-controls': this.listId,
       'aria-activedescendant': this.state.showPopup ? activeItemId : undefined,
-      'aria-label': (_ref4 = (_this$props$label3 = this.props.label) !== null && _this$props$label3 !== void 0 ? _this$props$label3 : this._getPlaceholder()) !== null && _ref4 !== void 0 ? _ref4 : undefined
+      'aria-label': (_ref2 = (_this$props$label3 = this.props.label) !== null && _this$props$label3 !== void 0 ? _this$props$label3 : this._getPlaceholder()) !== null && _ref2 !== void 0 ? _ref2 : undefined
     };
     switch (this.props.type) {
       case Type.INPUT_WITHOUT_CONTROLS:
@@ -1000,7 +1046,8 @@ class Select extends Component {
             children: [shortcutsEnabled && jsx(Shortcuts, {
               map: this.getShortcutsMap(),
               scope: this.shortcutsScope
-            }), jsx(Input, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+            }), jsx(Input, {
+              ...ariaProps,
               height: this.props.height,
               autoComplete: 'off',
               id: this.props.id,
@@ -1020,12 +1067,15 @@ class Select extends Component {
               placeholder: this.props.inputPlaceholder,
               onKeyDown: this.props.onKeyDown,
               "data-test": 'ring-select__focus',
-              enableShortcuts: shortcutsEnabled ? Object.keys(_objectSpread2(_objectSpread2({}, this.getShortcutsMap()), (_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 || (_this$_popup5 = _this$_popup5.list) === null || _this$_popup5 === void 0 ? void 0 : _this$_popup5.shortcutsMap)) : undefined,
+              enableShortcuts: shortcutsEnabled ? Object.keys({
+                ...this.getShortcutsMap(),
+                ...this._popup?.list?.shortcutsMap
+              }) : undefined,
               icon: this.props.filterIcon,
               afterInput: iconsNode
-            })), this._renderPopup()]
+            }), this._renderPopup()]
           }), this.props.error && jsx("div", {
-            className: classNames(inputStyles.errorText, inputStyles["size".concat(this.props.size)]),
+            className: classNames(inputStyles.errorText, inputStyles[`size${this.props.size}`]),
             children: this.props.error
           })]
         });
@@ -1044,7 +1094,8 @@ class Select extends Component {
             scope: this.shortcutsScope
           }), jsxs("div", {
             className: styles.buttonContainer,
-            children: [jsxs(Button, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+            children: [jsxs(Button, {
+              ...ariaProps,
               height: this.props.height,
               id: this.props.id,
               onClick: this._clickHandler,
@@ -1056,7 +1107,7 @@ class Select extends Component {
               style: style,
               "data-test": 'ring-select__button ring-select__focus',
               children: [this._getAvatar(), this._getPlaceholder()]
-            })), iconsNode]
+            }), iconsNode]
           }), this._renderPopup()]
         });
       case Type.INLINE:
@@ -1067,7 +1118,8 @@ class Select extends Component {
           children: [shortcutsEnabled && jsx(Shortcuts, {
             map: this.getShortcutsMap(),
             scope: this.shortcutsScope
-          }), jsx(Anchor, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+          }), jsx(Anchor, {
+            ...ariaProps,
             className: (_this$props$buttonCla = this.props.buttonClassName) !== null && _this$props$buttonCla !== void 0 ? _this$props$buttonCla : undefined,
             id: this.props.id,
             onClick: this._clickHandler,
@@ -1075,7 +1127,7 @@ class Select extends Component {
             disabled: this.props.disabled,
             active: this.state.showPopup,
             children: this._getPlaceholder()
-          })), this._renderPopup()]
+          }), this._renderPopup()]
         });
       default:
         if (this.props.customAnchor) {
@@ -1088,13 +1140,14 @@ class Select extends Component {
                 ref: this.nodeRef,
                 'data-test': joinDataTestAttributes('ring-select', dataTest)
               },
-              buttonProps: _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+              buttonProps: {
+                ...ariaProps,
                 id: this.props.id,
                 onClick: this._clickHandler,
                 disabled: this.props.disabled,
                 children: this._getPlaceholder(),
                 'data-test': 'ring-select__focus'
-              }),
+              },
               popup: this._renderPopup()
             })]
           });
@@ -1116,74 +1169,6 @@ class Select extends Component {
   }
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-_defineProperty(Select, "defaultProps", {
-  data: [],
-  filter: false,
-  // enable filter (not in INPUT modes)
-  filterIcon: null,
-  filterRef: noop,
-  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
-  type: Type.BUTTON,
-  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
-  hideArrow: false,
-  // hide dropdown arrow icon
-  showPopup: false,
-  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: null,
-  // BUTTON or INPUT label (nothing selected)
-  selectedLabel: null,
-  // 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
-  onOutsideClick: noop,
-  // multi
-  onChange: noop,
-  // multi
-  onAdd: noop,
-  // search string as first argument
-  onDone: noop,
-  onReset: noop,
-  tags: null,
-  ringPopupTarget: null,
-  dir: 'ltr',
-  offset: 4
-});
-_defineProperty(Select, "contextType", ControlsHeightContext);
-_defineProperty(Select, "Type", Type);
-_defineProperty(Select, "Size", Size);
 const RerenderableSelect = rerenderHOC(Select);
 
 export { RerenderableSelect, Type, Select as default };