@grafana/ui/dist/esm/components/Select/ValueContainer.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { cx } from '@emotion/css';
import { useRef, useEffect } from 'react';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { getSelectStyles } from './getSelectStyles.mjs';

"use strict";
const ValueContainer = ({
  children,
  selectProps,
  isMulti
}) => {
  const styles = useStyles2(getSelectStyles);
  const ref = useRef(null);
  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 = cx(styles.valueContainer, {
      [styles.valueContainerMulti]: isMulti && !noWrap,
      [styles.valueContainerMultiNoWrap]: isMulti && noWrap
    });
    return /* @__PURE__ */ 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);
};

export { ValueContainer };
//# sourceMappingURL=ValueContainer.mjs.map