@jetbrains/ring-ui-built 7.0.0-beta.1 → 7.0.0-beta.10

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

@@ -1,16 +1,6 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper, g as _asyncToGenerator, h 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 { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { Component, PureComponent } from 'react';
-import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
 import classNames from 'classnames';
 import getEventKey from '../global/get-event-key.js';
 import Select from '../select/select.js';
@@ -23,20 +13,15 @@ import { ControlsHeightContext } from '../global/controls-height.js';
 import getUID from '../global/get-uid.js';
 import { ControlLabel } from '../control-label/control-label.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-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 '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close-12px';
-import 'deep-equal';
+import 'dequal';
 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';
@@ -44,29 +29,18 @@ 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';
@@ -76,7 +50,6 @@ 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';
@@ -92,7 +65,6 @@ import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
-import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../control-help/control-help.js';
 import '../list/list__custom.js';
@@ -117,13 +89,13 @@ function noop() {}
 /**
  * @name Tags Input
  */
-var POPUP_VERTICAL_SHIFT = 2;
-var TagsInput = /*#__PURE__*/function (_PureComponent) {
-  function TagsInput(props) {
+const POPUP_VERTICAL_SHIFT = 2;
+class TagsInput extends PureComponent {
+  constructor(props) {
     var _this;
-    _classCallCheck(this, TagsInput);
-    _this = _callSuper(this, TagsInput, [props]);
-    _defineProperty(_this, "state", {
+    super(props);
+    _this = this;
+    _defineProperty(this, "state", {
       tags: [],
       prevTags: null,
       suggestions: [],
@@ -132,384 +104,299 @@ var TagsInput = /*#__PURE__*/function (_PureComponent) {
       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, "ngModelStateField", void 0);
+    _defineProperty(this, "id", this.props.id || getUID('ring-tags-list-'));
+    _defineProperty(this, "node", void 0);
+    _defineProperty(this, "nodeRef", node => {
+      this.node = node;
     });
-    _defineProperty(_this, "input", void 0);
-    _defineProperty(_this, "caret", void 0);
-    _defineProperty(_this, "focusInput", function () {
+    _defineProperty(this, "input", void 0);
+    _defineProperty(this, "caret", void 0);
+    _defineProperty(this, "focusInput", () => {
       var _this$getInputNode;
-      (_this$getInputNode = _this.getInputNode()) === null || _this$getInputNode === void 0 || _this$getInputNode.focus();
+      (_this$getInputNode = this.getInputNode()) === null || _this$getInputNode === void 0 || _this$getInputNode.focus();
     });
-    _defineProperty(_this, "focus", function () {
-      _this.focusInput();
+    _defineProperty(this, "focus", () => {
+      this.focusInput();
     });
-    _defineProperty(_this, "addTag", function (tag) {
+    _defineProperty(this, "addTag", 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('');
+      const isUniqueTag = this.state.tags.filter(item => 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({
+        this.setState(prevState => ({
+          tags: prevState.tags.concat([tag])
+        }));
+        this.props.onAddTag({
           tag
         });
-        _this.setActiveIndex();
+        this.setActiveIndex();
       }
     });
-    _defineProperty(_this, "clickHandler", function (event) {
+    _defineProperty(this, "clickHandler", event => {
       var _this$select3;
-      if (event.target !== _this.node && event.target.parentElement !== _this.node) {
+      if (event.target !== this.node && event.target.parentElement !== this.node) {
         return;
       }
-      (_this$select3 = _this.select) === null || _this$select3 === void 0 || _this$select3._clickHandler();
+      (_this$select3 = this.select) === null || _this$select3 === void 0 || _this$select3._clickHandler();
     });
-    _defineProperty(_this, "filterExistingTags", function (suggestions) {
-      var tagsMap = new Map(_this.state.tags.map(function (tag) {
-        return [tag.key, tag];
-      }));
-      return suggestions.filter(function (suggestion) {
-        return !tagsMap.has(suggestion.key);
-      });
+    _defineProperty(this, "filterExistingTags", suggestions => {
+      const tagsMap = new Map(this.state.tags.map(tag => [tag.key, tag]));
+      return suggestions.filter(suggestion => !tagsMap.has(suggestion.key));
     });
-    _defineProperty(_this, "loadSuggestions", function () {
-      var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    _defineProperty(this, "loadSuggestions", 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();
+      }, 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
+            });
           }
-        }, _callee, null, [[0, 14]]);
-      })));
+        } catch (e) {
+          _this.setState({
+            loading: false
+          });
+        }
+      });
     });
-    _defineProperty(_this, "_focusHandler", function () {
-      _this.setActiveIndex(null);
-      _this.setState({
+    _defineProperty(this, "_focusHandler", () => {
+      this.setActiveIndex(null);
+      this.setState({
         focused: true
       });
     });
-    _defineProperty(_this, "_blurHandler", function () {
-      _this.setState({
+    _defineProperty(this, "_blurHandler", () => {
+      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;
+    _defineProperty(this, "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;
       }
-      if (_this.state.activeIndex !== newActiveIndex) {
-        _this.setActiveIndex(newActiveIndex);
+      if (this.state.activeIndex !== newActiveIndex) {
+        this.setActiveIndex(newActiveIndex);
       }
     });
-    _defineProperty(_this, "handleKeyDown", function (event) {
+    _defineProperty(this, "handleKeyDown", event => {
       var _this$select4;
-      var key = getEventKey(event);
-      var isInputFocused = function isInputFocused() {
+      const key = getEventKey(event);
+      const 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 : '');
+        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) {
+      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;
+        const value = (_this$getInputNode3 = this.getInputNode()) === null || _this$getInputNode3 === void 0 ? void 0 : _this$getInputNode3.value;
         if (value != null && value !== '') {
-          _this.handleTagCreation(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()) {
+      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) {
+        if (this.getInputNode() && this.caret != null && Number(this.caret.getPosition()) > 0) {
           return true;
         }
-        _this.selectTag();
+        this.selectTag();
         return false;
       }
       if (key === 'ArrowRight' && !isInputFocused()) {
-        if (_this.state.activeIndex === _this.state.tags.length - 1) {
-          if (!_this.props.disabled) {
+        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();
+            (_this$getInputNode4 = this.getInputNode()) === null || _this$getInputNode4 === void 0 || _this$getInputNode4.focus();
+            this.setActiveIndex();
           }
         } else {
-          _this.selectTag(true);
+          this.selectTag(true);
         }
         return false;
       }
-      if (!_this.props.disabled) {
+      if (!this.props.disabled) {
         var _this$getInputNode5;
-        if (key === 'Backspace' && !((_this$getInputNode5 = _this.getInputNode()) !== null && _this$getInputNode5 !== void 0 && _this$getInputNode5.value)) {
+        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]);
+          const 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);
-          });
+        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;
         }
       }
       return true;
     });
-    _defineProperty(_this, "handleClick", memoize(function (tag) {
-      return function () {
-        _this.setActiveIndex(_this.state.tags.indexOf(tag));
-      };
+    _defineProperty(this, "handleClick", memoize(tag => () => {
+      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({
+    _defineProperty(this, "handleRemove", memoize(tag => () => this.onRemoveTag(tag)));
+    _defineProperty(this, "handleTagCreation", label => {
+      this.addTag({
         key: label,
         label
       });
     });
-    _defineProperty(_this, "select", void 0);
-    _defineProperty(_this, "selectRef", function (el) {
-      _this.select = el;
+    _defineProperty(this, "select", void 0);
+    _defineProperty(this, "selectRef", el => {
+      this.select = el;
     });
-    _this.ngModelStateField = TagsInput.ngModelStateField;
-    return _this;
+    this.ngModelStateField = TagsInput.ngModelStateField;
   }
-  _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();
-      }
-    }
-  }, {
-    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;
-    }
-  }, {
-    key: "setActiveIndex",
-    value: function setActiveIndex(activeIndex) {
-      this.setState({
-        activeIndex
+  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
       });
     }
-  }, {
-    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);
+    return nextState;
+  }
+  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();
     }
-  }, {
-    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__*/jsxs("div", {
-        // it transfers focus to input
-        role: "presentation",
-        className: classes,
-        onKeyDown: this.handleKeyDown,
-        onClick: this.clickHandler,
-        ref: this.nodeRef,
-        children: [label && /*#__PURE__*/jsx(ControlLabel, {
-          htmlFor: this.id,
-          disabled: disabled,
-          type: labelType,
-          children: label
-        }), /*#__PURE__*/jsx(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,
-          children: /*#__PURE__*/jsx(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
-          })
-        })]
-      });
+  }
+  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);
+      }
     }
-  }], [{
-    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
+    return this.input;
+  }
+  setActiveIndex(activeIndex) {
+    this.setState({
+      activeIndex
+    });
+  }
+  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 nextState;
-    }
-  }]);
-}(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
-});
+      return tags;
+    }, this.focusInput);
+  }
+  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".concat(size)]], [modules_88cfaf40["height".concat(height)]], {
+      [modules_5aa8aaf3.tagsInputDisabled]: disabled,
+      [modules_5aa8aaf3.tagsInputFocused]: focused
+    }, this.props.className);
+    return /*#__PURE__*/jsxs("div", {
+      // it transfers focus to input
+      role: "presentation",
+      className: classes,
+      onKeyDown: this.handleKeyDown,
+      onClick: this.clickHandler,
+      ref: this.nodeRef,
+      children: [label && /*#__PURE__*/jsx(ControlLabel, {
+        htmlFor: this.id,
+        disabled: disabled,
+        type: labelType,
+        children: label
+      }), /*#__PURE__*/jsx(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,
+        children: /*#__PURE__*/jsx(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
+        })
+      })]
+    });
+  }
+}
 _defineProperty(TagsInput, "defaultProps", {
   dataSource: noop,
   onAddTag: noop,
@@ -523,15 +410,13 @@ _defineProperty(TagsInput, "defaultProps", {
   renderOptimization: true,
   allowAddNewTags: false,
   filter: {
-    fn: function fn() {
-      return true;
-    }
+    fn: () => true
   },
   placeholder: 'Select an option',
   size: Size.M
 });
 _defineProperty(TagsInput, "ngModelStateField", 'tags');
 _defineProperty(TagsInput, "contextType", ControlsHeightContext);
-var RerenderableTagsInput = rerenderHOC(TagsInput);
+const RerenderableTagsInput = rerenderHOC(TagsInput);
 
 export { RerenderableTagsInput, TagsInput as default };