@grafana/ui/dist/cjs/components/Forms/RadioButtonGroup/RadioButton.cjs.map

Grafana Components Library

{"version":3,"file":"RadioButton.cjs","sources":["../../../../../src/components/Forms/RadioButtonGroup/RadioButton.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { forwardRef, useId, type HTMLProps } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { type StringSelector, selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { getFocusStyles, getInternalRadius, getMouseFocusStyles } from '../../../themes/mixins';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { getPropertiesForButtonSize } from '../commonStyles';\n\nexport const RADIO_GROUP_PADDING = 2;\nexport type RadioButtonSize = 'sm' | 'md';\n\nexport interface RadioButtonProps extends Omit<HTMLProps<HTMLInputElement>, 'size'> {\n  size?: RadioButtonSize;\n  disabled?: boolean;\n  name?: string;\n  description?: string;\n  active: boolean;\n  onChange: () => void;\n  onClick: () => void;\n  fullWidth?: boolean;\n  title?: string;\n  'aria-label'?: StringSelector;\n  children?: React.ReactNode;\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n  (\n    {\n      children,\n      active = false,\n      disabled = false,\n      size = 'md',\n      onChange,\n      onClick,\n      name = undefined,\n      description,\n      fullWidth,\n      title,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    const styles = useStyles2(getRadioButtonStyles, size, fullWidth);\n    const id = useId();\n    const adjustedTitle = title ?? ariaLabel;\n\n    const inputRadioButton = (\n      <input\n        {...rest}\n        type=\"radio\"\n        className={styles.radio}\n        onChange={onChange}\n        onClick={onClick}\n        disabled={disabled}\n        id={id}\n        checked={active}\n        name={name}\n        aria-label={ariaLabel}\n        title={adjustedTitle}\n        ref={ref}\n      />\n    );\n    return description ? (\n      <div className={styles.radioOption} data-testid={selectors.components.RadioButton.container}>\n        <Tooltip content={description} placement=\"bottom\">\n          {inputRadioButton}\n        </Tooltip>\n        <label className={styles.radioLabel} htmlFor={id} title={adjustedTitle}>\n          {children}\n        </label>\n      </div>\n    ) : (\n      <div className={styles.radioOption} data-testid={selectors.components.RadioButton.container}>\n        {inputRadioButton}\n        <label className={styles.radioLabel} htmlFor={id} title={adjustedTitle}>\n          {children}\n        </label>\n      </div>\n    );\n  }\n);\n\nRadioButton.displayName = 'RadioButton';\n\nconst getRadioButtonStyles = (theme: GrafanaTheme2, size: RadioButtonSize, fullWidth?: boolean) => {\n  const { fontSize, height, padding } = getPropertiesForButtonSize(size, theme);\n\n  const textColor = theme.colors.text.secondary;\n  const textColorHover = theme.colors.text.primary;\n  // remove the group inner padding (set on RadioButtonGroup)\n  const labelHeight = height * theme.spacing.gridSize - 4 - 2;\n\n  return {\n    radioOption: css({\n      display: 'flex',\n      justifyContent: 'space-between',\n      position: 'relative',\n      flex: fullWidth ? '1 1 0' : '0 1 auto',\n      minWidth: 0,\n      textAlign: 'center',\n    }),\n    radio: css({\n      position: 'absolute',\n      opacity: 0,\n      zIndex: 2,\n      width: '100% !important',\n      height: '100%',\n      cursor: 'pointer',\n\n      '&:checked + label': {\n        color: theme.colors.text.primary,\n        fontWeight: theme.typography.fontWeightMedium,\n        background: theme.colors.action.selected,\n        zIndex: 1,\n        // this ensures the selected radio button is shown when forced colors are active\n        '@media (forced-colors: active)': {\n          outline: '1px solid transparent',\n        },\n      },\n\n      '&:focus + label, &:focus-visible + label': getFocusStyles(theme),\n\n      '&:focus:not(:focus-visible) + label': getMouseFocusStyles(theme),\n\n      '&:disabled + label': {\n        color: theme.colors.text.disabled,\n        cursor: 'not-allowed',\n      },\n    }),\n    radioLabel: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      fontSize,\n      height: `${labelHeight}px`,\n      // Deduct border from line-height for perfect vertical centering on windows and linux\n      lineHeight: `${labelHeight}px`,\n      color: textColor,\n      padding: theme.spacing(0, padding),\n      borderRadius: getInternalRadius(theme, RADIO_GROUP_PADDING),\n      cursor: 'pointer',\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      flexGrow: 1,\n      minWidth: 0,\n      overflow: 'hidden',\n\n      '&:hover': {\n        color: textColorHover,\n      },\n    }),\n  };\n};\n"],"names":["forwardRef","useStyles2","useId","jsx","jsxs","selectors","Tooltip","getPropertiesForButtonSize","css","getFocusStyles","getMouseFocusStyles","getInternalRadius"],"mappings":"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"}