@grafana/ui/dist/esm/components/Forms/RadioButtonGroup/RadioButton.mjs.map

Grafana Components Library

{"version":3,"file":"RadioButton.mjs","sources":["../../../../../src/components/Forms/RadioButtonGroup/RadioButton.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { 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 {\n  size?: RadioButtonSize;\n  disabled?: boolean;\n  name?: string;\n  description?: string;\n  active: boolean;\n  id: string;\n  onChange: () => void;\n  onClick: () => void;\n  fullWidth?: boolean;\n  'aria-label'?: StringSelector;\n  children?: React.ReactNode;\n}\n\nexport const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(\n  (\n    {\n      children,\n      active = false,\n      disabled = false,\n      size = 'md',\n      onChange,\n      onClick,\n      id,\n      name = undefined,\n      description,\n      fullWidth,\n      'aria-label': ariaLabel,\n    },\n    ref\n  ) => {\n    const styles = useStyles2(getRadioButtonStyles, size, fullWidth);\n\n    const inputRadioButton = (\n      <input\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        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={description || ariaLabel}>\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={description || ariaLabel}>\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 0 0` : 'none',\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      },\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      background: theme.colors.background.primary,\n      cursor: 'pointer',\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      flexGrow: 1,\n\n      '&:hover': {\n        color: textColorHover,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}