@skbkontur/react-ui 0.0.0-5a76463ffc → 0.0.0-60bf3b9da8

package/cjs/components/Toast/ToastView.js

@@ -6,8 +6,12 @@ var _ZIndex = require("../../internal/ZIndex");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _rootNode = require("../../lib/rootNode");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _CloseButtonIcon = require("../../internal/CloseButtonIcon/CloseButtonIcon");
 
-var _ToastView = require("./ToastView.styles");var
+var _ToastView = require("./ToastView.styles");
+var _Toast = require("./Toast");var _excluded = ["action", "onClose"];var _class, _class2, _temp;var
 
 
 
@@ -26,8 +30,8 @@ var _ToastView = require("./ToastView.styles");var
 
 
 
-ToastView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ToastView, _React$Component);function ToastView() {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.
 
+ToastView = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ToastView, _React$Component);function ToastView() {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.
 
 
 
@@ -42,7 +46,6 @@ ToastView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
 
 
 
-    theme = void 0;_this.
 
 
 
@@ -55,34 +58,53 @@ ToastView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
 
 
 
-    renderMain = function (props) {var
-      action = props.action,onClose = props.onClose,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["action", "onClose"]);
+
+
+
+    renderMain = function (props) {
+      var action = props.action,onClose = props.onClose,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
       var link = action ? /*#__PURE__*/
-      _react.default.createElement("span", { className: _ToastView.jsStyles.link(_this.theme), onClick: action.handler },
+      _react.default.createElement("span", { "data-tid": _Toast.ToastDataTids.action, className: _ToastView.styles.link(_this.theme), onClick: action.handler },
       action.label) :
 
       null;
 
       var close = action ? /*#__PURE__*/
-      _react.default.createElement("span", { className: _ToastView.jsStyles.closeWrapper(_this.theme) }, /*#__PURE__*/
-      _react.default.createElement("span", { className: _ToastView.jsStyles.close(_this.theme), onClick: onClose }, /*#__PURE__*/
+      _react.default.createElement("span", { className: _ToastView.styles.closeWrapper(_this.theme) }, /*#__PURE__*/
+      _react.default.createElement("span", { "data-tid": _Toast.ToastDataTids.close, className: _ToastView.styles.close(_this.theme), onClick: onClose }, /*#__PURE__*/
       _react.default.createElement(_CrossIcon.CrossIcon, null))) :
 
 
       null;
 
+      if ((0, _ThemeHelpers.isTheme2022)(_this.theme) && close) {
+        close = /*#__PURE__*/
+        _react.default.createElement("span", { className: _ToastView.styles.closeWrapper(_this.theme) }, /*#__PURE__*/
+        _react.default.createElement(_CloseButtonIcon.CloseButtonIcon, {
+          "data-tid": _Toast.ToastDataTids.close,
+          onClick: onClose,
+          size: parseInt(_this.theme.toastCloseSize),
+          side: 40,
+          color: _this.theme.toastCloseColor,
+          colorHover: _this.theme.toastCloseHoverColor,
+          tabbable: false }));
+
+
+
+      }
+
       return /*#__PURE__*/(
-        _react.default.createElement(_ZIndex.ZIndex, { priority: "Toast", className: _ToastView.jsStyles.wrapper() }, /*#__PURE__*/
-        _react.default.createElement("div", (0, _extends2.default)({ "data-tid": "ToastView__root" }, rest, { className: _ToastView.jsStyles.root(_this.theme) }), /*#__PURE__*/
+        _react.default.createElement(_ZIndex.ZIndex, { priority: "Toast", className: _ToastView.styles.wrapper(_this.theme) }, /*#__PURE__*/
+        _react.default.createElement("div", (0, _extends2.default)({ "data-tid": _Toast.ToastDataTids.toastView }, rest, { className: _ToastView.styles.root(_this.theme), ref: _this.setRootNode }), /*#__PURE__*/
         _react.default.createElement("span", null, _this.props.children),
         link,
         close)));
 
 
 
-    };return _this;}var _proto = ToastView.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this2.props, _this2.renderMain);});};return ToastView;}(_react.default.Component);exports.ToastView = ToastView;ToastView.propTypes = { /**
-   * Adds action handling and close icon for toast
-   */action: (0, _propTypes.shape)({ label: _propTypes.string.isRequired, handler: _propTypes.func.isRequired }), /**
-   * Toast content
-   */children: _propTypes.string.isRequired, onClose: _propTypes.func };
+    };return _this;}var _proto = ToastView.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this2.props, _this2.renderMain);});};return ToastView;}(_react.default.Component), _class2.propTypes = { /**
+   * Adds action handling and close icon for toast
+   */action: (0, _propTypes.shape)({ label: _propTypes.string.isRequired, handler: _propTypes.func.isRequired }), /**
+   * Toast content
+   */children: _propTypes.string.isRequired, onClose: _propTypes.func }, _temp)) || _class;exports.ToastView = ToastView;

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.tsx"],"names":["ToastView","theme","renderMain","props","action","onClose","rest","link","jsStyles","handler","label","close","closeWrapper","wrapper","root","children","render","React","Component","propTypes","string","isRequired","func"],"mappings":"mcAAA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA,+C;;;;;;;;;;;;;;;;;;;AAmBaA,S;;;;;;;;;;;;;;;;AAgBHC,IAAAA,K;;;;;;;;;;;;;AAaAC,IAAAA,U,GAAa,UAACC,KAAD,EAAmD;AAC9DC,MAAAA,MAD8D,GACjCD,KADiC,CAC9DC,MAD8D,CACtDC,OADsD,GACjCF,KADiC,CACtDE,OADsD,CAC1CC,IAD0C,+CACjCH,KADiC;;AAGtE,UAAMI,IAAI,GAAGH,MAAM;AACjB,6CAAM,SAAS,EAAEI,oBAASD,IAAT,CAAc,MAAKN,KAAnB,CAAjB,EAA4C,OAAO,EAAEG,MAAM,CAACK,OAA5D;AACGL,MAAAA,MAAM,CAACM,KADV,CADiB;;AAIf,UAJJ;;AAMA,UAAMC,KAAK,GAAGP,MAAM;AAClB,6CAAM,SAAS,EAAEI,oBAASI,YAAT,CAAsB,MAAKX,KAA3B,CAAjB;AACE,6CAAM,SAAS,EAAEO,oBAASG,KAAT,CAAe,MAAKV,KAApB,CAAjB,EAA6C,OAAO,EAAEI,OAAtD;AACE,mCAAC,oBAAD,OADF,CADF,CADkB;;;AAMhB,UANJ;;AAQA;AACE,qCAAC,cAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEG,oBAASK,OAAT,EAApC;AACE,qEAAK,YAAS,iBAAd,IAAoCP,IAApC,IAA0C,SAAS,EAAEE,oBAASM,IAAT,CAAc,MAAKb,KAAnB,CAArD;AACE,mDAAO,MAAKE,KAAL,CAAWY,QAAlB,CADF;AAEGR,QAAAA,IAFH;AAGGI,QAAAA,KAHH,CADF,CADF;;;;AASD,K,uDArCMK,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAAAf,KAAK,EAAI,CACR,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,6BAAC,4BAAD,EAAmB,MAAI,CAACE,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,C,oBA3B4Be,eAAMC,S,gCAAxBlB,S,CACGmB,S,GAAY,EACxB;AACJ;AACA,KACIf,MAAM,EAAE,sBAAM,EACZM,KAAK,EAAEU,kBAAOC,UADF,EAEZZ,OAAO,EAAEa,gBAAKD,UAFF,EAAN,CAJgB,EAQxB;AACJ;AACA,KACIN,QAAQ,EAAEK,kBAAOC,UAXO,EAYxBhB,OAAO,EAAEiB,eAZe,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\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './ToastView.styles';\r\n\r\nexport interface ToastViewProps extends CommonProps {\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 <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain = (props: CommonWrapperRestProps<ToastViewProps>) => {\r\n    const { action, onClose, ...rest } = 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(this.theme)}>\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\" {...rest} className={jsStyles.root(this.theme)}>\r\n          <span>{this.props.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":["ToastView","rootNode","renderMain","props","action","onClose","rest","link","ToastDataTids","styles","theme","handler","label","close","closeWrapper","parseInt","toastCloseSize","toastCloseColor","toastCloseHoverColor","wrapper","toastView","root","setRootNode","children","render","React","Component","propTypes","string","isRequired","func"],"mappings":"mcAAA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,gC;;;;;;;;;;;;;;;;;;;;AAoBaA,S,OADZC,kB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BSC,IAAAA,U,GAAa,UAACC,KAAD,EAAmD;AACtE,UAAQC,MAAR,GAAqCD,KAArC,CAAQC,MAAR,CAAgBC,OAAhB,GAAqCF,KAArC,CAAgBE,OAAhB,CAA4BC,IAA5B,+CAAqCH,KAArC;;AAEA,UAAMI,IAAI,GAAGH,MAAM;AACjB,6CAAM,YAAUI,qBAAcJ,MAA9B,EAAsC,SAAS,EAAEK,kBAAOF,IAAP,CAAY,MAAKG,KAAjB,CAAjD,EAA0E,OAAO,EAAEN,MAAM,CAACO,OAA1F;AACGP,MAAAA,MAAM,CAACQ,KADV,CADiB;;AAIf,UAJJ;;AAMA,UAAIC,KAAK,GAAGT,MAAM;AAChB,6CAAM,SAAS,EAAEK,kBAAOK,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,6CAAM,YAAUF,qBAAcK,KAA9B,EAAqC,SAAS,EAAEJ,kBAAOI,KAAP,CAAa,MAAKH,KAAlB,CAAhD,EAA0E,OAAO,EAAEL,OAAnF;AACE,mCAAC,oBAAD,OADF,CADF,CADgB;;;AAMd,UANJ;;AAQA,UAAI,+BAAY,MAAKK,KAAjB,KAA2BG,KAA/B,EAAsC;AACpCA,QAAAA,KAAK;AACH,+CAAM,SAAS,EAAEJ,kBAAOK,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,qCAAC,gCAAD;AACE,sBAAUF,qBAAcK,KAD1B;AAEE,UAAA,OAAO,EAAER,OAFX;AAGE,UAAA,IAAI,EAAEU,QAAQ,CAAC,MAAKL,KAAL,CAAWM,cAAZ,CAHhB;AAIE,UAAA,IAAI,EAAE,EAJR;AAKE,UAAA,KAAK,EAAE,MAAKN,KAAL,CAAWO,eALpB;AAME,UAAA,UAAU,EAAE,MAAKP,KAAL,CAAWQ,oBANzB;AAOE,UAAA,QAAQ,EAAE,KAPZ,GADF,CADF;;;;AAaD;;AAED;AACE,qCAAC,cAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAET,kBAAOU,OAAP,CAAe,MAAKT,KAApB,CAApC;AACE,qEAAK,YAAUF,qBAAcY,SAA7B,IAA4Cd,IAA5C,IAAkD,SAAS,EAAEG,kBAAOY,IAAP,CAAY,MAAKX,KAAjB,CAA7D,EAAsF,GAAG,EAAE,MAAKY,WAAhG;AACE,mDAAO,MAAKnB,KAAL,CAAWoB,QAAlB,CADF;AAEGhB,QAAAA,IAFH;AAGGM,QAAAA,KAHH,CADF,CADF;;;;AASD,K,uDArDMW,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACd,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,6BAAC,4BAAD,EAAmB,MAAI,CAACP,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,C,oBA5B4BuB,eAAMC,S,WACrBC,S,GAAY,EACxB;AACJ;AACA,KACIvB,MAAM,EAAE,sBAAM,EACZQ,KAAK,EAAEgB,kBAAOC,UADF,EAEZlB,OAAO,EAAEmB,gBAAKD,UAFF,EAAN,CAJgB,EAQxB;AACJ;AACA,KACIN,QAAQ,EAAEK,kBAAOC,UAXO,EAYxBxB,OAAO,EAAEyB,eAZe,E","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';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles } from './ToastView.styles';\nimport { ToastDataTids } from './Toast';\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={ToastDataTids.action} className={styles.link(this.theme)} onClick={action.handler}>\n        {action.label}\n      </span>\n    ) : null;\n\n    let close = action ? (\n      <span className={styles.closeWrapper(this.theme)}>\n        <span data-tid={ToastDataTids.close} className={styles.close(this.theme)} onClick={onClose}>\n          <CrossIcon />\n        </span>\n      </span>\n    ) : null;\n\n    if (isTheme2022(this.theme) && close) {\n      close = (\n        <span className={styles.closeWrapper(this.theme)}>\n          <CloseButtonIcon\n            data-tid={ToastDataTids.close}\n            onClick={onClose}\n            size={parseInt(this.theme.toastCloseSize)}\n            side={40}\n            color={this.theme.toastCloseColor}\n            colorHover={this.theme.toastCloseHoverColor}\n            tabbable={false}\n          />\n        </span>\n      );\n    }\n\n    return (\n      <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n        <div data-tid={ToastDataTids.toastView} {...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/cjs/components/Toast/ToastView.styles.d.ts

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

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

@@ -1,17 +1,18 @@
-"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 _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\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    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\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    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      margin: -", " -", " -", " -", ";\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\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 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "]);_templateObject = function _templateObject() {return data;};return data;}
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var getVerticalPaddingsWithCompensation = function getVerticalPaddingsWithCompensation(theme) {var
-  toastPaddingY = theme.toastPaddingY,fontFamilyCompensationBaseline = theme.fontFamilyCompensationBaseline;
+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"];
 };
 
-var styles = {
-  root: function root(t) {var _getVerticalPaddingsW =
-    getVerticalPaddingsWithCompensation(t),paddingTop = _getVerticalPaddingsW[0],paddingBottom = _getVerticalPaddingsW[1];
-    return (0, _Emotion.css)(_templateObject(),
+var styles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    var _getVerticalPaddingsW = getVerticalPaddingsWithCompensation(t),paddingTop = _getVerticalPaddingsW[0],paddingBottom = _getVerticalPaddingsW[1];
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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,
@@ -26,29 +27,32 @@ var styles = {
 
   },
 
-  wrapper: function wrapper() {
-    return (0, _Emotion.css)(_templateObject2());
+  wrapper: function wrapper(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "])),
 
 
 
 
 
 
+    t.toastBorderRadius);
 
   },
 
-  closeWrapper: function closeWrapper(t) {var _getVerticalPaddingsW2 =
-    getVerticalPaddingsWithCompensation(t),paddingTop = _getVerticalPaddingsW2[0],paddingBottom = _getVerticalPaddingsW2[1];
-    return (0, _Emotion.css)(_templateObject3(),
+  closeWrapper: function closeWrapper(t) {
+    var _getVerticalPaddingsW2 = getVerticalPaddingsWithCompensation(t),paddingTop = _getVerticalPaddingsW2[0],paddingBottom = _getVerticalPaddingsW2[1];
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      margin: -", " -", " -", " -", ";\n    "])),
 
     paddingTop, t.toastPaddingX, paddingBottom, t.toastClosePadding);
 
   },
 
-  link: function link(t) {var _getVerticalPaddingsW3 =
-    getVerticalPaddingsWithCompensation(t),paddingTop = _getVerticalPaddingsW3[0],paddingBottom = _getVerticalPaddingsW3[1];
+  link: function link(t) {
+    var _getVerticalPaddingsW3 = getVerticalPaddingsWithCompensation(t),paddingTop = _getVerticalPaddingsW3[0],paddingBottom = _getVerticalPaddingsW3[1];
     var marginRight = Math.round(parseInt(t.toastPaddingX) * 1.5) + "px";
-    return (0, _Emotion.css)(_templateObject4(),
+    var padding = (0, _ThemeHelpers.isTheme2022)(t) ? paddingTop + " " + paddingBottom : paddingTop + " 0 " + paddingBottom;
+
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])),
     t.toastLinkColor,
 
 
@@ -56,16 +60,22 @@ var styles = {
 
     paddingTop, marginRight, paddingBottom, t.toastPaddingX,
 
-    paddingTop, paddingBottom);
+    padding,
+    t.transitionDuration, t.transitionTimingFunction,
+
+    t.toastLinkBgHover,
+    t.toastLinkTextDecorationHover,
 
 
 
+    t.toastLinkBgActive);
 
 
   },
 
   close: function close(t) {
-    return (0, _Emotion.css)(_templateObject5(),
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\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,
 
 
@@ -79,7 +89,4 @@ var styles = {
     t.toastCloseHoverColor);
 
 
-  } };
-
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.styles.ts"],"names":["getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","css","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","toastLinkColor","close","toastCloseColor","toastCloseSize","toastCloseHoverColor","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AACpDC,EAAAA,aADoD,GACFD,KADE,CACpDC,aADoD,CACrCC,8BADqC,GACFF,KADE,CACrCE,8BADqC;AAE5D,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,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACuBT,IAAAA,mCAAmC,CAACS,CAAD,CAD1D,CACNC,UADM,4BACMC,aADN;AAEb,eAAOC,YAAP;AACgBH,IAAAA,CAAC,CAACI,OADlB;AAEmBJ,IAAAA,CAAC,CAACK,iBAFrB;AAGYL,IAAAA,CAAC,CAACM,WAHd;AAIWN,IAAAA,CAAC,CAACO,UAJb;;AAMeP,IAAAA,CAAC,CAACQ,aANjB;AAOiBR,IAAAA,CAAC,CAACS,eAPnB;;AASaR,IAAAA,UATb,EAS2BD,CAAC,CAACU,aAT7B,EAS8CR,aAT9C;;AAWSF,IAAAA,CAAC,CAACW,QAXX;;AAaD,GAhBY;;AAkBbC,EAAAA,OAlBa,qBAkBH;AACR,eAAOT,YAAP;;;;;;;;AAQD,GA3BY;;AA6BbU,EAAAA,YA7Ba,wBA6BAb,CA7BA,EA6BU;AACeT,IAAAA,mCAAmC,CAACS,CAAD,CADlD,CACdC,UADc,6BACFC,aADE;AAErB,eAAOC,YAAP;;AAEaF,IAAAA,UAFb,EAE4BD,CAAC,CAACU,aAF9B,EAEgDR,aAFhD,EAEkEF,CAAC,CAACc,iBAFpE;;AAID,GAnCY;;AAqCbC,EAAAA,IArCa,gBAqCRf,CArCQ,EAqCE;AACuBT,IAAAA,mCAAmC,CAACS,CAAD,CAD1D,CACNC,UADM,6BACMC,aADN;AAEb,QAAMc,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWtB,QAAQ,CAACI,CAAC,CAACU,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,eAAOP,YAAP;AACWH,IAAAA,CAAC,CAACmB,cADb;;;;;AAMalB,IAAAA,UANb,EAM2Be,WAN3B,EAM2Cd,aAN3C,EAM4DF,CAAC,CAACU,aAN9D;;AAQaT,IAAAA,UARb,EAQ6BC,aAR7B;;;;;;AAcD,GAtDY;;AAwDbkB,EAAAA,KAxDa,iBAwDPpB,CAxDO,EAwDG;AACd,eAAOG,YAAP;AACWH,IAAAA,CAAC,CAACqB,eADb;;;AAIYrB,IAAAA,CAAC,CAACsB,cAJd;;AAMatB,IAAAA,CAAC,CAACc,iBANf;;AAQWd,IAAAA,CAAC,CAACsB,cARb;;;AAWatB,IAAAA,CAAC,CAACuB,oBAXf;;;AAcD,GAvEY,EAAf;;;AA0EO,IAAMC,QAAQ,GAAG,2BAAa1B,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\r\n  const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\r\n  const paddingY = parseInt(toastPaddingY);\r\n  const compensation = parseInt(fontFamilyCompensationBaseline);\r\n  return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\r\n};\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\r\n    return css`\r\n      background: ${t.toastBg};\r\n      border-radius: ${t.toastBorderRadius};\r\n      border: ${t.toastBorder};\r\n      color: ${t.toastColor};\r\n      display: inline-flex;\r\n      font-size: ${t.toastFontSize};\r\n      line-height: ${t.toastLineHeight};\r\n      opacity: 1;\r\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\r\n      position: relative;\r\n      top: ${t.toastTop};\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(t: Theme) {\r\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\r\n    return css`\r\n      display: flex;\r\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\r\n    `;\r\n  },\r\n\r\n  link(t: Theme) {\r\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\r\n    const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\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\r\n      margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\r\n\r\n      padding: ${paddingTop} 0 ${paddingBottom};\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: ${t.toastCloseSize};\r\n      line-height: 0;\r\n      padding: ${t.toastClosePadding};\r\n      text-align: center;\r\n      width: ${t.toastCloseSize};\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":["getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","css","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","padding","toastLinkColor","transitionDuration","transitionTimingFunction","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive","close","toastCloseColor","toastCloseSize","toastCloseHoverColor"],"mappings":"4QAAA;;AAEA,8D;;AAEA,IAAMA,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;;AAOO,IAAMC,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,gCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,4BAAmBC,aAAnB;AACA,eAAOC,YAAP;AACgBH,IAAAA,CAAC,CAACI,OADlB;AAEmBJ,IAAAA,CAAC,CAACK,iBAFrB;AAGYL,IAAAA,CAAC,CAACM,WAHd;AAIWN,IAAAA,CAAC,CAACO,UAJb;;AAMeP,IAAAA,CAAC,CAACQ,aANjB;AAOiBR,IAAAA,CAAC,CAACS,eAPnB;;AASaR,IAAAA,UATb,EAS2BD,CAAC,CAACU,aAT7B,EAS8CR,aAT9C;;AAWSF,IAAAA,CAAC,CAACW,QAXX;;AAaD,GAhBgC;;AAkBjCC,EAAAA,OAlBiC,mBAkBzBZ,CAlByB,EAkBf;AAChB,eAAOG,YAAP;;;;;;;AAOmBH,IAAAA,CAAC,CAACK,iBAPrB;;AASD,GA5BgC;;AA8BjCQ,EAAAA,YA9BiC,wBA8BpBb,CA9BoB,EA8BV;AACrB,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,eAAOC,YAAP;;AAEaF,IAAAA,UAFb,EAE4BD,CAAC,CAACU,aAF9B,EAEgDR,aAFhD,EAEkEF,CAAC,CAACc,iBAFpE;;AAID,GApCgC;;AAsCjCC,EAAAA,IAtCiC,gBAsC5Bf,CAtC4B,EAsClB;AACb,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,QAAMc,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWtB,QAAQ,CAACI,CAAC,CAACU,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,QAAMS,OAAO,GAAG,+BAAYnB,CAAZ,IAAoBC,UAApB,SAAkCC,aAAlC,GAAuDD,UAAvD,WAAuEC,aAAvF;;AAEA,eAAOC,YAAP;AACWH,IAAAA,CAAC,CAACoB,cADb;;;;;AAManB,IAAAA,UANb,EAM2Be,WAN3B,EAM2Cd,aAN3C,EAM4DF,CAAC,CAACU,aAN9D;;AAQaS,IAAAA,OARb;AAS2BnB,IAAAA,CAAC,CAACqB,kBAT7B,EASmDrB,CAAC,CAACsB,wBATrD;;AAWkBtB,IAAAA,CAAC,CAACuB,gBAXpB;AAYuBvB,IAAAA,CAAC,CAACwB,4BAZzB;;;;AAgBkBxB,IAAAA,CAAC,CAACyB,iBAhBpB;;;AAmBD,GA9DgC;;AAgEjCC,EAAAA,KAhEiC,iBAgE3B1B,CAhE2B,EAgEjB;AACd,eAAOG,YAAP;;AAEWH,IAAAA,CAAC,CAAC2B,eAFb;;;AAKY3B,IAAAA,CAAC,CAAC4B,cALd;;AAOa5B,IAAAA,CAAC,CAACc,iBAPf;;AASWd,IAAAA,CAAC,CAAC4B,cATb;;;AAYa5B,IAAAA,CAAC,CAAC6B,oBAZf;;;AAeD,GAhFgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\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(t: Theme) {\n    return css`\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ${t.toastBorderRadius};\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    const padding = isTheme2022(t) ? `${paddingTop} ${paddingBottom}` : `${paddingTop} 0 ${paddingBottom}`;\n\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: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActive};\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/cjs/components/Toast/index.js.map

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

package/cjs/components/Toggle/Toggle.d.ts

@@ -1,30 +1,88 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface ToggleProps extends CommonProps {
     children?: React.ReactNode;
     /**
-     * Положение children справа или слева от переключателя
+     * Положение `children` относительно переключателя.
      * @default 'right'
      */
-    captionPosition: 'left' | 'right';
+    captionPosition?: 'left' | 'right';
+    /**
+     * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.
+     * @default false
+     */
     checked?: boolean;
+    /**
+     * Делает `тогл` включенным по умолчанию.
+     */
     defaultChecked?: boolean;
+    /**
+     * Отключает `тогл`.
+     */
     disabled?: boolean;
+    /**
+     * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.
+     */
     onValueChange?: (value: boolean) => void;
+    /**
+     * Событие вызывающееся при клике на `тогл`.
+     */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Состояние валидации при предупреждении.
+     * @default false
+     */
     warning?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     * @default false
+     */
     error?: boolean;
+    /**
+     * Добавляет стили для состояния `loading` и отключает `тогл`.
+     */
     loading?: boolean;
+    /**
+     * Если true, выставляет фокус на `тогле` после загрузки страницы.
+     */
     autoFocus?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    /**
+     * Событие вызывающееся, когда `тогл` получает фокус.
+     */
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Событие вызывающееся, когда `тогл` теряет фокус.
+     */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.
+     */
     color?: React.CSSProperties['color'];
+    /**
+     * HTML-атрибут `id` для передачи во внутренний `<input />`.
+     */
+    id?: string;
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
 }
 export interface ToggleState {
     checked?: boolean;
     focusByTab?: boolean;
 }
+export declare const ToggleDataTids: {
+    readonly root: "Toggle__root";
+};
+declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations'>>;
+/**
+ * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+ */
 export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
@@ -35,14 +93,13 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
         loading: PropTypes.Requireable<boolean>;
         warning: PropTypes.Requireable<boolean>;
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        color: (props: ToggleProps) => void;
     };
-    static defaultProps: {
-        disabled: boolean;
-        loading: boolean;
-        captionPosition: string;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     private theme;
     private input;
+    private setRootNode;
     constructor(props: ToggleProps);
     componentDidMount(): void;
     /**
@@ -57,3 +114,4 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     private handleBlur;
     private isUncontrolled;
 }
+export {};

package/cjs/components/Toggle/Toggle.js

@@ -1,14 +1,20 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Toggle = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ToggleDataTids = exports.Toggle = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _warning = _interopRequireDefault(require("warning"));
 
-var _tabListener = require("../../lib/events/tabListener");
+var _keyListener = require("../../lib/events/keyListener");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _currentEnvironment = require("../../lib/currentEnvironment");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
-var _Toggle = require("./Toggle.styles");var
+var _Toggle = require("./Toggle.styles");var _class, _class2, _temp;
 
+var colorWarningShown = false;
 
 
 
@@ -35,7 +41,79 @@ var _Toggle = require("./Toggle.styles");var
 
 
 
-Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Toggle, _React$Component);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var ToggleDataTids = {
+  root: 'Toggle__root' };exports.ToggleDataTids = ToggleDataTids;
+
+
+
+
+/**
+ * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+ */var
+
+Toggle = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Toggle, _React$Component);
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -58,7 +136,7 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
   function Toggle(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.theme = void 0;_this.input = null;_this.
+    _this = _React$Component.call(this, props) || this;_this.getProps = (0, _createPropsGetter.createPropsGetter)(Toggle.defaultProps);_this.input = null;_this.
 
 
 
@@ -78,7 +156,7 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
     focus = function () {
       if (_this.input) {
-        _tabListener.tabListener.isTabPressed = true;
+        _keyListener.keyListener.isTabPressed = true;
         _this.input.focus();
       }
     };_this.
@@ -137,6 +215,36 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -183,7 +291,7 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
         _this.props.onFocus(event);
       }
 
-      if (_tabListener.tabListener.isTabPressed) {
+      if (_keyListener.keyListener.isTabPressed) {
         _this.setState({ focusByTab: true });
       }
     };_this.
@@ -195,8 +303,8 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
       _this.setState({
         focusByTab: false });
 
-    };_this.state = { focusByTab: false, checked: props.defaultChecked };return _this;}var _proto = Toggle.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_tabListener.tabListener.isTabPressed = true;this.focus();}} /**
-   * @public
-   */;_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$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;var disabled = this.props.disabled || loading;var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;var containerClassNames = (0, _classnames.default)(_Toggle.jsStyles.container(this.theme), (_cn = {}, _cn[_Toggle.jsStyles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cn[_Toggle.jsStyles.isLoading(this.theme)] = !!loading, _cn[_Toggle.jsStyles.isWarning(this.theme)] = !color && !!warning, _cn[_Toggle.jsStyles.isError(this.theme)] = !color && !!error, _cn));var labelClassNames = (0, _classnames.default)(_Toggle.jsStyles.root(this.theme), (_cn2 = {}, _cn2[_Toggle.jsStyles.rootLeft()] = captionPosition === 'left', _cn2[_Toggle.jsStyles.disabled(this.theme)] = !!disabled, _cn2));var caption = null;if (children) {var _cn3;var captionClass = (0, _classnames.default)(_Toggle.jsStyles.caption(this.theme), (_cn3 = {}, _cn3[_Toggle.jsStyles.captionLeft(this.theme)] = captionPosition === 'left', _cn3));caption = /*#__PURE__*/_react.default.createElement("span", { className: captionClass }, children);}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("label", { className: labelClassNames }, /*#__PURE__*/_react.default.createElement("span", { className: _Toggle.jsStyles.wrapper(this.theme) }, /*#__PURE__*/_react.default.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: _Toggle.jsStyles.input(this.theme), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled }), /*#__PURE__*/_react.default.createElement("div", { className: containerClassNames, style: checked && color ? { backgroundColor: color, borderColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined }, /*#__PURE__*/_react.default.createElement("div", { className: _Toggle.jsStyles.activeBackground(), style: checked && color ? { backgroundColor: color } : undefined })), /*#__PURE__*/_react.default.createElement("div", { className: _Toggle.jsStyles.handle(this.theme) })), caption));};_proto.isUncontrolled = function isUncontrolled() {
+    };_this.state = { focusByTab: false, checked: props.defaultChecked };return _this;}var _proto = Toggle.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_keyListener.keyListener.isTabPressed = true;this.focus();}} /**
+   * @public
+   */;_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, _cx4, _cx5, _cx6;var _this$props = this.props,children = _this$props.children,warning = _this$props.warning,error = _this$props.error,color = _this$props.color,id = _this$props.id,ariaDescribedby = _this$props['aria-describedby'];var _this$getProps = this.getProps(),loading = _this$getProps.loading,captionPosition = _this$getProps.captionPosition,disableAnimations = _this$getProps.disableAnimations;var disabled = this.getProps().disabled || loading;var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;var containerClassNames = (0, _Emotion.cx)(_Toggle.styles.container(this.theme), (_cx = {}, _cx[_Toggle.styles.containerDisabled(this.theme)] = !!disabled, _cx[_Toggle.globalClasses.container] = true, _cx[_Toggle.globalClasses.containerDisabled] = !!disabled, _cx[_Toggle.globalClasses.containerLoading] = loading, _cx));var labelClassNames = (0, _Emotion.cx)(_Toggle.styles.root(this.theme), (_cx2 = {}, _cx2[_Toggle.styles.activeHandle(this.theme)] = !(0, _ThemeHelpers.isTheme2022)(this.theme), _cx2[_Toggle.styles.rootLeft()] = captionPosition === 'left', _cx2[_Toggle.styles.disabled()] = !!disabled, _cx2[_Toggle.globalClasses.disabled] = !!disabled, _cx2[_Toggle.styles.disableAnimation()] = disableAnimations, _cx2));var caption = null;if (children) {var _cx3;var captionClass = (0, _Emotion.cx)(_Toggle.styles.caption(this.theme), (_cx3 = {}, _cx3[_Toggle.styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[_Toggle.styles.disabledCaption(this.theme)] = !!disabled, _cx3));caption = /*#__PURE__*/_react.default.createElement("span", { className: captionClass }, children);}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("label", { "data-tid": ToggleDataTids.root, className: labelClassNames }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.button(this.theme), (_cx4 = {}, _cx4[_Toggle.styles.buttonRight()] = captionPosition === 'left', _cx4[_Toggle.styles.isWarning(this.theme)] = !!warning, _cx4[_Toggle.styles.isError(this.theme)] = !!error, _cx4[_Toggle.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4)) }, /*#__PURE__*/_react.default.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: (0, _Emotion.cx)(_Toggle.styles.input(this.theme), (0, _ThemeHelpers.isTheme2022)(this.theme) && _Toggle.styles.input2022(this.theme)), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled, id: id, role: "switch", "aria-describedby": ariaDescribedby }), /*#__PURE__*/_react.default.createElement("div", { className: containerClassNames, style: checked && color && !disabled ? { backgroundColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined }, !(0, _ThemeHelpers.isTheme2022)(this.theme) && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.activeBackground(), _Toggle.globalClasses.background, (_cx5 = {}, _cx5[_Toggle.styles.activeBackgroundLoading(this.theme)] = loading, _cx5[_Toggle.styles.disabledBackground(this.theme)] = disabled, _cx5)), style: checked && color && !disabled ? { backgroundColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined })), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.handle(this.theme), _Toggle.globalClasses.handle, (_cx6 = {}, _cx6[_Toggle.styles.handleDisabled(this.theme)] = disabled, _cx6)) })), caption));};_proto.isUncontrolled = function isUncontrolled() {
     return this.props.checked === undefined;
-  };return Toggle;}(_react.default.Component);exports.Toggle = Toggle;Toggle.__KONTUR_REACT_UI__ = 'Toggle';Toggle.propTypes = { checked: _propTypes.default.bool, defaultChecked: _propTypes.default.bool, disabled: _propTypes.default.bool, error: _propTypes.default.bool, loading: _propTypes.default.bool, warning: _propTypes.default.bool, onValueChange: _propTypes.default.func };Toggle.defaultProps = { disabled: false, loading: false, captionPosition: 'right' };
+  };return Toggle;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Toggle', _class2.propTypes = { checked: _propTypes.default.bool, defaultChecked: _propTypes.default.bool, disabled: _propTypes.default.bool, error: _propTypes.default.bool, loading: _propTypes.default.bool, warning: _propTypes.default.bool, onValueChange: _propTypes.default.func, color: function color(props) {if (props.color && !colorWarningShown) {(0, _warning.default)(false, "[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. ");colorWarningShown = true;}} }, _class2.defaultProps = { disabled: false, loading: false, captionPosition: 'right', disableAnimations: _currentEnvironment.isTestEnv }, _temp)) || _class;exports.Toggle = Toggle;