@grafana/ui/dist/esm/components/ValuePicker/ValuePicker.mjs.map

Grafana Components Library

{"version":3,"file":"ValuePicker.mjs","sources":["../../../../src/components/ValuePicker/ValuePicker.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { SelectableValue } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { ComponentSize } from '../../types/size';\nimport { Button, ButtonFill, ButtonVariant } from '../Button/Button';\nimport { Select } from '../Select/Select';\n\nexport interface ValuePickerProps<T> {\n  /** Aria label applied to the input field */\n  ['aria-label']?: string;\n  /** Label to display on the picker button */\n  label: string;\n  /** Icon to display on the picker button */\n  icon?: IconName;\n  /** ValuePicker options  */\n  options: Array<SelectableValue<T>>;\n  /** Callback to handle selected option */\n  onChange: (value: SelectableValue<T>) => void;\n  /** Which ButtonVariant to render */\n  variant?: ButtonVariant;\n  /** Size of button  */\n  size?: ComponentSize;\n  /** Min width for select in grid units */\n  minWidth?: number;\n  /** Should the picker cover the full width of its parent */\n  isFullWidth?: boolean;\n  /** Control where the menu is rendered */\n  menuPlacement?: 'auto' | 'bottom' | 'top';\n  /** Which ButtonFill to use */\n  fill?: ButtonFill;\n\n  /** custom css applied to the button */\n  buttonCss?: string;\n}\n\n/**\n * A component that looks like a button but transforms into a select when clicked.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-valuepicker--docs\n */\nexport function ValuePicker<T>({\n  'aria-label': ariaLabel,\n  label,\n  icon,\n  options,\n  onChange,\n  variant,\n  minWidth = 16,\n  size = 'sm',\n  isFullWidth = true,\n  menuPlacement,\n  fill,\n  buttonCss,\n}: ValuePickerProps<T>) {\n  const [isPicking, setIsPicking] = useState(false);\n  const theme = useTheme2();\n\n  return (\n    <>\n      {!isPicking && (\n        <Button\n          size={size || 'sm'}\n          className={buttonCss}\n          icon={icon || 'plus'}\n          onClick={() => setIsPicking(true)}\n          variant={variant}\n          fill={fill}\n          fullWidth={isFullWidth}\n          data-testid={selectors.components.ValuePicker.button(ariaLabel ?? label)}\n        >\n          {label}\n        </Button>\n      )}\n\n      {isPicking && (\n        <span style={{ minWidth: theme.spacing(minWidth), flexGrow: isFullWidth ? 1 : undefined }}>\n          <Select\n            placeholder={label}\n            options={options}\n            aria-label={selectors.components.ValuePicker.select(ariaLabel ?? label)}\n            isOpen\n            onCloseMenu={() => setIsPicking(false)}\n            autoFocus={true}\n            onChange={(value) => {\n              setIsPicking(false);\n              onChange(value);\n            }}\n            menuPlacement={menuPlacement}\n          />\n        </span>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA4CO,SAAS,WAAA,CAAe;AAAA,EAC7B,YAAA,EAAc,SAAA;AAAA,EACd,KAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA,GAAW,EAAA;AAAA,EACX,IAAA,GAAO,IAAA;AAAA,EACP,WAAA,GAAc,IAAA;AAAA,EACd,aAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,QAAQ,SAAA,EAAU;AAExB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,CAAC,SAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,IAAA,IAAQ,IAAA;AAAA,QACd,SAAA,EAAW,SAAA;AAAA,QACX,MAAM,IAAA,IAAQ,MAAA;AAAA,QACd,OAAA,EAAS,MAAM,YAAA,CAAa,IAAI,CAAA;AAAA,QAChC,OAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA,EAAW,WAAA;AAAA,QACX,eAAa,SAAA,CAAU,UAAA,CAAW,WAAA,CAAY,MAAA,CAAO,gCAAa,KAAK,CAAA;AAAA,QAEtE,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IAGD,SAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,QAAA,EAAU,KAAA,CAAM,OAAA,CAAQ,QAAQ,CAAA,EAAG,QAAA,EAAU,WAAA,GAAc,CAAA,GAAI,QAAU,EACtF,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAa,KAAA;AAAA,QACb,OAAA;AAAA,QACA,cAAY,SAAA,CAAU,UAAA,CAAW,WAAA,CAAY,MAAA,CAAO,gCAAa,KAAK,CAAA;AAAA,QACtE,MAAA,EAAM,IAAA;AAAA,QACN,WAAA,EAAa,MAAM,YAAA,CAAa,KAAK,CAAA;AAAA,QACrC,SAAA,EAAW,IAAA;AAAA,QACX,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,UAAA,YAAA,CAAa,KAAK,CAAA;AAClB,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB,CAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}