@grafana/ui/dist/esm/components/Forms/RadioButtonList/RadioButtonDot.mjs.map

Grafana Components Library

{"version":3,"file":"RadioButtonDot.mjs","sources":["../../../../../src/components/Forms/RadioButtonList/RadioButtonDot.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\nexport interface RadioButtonDotProps<T>\n  extends Omit<React.HTMLProps<HTMLInputElement>, 'label' | 'value' | 'onChange' | 'type'> {\n  id: string;\n  name: string;\n  checked?: boolean;\n  value?: T;\n  disabled?: boolean;\n  label: React.ReactNode;\n  description?: string;\n  onChange?: (id: string) => void;\n}\n\nexport const RadioButtonDot = <T extends string | number | readonly string[]>({\n  id,\n  name,\n  label,\n  checked,\n  value,\n  disabled,\n  description,\n  onChange,\n  ...props\n}: RadioButtonDotProps<T>) => {\n  const styles = useStyles2(getStyles);\n\n  return (\n    <label title={description} className={styles.label}>\n      <input\n        {...props}\n        id={id}\n        name={name}\n        type=\"radio\"\n        checked={checked}\n        value={value}\n        disabled={disabled}\n        className={styles.input}\n        onChange={() => onChange && onChange(id)}\n      />\n      <div>\n        {label}\n        {description && <div className={styles.description}>{description}</div>}\n      </div>\n    </label>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  input: css({\n    position: 'relative',\n    appearance: 'none',\n    outline: 'none',\n    backgroundColor: theme.colors.background.canvas,\n    width: `${theme.spacing(2)} !important` /* TODO How to overcome this? Checkbox does the same 🙁 */,\n    height: theme.spacing(2),\n    border: `1px solid ${theme.colors.border.medium}`,\n    borderRadius: theme.shape.radius.circle,\n    cursor: 'pointer',\n    margin: '3px 0' /* Space for box-shadow when focused */,\n\n    ':checked': {\n      backgroundColor: theme.v1.palette.white,\n      border: `5px solid ${theme.colors.primary.main}`,\n    },\n\n    ':disabled': {\n      backgroundColor: `${theme.colors.action.disabledBackground} !important`,\n      borderColor: theme.colors.border.weak,\n    },\n\n    ':disabled:checked': {\n      border: `1px solid ${theme.colors.border.weak}`,\n    },\n\n    ':disabled:checked::after': {\n      content: '\"\"',\n      width: '6px',\n      height: '6px',\n      backgroundColor: theme.colors.text.disabled,\n      borderRadius: theme.shape.radius.circle,\n      display: 'inline-block',\n      position: 'absolute',\n      top: '4px',\n      left: '4px',\n    },\n\n    ':focus': {\n      outline: 'none !important',\n      boxShadow: `0 0 0 1px ${theme.colors.background.canvas}, 0 0 0 3px ${theme.colors.primary.main}`,\n    },\n  }),\n  label: css({\n    fontSize: theme.typography.fontSize,\n    lineHeight: '22px' /* 16px for the radio button and 6px for the focus shadow */,\n    display: 'grid',\n    gridTemplateColumns: `${theme.spacing(2)} auto`,\n    gap: theme.spacing(1),\n    cursor: 'pointer',\n  }),\n  description: css({\n    fontSize: theme.typography.size.sm,\n    color: theme.colors.text.secondary,\n  }),\n});\n"],"names":[],"mappings":"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"}