@skbkontur/react-ui 0.0.0-c2bf15a894 → 0.0.0-c5bd33d001

package/components/Token/TokenView/TokenView.js

@@ -3,11 +3,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["size", "children", "closeButton", "hideCloseButton", "className"];
 import React, { useContext } from 'react';
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { EmotionContext } from "../../../lib/theming/Emotion";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { getStyles, globalClasses } from "../Token.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { globalClasses, styles } from "../Token.styles";
 export function TokenView(props) {
-  var _emotion$cx;
+  var _cx;
   var _props$size = props.size,
     size = _props$size === void 0 ? 'small' : _props$size,
     children = props.children,
@@ -16,8 +16,6 @@ export function TokenView(props) {
     className = props.className,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   var theme = useContext(ThemeContext);
-  var emotion = useContext(EmotionContext);
-  var styles = getStyles(emotion);
   var getSizeClassName = function getSizeClassName(size) {
     switch (size) {
       case 'large':
@@ -31,12 +29,12 @@ export function TokenView(props) {
   };
   var closeButtonNode = hideCloseButton ? null : /*#__PURE__*/
   React.createElement("span", {
-    className: emotion.cx(styles.removeIcon(theme), globalClasses.removeIcon)
+    className: 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))
+      className: cx(getSizeClassName(size), (_cx = {}, _cx[styles.token(theme)] = true, _cx))
     }), children, closeButtonNode))
   );
 }

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

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","CommonWrapper","EmotionContext","ThemeContext","getStyles","globalClasses","TokenView","props","_emotion$cx","_props$size","size","children","closeButton","hideCloseButton","className","rest","_objectWithoutPropertiesLoose","_excluded","theme","emotion","styles","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","createElement","cx","removeIcon","_extends","token"],"sources":["TokenView.tsx"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionContext } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\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 = useContext(ThemeContext);\n  const emotion = useContext(EmotionContext);\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        })}\n      >\n        {children}\n        {closeButtonNode}\n      </div>\n    </CommonWrapper>\n  );\n}\n"],"mappings":"kPAAA,OAAOA,KAAK,IAAeC,UAAU,QAAQ,OAAO;;AAEpD,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAASC,YAAY,QAAQ,gCAAgC;;;AAG7D,SAASC,SAAS,EAAEC,aAAa,QAAQ,gBAAgB;;;;;;;;AAQzD,OAAO,SAASC,SAASA,CAACC,KAAqB,EAAE,KAAAC,WAAA;EAC/C,IAAAC,WAAA,GAAuFF,KAAK,CAApFG,IAAI,CAAJA,IAAI,GAAAD,WAAA,cAAG,OAAO,GAAAA,WAAA,CAAEE,QAAQ,GAAuDJ,KAAK,CAApEI,QAAQ,CAAEC,WAAW,GAA0CL,KAAK,CAA1DK,WAAW,CAAEC,eAAe,GAAyBN,KAAK,CAA7CM,eAAe,CAAEC,SAAS,GAAcP,KAAK,CAA5BO,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAKT,KAAK,EAAAU,SAAA;EAC5F,IAAMC,KAAK,GAAGlB,UAAU,CAACG,YAAY,CAAC;EACtC,IAAMgB,OAAO,GAAGnB,UAAU,CAACE,cAAc,CAAC;EAC1C,IAAMkB,MAAM,GAAGhB,SAAS,CAACe,OAAO,CAAC;;EAEjC,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIX,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOU,MAAM,CAACE,UAAU,CAACJ,KAAK,CAAC;MACjC,KAAK,QAAQ;QACX,OAAOE,MAAM,CAACG,WAAW,CAACL,KAAK,CAAC;MAClC,KAAK,OAAO;MACZ;QACE,OAAOE,MAAM,CAACI,UAAU,CAACN,KAAK,CAAC;IACnC;EACF,CAAC;EACD,IAAMO,eAAe,GAAGZ,eAAe,GAAG,IAAI;EAC5Cd,KAAA,CAAA2B,aAAA,WAAMZ,SAAS,EAAEK,OAAO,CAACQ,EAAE,CAACP,MAAM,CAACQ,UAAU,CAACV,KAAK,CAAC,EAAEb,aAAa,CAACuB,UAAU,CAAE,IAAEhB,WAAkB,CACrG;;;EAED;IACEb,KAAA,CAAA2B,aAAA,CAACzB,aAAa,EAAKM,KAAK;IACtBR,KAAA,CAAA2B,aAAA,QAAAG,QAAA;IACMd,IAAI;MACRD,SAAS,EAAEK,OAAO,CAACQ,EAAE,CAACN,gBAAgB,CAACX,IAAI,CAAC,GAAAF,WAAA,OAAAA,WAAA;MACzCY,MAAM,CAACU,KAAK,CAACZ,KAAK,CAAC,IAAG,IAAI,EAAAV,WAAA;MAC5B,CAAE;;IAEFG,QAAQ;IACRc;IACE;IACQ,CAAC;;AAEpB","ignoreList":[]}
+{"version":3,"names":["React","useContext","CommonWrapper","ThemeContext","cx","globalClasses","styles","TokenView","props","_cx","_props$size","size","children","closeButton","hideCloseButton","className","rest","_objectWithoutPropertiesLoose","_excluded","theme","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","createElement","removeIcon","_extends","token"],"sources":["TokenView.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport type { TokenSize } from './Token';\nimport { globalClasses, styles } from './Token.styles';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Задает размер контрола. */\n  size?: TokenSize;\n  /** Задает компонент крестика для удаления токена. */\n  closeButton?: ReactNode;\n  /** Определяет, скрывать ли крестик для удаления токена. */\n  hideCloseButton?: boolean;\n}\n\nexport function TokenView(props: TokenViewProps) {\n  const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props;\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}>\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"],"mappings":";AACA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,EAAE,QAAQ,2BAA2B;;;AAG9C,SAASC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;;;;;;;;;;;AAWtD,OAAO,SAASC,SAASA,CAACC,KAAqB,EAAE,KAAAC,GAAA;EAC/C,IAAAC,WAAA,GAAuFF,KAAK,CAApFG,IAAI,CAAJA,IAAI,GAAAD,WAAA,cAAG,OAAO,GAAAA,WAAA,CAAEE,QAAQ,GAAuDJ,KAAK,CAApEI,QAAQ,CAAEC,WAAW,GAA0CL,KAAK,CAA1DK,WAAW,CAAEC,eAAe,GAAyBN,KAAK,CAA7CM,eAAe,CAAEC,SAAS,GAAcP,KAAK,CAA5BO,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAKT,KAAK,EAAAU,SAAA;EAC5F,IAAMC,KAAK,GAAGlB,UAAU,CAACE,YAAY,CAAC;EACtC,IAAMiB,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIT,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOL,MAAM,CAACe,UAAU,CAACF,KAAK,CAAC;MACjC,KAAK,QAAQ;QACX,OAAOb,MAAM,CAACgB,WAAW,CAACH,KAAK,CAAC;MAClC,KAAK,OAAO;MACZ;QACE,OAAOb,MAAM,CAACiB,UAAU,CAACJ,KAAK,CAAC;IACnC;EACF,CAAC;EACD,IAAMK,eAAe,GAAGV,eAAe,GAAG,IAAI;EAC5Cd,KAAA,CAAAyB,aAAA,WAAMV,SAAS,EAAEX,EAAE,CAACE,MAAM,CAACoB,UAAU,CAACP,KAAK,CAAC,EAAEd,aAAa,CAACqB,UAAU,CAAE,IAAEb,WAAkB,CAC7F;;;EAED;IACEb,KAAA,CAAAyB,aAAA,CAACvB,aAAa,EAAKM,KAAK;IACtBR,KAAA,CAAAyB,aAAA,QAAAE,QAAA;IACMX,IAAI;MACRD,SAAS,EAAEX,EAAE,CAACgB,gBAAgB,CAACT,IAAI,CAAC,GAAAF,GAAA,OAAAA,GAAA;MACjCH,MAAM,CAACsB,KAAK,CAACT,KAAK,CAAC,IAAG,IAAI,EAAAV,GAAA;MAC5B,CAAE;;IAEFG,QAAQ;IACRY;IACE;IACQ,CAAC;;AAEpB","ignoreList":[]}

package/components/Token/TokenView.d.ts

@@ -1,8 +1,12 @@
-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): React.JSX.Element;
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { TokenSize } from './Token';
+export interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Задает размер контрола. */
+    size?: TokenSize;
+    /** Задает компонент крестика для удаления токена. */
+    closeButton?: ReactNode;
+    /** Определяет, скрывать ли крестик для удаления токена. */
+    hideCloseButton?: boolean;
+}
+export declare function TokenView(props: TokenViewProps): React.JSX.Element;

package/components/Token/index.d.ts

@@ -1 +1 @@
-export * from './Token';
+export * from './Token';

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

@@ -1 +1 @@
-{"version":3,"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenLocaleHelper"],"sources":["index.ts"],"sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { TokenLocale } from './types';\n\nexport * from './types';\n\nexport const TokenLocaleHelper = new LocaleHelper<TokenLocale>({\n  ru_RU,\n  en_GB,\n});\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,kCAAkC;;AAE/D,SAASC,iBAAiB,IAAIC,KAAK,QAAQ,cAAc;AACzD,SAASD,iBAAiB,IAAIE,KAAK,QAAQ,cAAc;;;AAGzD,cAAc,SAAS;;AAEvB,OAAO,IAAMC,iBAAiB,GAAG,IAAIJ,YAAY,CAAc;EAC7DG,KAAK,EAALA,KAAK;EACLD,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenLocaleHelper"],"sources":["index.ts"],"sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport type { TokenLocale } from './types';\n\nexport * from './types';\n\nexport const TokenLocaleHelper = new LocaleHelper<TokenLocale>({\n  ru_RU,\n  en_GB,\n});\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,kCAAkC;;AAE/D,SAASC,iBAAiB,IAAIC,KAAK,QAAQ,cAAc;AACzD,SAASD,iBAAiB,IAAIE,KAAK,QAAQ,cAAc;;;AAGzD,cAAc,SAAS;;AAEvB,OAAO,IAAMC,iBAAiB,GAAG,IAAIJ,YAAY,CAAc;EAC7DG,KAAK,EAALA,KAAK;EACLD,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}

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

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

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

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

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

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

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

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

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

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

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

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

package/components/TokenInput/TextWidthHelper/TextWidthHelper.js

@@ -1,9 +1,9 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import { TokenView } from "../../Token/TokenView";
-import { getStyles } from "../../Token/Token.styles";
+import { styles } from "../../Token/Token.styles";
 
 // a thin character to preserve some space
 // for the caret visibillity in the input
@@ -29,7 +29,6 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(TextWidthHelper, _React$Component);
   var _proto = TextWidthHelper.prototype;
   _proto.getSizeClassName = function getSizeClassName(size) {
-    var styles = this.styles;
     switch (size) {
       case 'large':
         return styles.helperContainerLarge(this.props.theme);
@@ -41,19 +40,11 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
     }
   };
   _proto.render = function render() {
-    var _this2 = this;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      _this2.styles = getStyles(_this2.emotion);
-      return _this2.renderMain();
-    });
-  };
-  _proto.renderMain = function renderMain() {
     return /*#__PURE__*/React.createElement(TokenView, {
       size: this.props.size,
-      className: this.emotion.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size))
+      className: cx(styles.helperContainer(), this.getSizeClassName(this.props.size))
     }, /*#__PURE__*/React.createElement("div", {
-      className: this.styles.helperText(),
+      className: styles.helperText(),
       ref: this.elementRef
     }, this.props.text || THIN_SPACE));
   };

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

@@ -1 +1 @@
-{"version":3,"names":["React","EmotionConsumer","getDOMRect","TokenView","getStyles","THIN_SPACE","TextWidthHelper","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose","_proto","prototype","getSizeClassName","size","styles","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","_this2","createElement","emotion","renderMain","className","cx","helperContainer","helperText","ref","text","getTextWidth","width","getTextHeight","height","Component"],"sources":["TextWidthHelper.tsx"],"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 styles!: ReturnType<typeof getStyles>;\n  private element: HTMLDivElement | null = null;\n\n  private getSizeClassName(size: TokenSize) {\n    const styles = this.styles;\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          this.styles = getStyles(this.emotion);\n          return this.renderMain();\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <TokenView\n        size={this.props.size}\n        className={this.emotion.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) => (this.element = node);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cx","getDOMRect","TokenView","styles","THIN_SPACE","TextWidthHelper","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose","_proto","prototype","getSizeClassName","size","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","createElement","className","helperContainer","helperText","ref","text","getTextWidth","width","getTextHeight","height","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport type { 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  /** Задает текст в поле ввода, еще не ставший токеном. */\n  text?: string;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme: Theme;\n\n  /** Задает размер контрола. */\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"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,SAAS,QAAQ,oBAAoB;;AAE9C,SAASC,MAAM,QAAQ,uBAAuB;;AAE9C;AACA;AACA,IAAMC,UAAU,GAAG,QAAQ;;;;;;;;;;;;AAY3B;AACA;AACA;AACA;AACA,WAAaC,eAAe,0BAAAC,gBAAA,YAAAD,gBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IAClBU,OAAO,GAA0B,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmCrCW,UAAU,GAAG,UAACC,IAAoB,UAAMZ,KAAA,CAAKU,OAAO,GAAGE,IAAI,EAAC,QAAAZ,KAAA,EAAAa,cAAA,CAAAf,eAAA,EAAAC,gBAAA,MAAAe,MAAA,GAAAhB,eAAA,CAAAiB,SAAA,CAAAD,MAAA,CAjC5DE,gBAAgB,GAAxB,SAAAA,iBAAyBC,IAAe,EAAE,CACxC,QAAQA,IAAI,GACV,KAAK,OAAO,CACV,OAAOrB,MAAM,CAACsB,oBAAoB,CAAC,IAAI,CAACC,KAAK,CAACC,KAAK,CAAC,CACtD,KAAK,QAAQ,CACX,OAAOxB,MAAM,CAACyB,qBAAqB,CAAC,IAAI,CAACF,KAAK,CAACC,KAAK,CAAC,CACvD,KAAK,OAAO,CACZ,QACE,OAAOxB,MAAM,CAAC0B,oBAAoB,CAAC,IAAI,CAACH,KAAK,CAACC,KAAK,CAAC,CACxD,CACF,CAAC,CAAAN,MAAA,CAEMS,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,oBACE/B,KAAA,CAAAgC,aAAA,CAAC7B,SAAS,IACRsB,IAAI,EAAE,IAAI,CAACE,KAAK,CAACF,IAAK,EACtBQ,SAAS,EAAEhC,EAAE,CAACG,MAAM,CAAC8B,eAAe,CAAC,CAAC,EAAE,IAAI,CAACV,gBAAgB,CAAC,IAAI,CAACG,KAAK,CAACF,IAAI,CAAC,CAAE,iBAEhFzB,KAAA,CAAAgC,aAAA,UAAKC,SAAS,EAAE7B,MAAM,CAAC+B,UAAU,CAAC,CAAE,EAACC,GAAG,EAAE,IAAI,CAACjB,UAAW,IACvD,IAAI,CAACQ,KAAK,CAACU,IAAI,IAAIhC,UACjB,CACI,CAAC,CAEhB,CAAC,CAAAiB,MAAA,CAEMgB,YAAY,GAAnB,SAAAA,aAAA,EAA8B,CAC5B,OAAOpC,UAAU,CAAC,IAAI,CAACgB,OAAO,CAAC,CAACqB,KAAK,CACvC,CAAC,CAAAjB,MAAA,CAEMkB,aAAa,GAApB,SAAAA,cAAA,EAA+B,CAC7B,OAAOtC,UAAU,CAAC,IAAI,CAACgB,OAAO,CAAC,CAACuB,MAAM,CACxC,CAAC,QAAAnC,eAAA,GAlCkCN,KAAK,CAAC0C,SAAS","ignoreList":[]}

package/components/TokenInput/TextWidthHelper.d.ts

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Theme } from '../../lib/theming/Theme';
-import { TokenSize } from '../Token';
-export interface TextWidthHelperProps {
-    text?: string;
-    theme: Theme;
-    size: TokenSize;
-}
-/**
- * Херпер позволяет вычислить размеры блока с текстом
- * для последующего выставления размеров input
- */
-export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
-    private emotion;
-    private styles;
-    private element;
-    private getSizeClassName;
-    render(): React.JSX.Element;
-    renderMain(): React.JSX.Element;
-    getTextWidth(): number;
-    getTextHeight(): number;
-    private elementRef;
-}
+import React from 'react';
+import type { Theme } from '../../lib/theming/Theme';
+import type { TokenSize } from '../Token';
+export interface TextWidthHelperProps {
+    /** Задает текст в поле ввода, еще не ставший токеном. */
+    text?: string;
+    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
+    theme: Theme;
+    /** Задает размер контрола. */
+    size: TokenSize;
+}
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ * для последующего выставления размеров input
+ */
+export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
+    private element;
+    private getSizeClassName;
+    render(): React.JSX.Element;
+    getTextWidth(): number;
+    getTextHeight(): number;
+    private elementRef;
+}

package/components/TokenInput/TokenInput/TokenInput.js

@@ -13,17 +13,16 @@ import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { Token } from "../../Token";
 import { MenuItem } from "../../MenuItem";
 import { emptyHandler, getRandomID } from "../../../lib/utils";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { locale } from "../../../lib/locale/decorators";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { getUid } from "../../../lib/uidUtils";
 import { TokenView } from "../../Token/TokenView";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { isShadowRoot } from "../../../lib/shadowDom/isShadowRoot";
 import { TokenInputLocaleHelper } from "../locale";
-import { getStyles } from "../TokenInput.styles";
+import { styles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
 import { TokenInputMenu } from "../TokenInputMenu";
 import { TextWidthHelper } from "../TextWidthHelper";
@@ -78,6 +77,12 @@ var defaultRenderToken = function defaultRenderToken(item, _ref) {
     }, item.toString())
   );
 };
+
+/**
+ * Поле с токенами `TokenInput` — это поле ввода со списком подсказок.
+ *
+ * Поле с токенами используют для выбора нескольких значений из справочника и для добавления своих значений.
+ */
 export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), rootNode(_class = _dec(_class = (_TokenInput = /*#__PURE__*/function (_React$PureComponent) {
   function TokenInput() {
     var _this;
@@ -183,10 +188,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
     _this.isBlurToMenu = function (event) {
       if (_this.menuRef && globalObject.document) {
-        var _this$tokensInputMenu, _ref2;
+        var _this$tokensInputMenu;
         var menu = getRootNode((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
-        var isShadowRootElement = isShadowRoot(_this.emotion.sheet.container.getRootNode());
-        var relatedTarget = (_ref2 = isShadowRootElement ? event.target : event.relatedTarget) != null ? _ref2 : globalObject.document.activeElement;
+        var relatedTarget = event.relatedTarget || globalObject.document.activeElement;
         if (menu && menu.contains(relatedTarget)) {
           return true;
         }
@@ -263,7 +267,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
     };
     _this.tryGetItems = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
         var autocompleteItems, _this$getProps3, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -327,7 +331,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         }, _callee);
       }));
       return function (_x) {
-        return _ref3.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }();
     _this.handleKeyDown = function (event) {
@@ -840,17 +844,12 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   };
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      _this2.styles = getStyles(_this2.emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return _this2.renderMain();
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
     });
   };
   _proto.getLabelSizeClassName = function getLabelSizeClassName() {
-    var styles = this.styles;
     switch (this.getProps().size) {
       case 'large':
         return styles.labelLarge(this.theme);
@@ -862,7 +861,6 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }
   };
   _proto.getInputSizeClassName = function getInputSizeClassName() {
-    var styles = this.styles;
     switch (this.getProps().size) {
       case 'large':
         return styles.inputLarge(this.theme);
@@ -874,7 +872,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }
   };
   _proto.renderMain = function renderMain() {
-    var _this$emotion$cx, _this$emotion$cx2, _this$emotion$cx3;
+    var _cx, _cx2, _cx3;
     if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
       throw Error('Missed getItems for type ' + this.type);
     }
@@ -916,13 +914,12 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
       caretColor: this.isCursorVisible ? undefined : 'transparent'
     };
-    var styles = this.styles;
-    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 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: this.emotion.cx((_this$emotion$cx3 = {}, _this$emotion$cx3[styles.inputPlaceholderWrapper()] = Boolean(placeholder), _this$emotion$cx3)),
+      className: cx((_cx3 = {}, _cx3[styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)),
       hideCloseButton: Boolean(placeholder)
     }, /*#__PURE__*/React.createElement("textarea", {
       id: this.textareaId,
@@ -971,7 +968,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       loading: loading,
       opened: showMenu,
       maxMenuHeight: maxMenuHeight,
-      anchorElement: menuAlign === 'cursor' ? this.input : this.wrapper,
+      anchorElementForCursor: this.input,
+      anchorElementRoot: this.wrapper,
       renderNotFound: renderNotFound,
       renderItem: renderItem,
       onValueChange: this.selectItem,