@grafana/ui/dist/cjs/components/Forms/Legacy/Select/Select.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var classNames = require('classnames');
var React = require('react');
var ReactSelect = require('react-select');
var ReactAsyncSelect = require('react-select/async');
var Creatable = require('react-select/creatable');
var data = require('@grafana/data');
var ScrollContainer = require('../../../ScrollContainer/ScrollContainer.cjs');
var SingleValue = require('../../../Select/SingleValue.cjs');
var resetSelectStyles = require('../../../Select/resetSelectStyles.cjs');
var Tooltip = require('../../../Tooltip/Tooltip.cjs');
var IndicatorsContainer = require('./IndicatorsContainer.cjs');
var NoOptionsMessage = require('./NoOptionsMessage.cjs');
var SelectOption = require('./SelectOption.cjs');
var SelectOptionGroup = require('./SelectOptionGroup.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
var ReactSelect__default = /*#__PURE__*/_interopDefaultCompat(ReactSelect);
var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultCompat(ReactAsyncSelect);
var Creatable__default = /*#__PURE__*/_interopDefaultCompat(Creatable);

"use strict";
const MenuList = (props) => {
  return /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.MenuList, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollContainer.ScrollContainer, { showScrollIndicators: true, overflowX: "hidden", maxHeight: "inherit", children: props.children }) });
};
const _Select = class _Select extends React.PureComponent {
  render() {
    const {
      defaultValue,
      getOptionLabel,
      getOptionValue,
      onChange,
      options,
      placeholder,
      width,
      value,
      className,
      isDisabled,
      isLoading,
      isSearchable,
      isClearable,
      backspaceRemovesValue,
      isMulti,
      autoFocus,
      openMenuOnFocus,
      onBlur,
      maxMenuHeight,
      noOptionsMessage,
      isOpen,
      components: components2,
      tooltipContent,
      tabSelectsValue,
      onCloseMenu,
      onOpenMenu,
      allowCustomValue,
      formatCreateLabel,
      "aria-label": ariaLabel
    } = this.props;
    let widthClass = "";
    if (width) {
      widthClass = "width-" + width;
    }
    let SelectComponent = ReactSelect__default.default;
    const creatableOptions = {};
    if (allowCustomValue) {
      SelectComponent = Creatable__default.default;
      creatableOptions.formatCreateLabel = formatCreateLabel != null ? formatCreateLabel : (input) => input;
    }
    const selectClassNames = classNames__default.default("gf-form-input", "gf-form-input--form-dropdown", widthClass, className);
    const selectComponents = { ..._Select.defaultProps.components, ...components2 };
    return /* @__PURE__ */ jsxRuntime.jsx(WrapInTooltip, { onCloseMenu, onOpenMenu, tooltipContent, isOpen, children: (onOpenMenuInternal, onCloseMenuInternal) => {
      return /* @__PURE__ */ jsxRuntime.jsx(
        SelectComponent,
        {
          captureMenuScroll: false,
          classNamePrefix: "gf-form-select-box",
          className: selectClassNames,
          components: selectComponents,
          defaultValue,
          value,
          getOptionLabel,
          getOptionValue,
          menuShouldScrollIntoView: false,
          isSearchable,
          onChange,
          options,
          placeholder: placeholder || "Choose",
          styles: resetSelectStyles.default(this.context),
          isDisabled,
          isLoading,
          isClearable,
          autoFocus,
          onBlur,
          openMenuOnFocus,
          maxMenuHeight,
          noOptionsMessage,
          isMulti,
          backspaceRemovesValue,
          menuIsOpen: isOpen,
          onMenuOpen: onOpenMenuInternal,
          onMenuClose: onCloseMenuInternal,
          tabSelectsValue,
          "aria-label": ariaLabel,
          ...creatableOptions
        }
      );
    } });
  }
};
_Select.contextType = data.ThemeContext;
_Select.defaultProps = {
  className: "",
  isDisabled: false,
  isSearchable: true,
  isClearable: false,
  isMulti: false,
  openMenuOnFocus: false,
  autoFocus: false,
  isLoading: false,
  backspaceRemovesValue: true,
  maxMenuHeight: 300,
  tabSelectsValue: true,
  allowCustomValue: false,
  components: {
    Option: SelectOption.SelectOption,
    SingleValue: SingleValue.SingleValue,
    IndicatorsContainer: IndicatorsContainer.IndicatorsContainer,
    MenuList,
    Group: SelectOptionGroup.SelectOptionGroup
  }
};
let Select = _Select;
class AsyncSelect extends React.PureComponent {
  render() {
    const {
      defaultValue,
      getOptionLabel,
      getOptionValue,
      onChange,
      placeholder,
      width,
      value,
      className,
      loadOptions,
      defaultOptions,
      isLoading,
      loadingMessage,
      noOptionsMessage,
      isDisabled,
      isSearchable,
      isClearable,
      backspaceRemovesValue,
      autoFocus,
      onBlur,
      openMenuOnFocus,
      maxMenuHeight,
      isMulti,
      tooltipContent,
      onCloseMenu,
      onOpenMenu,
      isOpen
    } = this.props;
    let widthClass = "";
    if (width) {
      widthClass = "width-" + width;
    }
    const selectClassNames = classNames__default.default("gf-form-input", "gf-form-input--form-dropdown", widthClass, className);
    return /* @__PURE__ */ jsxRuntime.jsx(WrapInTooltip, { onCloseMenu, onOpenMenu, tooltipContent, isOpen, children: (onOpenMenuInternal, onCloseMenuInternal) => {
      return /* @__PURE__ */ jsxRuntime.jsx(
        ReactAsyncSelect__default.default,
        {
          captureMenuScroll: false,
          classNamePrefix: "gf-form-select-box",
          className: selectClassNames,
          components: {
            Option: SelectOption.SelectOption,
            SingleValue: SingleValue.SingleValue,
            IndicatorsContainer: IndicatorsContainer.IndicatorsContainer,
            NoOptionsMessage: NoOptionsMessage.NoOptionsMessage
          },
          defaultValue,
          value,
          getOptionLabel,
          getOptionValue,
          menuShouldScrollIntoView: false,
          onChange,
          loadOptions,
          isLoading,
          defaultOptions,
          placeholder: placeholder || "Choose",
          styles: resetSelectStyles.default(this.context),
          loadingMessage,
          noOptionsMessage,
          isDisabled,
          isSearchable,
          isClearable,
          autoFocus,
          onBlur,
          openMenuOnFocus,
          maxMenuHeight,
          isMulti,
          backspaceRemovesValue
        }
      );
    } });
  }
}
AsyncSelect.contextType = data.ThemeContext;
AsyncSelect.defaultProps = {
  className: "",
  components: {},
  loadingMessage: () => "Loading...",
  isDisabled: false,
  isClearable: false,
  isMulti: false,
  isSearchable: true,
  backspaceRemovesValue: true,
  autoFocus: false,
  openMenuOnFocus: false,
  maxMenuHeight: 300
};
class WrapInTooltip extends React.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      isOpenInternal: false
    };
    this.onOpenMenu = () => {
      const { onOpenMenu } = this.props;
      if (onOpenMenu) {
        onOpenMenu();
      }
      this.setState({ isOpenInternal: true });
    };
    this.onCloseMenu = () => {
      const { onCloseMenu } = this.props;
      if (onCloseMenu) {
        onCloseMenu();
      }
      this.setState({ isOpenInternal: false });
    };
  }
  render() {
    const { children, isOpen, tooltipContent } = this.props;
    const { isOpenInternal } = this.state;
    let showTooltip = void 0;
    if (isOpenInternal || isOpen) {
      showTooltip = false;
    }
    if (tooltipContent) {
      return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { show: showTooltip, content: tooltipContent, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: children(this.onOpenMenu, this.onCloseMenu) }) });
    } else {
      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: children(this.onOpenMenu, this.onCloseMenu) });
    }
  }
}

exports.AsyncSelect = AsyncSelect;
exports.Select = Select;
//# sourceMappingURL=Select.cjs.map