@skbkontur/react-ui 0.0.0-80ce75eca6 → 0.0.0-85ea551f96

package/components/Toggle/Toggle/Toggle.js

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

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

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

@@ -4,27 +4,73 @@ import { CommonProps } from '../../internal/CommonWrapper';
 export interface ToggleProps extends CommonProps {
     children?: React.ReactNode;
     /**
-     * Положение children справа или слева от переключателя
+     * Положение `children` относительно переключателя.
      * @default 'right'
      */
     captionPosition: 'left' | 'right';
+    /**
+     * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.
+     * @default false
+     */
     checked?: boolean;
+    /**
+     * Делает `тогл` включенным по умолчанию.
+     */
     defaultChecked?: boolean;
+    /**
+     * Отключает `тогл`.
+     */
     disabled?: boolean;
+    /**
+     * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.
+     */
     onValueChange?: (value: boolean) => void;
+    /**
+     * Событие вызывающееся при клике на `тогл`.
+     */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Cостояние валидации при предупреждении.
+     * @default false
+     */
     warning?: boolean;
+    /**
+     * Cостояние валидации при ошибке.
+     * @default false
+     */
     error?: boolean;
+    /**
+     * Добавляет стили для состояния `loading` и отключает `тогл`.
+     */
     loading?: boolean;
+    /**
+     * Если true, выставляет фокус на `тогле` после загрузки страницы.
+     */
     autoFocus?: boolean;
+    /**
+     * Событие вызывающееся, когда `тогл` получает фокус.
+     */
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Событие вызывающееся, когда `тогл` теряет фокус.
+     */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.
+     */
     color?: React.CSSProperties['color'];
+    /**
+     * HTML-атрибут `id` для передачи во внутренний `<input />`.
+     */
+    id?: string;
 }
 export interface ToggleState {
     checked?: boolean;
     focusByTab?: boolean;
 }
+/**
+ * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+ */
 export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
@@ -35,6 +81,7 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
         loading: PropTypes.Requireable<boolean>;
         warning: PropTypes.Requireable<boolean>;
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        color(props: ToggleProps): void;
     };
     static defaultProps: {
         disabled: boolean;
@@ -43,6 +90,7 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     };
     private theme;
     private input;
+    private setRootNode;
     constructor(props: ToggleProps);
     componentDidMount(): void;
     /**

package/components/Toggle/Toggle.md

@@ -1,24 +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>;
-```
-
-В компонент можно передать `children`, который будет отображаться рядом с переключателем.
-Положение `children` относительно переключателя указывается в `captionPosition`.
-
-```jsx harmony
-let initialState = { checked: false };
-
-let toggle = () => setState(state => ({ checked: !state.checked }));
-
-<div>
-  <Toggle checked={state.checked} onValueChange={toggle} captionPosition="left">
-    <span>Показывать уведомления</span>
-  </Toggle>
-</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>
+```