@fluentui/react
Version:
Reusable React components for building web experiences.
381 lines • 19.5 kB
JavaScript
define(["require", "exports", "tslib", "../../Utilities", "../../Positioning", "../../Styling"], function (require, exports, tslib_1, Utilities_1, Positioning_1, Styling_1) {
"use strict";
var _a, _b, _c, _d, _e;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var GlobalClassNames = {
root: 'ms-Dropdown-container',
label: 'ms-Dropdown-label',
dropdown: 'ms-Dropdown',
title: 'ms-Dropdown-title',
caretDownWrapper: 'ms-Dropdown-caretDownWrapper',
caretDown: 'ms-Dropdown-caretDown',
callout: 'ms-Dropdown-callout',
panel: 'ms-Dropdown-panel',
dropdownItems: 'ms-Dropdown-items',
dropdownItem: 'ms-Dropdown-item',
dropdownDivider: 'ms-Dropdown-divider',
dropdownOptionText: 'ms-Dropdown-optionText',
dropdownItemHeader: 'ms-Dropdown-header',
titleIsPlaceHolder: 'ms-Dropdown-titleIsPlaceHolder',
titleHasError: 'ms-Dropdown-title--hasError',
};
var DROPDOWN_HEIGHT = 32;
var DROPDOWN_ITEM_HEIGHT = 36;
var highContrastAdjustMixin = (_a = {},
_a["".concat(Styling_1.HighContrastSelector, ", ").concat(Styling_1.HighContrastSelectorWhite.replace('@media ', ''))] = tslib_1.__assign({}, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_a);
var highContrastItemAndTitleStateMixin = {
selectors: tslib_1.__assign((_b = {}, _b[Styling_1.HighContrastSelector] = (_c = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText'
},
_c[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus:after")] = {
borderColor: 'HighlightText',
},
_c), _b['.ms-Checkbox-checkbox'] = (_d = {},
_d[Styling_1.HighContrastSelector] = {
borderColor: 'HighlightText',
},
_d), _b), highContrastAdjustMixin),
};
var highContrastBorderState = {
selectors: (_e = {},
_e[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight',
},
_e),
};
var MinimumScreenSelector = (0, Styling_1.getScreenSelector)(0, Styling_1.ScreenWidthMinMedium);
var getStyles = function (props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
var theme = props.theme, hasError = props.hasError, hasLabel = props.hasLabel, className = props.className, isOpen = props.isOpen, disabled = props.disabled, required = props.required, isRenderingPlaceholder = props.isRenderingPlaceholder, panelClassName = props.panelClassName, calloutClassName = props.calloutClassName, calloutRenderEdge = props.calloutRenderEdge;
if (!theme) {
throw new Error('theme is undefined or null in base Dropdown getStyles function.');
}
var globalClassnames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
var rootHoverFocusActiveSelectorNeutralDarkMixin = {
color: semanticColors.menuItemTextHovered,
};
var rootHoverFocusActiveSelectorNeutralPrimaryMixin = {
color: semanticColors.menuItemText,
};
var borderColorError = {
borderColor: semanticColors.errorText,
};
var dropdownItemStyle = [
globalClassnames.dropdownItem,
{
backgroundColor: 'transparent',
boxSizing: 'border-box',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
padding: '0 8px',
width: '100%',
minHeight: DROPDOWN_ITEM_HEIGHT,
lineHeight: 20,
height: 0,
position: 'relative',
border: '1px solid transparent',
borderRadius: 0,
wordWrap: 'break-word',
overflowWrap: 'break-word',
textAlign: 'left',
'.ms-Button-flexContainer': {
width: '100%',
},
},
];
var dropdownHeaderStyle = [
globalClassnames.dropdownItemHeader,
tslib_1.__assign(tslib_1.__assign({}, fonts.medium), { fontWeight: Styling_1.FontWeights.semibold, color: semanticColors.menuHeader, background: 'none', backgroundColor: 'transparent', border: 'none', height: DROPDOWN_ITEM_HEIGHT, lineHeight: DROPDOWN_ITEM_HEIGHT, cursor: 'default', padding: '0 8px', userSelect: 'none', textAlign: 'left', selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_a) }),
];
var selectedItemBackgroundColor = semanticColors.menuItemBackgroundPressed;
var itemSelectors = function (isSelected) {
var _a, _b;
if (isSelected === void 0) { isSelected = false; }
return {
selectors: (_a = {
'&:hover': [
{
color: semanticColors.menuItemTextHovered,
backgroundColor: !isSelected ? semanticColors.menuItemBackgroundHovered : selectedItemBackgroundColor,
},
highContrastItemAndTitleStateMixin,
],
'&.is-multi-select:hover': [
{ backgroundColor: !isSelected ? 'transparent' : selectedItemBackgroundColor },
highContrastItemAndTitleStateMixin,
],
'&:active:hover': [
{
color: semanticColors.menuItemTextHovered,
backgroundColor: !isSelected
? semanticColors.menuItemBackgroundPressed
: semanticColors.menuItemBackgroundHovered,
},
highContrastItemAndTitleStateMixin,
]
},
_a[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus:after, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus:after")] = (_b = {
left: 0,
top: 0,
bottom: 0,
right: 0
},
_b[Styling_1.HighContrastSelector] = {
inset: '2px',
},
_b),
_a[Styling_1.HighContrastSelector] = {
border: 'none',
},
_a),
};
};
var dropdownItemSelected = tslib_1.__spreadArray(tslib_1.__spreadArray([], dropdownItemStyle, true), [
{
backgroundColor: selectedItemBackgroundColor,
color: semanticColors.menuItemTextHovered,
},
itemSelectors(true),
highContrastItemAndTitleStateMixin,
], false);
var dropdownItemDisabled = tslib_1.__spreadArray(tslib_1.__spreadArray([], dropdownItemStyle, true), [
{
color: semanticColors.disabledText,
cursor: 'default',
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
color: 'GrayText',
border: 'none',
},
_b),
},
], false);
var titleOpenBorderRadius = calloutRenderEdge === Positioning_1.RectangleEdge.bottom
? "".concat(effects.roundedCorner2, " ").concat(effects.roundedCorner2, " 0 0")
: "0 0 ".concat(effects.roundedCorner2, " ").concat(effects.roundedCorner2);
var calloutOpenBorderRadius = calloutRenderEdge === Positioning_1.RectangleEdge.bottom
? "0 0 ".concat(effects.roundedCorner2, " ").concat(effects.roundedCorner2)
: "".concat(effects.roundedCorner2, " ").concat(effects.roundedCorner2, " 0 0");
return {
root: [globalClassnames.root, className],
label: globalClassnames.label,
dropdown: [
globalClassnames.dropdown,
Styling_1.normalize,
fonts.medium,
{
color: semanticColors.menuItemText,
borderColor: semanticColors.focusBorder,
position: 'relative',
outline: 0,
userSelect: 'none',
selectors: (_c = {},
_c['&:hover .' + globalClassnames.title] = [
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
{ borderColor: isOpen ? palette.neutralSecondary : palette.neutralPrimary },
highContrastBorderState,
],
_c['&:focus .' + globalClassnames.title] = [
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
{ selectors: (_d = {}, _d[Styling_1.HighContrastSelector] = { color: 'Highlight' }, _d) },
],
_c['&:focus:after'] = [
{
pointerEvents: 'none',
content: "''",
position: 'absolute',
boxSizing: 'border-box',
top: '0px',
left: '0px',
width: '100%',
height: '100%',
// see https://github.com/microsoft/fluentui/pull/9182 for semantic color disc
border: !disabled ? "2px solid ".concat(palette.themePrimary) : 'none',
borderRadius: '2px',
selectors: (_e = {},
_e[Styling_1.HighContrastSelector] = {
color: 'Highlight',
},
_e),
},
],
_c['&:active .' + globalClassnames.title] = [
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
{ borderColor: palette.themePrimary },
highContrastBorderState,
],
_c['&:hover .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
_c['&:focus .' + globalClassnames.caretDown] = [
!disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
{ selectors: (_f = {}, _f[Styling_1.HighContrastSelector] = { color: 'Highlight' }, _f) },
],
_c['&:active .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
_c['&:hover .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
_c['&:focus .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
_c['&:active .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
_c['&:hover .' + globalClassnames.titleHasError] = borderColorError,
_c['&:active .' + globalClassnames.titleHasError] = borderColorError,
_c),
},
isOpen && 'is-open',
disabled && 'is-disabled',
required && 'is-required',
required &&
!hasLabel && {
selectors: (_g = {
':before': {
content: "'*'",
color: semanticColors.errorText,
position: 'absolute',
top: -5,
right: -10,
}
},
_g[Styling_1.HighContrastSelector] = {
selectors: {
':after': {
right: -14, // moving the * 4 pixel to right to alleviate border clipping in HC mode.
},
},
},
_g),
},
],
title: [
globalClassnames.title,
Styling_1.normalize,
{
backgroundColor: semanticColors.inputBackground,
borderWidth: 1,
borderStyle: 'solid',
borderColor: semanticColors.inputBorder,
borderRadius: isOpen ? titleOpenBorderRadius : effects.roundedCorner2,
cursor: 'pointer',
display: 'block',
height: DROPDOWN_HEIGHT,
lineHeight: DROPDOWN_HEIGHT - 2,
padding: "0 28px 0 8px",
position: 'relative',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
isRenderingPlaceholder && [globalClassnames.titleIsPlaceHolder, { color: semanticColors.inputPlaceholderText }],
hasError && [globalClassnames.titleHasError, borderColorError],
disabled && {
backgroundColor: semanticColors.disabledBackground,
border: 'none',
color: semanticColors.disabledText,
cursor: 'default',
selectors: (_h = {},
_h[Styling_1.HighContrastSelector] = tslib_1.__assign({ border: '1px solid GrayText', color: 'GrayText', backgroundColor: 'Window' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_h),
},
],
caretDownWrapper: [
globalClassnames.caretDownWrapper,
{
height: DROPDOWN_HEIGHT,
lineHeight: DROPDOWN_HEIGHT - 2, // height minus the border
paddingTop: 1,
position: 'absolute',
right: 8,
top: 0,
},
!disabled && {
cursor: 'pointer',
},
],
caretDown: [
globalClassnames.caretDown,
{ color: palette.neutralSecondary, fontSize: fonts.small.fontSize, pointerEvents: 'none' },
disabled && {
color: semanticColors.disabledText,
selectors: (_j = {},
_j[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_j),
},
],
errorMessage: tslib_1.__assign(tslib_1.__assign({ color: semanticColors.errorText }, theme.fonts.small), { paddingTop: 5 }),
callout: [
globalClassnames.callout,
{
boxShadow: effects.elevation8,
borderRadius: calloutOpenBorderRadius,
selectors: (_k = {},
_k['.ms-Callout-main'] = { borderRadius: calloutOpenBorderRadius },
_k),
},
calloutClassName,
],
dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },
dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],
dropdownItem: tslib_1.__spreadArray(tslib_1.__spreadArray([], dropdownItemStyle, true), [itemSelectors()], false),
dropdownItemSelected: dropdownItemSelected,
dropdownItemDisabled: dropdownItemDisabled,
dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],
dropdownItemHidden: tslib_1.__spreadArray(tslib_1.__spreadArray([], dropdownItemStyle, true), [{ display: 'none' }], false),
dropdownDivider: [globalClassnames.dropdownDivider, { height: 1, backgroundColor: semanticColors.bodyDivider }],
dropdownDividerHidden: [globalClassnames.dropdownDivider, { display: 'none' }],
dropdownOptionText: [
globalClassnames.dropdownOptionText,
{
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
minWidth: 0,
maxWidth: '100%',
wordWrap: 'break-word',
overflowWrap: 'break-word',
margin: '1px',
},
],
dropdownItemHeader: dropdownHeaderStyle,
dropdownItemHeaderHidden: tslib_1.__spreadArray(tslib_1.__spreadArray([], dropdownHeaderStyle, true), [{ display: 'none' }], false),
subComponentStyles: {
label: { root: { display: 'inline-block' } },
multiSelectItem: {
root: {
padding: 0,
},
label: {
alignSelf: 'stretch',
padding: '0 8px',
width: '100%',
},
input: {
selectors: (_l = {},
// eslint-disable-next-line @fluentui/max-len
_l[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus + label::before, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus + label::before")] = {
outlineOffset: '0px',
},
_l),
},
},
panel: {
root: [panelClassName],
main: {
selectors: (_m = {},
// In case of extra small screen sizes
_m[MinimumScreenSelector] = {
// panelWidth xs
width: 272,
},
_m),
},
contentInner: { padding: '0 0 20px' },
},
},
};
};
exports.getStyles = getStyles;
});
//# sourceMappingURL=Dropdown.styles.js.map