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

package/components/Toast/ToastView/ToastView.js

@@ -1,15 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["action", "onClose"];
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import { func, shape, string } from 'prop-types';
-import { CrossIcon } from "..\\..\\..\\internal\\icons\\CrossIcon";
-import { ZIndex } from "..\\..\\..\\internal\\ZIndex";
-import { ThemeContext } from "..\\..\\..\\lib\\theming\\ThemeContext";
-import { jsStyles } from "..\\ToastView.styles";
-export var ToastView =
-/*#__PURE__*/
-function (_React$Component) {
+import { CrossIcon } from "../../../internal/icons/CrossIcon";
+import { ZIndex } from "../../../internal/ZIndex";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../ToastView.styles";
+export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ToastView, _React$Component);
 
   function ToastView() {
@@ -20,7 +24,35 @@ function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.theme = void 0;
+
+    _this.renderMain = function (props) {
+      var action = props.action,
+          onClose = props.onClose,
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+      var link = action ? /*#__PURE__*/React.createElement("span", {
+        "data-tid": "ToastView__action",
+        className: styles.link(_this.theme),
+        onClick: action.handler
+      }, action.label) : null;
+      var close = action ? /*#__PURE__*/React.createElement("span", {
+        className: styles.closeWrapper(_this.theme)
+      }, /*#__PURE__*/React.createElement("span", {
+        "data-tid": "ToastView__close",
+        className: styles.close(_this.theme),
+        onClick: onClose
+      }, /*#__PURE__*/React.createElement(CrossIcon, null))) : null;
+      return /*#__PURE__*/React.createElement(ZIndex, {
+        priority: "Toast",
+        className: styles.wrapper()
+      }, /*#__PURE__*/React.createElement("div", _extends({
+        "data-tid": "ToastView__root"
+      }, rest, {
+        className: styles.root(_this.theme),
+        ref: _this.setRootNode
+      }), /*#__PURE__*/React.createElement("span", null, _this.props.children), link, close));
+    };
+
     return _this;
   }
 
@@ -29,52 +61,25 @@ function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
-      return _this2.renderMain();
+      return /*#__PURE__*/React.createElement(CommonWrapper, _this2.props, _this2.renderMain);
     });
   };
 
-  _proto.renderMain = function renderMain() {
-    var _this$props = this.props,
-        children = _this$props.children,
-        action = _this$props.action,
-        onClose = _this$props.onClose,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["children", "action", "onClose"]);
-
-    var link = action ? React.createElement("span", {
-      className: jsStyles.link(this.theme),
-      onClick: action.handler
-    }, action.label) : null;
-    var close = action ? React.createElement("span", {
-      className: jsStyles.closeWrapper()
-    }, React.createElement("span", {
-      className: jsStyles.close(this.theme),
-      onClick: onClose
-    }, React.createElement(CrossIcon, null))) : null;
-    return React.createElement(ZIndex, {
-      priority: "Toast",
-      className: jsStyles.wrapper()
-    }, React.createElement("div", _extends({
-      "data-tid": "ToastView__root",
-      className: jsStyles.root(this.theme)
-    }, rest), React.createElement("span", null, children), link, close));
-  };
-
   return ToastView;
-}(React.Component);
-ToastView.propTypes = {
-  /**
-   * Adds action handling and close icon for toast
-   */
+}(React.Component), _class2.propTypes = {
+  /**
+  * Adds action handling and close icon for toast
+  */
   action: shape({
     label: string.isRequired,
     handler: func.isRequired
   }),
 
-  /**
-   * Toast content
-   */
+  /**
+  * Toast content
+  */
   children: string.isRequired,
   onClose: func
-};
+}, _temp)) || _class;

package/components/Toast/ToastView/ToastView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.tsx"],"names":["React","func","shape","string","CrossIcon","ZIndex","ThemeContext","jsStyles","ToastView","theme","render","renderMain","props","children","action","onClose","rest","link","handler","label","close","closeWrapper","wrapper","root","Component","propTypes","isRequired"],"mappings":"oOAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,MAAtB,QAAoC,YAApC;;AAEA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,QAAT,QAAyB,oBAAzB;;;;;;;;;;;;;;;;;;;AAmBA,WAAaC,SAAb;;;;;;;;;;;;;;;;AAgBUC,IAAAA,KAhBV;;AAkBSC,EAAAA,MAlBT,GAkBE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAAAD,KAAK,EAAI;AACR,QAAA,MAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,MAAI,CAACE,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,GA3BH;;AA6BUA,EAAAA,UA7BV,GA6BE,sBAAqB;AAC4B,SAAKC,KADjC,CACXC,QADW,eACXA,QADW,CACDC,MADC,eACDA,MADC,CACOC,OADP,eACOA,OADP,CACmBC,IADnB;;AAGnB,QAAMC,IAAI,GAAGH,MAAM;AACjB,kCAAM,SAAS,EAAEP,QAAQ,CAACU,IAAT,CAAc,KAAKR,KAAnB,CAAjB,EAA4C,OAAO,EAAEK,MAAM,CAACI,OAA5D;AACGJ,IAAAA,MAAM,CAACK,KADV,CADiB;;AAIf,QAJJ;;AAMA,QAAMC,KAAK,GAAGN,MAAM;AAClB,kCAAM,SAAS,EAAEP,QAAQ,CAACc,YAAT,EAAjB;AACE,kCAAM,SAAS,EAAEd,QAAQ,CAACa,KAAT,CAAe,KAAKX,KAApB,CAAjB,EAA6C,OAAO,EAAEM,OAAtD;AACE,wBAAC,SAAD,OADF,CADF,CADkB;;;AAMhB,QANJ;;AAQA;AACE,0BAAC,MAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAER,QAAQ,CAACe,OAAT,EAApC;AACE,4CAAK,YAAS,iBAAd,EAAgC,SAAS,EAAEf,QAAQ,CAACgB,IAAT,CAAc,KAAKd,KAAnB,CAA3C,IAA0EO,IAA1E;AACE,wCAAOH,QAAP,CADF;AAEGI,MAAAA,IAFH;AAGGG,MAAAA,KAHH,CADF,CADF;;;;AASD,GAvDH,oBAA+BpB,KAAK,CAACwB,SAArC,EAAahB,S,CACGiB,S,GAAY,EACxB;;mEAGAX,MAAM,EAAEZ,KAAK,CAAC,EACZiB,KAAK,EAAEhB,MAAM,CAACuB,UADF,EAEZR,OAAO,EAAEjB,IAAI,CAACyB,UAFF,EAAD,CAJW,EAQxB;;6IAGAb,QAAQ,EAAEV,MAAM,CAACuB,UAXO,EAYxBX,OAAO,EAAEd,IAZe,E","sourcesContent":["import React from 'react';\r\nimport { func, shape, string } from 'prop-types';\r\n\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './ToastView.styles';\r\n\r\nexport interface ToastViewProps {\r\n  /**\r\n   * Toast content\r\n   */\r\n  children?: string;\r\n  /**\r\n   * Adds action handling and close icon for toast\r\n   */\r\n  action?: {\r\n    label: string;\r\n    handler: () => void;\r\n  } | null;\r\n  onClose?: () => void;\r\n  onMouseEnter?: () => void;\r\n  onMouseLeave?: () => void;\r\n}\r\n\r\nexport class ToastView extends React.Component<ToastViewProps> {\r\n  public static propTypes = {\r\n    /**\r\n     * Adds action handling and close icon for toast\r\n     */\r\n    action: shape({\r\n      label: string.isRequired,\r\n      handler: func.isRequired,\r\n    }),\r\n    /**\r\n     * Toast content\r\n     */\r\n    children: string.isRequired,\r\n    onClose: func,\r\n  };\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 { children, action, onClose, ...rest } = this.props;\r\n\r\n    const link = action ? (\r\n      <span className={jsStyles.link(this.theme)} onClick={action.handler}>\r\n        {action.label}\r\n      </span>\r\n    ) : null;\r\n\r\n    const close = action ? (\r\n      <span className={jsStyles.closeWrapper()}>\r\n        <span className={jsStyles.close(this.theme)} onClick={onClose}>\r\n          <CrossIcon />\r\n        </span>\r\n      </span>\r\n    ) : null;\r\n\r\n    return (\r\n      <ZIndex priority=\"Toast\" className={jsStyles.wrapper()}>\r\n        <div data-tid=\"ToastView__root\" className={jsStyles.root(this.theme)} {...rest}>\r\n          <span>{children}</span>\r\n          {link}\r\n          {close}\r\n        </div>\r\n      </ZIndex>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["ToastView.tsx"],"names":["React","func","shape","string","CrossIcon","ZIndex","ThemeContext","CommonWrapper","rootNode","styles","ToastView","renderMain","props","action","onClose","rest","link","theme","handler","label","close","closeWrapper","wrapper","root","setRootNode","children","render","Component","propTypes","isRequired"],"mappings":"qSAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,MAAtB,QAAoC,YAApC;;AAEA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAAmE,8BAAnE;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;;;;;;;;;;;;;;;;;;;;AAoBA,WAAaC,SAAb,GADCF,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BUG,IAAAA,UA9BV,GA8BuB,UAACC,KAAD,EAAmD;AACtE,UAAQC,MAAR,GAAqCD,KAArC,CAAQC,MAAR,CAAgBC,OAAhB,GAAqCF,KAArC,CAAgBE,OAAhB,CAA4BC,IAA5B,iCAAqCH,KAArC;;AAEA,UAAMI,IAAI,GAAGH,MAAM;AACjB,oCAAM,YAAS,mBAAf,EAAmC,SAAS,EAAEJ,MAAM,CAACO,IAAP,CAAY,MAAKC,KAAjB,CAA9C,EAAuE,OAAO,EAAEJ,MAAM,CAACK,OAAvF;AACGL,MAAAA,MAAM,CAACM,KADV,CADiB;;AAIf,UAJJ;;AAMA,UAAMC,KAAK,GAAGP,MAAM;AAClB,oCAAM,SAAS,EAAEJ,MAAM,CAACY,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,oCAAM,YAAS,kBAAf,EAAkC,SAAS,EAAER,MAAM,CAACW,KAAP,CAAa,MAAKH,KAAlB,CAA7C,EAAuE,OAAO,EAAEH,OAAhF;AACE,0BAAC,SAAD,OADF,CADF,CADkB;;;AAMhB,UANJ;;AAQA;AACE,4BAAC,MAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEL,MAAM,CAACa,OAAP,EAApC;AACE,8CAAK,YAAS,iBAAd,IAAoCP,IAApC,IAA0C,SAAS,EAAEN,MAAM,CAACc,IAAP,CAAY,MAAKN,KAAjB,CAArD,EAA8E,GAAG,EAAE,MAAKO,WAAxF;AACE,0CAAO,MAAKZ,KAAL,CAAWa,QAAlB,CADF;AAEGT,QAAAA,IAFH;AAGGI,QAAAA,KAHH,CADF,CADF;;;;AASD,KAxDH,uDAmBSM,MAnBT,GAmBE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACT,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,oBAAC,aAAD,EAAmB,MAAI,CAACL,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,CA5BH,oBAA+BX,KAAK,CAAC2B,SAArC,WACgBC,SADhB,GAC4B,EACxB;AACJ;AACA,KACIf,MAAM,EAAEX,KAAK,CAAC,EACZiB,KAAK,EAAEhB,MAAM,CAAC0B,UADF,EAEZX,OAAO,EAAEjB,IAAI,CAAC4B,UAFF,EAAD,CAJW,EAQxB;AACJ;AACA,KACIJ,QAAQ,EAAEtB,MAAM,CAAC0B,UAXO,EAYxBf,OAAO,EAAEb,IAZe,EAD5B","sourcesContent":["import React from 'react';\nimport { func, shape, string } from 'prop-types';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './ToastView.styles';\n\nexport interface ToastViewProps extends CommonProps {\n  /**\n   * Toast content\n   */\n  children?: string;\n  /**\n   * Adds action handling and close icon for toast\n   */\n  action?: {\n    label: string;\n    handler: () => void;\n  } | null;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\n@rootNode\nexport class ToastView extends React.Component<ToastViewProps> {\n  public static propTypes = {\n    /**\n     * Adds action handling and close icon for toast\n     */\n    action: shape({\n      label: string.isRequired,\n      handler: func.isRequired,\n    }),\n    /**\n     * Toast content\n     */\n    children: string.isRequired,\n    onClose: func,\n  };\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 <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<ToastViewProps>) => {\n    const { action, onClose, ...rest } = props;\n\n    const link = action ? (\n      <span data-tid=\"ToastView__action\" className={styles.link(this.theme)} onClick={action.handler}>\n        {action.label}\n      </span>\n    ) : null;\n\n    const close = action ? (\n      <span className={styles.closeWrapper(this.theme)}>\n        <span data-tid=\"ToastView__close\" className={styles.close(this.theme)} onClick={onClose}>\n          <CrossIcon />\n        </span>\n      </span>\n    ) : null;\n\n    return (\n      <ZIndex priority=\"Toast\" className={styles.wrapper()}>\n        <div data-tid=\"ToastView__root\" {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>\n          <span>{this.props.children}</span>\n          {link}\n          {close}\n        </div>\n      </ZIndex>\n    );\n  };\n}\n"]}

package/components/Toast/ToastView/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Toast\\ToastView.js",
+  "main": "../../../cjs/components/Toast/ToastView.js",
   "module": "ToastView",
-  "types": "..\\ToastView.d.ts",
+  "types": "../ToastView.d.ts",
   "sideEffects": false
 }

package/components/Toast/ToastView.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface ToastViewProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface ToastViewProps extends CommonProps {
     /**
      * Toast content
      */
@@ -31,6 +32,7 @@ export declare class ToastView extends React.Component<ToastViewProps> {
         onClose: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     private theme;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
 }

package/components/Toast/ToastView.styles/ToastView.styles.js

@@ -1,71 +1,44 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      height: 8px;\n      line-height: 0;\n      margin: -12px -8px;\n      padding: 12px 8px;\n      text-align: center;\n      width: 8px;\n\n      &:hover {\n        color: ", ";\n      }\n    "]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      margin: -10px 24px -11px 4px;\n      padding: 10px 10px 11px;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      line-height: 40px;\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: 2px;\n      color: ", ";\n      display: inline-block;\n      font-size: 14px;\n      opacity: 1;\n      padding: 10px 20px 11px;\n      position: relative;\n      top: 20px;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var getVerticalPaddingsWithCompensation = function getVerticalPaddingsWithCompensation(theme) {
+  var toastPaddingY = theme.toastPaddingY,
+      fontFamilyCompensationBaseline = theme.fontFamilyCompensationBaseline;
+  var paddingY = parseInt(toastPaddingY);
+  var compensation = parseInt(fontFamilyCompensationBaseline);
+  return [paddingY - compensation + "px", paddingY + compensation + "px"];
+};
 
-import { css, memoizeStyle } from "..\\..\\..\\lib\\theming\\Emotion";
-var styles = {
+export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject(), t.toastBg, t.toastColor);
+    var _getVerticalPaddingsW = getVerticalPaddingsWithCompensation(t),
+        paddingTop = _getVerticalPaddingsW[0],
+        paddingBottom = _getVerticalPaddingsW[1];
+
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      border: ", ";\n      color: ", ";\n      display: inline-flex;\n      font-size: ", ";\n      line-height: ", ";\n      opacity: 1;\n      padding: ", " ", " ", ";\n      position: relative;\n      top: ", ";\n    "])), t.toastBg, t.toastBorderRadius, t.toastBorder, t.toastColor, t.toastFontSize, t.toastLineHeight, paddingTop, t.toastPaddingX, paddingBottom, t.toastTop);
   },
   wrapper: function wrapper() {
-    return css(_templateObject2());
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n    "])));
   },
-  closeWrapper: function closeWrapper() {
-    return css(_templateObject3());
+  closeWrapper: function closeWrapper(t) {
+    var _getVerticalPaddingsW2 = getVerticalPaddingsWithCompensation(t),
+        paddingTop = _getVerticalPaddingsW2[0],
+        paddingBottom = _getVerticalPaddingsW2[1];
+
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      margin: -", " -", " -", " -", ";\n    "])), paddingTop, t.toastPaddingX, paddingBottom, t.toastClosePadding);
   },
   link: function link(t) {
-    return css(_templateObject4(), t.toastLinkColor);
+    var _getVerticalPaddingsW3 = getVerticalPaddingsWithCompensation(t),
+        paddingTop = _getVerticalPaddingsW3[0],
+        paddingBottom = _getVerticalPaddingsW3[1];
+
+    var marginRight = Math.round(parseInt(t.toastPaddingX) * 1.5) + "px";
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", " 0 ", ";\n\n      &:hover {\n        text-decoration: underline;\n      }\n    "])), t.toastLinkColor, paddingTop, marginRight, paddingBottom, t.toastPaddingX, paddingTop, paddingBottom);
   },
   close: function close(t) {
-    return css(_templateObject5(), t.toastCloseColor, t.toastCloseHoverColor);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      box-sizing: content-box !important; // fix \"reset.css\" problem\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      height: ", ";\n      line-height: 0;\n      padding: ", ";\n      text-align: center;\n      width: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.toastCloseColor, t.toastCloseSize, t.toastClosePadding, t.toastCloseSize, t.toastCloseHoverColor);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Toast/ToastView.styles/ToastView.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.styles.ts"],"names":["css","memoizeStyle","styles","root","t","toastBg","toastColor","wrapper","closeWrapper","link","toastLinkColor","close","toastCloseColor","toastCloseHoverColor","jsStyles"],"mappings":"8xDAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,OADlB;;AAGWD,IAAAA,CAAC,CAACE,UAHb;;;;;;;;AAWD,GAbY;;AAebC,EAAAA,OAfa,qBAeH;AACR,WAAOP,GAAP;;;;;;;;AAQD,GAxBY;;AA0BbQ,EAAAA,YA1Ba,0BA0BE;AACb,WAAOR,GAAP;;;;;;;AAOD,GAlCY;;AAoCbS,EAAAA,IApCa,gBAoCRL,CApCQ,EAoCE;AACb,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACM,cADb;;;;;;;;;;;AAYD,GAjDY;;AAmDbC,EAAAA,KAnDa,iBAmDPP,CAnDO,EAmDG;AACd,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACQ,eADb;;;;;;;;;;;AAYaR,IAAAA,CAAC,CAACS,oBAZf;;;AAeD,GAnEY,EAAf;;;AAsEA,OAAO,IAAMC,QAAQ,GAAGb,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      background: ${t.toastBg};\r\n      border-radius: 2px;\r\n      color: ${t.toastColor};\r\n      display: inline-block;\r\n      font-size: 14px;\r\n      opacity: 1;\r\n      padding: 10px 20px 11px;\r\n      position: relative;\r\n      top: 20px;\r\n    `;\r\n  },\r\n\r\n  wrapper() {\r\n    return css`\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      height: 0;\r\n      text-align: center;\r\n    `;\r\n  },\r\n\r\n  closeWrapper() {\r\n    return css`\r\n      display: inline-block;\r\n      position: absolute;\r\n      top: 0;\r\n      bottom: 0;\r\n      line-height: 40px;\r\n    `;\r\n  },\r\n\r\n  link(t: Theme) {\r\n    return css`\r\n      color: ${t.toastLinkColor};\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      font-weight: 600;\r\n      margin: -10px 24px -11px 4px;\r\n      padding: 10px 10px 11px;\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n      }\r\n    `;\r\n  },\r\n\r\n  close(t: Theme) {\r\n    return css`\r\n      color: ${t.toastCloseColor};\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      height: 8px;\r\n      line-height: 0;\r\n      margin: -12px -8px;\r\n      padding: 12px 8px;\r\n      text-align: center;\r\n      width: 8px;\r\n\r\n      &:hover {\r\n        color: ${t.toastCloseHoverColor};\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["ToastView.styles.ts"],"names":["css","memoizeStyle","getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","toastLinkColor","close","toastCloseColor","toastCloseSize","toastCloseHoverColor"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AAC5D,MAAQC,aAAR,GAA0DD,KAA1D,CAAQC,aAAR,CAAuBC,8BAAvB,GAA0DF,KAA1D,CAAuBE,8BAAvB;AACA,MAAMC,QAAQ,GAAGC,QAAQ,CAACH,aAAD,CAAzB;AACA,MAAMI,YAAY,GAAGD,QAAQ,CAACF,8BAAD,CAA7B;AACA,SAAO,CAAIC,QAAQ,GAAGE,YAAf,SAAoCF,QAAQ,GAAGE,YAA/C,QAAP;AACD,CALD;;AAOA,OAAO,IAAMC,MAAM,GAAGR,YAAY,CAAC;AACjCS,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,gCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,4BAAmBC,aAAnB;AACA,WAAOb,GAAP;AACgBW,IAAAA,CAAC,CAACG,OADlB;AAEmBH,IAAAA,CAAC,CAACI,iBAFrB;AAGYJ,IAAAA,CAAC,CAACK,WAHd;AAIWL,IAAAA,CAAC,CAACM,UAJb;;AAMeN,IAAAA,CAAC,CAACO,aANjB;AAOiBP,IAAAA,CAAC,CAACQ,eAPnB;;AASaP,IAAAA,UATb,EAS2BD,CAAC,CAACS,aAT7B,EAS8CP,aAT9C;;AAWSF,IAAAA,CAAC,CAACU,QAXX;;AAaD,GAhBgC;;AAkBjCC,EAAAA,OAlBiC,qBAkBvB;AACR,WAAOtB,GAAP;;;;;;;;AAQD,GA3BgC;;AA6BjCuB,EAAAA,YA7BiC,wBA6BpBZ,CA7BoB,EA6BV;AACrB,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,WAAOb,GAAP;;AAEaY,IAAAA,UAFb,EAE4BD,CAAC,CAACS,aAF9B,EAEgDP,aAFhD,EAEkEF,CAAC,CAACa,iBAFpE;;AAID,GAnCgC;;AAqCjCC,EAAAA,IArCiC,gBAqC5Bd,CArC4B,EAqClB;AACb,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,QAAMa,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWrB,QAAQ,CAACI,CAAC,CAACS,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,WAAOpB,GAAP;AACWW,IAAAA,CAAC,CAACkB,cADb;;;;;AAMajB,IAAAA,UANb,EAM2Bc,WAN3B,EAM2Cb,aAN3C,EAM4DF,CAAC,CAACS,aAN9D;;AAQaR,IAAAA,UARb,EAQ6BC,aAR7B;;;;;;AAcD,GAtDgC;;AAwDjCiB,EAAAA,KAxDiC,iBAwD3BnB,CAxD2B,EAwDjB;AACd,WAAOX,GAAP;;AAEWW,IAAAA,CAAC,CAACoB,eAFb;;;AAKYpB,IAAAA,CAAC,CAACqB,cALd;;AAOarB,IAAAA,CAAC,CAACa,iBAPf;;AASWb,IAAAA,CAAC,CAACqB,cATb;;;AAYarB,IAAAA,CAAC,CAACsB,oBAZf;;;AAeD,GAxEgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\n  const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\n  const paddingY = parseInt(toastPaddingY);\n  const compensation = parseInt(fontFamilyCompensationBaseline);\n  return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    return css`\n      background: ${t.toastBg};\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      color: ${t.toastColor};\n      display: inline-flex;\n      font-size: ${t.toastFontSize};\n      line-height: ${t.toastLineHeight};\n      opacity: 1;\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n      position: relative;\n      top: ${t.toastTop};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\n    return css`\n      color: ${t.toastLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${paddingTop} 0 ${paddingBottom};\n\n      &:hover {\n        text-decoration: underline;\n      }\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      box-sizing: content-box !important; // fix \"reset.css\" problem\n      color: ${t.toastCloseColor};\n      cursor: pointer;\n      display: inline-block;\n      height: ${t.toastCloseSize};\n      line-height: 0;\n      padding: ${t.toastClosePadding};\n      text-align: center;\n      width: ${t.toastCloseSize};\n\n      &:hover {\n        color: ${t.toastCloseHoverColor};\n      }\n    `;\n  },\n});\n"]}

package/components/Toast/ToastView.styles/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Toast\\ToastView.styles.js",
+  "main": "../../../cjs/components/Toast/ToastView.styles.js",
   "module": "ToastView.styles",
-  "types": "..\\ToastView.styles.d.ts",
+  "types": "../ToastView.styles.d.ts",
   "sideEffects": false
 }

package/components/Toast/ToastView.styles.d.ts

@@ -1,7 +1,8 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
     wrapper(): string;
-    closeWrapper(): string;
-    link(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    close(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
+    closeWrapper(t: Theme): string;
+    link(t: Theme): string;
+    close(t: Theme): string;
 };

package/components/Toast/index/index.js

@@ -1 +1 @@
-export * from "..\\Toast";
+export * from "../Toast";

package/components/Toast/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Toast';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Toast';\n"]}

package/components/Toast/index/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Toast\\index.js",
+  "main": "../../../cjs/components/Toast/index.js",
   "module": "index",
-  "types": "..\\index.d.ts",
+  "types": "../index.d.ts",
   "sideEffects": false
 }

package/components/Toast/package.json

@@ -1,5 +1,5 @@
 {
-  "main": "..\\..\\cjs\\components\\Toast\\index.js",
+  "main": "../../cjs/components/Toast/index.js",
   "module": "index",
   "types": "index.d.ts",
   "sideEffects": false

package/components/Toggle/Toggle/Toggle.js

@@ -1,25 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
-import { tabListener } from "..\\..\\..\\lib\\events\\tabListener";
-import { ThemeContext } from "..\\..\\..\\lib\\theming\\ThemeContext";
-import { jsStyles } from "..\\Toggle.styles";
-export var Toggle =
-/*#__PURE__*/
-function (_React$Component) {
+import warning from 'warning';
+import { keyListener } from "../../../lib/events/keyListener";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { styles, globalClasses } from "../Toggle.styles";
+var colorWarningShown = false;
+export
+/**
+* _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+*/
+var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Toggle, _React$Component);
 
   function Toggle(props) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
-    _this.theme = void 0;
     _this.input = null;
 
     _this.focus = function () {
       if (_this.input) {
-        tabListener.isTabPressed = true;
+        keyListener.isTabPressed = true;
 
         _this.input.focus();
       }
@@ -50,7 +59,7 @@ function (_React$Component) {
         _this.props.onFocus(event);
       }
 
-      if (tabListener.isTabPressed) {
+      if (keyListener.isTabPressed) {
         _this.setState({
           focusByTab: true
         });
@@ -78,61 +87,81 @@ function (_React$Component) {
 
   _proto.componentDidMount = function componentDidMount() {
     if (this.props.autoFocus) {
-      tabListener.isTabPressed = true;
+      keyListener.isTabPressed = true;
       this.focus();
     }
   }
-  /**
-   * @public
-   */
+  /**
+  * @public
+  */
   ;
 
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
       return _this2.renderMain();
     });
   };
 
   _proto.renderMain = function renderMain() {
-    var _cn, _cn2;
+    var _cx, _cx2, _cx4, _cx5, _cx6;
 
     var _this$props = this.props,
+        children = _this$props.children,
+        captionPosition = _this$props.captionPosition,
         warning = _this$props.warning,
         error = _this$props.error,
         loading = _this$props.loading,
-        color = _this$props.color;
+        color = _this$props.color,
+        id = _this$props.id;
     var disabled = this.props.disabled || loading;
     var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
-    var containerClassNames = cn(jsStyles.container(this.theme), (_cn = {}, _cn[jsStyles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cn[jsStyles.isLoading(this.theme)] = !!loading, _cn[jsStyles.isWarning(this.theme)] = !color && !!warning, _cn[jsStyles.isError(this.theme)] = !color && !!error, _cn));
-    return React.createElement("label", {
-      className: cn(jsStyles.wrapper(this.theme), (_cn2 = {}, _cn2[jsStyles.wrapperDisabled(this.theme)] = !!disabled, _cn2))
-    }, React.createElement("input", {
+    var containerClassNames = cx(styles.container(this.theme), (_cx = {}, _cx[styles.containerDisabled(this.theme)] = !!disabled, _cx[globalClasses.container] = true, _cx[globalClasses.containerDisabled] = !!disabled, _cx[globalClasses.containerLoading] = loading, _cx));
+    var labelClassNames = cx(styles.root(this.theme), (_cx2 = {}, _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2));
+    var caption = null;
+
+    if (children) {
+      var _cx3;
+
+      var captionClass = cx(styles.caption(this.theme), (_cx3 = {}, _cx3[styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[styles.disabledCaption(this.theme)] = !!disabled, _cx3));
+      caption = /*#__PURE__*/React.createElement("span", {
+        className: captionClass
+      }, children);
+    }
+
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("label", {
+      className: labelClassNames
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.button(this.theme), (_cx4 = {}, _cx4[styles.buttonRight()] = captionPosition === 'left', _cx4[styles.isWarning(this.theme)] = !!warning, _cx4[styles.isError(this.theme)] = !!error, _cx4[styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4))
+    }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: checked,
       onChange: this.handleChange,
-      className: jsStyles.input(this.theme),
+      className: styles.input(this.theme),
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       ref: this.inputRef,
-      disabled: disabled
-    }), React.createElement("div", {
+      disabled: disabled,
+      id: id
+    }), /*#__PURE__*/React.createElement("div", {
       className: containerClassNames,
-      style: checked && color ? {
+      style: checked && color && !disabled ? {
         backgroundColor: color,
-        borderColor: color,
         boxShadow: "inset 0 0 0 1px " + color
       } : undefined
-    }, React.createElement("div", {
-      className: jsStyles.activeBackground(),
-      style: checked && color ? {
-        backgroundColor: color
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.activeBackground(), globalClasses.background, (_cx5 = {}, _cx5[styles.activeBackgroundLoading(this.theme)] = loading, _cx5[styles.disabledBackground(this.theme)] = disabled, _cx5)),
+      style: checked && color && !disabled ? {
+        backgroundColor: color,
+        boxShadow: "inset 0 0 0 1px " + color
       } : undefined
-    })), React.createElement("div", {
-      className: jsStyles.handle(this.theme)
-    }));
+    })), /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.handle(this.theme), globalClasses.handle, (_cx6 = {}, _cx6[styles.handleDisabled(this.theme)] = disabled, _cx6))
+    })), caption));
   };
 
   _proto.isUncontrolled = function isUncontrolled() {
@@ -140,18 +169,22 @@ function (_React$Component) {
   };
 
   return Toggle;
-}(React.Component);
-Toggle.__KONTUR_REACT_UI__ = 'Toggle';
-Toggle.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Toggle', _class2.propTypes = {
   checked: PropTypes.bool,
   defaultChecked: PropTypes.bool,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   loading: PropTypes.bool,
   warning: PropTypes.bool,
-  onValueChange: PropTypes.func
-};
-Toggle.defaultProps = {
+  onValueChange: PropTypes.func,
+  color: function color(props) {
+    if (props.color && !colorWarningShown) {
+      warning(false, "[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. ");
+      colorWarningShown = true;
+    }
+  }
+}, _class2.defaultProps = {
   disabled: false,
-  loading: false
-};
+  loading: false,
+  captionPosition: 'right'
+}, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","cn","tabListener","ThemeContext","jsStyles","Toggle","props","theme","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","warning","error","loading","color","disabled","containerClassNames","container","focused","isLoading","isWarning","isError","wrapper","wrapperDisabled","backgroundColor","borderColor","boxShadow","undefined","activeBackground","handle","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { tabListener } from '../../lib/events/tabListener';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './Toggle.styles';\r\n\r\nexport interface ToggleProps {\r\n  checked?: boolean;\r\n  defaultChecked?: boolean;\r\n  disabled?: boolean;\r\n  onValueChange?: (value: boolean) => void;\r\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n  warning?: boolean;\r\n  error?: boolean;\r\n  loading?: boolean;\r\n  autoFocus?: boolean;\r\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\r\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\r\n  color?: React.CSSProperties['color'];\r\n}\r\n\r\nexport interface ToggleState {\r\n  checked?: boolean;\r\n  focusByTab?: boolean;\r\n}\r\n\r\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\r\n  public static __KONTUR_REACT_UI__ = 'Toggle';\r\n\r\n  public static propTypes = {\r\n    checked: PropTypes.bool,\r\n    defaultChecked: PropTypes.bool,\r\n    disabled: PropTypes.bool,\r\n    error: PropTypes.bool,\r\n    loading: PropTypes.bool,\r\n    warning: PropTypes.bool,\r\n    onValueChange: PropTypes.func,\r\n  };\r\n\r\n  public static defaultProps = {\r\n    disabled: false,\r\n    loading: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private input: HTMLInputElement | null = null;\r\n\r\n  constructor(props: ToggleProps) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      focusByTab: false,\r\n      checked: props.defaultChecked,\r\n    };\r\n  }\r\n\r\n  public componentDidMount() {\r\n    if (this.props.autoFocus) {\r\n      tabListener.isTabPressed = true;\r\n      this.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus = () => {\r\n    if (this.input) {\r\n      tabListener.isTabPressed = true;\r\n      this.input.focus();\r\n    }\r\n  };\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 { warning, error, loading, color } = this.props;\r\n    const disabled = this.props.disabled || loading;\r\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\r\n\r\n    const containerClassNames = cn(jsStyles.container(this.theme), {\r\n      [jsStyles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\r\n      [jsStyles.isLoading(this.theme)]: !!loading,\r\n      [jsStyles.isWarning(this.theme)]: !color && !!warning,\r\n      [jsStyles.isError(this.theme)]: !color && !!error,\r\n    });\r\n\r\n    return (\r\n      <label\r\n        className={cn(jsStyles.wrapper(this.theme), {\r\n          [jsStyles.wrapperDisabled(this.theme)]: !!disabled,\r\n        })}\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          checked={checked}\r\n          onChange={this.handleChange}\r\n          className={jsStyles.input(this.theme)}\r\n          onFocus={this.handleFocus}\r\n          onBlur={this.handleBlur}\r\n          ref={this.inputRef}\r\n          disabled={disabled}\r\n        />\r\n        <div\r\n          className={containerClassNames}\r\n          style={\r\n            checked && color\r\n              ? {\r\n                  backgroundColor: color,\r\n                  borderColor: color,\r\n                  boxShadow: `inset 0 0 0 1px ${color}`,\r\n                }\r\n              : undefined\r\n          }\r\n        >\r\n          <div\r\n            className={jsStyles.activeBackground()}\r\n            style={checked && color ? { backgroundColor: color } : undefined}\r\n          />\r\n        </div>\r\n        <div className={jsStyles.handle(this.theme)} />\r\n      </label>\r\n    );\r\n  }\r\n\r\n  private inputRef = (element: HTMLInputElement) => {\r\n    this.input = element;\r\n  };\r\n\r\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (this.props.onValueChange) {\r\n      this.props.onValueChange(event.target.checked);\r\n    }\r\n\r\n    if (this.isUncontrolled()) {\r\n      this.setState({\r\n        checked: event.target.checked,\r\n      });\r\n    }\r\n\r\n    if (this.props.onChange) {\r\n      this.props.onChange(event);\r\n    }\r\n  };\r\n\r\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    if (this.props.onFocus) {\r\n      this.props.onFocus(event);\r\n    }\r\n\r\n    if (tabListener.isTabPressed) {\r\n      this.setState({ focusByTab: true });\r\n    }\r\n  };\r\n\r\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    if (this.props.onBlur) {\r\n      this.props.onBlur(event);\r\n    }\r\n    this.setState({\r\n      focusByTab: false,\r\n    });\r\n  };\r\n\r\n  private isUncontrolled() {\r\n    return this.props.checked === undefined;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","styles","globalClasses","colorWarningShown","Toggle","props","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","captionPosition","error","loading","color","id","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\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, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение `children` относительно переключателя.\n   * @default 'right'\n   */\n  captionPosition: 'left' | 'right';\n  /**\n   * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n   * @default false\n   */\n  checked?: boolean;\n  /**\n   * Делает `тогл` включенным по умолчанию.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Отключает `тогл`.\n   */\n  disabled?: boolean;\n  /**\n   * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n   */\n  onValueChange?: (value: boolean) => void;\n  /**\n   * Событие вызывающееся при клике на `тогл`.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Cостояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Cостояние валидации при ошибке.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Добавляет стили для состояния `loading` и отключает `тогл`.\n   */\n  loading?: boolean;\n  /**\n   * Если true, выставляет фокус на `тогле` после загрузки страницы.\n   */\n  autoFocus?: boolean;\n  /**\n   * Событие вызывающееся, когда `тогл` получает фокус.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Событие вызывающееся, когда `тогл` теряет фокус.\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n   */\n  color?: React.CSSProperties['color'];\n  /**\n   * HTML-атрибут `id` для передачи во внутренний `<input />`.\n   */\n  id?: string;\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\n/**\n * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color(props: ToggleProps) {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\n\n  public static defaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n  };\n\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\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 { children, captionPosition, warning, error, loading, color, id } = this.props;\n    const disabled = this.props.disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = cx(styles.container(this.theme), {\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = cx(styles.root(this.theme), {\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = cx(styles.caption(this.theme), {\n        [styles.captionLeft(this.theme)]: captionPosition === 'left',\n        [styles.disabledCaption(this.theme)]: !!disabled,\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <label className={labelClassNames}>\n          <div\n            className={cx(styles.button(this.theme), {\n              [styles.buttonRight()]: captionPosition === 'left',\n              [styles.isWarning(this.theme)]: !!warning,\n              [styles.isError(this.theme)]: !!error,\n              [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              checked={checked}\n              onChange={this.handleChange}\n              className={styles.input(this.theme)}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              ref={this.inputRef}\n              disabled={disabled}\n              id={id}\n            />\n            <div\n              className={containerClassNames}\n              style={\n                checked && color && !disabled\n                  ? {\n                      backgroundColor: color,\n                      boxShadow: `inset 0 0 0 1px ${color}`,\n                    }\n                  : undefined\n              }\n            >\n              <div\n                className={cx(styles.activeBackground(), globalClasses.background, {\n                  [styles.activeBackgroundLoading(this.theme)]: loading,\n                  [styles.disabledBackground(this.theme)]: disabled,\n                })}\n                style={\n                  checked && color && !disabled\n                    ? {\n                        backgroundColor: color,\n                        boxShadow: `inset 0 0 0 1px ${color}`,\n                      }\n                    : undefined\n                }\n              />\n            </div>\n            <div\n              className={cx(styles.handle(this.theme), globalClasses.handle, {\n                [styles.handleDisabled(this.theme)]: disabled,\n              })}\n            />\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (keyListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n    this.setState({\n      focusByTab: false,\n    });\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"]}