@jetbrains/ring-ui 5.1.1 → 6.0.1-beta.0

package/dist/tags-input/tags-input.js

@@ -1,4 +1,16 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, h as _asyncToGenerator, d as _createClass, i as _regeneratorRuntime } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.string.iterator.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.number.constructor.js';
+import 'core-js/modules/es.array.index-of.js';
+import 'core-js/modules/es.promise.js';
+import 'core-js/modules/es.object.assign.js';
 import React, { Component, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -12,11 +24,22 @@ import { Size } from '../input/input.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import getUID from '../global/get-uid.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
+import { ControlLabel } from '../control-label/control-label.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.string.trim.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.find.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.object.values.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';
@@ -25,27 +48,40 @@ import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/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 'focus-visible';
 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.string.split.js';
+import 'core-js/modules/es.set.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.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.array.find-index.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';
@@ -68,8 +104,9 @@ import '../list/list__title.js';
 import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
-import '../input/input-label.js';
 import '../global/fuzzy-highlight.js';
+import '../i18n/i18n-context.js';
+import '../i18n/i18n.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';
@@ -78,21 +115,24 @@ import '../shortcuts/shortcuts-hoc.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
 import '../tag/tag.js';
+import '../_helpers/control-label.js';
 import '../global/react-render-adapter.js';
 
-var modules_5aa8aaf3 = {"unit":"8px","outerContainer":"outerContainer_rui_e356","container":"container_rui_e356","input":"input_rui_e356","light":"light_rui_1a67","tagsInput":"tagsInput_rui_1a67","tagsInputDisabled":"tagsInputDisabled_rui_1a67","tagsInputFocused":"tagsInputFocused_rui_1a67","tagsList":"tagsList_rui_1a67","tagsSelect":"tagsSelect_rui_1a67"};
+var modules_5aa8aaf3 = {"unit":"i__const_unit_0","outerContainer":"outerContainer_rui_e356","container":"container_rui_e356","input":"input_rui_e356","light":"light_rui_2ac4","tagsInput":"tagsInput_rui_1a67","tagsInputDisabled":"tagsInputDisabled_rui_1a67","tagsInputFocused":"tagsInputFocused_rui_1a67","tagsList":"tagsList_rui_1a67","tagsSelect":"tagsSelect_rui_1a67"};
 
 function noop() {}
 /**
  * @name Tags Input
  */
-const POPUP_VERTICAL_SHIFT = 2;
-class TagsInput extends PureComponent {
-  constructor(props) {
+var POPUP_VERTICAL_SHIFT = 2;
+var TagsInput = /*#__PURE__*/function (_PureComponent) {
+  _inherits(TagsInput, _PureComponent);
+  var _super = _createSuper(TagsInput);
+  function TagsInput(props) {
     var _this;
-    super(props);
-    _this = this;
-    _defineProperty(this, "state", {
+    _classCallCheck(this, TagsInput);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "state", {
       tags: [],
       prevTags: null,
       suggestions: [],
@@ -101,281 +141,345 @@ class TagsInput extends PureComponent {
       query: '',
       activeIndex: 0
     });
-    _defineProperty(this, "ngModelStateField", void 0);
-    _defineProperty(this, "id", getUID('ring-tags-list-'));
-    _defineProperty(this, "node", void 0);
-    _defineProperty(this, "nodeRef", node => {
-      this.node = node;
+    _defineProperty(_assertThisInitialized(_this), "ngModelStateField", void 0);
+    _defineProperty(_assertThisInitialized(_this), "id", getUID('ring-tags-list-'));
+    _defineProperty(_assertThisInitialized(_this), "node", void 0);
+    _defineProperty(_assertThisInitialized(_this), "nodeRef", function (node) {
+      _this.node = node;
     });
-    _defineProperty(this, "input", void 0);
-    _defineProperty(this, "caret", void 0);
-    _defineProperty(this, "focusInput", () => {
-      this.getInputNode()?.focus();
+    _defineProperty(_assertThisInitialized(_this), "input", void 0);
+    _defineProperty(_assertThisInitialized(_this), "caret", void 0);
+    _defineProperty(_assertThisInitialized(_this), "focusInput", function () {
+      var _this$getInputNode;
+      (_this$getInputNode = _this.getInputNode()) === null || _this$getInputNode === void 0 ? void 0 : _this$getInputNode.focus();
     });
-    _defineProperty(this, "addTag", tag => {
+    _defineProperty(_assertThisInitialized(_this), "addTag", function (tag) {
+      var _this$select, _this$select2;
       if (tag == null) {
         return;
       }
-      const isUniqueTag = this.state.tags.filter(item => tag.key === item.key).length === 0;
-      this.select?.clear();
-      this.select?.filterValue('');
+      var isUniqueTag = _this.state.tags.filter(function (item) {
+        return tag.key === item.key;
+      }).length === 0;
+      (_this$select = _this.select) === null || _this$select === void 0 ? void 0 : _this$select.clear();
+      (_this$select2 = _this.select) === null || _this$select2 === void 0 ? void 0 : _this$select2.filterValue('');
       if (isUniqueTag) {
-        this.setState(prevState => ({
-          tags: prevState.tags.concat([tag])
-        }));
-        this.props.onAddTag({
-          tag
+        _this.setState(function (prevState) {
+          return {
+            tags: prevState.tags.concat([tag])
+          };
         });
-        this.setActiveIndex();
+        _this.props.onAddTag({
+          tag: tag
+        });
+        _this.setActiveIndex();
       }
     });
-    _defineProperty(this, "clickHandler", event => {
-      if (event.target !== this.node && event.target.parentElement !== this.node) {
+    _defineProperty(_assertThisInitialized(_this), "clickHandler", function (event) {
+      var _this$select3;
+      if (event.target !== _this.node && event.target.parentElement !== _this.node) {
         return;
       }
-      this.select?._clickHandler();
+      (_this$select3 = _this.select) === null || _this$select3 === void 0 ? void 0 : _this$select3._clickHandler();
     });
-    _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(_assertThisInitialized(_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, "loadSuggestions", function () {
-      let query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    _defineProperty(_assertThisInitialized(_this), "loadSuggestions", function () {
+      var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       return _this.setState({
         loading: true,
-        query
-      }, 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
-            });
+        query: 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: 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: 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();
           }
-        } catch (e) {
-          _this.setState({
-            loading: false
-          });
-        }
-      });
+        }, _callee, null, [[0, 14]]);
+      })));
     });
-    _defineProperty(this, "_focusHandler", () => {
-      this.setActiveIndex(null);
-      this.setState({
+    _defineProperty(_assertThisInitialized(_this), "_focusHandler", function () {
+      _this.setActiveIndex(null);
+      _this.setState({
         focused: true
       });
     });
-    _defineProperty(this, "_blurHandler", () => {
-      this.setState({
+    _defineProperty(_assertThisInitialized(_this), "_blurHandler", function () {
+      _this.setState({
         focused: false
       });
     });
-    _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;
+    _defineProperty(_assertThisInitialized(_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);
+      if (_this.state.activeIndex !== newActiveIndex) {
+        _this.setActiveIndex(newActiveIndex);
       }
     });
-    _defineProperty(this, "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 : '');
+    _defineProperty(_assertThisInitialized(_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) {
+      if (key === ' ' && _this.props.allowAddNewTags) {
+        var _this$getInputNode3;
         event.stopPropagation();
-        const value = this.getInputNode()?.value;
+        var 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.select?._popup?.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 && 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) {
-            this.getInputNode()?.focus();
-            this.setActiveIndex();
+        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 ? void 0 : _this$getInputNode4.focus();
+            _this.setActiveIndex();
           }
         } else {
-          this.selectTag(true);
+          _this.selectTag(true);
         }
         return false;
       }
-      if (!this.props.disabled) {
-        if (key === 'Backspace' && !this.getInputNode()?.value) {
+      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();
-          const tagsLength = this.state.tags.length;
-          this.select?._hidePopup(true); // otherwise confirmation may be overlapped by popup
-          this.onRemoveTag(this.state.tags[tagsLength - 1]);
+          var tagsLength = _this.state.tags.length;
+          (_this$select5 = _this.select) === null || _this$select5 === void 0 ? 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(() => 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(function () {
+            return _this.selectTag(true);
+          });
           return false;
         }
       }
       return true;
     });
-    _defineProperty(this, "handleClick", memoize(tag => () => {
-      this.setActiveIndex(this.state.tags.indexOf(tag));
+    _defineProperty(_assertThisInitialized(_this), "handleClick", memoize(function (tag) {
+      return function () {
+        _this.setActiveIndex(_this.state.tags.indexOf(tag));
+      };
+    }));
+    _defineProperty(_assertThisInitialized(_this), "handleRemove", memoize(function (tag) {
+      return function () {
+        return _this.onRemoveTag(tag);
+      };
     }));
-    _defineProperty(this, "handleRemove", memoize(tag => () => this.onRemoveTag(tag)));
-    _defineProperty(this, "handleTagCreation", label => {
-      this.addTag({
+    _defineProperty(_assertThisInitialized(_this), "handleTagCreation", function (label) {
+      _this.addTag({
         key: label,
-        label
+        label: label
       });
     });
-    _defineProperty(this, "select", void 0);
-    _defineProperty(this, "selectRef", el => {
-      this.select = el;
+    _defineProperty(_assertThisInitialized(_this), "select", void 0);
+    _defineProperty(_assertThisInitialized(_this), "selectRef", function (el) {
+      _this.select = el;
     });
-    this.ngModelStateField = TagsInput.ngModelStateField;
+    _this.ngModelStateField = TagsInput.ngModelStateField;
+    return _this;
   }
-  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
+  _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 ? 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: activeIndex
       });
     }
-    return nextState;
-  }
-  componentDidMount() {
-    if (this.props.autoOpen && !this.props.disabled) {
-      this.focusInput();
-      this.loadSuggestions();
-      this.select?._showPopup();
+  }, {
+    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: tags
+          });
+          _this2.focusInput();
+        }
+        return tags;
+      }, this.focusInput);
     }
-  }
-  getInputNode() {
-    if (!this.input) {
-      this.input = this.select?.filter;
-      if (this.input) {
-        this.caret = new Caret(this.input);
-      }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames;
+      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)]], (_classNames = {}, _defineProperty(_classNames, modules_5aa8aaf3.tagsInputDisabled, disabled), _defineProperty(_classNames, modules_5aa8aaf3.tagsInputFocused, focused), _classNames), 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
+      })));
     }
-    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
+  }], [{
+    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: tags,
+          activeIndex: tags.length
         });
-        this.focusInput();
       }
-      return tags;
-    }, this.focusInput);
-  }
-  render() {
-    const {
-      focused,
-      tags,
-      activeIndex
-    } = this.state;
-    const {
-      disabled,
-      canNotBeEmpty,
-      allowAddNewTags,
-      filter,
-      size,
-      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("label", {
-      htmlFor: this.id,
-      className: classNames(modules_88cfaf40.label, {
-        [modules_88cfaf40.disabledLabel]: disabled
-      })
-    }, 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
-    }, /*#__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
-    })));
-  }
-}
+      return nextState;
+    }
+  }]);
+  return TagsInput;
+}(PureComponent);
 _defineProperty(TagsInput, "propTypes", {
   className: PropTypes.string,
   tags: PropTypes.array,
@@ -404,6 +508,7 @@ _defineProperty(TagsInput, "propTypes", {
   label: PropTypes.node,
   loadingMessage: PropTypes.string,
   notFoundMessage: PropTypes.string,
+  hint: PropTypes.node,
   allowAddNewTags: PropTypes.bool
 });
 _defineProperty(TagsInput, "defaultProps", {
@@ -419,13 +524,15 @@ _defineProperty(TagsInput, "defaultProps", {
   renderOptimization: true,
   allowAddNewTags: false,
   filter: {
-    fn: () => true
+    fn: function fn() {
+      return true;
+    }
   },
   placeholder: 'Select an option',
   size: Size.M
 });
 _defineProperty(TagsInput, "ngModelStateField", 'tags');
 _defineProperty(TagsInput, "contextType", ControlsHeightContext);
-const RerenderableTagsInput = rerenderHOC(TagsInput);
+var RerenderableTagsInput = rerenderHOC(TagsInput);
 
 export { RerenderableTagsInput, TagsInput as default };