@grafana/ui/dist/cjs/components/Forms/RadioButtonList/RadioButtonList.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var RadioButtonDot = require('./RadioButtonDot.cjs');

"use strict";
function RadioButtonList({
  name,
  id,
  options,
  value,
  onChange,
  className,
  disabled,
  disabledOptions = []
}) {
  const styles = ThemeContext.useStyles2(getStyles);
  const generatedId = React.useId();
  const internalId = id != null ? id : generatedId;
  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: css.cx(styles.container, className), role: "radiogroup", children: options.map((option, index) => {
    const itemId = `${internalId}-${index}`;
    const isChecked = value && value === option.value;
    const isDisabled = disabled || disabledOptions.some((optionValue) => optionValue === option.value);
    const handleChange = () => onChange && option.value && onChange(option.value);
    return /* @__PURE__ */ jsxRuntime.jsx(
      RadioButtonDot.RadioButtonDot,
      {
        id: itemId,
        name,
        label: option.label,
        description: option.description,
        checked: isChecked,
        value: option.value,
        disabled: isDisabled,
        onChange: handleChange
      },
      index
    );
  }) });
}
const getStyles = (theme) => ({
  container: css.css({
    display: "grid",
    gap: theme.spacing(1)
  })
});

exports.RadioButtonList = RadioButtonList;
//# sourceMappingURL=RadioButtonList.cjs.map