@shopgate/engage/components/Switch/index.js

Shopgate's ENGAGE library.

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { VisuallyHidden } from '@shopgate/engage/a11y/components';
import styles from "./style";

/**
 * The Switch component.
 * @param {Object} props The component props.
 * @param {React.ReactNode} [children=null] Component children are rendered as the checkbox label
 * @param {boolean} [props.checked=false] Whether the checkbox is checked
 * @param {boolean} [props.disabled=false] Whether the checkbox is disabled
 * @param {Function} [props.onChange] Callback invoked when the checkbox changes
 * @param {string} [props.a11yFallbackText=null] Optional text to be presented to screen readers
 * when issues with the regular label are expected e.g. due to problematic layout.
 * @param {string} [props.id=null] Optional custom id for checkbox input and label
 * @returns {JSX.Element}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Switch = ({
  disabled,
  checked,
  onChange,
  id,
  a11yFallbackText,
  children
}) => {
  const switchId = useMemo(() => id || Math.random(), [id]);
  return /*#__PURE__*/_jsxs("div", {
    className: styles.container,
    children: [/*#__PURE__*/_jsx("input", {
      type: "checkbox",
      disabled: disabled,
      checked: checked,
      onChange: onChange,
      className: styles.input,
      id: switchId
    }), children && /*#__PURE__*/_jsxs("label", {
      htmlFor: switchId,
      children: [/*#__PURE__*/_jsx("span", {
        "aria-hidden": !!a11yFallbackText,
        children: children
      }), a11yFallbackText && /*#__PURE__*/_jsx(VisuallyHidden, {
        children: a11yFallbackText
      })]
    })]
  });
};
Switch.defaultProps = {
  children: null,
  disabled: false,
  a11yFallbackText: null,
  checked: false,
  onChange: null,
  id: null
};
export default Switch;