@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

package/cjs/components/Toggle/Toggle.js

@@ -1,13 +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;
 
 
 
@@ -28,7 +35,86 @@ 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);
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -50,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.
 
 
 
@@ -70,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.
@@ -115,6 +201,50 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -161,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.
@@ -173,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 _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,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));return _react.default.createElement("label", { className: (0, _classnames.default)(_Toggle.jsStyles.wrapper(this.theme), (_cn2 = {}, _cn2[_Toggle.jsStyles.wrapperDisabled(this.theme)] = !!disabled, _cn2)) }, _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 }), _react.default.createElement("div", { className: containerClassNames, style: checked && color ? { backgroundColor: color, borderColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined }, _react.default.createElement("div", { className: _Toggle.jsStyles.activeBackground(), style: checked && color ? { backgroundColor: color } : undefined })), _react.default.createElement("div", { className: _Toggle.jsStyles.handle(this.theme) }));};_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 };
+  };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":["Toggle","props","theme","input","focus","tabListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","warning","error","loading","color","disabled","containerClassNames","jsStyles","container","focused","isLoading","isWarning","isError","wrapper","wrapperDisabled","backgroundColor","borderColor","boxShadow","undefined","activeBackground","handle","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { tabListener } from '../../lib/events/tabListener';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './Toggle.styles';\r\n\r\nexport interface ToggleProps {\r\n  checked?: boolean;\r\n  defaultChecked?: boolean;\r\n  disabled?: boolean;\r\n  onValueChange?: (value: boolean) => void;\r\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n  warning?: boolean;\r\n  error?: boolean;\r\n  loading?: boolean;\r\n  autoFocus?: boolean;\r\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\r\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\r\n  color?: React.CSSProperties['color'];\r\n}\r\n\r\nexport interface ToggleState {\r\n  checked?: boolean;\r\n  focusByTab?: boolean;\r\n}\r\n\r\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\r\n  public static __KONTUR_REACT_UI__ = 'Toggle';\r\n\r\n  public static propTypes = {\r\n    checked: PropTypes.bool,\r\n    defaultChecked: PropTypes.bool,\r\n    disabled: PropTypes.bool,\r\n    error: PropTypes.bool,\r\n    loading: PropTypes.bool,\r\n    warning: PropTypes.bool,\r\n    onValueChange: PropTypes.func,\r\n  };\r\n\r\n  public static defaultProps = {\r\n    disabled: false,\r\n    loading: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private input: HTMLInputElement | null = null;\r\n\r\n  constructor(props: ToggleProps) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      focusByTab: false,\r\n      checked: props.defaultChecked,\r\n    };\r\n  }\r\n\r\n  public componentDidMount() {\r\n    if (this.props.autoFocus) {\r\n      tabListener.isTabPressed = true;\r\n      this.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus = () => {\r\n    if (this.input) {\r\n      tabListener.isTabPressed = true;\r\n      this.input.focus();\r\n    }\r\n  };\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { warning, error, loading, color } = this.props;\r\n    const disabled = this.props.disabled || loading;\r\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\r\n\r\n    const containerClassNames = cn(jsStyles.container(this.theme), {\r\n      [jsStyles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\r\n      [jsStyles.isLoading(this.theme)]: !!loading,\r\n      [jsStyles.isWarning(this.theme)]: !color && !!warning,\r\n      [jsStyles.isError(this.theme)]: !color && !!error,\r\n    });\r\n\r\n    return (\r\n      <label\r\n        className={cn(jsStyles.wrapper(this.theme), {\r\n          [jsStyles.wrapperDisabled(this.theme)]: !!disabled,\r\n        })}\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          checked={checked}\r\n          onChange={this.handleChange}\r\n          className={jsStyles.input(this.theme)}\r\n          onFocus={this.handleFocus}\r\n          onBlur={this.handleBlur}\r\n          ref={this.inputRef}\r\n          disabled={disabled}\r\n        />\r\n        <div\r\n          className={containerClassNames}\r\n          style={\r\n            checked && color\r\n              ? {\r\n                  backgroundColor: color,\r\n                  borderColor: color,\r\n                  boxShadow: `inset 0 0 0 1px ${color}`,\r\n                }\r\n              : undefined\r\n          }\r\n        >\r\n          <div\r\n            className={jsStyles.activeBackground()}\r\n            style={checked && color ? { backgroundColor: color } : undefined}\r\n          />\r\n        </div>\r\n        <div className={jsStyles.handle(this.theme)} />\r\n      </label>\r\n    );\r\n  }\r\n\r\n  private inputRef = (element: HTMLInputElement) => {\r\n    this.input = element;\r\n  };\r\n\r\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (this.props.onValueChange) {\r\n      this.props.onValueChange(event.target.checked);\r\n    }\r\n\r\n    if (this.isUncontrolled()) {\r\n      this.setState({\r\n        checked: event.target.checked,\r\n      });\r\n    }\r\n\r\n    if (this.props.onChange) {\r\n      this.props.onChange(event);\r\n    }\r\n  };\r\n\r\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    if (this.props.onFocus) {\r\n      this.props.onFocus(event);\r\n    }\r\n\r\n    if (tabListener.isTabPressed) {\r\n      this.setState({ focusByTab: true });\r\n    }\r\n  };\r\n\r\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    if (this.props.onBlur) {\r\n      this.props.onBlur(event);\r\n    }\r\n    this.setState({\r\n      focusByTab: false,\r\n    });\r\n  };\r\n\r\n  private isUncontrolled() {\r\n    return this.props.checked === undefined;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Toggle.tsx"],"names":["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":"6VAAA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,yC;;AAEA,IAAIA,iBAAiB,GAAG,KAAxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EO,IAAMC,cAAc,GAAG;AAC5BC,EAAAA,IAAI,EAAE,cADsB,EAAvB,C;;;;;AAMP;AACA;AACA,G;;AAEaC,M,OADZC,kB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCC,kBAAYC,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MANxBC,QAMwB,GANb,0CAAkBH,MAAM,CAACI,YAAzB,CAMa,OAHxBC,KAGwB,GAHS,IAGT;;;;;;;;;;;;;;;;;;AAmBzBC,IAAAA,KAnByB,GAmBjB,YAAM;AACnB,UAAI,MAAKD,KAAT,EAAgB;AACdE,iCAAYC,YAAZ,GAA2B,IAA3B;AACA,cAAKH,KAAL,CAAWC,KAAX;AACD;AACF,KAxB+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmIxBG,IAAAA,QAnIwB,GAmIb,UAACC,OAAD,EAA+B;AAChD,YAAKL,KAAL,GAAaK,OAAb;AACD,KArI+B;;AAuIxBC,IAAAA,YAvIwB,GAuIT,UAACC,KAAD,EAAgD;AACrE,UAAI,MAAKV,KAAL,CAAWW,aAAf,EAA8B;AAC5B,cAAKX,KAAL,CAAWW,aAAX,CAAyBD,KAAK,CAACE,MAAN,CAAaC,OAAtC;AACD;;AAED,UAAI,MAAKC,cAAL,EAAJ,EAA2B;AACzB,cAAKC,QAAL,CAAc;AACZF,UAAAA,OAAO,EAAEH,KAAK,CAACE,MAAN,CAAaC,OADV,EAAd;;AAGD;;AAED,UAAI,MAAKb,KAAL,CAAWgB,QAAf,EAAyB;AACvB,cAAKhB,KAAL,CAAWgB,QAAX,CAAoBN,KAApB;AACD;AACF,KArJ+B;;AAuJxBO,IAAAA,WAvJwB,GAuJV,UAACP,KAAD,EAA+C;AACnE,UAAI,MAAKV,KAAL,CAAWkB,OAAf,EAAwB;AACtB,cAAKlB,KAAL,CAAWkB,OAAX,CAAmBR,KAAnB;AACD;;AAED,UAAIL,yBAAYC,YAAhB,EAA8B;AAC5B,cAAKS,QAAL,CAAc,EAAEI,UAAU,EAAE,IAAd,EAAd;AACD;AACF,KA/J+B;;AAiKxBC,IAAAA,UAjKwB,GAiKX,UAACV,KAAD,EAA+C;AAClE,UAAI,MAAKV,KAAL,CAAWqB,MAAf,EAAuB;AACrB,cAAKrB,KAAL,CAAWqB,MAAX,CAAkBX,KAAlB;AACD;AACD,YAAKK,QAAL,CAAc;AACZI,QAAAA,UAAU,EAAE,KADA,EAAd;;AAGD,KAxK+B,CAG9B,MAAKG,KAAL,GAAa,EACXH,UAAU,EAAE,KADD,EAEXN,OAAO,EAAEb,KAAK,CAACuB,cAFJ,EAAb,CAH8B,aAO/B,C,qCAEMC,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKxB,KAAL,CAAWyB,SAAf,EAA0B,CACxBpB,yBAAYC,YAAZ,GAA2B,IAA3B,CACA,KAAKF,KAAL,GACD,CACF,C,CAED;AACF;AACA,K,QAQSsB,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,iCACnB,kBAAqF,KAAK5B,KAA1F,CAAQ6B,QAAR,eAAQA,QAAR,CAAkBC,OAAlB,eAAkBA,OAAlB,CAA2BC,KAA3B,eAA2BA,KAA3B,CAAkCC,KAAlC,eAAkCA,KAAlC,CAAyCC,EAAzC,eAAyCA,EAAzC,CAAiEC,eAAjE,eAA6C,kBAA7C,EACA,qBAAwD,KAAKjC,QAAL,EAAxD,CAAQkC,OAAR,kBAAQA,OAAR,CAAiBC,eAAjB,kBAAiBA,eAAjB,CAAkCC,iBAAlC,kBAAkCA,iBAAlC,CACA,IAAMC,QAAQ,GAAG,KAAKrC,QAAL,GAAgBqC,QAAhB,IAA4BH,OAA7C,CACA,IAAMtB,OAAO,GAAG,KAAKC,cAAL,KAAwB,KAAKQ,KAAL,CAAWT,OAAnC,GAA6C,KAAKb,KAAL,CAAWa,OAAxE,CAEA,IAAM0B,mBAAmB,GAAG,iBAAGC,eAAOC,SAAP,CAAiB,KAAKd,KAAtB,CAAH,iBACzBa,eAAOE,iBAAP,CAAyB,KAAKf,KAA9B,CADyB,IACc,CAAC,CAACW,QADhB,MAEzBK,sBAAcF,SAFW,IAEC,IAFD,MAGzBE,sBAAcD,iBAHW,IAGS,CAAC,CAACJ,QAHX,MAIzBK,sBAAcC,gBAJW,IAIQT,OAJR,OAA5B,CAOA,IAAMU,eAAe,GAAG,iBAAGL,eAAO3C,IAAP,CAAY,KAAK8B,KAAjB,CAAH,mBACrBa,eAAOM,YAAP,CAAoB,KAAKnB,KAAzB,CADqB,IACa,CAAC,+BAAY,KAAKA,KAAjB,CADd,OAErBa,eAAOO,QAAP,EAFqB,IAEDX,eAAe,KAAK,MAFnB,OAGrBI,eAAOF,QAAP,EAHqB,IAGD,CAAC,CAACA,QAHD,OAIrBK,sBAAcL,QAJO,IAII,CAAC,CAACA,QAJN,OAKrBE,eAAOQ,gBAAP,EALqB,IAKOX,iBALP,QAAxB,CAQA,IAAIY,OAAO,GAAG,IAAd,CACA,IAAIpB,QAAJ,EAAc,UACZ,IAAMqB,YAAY,GAAG,iBAAGV,eAAOS,OAAP,CAAe,KAAKtB,KAApB,CAAH,mBAClBa,eAAOW,WAAP,CAAmB,KAAKxB,KAAxB,CADkB,IACeS,eAAe,KAAK,MADnC,OAElBI,eAAOY,eAAP,CAAuB,KAAKzB,KAA5B,CAFkB,IAEmB,CAAC,CAACW,QAFrB,QAArB,CAIAW,OAAO,gBAAG,uCAAM,SAAS,EAAEC,YAAjB,IAAgCrB,QAAhC,CAAV,CACD,CAED,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKwB,WAAjC,IAAkD,KAAKrD,KAAvD,gBACE,wCAAO,YAAUJ,cAAc,CAACC,IAAhC,EAAsC,SAAS,EAAEgD,eAAjD,iBACE,sCACE,SAAS,EAAE,iBAAGL,eAAOc,MAAP,CAAc,KAAK3B,KAAnB,CAAH,mBACRa,eAAOe,WAAP,EADQ,IACenB,eAAe,KAAK,MADnC,OAERI,eAAOgB,SAAP,CAAiB,KAAK7B,KAAtB,CAFQ,IAEuB,CAAC,CAACG,OAFzB,OAGRU,eAAOiB,OAAP,CAAe,KAAK9B,KAApB,CAHQ,IAGqB,CAAC,CAACI,KAHvB,OAIRS,eAAOkB,OAAP,CAAe,KAAK/B,KAApB,CAJQ,IAIqB,CAACW,QAAD,IAAa,CAAC,CAAC,KAAKhB,KAAL,CAAWH,UAJ/C,QADb,iBAQE,wCACE,IAAI,EAAC,UADP,EAEE,OAAO,EAAEN,OAFX,EAGE,QAAQ,EAAE,KAAKJ,YAHjB,EAIE,SAAS,EAAE,iBAAG+B,eAAOrC,KAAP,CAAa,KAAKwB,KAAlB,CAAH,EAA6B,+BAAY,KAAKA,KAAjB,KAA2Ba,eAAOmB,SAAP,CAAiB,KAAKhC,KAAtB,CAAxD,CAJb,EAKE,OAAO,EAAE,KAAKV,WALhB,EAME,MAAM,EAAE,KAAKG,UANf,EAOE,GAAG,EAAE,KAAKb,QAPZ,EAQE,QAAQ,EAAE+B,QARZ,EASE,EAAE,EAAEL,EATN,EAUE,IAAI,EAAC,QAVP,EAWE,oBAAkBC,eAXpB,GARF,eAqBE,sCACE,SAAS,EAAEK,mBADb,EAEE,KAAK,EACH1B,OAAO,IAAImB,KAAX,IAAoB,CAACM,QAArB,GACI,EACEsB,eAAe,EAAE5B,KADnB,EAEE6B,SAAS,uBAAqB7B,KAFhC,EADJ,GAKI8B,SARR,IAWG,CAAC,+BAAY,KAAKnC,KAAjB,CAAD,iBACC,sCACE,SAAS,EAAE,iBAAGa,eAAOuB,gBAAP,EAAH,EAA8BpB,sBAAcqB,UAA5C,mBACRxB,eAAOyB,uBAAP,CAA+B,KAAKtC,KAApC,CADQ,IACqCQ,OADrC,OAERK,eAAO0B,kBAAP,CAA0B,KAAKvC,KAA/B,CAFQ,IAEgCW,QAFhC,QADb,EAKE,KAAK,EACHzB,OAAO,IAAImB,KAAX,IAAoB,CAACM,QAArB,GACI,EACEsB,eAAe,EAAE5B,KADnB,EAEE6B,SAAS,uBAAqB7B,KAFhC,EADJ,GAKI8B,SAXR,GAZJ,CArBF,eAiDE,sCACE,SAAS,EAAE,iBAAGtB,eAAO2B,MAAP,CAAc,KAAKxC,KAAnB,CAAH,EAA8BgB,sBAAcwB,MAA5C,mBACR3B,eAAO4B,cAAP,CAAsB,KAAKzC,KAA3B,CADQ,IAC4BW,QAD5B,QADb,GAjDF,CADF,EAwDGW,OAxDH,CADF,CADF,CA8DD,C,QAyCOnC,c,GAAR,0BAAyB;AACvB,WAAO,KAAKd,KAAL,CAAWa,OAAX,KAAuBiD,SAA9B;AACD,G,iBA5MyBO,eAAMC,S,WAClBC,mB,GAAsB,Q,UAEtBC,S,GAAY,EACxB3D,OAAO,EAAE4D,mBAAUC,IADK,EAExBnD,cAAc,EAAEkD,mBAAUC,IAFF,EAGxBpC,QAAQ,EAAEmC,mBAAUC,IAHI,EAIxB3C,KAAK,EAAE0C,mBAAUC,IAJO,EAKxBvC,OAAO,EAAEsC,mBAAUC,IALK,EAMxB5C,OAAO,EAAE2C,mBAAUC,IANK,EAOxB/D,aAAa,EAAE8D,mBAAUE,IAPD,EAQxB3C,KAAK,EAAE,eAAChC,KAAD,EAAwB,CAC7B,IAAIA,KAAK,CAACgC,KAAN,IAAe,CAACrC,iBAApB,EAAuC,CACrC,sBAAQ,KAAR,kGACAA,iBAAiB,GAAG,IAApB,CACD,CACF,CAbuB,E,UAgBZO,Y,GAA6B,EACzCoC,QAAQ,EAAE,KAD+B,EAEzCH,OAAO,EAAE,KAFgC,EAGzCC,eAAe,EAAE,OAHwB,EAIzCC,iBAAiB,EAAEuC,6BAJsB,E","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.md

@@ -1,9 +1,94 @@
-```jsx harmony
-let initialState = { checked: false };
-
-let toggle = () => setState(state => ({ checked: !state.checked }));
-
-<div>
-  <Toggle checked={state.checked} onValueChange={toggle} /> {state.checked ? 'On' : 'Off'}
-</div>;
-```
+Базовый пример тогла.
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Toggle checked={checked} onValueChange={setChecked}>
+  {checked ? 'On' : 'Off'}
+</Toggle>
+```
+
+Пример тогла включенного по умолчанию.
+
+```jsx harmony
+<Toggle defaultChecked>
+  Включен по умолчанию
+</Toggle>
+```
+
+Тогл с надписью слева от переключателя.
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Toggle checked={checked} onValueChange={setChecked} captionPosition="left">
+  Показывать уведомления
+</Toggle>
+```
+
+Тогл с внешним `<label/>`.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+<Gapped>
+  <Toggle id="toggle-1" checked={checked} onValueChange={setChecked}/>
+  <label htmlFor="toggle-1">Внешний label</label>
+</Gapped>
+```
+
+Тогл получающий фокус после загрузки страницы.
+
+```jsx harmony
+<Toggle autoFocus>
+  Сразу с фокусом
+</Toggle>
+```
+
+Тоглы в различных стилях.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap="20px">
+  <Toggle warning>
+    Warning
+  </Toggle>
+  <Toggle error>
+    Error
+  </Toggle>
+  <Toggle loading>
+    Loading
+  </Toggle>
+  <Toggle disabled>
+    Disabled
+  </Toggle>
+</Gapped>
+```
+
+Тогл с кастомным действием при получении и потере фокуса.
+
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Toggle
+  onFocus={() => Toast.push('Я получил фокус!')}
+  onBlur={() => Toast.push('И потерял его...')}
+  >
+  С кастомными действиями при фокусе и его потере
+</Toggle>
+```
+
+
+Тогл с кастомным действием при переключении.
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Toggle onChange={() => Toast.push("Запускаю кастомное действие")}>
+  Кастомное действие при переключении
+</Toggle>
+```

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

@@ -1,12 +1,33 @@
-export declare const jsStyles: {
-    handle(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    input(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    container(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    focused(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    handle: string;
+    container: string;
+    disabled: string;
+    containerDisabled: string;
+    containerLoading: string;
+    background: string;
+};
+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;
     activeBackground(): string;
-    isLoading(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    isWarning(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    isError(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    wrapper(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    wrapperDisabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    disabledBackground(t: Theme): string;
+    activeBackgroundLoading(t: Theme): string;
+    isWarning(t: Theme): string;
+    isError(t: Theme): string;
+    button(t: Theme): string;
+    buttonRight(): string;
+    disabled(): string;
+    rootLeft(): string;
+    caption(t: Theme): string;
+    disabledCaption(t: Theme): string;
+    captionLeft(t: Theme): string;
 };