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

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import { components } from 'react-select';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { getFocusStyles } from '../../themes/mixins.mjs';
import { sharedInputStyle } from '../Forms/commonStyles.mjs';
import { getInputStyles } from '../Input/Input.mjs';

"use strict";
const SelectContainer = (props) => {
  const {
    isDisabled,
    isFocused,
    children,
    selectProps: { invalid = false }
  } = props;
  const styles = useStyles2(getSelectContainerStyles, isFocused, isDisabled, invalid);
  return /* @__PURE__ */ jsx(components.SelectContainer, { ...props, className: cx(styles.wrapper, props.className), children });
};
const getSelectContainerStyles = (theme, focused, disabled, invalid) => {
  const styles = getInputStyles({ theme, invalid });
  return {
    wrapper: cx(
      styles.wrapper,
      sharedInputStyle(theme, invalid),
      focused && css(getFocusStyles(theme)),
      disabled && styles.inputDisabled,
      css({
        position: "relative",
        boxSizing: "border-box",
        /* The display property is set by the styles prop in SelectBase because it's dependant on the width prop  */
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "stretch",
        justifyContent: "space-between",
        minHeight: theme.spacing(theme.components.height.md),
        height: "auto",
        maxWidth: "100%",
        /* Input padding is applied to the InputControl so the menu is aligned correctly */
        padding: 0,
        cursor: disabled ? "not-allowed" : "pointer"
      })
    )
  };
};

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