{"version":3,"file":"SelectContainer.cjs","sources":["../../../../src/components/Select/SelectContainer.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { components, ContainerProps as BaseContainerProps, GroupBase } from 'react-select';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { sharedInputStyle } from '../Forms/commonStyles';\nimport { getInputStyles } from '../Input/Input';\n\nimport { CustomComponentProps } from './types';\n\n// prettier-ignore\nexport type SelectContainerProps<Option, isMulti extends boolean, Group extends GroupBase<Option>> =\n  BaseContainerProps<Option, isMulti, Group> & CustomComponentProps<Option, isMulti, Group>;\n\nexport const SelectContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(\n  props: SelectContainerProps<Option, isMulti, Group>\n) => {\n  const {\n    isDisabled,\n    isFocused,\n    children,\n    selectProps: { invalid = false },\n  } = props;\n\n  const styles = useStyles2(getSelectContainerStyles, isFocused, isDisabled, invalid);\n\n  return (\n    <components.SelectContainer {...props} className={cx(styles.wrapper, props.className)}>\n      {children}\n    </components.SelectContainer>\n  );\n};\n\nconst getSelectContainerStyles = (theme: GrafanaTheme2, focused: boolean, disabled: boolean, invalid: boolean) => {\n  const styles = getInputStyles({ theme, invalid });\n\n  return {\n    wrapper: cx(\n      styles.wrapper,\n      sharedInputStyle(theme, invalid),\n      focused && css(getFocusStyles(theme)),\n      disabled && styles.inputDisabled,\n      css({\n        position: 'relative',\n        boxSizing: 'border-box',\n        /* The display property is set by the styles prop in SelectBase because it's dependant on the width prop  */\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n        alignItems: 'stretch',\n        justifyContent: 'space-between',\n        minHeight: theme.spacing(theme.components.height.md),\n        height: 'auto',\n        maxWidth: '100%',\n\n        /* Input padding is applied to the InputControl so the menu is aligned correctly */\n        padding: 0,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n      })\n    ),\n  };\n};\n"],"names":["useStyles2","jsx","components","cx","getInputStyles","sharedInputStyle","css","getFocusStyles"],"mappings":";;;;;;;;;;;;;AAgBO,MAAM,eAAA,GAAkB,CAC7B,KAAA,KACG;AACH,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA,EAAa,EAAE,OAAA,GAAU,KAAA;AAAM,GACjC,GAAI,KAAA;AAEJ,EAAA,MAAM,MAAA,GAASA,uBAAA,CAAW,wBAAA,EAA0B,SAAA,EAAW,YAAY,OAAO,CAAA;AAElF,EAAA,uBACEC,cAAA,CAACC,sBAAA,CAAW,eAAA,EAAX,EAA4B,GAAG,KAAA,EAAO,SAAA,EAAWC,MAAA,CAAG,MAAA,CAAO,OAAA,EAAS,KAAA,CAAM,SAAS,GACjF,QAAA,EACH,CAAA;AAEJ;AAEA,MAAM,wBAAA,GAA2B,CAAC,KAAA,EAAsB,OAAA,EAAkB,UAAmB,OAAA,KAAqB;AAChH,EAAA,MAAM,MAAA,GAASC,oBAAA,CAAe,EAAE,KAAA,EAAO,SAAS,CAAA;AAEhD,EAAA,OAAO;AAAA,IACL,OAAA,EAASD,MAAA;AAAA,MACP,MAAA,CAAO,OAAA;AAAA,MACPE,6BAAA,CAAiB,OAAO,OAAO,CAAA;AAAA,MAC/B,OAAA,IAAWC,OAAA,CAAIC,qBAAA,CAAe,KAAK,CAAC,CAAA;AAAA,MACpC,YAAY,MAAA,CAAO,aAAA;AAAA,MACnBD,OAAA,CAAI;AAAA,QACF,QAAA,EAAU,UAAA;AAAA,QACV,SAAA,EAAW,YAAA;AAAA;AAAA,QAEX,aAAA,EAAe,KAAA;AAAA,QACf,QAAA,EAAU,MAAA;AAAA,QACV,UAAA,EAAY,SAAA;AAAA,QACZ,cAAA,EAAgB,eAAA;AAAA,QAChB,WAAW,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,UAAA,CAAW,OAAO,EAAE,CAAA;AAAA,QACnD,MAAA,EAAQ,MAAA;AAAA,QACR,QAAA,EAAU,MAAA;AAAA;AAAA,QAGV,OAAA,EAAS,CAAA;AAAA,QACT,MAAA,EAAQ,WAAW,aAAA,GAAgB;AAAA,OACpC;AAAA;AACH,GACF;AACF,CAAA;;;;"}