@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3dbb8bef27

package/cjs/components/Token/Token.md

@@ -1,4 +1,4 @@
-Token example
+### Базовый пример
 
 ```jsx harmony
 import { Token } from '@skbkontur/react-ui';
@@ -6,7 +6,90 @@ import { Token } from '@skbkontur/react-ui';
 <Token>Example</Token>;
 ```
 
-Can accept validation state
+### Цвет токена
+У разных токенов может быть разный цвет.
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+const colors = {
+  default: {
+    idle: 'defaultIdle',
+    active: 'defaultActive',
+  },
+  gray: {
+    idle: 'grayIdle',
+    active: 'grayActive',
+  },
+  blue: {
+    idle: 'blueIdle',
+    active: 'blueActive',
+  },
+  green: {
+    idle: 'greenIdle',
+    active: 'greenActive',
+  },
+  yellow: {
+    idle: 'yellowIdle',
+    active: 'yellowActive',
+  },
+  red: {
+    idle: 'redIdle',
+    active: 'redActive',
+  },
+  mono: {
+    idle: 'white',
+    active: 'black',
+  },
+};
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token colors={colors.default}>Default</Token>
+    <Token isActive colors={colors.default}>
+      Default
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.gray}>Gray</Token>
+    <Token isActive colors={colors.gray}>
+      Gray
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.blue}>Blue</Token>
+    <Token isActive colors={colors.blue}>
+      Blue
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.green}>Green</Token>
+    <Token isActive colors={colors.green}>
+      Green
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.yellow}>Yellow</Token>
+    <Token isActive colors={colors.yellow}>
+      Yellow
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.red}>Red</Token>
+    <Token isActive colors={colors.red}>
+      Red
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.mono}>Monochrome</Token>
+    <Token isActive colors={colors.mono}>
+      Monochrome
+    </Token>
+  </Gapped>
+</Gapped>;
+```
+
+### Состояние валидации
 
 ```jsx harmony
 import { Gapped, Token } from '@skbkontur/react-ui';
@@ -29,7 +112,7 @@ import { Gapped, Token } from '@skbkontur/react-ui';
 </Gapped>;
 ```
 
-У Token есть 3 стандартных размера.
+### Размер
 
 ```jsx harmony
 import { Gapped, Token } from '@skbkontur/react-ui';

package/cjs/components/Token/Token.styles.d.ts

@@ -13,7 +13,7 @@ export declare const styles: {
     tokenError(t: Theme): string;
     tokenWarning(t: Theme): string;
     tokenDisabled(t: Theme): string;
-    text(t: Theme): string;
+    text(): string;
     removeIcon(t: Theme): string;
     helperText(): string;
     helperContainer(): string;

package/cjs/components/Token/Token.styles.js

@@ -118,10 +118,9 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
 
   },
 
-  text: function text(t) {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])),
+  text: function text() {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
 
-    t.tokenLegacyTextShift);
 
   },
 

package/cjs/components/Token/Token.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_Token","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","globalClasses","exports","prefix","removeIcon","styles","memoizeStyle","token","t","css","_taggedTemplateLiteralLoose2","default","tokenBorderRadius","tokenBorderWidth","tokenSmall","tokenSizeMixin","tokenPaddingYSmall","tokenPaddingXSmall","tokenLineHeightSmall","tokenFontSizeSmall","tokenMarginYSmall","tokenMarginXSmall","tokenMedium","tokenPaddingYMedium","tokenPaddingXMedium","tokenLineHeightMedium","tokenFontSizeMedium","tokenMarginYMedium","tokenMarginXMedium","tokenLarge","tokenPaddingYLarge","tokenPaddingXLarge","tokenLineHeightLarge","tokenFontSizeLarge","tokenMarginYLarge","tokenMarginXLarge","tokenIdle","tokenColor","tokenBg","tokenBorderColor","tokenHover","tokenColorHover","tokenBgHover","tokenBorderColorHover","tokenActive","tokenColorActive","tokenBgActive","tokenBorderColorActive","tokenError","tokenBorderColorError","tokenOutlineWidth","tokenWarning","tokenBorderColorWarning","tokenDisabled","tokenTextColorDisabled","tokenBorderColorDisabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","helperText","helperContainer","helperContainerSmall","tokenInputPaddingXSmall","helperContainerMedium","tokenInputPaddingXMedium","helperContainerLarge","tokenInputPaddingXLarge"],"sources":["Token.styles.ts"],"sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { tokenSizeMixin } from './Token.mixins';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      border: solid ${t.tokenBorderWidth} transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  tokenSmall(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYSmall,\n        t.tokenPaddingXSmall,\n        t.tokenLineHeightSmall,\n        t.tokenFontSizeSmall,\n        t.tokenMarginYSmall,\n        t.tokenMarginXSmall,\n      )};\n    `;\n  },\n\n  tokenMedium(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYMedium,\n        t.tokenPaddingXMedium,\n        t.tokenLineHeightMedium,\n        t.tokenFontSizeMedium,\n        t.tokenMarginYMedium,\n        t.tokenMarginXMedium,\n      )};\n    `;\n  },\n\n  tokenLarge(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYLarge,\n        t.tokenPaddingXLarge,\n        t.tokenLineHeightLarge,\n        t.tokenFontSizeLarge,\n        t.tokenMarginYLarge,\n        t.tokenMarginXLarge,\n      )};\n    `;\n  },\n\n  tokenIdle(t: Theme) {\n    return css`\n      color: ${t.tokenColor};\n      background: ${t.tokenBg};\n      border-color: ${t.tokenBorderColor};\n      background-clip: border-box;\n    `;\n  },\n\n  tokenHover(t: Theme) {\n    return css`\n      &:hover {\n        color: ${t.tokenColorHover};\n        background: ${t.tokenBgHover};\n        border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorHover};\n      }\n    `;\n  },\n\n  tokenActive(t: Theme) {\n    return css`\n      color: ${t.tokenColorActive};\n      background: ${t.tokenBgActive};\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorActive};\n    `;\n  },\n\n  tokenError(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorError};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError};\n    `;\n  },\n\n  tokenWarning(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorWarning};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning};\n    `;\n  },\n\n  tokenDisabled(t: Theme) {\n    return css`\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n      border: solid 1px ${t.tokenBorderColorDisabled};\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      display: inline-block;\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n\n  helperText() {\n    return css`\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    `;\n  },\n  helperContainer() {\n    return css`\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    `;\n  },\n  helperContainerSmall(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXSmall};\n      right: ${t.tokenInputPaddingXSmall};\n    `;\n  },\n  helperContainerMedium(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXMedium};\n      right: ${t.tokenInputPaddingXMedium};\n    `;\n  },\n  helperContainerLarge(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXLarge};\n      right: ${t.tokenInputPaddingXLarge};\n    `;\n  },\n});\n"],"mappings":"4SAAA,IAAAA,QAAA,GAAAC,OAAA;;;AAGA,IAAAC,MAAA,GAAAD,OAAA,mBAAgD,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA;;AAEzC,IAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,eAAM,EAAC,OAAO,CAAC,CAAC;EAC3CC,UAAU,EAAE;AACd,CAAC,CAAC;;AAEK,IAAMC,MAAM,GAAAH,OAAA,CAAAG,MAAA,GAAG,IAAAC,qBAAY,EAAC;EACjCC,KAAK,WAAAA,MAACC,CAAQ,EAAE;IACd,WAAOC,YAAG,EAAAzB,eAAA,KAAAA,eAAA,OAAA0B,4BAAA,CAAAC,OAAA;;;IAGSH,CAAC,CAACI,iBAAiB;IACpBJ,CAAC,CAACK,gBAAgB;;;;;;;;;EAStC,CAAC;;EAEDC,UAAU,WAAAA,WAACN,CAAQ,EAAE;IACnB,WAAOC,YAAG,EAAAxB,gBAAA,KAAAA,gBAAA,OAAAyB,4BAAA,CAAAC,OAAA;IACN,IAAAI,qBAAc;MACdP,CAAC,CAACQ,kBAAkB;MACpBR,CAAC,CAACS,kBAAkB;MACpBT,CAAC,CAACU,oBAAoB;MACtBV,CAAC,CAACW,kBAAkB;MACpBX,CAAC,CAACY,iBAAiB;MACnBZ,CAAC,CAACa;IACJ,CAAC;;EAEL,CAAC;;EAEDC,WAAW,WAAAA,YAACd,CAAQ,EAAE;IACpB,WAAOC,YAAG,EAAAvB,gBAAA,KAAAA,gBAAA,OAAAwB,4BAAA,CAAAC,OAAA;IACN,IAAAI,qBAAc;MACdP,CAAC,CAACe,mBAAmB;MACrBf,CAAC,CAACgB,mBAAmB;MACrBhB,CAAC,CAACiB,qBAAqB;MACvBjB,CAAC,CAACkB,mBAAmB;MACrBlB,CAAC,CAACmB,kBAAkB;MACpBnB,CAAC,CAACoB;IACJ,CAAC;;EAEL,CAAC;;EAEDC,UAAU,WAAAA,WAACrB,CAAQ,EAAE;IACnB,WAAOC,YAAG,EAAAtB,gBAAA,KAAAA,gBAAA,OAAAuB,4BAAA,CAAAC,OAAA;IACN,IAAAI,qBAAc;MACdP,CAAC,CAACsB,kBAAkB;MACpBtB,CAAC,CAACuB,kBAAkB;MACpBvB,CAAC,CAACwB,oBAAoB;MACtBxB,CAAC,CAACyB,kBAAkB;MACpBzB,CAAC,CAAC0B,iBAAiB;MACnB1B,CAAC,CAAC2B;IACJ,CAAC;;EAEL,CAAC;;EAEDC,SAAS,WAAAA,UAAC5B,CAAQ,EAAE;IAClB,WAAOC,YAAG,EAAArB,gBAAA,KAAAA,gBAAA,OAAAsB,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAAC6B,UAAU;IACP7B,CAAC,CAAC8B,OAAO;IACP9B,CAAC,CAAC+B,gBAAgB;;;EAGtC,CAAC;;EAEDC,UAAU,WAAAA,WAAChC,CAAQ,EAAE;IACnB,WAAOC,YAAG,EAAApB,gBAAA,KAAAA,gBAAA,OAAAqB,4BAAA,CAAAC,OAAA;;IAEGH,CAAC,CAACiC,eAAe;IACZjC,CAAC,CAACkC,YAAY;IACZlC,CAAC,CAACK,gBAAgB,EAAIL,CAAC,CAACmC,qBAAqB;;;EAGnE,CAAC;;EAEDC,WAAW,WAAAA,YAACpC,CAAQ,EAAE;IACpB,WAAOC,YAAG,EAAAnB,gBAAA,KAAAA,gBAAA,OAAAoB,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACqC,gBAAgB;IACbrC,CAAC,CAACsC,aAAa;IACbtC,CAAC,CAACK,gBAAgB,EAAIL,CAAC,CAACuC,sBAAsB;;EAElE,CAAC;;EAEDC,UAAU,WAAAA,WAACxC,CAAQ,EAAE;IACnB,WAAOC,YAAG,EAAAlB,gBAAA,KAAAA,gBAAA,OAAAmB,4BAAA,CAAAC,OAAA;IACQH,CAAC,CAACK,gBAAgB,EAAIL,CAAC,CAACyC,qBAAqB;IACzCzC,CAAC,CAAC0C,iBAAiB,EAAI1C,CAAC,CAACyC,qBAAqB;;EAEtE,CAAC;;EAEDE,YAAY,WAAAA,aAAC3C,CAAQ,EAAE;IACrB,WAAOC,YAAG,EAAAjB,gBAAA,KAAAA,gBAAA,OAAAkB,4BAAA,CAAAC,OAAA;IACQH,CAAC,CAACK,gBAAgB,EAAIL,CAAC,CAAC4C,uBAAuB;IAC3C5C,CAAC,CAAC0C,iBAAiB,EAAI1C,CAAC,CAAC4C,uBAAuB;;EAExE,CAAC;;EAEDC,aAAa,WAAAA,cAAC7C,CAAQ,EAAE;IACtB,WAAOC,YAAG,EAAAhB,iBAAA,KAAAA,iBAAA,OAAAiB,4BAAA,CAAAC,OAAA;;;IAGCH,CAAC,CAAC8C,sBAAsB;;IAEb9C,CAAC,CAAC+C,wBAAwB;;IAE3CtD,aAAa,CAACG,UAAU;;;;EAI/B,CAAC;;EAEDoD,IAAI,WAAAA,KAAChD,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAf,iBAAA,KAAAA,iBAAA,OAAAgB,4BAAA,CAAAC,OAAA;;IAEUH,CAAC,CAACiD,oBAAoB;;EAE5C,CAAC;;EAEDrD,UAAU,WAAAA,WAACI,CAAQ,EAAE;IACnB,WAAOC,YAAG,EAAAd,iBAAA,KAAAA,iBAAA,OAAAe,4BAAA,CAAAC,OAAA;IACEH,CAAC,CAACkD,mBAAmB;IACtBlD,CAAC,CAACkD,mBAAmB;;IAEnBlD,CAAC,CAACmD,uBAAuB,EAAInD,CAAC,CAACoD,uBAAuB;IACnDpD,CAAC,CAACqD,wBAAwB;IACzBrD,CAAC,CAACsD,kBAAkB;;;;;;;;;;;EAWvC,CAAC;;EAEDC,UAAU,WAAAA,WAAA,EAAG;IACX,WAAOtD,YAAG,EAAAb,iBAAA,KAAAA,iBAAA,OAAAc,4BAAA,CAAAC,OAAA;;;;;;;;EAQZ,CAAC;EACDqD,eAAe,WAAAA,gBAAA,EAAG;IAChB,WAAOvD,YAAG,EAAAZ,iBAAA,KAAAA,iBAAA,OAAAa,4BAAA,CAAAC,OAAA;;;;;EAKZ,CAAC;EACDsD,oBAAoB,WAAAA,qBAACzD,CAAQ,EAAE;IAC7B,WAAOC,YAAG,EAAAX,iBAAA,KAAAA,iBAAA,OAAAY,4BAAA,CAAAC,OAAA;IACAH,CAAC,CAAC0D,uBAAuB;IACxB1D,CAAC,CAAC0D,uBAAuB;;EAEtC,CAAC;EACDC,qBAAqB,WAAAA,sBAAC3D,CAAQ,EAAE;IAC9B,WAAOC,YAAG,EAAAV,iBAAA,KAAAA,iBAAA,OAAAW,4BAAA,CAAAC,OAAA;IACAH,CAAC,CAAC4D,wBAAwB;IACzB5D,CAAC,CAAC4D,wBAAwB;;EAEvC,CAAC;EACDC,oBAAoB,WAAAA,qBAAC7D,CAAQ,EAAE;IAC7B,WAAOC,YAAG,EAAAT,iBAAA,KAAAA,iBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACAH,CAAC,CAAC8D,uBAAuB;IACxB9D,CAAC,CAAC8D,uBAAuB;;EAEtC;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_Token","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","globalClasses","exports","prefix","removeIcon","styles","memoizeStyle","token","t","css","_taggedTemplateLiteralLoose2","default","tokenBorderRadius","tokenBorderWidth","tokenSmall","tokenSizeMixin","tokenPaddingYSmall","tokenPaddingXSmall","tokenLineHeightSmall","tokenFontSizeSmall","tokenMarginYSmall","tokenMarginXSmall","tokenMedium","tokenPaddingYMedium","tokenPaddingXMedium","tokenLineHeightMedium","tokenFontSizeMedium","tokenMarginYMedium","tokenMarginXMedium","tokenLarge","tokenPaddingYLarge","tokenPaddingXLarge","tokenLineHeightLarge","tokenFontSizeLarge","tokenMarginYLarge","tokenMarginXLarge","tokenIdle","tokenColor","tokenBg","tokenBorderColor","tokenHover","tokenColorHover","tokenBgHover","tokenBorderColorHover","tokenActive","tokenColorActive","tokenBgActive","tokenBorderColorActive","tokenError","tokenBorderColorError","tokenOutlineWidth","tokenWarning","tokenBorderColorWarning","tokenDisabled","tokenTextColorDisabled","tokenBorderColorDisabled","text","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","helperText","helperContainer","helperContainerSmall","tokenInputPaddingXSmall","helperContainerMedium","tokenInputPaddingXMedium","helperContainerLarge","tokenInputPaddingXLarge"],"sources":["Token.styles.ts"],"sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { tokenSizeMixin } from './Token.mixins';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      border: solid ${t.tokenBorderWidth} transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  tokenSmall(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYSmall,\n        t.tokenPaddingXSmall,\n        t.tokenLineHeightSmall,\n        t.tokenFontSizeSmall,\n        t.tokenMarginYSmall,\n        t.tokenMarginXSmall,\n      )};\n    `;\n  },\n\n  tokenMedium(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYMedium,\n        t.tokenPaddingXMedium,\n        t.tokenLineHeightMedium,\n        t.tokenFontSizeMedium,\n        t.tokenMarginYMedium,\n        t.tokenMarginXMedium,\n      )};\n    `;\n  },\n\n  tokenLarge(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYLarge,\n        t.tokenPaddingXLarge,\n        t.tokenLineHeightLarge,\n        t.tokenFontSizeLarge,\n        t.tokenMarginYLarge,\n        t.tokenMarginXLarge,\n      )};\n    `;\n  },\n\n  tokenIdle(t: Theme) {\n    return css`\n      color: ${t.tokenColor};\n      background: ${t.tokenBg};\n      border-color: ${t.tokenBorderColor};\n      background-clip: border-box;\n    `;\n  },\n\n  tokenHover(t: Theme) {\n    return css`\n      &:hover {\n        color: ${t.tokenColorHover};\n        background: ${t.tokenBgHover};\n        border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorHover};\n      }\n    `;\n  },\n\n  tokenActive(t: Theme) {\n    return css`\n      color: ${t.tokenColorActive};\n      background: ${t.tokenBgActive};\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorActive};\n    `;\n  },\n\n  tokenError(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorError};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError};\n    `;\n  },\n\n  tokenWarning(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorWarning};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning};\n    `;\n  },\n\n  tokenDisabled(t: Theme) {\n    return css`\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n      border: solid 1px ${t.tokenBorderColorDisabled};\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text() {\n    return css`\n      display: inline-block;\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n\n  helperText() {\n    return css`\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    `;\n  },\n  helperContainer() {\n    return css`\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    `;\n  },\n  helperContainerSmall(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXSmall};\n      right: ${t.tokenInputPaddingXSmall};\n    `;\n  },\n  helperContainerMedium(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXMedium};\n      right: ${t.tokenInputPaddingXMedium};\n    `;\n  },\n  helperContainerLarge(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXLarge};\n      right: ${t.tokenInputPaddingXLarge};\n    `;\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/Token/TokenView.d.ts

@@ -1,8 +1,11 @@
 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;

package/cjs/components/Token/TokenView.js

@@ -13,6 +13,9 @@ var _Token = require("./Token.styles");var _excluded = ["size", "children", "clo
 
 
 
+
+
+
 function TokenView(props) {var _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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_CommonWrapper","_ThemeContext","_Emotion","_Token","_excluded","TokenView","props","_cx","_props$size","size","children","closeButton","hideCloseButton","className","rest","_objectWithoutPropertiesLoose2","default","theme","useContext","ThemeContext","getSizeClassName","styles","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","createElement","cx","removeIcon","globalClasses","CommonWrapper","_extends2","token"],"sources":["TokenView.tsx"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TokenSize } from './Token';\nimport { globalClasses, styles } 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 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":"+cAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;;;AAGA,IAAAI,MAAA,GAAAJ,OAAA,mBAAuD,IAAAK,SAAA;;;;;;;;AAQhD,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,OAAAC,8BAAA,CAAAC,OAAA,EAAKV,KAAK,EAAAF,SAAA;EAC5F,IAAMa,KAAK,GAAG,IAAAC,iBAAU,EAACC,0BAAY,CAAC;EACtC,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIX,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOY,aAAM,CAACC,UAAU,CAACL,KAAK,CAAC;MACjC,KAAK,QAAQ;QACX,OAAOI,aAAM,CAACE,WAAW,CAACN,KAAK,CAAC;MAClC,KAAK,OAAO;MACZ;QACE,OAAOI,aAAM,CAACG,UAAU,CAACP,KAAK,CAAC;IACnC;EACF,CAAC;EACD,IAAMQ,eAAe,GAAGb,eAAe,GAAG,IAAI;EAC5Cf,MAAA,CAAAmB,OAAA,CAAAU,aAAA,WAAMb,SAAS,EAAE,IAAAc,WAAE,EAACN,aAAM,CAACO,UAAU,CAACX,KAAK,CAAC,EAAEY,oBAAa,CAACD,UAAU,CAAE,IAAEjB,WAAkB,CAC7F;;;EAED;IACEd,MAAA,CAAAmB,OAAA,CAAAU,aAAA,CAAC1B,cAAA,CAAA8B,aAAa,EAAKxB,KAAK;IACtBT,MAAA,CAAAmB,OAAA,CAAAU,aAAA,YAAAK,SAAA,CAAAf,OAAA;IACMF,IAAI;MACRD,SAAS,EAAE,IAAAc,WAAE,EAACP,gBAAgB,CAACX,IAAI,CAAC,GAAAF,GAAA,OAAAA,GAAA;MACjCc,aAAM,CAACW,KAAK,CAACf,KAAK,CAAC,IAAG,IAAI,EAAAV,GAAA;MAC5B,CAAE;;IAEFG,QAAQ;IACRe;IACE;IACQ,CAAC;;AAEpB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_CommonWrapper","_ThemeContext","_Emotion","_Token","_excluded","TokenView","props","_cx","_props$size","size","children","closeButton","hideCloseButton","className","rest","_objectWithoutPropertiesLoose2","default","theme","useContext","ThemeContext","getSizeClassName","styles","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","createElement","cx","removeIcon","globalClasses","CommonWrapper","_extends2","token"],"sources":["TokenView.tsx"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { 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":"+cAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;;;AAGA,IAAAI,MAAA,GAAAJ,OAAA,mBAAuD,IAAAK,SAAA;;;;;;;;;;;AAWhD,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,OAAAC,8BAAA,CAAAC,OAAA,EAAKV,KAAK,EAAAF,SAAA;EAC5F,IAAMa,KAAK,GAAG,IAAAC,iBAAU,EAACC,0BAAY,CAAC;EACtC,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIX,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOY,aAAM,CAACC,UAAU,CAACL,KAAK,CAAC;MACjC,KAAK,QAAQ;QACX,OAAOI,aAAM,CAACE,WAAW,CAACN,KAAK,CAAC;MAClC,KAAK,OAAO;MACZ;QACE,OAAOI,aAAM,CAACG,UAAU,CAACP,KAAK,CAAC;IACnC;EACF,CAAC;EACD,IAAMQ,eAAe,GAAGb,eAAe,GAAG,IAAI;EAC5Cf,MAAA,CAAAmB,OAAA,CAAAU,aAAA,WAAMb,SAAS,EAAE,IAAAc,WAAE,EAACN,aAAM,CAACO,UAAU,CAACX,KAAK,CAAC,EAAEY,oBAAa,CAACD,UAAU,CAAE,IAAEjB,WAAkB,CAC7F;;;EAED;IACEd,MAAA,CAAAmB,OAAA,CAAAU,aAAA,CAAC1B,cAAA,CAAA8B,aAAa,EAAKxB,KAAK;IACtBT,MAAA,CAAAmB,OAAA,CAAAU,aAAA,YAAAK,SAAA,CAAAf,OAAA;IACMF,IAAI;MACRD,SAAS,EAAE,IAAAc,WAAE,EAACP,gBAAgB,CAACX,IAAI,CAAC,GAAAF,GAAA,OAAAA,GAAA;MACjCc,aAAM,CAACW,KAAK,CAACf,KAAK,CAAC,IAAG,IAAI,EAAAV,GAAA;MAC5B,CAAE;;IAEFG,QAAQ;IACRe;IACE;IACQ,CAAC;;AAEpB","ignoreList":[]}

package/cjs/components/Token/__docs__/Token.mdx

@@ -0,0 +1,28 @@
+import * as TokenStories from './Token.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={TokenStories} />
+
+# Token
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/input-fields/tokens/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A2955)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/TokenInput/TextWidthHelper.d.ts

@@ -2,8 +2,11 @@ import React from 'react';
 import { Theme } from '../../lib/theming/Theme';
 import { TokenSize } from '../Token';
 export interface TextWidthHelperProps {
+    /** Задает текст в поле ввода, еще не ставший токеном. */
     text?: string;
+    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
     theme: Theme;
+    /** Задает размер контрола. */
     size: TokenSize;
 }
 /**

package/cjs/components/TokenInput/TextWidthHelper.js

@@ -16,6 +16,11 @@ var THIN_SPACE = "\u2009";
 
 
 
+
+
+
+
+
 /**
  * Херпер позволяет вычислить размеры блока с текстом
  * для последующего выставления размеров input

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Emotion","_getDOMRect","_TokenView","_Token","THIN_SPACE","TextWidthHelper","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose2","default","_proto","prototype","getSizeClassName","size","styles","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","createElement","TokenView","className","cx","helperContainer","helperText","ref","text","getTextWidth","getDOMRect","width","getTextHeight","height","React","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport { TokenSize } from '../Token';\nimport { styles } from '../Token/Token.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n  text?: string;\n  theme: Theme;\n  size: TokenSize;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  private getSizeClassName(size: TokenSize) {\n    switch (size) {\n      case 'large':\n        return styles.helperContainerLarge(this.props.theme);\n      case 'medium':\n        return styles.helperContainerMedium(this.props.theme);\n      case 'small':\n      default:\n        return styles.helperContainerSmall(this.props.theme);\n    }\n  }\n\n  public render() {\n    return (\n      <TokenView\n        size={this.props.size}\n        className={cx(styles.helperContainer(), this.getSizeClassName(this.props.size))}\n      >\n        <div className={styles.helperText()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </TokenView>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"],"mappings":"mQAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,QAAA,GAAAD,OAAA;;AAEA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;;AAEA,IAAAI,MAAA,GAAAJ,OAAA;;AAEA;AACA;AACA,IAAMK,UAAU,GAAG,QAAQ;;;;;;;AAO3B;AACA;AACA;AACA,GAHA;AAIaC,eAAe,GAAAC,OAAA,CAAAD,eAAA,0BAAAE,gBAAA,YAAAF,gBAAA,OAAAG,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,MAAAa,eAAA,CAAAC,OAAA,EAAAjB,eAAA,EAAAE,gBAAA,MAAAgB,MAAA,GAAAlB,eAAA,CAAAmB,SAAA,CAAAD,MAAA,CAjC5DE,gBAAgB,GAAxB,SAAAA,iBAAyBC,IAAe,EAAE,CACxC,QAAQA,IAAI,GACV,KAAK,OAAO,CACV,OAAOC,aAAM,CAACC,oBAAoB,CAAC,IAAI,CAACC,KAAK,CAACC,KAAK,CAAC,CACtD,KAAK,QAAQ,CACX,OAAOH,aAAM,CAACI,qBAAqB,CAAC,IAAI,CAACF,KAAK,CAACC,KAAK,CAAC,CACvD,KAAK,OAAO,CACZ,QACE,OAAOH,aAAM,CAACK,oBAAoB,CAAC,IAAI,CAACH,KAAK,CAACC,KAAK,CAAC,CACxD,CACF,CAAC,CAAAP,MAAA,CAEMU,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,oBACEpC,MAAA,CAAAyB,OAAA,CAAAY,aAAA,CAAChC,UAAA,CAAAiC,SAAS,IACRT,IAAI,EAAE,IAAI,CAACG,KAAK,CAACH,IAAK,EACtBU,SAAS,EAAE,IAAAC,WAAE,EAACV,aAAM,CAACW,eAAe,CAAC,CAAC,EAAE,IAAI,CAACb,gBAAgB,CAAC,IAAI,CAACI,KAAK,CAACH,IAAI,CAAC,CAAE,iBAEhF7B,MAAA,CAAAyB,OAAA,CAAAY,aAAA,UAAKE,SAAS,EAAET,aAAM,CAACY,UAAU,CAAC,CAAE,EAACC,GAAG,EAAE,IAAI,CAACrB,UAAW,IACvD,IAAI,CAACU,KAAK,CAACY,IAAI,IAAIrC,UACjB,CACI,CAAC,CAEhB,CAAC,CAAAmB,MAAA,CAEMmB,YAAY,GAAnB,SAAAA,aAAA,EAA8B,CAC5B,OAAO,IAAAC,sBAAU,EAAC,IAAI,CAACzB,OAAO,CAAC,CAAC0B,KAAK,CACvC,CAAC,CAAArB,MAAA,CAEMsB,aAAa,GAApB,SAAAA,cAAA,EAA+B,CAC7B,OAAO,IAAAF,sBAAU,EAAC,IAAI,CAACzB,OAAO,CAAC,CAAC4B,MAAM,CACxC,CAAC,QAAAzC,eAAA,GAlCkC0C,cAAK,CAACC,SAAS","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_Emotion","_getDOMRect","_TokenView","_Token","THIN_SPACE","TextWidthHelper","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose2","default","_proto","prototype","getSizeClassName","size","styles","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","createElement","TokenView","className","cx","helperContainer","helperText","ref","text","getTextWidth","getDOMRect","width","getTextHeight","height","React","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport { TokenSize } from '../Token';\nimport { styles } from '../Token/Token.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n  /** Задает текст в поле ввода, еще не ставший токеном. */\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":"mQAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,QAAA,GAAAD,OAAA;;AAEA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;;AAEA,IAAAI,MAAA,GAAAJ,OAAA;;AAEA;AACA;AACA,IAAMK,UAAU,GAAG,QAAQ;;;;;;;;;;;;AAY3B;AACA;AACA;AACA,GAHA;AAIaC,eAAe,GAAAC,OAAA,CAAAD,eAAA,0BAAAE,gBAAA,YAAAF,gBAAA,OAAAG,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,MAAAa,eAAA,CAAAC,OAAA,EAAAjB,eAAA,EAAAE,gBAAA,MAAAgB,MAAA,GAAAlB,eAAA,CAAAmB,SAAA,CAAAD,MAAA,CAjC5DE,gBAAgB,GAAxB,SAAAA,iBAAyBC,IAAe,EAAE,CACxC,QAAQA,IAAI,GACV,KAAK,OAAO,CACV,OAAOC,aAAM,CAACC,oBAAoB,CAAC,IAAI,CAACC,KAAK,CAACC,KAAK,CAAC,CACtD,KAAK,QAAQ,CACX,OAAOH,aAAM,CAACI,qBAAqB,CAAC,IAAI,CAACF,KAAK,CAACC,KAAK,CAAC,CACvD,KAAK,OAAO,CACZ,QACE,OAAOH,aAAM,CAACK,oBAAoB,CAAC,IAAI,CAACH,KAAK,CAACC,KAAK,CAAC,CACxD,CACF,CAAC,CAAAP,MAAA,CAEMU,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,oBACEpC,MAAA,CAAAyB,OAAA,CAAAY,aAAA,CAAChC,UAAA,CAAAiC,SAAS,IACRT,IAAI,EAAE,IAAI,CAACG,KAAK,CAACH,IAAK,EACtBU,SAAS,EAAE,IAAAC,WAAE,EAACV,aAAM,CAACW,eAAe,CAAC,CAAC,EAAE,IAAI,CAACb,gBAAgB,CAAC,IAAI,CAACI,KAAK,CAACH,IAAI,CAAC,CAAE,iBAEhF7B,MAAA,CAAAyB,OAAA,CAAAY,aAAA,UAAKE,SAAS,EAAET,aAAM,CAACY,UAAU,CAAC,CAAE,EAACC,GAAG,EAAE,IAAI,CAACrB,UAAW,IACvD,IAAI,CAACU,KAAK,CAACY,IAAI,IAAIrC,UACjB,CACI,CAAC,CAEhB,CAAC,CAAAmB,MAAA,CAEMmB,YAAY,GAAnB,SAAAA,aAAA,EAA8B,CAC5B,OAAO,IAAAC,sBAAU,EAAC,IAAI,CAACzB,OAAO,CAAC,CAAC0B,KAAK,CACvC,CAAC,CAAArB,MAAA,CAEMsB,aAAa,GAApB,SAAAA,cAAA,EAA+B,CAC7B,OAAO,IAAAF,sBAAU,EAAC,IAAI,CAACzB,OAAO,CAAC,CAAC4B,MAAM,CACxC,CAAC,QAAAzC,eAAA,GAlCkC0C,cAAK,CAACC,SAAS","ignoreList":[]}

package/cjs/components/TokenInput/TokenInput.d.ts

@@ -9,138 +9,90 @@ export declare enum TokenInputType {
 }
 export type TokenInputMenuAlign = 'left' | 'cursor';
 export interface TokenInputProps<T> extends CommonProps, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'> {
-    /**
-     * Выбранные токены, которые будут отображаться в поле ввода
-     */
+    /** Задает выбранные токены, которые будут отображаться в поле ввода. */
     selectedItems?: T[];
-    /**
-     * Вызывается при добавлении нового токена
-     */
+    /** Задает функцию, которая вызывается при добавлении нового токена. */
     onValueChange?: (items: T[]) => void;
+    /** Задает HTML-событие `onmouseenter`.
+     * @ignore */
     onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    /** Задает HTML-событие `onmouseleave`.
+     * @ignore */
     onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    /** Задает HTML-событие `onfocus`.
+     * @ignore */
     onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    /** Задает HTML-событие `onblur`.
+     * @ignore */
     onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    /** Устанавливает фокус на контроле после окончания загрузки страницы. */
     autoFocus?: boolean;
-    /** Размер */
+    /** Задает размер контрола. */
     size?: TokenSize;
-    /**
-     * Тип инпута. Возможные значения:
-     *
-     *   `TokenInputType.WithReference` (можно выбирать токены только из предложенных, нельзя добавить новые)
-     *
-     *   `TokenInputType.WithoutReference` (можно добавлять токены, но нельзя выбирать)
-     *
-     *   `TokenInputType.Combined` (можно и выбирать, и добавлять)
-     */
+    /** Задает тип инпута.
+     * Возможные значения:
+     *   `TokenInputType.WithReference` (можно выбирать токены только из предложенных, нельзя добавить новые).
+     *   `TokenInputType.WithoutReference` (можно добавлять токены, но нельзя выбирать).
+     *   `TokenInputType.Combined` (можно и выбирать, и добавлять). */
     type?: TokenInputType;
-    /**
-     * Ширина выпадающего меню может быть указана как 'auto'
-     * а также в пикселях, процентах (от ширины инпута)
-     * или других конкретных единицах
-     *
-     * Если menuAlign = 'cursor', то ширина выпадающего меню всегда будет равна 'auto'
-     * (по ширине текста)
-     */
+    /** Задает ширину выпадающего меню. Может быть 'auto', в пикселях, процентах (от ширины инпута) и других конкретных единицах.
+     * Если menuAlign = 'cursor', то ширина выпадающего меню всегда будет равна 'auto' (по ширине текста). */
     menuWidth?: React.CSSProperties['width'];
-    /**
-     * Определяет выравнивание меню. Принимает значения `left` и `cursor`
-     */
+    /** Задает выравнивание выпадающего меню. */
     menuAlign?: TokenInputMenuAlign;
-    /**
-     * Функция поиска элементов, должна возвращать Promise с массивом элементов.
-     * По умолчанию ожидаются строки.
-     *
-     * Элементы могут быть любого типа. В этом случае необходимо определить
-     * свойства `renderItem`, `valueToString`
-     */
+    /** Задает функцию поиска элементов, должна возвращать Promise с массивом элементов. По умолчанию ожидаются строки.
+     * Элементы могут быть любого типа. В таком случае необходимо определить свойства `renderItem`, `valueToString`. */
     getItems?: (query: string) => Promise<T[]>;
-    /**
-     * Скрывает меню при пустом вводе
-     */
+    /** Скрывает меню при пустом вводе. */
     hideMenuIfEmptyInputValue?: boolean;
-    /**
-     * Позволяет настроить отображение элемента списка
-     */
+    /** Задает функцию, которая отображает элемент списка. */
     renderItem?: (item: T, state: MenuItemState) => React.ReactNode | null;
-    /**
-     * Позволяет настроить отображение выбранного значения
-     */
+    /** Задает функцию, которая отображает выбранное значение. */
     renderValue?: (item: T) => React.ReactNode;
-    /**
-     * Функция должна возвращать строковое представление токена
-     * @default item => item
-     */
+    /** Задает функцию, которая возвращает строковое представление токена.
+     * @default item => item */
     valueToString?: (item: T) => string;
-    /**
-     * Функция отображающая сообщение об общем количестве элементов.
-     * `found` учитывает только компонент `MenuItem`. Им "оборачиваются" элементы, возвращаемые `getItems()`.
-     */
+    /** Задает функцию, которая отображает сообщение об общем количестве элементов.
+     * `found` учитывает только компонент `MenuItem`. Им "оборачиваются" элементы, возвращаемые `getItems()`. */
     renderTotalCount?: (found: number, total: number) => React.ReactNode;
-    /**
-     * Общее количество элементов.
-     * Необходим для работы `renderTotalCount`
-     */
+    /** Определяет общее количество элементов. Необходим для работы `renderTotalCount`. */
     totalCount?: number;
-    /**
-     * Отображает заданное содержимое, если ничего не найдено. Работает если не рендерится `AddButton`
-     */
+    /** Задает функцию, которая отображает заданное содержимое при пустом результате поиска. Не работает, если рендерится `AddButton`. */
     renderNotFound?: () => React.ReactNode;
-    /**
-     * Преобразует значение в элемент списка
-     */
+    /** Преобразует значение в элемент списка. */
     valueToItem?: (item: string) => T;
-    /**
-     * Определяет уникальный ключ по элементу
-     */
+    /** Определяет уникальный ключ по элементу. */
     toKey?: (item: T) => string | number | undefined;
+    /** Задает текст, который отображается если не введено никакое значение. */
     placeholder?: string;
-    /**
-     * Символы, которые разделяют введённый текст на токены
-     */
+    /** Задает символы, которые разделяют введённый текст на токены. */
     delimiters?: string[];
-    /**
-     * Состояние валидации при ошибке.
-     */
+    /** Переводит контрол в состояние валидации "ошибка". */
     error?: boolean;
-    /**
-     * Состояние валидации при предупреждении.
-     */
+    /** Переводит контрол в состояние валидации "предупреждение". */
     warning?: boolean;
+    /** Делает компонент недоступным. */
     disabled?: boolean;
+    /** Задает ширину токен-инпута. */
     width?: string | number;
+    /** Задает максимальную высоту выпадающего меню. */
     maxMenuHeight?: number | string;
-    /**
-     * Позволяет настроить отображение токена, предоставляя возможность кастомизации внешнего вида и поведения токена
-     */
+    /** Задает функцию, которая отображает токен и предоставляет возможность кастомизации внешнего вида и поведения токена. */
     renderToken?: (item: T, props: Partial<TokenProps>) => ReactNode;
-    /**
-     * Вызывается при изменении текста в поле ввода,
-     */
+    /** Задает функцию, вызывающуюся при изменении текста в поле ввода. */
     onInputValueChange?: (value: string) => void;
-    /**
-     * Функция отрисовки кнопки добавления в выпадающем списке.
-     * Работает только когда тип инпута = `TokenInputType.Combined`
-     */
+    /** Задает функцию отрисовки кнопки добавления в выпадающем списке */
     renderAddButton?: (query?: string, onAddItem?: () => void) => ReactNode;
-    /**
-     * Функция для обработки ситуации, когда была введена
-     * строка в инпут и был потерян фокус с компонента
-     *
+    /** Задает функцию для обработки ввода строки в инпут и последующую потерю фокуса компонентом.
      * Функция срабатывает с аргументом инпута строки
      *
-     * Если при потере фокуса в выпадающем списке будет только один
-     * элемент и  результат `valueToString` с этим элементом будет
-     * совпадать со значение в текстовом поле, то
-     * сработает `onValueChange` со значением данного элемента
+     * Если при потере фокуса в выпадающем списке будет только один элемент и  результат `valueToString` с этим элементом будет
+     * совпадать со значение в текстовом поле, то сработает `onValueChange` со значением данного элемента
      *
-     * Сама функция также может вернуть значение,
-     * неравное `undefined`, с которым будет вызван `onValueChange`.
-     * Если возвращаемое значение будет равно `null`,
-     * то сработает очистка текущего значения инпута,
-     * а в режиме редактирования токен будет удален
-     */
+     * Сама функция также может вернуть значение, неравное `undefined`, с которым будет вызван `onValueChange`.
+     * При возвращаемом значении `null` будет выполнена очистка текущего значения инпута, а в режиме редактирования токен будет удален. */
     onUnexpectedInput?: (value: string) => void | null | undefined | T;
+    /** Задает типы вводимых данных. */
     inputMode?: React.HTMLAttributes<HTMLTextAreaElement>['inputMode'];
 }
 export interface TokenInputState<T> {
@@ -175,6 +127,11 @@ export declare const TokenInputDataTids: {
     readonly label: "TokenInput__label";
 };
 type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'toKey' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign' | 'size'>>;
+/**
+ * Поле с токенами `TokenInput` — это поле ввода со списком подсказок.
+ *
+ * Поле с токенами используют для выбора нескольких значений из справочника и для добавления своих значений.
+ */
 export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputState<T>> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;

package/cjs/components/TokenInput/TokenInput.js

@@ -177,22 +177,6 @@ TokenInputType = exports.TokenInputType = /*#__PURE__*/function (TokenInputType)
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -268,9 +252,14 @@ item, _ref) {var
       size: size },
 
     item.toString()
-    ));};var
+    ));};
 
 
+/**
+ * Поле с токенами `TokenInput` — это поле ввода со списком подсказок.
+ *
+ * Поле с токенами используют для выбора нескольких значений из справочника и для добавления своих значений.
+ */var
 
 
 TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_TokenInput = /*#__PURE__*/function (_React$PureComponent) {function TokenInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
@@ -557,6 +546,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
 
 
+
 
 
     hasValueInItems = function (items, value) {
@@ -1220,7 +1210,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
    * @public
    */;_proto.blur = function blur() {var _this$input9;(_this$input9 = this.input) == null || _this$input9.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getLabelSizeClassName = function getLabelSizeClassName() {switch (this.getProps().size) {case 'large':return _TokenInput2.styles.labelLarge(this.theme);case 'medium':return _TokenInput2.styles.labelMedium(this.theme);case 'small':default:return _TokenInput2.styles.labelSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {switch (this.getProps().size) {case 'large':return _TokenInput2.styles.inputLarge(this.theme);case 'medium':return _TokenInput2.styles.inputMedium(this.theme);case 'small':default:return _TokenInput2.styles.inputSmall(this.theme);}};_proto.renderMain = function renderMain() {var _cx, _cx2, _cx3;if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {throw Error('Missed getItems for type ' + this.type);}var _this$props2 = this.props,maxMenuHeight = _this$props2.maxMenuHeight,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,renderNotFound = _this$props2.renderNotFound,hideMenuIfEmptyInputValue = _this$props2.hideMenuIfEmptyInputValue,inputMode = _this$props2.inputMode,renderTotalCount = _this$props2.renderTotalCount,totalCount = _this$props2.totalCount,ariaDescribedby = _this$props2['aria-describedby'],ariaLabel = _this$props2['aria-label'];var _this$getProps8 = this.getProps(),selectedItems = _this$getProps8.selectedItems,width = _this$getProps8.width,onMouseEnter = _this$getProps8.onMouseEnter,onMouseLeave = _this$getProps8.onMouseLeave,menuWidth = _this$getProps8.menuWidth,menuAlign = _this$getProps8.menuAlign,renderItem = _this$getProps8.renderItem;var _this$state3 = this.state,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;var showMenu = this.type !== TokenInputType.WithoutReference && this.isCursorVisible && activeTokens.length === 0 && (inputValue !== '' || !hideMenuIfEmptyInputValue);var theme = this.theme;var inputInlineStyles = { // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
       width: inputValueWidth, height: inputValueHeight, // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
-      caretColor: this.isCursorVisible ? undefined : 'transparent' };var labelClassName = (0, _Emotion.cx)(_TokenInput2.styles.label(theme), this.getLabelSizeClassName(), (_cx = {}, _cx[_TokenInput2.styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _cx[_TokenInput2.styles.labelDisabled(theme)] = !!disabled, _cx[_TokenInput2.styles.labelFocused(theme)] = !!inFocus, _cx[_TokenInput2.styles.error(theme)] = !!error, _cx[_TokenInput2.styles.warning(theme)] = !!warning, _cx));var inputClassName = (0, _Emotion.cx)(_TokenInput2.styles.input(theme), this.getInputSizeClassName(), (_cx2 = {}, _cx2[_TokenInput2.styles.inputDisabled(theme)] = !!disabled, _cx2));var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';var inputNode = /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.getProps().size, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_TokenInput2.styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)), hideCloseButton: Boolean(placeholder) }, /*#__PURE__*/_react.default.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.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TokenInputDataTids.root, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, /*#__PURE__*/_react.default.createElement("label", { ref: this.wrapperRef, style: { width: width }, className: labelClassName, onMouseDown: this.handleWrapperMouseDown, onMouseUp: this.handleWrapperMouseUp, htmlFor: this.textareaId, "aria-controls": this.rootId, "data-tid": TokenInputDataTids.label }, /*#__PURE__*/_react.default.createElement(_TextWidthHelper.TextWidthHelper, { ref: this.textHelperRef, text: inputValue, theme: this.theme, size: this.getProps().size }), this.renderTokensStart(), inputNode, showMenu && /*#__PURE__*/_react.default.createElement(_TokenInputMenu.TokenInputMenu, { popupMenuId: this.rootId, ref: this.tokensInputMenuRef, items: autocompleteItems, loading: loading, opened: showMenu, maxMenuHeight: maxMenuHeight, anchorElement: menuAlign === 'cursor' ? this.input : this.wrapper, renderNotFound: renderNotFound, renderItem: renderItem, onValueChange: this.selectItem, renderAddButton: this.renderAddButton, menuWidth: menuWidth, menuAlign: menuAlign, renderTotalCount: renderTotalCount, totalCount: totalCount }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.props.size }, /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput2.styles.reservedInput(theme) }, reservedInputValue)) : null)));} /**
+      caretColor: this.isCursorVisible ? undefined : 'transparent' };var labelClassName = (0, _Emotion.cx)(_TokenInput2.styles.label(theme), this.getLabelSizeClassName(), (_cx = {}, _cx[_TokenInput2.styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _cx[_TokenInput2.styles.labelDisabled(theme)] = !!disabled, _cx[_TokenInput2.styles.labelFocused(theme)] = !!inFocus, _cx[_TokenInput2.styles.error(theme)] = !!error, _cx[_TokenInput2.styles.warning(theme)] = !!warning, _cx));var inputClassName = (0, _Emotion.cx)(_TokenInput2.styles.input(theme), this.getInputSizeClassName(), (_cx2 = {}, _cx2[_TokenInput2.styles.inputDisabled(theme)] = !!disabled, _cx2));var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';var inputNode = /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.getProps().size, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_TokenInput2.styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)), hideCloseButton: Boolean(placeholder) }, /*#__PURE__*/_react.default.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.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TokenInputDataTids.root, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, /*#__PURE__*/_react.default.createElement("label", { ref: this.wrapperRef, style: { width: width }, className: labelClassName, onMouseDown: this.handleWrapperMouseDown, onMouseUp: this.handleWrapperMouseUp, htmlFor: this.textareaId, "aria-controls": this.rootId, "data-tid": TokenInputDataTids.label }, /*#__PURE__*/_react.default.createElement(_TextWidthHelper.TextWidthHelper, { ref: this.textHelperRef, text: inputValue, theme: this.theme, size: this.getProps().size }), this.renderTokensStart(), inputNode, showMenu && /*#__PURE__*/_react.default.createElement(_TokenInputMenu.TokenInputMenu, { popupMenuId: this.rootId, ref: this.tokensInputMenuRef, items: autocompleteItems, loading: loading, opened: showMenu, maxMenuHeight: maxMenuHeight, anchorElement: menuAlign === 'cursor' ? this.input : this.wrapper, renderNotFound: renderNotFound, renderItem: renderItem, onValueChange: this.selectItem, renderAddButton: this.renderAddButton, menuWidth: menuWidth, menuAlign: menuAlign, renderTotalCount: renderTotalCount, totalCount: totalCount, size: this.getProps().size }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.props.size }, /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput2.styles.reservedInput(theme) }, reservedInputValue)) : null)));} /**
    * Сбрасывает введенное пользователем значение
    * @public
    */;_proto.reset = function reset() {this.dispatch({ type: 'RESET' });};_proto.isCursorVisibleForState = function isCursorVisibleForState(state) {return state.inFocus && (state.inputValue !== '' || state.activeTokens.length === 0);};_proto.updateInputTextWidth = function updateInputTextWidth() {if (this.textHelper) {// в IE текст иногда не помещается в input