@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ecefada396

package/components/TokenInput/TokenInput/TokenInput.js

@@ -0,0 +1,1207 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _dec, _class, _class2, _temp;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it;
+
+  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      return function () {
+        if (i >= o.length) return {
+          done: true
+        };
+        return {
+          done: false,
+          value: o[i++]
+        };
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  it = o[Symbol.iterator]();
+  return it.next.bind(it);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import isEqual from 'lodash.isequal';
+import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
+import * as LayoutEvents from "../../../lib/LayoutEvents";
+import { Token } from "../../Token";
+import { emptyHandler } from "../../../lib/utils";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { locale } from "../../../lib/locale/decorators";
+import { MenuItem } from "../../MenuItem/MenuItem";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { TokenInputLocaleHelper } from "../locale";
+import { styles } from "../TokenInput.styles";
+import { tokenInputReducer } from "../TokenInputReducer";
+import { TokenInputMenu } from "../TokenInputMenu";
+import { TextWidthHelper } from "../TextWidthHelper";
+export var TokenInputType;
+
+(function (TokenInputType) {
+  TokenInputType[TokenInputType["WithReference"] = 0] = "WithReference";
+  TokenInputType[TokenInputType["WithoutReference"] = 1] = "WithoutReference";
+  TokenInputType[TokenInputType["Combined"] = 2] = "Combined";
+})(TokenInputType || (TokenInputType = {}));
+
+export var DefaultState = {
+  inputValue: '',
+  reservedInputValue: undefined,
+  autocompleteItems: undefined,
+  activeTokens: [],
+  editingTokenIndex: -1,
+  inFocus: false,
+  loading: false,
+  preventBlur: false,
+  inputValueWidth: 2,
+  inputValueHeight: 22
+};
+
+var defaultToKey = function defaultToKey(item) {
+  return item.toString();
+};
+
+var identity = function identity(item) {
+  return item;
+};
+
+var defaultRenderToken = function defaultRenderToken(item, _ref) {
+  var isActive = _ref.isActive,
+      onClick = _ref.onClick,
+      onDoubleClick = _ref.onDoubleClick,
+      onRemove = _ref.onRemove,
+      disabled = _ref.disabled;
+  return /*#__PURE__*/React.createElement(Token, {
+    key: item.toString(),
+    isActive: isActive,
+    onClick: onClick,
+    onDoubleClick: onDoubleClick,
+    onRemove: onRemove,
+    disabled: disabled
+  }, item);
+};
+
+export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(TokenInput, _React$PureComponent);
+
+  function TokenInput() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.state = DefaultState;
+    _this.locale = void 0;
+    _this.theme = void 0;
+    _this.input = null;
+    _this.tokensInputMenu = null;
+    _this.textHelper = null;
+    _this.wrapper = null;
+
+    _this.hasValueInItems = function (items, value) {
+      if (typeof value === 'string') {
+        return items.includes(value);
+      } // todo: как то не очень
+
+
+      return items.some(function (item) {
+        return isEqual(item, value);
+      });
+    };
+
+    _this.inputRef = function (node) {
+      return _this.input = node;
+    };
+
+    _this.tokensInputMenuRef = function (node) {
+      return _this.tokensInputMenu = node;
+    };
+
+    _this.textHelperRef = function (node) {
+      return _this.textHelper = node;
+    };
+
+    _this.wrapperRef = function (node) {
+      return _this.wrapper = node;
+    };
+
+    _this.dispatch = function (action, cb) {
+      _this.setState(function (prevState) {
+        return tokenInputReducer(prevState, action);
+      }, cb);
+    };
+
+    _this.handleInputFocus = function (event) {
+      _this.dispatch({
+        type: 'SET_FOCUS_IN'
+      });
+
+      if (_this.props.onFocus) {
+        _this.props.onFocus(event);
+      }
+    };
+
+    _this.handleInputBlur = function (event) {
+      var isBlurToMenu = _this.isBlurToMenu(event);
+
+      if (!isBlurToMenu) {
+        _this.handleOutsideBlur();
+      }
+
+      if (isBlurToMenu || _this.state.preventBlur) {
+        var _this$input;
+
+        event.preventDefault(); // первый focus нужен для предотвращения/уменьшения моргания в других браузерах
+
+        (_this$input = _this.input) == null ? void 0 : _this$input.focus(); // в firefox не работает без второго focus
+
+        requestAnimationFrame(function () {
+          var _this$input2;
+
+          return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus();
+        });
+
+        _this.dispatch({
+          type: 'SET_PREVENT_BLUR',
+          payload: false
+        });
+      } else {
+        _this.dispatch({
+          type: 'BLUR'
+        });
+
+        _this.props.onBlur == null ? void 0 : _this.props.onBlur(event);
+      }
+    };
+
+    _this.handleOutsideBlur = function () {
+      var _this$state = _this.state,
+          inputValue = _this$state.inputValue,
+          autocompleteItems = _this$state.autocompleteItems;
+      var valueToString = _this.props.valueToString;
+
+      if (inputValue === '') {
+        // если стерли содержимое токена в режиме редактирования, то удаляем токен
+        if (_this.isEditingMode) {
+          _this.finishTokenEdit();
+        }
+
+        return;
+      } // если не изменилось значение токена при редактировании
+
+
+      if (_this.isEditingMode && !_this.isTokenValueChanged) {
+        _this.finishTokenEdit();
+
+        return;
+      } // чекаем автокомплит на совпадение с введеным значением в инпут
+
+
+      if (autocompleteItems && autocompleteItems.length === 1) {
+        var _item = autocompleteItems[0];
+
+        if (valueToString(_item) === inputValue) {
+          _this.isEditingMode ? _this.finishTokenEdit() : _this.selectItem(_item);
+          return;
+        }
+      }
+
+      if (_this.isInputChanged) _this.checkForUnexpectedInput();
+    };
+
+    _this.isBlurToMenu = function (event) {
+      if (_this.menuRef) {
+        var menu = findDOMNode(_this.menuRef);
+        var relatedTarget = event.relatedTarget || document.activeElement;
+
+        if (menu && menu.contains(relatedTarget)) {
+          return true;
+        }
+      }
+
+      return false;
+    };
+
+    _this.handleWrapperMouseDown = function (event) {
+      var _this$wrapper;
+
+      _this.dispatch({
+        type: 'SET_PREVENT_BLUR',
+        payload: true
+      });
+
+      var target = event.target;
+      var isClickOnToken = target && ((_this$wrapper = _this.wrapper) == null ? void 0 : _this$wrapper.contains(target)) && target !== _this.wrapper && target !== _this.input;
+
+      if (!isClickOnToken) {
+        _this.dispatch({
+          type: 'REMOVE_ALL_ACTIVE_TOKENS'
+        });
+      }
+    };
+
+    _this.handleWrapperMouseUp = function () {
+      _this.dispatch({
+        type: 'SET_PREVENT_BLUR',
+        payload: false
+      });
+    };
+
+    _this.handleCopy = function (event) {
+      if (!_this.state.inFocus || _this.state.activeTokens.length === 0 || _this.isCursorVisible) {
+        return;
+      }
+
+      event.preventDefault(); // упорядочивание токенов по индексу
+
+      var tokens = _this.state.activeTokens.map(function (token) {
+        return _this.props.selectedItems.indexOf(token);
+      }).sort().map(function (index) {
+        return _this.props.selectedItems[index];
+      }).map(function (item) {
+        return _this.props.valueToString(item);
+      });
+
+      event.clipboardData.setData('text/plain', tokens.join(_this.props.delimiters[0]));
+    };
+
+    _this.handleInputPaste = function (event) {
+      if (_this.type === TokenInputType.WithReference || !event.clipboardData) {
+        return;
+      }
+
+      var paste = event.clipboardData.getData('text');
+      var delimiters = _this.props.delimiters;
+
+      if (delimiters.some(function (delimiter) {
+        return paste.includes(delimiter);
+      })) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        for (var _iterator = _createForOfIteratorHelperLoose(delimiters), _step; !(_step = _iterator()).done;) {
+          var delimiter = _step.value;
+          paste = paste.split(delimiter).join(delimiters[0]);
+        }
+
+        var tokens = paste.split(delimiters[0]);
+
+        var _items = tokens.map(function (token) {
+          return _this.props.valueToItem(token);
+        }).filter(function (item) {
+          return !_this.hasValueInItems(_this.props.selectedItems, item);
+        });
+
+        var newItems = _this.props.selectedItems.concat(_items);
+
+        _this.props.onValueChange(newItems);
+
+        _this.dispatch({
+          type: 'SET_AUTOCOMPLETE_ITEMS',
+          payload: undefined
+        });
+
+        _this.tryGetItems();
+      }
+    };
+
+    _this.tryGetItems = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
+        var autocompleteItems, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (query === void 0) {
+                  query = '';
+                }
+
+                if (!(_this.props.getItems && (_this.state.inputValue !== '' || !_this.props.hideMenuIfEmptyInputValue))) {
+                  _context.next = 14;
+                  break;
+                }
+
+                _this.dispatch({
+                  type: 'SET_LOADING',
+                  payload: true
+                });
+
+                _context.next = 5;
+                return _this.props.getItems(query);
+
+              case 5:
+                autocompleteItems = _context.sent;
+
+                _this.dispatch({
+                  type: 'SET_LOADING',
+                  payload: false
+                });
+
+                isSelectedItem = function isSelectedItem(item) {
+                  return _this.hasValueInItems(_this.props.selectedItems, item);
+                };
+
+                isEditingItem = function isEditingItem(item) {
+                  var editingItem = _this.props.selectedItems[_this.state.editingTokenIndex];
+                  return !!editingItem && isEqual(item, editingItem);
+                };
+
+                autocompleteItemsUnique = autocompleteItems.filter(function (item) {
+                  return !isSelectedItem(item) || isEditingItem(item);
+                });
+
+                if (_this.isEditingMode) {
+                  editingItem = _this.props.selectedItems[_this.state.editingTokenIndex];
+
+                  if (isEqual(editingItem, _this.props.valueToItem(_this.state.inputValue)) && !_this.hasValueInItems(autocompleteItemsUnique, editingItem)) {
+                    autocompleteItemsUnique.unshift(editingItem);
+                  }
+                }
+
+                if (query === '' || _this.state.inputValue !== '') {
+                  _this.dispatch({
+                    type: 'SET_AUTOCOMPLETE_ITEMS',
+                    payload: autocompleteItemsUnique
+                  }, function () {
+                    LayoutEvents.emit();
+
+                    _this.highlightMenuItem();
+                  });
+                }
+
+                selectItemIndex = autocompleteItemsUnique.findIndex(function (item) {
+                  return _this.props.valueToString(item).toLowerCase() === _this.state.inputValue.toLowerCase();
+                });
+
+                if (_this.menuRef) {
+                  _this.menuRef.highlightItem(selectItemIndex < 0 ? 0 : selectItemIndex);
+                }
+
+              case 14:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    _this.handleKeyDown = function (event) {
+      if (_this.isCursorVisible) {
+        _this.handleInputKeyDown(event);
+      } else {
+        _this.handleWrapperKeyDown(event);
+      }
+    };
+
+    _this.handleInputKeyDown = function (e) {
+      var _this$input3, _this$input4;
+
+      e.stopPropagation();
+
+      if (_this.type !== TokenInputType.WithReference && _this.props.delimiters.some(function (key) {
+        return key === e.key || key === ',' && isKeyComma(e);
+      })) {
+        e.preventDefault();
+        var newValue = _this.state.inputValue;
+
+        if (newValue !== '') {
+          if (_this.isEditingMode) {
+            _this.finishTokenEdit();
+          } else {
+            _this.handleAddItem();
+          }
+        }
+      }
+
+      switch (true) {
+        case isKeyEnter(e):
+          if (_this.menuRef) {
+            _this.menuRef.enter(e);
+          } // don't allow textarea
+          // became multiline
+
+
+          e.preventDefault();
+          break;
+
+        case isKeyArrowVertical(e):
+          e.preventDefault();
+
+          if (_this.menuRef) {
+            if (isKeyArrowUp(e)) {
+              _this.menuRef.up();
+            } else {
+              _this.menuRef.down();
+            }
+          }
+
+          break;
+
+        case isKeyEscape(e):
+          (_this$input3 = _this.input) == null ? void 0 : _this$input3.blur();
+          break;
+
+        case isKeyBackspace(e):
+          if (!_this.isEditingMode) _this.moveFocusToLastToken();
+          break;
+
+        case isKeyArrowLeft(e):
+          if (((_this$input4 = _this.input) == null ? void 0 : _this$input4.selectionStart) === 0) {
+            _this.moveFocusToLastToken();
+          }
+
+          break;
+      }
+    };
+
+    _this.focusInput = function () {
+      requestAnimationFrame(function () {
+        var _this$input5;
+
+        return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();
+      });
+    };
+
+    _this.selectInputText = function () {
+      if (_this.input) {
+        _this.input.setSelectionRange(0, _this.state.inputValue.length);
+      }
+    };
+
+    _this.handleWrapperKeyDown = function (e) {
+      var _this$wrapper2;
+
+      switch (true) {
+        case isKeyBackspace(e):
+        case isKeyDelete(e):
+          {
+            if (!_this.isEditingMode) {
+              var itemsNew = _this.props.selectedItems.filter(function (item) {
+                return !_this.hasValueInItems(_this.state.activeTokens, item);
+              });
+
+              _this.props.onValueChange(itemsNew);
+
+              _this.dispatch({
+                type: 'REMOVE_ALL_ACTIVE_TOKENS'
+              }, function () {
+                var _this$input6;
+
+                LayoutEvents.emit();
+                (_this$input6 = _this.input) == null ? void 0 : _this$input6.focus();
+              });
+            }
+
+            break;
+          }
+
+        case isKeyArrowHorizontal(e):
+          _this.handleWrapperArrows(e);
+
+          break;
+
+        case isKeyEscape(e):
+          (_this$wrapper2 = _this.wrapper) == null ? void 0 : _this$wrapper2.blur();
+          break;
+
+        case isKeyEnter(e):
+          e.preventDefault();
+
+          if (_this.state.activeTokens.length === 1) {
+            _this.handleTokenEdit(_this.state.activeTokens[0]);
+          }
+
+          break;
+
+        case isShortcutSelectAll(e):
+          e.preventDefault();
+
+          _this.dispatch({
+            type: 'SET_ACTIVE_TOKENS',
+            payload: _this.props.selectedItems
+          });
+
+          break;
+      }
+    };
+
+    _this.handleWrapperArrows = function (e) {
+      e.preventDefault();
+      var activeTokens = _this.state.activeTokens;
+
+      var activeItemIndex = _this.props.selectedItems.indexOf(activeTokens[0]);
+
+      var newItemIndex = activeItemIndex + (isKeyArrowLeft(e) ? -1 : +1);
+      var isLeftEdge = activeItemIndex === 0 && isKeyArrowLeft(e);
+      var isRightEdge = activeItemIndex === _this.props.selectedItems.length - 1 && isKeyArrowRight(e);
+
+      if (!e.shiftKey && activeTokens.length === 1) {
+        _this.handleWrapperArrowsWithoutShift(isLeftEdge, isRightEdge, newItemIndex);
+      } else {
+        _this.handleWrapperArrowsWithShift(isLeftEdge, isRightEdge, newItemIndex);
+      }
+    };
+
+    _this.handleWrapperArrowsWithoutShift = function (isLeftEdge, isRightEdge, newItemIndex) {
+      if (isRightEdge) {
+        _this.dispatch({
+          type: 'REMOVE_ALL_ACTIVE_TOKENS'
+        }, function () {
+          var _this$input7;
+
+          return (_this$input7 = _this.input) == null ? void 0 : _this$input7.focus();
+        });
+      } else if (!isLeftEdge) {
+        _this.dispatch({
+          type: 'SET_ACTIVE_TOKENS',
+          payload: [_this.props.selectedItems[newItemIndex]]
+        });
+      }
+    };
+
+    _this.handleWrapperArrowsWithShift = function (isLeftEdge, isRightEdge, newItemIndex) {
+      if (!isLeftEdge && !isRightEdge) {
+        var itemNew = _this.props.selectedItems[newItemIndex];
+        var itemsNew = [itemNew].concat(_this.state.activeTokens.filter(function (item) {
+          return !isEqual(item, itemNew);
+        }));
+
+        _this.dispatch({
+          type: 'SET_ACTIVE_TOKENS',
+          payload: itemsNew
+        });
+      }
+    };
+
+    _this.handleValueChange = function (items) {
+      _this.props.onValueChange(items);
+    };
+
+    _this.handleAddItem = function () {
+      var item = _this.props.valueToItem(_this.state.inputValue);
+
+      if (item) {
+        _this.selectItem(item);
+      }
+    };
+
+    _this.selectItem = function (item) {
+      var selectedItems = _this.props.selectedItems;
+
+      if (_this.isEditingMode) {
+        _this.dispatch({
+          type: 'UPDATE_QUERY',
+          payload: _this.props.valueToString(item)
+        }, _this.finishTokenEdit);
+      } else {
+        if (!_this.hasValueInItems(selectedItems, item)) {
+          _this.handleValueChange(selectedItems.concat([item]));
+
+          _this.dispatch({
+            type: 'CLEAR_INPUT'
+          });
+
+          _this.tryGetItems();
+        }
+      }
+    };
+
+    _this.handleRemoveToken = function (item) {
+      _this.props.onValueChange(_this.props.selectedItems.filter(function (_) {
+        return !isEqual(_, item);
+      }));
+
+      var filteredActiveTokens = _this.state.activeTokens.filter(function (_) {
+        return !isEqual(_, item);
+      });
+
+      _this.dispatch({
+        type: 'SET_ACTIVE_TOKENS',
+        payload: filteredActiveTokens
+      });
+
+      if (filteredActiveTokens.length === 0) {
+        _this.focusInput();
+      }
+
+      _this.tryGetItems();
+    };
+
+    _this.handleTokenClick = function (event, itemNew) {
+      var items = _this.state.activeTokens;
+
+      if (event.ctrlKey) {
+        var newItems = _this.hasValueInItems(_this.state.activeTokens, itemNew) ? items.filter(function (item) {
+          return !isEqual(item, itemNew);
+        }) : [].concat(items, [itemNew]);
+
+        _this.dispatch({
+          type: 'SET_ACTIVE_TOKENS',
+          payload: newItems
+        });
+      } else {
+        _this.dispatch({
+          type: 'SET_ACTIVE_TOKENS',
+          payload: [itemNew]
+        });
+      }
+
+      _this.focusInput();
+    };
+
+    _this.handleTokenEdit = function (itemNew) {
+      var editingTokenIndex = _this.props.selectedItems.findIndex(function (item) {
+        return item === itemNew;
+      });
+
+      _this.dispatch({
+        type: 'SET_EDITING_TOKEN_INDEX',
+        payload: editingTokenIndex
+      });
+
+      if (_this.state.inputValue !== '') {
+        if (_this.state.reservedInputValue === undefined) _this.dispatch({
+          type: 'SET_TEMPORARY_QUERY',
+          payload: _this.state.inputValue
+        });
+      }
+
+      _this.dispatch({
+        type: 'UPDATE_QUERY',
+        payload: _this.props.valueToString(itemNew)
+      }, _this.selectInputText);
+
+      _this.dispatch({
+        type: 'REMOVE_ALL_ACTIVE_TOKENS'
+      });
+
+      _this.tryGetItems();
+    };
+
+    _this.finishTokenEdit = function () {
+      var _this$state2 = _this.state,
+          editingTokenIndex = _this$state2.editingTokenIndex,
+          inputValue = _this$state2.inputValue,
+          reservedInputValue = _this$state2.reservedInputValue;
+      var _this$props = _this.props,
+          selectedItems = _this$props.selectedItems,
+          valueToItem = _this$props.valueToItem;
+      var editedItem = valueToItem(inputValue);
+      var newItems = selectedItems.concat([]);
+
+      if (!_this.hasValueInItems(selectedItems, editedItem)) {
+        newItems.splice.apply(newItems, [editingTokenIndex, 1].concat(inputValue !== '' ? [editedItem] : []));
+
+        _this.handleValueChange(newItems);
+      }
+
+      _this.dispatch({
+        type: 'REMOVE_EDITING_TOKEN_INDEX'
+      });
+
+      if (reservedInputValue) {
+        _this.dispatch({
+          type: 'UPDATE_QUERY',
+          payload: reservedInputValue
+        });
+
+        _this.dispatch({
+          type: 'REMOVE_TEMPORARY_QUERY'
+        });
+      } else {
+        _this.dispatch({
+          type: 'CLEAR_INPUT'
+        });
+      }
+
+      if (newItems.length === selectedItems.length) {
+        _this.dispatch({
+          type: 'SET_ACTIVE_TOKENS',
+          payload: [newItems[editingTokenIndex]]
+        });
+      }
+    };
+
+    _this.checkForUnexpectedInput = function () {
+      var inputValue = _this.state.inputValue;
+      var onUnexpectedInput = _this.props.onUnexpectedInput;
+
+      if (onUnexpectedInput) {
+        // чекаем не возвращает ли что-нибудь обработчик
+        var returnedValue = onUnexpectedInput(inputValue);
+
+        if (returnedValue === undefined) {
+          return;
+        }
+
+        if (returnedValue === null) {
+          _this.dispatch({
+            type: 'CLEAR_INPUT'
+          }, function () {
+            if (_this.isEditingMode) {
+              _this.finishTokenEdit();
+            }
+          });
+
+          return;
+        }
+
+        if (returnedValue) {
+          _this.selectItem(returnedValue);
+        }
+      }
+    };
+
+    _this.handleChangeInputValue = function (event) {
+      _this.dispatch({
+        type: 'REMOVE_ALL_ACTIVE_TOKENS'
+      });
+
+      var query = event.target.value.trimLeft();
+
+      if (query.endsWith(' ')) {
+        query = query.trimRight() + ' ';
+      }
+
+      if (_this.state.inputValue !== '' && query === '') {
+        _this.dispatch({
+          type: 'SET_AUTOCOMPLETE_ITEMS',
+          payload: undefined
+        });
+      }
+
+      _this.dispatch({
+        type: 'UPDATE_QUERY',
+        payload: query
+      }, function () {
+        _this.tryGetItems(query);
+      });
+
+      if (_this.props.onInputValueChange) {
+        _this.props.onInputValueChange(query);
+      }
+    };
+
+    _this.highlightMenuItem = function () {
+      if (_this.menuRef && _this.state.autocompleteItems && _this.state.autocompleteItems.length > 0 && _this.type !== TokenInputType.Combined) {
+        _this.menuRef.highlightItem(0);
+      }
+    };
+
+    _this.renderTokensStart = function () {
+      var editingTokenIndex = _this.state.editingTokenIndex;
+      var selectedItems = _this.props.selectedItems;
+      var delimiter = editingTokenIndex >= 0 ? editingTokenIndex : selectedItems.length;
+      return selectedItems.slice(0, delimiter).map(_this.renderToken);
+    };
+
+    _this.renderTokensEnd = function () {
+      if (_this.state.editingTokenIndex >= 0) {
+        return _this.props.selectedItems.slice(_this.state.editingTokenIndex + 1).map(_this.renderToken);
+      }
+    };
+
+    _this.renderToken = function (item) {
+      var _this$props2 = _this.props,
+          _this$props2$renderTo = _this$props2.renderToken,
+          renderToken = _this$props2$renderTo === void 0 ? defaultRenderToken : _this$props2$renderTo,
+          disabled = _this$props2.disabled;
+
+      var isActive = _this.state.activeTokens.includes(item); // TODO useCallback
+
+
+      var handleIconClick = function handleIconClick(event) {
+        event.stopPropagation();
+
+        if (!_this.isEditingMode) {
+          _this.handleRemoveToken(item);
+        }
+      }; // TODO useCallback
+
+
+      var handleTokenClick = function handleTokenClick(event) {
+        event.stopPropagation();
+
+        if (!_this.isEditingMode) {
+          _this.handleTokenClick(event, item);
+        }
+      };
+
+      var handleTokenDoubleClick = function handleTokenDoubleClick(event) {
+        event.stopPropagation();
+
+        if (!_this.isEditingMode) {
+          _this.handleTokenEdit(item);
+        }
+      };
+
+      return renderToken(item, {
+        isActive: isActive,
+        onClick: handleTokenClick,
+        onDoubleClick: handleTokenDoubleClick,
+        onRemove: handleIconClick,
+        disabled: disabled
+      });
+    };
+
+    _this.renderAddButton = function (value) {
+      if (value === void 0) {
+        value = _this.state.inputValue;
+      }
+
+      if (!_this.showAddItemHint) {
+        return;
+      }
+
+      if (_this.props.renderAddButton) {
+        return _this.props.renderAddButton(value, _this.handleAddItem);
+      }
+
+      var _this$locale = _this.locale,
+          addButtonComment = _this$locale.addButtonComment,
+          addButtonTitle = _this$locale.addButtonTitle;
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        onClick: _this.handleAddItem,
+        comment: addButtonComment,
+        key: "renderAddButton"
+      }, addButtonTitle, " ", value);
+    };
+
+    return _this;
+  }
+
+  var _proto = TokenInput.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.updateInputTextWidth();
+    document.addEventListener('copy', this.handleCopy);
+
+    if (this.props.autoFocus) {
+      this.focusInput();
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    if (prevState.inputValue !== this.state.inputValue) {
+      this.updateInputTextWidth();
+    }
+
+    if (prevState.activeTokens.length === 0 && this.state.activeTokens.length > 0) {
+      this.dispatch({
+        type: 'SET_AUTOCOMPLETE_ITEMS',
+        payload: undefined
+      });
+    }
+
+    if (prevProps.selectedItems.length !== this.props.selectedItems.length) {
+      LayoutEvents.emit();
+    }
+
+    if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {
+      this.tryGetItems(this.isEditingMode ? '' : this.state.inputValue);
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    document.removeEventListener('copy', this.handleCopy);
+  }
+  /**
+  * @public
+  */
+  ;
+
+  _proto.focus = function focus() {
+    var _this$input8;
+
+    (_this$input8 = this.input) == null ? void 0 : _this$input8.focus();
+  }
+  /**
+  * @public
+  */
+  ;
+
+  _proto.blur = function blur() {
+    var _this$input9;
+
+    (_this$input9 = this.input) == null ? void 0 : _this$input9.blur();
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _cx, _cx2, _cx3;
+
+    if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
+      throw Error('Missed getItems for type ' + this.type);
+    }
+
+    var _this$props3 = this.props,
+        selectedItems = _this$props3.selectedItems,
+        width = _this$props3.width,
+        maxMenuHeight = _this$props3.maxMenuHeight,
+        error = _this$props3.error,
+        warning = _this$props3.warning,
+        disabled = _this$props3.disabled,
+        placeholder = _this$props3.placeholder,
+        renderItem = _this$props3.renderItem,
+        renderNotFound = _this$props3.renderNotFound,
+        hideMenuIfEmptyInputValue = _this$props3.hideMenuIfEmptyInputValue,
+        onMouseEnter = _this$props3.onMouseEnter,
+        onMouseLeave = _this$props3.onMouseLeave,
+        inputMode = _this$props3.inputMode,
+        menuWidth = _this$props3.menuWidth,
+        menuAlign = _this$props3.menuAlign;
+    var _this$state3 = this.state,
+        activeTokens = _this$state3.activeTokens,
+        inFocus = _this$state3.inFocus,
+        inputValueWidth = _this$state3.inputValueWidth,
+        inputValue = _this$state3.inputValue,
+        reservedInputValue = _this$state3.reservedInputValue,
+        autocompleteItems = _this$state3.autocompleteItems,
+        loading = _this$state3.loading,
+        inputValueHeight = _this$state3.inputValueHeight;
+    var showMenu = this.type !== TokenInputType.WithoutReference && this.isCursorVisible && activeTokens.length === 0 && (inputValue !== '' || !hideMenuIfEmptyInputValue);
+    var theme = this.theme;
+    var lineHeight = parseInt(theme.tokenInputLineHeight, 10) || 0;
+    var inputInlineStyles = {
+      // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
+      width: inputValueWidth,
+      height: Math.max(lineHeight, inputValueHeight),
+      // input растягивается на всю ширину чтобы placeholder не обрезался
+      flex: selectedItems && selectedItems.length === 0 ? 1 : undefined,
+      // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
+      caretColor: this.isCursorVisible ? undefined : 'transparent'
+    };
+    var labelClassName = cx(styles.label(theme), (_cx = {}, _cx[styles.labelDisabled(theme)] = !!disabled, _cx[styles.labelFocused(theme)] = !!inFocus, _cx[styles.error(theme)] = !!error, _cx[styles.warning(theme)] = !!warning, _cx));
+    var inputClassName = cx(styles.input(theme), (_cx2 = {}, _cx2[styles.inputDisabled(theme)] = !!disabled, _cx2[styles.inputEditing(theme)] = this.isEditingMode, _cx2));
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, /*#__PURE__*/React.createElement("label", {
+      ref: this.wrapperRef,
+      style: {
+        width: width
+      },
+      className: labelClassName,
+      onMouseDown: this.handleWrapperMouseDown,
+      onMouseUp: this.handleWrapperMouseUp
+    }, /*#__PURE__*/React.createElement(TextWidthHelper, {
+      ref: this.textHelperRef,
+      classHelp: cx(styles.helperText(theme), (_cx3 = {}, _cx3[styles.helperTextEditing(theme)] = this.isEditingMode, _cx3)),
+      text: inputValue,
+      theme: this.theme
+    }), this.renderTokensStart(), /*#__PURE__*/React.createElement("textarea", {
+      ref: this.inputRef,
+      value: inputValue,
+      style: inputInlineStyles,
+      spellCheck: false,
+      disabled: disabled,
+      className: inputClassName,
+      placeholder: selectedItems.length > 0 ? undefined : placeholder,
+      onFocus: this.handleInputFocus,
+      onBlur: this.handleInputBlur,
+      onChange: this.handleChangeInputValue,
+      onKeyDown: this.handleKeyDown,
+      onPaste: this.handleInputPaste,
+      inputMode: inputMode
+    }), showMenu && /*#__PURE__*/React.createElement(TokenInputMenu, {
+      ref: this.tokensInputMenuRef,
+      items: autocompleteItems,
+      loading: loading,
+      opened: showMenu,
+      maxMenuHeight: maxMenuHeight,
+      anchorElement: menuAlign === 'cursor' ? this.input : this.wrapper,
+      renderNotFound: renderNotFound,
+      renderItem: renderItem,
+      onValueChange: this.selectItem,
+      renderAddButton: this.renderAddButton,
+      menuWidth: menuWidth,
+      menuAlign: menuAlign
+    }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement("span", {
+      className: styles.reservedInput(theme)
+    }, reservedInputValue) : null)));
+  }
+  /**
+  * Сбрасывает введенное пользователем значение
+  * @public
+  */
+  ;
+
+  _proto.reset = function reset() {
+    this.dispatch({
+      type: 'RESET'
+    });
+  };
+
+  _proto.isCursorVisibleForState = function isCursorVisibleForState(state) {
+    return state.inFocus && (state.inputValue !== '' || state.activeTokens.length === 0);
+  };
+
+  _proto.updateInputTextWidth = function updateInputTextWidth() {
+    if (this.textHelper) {
+      // в IE текст иногда не помещается в input
+      // из-за округления, поэтому округляем явно
+      var inputValueWidth = parseFloat(this.textHelper.getTextWidth().toFixed(2));
+      var inputValueHeight = parseFloat(this.textHelper.getTextHeight().toFixed(2));
+      this.dispatch({
+        type: 'SET_INPUT_VALUE_WIDTH',
+        payload: inputValueWidth
+      }, LayoutEvents.emit);
+      this.dispatch({
+        type: 'SET_INPUT_VALUE_HEIGHT',
+        payload: inputValueHeight
+      }, LayoutEvents.emit);
+    }
+  };
+
+  _proto.moveFocusToLastToken = function moveFocusToLastToken() {
+    var items = this.props.selectedItems;
+
+    if (this.state.inputValue === '' && items && items.length > 0) {
+      this.dispatch({
+        type: 'SET_ACTIVE_TOKENS',
+        payload: items.slice(-1)
+      });
+    }
+  };
+
+  _createClass(TokenInput, [{
+    key: "showAddItemHint",
+    get: function get() {
+      var items = this.state.autocompleteItems;
+      var value = this.props.valueToItem(this.state.inputValue);
+
+      if (items && this.hasValueInItems(items, value)) {
+        return false;
+      }
+
+      var selectedItems = this.props.selectedItems;
+
+      if (selectedItems && this.hasValueInItems(selectedItems, value)) {
+        return false;
+      }
+
+      if (this.type === TokenInputType.Combined && this.state.inputValue !== '') {
+        return true;
+      }
+    }
+  }, {
+    key: "type",
+    get: function get() {
+      return this.props.type ? this.props.type : TokenInputType.WithReference;
+    }
+  }, {
+    key: "menuRef",
+    get: function get() {
+      return this.tokensInputMenu && this.tokensInputMenu.getMenuRef();
+    }
+  }, {
+    key: "isCursorVisible",
+    get: function get() {
+      return this.isCursorVisibleForState(this.state);
+    }
+  }, {
+    key: "isEditingMode",
+    get: function get() {
+      return this.state.editingTokenIndex > -1;
+    }
+  }, {
+    key: "isInputChanged",
+    get: function get() {
+      if (this.isEditingMode) {
+        return this.isTokenValueChanged;
+      }
+
+      return this.isInputValueChanged;
+    }
+  }, {
+    key: "isInputValueChanged",
+    get: function get() {
+      var inputValue = this.state.inputValue;
+      return inputValue !== '';
+    }
+  }, {
+    key: "isTokenValueChanged",
+    get: function get() {
+      var _this$state4 = this.state,
+          inputValue = _this$state4.inputValue,
+          editingTokenIndex = _this$state4.editingTokenIndex;
+      var _this$props4 = this.props,
+          selectedItems = _this$props4.selectedItems,
+          valueToString = _this$props4.valueToString;
+
+      if (this.isEditingMode) {
+        return valueToString(selectedItems[editingTokenIndex]) !== inputValue;
+      }
+
+      return false;
+    }
+  }]);
+
+  return TokenInput;
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'TokenInput', _class2.defaultProps = {
+  selectedItems: [],
+  delimiters: [',', ' '],
+  renderItem: identity,
+  renderValue: identity,
+  valueToString: identity,
+  valueToItem: function valueToItem(item) {
+    return item;
+  },
+  toKey: defaultToKey,
+  onValueChange: function onValueChange() {
+    return void 0;
+  },
+  width: 250,
+  onBlur: emptyHandler,
+  onFocus: emptyHandler,
+  onMouseEnter: emptyHandler,
+  onMouseLeave: emptyHandler,
+  menuWidth: 'auto',
+  menuAlign: 'cursor'
+}, _temp)) || _class);