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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var InlineLabel = require('../Forms/InlineLabel.cjs');
var utils = require('../Select/utils.cjs');
var SegmentSelect = require('./SegmentSelect.cjs');
var styles = require('./styles.cjs');
var useExpandableLabel = require('./useExpandableLabel.cjs');

"use strict";
function Segment({
  options,
  value,
  onChange,
  Component,
  className,
  allowCustomValue,
  allowEmptyValue,
  placeholder,
  disabled,
  inputMinWidth,
  inputPlaceholder,
  onExpandedChange,
  autofocus = false,
  ...rest
}) {
  const [Label, labelWidth, expanded, setExpanded] = useExpandableLabel.useExpandableLabel(autofocus, onExpandedChange);
  const width = inputMinWidth ? Math.max(inputMinWidth, labelWidth) : labelWidth;
  const styles$1 = ThemeContext.useStyles2(styles.getSegmentStyles);
  if (!expanded) {
    const label = utils.getLabelFromValue(value);
    return /* @__PURE__ */ jsxRuntime.jsx(
      Label,
      {
        disabled,
        Component: Component || /* @__PURE__ */ jsxRuntime.jsx(
          InlineLabel.InlineLabel,
          {
            className: css.cx(
              styles$1.segment,
              {
                [styles$1.queryPlaceholder]: placeholder !== void 0 && !value,
                [styles$1.disabled]: disabled
              },
              className
            ),
            children: label || placeholder
          }
        )
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    SegmentSelect.SegmentSelect,
    {
      ...rest,
      value: value && typeof value !== "object" ? { value } : value,
      placeholder: inputPlaceholder,
      options,
      width,
      onClickOutside: () => setExpanded(false),
      allowCustomValue,
      allowEmptyValue,
      onChange: (item) => {
        setExpanded(false);
        onChange(item);
      }
    }
  );
}

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