@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

package/components/TokenInput/TokenInput/TokenInput.js

@@ -1,23 +1,27 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _extends from "@babel/runtime/helpers/esm/extends";
 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";
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import isEqual from 'lodash.isequal';
-import cn from 'classnames';
-import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
+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 { getRootNode, rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { getUid } from "../../../lib/uidUtils";
 import { TokenInputLocaleHelper } from "../locale";
-import { jsStyles } from "../TokenInput.styles";
+import { styles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
 import { TokenInputMenu } from "../TokenInputMenu";
 import { TextWidthHelper } from "../TextWidthHelper";
@@ -31,12 +35,19 @@ export var TokenInputType;
 
 export var DefaultState = {
   inputValue: '',
+  reservedInputValue: undefined,
   autocompleteItems: undefined,
   activeTokens: [],
+  editingTokenIndex: -1,
   inFocus: false,
   loading: false,
   preventBlur: false,
-  inputValueWidth: 20
+  inputValueWidth: 2,
+  inputValueHeight: 22
+};
+export var TokenInputDataTids = {
+  root: 'TokenInput__root',
+  tokenInputMenu: 'TokenInputMenu__root'
 };
 
 var defaultToKey = function defaultToKey(item) {
@@ -50,20 +61,20 @@ var identity = function identity(item) {
 var defaultRenderToken = function defaultRenderToken(item, _ref) {
   var isActive = _ref.isActive,
       onClick = _ref.onClick,
+      onDoubleClick = _ref.onDoubleClick,
       onRemove = _ref.onRemove,
       disabled = _ref.disabled;
-  return React.createElement(Token, {
+  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) {
+export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(TokenInput, _React$PureComponent);
 
   function TokenInput() {
@@ -74,13 +85,14 @@ function (_React$PureComponent) {
     }
 
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(TokenInput.defaultProps);
     _this.state = DefaultState;
-    _this.locale = void 0;
-    _this.theme = void 0;
+    _this.textareaId = getUid();
     _this.input = null;
     _this.tokensInputMenu = null;
     _this.textHelper = null;
     _this.wrapper = null;
+    _this.memoizedTokens = new Map();
 
     _this.hasValueInItems = function (items, value) {
       if (typeof value === 'string') {
@@ -120,20 +132,27 @@ function (_React$PureComponent) {
         type: 'SET_FOCUS_IN'
       });
 
-      if (_this.props.onFocus) {
-        _this.props.onFocus(event);
-      }
+      _this.getProps().onFocus(event);
     };
 
     _this.handleInputBlur = function (event) {
-      if (_this.isBlurToMenu(event) || _this.state.preventBlur) {
+      var isBlurToMenu = _this.isBlurToMenu(event);
+
+      if (!isBlurToMenu) {
+        _this.handleOutsideBlur();
+      }
+
+      if (isBlurToMenu || _this.state.preventBlur) {
+        var _this$input;
+
         event.preventDefault(); // первый focus нужен для предотвращения/уменьшения моргания в других браузерах
 
-        _this.input.focus(); // в firefox не работает без второго focus
+        (_this$input = _this.input) == null ? void 0 : _this$input.focus(); // в firefox не работает без второго focus
 
+        requestAnimationFrame(function () {
+          var _this$input2;
 
-        process.nextTick(function () {
-          return _this.input.focus();
+          return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus();
         });
 
         _this.dispatch({
@@ -144,16 +163,52 @@ function (_React$PureComponent) {
         _this.dispatch({
           type: 'BLUR'
         });
+
+        _this.getProps().onBlur(event);
+      }
+    };
+
+    _this.handleOutsideBlur = function () {
+      var _this$state = _this.state,
+          inputValue = _this$state.inputValue,
+          autocompleteItems = _this$state.autocompleteItems;
+
+      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 (_this.getProps().valueToString(_item) === inputValue) {
+          _this.isEditingMode ? _this.finishTokenEdit() : _this.selectItem(_item);
+          return;
+        }
       }
 
-      if (_this.props.onBlur) {
-        _this.props.onBlur(event);
+      if (_this.isInputChanged) {
+        _this.checkForUnexpectedInput();
       }
     };
 
     _this.isBlurToMenu = function (event) {
       if (_this.menuRef) {
-        var menu = findDOMNode(_this.menuRef);
+        var _this$tokensInputMenu;
+
+        var menu = getRootNode((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
         var relatedTarget = event.relatedTarget || document.activeElement;
 
         if (menu && menu.contains(relatedTarget)) {
@@ -165,14 +220,15 @@ function (_React$PureComponent) {
     };
 
     _this.handleWrapperMouseDown = function (event) {
+      var _this$wrapper;
+
       _this.dispatch({
         type: 'SET_PREVENT_BLUR',
         payload: true
       });
 
       var target = event.target;
-
-      var isClickOnToken = target && _this.wrapper.contains(target) && target !== _this.wrapper && target !== _this.input;
+      var isClickOnToken = target && ((_this$wrapper = _this.wrapper) == null ? void 0 : _this$wrapper.contains(target)) && target !== _this.wrapper && target !== _this.input;
 
       if (!isClickOnToken) {
         _this.dispatch({
@@ -193,17 +249,23 @@ function (_React$PureComponent) {
         return;
       }
 
-      event.preventDefault(); // упорядочивание токенов по индексу
+      event.preventDefault();
+
+      var _this$getProps = _this.getProps(),
+          selectedItems = _this$getProps.selectedItems,
+          valueToString = _this$getProps.valueToString,
+          delimiters = _this$getProps.delimiters; // упорядочивание токенов по индексу
+
 
       var tokens = _this.state.activeTokens.map(function (token) {
-        return _this.props.selectedItems.indexOf(token);
+        return selectedItems.indexOf(token);
       }).sort().map(function (index) {
-        return _this.props.selectedItems[index];
+        return selectedItems[index];
       }).map(function (item) {
-        return _this.props.valueToString(item);
+        return valueToString(item);
       });
 
-      event.clipboardData.setData('text/plain', tokens.join(_this.delimiters[0]));
+      event.clipboardData.setData('text/plain', tokens.join(delimiters[0]));
     };
 
     _this.handleInputPaste = function (event) {
@@ -212,51 +274,42 @@ function (_React$PureComponent) {
       }
 
       var paste = event.clipboardData.getData('text');
-      var delimiters = _this.delimiters;
+
+      var _this$getProps2 = _this.getProps(),
+          delimiters = _this$getProps2.delimiters,
+          selectedItems = _this$getProps2.selectedItems,
+          valueToItem = _this$getProps2.valueToItem,
+          onValueChange = _this$getProps2.onValueChange;
 
       if (delimiters.some(function (delimiter) {
         return paste.includes(delimiter);
       })) {
         event.preventDefault();
         event.stopPropagation();
+        var tokens = paste.trim().split(new RegExp("[" + delimiters.join('') + "]+"));
 
-        for (var _iterator = delimiters, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-          var _ref2;
-
-          if (_isArray) {
-            if (_i >= _iterator.length) break;
-            _ref2 = _iterator[_i++];
-          } else {
-            _i = _iterator.next();
-            if (_i.done) break;
-            _ref2 = _i.value;
-          }
-
-          var delimiter = _ref2;
-          paste = paste.split(delimiter).join(delimiters[0]);
-        }
-
-        var tokens = paste.split(delimiters[0]);
-
-        var _items = tokens.map(function (token) {
-          return _this.props.valueToItem(token);
+        var _items = tokens.filter(Boolean).map(function (token) {
+          return valueToItem(token);
         }).filter(function (item) {
-          return !_this.hasValueInItems(_this.props.selectedItems, item);
+          return item && !_this.hasValueInItems(selectedItems, item);
         });
 
-        var newItems = _this.props.selectedItems.concat(_items);
+        var newItems = selectedItems.concat(_items);
+        onValueChange(newItems);
 
-        _this.props.onValueChange(newItems);
+        _this.dispatch({
+          type: 'SET_AUTOCOMPLETE_ITEMS',
+          payload: undefined
+        });
+
+        _this.tryGetItems();
       }
     };
 
-    _this.tryGetItems =
-    /*#__PURE__*/
-    function () {
-      var _ref3 = _asyncToGenerator(
-      /*#__PURE__*/
-      _regeneratorRuntime.mark(function _callee(query) {
-        var autocompleteItems, autocompleteItemsUnique;
+    _this.tryGetItems = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
+        var autocompleteItems, _this$getProps3, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;
+
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -266,7 +319,7 @@ function (_React$PureComponent) {
                 }
 
                 if (!(_this.props.getItems && (_this.state.inputValue !== '' || !_this.props.hideMenuIfEmptyInputValue))) {
-                  _context.next = 9;
+                  _context.next = 15;
                   break;
                 }
 
@@ -286,10 +339,29 @@ function (_React$PureComponent) {
                   payload: false
                 });
 
+                _this$getProps3 = _this.getProps(), selectedItems = _this$getProps3.selectedItems, valueToItem = _this$getProps3.valueToItem, valueToString = _this$getProps3.valueToString;
+
+                isSelectedItem = function isSelectedItem(item) {
+                  return _this.hasValueInItems(selectedItems, item);
+                };
+
+                isEditingItem = function isEditingItem(item) {
+                  var editingItem = selectedItems[_this.state.editingTokenIndex];
+                  return !!editingItem && isEqual(item, editingItem);
+                };
+
                 autocompleteItemsUnique = autocompleteItems.filter(function (item) {
-                  return !_this.hasValueInItems(_this.props.selectedItems, item);
+                  return !isSelectedItem(item) || isEditingItem(item);
                 });
 
+                if (_this.isEditingMode) {
+                  editingItem = selectedItems[_this.state.editingTokenIndex];
+
+                  if (isEqual(editingItem, valueToItem(_this.state.inputValue)) && !_this.hasValueInItems(autocompleteItemsUnique, editingItem)) {
+                    autocompleteItemsUnique.unshift(editingItem);
+                  }
+                }
+
                 if (query === '' || _this.state.inputValue !== '') {
                   _this.dispatch({
                     type: 'SET_AUTOCOMPLETE_ITEMS',
@@ -301,7 +373,15 @@ function (_React$PureComponent) {
                   });
                 }
 
-              case 9:
+                selectItemIndex = autocompleteItemsUnique.findIndex(function (item) {
+                  return valueToString(item).toLowerCase() === _this.state.inputValue.toLowerCase();
+                });
+
+                if (_this.menuRef) {
+                  _this.menuRef.highlightItem(selectItemIndex < 0 ? 0 : selectItemIndex);
+                }
+
+              case 15:
               case "end":
                 return _context.stop();
             }
@@ -310,7 +390,7 @@ function (_React$PureComponent) {
       }));
 
       return function (_x) {
-        return _ref3.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }();
 
@@ -323,23 +403,36 @@ function (_React$PureComponent) {
     };
 
     _this.handleInputKeyDown = function (e) {
+      var _this$input3, _this$input4;
+
       e.stopPropagation();
 
-      if (_this.type !== TokenInputType.WithReference && (isKeyEnter(e) || _this.delimiters.includes(e.key))) {
+      if (_this.type !== TokenInputType.WithReference && _this.getProps().delimiters.some(function (key) {
+        return key === e.key || key === ',' && isKeyComma(e);
+      }) || isKeyEnter(e) && _this.type === TokenInputType.WithoutReference) {
         e.preventDefault();
         var newValue = _this.state.inputValue;
 
         if (newValue !== '') {
-          _this.handleAddItem();
+          if (_this.isEditingMode) {
+            _this.finishTokenEdit();
+          } else {
+            _this.handleAddItem();
+          }
         }
       }
 
+      var isRightmostTokenNotDisabled = !_this.isTokenDisabled(_this.getProps().selectedItems.length - 1);
+
       switch (true) {
         case isKeyEnter(e):
           if (_this.menuRef) {
             _this.menuRef.enter(e);
-          }
+          } // don't allow textarea
+          // became multiline
+
 
+          e.preventDefault();
           break;
 
         case isKeyArrowVertical(e):
@@ -356,18 +449,28 @@ function (_React$PureComponent) {
           break;
 
         case isKeyEscape(e):
-          _this.input.blur();
-
+          (_this$input3 = _this.input) == null ? void 0 : _this$input3.blur();
           break;
 
         case isKeyBackspace(e):
-          _this.moveFocusToLastToken();
+          if (!_this.isEditingMode && isRightmostTokenNotDisabled) {
+            _this.moveFocusToLastToken();
+          }
 
           break;
 
         case isKeyArrowLeft(e):
-          if (_this.input.selectionStart === 0) {
-            _this.moveFocusToLastToken();
+          if (((_this$input4 = _this.input) == null ? void 0 : _this$input4.selectionStart) === 0) {
+            var index = _this.getAvailableTokenIndex(_this.getProps().selectedItems.length);
+
+            var itemNew = _this.getProps().selectedItems[index];
+
+            if (itemNew) {
+              _this.dispatch({
+                type: 'SET_ACTIVE_TOKENS',
+                payload: [itemNew]
+              });
+            }
           }
 
           break;
@@ -375,29 +478,47 @@ function (_React$PureComponent) {
     };
 
     _this.focusInput = function () {
-      process.nextTick(function () {
-        return _this.input.focus();
+      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;
+
+      var _this$getProps4 = _this.getProps(),
+          selectedItems = _this$getProps4.selectedItems,
+          onValueChange = _this$getProps4.onValueChange;
+
       switch (true) {
         case isKeyBackspace(e):
         case isKeyDelete(e):
           {
-            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 () {
-              LayoutEvents.emit();
-
-              _this.input.focus();
-            });
+            var indexOfActiveToken = _this.getProps().selectedItems.indexOf(_this.state.activeTokens[_this.state.activeTokens.length - 1]);
+
+            if (!_this.isEditingMode && !_this.isTokenDisabled(indexOfActiveToken)) {
+              var itemsNew = selectedItems.filter(function (item) {
+                return !_this.hasValueInItems(_this.state.activeTokens, item);
+              });
+              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;
           }
@@ -408,7 +529,15 @@ function (_React$PureComponent) {
           break;
 
         case isKeyEscape(e):
-          _this.wrapper.blur();
+          (_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;
 
@@ -417,7 +546,9 @@ function (_React$PureComponent) {
 
           _this.dispatch({
             type: 'SET_ACTIVE_TOKENS',
-            payload: _this.props.selectedItems
+            payload: selectedItems.filter(function (item) {
+              return !_this.isTokenDisabled(selectedItems.indexOf(item));
+            })
           });
 
           break;
@@ -426,13 +557,16 @@ function (_React$PureComponent) {
 
     _this.handleWrapperArrows = function (e) {
       e.preventDefault();
+
+      var selectedItems = _this.getProps().selectedItems;
+
       var activeTokens = _this.state.activeTokens;
+      var activeItemIndex = selectedItems.indexOf(activeTokens[0]);
 
-      var activeItemIndex = _this.props.selectedItems.indexOf(activeTokens[0]);
+      var newItemIndex = _this.getAvailableTokenIndex(activeItemIndex, isKeyArrowLeft(e));
 
-      var newItemIndex = activeItemIndex + (isKeyArrowLeft(e) ? -1 : +1);
       var isLeftEdge = activeItemIndex === 0 && isKeyArrowLeft(e);
-      var isRightEdge = activeItemIndex === _this.props.selectedItems.length - 1 && isKeyArrowRight(e);
+      var isRightEdge = newItemIndex === selectedItems.length && isKeyArrowRight(e);
 
       if (!e.shiftKey && activeTokens.length === 1) {
         _this.handleWrapperArrowsWithoutShift(isLeftEdge, isRightEdge, newItemIndex);
@@ -446,19 +580,22 @@ function (_React$PureComponent) {
         _this.dispatch({
           type: 'REMOVE_ALL_ACTIVE_TOKENS'
         }, function () {
-          return _this.input.focus();
+          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]]
+          payload: [_this.getProps().selectedItems[newItemIndex]]
         });
       }
     };
 
     _this.handleWrapperArrowsWithShift = function (isLeftEdge, isRightEdge, newItemIndex) {
       if (!isLeftEdge && !isRightEdge) {
-        var itemNew = _this.props.selectedItems[newItemIndex];
+        var itemNew = _this.getProps().selectedItems[newItemIndex];
+
         var itemsNew = [itemNew].concat(_this.state.activeTokens.filter(function (item) {
           return !isEqual(item, itemNew);
         }));
@@ -470,44 +607,41 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleValueChange = function (item) {
-      if (_this.hasValueInItems(_this.props.selectedItems, item)) {
-        return;
-      }
-
-      var newItems = _this.props.selectedItems.concat([item]);
-
-      _this.props.onValueChange(newItems);
-
-      _this.dispatch({
-        type: 'CLEAR_INPUT'
-      });
-
-      _this.tryGetItems();
+    _this.handleValueChange = function (items) {
+      _this.getProps().onValueChange(items);
     };
 
     _this.handleAddItem = function () {
-      var item = _this.state.inputValue;
+      var item = _this.getProps().valueToItem(_this.state.inputValue);
 
-      var value = _this.props.valueToItem(item);
-
-      if (_this.hasValueInItems(_this.props.selectedItems, value)) {
-        return;
+      if (item) {
+        _this.selectItem(item);
       }
+    };
 
-      var newItems = _this.props.selectedItems.concat([value]);
+    _this.selectItem = function (item) {
+      var _this$getProps5 = _this.getProps(),
+          selectedItems = _this$getProps5.selectedItems,
+          valueToString = _this$getProps5.valueToString;
 
-      _this.props.onValueChange(newItems);
+      if (_this.isEditingMode) {
+        _this.dispatch({
+          type: 'UPDATE_QUERY',
+          payload: valueToString(item)
+        }, _this.finishTokenEdit);
+      } else if (!_this.hasValueInItems(selectedItems, item)) {
+        _this.handleValueChange(selectedItems.concat([item]));
 
-      _this.dispatch({
-        type: 'CLEAR_INPUT'
-      });
+        _this.dispatch({
+          type: 'CLEAR_INPUT'
+        });
 
-      _this.tryGetItems();
+        _this.tryGetItems();
+      }
     };
 
     _this.handleRemoveToken = function (item) {
-      _this.props.onValueChange(_this.props.selectedItems.filter(function (_) {
+      _this.props.onValueChange == null ? void 0 : _this.props.onValueChange(_this.getProps().selectedItems.filter(function (_) {
         return !isEqual(_, item);
       }));
 
@@ -549,7 +683,121 @@ function (_React$PureComponent) {
       _this.focusInput();
     };
 
+    _this.handleTokenEdit = function (itemNew) {
+      var _this$getProps6 = _this.getProps(),
+          selectedItems = _this$getProps6.selectedItems,
+          valueToString = _this$getProps6.valueToString;
+
+      var editingTokenIndex = 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: valueToString(itemNew)
+      }, _this.selectInputText);
+
+      _this.dispatch({
+        type: 'REMOVE_ALL_ACTIVE_TOKENS'
+      });
+
+      _this.tryGetItems();
+    };
+
+    _this.finishTokenEdit = function () {
+      var selectedItems = _this.getProps().selectedItems;
+
+      var _this$state2 = _this.state,
+          editingTokenIndex = _this$state2.editingTokenIndex,
+          inputValue = _this$state2.inputValue,
+          reservedInputValue = _this$state2.reservedInputValue;
+
+      var editedItem = _this.getProps().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(' ')) {
@@ -581,11 +829,24 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.renderTokenFields = function () {
-      return _this.props.selectedItems.map(_this.renderToken);
+    _this.renderTokensStart = function () {
+      var editingTokenIndex = _this.state.editingTokenIndex;
+
+      var selectedItems = _this.getProps().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.getProps().selectedItems.slice(_this.state.editingTokenIndex + 1).map(_this.renderToken);
+      }
     };
 
     _this.renderToken = function (item) {
+      var _this$props$selectedI;
+
       var _this$props = _this.props,
           _this$props$renderTok = _this$props.renderToken,
           renderToken = _this$props$renderTok === void 0 ? defaultRenderToken : _this$props$renderTok,
@@ -597,22 +858,39 @@ function (_React$PureComponent) {
       var handleIconClick = function handleIconClick(event) {
         event.stopPropagation();
 
-        _this.handleRemoveToken(item);
+        if (!_this.isEditingMode) {
+          _this.handleRemoveToken(item);
+        }
       }; // TODO useCallback
 
 
       var handleTokenClick = function handleTokenClick(event) {
         event.stopPropagation();
 
-        _this.handleTokenClick(event, item);
+        if (!_this.isEditingMode) {
+          _this.handleTokenClick(event, item);
+        }
+      };
+
+      var handleTokenDoubleClick = function handleTokenDoubleClick(event) {
+        event.stopPropagation();
+
+        if (!_this.isEditingMode && !disabled) {
+          _this.handleTokenEdit(item);
+        }
       };
 
-      return renderToken(item, {
+      var renderedToken = renderToken(item, {
         isActive: isActive,
         onClick: handleTokenClick,
+        onDoubleClick: handleTokenDoubleClick,
         onRemove: handleIconClick,
         disabled: disabled
       });
+
+      _this.memoizedTokens.set((_this$props$selectedI = _this.props.selectedItems) == null ? void 0 : _this$props$selectedI.indexOf(item), renderedToken);
+
+      return renderedToken;
     };
 
     _this.renderAddButton = function (value) {
@@ -631,13 +909,51 @@ function (_React$PureComponent) {
       var _this$locale = _this.locale,
           addButtonComment = _this$locale.addButtonComment,
           addButtonTitle = _this$locale.addButtonTitle;
-      return React.createElement(MenuItem, {
+      return /*#__PURE__*/React.createElement(MenuItem, {
         onClick: _this.handleAddItem,
         comment: addButtonComment,
         key: "renderAddButton"
       }, addButtonTitle, " ", value);
     };
 
+    _this.isTokenDisabled = function (itemIndex) {
+      var renderedToken;
+
+      if (_this.memoizedTokens.has(itemIndex)) {
+        renderedToken = _this.memoizedTokens.get(itemIndex);
+      } else if (itemIndex < 0 || itemIndex > _this.getProps().selectedItems.length - 1) {
+        return false;
+      } else {
+        renderedToken = _this.renderToken(_this.getProps().selectedItems[itemIndex]);
+      }
+
+      return renderedToken.props.disabled;
+    };
+
+    _this.getAvailableTokenIndex = function (startIndex, isDirectionLeft) {
+      if (isDirectionLeft === void 0) {
+        isDirectionLeft = true;
+      }
+
+      var _this$getProps7 = _this.getProps(),
+          selectedItems = _this$getProps7.selectedItems;
+
+      var step = isDirectionLeft ? -1 : +1;
+      var availableIndex = startIndex + step;
+
+      while (_this.isTokenDisabled(availableIndex)) {
+        availableIndex += step;
+
+        if (availableIndex === selectedItems.length) {
+          return availableIndex;
+        } else if (availableIndex === -1) {
+          return startIndex;
+        }
+      }
+
+      return availableIndex;
+    };
+
     return _this;
   }
 
@@ -664,87 +980,126 @@ function (_React$PureComponent) {
       });
     }
 
-    if (prevProps.selectedItems.length !== this.props.selectedItems.length) {
+    if (prevProps.selectedItems.length !== this.getProps().selectedItems.length) {
       LayoutEvents.emit();
+      this.memoizedTokens.clear();
     }
 
     if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {
-      this.tryGetItems(this.state.inputValue);
+      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 React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
       return _this2.renderMain();
     });
   };
 
   _proto.renderMain = function renderMain() {
-    var _cn, _cn2;
+    var _cx, _cx2, _cx3;
 
     if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
       throw Error('Missed getItems for type ' + this.type);
     }
 
     var _this$props2 = this.props,
-        selectedItems = _this$props2.selectedItems,
-        width = _this$props2.width,
         maxMenuHeight = _this$props2.maxMenuHeight,
         error = _this$props2.error,
         warning = _this$props2.warning,
         disabled = _this$props2.disabled,
         placeholder = _this$props2.placeholder,
-        renderItem = _this$props2.renderItem,
         renderNotFound = _this$props2.renderNotFound,
         hideMenuIfEmptyInputValue = _this$props2.hideMenuIfEmptyInputValue,
-        onMouseEnter = _this$props2.onMouseEnter,
-        onMouseLeave = _this$props2.onMouseLeave;
-    var _this$state = this.state,
-        activeTokens = _this$state.activeTokens,
-        inFocus = _this$state.inFocus,
-        inputValueWidth = _this$state.inputValueWidth,
-        inputValue = _this$state.inputValue,
-        autocompleteItems = _this$state.autocompleteItems,
-        loading = _this$state.loading;
+        inputMode = _this$props2.inputMode,
+        renderTotalCount = _this$props2.renderTotalCount,
+        totalCount = _this$props2.totalCount,
+        ariaDescribedby = _this$props2['aria-describedby'];
+
+    var _this$getProps8 = this.getProps(),
+        selectedItems = _this$getProps8.selectedItems,
+        width = _this$getProps8.width,
+        onMouseEnter = _this$getProps8.onMouseEnter,
+        onMouseLeave = _this$getProps8.onMouseLeave,
+        menuWidth = _this$getProps8.menuWidth,
+        menuAlign = _this$getProps8.menuAlign,
+        renderItem = _this$getProps8.renderItem;
+
+    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: Math.max(50, inputValueWidth + 7),
+      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 theme = this.theme;
-    var labelClassName = cn(jsStyles.label(theme), (_cn = {}, _cn[jsStyles.labelFocused(theme)] = !!inFocus, _cn[jsStyles.error(theme)] = !!error, _cn[jsStyles.warning(theme)] = !!warning, _cn[jsStyles.labelDisabled(theme)] = !!disabled, _cn));
-    var inputClassName = cn(jsStyles.input(theme), (_cn2 = {}, _cn2[jsStyles.inputDisabled(theme)] = !!disabled, _cn2));
-    return React.createElement("div", {
+    var labelClassName = cx(styles.label(theme), (_cx = {}, _cx[styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _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, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": TokenInputDataTids.root,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
-    }, React.createElement(TextWidthHelper, {
-      ref: this.textHelperRef,
-      text: inputValue
-    }), React.createElement("label", {
+    }, /*#__PURE__*/React.createElement("label", {
       ref: this.wrapperRef,
       style: {
         width: width
       },
       className: labelClassName,
       onMouseDown: this.handleWrapperMouseDown,
-      onMouseUp: this.handleWrapperMouseUp
-    }, this.renderTokenFields(), React.createElement("input", {
-      type: "text",
+      onMouseUp: this.handleWrapperMouseUp,
+      htmlFor: this.textareaId
+    }, /*#__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", {
+      id: this.textareaId,
       ref: this.inputRef,
       value: inputValue,
       style: inputInlineStyles,
-      autoComplete: "off",
       spellCheck: false,
       disabled: disabled,
       className: inputClassName,
@@ -753,24 +1108,32 @@ function (_React$PureComponent) {
       onBlur: this.handleInputBlur,
       onChange: this.handleChangeInputValue,
       onKeyDown: this.handleKeyDown,
-      onPaste: this.handleInputPaste
-    }), showMenu && React.createElement(TokenInputMenu, {
+      onPaste: this.handleInputPaste,
+      inputMode: inputMode,
+      "aria-describedby": ariaDescribedby
+    }), showMenu && /*#__PURE__*/React.createElement(TokenInputMenu, {
       ref: this.tokensInputMenuRef,
       items: autocompleteItems,
       loading: loading,
       opened: showMenu,
       maxMenuHeight: maxMenuHeight,
-      anchorElement: this.input,
+      anchorElement: menuAlign === 'cursor' ? this.input : this.wrapper,
       renderNotFound: renderNotFound,
       renderItem: renderItem,
-      onValueChange: this.handleValueChange,
-      renderAddButton: this.renderAddButton
-    })));
+      onValueChange: this.selectItem,
+      renderAddButton: this.renderAddButton,
+      menuWidth: menuWidth,
+      menuAlign: menuAlign,
+      renderTotalCount: renderTotalCount,
+      totalCount: totalCount
+    }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement("span", {
+      className: styles.reservedInput(theme)
+    }, reservedInputValue) : null)));
   }
-  /**
-   * Сбрасывает введенное пользователем значение
-   * @public
-   */
+  /**
+  * Сбрасывает введенное пользователем значение
+  * @public
+  */
   ;
 
   _proto.reset = function reset() {
@@ -785,16 +1148,23 @@ function (_React$PureComponent) {
 
   _proto.updateInputTextWidth = function updateInputTextWidth() {
     if (this.textHelper) {
-      var inputValueWidth = this.textHelper.getTextWidth();
+      // в 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;
+    var items = this.getProps().selectedItems;
 
     if (this.state.inputValue === '' && items && items.length > 0) {
       this.dispatch({
@@ -808,13 +1178,13 @@ function (_React$PureComponent) {
     key: "showAddItemHint",
     get: function get() {
       var items = this.state.autocompleteItems;
-      var value = this.props.valueToItem(this.state.inputValue);
+      var value = this.getProps().valueToItem(this.state.inputValue);
 
       if (items && this.hasValueInItems(items, value)) {
         return false;
       }
 
-      var selectedItems = this.props.selectedItems;
+      var selectedItems = this.getProps().selectedItems;
 
       if (selectedItems && this.hasValueInItems(selectedItems, value)) {
         return false;
@@ -829,11 +1199,6 @@ function (_React$PureComponent) {
     get: function get() {
       return this.props.type ? this.props.type : TokenInputType.WithReference;
     }
-  }, {
-    key: "delimiters",
-    get: function get() {
-      return this.props.delimiters ? this.props.delimiters : [','];
-    }
   }, {
     key: "menuRef",
     get: function get() {
@@ -844,11 +1209,49 @@ function (_React$PureComponent) {
     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$getProps9 = this.getProps(),
+          valueToString = _this$getProps9.valueToString,
+          selectedItems = _this$getProps9.selectedItems;
+
+      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,
@@ -863,5 +1266,7 @@ function (_React$PureComponent) {
   onBlur: emptyHandler,
   onFocus: emptyHandler,
   onMouseEnter: emptyHandler,
-  onMouseLeave: emptyHandler
-}, _temp)) || _class);
+  onMouseLeave: emptyHandler,
+  menuWidth: 'auto',
+  menuAlign: 'cursor'
+}, _temp)) || _class) || _class);