@grafana/ui/dist/esm/components/Combobox/getMultiComboboxStyles.mjs.map

Grafana Components Library

{"version":3,"file":"getMultiComboboxStyles.mjs","sources":["../../../../src/components/Combobox/getMultiComboboxStyles.ts"],"sourcesContent":["import { css, cx } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { getFocusStyles } from '../../themes/mixins';\nimport { getInputStyles } from '../Input/Input';\n\nexport const getMultiComboboxStyles = (\n  theme: GrafanaTheme2,\n  isOpen: boolean,\n  invalid?: boolean,\n  disabled?: boolean,\n  width?: number | 'auto',\n  minWidth?: number,\n  maxWidth?: number,\n  isClearable?: boolean\n) => {\n  const inputStyles = getInputStyles({ theme, invalid });\n  const focusStyles = getFocusStyles(theme);\n\n  const wrapperWidth = width && width !== 'auto' ? theme.spacing(width) : '100%';\n  const wrapperMinWidth = minWidth ? theme.spacing(minWidth) : '';\n  const wrapperMaxWidth = maxWidth ? theme.spacing(maxWidth) : '';\n\n  return {\n    container: css({\n      width: width === 'auto' ? 'auto' : wrapperWidth,\n      minWidth: wrapperMinWidth,\n      maxWidth: wrapperMaxWidth,\n      display: width === 'auto' ? 'inline-block' : 'block',\n    }), // wraps everything\n    wrapper: cx(\n      inputStyles.input,\n      css({\n        display: 'flex',\n        width: '100%',\n        gap: theme.spacing(0.5),\n        padding: theme.spacing(0.5),\n        paddingRight: isClearable ? theme.spacing(5) : 28, // Account for suffix\n        '&:focus-within': {\n          ...focusStyles,\n        },\n      })\n    ),\n    input: css({\n      border: 'none',\n      outline: 'none',\n      background: 'transparent',\n      flexGrow: 1,\n      maxWidth: '100%',\n      minWidth: 40, // This is a bit arbitrary, but is used to leave some space for clicking. This will override the minWidth property\n      '&::placeholder': {\n        color: theme.colors.text.disabled,\n      },\n      '&:focus': {\n        outline: 'none',\n        cursor: 'text',\n      },\n      cursor: 'pointer',\n    }),\n\n    pillWrapper: css({\n      display: 'inline-flex',\n      flexWrap: isOpen ? 'wrap' : 'nowrap',\n      flexGrow: 1,\n      minWidth: '50px',\n      gap: theme.spacing(0.5),\n    }),\n    restNumber: css({\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: theme.spacing(0, 1),\n      border: disabled ? `1px solid ${theme.colors.border.weak}` : 'none',\n      borderRadius: theme.shape.radius.default,\n      backgroundColor: theme.colors.background.secondary,\n      cursor: 'pointer',\n      '&:hover': {\n        backgroundColor: theme.colors.action.hover,\n      },\n    }),\n    suffix: inputStyles.suffix,\n    disabled: inputStyles.inputDisabled,\n  };\n};\n"],"names":[],"mappings":"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"}