@jetbrains/ring-ui-built 7.0.0-beta.2 → 7.0.0-beta.4

package/components/select/select__popup.js

@@ -1,15 +1,10 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper } 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.array.index-of.js';
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import searchIcon from '@jetbrains/icons/search';
 import memoizeOne from 'memoize-one';
-import PropTypes from 'prop-types';
 import Icon from '../icon/icon.js';
 import Popup, { getPopupContainer } from '../popup/popup.js';
 import { maxHeightForDirection } from '../popup/position.js';
@@ -26,39 +21,21 @@ import Shortcuts from '../shortcuts/shortcuts.js';
 import { Button } from '../button/button.js';
 import Text from '../text/text.js';
 import { ControlsHeight } from '../global/controls-height.js';
-import { refObject } from '../global/prop-types.js';
 import { createComposedRef } from '../global/composeRefs.js';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts.js';
-import { S as SelectFilter, m as modules_b607bec2 } from '../_helpers/select__filter.js';
+import { m as modules_b607bec2, S as SelectFilter } from '../_helpers/select__filter.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/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.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.regexp.to-string.js';
-import 'core-js/modules/web.dom-collections.for-each.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.array.map.js';
 import 'core-js/modules/es.array.sort.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.js';
-import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.symbol.description.js';
-import 'core-js/modules/es.array.find.js';
-import 'core-js/modules/es.array.find-index.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
@@ -72,9 +49,7 @@ 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-12px';
 import '@jetbrains/icons/remove-12px';
@@ -86,7 +61,6 @@ 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';
@@ -95,55 +69,49 @@ import '@jetbrains/icons/close-12px';
 import '@jetbrains/icons/chevron-down';
 import '../_helpers/button__classes.js';
 import '../_helpers/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';
 
-var FILTER_HEIGHT = 35;
-var TOOLBAR_HEIGHT = 49;
+const FILTER_HEIGHT = 35;
+const TOOLBAR_HEIGHT = 49;
 function noop() {}
-var FilterWithShortcuts = shortcutsHOC(SelectFilter);
-var SelectPopup = /*#__PURE__*/function (_PureComponent) {
-  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];
-    }
-    _this = _callSuper(this, SelectPopup, [].concat(args));
-    _defineProperty(_this, "state", {
+const FilterWithShortcuts = shortcutsHOC(SelectFilter);
+class SelectPopup extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
       popupFilterShortcutsOptions: {
         modal: true,
         disabled: true
       },
       tagsActiveIndex: null
     });
-    _defineProperty(_this, "isClickingPopup", false);
+    _defineProperty(this, "isClickingPopup", false);
     // This flag is set to true while an item in the popup is being clicked
-    _defineProperty(_this, "filter", void 0);
-    _defineProperty(_this, "caret", void 0);
-    _defineProperty(_this, "onFilterFocus", function () {
-      _this._togglePopupFilterShortcuts(false);
-      _this.setState({
+    _defineProperty(this, "filter", void 0);
+    _defineProperty(this, "caret", void 0);
+    _defineProperty(this, "onFilterFocus", () => {
+      this._togglePopupFilterShortcuts(false);
+      this.setState({
         tagsActiveIndex: null
       });
     });
-    _defineProperty(_this, "popupFilterOnBlur", function () {
-      if (_this.state.tagsActiveIndex === null) {
-        _this._togglePopupFilterShortcuts(true);
+    _defineProperty(this, "popupFilterOnBlur", () => {
+      if (this.state.tagsActiveIndex === null) {
+        this._togglePopupFilterShortcuts(true);
       }
     });
-    _defineProperty(_this, "mouseDownHandler", function () {
-      _this.isClickingPopup = true;
+    _defineProperty(this, "mouseDownHandler", () => {
+      this.isClickingPopup = true;
     });
-    _defineProperty(_this, "mouseUpHandler", function () {
-      _this.isClickingPopup = false;
+    _defineProperty(this, "mouseUpHandler", () => {
+      this.isClickingPopup = false;
     });
-    _defineProperty(_this, "popup", void 0);
-    _defineProperty(_this, "onListSelect", function (selected, event, opts) {
-      var getSelectItemEvent = function getSelectItemEvent() {
-        var customEvent = document.createEvent('Event');
+    _defineProperty(this, "popup", void 0);
+    _defineProperty(this, "onListSelect", (selected, event, opts) => {
+      const getSelectItemEvent = () => {
+        const customEvent = document.createEvent('Event');
         customEvent.initEvent('select', true, false);
         if (event && 'persist' in event) {
           event.persist();
@@ -151,55 +119,45 @@ var SelectPopup = /*#__PURE__*/function (_PureComponent) {
         customEvent.originalEvent = event;
         return customEvent;
       };
-      _this.props.onSelect(selected, getSelectItemEvent(), opts);
+      this.props.onSelect(selected, getSelectItemEvent(), opts);
     });
-    _defineProperty(_this, "tabPress", function (event) {
-      _this.props.onCloseAttempt(event, true);
+    _defineProperty(this, "tabPress", event => {
+      this.props.onCloseAttempt(event, true);
     });
-    _defineProperty(_this, "onClickHandler", function () {
+    _defineProperty(this, "onClickHandler", () => {
       var _this$filter;
-      return (_this$filter = _this.filter) === null || _this$filter === void 0 ? void 0 : _this$filter.focus();
+      return (_this$filter = this.filter) === null || _this$filter === void 0 ? void 0 : _this$filter.focus();
     });
-    _defineProperty(_this, "handleRemoveTag", memoize(function (tag) {
-      return function (event) {
-        return _this.removeTag(tag, event);
-      };
-    }));
-    _defineProperty(_this, "handleTagClick", memoize(function (tag) {
-      return function () {
-        if (Array.isArray(_this.props.selected)) {
-          _this.setState({
-            tagsActiveIndex: _this.props.selected.indexOf(tag)
-          });
-        }
-      };
+    _defineProperty(this, "handleRemoveTag", memoize(tag => event => this.removeTag(tag, event)));
+    _defineProperty(this, "handleTagClick", memoize(tag => () => {
+      if (Array.isArray(this.props.selected)) {
+        this.setState({
+          tagsActiveIndex: this.props.selected.indexOf(tag)
+        });
+      }
     }));
-    _defineProperty(_this, "handleListResize", function () {
-      _this.forceUpdate();
+    _defineProperty(this, "handleListResize", () => {
+      this.forceUpdate();
     });
-    _defineProperty(_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(this, "handleSelectAll", () => {
+      if (Array.isArray(this.props.selected)) {
+        this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length);
       }
     });
-    _defineProperty(_this, "getSelectAll", function () {
+    _defineProperty(this, "getSelectAll", () => {
       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__*/jsxs("div", {
+      const multiple = this.props.multiple;
+      const activeFilters = this.props.data.filter(item => !item.disabled);
+      return Array.isArray(this.props.selected) && /*#__PURE__*/jsxs("div", {
         className: modules_b607bec2.selectAll,
         children: [activeFilters.length === 0 ? /*#__PURE__*/jsx("span", {}) : /*#__PURE__*/jsx(Button, {
           text: true,
           inline: true,
-          onClick: _this.handleSelectAll,
-          children: 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__*/jsx(Text, {
+          onClick: this.handleSelectAll,
+          children: 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__*/jsx(Text, {
           info: true,
-          children: "".concat(_this.props.selected.length, " selected")
+          children: "".concat(this.props.selected.length, " selected")
         })]
       });
     });
@@ -207,369 +165,312 @@ var SelectPopup = /*#__PURE__*/function (_PureComponent) {
     // inside `render` function which can be called N times
     // and should be fast as possible.
     // Cache invalidates each time hidden or userDefinedMaxHeight changes
-    _defineProperty(_this, "_adjustListMaxHeight", memoizeOne(function (hidden, userDefinedMaxHeight, ringPopupTarget) {
+    _defineProperty(this, "_adjustListMaxHeight", memoizeOne((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;
+      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
-      var anchorNode = _this.props.anchorElement;
-      var containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
-      return anchorNode != null ? Math.min(directions.reduce(function (maxHeight, direction) {
+      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;
     }));
-    _defineProperty(_this, "popupRef", function (el) {
-      _this.popup = el;
+    _defineProperty(this, "popupRef", el => {
+      this.popup = el;
     });
-    _defineProperty(_this, "list", void 0);
-    _defineProperty(_this, "listRef", function (el) {
-      _this.list = el;
+    _defineProperty(this, "list", void 0);
+    _defineProperty(this, "listRef", el => {
+      this.list = el;
     });
-    _defineProperty(_this, "filterRef", function (el) {
-      _this.filter = el;
-      _this.caret = el && new Caret(el);
+    _defineProperty(this, "filterRef", el => {
+      this.filter = el;
+      this.caret = el && new Caret(el);
     });
-    _defineProperty(_this, "composedFilterRef", createComposedRef());
-    _defineProperty(_this, "shortcutsScope", getUID('select-popup-'));
-    _defineProperty(_this, "shortcutsMap", {
-      tab: _this.tabPress
+    _defineProperty(this, "composedFilterRef", createComposedRef());
+    _defineProperty(this, "shortcutsScope", getUID('select-popup-'));
+    _defineProperty(this, "shortcutsMap", {
+      tab: this.tabPress
     });
-    _defineProperty(_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);
-      }
+    _defineProperty(this, "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)
+    });
+  }
+  componentDidMount() {
+    window.document.addEventListener('mouseup', this.mouseUpHandler);
+  }
+  componentWillUnmount() {
+    window.document.removeEventListener('mouseup', this.mouseUpHandler);
+  }
+  focusFilter() {
+    setTimeout(() => {
+      var _this$filter2;
+      return (_this$filter2 = this.filter) === null || _this$filter2 === void 0 ? void 0 : _this$filter2.focus();
     });
-    return _this;
   }
-  _inherits(SelectPopup, _PureComponent);
-  return _createClass(SelectPopup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.document.addEventListener('mouseup', this.mouseUpHandler);
+  isEventTargetFilter(event) {
+    return event.target instanceof Element && event.target.matches('input,textarea');
+  }
+  handleNavigation(event, navigateLeft) {
+    if (this.isEventTargetFilter(event) && this.caret != null && Number(this.caret.getPosition()) > 0 || !Array.isArray(this.props.selected)) {
+      return;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.document.removeEventListener('mouseup', this.mouseUpHandler);
+    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;
     }
-  }, {
-    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();
-      });
+    if (newIndex !== null && (newIndex >= this.props.selected.length || newIndex < 0)) {
+      newIndex = null;
+      this.focusFilter();
     }
-  }, {
-    key: "isEventTargetFilter",
-    value: function isEventTargetFilter(event) {
-      return event.target instanceof Element && event.target.matches('input,textarea');
+    this.setState({
+      tagsActiveIndex: newIndex
+    });
+  }
+  removeTag(tag, event) {
+    if (!Array.isArray(this.props.selected)) {
+      return;
     }
-  }, {
-    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();
-      }
+    const _tag = tag || this.props.selected.slice(0)[this.props.selected.length - 1];
+    if (_tag) {
+      this.onListSelect(_tag, event, {
+        tryKeepOpen: true
+      });
       this.setState({
-        tagsActiveIndex: newIndex
+        tagsActiveIndex: null
       });
+      this.focusFilter();
     }
-  }, {
-    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();
-      }
-    }
-  }, {
-    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;
+  }
+  removeSelectedTag() {
+    if (Array.isArray(this.props.selected) && this.state.tagsActiveIndex != null) {
+      this.removeTag(this.props.selected[this.state.tagsActiveIndex]);
+      return false;
     }
-  }, {
-    key: "handleBackspace",
-    value: function handleBackspace(event) {
-      if (!this.props.tags) {
-        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;
+  }
+  handleBackspace(event) {
+    if (!this.props.tags) {
       return true;
     }
-  }, {
-    key: "_togglePopupFilterShortcuts",
-    value: function _togglePopupFilterShortcuts(shortcutsDisabled) {
-      this.setState({
-        popupFilterShortcutsOptions: {
-          modal: true,
-          disabled: shortcutsDisabled
-        }
-      });
+    if (!this.isEventTargetFilter(event)) {
+      this.removeSelectedTag();
+      return false;
     }
-  }, {
-    key: "isVisible",
-    value: function isVisible() {
-      return this.popup && this.popup.isVisible();
+    if ((event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) && !event.target.value) {
+      this.removeTag();
+      return false;
     }
-  }, {
-    key: "getFilter",
-    value: function getFilter() {
-      if (this.props.filter || this.props.tags) {
-        var _this$props$filterIco;
-        return /*#__PURE__*/jsxs("div", {
-          className: modules_b607bec2.filterWrapper,
-          "data-test": "ring-select-popup-filter",
-          children: [!this.props.tags && /*#__PURE__*/jsx(Icon, {
-            glyph: (_this$props$filterIco = this.props.filterIcon) !== null && _this$props$filterIco !== void 0 ? _this$props$filterIco : searchIcon,
-            className: modules_b607bec2.filterIcon,
-            "data-test-custom": "ring-select-popup-filter-icon"
-          }), /*#__PURE__*/jsx(FilterWithShortcuts, {
-            rgShortcutsOptions: this.state.popupFilterShortcutsOptions,
-            rgShortcutsMap: this.popupFilterShortcutsMap,
-            value: this.props.filterValue,
-            inputRef: this.composedFilterRef(this.filterRef, this.props.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)
-          })]
-        });
+    return true;
+  }
+  _togglePopupFilterShortcuts(shortcutsDisabled) {
+    this.setState({
+      popupFilterShortcutsOptions: {
+        modal: true,
+        disabled: shortcutsDisabled
       }
-      return null;
+    });
+  }
+  isVisible() {
+    return this.popup && this.popup.isVisible();
+  }
+  getFilter() {
+    if (this.props.filter || this.props.tags) {
+      var _this$props$filterIco;
+      return /*#__PURE__*/jsxs("div", {
+        className: modules_b607bec2.filterWrapper,
+        "data-test": "ring-select-popup-filter",
+        children: [!this.props.tags && /*#__PURE__*/jsx(Icon, {
+          glyph: (_this$props$filterIco = this.props.filterIcon) !== null && _this$props$filterIco !== void 0 ? _this$props$filterIco : searchIcon,
+          className: modules_b607bec2.filterIcon,
+          "data-test-custom": "ring-select-popup-filter-icon"
+        }), /*#__PURE__*/jsx(FilterWithShortcuts, {
+          rgShortcutsOptions: this.state.popupFilterShortcutsOptions,
+          rgShortcutsMap: this.popupFilterShortcutsMap,
+          value: this.props.filterValue,
+          inputRef: this.composedFilterRef(this.filterRef, this.props.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)
+        })]
+      });
     }
-  }, {
-    key: "getCustomTag",
-    value: function getCustomTag(tags) {
-      if (tags !== null && typeof tags !== 'boolean') {
-        return tags.customTagComponent;
-      }
-      return undefined;
+    return null;
+  }
+  getCustomTag(tags) {
+    if (tags !== null && typeof tags !== 'boolean') {
+      return tags.customTagComponent;
     }
-  }, {
-    key: "getTags",
-    value: function getTags() {
-      return Array.isArray(this.props.selected) && /*#__PURE__*/jsx("div", {
-        children: /*#__PURE__*/jsx(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)
-        })
+    return undefined;
+  }
+  getTags() {
+    return Array.isArray(this.props.selected) && /*#__PURE__*/jsx("div", {
+      children: /*#__PURE__*/jsx(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)
+      })
+    });
+  }
+  getFilterWithTags() {
+    if (this.props.tags) {
+      const classes = classNames([modules_b607bec2.filterWithTags, {
+        [modules_b607bec2.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled
+      }]);
+      return /*#__PURE__*/jsxs("div", {
+        className: classes,
+        children: [this.getTags(), this.getFilter()]
       });
     }
-  }, {
-    key: "getFilterWithTags",
-    value: function getFilterWithTags() {
-      if (this.props.tags) {
-        var classes = classNames([modules_b607bec2.filterWithTags, {
-          [modules_b607bec2.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled
-        }]);
-        return /*#__PURE__*/jsxs("div", {
-          className: classes,
-          children: [this.getTags(), this.getFilter()]
-        });
+    return this.getFilter();
+  }
+  getBottomLine() {
+    const {
+      loading,
+      message,
+      data
+    } = this.props;
+    const hasMoreThanOneItem = data.length > 1;
+    return (loading || message) && /*#__PURE__*/jsxs("div", {
+      className: classNames(modules_b607bec2.bottomLine, {
+        [modules_b607bec2.bottomLineOverItem]: hasMoreThanOneItem
+      }),
+      children: [loading && /*#__PURE__*/jsx(LoaderInline, {}), message && /*#__PURE__*/jsx("div", {
+        className: modules_b607bec2.message,
+        children: message
+      })]
+    });
+  }
+  getList(ringPopupTarget) {
+    if (this.props.data.length) {
+      let {
+        maxHeight
+      } = this.props;
+      if (this.props.anchorElement) {
+        maxHeight = this._adjustListMaxHeight(this.props.hidden, maxHeight, ringPopupTarget);
       }
-      return this.getFilter();
-    }
-  }, {
-    key: "getBottomLine",
-    value: function getBottomLine() {
-      var _this$props = this.props,
-        loading = _this$props.loading,
-        message = _this$props.message,
-        data = _this$props.data;
-      var hasMoreThanOneItem = data.length > 1;
-      return (loading || message) && /*#__PURE__*/jsxs("div", {
-        className: classNames(modules_b607bec2.bottomLine, {
-          [modules_b607bec2.bottomLineOverItem]: hasMoreThanOneItem
-        }),
-        children: [loading && /*#__PURE__*/jsx(LoaderInline, {}), message && /*#__PURE__*/jsx("div", {
-          className: modules_b607bec2.message,
-          children: message
-        })]
+      if (this.props.filter) {
+        maxHeight -= FILTER_HEIGHT;
+      }
+      if (this.props.toolbar) {
+        maxHeight -= TOOLBAR_HEIGHT;
+      }
+      return /*#__PURE__*/jsx(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,
+        preventListOverscroll: this.props.preventListOverscroll,
+        renderOptimization: this.props.renderOptimization
       });
     }
-  }, {
-    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__*/jsx(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,
-          preventListOverscroll: this.props.preventListOverscroll,
-          renderOptimization: this.props.renderOptimization
+    return null;
+  }
+  render() {
+    const {
+      toolbar,
+      topbar,
+      className,
+      multiple,
+      hidden,
+      isInputMode,
+      anchorElement,
+      minWidth,
+      onCloseAttempt,
+      onOutsideClick,
+      directions,
+      top,
+      left,
+      offset,
+      style,
+      dir,
+      filter
+    } = this.props;
+    const classes = classNames(modules_b607bec2.popup, className);
+    return /*#__PURE__*/jsx(PopupTargetContext.Consumer, {
+      children: 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__*/jsx(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,
+          offset: offset,
+          onMouseDown: this.mouseDownHandler,
+          target: this.props.ringPopupTarget,
+          autoCorrectTopOverflow: false,
+          style: style,
+          children: /*#__PURE__*/jsxs("div", {
+            dir: dir,
+            children: [!hidden && filter && /*#__PURE__*/jsx(Shortcuts, {
+              map: this.shortcutsMap,
+              scope: this.shortcutsScope
+            }), topbar, hidden ? /*#__PURE__*/jsx("div", {}) : filterWithTags, selectAll, list, bottomLine, toolbar]
+          })
         });
       }
-      return null;
-    }
-  }, {
-    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,
-        offset = _this$props2.offset,
-        style = _this$props2.style,
-        dir = _this$props2.dir,
-        filter = _this$props2.filter;
-      var classes = classNames(modules_b607bec2.popup, className);
-      return /*#__PURE__*/jsx(PopupTargetContext.Consumer, {
-        children: function children(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__*/jsx(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,
-            offset: offset,
-            onMouseDown: _this3.mouseDownHandler,
-            target: _this3.props.ringPopupTarget,
-            autoCorrectTopOverflow: false,
-            style: style,
-            children: /*#__PURE__*/jsxs("div", {
-              dir: dir,
-              children: [!hidden && filter && /*#__PURE__*/jsx(Shortcuts, {
-                map: _this3.shortcutsMap,
-                scope: _this3.shortcutsScope
-              }), topbar, hidden ? /*#__PURE__*/jsx("div", {}) : filterWithTags, selectAll, list, bottomLine, toolbar]
-            })
-          });
-        }
-      });
-    }
-  }]);
-}(PureComponent);
+    });
+  }
+}
 _defineProperty(SelectPopup, "defaultProps", {
   data: [],
   activeIndex: null,
@@ -596,54 +497,5 @@ _defineProperty(SelectPopup, "defaultProps", {
   onSelectAll: noop,
   onEmptyPopupEnter: noop
 });
-SelectPopup.propTypes = {
-  activeIndex: PropTypes.number,
-  anchorElement: PropTypes.instanceOf(HTMLElement),
-  className: PropTypes.string,
-  compact: PropTypes.bool,
-  data: PropTypes.array,
-  dir: PropTypes.oneOf(['ltr', 'rtl']),
-  directions: PropTypes.array,
-  disabled: PropTypes.bool,
-  disableMoveOverflow: PropTypes.bool,
-  disableScrollToActive: PropTypes.bool,
-  filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    value: PropTypes.string,
-    placeholder: PropTypes.string
-  })]),
-  filterValue: PropTypes.string,
-  filterIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  filterRef: PropTypes.oneOfType([PropTypes.func, refObject(PropTypes.instanceOf(HTMLInputElement))]),
-  hidden: PropTypes.bool,
-  isInputMode: PropTypes.bool,
-  listId: PropTypes.string,
-  maxHeight: PropTypes.number,
-  message: PropTypes.string,
-  minWidth: PropTypes.number,
-  multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    label: PropTypes.string,
-    limit: PropTypes.number,
-    selectAll: PropTypes.bool
-  })]),
-  left: PropTypes.number,
-  loading: PropTypes.bool,
-  onClear: PropTypes.func,
-  onCloseAttempt: PropTypes.func,
-  onOutsideClick: PropTypes.func,
-  onEmptyPopupEnter: PropTypes.func,
-  onFilter: PropTypes.func,
-  onLoadMore: PropTypes.func,
-  onSelect: PropTypes.func,
-  onSelectAll: PropTypes.func,
-  renderOptimization: PropTypes.bool,
-  ringPopupTarget: PropTypes.string,
-  selected: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  style: PropTypes.object,
-  tags: PropTypes.object,
-  toolbar: PropTypes.node,
-  topbar: PropTypes.node,
-  top: PropTypes.number,
-  preventListOverscroll: PropTypes.bool
-};
 
 export { SelectPopup as default };