@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-6344a.0

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;AACjE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAY1D,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 { getStyles, globalClasses } from './Token.css.js';\nimport type { TokenSize } from './Token.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

@@ -22,7 +22,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import React from 'react';
 import { getDOMRect } from '../../lib/dom/getDOMRect.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
-import { getStyles } from '../Token/Token.styles.js';
+import { getStyles } from '../Token/Token.css.js';
 import { TokenView } from '../Token/TokenView.js';
 // a thin character to preserve some space
 // for the caret visibillity in the input
@@ -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,uBAAuB,CAAC;AAClD,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.css.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.css.d.ts

@@ -0,0 +1,21 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    label(t: Theme): string;
+    labelSmall(t: Theme): string;
+    labelMedium(t: Theme): string;
+    labelLarge(t: Theme): string;
+    hovering(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
+    labelFocused(t: Theme): string;
+    labelDisabled(t: Theme): string;
+    labelNonInteractive(): string;
+    input(t: Theme): string;
+    inputSmall(t: Theme): string;
+    inputMedium(t: Theme): string;
+    inputLarge(t: Theme): string;
+    inputDisabled(t: Theme): string;
+    inputPlaceholderWrapper(): string;
+    inputPlaceholderScrollWrapper(): string;
+    reservedInput(t: Theme): string;
+}>;

package/components/TokenInput/TokenInput.css.js

@@ -0,0 +1,4 @@
+
+
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getStyles = _b9cd9({label:'react-ui-TokenInput__label',labelSmall:'react-ui-TokenInput__labelSmall',labelMedium:'react-ui-TokenInput__labelMedium',labelLarge:'react-ui-TokenInput__labelLarge',hovering:'react-ui-TokenInput__hovering',labelFocused:'react-ui-TokenInput__labelFocused',labelDisabled:'react-ui-TokenInput__labelDisabled',labelNonInteractive:'react-ui-TokenInput__labelNonInteractive',input:'react-ui-TokenInput__input',inputSmall:'react-ui-TokenInput__inputSmall',inputMedium:'react-ui-TokenInput__inputMedium',inputLarge:'react-ui-TokenInput__inputLarge',inputDisabled:'react-ui-TokenInput__inputDisabled',inputPlaceholderWrapper:'react-ui-TokenInput__inputPlaceholderWrapper',inputPlaceholderScrollWrapper:'react-ui-TokenInput__inputPlaceholderScrollWrapper',reservedInput:'react-ui-TokenInput__reservedInput',error:'react-ui-TokenInput__error',warning:'react-ui-TokenInput__warning'});

package/components/TokenInput/TokenInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenInput.css.js","sourceRoot":"","sources":["TokenInput.css.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { globalClasses } from '../ScrollContainer/ScrollContainer.css.js';\nimport { inputSizeMixin, labelSizeMixin } from './TokenInput.mixins.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  label(t: Theme) {\n    return css`\n      background-color: ${t.tokenInputBg};\n      box-shadow: ${t.tokenInputShadow};\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColor};\n      border-top-color: ${t.tokenInputBorderTopColor};\n      transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction};\n      box-sizing: border-box;\n      cursor: text;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: start;\n      outline: none;\n      position: relative;\n      border-radius: ${t.tokenInputBorderRadius};\n    `;\n  },\n  labelSmall(t: Theme) {\n    return css`\n      ${labelSizeMixin(t.tokenInputPaddingYSmall, t.tokenInputPaddingXSmall)}\n    `;\n  },\n  labelMedium(t: Theme) {\n    return css`\n      ${labelSizeMixin(t.tokenInputPaddingYMedium, t.tokenInputPaddingXMedium)}\n    `;\n  },\n  labelLarge(t: Theme) {\n    return css`\n      ${labelSizeMixin(t.tokenInputPaddingYLarge, t.tokenInputPaddingXLarge)}\n    `;\n  },\n\n  hovering(t: Theme) {\n    return css`\n      &:hover {\n        border-color: ${t.tokenInputBorderColorHover};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColorWarning};\n      box-shadow: 0 0 0 ${t.tokenInputOutlineWidth} ${t.tokenInputBorderColorWarning};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColorError};\n      box-shadow: 0 0 0 ${t.tokenInputOutlineWidth} ${t.tokenInputBorderColorError};\n    `;\n  },\n\n  labelFocused(t: Theme) {\n    return css`\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColorFocus};\n      box-shadow: 0 0 0 ${t.tokenInputOutlineWidth} ${t.tokenInputBorderColorFocus};\n    `;\n  },\n\n  labelDisabled(t: Theme) {\n    return css`\n      background: ${t.tokenInputDisabledBg};\n      background-clip: ${t.inputDisabledBackgroundClip};\n      border-color: ${t.tokenInputDisabledBorderColor};\n      box-shadow: none;\n      cursor: default;\n    `;\n  },\n\n  labelNonInteractive() {\n    return css`\n      pointer-events: none;\n    `;\n  },\n\n  input(t: Theme) {\n    return css`\n      background: transparent;\n      border: none;\n      box-shadow: none;\n      outline: none;\n      font-family: inherit;\n      overflow: hidden;\n      resize: none;\n      -webkit-appearance: none;\n      text-overflow: clip;\n      background-clip: padding-box;\n      transition: background-color 0.15s ease-in;\n      color: ${t.tokenInputTextColor};\n      box-sizing: border-box;\n      word-break: break-all;\n      padding: 0;\n      margin: 0;\n      flex: 1 1 100%;\n\n      &::-ms-clear {\n        display: none;\n      }\n      &::placeholder {\n        color: ${t.tokenInputPlaceholderColor};\n        -webkit-text-fill-color: ${t.tokenInputPlaceholderColor};\n      }\n      &:disabled::placeholder {\n        color: ${t.tokenInputPlaceholderColorDisabled};\n        -webkit-text-fill-color: ${t.tokenInputPlaceholderColorDisabled};\n      }\n      &:focus::placeholder {\n        color: ${t.tokenInputPlaceholderColorLight};\n        -webkit-text-fill-color: ${t.tokenInputPlaceholderColorLight};\n      }\n      /* fix firefox placeholder opacity */\n      &:-moz-placeholder {\n        opacity: 1;\n      }\n      &::-moz-placeholder {\n        opacity: 1;\n      }\n    `;\n  },\n  inputSmall(t: Theme) {\n    return css`\n      ${inputSizeMixin(t.tokenFontSizeSmall, t.tokenInputLineHeightSmall)};\n    `;\n  },\n  inputMedium(t: Theme) {\n    return css`\n      ${inputSizeMixin(t.tokenFontSizeMedium, t.tokenInputLineHeightMedium)};\n    `;\n  },\n  inputLarge(t: Theme) {\n    return css`\n      ${inputSizeMixin(t.tokenFontSizeLarge, t.tokenInputLineHeightLarge)};\n    `;\n  },\n\n  inputDisabled(t: Theme) {\n    return css`\n      pointer-events: none;\n      /* fix text color in safari */\n      -webkit-text-fill-color: currentcolor;\n      color: ${t.tokenInputTextColorDisabled};\n    `;\n  },\n\n  inputPlaceholderWrapper() {\n    return css`\n      flex: 1 1 100%;\n    `;\n  },\n\n  inputPlaceholderScrollWrapper() {\n    return css`\n      display: flex;\n      & .${globalClasses.inner} {\n        display: inherit;\n        flex-wrap: wrap;\n      }\n    `;\n  },\n\n  reservedInput(t: Theme) {\n    return css`\n      min-width: 2px;\n      color: ${t.tokenInputTextColorDisabled};\n      word-break: break-all;\n    `;\n  },\n}));\n\n// порядок вызова в cx(...): модификаторы после базовых\nfinalizeStaticStyles(['error', 'warning']);\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

@@ -99,7 +99,7 @@ import { Token } from '../Token/index.js';
 import { TokenView } from '../Token/TokenView.js';
 import { TokenInputLocaleHelper } from './locale/index.js';
 import { TextWidthHelper } from './TextWidthHelper.js';
-import { getStyles } from './TokenInput.styles.js';
+import { getStyles } from './TokenInput.css.js';
 import { TokenInputMenu } from './TokenInputMenu.js';
 import { TokenInputMobileMenu } from './TokenInputMobileMenu.js';
 import { tokenInputReducer } from './TokenInputReducer.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,