@primer/react/lib/Radio/Radio.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var RadioGroup = require('../RadioGroup/RadioGroup.js');
var clsx = require('clsx');
var Radio_module = require('./Radio.module.css.js');
var shared_module = require('../Checkbox/shared.module.css.js');
var defaultSxProp = require('../utils/defaultSxProp.js');
var Box = require('../Box/Box.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * An accessible, native radio component for selecting one option from a list.
 */
const Radio = /*#__PURE__*/React__default.default.forwardRef(({
  checked,
  disabled,
  name: nameProp,
  onChange,
  sx: sxProp = defaultSxProp.defaultSxProp,
  required,
  validationStatus,
  value,
  className,
  ...rest
}, ref) => {
  const radioGroupContext = React.useContext(RadioGroup.RadioGroupContext);
  const handleOnChange = e => {
    (radioGroupContext === null || radioGroupContext === undefined ? undefined : radioGroupContext.onChange) && radioGroupContext.onChange(e);
    onChange && onChange(e);
  };
  const name = nameProp || (radioGroupContext === null || radioGroupContext === undefined ? undefined : radioGroupContext.name);
  if (!name) {
    // eslint-disable-next-line no-console
    console.warn('A radio input must have a `name` attribute. Pass `name` as a prop directly to each Radio, or nest them in a `RadioGroup` component with a `name` prop');
  }
  if (sxProp !== defaultSxProp.defaultSxProp) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line github/a11y-role-supports-aria-props
      React__default.default.createElement(Box, _extends({
        as: "input",
        sx: sxProp,
        type: "radio",
        value: value,
        name: name,
        ref: ref,
        disabled: disabled,
        checked: checked,
        "aria-checked": checked ? 'true' : 'false',
        required: required,
        "aria-required": required ? 'true' : 'false',
        "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
        onChange: handleOnChange,
        className: clsx.clsx(className, shared_module.Input, Radio_module.Radio)
      }, rest))
    );
  }
  return (
    /*#__PURE__*/
    // eslint-disable-next-line github/a11y-role-supports-aria-props
    React__default.default.createElement("input", _extends({
      type: "radio",
      value: value,
      name: name,
      ref: ref,
      disabled: disabled,
      checked: checked,
      "aria-checked": checked ? 'true' : 'false',
      required: required,
      "aria-required": required ? 'true' : 'false',
      "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
      onChange: handleOnChange,
      className: clsx.clsx(className, shared_module.Input, Radio_module.Radio)
    }, rest))
  );
});
Radio.displayName = 'Radio';

module.exports = Radio;