@skbkontur/react-ui 0.0.0-8ea1692541 → 0.0.0-9216939ede

package/cjs/components/TokenInput/TokenInput.js

@@ -1,6 +1,16 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TokenInputType = exports.TokenInputDataTids = exports.TokenInput = exports.DefaultState = void 0;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+
+
+
+
+
+
+
 var _lodash = _interopRequireDefault(require("lodash.isequal"));
+var _globalObject = require("@skbkontur/global-object");
 
+var _Popup = require("../../internal/Popup");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 
 
@@ -27,12 +37,21 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
+var _uidUtils = require("../../lib/uidUtils");
+var _TokenView = require("../Token/TokenView");
+var _featureFlagsContext = require("../../lib/featureFlagsContext");
+
+
+
+
 
 var _locale = require("./locale");
 var _TokenInput = require("./TokenInput.styles");
 var _TokenInputReducer = require("./TokenInputReducer");
 var _TokenInputMenu = require("./TokenInputMenu");
-var _TextWidthHelper = require("./TextWidthHelper");var _dec, _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}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;}var
+var _TextWidthHelper = require("./TextWidthHelper");var _dec, _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+var TEMP_FAKE_FLAG = 'TEMP_FAKE_FLAG';var
 
 TokenInputType;exports.TokenInputType = TokenInputType;(function (TokenInputType) {TokenInputType[TokenInputType["WithReference"] = 0] = "WithReference";TokenInputType[TokenInputType["WithoutReference"] = 1] = "WithoutReference";TokenInputType[TokenInputType["Combined"] = 2] = "Combined";})(TokenInputType || (exports.TokenInputType = TokenInputType = {}));
 
@@ -128,6 +147,50 @@ TokenInputType;exports.TokenInputType = TokenInputType;(function (TokenInputType
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -164,7 +227,9 @@ var DefaultState = {
 
 var TokenInputDataTids = {
   root: 'TokenInput__root',
-  tokenInputMenu: 'TokenInputMenu__root' };exports.TokenInputDataTids = TokenInputDataTids;
+  tokenInputMenu: 'TokenInputMenu__root',
+  label: 'TokenInput__label' };exports.TokenInputDataTids = TokenInputDataTids;
+
 
 
 
@@ -192,7 +257,7 @@ 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__*/(
+  isActive = _ref.isActive,onClick = _ref.onClick,onDoubleClick = _ref.onDoubleClick,onRemove = _ref.onRemove,disabled = _ref.disabled,size = _ref.size;return /*#__PURE__*/(
 
     _react.default.createElement(_Token.Token, {
       key: item.toString(),
@@ -200,7 +265,8 @@ item, _ref) {var
       onClick: onClick,
       onDoubleClick: onDoubleClick,
       onRemove: onRemove,
-      disabled: disabled },
+      disabled: disabled,
+      size: size },
 
     item));};var
 
@@ -229,10 +295,30 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
 
 
-    getProps = (0, _createPropsGetter.createPropsGetter)(TokenInput.defaultProps);_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
     state = DefaultState;_this.
 
+    textareaId = (0, _uidUtils.getUid)();_this.
+    rootId = _Popup.PopupIds.root + (0, _utils.getRandomID)();_this.
+
 
 
     input = null;_this.
@@ -240,6 +326,55 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
     textHelper = null;_this.
     wrapper = null;_this.
 
+    memoizedTokens = new Map();_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -510,7 +645,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
         // первый 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();});
+        _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.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' });
@@ -577,9 +712,9 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
 
     isBlurToMenu = function (event) {
-      if (_this.menuRef) {var _this$tokensInputMenu;
+      if (_this.menuRef && _globalObject.globalObject.document) {var _this$tokensInputMenu;
         var menu = (0, _rootNode.getRootNode)((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
-        var relatedTarget = event.relatedTarget || document.activeElement;
+        var relatedTarget = event.relatedTarget || _globalObject.globalObject.document.activeElement;
 
         if (menu && menu.contains(relatedTarget)) {
           return true;
@@ -625,13 +760,11 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       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 tokens = paste.trim().split(new RegExp("[" + delimiters.join('') + "]+"));
         var _items = tokens.
+        filter(Boolean).
         map(function (token) {return valueToItem(token);}).
-        filter(function (item) {return !_this.hasValueInItems(selectedItems, item);});
+        filter(function (item) {return item && !_this.hasValueInItems(selectedItems, item);});
         var newItems = selectedItems.concat(_items);
         onValueChange(newItems);
 
@@ -706,7 +839,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
           }
         }
       }
-
+      var isRightmostTokenNotDisabled = !_this.isTokenDisabled(_this.getProps().selectedItems.length - 1);
       switch (true) {
         case (0, _identifiers.isKeyEnter)(e):
           if (_this.menuRef) {
@@ -730,13 +863,17 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
           (_this$input3 = _this.input) == null ? void 0 : _this$input3.blur();
           break;
         case (0, _identifiers.isKeyBackspace)(e):
-          if (!_this.isEditingMode) {
+          if (!_this.isEditingMode && isRightmostTokenNotDisabled) {
             _this.moveFocusToLastToken();
           }
           break;
         case (0, _identifiers.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;}
 
@@ -750,7 +887,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
 
     focusInput = function () {
-      requestAnimationFrame(function () {var _this$input5;return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();});
+      _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {var _this$input5;return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();});
     };_this.
 
     selectInputText = function () {
@@ -764,7 +901,10 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       switch (true) {
         case (0, _identifiers.isKeyBackspace)(e):
         case (0, _identifiers.isKeyDelete)(e):{
-            if (!_this.isEditingMode) {
+            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;
@@ -790,7 +930,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
           e.preventDefault();
           _this.dispatch({
             type: 'SET_ACTIVE_TOKENS',
-            payload: selectedItems });
+            payload: selectedItems.filter(function (item) {return !_this.isTokenDisabled(selectedItems.indexOf(item));}) });
 
           break;}
 
@@ -801,9 +941,9 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       var selectedItems = _this.getProps().selectedItems;
       var activeTokens = _this.state.activeTokens;
       var activeItemIndex = selectedItems.indexOf(activeTokens[0]);
-      var newItemIndex = activeItemIndex + ((0, _identifiers.isKeyArrowLeft)(e) ? -1 : +1);
+      var newItemIndex = _this.getAvailableTokenIndex(activeItemIndex, (0, _identifiers.isKeyArrowLeft)(e));
       var isLeftEdge = activeItemIndex === 0 && (0, _identifiers.isKeyArrowLeft)(e);
-      var isRightEdge = activeItemIndex === selectedItems.length - 1 && (0, _identifiers.isKeyArrowRight)(e);
+      var isRightEdge = newItemIndex === selectedItems.length && (0, _identifiers.isKeyArrowRight)(e);
       if (!e.shiftKey && activeTokens.length === 1) {
         _this.handleWrapperArrowsWithoutShift(isLeftEdge, isRightEdge, newItemIndex);
       } else {
@@ -990,8 +1130,8 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       }
     };_this.
 
-    renderToken = function (item) {
-      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;
+    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,disabled = _this$props.disabled,size = _this$props.size;
 
       var isActive = _this.state.activeTokens.includes(item);
 
@@ -1013,18 +1153,22 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
       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) {if (value === void 0) {value = _this.state.inputValue;}
@@ -1043,16 +1187,48 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
         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.getProps().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);} /**
+    };_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 = (0, _createPropsGetter.createPropsGetter)(TokenInput.defaultProps);var propsWithOldDelimiters = propsGetter.apply(this);return (0, _extends2.default)({}, propsWithOldDelimiters, { delimiters: this.getDelimiters() });};_proto.componentDidMount = function componentDidMount() {var _globalObject$documen;this.updateInputTextWidth();(_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.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.getProps().selectedItems.length) {LayoutEvents.emit();this.memoizedTokens.clear();}if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {this.tryGetItems(this.isEditingMode ? '' : this.state.inputValue);}};_proto.componentWillUnmount = function componentWillUnmount() {var _globalObject$documen2;(_globalObject$documen2 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen2.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.default.createElement(_ThemeContext.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$props2 = this.props,maxMenuHeight = _this$props2.maxMenuHeight,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,placeholder = _this$props2.placeholder,renderNotFound = _this$props2.renderNotFound,hideMenuIfEmptyInputValue = _this$props2.hideMenuIfEmptyInputValue,inputMode = _this$props2.inputMode,renderTotalCount = _this$props2.renderTotalCount,totalCount = _this$props2.totalCount;var _this$getProps7 = this.getProps(),selectedItems = _this$getProps7.selectedItems,width = _this$getProps7.width,onMouseEnter = _this$getProps7.onMouseEnter,onMouseLeave = _this$getProps7.onMouseLeave,menuWidth = _this$getProps7.menuWidth,menuAlign = _this$getProps7.menuAlign,renderItem = _this$getProps7.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: 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 = (0, _Emotion.cx)(_TokenInput.styles.label(theme), (_cx = {}, _cx[_TokenInput.styles.labelDisabled(theme)] = !!disabled, _cx[_TokenInput.styles.labelFocused(theme)] = !!inFocus, _cx[_TokenInput.styles.error(theme)] = !!error, _cx[_TokenInput.styles.warning(theme)] = !!warning, _cx));var inputClassName = (0, _Emotion.cx)(_TokenInput.styles.input(theme), (_cx2 = {}, _cx2[_TokenInput.styles.inputDisabled(theme)] = !!disabled, _cx2[_TokenInput.styles.inputEditing(theme)] = this.isEditingMode, _cx2));return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TokenInputDataTids.root, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, /*#__PURE__*/_react.default.createElement("label", { ref: this.wrapperRef, style: { width: width }, className: labelClassName, onMouseDown: this.handleWrapperMouseDown, onMouseUp: this.handleWrapperMouseUp }, /*#__PURE__*/_react.default.createElement(_TextWidthHelper.TextWidthHelper, { ref: this.textHelperRef, classHelp: (0, _Emotion.cx)(_TokenInput.styles.helperText(theme), (_cx3 = {}, _cx3[_TokenInput.styles.helperTextEditing(theme)] = this.isEditingMode, _cx3)), text: inputValue, theme: this.theme }), this.renderTokensStart(), /*#__PURE__*/_react.default.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.default.createElement(_TokenInputMenu.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, renderTotalCount: renderTotalCount, totalCount: totalCount }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput.styles.reservedInput(theme) }, reservedInputValue) : null)));} /**
+   */;_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.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.getLabelSizeClassName = function getLabelSizeClassName() {switch (this.getProps().size) {case 'large':return _TokenInput.styles.labelLarge(this.theme);case 'medium':return _TokenInput.styles.labelMedium(this.theme);case 'small':default:return _TokenInput.styles.labelSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {switch (this.getProps().size) {case 'large':return _TokenInput.styles.inputLarge(this.theme);case 'medium':return _TokenInput.styles.inputMedium(this.theme);case 'small':default:return _TokenInput.styles.inputSmall(this.theme);}};_proto.renderMain = function renderMain() {var _cx, _cx2;if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {throw Error('Missed getItems for type ' + this.type);}var _this$props2 = this.props,maxMenuHeight = _this$props2.maxMenuHeight,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,placeholder = _this$props2.placeholder,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;var showMenu = this.type !== TokenInputType.WithoutReference && this.isCursorVisible && activeTokens.length === 0 && (inputValue !== '' || !hideMenuIfEmptyInputValue);var theme = this.theme;var inputInlineStyles = { // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
+      width: inputValueWidth, height: inputValueHeight, // input растягивается на всю ширину чтобы placeholder не обрезался
+      flex: 1, // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
+      caretColor: this.isCursorVisible ? undefined : 'transparent' };var labelClassName = (0, _Emotion.cx)(_TokenInput.styles.label(theme), this.getLabelSizeClassName(), (_cx = {}, _cx[_TokenInput.styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _cx[_TokenInput.styles.labelDisabled(theme)] = !!disabled, _cx[_TokenInput.styles.labelFocused(theme)] = !!inFocus, _cx[_TokenInput.styles.error(theme)] = !!error, _cx[_TokenInput.styles.warning(theme)] = !!warning, _cx));var inputClassName = (0, _Emotion.cx)(_TokenInput.styles.input(theme), this.getInputSizeClassName(), (_cx2 = {}, _cx2[_TokenInput.styles.inputDisabled(theme)] = !!disabled, _cx2));var textHolder = /*#__PURE__*/_react.default.createElement("textarea", { id: this.textareaId, 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, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby });return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TokenInputDataTids.root, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, /*#__PURE__*/_react.default.createElement("label", { ref: this.wrapperRef, style: { width: width }, className: labelClassName, onMouseDown: this.handleWrapperMouseDown, onMouseUp: this.handleWrapperMouseUp, htmlFor: this.textareaId, "aria-controls": this.rootId, "data-tid": TokenInputDataTids.label }, /*#__PURE__*/_react.default.createElement(_TextWidthHelper.TextWidthHelper, { ref: this.textHelperRef, text: inputValue, theme: this.theme, size: this.getProps().size }), this.renderTokensStart(), /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.getProps().size, style: { flexGrow: selectedItems.length > 0 ? undefined : 1 } }, textHolder), showMenu && /*#__PURE__*/_react.default.createElement(_TokenInputMenu.TokenInputMenu, { popupMenuId: this.rootId, 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, renderTotalCount: renderTotalCount, totalCount: totalCount }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.props.size }, /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput.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.getProps().selectedItems;if (this.state.inputValue === '' && items && items.length > 0) {this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: items.slice(-1) });}};(0, _createClass2.default)(TokenInput, [{ key: "showAddItemHint", get: function get() {var items = this.state.autocompleteItems;var value = this.getProps().valueToItem(this.state.inputValue);if (items && this.hasValueInItems(items, value)) {return false;}var selectedItems = this.getProps().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$getProps8 = this.getProps(),valueToString = _this$getProps8.valueToString,selectedItems = _this$getProps8.selectedItems;if (this.isEditingMode) {return valueToString(selectedItems[editingTokenIndex]) !== inputValue;}return false;} }]);return TokenInput;}(_react.default.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: _utils.emptyHandler, onFocus: _utils.emptyHandler, onMouseEnter: _utils.emptyHandler, onMouseLeave: _utils.emptyHandler, menuWidth: 'auto', menuAlign: 'cursor' }, _temp)) || _class) || _class);exports.TokenInput = TokenInput;
+      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.getProps().selectedItems;if (this.state.inputValue === '' && items && items.length > 0) {this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: items.slice(-1) });}};(0, _createClass2.default)(TokenInput, [{ key: "showAddItemHint", get: function get() {var items = this.state.autocompleteItems;var value = this.getProps().valueToItem(this.state.inputValue);if (items && this.hasValueInItems(items, value)) {return false;}var selectedItems = this.getProps().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$getProps9 = this.getProps(),valueToString = _this$getProps9.valueToString,selectedItems = _this$getProps9.selectedItems;if (this.isEditingMode) {return valueToString(selectedItems[editingTokenIndex]) !== inputValue;}return false;} }]);return TokenInput;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'TokenInput', _class2.defaultProps = { selectedItems: [], // TEMP_FAKE_FLAG помогает узнать, остались ли разделители дефолтными или пользователь передал их равными дефолтным.
+  delimiters: [',', ' ', TEMP_FAKE_FLAG], renderItem: identity, renderValue: identity, valueToString: identity, valueToItem: function valueToItem(item) {return item;}, toKey: defaultToKey, onValueChange: function onValueChange() {return void 0;}, width: 250, onBlur: _utils.emptyHandler, onFocus: _utils.emptyHandler, onMouseEnter: _utils.emptyHandler, onMouseLeave: _utils.emptyHandler, menuWidth: 'auto', menuAlign: 'cursor', size: 'small' }, _temp)) || _class) || _class);exports.TokenInput = TokenInput;