@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-5e1c3.0

package/components/Token/TokenView.js

@@ -20,30 +20,32 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { getStyles, globalClasses } from './Token.styles.js';
 export var TokenView = forwardRef(function (props, ref) {
     var _a;
     var _b = props.size, size = _b === void 0 ? 'small' : _b, children = props.children, closeButton = props.closeButton, hideCloseButton = props.hideCloseButton, className = props.className, rest = __rest(props, ["size", "children", "closeButton", "hideCloseButton", "className"]);
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
+    var theme = useContext(ThemeContext);
     var getSizeClassName = function (size) {
         switch (size) {
             case 'large':
-                return styles.tokenLarge();
+                return styles.tokenLarge(theme);
             case 'medium':
-                return styles.tokenMedium();
+                return styles.tokenMedium(theme);
             case 'small':
             default:
-                return styles.tokenSmall();
+                return styles.tokenSmall(theme);
         }
     };
-    var closeButtonNode = hideCloseButton ? null : (React.createElement("span", { className: cx(styles.removeIcon(), globalClasses.removeIcon) }, closeButton));
+    var closeButtonNode = hideCloseButton ? null : (React.createElement("span", { className: cx(styles.removeIcon(theme), globalClasses.removeIcon) }, closeButton));
     return (React.createElement(CommonWrapper, __assign({}, props, { ref: ref }),
         React.createElement("div", __assign({}, rest, { className: cx(getSizeClassName(size), (_a = {},
-                _a[styles.token()] = true,
+                _a[styles.token(theme)] = true,
                 _a)) }),
             children,
             closeButtonNode)));

package/components/Token/TokenView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenView.js","sourceRoot":"","sources":["TokenView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAoB,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,gBAAgB,IAAI,EAAE,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAW7D,MAAM,CAAC,IAAM,SAAS,GAAG,UAAU,CAAC,UAAC,KAAqB,EAAE,GAA0C;;IAC5F,IAAA,KAA+E,KAAK,KAAtE,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,QAAQ,GAAuD,KAAK,SAA5D,EAAE,WAAW,GAA0C,KAAK,YAA/C,EAAE,eAAe,GAAyB,KAAK,gBAA9B,EAAE,SAAS,GAAc,KAAK,UAAnB,EAAK,IAAI,UAAK,KAAK,EAAtF,mEAA8E,CAAF,CAAW;IAC7F,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,gBAAgB,GAAG,UAAC,IAAe;QACvC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,UAAU,EAAE,CAAC;YAC7B,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC,WAAW,EAAE,CAAC;YAC9B,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,MAAM,CAAC,UAAU,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC,CAAC;IACF,IAAM,eAAe,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/C,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,aAAa,CAAC,UAAU,CAAC,IAAG,WAAW,CAAQ,CACzF,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QAChC,wCACM,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBAClC,GAAC,MAAM,CAAC,KAAK,EAAE,IAAG,IAAI;oBACtB;YAED,QAAQ;YACR,eAAe,CACZ,CACQ,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { type CommonProps, CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport type { TokenSize } from './Token.js';\nimport { getStyles, globalClasses } from './Token.styles.js';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Задает размер контрола. */\n  size?: TokenSize;\n  /** Задает компонент крестика для удаления токена. */\n  closeButton?: ReactNode;\n  /** Определяет, скрывать ли крестик для удаления токена. */\n  hideCloseButton?: boolean;\n}\n\nexport const TokenView = forwardRef((props: TokenViewProps, ref: React.Ref<CommonWrapper<CommonProps>>) => {\n  const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props;\n  const styles = useStyles(getStyles);\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.tokenLarge();\n      case 'medium':\n        return styles.tokenMedium();\n      case 'small':\n      default:\n        return styles.tokenSmall();\n    }\n  };\n  const closeButtonNode = hideCloseButton ? null : (\n    <span className={cx(styles.removeIcon(), globalClasses.removeIcon)}>{closeButton}</span>\n  );\n\n  return (\n    <CommonWrapper {...props} ref={ref}>\n      <div\n        {...rest}\n        className={cx(getSizeClassName(size), {\n          [styles.token()]: true,\n        })}\n      >\n        {children}\n        {closeButtonNode}\n      </div>\n    </CommonWrapper>\n  );\n});\n"]}
+{"version":3,"file":"TokenView.js","sourceRoot":"","sources":["TokenView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAoB,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAW7D,MAAM,CAAC,IAAM,SAAS,GAAG,UAAU,CAAC,UAAC,KAAqB,EAAE,GAA0C;;IAC5F,IAAA,KAA+E,KAAK,KAAtE,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,QAAQ,GAAuD,KAAK,SAA5D,EAAE,WAAW,GAA0C,KAAK,YAA/C,EAAE,eAAe,GAAyB,KAAK,gBAA9B,EAAE,SAAS,GAAc,KAAK,UAAnB,EAAK,IAAI,UAAK,KAAK,EAAtF,mEAA8E,CAAF,CAAW;IACrF,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,IAAM,gBAAgB,GAAG,UAAC,IAAe;QACvC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAClC,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACnC,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IACF,IAAM,eAAe,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/C,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,IAAG,WAAW,CAAQ,CAC9F,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QAChC,wCACM,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBAClC,GAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAG,IAAI;oBAC3B;YAED,QAAQ;YACR,eAAe,CACZ,CACQ,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { type CommonProps, CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { TokenSize } from './Token.js';\nimport { getStyles, globalClasses } from './Token.styles.js';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Задает размер контрола. */\n  size?: TokenSize;\n  /** Задает компонент крестика для удаления токена. */\n  closeButton?: ReactNode;\n  /** Определяет, скрывать ли крестик для удаления токена. */\n  hideCloseButton?: boolean;\n}\n\nexport const TokenView = forwardRef((props: TokenViewProps, ref: React.Ref<CommonWrapper<CommonProps>>) => {\n  const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props;\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const theme = useContext(ThemeContext);\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={cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n  );\n\n  return (\n    <CommonWrapper {...props} ref={ref}>\n      <div\n        {...rest}\n        className={cx(getSizeClassName(size), {\n          [styles.token(theme)]: true,\n        })}\n      >\n        {children}\n        {closeButtonNode}\n      </div>\n    </CommonWrapper>\n  );\n});\n"]}

package/components/TokenInput/TextWidthHelper.d.ts

@@ -15,6 +15,7 @@ export interface TextWidthHelperProps {
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
     private element;
+    private emotion;
     private cx;
     private styles;
     private getSizeClassName;

package/components/TokenInput/TextWidthHelper.js

@@ -44,16 +44,16 @@ var TextWidthHelper = /** @class */ (function (_super) {
     TextWidthHelper.prototype.getSizeClassName = function (size) {
         switch (size) {
             case 'large':
-                return this.styles.helperContainerLarge();
+                return this.styles.helperContainerLarge(this.props.theme);
             case 'medium':
-                return this.styles.helperContainerMedium();
+                return this.styles.helperContainerMedium(this.props.theme);
             case 'small':
             default:
-                return this.styles.helperContainerSmall();
+                return this.styles.helperContainerSmall(this.props.theme);
         }
     };
     TextWidthHelper.prototype.render = function () {
-        this.styles = getStyles();
+        this.styles = getStyles(this.emotion);
         return (React.createElement(TokenView, { size: this.props.size, className: this.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size)) },
             React.createElement("div", { className: this.styles.helperText(), ref: this.elementRef }, this.props.text || THIN_SPACE)));
     };

package/components/TokenInput/TextWidthHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextWidthHelper.js","sourceRoot":"","sources":["TextWidthHelper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAI7E,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,0CAA0C;AAC1C,yCAAyC;AACzC,IAAM,UAAU,GAAG,QAAQ,CAAC;AAY5B;;;GAGG;AAEH;IAAqC,mCAAqC;IAA1E;;QACU,aAAO,GAA0B,IAAI,CAAC;QAuCtC,gBAAU,GAAG,UAAC,IAAoB;YACxC,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;;IACJ,CAAC;IAtCS,0CAAgB,GAAxB,UAAyB,IAAe;QACtC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,MAAM,CAAC,oBAAoB,EAAE,CAAC;YAC5C,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;YAC7C,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,oBAAoB,EAAE,CAAC;QAC9C,CAAC;IACH,CAAC;IAEM,gCAAM,GAAb;QACE,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC;QAE1B,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAEzF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,IAC3D,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAC1B,CACI,CACb,CAAC;IACJ,CAAC;IAEM,sCAAY,GAAnB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;IACxC,CAAC;IAEM,uCAAa,GAApB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IACzC,CAAC;IAtCU,eAAe;QAD3B,qBAAqB;OACT,eAAe,CA2C3B;IAAD,sBAAC;CAAA,AA3CD,CAAqC,KAAK,CAAC,SAAS,GA2CnD;SA3CY,eAAe","sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { ClassNames } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { TokenSize } from '../Token/index.js';\nimport { getStyles } from '../Token/Token.styles.js';\nimport { TokenView } from '../Token/TokenView.js';\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  /** Задает текст в поле ввода, еще не ставший токеном. */\n  text?: string;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme: Theme;\n\n  /** Задает размер контрола. */\n  size: TokenSize;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\n@withRenderEnvironment\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n  private cx!: ClassNames;\n  private styles!: ReturnType<typeof getStyles>;\n\n  private getSizeClassName(size: TokenSize) {\n    switch (size) {\n      case 'large':\n        return this.styles.helperContainerLarge();\n      case 'medium':\n        return this.styles.helperContainerMedium();\n      case 'small':\n      default:\n        return this.styles.helperContainerSmall();\n    }\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles();\n\n    return (\n      <TokenView\n        size={this.props.size}\n        className={this.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size))}\n      >\n        <div className={this.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) => {\n    this.element = node;\n  };\n}\n"]}
+{"version":3,"file":"TextWidthHelper.js","sourceRoot":"","sources":["TextWidthHelper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAG7E,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,0CAA0C;AAC1C,yCAAyC;AACzC,IAAM,UAAU,GAAG,QAAQ,CAAC;AAY5B;;;GAGG;AAEH;IAAqC,mCAAqC;IAA1E;;QACU,aAAO,GAA0B,IAAI,CAAC;QAwCtC,gBAAU,GAAG,UAAC,IAAoB;YACxC,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;;IACJ,CAAC;IAtCS,0CAAgB,GAAxB,UAAyB,IAAe;QACtC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC5D,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC7D,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAEM,gCAAM,GAAb;QACE,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAEzF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,IAC3D,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAC1B,CACI,CACb,CAAC;IACJ,CAAC;IAEM,sCAAY,GAAnB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;IACxC,CAAC;IAEM,uCAAa,GAApB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IACzC,CAAC;IAvCU,eAAe;QAD3B,qBAAqB;OACT,eAAe,CA4C3B;IAAD,sBAAC;CAAA,AA5CD,CAAqC,KAAK,CAAC,SAAS,GA4CnD;SA5CY,eAAe","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { TokenSize } from '../Token/index.js';\nimport { getStyles } from '../Token/Token.styles.js';\nimport { TokenView } from '../Token/TokenView.js';\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  /** Задает текст в поле ввода, еще не ставший токеном. */\n  text?: string;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme: Theme;\n\n  /** Задает размер контрола. */\n  size: TokenSize;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\n@withRenderEnvironment\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n\n  private getSizeClassName(size: TokenSize) {\n    switch (size) {\n      case 'large':\n        return this.styles.helperContainerLarge(this.props.theme);\n      case 'medium':\n        return this.styles.helperContainerMedium(this.props.theme);\n      case 'small':\n      default:\n        return this.styles.helperContainerSmall(this.props.theme);\n    }\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <TokenView\n        size={this.props.size}\n        className={this.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size))}\n      >\n        <div className={this.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) => {\n    this.element = node;\n  };\n}\n"]}

package/components/TokenInput/TokenInput.d.ts

@@ -129,7 +129,7 @@ export declare const TokenInputDataTids: {
     readonly tokenInputMenu: "TokenInputMenu__root";
     readonly label: "TokenInput__label";
 };
-type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'itemToId' | 'onValueChange' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
+type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'itemToId' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
 /** Поле с токенами — это поле ввода со списком подсказок. Значения в поле отображаются в виде отдельных токенов.
  */
 export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputInternalState<T>> {
@@ -144,6 +144,7 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private rootId;
     private readonly locale;
     private globalObject;
+    private emotion;
     private cx;
     private styles;
     private theme;

package/components/TokenInput/TokenInput.js

@@ -155,7 +155,7 @@ var TokenInput = /** @class */ (function (_super) {
             return _this.renderTokenInputField({
                 variant: 'inline',
                 interactive: _this.isInlineInteractive(),
-                fieldWidth: _this.props.width,
+                fieldWidth: _this.getProps().width,
                 showMenu: Boolean(!_this.isMobileLayout &&
                     _this.type !== TokenInputType.WithoutReference &&
                     _this.isCursorVisible &&
@@ -178,6 +178,7 @@ var TokenInput = /** @class */ (function (_super) {
             var _f = _this.getProps(), selectedItems = _f.selectedItems, menuWidth = _f.menuWidth, menuAlign = _f.menuAlign, renderItem = _f.renderItem;
             var isMobileFooter = variant === 'mobileFooter';
             var _g = _this.state, inFocus = _g.inFocus, inputValueWidth = _g.inputValueWidth, inputValueHeight = _g.inputValueHeight, inputValue = _g.inputValue, reservedInputValue = _g.reservedInputValue, loading = _g.loading;
+            var theme = _this.theme;
             var inputInlineStyles = {
                 // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
                 width: inputValueWidth,
@@ -185,17 +186,16 @@ var TokenInput = /** @class */ (function (_super) {
                 // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
                 caretColor: _this.isCursorVisible && interactive ? undefined : 'transparent',
             };
-            var labelClassName = _this.cx(_this.styles.label(), _this.getLabelSizeClassName(), (_b = {},
-                _b[_this.styles.defaultWidth()] = fieldWidth === undefined,
+            var labelClassName = _this.cx(_this.styles.label(theme), _this.getLabelSizeClassName(), (_b = {},
                 _b[_this.styles.labelNonInteractive()] = !interactive,
-                _b[_this.styles.hovering()] = interactive && !inFocus && !disabled && !warning && !error,
-                _b[_this.styles.labelDisabled()] = !!disabled,
-                _b[_this.styles.labelFocused()] = interactive && !!inFocus,
-                _b[_this.styles.error()] = !!error,
-                _b[_this.styles.warning()] = !!warning,
+                _b[_this.styles.hovering(_this.theme)] = interactive && !inFocus && !disabled && !warning && !error,
+                _b[_this.styles.labelDisabled(theme)] = !!disabled,
+                _b[_this.styles.labelFocused(theme)] = interactive && !!inFocus,
+                _b[_this.styles.error(theme)] = !!error,
+                _b[_this.styles.warning(theme)] = !!warning,
                 _b));
-            var inputClassName = _this.cx(_this.styles.input(), _this.getInputSizeClassName(), (_c = {},
-                _c[_this.styles.inputDisabled()] = !!disabled,
+            var inputClassName = _this.cx(_this.styles.input(theme), _this.getInputSizeClassName(), (_c = {},
+                _c[_this.styles.inputDisabled(theme)] = !!disabled,
                 _c));
             var placeholder = selectedItems.length === 0 && !inputValue ? _this.props.placeholder : '';
             var inputNode = (React.createElement(TokenView, { size: _this.size, className: _this.cx((_d = {},
@@ -210,10 +210,11 @@ var TokenInput = /** @class */ (function (_super) {
                 showMenu && (React.createElement(TokenInputMenu, { popupMenuId: _this.rootId, ref: _this.tokensInputMenuRef, items: _this.getMenuItems(), 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, requestStatus: _this.state.requestStatus, repeatRequest: _this.repeatRequest })),
                 _this.renderTokensEnd(interactive),
                 _this.isEditingMode ? (React.createElement(TokenView, { size: _this.size },
-                    React.createElement("span", { className: _this.styles.reservedInput() }, reservedInputValue))) : null));
+                    React.createElement("span", { className: _this.styles.reservedInput(theme) }, reservedInputValue))) : null));
             var container = maxHeight && !isMobileFooter ? (React.createElement(ScrollContainer, { className: _this.styles.inputPlaceholderScrollWrapper(), scrollRef: _this.scrollContainerRef, maxHeight: maxHeight, showScrollBar: "always", style: { width: '100%' } }, inner)) : (inner);
-            // Инлайн остаётся только за пропом: ширину по умолчанию задаёт класс.
-            var labelStyle = fieldWidth === undefined ? undefined : { width: fieldWidth };
+            var labelStyle = {
+                width: fieldWidth,
+            };
             return (React.createElement("label", { ref: isMobileFooter ? _this.mobileWrapperRef : _this.inlineWrapperRef, style: labelStyle, className: labelClassName, onMouseDown: interactive ? _this.handleWrapperMouseDown : undefined, onMouseUp: interactive ? _this.handleWrapperMouseUp : undefined, 
                 // Для корректной работы скролла приходится ломать связь label с полем ввода
                 // Иначе любой клик внутри label вызывает фокус и автоскроллинг к полю ввода
@@ -1005,7 +1006,7 @@ var TokenInput = /** @class */ (function (_super) {
     };
     TokenInput.prototype.render = function () {
         var _this = this;
-        this.styles = getStyles();
+        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = theme;
             return _this.renderMain();
@@ -1014,23 +1015,23 @@ var TokenInput = /** @class */ (function (_super) {
     TokenInput.prototype.getLabelSizeClassName = function () {
         switch (this.size) {
             case 'large':
-                return this.styles.labelLarge();
+                return this.styles.labelLarge(this.theme);
             case 'medium':
-                return this.styles.labelMedium();
+                return this.styles.labelMedium(this.theme);
             case 'small':
             default:
-                return this.styles.labelSmall();
+                return this.styles.labelSmall(this.theme);
         }
     };
     TokenInput.prototype.getInputSizeClassName = function () {
         switch (this.size) {
             case 'large':
-                return this.styles.inputLarge();
+                return this.styles.inputLarge(this.theme);
             case 'medium':
-                return this.styles.inputMedium();
+                return this.styles.inputMedium(this.theme);
             case 'small':
             default:
-                return this.styles.inputSmall();
+                return this.styles.inputSmall(this.theme);
         }
     };
     TokenInput.prototype.renderMain = function () {
@@ -1276,6 +1277,7 @@ var TokenInput = /** @class */ (function (_super) {
         valueToItem: function (item) { return item; },
         itemToId: identity,
         onValueChange: function () { return void 0; },
+        width: 250,
         onBlur: emptyHandler,
         onFocus: emptyHandler,
         onMouseEnter: emptyHandler,