@grafana/ui/dist/cjs/components/Segment/SegmentSelect.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Select = require('../Select/Select.cjs');

"use strict";
function SegmentSelect({
  value,
  placeholder = "",
  options = [],
  onChange,
  onClickOutside,
  loadOptions = void 0,
  width: widthPixels,
  noOptionsMessage = "",
  allowCustomValue = false,
  allowEmptyValue = false,
  ...rest
}) {
  const ref = React.useRef(null);
  const theme = ThemeContext.useTheme2();
  let width = widthPixels > 0 ? widthPixels / theme.spacing.gridSize : void 0;
  let Component;
  let asyncOptions = {};
  if (loadOptions) {
    Component = Select.AsyncSelect;
    asyncOptions = { loadOptions, defaultOptions: true };
  } else {
    Component = Select.Select;
  }
  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
    Component,
    {
      width,
      noOptionsMessage,
      placeholder,
      autoFocus: true,
      isOpen: true,
      onChange,
      options,
      value,
      closeMenuOnSelect: false,
      onCloseMenu: () => {
        if (ref && ref.current) {
          const input = ref.current.querySelector('input[id^="react-select-"]');
          if (input && (input.value || allowEmptyValue)) {
            onChange({ value: input.value, label: input.value });
          } else {
            onClickOutside();
          }
        }
      },
      allowCustomValue,
      ...asyncOptions
    }
  ) });
}

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