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

Grafana Components Library

{"version":3,"file":"RadioButtonGroup.mjs","sources":["../../../../../src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { type HTMLAttributes, useCallback, useEffect, useId, useRef } from 'react';\n\nimport { type GrafanaTheme2, type SelectableValue, toIconName } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Icon } from '../../Icon/Icon';\nimport { useFieldContext } from '../FieldContext';\n\nimport { type RadioButtonSize, RadioButton, RADIO_GROUP_PADDING } from './RadioButton';\nexport interface RadioButtonGroupProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onClick'> {\n  value?: T;\n  id?: string;\n  disabled?: boolean;\n  disabledOptions?: T[];\n  options: Array<SelectableValue<T>>;\n  onChange?: (value: T) => void;\n  onClick?: (value: T) => void;\n  size?: RadioButtonSize;\n  fullWidth?: boolean;\n  className?: string;\n  autoFocus?: boolean;\n  ['aria-label']?: string;\n  invalid?: boolean;\n  'data-testid'?: string;\n}\n\n/**\n * RadioButtonGroup is used to select a single value from multiple mutually exclusive options.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-radiobuttongroup--docs\n */\nexport function RadioButtonGroup<T>({\n  options,\n  value,\n  onChange,\n  onClick,\n  disabled: disabledProp,\n  disabledOptions,\n  size = 'md',\n  id: idProp,\n  className,\n  fullWidth = false,\n  autoFocus = false,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedByProp,\n  'aria-labelledby': ariaLabelledByProp,\n  'data-testid': dataTestId,\n  invalid: invalidProp,\n  ...rest\n}: RadioButtonGroupProps<T>) {\n  const fieldContext = useFieldContext();\n  const generatedId = useId();\n  const disabled = disabledProp ?? fieldContext.disabled;\n  const invalid = invalidProp ?? fieldContext.invalid;\n  const internalId = idProp ?? fieldContext.id ?? generatedId;\n  const ariaDescribedBy = ariaDescribedByProp ?? fieldContext['aria-describedby'];\n  const ariaLabelledBy = ariaLabelledByProp ?? fieldContext['aria-labelledby'];\n\n  const handleOnChange = useCallback(\n    (option: SelectableValue) => {\n      return () => {\n        if (onChange) {\n          onChange(option.value);\n        }\n      };\n    },\n    [onChange]\n  );\n  const handleOnClick = useCallback(\n    (option: SelectableValue) => {\n      return () => {\n        if (onClick) {\n          onClick(option.value);\n        }\n      };\n    },\n    [onClick]\n  );\n\n  const groupName = useRef(internalId);\n  const styles = useStyles2(getStyles);\n\n  const activeButtonRef = useRef<HTMLInputElement | null>(null);\n  useEffect(() => {\n    if (autoFocus && activeButtonRef.current) {\n      activeButtonRef.current.focus();\n    }\n  }, [autoFocus]);\n\n  return (\n    <div\n      {...rest}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      data-testid={dataTestId ?? selectors.components.RadioGroup.container}\n      className={cx(styles.radioGroup, fullWidth && styles.fullWidth, invalid && styles.invalid, className)}\n    >\n      {options.map((opt, i) => {\n        const isItemDisabled = disabledOptions && opt.value && disabledOptions.includes(opt.value);\n        const icon = opt.icon ? toIconName(opt.icon) : undefined;\n        const hasNonIconPart = Boolean(opt.imgUrl || opt.label || opt.component);\n        const labelTitle = typeof opt.label === 'string' ? opt.label : undefined;\n\n        return (\n          <RadioButton\n            size={size}\n            disabled={isItemDisabled || disabled}\n            active={value === opt.value}\n            key={`o.label-${i}`}\n            aria-label={opt.ariaLabel}\n            aria-invalid={!!invalid}\n            aria-describedby={ariaDescribedBy}\n            onChange={handleOnChange(opt)}\n            onClick={handleOnClick(opt)}\n            name={groupName.current}\n            description={opt.description}\n            title={labelTitle}\n            fullWidth={fullWidth}\n            ref={value === opt.value ? activeButtonRef : undefined}\n          >\n            {icon && <Icon name={icon} className={cx(hasNonIconPart && styles.icon)} />}\n            {opt.imgUrl && <img src={opt.imgUrl} alt={opt.label} className={styles.img} />}\n            {opt.label != null && <span className={styles.labelText}>{opt.label}</span>}\n            {opt.component ? <opt.component /> : null}\n          </RadioButton>\n        );\n      })}\n    </div>\n  );\n}\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    radioGroup: css({\n      display: 'inline-flex',\n      flexDirection: 'row',\n      flexWrap: 'nowrap',\n      maxWidth: '100%',\n      minWidth: 0,\n      border: `1px solid ${theme.components.input.borderColor}`,\n      borderRadius: theme.shape.radius.default,\n      padding: RADIO_GROUP_PADDING,\n      '&:hover': {\n        borderColor: theme.components.input.borderHover,\n      },\n    }),\n    fullWidth: css({\n      display: 'flex',\n      flexGrow: 1,\n      minWidth: 0,\n      width: '100%',\n    }),\n    icon: css({\n      marginRight: '6px',\n      flexShrink: 0,\n    }),\n    img: css({\n      width: theme.spacing(2),\n      height: theme.spacing(2),\n      marginRight: theme.spacing(1),\n      flexShrink: 0,\n    }),\n    labelText: css({\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    }),\n    invalid: css({\n      border: `1px solid ${theme.colors.error.border}`,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAiCO,SAAS,gBAAA,CAAoB;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,eAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,EAAA,EAAI,MAAA;AAAA,EACJ,SAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,SAAA,GAAY,KAAA;AAAA,EACZ,YAAA,EAAc,SAAA;AAAA,EACd,kBAAA,EAAoB,mBAAA;AAAA,EACpB,iBAAA,EAAmB,kBAAA;AAAA,EACnB,aAAA,EAAe,UAAA;AAAA,EACf,OAAA,EAAS,WAAA;AAAA,EACT,GAAG;AACL,CAAA,EAA6B;AAnD7B,EAAA,IAAA,EAAA;AAoDE,EAAA,MAAM,eAAe,eAAA,EAAgB;AACrC,EAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,EAAA,MAAM,QAAA,GAAW,sCAAgB,YAAA,CAAa,QAAA;AAC9C,EAAA,MAAM,OAAA,GAAU,oCAAe,YAAA,CAAa,OAAA;AAC5C,EAAA,MAAM,UAAA,GAAA,CAAa,EAAA,GAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAU,YAAA,CAAa,EAAA,KAAvB,IAAA,GAAA,EAAA,GAA6B,WAAA;AAChD,EAAA,MAAM,eAAA,GAAkB,mBAAA,IAAA,IAAA,GAAA,mBAAA,GAAuB,YAAA,CAAa,kBAAkB,CAAA;AAC9E,EAAA,MAAM,cAAA,GAAiB,kBAAA,IAAA,IAAA,GAAA,kBAAA,GAAsB,YAAA,CAAa,iBAAiB,CAAA;AAE3E,EAAA,MAAM,cAAA,GAAiB,WAAA;AAAA,IACrB,CAAC,MAAA,KAA4B;AAC3B,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,OAAO,KAAK,CAAA;AAAA,QACvB;AAAA,MACF,CAAA;AAAA,IACF,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AACA,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,MAAA,KAA4B;AAC3B,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,OAAA,EAAS;AACX,UAAA,OAAA,CAAQ,OAAO,KAAK,CAAA;AAAA,QACtB;AAAA,MACF,CAAA;AAAA,IACF,CAAA;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AAEA,EAAA,MAAM,SAAA,GAAY,OAAO,UAAU,CAAA;AACnC,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,MAAM,eAAA,GAAkB,OAAgC,IAAI,CAAA;AAC5D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,IAAa,gBAAgB,OAAA,EAAS;AACxC,MAAA,eAAA,CAAgB,QAAQ,KAAA,EAAM;AAAA,IAChC;AAAA,EACF,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,IAAA,EAAK,YAAA;AAAA,MACL,YAAA,EAAY,SAAA;AAAA,MACZ,iBAAA,EAAiB,cAAA;AAAA,MACjB,aAAA,EAAa,UAAA,IAAA,IAAA,GAAA,UAAA,GAAc,SAAA,CAAU,UAAA,CAAW,UAAA,CAAW,SAAA;AAAA,MAC3D,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,UAAA,EAAY,SAAA,IAAa,OAAO,SAAA,EAAW,OAAA,IAAW,MAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAAA,MAEnG,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,GAAA,EAAK,CAAA,KAAM;AACvB,QAAA,MAAM,iBAAiB,eAAA,IAAmB,GAAA,CAAI,SAAS,eAAA,CAAgB,QAAA,CAAS,IAAI,KAAK,CAAA;AACzF,QAAA,MAAM,OAAO,GAAA,CAAI,IAAA,GAAO,UAAA,CAAW,GAAA,CAAI,IAAI,CAAA,GAAI,KAAA,CAAA;AAC/C,QAAA,MAAM,iBAAiB,OAAA,CAAQ,GAAA,CAAI,UAAU,GAAA,CAAI,KAAA,IAAS,IAAI,SAAS,CAAA;AACvE,QAAA,MAAM,aAAa,OAAO,GAAA,CAAI,KAAA,KAAU,QAAA,GAAW,IAAI,KAAA,GAAQ,KAAA,CAAA;AAE/D,QAAA,uBACE,IAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,UAAU,cAAA,IAAkB,QAAA;AAAA,YAC5B,MAAA,EAAQ,UAAU,GAAA,CAAI,KAAA;AAAA,YAEtB,cAAY,GAAA,CAAI,SAAA;AAAA,YAChB,cAAA,EAAc,CAAC,CAAC,OAAA;AAAA,YAChB,kBAAA,EAAkB,eAAA;AAAA,YAClB,QAAA,EAAU,eAAe,GAAG,CAAA;AAAA,YAC5B,OAAA,EAAS,cAAc,GAAG,CAAA;AAAA,YAC1B,MAAM,SAAA,CAAU,OAAA;AAAA,YAChB,aAAa,GAAA,CAAI,WAAA;AAAA,YACjB,KAAA,EAAO,UAAA;AAAA,YACP,SAAA;AAAA,YACA,GAAA,EAAK,KAAA,KAAU,GAAA,CAAI,KAAA,GAAQ,eAAA,GAAkB,KAAA,CAAA;AAAA,YAE5C,QAAA,EAAA;AAAA,cAAA,IAAA,oBAAQ,GAAA,CAAC,QAAK,IAAA,EAAM,IAAA,EAAM,WAAW,EAAA,CAAG,cAAA,IAAkB,MAAA,CAAO,IAAI,CAAA,EAAG,CAAA;AAAA,cACxE,GAAA,CAAI,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,GAAA,CAAI,MAAA,EAAQ,GAAA,EAAK,GAAA,CAAI,KAAA,EAAO,SAAA,EAAW,MAAA,CAAO,GAAA,EAAK,CAAA;AAAA,cAC3E,GAAA,CAAI,SAAS,IAAA,oBAAQ,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,SAAA,EAAY,QAAA,EAAA,GAAA,CAAI,KAAA,EAAM,CAAA;AAAA,cACnE,IAAI,SAAA,mBAAY,GAAA,CAAC,GAAA,CAAI,SAAA,EAAJ,EAAc,CAAA,GAAK;AAAA;AAAA,WAAA;AAAA,UAfhC,WAAW,CAAC,CAAA;AAAA,SAgBnB;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAE/B,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,YAAY,GAAA,CAAI;AAAA,MACd,OAAA,EAAS,aAAA;AAAA,MACT,aAAA,EAAe,KAAA;AAAA,MACf,QAAA,EAAU,QAAA;AAAA,MACV,QAAA,EAAU,MAAA;AAAA,MACV,QAAA,EAAU,CAAA;AAAA,MACV,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,UAAA,CAAW,MAAM,WAAW,CAAA,CAAA;AAAA,MACvD,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAA;AAAA,MACjC,OAAA,EAAS,mBAAA;AAAA,MACT,SAAA,EAAW;AAAA,QACT,WAAA,EAAa,KAAA,CAAM,UAAA,CAAW,KAAA,CAAM;AAAA;AACtC,KACD,CAAA;AAAA,IACD,WAAW,GAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,QAAA,EAAU,CAAA;AAAA,MACV,QAAA,EAAU,CAAA;AAAA,MACV,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,WAAA,EAAa,KAAA;AAAA,MACb,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,KAAK,GAAA,CAAI;AAAA,MACP,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACtB,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACvB,WAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC5B,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,WAAW,GAAA,CAAI;AAAA,MACb,QAAA,EAAU,CAAA;AAAA,MACV,QAAA,EAAU,QAAA;AAAA,MACV,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,MAAM,MAAM,CAAA;AAAA,KAC/C;AAAA,GACH;AACF,CAAA;;;;"}