@atlaskit/radio/dist/cjs/radio-group.js

A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = RadioGroup;
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
var _useId = require("@atlaskit/ds-lib/use-id");
var _radio = _interopRequireDefault(require("./radio"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var noOptions = [];
function RadioGroup(props) {
  var onChange = props.onChange,
    _props$options = props.options,
    options = _props$options === void 0 ? noOptions : _props$options,
    propValue = props.value,
    defaultValue = props.defaultValue,
    id = props.id,
    isDisabled = props.isDisabled,
    isRequired = props.isRequired,
    isInvalid = props.isInvalid,
    _props$onInvalid = props.onInvalid,
    onInvalid = _props$onInvalid === void 0 ? _noop.default : _props$onInvalid,
    name = props.name,
    analyticsContext = props.analyticsContext,
    ariaLabelledBy = props['aria-labelledby'],
    testId = props.testId;
  var uid = (0, _useId.useId)();
  var _useState = (0, _react.useState)(propValue !== undefined ? propValue : defaultValue),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    selectedValue = _useState2[0],
    setSelectedValue = _useState2[1];
  var onRadioChange = (0, _react.useCallback)(function (e, analyticsEvent) {
    setSelectedValue(e.currentTarget.value);
    if (onChange) {
      onChange(e, analyticsEvent);
    }
  }, [onChange]);

  // If propValue is provided than act as a controlled component
  // If not then act as an uncontrolled component using the value from state
  var value = typeof propValue !== 'undefined' ? propValue : selectedValue;
  return /*#__PURE__*/_react.default.createElement("div", {
    role: "radiogroup",
    "aria-labelledby": ariaLabelledBy,
    "data-testid": testId,
    "aria-describedby": isInvalid ? "".concat(id || uid, "-error") : undefined,
    id: id || uid
  }, options.map(function (_ref, index) {
    var optionProps = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
    if (typeof isDisabled !== 'undefined') {
      optionProps.isDisabled = isDisabled;
    }
    var isChecked = value !== null && optionProps.value === value;
    return /*#__PURE__*/_react.default.createElement(_radio.default, (0, _extends2.default)({}, optionProps, {
      name: name || optionProps.name,
      key: index,
      onChange: onRadioChange,
      onInvalid: onInvalid,
      isInvalid: isChecked && isInvalid,
      isChecked: isChecked,
      testId: optionProps.testId || testId,
      isRequired: isRequired,
      analyticsContext: analyticsContext
    }));
  }));
}