office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
424 lines • 15.5 kB
JavaScript
var _a, _b;
import { __assign } from "tslib";
import { FontWeights, concatStyleSets, getFocusStyle, HighContrastSelector, getPlaceholderStyles, hiddenContentStyle, getInputFocusStyle, getHighContrastNoAdjustStyle, } from '../../Styling';
import { memoizeFunction } from '../../Utilities';
var ComboBoxHeight = 32;
var ComboBoxLineHeight = 30;
var ComboBoxCaretDownWidth = 32;
var ComboBoxOptionHeight = 36;
var getDisabledStyles = memoizeFunction(function (theme) {
var _a;
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.disabledBackground,
color: semanticColors.disabledText,
cursor: 'default',
selectors: (_a = {
':after': {
borderColor: semanticColors.disabledBackground,
}
},
_a[HighContrastSelector] = {
color: 'GrayText',
selectors: {
':after': {
borderColor: 'GrayText',
},
},
},
_a),
};
});
var listOptionHighContrastStyles = {
selectors: (_a = {},
_a[HighContrastSelector] = __assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),
_a),
};
var inputHighContrastStyles = {
selectors: (_b = {},
_b[HighContrastSelector] = __assign({ color: 'WindowText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),
_b),
};
export var getOptionStyles = memoizeFunction(function (theme, customStylesForAllOptions, customOptionStylesForCurrentOption, isPending, isHidden) {
var _a;
var palette = theme.palette, semanticColors = theme.semanticColors;
var option = {
textHoveredColor: semanticColors.menuItemTextHovered,
textSelectedColor: palette.neutralDark,
textDisabledColor: semanticColors.disabledText,
backgroundHoveredColor: semanticColors.menuItemBackgroundHovered,
backgroundPressedColor: semanticColors.menuItemBackgroundPressed,
};
var optionStyles = {
root: [
theme.fonts.medium,
{
backgroundColor: isPending ? option.backgroundHoveredColor : 'transparent',
boxSizing: 'border-box',
cursor: 'pointer',
display: isHidden ? 'none' : 'block',
width: '100%',
height: 'auto',
minHeight: ComboBoxOptionHeight,
lineHeight: '20px',
padding: '0 8px',
position: 'relative',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: 'transparent',
borderRadius: 0,
wordWrap: 'break-word',
overflowWrap: 'break-word',
textAlign: 'left',
selectors: (_a = {},
_a[HighContrastSelector] = {
border: 'none',
borderColor: 'Background',
},
_a['&.ms-Checkbox'] = {
display: 'flex',
alignItems: 'center',
},
_a['&.ms-Button--command:hover:active'] = {
backgroundColor: option.backgroundPressedColor,
},
_a['.ms-Checkbox-label'] = {
width: '100%',
},
_a),
},
],
rootHovered: {
backgroundColor: option.backgroundHoveredColor,
color: option.textHoveredColor,
},
rootFocused: {
backgroundColor: option.backgroundHoveredColor,
},
rootChecked: [
{
backgroundColor: 'transparent',
color: option.textSelectedColor,
selectors: {
':hover': [
{
backgroundColor: option.backgroundHoveredColor,
},
listOptionHighContrastStyles,
],
},
},
getFocusStyle(theme, { inset: -1, isFocusedOnly: false }),
listOptionHighContrastStyles,
],
rootDisabled: {
color: option.textDisabledColor,
cursor: 'default',
},
optionText: {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
minWidth: '0px',
maxWidth: '100%',
wordWrap: 'break-word',
overflowWrap: 'break-word',
display: 'inline-block',
},
optionTextWrapper: {
maxWidth: '100%',
display: 'flex',
alignItems: 'center',
},
};
return concatStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);
});
export var getCaretDownButtonStyles = memoizeFunction(function (theme, customStyles) {
var _a, _b;
var semanticColors = theme.semanticColors, fonts = theme.fonts;
var caret = {
buttonTextColor: semanticColors.bodySubtext,
buttonTextHoveredCheckedColor: semanticColors.buttonTextChecked,
buttonBackgroundHoveredColor: semanticColors.listItemBackgroundHovered,
buttonBackgroundCheckedColor: semanticColors.listItemBackgroundChecked,
buttonBackgroundCheckedHoveredColor: semanticColors.listItemBackgroundCheckedHovered,
};
var buttonHighContrastStyles = {
selectors: (_a = {},
_a[HighContrastSelector] = __assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),
_a),
};
var styles = {
root: {
color: caret.buttonTextColor,
fontSize: fonts.small.fontSize,
position: 'absolute',
top: 0,
height: '100%',
lineHeight: ComboBoxLineHeight,
width: ComboBoxCaretDownWidth,
textAlign: 'center',
cursor: 'default',
selectors: (_b = {},
_b[HighContrastSelector] = __assign({ backgroundColor: 'ButtonFace', borderColor: 'ButtonText', color: 'ButtonText' }, getHighContrastNoAdjustStyle()),
_b),
},
icon: {
fontSize: fonts.small.fontSize,
},
rootHovered: [
{
backgroundColor: caret.buttonBackgroundHoveredColor,
color: caret.buttonTextHoveredCheckedColor,
cursor: 'pointer',
},
buttonHighContrastStyles,
],
rootPressed: [
{
backgroundColor: caret.buttonBackgroundCheckedColor,
color: caret.buttonTextHoveredCheckedColor,
},
buttonHighContrastStyles,
],
rootChecked: [
{
backgroundColor: caret.buttonBackgroundCheckedColor,
color: caret.buttonTextHoveredCheckedColor,
},
buttonHighContrastStyles,
],
rootCheckedHovered: [
{
backgroundColor: caret.buttonBackgroundCheckedHoveredColor,
color: caret.buttonTextHoveredCheckedColor,
},
buttonHighContrastStyles,
],
rootDisabled: [
getDisabledStyles(theme),
{
position: 'absolute',
},
],
};
return concatStyleSets(styles, customStyles);
});
export var getStyles = memoizeFunction(function (theme, customStyles, comboBoxOptionWidth) {
var _a, _b, _c, _d, _e, _f;
var semanticColors = theme.semanticColors, fonts = theme.fonts, effects = theme.effects;
var root = {
textColor: semanticColors.inputText,
borderColor: semanticColors.inputBorder,
borderHoveredColor: semanticColors.inputBorderHovered,
borderPressedColor: semanticColors.inputFocusBorderAlt,
borderFocusedColor: semanticColors.inputFocusBorderAlt,
backgroundColor: semanticColors.inputBackground,
erroredColor: semanticColors.errorText,
};
var option = {
headerTextColor: semanticColors.menuHeader,
dividerBorderColor: semanticColors.bodyDivider,
};
// placeholder style variables
var placeholderHighContrastStyles = {
selectors: (_a = {},
_a[HighContrastSelector] = {
color: 'GrayText',
},
_a),
};
var placeholderStyles = [
{
color: semanticColors.inputPlaceholderText,
},
placeholderHighContrastStyles,
];
var placeholderStylesHovered = [
{
color: semanticColors.inputTextHovered,
},
placeholderHighContrastStyles,
];
var disabledPlaceholderStyles = [
{
color: semanticColors.disabledText,
},
placeholderHighContrastStyles,
];
var ComboBoxRootHighContrastFocused = __assign(__assign({ color: 'HighlightText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()), { selectors: {
':after': {
borderColor: 'Highlight',
},
} });
var focusBorderStyles = getInputFocusStyle(root.borderPressedColor, effects.roundedCorner2, 'border', 0);
var styles = {
container: {},
label: {},
labelDisabled: {},
root: [
theme.fonts.medium,
{
boxShadow: 'none',
marginLeft: '0',
paddingRight: ComboBoxCaretDownWidth,
paddingLeft: 9,
color: root.textColor,
position: 'relative',
outline: '0',
userSelect: 'none',
backgroundColor: root.backgroundColor,
cursor: 'text',
display: 'block',
height: ComboBoxHeight,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
boxSizing: 'border-box',
selectors: {
'.ms-Label': {
display: 'inline-block',
marginBottom: '8px',
},
'&.is-open': {
selectors: (_b = {},
_b[HighContrastSelector] = ComboBoxRootHighContrastFocused,
_b),
},
// setting border using pseudo-element here in order to
// prevent chevron button to overlap ComboBox border under certain resolutions
':after': {
pointerEvents: 'none',
content: "''",
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
right: 0,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: root.borderColor,
borderRadius: effects.roundedCorner2,
},
},
},
],
rootHovered: {
selectors: (_c = {
':after': {
borderColor: root.borderHoveredColor,
},
'.ms-ComboBox-Input': [
{
color: semanticColors.inputTextHovered,
},
getPlaceholderStyles(placeholderStylesHovered),
inputHighContrastStyles,
]
},
_c[HighContrastSelector] = __assign(__assign({ color: 'HighlightText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()), { selectors: {
':after': {
borderColor: 'Highlight',
},
} }),
_c),
},
rootPressed: [
{
position: 'relative',
selectors: (_d = {},
_d[HighContrastSelector] = ComboBoxRootHighContrastFocused,
_d),
},
],
rootFocused: [
{
selectors: (_e = {
'.ms-ComboBox-Input': [
{
color: semanticColors.inputTextHovered,
},
inputHighContrastStyles,
]
},
_e[HighContrastSelector] = ComboBoxRootHighContrastFocused,
_e),
},
focusBorderStyles,
],
rootDisabled: getDisabledStyles(theme),
rootError: {
selectors: {
':after': {
borderColor: root.erroredColor,
},
':hover:after': {
borderColor: semanticColors.inputBorderHovered,
},
},
},
rootDisallowFreeForm: {},
input: [
getPlaceholderStyles(placeholderStyles),
{
backgroundColor: root.backgroundColor,
color: root.textColor,
boxSizing: 'border-box',
width: '100%',
height: '100%',
borderStyle: 'none',
outline: 'none',
font: 'inherit',
textOverflow: 'ellipsis',
padding: '0',
selectors: {
'::-ms-clear': {
display: 'none',
},
},
},
inputHighContrastStyles,
],
inputDisabled: [getDisabledStyles(theme), getPlaceholderStyles(disabledPlaceholderStyles)],
errorMessage: [
theme.fonts.small,
{
color: root.erroredColor,
marginTop: '5px',
},
],
callout: {
boxShadow: effects.elevation8,
},
optionsContainerWrapper: {
width: comboBoxOptionWidth,
},
optionsContainer: {
display: 'block',
},
screenReaderText: hiddenContentStyle,
header: [
fonts.medium,
{
fontWeight: FontWeights.semibold,
color: option.headerTextColor,
backgroundColor: 'none',
borderStyle: 'none',
height: ComboBoxOptionHeight,
lineHeight: ComboBoxOptionHeight,
cursor: 'default',
padding: '0 8px',
userSelect: 'none',
textAlign: 'left',
selectors: (_f = {},
_f[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),
_f),
},
],
divider: {
height: 1,
backgroundColor: option.dividerBorderColor,
},
};
return concatStyleSets(styles, customStyles);
});
//# sourceMappingURL=ComboBox.styles.js.map