@boomerang-io/carbon-addons-boomerang-react/dist/cjs/components/RadioGroup/RadioGroup.js

Carbon Addons for Boomerang apps

'use strict';

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

var React = require('react');
var react = require('@carbon/react');
var icons = require('@carbon/react/icons');
var TooltipHover = require('../TooltipHover/TooltipHover.js');
var settings = require('../../internal/settings.js');

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

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

/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
function RadioGroupComponent({ defaultSelected, disabled, helperText, id, label, labelText, name, onChange, options, orientation, radioGroupProps, radioButtonProps, tooltipClassName = `${settings.prefix}--bmrg-radio-group__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, value, columnHeight = "6rem", verticalWrapped = false, }) {
    const labelValue = label || labelText;
    const labelTextId = !labelValue ? undefined : `${id}-label`;
    const isVertical = orientation === "vertical";
    const hasVerticalHelperText = isVertical && helperText;
    const hasHorizontalHelperText = !isVertical && helperText;
    // add "title" attribute to radio buttons labels so they show a tooltip with the content
    React__default.default.useEffect(() => {
        if (Array.isArray(options)) {
            options.forEach((option, index) => {
                const inputElement = document.getElementById(option.value);
                if (Boolean(inputElement) && inputElement !== null) {
                    inputElement.parentNode?.children[1]?.children[1]?.setAttribute("title", options[index].labelText);
                }
            });
        }
    });
    return (
    //Defined a css var --height to be used on the wrapped container to determine the number of radios displayed in each column
    React__default.default.createElement("div", { key: id, className: `${settings.prefix}--bmrg-radio-group`, style: { ["--height"]: columnHeight } },
        labelValue && (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-radio-group__title` },
            React__default.default.createElement("div", { id: labelTextId, className: `${settings.prefix}--label` }, labelValue),
            tooltipContent && (React__default.default.createElement("div", { className: tooltipClassName },
                React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
                    React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" })))))),
        hasVerticalHelperText && (React__default.default.createElement("div", { className: `${settings.prefix}--form__helper-text`, style: { marginBottom: "0.375rem" } }, helperText)),
        React__default.default.createElement(react.RadioButtonGroup, { className: isVertical && verticalWrapped ? `${settings.prefix}--bmrg-radio-group__container` : undefined, defaultSelected: defaultSelected, disabled: disabled, name: name, onChange: onChange, orientation: orientation, valueSelected: value, ...radioGroupProps }, options.map((option) => (React__default.default.createElement(react.RadioButton, { disabled: option.disabled, id: option.value, key: option.value, labelText: option.labelText, value: option.value, ...radioButtonProps })))),
        hasHorizontalHelperText && React__default.default.createElement("div", { className: `${settings.prefix}--form__helper-text` }, helperText)));
}

exports.default = RadioGroupComponent;