@jetbrains/ring-ui-built 6.0.32 → 6.0.34

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

@@ -1,4 +1,15 @@
-import React, { PureComponent, Component } from 'react';
+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 PropTypes from 'prop-types';
 import classNames from 'classnames';
 import getEventKey from '../global/get-event-key.js';
@@ -11,12 +22,20 @@ 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 '../_helpers/_rollupPluginBabelHelpers.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 '@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';
@@ -24,26 +43,40 @@ 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';
@@ -82,353 +115,418 @@ function noop() {}
 /**
  * @name Tags Input
  */
-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);
+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();
       }
-    }
-    return this.input;
-  }
-  setActiveIndex(activeIndex) {
-    this.setState({
-      activeIndex
     });
-  }
-  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])
+    _defineProperty(_this, "clickHandler", function (event) {
+      var _this$select3;
+      if (event.target !== _this.node && event.target.parentElement !== _this.node) {
+        return;
+      }
+      (_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];
       }));
-      this.props.onAddTag({
-        tag
+      return suggestions.filter(function (suggestion) {
+        return !tagsMap.has(suggestion.key);
       });
-      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] : '';
+    });
+    _defineProperty(_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
-            });
+      }, /*#__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();
           }
-        } catch (e) {
-          _this.setState({
-            loading: false
-          });
-        }
+        }, _callee, null, [[0, 14]]);
+      })));
+    });
+    _defineProperty(_this, "_focusHandler", function () {
+      _this.setActiveIndex(null);
+      _this.setState({
+        focused: true
       });
-    };
-  })();
-  _focusHandler = () => {
-    this.setActiveIndex(null);
-    this.setState({
-      focused: true
     });
-  };
-  _blurHandler = () => {
-    this.setState({
-      focused: false
+    _defineProperty(_this, "_blurHandler", function () {
+      _this.setState({
+        focused: false
+      });
     });
-  };
-  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);
-    }
-  };
-  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);
+    _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;
       }
-      return true;
-    }
-    if (this.select?._popup?.isVisible()) {
-      return true;
-    }
-    if (key === 'ArrowLeft') {
-      if (this.getInputNode() && this.caret != null && Number(this.caret.getPosition()) > 0) {
-        return true;
+      if (_this.state.activeIndex !== newActiveIndex) {
+        _this.setActiveIndex(newActiveIndex);
       }
-      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();
+    });
+    _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);
         }
-      } else {
-        this.selectTag(true);
+        return true;
       }
-      return false;
-    }
-    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]);
+      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 === '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 === '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();
+          }
+        } else {
+          _this.selectTag(true);
+        }
         return false;
       }
-    }
-    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
+      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);
+          });
+          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
+      });
+    });
+    _defineProperty(_this, "select", void 0);
+    _defineProperty(_this, "selectRef", function (el) {
+      _this.select = el;
     });
-  };
-  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
-    })));
+    _this.ngModelStateField = TagsInput.ngModelStateField;
+    return _this;
   }
-}
-const RerenderableTagsInput = rerenderHOC(TagsInput);
+  _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
+      });
+    }
+  }, {
+    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);
+    }
+  }, {
+    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
+      })));
+    }
+  }], [{
+    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 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
+});
+_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;
+    }
+  },
+  placeholder: 'Select an option',
+  size: Size.M
+});
+_defineProperty(TagsInput, "ngModelStateField", 'tags');
+_defineProperty(TagsInput, "contextType", ControlsHeightContext);
+var RerenderableTagsInput = rerenderHOC(TagsInput);
 
 export { RerenderableTagsInput, TagsInput as default };