@mskcc/carbon-react/lib/components/RadioButtonGroup/RadioButtonGroup.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');
var cx = require('classnames');
var index = require('../Text/index.js');
var usePrefix = require('../../internal/usePrefix.js');
var mergeRefs = require('../../tools/mergeRefs.js');
var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

const getInstanceId = setupGetInstanceId["default"]();
const RadioButtonGroupContext = /*#__PURE__*/React.createContext(null);
const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
  const {
    children,
    className,
    defaultSelected,
    disabled,
    helperText,
    invalid = false,
    invalidText,
    labelPosition = 'right',
    legendText,
    name,
    onChange = () => {},
    orientation = 'horizontal',
    readOnly,
    radioSize = 'sm',
    valueSelected,
    warn = false,
    warnText,
    ...rest
  } = props;
  const prefix = usePrefix.usePrefix();
  const [selected, setSelected] = React.useState(valueSelected ?? defaultSelected);
  const [prevValueSelected, setPrevValueSelected] = React.useState(valueSelected);
  const {
    current: radioButtonGroupInstanceId
  } = React.useRef(getInstanceId());

  /**
   * prop + state alignment - getDerivedStateFromProps
   * only update if selected prop changes
   */
  if (valueSelected !== prevValueSelected) {
    setSelected(valueSelected);
    setPrevValueSelected(valueSelected);
  }
  function getRadioButtons() {
    const mappedChildren = React__default["default"].Children.map(children, radioButton => {
      const {
        value
      } = radioButton?.props ?? undefined;
      const newProps = {
        name: name,
        key: value,
        value: value,
        onChange: handleOnChange,
        checked: value === selected
      };
      if (!selected && radioButton?.props.checked) {
        newProps.checked = true;
      }
      if (radioButton) {
        return /*#__PURE__*/React__default["default"].cloneElement(radioButton, newProps);
      }
    });
    return mappedChildren;
  }
  function handleOnChange(newSelection, value, evt) {
    if (!readOnly) {
      if (newSelection !== selected) {
        setSelected(newSelection);
        onChange(newSelection, name, evt);
      }
    }
  }
  const showWarning = !readOnly && !invalid && warn;
  const showHelper = !invalid && !disabled && !warn;
  const wrapperClasses = cx__default["default"](`${prefix}--form-item`, className);
  const fieldsetClasses = cx__default["default"](`${prefix}--fieldset ${prefix}--radio-button-group`, `msk-radio-button-group--${radioSize}`, {
    [`${prefix}--radio-button-group--${orientation}`]: orientation === 'vertical',
    [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
    [`${prefix}--radio-button-group--readonly`]: readOnly,
    [`${prefix}--radio-button-group--invalid`]: !readOnly && invalid,
    [`${prefix}--radio-button-group--warning`]: showWarning
  });
  const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
    [`${prefix}--form__helper-text--disabled`]: disabled
  });
  const helperId = !helperText ? undefined : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
    id: helperId,
    className: helperClasses
  }, helperText) : null;
  const divRef = React.useRef(null);
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: wrapperClasses,
    ref: mergeRefs["default"](divRef, ref)
  }, /*#__PURE__*/React__default["default"].createElement("fieldset", _rollupPluginBabelHelpers["extends"]({
    className: fieldsetClasses,
    disabled: disabled,
    "data-invalid": invalid ? true : undefined,
    "aria-describedby": showHelper && helperText ? helperId : undefined
  }, rest), legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
    className: `${prefix}--label`
  }, legendText), getRadioButtons()), /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${prefix}--radio-button__validation-msg`
  }, !readOnly && invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
    className: `${prefix}--radio-button__invalid-icon msk-icon`
  }, "error"), /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${prefix}--form-requirement`
  }, invalidText)), showWarning && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
    className: `${prefix}--radio-button__invalid-icon ${prefix}--radio-button__invalid-icon--warning msk-icon`
  }, "warning"), /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${prefix}--form-requirement`
  }, warnText))), showHelper && helper);
});
RadioButtonGroup.propTypes = {
  /**
   * Provide a collection of `<RadioButton>` components to render in the group
   */
  children: PropTypes__default["default"].node,
  /**
   * Provide an optional className to be applied to the container node
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify the `<RadioButton>` to be selected by default
   */
  defaultSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
  /**
   * Specify whether the group is disabled
   */
  disabled: PropTypes__default["default"].bool,
  /**
   * Provide text that is used alongside the control label for additional help
   */
  helperText: PropTypes__default["default"].node,
  /**
   * Specify whether the control is currently invalid
   */
  invalid: PropTypes__default["default"].bool,
  /**
   * Provide the text that is displayed when the control is in an invalid state
   */
  invalidText: PropTypes__default["default"].node,
  /**
   * Provide where label text should be placed
   */
  labelPosition: PropTypes__default["default"].oneOf(['left', 'right']),
  /**
   * Provide a legend to the RadioButtonGroup input that you are
   * exposing to the user
   */
  legendText: PropTypes__default["default"].node,
  /**
   * Specify the name of the underlying `<input>` nodes
   */
  name: PropTypes__default["default"].string.isRequired,
  /**
   * Provide an optional `onChange` hook that is called whenever the value of
   * the group changes
   */
  onChange: PropTypes__default["default"].func,
  /**
   * Provide where radio buttons should be placed
   */
  orientation: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
  /**
   * Set the size of the radio button
   */
  radioSize: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
  /**
   * Whether the RadioButtonGroup should be read-only
   */
  readOnly: PropTypes__default["default"].bool,
  /**
   * Specify the value that is currently selected in the group
   */
  valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
  /**
   * Specify whether the control is currently in warning state
   */
  warn: PropTypes__default["default"].bool,
  /**
   * Provide the text that is displayed when the control is in warning state
   */
  warnText: PropTypes__default["default"].node
};
RadioButtonGroup.displayName = 'RadioButtonGroup';

exports.RadioButtonGroupContext = RadioButtonGroupContext;
exports["default"] = RadioButtonGroup;