@grafana/ui
Version:
Grafana Components Library
85 lines (80 loc) • 2.62 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var css = require('@emotion/css');
var mixins = require('../../themes/mixins.cjs');
var Input = require('../Input/Input.cjs');
"use strict";
const getMultiComboboxStyles = (theme, isOpen, invalid, disabled, width, minWidth, maxWidth, isClearable) => {
const inputStyles = Input.getInputStyles({ theme, invalid });
const focusStyles = mixins.getFocusStyles(theme);
const wrapperWidth = width && width !== "auto" ? theme.spacing(width) : "100%";
const wrapperMinWidth = minWidth ? theme.spacing(minWidth) : "";
const wrapperMaxWidth = maxWidth ? theme.spacing(maxWidth) : "";
return {
container: css.css({
width: width === "auto" ? "auto" : wrapperWidth,
minWidth: wrapperMinWidth,
maxWidth: wrapperMaxWidth,
display: width === "auto" ? "inline-block" : "block"
}),
// wraps everything
wrapper: css.cx(
inputStyles.input,
css.css({
display: "flex",
alignItems: "center",
width: "100%",
gap: theme.spacing(0.5),
padding: theme.spacing(0.5),
paddingRight: isClearable ? theme.spacing(5) : 28,
// Account for suffix
"&:focus-within": {
...focusStyles
}
})
),
input: css.css({
border: "none",
outline: "none",
background: "transparent",
flexGrow: 1,
height: "100%",
maxWidth: "100%",
minWidth: 20,
// This is a bit arbitrary, but is used to leave some space for clicking. This will override the minWidth property
"&::placeholder": {
color: theme.colors.text.disabled
},
"&:focus": {
outline: "none",
cursor: "text"
},
cursor: "pointer"
}),
pillWrapper: css.css({
display: "inline-flex",
alignItems: "center",
flexWrap: isOpen ? "wrap" : "nowrap",
flexGrow: 1,
minWidth: "50px",
gap: theme.spacing(0.5)
}),
restNumber: css.css({
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
padding: theme.spacing(0, 1),
border: disabled ? `1px solid ${theme.colors.border.weak}` : "none",
borderRadius: theme.shape.radius.default,
backgroundColor: theme.colors.background.secondary,
cursor: "pointer",
"&:hover": {
backgroundColor: theme.colors.action.hover
}
}),
suffix: inputStyles.suffix,
disabled: inputStyles.inputDisabled
};
};
exports.getMultiComboboxStyles = getMultiComboboxStyles;
//# sourceMappingURL=getMultiComboboxStyles.cjs.map