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

Grafana Components Library

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { useTheme2 } from '../../themes/ThemeContext.mjs';
import { Button } from '../Button/Button.mjs';
import { Select } from '../Select/Select.mjs';

function ValuePicker({
  "aria-label": ariaLabel,
  label,
  icon,
  options,
  onChange,
  variant,
  minWidth = 16,
  size = "sm",
  isFullWidth = true,
  menuPlacement,
  fill,
  buttonCss
}) {
  const [isPicking, setIsPicking] = useState(false);
  const theme = useTheme2();
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    !isPicking && /* @__PURE__ */ jsx(
      Button,
      {
        size: size || "sm",
        className: buttonCss,
        icon: icon || "plus",
        onClick: () => setIsPicking(true),
        variant,
        fill,
        fullWidth: isFullWidth,
        "data-testid": selectors.components.ValuePicker.button(ariaLabel != null ? ariaLabel : label),
        children: label
      }
    ),
    isPicking && /* @__PURE__ */ jsx("span", { style: { minWidth: theme.spacing(minWidth), flexGrow: isFullWidth ? 1 : void 0 }, children: /* @__PURE__ */ jsx(
      Select,
      {
        placeholder: label,
        options,
        "aria-label": selectors.components.ValuePicker.select(ariaLabel != null ? ariaLabel : label),
        isOpen: true,
        onCloseMenu: () => setIsPicking(false),
        autoFocus: true,
        onChange: (value) => {
          setIsPicking(false);
          onChange(value);
        },
        menuPlacement
      }
    ) })
  ] });
}

export { ValuePicker };
//# sourceMappingURL=ValuePicker.mjs.map