@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":";;;;;;;;AAgBa,MAAA,eAAA,GAAkB,CAC7B,KACG,KAAA;AACH,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA,EAAa,EAAE,OAAA,GAAU,KAAM;AAAA,GAC7B,GAAA,KAAA;AAEJ,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,wBAA0B,EAAA,SAAA,EAAW,YAAY,OAAO,CAAA;AAElF,EAAA,uBACG,GAAA,CAAA,UAAA,CAAW,eAAX,EAAA,EAA4B,GAAG,KAAA,EAAO,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,OAAA,EAAS,KAAM,CAAA,SAAS,GACjF,QACH,EAAA,CAAA;AAEJ;AAEA,MAAM,wBAA2B,GAAA,CAAC,KAAsB,EAAA,OAAA,EAAkB,UAAmB,OAAqB,KAAA;AAChH,EAAA,MAAM,MAAS,GAAA,cAAA,CAAe,EAAE,KAAA,EAAO,SAAS,CAAA;AAEhD,EAAO,OAAA;AAAA,IACL,OAAS,EAAA,EAAA;AAAA,MACP,MAAO,CAAA,OAAA;AAAA,MACP,gBAAA,CAAiB,OAAO,OAAO,CAAA;AAAA,MAC/B,OAAW,IAAA,GAAA,CAAI,cAAe,CAAA,KAAK,CAAC,CAAA;AAAA,MACpC,YAAY,MAAO,CAAA,aAAA;AAAA,MACnB,GAAI,CAAA;AAAA,QACF,QAAU,EAAA,UAAA;AAAA,QACV,SAAW,EAAA,YAAA;AAAA;AAAA,QAEX,aAAe,EAAA,KAAA;AAAA,QACf,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,SAAA;AAAA,QACZ,cAAgB,EAAA,eAAA;AAAA,QAChB,WAAW,KAAM,CAAA,OAAA,CAAQ,KAAM,CAAA,UAAA,CAAW,OAAO,EAAE,CAAA;AAAA,QACnD,MAAQ,EAAA,MAAA;AAAA,QACR,QAAU,EAAA,MAAA;AAAA;AAAA,QAGV,OAAS,EAAA,CAAA;AAAA,QACT,MAAA,EAAQ,WAAW,aAAgB,GAAA;AAAA,OACpC;AAAA;AACH,GACF;AACF,CAAA;;;;"}