@skbkontur/react-ui 0.0.0-031e4bb3f9 → 0.0.0-0fe669bb2d

package/cjs/components/Toggle/Toggle.styles.js

@@ -1,72 +1,116 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject14() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 ", " 0 0;\n    "]);_templateObject14 = function _templateObject14() {return data;};return data;}function _templateObject13() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 0 0 ", ";\n    "]);_templateObject13 = function _templateObject13() {return data;};return data;}function _templateObject12() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-direction: row-reverse;\n    "]);_templateObject12 = function _templateObject12() {return data;};return data;}function _templateObject11() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      opacity: 0.3;\n      cursor: default !important;\n\n      ", " {\n        background: ", ";\n      }\n    "]);_templateObject11 = function _templateObject11() {return data;};return data;}function _templateObject10() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      height: ", ";\n      position: relative;\n      width: ", ";\n      flex: 1 0 ", ";\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    "]);_templateObject10 = function _templateObject10() {return data;};return data;}function _templateObject9() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ":checked ~ ", "& {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n\n        ", " {\n          background: ", ";\n        }\n      }\n    "]);_templateObject9 = function _templateObject9() {return data;};return data;}function _templateObject8() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ":checked ~ ", "& {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n\n        ", " {\n          background: ", ";\n        }\n      }\n    "]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ":checked ~ ", "& {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      ", " {\n        background: ", ";\n      }\n    "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\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    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "&, ", ":checked ~ & {\n        box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n      }\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", " ", ";\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    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ ", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ ", " ", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ ", " {\n        transform: translateX(", ") translateX(-", ");\n      }\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      border-radius: ", ";\n      bottom: ", ";\n      box-shadow: 0 ", " 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ", " rgba(0, 0, 0, 0.15);\n      height: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n      width: ", ";\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      cursor: pointer;\n\n      &:hover:not(", ") {\n        ", " {\n          background: ", ";\n        }\n      }\n      &:active:not(", ") ", " {\n        width: ", ";\n      }\n      &:active:not(", ") ", ":checked ~ ", " {\n        transform: translateX(", ") translateX(-", ")\n          translateX(-", ");\n      }\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
+var _client = require("../../lib/client");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 
-var styles = {
+var globalClasses = (0, _Emotion.prefix)('toggle')({
+  handle: 'handle',
+  container: 'container',
+  disabled: 'disabled',
+  containerDisabled: 'container-disabled',
+  containerLoading: 'container-loading',
+  background: 'background' });exports.globalClasses = globalClasses;
+
+
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
-    var disabled = (0, _Emotion.cssName)(styles.disabled(t));
     var handleWidthWithBorders = t.toggleHeight;
     var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + t.toggleBorderWidth + " + " + t.toggleHandleActiveWidthIncrement + ")";
-    return (0, _Emotion.css)(_templateObject(),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ") translateX(-4px);\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: ", ";\n        flex: 0 0 auto;\n      }\n    "], ["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ") translateX(-4px);\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: ", ";\n        flex: 0 0 auto;\n      }\n    "])),
 
 
 
-    disabled,
-    (0, _Emotion.cssName)(styles.handle(t)),
-    t.toggleBgHover,
 
+    t.toggleLineHeight,
+    t.toggleFontSize,
+
+    globalClasses.handle,
+    t.toggleBgHover,
 
-    disabled, (0, _Emotion.cssName)(styles.handle(t)),
+    globalClasses.disabled, globalClasses.handle,
     handleActiveWidth,
 
-    disabled, (0, _Emotion.cssName)(styles.input(t)), (0, _Emotion.cssName)(styles.handle(t)),
+    globalClasses.disabled, globalClasses.handle,
     t.toggleWidth, handleWidthWithBorders,
-    t.toggleHandleActiveWidthIncrement);
+
+
+
+
+
+
+
+
+    t.toggleWidth);
+
 
 
   },
 
   handle: function handle(t) {
-    var handleSize = "calc(" + t.toggleHeight + " - 2 * " + t.toggleBorderWidth + ")";
-    return (0, _Emotion.css)(_templateObject2(),
-    t.toggleBg,
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      border-radius: ", ";\n      bottom: ", ";\n      box-shadow: 0 ", " 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ", " rgba(0, 0, 0, 0.15);\n      height: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n      width: ", ";\n    "])),
+    t.toggleHandleBg,
     t.toggleHandleBorderRadius,
     t.toggleBorderWidth,
     t.toggleBorderWidth, t.toggleBorderWidth,
-    handleSize,
-    t.toggleBorderWidth,
+    t.toggleHandleSize,
+    t.toggleHandleLeft,
 
-    t.toggleBorderWidth,
+    t.toggleHandleTop,
+
+    t.toggleHandleSize);
+
+  },
 
-    handleSize);
+  handleDisabled: function handleDisabled(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important; // override root hover/active styles\n    "])),
+    t.toggleDisabledHandleBg);
 
   },
 
   input: function input(t) {
     var handleWidthWithBorders = t.toggleHeight;
-    return (0, _Emotion.css)(_templateObject3(),
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n        border-radius: calc(", " * 0.5) 0 0 calc(", " * 0.5);\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n      &:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ");\n        background: ", ";\n        &:hover {\n          background: ", ";\n        }\n      }\n    "])),
 
 
 
 
 
 
-    (0, _Emotion.cssName)(styles.container(t)),
+    globalClasses.container,
     t.toggleBorderWidth, t.toggleBgChecked,
     t.toggleBgChecked,
 
 
-    (0, _Emotion.cssName)(styles.container(t)), (0, _Emotion.cssName)(styles.activeBackground()),
+    globalClasses.containerDisabled,
+    t.toggleBorderWidth, t.toggleBorderColorDisabledChecked,
+    t.toggleBgDisabledChecked,
+
+
+    globalClasses.containerLoading,
+    t.toggleBorderColor,
+    t.toggleBorderWidth, t.toggleBorderColor,
+
+    globalClasses.container, globalClasses.background,
 
     t.toggleBgChecked,
 
-    (0, _Emotion.cssName)(styles.handle(t)),
-    t.toggleWidth, handleWidthWithBorders);
+    globalClasses.containerDisabled, globalClasses.background,
+
+    t.toggleBgDisabledChecked,
+    t.toggleHeight, t.toggleHeight,
+    t.toggleBorderColorDisabledChecked,
+
+    globalClasses.handle,
+    t.toggleWidth, handleWidthWithBorders,
+    t.toggleCheckedBg,
+
+    t.toggleCheckedBgHover);
+
 
 
   },
 
   container: function container(t) {
-    return (0, _Emotion.css)(_templateObject4(),
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", " ", ";\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    "])),
     t.toggleBorderRadius,
     t.toggleBorderWidth, t.toggleBorderColor);
 
@@ -76,18 +120,23 @@ var styles = {
 
 
 
+  },
+
+  containerDisabled: function containerDisabled(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])),
+    t.toggleBgDisabled,
+    t.toggleBorderColorDisabled);
+
   },
 
   focused: function focused(t) {
-    return (0, _Emotion.css)(_templateObject5(),
-    (0, _Emotion.cssName)(styles.container(t)), (0, _Emotion.cssName)(styles.input(t)),
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
     t.outlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
 
-
   },
 
   activeBackground: function activeBackground() {
-    return (0, _Emotion.css)(_templateObject6());
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])));
 
 
 
@@ -98,87 +147,88 @@ var styles = {
 
   },
 
-  isLoading: function isLoading(t) {
-    return (0, _Emotion.css)(_templateObject7(),
-    (0, _Emotion.cssName)(styles.input(t)), (0, _Emotion.cssName)(styles.container(t)),
-    t.toggleBorderColor,
-    t.toggleBorderWidth, t.toggleBorderColor,
-
-    (0, _Emotion.cssName)(styles.activeBackground()),
-    t.toggleBgActive);
+  disabledBackground: function disabledBackground(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])),
+    t.toggleBorderColorDisabled);
 
 
   },
 
-  isWarning: function isWarning(t) {
-    return (0, _Emotion.css)(_templateObject8(),
-    (0, _Emotion.cssName)(styles.input(t)), (0, _Emotion.cssName)(styles.container(t)),
-    t.toggleBgWarning,
-    t.toggleBorderWidth, t.toggleBgWarning,
-
-    (0, _Emotion.cssName)(styles.activeBackground()),
-    t.toggleBgWarning);
+  activeBackgroundLoading: function activeBackgroundLoading(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    t.toggleBgActive);
 
+  },
 
+  isWarning: function isWarning(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
+    t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
 
   },
 
   isError: function isError(t) {
-    return (0, _Emotion.css)(_templateObject9(),
-    (0, _Emotion.cssName)(styles.input(t)), (0, _Emotion.cssName)(styles.container(t)),
-    t.toggleBgError,
-    t.toggleBorderWidth, t.toggleBgError,
-
-    (0, _Emotion.cssName)(styles.activeBackground()),
-    t.toggleBgError);
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
+    t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
 
+  },
 
+  button: function button(t) {
+    var labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);
+    var fontSize = parseInt(t.checkboxFontSize);
+    var baselineCompensation = fontSize <= 16 && _client.isChrome ? -labGrotesqueCompenstation : 0;
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      height: ", ";\n      width: ", ";\n      flex: 1 0 ", ";\n\n      background: ", ";\n      border-radius: ", ";\n      line-height: ", ";\n\n      margin-top: calc(", " + ", "px);\n    "])),
 
-  },
 
-  wrapper: function wrapper(t) {
-    return (0, _Emotion.css)(_templateObject10(),
 
     t.toggleHeight,
-
     t.toggleWidth,
-    t.toggleWidth);
-
-
-
+    t.toggleWidth,
 
+    t.toggleBaseBg,
+    t.toggleBorderRadius,
+    t.toggleHeight,
 
+    t.toggleButtonOffsetY, baselineCompensation);
 
   },
 
-  disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject11(),
+  buttonRight: function buttonRight() {
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      right: 0;\n      left: auto;\n    "])));
 
 
 
-    (0, _Emotion.cssName)(styles.container(t)),
-    t.toggleBgDisabled);
+  },
+
+  disabled: function disabled() {
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n    "])));
 
 
   },
 
   rootLeft: function rootLeft() {
-    return (0, _Emotion.css)(_templateObject12());
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-direction: row-reverse;\n    "])));
 
 
   },
 
   caption: function caption(t) {
-    return (0, _Emotion.css)(_templateObject13(),
-    t.toggleCaptionGap);
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n      line-height: ", ";\n      font-size: ", ";\n    "])),
+    t.toggleTextColor,
+    t.toggleCaptionGap,
+    t.toggleLineHeight,
+    t.toggleFontSize);
 
   },
 
-  captionLeft: function captionLeft(t) {
-    return (0, _Emotion.css)(_templateObject14(),
-    t.toggleCaptionGap);
+  disabledCaption: function disabledCaption(t) {
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.textColorDisabled);
 
-  } };
+  },
 
+  captionLeft: function captionLeft(t) {
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])),
+    t.toggleTextColor,
+    t.toggleCaptionGap);
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.styles.ts"],"names":["styles","root","t","disabled","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","css","handle","toggleBgHover","input","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","container","toggleBgChecked","activeBackground","toggleBorderRadius","toggleBorderColor","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","isLoading","toggleBgActive","isWarning","toggleBgWarning","isError","toggleBgError","wrapper","toggleBgDisabled","rootLeft","caption","toggleCaptionGap","captionLeft","jsStyles"],"mappings":"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","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    const disabled = cssName(styles.disabled(t));\r\n    const handleWidthWithBorders = t.toggleHeight;\r\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\r\n    return css`\r\n      display: inline-flex;\r\n      cursor: pointer;\r\n\r\n      &:hover:not(${disabled}) {\r\n        ${cssName(styles.handle(t))} {\r\n          background: ${t.toggleBgHover};\r\n        }\r\n      }\r\n      &:active:not(${disabled}) ${cssName(styles.handle(t))} {\r\n        width: ${handleActiveWidth};\r\n      }\r\n      &:active:not(${disabled}) ${cssName(styles.input(t))}:checked ~ ${cssName(styles.handle(t))} {\r\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\r\n          translateX(-${t.toggleHandleActiveWidthIncrement});\r\n      }\r\n    `;\r\n  },\r\n\r\n  handle(t: Theme) {\r\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\r\n    return css`\r\n      background: ${t.toggleBg};\r\n      border-radius: ${t.toggleHandleBorderRadius};\r\n      bottom: ${t.toggleBorderWidth};\r\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);\r\n      height: ${handleSize};\r\n      left: ${t.toggleBorderWidth};\r\n      position: absolute;\r\n      top: ${t.toggleBorderWidth};\r\n      transition: 0.2s ease-in;\r\n      width: ${handleSize};\r\n    `;\r\n  },\r\n\r\n  input(t: Theme) {\r\n    const handleWidthWithBorders = t.toggleHeight;\r\n    return css`\r\n      position: absolute;\r\n      opacity: 0;\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n      &:checked ~ ${cssName(styles.container(t))} {\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\r\n        background: ${t.toggleBgChecked};\r\n        transition: background 0s 0.2s;\r\n      }\r\n      &:checked ~ ${cssName(styles.container(t))} ${cssName(styles.activeBackground())} {\r\n        width: 70%;\r\n        background: ${t.toggleBgChecked};\r\n      }\r\n      &:checked ~ ${cssName(styles.handle(t))} {\r\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\r\n      }\r\n    `;\r\n  },\r\n\r\n  container(t: Theme) {\r\n    return css`\r\n      border-radius: ${t.toggleBorderRadius};\r\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\r\n      height: 100%;\r\n      overflow: hidden;\r\n      position: absolute;\r\n      width: 100%;\r\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\r\n      z-index: 0;\r\n    `;\r\n  },\r\n\r\n  focused(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.container(t))}&, ${cssName(styles.input(t))}:checked ~ & {\r\n        box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  activeBackground() {\r\n    return css`\r\n      background: inherit;\r\n      bottom: 0;\r\n      left: 0;\r\n      position: absolute;\r\n      top: 0;\r\n      transition: 0.2s ease-in;\r\n      width: 10px;\r\n    `;\r\n  },\r\n\r\n  isLoading(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.input(t))}:checked ~ ${cssName(styles.container(t))}& {\r\n        background: ${t.toggleBorderColor};\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\r\n      }\r\n      ${cssName(styles.activeBackground())} {\r\n        background: ${t.toggleBgActive};\r\n      }\r\n    `;\r\n  },\r\n\r\n  isWarning(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.input(t))}:checked ~ ${cssName(styles.container(t))}& {\r\n        background: ${t.toggleBgWarning};\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgWarning};\r\n\r\n        ${cssName(styles.activeBackground())} {\r\n          background: ${t.toggleBgWarning};\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  isError(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.input(t))}:checked ~ ${cssName(styles.container(t))}& {\r\n        background: ${t.toggleBgError};\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgError};\r\n\r\n        ${cssName(styles.activeBackground())} {\r\n          background: ${t.toggleBgError};\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  wrapper(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      height: ${t.toggleHeight};\r\n      position: relative;\r\n      width: ${t.toggleWidth};\r\n      flex: 1 0 ${t.toggleWidth};\r\n\r\n      &::after {\r\n        content: '';\r\n        display: inline-block;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      opacity: 0.3;\r\n      cursor: default !important;\r\n\r\n      ${cssName(styles.container(t))} {\r\n        background: ${t.toggleBgDisabled};\r\n      }\r\n    `;\r\n  },\r\n\r\n  rootLeft() {\r\n    return css`\r\n      flex-direction: row-reverse;\r\n    `;\r\n  },\r\n\r\n  caption(t: Theme) {\r\n    return css`\r\n      padding: 0 0 0 ${t.toggleCaptionGap};\r\n    `;\r\n  },\r\n\r\n  captionLeft(t: Theme) {\r\n    return css`\r\n      padding: 0 ${t.toggleCaptionGap} 0 0;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Toggle.styles.ts"],"names":["globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","css","toggleLineHeight","toggleFontSize","toggleBgHover","toggleWidth","toggleHandleBg","toggleHandleBorderRadius","toggleHandleSize","toggleHandleLeft","toggleHandleTop","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleCheckedBg","toggleCheckedBgHover","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","checkboxFontSize","baselineCompensation","isChrome","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}) translateX(-4px);\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    return css`\n      background: ${t.toggleHandleBg};\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: ${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  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"]}

package/cjs/components/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Toggle';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Toggle';\n"]}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
-import { jsTokenColors } from './Token.styles';
-export declare type TokenColorName = keyof typeof jsTokenColors;
+import { colorStyles } from './Token.styles';
+export declare type TokenColorName = keyof typeof colorStyles;
 export interface TokenColors {
     idle: TokenColorName;
     active?: TokenColorName;
@@ -9,7 +9,13 @@ export interface TokenColors {
 export interface TokenProps extends CommonProps {
     colors?: TokenColors;
     isActive?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
     disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
@@ -20,9 +26,13 @@ export interface TokenProps extends CommonProps {
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
+export declare const TokenDataTids: {
+    readonly root: "Token__root";
+};
 export declare class Token extends React.Component<TokenProps> {
     static __KONTUR_REACT_UI__: string;
     private theme;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
     private onRemoveClick;

package/cjs/components/Token/Token.js

@@ -1,13 +1,14 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Token = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TokenDataTids = exports.Token = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _CrossIcon = require("../../internal/icons/CrossIcon");
 var _utils = require("../../lib/utils");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
 
-var _Token = require("./Token.styles");var
+var _Token = require("./Token.styles");var _class, _class2, _temp;
 
 
 
@@ -32,19 +33,28 @@ var _Token = require("./Token.styles");var
 
 
 
-Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Token, _React$Component);function Token() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
-    theme = void 0;_this.
 
 
 
 
+var getValidation = function getValidation(error, warning) {
+  if (error) {
+    return 'error';
+  } else if (warning) {
+    return 'warning';
+  }
 
+  return null;
+};
 
+var TokenDataTids = {
+  root: 'Token__root' };exports.TokenDataTids = TokenDataTids;var
 
 
 
+Token = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Token, _React$Component);function Token() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -106,8 +116,24 @@ Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(T
 
 
 
-    onRemoveClick = function (event) {var _this$props =
-      _this.props,disabled = _this$props.disabled,_this$props$onRemove = _this$props.onRemove,onRemove = _this$props$onRemove === void 0 ? _utils.emptyHandler : _this$props$onRemove;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    onRemoveClick = function (event) {
+      var _this$props = _this.props,disabled = _this$props.disabled,_this$props$onRemove = _this$props.onRemove,onRemove = _this$props$onRemove === void 0 ? _utils.emptyHandler : _this$props$onRemove;
 
       if (disabled) {
         event.preventDefault();
@@ -115,4 +141,4 @@ Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(T
       }
 
       onRemove(event);
-    };return _this;}var _proto = Token.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn, _cn2;var _this$props2 = this.props,children = _this$props2.children,isActive = _this$props2.isActive,colors = _this$props2.colors,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,_this$props2$onClick = _this$props2.onClick,onClick = _this$props2$onClick === void 0 ? _utils.emptyHandler : _this$props2$onClick,_this$props2$onDouble = _this$props2.onDoubleClick,onDoubleClick = _this$props2$onDouble === void 0 ? _utils.emptyHandler : _this$props2$onDouble,_this$props2$onMouseE = _this$props2.onMouseEnter,onMouseEnter = _this$props2$onMouseE === void 0 ? _utils.emptyHandler : _this$props2$onMouseE,_this$props2$onMouseL = _this$props2.onMouseLeave,onMouseLeave = _this$props2$onMouseL === void 0 ? _utils.emptyHandler : _this$props2$onMouseL,_this$props2$onFocus = _this$props2.onFocus,onFocus = _this$props2$onFocus === void 0 ? _utils.emptyHandler : _this$props2$onFocus,_this$props2$onBlur = _this$props2.onBlur,onBlur = _this$props2$onBlur === void 0 ? _utils.emptyHandler : _this$props2$onBlur;var theme = this.theme;var validation = error ? 'error' : warning ? 'warning' : null;var disableClassNames = (0, _classnames.default)(_Token.jsTokenColors.defaultDisabled(theme), (_cn = {}, _cn[_Token.jsTokenColors.defaultDisabledWarning(theme)] = warning, _cn[_Token.jsTokenColors.defaultDisabledError(theme)] = error, _cn));var tokenClassName = disabled ? disableClassNames : _Token.jsTokenColors.defaultIdle(theme, validation);var activeTokenClassName = disabled ? disableClassNames : _Token.jsTokenColors.defaultActive(theme, validation);if (!disabled && colors) {tokenClassName = _Token.jsTokenColors[colors.idle](theme, validation);var activeClassName = colors.active ? colors.active : colors.idle;activeTokenClassName = _Token.jsTokenColors[activeClassName](theme, validation);}var tokenClassNames = (0, _classnames.default)(_Token.jsStyles.token(this.theme), tokenClassName, (_cn2 = {}, _cn2[activeTokenClassName] = !!isActive, _cn2[_Token.jsStyles.disabled(theme)] = !!disabled, _cn2));return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { className: tokenClassNames, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, /*#__PURE__*/_react.default.createElement("span", { className: _Token.jsStyles.text(this.theme) }, children), /*#__PURE__*/_react.default.createElement("span", { className: _Token.jsStyles.removeIcon(this.theme), onClick: this.onRemoveClick }, /*#__PURE__*/_react.default.createElement(_CrossIcon.CrossIcon, null))));};return Token;}(_react.default.Component);exports.Token = Token;Token.__KONTUR_REACT_UI__ = 'Token';
+    };return _this;}var _proto = Token.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx, _cx2;var _this$props2 = this.props,children = _this$props2.children,isActive = _this$props2.isActive,colors = _this$props2.colors,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,_this$props2$onClick = _this$props2.onClick,onClick = _this$props2$onClick === void 0 ? _utils.emptyHandler : _this$props2$onClick,_this$props2$onDouble = _this$props2.onDoubleClick,onDoubleClick = _this$props2$onDouble === void 0 ? _utils.emptyHandler : _this$props2$onDouble,_this$props2$onMouseE = _this$props2.onMouseEnter,onMouseEnter = _this$props2$onMouseE === void 0 ? _utils.emptyHandler : _this$props2$onMouseE,_this$props2$onMouseL = _this$props2.onMouseLeave,onMouseLeave = _this$props2$onMouseL === void 0 ? _utils.emptyHandler : _this$props2$onMouseL,_this$props2$onFocus = _this$props2.onFocus,onFocus = _this$props2$onFocus === void 0 ? _utils.emptyHandler : _this$props2$onFocus,_this$props2$onBlur = _this$props2.onBlur,onBlur = _this$props2$onBlur === void 0 ? _utils.emptyHandler : _this$props2$onBlur;var theme = this.theme;var validation = getValidation(error, warning);var disableClassNames = (0, _Emotion.cx)(_Token.colorStyles.defaultDisabled(theme), (_cx = {}, _cx[_Token.colorStyles.defaultDisabledWarning(theme)] = warning, _cx[_Token.colorStyles.defaultDisabledError(theme)] = error, _cx));var tokenClassName = disabled ? disableClassNames : _Token.colorStyles.defaultIdle(theme, validation);var activeTokenClassName = disabled ? disableClassNames : _Token.colorStyles.defaultActive(theme, validation);if (!disabled && colors) {tokenClassName = _Token.colorStyles[colors.idle](theme, validation);var activeClassName = colors.active ? colors.active : colors.idle;activeTokenClassName = _Token.colorStyles[activeClassName](theme, validation);}var tokenClassNames = (0, _Emotion.cx)(_Token.styles.token(this.theme), tokenClassName, (_cx2 = {}, _cx2[activeTokenClassName] = !!isActive, _cx2[_Token.styles.disabled(theme)] = !!disabled, _cx2));return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TokenDataTids.root, className: tokenClassNames, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, /*#__PURE__*/_react.default.createElement("span", { className: _Token.styles.text(this.theme) }, children), /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Token.styles.removeIcon(this.theme), _Token.globalClasses.removeIcon), onClick: this.onRemoveClick }, /*#__PURE__*/_react.default.createElement(_CrossIcon.CrossIcon, null))));};return Token;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Token', _temp)) || _class;exports.Token = Token;

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.tsx"],"names":["Token","theme","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","renderMain","children","isActive","colors","error","warning","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","disableClassNames","jsTokenColors","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassName","defaultIdle","activeTokenClassName","defaultActive","idle","activeClassName","active","tokenClassNames","jsStyles","token","text","removeIcon","React","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { emptyHandler } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles, jsTokenColors } from './Token.styles';\r\n\r\nexport type TokenColorName = keyof typeof jsTokenColors;\r\n\r\nexport interface TokenColors {\r\n  idle: TokenColorName;\r\n  active?: TokenColorName;\r\n}\r\n\r\nexport interface TokenProps extends CommonProps {\r\n  colors?: TokenColors;\r\n  isActive?: boolean;\r\n  error?: boolean;\r\n  warning?: boolean;\r\n  disabled?: boolean;\r\n\r\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\r\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\r\n  onRemove?: React.MouseEventHandler<HTMLElement>;\r\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\r\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\r\n}\r\n\r\nexport class Token extends React.Component<TokenProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Token';\r\n\r\n  private theme!: Theme;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const {\r\n      children,\r\n      isActive,\r\n      colors,\r\n      error,\r\n      warning,\r\n      disabled,\r\n      onClick = emptyHandler,\r\n      onDoubleClick = emptyHandler,\r\n      onMouseEnter = emptyHandler,\r\n      onMouseLeave = emptyHandler,\r\n      onFocus = emptyHandler,\r\n      onBlur = emptyHandler,\r\n    } = this.props;\r\n\r\n    const theme = this.theme;\r\n    const validation = error ? 'error' : warning ? 'warning' : null;\r\n    const disableClassNames = cn(jsTokenColors.defaultDisabled(theme), {\r\n      [jsTokenColors.defaultDisabledWarning(theme)]: warning,\r\n      [jsTokenColors.defaultDisabledError(theme)]: error,\r\n    });\r\n\r\n    let tokenClassName = disabled ? disableClassNames : jsTokenColors.defaultIdle(theme, validation);\r\n    let activeTokenClassName = disabled ? disableClassNames : jsTokenColors.defaultActive(theme, validation);\r\n\r\n    if (!disabled && colors) {\r\n      tokenClassName = jsTokenColors[colors.idle](theme, validation);\r\n\r\n      const activeClassName = colors.active ? colors.active : colors.idle;\r\n      activeTokenClassName = jsTokenColors[activeClassName](theme, validation);\r\n    }\r\n\r\n    const tokenClassNames = cn(jsStyles.token(this.theme), tokenClassName, {\r\n      [activeTokenClassName]: !!isActive,\r\n      [jsStyles.disabled(theme)]: !!disabled,\r\n    });\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div\r\n          className={tokenClassNames}\r\n          onClick={onClick}\r\n          onDoubleClick={onDoubleClick}\r\n          onMouseEnter={onMouseEnter}\r\n          onMouseLeave={onMouseLeave}\r\n          onFocus={onFocus}\r\n          onBlur={onBlur}\r\n        >\r\n          <span className={jsStyles.text(this.theme)}>{children}</span>\r\n          <span className={jsStyles.removeIcon(this.theme)} onClick={this.onRemoveClick}>\r\n            <CrossIcon />\r\n          </span>\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\r\n    const { disabled, onRemove = emptyHandler } = this.props;\r\n\r\n    if (disabled) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    onRemove(event);\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Token.tsx"],"names":["getValidation","error","warning","TokenDataTids","root","Token","rootNode","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","theme","renderMain","children","isActive","colors","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","disableClassNames","colorStyles","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassName","defaultIdle","activeTokenClassName","defaultActive","idle","activeClassName","active","tokenClassNames","styles","token","setRootNode","text","removeIcon","globalClasses","React","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   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Состояние валидации при предупреждении.\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\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} 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,\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\n    const validation = getValidation(error, warning);\n\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          data-tid={TokenDataTids.root}\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"]}