@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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"}