@grafana/ui/dist/cjs/components/Select/ValueContainer.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var getSelectStyles = require('./getSelectStyles.cjs');

"use strict";
const ValueContainer = ({
  children,
  selectProps,
  isMulti
}) => {
  const styles = ThemeContext.useStyles2(getSelectStyles.getSelectStyles);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && selectProps.autoWidth && !selectProps.maxVisibleValues) {
      ref.current.style.minWidth = "0px";
      const width = ref.current.offsetWidth;
      ref.current.style.minWidth = `${width}px`;
    }
  }, [selectProps.value, selectProps.autoWidth, selectProps.maxVisibleValues]);
  const renderContainer = (containerChildren) => {
    const noWrap = (selectProps == null ? void 0 : selectProps.noMultiValueWrap) && !(selectProps == null ? void 0 : selectProps.menuIsOpen);
    const dataTestid = selectProps["data-testid"];
    const className = css.cx(styles.valueContainer, {
      [styles.valueContainerMulti]: isMulti && !noWrap,
      [styles.valueContainerMultiNoWrap]: isMulti && noWrap
    });
    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-testid": dataTestid, className, children: containerChildren });
  };
  if (selectProps && Array.isArray(children) && Array.isArray(children[0]) && selectProps.maxVisibleValues !== void 0 && !(selectProps.showAllSelectedWhenOpen && selectProps.menuIsOpen)) {
    const [valueChildren, ...otherChildren] = children;
    const truncatedValues = valueChildren.slice(0, selectProps.maxVisibleValues);
    return renderContainer([truncatedValues, ...otherChildren]);
  }
  return renderContainer(children);
};

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