@skbkontur/react-ui 1.12.2 → 2.0.0-beta.4

package/components/Toggle/Toggle.js

@@ -1,120 +1,251 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var PropTypes = tslib_1.__importStar(require("prop-types"));
-var tabListener_1 = tslib_1.__importDefault(require("../../lib/events/tabListener"));
-var Emotion_1 = require("../../lib/theming/Emotion");
-var Toggle_module_less_1 = tslib_1.__importDefault(require("./Toggle.module.css"));
-var Toggle_styles_1 = tslib_1.__importDefault(require("./Toggle.styles"));
-var ThemeConsumer_1 = require("../ThemeConsumer");
-var Toggle = /** @class */function (_super) {
-  tslib_1.__extends(Toggle, _super);
-  function Toggle(props) {
-    var _this = _super.call(this, props) || this;
-    _this.input = null;
-    /**
-     * @public
-     */
-    _this.focus = function () {
-      if (_this.input) {
-        tabListener_1["default"].isTabPressed = true;
-        _this.input.focus();
-      }
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
     };
-    _this.inputRef = function (element) {
-      _this.input = element;
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
-    _this.handleChange = function (event) {
-      if (_this.props.onChange) {
-        _this.props.onChange(event.target.checked);
-      }
-      if (_this.props.changeEventHandler) {
-        _this.props.changeEventHandler(event);
-      }
-      if (_this.isUncontrolled()) {
-        _this.setState({
-          checked: event.target.checked });
-
-      }
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-    _this.handleFocus = function (event) {
-      if (_this.props.onFocus) {
-        _this.props.onFocus(event);
-      }
-      if (tabListener_1["default"].isTabPressed) {
-        _this.setState({ focusByTab: true });
-      }
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { KeyListener } from '../../lib/events/keyListener.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { isTestEnv } from '../../lib/currentEnvironment.js';
+import { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';
+import { withSize } from '../../lib/size/SizeDecorator.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles, globalClasses } from './Toggle.styles.js';
+export var ToggleDataTids = {
+    root: 'Toggle__root',
+};
+/**
+ * Тогл переключает состояния. Например, включает или отключает уведомления в настройках.
+ * Состоит из надписи и переключателя.
+ */
+var Toggle = /** @class */ (function (_super) {
+    __extends(Toggle, _super);
+    function Toggle(props) {
+        var _this = _super.call(this, props) || this;
+        _this.getProps = createPropsGetter(Toggle_1.defaultProps);
+        _this.input = null;
+        /**
+         * @public
+         */
+        _this.focus = function () {
+            if (_this.input) {
+                _this.keyListener.isTabPressed = true;
+                _this.input.focus();
+            }
+        };
+        _this.inputRef = function (element) {
+            _this.input = element;
+        };
+        _this.handleChange = function (event) {
+            if (_this.props.onValueChange) {
+                _this.props.onValueChange(event.target.checked);
+            }
+            if (_this.isUncontrolled()) {
+                _this.setState({
+                    checked: event.target.checked,
+                });
+            }
+            if (_this.props.onChange) {
+                _this.props.onChange(event);
+            }
+        };
+        _this.handleFocus = function (event) {
+            if (_this.props.onFocus) {
+                _this.props.onFocus(event);
+            }
+            if (_this.keyListener.isTabPressed) {
+                _this.setState({ focusByTab: true });
+            }
+        };
+        _this.resetFocus = function () { return _this.setState({ focusByTab: false }); };
+        _this.handleBlur = function (event) {
+            var _a, _b;
+            _this.resetFocus();
+            (_b = (_a = _this.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+        _this.state = {
+            focusByTab: false,
+            checked: props.defaultChecked,
+        };
+        return _this;
+    }
+    Toggle_1 = Toggle;
+    Toggle.prototype.componentDidMount = function () {
+        this.keyListener = new KeyListener(this.globalObject);
+        if (this.props.autoFocus) {
+            this.keyListener.isTabPressed = true;
+            this.focus();
+        }
     };
-    _this.handleBlur = function (event) {
-      if (_this.props.onBlur) {
-        _this.props.onBlur(event);
-      }
-      _this.setState({
-        focusByTab: false });
-
+    Toggle.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
     };
-    _this.state = {
-      focusByTab: false,
-      checked: props.defaultChecked };
-
-    return _this;
-  }
-  Toggle.prototype.componentDidMount = function () {
-    if (this.props.autoFocus) {
-      tabListener_1["default"].isTabPressed = true;
-      this.focus();
-    }
-  };
-  Toggle.prototype.render = function () {
-    var _this = this;
-    return React.createElement(ThemeConsumer_1.ThemeConsumer, null, function (theme) {
-      _this.theme = theme;
-      return _this.renderMain();
-    });
-  };
-  Toggle.prototype.renderMain = function () {
-    var _a, _b;
-    var _c = this.props,warning = _c.warning,error = _c.error,loading = _c.loading,color = _c.color;
-    var disabled = this.props.disabled || loading;
-    var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
-    var containerClassNames = Emotion_1.cx(Toggle_module_less_1["default"].container, Toggle_styles_1["default"].container(this.theme), (_a = {},
-    _a[Toggle_module_less_1["default"].isLoading] = !!loading,
-    _a[Toggle_styles_1["default"].focused(this.theme)] = !disabled && !!this.state.focusByTab,
-    _a[Toggle_styles_1["default"].isLoading(this.theme)] = !!loading,
-    _a[Toggle_styles_1["default"].isWarning(this.theme)] = !color && !!warning,
-    _a[Toggle_styles_1["default"].isError(this.theme)] = !color && !!error,
-    _a));
-    return React.createElement("label", { className: Emotion_1.cx(Toggle_module_less_1["default"].wrapper, Toggle_styles_1["default"].wrapper(this.theme), (_b = {},
-      _b[Toggle_module_less_1["default"].isDisabled] = !!disabled,
-      _b)) },
-    React.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: Toggle_module_less_1["default"].input, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled }),
-    React.createElement("div", { className: containerClassNames, style: checked && color ?
-      {
-        backgroundColor: color,
-        borderColor: color } :
-
-      undefined },
-    React.createElement("div", { className: Emotion_1.cx(Toggle_module_less_1["default"].activeBackground, Toggle_styles_1["default"].activeBackground(this.theme)), style: checked && color ? { backgroundColor: color } : undefined })),
-    React.createElement("div", { className: Emotion_1.cx(Toggle_module_less_1["default"].handle, Toggle_styles_1["default"].handle(this.theme)) }));
-  };
-  Toggle.prototype.isUncontrolled = function () {
-    return this.props.checked === undefined;
-  };
-  Toggle.__KONTUR_REACT_UI__ = 'Toggle';
-  Toggle.propTypes = {
-    checked: PropTypes.bool,
-    defaultChecked: PropTypes.bool,
-    disabled: PropTypes.bool,
-    error: PropTypes.bool,
-    loading: PropTypes.bool,
-    warning: PropTypes.bool,
-    onChange: PropTypes.func };
-
-  Toggle.defaultProps = {
-    disabled: false,
-    loading: false };
-
-  return Toggle;
-}(React.Component);
-exports["default"] = Toggle;
+    Toggle.prototype.getContainerSizeClassName = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.containerLarge(this.theme);
+            case 'medium':
+                return this.styles.containerMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.containerSmall(this.theme);
+        }
+    };
+    Toggle.prototype.getHandleSizeClassName = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.handleLarge(this.theme);
+            case 'medium':
+                return this.styles.handleMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.handleSmall(this.theme);
+        }
+    };
+    Toggle.prototype.getButtonSizeClassName = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.buttonLarge(this.theme);
+            case 'medium':
+                return this.styles.buttonMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.buttonSmall(this.theme);
+        }
+    };
+    Toggle.prototype.getRootSizeClassName = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.rootLarge(this.theme);
+            case 'medium':
+                return this.styles.rootMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.rootSmall(this.theme);
+        }
+    };
+    Toggle.prototype.getInputSizeClassName = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.inputLarge(this.theme);
+            case 'medium':
+                return this.styles.inputMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.inputSmall(this.theme);
+        }
+    };
+    Toggle.prototype.getCaptionSizeClassName = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.captionLarge(this.theme);
+            case 'medium':
+                return this.styles.captionMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.captionSmall(this.theme);
+        }
+    };
+    Toggle.prototype.renderMain = function () {
+        var _a, _b, _c, _d, _e;
+        var _f = this.props, children = _f.children, warning = _f.warning, error = _f.error, id = _f.id, name = _f.name, ariaDescribedby = _f["aria-describedby"], ariaLabel = _f["aria-label"];
+        var _g = this.getProps(), loading = _g.loading, captionPosition = _g.captionPosition, disableAnimations = _g.disableAnimations;
+        var disabled = this.getProps().disabled || loading;
+        var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
+        var containerClassNames = this.cx(this.getContainerSizeClassName(), (_a = {},
+            _a[this.styles.container(this.theme)] = true,
+            _a[this.styles.containerDisabled(this.theme)] = !!disabled,
+            _a[globalClasses.container] = true,
+            _a[globalClasses.containerDisabled] = !!disabled,
+            _a[globalClasses.containerLoading] = loading,
+            _a));
+        var labelClassNames = this.cx(this.getRootSizeClassName(), (_b = {},
+            _b[this.styles.root(this.theme)] = true,
+            _b[this.styles.rootLeft()] = captionPosition === 'left',
+            _b[this.styles.disabled()] = !!disabled,
+            _b[globalClasses.disabled] = !!disabled,
+            _b[this.styles.disableAnimation()] = disableAnimations,
+            _b));
+        var caption = null;
+        if (children) {
+            var captionClass = this.cx(this.getCaptionSizeClassName(), (_c = {},
+                _c[this.styles.caption(this.theme)] = true,
+                _c[this.styles.captionLeft(this.theme)] = captionPosition === 'left',
+                _c[this.styles.disabledCaption(this.theme)] = !!disabled,
+                _c));
+            caption = React.createElement("span", { className: captionClass }, children);
+        }
+        return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
+            React.createElement("label", { "data-tid": ToggleDataTids.root, className: labelClassNames },
+                React.createElement("div", { className: this.cx(this.getButtonSizeClassName(), (_d = {},
+                        _d[this.styles.button(this.theme)] = true,
+                        _d[this.styles.buttonRight()] = captionPosition === 'left',
+                        _d[this.styles.isWarning(this.theme)] = !!warning,
+                        _d[this.styles.isError(this.theme)] = !!error,
+                        _d[this.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab,
+                        _d)) },
+                    React.createElement(FocusControlWrapper, { onBlurWhenDisabled: this.resetFocus },
+                        React.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: this.cx(this.getInputSizeClassName(), this.styles.input(this.theme)), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled, id: id, name: name, role: "switch", "aria-label": ariaLabel, "aria-describedby": ariaDescribedby })),
+                    React.createElement("div", { className: containerClassNames }),
+                    React.createElement("div", { className: this.cx(this.getHandleSizeClassName(), globalClasses.handle, (_e = {},
+                            _e[this.styles.handle(this.theme)] = true,
+                            _e[this.styles.handleDisabled(this.theme)] = disabled,
+                            _e)) })),
+                caption)));
+    };
+    Toggle.prototype.isUncontrolled = function () {
+        return this.props.checked === undefined;
+    };
+    var Toggle_1;
+    Toggle.__KONTUR_REACT_UI__ = 'Toggle';
+    Toggle.displayName = 'Toggle';
+    Toggle.defaultProps = {
+        disabled: false,
+        loading: false,
+        captionPosition: 'right',
+        disableAnimations: isTestEnv,
+    };
+    Toggle = Toggle_1 = __decorate([
+        withRenderEnvironment,
+        rootNode,
+        withSize
+    ], Toggle);
+    return Toggle;
+}(React.Component));
+export { Toggle };
+//# sourceMappingURL=Toggle.js.map

package/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["Toggle.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../components/Toggle/Toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { AriaAttributes, InputHTMLAttributes } from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport { getStyles, globalClasses } from './Toggle.styles.js';\n\nexport interface ToggleProps\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n    Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name'>,\n    CommonProps {\n  /** @ignore */\n  children?: React.ReactNode;\n\n  /** Расположение названия относительно переключателя.\n   * @default 'right' */\n  captionPosition?: 'left' | 'right';\n\n  /** Включает тогл.\n   * @default false */\n  checked?: boolean;\n\n  /** Делает тогл включенным по умолчанию. Не работает, если задан проп `checked`. */\n  defaultChecked?: boolean;\n\n  /** Блокирует тогл. */\n  disabled?: boolean;\n\n  /** Событие изменения значения. */\n  onValueChange?: (value: boolean) => void;\n\n  /** Событие клика на тогл. */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n\n  /** Переводит тогл в состояние предупреждения.\n   * @default false */\n  warning?: boolean;\n\n  /** Переводит тогл в состояние ошибки.\n   * @default false */\n  error?: boolean;\n\n  /** Переводит тогл в состояние загрузки: добавляет стили для состояния `loading` и отключает тогл.*/\n  loading?: boolean;\n\n  /** Устанавливает фокус на тогл после окончания загрузки страницы.\n   * @default false */\n  autoFocus?: boolean;\n\n  /** Размер тогла. */\n  size?: SizeProp;\n\n  /** Событие получения тоглом фокуса.*/\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n\n  /** Событие потери тоглом фокуса. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\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 */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n  public static displayName = 'Toggle';\n\n  public static defaultProps: DefaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n    disableAnimations: isTestEnv,\n  };\n  private size!: SizeProp;\n\n  private getProps = createPropsGetter(Toggle.defaultProps);\n\n  private styles!: ReturnType<typeof getStyles>;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private globalObject!: GlobalObject;\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private keyListener!: KeyListener;\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    this.keyListener = new KeyListener(this.globalObject);\n    if (this.props.autoFocus) {\n      this.keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = (): void => {\n    if (this.input) {\n      this.keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private getContainerSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.containerLarge(this.theme);\n      case 'medium':\n        return this.styles.containerMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.containerSmall(this.theme);\n    }\n  }\n\n  private getHandleSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.handleLarge(this.theme);\n      case 'medium':\n        return this.styles.handleMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.handleSmall(this.theme);\n    }\n  }\n\n  private getButtonSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.buttonLarge(this.theme);\n      case 'medium':\n        return this.styles.buttonMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.buttonSmall(this.theme);\n    }\n  }\n\n  private getRootSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.rootLarge(this.theme);\n      case 'medium':\n        return this.styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.rootSmall(this.theme);\n    }\n  }\n\n  private getInputSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.inputLarge(this.theme);\n      case 'medium':\n        return this.styles.inputMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.inputSmall(this.theme);\n    }\n  }\n\n  private getCaptionSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.captionLarge(this.theme);\n      case 'medium':\n        return this.styles.captionMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.captionSmall(this.theme);\n    }\n  }\n\n  private renderMain() {\n    const {\n      children,\n      warning,\n      error,\n      id,\n      name,\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\n    const containerClassNames = this.cx(this.getContainerSizeClassName(), {\n      [this.styles.container(this.theme)]: true,\n      [this.styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = this.cx(this.getRootSizeClassName(), {\n      [this.styles.root(this.theme)]: true,\n      [this.styles.rootLeft()]: captionPosition === 'left',\n      [this.styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n      [this.styles.disableAnimation()]: disableAnimations,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = this.cx(this.getCaptionSizeClassName(), {\n        [this.styles.caption(this.theme)]: true,\n        [this.styles.captionLeft(this.theme)]: captionPosition === 'left',\n        [this.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.cx(this.getButtonSizeClassName(), {\n              [this.styles.button(this.theme)]: true,\n              [this.styles.buttonRight()]: captionPosition === 'left',\n              [this.styles.isWarning(this.theme)]: !!warning,\n              [this.styles.isError(this.theme)]: !!error,\n              [this.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.cx(this.getInputSizeClassName(), this.styles.input(this.theme))}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                ref={this.inputRef}\n                disabled={disabled}\n                id={id}\n                name={name}\n                role=\"switch\"\n                aria-label={ariaLabel}\n                aria-describedby={ariaDescribedby}\n              />\n            </FocusControlWrapper>\n            <div className={containerClassNames} />\n            <div\n              className={this.cx(this.getHandleSizeClassName(), globalClasses.handle, {\n                [this.styles.handle(this.theme)]: true,\n                [this.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 (this.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.mixins.d.ts

@@ -0,0 +1,6 @@
+export declare const toggleSizeMixin: (fontSize: string, toggleHeight: string, toggleWidth: string) => string;
+export declare const buttonSizeMixin: (labGrotesqueBaselineCompensation: string, fontSize: string, toggleHeight: string, toggleWidth: string, toggleBorderRadius: string, toggleButtonOffsetY: string) => string;
+export declare const captionSizeMixin: (fontSize: string, toggleHeight: string) => string;
+export declare const handleMixin: (toggleHandleSize: string, toggleHandleBorderRadius: string) => string;
+export declare const containerSizeMixin: (toggleBorderRadius: string) => string;
+export declare const inputSizeMixin: (toggleHeight: string, toggleWidth: string) => string;

package/components/Toggle/Toggle.mixins.js

@@ -0,0 +1,26 @@
+import { isChrome } from '../../lib/client.js';
+import { globalClasses } from './Toggle.styles.js';
+export var toggleSizeMixin = function (fontSize, toggleHeight, toggleWidth) {
+    return "\n    line-height: ".concat(toggleHeight, ";\n    font-size: ").concat(fontSize, ";\n\n    &::before {\n      width: ").concat(toggleWidth, ";\n    }\n  ");
+};
+export var buttonSizeMixin = function (labGrotesqueBaselineCompensation, fontSize, toggleHeight, toggleWidth, toggleBorderRadius, toggleButtonOffsetY) {
+    var labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);
+    var buttonFontSize = parseInt(fontSize);
+    var baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;
+    return "\n    height: ".concat(toggleHeight, ";\n    width: ").concat(toggleWidth, ";\n    flex: 1 0 ").concat(toggleWidth, ";\n\n    border-radius: ").concat(toggleBorderRadius, ";\n    line-height: ").concat(toggleHeight, ";\n\n    margin-top: calc(").concat(toggleButtonOffsetY, " + ").concat(baselineCompensation, "px);\n  ");
+};
+export var captionSizeMixin = function (fontSize, toggleHeight) {
+    return "\n    line-height: ".concat(toggleHeight, ";\n    font-size: ").concat(fontSize, ";\n  ");
+};
+export var handleMixin = function (toggleHandleSize, toggleHandleBorderRadius) {
+    return "\n    border-radius: ".concat(toggleHandleBorderRadius, ";\n    height: ").concat(toggleHandleSize, ";\n    width: ").concat(toggleHandleSize, ";\n  ");
+};
+export var containerSizeMixin = function (toggleBorderRadius) {
+    return "\n    border-radius: ".concat(toggleBorderRadius, ";\n  ");
+};
+export var inputSizeMixin = function (toggleHeight, toggleWidth) {
+    var handleWidthWithBorders = toggleHeight;
+    var height = parseInt(toggleHeight);
+    return "\n    &:checked ~ .".concat(globalClasses.containerDisabled, " .").concat(globalClasses.background, " {\n      border-radius: ").concat(height * 0.5, "px 0 0 ").concat(height * 0.5, "px;\n    }\n    &:checked ~ .").concat(globalClasses.handle, " {\n      transform: translateX(").concat(toggleWidth, ") translateX(-").concat(handleWidthWithBorders, ");\n    }\n  ");
+};
+//# sourceMappingURL=Toggle.mixins.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.mixins.js","sourceRoot":"","sources":["../../../components/Toggle/Toggle.mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,QAAgB,EAAE,YAAoB,EAAE,WAAmB;IACzF,OAAO,6BACU,YAAY,+BACd,QAAQ,gDAGV,WAAW,iBAEvB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAC7B,gCAAwC,EACxC,QAAgB,EAChB,YAAoB,EACpB,WAAmB,EACnB,kBAA0B,EAC1B,mBAA2B;IAE3B,IAAM,yBAAyB,GAAG,QAAQ,CAAC,gCAAgC,CAAC,CAAC;IAC7E,IAAM,cAAc,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1C,IAAM,oBAAoB,GAAG,cAAc,IAAI,EAAE,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/F,OAAO,wBACK,YAAY,2BACb,WAAW,8BACR,WAAW,qCAEN,kBAAkB,iCACpB,YAAY,uCAER,mBAAmB,gBAAM,oBAAoB,aACjE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,QAAgB,EAAE,YAAoB;IACrE,OAAO,6BACU,YAAY,+BACd,QAAQ,UACtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,gBAAwB,EAAE,wBAAgC;IACpF,OAAO,+BACY,wBAAwB,4BAC/B,gBAAgB,2BACjB,gBAAgB,UAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,kBAA0B;IAC3D,OAAO,+BACY,kBAAkB,UACpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,YAAoB,EAAE,WAAmB;IACtE,IAAM,sBAAsB,GAAG,YAAY,CAAC;IAC5C,IAAM,MAAM,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACtC,OAAO,6BACU,aAAa,CAAC,iBAAiB,eAAK,aAAa,CAAC,UAAU,sCACxD,MAAM,GAAG,GAAG,oBAAU,MAAM,GAAG,GAAG,0CAEtC,aAAa,CAAC,MAAM,6CACT,WAAW,2BAAiB,sBAAsB,kBAE7E,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { isChrome } from '../../lib/client.js';\n\nimport { globalClasses } from './Toggle.styles.js';\n\nexport const toggleSizeMixin = (fontSize: string, toggleHeight: string, toggleWidth: string): string => {\n  return `\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n\n    &::before {\n      width: ${toggleWidth};\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  labGrotesqueBaselineCompensation: string,\n  fontSize: string,\n  toggleHeight: string,\n  toggleWidth: string,\n  toggleBorderRadius: string,\n  toggleButtonOffsetY: string,\n): string => {\n  const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n  const buttonFontSize = parseInt(fontSize);\n  const baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n  return `\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 = (fontSize: string, toggleHeight: string): string => {\n  return `\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n  `;\n};\n\nexport const handleMixin = (toggleHandleSize: string, toggleHandleBorderRadius: string): string => {\n  return `\n    border-radius: ${toggleHandleBorderRadius};\n    height: ${toggleHandleSize};\n    width: ${toggleHandleSize};\n  `;\n};\n\nexport const containerSizeMixin = (toggleBorderRadius: string): string => {\n  return `\n    border-radius: ${toggleBorderRadius};\n  `;\n};\n\nexport const inputSizeMixin = (toggleHeight: string, toggleWidth: string): string => {\n  const handleWidthWithBorders = toggleHeight;\n  const height = parseInt(toggleHeight);\n  return `\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"]}

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

@@ -1,12 +1,46 @@
-import { ITheme } from '../../lib/theming/Theme';
-declare const jsStyles: {
-    handle(t: ITheme): string;
-    container(t: ITheme): string;
-    focused(t: ITheme): string;
-    activeBackground(t: ITheme): string;
-    isLoading(t: ITheme): string;
-    isWarning(t: ITheme): string;
-    isError(t: ITheme): string;
-    wrapper(t: ITheme): string;
-};
-export default jsStyles;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const globalClasses: {
+    handle: string;
+    container: string;
+    disabled: string;
+    containerDisabled: string;
+    containerLoading: string;
+    background: string;
+};
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    disableAnimation(): string;
+    handle(t: Theme): string;
+    handleSmall(t: Theme): string;
+    handleMedium(t: Theme): string;
+    handleLarge(t: Theme): string;
+    handleDisabled(t: Theme): string;
+    input(t: Theme): string;
+    inputSmall(t: Theme): string;
+    inputMedium(t: Theme): string;
+    inputLarge(t: Theme): string;
+    container(t: Theme): string;
+    containerSmall(t: Theme): string;
+    containerMedium(t: Theme): string;
+    containerLarge(t: Theme): string;
+    containerDisabled(t: Theme): string;
+    focused(t: Theme): string;
+    isWarning(t: Theme): string;
+    isError(t: Theme): string;
+    button(t: Theme): string;
+    buttonSmall(t: Theme): string;
+    buttonMedium(t: Theme): string;
+    buttonLarge(t: Theme): string;
+    buttonRight(): string;
+    disabled(): string;
+    rootLeft(): string;
+    caption(t: Theme): string;
+    captionSmall(t: Theme): string;
+    captionMedium(t: Theme): string;
+    captionLarge(t: Theme): string;
+    disabledCaption(t: Theme): string;
+    captionLeft(t: Theme): string;
+}>;