{"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';\nimport { IconName } from '../../types';\nimport { ComponentSize } from '../../types/size';\nimport { Button, ButtonFill, ButtonVariant } from '../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\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":";;;;;;;;;;;;;AAuCO,SAAS,WAAe,CAAA;AAAA,EAC7B,YAAc,EAAA,SAAA;AAAA,EACd,KAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAW,GAAA,EAAA;AAAA,EACX,IAAO,GAAA,IAAA;AAAA,EACP,WAAc,GAAA,IAAA;AAAA,EACd,aAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAwB,EAAA;AACtB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,QAAQ,SAAU,EAAA;AAExB,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,CAAC,SACA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,IAAQ,IAAA,IAAA;AAAA,QACd,SAAW,EAAA,SAAA;AAAA,QACX,MAAM,IAAQ,IAAA,MAAA;AAAA,QACd,OAAA,EAAS,MAAM,YAAA,CAAa,IAAI,CAAA;AAAA,QAChC,OAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAW,EAAA,WAAA;AAAA,QACX,eAAa,SAAU,CAAA,UAAA,CAAW,WAAY,CAAA,MAAA,CAAO,gCAAa,KAAK,CAAA;AAAA,QAEtE,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IAGD,SACC,oBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,KAAA,EAAO,EAAE,QAAU,EAAA,KAAA,CAAM,OAAQ,CAAA,QAAQ,CAAG,EAAA,QAAA,EAAU,WAAc,GAAA,CAAA,GAAI,QAC5E,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAa,EAAA,KAAA;AAAA,QACb,OAAA;AAAA,QACA,cAAY,SAAU,CAAA,UAAA,CAAW,WAAY,CAAA,MAAA,CAAO,gCAAa,KAAK,CAAA;AAAA,QACtE,MAAM,EAAA,IAAA;AAAA,QACN,WAAA,EAAa,MAAM,YAAA,CAAa,KAAK,CAAA;AAAA,QACrC,SAAW,EAAA,IAAA;AAAA,QACX,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,UAAA,YAAA,CAAa,KAAK,CAAA;AAClB,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,SAChB;AAAA,QACA;AAAA;AAAA,KAEJ,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}