@fluentui/react
Version:
Reusable React components for building web experiences.
197 lines • 10.7 kB
JavaScript
define(["require", "exports", "../Divider/VerticalDivider.classNames", "./ContextualMenu.cnstyles", "../../Styling", "../../Utilities"], function (require, exports, VerticalDivider_classNames_1, ContextualMenu_cnstyles_1, Styling_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getItemStyles = exports.getItemClassNames = exports.getSplitButtonVerticalDividerClassNames = void 0;
var CONTEXTUAL_SPLIT_MENU_MINWIDTH = '28px';
var MediumScreenSelector = (0, Styling_1.getScreenSelector)(0, Styling_1.ScreenWidthMaxMedium);
exports.getSplitButtonVerticalDividerClassNames = (0, Utilities_1.memoizeFunction)(
/* eslint-disable deprecation/deprecation */
function (theme) {
var _a;
return (0, Styling_1.mergeStyleSets)((0, VerticalDivider_classNames_1.getDividerClassNames)(theme), {
/* eslint-enable deprecation/deprecation */
wrapper: {
position: 'absolute',
right: 28,
selectors: (_a = {},
_a[MediumScreenSelector] = {
right: 32, // fontSize of the icon increased from 12px to 16px
},
_a),
},
divider: {
height: 16,
width: 1,
},
});
});
var GlobalClassNames = {
item: 'ms-ContextualMenu-item',
divider: 'ms-ContextualMenu-divider',
root: 'ms-ContextualMenu-link',
isChecked: 'is-checked',
isExpanded: 'is-expanded',
isDisabled: 'is-disabled',
linkContent: 'ms-ContextualMenu-linkContent',
linkContentMenu: 'ms-ContextualMenu-linkContent',
icon: 'ms-ContextualMenu-icon',
iconColor: 'ms-ContextualMenu-iconColor',
checkmarkIcon: 'ms-ContextualMenu-checkmarkIcon',
subMenuIcon: 'ms-ContextualMenu-submenuIcon',
label: 'ms-ContextualMenu-itemText',
secondaryText: 'ms-ContextualMenu-secondaryText',
splitMenu: 'ms-ContextualMenu-splitMenu',
screenReaderText: 'ms-ContextualMenu-screenReaderText',
};
/**
* @deprecated Will be removed in \>= 7.0.
* This is a package-internal method that has been depended on.
* It is being kept in this form for backwards compatibility.
* @internal
*/
// TODO: Audit perf. impact of and potentially remove memoizeFunction.
// https://github.com/microsoft/fluentui/issues/5534
exports.getItemClassNames = (0, Utilities_1.memoizeFunction)(function (theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className) {
var _a, _b, _c, _d;
var styles = (0, ContextualMenu_cnstyles_1.getMenuItemStyles)(theme);
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
return (0, Styling_1.mergeStyleSets)({
item: [classNames.item, styles.item, itemClassName],
divider: [classNames.divider, styles.divider, dividerClassName],
root: [
classNames.root,
styles.root,
checked && [classNames.isChecked, styles.rootChecked],
isAnchorLink && styles.anchorLink,
expanded && [classNames.isExpanded, styles.rootExpanded],
disabled && [classNames.isDisabled, styles.rootDisabled],
!disabled &&
!expanded && [
{
selectors: (_a = {
':hover': styles.rootHovered,
':active': styles.rootPressed
},
// eslint-disable-next-line @fluentui/max-len
_a[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, .").concat(Utilities_1.IsFocusVisibleClassName, " &:focus:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus:hover")] = styles.rootFocused,
_a[".".concat(Utilities_1.IsFocusVisibleClassName, " &:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:hover")] = {
background: 'inherit;',
},
_a),
},
],
className,
],
splitPrimary: [
styles.root,
{
width: "calc(100% - ".concat(CONTEXTUAL_SPLIT_MENU_MINWIDTH, ")"),
},
checked && ['is-checked', styles.rootChecked],
(disabled || primaryDisabled) && ['is-disabled', styles.rootDisabled],
!(disabled || primaryDisabled) &&
!checked && [
{
selectors: (_b = {
':hover': styles.rootHovered
},
// when hovering over the splitPrimary also affect the splitMenu
_b[":hover ~ .".concat(classNames.splitMenu)] = styles.rootHovered,
_b[':active'] = styles.rootPressed,
// eslint-disable-next-line @fluentui/max-len
_b[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, .").concat(Utilities_1.IsFocusVisibleClassName, " &:focus:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus:hover")] = styles.rootFocused,
_b[".".concat(Utilities_1.IsFocusVisibleClassName, " &:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:hover")] = {
background: 'inherit;',
},
_b),
},
],
],
splitMenu: [
classNames.splitMenu,
styles.root,
{
flexBasis: '0',
padding: '0 8px',
minWidth: CONTEXTUAL_SPLIT_MENU_MINWIDTH,
},
expanded && ['is-expanded', styles.rootExpanded],
disabled && ['is-disabled', styles.rootDisabled],
!disabled &&
!expanded && [
{
selectors: (_c = {
':hover': styles.rootHovered,
':active': styles.rootPressed
},
// eslint-disable-next-line @fluentui/max-len
_c[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, .").concat(Utilities_1.IsFocusVisibleClassName, " &:focus:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus:hover")] = styles.rootFocused,
_c[".".concat(Utilities_1.IsFocusVisibleClassName, " &:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:hover")] = {
background: 'inherit;',
},
_c),
},
],
],
anchorLink: styles.anchorLink,
linkContent: [classNames.linkContent, styles.linkContent],
linkContentMenu: [
classNames.linkContentMenu,
styles.linkContent,
{
justifyContent: 'center',
},
],
icon: [
classNames.icon,
knownIcon && styles.iconColor,
styles.icon,
iconClassName,
disabled && [classNames.isDisabled, styles.iconDisabled],
],
iconColor: styles.iconColor,
checkmarkIcon: [classNames.checkmarkIcon, knownIcon && styles.checkmarkIcon, styles.icon, iconClassName],
subMenuIcon: [
classNames.subMenuIcon,
styles.subMenuIcon,
subMenuClassName,
expanded && { color: theme.palette.neutralPrimary },
disabled && [styles.iconDisabled],
],
label: [classNames.label, styles.label],
secondaryText: [classNames.secondaryText, styles.secondaryText],
splitContainer: [
styles.splitButtonFlexContainer,
!disabled &&
!checked && [
{
selectors: (_d = {},
// eslint-disable-next-line @fluentui/max-len
_d[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, .").concat(Utilities_1.IsFocusVisibleClassName, " &:focus:hover, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus:hover")] = styles.rootFocused,
_d),
},
],
],
screenReaderText: [
classNames.screenReaderText,
styles.screenReaderText,
Styling_1.hiddenContentStyle,
{ visibility: 'hidden' },
],
});
});
/**
* Wrapper function for generating ContextualMenuItem classNames which adheres to
* the getStyles API, but invokes memoized className generator function with
* primitive values.
*
* @param props - the ContextualMenuItem style props used to generate its styles.
*/
var getItemStyles = function (props) {
var theme = props.theme, disabled = props.disabled, expanded = props.expanded, checked = props.checked, isAnchorLink = props.isAnchorLink, knownIcon = props.knownIcon, itemClassName = props.itemClassName, dividerClassName = props.dividerClassName, iconClassName = props.iconClassName, subMenuClassName = props.subMenuClassName, primaryDisabled = props.primaryDisabled, className = props.className;
// eslint-disable-next-line deprecation/deprecation
return (0, exports.getItemClassNames)(theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className);
};
exports.getItemStyles = getItemStyles;
});
//# sourceMappingURL=ContextualMenu.classNames.js.map