@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":";;;;;AAmBO,MAAM,iBAAiB,CAAgD;AAAA,EAC5E,EAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA8B;AAC5B,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,4BACG,OAAA,EAAA,EAAM,KAAA,EAAO,WAAA,EAAa,SAAA,EAAW,OAAO,KAAA,EAC3C,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,EAAA;AAAA,QACA,IAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,OAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAW,MAAA,CAAO,KAAA;AAAA,QAClB,QAAA,EAAU,MAAM,QAAA,IAAY,QAAA,CAAS,EAAE;AAAA;AAAA,KACzC;AAAA,yBACC,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,+BAAe,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,aAAc,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EACnE;AAAA,GAAA,EACF,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,MAA0B;AAAA,EAC3C,OAAO,GAAA,CAAI;AAAA,IACT,QAAA,EAAU,UAAA;AAAA,IACV,UAAA,EAAY,MAAA;AAAA,IACZ,OAAA,EAAS,MAAA;AAAA,IACT,eAAA,EAAiB,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,MAAA;AAAA,IACzC,KAAA,EAAO,CAAA,EAAG,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,WAAA,CAAA;AAAA,IAC1B,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACvB,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,OAAO,MAAM,CAAA,CAAA;AAAA,IAC/C,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,MAAA;AAAA,IACjC,MAAA,EAAQ,SAAA;AAAA,IACR,MAAA,EAAQ,OAAA;AAAA,IAER,UAAA,EAAY;AAAA,MACV,eAAA,EAAiB,KAAA,CAAM,EAAA,CAAG,OAAA,CAAQ,KAAA;AAAA,MAClC,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,QAAQ,IAAI,CAAA;AAAA,KAChD;AAAA,IAEA,WAAA,EAAa;AAAA,MACX,eAAA,EAAiB,CAAA,EAAG,KAAA,CAAM,MAAA,CAAO,OAAO,kBAAkB,CAAA,WAAA,CAAA;AAAA,MAC1D,WAAA,EAAa,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO;AAAA,KACnC;AAAA,IAEA,mBAAA,EAAqB;AAAA,MACnB,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,OAAO,IAAI,CAAA;AAAA,KAC/C;AAAA,IAEA,0BAAA,EAA4B;AAAA,MAC1B,OAAA,EAAS,IAAA;AAAA,MACT,KAAA,EAAO,KAAA;AAAA,MACP,MAAA,EAAQ,KAAA;AAAA,MACR,eAAA,EAAiB,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,QAAA;AAAA,MACnC,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,MAAA;AAAA,MACjC,OAAA,EAAS,cAAA;AAAA,MACT,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,KAAA;AAAA,MACL,IAAA,EAAM;AAAA,KACR;AAAA,IAEA,QAAA,EAAU;AAAA,MACR,OAAA,EAAS,iBAAA;AAAA,MACT,SAAA,EAAW,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,MAAM,CAAA,YAAA,EAAe,KAAA,CAAM,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAA;AAAA;AAChG,GACD,CAAA;AAAA,EACD,OAAO,GAAA,CAAI;AAAA,IACT,QAAA,EAAU,MAAM,UAAA,CAAW,QAAA;AAAA,IAC3B,UAAA,EAAY,MAAA;AAAA,IACZ,OAAA,EAAS,MAAA;AAAA,IACT,mBAAA,EAAqB,CAAA,EAAG,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,KAAA,CAAA;AAAA,IACxC,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,MAAA,EAAQ;AAAA,GACT,CAAA;AAAA,EACD,aAAa,GAAA,CAAI;AAAA,IACf,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,IAAA,CAAK,EAAA;AAAA,IAChC,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK;AAAA,GAC1B;AACH,CAAA,CAAA;;;;"}