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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ReactSelect = require('react-select');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var mixins = require('../../themes/mixins.cjs');
var commonStyles = require('../Forms/commonStyles.cjs');
var Input = require('../Input/Input.cjs');

"use strict";
const SelectContainer = (props) => {
  const {
    isDisabled,
    isFocused,
    children,
    selectProps: { invalid = false }
  } = props;
  const styles = ThemeContext.useStyles2(getSelectContainerStyles, isFocused, isDisabled, invalid);
  return /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.SelectContainer, { ...props, className: css.cx(styles.wrapper, props.className), children });
};
const getSelectContainerStyles = (theme, focused, disabled, invalid) => {
  const styles = Input.getInputStyles({ theme, invalid });
  return {
    wrapper: css.cx(
      styles.wrapper,
      commonStyles.sharedInputStyle(theme, invalid),
      focused && css.css(mixins.getFocusStyles(theme)),
      disabled && styles.inputDisabled,
      css.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"
      })
    )
  };
};

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