@jetbrains/ring-ui 5.0.156 → 5.0.158

package/dist/select/select__popup.js

@@ -1,3 +1,12 @@
+import { c as _defineProperty, j as _inherits, k as _createSuper, b as _classCallCheck, m as _assertThisInitialized, _ as _createClass, d as _typeof } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.array.index-of.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.number.constructor.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.keys.js';
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import searchIcon from '@jetbrains/icons/search';
@@ -21,15 +30,36 @@ import Text from '../text/text.js';
 import { ControlsHeight } from '../global/controls-height.js';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts.js';
 import { S as SelectFilter, m as modules_b607bec2 } from '../_helpers/select__filter.js';
-import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.starts-with.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.string.iterator.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.regexp.to-string.js';
 import 'react-dom';
 import '../global/schedule-raf.js';
 import '../global/data-tests.js';
 import '../tab-trap/tab-trap.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.sort.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.symbol.description.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'core-js/modules/es.array.find.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
@@ -43,7 +73,9 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import 'core-js/modules/es.string.match.js';
 import '../avatar/fallback-avatar.js';
+import 'core-js/modules/es.array.from.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-14px';
@@ -57,6 +89,7 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.splice.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
@@ -66,394 +99,483 @@ import '@jetbrains/icons/close-12px';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';
 import '../input/input.js';
+import 'core-js/modules/es.object.values.js';
 import '../i18n/i18n-context.js';
 import '../i18n/i18n.js';
 import '../control-label/control-label.js';
 import '../_helpers/control-label.js';
 import '../_helpers/input.js';
 
-const FILTER_HEIGHT = 35;
-const TOOLBAR_HEIGHT = 49;
+var FILTER_HEIGHT = 35;
+var TOOLBAR_HEIGHT = 49;
 function noop() {}
-const FilterWithShortcuts = shortcutsHOC(SelectFilter);
-class SelectPopup extends PureComponent {
-  static defaultProps = {
-    data: [],
-    activeIndex: null,
-    toolbar: null,
-    topbar: null,
-    filter: false,
-    multiple: false,
-    message: null,
-    anchorElement: null,
-    maxHeight: 600,
-    minWidth: 240,
-    loading: false,
-    onSelect: noop,
-    onCloseAttempt: noop,
-    onOutsideClick: noop,
-    onFilter: noop,
-    onClear: noop,
-    onLoadMore: noop,
-    selected: [],
-    tags: null,
-    ringPopupTarget: null,
-    onSelectAll: noop,
-    onEmptyPopupEnter: noop
-  };
-  state = {
-    popupFilterShortcutsOptions: {
-      modal: true,
-      disabled: true
-    },
-    tagsActiveIndex: null
-  };
-  componentDidMount() {
-    window.document.addEventListener('mouseup', this.mouseUpHandler);
-  }
-  componentWillUnmount() {
-    window.document.removeEventListener('mouseup', this.mouseUpHandler);
-  }
-  isClickingPopup = false; // This flag is set to true while an item in the popup is being clicked
-  filter;
-  focusFilter() {
-    setTimeout(() => this.filter?.focus());
-  }
-  isEventTargetFilter(event) {
-    return event.target instanceof Element && event.target.matches('input,textarea');
-  }
-  caret;
-  handleNavigation(event, navigateLeft) {
-    if (this.isEventTargetFilter(event) && this.caret != null && Number(this.caret.getPosition()) > 0 || !Array.isArray(this.props.selected)) {
-      return;
-    }
-    let newIndex = null;
-    if (navigateLeft) {
-      newIndex = this.state.tagsActiveIndex === null ? this.props.selected.length - 1 : this.state.tagsActiveIndex - 1;
-    } else if (this.state.tagsActiveIndex !== null) {
-      newIndex = this.state.tagsActiveIndex + 1;
+var FilterWithShortcuts = shortcutsHOC(SelectFilter);
+var SelectPopup = /*#__PURE__*/function (_PureComponent) {
+  _inherits(SelectPopup, _PureComponent);
+  var _super = _createSuper(SelectPopup);
+  function SelectPopup() {
+    var _this;
+    _classCallCheck(this, SelectPopup);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    if (newIndex !== null && (newIndex >= this.props.selected.length || newIndex < 0)) {
-      newIndex = null;
-      this.focusFilter();
-    }
-    this.setState({
-      tagsActiveIndex: newIndex
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      popupFilterShortcutsOptions: {
+        modal: true,
+        disabled: true
+      },
+      tagsActiveIndex: null
+    });
+    _defineProperty(_assertThisInitialized(_this), "isClickingPopup", false);
+    // This flag is set to true while an item in the popup is being clicked
+    _defineProperty(_assertThisInitialized(_this), "filter", void 0);
+    _defineProperty(_assertThisInitialized(_this), "caret", void 0);
+    _defineProperty(_assertThisInitialized(_this), "onFilterFocus", function () {
+      _this._togglePopupFilterShortcuts(false);
+      _this.setState({
+        tagsActiveIndex: null
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "popupFilterOnBlur", function () {
+      if (_this.state.tagsActiveIndex === null) {
+        _this._togglePopupFilterShortcuts(true);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "mouseDownHandler", function () {
+      _this.isClickingPopup = true;
+    });
+    _defineProperty(_assertThisInitialized(_this), "mouseUpHandler", function () {
+      _this.isClickingPopup = false;
+    });
+    _defineProperty(_assertThisInitialized(_this), "popup", void 0);
+    _defineProperty(_assertThisInitialized(_this), "onListSelect", function (selected, event, opts) {
+      var getSelectItemEvent = function getSelectItemEvent() {
+        var customEvent = document.createEvent('Event');
+        customEvent.initEvent('select', true, false);
+        if (event && 'persist' in event) {
+          event.persist();
+        }
+        customEvent.originalEvent = event;
+        return customEvent;
+      };
+      _this.props.onSelect(selected, getSelectItemEvent(), opts);
+    });
+    _defineProperty(_assertThisInitialized(_this), "tabPress", function (event) {
+      _this.props.onCloseAttempt(event, true);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onClickHandler", function () {
+      var _this$filter;
+      return (_this$filter = _this.filter) === null || _this$filter === void 0 ? void 0 : _this$filter.focus();
     });
+    _defineProperty(_assertThisInitialized(_this), "handleRemoveTag", memoize(function (tag) {
+      return function (event) {
+        return _this.removeTag(tag, event);
+      };
+    }));
+    _defineProperty(_assertThisInitialized(_this), "handleTagClick", memoize(function (tag) {
+      return function () {
+        if (Array.isArray(_this.props.selected)) {
+          _this.setState({
+            tagsActiveIndex: _this.props.selected.indexOf(tag)
+          });
+        }
+      };
+    }));
+    _defineProperty(_assertThisInitialized(_this), "handleListResize", function () {
+      _this.forceUpdate();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function () {
+      if (Array.isArray(_this.props.selected)) {
+        _this.props.onSelectAll(_this.props.data.filter(function (item) {
+          return !item.disabled;
+        }).length !== _this.props.selected.length);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "getSelectAll", function () {
+      var _multiple$renderSelec;
+      var multiple = _this.props.multiple;
+      var activeFilters = _this.props.data.filter(function (item) {
+        return !item.disabled;
+      });
+      return Array.isArray(_this.props.selected) && /*#__PURE__*/React.createElement("div", {
+        className: modules_b607bec2.selectAll
+      }, activeFilters.length === 0 ? /*#__PURE__*/React.createElement("span", null) : /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        inline: true,
+        onClick: _this.handleSelectAll
+      }, activeFilters.length !== _this.props.selected.length ? multiple.selectAllLabel || 'Select all' : multiple.deselectAllLabel || 'Deselect all'), ((_multiple$renderSelec = multiple.renderSelectedItemsDescription) === null || _multiple$renderSelec === void 0 ? void 0 : _multiple$renderSelec.call(multiple, _this.props.selected, activeFilters.length)) || /*#__PURE__*/React.createElement(Text, {
+        info: true
+      }, "".concat(_this.props.selected.length, " selected")));
+    });
+    // Cache the value because this method is called
+    // inside `render` function which can be called N times
+    // and should be fast as possible.
+    // Cache invalidates each time hidden or userDefinedMaxHeight changes
+    _defineProperty(_assertThisInitialized(_this), "_adjustListMaxHeight", memoizeOne(function (hidden, userDefinedMaxHeight, ringPopupTarget) {
+      if (hidden) {
+        return userDefinedMaxHeight;
+      }
+      // Calculate list's maximum height that can't
+      // get beyond the screen
+      // @see RG-1838, JT-48358
+      var minMaxHeight = 100;
+      var directions = _this.props.directions || DEFAULT_DIRECTIONS;
+      // Note:
+      // Create a method which'll be called only when the popup opens and before
+      // render the list would be a better way
+      var anchorNode = _this.props.anchorElement;
+      var containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
+      return anchorNode != null ? Math.min(directions.reduce(function (maxHeight, direction) {
+        var _maxHeightForDirectio;
+        return Math.max(maxHeight, (_maxHeightForDirectio = maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null)) !== null && _maxHeightForDirectio !== void 0 ? _maxHeightForDirectio : 0);
+      }, minMaxHeight), userDefinedMaxHeight) : userDefinedMaxHeight;
+    }));
+    _defineProperty(_assertThisInitialized(_this), "popupRef", function (el) {
+      _this.popup = el;
+    });
+    _defineProperty(_assertThisInitialized(_this), "list", void 0);
+    _defineProperty(_assertThisInitialized(_this), "listRef", function (el) {
+      _this.list = el;
+    });
+    _defineProperty(_assertThisInitialized(_this), "filterRef", function (el) {
+      _this.filter = el;
+      _this.caret = el && new Caret(el);
+    });
+    _defineProperty(_assertThisInitialized(_this), "shortcutsScope", getUID('select-popup-'));
+    _defineProperty(_assertThisInitialized(_this), "shortcutsMap", {
+      tab: _this.tabPress
+    });
+    _defineProperty(_assertThisInitialized(_this), "popupFilterShortcutsMap", {
+      up: function up(event) {
+        return _this.list && _this.list.upHandler(event);
+      },
+      down: function down(event) {
+        return _this.list && _this.list.downHandler(event);
+      },
+      home: function home(event) {
+        return _this.list && _this.list.homeHandler(event);
+      },
+      end: function end(event) {
+        return _this.list && _this.list.endHandler(event);
+      },
+      enter: function enter(event) {
+        return _this.list ? _this.list.enterHandler(event) : _this.props.onEmptyPopupEnter(event);
+      },
+      esc: function esc(event) {
+        return _this.props.onCloseAttempt(event, true);
+      },
+      tab: function tab(event) {
+        return _this.tabPress(event);
+      },
+      backspace: function backspace(event) {
+        return _this.handleBackspace(event);
+      },
+      del: function del() {
+        return _this.removeSelectedTag();
+      },
+      left: function left(event) {
+        return _this.handleNavigation(event, true);
+      },
+      right: function right(event) {
+        return _this.handleNavigation(event);
+      }
+    });
+    return _this;
   }
-  removeTag(tag, event) {
-    if (!Array.isArray(this.props.selected)) {
-      return;
+  _createClass(SelectPopup, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.document.addEventListener('mouseup', this.mouseUpHandler);
     }
-    const _tag = tag || this.props.selected.slice(0)[this.props.selected.length - 1];
-    if (_tag) {
-      this.onListSelect(_tag, event, {
-        tryKeepOpen: true
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.document.removeEventListener('mouseup', this.mouseUpHandler);
+    }
+  }, {
+    key: "focusFilter",
+    value: function focusFilter() {
+      var _this2 = this;
+      setTimeout(function () {
+        var _this2$filter;
+        return (_this2$filter = _this2.filter) === null || _this2$filter === void 0 ? void 0 : _this2$filter.focus();
       });
+    }
+  }, {
+    key: "isEventTargetFilter",
+    value: function isEventTargetFilter(event) {
+      return event.target instanceof Element && event.target.matches('input,textarea');
+    }
+  }, {
+    key: "handleNavigation",
+    value: function handleNavigation(event, navigateLeft) {
+      if (this.isEventTargetFilter(event) && this.caret != null && Number(this.caret.getPosition()) > 0 || !Array.isArray(this.props.selected)) {
+        return;
+      }
+      var newIndex = null;
+      if (navigateLeft) {
+        newIndex = this.state.tagsActiveIndex === null ? this.props.selected.length - 1 : this.state.tagsActiveIndex - 1;
+      } else if (this.state.tagsActiveIndex !== null) {
+        newIndex = this.state.tagsActiveIndex + 1;
+      }
+      if (newIndex !== null && (newIndex >= this.props.selected.length || newIndex < 0)) {
+        newIndex = null;
+        this.focusFilter();
+      }
       this.setState({
-        tagsActiveIndex: null
+        tagsActiveIndex: newIndex
       });
-      this.focusFilter();
     }
-  }
-  removeSelectedTag() {
-    if (Array.isArray(this.props.selected) && this.state.tagsActiveIndex != null) {
-      this.removeTag(this.props.selected[this.state.tagsActiveIndex]);
-      return false;
+  }, {
+    key: "removeTag",
+    value: function removeTag(tag, event) {
+      if (!Array.isArray(this.props.selected)) {
+        return;
+      }
+      var _tag = tag || this.props.selected.slice(0)[this.props.selected.length - 1];
+      if (_tag) {
+        this.onListSelect(_tag, event, {
+          tryKeepOpen: true
+        });
+        this.setState({
+          tagsActiveIndex: null
+        });
+        this.focusFilter();
+      }
     }
-    return true;
-  }
-  handleBackspace(event) {
-    if (!this.props.tags) {
+  }, {
+    key: "removeSelectedTag",
+    value: function removeSelectedTag() {
+      if (Array.isArray(this.props.selected) && this.state.tagsActiveIndex != null) {
+        this.removeTag(this.props.selected[this.state.tagsActiveIndex]);
+        return false;
+      }
       return true;
     }
-    if (!this.isEventTargetFilter(event)) {
-      this.removeSelectedTag();
-      return false;
-    }
-    if ((event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) && !event.target.value) {
-      this.removeTag();
-      return false;
-    }
-    return true;
-  }
-  onFilterFocus = () => {
-    this._togglePopupFilterShortcuts(false);
-    this.setState({
-      tagsActiveIndex: null
-    });
-  };
-  popupFilterOnBlur = () => {
-    if (this.state.tagsActiveIndex === null) {
-      this._togglePopupFilterShortcuts(true);
-    }
-  };
-  _togglePopupFilterShortcuts(shortcutsDisabled) {
-    this.setState({
-      popupFilterShortcutsOptions: {
-        modal: true,
-        disabled: shortcutsDisabled
+  }, {
+    key: "handleBackspace",
+    value: function handleBackspace(event) {
+      if (!this.props.tags) {
+        return true;
       }
-    });
-  }
-  mouseDownHandler = () => {
-    this.isClickingPopup = true;
-  };
-  mouseUpHandler = () => {
-    this.isClickingPopup = false;
-  };
-  popup;
-  isVisible() {
-    return this.popup && this.popup.isVisible();
-  }
-  onListSelect = (selected, event, opts) => {
-    const getSelectItemEvent = () => {
-      const customEvent = document.createEvent('Event');
-      customEvent.initEvent('select', true, false);
-      if (event && 'persist' in event) {
-        event.persist();
+      if (!this.isEventTargetFilter(event)) {
+        this.removeSelectedTag();
+        return false;
       }
-      customEvent.originalEvent = event;
-      return customEvent;
-    };
-    this.props.onSelect(selected, getSelectItemEvent(), opts);
-  };
-  tabPress = event => {
-    this.props.onCloseAttempt(event, true);
-  };
-  onClickHandler = () => this.filter?.focus();
-  getFilter() {
-    if (this.props.filter || this.props.tags) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: modules_b607bec2.filterWrapper,
-        "data-test": "ring-select-popup-filter"
-      }, !this.props.tags && /*#__PURE__*/React.createElement(Icon, {
-        glyph: searchIcon,
-        className: modules_b607bec2.filterIcon,
-        "data-test-custom": "ring-select-popup-filter-icon"
-      }), /*#__PURE__*/React.createElement(FilterWithShortcuts, {
-        rgShortcutsOptions: this.state.popupFilterShortcutsOptions,
-        rgShortcutsMap: this.popupFilterShortcutsMap,
-        value: this.props.filterValue,
-        inputRef: this.filterRef,
-        onBlur: this.popupFilterOnBlur,
-        onFocus: this.onFilterFocus,
-        className: "ring-js-shortcuts",
-        inputClassName: classNames({
-          [modules_b607bec2.filterWithTagsInput]: this.props.tags
-        }),
-        placeholder: typeof this.props.filter === 'object' ? this.props.filter.placeholder : undefined,
-        height: this.props.tags ? ControlsHeight.S : ControlsHeight.L,
-        onChange: this.props.onFilter,
-        onClick: this.onClickHandler,
-        onClear: this.props.tags ? undefined : this.props.onClear,
-        "data-test-custom": "ring-select-popup-filter-input",
-        listId: this.props.listId,
-        enableShortcuts: Object.keys(this.popupFilterShortcutsMap)
-      }));
+      if ((event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) && !event.target.value) {
+        this.removeTag();
+        return false;
+      }
+      return true;
     }
-    return null;
-  }
-  handleRemoveTag = memoize(tag => event => this.removeTag(tag, event));
-  handleTagClick = memoize(tag => () => {
-    if (Array.isArray(this.props.selected)) {
+  }, {
+    key: "_togglePopupFilterShortcuts",
+    value: function _togglePopupFilterShortcuts(shortcutsDisabled) {
       this.setState({
-        tagsActiveIndex: this.props.selected.indexOf(tag)
+        popupFilterShortcutsOptions: {
+          modal: true,
+          disabled: shortcutsDisabled
+        }
       });
     }
-  });
-  getTags() {
-    return Array.isArray(this.props.selected) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TagsList, {
-      tags: this.props.selected,
-      activeIndex: this.state.tagsActiveIndex,
-      handleRemove: this.handleRemoveTag,
-      handleClick: this.handleTagClick,
-      disabled: this.props.disabled
-    }));
-  }
-  getFilterWithTags() {
-    if (this.props.tags) {
-      const classes = classNames([modules_b607bec2.filterWithTags, {
-        [modules_b607bec2.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled
-      }]);
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes
-      }, this.getTags(), this.getFilter());
+  }, {
+    key: "isVisible",
+    value: function isVisible() {
+      return this.popup && this.popup.isVisible();
     }
-    return this.getFilter();
-  }
-  getBottomLine() {
-    const {
-      loading,
-      message
-    } = this.props;
-    return (loading || message) && /*#__PURE__*/React.createElement("div", {
-      className: modules_b607bec2.bottomLine
-    }, loading && /*#__PURE__*/React.createElement(LoaderInline, null), message && /*#__PURE__*/React.createElement("div", {
-      className: modules_b607bec2.message
-    }, message));
-  }
-  handleListResize = () => {
-    this.forceUpdate();
-  };
-  getList(ringPopupTarget) {
-    if (this.props.data.length) {
-      let {
-        maxHeight
-      } = this.props;
-      if (this.props.anchorElement) {
-        maxHeight = this._adjustListMaxHeight(this.props.hidden, maxHeight, ringPopupTarget);
+  }, {
+    key: "getFilter",
+    value: function getFilter() {
+      if (this.props.filter || this.props.tags) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: modules_b607bec2.filterWrapper,
+          "data-test": "ring-select-popup-filter"
+        }, !this.props.tags && /*#__PURE__*/React.createElement(Icon, {
+          glyph: searchIcon,
+          className: modules_b607bec2.filterIcon,
+          "data-test-custom": "ring-select-popup-filter-icon"
+        }), /*#__PURE__*/React.createElement(FilterWithShortcuts, {
+          rgShortcutsOptions: this.state.popupFilterShortcutsOptions,
+          rgShortcutsMap: this.popupFilterShortcutsMap,
+          value: this.props.filterValue,
+          inputRef: this.filterRef,
+          onBlur: this.popupFilterOnBlur,
+          onFocus: this.onFilterFocus,
+          className: "ring-js-shortcuts",
+          inputClassName: classNames(_defineProperty({}, modules_b607bec2.filterWithTagsInput, this.props.tags)),
+          placeholder: _typeof(this.props.filter) === 'object' ? this.props.filter.placeholder : undefined,
+          height: this.props.tags ? ControlsHeight.S : ControlsHeight.L,
+          onChange: this.props.onFilter,
+          onClick: this.onClickHandler,
+          onClear: this.props.tags ? undefined : this.props.onClear,
+          "data-test-custom": "ring-select-popup-filter-input",
+          listId: this.props.listId,
+          enableShortcuts: Object.keys(this.popupFilterShortcutsMap)
+        }));
       }
-      if (this.props.filter) {
-        maxHeight -= FILTER_HEIGHT;
+      return null;
+    }
+  }, {
+    key: "getCustomTag",
+    value: function getCustomTag(tags) {
+      if (tags !== null && typeof tags !== 'boolean') {
+        return tags.customTagComponent;
       }
-      if (this.props.toolbar) {
-        maxHeight -= TOOLBAR_HEIGHT;
+      return undefined;
+    }
+  }, {
+    key: "getTags",
+    value: function getTags() {
+      return Array.isArray(this.props.selected) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TagsList, {
+        tags: this.props.selected,
+        activeIndex: this.state.tagsActiveIndex,
+        handleRemove: this.handleRemoveTag,
+        handleClick: this.handleTagClick,
+        disabled: this.props.disabled,
+        customTagComponent: this.getCustomTag(this.props.tags)
+      }));
+    }
+  }, {
+    key: "getFilterWithTags",
+    value: function getFilterWithTags() {
+      if (this.props.tags) {
+        var classes = classNames([modules_b607bec2.filterWithTags, _defineProperty({}, modules_b607bec2.filterWithTagsFocused, !this.state.popupFilterShortcutsOptions.disabled)]);
+        return /*#__PURE__*/React.createElement("div", {
+          className: classes
+        }, this.getTags(), this.getFilter());
       }
-      return /*#__PURE__*/React.createElement(List, {
-        id: this.props.listId,
-        maxHeight: maxHeight,
-        data: this.props.data,
-        activeIndex: this.props.activeIndex,
-        ref: this.listRef,
-        restoreActiveIndex: true,
-        activateFirstItem: true,
-        onSelect: this.onListSelect,
-        onResize: this.handleListResize,
-        onScrollToBottom: this.props.onLoadMore,
-        hidden: this.props.hidden,
-        shortcuts: !this.props.hidden,
-        disableMoveOverflow: this.props.disableMoveOverflow,
-        disableMoveDownOverflow: this.props.loading,
-        disableScrollToActive: this.props.disableScrollToActive,
-        compact: this.props.compact,
-        renderOptimization: this.props.renderOptimization
-      });
+      return this.getFilter();
     }
-    return null;
-  }
-  handleSelectAll = () => {
-    if (Array.isArray(this.props.selected)) {
-      this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length);
+  }, {
+    key: "getBottomLine",
+    value: function getBottomLine() {
+      var _this$props = this.props,
+        loading = _this$props.loading,
+        message = _this$props.message;
+      return (loading || message) && /*#__PURE__*/React.createElement("div", {
+        className: modules_b607bec2.bottomLine
+      }, loading && /*#__PURE__*/React.createElement(LoaderInline, null), message && /*#__PURE__*/React.createElement("div", {
+        className: modules_b607bec2.message
+      }, message));
     }
-  };
-  getSelectAll = () => {
-    const multiple = this.props.multiple;
-    const activeFilters = this.props.data.filter(item => !item.disabled);
-    return Array.isArray(this.props.selected) && /*#__PURE__*/React.createElement("div", {
-      className: modules_b607bec2.selectAll
-    }, activeFilters.length === 0 ? /*#__PURE__*/React.createElement("span", null) : /*#__PURE__*/React.createElement(Button, {
-      text: true,
-      inline: true,
-      onClick: this.handleSelectAll
-    }, activeFilters.length !== this.props.selected.length ? multiple.selectAllLabel || 'Select all' : multiple.deselectAllLabel || 'Deselect all'), multiple.renderSelectedItemsDescription?.(this.props.selected, activeFilters.length) || /*#__PURE__*/React.createElement(Text, {
-      info: true
-    }, `${this.props.selected.length} selected`));
-  };
-  // Cache the value because this method is called
-  // inside `render` function which can be called N times
-  // and should be fast as possible.
-  // Cache invalidates each time hidden or userDefinedMaxHeight changes
-  _adjustListMaxHeight = memoizeOne((hidden, userDefinedMaxHeight, ringPopupTarget) => {
-    if (hidden) {
-      return userDefinedMaxHeight;
+  }, {
+    key: "getList",
+    value: function getList(ringPopupTarget) {
+      if (this.props.data.length) {
+        var maxHeight = this.props.maxHeight;
+        if (this.props.anchorElement) {
+          maxHeight = this._adjustListMaxHeight(this.props.hidden, maxHeight, ringPopupTarget);
+        }
+        if (this.props.filter) {
+          maxHeight -= FILTER_HEIGHT;
+        }
+        if (this.props.toolbar) {
+          maxHeight -= TOOLBAR_HEIGHT;
+        }
+        return /*#__PURE__*/React.createElement(List, {
+          id: this.props.listId,
+          maxHeight: maxHeight,
+          data: this.props.data,
+          activeIndex: this.props.activeIndex,
+          ref: this.listRef,
+          restoreActiveIndex: true,
+          activateFirstItem: true,
+          onSelect: this.onListSelect,
+          onResize: this.handleListResize,
+          onScrollToBottom: this.props.onLoadMore,
+          hidden: this.props.hidden,
+          shortcuts: !this.props.hidden,
+          disableMoveOverflow: this.props.disableMoveOverflow,
+          disableMoveDownOverflow: this.props.loading,
+          disableScrollToActive: this.props.disableScrollToActive,
+          compact: this.props.compact,
+          renderOptimization: this.props.renderOptimization
+        });
+      }
+      return null;
     }
-    // Calculate list's maximum height that can't
-    // get beyond the screen
-    // @see RG-1838, JT-48358
-    const minMaxHeight = 100;
-    const directions = this.props.directions || DEFAULT_DIRECTIONS;
-    // Note:
-    // Create a method which'll be called only when the popup opens and before
-    // render the list would be a better way
-    const anchorNode = this.props.anchorElement;
-    const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
-    return anchorNode != null ? Math.min(directions.reduce((maxHeight, direction) => {
-      var _maxHeightForDirectio;
-      return Math.max(maxHeight, (_maxHeightForDirectio = maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null)) !== null && _maxHeightForDirectio !== void 0 ? _maxHeightForDirectio : 0);
-    }, minMaxHeight), userDefinedMaxHeight) : userDefinedMaxHeight;
-  });
-  popupRef = el => {
-    this.popup = el;
-  };
-  list;
-  listRef = el => {
-    this.list = el;
-  };
-  filterRef = el => {
-    this.filter = el;
-    this.caret = el && new Caret(el);
-  };
-  shortcutsScope = getUID('select-popup-');
-  shortcutsMap = {
-    tab: this.tabPress
-  };
-  popupFilterShortcutsMap = {
-    up: event => this.list && this.list.upHandler(event),
-    down: event => this.list && this.list.downHandler(event),
-    home: event => this.list && this.list.homeHandler(event),
-    end: event => this.list && this.list.endHandler(event),
-    enter: event => this.list ? this.list.enterHandler(event) : this.props.onEmptyPopupEnter(event),
-    esc: event => this.props.onCloseAttempt(event, true),
-    tab: event => this.tabPress(event),
-    backspace: event => this.handleBackspace(event),
-    del: () => this.removeSelectedTag(),
-    left: event => this.handleNavigation(event, true),
-    right: event => this.handleNavigation(event)
-  };
-  render() {
-    const {
-      toolbar,
-      topbar,
-      className,
-      multiple,
-      hidden,
-      isInputMode,
-      anchorElement,
-      minWidth,
-      onCloseAttempt,
-      onOutsideClick,
-      directions,
-      top,
-      left,
-      style,
-      dir,
-      filter
-    } = this.props;
-    const classes = classNames(modules_b607bec2.popup, className);
-    return /*#__PURE__*/React.createElement(PopupTargetContext.Consumer, null, ringPopupTarget => {
-      const filterWithTags = this.getFilterWithTags();
-      const selectAll = multiple && typeof multiple === 'object' && !multiple.limit && multiple.selectAll && this.getSelectAll();
-      const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
-      const bottomLine = this.getBottomLine();
-      const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
-      return /*#__PURE__*/React.createElement(Popup, {
-        trapFocus: false,
-        ref: this.popupRef,
-        hidden: hidden || !hasContent,
-        attached: isInputMode,
-        className: classes,
-        dontCloseOnAnchorClick: true,
-        anchorElement: anchorElement,
-        minWidth: minWidth,
-        onCloseAttempt: onCloseAttempt,
-        onOutsideClick: onOutsideClick,
-        directions: directions,
-        top: top,
-        left: left,
-        onMouseDown: this.mouseDownHandler,
-        target: this.props.ringPopupTarget,
-        autoCorrectTopOverflow: false,
-        style: style
-      }, /*#__PURE__*/React.createElement("div", {
-        dir: dir
-      }, !hidden && filter && /*#__PURE__*/React.createElement(Shortcuts, {
-        map: this.shortcutsMap,
-        scope: this.shortcutsScope
-      }), topbar, hidden ? /*#__PURE__*/React.createElement("div", null) : filterWithTags, selectAll, list, bottomLine, toolbar));
-    });
-  }
-}
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _this$props2 = this.props,
+        toolbar = _this$props2.toolbar,
+        topbar = _this$props2.topbar,
+        className = _this$props2.className,
+        multiple = _this$props2.multiple,
+        hidden = _this$props2.hidden,
+        isInputMode = _this$props2.isInputMode,
+        anchorElement = _this$props2.anchorElement,
+        minWidth = _this$props2.minWidth,
+        onCloseAttempt = _this$props2.onCloseAttempt,
+        onOutsideClick = _this$props2.onOutsideClick,
+        directions = _this$props2.directions,
+        top = _this$props2.top,
+        left = _this$props2.left,
+        style = _this$props2.style,
+        dir = _this$props2.dir,
+        filter = _this$props2.filter;
+      var classes = classNames(modules_b607bec2.popup, className);
+      return /*#__PURE__*/React.createElement(PopupTargetContext.Consumer, null, function (ringPopupTarget) {
+        var filterWithTags = _this3.getFilterWithTags();
+        var selectAll = multiple && _typeof(multiple) === 'object' && !multiple.limit && multiple.selectAll && _this3.getSelectAll();
+        var list = _this3.getList(_this3.props.ringPopupTarget || ringPopupTarget);
+        var bottomLine = _this3.getBottomLine();
+        var hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
+        return /*#__PURE__*/React.createElement(Popup, {
+          trapFocus: false,
+          ref: _this3.popupRef,
+          hidden: hidden || !hasContent,
+          attached: isInputMode,
+          className: classes,
+          dontCloseOnAnchorClick: true,
+          anchorElement: anchorElement,
+          minWidth: minWidth,
+          onCloseAttempt: onCloseAttempt,
+          onOutsideClick: onOutsideClick,
+          directions: directions,
+          top: top,
+          left: left,
+          onMouseDown: _this3.mouseDownHandler,
+          target: _this3.props.ringPopupTarget,
+          autoCorrectTopOverflow: false,
+          style: style
+        }, /*#__PURE__*/React.createElement("div", {
+          dir: dir
+        }, !hidden && filter && /*#__PURE__*/React.createElement(Shortcuts, {
+          map: _this3.shortcutsMap,
+          scope: _this3.shortcutsScope
+        }), topbar, hidden ? /*#__PURE__*/React.createElement("div", null) : filterWithTags, selectAll, list, bottomLine, toolbar));
+      });
+    }
+  }]);
+  return SelectPopup;
+}(PureComponent);
+_defineProperty(SelectPopup, "defaultProps", {
+  data: [],
+  activeIndex: null,
+  toolbar: null,
+  topbar: null,
+  filter: false,
+  multiple: false,
+  message: null,
+  anchorElement: null,
+  maxHeight: 600,
+  minWidth: 240,
+  loading: false,
+  onSelect: noop,
+  onCloseAttempt: noop,
+  onOutsideClick: noop,
+  onFilter: noop,
+  onClear: noop,
+  onLoadMore: noop,
+  selected: [],
+  tags: null,
+  ringPopupTarget: null,
+  onSelectAll: noop,
+  onEmptyPopupEnter: noop
+});
 SelectPopup.propTypes = {
   activeIndex: PropTypes.number,
   anchorElement: PropTypes.instanceOf(HTMLElement),