206 lines
7.7 KiB
JavaScript
206 lines
7.7 KiB
JavaScript
'use client';
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
avatarGroupPopoverClassNames: function() {
|
|
return avatarGroupPopoverClassNames;
|
|
},
|
|
useAvatarGroupPopoverStyles_unstable: function() {
|
|
return useAvatarGroupPopoverStyles_unstable;
|
|
}
|
|
});
|
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
const _react = require("@griffel/react");
|
|
const _reacttheme = require("@fluentui/react-theme");
|
|
const _useAvatarGroupItemStylesstyles = require("../AvatarGroupItem/useAvatarGroupItemStyles.styles");
|
|
const _useAvatarStylesstyles = require("../Avatar/useAvatarStyles.styles");
|
|
const avatarGroupPopoverClassNames = {
|
|
root: 'fui-AvatarGroupPopover',
|
|
content: 'fui-AvatarGroupPopover__content',
|
|
popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',
|
|
tooltip: 'fui-AvatarGroupPopover__tooltip',
|
|
triggerButton: 'fui-AvatarGroupPopover__triggerButton'
|
|
};
|
|
/**
|
|
* Styles for the content slot.
|
|
*/ const useContentStyles = (0, _react.makeStyles)({
|
|
base: {
|
|
listStyleType: 'none',
|
|
margin: '0',
|
|
padding: '0',
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
}
|
|
});
|
|
/**
|
|
* Styles for the popoverSurface slot.
|
|
*/ const usePopoverSurfaceStyles = (0, _react.makeStyles)({
|
|
base: {
|
|
maxHeight: '220px',
|
|
minHeight: '80px',
|
|
overflow: 'hidden scroll',
|
|
padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS}`,
|
|
width: '220px'
|
|
}
|
|
});
|
|
/**
|
|
* Styles for the triggerButton slot.
|
|
*/ const useTriggerButtonStyles = (0, _react.makeStyles)({
|
|
base: {
|
|
display: 'inline-flex',
|
|
position: 'relative',
|
|
flexShrink: 0,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
|
|
borderRadius: _reacttheme.tokens.borderRadiusCircular,
|
|
..._react.shorthands.borderStyle('solid'),
|
|
padding: '0',
|
|
// Match color to Avatar's outline color.
|
|
'@media (forced-colors: active)': {
|
|
..._react.shorthands.borderColor('CanvasText')
|
|
}
|
|
},
|
|
pie: {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke),
|
|
color: 'transparent'
|
|
},
|
|
focusIndicator: (0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
border: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
|
|
outlineStyle: 'none'
|
|
}),
|
|
states: {
|
|
'&:hover': {
|
|
color: _reacttheme.tokens.colorNeutralForeground1Hover,
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover)
|
|
},
|
|
'&:active': {
|
|
color: _reacttheme.tokens.colorNeutralForeground1Pressed,
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed)
|
|
}
|
|
},
|
|
selected: {
|
|
color: _reacttheme.tokens.colorNeutralForeground1Selected,
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
|
|
},
|
|
icon12: {
|
|
fontSize: '12px'
|
|
},
|
|
icon16: {
|
|
fontSize: '16px'
|
|
},
|
|
icon20: {
|
|
fontSize: '20px'
|
|
},
|
|
icon24: {
|
|
fontSize: '24px'
|
|
},
|
|
icon28: {
|
|
fontSize: '28px'
|
|
},
|
|
icon32: {
|
|
fontSize: '32px'
|
|
},
|
|
icon48: {
|
|
fontSize: '48px'
|
|
},
|
|
caption2Strong: {
|
|
..._reacttheme.typographyStyles.caption2Strong
|
|
},
|
|
caption1Strong: {
|
|
..._reacttheme.typographyStyles.caption1Strong
|
|
},
|
|
body1Strong: {
|
|
..._reacttheme.typographyStyles.body1Strong
|
|
},
|
|
subtitle2: {
|
|
..._reacttheme.typographyStyles.subtitle2
|
|
},
|
|
subtitle1: {
|
|
..._reacttheme.typographyStyles.subtitle1
|
|
},
|
|
title3: {
|
|
..._reacttheme.typographyStyles.title3
|
|
},
|
|
borderThin: {
|
|
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin)
|
|
},
|
|
borderThick: {
|
|
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThick)
|
|
},
|
|
borderThicker: {
|
|
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThicker)
|
|
},
|
|
borderThickest: {
|
|
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThickest)
|
|
}
|
|
});
|
|
const useAvatarGroupPopoverStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const { indicator, size, layout, popoverOpen } = state;
|
|
const sizeStyles = (0, _useAvatarStylesstyles.useSizeStyles)();
|
|
const triggerButtonStyles = useTriggerButtonStyles();
|
|
const contentStyles = useContentStyles();
|
|
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
const groupChildClassName = (0, _useAvatarGroupItemStylesstyles.useGroupChildClassName)(layout, size);
|
|
const triggerButtonClasses = [];
|
|
if (size < 36) {
|
|
triggerButtonClasses.push(triggerButtonStyles.borderThin);
|
|
} else if (size < 56) {
|
|
triggerButtonClasses.push(triggerButtonStyles.borderThick);
|
|
} else if (size < 72) {
|
|
triggerButtonClasses.push(triggerButtonStyles.borderThicker);
|
|
} else {
|
|
triggerButtonClasses.push(triggerButtonStyles.borderThickest);
|
|
}
|
|
if (indicator === 'count') {
|
|
if (size <= 24) {
|
|
triggerButtonClasses.push(triggerButtonStyles.caption2Strong);
|
|
} else if (size <= 28) {
|
|
triggerButtonClasses.push(triggerButtonStyles.caption1Strong);
|
|
} else if (size <= 40) {
|
|
triggerButtonClasses.push(triggerButtonStyles.body1Strong);
|
|
} else if (size <= 56) {
|
|
triggerButtonClasses.push(triggerButtonStyles.subtitle2);
|
|
} else if (size <= 96) {
|
|
triggerButtonClasses.push(triggerButtonStyles.subtitle1);
|
|
} else {
|
|
triggerButtonClasses.push(triggerButtonStyles.title3);
|
|
}
|
|
} else {
|
|
if (size <= 16) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon12);
|
|
} else if (size <= 24) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon16);
|
|
} else if (size <= 40) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon20);
|
|
} else if (size <= 48) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon24);
|
|
} else if (size <= 56) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon28);
|
|
} else if (size <= 72) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon32);
|
|
} else {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon48);
|
|
}
|
|
}
|
|
state.triggerButton.className = (0, _react.mergeClasses)(avatarGroupPopoverClassNames.triggerButton, groupChildClassName, sizeStyles[size], triggerButtonStyles.base, layout === 'pie' && triggerButtonStyles.pie, triggerButtonStyles.focusIndicator, layout !== 'pie' && triggerButtonStyles.states, layout !== 'pie' && popoverOpen && triggerButtonStyles.selected, ...triggerButtonClasses, state.triggerButton.className);
|
|
state.content.className = (0, _react.mergeClasses)(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
|
|
state.popoverSurface.className = (0, _react.mergeClasses)(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
|
|
return state;
|
|
};
|