@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/components/Token/TokenView/TokenView.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["size", "children", "closeButton", "hideCloseButton", "className"];
+import React from 'react';
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { useEmotion } from "../../../lib/theming/Emotion";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { getStyles, globalClasses } from "../Token.styles";
+export function TokenView(props) {
+  var _emotion$cx;
+
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      children = props.children,
+      closeButton = props.closeButton,
+      hideCloseButton = props.hideCloseButton,
+      className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
+
+  var getSizeClassName = function getSizeClassName(size) {
+    switch (size) {
+      case 'large':
+        return styles.tokenLarge(theme);
+
+      case 'medium':
+        return styles.tokenMedium(theme);
+
+      case 'small':
+      default:
+        return styles.tokenSmall(theme);
+    }
+  };
+
+  var closeButtonNode = hideCloseButton ? null : /*#__PURE__*/React.createElement("span", {
+    className: emotion.cx(styles.removeIcon(theme), globalClasses.removeIcon)
+  }, closeButton);
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: emotion.cx(getSizeClassName(size), (_emotion$cx = {}, _emotion$cx[styles.token(theme)] = true, _emotion$cx[styles.token2022(theme)] = isTheme2022(theme), _emotion$cx))
+  }), children, closeButtonNode));
+}

package/components/Token/TokenView/TokenView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TokenView.tsx"],"names":["React","CommonWrapper","useEmotion","isTheme2022","useTheme","getStyles","globalClasses","TokenView","props","size","children","closeButton","hideCloseButton","className","rest","theme","emotion","styles","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","cx","removeIcon","token","token2022"],"mappings":"kPAAA,OAAOA,KAAP,MAAiC,OAAjC;;AAEA,SAASC,aAAT,QAA8B,8BAA9B;AACA,SAASC,UAAT,QAA2B,2BAA3B;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,QAAT,QAAyB,4BAAzB;;;AAGA,SAASC,SAAT,EAAoBC,aAApB,QAAyC,gBAAzC;;;;;;;;AAQA,OAAO,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AAC/C,oBAAuFA,KAAvF,CAAQC,IAAR,CAAQA,IAAR,4BAAe,OAAf,eAAwBC,QAAxB,GAAuFF,KAAvF,CAAwBE,QAAxB,CAAkCC,WAAlC,GAAuFH,KAAvF,CAAkCG,WAAlC,CAA+CC,eAA/C,GAAuFJ,KAAvF,CAA+CI,eAA/C,CAAgEC,SAAhE,GAAuFL,KAAvF,CAAgEK,SAAhE,CAA8EC,IAA9E,iCAAuFN,KAAvF;AACA,MAAMO,KAAK,GAAGX,QAAQ,EAAtB;AACA,MAAMY,OAAO,GAAGd,UAAU,EAA1B;AACA,MAAMe,MAAM,GAAGZ,SAAS,CAACW,OAAD,CAAxB;;AAEA,MAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACT,IAAD,EAAqB;AAC5C,YAAQA,IAAR;AACE,WAAK,OAAL;AACE,eAAOQ,MAAM,CAACE,UAAP,CAAkBJ,KAAlB,CAAP;AACF,WAAK,QAAL;AACE,eAAOE,MAAM,CAACG,WAAP,CAAmBL,KAAnB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOE,MAAM,CAACI,UAAP,CAAkBN,KAAlB,CAAP,CAPJ;;AASD,GAVD;AAWA,MAAMO,eAAe,GAAGV,eAAe,GAAG,IAAH;AACrC,gCAAM,SAAS,EAAEI,OAAO,CAACO,EAAR,CAAWN,MAAM,CAACO,UAAP,CAAkBT,KAAlB,CAAX,EAAqCT,aAAa,CAACkB,UAAnD,CAAjB,IAAkFb,WAAlF,CADF;;;AAIA;AACE,wBAAC,aAAD,EAAmBH,KAAnB;AACE;AACMM,IAAAA,IADN;AAEE,MAAA,SAAS,EAAEE,OAAO,CAACO,EAAR,CAAWL,gBAAgB,CAACT,IAAD,CAA3B;AACRQ,MAAAA,MAAM,CAACQ,KAAP,CAAaV,KAAb,CADQ,IACc,IADd;AAERE,MAAAA,MAAM,CAACS,SAAP,CAAiBX,KAAjB,CAFQ,IAEkBZ,WAAW,CAACY,KAAD,CAF7B,eAFb;;;AAOGL,IAAAA,QAPH;AAQGY,IAAAA,eARH,CADF,CADF;;;;AAcD","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { TokenSize } from './Token';\nimport { getStyles, globalClasses } from './Token.styles';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: TokenSize;\n  closeButton?: ReactNode;\n  hideCloseButton?: boolean;\n}\n\nexport function TokenView(props: TokenViewProps) {\n  const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props;\n  const theme = useTheme();\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.tokenLarge(theme);\n      case 'medium':\n        return styles.tokenMedium(theme);\n      case 'small':\n      default:\n        return styles.tokenSmall(theme);\n    }\n  };\n  const closeButtonNode = hideCloseButton ? null : (\n    <span className={emotion.cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n  );\n\n  return (\n    <CommonWrapper {...props}>\n      <div\n        {...rest}\n        className={emotion.cx(getSizeClassName(size), {\n          [styles.token(theme)]: true,\n          [styles.token2022(theme)]: isTheme2022(theme),\n        })}\n      >\n        {children}\n        {closeButtonNode}\n      </div>\n    </CommonWrapper>\n  );\n}\n"]}

package/components/Token/TokenView/package.json

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

package/components/Token/TokenView.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { TokenSize } from './Token';
+export interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: TokenSize;
+    closeButton?: ReactNode;
+    hideCloseButton?: boolean;
+}
+export declare function TokenView(props: TokenViewProps): JSX.Element;

package/components/TokenInput/TextWidthHelper/TextWidthHelper.js

@@ -1,7 +1,9 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
+import { EmotionConsumer } 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 { getStyles } 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,38 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
 
   var _proto = TextWidthHelper.prototype;
 
+  _proto.getSizeClassName = function getSizeClassName(size) {
+    var styles = getStyles(this.emotion);
+
+    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)
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement(TokenView, {
+      size: this.props.size,
+      className: this.emotion.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","EmotionConsumer","getDOMRect","TokenView","getStyles","THIN_SPACE","TextWidthHelper","element","elementRef","node","getSizeClassName","size","styles","emotion","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","renderMain","cx","helperContainer","helperText","text","getTextWidth","width","getTextHeight","height","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,eAAT,QAAgC,2BAAhC;;AAEA,SAASC,UAAT,QAA2B,0BAA3B;AACA,SAASC,SAAT,QAA0B,oBAA1B;;AAEA,SAASC,SAAT,QAA0B,uBAA1B;;AAEA;AACA;AACA,IAAMC,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA;AACA,WAAaC,eAAb;;AAEUC,IAAAA,OAFV,GAE2C,IAF3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDUC,IAAAA,UAlDV,GAkDuB,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,EAlDvB,6DAIUC,gBAJV,GAIE,0BAAyBC,IAAzB,EAA0C,CACxC,IAAMC,MAAM,GAAGR,SAAS,CAAC,KAAKS,OAAN,CAAxB,CACA,QAAQF,IAAR,GACE,KAAK,OAAL,CACE,OAAOC,MAAM,CAACE,oBAAP,CAA4B,KAAKC,KAAL,CAAWC,KAAvC,CAAP,CACF,KAAK,QAAL,CACE,OAAOJ,MAAM,CAACK,qBAAP,CAA6B,KAAKF,KAAL,CAAWC,KAAxC,CAAP,CACF,KAAK,OAAL,CACA,QACE,OAAOJ,MAAM,CAACM,oBAAP,CAA4B,KAAKH,KAAL,CAAWC,KAAvC,CAAP,CAPJ,CASD,CAfH,QAiBSG,MAjBT,GAiBE,kBAAgB,mBACd,oBACE,oBAAC,eAAD,QACG,UAACN,OAAD,EAAa,CACZ,MAAI,CAACA,OAAL,GAAeA,OAAf,CACA,OAAO,MAAI,CAACO,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CA1BH,QA4BSA,UA5BT,GA4BE,sBAAoB,CAClB,IAAMR,MAAM,GAAGR,SAAS,CAAC,KAAKS,OAAN,CAAxB,CACA,oBACE,oBAAC,SAAD,IACE,IAAI,EAAE,KAAKE,KAAL,CAAWJ,IADnB,EAEE,SAAS,EAAE,KAAKE,OAAL,CAAaQ,EAAb,CAAgBT,MAAM,CAACU,eAAP,EAAhB,EAA0C,KAAKZ,gBAAL,CAAsB,KAAKK,KAAL,CAAWJ,IAAjC,CAA1C,CAFb,iBAIE,6BAAK,SAAS,EAAEC,MAAM,CAACW,UAAP,EAAhB,EAAqC,GAAG,EAAE,KAAKf,UAA/C,IACG,KAAKO,KAAL,CAAWS,IAAX,IAAmBnB,UADtB,CAJF,CADF,CAUD,CAxCH,QA0CSoB,YA1CT,GA0CE,wBAA8B,CAC5B,OAAOvB,UAAU,CAAC,KAAKK,OAAN,CAAV,CAAyBmB,KAAhC,CACD,CA5CH,QA8CSC,aA9CT,GA8CE,yBAA+B,CAC7B,OAAOzB,UAAU,CAAC,KAAKK,OAAN,CAAV,CAAyBqB,MAAhC,CACD,CAhDH,0BAAqC5B,KAAK,CAAC6B,SAA3C","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { EmotionConsumer } 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 { getStyles } 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 emotion!: Emotion;\n  private element: HTMLDivElement | null = null;\n\n  private getSizeClassName(size: TokenSize) {\n    const styles = getStyles(this.emotion);\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return this.renderMain();\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public renderMain() {\n    const styles = getStyles(this.emotion);\n    return (\n      <TokenView\n        size={this.props.size}\n        className={this.emotion.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,17 +1,21 @@
 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;
 }
 /**
  * Херпер позволяет вычислить размеры блока с текстом
  * для последующего выставления размеров input
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
+    private emotion;
     private element;
+    private getSizeClassName;
     render(): JSX.Element;
+    renderMain(): JSX.Element;
     getTextWidth(): number;
     getTextHeight(): number;
     private elementRef;

package/components/TokenInput/TokenInput/TokenInput.js

@@ -14,17 +14,18 @@ import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, is
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { Token } from "../../Token";
 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 { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { getUid } from "../../../lib/uidUtils";
-import { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from "../../../lib/featureFlagsContext";
+import { TokenView } from "../../Token/TokenView";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { TokenInputLocaleHelper } from "../locale";
-import { styles } from "../TokenInput.styles";
+import { getStyles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
 import { TokenInputMenu } from "../TokenInputMenu";
 import { TextWidthHelper } from "../TextWidthHelper";
@@ -68,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);
 };
 
@@ -855,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
 
@@ -886,6 +890,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       };
 
       var renderedToken = renderToken(item, {
+        size: size,
         isActive: isActive,
         onClick: handleTokenClick,
         onDoubleClick: handleTokenDoubleClick,
@@ -1058,15 +1063,50 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
     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();
+      return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+        _this2.emotion = emotion;
+        return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+          _this2.theme = theme;
+          return _this2.renderMain();
+        });
       });
     });
   };
 
+  _proto.getLabelSizeClassName = function getLabelSizeClassName() {
+    var styles = getStyles(this.emotion);
+
+    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() {
+    var styles = getStyles(this.emotion);
+
+    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;
+    var _this$emotion$cx, _this$emotion$cx2, _this$emotion$cx3;
 
     if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
       throw Error('Missed getItems for type ' + this.type);
@@ -1077,7 +1117,6 @@ 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,
@@ -1099,25 +1138,46 @@ 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 styles = getStyles(this.emotion);
+    var labelClassName = this.emotion.cx(styles.label(theme), this.getLabelSizeClassName(), (_this$emotion$cx = {}, _this$emotion$cx[styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _this$emotion$cx[styles.labelDisabled(theme)] = !!disabled, _this$emotion$cx[styles.labelFocused(theme)] = !!inFocus, _this$emotion$cx[styles.error(theme)] = !!error, _this$emotion$cx[styles.warning(theme)] = !!warning, _this$emotion$cx));
+    var inputClassName = this.emotion.cx(styles.input(theme), this.getInputSizeClassName(), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.inputDisabled(theme)] = !!disabled, _this$emotion$cx2));
+    var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';
+    var inputNode = /*#__PURE__*/React.createElement(TokenView, {
+      size: this.getProps().size,
+      className: this.emotion.cx((_this$emotion$cx3 = {}, _this$emotion$cx3[styles.inputPlaceholderWrapper()] = Boolean(placeholder), _this$emotion$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", {
@@ -1137,27 +1197,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-label": ariaLabel,
-      "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,
@@ -1173,9 +1216,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)));
   }
   /**
   * Сбрасывает введенное пользователем значение
@@ -1296,7 +1341,7 @@ 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: [],
   // TEMP_FAKE_FLAG помогает узнать, остались ли разделители дефолтными или пользователь передал их равными дефолтным.
   delimiters: [',', ' ', TEMP_FAKE_FLAG],
@@ -1316,5 +1361,6 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   onMouseEnter: emptyHandler,
   onMouseLeave: emptyHandler,
   menuWidth: 'auto',
-  menuAlign: 'cursor'
+  menuAlign: 'cursor',
+  size: 'small'
 }, _temp)) || _class) || _class);