@grafana/ui/dist/cjs/components/Forms/RadioButtonGroup/RadioButtonGroup.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 data = require('@grafana/data');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var Icon = require('../../Icon/Icon.cjs');
var FieldContext = require('../FieldContext.cjs');
var RadioButton = require('./RadioButton.cjs');

"use strict";
function RadioButtonGroup({
  options,
  value,
  onChange,
  onClick,
  disabled: disabledProp,
  disabledOptions,
  size = "md",
  id: idProp,
  className,
  fullWidth = false,
  autoFocus = false,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedByProp,
  "aria-labelledby": ariaLabelledByProp,
  "data-testid": dataTestId,
  invalid: invalidProp,
  ...rest
}) {
  var _a;
  const fieldContext = FieldContext.useFieldContext();
  const generatedId = React.useId();
  const disabled = disabledProp != null ? disabledProp : fieldContext.disabled;
  const invalid = invalidProp != null ? invalidProp : fieldContext.invalid;
  const internalId = (_a = idProp != null ? idProp : fieldContext.id) != null ? _a : generatedId;
  const ariaDescribedBy = ariaDescribedByProp != null ? ariaDescribedByProp : fieldContext["aria-describedby"];
  const ariaLabelledBy = ariaLabelledByProp != null ? ariaLabelledByProp : fieldContext["aria-labelledby"];
  const handleOnChange = React.useCallback(
    (option) => {
      return () => {
        if (onChange) {
          onChange(option.value);
        }
      };
    },
    [onChange]
  );
  const handleOnClick = React.useCallback(
    (option) => {
      return () => {
        if (onClick) {
          onClick(option.value);
        }
      };
    },
    [onClick]
  );
  const groupName = React.useRef(internalId);
  const styles = ThemeContext.useStyles2(getStyles);
  const activeButtonRef = React.useRef(null);
  React.useEffect(() => {
    if (autoFocus && activeButtonRef.current) {
      activeButtonRef.current.focus();
    }
  }, [autoFocus]);
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      ...rest,
      role: "radiogroup",
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy,
      "data-testid": dataTestId != null ? dataTestId : e2eSelectors.selectors.components.RadioGroup.container,
      className: css.cx(styles.radioGroup, fullWidth && styles.fullWidth, invalid && styles.invalid, className),
      children: options.map((opt, i) => {
        const isItemDisabled = disabledOptions && opt.value && disabledOptions.includes(opt.value);
        const icon = opt.icon ? data.toIconName(opt.icon) : void 0;
        const hasNonIconPart = Boolean(opt.imgUrl || opt.label || opt.component);
        const labelTitle = typeof opt.label === "string" ? opt.label : void 0;
        return /* @__PURE__ */ jsxRuntime.jsxs(
          RadioButton.RadioButton,
          {
            size,
            disabled: isItemDisabled || disabled,
            active: value === opt.value,
            "aria-label": opt.ariaLabel,
            "aria-invalid": !!invalid,
            "aria-describedby": ariaDescribedBy,
            onChange: handleOnChange(opt),
            onClick: handleOnClick(opt),
            name: groupName.current,
            description: opt.description,
            title: labelTitle,
            fullWidth,
            ref: value === opt.value ? activeButtonRef : void 0,
            children: [
              icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: css.cx(hasNonIconPart && styles.icon) }),
              opt.imgUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: opt.imgUrl, alt: opt.label, className: styles.img }),
              opt.label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.labelText, children: opt.label }),
              opt.component ? /* @__PURE__ */ jsxRuntime.jsx(opt.component, {}) : null
            ]
          },
          `o.label-${i}`
        );
      })
    }
  );
}
RadioButtonGroup.displayName = "RadioButtonGroup";
const getStyles = (theme) => {
  return {
    radioGroup: css.css({
      display: "inline-flex",
      flexDirection: "row",
      flexWrap: "nowrap",
      maxWidth: "100%",
      minWidth: 0,
      border: `1px solid ${theme.components.input.borderColor}`,
      borderRadius: theme.shape.radius.default,
      padding: RadioButton.RADIO_GROUP_PADDING,
      "&:hover": {
        borderColor: theme.components.input.borderHover
      }
    }),
    fullWidth: css.css({
      display: "flex",
      flexGrow: 1,
      minWidth: 0,
      width: "100%"
    }),
    icon: css.css({
      marginRight: "6px",
      flexShrink: 0
    }),
    img: css.css({
      width: theme.spacing(2),
      height: theme.spacing(2),
      marginRight: theme.spacing(1),
      flexShrink: 0
    }),
    labelText: css.css({
      minWidth: 0,
      overflow: "hidden",
      textOverflow: "ellipsis"
    }),
    invalid: css.css({
      border: `1px solid ${theme.colors.error.border}`
    })
  };
};

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