@jetbrains/ring-ui-built 6.0.1

package/components/tags-input/tags-input.d.ts

@@ -0,0 +1,138 @@
+import React, { PureComponent, SyntheticEvent, ReactNode, ComponentType } from 'react';
+import PropTypes from 'prop-types';
+import Select, { SelectItem } from '../select/select';
+import { TagType } from '../tags-list/tags-list';
+import Caret from '../caret/caret';
+import { Size } from '../input/input';
+import { ControlsHeight } from '../global/controls-height';
+import { Filter } from '../select/select__popup';
+import { TagAttrs } from '../tag/tag';
+import { LabelType } from '../control-label/control-label';
+declare function noop(): void;
+export interface ToggleTagParams {
+    tag: TagType;
+}
+export interface TagsInputRequestParams {
+    query: string;
+}
+export interface TagsInputProps {
+    dataSource: (params: TagsInputRequestParams) => readonly SelectItem[] | Promise<readonly SelectItem[]>;
+    onAddTag: (params: ToggleTagParams) => void;
+    onRemoveTag: (params: ToggleTagParams) => void;
+    customTagComponent: ComponentType<TagAttrs>;
+    maxPopupHeight: number;
+    minPopupWidth: number;
+    canNotBeEmpty: boolean;
+    disabled: boolean;
+    autoOpen: boolean;
+    renderOptimization: boolean;
+    allowAddNewTags: boolean;
+    filter: boolean | Filter;
+    placeholder: string;
+    className?: string | null | undefined;
+    tags?: readonly TagType[] | null | undefined;
+    loadingMessage?: string | undefined;
+    notFoundMessage?: string | undefined;
+    hint?: ReactNode | null | undefined;
+    size: Size;
+    height?: ControlsHeight | undefined;
+    label?: ReactNode;
+    labelType?: LabelType;
+    id?: string | undefined;
+}
+interface TagsInputState {
+    tags: TagType[];
+    prevTags: TagType[] | null;
+    suggestions: SelectItem[];
+    loading: boolean;
+    focused: boolean;
+    query: string;
+    activeIndex: number | null | undefined;
+}
+export default class TagsInput extends PureComponent<TagsInputProps, TagsInputState> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        tags: PropTypes.Requireable<any[]>;
+        /**
+         * 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.Requireable<(...args: any[]) => any>;
+        onAddTag: PropTypes.Requireable<(...args: any[]) => any>;
+        onRemoveTag: PropTypes.Requireable<(...args: any[]) => any>;
+        customTagComponent: PropTypes.Requireable<React.Component<unknown, unknown, unknown>>;
+        maxPopupHeight: PropTypes.Requireable<number>;
+        minPopupWidth: PropTypes.Requireable<number>;
+        placeholder: PropTypes.Requireable<string>;
+        canNotBeEmpty: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        autoOpen: PropTypes.Requireable<boolean>;
+        renderOptimization: PropTypes.Requireable<boolean>;
+        filter: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+            fn: PropTypes.Requireable<(...args: any[]) => any>;
+        }> | null | undefined>>;
+        size: PropTypes.Requireable<string>;
+        height: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        loadingMessage: PropTypes.Requireable<string>;
+        notFoundMessage: PropTypes.Requireable<string>;
+        hint: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        allowAddNewTags: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        dataSource: typeof noop;
+        onAddTag: typeof noop;
+        onRemoveTag: typeof noop;
+        customTagComponent: null;
+        maxPopupHeight: number;
+        minPopupWidth: number;
+        canNotBeEmpty: boolean;
+        disabled: boolean;
+        autoOpen: boolean;
+        renderOptimization: boolean;
+        allowAddNewTags: boolean;
+        filter: {
+            fn: () => boolean;
+        };
+        placeholder: string;
+        size: Size;
+    };
+    constructor(props: TagsInputProps);
+    state: TagsInputState;
+    static getDerivedStateFromProps({ tags }: TagsInputProps, { prevTags }: TagsInputState): {
+        prevTags: readonly TagType[] | null | undefined;
+    };
+    componentDidMount(): void;
+    static ngModelStateField: string;
+    ngModelStateField: string;
+    static contextType: React.Context<ControlsHeight>;
+    id: string;
+    node?: HTMLElement | null;
+    nodeRef: (node: HTMLElement | null) => void;
+    input?: HTMLInputElement | null;
+    caret?: Caret;
+    getInputNode(): HTMLInputElement | null | undefined;
+    setActiveIndex(activeIndex?: number | null): void;
+    focusInput: () => void;
+    focus: () => void;
+    addTag: (tag: TagType | null) => void;
+    onRemoveTag(tagToRemove: TagType): Promise<void | TagType[]>;
+    clickHandler: (event: SyntheticEvent) => void;
+    filterExistingTags: (suggestions: readonly SelectItem[]) => SelectItem[];
+    loadSuggestions: (query?: string) => void;
+    private _focusHandler;
+    private _blurHandler;
+    selectTag: (moveForward?: boolean) => void;
+    handleKeyDown: (event: React.KeyboardEvent) => boolean;
+    handleClick: (arg: TagType) => () => void;
+    handleRemove: (arg: TagType) => () => Promise<void | TagType[]>;
+    handleTagCreation: (label: string) => void;
+    select?: Select | null;
+    selectRef: (el: Select | null) => void;
+    render(): React.JSX.Element;
+}
+export declare const RerenderableTagsInput: React.ForwardRefExoticComponent<TagsInputProps & React.RefAttributes<TagsInput>>;
+export type TagsInputAttrs = JSX.LibraryManagedAttributes<typeof TagsInput, TagsInputProps>;
+export {};

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

@@ -0,0 +1,534 @@
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/es.array.map.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';
+import getEventKey from '../global/get-event-key.js';
+import Select from '../select/select.js';
+import TagsList from '../tags-list/tags-list.js';
+import Caret from '../caret/caret.js';
+import memoize from '../global/memoize.js';
+import rerenderHOC from '../global/rerender-hoc.js';
+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.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.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';
+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 '../button/button.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import 'core-js/modules/es.weak-map.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';
+import 'react-virtualized/dist/es/CellMeasurer';
+import 'memoize-one';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark-14px';
+import '@jetbrains/icons/remove-14px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
+import '../list/list__custom.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.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';
+import '../shortcuts/shortcuts-hoc.js';
+import '../text/text.js';
+import '../_helpers/select__filter.js';
+import '../tag/tag.js';
+
+var modules_5aa8aaf3 = {"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
+ */
+var POPUP_VERTICAL_SHIFT = 2;
+var TagsInput = /*#__PURE__*/function (_PureComponent) {
+  _inherits(TagsInput, _PureComponent);
+  var _super = _createSuper(TagsInput);
+  function TagsInput(props) {
+    var _this;
+    _classCallCheck(this, TagsInput);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      tags: [],
+      prevTags: null,
+      suggestions: [],
+      loading: true,
+      focused: false,
+      query: '',
+      activeIndex: 0
+    });
+    _defineProperty(_assertThisInitialized(_this), "ngModelStateField", void 0);
+    _defineProperty(_assertThisInitialized(_this), "id", _this.props.id || getUID('ring-tags-list-'));
+    _defineProperty(_assertThisInitialized(_this), "node", void 0);
+    _defineProperty(_assertThisInitialized(_this), "nodeRef", function (node) {
+      _this.node = node;
+    });
+    _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 || _this$getInputNode.focus();
+    });
+    _defineProperty(_assertThisInitialized(_this), "focus", function () {
+      _this.focusInput();
+    });
+    _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_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(_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(_assertThisInitialized(_this), "loadSuggestions", function () {
+      var 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(_assertThisInitialized(_this), "_focusHandler", function () {
+      _this.setActiveIndex(null);
+      _this.setState({
+        focused: true
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "_blurHandler", function () {
+      _this.setState({
+        focused: false
+      });
+    });
+    _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);
+      }
+    });
+    _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) {
+        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();
+          }
+        } 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);
+          });
+          return false;
+        }
+      }
+      return true;
+    });
+    _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(_assertThisInitialized(_this), "handleTagCreation", function (label) {
+      _this.addTag({
+        key: label,
+        label
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "select", void 0);
+    _defineProperty(_assertThisInitialized(_this), "selectRef", function (el) {
+      _this.select = el;
+    });
+    _this.ngModelStateField = TagsInput.ngModelStateField;
+    return _this;
+  }
+  _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;
+    }
+  }]);
+  return TagsInput;
+}(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 };