@skbkontur/react-ui 0.0.0-ecefada396 → 0.0.0-ee57da3e1e

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

@@ -1,6 +1,6 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.colorStyles = exports.styles = exports.globalClasses = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = exports.colorStyles = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
-var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
 var globalClasses = (0, _Emotion.prefix)('token')({
   removeIcon: 'remove-icon' });exports.globalClasses = globalClasses;
@@ -24,16 +24,74 @@ var styles = (0, _Emotion.memoizeStyle)({
 
 
 
+  },
+
+  tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n      background-clip: border-box;\n    "])),
+    t.tokenDefaultIdleColor,
+    t.tokenDefaultIdleBg,
+    t.tokenBorderWidth, t.tokenDefaultIdleBorderColor);
+
+
+  },
+
+  tokenDefaultIdleHovering2022: function tokenDefaultIdleHovering2022(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])),
+
+    t.tokenDefaultIdleColorHover,
+    t.tokenDefaultIdleBgHover,
+    t.tokenBorderWidth, t.tokenDefaultIdleBorderColorHover);
+
+
+  },
+
+  tokenDefaultActive2022: function tokenDefaultActive2022(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])),
+    t.tokenDefaultActiveColor,
+    t.tokenDefaultActiveBg,
+    t.tokenBorderWidth, t.tokenDefaultActiveBorderColor);
+
+  },
+
+  tokenError2022: function tokenError2022(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenBorderWidth, t.tokenBorderColorError,
+    t.tokenOutlineWidth, t.tokenBorderColorError);
+
+  },
+
+  tokenWarning2022: function tokenWarning2022(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenBorderWidth, t.tokenBorderColorWarning,
+    t.tokenOutlineWidth, t.tokenBorderColorWarning);
+
+  },
+
+  tokenDisabled2022: function tokenDisabled2022(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
+    t.tokenPaddingYDisabled, t.tokenPaddingXDisabled,
+    t.tokenMarginYDisabled, t.tokenMarginXDisabled,
+
+
+    t.tokenTextColorDisabled,
+
+    t.tokenBorderColorDisabled,
+
+    globalClasses.removeIcon);
+
+
+
   },
 
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
     t.tokenPaddingYDisabled, t.tokenPaddingXDisabled,
     t.tokenMarginYDisabled, t.tokenMarginXDisabled,
 
 
     t.tokenTextColorDisabled,
 
+
     globalClasses.removeIcon);
 
 
@@ -41,14 +99,14 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   text: function text(t) {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])),
 
     t.tokenLegacyTextShift);
 
   },
 
   removeIcon: function removeIcon(t) {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    "])),
     t.tokenRemoveIconSize,
     t.tokenRemoveIconSize,
 
@@ -106,19 +164,26 @@ reduce(
 function (colors, _ref) {var _extends2;var name = _ref.name,color = _ref.color;return (0, _extends3.default)({},
   colors, (_extends2 = {}, _extends2[
   name] = function (t, v) {
-    var warning = (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
-    t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
+    var getVStyle = function getVStyle() {
+      if (v === 'error') {
+        return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
+        t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+
+      } else if (v === 'warning') {
+        return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
+        t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
+
+      }
 
-    var error = (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
-    t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+      return '';
+    };
 
-    var vStyle = v === 'error' ? error : v === 'warning' ? warning : '';
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        .", ":hover {\n          color: ", ";\n        }\n      "])),
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        .", ":hover {\n          color: ", ";\n        }\n      "])),
     color(t),
     ColorFunctions.contrast(color(t)),
     t.tokenBorderWidth, ColorFunctions.darken(color(t), '5%'), color(t),
 
-    vStyle,
+    getVStyle(),
 
     globalClasses.removeIcon,
     ColorFunctions.contrast(color(t)));
@@ -128,18 +193,18 @@ function (colors, _ref) {var _extends2;var name = _ref.name,color = _ref.color;r
 
 {
   defaultDisabled: function defaultDisabled(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])),
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])),
     t.tokenDisabledBg,
     t.tokenShadowDisabled);
 
   },
   defaultDisabledWarning: function defaultDisabledWarning(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
     t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
 
   },
   defaultDisabledError: function defaultDisabledError(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
     t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
 
   } });exports.colorStyles = colorStyles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.styles.ts"],"names":["globalClasses","removeIcon","styles","token","t","css","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","warning","tokenOutlineWidth","tokenBorderColorWarning","error","tokenBorderColorError","vStyle","ColorFunctions","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\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      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n      line-height: ${t.tokenLineHeight};\n      font-size: ${t.tokenFontSize};\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\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\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n});\n\ninterface TokenColors {\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultDisabled: (t: Theme) => string;\n  defaultDisabledWarning: (t: Theme) => string;\n  defaultDisabledError: (t: Theme) => string;\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\n}\n\nexport const colorStyles = [\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n  (colors: TokenColors, { name, color }) => ({\n    ...colors,\n    [name](t: Theme, v: 'error' | 'warning') {\n      const warning = css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n      `;\n      const error = css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n      `;\n      const vStyle = v === 'error' ? error : v === 'warning' ? warning : '';\n      return css`\n        background-color: ${color(t)};\n        color: ${ColorFunctions.contrast(color(t))};\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n        ${vStyle}\n\n        .${globalClasses.removeIcon}:hover {\n          color: ${ColorFunctions.contrast(color(t))};\n        }\n      `;\n    },\n  }),\n  {\n    defaultDisabled(t: Theme) {\n      return css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n    },\n    defaultDisabledWarning(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"]}
+{"version":3,"sources":["Token.styles.ts"],"names":["globalClasses","removeIcon","styles","token","t","css","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","tokenDefaultIdle2022","tokenDefaultIdleColor","tokenDefaultIdleBg","tokenBorderWidth","tokenDefaultIdleBorderColor","tokenDefaultIdleHovering2022","tokenDefaultIdleColorHover","tokenDefaultIdleBgHover","tokenDefaultIdleBorderColorHover","tokenDefaultActive2022","tokenDefaultActiveColor","tokenDefaultActiveBg","tokenDefaultActiveBorderColor","tokenError2022","tokenBorderColorError","tokenOutlineWidth","tokenWarning2022","tokenBorderColorWarning","tokenDisabled2022","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","tokenBorderColorDisabled","disabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","ColorFunctions","contrast","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\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      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n      line-height: ${t.tokenLineHeight};\n      font-size: ${t.tokenFontSize};\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  tokenDefaultIdle2022(t: Theme) {\n    return css`\n      color: ${t.tokenDefaultIdleColor};\n      background: ${t.tokenDefaultIdleBg};\n      border: solid ${t.tokenBorderWidth} ${t.tokenDefaultIdleBorderColor};\n      background-clip: border-box;\n    `;\n  },\n\n  tokenDefaultIdleHovering2022(t: Theme) {\n    return css`\n      &:hover {\n        color: ${t.tokenDefaultIdleColorHover};\n        background: ${t.tokenDefaultIdleBgHover};\n        border: solid ${t.tokenBorderWidth} ${t.tokenDefaultIdleBorderColorHover};\n      }\n    `;\n  },\n\n  tokenDefaultActive2022(t: Theme) {\n    return css`\n      color: ${t.tokenDefaultActiveColor};\n      background: ${t.tokenDefaultActiveBg};\n      border: solid ${t.tokenBorderWidth} ${t.tokenDefaultActiveBorderColor};\n    `;\n  },\n\n  tokenError2022(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  tokenWarning2022(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  tokenDisabled2022(t: Theme) {\n    return css`\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\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  disabled(t: Theme) {\n    return css`\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\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\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n});\n\ninterface TokenColors {\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultDisabled: (t: Theme) => string;\n  defaultDisabledWarning: (t: Theme) => string;\n  defaultDisabledError: (t: Theme) => string;\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\n}\n\nexport const colorStyles = [\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n  (colors: TokenColors, { name, color }) => ({\n    ...colors,\n    [name](t: Theme, v: 'error' | 'warning') {\n      const getVStyle = () => {\n        if (v === 'error') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n          `;\n        } else if (v === 'warning') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n          `;\n        }\n\n        return '';\n      };\n\n      return css`\n        background-color: ${color(t)};\n        color: ${ColorFunctions.contrast(color(t))};\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n        ${getVStyle()}\n\n        .${globalClasses.removeIcon}:hover {\n          color: ${ColorFunctions.contrast(color(t))};\n        }\n      `;\n    },\n  }),\n  {\n    defaultDisabled(t: Theme) {\n      return css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n    },\n    defaultDisabledWarning(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"]}

package/cjs/components/TokenInput/TextWidthHelper.js

@@ -1,6 +1,7 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TextWidthHelper = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 
+var _getDOMRect = require("../../lib/dom/getDOMRect");
 
 var _TokenInput = require("./TokenInput.styles");
 
@@ -38,4 +39,4 @@ TextWidthHelper = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
 
 
 
-    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", { className: _TokenInput.styles.helperContainer(this.props.theme) }, /*#__PURE__*/_react.default.createElement("div", { className: this.props.classHelp, ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return this.element ? this.element.getBoundingClientRect().width : 0;};_proto.getTextHeight = function getTextHeight() {return this.element.getBoundingClientRect().height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;
+    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", { className: _TokenInput.styles.helperContainer(this.props.theme) }, /*#__PURE__*/_react.default.createElement("div", { className: this.props.classHelp, 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);exports.TextWidthHelper = TextWidthHelper;

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

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","styles","helperContainer","props","theme","classHelp","text","getTextWidth","getBoundingClientRect","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;;;AAIA;;AAEA;AACA;AACA,IAAMA,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;AAoBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAlBdC,M,GAAP,kBAAgB,CACd,oBACE,sCAAK,SAAS,EAAEC,mBAAOC,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,sCAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKP,UAAhD,IACG,KAAKK,KAAL,CAAWG,IAAX,IAAmBX,UADtB,CADF,CADF,CAOD,C,QAEMY,Y,GAAP,wBAA8B,CAC5B,OAAO,KAAKV,OAAL,GAAe,KAAKA,OAAL,CAAaW,qBAAb,GAAqCC,KAApD,GAA4D,CAAnE,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,KAAKb,OAAL,CAAcW,qBAAd,GAAsCG,MAA7C,CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { styles } from './TokenInput.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  classHelp: string;\n  theme: Theme;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={styles.helperContainer(this.props.theme)}>\n        <div className={this.props.classHelp} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\n    );\n  }\n\n  public getTextWidth(): number {\n    return this.element ? this.element.getBoundingClientRect().width : 0;\n  }\n\n  public getTextHeight(): number {\n    return this.element!.getBoundingClientRect().height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}
+{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","styles","helperContainer","props","theme","classHelp","text","getTextWidth","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;;AAGA;;AAEA;;AAEA;AACA;AACA,IAAMA,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;AAoBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAlBdC,M,GAAP,kBAAgB,CACd,oBACE,sCAAK,SAAS,EAAEC,mBAAOC,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,sCAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKP,UAAhD,IACG,KAAKK,KAAL,CAAWG,IAAX,IAAmBX,UADtB,CADF,CADF,CAOD,C,QAEMY,Y,GAAP,wBAA8B,CAC5B,OAAO,4BAAW,KAAKV,OAAhB,EAAyBW,KAAhC,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,4BAAW,KAAKZ,OAAhB,EAAyBa,MAAhC,CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './TokenInput.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  classHelp: string;\n  theme: Theme;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={styles.helperContainer(this.props.theme)}>\n        <div className={this.props.classHelp} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\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"]}

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

@@ -1,4 +1,4 @@
-import React, { FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
+import React, { AriaAttributes, FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
 import { TokenProps } from '../Token';
 import { MenuItemState } from '../MenuItem';
 import { CommonProps } from '../../internal/CommonWrapper';
@@ -9,13 +9,28 @@ export declare enum TokenInputType {
 }
 export declare type TokenInputMenuAlign = 'left' | 'cursor';
 export interface TokenInputProps<T> extends CommonProps {
-    selectedItems: T[];
-    onValueChange: (items: T[]) => void;
-    onMouseEnter: MouseEventHandler<HTMLDivElement>;
-    onMouseLeave: MouseEventHandler<HTMLDivElement>;
-    onFocus: FocusEventHandler<HTMLTextAreaElement>;
-    onBlur: FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Выбранные токены, которые будут отображаться в поле ввода
+     */
+    selectedItems?: T[];
+    /**
+     * Вызывается при добавлении нового токена
+     */
+    onValueChange?: (items: T[]) => void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
     autoFocus?: boolean;
+    /**
+     * Тип инпута. Возможные значения:
+     *
+     *   `TokenInputType.WithReference` (можно выбирать токены только из предложенных, нельзя добавить новые)
+     *
+     *   `TokenInputType.WithoutReference` (можно добавлять токены, но нельзя выбирать)
+     *
+     *   `TokenInputType.Combined` (можно и выбирать, и добавлять)
+     */
     type?: TokenInputType;
     /**
      * Ширина выпадающего меню может быть указана как 'auto'
@@ -25,8 +40,11 @@ export interface TokenInputProps<T> extends CommonProps {
      * Если menuAlign = 'cursor', то ширина выпадающего меню всегда будет равна 'auto'
      * (по ширине текста)
      */
-    menuWidth: React.CSSProperties['width'];
-    menuAlign: TokenInputMenuAlign;
+    menuWidth?: React.CSSProperties['width'];
+    /**
+     * Определяет выравнивание меню. Принимает значения `left` и `cursor`
+     */
+    menuAlign?: TokenInputMenuAlign;
     /**
      * Функция поиска элементов, должна возвращать Promise с массивом элементов.
      * По умолчанию ожидаются строки.
@@ -35,39 +53,78 @@ export interface TokenInputProps<T> extends CommonProps {
      * свойства `renderItem`, `valueToString`
      */
     getItems?: (query: string) => Promise<T[]>;
+    /**
+     * Скрывает меню при пустом вводе
+     */
     hideMenuIfEmptyInputValue?: boolean;
-    renderItem: (item: T, state: MenuItemState) => React.ReactNode | null;
-    renderValue: (item: T) => React.ReactNode;
+    /**
+     * Позволяет настроить отображение элемента списка
+     */
+    renderItem?: (item: T, state: MenuItemState) => React.ReactNode | null;
+    /**
+     * Позволяет настроить отображение выбранного значения
+     */
+    renderValue?: (item: T) => React.ReactNode;
     /**
      * Функция должна возвращать строковое представление токена
      * @default item => item
      */
-    valueToString: (item: T) => string;
+    valueToString?: (item: T) => string;
+    /**
+     * Функция отображающая сообщение об общем количестве элементов.
+     * `found` учитывает только компонент `MenuItem`. Им "оборачиваются" элементы, возвращаемые `getItems()`.
+     */
+    renderTotalCount?: (found: number, total: number) => React.ReactNode;
+    /**
+     * Общее количество элементов.
+     * Необходим для работы `renderTotalCount`
+     */
+    totalCount?: number;
+    /**
+     * Отображает заданное содержимое, если ничего не найдено. Работает если не рендерится `AddButton`
+     */
     renderNotFound?: () => React.ReactNode;
-    valueToItem: (item: string) => T;
-    toKey: (item: T) => string | number | undefined;
+    /**
+     * Преобразует значение в элемент списка
+     */
+    valueToItem?: (item: string) => T;
+    /**
+     * Определяет уникальный ключ по элементу
+     */
+    toKey?: (item: T) => string | number | undefined;
     placeholder?: string;
-    delimiters: string[];
     /**
-     * Cостояние валидации при ошибке.
+     * Символы, которые разделяют введённый текст на токены
+     */
+    delimiters?: string[];
+    /**
+     * Состояние валидации при ошибке.
      */
     error?: boolean;
     /**
-     * Cостояние валидации при предупреждении.
+     * Состояние валидации при предупреждении.
      */
     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;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
     /**
      * Функция для обработки ситуации, когда была введена
      * строка в инпут и был потерян фокус с компонента
@@ -114,18 +171,27 @@ export declare const DefaultState: {
     inputValueWidth: number;
     inputValueHeight: number;
 };
+export declare const TokenInputDataTids: {
+    readonly root: "TokenInput__root";
+    readonly tokenInputMenu: "TokenInputMenu__root";
+};
+declare type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'toKey' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
 export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputState<T>> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: Partial<TokenInputProps<any>>;
+    static defaultProps: DefaultProps<any>;
+    private getProps;
     state: TokenInputState<T>;
+    private readonly textareaId;
     private readonly locale;
     private theme;
     private input;
     private tokensInputMenu;
     private textHelper;
     private wrapper;
+    private setRootNode;
+    private memoizedTokens;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: TokenInputProps<T>, prevState: TokenInputState<T>): void;
+    componentDidUpdate(prevProps: TokenInputProps<T> & DefaultProps<T>, prevState: TokenInputState<T>): void;
     componentWillUnmount(): void;
     /**
      * @public
@@ -190,4 +256,7 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private renderTokensEnd;
     private renderToken;
     private renderAddButton;
+    private isTokenDisabled;
+    private getAvailableTokenIndex;
 }
+export {};