@skbkontur/react-ui 5.4.7-225d1.0 → 5.4.7-7ccf0.0

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","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 type { 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":[]}
+{"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","getStyles","memoizeGetStyles","_ref","css","token","t","_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 type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion';\nimport type { 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 getStyles = memoizeGetStyles(({ css }: Emotion) => ({\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.js

@@ -1,9 +1,9 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.TokenView = TokenView;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 
+var _renderEnvironment = require("../../lib/renderEnvironment");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _Emotion = require("../../lib/theming/Emotion");
 
 
 var _Token = require("./Token.styles");var _excluded = ["size", "children", "closeButton", "hideCloseButton", "className"];
@@ -19,28 +19,30 @@ 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 _useEmotion = (0, _renderEnvironment.useEmotion)(),cx = _useEmotion.cx;
+  var styles = (0, _renderEnvironment.useStyles)(_Token.getStyles);
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
   var getSizeClassName = function getSizeClassName(size) {
     switch (size) {
       case 'large':
-        return _Token.styles.tokenLarge(theme);
+        return styles.tokenLarge(theme);
       case 'medium':
-        return _Token.styles.tokenMedium(theme);
+        return styles.tokenMedium(theme);
       case 'small':
       default:
-        return _Token.styles.tokenSmall(theme);
+        return styles.tokenSmall(theme);
     }
   };
   var closeButtonNode = hideCloseButton ? null : /*#__PURE__*/
-  _react.default.createElement("span", { className: (0, _Emotion.cx)(_Token.styles.removeIcon(theme), _Token.globalClasses.removeIcon) }, closeButton);
+  _react.default.createElement("span", { className: cx(styles.removeIcon(theme), _Token.globalClasses.removeIcon) }, closeButton);
 
 
   return /*#__PURE__*/(
     _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
     _react.default.createElement("div", (0, _extends2.default)({},
     rest, {
-      className: (0, _Emotion.cx)(getSizeClassName(size), (_cx = {}, _cx[
-      _Token.styles.token(theme)] = true, _cx)
+      className: cx(getSizeClassName(size), (_cx = {}, _cx[
+      styles.token(theme)] = true, _cx)
       ) }),
 
     children,

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 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,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":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_renderEnvironment","_CommonWrapper","_ThemeContext","_Token","_excluded","TokenView","props","_cx","_props$size","size","children","closeButton","hideCloseButton","className","rest","_objectWithoutPropertiesLoose2","default","_useEmotion","useEmotion","cx","styles","useStyles","getStyles","theme","useContext","ThemeContext","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","createElement","removeIcon","globalClasses","CommonWrapper","_extends2","token"],"sources":["TokenView.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport type { TokenSize } from './Token';\nimport { globalClasses, getStyles } 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 { 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}>\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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAAC,kBAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;;;AAGA,IAAAI,MAAA,GAAAJ,OAAA,mBAA0D,IAAAK,SAAA;;;;;;;;;;;AAWnD,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,IAAAa,WAAA,GAAe,IAAAC,6BAAU,EAAC,CAAC,CAAnBC,EAAE,GAAAF,WAAA,CAAFE,EAAE;EACV,IAAMC,MAAM,GAAG,IAAAC,4BAAS,EAACC,gBAAS,CAAC;EACnC,IAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,0BAAY,CAAC;EACtC,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIjB,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOW,MAAM,CAACO,UAAU,CAACJ,KAAK,CAAC;MACjC,KAAK,QAAQ;QACX,OAAOH,MAAM,CAACQ,WAAW,CAACL,KAAK,CAAC;MAClC,KAAK,OAAO;MACZ;QACE,OAAOH,MAAM,CAACS,UAAU,CAACN,KAAK,CAAC;IACnC;EACF,CAAC;EACD,IAAMO,eAAe,GAAGlB,eAAe,GAAG,IAAI;EAC5Cf,MAAA,CAAAmB,OAAA,CAAAe,aAAA,WAAMlB,SAAS,EAAEM,EAAE,CAACC,MAAM,CAACY,UAAU,CAACT,KAAK,CAAC,EAAEU,oBAAa,CAACD,UAAU,CAAE,IAAErB,WAAkB,CAC7F;;;EAED;IACEd,MAAA,CAAAmB,OAAA,CAAAe,aAAA,CAAC9B,cAAA,CAAAiC,aAAa,EAAK5B,KAAK;IACtBT,MAAA,CAAAmB,OAAA,CAAAe,aAAA,YAAAI,SAAA,CAAAnB,OAAA;IACMF,IAAI;MACRD,SAAS,EAAEM,EAAE,CAACO,gBAAgB,CAACjB,IAAI,CAAC,GAAAF,GAAA,OAAAA,GAAA;MACjCa,MAAM,CAACgB,KAAK,CAACb,KAAK,CAAC,IAAG,IAAI,EAAAhB,GAAA;MAC5B,CAAE;;IAEFG,QAAQ;IACRoB;IACE;IACQ,CAAC;;AAEpB","ignoreList":[]}

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

@@ -15,6 +15,9 @@ export interface TextWidthHelperProps {
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
     private element;
+    private emotion;
+    private cx;
+    private styles;
     private getSizeClassName;
     render(): React.JSX.Element;
     getTextWidth(): number;

package/cjs/components/TokenInput/TextWidthHelper.js

@@ -1,11 +1,12 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TextWidthHelper = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
-var _Emotion = require("../../lib/theming/Emotion");
+
 
 var _getDOMRect = require("../../lib/dom/getDOMRect");
 var _TokenView = require("../Token/TokenView");
 
 var _Token = require("../Token/Token.styles");
+var _renderEnvironment = require("../../lib/renderEnvironment");var _class;
 
 // a thin character to preserve some space
 // for the caret visibillity in the input
@@ -25,7 +26,8 @@ var THIN_SPACE = "\u2009";
  * Херпер позволяет вычислить размеры блока с текстом
  * для последующего выставления размеров input
  */var
-TextWidthHelper = exports.TextWidthHelper = /*#__PURE__*/function (_React$Component) {function TextWidthHelper() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+TextWidthHelper = exports.TextWidthHelper = (0, _renderEnvironment.withRenderEnvironment)(_class = /*#__PURE__*/function (_React$Component) {function TextWidthHelper() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
     element = null;_this.
 
 
@@ -61,4 +63,9 @@ TextWidthHelper = exports.TextWidthHelper = /*#__PURE__*/function (_React$Compon
 
 
 
-    elementRef = function (node) {return _this.element = node;};return _this;}(0, _inheritsLoose2.default)(TextWidthHelper, _React$Component);var _proto = TextWidthHelper.prototype;_proto.getSizeClassName = function getSizeClassName(size) {switch (size) {case 'large':return _Token.styles.helperContainerLarge(this.props.theme);case 'medium':return _Token.styles.helperContainerMedium(this.props.theme);case 'small':default:return _Token.styles.helperContainerSmall(this.props.theme);}};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.props.size, className: (0, _Emotion.cx)(_Token.styles.helperContainer(), this.getSizeClassName(this.props.size)) }, /*#__PURE__*/_react.default.createElement("div", { className: _Token.styles.helperText(), ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return (0, _getDOMRect.getDOMRect)(this.element).width;};_proto.getTextHeight = function getTextHeight() {return (0, _getDOMRect.getDOMRect)(this.element).height;};return TextWidthHelper;}(_react.default.Component);
+
+
+
+
+
+    elementRef = function (node) {return _this.element = node;};return _this;}(0, _inheritsLoose2.default)(TextWidthHelper, _React$Component);var _proto = TextWidthHelper.prototype;_proto.getSizeClassName = function getSizeClassName(size) {switch (size) {case 'large':return this.styles.helperContainerLarge(this.props.theme);case 'medium':return this.styles.helperContainerMedium(this.props.theme);case 'small':default:return this.styles.helperContainerSmall(this.props.theme);}};_proto.render = function render() {this.styles = (0, _Token.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.props.size, className: this.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size)) }, /*#__PURE__*/_react.default.createElement("div", { className: this.styles.helperText(), ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return (0, _getDOMRect.getDOMRect)(this.element).width;};_proto.getTextHeight = function getTextHeight() {return (0, _getDOMRect.getDOMRect)(this.element).height;};return TextWidthHelper;}(_react.default.Component)) || _class;

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 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":"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":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_getDOMRect","_TokenView","_Token","_renderEnvironment","_class","THIN_SPACE","TextWidthHelper","exports","withRenderEnvironment","_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","getStyles","emotion","createElement","TokenView","className","cx","helperContainer","helperText","ref","text","getTextWidth","getDOMRect","width","getTextHeight","height","React","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport type { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport type { TokenSize } from '../Token';\nimport { getStyles } from '../Token/Token.styles';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\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() {\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) => (this.element = node);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,7 +4,6 @@ import type { TokenProps, TokenSize } from '../Token';
 import type { MenuItemState } from '../MenuItem';
 import type { CommonProps } from '../../internal/CommonWrapper';
 import type { TGetRootNode } from '../../lib/rootNode';
-import type { ReactUIFeatureFlags } from '../../lib/featureFlagsContext';
 export declare enum TokenInputType {
     WithReference = 0,
     WithoutReference = 1,
@@ -85,7 +84,7 @@ export interface TokenInputProps<T> extends CommonProps, Pick<AriaAttributes, 'a
     /** Задает максимальную высоту выпадающего меню. */
     maxMenuHeight?: number | string;
     /** Задает функцию, которая отображает токен и предоставляет возможность кастомизации внешнего вида и поведения токена. */
-    renderToken?: (item: T, props: Partial<TokenProps>) => ReactNode;
+    renderToken?: (item: T, props: Partial<TokenProps>, index: number) => ReactNode;
     /** Задает функцию, вызывающуюся при изменении текста в поле ввода. */
     onInputValueChange?: (value: string) => void;
     /** Задает функцию отрисовки кнопки добавления в выпадающем списке */
@@ -101,6 +100,10 @@ export interface TokenInputProps<T> extends CommonProps, Pick<AriaAttributes, 'a
     onUnexpectedInput?: (value: string) => void | null | undefined | T;
     /** Задает типы вводимых данных. */
     inputMode?: React.HTMLAttributes<HTMLTextAreaElement>['inputMode'];
+    /**
+     * Максимальная высота компонента. При её достижении появится скроллбар
+     */
+    maxHeight?: number;
 }
 export interface TokenInputState<T> {
     autocompleteItems?: T[];
@@ -150,13 +153,17 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private readonly _textareaId;
     private rootId;
     private readonly locale;
+    private globalObject;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     private size;
-    featureFlags: ReactUIFeatureFlags;
     private input;
     private tokensInputMenu;
     private textHelper;
     private wrapper;
+    private scrollContainerRef;
     getRootNode: TGetRootNode;
     private setRootNode;
     private memoizedTokens;

package/cjs/components/TokenInput/TokenInput.js

@@ -11,7 +11,9 @@
 
 var _react = _interopRequireDefault(require("react"));
 var _lodash = _interopRequireDefault(require("lodash.isequal"));
-var _globalObject = require("@skbkontur/global-object");
+
+var _warning = _interopRequireDefault(require("warning"));
+
 
 var _Popup = require("../../internal/Popup");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -40,17 +42,16 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _decorators = require("../../lib/locale/decorators");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
-var _Emotion = require("../../lib/theming/Emotion");
 
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _uidUtils = require("../../lib/uidUtils");
 var _TokenView = require("../Token/TokenView");
-
-var _featureFlagsContext = require("../../lib/featureFlagsContext");
 var _SizeDecorator = require("../../lib/size/SizeDecorator");
 
+var _renderEnvironment = require("../../lib/renderEnvironment");
 var _blink2 = require("../../lib/blink");
+var _ScrollContainer = require("../ScrollContainer");
 
 
 var _locale = require("./locale");
@@ -208,6 +209,11 @@ TokenInputType = exports.TokenInputType = /*#__PURE__*/function (TokenInputType)
 
 
 
+
+
+
+
+
 
 
 
@@ -259,8 +265,9 @@ var defaultToKey = function defaultToKey(item) {return item.toString();};
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 var identity = function identity(item) {return item;};
 var defaultRenderToken = function defaultRenderToken(
-item, _ref) {var
-    isActive = _ref.isActive,onClick = _ref.onClick,onDoubleClick = _ref.onDoubleClick,onRemove = _ref.onRemove,disabled = _ref.disabled,size = _ref.size;return /*#__PURE__*/(
+item, _ref,
+
+index) {var isActive = _ref.isActive,onClick = _ref.onClick,onDoubleClick = _ref.onDoubleClick,onRemove = _ref.onRemove,disabled = _ref.disabled,size = _ref.size;return /*#__PURE__*/(
 
     _react.default.createElement(_Token.Token, {
       key: item.toString(),
@@ -283,7 +290,8 @@ item, _ref) {var
 
 
 
-TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (0, _SizeDecorator.withSize)(_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.
+
+TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLocaleHelper), (0, _renderEnvironment.withRenderEnvironment)(_class = (0, _rootNode.rootNode)(_class = _dec(_class = (0, _SizeDecorator.withSize)(_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.
 
 
 
@@ -333,10 +341,14 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
 
 
+
+
+
     input = null;_this.
     tokensInputMenu = null;_this.
     textHelper = null;_this.
     wrapper = null;_this.
+    scrollContainerRef = /*#__PURE__*/_react.default.createRef();_this.
 
 
     memoizedTokens = new Map();_this.
@@ -571,6 +583,17 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -670,9 +693,10 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       if (isBlurToMenu || _this.state.preventBlur) {var _this$input;
         event.preventDefault();
         // первый focus нужен для предотвращения/уменьшения моргания в других браузерах
-        (_this$input = _this.input) == null || _this$input.focus();
+        (_this$input = _this.input) == null || _this$input.focus({ preventScroll: true });
         // в firefox не работает без второго focus
-        _globalObject.globalObject.requestAnimationFrame == null || _globalObject.globalObject.requestAnimationFrame(function () {var _this$input2;return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus();});
+        _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {var _this$input2;return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus({ preventScroll: true });});
+
         _this.dispatch({ type: 'SET_PREVENT_BLUR', payload: false });
       } else {
         _this.dispatch({ type: 'BLUR' });
@@ -739,9 +763,9 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
 
     isBlurToMenu = function (event) {
-      if (_this.menuRef && _globalObject.globalObject.document) {var _this$tokensInputMenu;
+      if (_this.menuRef && _this.globalObject.document) {var _this$tokensInputMenu;
         var menu = (0, _rootNode.getRootNode)((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
-        var relatedTarget = event.relatedTarget || _globalObject.globalObject.document.activeElement;
+        var relatedTarget = event.relatedTarget || _this.globalObject.document.activeElement;
 
         if (menu && menu.contains(relatedTarget)) {
           return true;
@@ -759,7 +783,18 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       }
     };_this.
 
-    handleWrapperMouseUp = function () {
+    handleWrapperMouseUp = function (e) {
+      // Имитируем поведение label, когда задан maxHeight.
+      if (
+      _this.props.maxHeight &&
+      e.target === _this.scrollContainerRef.current && (
+      _this.state.activeTokens.length !== 0 || !_this.state.inFocus))
+      {var _this$input3;
+        _this.dispatch({ type: 'BLUR' });
+        _this.dispatch({ type: 'SET_FOCUS_IN' });
+        _this.focusInput();
+        (_this$input3 = _this.input) == null || _this$input3.scrollIntoView({ behavior: 'auto', block: 'center' });
+      }
       _this.dispatch({ type: 'SET_PREVENT_BLUR', payload: false });
     };_this.
 
@@ -852,7 +887,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       }
     };_this.
 
-    handleInputKeyDown = function (e) {var _this$state$autocompl, _this$state$autocompl2, _this$input3, _this$input4;
+    handleInputKeyDown = function (e) {var _this$state$autocompl, _this$state$autocompl2, _this$input4, _this$input5;
       e.stopPropagation();
 
       if (
@@ -893,7 +928,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
           }
           break;
         case (0, _identifiers.isKeyEscape)(e):
-          (_this$input3 = _this.input) == null || _this$input3.blur();
+          (_this$input4 = _this.input) == null || _this$input4.blur();
           break;
         case (0, _identifiers.isKeyBackspace)(e):
           if (!_this.isEditingMode && isRightmostTokenNotDisabled) {
@@ -901,7 +936,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
           }
           break;
         case (0, _identifiers.isKeyArrowLeft)(e):
-          if (((_this$input4 = _this.input) == null ? void 0 : _this$input4.selectionStart) === 0) {
+          if (((_this$input5 = _this.input) == null ? void 0 : _this$input5.selectionStart) === 0) {
             var index = _this.getAvailableTokenIndex(_this.getProps().selectedItems.length);
             var itemNew = _this.getProps().selectedItems[index];
             if (itemNew) {
@@ -919,8 +954,8 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
 
 
-    focusInput = function () {
-      _globalObject.globalObject.requestAnimationFrame == null || _globalObject.globalObject.requestAnimationFrame(function () {var _this$input5;return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();});
+    focusInput = function (options) {
+      _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {var _this$input6;return (_this$input6 = _this.input) == null ? void 0 : _this$input6.focus(options);});
     };_this.
 
     selectInputText = function () {
@@ -940,9 +975,9 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
             if (!_this.isEditingMode && !_this.isTokenDisabled(indexOfActiveToken)) {
               var itemsNew = selectedItems.filter(function (item) {return !_this.hasValueInItems(_this.state.activeTokens, item);});
               onValueChange(itemsNew);
-              _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {var _this$input6;
+              _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {var _this$input7;
                 LayoutEvents.emit();
-                (_this$input6 = _this.input) == null || _this$input6.focus();
+                (_this$input7 = _this.input) == null || _this$input7.focus();
               });
             }
             break;
@@ -986,7 +1021,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
     handleWrapperArrowsWithoutShift = function (isLeftEdge, isRightEdge, newItemIndex) {
       if (isRightEdge) {
-        _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {var _this$input7;return (_this$input7 = _this.input) == null ? void 0 : _this$input7.focus();});
+        _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {var _this$input8;return (_this$input8 = _this.input) == null ? void 0 : _this$input8.focus();});
       } else if (!isLeftEdge) {
         _this.dispatch({
           type: 'SET_ACTIVE_TOKENS',
@@ -1031,7 +1066,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
       _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: filteredActiveTokens });
       if (filteredActiveTokens.length === 0) {
-        _this.focusInput();
+        _this.focusInput({ preventScroll: true });
       }
 
       _this.tryGetItems();
@@ -1047,7 +1082,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       } else {
         _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: [itemNew] });
       }
-      _this.focusInput();
+      _this.focusInput({ preventScroll: true });
     };_this.
 
     handleTokenEdit = function (itemNew) {
@@ -1102,10 +1137,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       var returnedValue = onUnexpectedInput == null ? void 0 : onUnexpectedInput(inputValue);
 
       if (returnedValue === undefined) {
-        if (
-        _this.featureFlags.tokenInputCreateTokenOnBlurInWithoutReferenceMode &&
-        _this.type === TokenInputType.WithoutReference)
-        {
+        if (_this.type === TokenInputType.WithoutReference) {
           _this.handleAddItem();
         }
 
@@ -1171,7 +1203,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       }
     };_this.
 
-    renderToken = function (item) {var _this$props$selectedI;
+    renderToken = function (item, index) {var _this$props$selectedI;
       var _this$props = _this.props,_this$props$renderTok = _this$props.renderToken,renderToken = _this$props$renderTok === void 0 ? defaultRenderToken : _this$props$renderTok,disabled = _this$props.disabled;
 
       var isActive = _this.state.activeTokens.includes(item);
@@ -1199,14 +1231,18 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
         }
       };
 
-      var renderedToken = renderToken(item, {
-        size: _this.size,
-        isActive: isActive,
-        onClick: handleTokenClick,
-        onDoubleClick: handleTokenDoubleClick,
-        onRemove: handleIconClick,
-        disabled: disabled
-      });
+      var renderedToken = renderToken(
+        item,
+        {
+          size: _this.size,
+          isActive: isActive,
+          onClick: handleTokenClick,
+          onDoubleClick: handleTokenDoubleClick,
+          onRemove: handleIconClick,
+          disabled: disabled
+        },
+        index
+      );
 
       _this.memoizedTokens.set((_this$props$selectedI = _this.props.selectedItems) == null ? void 0 : _this$props$selectedI.indexOf(item), renderedToken);
       return renderedToken;
@@ -1237,7 +1273,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       } else if (itemIndex < 0 || itemIndex > _this.getProps().selectedItems.length - 1) {
         return false;
       } else {
-        renderedToken = _this.renderToken(_this.getProps().selectedItems[itemIndex]);
+        renderedToken = _this.renderToken(_this.getProps().selectedItems[itemIndex], itemIndex);
 
 
       }
@@ -1259,18 +1295,20 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       }
 
       return availableIndex;
-    };return _this;}(0, _inheritsLoose2.default)(TokenInput, _React$PureComponent);var _proto = TokenInput.prototype;_proto.getDelimiters = function getDelimiters() {var _this$props$delimiter;var delimiters = (_this$props$delimiter = this.props.delimiters) != null ? _this$props$delimiter : [];if (delimiters.every(function (delimiter) {return delimiter !== TEMP_FAKE_FLAG;})) {return delimiters;}return delimiters.filter(function (delimiter) {return delimiter !== TEMP_FAKE_FLAG;});};_proto.getProps = function getProps() {var propsGetter = (0, _createPropsGetter.createPropsGetter)(TokenInput.defaultProps);var propsWithOldDelimiters = propsGetter.apply(this);return (0, _extends2.default)({}, propsWithOldDelimiters, { delimiters: this.getDelimiters() });};_proto.componentDidMount = function componentDidMount() {var _globalObject$documen;this.updateInputTextWidth();(_globalObject$documen = _globalObject.globalObject.document) == null || _globalObject$documen.addEventListener('copy', this.handleCopy);if (this.props.autoFocus) {this.focusInput();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {if (prevState.inputValue !== this.state.inputValue) {this.updateInputTextWidth();}if (prevState.activeTokens.length === 0 && this.state.activeTokens.length > 0) {this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });}if (prevProps.selectedItems.length !== this.getProps().selectedItems.length) {LayoutEvents.emit();this.memoizedTokens.clear();}if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {this.tryGetItems(this.isEditingMode ? '' : this.state.inputValue);}};_proto.componentWillUnmount = function componentWillUnmount() {var _globalObject$documen2;(_globalObject$documen2 = _globalObject.globalObject.document) == null || _globalObject$documen2.removeEventListener('copy', this.handleCopy);} /**
+    };return _this;}(0, _inheritsLoose2.default)(TokenInput, _React$PureComponent);var _proto = TokenInput.prototype;_proto.getDelimiters = function getDelimiters() {var _this$props$delimiter;var delimiters = (_this$props$delimiter = this.props.delimiters) != null ? _this$props$delimiter : [];if (delimiters.every(function (delimiter) {return delimiter !== TEMP_FAKE_FLAG;})) {return delimiters;}return delimiters.filter(function (delimiter) {return delimiter !== TEMP_FAKE_FLAG;});};_proto.getProps = function getProps() {var propsGetter = (0, _createPropsGetter.createPropsGetter)(TokenInput.defaultProps);var propsWithOldDelimiters = propsGetter.apply(this);return (0, _extends2.default)({}, propsWithOldDelimiters, { delimiters: this.getDelimiters() });};_proto.componentDidMount = function componentDidMount() {var _this$globalObject$do;this.updateInputTextWidth();(_this$globalObject$do = this.globalObject.document) == null || _this$globalObject$do.addEventListener('copy', this.handleCopy);if (this.props.autoFocus) {this.focusInput();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {if (prevState.inputValue !== this.state.inputValue) {this.updateInputTextWidth();}if (prevState.activeTokens.length === 0 && this.state.activeTokens.length > 0) {this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });}if (prevProps.selectedItems.length !== this.getProps().selectedItems.length) {LayoutEvents.emit();this.memoizedTokens.clear();}if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {this.tryGetItems(this.isEditingMode ? '' : this.state.inputValue);}};_proto.componentWillUnmount = function componentWillUnmount() {var _this$globalObject$do2;(_this$globalObject$do2 = this.globalObject.document) == null || _this$globalObject$do2.removeEventListener('copy', this.handleCopy);} /**
    * @public
-   */;_proto.focus = function focus() {var _this$input8;(_this$input8 = this.input) == null || _this$input8.focus();} /**
+   */;_proto.focus = function focus() {var _this$input9;(_this$input9 = this.input) == null || _this$input9.focus();} /**
    * @public
-   */;_proto.blur = function blur() {var _this$input9;(_this$input9 = this.input) == null || _this$input9.blur();} /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.
+   */;_proto.blur = function blur() {var _this$input10;(_this$input10 = this.input) == null || _this$input10.blur();} /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.
    * @public
-   */;_proto.blink = function blink() {(0, _blink2.blink)({ el: this.wrapper, blinkColor: this.theme.inputBlinkColor });};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.getLabelSizeClassName = function getLabelSizeClassName() {switch (this.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.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$getProps11 = this.getProps(),selectedItems = _this$getProps11.selectedItems,width = _this$getProps11.width,onMouseEnter = _this$getProps11.onMouseEnter,onMouseLeave = _this$getProps11.onMouseLeave,menuWidth = _this$getProps11.menuWidth,menuAlign = _this$getProps11.menuAlign,renderItem = _this$getProps11.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 && (this.isInputValueChanged || !hideMenuIfEmptyInputValue);var theme = this.theme;var inputInlineStyles = { // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
+   */;_proto.blink = function blink() {(0, _blink2.blink)({ el: this.wrapper, blinkColor: this.theme.inputBlinkColor });};_proto.render = function render() {var _this2 = this;this.styles = (0, _TokenInput2.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getLabelSizeClassName = function getLabelSizeClassName() {switch (this.size) {case 'large':return this.styles.labelLarge(this.theme);case 'medium':return this.styles.labelMedium(this.theme);case 'small':default:return this.styles.labelSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {switch (this.size) {case 'large':return this.styles.inputLarge(this.theme);case 'medium':return this.styles.inputMedium(this.theme);case 'small':default:return this.styles.inputSmall(this.theme);}};_proto.renderMain = function renderMain() {var _this$cx, _this$cx2, _this$cx3;if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {(0, _warning.default)(false, "getItems is required for \"Combined\" and \"WithReference\" modes.");}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'],maxHeight = _this$props2.maxHeight;var _this$getProps11 = this.getProps(),selectedItems = _this$getProps11.selectedItems,width = _this$getProps11.width,onMouseEnter = _this$getProps11.onMouseEnter,onMouseLeave = _this$getProps11.onMouseLeave,menuWidth = _this$getProps11.menuWidth,menuAlign = _this$getProps11.menuAlign,renderItem = _this$getProps11.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 && (this.isInputValueChanged || !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.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.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, 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 }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.size }, /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput2.styles.reservedInput(theme) }, reservedInputValue)) : null)));} /**
+      caretColor: this.isCursorVisible ? undefined : 'transparent' };var labelClassName = this.cx(this.styles.label(theme), this.getLabelSizeClassName(), (_this$cx = {}, _this$cx[this.styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _this$cx[this.styles.labelDisabled(theme)] = !!disabled, _this$cx[this.styles.labelFocused(theme)] = !!inFocus, _this$cx[this.styles.error(theme)] = !!error, _this$cx[this.styles.warning(theme)] = !!warning, _this$cx));var inputClassName = this.cx(this.styles.input(theme), this.getInputSizeClassName(), (_this$cx2 = {}, _this$cx2[this.styles.inputDisabled(theme)] = !!disabled, _this$cx2));var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';var inputNode = /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.size, className: this.cx((_this$cx3 = {}, _this$cx3[this.styles.inputPlaceholderWrapper()] = Boolean(placeholder), _this$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 }));var inner = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextWidthHelper.TextWidthHelper, { ref: this.textHelperRef, text: inputValue, theme: this.theme, size: this.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, 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 }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.size }, /*#__PURE__*/_react.default.createElement("span", { className: this.styles.reservedInput(theme) }, reservedInputValue)) : null);var container = maxHeight ? /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { scrollRef: this.scrollContainerRef, maxHeight: maxHeight, showScrollBar: "always" }, inner) : inner;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 // Для корректной работы скролла приходится ломать связь label с полем ввода
+        // Иначе любой клик внутри label вызывает фокус и автоскроллинг к полю ввода
+        , htmlFor: maxHeight ? 'fake-id' : this.textareaId, "aria-controls": this.rootId, "data-tid": TokenInputDataTids.label }, container)));} /**
    * Сбрасывает введенное пользователем значение
    * @public
    */;_proto.reset = function reset() {this.dispatch({ type: 'RESET' });};_proto.isCursorVisibleForState = function isCursorVisibleForState(state) {return state.inFocus && (this.isInputValueChanged || state.activeTokens.length === 0);};_proto.updateInputTextWidth = function updateInputTextWidth() {if (this.textHelper) {// в IE текст иногда не помещается в input
       // из-за округления, поэтому округляем явно
       var inputValueWidth = parseFloat(this.textHelper.getTextWidth().toFixed(2));var inputValueHeight = parseFloat(this.textHelper.getTextHeight().toFixed(2));this.dispatch({ type: 'SET_INPUT_VALUE_WIDTH', payload: inputValueWidth }, LayoutEvents.emit);this.dispatch({ type: 'SET_INPUT_VALUE_HEIGHT', payload: inputValueHeight }, LayoutEvents.emit);}};_proto.moveFocusToLastToken = function moveFocusToLastToken() {var items = this.getProps().selectedItems;if (this.state.inputValue === '' && items && items.length > 0) {this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: items.slice(-1) });}};return (0, _createClass2.default)(TokenInput, [{ key: "textareaId", get: function get() {var _this$props$id;return (_this$props$id = this.props.id) != null ? _this$props$id : this._textareaId;} }, { key: "showAddItemHint", get: function get() {var items = this.state.autocompleteItems;var value = this.getProps().valueToItem(this.state.inputValue);if (items && this.hasValueInItems(items, value)) {return false;}var selectedItems = this.getProps().selectedItems;if (selectedItems && this.hasValueInItems(selectedItems, value)) {return false;}if (this.type === TokenInputType.Combined && this.isInputValueChanged) {return true;}} }, { key: "type", get: function get() {return this.props.type ? this.props.type : TokenInputType.WithReference;} }, { key: "menuRef", get: function get() {return this.tokensInputMenu && this.tokensInputMenu.getMenuRef();} }, { key: "isCursorVisible", get: function get() {return this.isCursorVisibleForState(this.state);} }, { key: "isEditingMode", get: function get() {return this.state.editingTokenIndex > -1;} }, { key: "isInputChanged", get: function get() {if (this.isEditingMode) {return this.isTokenValueChanged;}return this.isInputValueChanged;} }, { key: "isInputValueChanged", get: function get() {var inputValue = this.state.inputValue;return inputValue !== '';} }, { key: "isTokenValueChanged", get: function get() {var _this$state4 = this.state,inputValue = _this$state4.inputValue,editingTokenIndex = _this$state4.editingTokenIndex;var _this$getProps12 = this.getProps(),valueToString = _this$getProps12.valueToString,selectedItems = _this$getProps12.selectedItems;if (this.isEditingMode) {return valueToString(selectedItems[editingTokenIndex]) !== inputValue;}return false;} }]);}(_react.default.PureComponent), _TokenInput.__KONTUR_REACT_UI__ = 'TokenInput', _TokenInput.displayName = 'TokenInput', _TokenInput.defaultProps = { selectedItems: [], // TEMP_FAKE_FLAG помогает узнать, остались ли разделители дефолтными или пользователь передал их равными дефолтным.
-  delimiters: [',', TEMP_FAKE_FLAG], renderItem: identity, renderValue: identity, valueToString: identity, valueToItem: function valueToItem(item) {return item;}, toKey: defaultToKey, itemToId: identity, onValueChange: function onValueChange() {return void 0;}, width: 250, onBlur: _utils.emptyHandler, onFocus: _utils.emptyHandler, onMouseEnter: _utils.emptyHandler, onMouseLeave: _utils.emptyHandler, menuWidth: 'auto', menuAlign: 'cursor' }, _TokenInput)) || _class) || _class) || _class);
+  delimiters: [',', TEMP_FAKE_FLAG], renderItem: identity, renderValue: identity, valueToString: identity, valueToItem: function valueToItem(item) {return item;}, toKey: defaultToKey, itemToId: identity, onValueChange: function onValueChange() {return void 0;}, width: 250, onBlur: _utils.emptyHandler, onFocus: _utils.emptyHandler, onMouseEnter: _utils.emptyHandler, onMouseLeave: _utils.emptyHandler, menuWidth: 'auto', menuAlign: 'cursor' }, _TokenInput)) || _class) || _class) || _class) || _class);