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

Grafana Components Library

{"version":3,"file":"RadioButtonList.mjs","sources":["../../../../../src/components/Forms/RadioButtonList/RadioButtonList.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { uniqueId } from 'lodash';\n\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\nimport { RadioButtonDot } from './RadioButtonDot';\n\nexport interface RadioButtonListProps<T> {\n  /** A name of a radio group. Used to group multiple radio inputs into a single group */\n  name: string;\n  id?: string;\n  /** An array of available options */\n  options: Array<SelectableValue<T>>;\n  value?: T;\n  onChange?: (value: T) => void;\n  /** Disables all elements in the list */\n  disabled?: boolean;\n  /** Disables subset of elements in the list. Compares values using the === operator */\n  disabledOptions?: T[];\n  className?: string;\n}\n\n/**\n * RadioButtonList is used to select a single value from multiple mutually exclusive options usually in a vertical manner.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-radiobuttonlist--docs\n */\nexport function RadioButtonList<T extends string | number | readonly string[]>({\n  name,\n  id,\n  options,\n  value,\n  onChange,\n  className,\n  disabled,\n  disabledOptions = [],\n}: RadioButtonListProps<T>) {\n  const styles = useStyles2(getStyles);\n  const internalId = id ?? uniqueId('radiogroup-list-');\n\n  return (\n    <div id={id} className={cx(styles.container, className)} role=\"radiogroup\">\n      {options.map((option, index) => {\n        const itemId = `${internalId}-${index}`;\n\n        const isChecked = value && value === option.value;\n        const isDisabled = disabled || disabledOptions.some((optionValue) => optionValue === option.value);\n\n        const handleChange = () => onChange && option.value && onChange(option.value);\n\n        return (\n          <RadioButtonDot<T>\n            key={index}\n            id={itemId}\n            name={name}\n            label={option.label}\n            description={option.description}\n            checked={isChecked}\n            value={option.value}\n            disabled={isDisabled}\n            onChange={handleChange}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  container: css({\n    display: 'grid',\n    gap: theme.spacing(1),\n  }),\n});\n"],"names":[],"mappings":";;;;;;;AA6BO,SAAS,eAAA,CAA+D;AAAA,EAC7E,IAAA;AAAA,EACA,EAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAkB;AACpB,CAAA,EAA4B;AAC1B,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,UAAA,GAAa,EAAA,IAAA,IAAA,GAAA,EAAA,GAAM,QAAA,CAAS,kBAAkB,CAAA;AAEpD,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,EAAA,EAAQ,SAAA,EAAW,GAAG,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA,EAAG,MAAK,YAAA,EAC3D,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,QAAQ,KAAA,KAAU;AAC9B,IAAA,MAAM,MAAA,GAAS,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAErC,IAAA,MAAM,SAAA,GAAY,KAAA,IAAS,KAAA,KAAU,MAAA,CAAO,KAAA;AAC5C,IAAA,MAAM,UAAA,GAAa,YAAY,eAAA,CAAgB,IAAA,CAAK,CAAC,WAAA,KAAgB,WAAA,KAAgB,OAAO,KAAK,CAAA;AAEjG,IAAA,MAAM,eAAe,MAAM,QAAA,IAAY,OAAO,KAAA,IAAS,QAAA,CAAS,OAAO,KAAK,CAAA;AAE5E,IAAA,uBACE,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QAEC,EAAA,EAAI,MAAA;AAAA,QACJ,IAAA;AAAA,QACA,OAAO,MAAA,CAAO,KAAA;AAAA,QACd,aAAa,MAAA,CAAO,WAAA;AAAA,QACpB,OAAA,EAAS,SAAA;AAAA,QACT,OAAO,MAAA,CAAO,KAAA;AAAA,QACd,QAAA,EAAU,UAAA;AAAA,QACV,QAAA,EAAU;AAAA,OAAA;AAAA,MARL;AAAA,KASP;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,MAA0B;AAAA,EAC3C,WAAW,GAAA,CAAI;AAAA,IACb,OAAA,EAAS,MAAA;AAAA,IACT,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GACrB;AACH,CAAA,CAAA;;;;"}