@skbkontur/react-ui 0.0.0-7b63c63db3 → 0.0.0-7feb61cdde

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastStatic.tsx"],"names":["ToastStatic","push","notification","action","node","document","createElement","body","Error","appendChild","ReactDOM","render","ToastDataTids","toastStatic","el","instance","_push","close"],"mappings":"yJAAA;AACA;;;;AAIA,gC;;AAEaA,W,+DAAAA,W;AACGC,I,GAAO,UAACC,YAAD,EAAuBC,MAAvB,EAA2C;AAC9D,MAAI,CAACH,WAAW,CAACI,IAAjB,EAAuB;AACrBJ,IAAAA,WAAW,CAACI,IAAZ,GAAmBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;AACA,oBAAiBD,QAAjB,CAAQE,IAAR,aAAQA,IAAR;AACA,QAAI,CAACA,IAAL,EAAW;AACT,YAAMC,KAAK,CAAC,0CAAD,CAAX;AACD;AACDD,IAAAA,IAAI,CAACE,WAAL,CAAiBT,WAAW,CAACI,IAA7B;;AAEAM,sBAASC,MAAT;AACE,iCAAC,YAAD,IAAO,YAAUC,qBAAcC,WAA/B,EAA4C,GAAG,EAAE,aAACC,EAAD,UAASd,WAAW,CAACe,QAAZ,GAAuBD,EAAhC,EAAjD,GADF;AAEEd,IAAAA,WAAW,CAACI,IAFd;AAGE,wBAAMJ,WAAW,CAACgB,KAAZ,CAAkBd,YAAlB,EAAgCC,MAAhC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLH,IAAAA,WAAW,CAACgB,KAAZ,CAAkBd,YAAlB,EAAgCC,MAAhC;AACD;AACF,C,CAlBUH,W;;AAoBGgB,K,GAAQ,UAACd,YAAD,EAAuBC,MAAvB,EAA2C;AAC/D,MAAIH,WAAW,CAACe,QAAhB,EAA0B;AACxBf,IAAAA,WAAW,CAACe,QAAZ,CAAqBd,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC;AACD;AACF,C,CAxBUH,W;;AA0BGiB,K,GAAQ,YAAM;AAC1B,MAAIjB,WAAW,CAACe,QAAhB,EAA0B;AACxBf,IAAAA,WAAW,CAACe,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUjB,W;;;AAiCIe,Q,GAA4B,I","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { Toast, Action, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (notification: string, action?: Action) => {\n    if (!ToastStatic.node) {\n      ToastStatic.node = document.createElement('div');\n      const { body } = document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action),\n      );\n    } else {\n      ToastStatic._push(notification, action);\n    }\n  };\n\n  public static _push = (notification: string, action?: Action) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"]}
+{"version":3,"sources":["ToastStatic.tsx"],"names":["ToastStatic","push","notification","action","showTime","node","document","createElement","body","Error","appendChild","ReactDOM","render","ToastDataTids","toastStatic","el","instance","_push","close"],"mappings":"yJAAA;AACA;;;;AAIA,gC;;AAEaA,W,+DAAAA,W;AACGC,I,GAAO,UAACC,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC3F,MAAI,CAACJ,WAAW,CAACK,IAAjB,EAAuB;AACrBL,IAAAA,WAAW,CAACK,IAAZ,GAAmBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;AACA,oBAAiBD,QAAjB,CAAQE,IAAR,aAAQA,IAAR;AACA,QAAI,CAACA,IAAL,EAAW;AACT,YAAMC,KAAK,CAAC,0CAAD,CAAX;AACD;AACDD,IAAAA,IAAI,CAACE,WAAL,CAAiBV,WAAW,CAACK,IAA7B;;AAEAM,sBAASC,MAAT;AACE,iCAAC,YAAD,IAAO,YAAUC,qBAAcC,WAA/B,EAA4C,GAAG,EAAE,aAACC,EAAD,UAASf,WAAW,CAACgB,QAAZ,GAAuBD,EAAhC,EAAjD,GADF;AAEEf,IAAAA,WAAW,CAACK,IAFd;AAGE,wBAAML,WAAW,CAACiB,KAAZ,CAAkBf,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLJ,IAAAA,WAAW,CAACiB,KAAZ,CAAkBf,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC;AACD;AACF,C,CAlBUJ,W;;AAoBGiB,K,GAAQ,UAACf,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC5F,MAAIJ,WAAW,CAACgB,QAAhB,EAA0B;AACxBhB,IAAAA,WAAW,CAACgB,QAAZ,CAAqBf,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC,EAAgDC,QAAhD;AACD;AACF,C,CAxBUJ,W;;AA0BGkB,K,GAAQ,YAAM;AAC1B,MAAIlB,WAAW,CAACgB,QAAhB,EAA0B;AACxBhB,IAAAA,WAAW,CAACgB,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUlB,W;;;AAiCIgB,Q,GAA4B,I","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { Toast, Action, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (!ToastStatic.node) {\n      ToastStatic.node = document.createElement('div');\n      const { body } = document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action, showTime),\n      );\n    } else {\n      ToastStatic._push(notification, action, showTime);\n    }\n  };\n\n  public static _push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action, showTime);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"]}

package/cjs/components/Toast/ToastView.js

@@ -7,6 +7,8 @@ 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 _Toast = require("./Toast");var _excluded = ["action", "onClose"];var _class, _class2, _temp;var
@@ -76,6 +78,22 @@ ToastView = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/fun
 
       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.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__*/

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.tsx"],"names":["ToastView","rootNode","renderMain","props","action","onClose","rest","link","ToastDataTids","styles","theme","handler","label","close","closeWrapper","wrapper","toastView","root","setRootNode","children","render","React","Component","propTypes","string","isRequired","func"],"mappings":"mcAAA;AACA;;AAEA;AACA;AACA;;AAEA;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,UAAMC,KAAK,GAAGT,MAAM;AAClB,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,CADkB;;;AAMhB,UANJ;;AAQA;AACE,qCAAC,cAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEI,kBAAOM,OAAP,CAAe,MAAKL,KAApB,CAApC;AACE,qEAAK,YAAUF,qBAAcQ,SAA7B,IAA4CV,IAA5C,IAAkD,SAAS,EAAEG,kBAAOQ,IAAP,CAAY,MAAKP,KAAjB,CAA7D,EAAsF,GAAG,EAAE,MAAKQ,WAAhG;AACE,mDAAO,MAAKf,KAAL,CAAWgB,QAAlB,CADF;AAEGZ,QAAAA,IAFH;AAGGM,QAAAA,KAHH,CADF,CADF;;;;AASD,K,uDArCMO,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACV,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,oBA5B4BmB,eAAMC,S,WACrBC,S,GAAY,EACxB;AACJ;AACA,KACInB,MAAM,EAAE,sBAAM,EACZQ,KAAK,EAAEY,kBAAOC,UADF,EAEZd,OAAO,EAAEe,gBAAKD,UAFF,EAAN,CAJgB,EAQxB;AACJ;AACA,KACIN,QAAQ,EAAEK,kBAAOC,UAXO,EAYxBpB,OAAO,EAAEqB,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';\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    const 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    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"]}
+{"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.js

@@ -1,5 +1,6 @@
-"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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+"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;
@@ -49,7 +50,9 @@ var styles = (0, _Emotion.memoizeStyle)({
   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 || (_templateObject4 = (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    "])),
+    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\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])),
     t.toastLinkColor,
 
 
@@ -57,10 +60,15 @@ var styles = (0, _Emotion.memoizeStyle)({
 
     paddingTop, marginRight, paddingBottom, t.toastPaddingX,
 
-    paddingTop, paddingBottom);
+    padding,
+
+
+    t.toastLinkBgHover,
+    t.toastLinkTextDecorationHover,
 
 
 
+    t.toastLinkBgActive);
 
 
   },

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"],"mappings":"4QAAA,oD;;;AAGA,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,eAAOP,YAAP;AACWH,IAAAA,CAAC,CAACmB,cADb;;;;;AAMalB,IAAAA,UANb,EAM2Be,WAN3B,EAM2Cd,aAN3C,EAM4DF,CAAC,CAACU,aAN9D;;AAQaT,IAAAA,UARb,EAQ6BC,aAR7B;;;;;;AAcD,GAvDgC;;AAyDjCkB,EAAAA,KAzDiC,iBAyD3BpB,CAzD2B,EAyDjB;AACd,eAAOG,YAAP;;AAEWH,IAAAA,CAAC,CAACqB,eAFb;;;AAKYrB,IAAAA,CAAC,CAACsB,cALd;;AAOatB,IAAAA,CAAC,CAACc,iBAPf;;AASWd,IAAAA,CAAC,CAACsB,cATb;;;AAYatB,IAAAA,CAAC,CAACuB,oBAZf;;;AAeD,GAzEgC,EAAb,CAAf,C","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(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    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"]}
+{"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","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;;;AAWkBnB,IAAAA,CAAC,CAACqB,gBAXpB;AAYuBrB,IAAAA,CAAC,CAACsB,4BAZzB;;;;AAgBkBtB,IAAAA,CAAC,CAACuB,iBAhBpB;;;AAmBD,GA9DgC;;AAgEjCC,EAAAA,KAhEiC,iBAgE3BxB,CAhE2B,EAgEjB;AACd,eAAOG,YAAP;;AAEWH,IAAAA,CAAC,CAACyB,eAFb;;;AAKYzB,IAAAA,CAAC,CAAC0B,cALd;;AAOa1B,IAAAA,CAAC,CAACc,iBAPf;;AASWd,IAAAA,CAAC,CAAC0B,cATb;;;AAYa1B,IAAAA,CAAC,CAAC2B,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\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/Toggle/Toggle.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface ToggleProps extends CommonProps {
@@ -7,7 +7,7 @@ export interface ToggleProps extends CommonProps {
      * Положение `children` относительно переключателя.
      * @default 'right'
      */
-    captionPosition: 'left' | 'right';
+    captionPosition?: 'left' | 'right';
     /**
      * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.
      * @default false
@@ -47,6 +47,10 @@ export interface ToggleProps extends CommonProps {
      * Если true, выставляет фокус на `тогле` после загрузки страницы.
      */
     autoFocus?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
     /**
      * Событие вызывающееся, когда `тогл` получает фокус.
      */
@@ -63,6 +67,10 @@ export interface ToggleProps extends CommonProps {
      * HTML-атрибут `id` для передачи во внутренний `<input />`.
      */
     id?: string;
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
 }
 export interface ToggleState {
     checked?: boolean;
@@ -71,6 +79,7 @@ export interface ToggleState {
 export declare const ToggleDataTids: {
     readonly root: "Toggle__root";
 };
+declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations'>>;
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
  */
@@ -86,11 +95,8 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
         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;
@@ -108,3 +114,4 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     private handleBlur;
     private isUncontrolled;
 }
+export {};

package/cjs/components/Toggle/Toggle.js

@@ -8,6 +8,9 @@ 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 _class, _class2, _temp;
 
@@ -73,6 +76,14 @@ var colorWarningShown = false;
 
 
 
+
+
+
+
+
+
+
+
 
 
 
@@ -83,12 +94,14 @@ var colorWarningShown = false;
 
 
 var ToggleDataTids = {
-  root: 'Toggle__root' };
+  root: 'Toggle__root' };exports.ToggleDataTids = ToggleDataTids;
+
+
 
 
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
- */exports.ToggleDataTids = ToggleDataTids;var
+ */var
 
 Toggle = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Toggle, _React$Component);
 
@@ -115,12 +128,15 @@ Toggle = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
 
 
+
+
+
 
 
 
 
   function Toggle(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.input = null;_this.
+    _this = _React$Component.call(this, props) || this;_this.getProps = (0, _createPropsGetter.createPropsGetter)(Toggle.defaultProps);_this.input = null;_this.
 
 
 
@@ -235,6 +251,13 @@ Toggle = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
 
 
+
+
+
+
+
+
+
 
 
 
@@ -282,6 +305,6 @@ Toggle = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
     };_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,captionPosition = _this$props.captionPosition,warning = _this$props.warning,error = _this$props.error,loading = _this$props.loading,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 = (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.rootLeft()] = captionPosition === 'left', _cx2[_Toggle.styles.disabled()] = !!disabled, _cx2[_Toggle.globalClasses.disabled] = !!disabled, _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: _Toggle.styles.input(this.theme), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled, id: id }), /*#__PURE__*/_react.default.createElement("div", { className: containerClassNames, 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.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() {
+   */;_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), _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' }, _temp)) || _class;exports.Toggle = Toggle;
+  };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;

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

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.tsx"],"names":["colorWarningShown","ToggleDataTids","root","Toggle","rootNode","props","input","focus","keyListener","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","warning","error","loading","color","id","disabled","containerClassNames","styles","container","containerDisabled","globalClasses","containerLoading","labelClassNames","rootLeft","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","React","Component","__KONTUR_REACT_UI__","propTypes","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   * Состояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\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\nexport const ToggleDataTids = {\n  root: 'Toggle__root',\n} as const;\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 data-tid={ToggleDataTids.root} 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"]}
+{"version":3,"sources":["Toggle.tsx"],"names":["colorWarningShown","ToggleDataTids","root","Toggle","rootNode","props","getProps","defaultProps","input","focus","keyListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","warning","error","color","id","ariaDescribedby","loading","captionPosition","disableAnimations","disabled","containerClassNames","styles","container","containerDisabled","globalClasses","containerLoading","labelClassNames","activeHandle","rootLeft","disableAnimation","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","input2022","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","func","isTestEnv"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } 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';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\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   * Состояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Добавляет стили для состояния `loading` и отключает `тогл`.\n   */\n  loading?: boolean;\n  /**\n   * Если true, выставляет фокус на `тогле` после загрузки страницы.\n   */\n  autoFocus?: boolean;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\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   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n  root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations'>>;\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: DefaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(Toggle.defaultProps);\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, warning, error, color, id, 'aria-describedby': ariaDescribedby } = this.props;\n    const { loading, captionPosition, disableAnimations } = this.getProps();\n    const disabled = this.getProps().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.activeHandle(this.theme)]: !isTheme2022(this.theme),\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n      [styles.disableAnimation()]: disableAnimations,\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 data-tid={ToggleDataTids.root} 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={cx(styles.input(this.theme), isTheme2022(this.theme) && styles.input2022(this.theme))}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              ref={this.inputRef}\n              disabled={disabled}\n              id={id}\n              role=\"switch\"\n              aria-describedby={ariaDescribedby}\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              {!isTheme2022(this.theme) && (\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              )}\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"]}

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

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