@jetbrains/ring-ui-built 6.0.30 → 6.0.32

package/components/tags-input/tags-input.js

@@ -1,15 +1,4 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, f as _classCallCheck, g as _callSuper, h as _asyncToGenerator, i as _regeneratorRuntime } 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 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.promise.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import React, { Component, PureComponent } from 'react';
+import React, { PureComponent, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import getEventKey from '../global/get-event-key.js';
@@ -22,20 +11,12 @@ import { S as Size, m as modules_88cfaf40 } from '../_helpers/input.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import getUID from '../global/get-uid.js';
 import { ControlLabel } from '../control-label/control-label.js';
-import 'core-js/modules/es.array.find.js';
-import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.object.values.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.for-each.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close-12px';
 import 'deep-equal';
 import '../dropdown/dropdown.js';
 import '../global/data-tests.js';
-import 'core-js/modules/es.object.entries.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '@jetbrains/icons/chevron-10px';
@@ -43,40 +24,26 @@ import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
-import 'core-js/modules/es.weak-map.js';
 import '../button/button.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
-import 'core-js/modules/es.string.match.js';
 import '../global/dom.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.js';
 import '../avatar/fallback-avatar.js';
-import 'core-js/modules/es.array.from.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import '../popup/popup.js';
 import 'react-dom';
 import '../global/schedule-raf.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.string.includes.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 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 '../list/list.js';
-import 'core-js/modules/es.symbol.js';
-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';
@@ -115,418 +82,353 @@ function noop() {}
 /**
  * @name Tags Input
  */
-var POPUP_VERTICAL_SHIFT = 2;
-var TagsInput = /*#__PURE__*/function (_PureComponent) {
-  function TagsInput(props) {
-    var _this;
-    _classCallCheck(this, TagsInput);
-    _this = _callSuper(this, TagsInput, [props]);
-    _defineProperty(_this, "state", {
-      tags: [],
-      prevTags: null,
-      suggestions: [],
-      loading: true,
-      focused: false,
-      query: '',
-      activeIndex: 0
-    });
-    _defineProperty(_this, "ngModelStateField", void 0);
-    _defineProperty(_this, "id", _this.props.id || getUID('ring-tags-list-'));
-    _defineProperty(_this, "node", void 0);
-    _defineProperty(_this, "nodeRef", function (node) {
-      _this.node = node;
-    });
-    _defineProperty(_this, "input", void 0);
-    _defineProperty(_this, "caret", void 0);
-    _defineProperty(_this, "focusInput", function () {
-      var _this$getInputNode;
-      (_this$getInputNode = _this.getInputNode()) === null || _this$getInputNode === void 0 || _this$getInputNode.focus();
-    });
-    _defineProperty(_this, "focus", function () {
-      _this.focusInput();
-    });
-    _defineProperty(_this, "addTag", function (tag) {
-      var _this$select, _this$select2;
-      if (tag == null) {
-        return;
-      }
-      var isUniqueTag = _this.state.tags.filter(function (item) {
-        return tag.key === item.key;
-      }).length === 0;
-      (_this$select = _this.select) === null || _this$select === void 0 || _this$select.clear();
-      (_this$select2 = _this.select) === null || _this$select2 === void 0 || _this$select2.filterValue('');
-      if (isUniqueTag) {
-        _this.setState(function (prevState) {
-          return {
-            tags: prevState.tags.concat([tag])
-          };
-        });
-        _this.props.onAddTag({
-          tag
-        });
-        _this.setActiveIndex();
-      }
-    });
-    _defineProperty(_this, "clickHandler", function (event) {
-      var _this$select3;
-      if (event.target !== _this.node && event.target.parentElement !== _this.node) {
-        return;
+const POPUP_VERTICAL_SHIFT = 2;
+class TagsInput extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    tags: PropTypes.array,
+    /**
+     * Datasource should return array(or promise) of suggestions.
+     * Each suggestion should contain key and label fields.
+     * DataSource should handle caching and response racing (when later request
+     * responded earlier) by himself.
+     */
+    dataSource: PropTypes.func,
+    onAddTag: PropTypes.func,
+    onRemoveTag: PropTypes.func,
+    customTagComponent: PropTypes.instanceOf(Component),
+    maxPopupHeight: PropTypes.number,
+    minPopupWidth: PropTypes.number,
+    placeholder: PropTypes.string,
+    canNotBeEmpty: PropTypes.bool,
+    disabled: PropTypes.bool,
+    autoOpen: PropTypes.bool,
+    renderOptimization: PropTypes.bool,
+    filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+      fn: PropTypes.func
+    })]),
+    size: PropTypes.string,
+    height: PropTypes.string,
+    label: PropTypes.node,
+    loadingMessage: PropTypes.string,
+    notFoundMessage: PropTypes.string,
+    hint: PropTypes.node,
+    allowAddNewTags: PropTypes.bool
+  };
+  static defaultProps = {
+    dataSource: noop,
+    onAddTag: noop,
+    onRemoveTag: noop,
+    customTagComponent: null,
+    maxPopupHeight: 500,
+    minPopupWidth: 360,
+    canNotBeEmpty: false,
+    disabled: false,
+    autoOpen: false,
+    renderOptimization: true,
+    allowAddNewTags: false,
+    filter: {
+      fn: () => true
+    },
+    placeholder: 'Select an option',
+    size: Size.M
+  };
+  constructor(props) {
+    super(props);
+    this.ngModelStateField = TagsInput.ngModelStateField;
+  }
+  state = {
+    tags: [],
+    prevTags: null,
+    suggestions: [],
+    loading: true,
+    focused: false,
+    query: '',
+    activeIndex: 0
+  };
+  static getDerivedStateFromProps(_ref, _ref2) {
+    let {
+      tags
+    } = _ref;
+    let {
+      prevTags
+    } = _ref2;
+    const nextState = {
+      prevTags: tags
+    };
+    if (tags != null && tags !== prevTags) {
+      Object.assign(nextState, {
+        tags,
+        activeIndex: tags.length
+      });
+    }
+    return nextState;
+  }
+  componentDidMount() {
+    if (this.props.autoOpen && !this.props.disabled) {
+      this.focusInput();
+      this.loadSuggestions();
+      this.select?._showPopup();
+    }
+  }
+  static ngModelStateField = 'tags';
+  ngModelStateField;
+  static contextType = ControlsHeightContext;
+  id = this.props.id || getUID('ring-tags-list-');
+  node;
+  nodeRef = node => {
+    this.node = node;
+  };
+  input;
+  caret;
+  getInputNode() {
+    if (!this.input) {
+      this.input = this.select?.filter;
+      if (this.input) {
+        this.caret = new Caret(this.input);
       }
-      (_this$select3 = _this.select) === null || _this$select3 === void 0 || _this$select3._clickHandler();
+    }
+    return this.input;
+  }
+  setActiveIndex(activeIndex) {
+    this.setState({
+      activeIndex
     });
-    _defineProperty(_this, "filterExistingTags", function (suggestions) {
-      var tagsMap = new Map(_this.state.tags.map(function (tag) {
-        return [tag.key, tag];
+  }
+  focusInput = () => {
+    this.getInputNode()?.focus();
+  };
+  focus = () => {
+    this.focusInput();
+  };
+  addTag = tag => {
+    if (tag == null) {
+      return;
+    }
+    const isUniqueTag = this.state.tags.filter(item => tag.key === item.key).length === 0;
+    this.select?.clear();
+    this.select?.filterValue('');
+    if (isUniqueTag) {
+      this.setState(prevState => ({
+        tags: prevState.tags.concat([tag])
       }));
-      return suggestions.filter(function (suggestion) {
-        return !tagsMap.has(suggestion.key);
+      this.props.onAddTag({
+        tag
       });
-    });
-    _defineProperty(_this, "loadSuggestions", function () {
-      var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      this.setActiveIndex();
+    }
+  };
+  onRemoveTag(tagToRemove) {
+    return Promise.resolve(this.props.onRemoveTag({
+      tag: tagToRemove
+    })).then(() => {
+      const tags = this.state.tags.filter(tag => tag !== tagToRemove);
+      if (this.node) {
+        this.setState({
+          tags
+        });
+        this.focusInput();
+      }
+      return tags;
+    }, this.focusInput);
+  }
+  clickHandler = event => {
+    if (event.target !== this.node && event.target.parentElement !== this.node) {
+      return;
+    }
+    this.select?._clickHandler();
+  };
+  filterExistingTags = suggestions => {
+    const tagsMap = new Map(this.state.tags.map(tag => [tag.key, tag]));
+    return suggestions.filter(suggestion => !tagsMap.has(suggestion.key));
+  };
+  loadSuggestions = (() => {
+    var _this = this;
+    return function () {
+      let query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       return _this.setState({
         loading: true,
         query
-      }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var suggestionsResult, allSuggestions, suggestions;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              suggestionsResult = _this.props.dataSource({
-                query
-              });
-              if (!Array.isArray(suggestionsResult)) {
-                _context.next = 6;
-                break;
-              }
-              _context.t0 = suggestionsResult;
-              _context.next = 9;
-              break;
-            case 6:
-              _context.next = 8;
-              return suggestionsResult;
-            case 8:
-              _context.t0 = _context.sent;
-            case 9:
-              allSuggestions = _context.t0;
-              suggestions = _this.filterExistingTags(allSuggestions);
-              if (_this.node && query === _this.state.query) {
-                _this.setState({
-                  suggestions,
-                  loading: false
-                });
-              }
-              _context.next = 17;
-              break;
-            case 14:
-              _context.prev = 14;
-              _context.t1 = _context["catch"](0);
-              _this.setState({
-                loading: false
-              });
-            case 17:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[0, 14]]);
-      })));
-    });
-    _defineProperty(_this, "_focusHandler", function () {
-      _this.setActiveIndex(null);
-      _this.setState({
-        focused: true
-      });
-    });
-    _defineProperty(_this, "_blurHandler", function () {
-      _this.setState({
-        focused: false
-      });
-    });
-    _defineProperty(_this, "selectTag", function (moveForward) {
-      var activeIndex = typeof _this.state.activeIndex === 'number' ? _this.state.activeIndex : _this.state.tags.length + 1;
-      var newActiveIndex = activeIndex + (moveForward ? 1 : -1);
-      if (newActiveIndex >= _this.state.tags.length) {
-        newActiveIndex = _this.state.tags.length - 1;
-      } else if (newActiveIndex < 0) {
-        newActiveIndex = 0;
-      }
-      if (_this.state.activeIndex !== newActiveIndex) {
-        _this.setActiveIndex(newActiveIndex);
-      }
-    });
-    _defineProperty(_this, "handleKeyDown", function (event) {
-      var _this$select4;
-      var key = getEventKey(event);
-      var isInputFocused = function isInputFocused() {
-        var _this$getInputNode$ta, _this$getInputNode2;
-        return event.target instanceof Element && event.target.matches((_this$getInputNode$ta = (_this$getInputNode2 = _this.getInputNode()) === null || _this$getInputNode2 === void 0 ? void 0 : _this$getInputNode2.tagName) !== null && _this$getInputNode$ta !== void 0 ? _this$getInputNode$ta : '');
-      };
-      if (key === ' ' && _this.props.allowAddNewTags) {
-        var _this$getInputNode3;
-        event.stopPropagation();
-        var value = (_this$getInputNode3 = _this.getInputNode()) === null || _this$getInputNode3 === void 0 ? void 0 : _this$getInputNode3.value;
-        if (value != null && value !== '') {
-          _this.handleTagCreation(value);
-        }
-        return true;
-      }
-      if ((_this$select4 = _this.select) !== null && _this$select4 !== void 0 && (_this$select4 = _this$select4._popup) !== null && _this$select4 !== void 0 && _this$select4.isVisible()) {
-        return true;
-      }
-      if (key === 'ArrowLeft') {
-        if (_this.getInputNode() && _this.caret != null && Number(_this.caret.getPosition()) > 0) {
-          return true;
-        }
-        _this.selectTag();
-        return false;
-      }
-      if (key === 'ArrowRight' && !isInputFocused()) {
-        if (_this.state.activeIndex === _this.state.tags.length - 1) {
-          if (!_this.props.disabled) {
-            var _this$getInputNode4;
-            (_this$getInputNode4 = _this.getInputNode()) === null || _this$getInputNode4 === void 0 || _this$getInputNode4.focus();
-            _this.setActiveIndex();
+      }, async () => {
+        try {
+          const suggestionsResult = _this.props.dataSource({
+            query
+          });
+          const allSuggestions = Array.isArray(suggestionsResult) ? suggestionsResult : await suggestionsResult;
+          const suggestions = _this.filterExistingTags(allSuggestions);
+          if (_this.node && query === _this.state.query) {
+            _this.setState({
+              suggestions,
+              loading: false
+            });
           }
-        } else {
-          _this.selectTag(true);
-        }
-        return false;
-      }
-      if (!_this.props.disabled) {
-        var _this$getInputNode5;
-        if (key === 'Backspace' && !((_this$getInputNode5 = _this.getInputNode()) !== null && _this$getInputNode5 !== void 0 && _this$getInputNode5.value)) {
-          var _this$select5;
-          event.preventDefault();
-          var tagsLength = _this.state.tags.length;
-          (_this$select5 = _this.select) === null || _this$select5 === void 0 || _this$select5._hidePopup(true); // otherwise confirmation may be overlapped by popup
-          _this.onRemoveTag(_this.state.tags[tagsLength - 1]);
-          return false;
-        }
-        if ((key === 'Delete' || key === 'Backspace') && _this.state.activeIndex != null && _this.state.tags[_this.state.activeIndex]) {
-          _this.onRemoveTag(_this.state.tags[_this.state.activeIndex]).then(function () {
-            return _this.selectTag(true);
+        } catch (e) {
+          _this.setState({
+            loading: false
           });
-          return false;
         }
-      }
-      return true;
-    });
-    _defineProperty(_this, "handleClick", memoize(function (tag) {
-      return function () {
-        _this.setActiveIndex(_this.state.tags.indexOf(tag));
-      };
-    }));
-    _defineProperty(_this, "handleRemove", memoize(function (tag) {
-      return function () {
-        return _this.onRemoveTag(tag);
-      };
-    }));
-    _defineProperty(_this, "handleTagCreation", function (label) {
-      _this.addTag({
-        key: label,
-        label
       });
+    };
+  })();
+  _focusHandler = () => {
+    this.setActiveIndex(null);
+    this.setState({
+      focused: true
     });
-    _defineProperty(_this, "select", void 0);
-    _defineProperty(_this, "selectRef", function (el) {
-      _this.select = el;
+  };
+  _blurHandler = () => {
+    this.setState({
+      focused: false
     });
-    _this.ngModelStateField = TagsInput.ngModelStateField;
-    return _this;
-  }
-  _inherits(TagsInput, _PureComponent);
-  return _createClass(TagsInput, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.autoOpen && !this.props.disabled) {
-        var _this$select6;
-        this.focusInput();
-        this.loadSuggestions();
-        (_this$select6 = this.select) === null || _this$select6 === void 0 || _this$select6._showPopup();
-      }
+  };
+  selectTag = moveForward => {
+    const activeIndex = typeof this.state.activeIndex === 'number' ? this.state.activeIndex : this.state.tags.length + 1;
+    let newActiveIndex = activeIndex + (moveForward ? 1 : -1);
+    if (newActiveIndex >= this.state.tags.length) {
+      newActiveIndex = this.state.tags.length - 1;
+    } else if (newActiveIndex < 0) {
+      newActiveIndex = 0;
     }
-  }, {
-    key: "getInputNode",
-    value: function getInputNode() {
-      if (!this.input) {
-        var _this$select7;
-        this.input = (_this$select7 = this.select) === null || _this$select7 === void 0 ? void 0 : _this$select7.filter;
-        if (this.input) {
-          this.caret = new Caret(this.input);
-        }
-      }
-      return this.input;
+    if (this.state.activeIndex !== newActiveIndex) {
+      this.setActiveIndex(newActiveIndex);
     }
-  }, {
-    key: "setActiveIndex",
-    value: function setActiveIndex(activeIndex) {
-      this.setState({
-        activeIndex
-      });
+  };
+  handleKeyDown = event => {
+    const key = getEventKey(event);
+    const isInputFocused = () => {
+      var _this$getInputNode$ta;
+      return event.target instanceof Element && event.target.matches((_this$getInputNode$ta = this.getInputNode()?.tagName) !== null && _this$getInputNode$ta !== void 0 ? _this$getInputNode$ta : '');
+    };
+    if (key === ' ' && this.props.allowAddNewTags) {
+      event.stopPropagation();
+      const value = this.getInputNode()?.value;
+      if (value != null && value !== '') {
+        this.handleTagCreation(value);
+      }
+      return true;
     }
-  }, {
-    key: "onRemoveTag",
-    value: function onRemoveTag(tagToRemove) {
-      var _this2 = this;
-      return Promise.resolve(this.props.onRemoveTag({
-        tag: tagToRemove
-      })).then(function () {
-        var tags = _this2.state.tags.filter(function (tag) {
-          return tag !== tagToRemove;
-        });
-        if (_this2.node) {
-          _this2.setState({
-            tags
-          });
-          _this2.focusInput();
-        }
-        return tags;
-      }, this.focusInput);
+    if (this.select?._popup?.isVisible()) {
+      return true;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state = this.state,
-        focused = _this$state.focused,
-        tags = _this$state.tags,
-        activeIndex = _this$state.activeIndex;
-      var _this$props = this.props,
-        disabled = _this$props.disabled,
-        canNotBeEmpty = _this$props.canNotBeEmpty,
-        allowAddNewTags = _this$props.allowAddNewTags,
-        filter = _this$props.filter,
-        size = _this$props.size,
-        labelType = _this$props.labelType,
-        _this$props$height = _this$props.height,
-        height = _this$props$height === void 0 ? this.context : _this$props$height,
-        label = _this$props.label;
-      var classes = classNames(modules_5aa8aaf3.tagsInput, [modules_88cfaf40["size".concat(size)]], [modules_88cfaf40["height".concat(height)]], {
-        [modules_5aa8aaf3.tagsInputDisabled]: disabled,
-        [modules_5aa8aaf3.tagsInputFocused]: focused
-      }, this.props.className);
-      return /*#__PURE__*/React.createElement("div", {
-        // it transfers focus to input
-        role: "presentation",
-        className: classes,
-        onKeyDown: this.handleKeyDown,
-        onClick: this.clickHandler,
-        ref: this.nodeRef
-      }, label && /*#__PURE__*/React.createElement(ControlLabel, {
-        htmlFor: this.id,
-        disabled: disabled,
-        type: labelType
-      }, label), /*#__PURE__*/React.createElement(TagsList, {
-        tags: tags,
-        activeIndex: activeIndex,
-        disabled: disabled,
-        canNotBeEmpty: canNotBeEmpty,
-        handleRemove: this.handleRemove,
-        className: modules_5aa8aaf3.tagsList,
-        tagClassName: modules_5aa8aaf3.tag,
-        handleClick: this.handleClick,
-        customTagComponent: this.props.customTagComponent
-      }, /*#__PURE__*/React.createElement(Select, {
-        id: this.id,
-        ref: this.selectRef,
-        size: Select.Size.AUTO,
-        type: Select.Type.INPUT_WITHOUT_CONTROLS,
-        inputPlaceholder: this.props.placeholder,
-        data: this.state.suggestions,
-        className: classNames(modules_5aa8aaf3.tagsSelect),
-        onSelect: this.addTag,
-        onFocus: this._focusHandler,
-        onBlur: this._blurHandler,
-        renderOptimization: this.props.renderOptimization,
-        add: allowAddNewTags ? {
-          prefix: 'Add new tag'
-        } : undefined,
-        onAdd: allowAddNewTags ? this.handleTagCreation : undefined,
-        filter: filter,
-        maxHeight: this.props.maxPopupHeight,
-        minWidth: this.props.minPopupWidth,
-        top: POPUP_VERTICAL_SHIFT,
-        loading: this.state.loading,
-        onFilter: this.loadSuggestions,
-        onBeforeOpen: this.loadSuggestions,
-        onKeyDown: this.handleKeyDown,
-        disabled: this.props.disabled,
-        loadingMessage: this.props.loadingMessage,
-        notFoundMessage: this.props.notFoundMessage,
-        hint: this.props.hint
-      })));
+    if (key === 'ArrowLeft') {
+      if (this.getInputNode() && this.caret != null && Number(this.caret.getPosition()) > 0) {
+        return true;
+      }
+      this.selectTag();
+      return false;
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(_ref2, _ref3) {
-      var tags = _ref2.tags;
-      var prevTags = _ref3.prevTags;
-      var nextState = {
-        prevTags: tags
-      };
-      if (tags != null && tags !== prevTags) {
-        Object.assign(nextState, {
-          tags,
-          activeIndex: tags.length
-        });
+    if (key === 'ArrowRight' && !isInputFocused()) {
+      if (this.state.activeIndex === this.state.tags.length - 1) {
+        if (!this.props.disabled) {
+          this.getInputNode()?.focus();
+          this.setActiveIndex();
+        }
+      } else {
+        this.selectTag(true);
       }
-      return nextState;
+      return false;
     }
-  }]);
-}(PureComponent);
-_defineProperty(TagsInput, "propTypes", {
-  className: PropTypes.string,
-  tags: PropTypes.array,
-  /**
-   * Datasource should return array(or promise) of suggestions.
-   * Each suggestion should contain key and label fields.
-   * DataSource should handle caching and response racing (when later request
-   * responded earlier) by himself.
-   */
-  dataSource: PropTypes.func,
-  onAddTag: PropTypes.func,
-  onRemoveTag: PropTypes.func,
-  customTagComponent: PropTypes.instanceOf(Component),
-  maxPopupHeight: PropTypes.number,
-  minPopupWidth: PropTypes.number,
-  placeholder: PropTypes.string,
-  canNotBeEmpty: PropTypes.bool,
-  disabled: PropTypes.bool,
-  autoOpen: PropTypes.bool,
-  renderOptimization: PropTypes.bool,
-  filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    fn: PropTypes.func
-  })]),
-  size: PropTypes.string,
-  height: PropTypes.string,
-  label: PropTypes.node,
-  loadingMessage: PropTypes.string,
-  notFoundMessage: PropTypes.string,
-  hint: PropTypes.node,
-  allowAddNewTags: PropTypes.bool
-});
-_defineProperty(TagsInput, "defaultProps", {
-  dataSource: noop,
-  onAddTag: noop,
-  onRemoveTag: noop,
-  customTagComponent: null,
-  maxPopupHeight: 500,
-  minPopupWidth: 360,
-  canNotBeEmpty: false,
-  disabled: false,
-  autoOpen: false,
-  renderOptimization: true,
-  allowAddNewTags: false,
-  filter: {
-    fn: function fn() {
-      return true;
+    if (!this.props.disabled) {
+      if (key === 'Backspace' && !this.getInputNode()?.value) {
+        event.preventDefault();
+        const tagsLength = this.state.tags.length;
+        this.select?._hidePopup(true); // otherwise confirmation may be overlapped by popup
+        this.onRemoveTag(this.state.tags[tagsLength - 1]);
+        return false;
+      }
+      if ((key === 'Delete' || key === 'Backspace') && this.state.activeIndex != null && this.state.tags[this.state.activeIndex]) {
+        this.onRemoveTag(this.state.tags[this.state.activeIndex]).then(() => this.selectTag(true));
+        return false;
+      }
     }
-  },
-  placeholder: 'Select an option',
-  size: Size.M
-});
-_defineProperty(TagsInput, "ngModelStateField", 'tags');
-_defineProperty(TagsInput, "contextType", ControlsHeightContext);
-var RerenderableTagsInput = rerenderHOC(TagsInput);
+    return true;
+  };
+  handleClick = memoize(tag => () => {
+    this.setActiveIndex(this.state.tags.indexOf(tag));
+  });
+  handleRemove = memoize(tag => () => this.onRemoveTag(tag));
+  handleTagCreation = label => {
+    this.addTag({
+      key: label,
+      label
+    });
+  };
+  select;
+  selectRef = el => {
+    this.select = el;
+  };
+  render() {
+    const {
+      focused,
+      tags,
+      activeIndex
+    } = this.state;
+    const {
+      disabled,
+      canNotBeEmpty,
+      allowAddNewTags,
+      filter,
+      size,
+      labelType,
+      height = this.context,
+      label
+    } = this.props;
+    const classes = classNames(modules_5aa8aaf3.tagsInput, [modules_88cfaf40[`size${size}`]], [modules_88cfaf40[`height${height}`]], {
+      [modules_5aa8aaf3.tagsInputDisabled]: disabled,
+      [modules_5aa8aaf3.tagsInputFocused]: focused
+    }, this.props.className);
+    return /*#__PURE__*/React.createElement("div", {
+      // it transfers focus to input
+      role: "presentation",
+      className: classes,
+      onKeyDown: this.handleKeyDown,
+      onClick: this.clickHandler,
+      ref: this.nodeRef
+    }, label && /*#__PURE__*/React.createElement(ControlLabel, {
+      htmlFor: this.id,
+      disabled: disabled,
+      type: labelType
+    }, label), /*#__PURE__*/React.createElement(TagsList, {
+      tags: tags,
+      activeIndex: activeIndex,
+      disabled: disabled,
+      canNotBeEmpty: canNotBeEmpty,
+      handleRemove: this.handleRemove,
+      className: modules_5aa8aaf3.tagsList,
+      tagClassName: modules_5aa8aaf3.tag,
+      handleClick: this.handleClick,
+      customTagComponent: this.props.customTagComponent
+    }, /*#__PURE__*/React.createElement(Select, {
+      id: this.id,
+      ref: this.selectRef,
+      size: Select.Size.AUTO,
+      type: Select.Type.INPUT_WITHOUT_CONTROLS,
+      inputPlaceholder: this.props.placeholder,
+      data: this.state.suggestions,
+      className: classNames(modules_5aa8aaf3.tagsSelect),
+      onSelect: this.addTag,
+      onFocus: this._focusHandler,
+      onBlur: this._blurHandler,
+      renderOptimization: this.props.renderOptimization,
+      add: allowAddNewTags ? {
+        prefix: 'Add new tag'
+      } : undefined,
+      onAdd: allowAddNewTags ? this.handleTagCreation : undefined,
+      filter: filter,
+      maxHeight: this.props.maxPopupHeight,
+      minWidth: this.props.minPopupWidth,
+      top: POPUP_VERTICAL_SHIFT,
+      loading: this.state.loading,
+      onFilter: this.loadSuggestions,
+      onBeforeOpen: this.loadSuggestions,
+      onKeyDown: this.handleKeyDown,
+      disabled: this.props.disabled,
+      loadingMessage: this.props.loadingMessage,
+      notFoundMessage: this.props.notFoundMessage,
+      hint: this.props.hint
+    })));
+  }
+}
+const RerenderableTagsInput = rerenderHOC(TagsInput);
 
 export { RerenderableTagsInput, TagsInput as default };