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

Grafana Components Library

{"version":3,"file":"ValueContainer.mjs","sources":["../../../../src/components/Select/ValueContainer.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { useEffect, useRef, type ReactNode } from 'react';\nimport { type ValueContainerProps as BaseValueContainerProps, type GroupBase } from 'react-select';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { getSelectStyles } from './getSelectStyles';\nimport type { CustomComponentProps } from './types';\n\ntype ValueContainerProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseValueContainerProps<\n  Option,\n  IsMulti,\n  Group\n> &\n  CustomComponentProps<Option, IsMulti, Group>;\n\nexport const ValueContainer = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({\n  children,\n  selectProps,\n  isMulti,\n}: ValueContainerProps<Option, IsMulti, Group>) => {\n  const styles = useStyles2(getSelectStyles);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (ref.current && selectProps.autoWidth && !selectProps.maxVisibleValues) {\n      // Reset in order to measure the new width\n      ref.current.style.minWidth = '0px';\n\n      const width = ref.current.offsetWidth;\n\n      ref.current.style.minWidth = `${width}px`;\n    }\n  }, [selectProps.value, selectProps.autoWidth, selectProps.maxVisibleValues]);\n\n  const renderContainer = (containerChildren?: ReactNode) => {\n    const noWrap = selectProps?.noMultiValueWrap && !selectProps?.menuIsOpen;\n    const dataTestid = selectProps['data-testid'];\n    const className = cx(styles.valueContainer, {\n      [styles.valueContainerMulti]: isMulti && !noWrap,\n      [styles.valueContainerMultiNoWrap]: isMulti && noWrap,\n    });\n\n    return (\n      <div ref={ref} data-testid={dataTestid} className={className}>\n        {containerChildren}\n      </div>\n    );\n  };\n\n  if (\n    selectProps &&\n    Array.isArray(children) &&\n    Array.isArray(children[0]) &&\n    selectProps.maxVisibleValues !== undefined &&\n    !(selectProps.showAllSelectedWhenOpen && selectProps.menuIsOpen)\n  ) {\n    const [valueChildren, ...otherChildren] = children;\n    const truncatedValues = valueChildren.slice(0, selectProps.maxVisibleValues);\n\n    return renderContainer([truncatedValues, ...otherChildren]);\n  }\n\n  return renderContainer(children);\n};\n"],"names":[],"mappings":";;;;;;;AAgBO,MAAM,iBAAiB,CAAmE;AAAA,EAC/F,QAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAAmD;AACjD,EAAA,MAAM,MAAA,GAAS,WAAW,eAAe,CAAA;AACzC,EAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AAEvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAI,OAAA,IAAW,WAAA,CAAY,SAAA,IAAa,CAAC,YAAY,gBAAA,EAAkB;AAEzE,MAAA,GAAA,CAAI,OAAA,CAAQ,MAAM,QAAA,GAAW,KAAA;AAE7B,MAAA,MAAM,KAAA,GAAQ,IAAI,OAAA,CAAQ,WAAA;AAE1B,MAAA,GAAA,CAAI,OAAA,CAAQ,KAAA,CAAM,QAAA,GAAW,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA;AAAA,IACvC;AAAA,EACF,CAAA,EAAG,CAAC,WAAA,CAAY,KAAA,EAAO,YAAY,SAAA,EAAW,WAAA,CAAY,gBAAgB,CAAC,CAAA;AAE3E,EAAA,MAAM,eAAA,GAAkB,CAAC,iBAAA,KAAkC;AACzD,IAAA,MAAM,MAAA,GAAA,CAAS,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,gBAAA,KAAoB,EAAC,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,UAAA,CAAA;AAC9D,IAAA,MAAM,UAAA,GAAa,YAAY,aAAa,CAAA;AAC5C,IAAA,MAAM,SAAA,GAAY,EAAA,CAAG,MAAA,CAAO,cAAA,EAAgB;AAAA,MAC1C,CAAC,MAAA,CAAO,mBAAmB,GAAG,WAAW,CAAC,MAAA;AAAA,MAC1C,CAAC,MAAA,CAAO,yBAAyB,GAAG,OAAA,IAAW;AAAA,KAChD,CAAA;AAED,IAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAU,aAAA,EAAa,UAAA,EAAY,WACrC,QAAA,EAAA,iBAAA,EACH,CAAA;AAAA,EAEJ,CAAA;AAEA,EAAA,IACE,eACA,KAAA,CAAM,OAAA,CAAQ,QAAQ,CAAA,IACtB,KAAA,CAAM,QAAQ,QAAA,CAAS,CAAC,CAAC,CAAA,IACzB,YAAY,gBAAA,KAAqB,KAAA,CAAA,IACjC,EAAE,WAAA,CAAY,uBAAA,IAA2B,YAAY,UAAA,CAAA,EACrD;AACA,IAAA,MAAM,CAAC,aAAA,EAAe,GAAG,aAAa,CAAA,GAAI,QAAA;AAC1C,IAAA,MAAM,eAAA,GAAkB,aAAA,CAAc,KAAA,CAAM,CAAA,EAAG,YAAY,gBAAgB,CAAA;AAE3E,IAAA,OAAO,eAAA,CAAgB,CAAC,eAAA,EAAiB,GAAG,aAAa,CAAC,CAAA;AAAA,EAC5D;AAEA,EAAA,OAAO,gBAAgB,QAAQ,CAAA;AACjC;;;;"}