@skbkontur/react-ui 0.0.0-dad43298ae → 0.0.0-db9f11da2a

package/cjs/components/TokenInput/TokenInput.js

@@ -46,6 +46,10 @@ var _createPropsGetter = require("../../lib/createPropsGetter");
 var _uidUtils = require("../../lib/uidUtils");
 var _TokenView = require("../Token/TokenView");
 
+var _featureFlagsContext = require("../../lib/featureFlagsContext");
+var _SizeDecorator = require("../../lib/size/SizeDecorator");
+
+
 
 var _locale = require("./locale");
 var _TokenInput2 = require("./TokenInput.styles");
@@ -240,7 +244,6 @@ var TokenInputDataTids = exports.TokenInputDataTids = {
 
 
 
-
 
 
 var defaultToKey = function defaultToKey(item) {return item.toString();};
@@ -270,8 +273,8 @@ item, _ref) {var
  */var
 
 
-TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_TokenInput = /*#__PURE__*/function (_React$PureComponent) {function TokenInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
 
+TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (0, _SizeDecorator.withSize)(_class = (_TokenInput = /*#__PURE__*/function (_React$PureComponent) {function TokenInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
 
 
 
@@ -318,11 +321,14 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
     rootId = _Popup.PopupIds.root + (0, _utils.getRandomID)();_this.
 
 
+
+
     input = null;_this.
     tokensInputMenu = null;_this.
     textHelper = null;_this.
     wrapper = null;_this.
 
+
     memoizedTokens = new Map();_this.
 
 
@@ -553,6 +559,9 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
 
 
+
+
+
 
 
 
@@ -770,7 +779,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
     };_this.
 
     tryGetItems = /*#__PURE__*/function () {var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {var autocompleteItems, _this$getProps3, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;return _regenerator.default.wrap(function _callee$(_context) {while (1) switch (_context.prev = _context.next) {case 0:if (query === void 0) {query = '';}if (!(
-              _this.props.getItems && (_this.state.inputValue !== '' || !_this.props.hideMenuIfEmptyInputValue))) {_context.next = 15;break;}
+              _this.props.getItems && (_this.isInputValueChanged || !_this.props.hideMenuIfEmptyInputValue))) {_context.next = 15;break;}
               _this.dispatch({ type: 'SET_LOADING', payload: true });_context.next = 5;return (
                 _this.props.getItems(query));case 5:autocompleteItems = _context.sent;
               _this.dispatch({ type: 'SET_LOADING', payload: false });_this$getProps3 =
@@ -794,7 +803,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
                 }
               }
 
-              if (query === '' || _this.state.inputValue !== '') {
+              if (query === '' || _this.isInputValueChanged) {
                 _this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: autocompleteItemsUnique }, function () {
                   LayoutEvents.emit();
                   _this.highlightMenuItem();
@@ -1016,7 +1025,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       var editingTokenIndex = selectedItems.findIndex(function (item) {return item === itemNew;});
       _this.dispatch({ type: 'SET_EDITING_TOKEN_INDEX', payload: editingTokenIndex });
 
-      if (_this.state.inputValue !== '') {
+      if (_this.isInputValueChanged) {
         if (_this.state.reservedInputValue === undefined) {
           _this.dispatch({ type: 'SET_TEMPORARY_QUERY', payload: _this.state.inputValue });
         }
@@ -1034,7 +1043,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       var newItems = selectedItems.concat([]);
 
       if (!_this.hasValueInItems(selectedItems, editedItem)) {
-        newItems.splice.apply(newItems, [editingTokenIndex, 1].concat(inputValue !== '' ? [editedItem] : []));
+        newItems.splice.apply(newItems, [editingTokenIndex, 1].concat(_this.isInputValueChanged ? [editedItem] : []));
         _this.handleValueChange(newItems);
       }
 
@@ -1056,27 +1065,32 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       var inputValue = _this.state.inputValue;
       var onUnexpectedInput = _this.props.onUnexpectedInput;
 
-      if (onUnexpectedInput) {
-        // чекаем не возвращает ли что-нибудь обработчик
-        var returnedValue = onUnexpectedInput(inputValue);
+      // чекаем не возвращает ли что-нибудь обработчик
+      var returnedValue = onUnexpectedInput == null ? void 0 : onUnexpectedInput(inputValue);
 
-        if (returnedValue === undefined) {
-          return;
+      if (returnedValue === undefined) {
+        if (
+        _this.featureFlags.tokenInputCreateTokenOnBlurInWithoutReferenceMode &&
+        _this.type === TokenInputType.WithoutReference)
+        {
+          _this.handleAddItem();
         }
 
-        if (returnedValue === null) {
-          _this.dispatch({ type: 'CLEAR_INPUT' }, function () {
-            if (_this.isEditingMode) {
-              _this.finishTokenEdit();
-            }
-          });
+        return;
+      }
 
-          return;
-        }
+      if (returnedValue === null) {
+        _this.dispatch({ type: 'CLEAR_INPUT' }, function () {
+          if (_this.isEditingMode) {
+            _this.finishTokenEdit();
+          }
+        });
 
-        if (returnedValue) {
-          _this.selectItem(returnedValue);
-        }
+        return;
+      }
+
+      if (returnedValue) {
+        _this.selectItem(returnedValue);
       }
     };_this.
 
@@ -1087,7 +1101,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       if (query.endsWith(' ')) {
         query = query.trimRight() + ' ';
       }
-      if (_this.state.inputValue !== '' && query === '') {
+      if (_this.isInputValueChanged && query === '') {
         _this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });
       }
       _this.dispatch({ type: 'UPDATE_QUERY', payload: query }, function () {
@@ -1125,7 +1139,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
     };_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,disabled = _this$props.disabled,size = _this$props.size;
+      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;
 
       var isActive = _this.state.activeTokens.includes(item);
 
@@ -1153,7 +1167,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       };
 
       var renderedToken = renderToken(item, {
-        size: size,
+        size: _this.size,
         isActive: isActive,
         onClick: handleTokenClick,
         onDoubleClick: handleTokenDoubleClick,
@@ -1216,12 +1230,12 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
    * @public
    */;_proto.focus = function focus() {var _this$input8;(_this$input8 = this.input) == null || _this$input8.focus();} /**
    * @public
-   */;_proto.blur = function blur() {var _this$input9;(_this$input9 = this.input) == null || _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.getLabelSizeClassName = function getLabelSizeClassName() {switch (this.getProps().size) {case 'large':return _TokenInput2.styles.labelLarge(this.theme);case 'medium':return _TokenInput2.styles.labelMedium(this.theme);case 'small':default:return _TokenInput2.styles.labelSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {switch (this.getProps().size) {case 'large':return _TokenInput2.styles.inputLarge(this.theme);case 'medium':return _TokenInput2.styles.inputMedium(this.theme);case 'small':default:return _TokenInput2.styles.inputSmall(this.theme);}};_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,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 автоматически перенёсся на следующую строку при необходимости
+   */;_proto.blur = function blur() {var _this$input9;(_this$input9 = this.input) == null || _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.size) {case 'large':return _TokenInput2.styles.labelLarge(this.theme);case 'medium':return _TokenInput2.styles.labelMedium(this.theme);case 'small':default:return _TokenInput2.styles.labelSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {switch (this.size) {case 'large':return _TokenInput2.styles.inputLarge(this.theme);case 'medium':return _TokenInput2.styles.inputMedium(this.theme);case 'small':default:return _TokenInput2.styles.inputSmall(this.theme);}};_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,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 && (this.isInputValueChanged || !hideMenuIfEmptyInputValue);var theme = this.theme;var inputInlineStyles = { // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
       width: inputValueWidth, height: inputValueHeight, // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
-      caretColor: this.isCursorVisible ? undefined : 'transparent' };var labelClassName = (0, _Emotion.cx)(_TokenInput2.styles.label(theme), this.getLabelSizeClassName(), (_cx = {}, _cx[_TokenInput2.styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _cx[_TokenInput2.styles.labelDisabled(theme)] = !!disabled, _cx[_TokenInput2.styles.labelFocused(theme)] = !!inFocus, _cx[_TokenInput2.styles.error(theme)] = !!error, _cx[_TokenInput2.styles.warning(theme)] = !!warning, _cx));var inputClassName = (0, _Emotion.cx)(_TokenInput2.styles.input(theme), this.getInputSizeClassName(), (_cx2 = {}, _cx2[_TokenInput2.styles.inputDisabled(theme)] = !!disabled, _cx2));var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';var inputNode = /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.getProps().size, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_TokenInput2.styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)), hideCloseButton: Boolean(placeholder) }, /*#__PURE__*/_react.default.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.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(), inputNode, 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, size: this.getProps().size }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.props.size }, /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput2.styles.reservedInput(theme) }, reservedInputValue)) : null)));} /**
+      caretColor: this.isCursorVisible ? undefined : 'transparent' };var labelClassName = (0, _Emotion.cx)(_TokenInput2.styles.label(theme), this.getLabelSizeClassName(), (_cx = {}, _cx[_TokenInput2.styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _cx[_TokenInput2.styles.labelDisabled(theme)] = !!disabled, _cx[_TokenInput2.styles.labelFocused(theme)] = !!inFocus, _cx[_TokenInput2.styles.error(theme)] = !!error, _cx[_TokenInput2.styles.warning(theme)] = !!warning, _cx));var inputClassName = (0, _Emotion.cx)(_TokenInput2.styles.input(theme), this.getInputSizeClassName(), (_cx2 = {}, _cx2[_TokenInput2.styles.inputDisabled(theme)] = !!disabled, _cx2));var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';var inputNode = /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.size, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_TokenInput2.styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)), hideCloseButton: Boolean(placeholder) }, /*#__PURE__*/_react.default.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.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.size }), this.renderTokensStart(), inputNode, showMenu && /*#__PURE__*/_react.default.createElement(_TokenInputMenu.TokenInputMenu, { popupMenuId: this.rootId, ref: this.tokensInputMenuRef, items: autocompleteItems, loading: loading, opened: showMenu, maxMenuHeight: maxMenuHeight, anchorElementForCursor: this.input, anchorElementRoot: this.wrapper, renderNotFound: renderNotFound, renderItem: renderItem, onValueChange: this.selectItem, renderAddButton: this.renderAddButton, menuWidth: menuWidth, menuAlign: menuAlign, renderTotalCount: renderTotalCount, totalCount: totalCount, size: this.size }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.size }, /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput2.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
+   */;_proto.reset = function reset() {this.dispatch({ type: 'RESET' });};_proto.isCursorVisibleForState = function isCursorVisibleForState(state) {return state.inFocus && (this.isInputValueChanged || 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) });}};return (0, _createClass2.default)(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.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;} }]);}(_react.default.PureComponent), _TokenInput.__KONTUR_REACT_UI__ = 'TokenInput', _TokenInput.displayName = 'TokenInput', _TokenInput.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' }, _TokenInput)) || _class) || _class);
+      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) });}};return (0, _createClass2.default)(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.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.isInputValueChanged) {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;} }]);}(_react.default.PureComponent), _TokenInput.__KONTUR_REACT_UI__ = 'TokenInput', _TokenInput.displayName = 'TokenInput', _TokenInput.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' }, _TokenInput)) || _class) || _class) || _class);