@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/components/TokenInput/TokenInput/TokenInput.js

@@ -6,64 +6,30 @@ 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 = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-
-  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.");
-}
-
-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 isEqual from 'lodash.isequal';
+import { globalObject } from '@skbkontur/global-object';
+import { PopupIds } from "../../../internal/Popup";
 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 { MenuItem } from "../../MenuItem";
+import { emptyHandler, getRandomID } 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 { TokenView } from "../../Token/TokenView";
+import { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from "../../../lib/featureFlagsContext";
 import { TokenInputLocaleHelper } from "../locale";
 import { styles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
 import { TokenInputMenu } from "../TokenInputMenu";
 import { TextWidthHelper } from "../TextWidthHelper";
+var TEMP_FAKE_FLAG = 'TEMP_FAKE_FLAG';
 export var TokenInputType;
 
 (function (TokenInputType) {
@@ -84,6 +50,11 @@ export var DefaultState = {
   inputValueWidth: 2,
   inputValueHeight: 22
 };
+export var TokenInputDataTids = {
+  root: 'TokenInput__root',
+  tokenInputMenu: 'TokenInputMenu__root',
+  label: 'TokenInput__label'
+};
 
 var defaultToKey = function defaultToKey(item) {
   return item.toString();
@@ -98,14 +69,16 @@ var defaultRenderToken = function defaultRenderToken(item, _ref) {
       onClick = _ref.onClick,
       onDoubleClick = _ref.onDoubleClick,
       onRemove = _ref.onRemove,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      size = _ref.size;
   return /*#__PURE__*/React.createElement(Token, {
     key: item.toString(),
     isActive: isActive,
     onClick: onClick,
     onDoubleClick: onDoubleClick,
     onRemove: onRemove,
-    disabled: disabled
+    disabled: disabled,
+    size: size
   }, item);
 };
 
@@ -121,10 +94,13 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
     _this.state = DefaultState;
+    _this._textareaId = getUid();
+    _this.rootId = PopupIds.root + getRandomID();
     _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') {
@@ -164,9 +140,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         type: 'SET_FOCUS_IN'
       });
 
-      if (_this.props.onFocus) {
-        _this.props.onFocus(event);
-      }
+      _this.getProps().onFocus(event);
     };
 
     _this.handleInputBlur = function (event) {
@@ -183,7 +157,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
         (_this$input = _this.input) == null ? void 0 : _this$input.focus(); // в firefox не работает без второго focus
 
-        requestAnimationFrame(function () {
+        globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
           var _this$input2;
 
           return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus();
@@ -198,7 +172,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           type: 'BLUR'
         });
 
-        _this.props.onBlur == null ? void 0 : _this.props.onBlur(event);
+        _this.getProps().onBlur(event);
       }
     };
 
@@ -206,7 +180,6 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       var _this$state = _this.state,
           inputValue = _this$state.inputValue,
           autocompleteItems = _this$state.autocompleteItems;
-      var valueToString = _this.props.valueToString;
 
       if (inputValue === '') {
         // если стерли содержимое токена в режиме редактирования, то удаляем токен
@@ -228,7 +201,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       if (autocompleteItems && autocompleteItems.length === 1) {
         var _item = autocompleteItems[0];
 
-        if (valueToString(_item) === inputValue) {
+        if (_this.getProps().valueToString(_item) === inputValue) {
           _this.isEditingMode ? _this.finishTokenEdit() : _this.selectItem(_item);
           return;
         }
@@ -240,11 +213,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.isBlurToMenu = function (event) {
-      if (_this.menuRef) {
+      if (_this.menuRef && globalObject.document) {
         var _this$tokensInputMenu;
 
         var menu = getRootNode((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
-        var relatedTarget = event.relatedTarget || document.activeElement;
+        var relatedTarget = event.relatedTarget || globalObject.document.activeElement;
 
         if (menu && menu.contains(relatedTarget)) {
           return true;
@@ -284,17 +257,23 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         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.props.delimiters[0]));
+      event.clipboardData.setData('text/plain', tokens.join(delimiters[0]));
     };
 
     _this.handleInputPaste = function (event) {
@@ -303,30 +282,28 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
 
       var paste = event.clipboardData.getData('text');
-      var delimiters = _this.props.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 = _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);
+        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);
-
-        _this.props.onValueChange(newItems);
+        var newItems = selectedItems.concat(_items);
+        onValueChange(newItems);
 
         _this.dispatch({
           type: 'SET_AUTOCOMPLETE_ITEMS',
@@ -339,7 +316,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
     _this.tryGetItems = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
-        var autocompleteItems, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;
+        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) {
@@ -349,7 +327,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
                 }
 
                 if (!(_this.props.getItems && (_this.state.inputValue !== '' || !_this.props.hideMenuIfEmptyInputValue))) {
-                  _context.next = 14;
+                  _context.next = 15;
                   break;
                 }
 
@@ -369,12 +347,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
                   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(_this.props.selectedItems, item);
+                  return _this.hasValueInItems(selectedItems, item);
                 };
 
                 isEditingItem = function isEditingItem(item) {
-                  var editingItem = _this.props.selectedItems[_this.state.editingTokenIndex];
+                  var editingItem = selectedItems[_this.state.editingTokenIndex];
                   return !!editingItem && isEqual(item, editingItem);
                 };
 
@@ -383,9 +363,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
                 });
 
                 if (_this.isEditingMode) {
-                  editingItem = _this.props.selectedItems[_this.state.editingTokenIndex];
+                  editingItem = selectedItems[_this.state.editingTokenIndex];
 
-                  if (isEqual(editingItem, _this.props.valueToItem(_this.state.inputValue)) && !_this.hasValueInItems(autocompleteItemsUnique, editingItem)) {
+                  if (isEqual(editingItem, valueToItem(_this.state.inputValue)) && !_this.hasValueInItems(autocompleteItemsUnique, editingItem)) {
                     autocompleteItemsUnique.unshift(editingItem);
                   }
                 }
@@ -402,14 +382,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
                 }
 
                 selectItemIndex = autocompleteItemsUnique.findIndex(function (item) {
-                  return _this.props.valueToString(item).toLowerCase() === _this.state.inputValue.toLowerCase();
+                  return valueToString(item).toLowerCase() === _this.state.inputValue.toLowerCase();
                 });
 
                 if (_this.menuRef) {
                   _this.menuRef.highlightItem(selectItemIndex < 0 ? 0 : selectItemIndex);
                 }
 
-              case 14:
+              case 15:
               case "end":
                 return _context.stop();
             }
@@ -435,7 +415,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
       e.stopPropagation();
 
-      if (_this.type !== TokenInputType.WithReference && _this.props.delimiters.some(function (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();
@@ -450,6 +430,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         }
       }
 
+      var isRightmostTokenNotDisabled = !_this.isTokenDisabled(_this.getProps().selectedItems.length - 1);
+
       switch (true) {
         case isKeyEnter(e):
           if (_this.menuRef) {
@@ -479,7 +461,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           break;
 
         case isKeyBackspace(e):
-          if (!_this.isEditingMode) {
+          if (!_this.isEditingMode && isRightmostTokenNotDisabled) {
             _this.moveFocusToLastToken();
           }
 
@@ -487,7 +469,16 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
         case isKeyArrowLeft(e):
           if (((_this$input4 = _this.input) == null ? void 0 : _this$input4.selectionStart) === 0) {
-            _this.moveFocusToLastToken();
+            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;
@@ -495,7 +486,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.focusInput = function () {
-      requestAnimationFrame(function () {
+      globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
         var _this$input5;
 
         return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();
@@ -511,16 +502,21 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     _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):
           {
-            if (!_this.isEditingMode) {
-              var itemsNew = _this.props.selectedItems.filter(function (item) {
+            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);
               });
-
-              _this.props.onValueChange(itemsNew);
+              onValueChange(itemsNew);
 
               _this.dispatch({
                 type: 'REMOVE_ALL_ACTIVE_TOKENS'
@@ -558,7 +554,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
           _this.dispatch({
             type: 'SET_ACTIVE_TOKENS',
-            payload: _this.props.selectedItems
+            payload: selectedItems.filter(function (item) {
+              return !_this.isTokenDisabled(selectedItems.indexOf(item));
+            })
           });
 
           break;
@@ -567,13 +565,16 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
     _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);
@@ -594,14 +595,15 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       } 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);
         }));
@@ -614,11 +616,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.handleValueChange = function (items) {
-      _this.props.onValueChange(items);
+      _this.getProps().onValueChange(items);
     };
 
     _this.handleAddItem = function () {
-      var item = _this.props.valueToItem(_this.state.inputValue);
+      var item = _this.getProps().valueToItem(_this.state.inputValue);
 
       if (item) {
         _this.selectItem(item);
@@ -626,12 +628,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.selectItem = function (item) {
-      var selectedItems = _this.props.selectedItems;
+      var _this$getProps5 = _this.getProps(),
+          selectedItems = _this$getProps5.selectedItems,
+          valueToString = _this$getProps5.valueToString;
 
       if (_this.isEditingMode) {
         _this.dispatch({
           type: 'UPDATE_QUERY',
-          payload: _this.props.valueToString(item)
+          payload: valueToString(item)
         }, _this.finishTokenEdit);
       } else if (!_this.hasValueInItems(selectedItems, item)) {
         _this.handleValueChange(selectedItems.concat([item]));
@@ -645,7 +649,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _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);
       }));
 
@@ -688,7 +692,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.handleTokenEdit = function (itemNew) {
-      var editingTokenIndex = _this.props.selectedItems.findIndex(function (item) {
+      var _this$getProps6 = _this.getProps(),
+          selectedItems = _this$getProps6.selectedItems,
+          valueToString = _this$getProps6.valueToString;
+
+      var editingTokenIndex = selectedItems.findIndex(function (item) {
         return item === itemNew;
       });
 
@@ -708,7 +716,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
       _this.dispatch({
         type: 'UPDATE_QUERY',
-        payload: _this.props.valueToString(itemNew)
+        payload: valueToString(itemNew)
       }, _this.selectInputText);
 
       _this.dispatch({
@@ -719,14 +727,15 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _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 _this$props = _this.props,
-          selectedItems = _this$props.selectedItems,
-          valueToItem = _this$props.valueToItem;
-      var editedItem = valueToItem(inputValue);
+
+      var editedItem = _this.getProps().valueToItem(inputValue);
+
       var newItems = selectedItems.concat([]);
 
       if (!_this.hasValueInItems(selectedItems, editedItem)) {
@@ -830,22 +839,27 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
     _this.renderTokensStart = function () {
       var editingTokenIndex = _this.state.editingTokenIndex;
-      var selectedItems = _this.props.selectedItems;
+
+      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.props.selectedItems.slice(_this.state.editingTokenIndex + 1).map(_this.renderToken);
+        return _this.getProps().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 _this$props$selectedI;
+
+      var _this$props = _this.props,
+          _this$props$renderTok = _this$props.renderToken,
+          renderToken = _this$props$renderTok === void 0 ? defaultRenderToken : _this$props$renderTok,
+          disabled = _this$props.disabled,
+          size = _this$props.size;
 
       var isActive = _this.state.activeTokens.includes(item); // TODO useCallback
 
@@ -870,18 +884,23 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       var handleTokenDoubleClick = function handleTokenDoubleClick(event) {
         event.stopPropagation();
 
-        if (!_this.isEditingMode) {
+        if (!_this.isEditingMode && !disabled) {
           _this.handleTokenEdit(item);
         }
       };
 
-      return renderToken(item, {
+      var renderedToken = renderToken(item, {
+        size: size,
         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) {
@@ -907,14 +926,84 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }, 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;
   }
 
   var _proto = TokenInput.prototype;
 
+  _proto.getDelimiters = function getDelimiters() {
+    var _this$props$delimiter;
+
+    var delimiters = (_this$props$delimiter = this.props.delimiters) != null ? _this$props$delimiter : [];
+
+    if (delimiters.every(function (delimiter) {
+      return delimiter !== TEMP_FAKE_FLAG;
+    })) {
+      return delimiters;
+    }
+
+    if (this.featureFlags.tokenInputRemoveWhitespaceFromDefaultDelimiters) {
+      return delimiters.filter(function (delimiter) {
+        return delimiter !== ' ' && delimiter !== TEMP_FAKE_FLAG;
+      });
+    }
+
+    return delimiters.filter(function (delimiter) {
+      return delimiter !== TEMP_FAKE_FLAG;
+    });
+  };
+
+  _proto.getProps = function getProps() {
+    var propsGetter = createPropsGetter(TokenInput.defaultProps);
+    var propsWithOldDelimiters = propsGetter.apply(this);
+    return _extends({}, propsWithOldDelimiters, {
+      delimiters: this.getDelimiters()
+    });
+  };
+
   _proto.componentDidMount = function componentDidMount() {
+    var _globalObject$documen;
+
     this.updateInputTextWidth();
-    document.addEventListener('copy', this.handleCopy);
+    (_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.addEventListener('copy', this.handleCopy);
 
     if (this.props.autoFocus) {
       this.focusInput();
@@ -933,8 +1022,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       });
     }
 
-    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) {
@@ -943,7 +1033,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('copy', this.handleCopy);
+    var _globalObject$documen2;
+
+    (_globalObject$documen2 = globalObject.document) == null ? void 0 : _globalObject$documen2.removeEventListener('copy', this.handleCopy);
   }
   /**
   * @public
@@ -969,12 +1061,43 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.featureFlags = getFullReactUIFlagsContext(flags);
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return _this2.renderMain();
+      });
     });
   };
 
+  _proto.getLabelSizeClassName = function getLabelSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.labelLarge(this.theme);
+
+      case 'medium':
+        return styles.labelMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.labelSmall(this.theme);
+    }
+  };
+
+  _proto.getInputSizeClassName = function getInputSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.inputLarge(this.theme);
+
+      case 'medium':
+        return styles.inputMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.inputSmall(this.theme);
+    }
+  };
+
   _proto.renderMain = function renderMain() {
     var _cx, _cx2, _cx3;
 
@@ -982,48 +1105,75 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       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$props2 = this.props,
+        maxMenuHeight = _this$props2.maxMenuHeight,
+        error = _this$props2.error,
+        warning = _this$props2.warning,
+        disabled = _this$props2.disabled,
+        renderNotFound = _this$props2.renderNotFound,
+        hideMenuIfEmptyInputValue = _this$props2.hideMenuIfEmptyInputValue,
+        inputMode = _this$props2.inputMode,
+        renderTotalCount = _this$props2.renderTotalCount,
+        totalCount = _this$props2.totalCount,
+        ariaDescribedby = _this$props2['aria-describedby'],
+        ariaLabel = _this$props2['aria-label'];
+
+    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,
+        inputValueHeight = _this$state3.inputValueHeight,
         inputValue = _this$state3.inputValue,
         reservedInputValue = _this$state3.reservedInputValue,
         autocompleteItems = _this$state3.autocompleteItems,
-        loading = _this$state3.loading,
-        inputValueHeight = _this$state3.inputValueHeight;
+        loading = _this$state3.loading;
     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,
+      height: inputValueHeight,
       // в 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));
+    var labelClassName = cx(styles.label(theme), this.getLabelSizeClassName(), (_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), this.getInputSizeClassName(), (_cx2 = {}, _cx2[styles.inputDisabled(theme)] = !!disabled, _cx2));
+    var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';
+    var inputNode = /*#__PURE__*/React.createElement(TokenView, {
+      size: this.getProps().size,
+      className: cx((_cx3 = {}, _cx3[styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)),
+      hideCloseButton: Boolean(placeholder)
+    }, /*#__PURE__*/React.createElement("textarea", {
+      id: this.textareaId,
+      ref: this.inputRef,
+      value: inputValue,
+      style: inputInlineStyles,
+      spellCheck: false,
+      disabled: disabled,
+      className: inputClassName,
+      placeholder: placeholder,
+      onFocus: this.handleInputFocus,
+      onBlur: this.handleInputBlur,
+      onChange: this.handleChangeInputValue,
+      onKeyDown: this.handleKeyDown,
+      onPaste: this.handleInputPaste,
+      inputMode: inputMode,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedby
+    }));
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": TokenInputDataTids.root,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
     }, /*#__PURE__*/React.createElement("label", {
@@ -1033,27 +1183,17 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       },
       className: labelClassName,
       onMouseDown: this.handleWrapperMouseDown,
-      onMouseUp: this.handleWrapperMouseUp
+      onMouseUp: this.handleWrapperMouseUp,
+      htmlFor: this.textareaId,
+      "aria-controls": this.rootId,
+      "data-tid": TokenInputDataTids.label
     }, /*#__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, {
+      theme: this.theme,
+      size: this.getProps().size
+    }), this.renderTokensStart(), inputNode, showMenu && /*#__PURE__*/React.createElement(TokenInputMenu, {
+      popupMenuId: this.rootId,
       ref: this.tokensInputMenuRef,
       items: autocompleteItems,
       loading: loading,
@@ -1065,10 +1205,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       onValueChange: this.selectItem,
       renderAddButton: this.renderAddButton,
       menuWidth: menuWidth,
-      menuAlign: menuAlign
-    }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement("span", {
+      menuAlign: menuAlign,
+      renderTotalCount: renderTotalCount,
+      totalCount: totalCount
+    }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement(TokenView, {
+      size: this.props.size
+    }, /*#__PURE__*/React.createElement("span", {
       className: styles.reservedInput(theme)
-    }, reservedInputValue) : null)));
+    }, reservedInputValue)) : null)));
   }
   /**
   * Сбрасывает введенное пользователем значение
@@ -1104,7 +1248,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   };
 
   _proto.moveFocusToLastToken = function moveFocusToLastToken() {
-    var items = this.props.selectedItems;
+    var items = this.getProps().selectedItems;
 
     if (this.state.inputValue === '' && items && items.length > 0) {
       this.dispatch({
@@ -1115,16 +1259,23 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   };
 
   _createClass(TokenInput, [{
+    key: "textareaId",
+    get: function get() {
+      var _this$props$id;
+
+      return (_this$props$id = this.props.id) != null ? _this$props$id : this._textareaId;
+    }
+  }, {
     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;
@@ -1175,9 +1326,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       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;
+
+      var _this$getProps9 = this.getProps(),
+          valueToString = _this$getProps9.valueToString,
+          selectedItems = _this$getProps9.selectedItems;
 
       if (this.isEditingMode) {
         return valueToString(selectedItems[editingTokenIndex]) !== inputValue;
@@ -1188,9 +1340,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   }]);
 
   return TokenInput;
-}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'TokenInput', _class2.defaultProps = {
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'TokenInput', _class2.displayName = 'TokenInput', _class2.defaultProps = {
   selectedItems: [],
-  delimiters: [',', ' '],
+  // TEMP_FAKE_FLAG помогает узнать, остались ли разделители дефолтными или пользователь передал их равными дефолтным.
+  delimiters: [',', ' ', TEMP_FAKE_FLAG],
   renderItem: identity,
   renderValue: identity,
   valueToString: identity,
@@ -1207,5 +1360,6 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   onMouseEnter: emptyHandler,
   onMouseLeave: emptyHandler,
   menuWidth: 'auto',
-  menuAlign: 'cursor'
+  menuAlign: 'cursor',
+  size: 'small'
 }, _temp)) || _class) || _class);