@skbkontur/react-ui 0.0.0-4c5579465d → 0.0.0-4da47ece08

package/components/Token/locale/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../cjs/components/Token/locale/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/Token/locale/index.d.ts

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import { TokenLocale } from './types';
+export * from './types';
+export declare const TokenLocaleHelper: LocaleHelper<TokenLocale>;

package/components/Token/locale/locales/en/en.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  removeButtonAriaLabel: 'Remove token'
+};

package/components/Token/locale/locales/en/en.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","removeButtonAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,qBAAqB,EAAE,cADqB,EAAvC","sourcesContent":["import { TokenLocale } from '../types';\n\nexport const componentsLocales: TokenLocale = {\n  removeButtonAriaLabel: 'Remove token',\n};\n"]}

package/components/Token/locale/locales/en/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/Token/locale/locales/en.js",
+  "module": "en",
+  "types": "../en.d.ts",
+  "sideEffects": false
+}

package/components/Token/locale/locales/en.d.ts

@@ -0,0 +1,2 @@
+import { TokenLocale } from '../types';
+export declare const componentsLocales: TokenLocale;

package/components/Token/locale/locales/ru/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/Token/locale/locales/ru.js",
+  "module": "ru",
+  "types": "../ru.d.ts",
+  "sideEffects": false
+}

package/components/Token/locale/locales/ru/ru.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  removeButtonAriaLabel: 'Удалить токен'
+};

package/components/Token/locale/locales/ru/ru.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","removeButtonAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,qBAAqB,EAAE,eADqB,EAAvC","sourcesContent":["import { TokenLocale } from '../types';\n\nexport const componentsLocales: TokenLocale = {\n  removeButtonAriaLabel: 'Удалить токен',\n};\n"]}

package/components/Token/locale/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { TokenLocale } from '../types';
+export declare const componentsLocales: TokenLocale;

package/components/Token/locale/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Token/locale/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/Token/locale/types/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../cjs/components/Token/locale/types.js",
+  "module": "types",
+  "types": "../types.d.ts",
+  "sideEffects": false
+}

package/components/Token/locale/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/Token/locale/types/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/components/Token/locale/types.d.ts

@@ -0,0 +1,3 @@
+export interface TokenLocale {
+    removeButtonAriaLabel: string;
+}

package/components/TokenInput/TextWidthHelper/TextWidthHelper.js

@@ -1,7 +1,9 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
+import { cx } from "../../../lib/theming/Emotion";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
-import { styles } from "../TokenInput.styles"; // a thin character to preserve some space
+import { TokenView } from "../../Token/TokenView";
+import { styles } from "../../Token/Token.styles"; // a thin character to preserve some space
 // for the caret visibillity in the input
 
 var THIN_SPACE = "\u2009";
@@ -32,11 +34,26 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
 
   var _proto = TextWidthHelper.prototype;
 
+  _proto.getSizeClassName = function getSizeClassName(size) {
+    switch (size) {
+      case 'large':
+        return styles.helperContainerLarge(this.props.theme);
+
+      case 'medium':
+        return styles.helperContainerMedium(this.props.theme);
+
+      case 'small':
+      default:
+        return styles.helperContainerSmall(this.props.theme);
+    }
+  };
+
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.helperContainer(this.props.theme)
+    return /*#__PURE__*/React.createElement(TokenView, {
+      size: this.props.size,
+      className: cx(styles.helperContainer(), this.getSizeClassName(this.props.size))
     }, /*#__PURE__*/React.createElement("div", {
-      className: this.props.classHelp,
+      className: styles.helperText(),
       ref: this.elementRef
     }, this.props.text || THIN_SPACE));
   };

package/components/TokenInput/TextWidthHelper/TextWidthHelper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.tsx"],"names":["React","getDOMRect","styles","THIN_SPACE","TextWidthHelper","element","elementRef","node","render","helperContainer","props","theme","classHelp","text","getTextWidth","width","getTextHeight","height","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,UAAT,QAA2B,0BAA3B;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;AAEA;AACA;AACA,IAAMC,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA;AACA,WAAaC,eAAb;AACUC,IAAAA,OADV,GAC2C,IAD3C;;;;;;;;;;;;;;;;;;;;AAqBUC,IAAAA,UArBV,GAqBuB,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,EArBvB,6DAGSC,MAHT,GAGE,kBAAgB,CACd,oBACE,6BAAK,SAAS,EAAEN,MAAM,CAACO,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,6BAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKN,UAAhD,IACG,KAAKI,KAAL,CAAWG,IAAX,IAAmBV,UADtB,CADF,CADF,CAOD,CAXH,QAaSW,YAbT,GAaE,wBAA8B,CAC5B,OAAOb,UAAU,CAAC,KAAKI,OAAN,CAAV,CAAyBU,KAAhC,CACD,CAfH,QAiBSC,aAjBT,GAiBE,yBAA+B,CAC7B,OAAOf,UAAU,CAAC,KAAKI,OAAN,CAAV,CAAyBY,MAAhC,CACD,CAnBH,0BAAqCjB,KAAK,CAACkB,SAA3C","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './TokenInput.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n  text?: string;\n  classHelp: string;\n  theme: Theme;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={styles.helperContainer(this.props.theme)}>\n        <div className={this.props.classHelp} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}
+{"version":3,"sources":["TextWidthHelper.tsx"],"names":["React","cx","getDOMRect","TokenView","styles","THIN_SPACE","TextWidthHelper","element","elementRef","node","getSizeClassName","size","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","helperContainer","helperText","text","getTextWidth","width","getTextHeight","height","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,UAAT,QAA2B,0BAA3B;AACA,SAASC,SAAT,QAA0B,oBAA1B;;AAEA,SAASC,MAAT,QAAuB,uBAAvB;;AAEA;AACA;AACA,IAAMC,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA;AACA,WAAaC,eAAb;AACUC,IAAAA,OADV,GAC2C,IAD3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCUC,IAAAA,UApCV,GAoCuB,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,EApCvB,6DAGUC,gBAHV,GAGE,0BAAyBC,IAAzB,EAA0C,CACxC,QAAQA,IAAR,GACE,KAAK,OAAL,CACE,OAAOP,MAAM,CAACQ,oBAAP,CAA4B,KAAKC,KAAL,CAAWC,KAAvC,CAAP,CACF,KAAK,QAAL,CACE,OAAOV,MAAM,CAACW,qBAAP,CAA6B,KAAKF,KAAL,CAAWC,KAAxC,CAAP,CACF,KAAK,OAAL,CACA,QACE,OAAOV,MAAM,CAACY,oBAAP,CAA4B,KAAKH,KAAL,CAAWC,KAAvC,CAAP,CAPJ,CASD,CAbH,QAeSG,MAfT,GAeE,kBAAgB,CACd,oBACE,oBAAC,SAAD,IACE,IAAI,EAAE,KAAKJ,KAAL,CAAWF,IADnB,EAEE,SAAS,EAAEV,EAAE,CAACG,MAAM,CAACc,eAAP,EAAD,EAA2B,KAAKR,gBAAL,CAAsB,KAAKG,KAAL,CAAWF,IAAjC,CAA3B,CAFf,iBAIE,6BAAK,SAAS,EAAEP,MAAM,CAACe,UAAP,EAAhB,EAAqC,GAAG,EAAE,KAAKX,UAA/C,IACG,KAAKK,KAAL,CAAWO,IAAX,IAAmBf,UADtB,CAJF,CADF,CAUD,CA1BH,QA4BSgB,YA5BT,GA4BE,wBAA8B,CAC5B,OAAOnB,UAAU,CAAC,KAAKK,OAAN,CAAV,CAAyBe,KAAhC,CACD,CA9BH,QAgCSC,aAhCT,GAgCE,yBAA+B,CAC7B,OAAOrB,UAAU,CAAC,KAAKK,OAAN,CAAV,CAAyBiB,MAAhC,CACD,CAlCH,0BAAqCxB,KAAK,CAACyB,SAA3C","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport { TokenSize } from '../Token';\nimport { styles } from '../Token/Token.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n  text?: string;\n  theme: Theme;\n  size: TokenSize;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  private getSizeClassName(size: TokenSize) {\n    switch (size) {\n      case 'large':\n        return styles.helperContainerLarge(this.props.theme);\n      case 'medium':\n        return styles.helperContainerMedium(this.props.theme);\n      case 'small':\n      default:\n        return styles.helperContainerSmall(this.props.theme);\n    }\n  }\n\n  public render() {\n    return (\n      <TokenView\n        size={this.props.size}\n        className={cx(styles.helperContainer(), this.getSizeClassName(this.props.size))}\n      >\n        <div className={styles.helperText()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </TokenView>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}

package/components/TokenInput/TextWidthHelper.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Theme } from '../../lib/theming/Theme';
+import { TokenSize } from '../Token';
 export interface TextWidthHelperProps {
     text?: string;
-    classHelp: string;
     theme: Theme;
+    size: TokenSize;
 }
 /**
  * Херпер позволяет вычислить размеры блока с текстом
@@ -11,6 +12,7 @@ export interface TextWidthHelperProps {
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
     private element;
+    private getSizeClassName;
     render(): JSX.Element;
     getTextWidth(): number;
     getTextHeight(): number;

package/components/TokenInput/TokenInput/TokenInput.js

@@ -8,6 +8,7 @@ var _dec, _class, _class2, _temp;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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";
@@ -21,12 +22,14 @@ import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { getUid } from "../../../lib/uidUtils";
-import { globalThat, renderTarget } from "../../../lib/SSRSafe";
+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) {
@@ -66,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);
 };
 
@@ -88,7 +93,6 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }
 
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
-    _this.getProps = createPropsGetter(TokenInput.defaultProps);
     _this.state = DefaultState;
     _this.textareaId = getUid();
     _this.rootId = PopupIds.root + getRandomID();
@@ -153,7 +157,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
         (_this$input = _this.input) == null ? void 0 : _this$input.focus(); // в firefox не работает без второго focus
 
-        globalThat.requestAnimationFrame(function () {
+        globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
           var _this$input2;
 
           return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus();
@@ -209,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 || renderTarget.activeElement;
+        var relatedTarget = event.relatedTarget || globalObject.document.activeElement;
 
         if (menu && menu.contains(relatedTarget)) {
           return true;
@@ -482,7 +486,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.focusInput = function () {
-      globalThat.requestAnimationFrame(function () {
+      globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
         var _this$input5;
 
         return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();
@@ -854,7 +858,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       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;
+          disabled = _this$props.disabled,
+          size = _this$props.size;
 
       var isActive = _this.state.activeTokens.includes(item); // TODO useCallback
 
@@ -885,6 +890,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       };
 
       var renderedToken = renderToken(item, {
+        size: size,
         isActive: isActive,
         onClick: handleTokenClick,
         onDoubleClick: handleTokenDoubleClick,
@@ -963,9 +969,41 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
   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();
-    renderTarget.addEventListener('copy', this.handleCopy);
+    (_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.addEventListener('copy', this.handleCopy);
 
     if (this.props.autoFocus) {
       this.focusInput();
@@ -995,7 +1033,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
-    renderTarget.removeEventListener('copy', this.handleCopy);
+    var _globalObject$documen2;
+
+    (_globalObject$documen2 = globalObject.document) == null ? void 0 : _globalObject$documen2.removeEventListener('copy', this.handleCopy);
   }
   /**
   * @public
@@ -1021,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;
 
@@ -1039,13 +1110,13 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         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'];
+        ariaDescribedby = _this$props2['aria-describedby'],
+        ariaLabel = _this$props2['aria-label'];
 
     var _this$getProps8 = this.getProps(),
         selectedItems = _this$getProps8.selectedItems,
@@ -1060,25 +1131,45 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         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.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _cx[styles.labelDisabled(theme)] = !!disabled, _cx[styles.labelFocused(theme)] = !!inFocus, _cx[styles.error(theme)] = !!error, _cx[styles.warning(theme)] = !!warning, _cx));
-    var inputClassName = cx(styles.input(theme), (_cx2 = {}, _cx2[styles.inputDisabled(theme)] = !!disabled, _cx2[styles.inputEditing(theme)] = this.isEditingMode, _cx2));
+    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", {
@@ -1098,26 +1189,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       "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", {
-      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-describedby": ariaDescribedby
-    }), 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,
@@ -1133,9 +1208,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       menuAlign: menuAlign,
       renderTotalCount: renderTotalCount,
       totalCount: totalCount
-    }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement("span", {
+    }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement(TokenView, {
+      size: this.props.size
+    }, /*#__PURE__*/React.createElement("span", {
       className: styles.reservedInput(theme)
-    }, reservedInputValue) : null)));
+    }, reservedInputValue)) : null)));
   }
   /**
   * Сбрасывает введенное пользователем значение
@@ -1256,9 +1333,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,
@@ -1275,5 +1353,6 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   onMouseEnter: emptyHandler,
   onMouseLeave: emptyHandler,
   menuWidth: 'auto',
-  menuAlign: 'cursor'
+  menuAlign: 'cursor',
+  size: 'small'
 }, _temp)) || _class) || _class);