@grafana/ui/dist/cjs/components/ValuePicker/ValuePicker.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Button = require('../Button/Button.cjs');
var Select = require('../Select/Select.cjs');

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

exports.ValuePicker = ValuePicker;
//# sourceMappingURL=ValuePicker.cjs.map