@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bd4276284d

package/components/Toggle/Toggle.styles/Toggle.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","isChrome","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","toggleLineHeight","toggleFontSize","toggleBgHover","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","checkboxFontSize","baselineCompensation","toggleBaseBg","toggleButtonOffsetY","buttonRight","rootLeft","caption","toggleTextColor","toggleCaptionGap","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('toggle')({\n  handle: 'handle',\n  container: 'container',\n  disabled: 'disabled',\n  containerDisabled: 'container-disabled',\n  containerLoading: 'container-loading',\n  background: 'background',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n    return css`\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ${t.toggleLineHeight};\n      font-size: ${t.toggleFontSize};\n\n      &:hover .${globalClasses.handle} {\n        background: ${t.toggleBgHover};\n      }\n      &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n        width: ${handleActiveWidth};\n      }\n      &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\n          translateX(-${t.toggleHandleActiveWidthIncrement});\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ${t.toggleWidth};\n        flex: 0 0 auto;\n      }\n    `;\n  },\n\n  handle(t: Theme) {\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n    return css`\n      background: ${t.toggleBg};\n      border-radius: ${t.toggleHandleBorderRadius};\n      bottom: ${t.toggleBorderWidth};\n      box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n      height: ${handleSize};\n      left: ${t.toggleBorderWidth};\n      position: absolute;\n      top: ${t.toggleBorderWidth};\n      transition: 0.2s ease-in;\n      width: ${handleSize};\n    `;\n  },\n\n  handleDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n    `;\n  },\n\n  input(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    return css`\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .${globalClasses.container} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n        background: ${t.toggleBgChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerDisabled} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n        background: ${t.toggleBgDisabledChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerLoading} {\n        background: ${t.toggleBorderColor};\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      }\n      &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgChecked};\n      }\n      &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgDisabledChecked};\n        border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n        box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n      }\n      &:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n      }\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      border-radius: ${t.toggleBorderRadius};\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    `;\n  },\n\n  containerDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleBgDisabled};\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n    `;\n  },\n\n  activeBackground() {\n    return css`\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    `;\n  },\n\n  disabledBackground(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n      width: 0;\n    `;\n  },\n\n  activeBackgroundLoading(t: Theme) {\n    return css`\n      background: ${t.toggleBgActive};\n    `;\n  },\n\n  isWarning(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n    `;\n  },\n\n  isError(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n    `;\n  },\n\n  button(t: Theme) {\n    const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n    const fontSize = parseInt(t.checkboxFontSize);\n    const baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n    return css`\n      position: absolute;\n      left: 0;\n      top: 0;\n      height: ${t.toggleHeight};\n      width: ${t.toggleWidth};\n      flex: 1 0 ${t.toggleWidth};\n\n      background: ${t.toggleBaseBg};\n      border-radius: ${t.toggleBorderRadius};\n      line-height: ${t.toggleHeight};\n\n      margin-top: calc(${t.toggleButtonOffsetY} + ${baselineCompensation}px);\n    `;\n  },\n\n  buttonRight() {\n    return css`\n      right: 0;\n      left: auto;\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n    `;\n  },\n\n  rootLeft() {\n    return css`\n      flex-direction: row-reverse;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 0 0 ${t.toggleCaptionGap};\n      line-height: ${t.toggleLineHeight};\n      font-size: ${t.toggleFontSize};\n    `;\n  },\n\n  disabledCaption(t: Theme) {\n    return css`\n      color: ${t.textColorDisabled};\n    `;\n  },\n\n  captionLeft(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 ${t.toggleCaptionGap} 0 0;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","isChrome","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","toggleLineHeight","toggleFontSize","toggleBgHover","toggleWidth","activeHandle","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","disableAnimation","toggleHandleBg","toggleHandleBorderRadius","toggleHandleBoxShadowOld","toggleHandleSize","toggleHandleLeft","toggleHandleTop","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleCheckedBg","toggleCheckedBgHover","input2022","toggleContainerBg","toggleContainerBoxShadow","toggleHandleBoxShadow","toggleContainerBgChecked","toggleContainerBoxShadowChecked","toggleHandleBgChecked","toggleHandleBoxShadowChecked","toggleContainerBgHover","toggleContainerBoxShadowHover","toggleHandleBgHover","toggleHandleBoxShadowHover","toggleContainerBgCheckedHover","toggleContainerBoxShadowCheckedHover","toggleHandleBgCheckedHover","toggleHandleBoxShadowCheckedHover","toggleContainerBgDisabled","toggleContainerBoxShadowDisabled","toggleHandleBgDisabled","toggleHandleBoxShadowDisabled","toggleContainerBgDisabledChecked","toggleContainerBoxShadowDisabledChecked","toggleHandleBgDisabledChecked","toggleHandleBoxShadowDisabledChecked","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","toggleOutlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","checkboxFontSize","baselineCompensation","toggleBaseBg","toggleButtonOffsetY","buttonRight","rootLeft","caption","toggleTextColor","toggleCaptionGap","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('toggle')({\n  handle: 'handle',\n  container: 'container',\n  disabled: 'disabled',\n  containerDisabled: 'container-disabled',\n  containerLoading: 'container-loading',\n  background: 'background',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ${t.toggleLineHeight};\n      font-size: ${t.toggleFontSize};\n\n      &:hover .${globalClasses.handle} {\n        background: ${t.toggleBgHover};\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ${t.toggleWidth};\n        flex: 0 0 auto;\n      }\n    `;\n  },\n\n  activeHandle(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n    return css`\n      &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n        width: ${handleActiveWidth};\n      }\n      &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders}) translateX(-4px);\n      }\n    `;\n  },\n\n  disableAnimation() {\n    return css`\n      &,\n      * {\n        transition: none !important;\n      }\n    `;\n  },\n\n  handle(t: Theme) {\n    return css`\n      background: ${t.toggleHandleBg};\n      border-radius: ${t.toggleHandleBorderRadius};\n      bottom: ${t.toggleBorderWidth};\n      box-shadow: ${t.toggleHandleBoxShadowOld};\n      height: ${t.toggleHandleSize};\n      left: ${t.toggleHandleLeft};\n      position: absolute;\n      top: ${t.toggleHandleTop};\n      transition: 0.2s ease-in;\n      width: ${t.toggleHandleSize};\n    `;\n  },\n\n  handleDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n    `;\n  },\n\n  input(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    return css`\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .${globalClasses.container} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n        background: ${t.toggleBgChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerDisabled} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n        background: ${t.toggleBgDisabledChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerLoading} {\n        background: ${t.toggleBorderColor};\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      }\n      &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgChecked};\n      }\n      &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgDisabledChecked};\n        border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n        box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n      }\n      &:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n        background: ${t.toggleCheckedBg};\n        &:hover {\n          background: ${t.toggleCheckedBgHover};\n        }\n      }\n    `;\n  },\n\n  input2022(t: Theme) {\n    return css`\n      &:enabled {\n        ~ .${globalClasses.container}, ~ .${globalClasses.handle} {\n          transition: 0.2s ease-in !important;\n        }\n        :not(:checked) {\n          ~ .${globalClasses.container} {\n            background: ${t.toggleContainerBg};\n            box-shadow: ${t.toggleContainerBoxShadow};\n          }\n          ~ .${globalClasses.handle} {\n            background: ${t.toggleHandleBg};\n            box-shadow: ${t.toggleHandleBoxShadow};\n          }\n        }\n        :checked {\n          ~ .${globalClasses.container} {\n            background: ${t.toggleContainerBgChecked};\n            box-shadow: ${t.toggleContainerBoxShadowChecked};\n          }\n          ~ .${globalClasses.handle} {\n            background: ${t.toggleHandleBgChecked};\n            box-shadow: ${t.toggleHandleBoxShadowChecked};\n          }\n        }\n      }\n      &:enabled:hover {\n        :not(:checked) {\n          ~ .${globalClasses.container} {\n            background: ${t.toggleContainerBgHover};\n            box-shadow: ${t.toggleContainerBoxShadowHover};\n          }\n          ~ .${globalClasses.handle} {\n            background: ${t.toggleHandleBgHover};\n            box-shadow: ${t.toggleHandleBoxShadowHover};\n          }\n        }\n        :checked {\n          ~ .${globalClasses.container} {\n            background: ${t.toggleContainerBgCheckedHover};\n            box-shadow: ${t.toggleContainerBoxShadowCheckedHover};\n          }\n          ~ .${globalClasses.handle} {\n            background: ${t.toggleHandleBgCheckedHover};\n            box-shadow: ${t.toggleHandleBoxShadowCheckedHover};\n          }\n        }\n      }\n      &:disabled {\n        :not(:checked) {\n          ~ .${globalClasses.container} {\n            background: ${t.toggleContainerBgDisabled};\n            box-shadow: ${t.toggleContainerBoxShadowDisabled};\n          }\n          ~ .${globalClasses.handle} {\n            background: ${t.toggleHandleBgDisabled} !important;\n            box-shadow: ${t.toggleHandleBoxShadowDisabled};\n          }\n        }\n        :checked {\n          ~ .${globalClasses.container} {\n            background: ${t.toggleContainerBgDisabledChecked};\n            box-shadow: ${t.toggleContainerBoxShadowDisabledChecked};\n          }\n          ~ .${globalClasses.handle} {\n            background: ${t.toggleHandleBgDisabledChecked} !important;\n            box-shadow: ${t.toggleHandleBoxShadowDisabledChecked};\n          }\n        }\n      }\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      border-radius: ${t.toggleBorderRadius};\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    `;\n  },\n\n  containerDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleBgDisabled};\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n    `;\n  },\n\n  activeBackground() {\n    return css`\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    `;\n  },\n\n  disabledBackground(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n      width: 0;\n    `;\n  },\n\n  activeBackgroundLoading(t: Theme) {\n    return css`\n      background: ${t.toggleBgActive};\n    `;\n  },\n\n  isWarning(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n    `;\n  },\n\n  isError(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n    `;\n  },\n\n  button(t: Theme) {\n    const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n    const fontSize = parseInt(t.checkboxFontSize);\n    const baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n    return css`\n      position: absolute;\n      left: 0;\n      top: 0;\n      height: ${t.toggleHeight};\n      width: ${t.toggleWidth};\n      flex: 1 0 ${t.toggleWidth};\n\n      background: ${t.toggleBaseBg};\n      border-radius: ${t.toggleBorderRadius};\n      line-height: ${t.toggleHeight};\n\n      margin-top: calc(${t.toggleButtonOffsetY} + ${baselineCompensation}px);\n    `;\n  },\n\n  buttonRight() {\n    return css`\n      right: 0;\n      left: auto;\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n    `;\n  },\n\n  rootLeft() {\n    return css`\n      flex-direction: row-reverse;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 0 0 ${t.toggleCaptionGap};\n      line-height: ${t.toggleLineHeight};\n      font-size: ${t.toggleFontSize};\n    `;\n  },\n\n  disabledCaption(t: Theme) {\n    return css`\n      color: ${t.textColorDisabled};\n    `;\n  },\n\n  captionLeft(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 ${t.toggleCaptionGap} 0 0;\n    `;\n  },\n});\n"]}

package/components/Toggle/Toggle.styles.d.ts

@@ -9,9 +9,12 @@ export declare const globalClasses: {
 };
 export declare const styles: {
     root(t: Theme): string;
+    activeHandle(t: Theme): string;
+    disableAnimation(): string;
     handle(t: Theme): string;
     handleDisabled(t: Theme): string;
     input(t: Theme): string;
+    input2022(t: Theme): string;
     container(t: Theme): string;
     containerDisabled(t: Theme): string;
     focused(t: Theme): string;

package/components/Token/Token/Token.js

@@ -10,7 +10,24 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { CloseButtonIcon } from "../../../internal/CloseButtonIcon/CloseButtonIcon";
 import { styles, colorStyles, globalClasses } from "../Token.styles";
+
+var getValidation = function getValidation(error, warning) {
+  if (error) {
+    return 'error';
+  } else if (warning) {
+    return 'warning';
+  }
+
+  return null;
+};
+
+export var TokenDataTids = {
+  root: 'Token__root',
+  removeIcon: 'Token__removeIcon'
+};
 export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Token, _React$Component);
 
@@ -52,15 +69,18 @@ export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx, _cx2;
-
     var _this$props2 = this.props,
         children = _this$props2.children,
         isActive = _this$props2.isActive,
-        colors = _this$props2.colors,
+        _this$props2$colors = _this$props2.colors,
+        colors = _this$props2$colors === void 0 ? {
+      idle: 'defaultIdle',
+      active: 'defaultActive'
+    } : _this$props2$colors,
         error = _this$props2.error,
         warning = _this$props2.warning,
         disabled = _this$props2.disabled,
+        ariaDescribedby = _this$props2['aria-describedby'],
         _this$props2$onClick = _this$props2.onClick,
         onClick = _this$props2$onClick === void 0 ? emptyHandler : _this$props2$onClick,
         _this$props2$onDouble = _this$props2.onDoubleClick,
@@ -74,22 +94,28 @@ export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
         _this$props2$onBlur = _this$props2.onBlur,
         onBlur = _this$props2$onBlur === void 0 ? emptyHandler : _this$props2$onBlur;
     var theme = this.theme;
-    var validation = error ? 'error' : warning ? 'warning' : null;
-    var disableClassNames = cx(colorStyles.defaultDisabled(theme), (_cx = {}, _cx[colorStyles.defaultDisabledWarning(theme)] = warning, _cx[colorStyles.defaultDisabledError(theme)] = error, _cx));
-    var tokenClassName = disabled ? disableClassNames : colorStyles.defaultIdle(theme, validation);
-    var activeTokenClassName = disabled ? disableClassNames : colorStyles.defaultActive(theme, validation);
-
-    if (!disabled && colors) {
-      tokenClassName = colorStyles[colors.idle](theme, validation);
-      var activeClassName = colors.active ? colors.active : colors.idle;
-      activeTokenClassName = colorStyles[activeClassName](theme, validation);
+    var validation = getValidation(error, warning);
+    var icon = isTheme2022(theme) ? /*#__PURE__*/React.createElement(CloseButtonIcon, {
+      side: 16,
+      color: "inherit",
+      colorHover: "inherit",
+      tabbable: false
+    }) : /*#__PURE__*/React.createElement(CrossIcon, null);
+    var classNames = '';
+
+    if (isTheme2022(theme)) {
+      classNames = cx(styles.tokenDefaultIdle2022(theme), !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme), isActive && styles.tokenDefaultActive2022(theme), warning && styles.tokenWarning2022(theme), error && styles.tokenError2022(theme), disabled && styles.tokenDisabled2022(theme));
+    } else {
+      classNames = cx(colorStyles[colors.idle](theme, validation), !!isActive && colorStyles[colors.active || colors.idle](theme, validation), !!disabled && styles.disabled(theme), !!disabled && colorStyles.defaultDisabled(theme), !!disabled && warning && colorStyles.defaultDisabledWarning(theme), !!disabled && error && colorStyles.defaultDisabledError(theme));
     }
 
-    var tokenClassNames = cx(styles.token(this.theme), tokenClassName, (_cx2 = {}, _cx2[activeTokenClassName] = !!isActive, _cx2[styles.disabled(theme)] = !!disabled, _cx2));
+    var tokenClassNames = cx(styles.token(this.theme), classNames);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": TokenDataTids.root,
       className: tokenClassNames,
+      "aria-describedby": ariaDescribedby,
       onClick: onClick,
       onDoubleClick: onDoubleClick,
       onMouseEnter: onMouseEnter,
@@ -100,8 +126,9 @@ export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       className: styles.text(this.theme)
     }, children), /*#__PURE__*/React.createElement("span", {
       className: cx(styles.removeIcon(this.theme), globalClasses.removeIcon),
-      onClick: this.onRemoveClick
-    }, /*#__PURE__*/React.createElement(CrossIcon, null))));
+      onClick: this.onRemoveClick,
+      "data-tid": TokenDataTids.removeIcon
+    }, icon)));
   };
 
   return Token;

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.tsx"],"names":["React","CrossIcon","emptyHandler","ThemeContext","CommonWrapper","cx","rootNode","styles","colorStyles","globalClasses","Token","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","theme","renderMain","children","isActive","colors","error","warning","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","disableClassNames","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassName","defaultIdle","activeTokenClassName","defaultActive","idle","activeClassName","active","tokenClassNames","token","setRootNode","text","removeIcon","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n  idle: TokenColorName;\n  active?: TokenColorName;\n}\n\nexport interface TokenProps extends CommonProps {\n  colors?: TokenColors;\n  isActive?: boolean;\n  /**\n   * Cостояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Cостояние валидации при предупреждении.\n   */\n  warning?: boolean;\n  disabled?: boolean;\n\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n  onRemove?: React.MouseEventHandler<HTMLElement>;\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\n@rootNode\nexport class Token extends React.Component<TokenProps> {\n  public static __KONTUR_REACT_UI__ = 'Token';\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      children,\n      isActive,\n      colors,\n      error,\n      warning,\n      disabled,\n      onClick = emptyHandler,\n      onDoubleClick = emptyHandler,\n      onMouseEnter = emptyHandler,\n      onMouseLeave = emptyHandler,\n      onFocus = emptyHandler,\n      onBlur = emptyHandler,\n    } = this.props;\n\n    const theme = this.theme;\n    const validation = error ? 'error' : warning ? 'warning' : null;\n    const disableClassNames = cx(colorStyles.defaultDisabled(theme), {\n      [colorStyles.defaultDisabledWarning(theme)]: warning,\n      [colorStyles.defaultDisabledError(theme)]: error,\n    });\n\n    let tokenClassName = disabled ? disableClassNames : colorStyles.defaultIdle(theme, validation);\n    let activeTokenClassName = disabled ? disableClassNames : colorStyles.defaultActive(theme, validation);\n\n    if (!disabled && colors) {\n      tokenClassName = colorStyles[colors.idle](theme, validation);\n\n      const activeClassName = colors.active ? colors.active : colors.idle;\n      activeTokenClassName = colorStyles[activeClassName](theme, validation);\n    }\n\n    const tokenClassNames = cx(styles.token(this.theme), tokenClassName, {\n      [activeTokenClassName]: !!isActive,\n      [styles.disabled(theme)]: !!disabled,\n    });\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          className={tokenClassNames}\n          onClick={onClick}\n          onDoubleClick={onDoubleClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          <span className={styles.text(this.theme)}>{children}</span>\n          <span className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)} onClick={this.onRemoveClick}>\n            <CrossIcon />\n          </span>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n    const { disabled, onRemove = emptyHandler } = this.props;\n\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onRemove(event);\n  };\n}\n"]}
+{"version":3,"sources":["Token.tsx"],"names":["React","CrossIcon","emptyHandler","ThemeContext","CommonWrapper","cx","rootNode","isTheme2022","CloseButtonIcon","styles","colorStyles","globalClasses","getValidation","error","warning","TokenDataTids","root","removeIcon","Token","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","theme","renderMain","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","icon","classNames","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassNames","token","setRootNode","text","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n  idle: TokenColorName;\n  active?: TokenColorName;\n}\n\nexport interface TokenProps extends CommonProps {\n  colors?: TokenColors;\n  isActive?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n  disabled?: boolean;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n  onRemove?: React.MouseEventHandler<HTMLElement>;\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n  if (error) {\n    return 'error';\n  } else if (warning) {\n    return 'warning';\n  }\n\n  return null;\n};\n\nexport const TokenDataTids = {\n  root: 'Token__root',\n  removeIcon: 'Token__removeIcon',\n} as const;\n\n@rootNode\nexport class Token extends React.Component<TokenProps> {\n  public static __KONTUR_REACT_UI__ = 'Token';\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      children,\n      isActive,\n      colors = { idle: 'defaultIdle', active: 'defaultActive' },\n      error,\n      warning,\n      disabled,\n      'aria-describedby': ariaDescribedby,\n      onClick = emptyHandler,\n      onDoubleClick = emptyHandler,\n      onMouseEnter = emptyHandler,\n      onMouseLeave = emptyHandler,\n      onFocus = emptyHandler,\n      onBlur = emptyHandler,\n    } = this.props;\n\n    const theme = this.theme;\n\n    const validation = getValidation(error, warning);\n\n    const icon = isTheme2022(theme) ? (\n      <CloseButtonIcon side={16} color=\"inherit\" colorHover=\"inherit\" tabbable={false} />\n    ) : (\n      <CrossIcon />\n    );\n\n    let classNames = '';\n    if (isTheme2022(theme)) {\n      classNames = cx(\n        styles.tokenDefaultIdle2022(theme),\n        !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme),\n        isActive && styles.tokenDefaultActive2022(theme),\n        warning && styles.tokenWarning2022(theme),\n        error && styles.tokenError2022(theme),\n        disabled && styles.tokenDisabled2022(theme),\n      );\n    } else {\n      classNames = cx(\n        colorStyles[colors.idle](theme, validation),\n        !!isActive && colorStyles[colors.active || colors.idle](theme, validation),\n        !!disabled && styles.disabled(theme),\n        !!disabled && colorStyles.defaultDisabled(theme),\n        !!disabled && warning && colorStyles.defaultDisabledWarning(theme),\n        !!disabled && error && colorStyles.defaultDisabledError(theme),\n      );\n    }\n\n    const tokenClassNames = cx(styles.token(this.theme), classNames);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={TokenDataTids.root}\n          className={tokenClassNames}\n          aria-describedby={ariaDescribedby}\n          onClick={onClick}\n          onDoubleClick={onDoubleClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          <span className={styles.text(this.theme)}>{children}</span>\n          <span\n            className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)}\n            onClick={this.onRemoveClick}\n            data-tid={TokenDataTids.removeIcon}\n          >\n            {icon}\n          </span>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n    const { disabled, onRemove = emptyHandler } = this.props;\n\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onRemove(event);\n  };\n}\n"]}

package/components/Token/Token.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { colorStyles } from './Token.styles';
 export declare type TokenColorName = keyof typeof colorStyles;
@@ -10,14 +10,18 @@ export interface TokenProps extends CommonProps {
     colors?: TokenColors;
     isActive?: boolean;
     /**
-     * Cостояние валидации при ошибке.
+     * Состояние валидации при ошибке.
      */
     error?: boolean;
     /**
-     * Cостояние валидации при предупреждении.
+     * Состояние валидации при предупреждении.
      */
     warning?: boolean;
     disabled?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onRemove?: React.MouseEventHandler<HTMLElement>;
@@ -26,6 +30,10 @@ export interface TokenProps extends CommonProps {
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
+export declare const TokenDataTids: {
+    readonly root: "Token__root";
+    readonly removeIcon: "Token__removeIcon";
+};
 export declare class Token extends React.Component<TokenProps> {
     static __KONTUR_REACT_UI__: string;
     private theme;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
@@ -12,14 +12,32 @@ export var styles = memoizeStyle({
   token: function token(t) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      padding: ", " ", ";\n      line-height: ", ";\n      font-size: ", ";\n      margin: ", " ", ";\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius, t.tokenPaddingY, t.tokenPaddingX, t.tokenLineHeight, t.tokenFontSize, t.tokenMarginY, t.tokenMarginX);
   },
+  tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])), t.tokenDefaultIdleColorHover, t.tokenDefaultIdleBgHover, t.tokenBorderWidth, t.tokenDefaultIdleBorderColorHover);
+  },
+  tokenDefaultActive2022: function tokenDefaultActive2022(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])), t.tokenDefaultActiveColor, t.tokenDefaultActiveBg, t.tokenBorderWidth, t.tokenDefaultActiveBorderColor);
+  },
+  tokenError2022: function tokenError2022(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorError, t.tokenOutlineWidth, t.tokenBorderColorError);
+  },
+  tokenWarning2022: function tokenWarning2022(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorWarning, t.tokenOutlineWidth, t.tokenBorderColorWarning);
+  },
+  tokenDisabled2022: function tokenDisabled2022(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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 css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled, globalClasses.removeIcon);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\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);
   },
   text: function text(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])), t.tokenLegacyTextShift);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])), t.tokenLegacyTextShift);
   },
   removeIcon: function removeIcon(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\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, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
   }
 });
 export var colorStyles = [{
@@ -98,19 +116,26 @@ export var colorStyles = [{
   var name = _ref.name,
       color = _ref.color;
   return _extends({}, colors, (_extends2 = {}, _extends2[name] = function (t, v) {
-    var warning = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
-    var error = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
-    var vStyle = v === 'error' ? error : v === 'warning' ? warning : '';
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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, globalClasses.removeIcon, ColorFunctions.contrast(color(t)));
+    var getVStyle = function getVStyle() {
+      if (v === 'error') {
+        return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+      } else if (v === 'warning') {
+        return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
+      }
+
+      return '';
+    };
+
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\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), getVStyle(), globalClasses.removeIcon, ColorFunctions.contrast(color(t)));
   }, _extends2));
 }, {
   defaultDisabled: function defaultDisabled(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])), t.tokenDisabledBg, t.tokenShadowDisabled);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])), t.tokenDisabledBg, t.tokenShadowDisabled);
   },
   defaultDisabledWarning: function defaultDisabledWarning(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
   },
   defaultDisabledError: function defaultDisabledError(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
   }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.styles.ts"],"names":["css","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","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","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":["css","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","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","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/components/Token/Token.styles.d.ts

@@ -4,6 +4,12 @@ export declare const globalClasses: {
 };
 export declare const styles: {
     token(t: Theme): string;
+    tokenDefaultIdle2022(t: Theme): string;
+    tokenDefaultIdleHovering2022(t: Theme): string;
+    tokenDefaultActive2022(t: Theme): string;
+    tokenError2022(t: Theme): string;
+    tokenWarning2022(t: Theme): string;
+    tokenDisabled2022(t: Theme): string;
     disabled(t: Theme): string;
     text(t: Theme): string;
     removeIcon(t: Theme): string;

package/components/TokenInput/TextWidthHelper/TextWidthHelper.js

@@ -1,5 +1,6 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import { styles } from "../TokenInput.styles"; // a thin character to preserve some space
 // for the caret visibillity in the input
 
@@ -41,11 +42,11 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.getTextWidth = function getTextWidth() {
-    return this.element ? this.element.getBoundingClientRect().width : 0;
+    return getDOMRect(this.element).width;
   };
 
   _proto.getTextHeight = function getTextHeight() {
-    return this.element.getBoundingClientRect().height;
+    return getDOMRect(this.element).height;
   };
 
   return TextWidthHelper;

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

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.tsx"],"names":["React","styles","THIN_SPACE","TextWidthHelper","element","elementRef","node","render","helperContainer","props","theme","classHelp","text","getTextWidth","getBoundingClientRect","width","getTextHeight","height","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;AAIA,SAASC,MAAT,QAAuB,qBAAvB;;AAEA;AACA;AACA,IAAMC,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA;AACA,WAAaC,eAAb;AACUC,IAAAA,OADV,GAC2C,IAD3C;;;;;;;;;;;;;;;;;;;;AAqBUC,IAAAA,UArBV,GAqBuB,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,EArBvB,6DAGSC,MAHT,GAGE,kBAAgB,CACd,oBACE,6BAAK,SAAS,EAAEN,MAAM,CAACO,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,6BAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKN,UAAhD,IACG,KAAKI,KAAL,CAAWG,IAAX,IAAmBV,UADtB,CADF,CADF,CAOD,CAXH,QAaSW,YAbT,GAaE,wBAA8B,CAC5B,OAAO,KAAKT,OAAL,GAAe,KAAKA,OAAL,CAAaU,qBAAb,GAAqCC,KAApD,GAA4D,CAAnE,CACD,CAfH,QAiBSC,aAjBT,GAiBE,yBAA+B,CAC7B,OAAO,KAAKZ,OAAL,CAAcU,qBAAd,GAAsCG,MAA7C,CACD,CAnBH,0BAAqCjB,KAAK,CAACkB,SAA3C","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":["React","getDOMRect","styles","THIN_SPACE","TextWidthHelper","element","elementRef","node","render","helperContainer","props","theme","classHelp","text","getTextWidth","width","getTextHeight","height","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,UAAT,QAA2B,0BAA3B;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;AAEA;AACA;AACA,IAAMC,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA;AACA,WAAaC,eAAb;AACUC,IAAAA,OADV,GAC2C,IAD3C;;;;;;;;;;;;;;;;;;;;AAqBUC,IAAAA,UArBV,GAqBuB,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,EArBvB,6DAGSC,MAHT,GAGE,kBAAgB,CACd,oBACE,6BAAK,SAAS,EAAEN,MAAM,CAACO,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,6BAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKN,UAAhD,IACG,KAAKI,KAAL,CAAWG,IAAX,IAAmBV,UADtB,CADF,CADF,CAOD,CAXH,QAaSW,YAbT,GAaE,wBAA8B,CAC5B,OAAOb,UAAU,CAAC,KAAKI,OAAN,CAAV,CAAyBU,KAAhC,CACD,CAfH,QAiBSC,aAjBT,GAiBE,yBAA+B,CAC7B,OAAOf,UAAU,CAAC,KAAKI,OAAN,CAAV,CAAyBY,MAAhC,CACD,CAnBH,0BAAqCjB,KAAK,CAACkB,SAA3C","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"]}