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

Grafana Components Library

{"version":3,"file":"SelectContainer.mjs","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":[],"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,GAAS,UAAA,CAAW,wBAAA,EAA0B,SAAA,EAAW,YAAY,OAAO,CAAA;AAElF,EAAA,uBACE,GAAA,CAAC,UAAA,CAAW,eAAA,EAAX,EAA4B,GAAG,KAAA,EAAO,SAAA,EAAW,EAAA,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,GAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAS,CAAA;AAEhD,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,EAAA;AAAA,MACP,MAAA,CAAO,OAAA;AAAA,MACP,gBAAA,CAAiB,OAAO,OAAO,CAAA;AAAA,MAC/B,OAAA,IAAW,GAAA,CAAI,cAAA,CAAe,KAAK,CAAC,CAAA;AAAA,MACpC,YAAY,MAAA,CAAO,aAAA;AAAA,MACnB,GAAA,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;;;;"}