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

"use strict";
const RADIO_GROUP_PADDING = 2;
const RadioButton = React.forwardRef(
  ({
    children,
    active = false,
    disabled = false,
    size = "md",
    onChange,
    onClick,
    name = void 0,
    description,
    fullWidth,
    title,
    "aria-label": ariaLabel,
    ...rest
  }, ref) => {
    const styles = ThemeContext.useStyles2(getRadioButtonStyles, size, fullWidth);
    const id = React.useId();
    const adjustedTitle = title != null ? title : ariaLabel;
    const inputRadioButton = /* @__PURE__ */ jsxRuntime.jsx(
      "input",
      {
        ...rest,
        type: "radio",
        className: styles.radio,
        onChange,
        onClick,
        disabled,
        id,
        checked: active,
        name,
        "aria-label": ariaLabel,
        title: adjustedTitle,
        ref
      }
    );
    return description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.radioOption, "data-testid": e2eSelectors.selectors.components.RadioButton.container, children: [
      /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: description, placement: "bottom", children: inputRadioButton }),
      /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles.radioLabel, htmlFor: id, title: adjustedTitle, children })
    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.radioOption, "data-testid": e2eSelectors.selectors.components.RadioButton.container, children: [
      inputRadioButton,
      /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles.radioLabel, htmlFor: id, title: adjustedTitle, children })
    ] });
  }
);
RadioButton.displayName = "RadioButton";
const getRadioButtonStyles = (theme, size, fullWidth) => {
  const { fontSize, height, padding } = commonStyles.getPropertiesForButtonSize(size, theme);
  const textColor = theme.colors.text.secondary;
  const textColorHover = theme.colors.text.primary;
  const labelHeight = height * theme.spacing.gridSize - 4 - 2;
  return {
    radioOption: css.css({
      display: "flex",
      justifyContent: "space-between",
      position: "relative",
      flex: fullWidth ? "1 1 0" : "0 1 auto",
      minWidth: 0,
      textAlign: "center"
    }),
    radio: css.css({
      position: "absolute",
      opacity: 0,
      zIndex: 2,
      width: "100% !important",
      height: "100%",
      cursor: "pointer",
      "&:checked + label": {
        color: theme.colors.text.primary,
        fontWeight: theme.typography.fontWeightMedium,
        background: theme.colors.action.selected,
        zIndex: 1,
        // this ensures the selected radio button is shown when forced colors are active
        "@media (forced-colors: active)": {
          outline: "1px solid transparent"
        }
      },
      "&:focus + label, &:focus-visible + label": mixins.getFocusStyles(theme),
      "&:focus:not(:focus-visible) + label": mixins.getMouseFocusStyles(theme),
      "&:disabled + label": {
        color: theme.colors.text.disabled,
        cursor: "not-allowed"
      }
    }),
    radioLabel: css.css({
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize,
      height: `${labelHeight}px`,
      // Deduct border from line-height for perfect vertical centering on windows and linux
      lineHeight: `${labelHeight}px`,
      color: textColor,
      padding: theme.spacing(0, padding),
      borderRadius: mixins.getInternalRadius(theme, RADIO_GROUP_PADDING),
      cursor: "pointer",
      userSelect: "none",
      whiteSpace: "nowrap",
      flexGrow: 1,
      minWidth: 0,
      overflow: "hidden",
      "&:hover": {
        color: textColorHover
      }
    })
  };
};

exports.RADIO_GROUP_PADDING = RADIO_GROUP_PADDING;
exports.RadioButton = RadioButton;
//# sourceMappingURL=RadioButton.cjs.map