@awsui/components-react/toggle/index.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign, __rest } from "tslib";
import clsx from 'clsx';
import React, { useRef } from 'react';
import AbstractSwitch from '../internal/components/abstract-switch';
import useForwardFocus from '../internal/hooks/forward-focus';
import { fireNonCancelableEvent } from '../internal/events';
import { getBaseProps } from '../internal/base-component';
import styles from './styles.css.js';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var Toggle = React.forwardRef(function (_a, ref) {
    var _b, _c;
    var controlId = _a.controlId, checked = _a.checked, name = _a.name, disabled = _a.disabled, children = _a.children, description = _a.description, ariaLabel = _a.ariaLabel, ariaDescribedby = _a.ariaDescribedby, ariaLabelledby = _a.ariaLabelledby, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "children", "description", "ariaLabel", "ariaDescribedby", "ariaLabelledby", "onFocus", "onBlur", "onChange"]);
    useTelemetry('Toggle');
    var baseProps = getBaseProps(rest);
    var checkboxRef = useRef(null);
    useForwardFocus(ref, checkboxRef);
    return (React.createElement(AbstractSwitch, __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: clsx(styles['toggle-control'], (_b = {},
            _b[styles['toggle-control-checked']] = checked,
            _b[styles['toggle-control-disabled']] = disabled,
            _b)), controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { ref: checkboxRef, className: styles.input, type: "checkbox", checked: checked, name: name, onFocus: onFocus && (function () { return fireNonCancelableEvent(onFocus); }), onBlur: onBlur && (function () { return fireNonCancelableEvent(onBlur); }), onChange: onChange && (function (event) { return fireNonCancelableEvent(onChange, { checked: event.target.checked }); }) }))); }, styledControl: React.createElement("div", { className: clsx(styles['toggle-handle'], (_c = {},
                _c[styles['toggle-handle-checked']] = checked,
                _c[styles['toggle-handle-disabled']] = disabled,
                _c)) }) })));
});
export default Toggle;