@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

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

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","cn","tabListener","ThemeContext","jsStyles","Toggle","props","theme","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","warning","error","loading","color","disabled","containerClassNames","container","focused","isLoading","isWarning","isError","wrapper","wrapperDisabled","backgroundColor","borderColor","boxShadow","undefined","activeBackground","handle","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { tabListener } from '../../lib/events/tabListener';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './Toggle.styles';\r\n\r\nexport interface ToggleProps {\r\n  checked?: boolean;\r\n  defaultChecked?: boolean;\r\n  disabled?: boolean;\r\n  onValueChange?: (value: boolean) => void;\r\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n  warning?: boolean;\r\n  error?: boolean;\r\n  loading?: boolean;\r\n  autoFocus?: boolean;\r\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\r\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\r\n  color?: React.CSSProperties['color'];\r\n}\r\n\r\nexport interface ToggleState {\r\n  checked?: boolean;\r\n  focusByTab?: boolean;\r\n}\r\n\r\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\r\n  public static __KONTUR_REACT_UI__ = 'Toggle';\r\n\r\n  public static propTypes = {\r\n    checked: PropTypes.bool,\r\n    defaultChecked: PropTypes.bool,\r\n    disabled: PropTypes.bool,\r\n    error: PropTypes.bool,\r\n    loading: PropTypes.bool,\r\n    warning: PropTypes.bool,\r\n    onValueChange: PropTypes.func,\r\n  };\r\n\r\n  public static defaultProps = {\r\n    disabled: false,\r\n    loading: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private input: HTMLInputElement | null = null;\r\n\r\n  constructor(props: ToggleProps) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      focusByTab: false,\r\n      checked: props.defaultChecked,\r\n    };\r\n  }\r\n\r\n  public componentDidMount() {\r\n    if (this.props.autoFocus) {\r\n      tabListener.isTabPressed = true;\r\n      this.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus = () => {\r\n    if (this.input) {\r\n      tabListener.isTabPressed = true;\r\n      this.input.focus();\r\n    }\r\n  };\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { warning, error, loading, color } = this.props;\r\n    const disabled = this.props.disabled || loading;\r\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\r\n\r\n    const containerClassNames = cn(jsStyles.container(this.theme), {\r\n      [jsStyles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\r\n      [jsStyles.isLoading(this.theme)]: !!loading,\r\n      [jsStyles.isWarning(this.theme)]: !color && !!warning,\r\n      [jsStyles.isError(this.theme)]: !color && !!error,\r\n    });\r\n\r\n    return (\r\n      <label\r\n        className={cn(jsStyles.wrapper(this.theme), {\r\n          [jsStyles.wrapperDisabled(this.theme)]: !!disabled,\r\n        })}\r\n      >\r\n        <input\r\n          type=\"checkbox\"\r\n          checked={checked}\r\n          onChange={this.handleChange}\r\n          className={jsStyles.input(this.theme)}\r\n          onFocus={this.handleFocus}\r\n          onBlur={this.handleBlur}\r\n          ref={this.inputRef}\r\n          disabled={disabled}\r\n        />\r\n        <div\r\n          className={containerClassNames}\r\n          style={\r\n            checked && color\r\n              ? {\r\n                  backgroundColor: color,\r\n                  borderColor: color,\r\n                  boxShadow: `inset 0 0 0 1px ${color}`,\r\n                }\r\n              : undefined\r\n          }\r\n        >\r\n          <div\r\n            className={jsStyles.activeBackground()}\r\n            style={checked && color ? { backgroundColor: color } : undefined}\r\n          />\r\n        </div>\r\n        <div className={jsStyles.handle(this.theme)} />\r\n      </label>\r\n    );\r\n  }\r\n\r\n  private inputRef = (element: HTMLInputElement) => {\r\n    this.input = element;\r\n  };\r\n\r\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (this.props.onValueChange) {\r\n      this.props.onValueChange(event.target.checked);\r\n    }\r\n\r\n    if (this.isUncontrolled()) {\r\n      this.setState({\r\n        checked: event.target.checked,\r\n      });\r\n    }\r\n\r\n    if (this.props.onChange) {\r\n      this.props.onChange(event);\r\n    }\r\n  };\r\n\r\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    if (this.props.onFocus) {\r\n      this.props.onFocus(event);\r\n    }\r\n\r\n    if (tabListener.isTabPressed) {\r\n      this.setState({ focusByTab: true });\r\n    }\r\n  };\r\n\r\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    if (this.props.onBlur) {\r\n      this.props.onBlur(event);\r\n    }\r\n    this.setState({\r\n      focusByTab: false,\r\n    });\r\n  };\r\n\r\n  private isUncontrolled() {\r\n    return this.props.checked === undefined;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","isTestEnv","isTheme2022","FocusControlWrapper","ThemeContext","getStyles","globalClasses","colorWarningShown","ToggleDataTids","root","Toggle","props","getProps","defaultProps","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","resetFocus","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","emotion","theme","renderMain","getContainerSizeClassName","styles","size","containerLarge","containerMedium","containerSmall","getHandleSizeClassName","handleLarge","handleMedium","handleSmall","getButtonSizeClassName","buttonLarge","buttonMedium","buttonSmall","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getInputSizeClassName","inputLarge","inputMedium","inputSmall","getActiveHandleSizeClassName","activeHandleLarge","activeHandleMedium","activeHandleSmall","getCaptionSizeClassName","captionLarge","captionMedium","captionSmall","children","error","color","id","ariaDescribedby","ariaLabel","loading","captionPosition","disableAnimations","disabled","containerClassNames","cx","container","containerDisabled","containerLoading","labelClassNames","rootLeft","disableAnimation","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","input2022","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","displayName","propTypes","bool","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } 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';\nimport { SizeProp } from '../../lib/types/props';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles, globalClasses } from './Toggle.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type ToggleSize = SizeProp;\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, 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  size?: SizeProp;\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<\n  Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations' | 'size'>\n>;\n\n/**\n * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n  public static displayName = '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    size: 'small',\n  };\n\n  private getProps = createPropsGetter(Toggle.defaultProps);\n\n  private theme!: Theme;\n  private emotion!: Emotion;\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private getContainerSizeClassName() {\n    const styles = getStyles(this.emotion);\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.containerLarge(this.theme);\n      case 'medium':\n        return styles.containerMedium(this.theme);\n      case 'small':\n      default:\n        return styles.containerSmall(this.theme);\n    }\n  }\n\n  private getHandleSizeClassName() {\n    const styles = getStyles(this.emotion);\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.handleLarge(this.theme);\n      case 'medium':\n        return styles.handleMedium(this.theme);\n      case 'small':\n      default:\n        return styles.handleSmall(this.theme);\n    }\n  }\n\n  private getButtonSizeClassName() {\n    const styles = getStyles(this.emotion);\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.buttonLarge(this.theme);\n      case 'medium':\n        return styles.buttonMedium(this.theme);\n      case 'small':\n      default:\n        return styles.buttonSmall(this.theme);\n    }\n  }\n\n  private getRootSizeClassName() {\n    const styles = getStyles(this.emotion);\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.rootLarge(this.theme);\n      case 'medium':\n        return styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return styles.rootSmall(this.theme);\n    }\n  }\n\n  private getInputSizeClassName() {\n    const styles = getStyles(this.emotion);\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.inputLarge(this.theme);\n      case 'medium':\n        return styles.inputMedium(this.theme);\n      case 'small':\n      default:\n        return styles.inputSmall(this.theme);\n    }\n  }\n\n  private getActiveHandleSizeClassName() {\n    if (isTheme2022(this.theme)) {\n      return '';\n    }\n    const styles = getStyles(this.emotion);\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.activeHandleLarge(this.theme);\n      case 'medium':\n        return styles.activeHandleMedium(this.theme);\n      case 'small':\n      default:\n        return styles.activeHandleSmall(this.theme);\n    }\n  }\n\n  private getCaptionSizeClassName() {\n    const styles = getStyles(this.emotion);\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.captionLarge(this.theme);\n      case 'medium':\n        return styles.captionMedium(this.theme);\n      case 'small':\n      default:\n        return styles.captionSmall(this.theme);\n    }\n  }\n\n  private renderMain() {\n    const {\n      children,\n      warning,\n      error,\n      color,\n      id,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = 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    const styles = getStyles(this.emotion);\n    const containerClassNames = this.emotion.cx(this.getContainerSizeClassName(), {\n      [styles.container(this.theme)]: true,\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = this.emotion.cx(this.getRootSizeClassName(), this.getActiveHandleSizeClassName(), {\n      [styles.root(this.theme)]: true,\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 = this.emotion.cx(this.getCaptionSizeClassName(), {\n        [styles.caption(this.theme)]: true,\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={this.emotion.cx(this.getButtonSizeClassName(), {\n              [styles.button(this.theme)]: true,\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            <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n              <input\n                type=\"checkbox\"\n                checked={checked}\n                onChange={this.handleChange}\n                className={this.emotion.cx(\n                  this.getInputSizeClassName(),\n                  isTheme2022(this.theme) && styles.input2022(this.theme),\n                  {\n                    [styles.input(this.theme)]: true,\n                  },\n                )}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                ref={this.inputRef}\n                disabled={disabled}\n                id={id}\n                role=\"switch\"\n                aria-label={ariaLabel}\n                aria-describedby={ariaDescribedby}\n              />\n            </FocusControlWrapper>\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={this.emotion.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={this.emotion.cx(this.getHandleSizeClassName(), globalClasses.handle, {\n                [styles.handle(this.theme)]: true,\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 resetFocus = () => this.setState({ focusByTab: false });\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    this.resetFocus();\n    this.props.onBlur?.(event);\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"]}

package/components/Toggle/Toggle.d.ts

@@ -1,25 +1,94 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
-export interface ToggleProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type ToggleSize = SizeProp;
+export interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {
+    children?: React.ReactNode;
+    /**
+     * Положение `children` относительно переключателя.
+     * @default 'right'
+     */
+    captionPosition?: 'left' | 'right';
+    /**
+     * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.
+     * @default false
+     */
     checked?: boolean;
+    /**
+     * Делает `тогл` включенным по умолчанию.
+     */
     defaultChecked?: boolean;
+    /**
+     * Отключает `тогл`.
+     */
     disabled?: boolean;
+    /**
+     * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.
+     */
     onValueChange?: (value: boolean) => void;
+    /**
+     * Событие вызывающееся при клике на `тогл`.
+     */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Состояние валидации при предупреждении.
+     * @default false
+     */
     warning?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     * @default false
+     */
     error?: boolean;
+    /**
+     * Добавляет стили для состояния `loading` и отключает `тогл`.
+     */
     loading?: boolean;
+    /**
+     * Если true, выставляет фокус на `тогле` после загрузки страницы.
+     */
     autoFocus?: boolean;
+    /** Размер */
+    size?: SizeProp;
+    /**
+     * Событие вызывающееся, когда `тогл` получает фокус.
+     */
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Событие вызывающееся, когда `тогл` теряет фокус.
+     */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.
+     */
     color?: React.CSSProperties['color'];
+    /**
+     * HTML-атрибут `id` для передачи во внутренний `<input />`.
+     */
+    id?: string;
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
 }
 export interface ToggleState {
     checked?: boolean;
     focusByTab?: boolean;
 }
+export declare const ToggleDataTids: {
+    readonly root: "Toggle__root";
+};
+declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations' | 'size'>>;
+/**
+ * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+ */
 export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         checked: PropTypes.Requireable<boolean>;
         defaultChecked: PropTypes.Requireable<boolean>;
@@ -28,13 +97,14 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
         loading: PropTypes.Requireable<boolean>;
         warning: PropTypes.Requireable<boolean>;
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        color: (props: ToggleProps) => void;
     };
-    static defaultProps: {
-        disabled: boolean;
-        loading: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     private theme;
+    private emotion;
     private input;
+    private setRootNode;
     constructor(props: ToggleProps);
     componentDidMount(): void;
     /**
@@ -42,10 +112,19 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
      */
     focus: () => void;
     render(): JSX.Element;
+    private getContainerSizeClassName;
+    private getHandleSizeClassName;
+    private getButtonSizeClassName;
+    private getRootSizeClassName;
+    private getInputSizeClassName;
+    private getActiveHandleSizeClassName;
+    private getCaptionSizeClassName;
     private renderMain;
     private inputRef;
     private handleChange;
     private handleFocus;
+    private resetFocus;
     private handleBlur;
     private isUncontrolled;
 }
+export {};

package/components/Toggle/Toggle.md

@@ -1,9 +1,110 @@
-```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>
+```
+
+У тоглов есть 3 стандартных размера.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <Toggle size="small">
+    Маленький
+  </Toggle>
+  <Toggle size="medium">
+    Средний
+  </Toggle>
+  <Toggle size="large">
+    Большой
+  </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/components/Toggle/Toggle.mixins/Toggle.mixins.js

@@ -0,0 +1,48 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+import { isChrome } from "../../../lib/client";
+import { globalClasses } from "../Toggle.styles";
+export var toggleSizeMixin = function toggleSizeMixin(emotion) {
+  return function (fontSize, toggleHeight, toggleWidth) {
+    return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n\n    &::before {\n      width: ", ";\n    }\n  "])), toggleHeight, fontSize, toggleWidth);
+  };
+};
+export var buttonSizeMixin = function buttonSizeMixin(emotion) {
+  return function (labGrotesqueBaselineCompensation, fontSize, toggleHeight, toggleWidth, toggleBorderRadius, toggleButtonOffsetY) {
+    var labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);
+    var buttonFontSize = parseInt(fontSize);
+    var baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;
+    return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    width: ", ";\n    flex: 1 0 ", ";\n\n    border-radius: ", ";\n    line-height: ", ";\n\n    margin-top: calc(", " + ", "px);\n  "])), toggleHeight, toggleWidth, toggleWidth, toggleBorderRadius, toggleHeight, toggleButtonOffsetY, baselineCompensation);
+  };
+};
+export var captionSizeMixin = function captionSizeMixin(emotion) {
+  return function (fontSize, toggleHeight) {
+    return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n  "])), toggleHeight, fontSize);
+  };
+};
+export var handleMixin = function handleMixin(emotion) {
+  return function (toggleHandleSize, toggleHandleBorderRadius) {
+    return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n  "])), toggleHandleBorderRadius, toggleHandleSize, toggleHandleSize);
+  };
+};
+export var containerSizeMixin = function containerSizeMixin(emotion) {
+  return function (toggleBorderRadius) {
+    return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n  "])), toggleBorderRadius);
+  };
+};
+export var inputSizeMixin = function inputSizeMixin(emotion) {
+  return function (toggleHeight, toggleWidth) {
+    var handleWidthWithBorders = toggleHeight;
+    var height = parseInt(toggleHeight);
+    return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    &:checked ~ .", " .", " {\n      border-radius: ", "px 0 0 ", "px;\n    }\n    &:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ");\n    }\n  "])), globalClasses.containerDisabled, globalClasses.background, height * 0.5, height * 0.5, globalClasses.handle, toggleWidth, handleWidthWithBorders);
+  };
+};
+export var activeHandleSizeMixin = function activeHandleSizeMixin(emotion) {
+  return function (toggleHandleSize, toggleBorderWidth, toggleHandleActiveWidthIncrement, toggleWidth) {
+    var handleWidthWithBorders = toggleHandleSize;
+    var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + toggleBorderWidth + " + " + toggleHandleActiveWidthIncrement + ")";
+    return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    &:active:not(.", ") .", " {\n      width: ", ";\n    }\n    &:active:not(.", ") input:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ") translateX(-4px);\n    }\n  "])), globalClasses.disabled, globalClasses.handle, handleActiveWidth, globalClasses.disabled, globalClasses.handle, toggleWidth, handleWidthWithBorders);
+  };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Toggle.mixins.ts"],"names":["isChrome","globalClasses","toggleSizeMixin","emotion","fontSize","toggleHeight","toggleWidth","css","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","captionSizeMixin","handleMixin","toggleHandleSize","toggleHandleBorderRadius","containerSizeMixin","inputSizeMixin","handleWidthWithBorders","height","containerDisabled","background","handle","activeHandleSizeMixin","toggleBorderWidth","toggleHandleActiveWidthIncrement","handleActiveWidth","disabled"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { isChrome } from '../../lib/client';\n\nimport { globalClasses } from './Toggle.styles';\n\nexport const toggleSizeMixin = (emotion: Emotion) => (fontSize: string, toggleHeight: string, toggleWidth: string) => {\n  return emotion.css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n\n    &::before {\n      width: ${toggleWidth};\n    }\n  `;\n};\n\nexport const buttonSizeMixin =\n  (emotion: Emotion) =>\n  (\n    labGrotesqueBaselineCompensation: string,\n    fontSize: string,\n    toggleHeight: string,\n    toggleWidth: string,\n    toggleBorderRadius: string,\n    toggleButtonOffsetY: string,\n  ) => {\n    const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n    const buttonFontSize = parseInt(fontSize);\n    const baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n    return emotion.css`\n    height: ${toggleHeight};\n    width: ${toggleWidth};\n    flex: 1 0 ${toggleWidth};\n\n    border-radius: ${toggleBorderRadius};\n    line-height: ${toggleHeight};\n\n    margin-top: calc(${toggleButtonOffsetY} + ${baselineCompensation}px);\n  `;\n  };\n\nexport const captionSizeMixin = (emotion: Emotion) => (fontSize: string, toggleHeight: string) => {\n  return emotion.css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n  `;\n};\n\nexport const handleMixin = (emotion: Emotion) => (toggleHandleSize: string, toggleHandleBorderRadius: string) => {\n  return emotion.css`\n    border-radius: ${toggleHandleBorderRadius};\n    height: ${toggleHandleSize};\n    width: ${toggleHandleSize};\n  `;\n};\n\nexport const containerSizeMixin = (emotion: Emotion) => (toggleBorderRadius: string) => {\n  return emotion.css`\n    border-radius: ${toggleBorderRadius};\n  `;\n};\n\nexport const inputSizeMixin = (emotion: Emotion) => (toggleHeight: string, toggleWidth: string) => {\n  const handleWidthWithBorders = toggleHeight;\n  const height = parseInt(toggleHeight);\n  return emotion.css`\n    &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n      border-radius: ${height * 0.5}px 0 0 ${height * 0.5}px;\n    }\n    &:checked ~ .${globalClasses.handle} {\n      transform: translateX(${toggleWidth}) translateX(-${handleWidthWithBorders});\n    }\n  `;\n};\n\nexport const activeHandleSizeMixin =\n  (emotion: Emotion) =>\n  (\n    toggleHandleSize: string,\n    toggleBorderWidth: string,\n    toggleHandleActiveWidthIncrement: string,\n    toggleWidth: string,\n  ) => {\n    const handleWidthWithBorders = toggleHandleSize;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${toggleBorderWidth} + ${toggleHandleActiveWidthIncrement})`;\n    return emotion.css`\n    &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n      width: ${handleActiveWidth};\n    }\n    &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n      transform: translateX(${toggleWidth}) translateX(-${handleWidthWithBorders}) translateX(-4px);\n    }\n  `;\n  };\n"]}

package/components/Toggle/Toggle.mixins/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Toggle/Toggle.mixins.js",
+  "module": "Toggle.mixins",
+  "types": "../Toggle.mixins.d.ts",
+  "sideEffects": false
+}

package/components/Toggle/Toggle.mixins.d.ts

@@ -0,0 +1,8 @@
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const toggleSizeMixin: (emotion: Emotion) => (fontSize: string, toggleHeight: string, toggleWidth: string) => string;
+export declare const buttonSizeMixin: (emotion: Emotion) => (labGrotesqueBaselineCompensation: string, fontSize: string, toggleHeight: string, toggleWidth: string, toggleBorderRadius: string, toggleButtonOffsetY: string) => string;
+export declare const captionSizeMixin: (emotion: Emotion) => (fontSize: string, toggleHeight: string) => string;
+export declare const handleMixin: (emotion: Emotion) => (toggleHandleSize: string, toggleHandleBorderRadius: string) => string;
+export declare const containerSizeMixin: (emotion: Emotion) => (toggleBorderRadius: string) => string;
+export declare const inputSizeMixin: (emotion: Emotion) => (toggleHeight: string, toggleWidth: string) => string;
+export declare const activeHandleSizeMixin: (emotion: Emotion) => (toggleHandleSize: string, toggleBorderWidth: string, toggleHandleActiveWidthIncrement: string, toggleWidth: string) => string;