@fluentui/react-avatar 9.8.7 → 9.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -2
- package/lib/Avatar.js.map +1 -1
- package/lib/AvatarGroup.js.map +1 -1
- package/lib/AvatarGroupItem.js.map +1 -1
- package/lib/AvatarGroupPopover.js.map +1 -1
- package/lib/components/Avatar/Avatar.js.map +1 -1
- package/lib/components/Avatar/Avatar.types.js.map +1 -1
- package/lib/components/Avatar/index.js.map +1 -1
- package/lib/components/Avatar/renderAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatarStyles.styles.raw.js +702 -0
- package/lib/components/Avatar/useAvatarStyles.styles.raw.js.map +1 -0
- package/lib/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
- package/lib/components/AvatarGroup/index.js.map +1 -1
- package/lib/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js +31 -0
- package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js.map +1 -0
- package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.types.js.map +1 -1
- package/lib/components/AvatarGroupItem/index.js.map +1 -1
- package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js +266 -0
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js.map +1 -0
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map +1 -1
- package/lib/components/AvatarGroupPopover/index.js.map +1 -1
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js +188 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js.map +1 -0
- package/lib/contexts/AvatarContext.js.map +1 -1
- package/lib/contexts/AvatarGroupContext.js.map +1 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/getInitials.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/partitionAvatarGroupItems.js.map +1 -1
- package/lib-commonjs/Avatar.js.map +1 -1
- package/lib-commonjs/AvatarGroup.js.map +1 -1
- package/lib-commonjs/AvatarGroupItem.js.map +1 -1
- package/lib-commonjs/AvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/Avatar/Avatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/Avatar.types.js.map +1 -1
- package/lib-commonjs/components/Avatar/index.js.map +1 -1
- package/lib-commonjs/components/Avatar/renderAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.styles.raw.js +723 -0
- package/lib-commonjs/components/Avatar/useAvatarStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js +47 -0
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.types.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/renderAvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js +282 -0
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js +204 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/contexts/AvatarContext.js.map +1 -1
- package/lib-commonjs/contexts/AvatarGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/getInitials.js.map +1 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/partitionAvatarGroupItems.js.map +1 -1
- package/package.json +8 -8
|
@@ -0,0 +1,282 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
avatarGroupItemClassNames: function() {
|
|
13
|
+
return avatarGroupItemClassNames;
|
|
14
|
+
},
|
|
15
|
+
useAvatarGroupItemStyles_unstable: function() {
|
|
16
|
+
return useAvatarGroupItemStyles_unstable;
|
|
17
|
+
},
|
|
18
|
+
useGroupChildClassName: function() {
|
|
19
|
+
return useGroupChildClassName;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
const _react = require("@griffel/react");
|
|
23
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
24
|
+
const _Avatar = require("../../Avatar");
|
|
25
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
26
|
+
const avatarGroupItemClassNames = {
|
|
27
|
+
root: 'fui-AvatarGroupItem',
|
|
28
|
+
avatar: 'fui-AvatarGroupItem__avatar',
|
|
29
|
+
overflowLabel: 'fui-AvatarGroupItem__overflowLabel'
|
|
30
|
+
};
|
|
31
|
+
const avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';
|
|
32
|
+
/**
|
|
33
|
+
* Styles for the root slot
|
|
34
|
+
*/ const useRootStyles = (0, _react.makeStyles)({
|
|
35
|
+
base: {
|
|
36
|
+
alignItems: 'center',
|
|
37
|
+
display: 'inline-flex',
|
|
38
|
+
flexShrink: 0,
|
|
39
|
+
position: 'relative'
|
|
40
|
+
},
|
|
41
|
+
overflowItem: {
|
|
42
|
+
padding: `${_reacttheme.tokens.spacingVerticalXS} ${_reacttheme.tokens.spacingHorizontalXS}`
|
|
43
|
+
},
|
|
44
|
+
nonOverflowItem: {
|
|
45
|
+
borderRadius: _reacttheme.tokens.borderRadiusCircular
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
/**
|
|
49
|
+
* Styles for the avatar slot
|
|
50
|
+
*/ const useAvatarStyles = (0, _react.makeStyles)({
|
|
51
|
+
nonOverflowItem: {
|
|
52
|
+
position: 'absolute'
|
|
53
|
+
},
|
|
54
|
+
pie: {
|
|
55
|
+
borderRadius: '0'
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
/**
|
|
59
|
+
* Styles for the label slot
|
|
60
|
+
*/ const useOverflowLabelStyles = (0, _react.makeStyles)({
|
|
61
|
+
base: {
|
|
62
|
+
marginLeft: _reacttheme.tokens.spacingHorizontalS,
|
|
63
|
+
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
64
|
+
..._reacttheme.typographyStyles.body1
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
/**
|
|
68
|
+
* Styles for the stack layout
|
|
69
|
+
*/ const useStackStyles = (0, _react.makeStyles)({
|
|
70
|
+
thick: {
|
|
71
|
+
boxShadow: `0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorNeutralBackground2}`
|
|
72
|
+
},
|
|
73
|
+
thicker: {
|
|
74
|
+
boxShadow: `0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorNeutralBackground2}`
|
|
75
|
+
},
|
|
76
|
+
thickest: {
|
|
77
|
+
boxShadow: `0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorNeutralBackground2}`
|
|
78
|
+
},
|
|
79
|
+
xxs: {
|
|
80
|
+
'&:not(:first-child)': {
|
|
81
|
+
marginLeft: `calc(-1 * ${_reacttheme.tokens.spacingHorizontalXXS})`
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
xs: {
|
|
85
|
+
'&:not(:first-child)': {
|
|
86
|
+
marginLeft: `calc(-1 * ${_reacttheme.tokens.spacingHorizontalXS})`
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
s: {
|
|
90
|
+
'&:not(:first-child)': {
|
|
91
|
+
marginLeft: `calc(-1 * ${_reacttheme.tokens.spacingHorizontalS})`
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
l: {
|
|
95
|
+
'&:not(:first-child)': {
|
|
96
|
+
marginLeft: `calc(-1 * ${_reacttheme.tokens.spacingHorizontalL})`
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
/**
|
|
101
|
+
* Styles for the spread layout
|
|
102
|
+
*/ const useSpreadStyles = (0, _react.makeStyles)({
|
|
103
|
+
s: {
|
|
104
|
+
'&:not(:first-child)': {
|
|
105
|
+
marginLeft: _reacttheme.tokens.spacingHorizontalS
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
mNudge: {
|
|
109
|
+
'&:not(:first-child)': {
|
|
110
|
+
marginLeft: _reacttheme.tokens.spacingHorizontalMNudge
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
m: {
|
|
114
|
+
'&:not(:first-child)': {
|
|
115
|
+
marginLeft: _reacttheme.tokens.spacingHorizontalM
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
l: {
|
|
119
|
+
'&:not(:first-child)': {
|
|
120
|
+
marginLeft: _reacttheme.tokens.spacingHorizontalL
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
xl: {
|
|
124
|
+
'&:not(:first-child)': {
|
|
125
|
+
marginLeft: _reacttheme.tokens.spacingHorizontalXL
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
/**
|
|
130
|
+
* Styles for the pie layout
|
|
131
|
+
*/ const usePieStyles = (0, _react.makeStyles)({
|
|
132
|
+
base: {
|
|
133
|
+
position: 'absolute'
|
|
134
|
+
},
|
|
135
|
+
slices: {
|
|
136
|
+
// Two slices
|
|
137
|
+
// 1st of 2 items
|
|
138
|
+
'&:nth-of-type(1):nth-last-of-type(2)': {
|
|
139
|
+
clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,
|
|
140
|
+
left: '-25%'
|
|
141
|
+
},
|
|
142
|
+
// 2nd of 2 items
|
|
143
|
+
'&:nth-of-type(2):nth-last-of-type(1)': {
|
|
144
|
+
clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,
|
|
145
|
+
left: '25%'
|
|
146
|
+
},
|
|
147
|
+
// Three slices
|
|
148
|
+
// 1st of 3 items
|
|
149
|
+
'&:nth-of-type(1):nth-last-of-type(3)': {
|
|
150
|
+
clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,
|
|
151
|
+
left: '-25%'
|
|
152
|
+
},
|
|
153
|
+
// 2nd of 3 items
|
|
154
|
+
'&:nth-of-type(2):nth-last-of-type(2)': {
|
|
155
|
+
// Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.
|
|
156
|
+
clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,
|
|
157
|
+
left: '50%',
|
|
158
|
+
transform: 'scale(0.5)',
|
|
159
|
+
transformOrigin: '0 0'
|
|
160
|
+
},
|
|
161
|
+
// 3rd of 3 items
|
|
162
|
+
'&:nth-of-type(3):nth-last-of-type(1)': {
|
|
163
|
+
clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,
|
|
164
|
+
left: '50%',
|
|
165
|
+
top: '50%',
|
|
166
|
+
transform: 'scale(0.5)',
|
|
167
|
+
transformOrigin: '0 0'
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
rtlSlices: {
|
|
171
|
+
// Two slices
|
|
172
|
+
// 1st of 2 items
|
|
173
|
+
'&:nth-of-type(1):nth-last-of-type(2)': {
|
|
174
|
+
clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`
|
|
175
|
+
},
|
|
176
|
+
// 2nd of 2 items
|
|
177
|
+
'&:nth-of-type(2):nth-last-of-type(1)': {
|
|
178
|
+
clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`
|
|
179
|
+
},
|
|
180
|
+
// Three slices
|
|
181
|
+
// 1st of 3 items
|
|
182
|
+
'&:nth-of-type(1):nth-last-of-type(3)': {
|
|
183
|
+
clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`
|
|
184
|
+
},
|
|
185
|
+
// 2nd of 3 items
|
|
186
|
+
'&:nth-of-type(2):nth-last-of-type(2)': {
|
|
187
|
+
clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,
|
|
188
|
+
left: '0'
|
|
189
|
+
},
|
|
190
|
+
// 3rd of 3 items
|
|
191
|
+
'&:nth-of-type(3):nth-last-of-type(1)': {
|
|
192
|
+
clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,
|
|
193
|
+
left: '0'
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
thick: {
|
|
197
|
+
[avatarGroupItemDividerWidthVar]: _reacttheme.tokens.strokeWidthThick
|
|
198
|
+
},
|
|
199
|
+
thicker: {
|
|
200
|
+
[avatarGroupItemDividerWidthVar]: _reacttheme.tokens.strokeWidthThicker
|
|
201
|
+
},
|
|
202
|
+
thickest: {
|
|
203
|
+
[avatarGroupItemDividerWidthVar]: _reacttheme.tokens.strokeWidthThickest
|
|
204
|
+
}
|
|
205
|
+
});
|
|
206
|
+
const useAvatarGroupItemStyles_unstable = (state)=>{
|
|
207
|
+
'use no memo';
|
|
208
|
+
const { isOverflowItem, layout, size } = state;
|
|
209
|
+
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
210
|
+
const avatarStyles = useAvatarStyles();
|
|
211
|
+
const overflowLabelStyles = useOverflowLabelStyles();
|
|
212
|
+
const pieStyles = usePieStyles();
|
|
213
|
+
const rootStyles = useRootStyles();
|
|
214
|
+
const sizeStyles = (0, _Avatar.useSizeStyles)();
|
|
215
|
+
const groupChildClassName = useGroupChildClassName(layout, size);
|
|
216
|
+
const rootClasses = [
|
|
217
|
+
rootStyles.base
|
|
218
|
+
];
|
|
219
|
+
if (!isOverflowItem) {
|
|
220
|
+
rootClasses.push(rootStyles.nonOverflowItem);
|
|
221
|
+
rootClasses.push(groupChildClassName);
|
|
222
|
+
rootClasses.push(sizeStyles[size]);
|
|
223
|
+
if (layout === 'pie') {
|
|
224
|
+
rootClasses.push(pieStyles.base);
|
|
225
|
+
if (size < 56) {
|
|
226
|
+
rootClasses.push(pieStyles.thick);
|
|
227
|
+
} else if (size < 72) {
|
|
228
|
+
rootClasses.push(pieStyles.thicker);
|
|
229
|
+
} else {
|
|
230
|
+
rootClasses.push(pieStyles.thickest);
|
|
231
|
+
}
|
|
232
|
+
rootClasses.push(pieStyles.slices);
|
|
233
|
+
if (dir === 'rtl') {
|
|
234
|
+
rootClasses.push(pieStyles.rtlSlices);
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
} else {
|
|
238
|
+
rootClasses.push(rootStyles.overflowItem);
|
|
239
|
+
}
|
|
240
|
+
state.root.className = (0, _react.mergeClasses)(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);
|
|
241
|
+
state.avatar.className = (0, _react.mergeClasses)(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);
|
|
242
|
+
if (state.overflowLabel) {
|
|
243
|
+
state.overflowLabel.className = (0, _react.mergeClasses)(avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);
|
|
244
|
+
}
|
|
245
|
+
return state;
|
|
246
|
+
};
|
|
247
|
+
const useGroupChildClassName = (layout, size)=>{
|
|
248
|
+
const stackStyles = useStackStyles();
|
|
249
|
+
const spreadStyles = useSpreadStyles();
|
|
250
|
+
const layoutClasses = [];
|
|
251
|
+
if (size) {
|
|
252
|
+
if (layout === 'stack') {
|
|
253
|
+
if (size < 56) {
|
|
254
|
+
layoutClasses.push(stackStyles.thick);
|
|
255
|
+
} else if (size < 72) {
|
|
256
|
+
layoutClasses.push(stackStyles.thicker);
|
|
257
|
+
} else {
|
|
258
|
+
layoutClasses.push(stackStyles.thickest);
|
|
259
|
+
}
|
|
260
|
+
if (size < 24) {
|
|
261
|
+
layoutClasses.push(stackStyles.xxs);
|
|
262
|
+
} else if (size < 48) {
|
|
263
|
+
layoutClasses.push(stackStyles.xs);
|
|
264
|
+
} else if (size < 96) {
|
|
265
|
+
layoutClasses.push(stackStyles.s);
|
|
266
|
+
} else {
|
|
267
|
+
layoutClasses.push(stackStyles.l);
|
|
268
|
+
}
|
|
269
|
+
} else if (layout === 'spread') {
|
|
270
|
+
if (size < 20) {
|
|
271
|
+
layoutClasses.push(spreadStyles.s);
|
|
272
|
+
} else if (size < 32) {
|
|
273
|
+
layoutClasses.push(spreadStyles.mNudge);
|
|
274
|
+
} else if (size < 64) {
|
|
275
|
+
layoutClasses.push(spreadStyles.l);
|
|
276
|
+
} else {
|
|
277
|
+
layoutClasses.push(spreadStyles.xl);
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
return (0, _react.mergeClasses)(...layoutClasses);
|
|
282
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative',\n },\n overflowItem: { padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}` },\n nonOverflowItem: { borderRadius: tokens.borderRadiusCircular },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute',\n },\n pie: { borderRadius: '0' },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n },\n xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n base: {\n position: 'absolute',\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%',\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n },\n rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '0',\n },\n },\n thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n 'use no memo';\n\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size);\n\n const rootClasses = [rootStyles.base];\n\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n\n rootClasses.push(pieStyles.slices);\n\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n state.avatar.className = mergeClasses(\n avatarGroupItemClassNames.avatar,\n !isOverflowItem && avatarStyles.nonOverflowItem,\n layout === 'pie' && avatarStyles.pie,\n state.avatar.className,\n );\n\n if (state.overflowLabel) {\n state.overflowLabel.className = mergeClasses(\n avatarGroupItemClassNames.overflowLabel,\n overflowLabelStyles.base,\n state.overflowLabel.className,\n );\n }\n\n return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\n if (size < 56) {\n layoutClasses.push(stackStyles.thick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.thicker);\n } else {\n layoutClasses.push(stackStyles.thickest);\n }\n\n if (size < 24) {\n layoutClasses.push(stackStyles.xxs);\n } else if (size < 48) {\n layoutClasses.push(stackStyles.xs);\n } else if (size < 96) {\n layoutClasses.push(stackStyles.s);\n } else {\n layoutClasses.push(stackStyles.l);\n }\n } else if (layout === 'spread') {\n if (size < 20) {\n layoutClasses.push(spreadStyles.s);\n } else if (size < 32) {\n layoutClasses.push(spreadStyles.mNudge);\n } else if (size < 64) {\n layoutClasses.push(spreadStyles.l);\n } else {\n layoutClasses.push(spreadStyles.xl);\n }\n }\n }\n\n return mergeClasses(...layoutClasses);\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","base","alignItems","display","flexShrink","position","overflowItem","padding","spacingVerticalXS","spacingHorizontalXS","nonOverflowItem","borderRadius","borderRadiusCircular","useAvatarStyles","pie","useOverflowLabelStyles","marginLeft","spacingHorizontalS","color","colorNeutralForeground1","body1","useStackStyles","thick","boxShadow","strokeWidthThick","colorNeutralBackground2","thicker","strokeWidthThicker","thickest","strokeWidthThickest","xxs","spacingHorizontalXXS","xs","s","l","spacingHorizontalL","useSpreadStyles","mNudge","spacingHorizontalMNudge","m","spacingHorizontalM","xl","spacingHorizontalXL","usePieStyles","slices","clipPath","left","transform","transformOrigin","top","rtlSlices","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","stackStyles","spreadStyles","layoutClasses"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n const state = useAvatarGroupPopover_unstable(props);\n const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n useAvatarGroupPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n const state = useAvatarGroupPopover_unstable(props);\n const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n useAvatarGroupPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":";;;;+BAWaM;;;;;;;iEAXU,QAAQ;0CACmB,6BAA6B;oDACnB,uCAAuC;qCACvD,kCAAkC;uCAC/B,0BAA0B;mDACpB,uCAAuC;AAMrF,2BAA8DC,CAAAA;IACnE,MAAMC,YAAQJ,qDAAAA,EAA+BG;IAC7C,MAAME,oBAAgBP,+EAAAA,EAA4CM;QAElEH,uEAAAA,EAAqCG;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOP,2DAAAA,EAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n root: NonNullable<Slot<PopoverProps>>;\n\n /**\n * Button that triggers the Popover.\n */\n triggerButton: NonNullable<Slot<'button'>>;\n\n /**\n * List that contains the overflowed AvatarGroupItems.\n */\n content: NonNullable<Slot<'ul'>>;\n\n /**\n * PopoverSurface that contains the content.\n */\n popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n /**\n * Tooltip shown when triggerButton is hovered.\n */\n tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n /**\n * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n * Note: The indicator will default to `icon` when the size is less than 24.\n * @default count\n */\n indicator?: 'count' | 'icon';\n\n /**\n * Number of AvatarGroupItems that will be rendered.\n *\n * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n * children, this is not possible and therefore it has do be added manually.\n */\n count?: number;\n\n children: React.ReactNode;\n};\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n popoverOpen: boolean;\n layout: AvatarGroupProps['layout'];\n size: AvatarSize;\n };\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n root: NonNullable<Slot<PopoverProps>>;\n\n /**\n * Button that triggers the Popover.\n */\n triggerButton: NonNullable<Slot<'button'>>;\n\n /**\n * List that contains the overflowed AvatarGroupItems.\n */\n content: NonNullable<Slot<'ul'>>;\n\n /**\n * PopoverSurface that contains the content.\n */\n popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n /**\n * Tooltip shown when triggerButton is hovered.\n */\n tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n /**\n * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n * Note: The indicator will default to `icon` when the size is less than 24.\n * @default count\n */\n indicator?: 'count' | 'icon';\n\n /**\n * Number of AvatarGroupItems that will be rendered.\n *\n * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n * children, this is not possible and therefore it has do be added manually.\n */\n count?: number;\n\n children: React.ReactNode;\n};\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n popoverOpen: boolean;\n layout: AvatarGroupProps['layout'];\n size: AvatarSize;\n };\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export { AvatarGroupPopover } from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nexport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nexport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nexport {\n avatarGroupPopoverClassNames,\n useAvatarGroupPopoverStyles_unstable,\n} from './useAvatarGroupPopoverStyles.styles';\nexport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\n"],"names":["AvatarGroupPopover","
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export { AvatarGroupPopover } from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nexport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nexport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nexport {\n avatarGroupPopoverClassNames,\n useAvatarGroupPopoverStyles_unstable,\n} from './useAvatarGroupPopoverStyles.styles';\nexport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\n"],"names":["AvatarGroupPopover","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","avatarGroupPopoverClassNames","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,sCAAkB;;;eASzBG,+DAA4B;;;eAHrBF,2DAAiC;;;eAMjCI,+EAA2C;;;eAFlDD,uEAAoC;;;eAH7BF,qDAA8B;;;oCAPJ,uBAAuB;0CAMR,6BAA6B;uCAChC,0BAA0B;mDAIlE,uCAAuC;oDACc,uCAAuC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverState,\n contextValues: AvatarGroupContextValues,\n) => {\n assertSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <state.root>\n <PopoverTrigger disableButtonEnhancement>\n <state.tooltip>\n <state.triggerButton />\n </state.tooltip>\n </PopoverTrigger>\n <state.popoverSurface>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.content />\n </AvatarGroupProvider>\n </state.popoverSurface>\n </state.root>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverState,\n contextValues: AvatarGroupContextValues,\n) => {\n assertSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <state.root>\n <PopoverTrigger disableButtonEnhancement>\n <state.tooltip>\n <state.triggerButton />\n </state.tooltip>\n </PopoverTrigger>\n <state.popoverSurface>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.content />\n </AvatarGroupProvider>\n </state.popoverSurface>\n </state.root>\n );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":";;;;+BAYaG;;;;;;4BAXb,iCAAiD;oCACb,oCAAoC;gCAG5C,4BAA4B;8BACzB,0BAA0B;AAMlD,0CAA0C,CAC/CC,OACAC;QAEAJ,2BAAAA,EAAqCG;IAErC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACJ,4BAAAA,EAAAA;gBAAeK,wBAAwB,EAAA;0BACtC,WAAA,OAAA,eAAA,EAACH,MAAMI,OAAO,EAAA;8BACZ,WAAA,OAAA,eAAA,EAACJ,MAAMK,aAAa,EAAA,CAAA;;;8BAGxB,eAAA,EAACL,MAAMM,cAAc,EAAA;0BACnB,WAAA,GAAA,mBAAA,EAACV,uCAAAA,EAAAA;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,WAAA,OAAA,eAAA,EAACR,MAAMS,OAAO,EAAA,CAAA;;;;;AAKxB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n const {\n indicator = size < 24 ? 'icon' : 'count',\n count = React.Children.count(props.children),\n children,\n ...restOfProps\n } = props;\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n restOfProps.onOpenChange?.(e, data);\n setPopoverOpen(data.open);\n };\n\n let triggerButtonChildren;\n if (layout === 'pie') {\n triggerButtonChildren = null;\n } else if (indicator === 'icon') {\n triggerButtonChildren = <MoreHorizontalRegular />;\n } else {\n triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n }\n\n return {\n count,\n indicator,\n layout,\n popoverOpen,\n size,\n\n components: {\n root: Popover,\n triggerButton: 'button',\n content: 'ul',\n popoverSurface: PopoverSurface,\n tooltip: Tooltip,\n },\n root: slot.always(\n {\n // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n children: <></>,\n size: 'small',\n trapFocus: true,\n ...restOfProps,\n open: popoverOpen,\n onOpenChange: handleOnPopoverChange,\n },\n { elementType: Popover },\n ),\n triggerButton: slot.always(props.triggerButton, {\n defaultProps: {\n children: triggerButtonChildren,\n type: 'button',\n },\n elementType: 'button',\n }),\n content: slot.always(props.content, {\n defaultProps: {\n children,\n role: 'list',\n },\n elementType: 'ul',\n }),\n popoverSurface: slot.always(props.popoverSurface, {\n defaultProps: {\n 'aria-label': 'Overflow',\n tabIndex: 0,\n },\n elementType: PopoverSurface,\n }),\n tooltip: slot.always(props.tooltip, {\n defaultProps: {\n content: 'View more people.',\n relationship: 'label',\n },\n elementType: Tooltip,\n }),\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n const {\n indicator = size < 24 ? 'icon' : 'count',\n count = React.Children.count(props.children),\n children,\n ...restOfProps\n } = props;\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n restOfProps.onOpenChange?.(e, data);\n setPopoverOpen(data.open);\n };\n\n let triggerButtonChildren;\n if (layout === 'pie') {\n triggerButtonChildren = null;\n } else if (indicator === 'icon') {\n triggerButtonChildren = <MoreHorizontalRegular />;\n } else {\n triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n }\n\n return {\n count,\n indicator,\n layout,\n popoverOpen,\n size,\n\n components: {\n root: Popover,\n triggerButton: 'button',\n content: 'ul',\n popoverSurface: PopoverSurface,\n tooltip: Tooltip,\n },\n root: slot.always(\n {\n // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n children: <></>,\n size: 'small',\n trapFocus: true,\n ...restOfProps,\n open: popoverOpen,\n onOpenChange: handleOnPopoverChange,\n },\n { elementType: Popover },\n ),\n triggerButton: slot.always(props.triggerButton, {\n defaultProps: {\n children: triggerButtonChildren,\n type: 'button',\n },\n elementType: 'button',\n }),\n content: slot.always(props.content, {\n defaultProps: {\n children,\n role: 'list',\n },\n elementType: 'ul',\n }),\n popoverSurface: slot.always(props.popoverSurface, {\n defaultProps: {\n 'aria-label': 'Overflow',\n tabIndex: 0,\n },\n elementType: PopoverSurface,\n }),\n tooltip: slot.always(props.tooltip, {\n defaultProps: {\n content: 'View more people.',\n relationship: 'label',\n },\n elementType: Tooltip,\n }),\n };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","count","Children","children","restOfProps","popoverOpen","setPopoverOpen","state","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","components","root","triggerButton","content","popoverSurface","tooltip","always","trapFocus","elementType","defaultProps","type","role","tabIndex","relationship"],"mappings":";;;;+BAiBaS;;;;;;;iEAjBU,QAAQ;oCACgB,oCAAoC;gCAC5C,gCAAgC;gCAC5B,4BAA4B;4BACjC,wBAAwB;8BACe,0BAA0B;8BAE/E,0BAA0B;AAU3C,uCAAuC,CAACC;QAChCT;IAAb,MAAMU,OAAOV,CAAAA,sCAAAA,kDAAAA,EAA+BW,CAAAA,MAAOA,IAAID,KAAI,MAAA,QAA9CV,oCAAAA,KAAAA,IAAAA,kCAAmDC,sCAAAA;IAChE,MAAMW,aAASZ,kDAAAA,EAA+BW,CAAAA,MAAOA,IAAIC,MAAM;IAC/D,MAAM,EACJC,YAAYH,OAAO,KAAK,SAAS,OAAO,EACxCI,QAAQf,OAAMgB,QAAQ,CAACD,KAAK,CAACL,MAAMO,QAAQ,CAAC,EAC5CA,QAAQ,EACR,GAAGC,aACJ,GAAGR;IAEJ,MAAM,CAACS,aAAaC,eAAe,OAAGjB,oCAAAA,EAAqB;QACzDkB,OAAOX,MAAMY,IAAI;QACjBC,cAAcb,MAAMc,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,wBAAwB,CAACC,GAAsBC;YACnDV;SAAAA,4BAAAA,YAAYW,YAAAA,AAAY,MAAA,QAAxBX,8BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,0BAAAA,IAAAA,CAAAA,aAA2BS,GAAGC;QAC9BR,eAAeQ,KAAKN,IAAI;IAC1B;IAEA,IAAIQ;IACJ,IAAIjB,WAAW,OAAO;QACpBiB,wBAAwB;IAC1B,OAAO,IAAIhB,cAAc,QAAQ;QAC/BgB,wBAAAA,WAAAA,GAAwB,OAAA,aAAA,CAACzB,iCAAAA,EAAAA;IAC3B,OAAO;QACLyB,wBAAwBf,QAAQ,KAAK,QAAQ,CAAC,CAAC,EAAEA,OAAO;IAC1D;IAEA,OAAO;QACLA;QACAD;QACAD;QACAM;QACAR;QAEAoB,YAAY;YACVC,MAAM1B,qBAAAA;YACN2B,eAAe;YACfC,SAAS;YACTC,gBAAgB5B,4BAAAA;YAChB6B,SAAS5B,qBAAAA;QACX;QACAwB,MAAM5B,oBAAAA,CAAKiC,MAAM,CACf;YACE,oGAAoG;YACpGpB,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAA,OAAA,QAAA,EAAA;YACVN,MAAM;YACN2B,WAAW;YACX,GAAGpB,WAAW;YACdI,MAAMH;YACNU,cAAcH;QAChB,GACA;YAAEa,aAAajC,qBAAAA;QAAQ;QAEzB2B,eAAe7B,oBAAAA,CAAKiC,MAAM,CAAC3B,MAAMuB,aAAa,EAAE;YAC9CO,cAAc;gBACZvB,UAAUa;gBACVW,MAAM;YACR;YACAF,aAAa;QACf;QACAL,SAAS9B,oBAAAA,CAAKiC,MAAM,CAAC3B,MAAMwB,OAAO,EAAE;YAClCM,cAAc;gBACZvB;gBACAyB,MAAM;YACR;YACAH,aAAa;QACf;QACAJ,gBAAgB/B,oBAAAA,CAAKiC,MAAM,CAAC3B,MAAMyB,cAAc,EAAE;YAChDK,cAAc;gBACZ,cAAc;gBACdG,UAAU;YACZ;YACAJ,aAAahC,4BAAAA;QACf;QACA6B,SAAShC,oBAAAA,CAAKiC,MAAM,CAAC3B,MAAM0B,OAAO,EAAE;YAClCI,cAAc;gBACZN,SAAS;gBACTU,cAAc;YAChB;YACAL,aAAa/B,qBAAAA;QACf;IACF;AACF,EAAE"}
|
package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues_unstable = (\n state: AvatarGroupPopoverState,\n): AvatarGroupContextValues => {\n const avatarGroup: AvatarGroupContextValue = {\n isOverflow: true,\n size: 24,\n };\n\n return { avatarGroup };\n};\n"],"names":["useAvatarGroupPopoverContextValues_unstable","state","avatarGroup","isOverflow","size"],"
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues_unstable = (\n state: AvatarGroupPopoverState,\n): AvatarGroupContextValues => {\n const avatarGroup: AvatarGroupContextValue = {\n isOverflow: true,\n size: 24,\n };\n\n return { avatarGroup };\n};\n"],"names":["useAvatarGroupPopoverContextValues_unstable","state","avatarGroup","isOverflow","size"],"mappings":";;;;;;;;;;AAGO,MAAMA,8CAA8C,CACzDC;IAEA,MAAMC,cAAuC;QAC3CC,YAAY;QACZC,MAAM;IACR;IAEA,OAAO;QAAEF;IAAY;AACvB,EAAE"}
|
package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAvatarGroupPopoverStyles.styles.js"],"sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupPopoverClassNames = {\n root: 'fui-AvatarGroupPopover',\n content: 'fui-AvatarGroupPopover__content',\n popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',\n tooltip: 'fui-AvatarGroupPopover__tooltip',\n triggerButton: 'fui-AvatarGroupPopover__triggerButton'\n};\n/**\n * Styles for the content slot.\n */ const useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n flexDirection: 'column'\n }\n});\n/**\n * Styles for the popoverSurface slot.\n */ const usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n overflow: 'hidden scroll',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n width: '220px'\n }\n});\n/**\n * Styles for the triggerButton slot.\n */ const useTriggerButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusCircular,\n ...shorthands.borderStyle('solid'),\n padding: '0',\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText')\n }\n },\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent'\n },\n focusIndicator: createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineStyle: 'none'\n }),\n states: {\n '&:hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n },\n '&:active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n }\n },\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n icon12: {\n fontSize: '12px'\n },\n icon16: {\n fontSize: '16px'\n },\n icon20: {\n fontSize: '20px'\n },\n icon24: {\n fontSize: '24px'\n },\n icon28: {\n fontSize: '28px'\n },\n icon32: {\n fontSize: '32px'\n },\n icon48: {\n fontSize: '48px'\n },\n caption2Strong: {\n ...typographyStyles.caption2Strong\n },\n caption1Strong: {\n ...typographyStyles.caption1Strong\n },\n body1Strong: {\n ...typographyStyles.body1Strong\n },\n subtitle2: {\n ...typographyStyles.subtitle2\n },\n subtitle1: {\n ...typographyStyles.subtitle1\n },\n title3: {\n ...typographyStyles.title3\n },\n borderThin: {\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n borderThick: {\n ...shorthands.borderWidth(tokens.strokeWidthThick)\n },\n borderThicker: {\n ...shorthands.borderWidth(tokens.strokeWidthThicker)\n },\n borderThickest: {\n ...shorthands.borderWidth(tokens.strokeWidthThickest)\n }\n});\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */ export const useAvatarGroupPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const { indicator, size, layout, popoverOpen } = state;\n const sizeStyles = useSizeStyles();\n const triggerButtonStyles = useTriggerButtonStyles();\n const contentStyles = useContentStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n const triggerButtonClasses = [];\n if (size < 36) {\n triggerButtonClasses.push(triggerButtonStyles.borderThin);\n } else if (size < 56) {\n triggerButtonClasses.push(triggerButtonStyles.borderThick);\n } else if (size < 72) {\n triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n }\n if (indicator === 'count') {\n if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n } else if (size <= 28) {\n triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n } else if (size <= 96) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n triggerButtonClasses.push(triggerButtonStyles.icon12);\n } else if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.icon16);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.icon20);\n } else if (size <= 48) {\n triggerButtonClasses.push(triggerButtonStyles.icon24);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.icon28);\n } else if (size <= 72) {\n triggerButtonClasses.push(triggerButtonStyles.icon32);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.icon48);\n }\n }\n state.triggerButton.className = 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);\n state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);\n state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);\n return state;\n};\n"],"names":["avatarGroupPopoverClassNames","useAvatarGroupPopoverStyles_unstable","root","content","popoverSurface","tooltip","triggerButton","useContentStyles","__styles","base","dclx09","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","Beiy3e4","d","p","usePopoverSurfaceStyles","Bxyxcbc","sshi5w","B68tc82","Bmxbyg5","Bpg54ce","a9b677","useTriggerButtonStyles","qhf8xq","Bnnss6s","Brf1p80","Bt984gj","sj55zd","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","oivjwe","wvpqe5","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","pie","focusIndicator","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","g9k6zt","states","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","lj723h","ecr2s2","B6oc9vd","ak43y8","wmxk5l","B50zh58","selected","icon12","Be2twd7","icon16","icon20","icon24","icon28","icon32","icon48","caption2Strong","Bahqtrf","Bhrd7zp","Bg96gwp","caption1Strong","body1Strong","subtitle2","subtitle1","title3","borderThin","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","borderThick","borderThicker","borderThickest","m","h","a","state","indicator","size","layout","popoverOpen","sizeStyles","useSizeStyles","triggerButtonStyles","contentStyles","popoverSurfaceStyles","groupChildClassName","useGroupChildClassName","triggerButtonClasses","push","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useAvatarGroupPopoverStyles.styles.js"],"sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupPopoverClassNames = {\n root: 'fui-AvatarGroupPopover',\n content: 'fui-AvatarGroupPopover__content',\n popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',\n tooltip: 'fui-AvatarGroupPopover__tooltip',\n triggerButton: 'fui-AvatarGroupPopover__triggerButton'\n};\n/**\n * Styles for the content slot.\n */ const useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n flexDirection: 'column'\n }\n});\n/**\n * Styles for the popoverSurface slot.\n */ const usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n overflow: 'hidden scroll',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n width: '220px'\n }\n});\n/**\n * Styles for the triggerButton slot.\n */ const useTriggerButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusCircular,\n ...shorthands.borderStyle('solid'),\n padding: '0',\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText')\n }\n },\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent'\n },\n focusIndicator: createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineStyle: 'none'\n }),\n states: {\n '&:hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n },\n '&:active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n }\n },\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n icon12: {\n fontSize: '12px'\n },\n icon16: {\n fontSize: '16px'\n },\n icon20: {\n fontSize: '20px'\n },\n icon24: {\n fontSize: '24px'\n },\n icon28: {\n fontSize: '28px'\n },\n icon32: {\n fontSize: '32px'\n },\n icon48: {\n fontSize: '48px'\n },\n caption2Strong: {\n ...typographyStyles.caption2Strong\n },\n caption1Strong: {\n ...typographyStyles.caption1Strong\n },\n body1Strong: {\n ...typographyStyles.body1Strong\n },\n subtitle2: {\n ...typographyStyles.subtitle2\n },\n subtitle1: {\n ...typographyStyles.subtitle1\n },\n title3: {\n ...typographyStyles.title3\n },\n borderThin: {\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n borderThick: {\n ...shorthands.borderWidth(tokens.strokeWidthThick)\n },\n borderThicker: {\n ...shorthands.borderWidth(tokens.strokeWidthThicker)\n },\n borderThickest: {\n ...shorthands.borderWidth(tokens.strokeWidthThickest)\n }\n});\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */ export const useAvatarGroupPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const { indicator, size, layout, popoverOpen } = state;\n const sizeStyles = useSizeStyles();\n const triggerButtonStyles = useTriggerButtonStyles();\n const contentStyles = useContentStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n const triggerButtonClasses = [];\n if (size < 36) {\n triggerButtonClasses.push(triggerButtonStyles.borderThin);\n } else if (size < 56) {\n triggerButtonClasses.push(triggerButtonStyles.borderThick);\n } else if (size < 72) {\n triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n }\n if (indicator === 'count') {\n if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n } else if (size <= 28) {\n triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n } else if (size <= 96) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n triggerButtonClasses.push(triggerButtonStyles.icon12);\n } else if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.icon16);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.icon20);\n } else if (size <= 48) {\n triggerButtonClasses.push(triggerButtonStyles.icon24);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.icon28);\n } else if (size <= 72) {\n triggerButtonClasses.push(triggerButtonStyles.icon32);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.icon48);\n }\n }\n state.triggerButton.className = 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);\n state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);\n state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","__styles","mergeClasses","shorthands","tokens","typographyStyles","useGroupChildClassName","useSizeStyles","avatarGroupPopoverClassNames","root","content","popoverSurface","tooltip","triggerButton","useContentStyles","base","dclx09","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","Beiy3e4","d","p","usePopoverSurfaceStyles","Bxyxcbc","sshi5w","B68tc82","Bmxbyg5","Bpg54ce","a9b677","useTriggerButtonStyles","qhf8xq","Bnnss6s","Brf1p80","Bt984gj","sj55zd","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","oivjwe","wvpqe5","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","pie","focusIndicator","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","g9k6zt","states","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","lj723h","ecr2s2","B6oc9vd","ak43y8","wmxk5l","B50zh58","selected","icon12","Be2twd7","icon16","icon20","icon24","icon28","icon32","icon48","caption2Strong","Bahqtrf","Bhrd7zp","Bg96gwp","caption1Strong","body1Strong","subtitle2","subtitle1","title3","borderThin","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","borderThick","borderThicker","borderThickest","m","h","a","useAvatarGroupPopoverStyles_unstable","state","indicator","size","layout","popoverOpen","sizeStyles","triggerButtonStyles","contentStyles","popoverSurfaceStyles","groupChildClassName","triggerButtonClasses","push","className"],"mappings":"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"}
|