@fluentui/react-avatar 9.2.3 → 9.2.5
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.json +108 -10
- package/CHANGELOG.md +39 -11
- package/dist/index.d.ts +7 -5
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js +5 -96
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map +1 -1
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js +3 -1
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js +4 -3
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/partitionAvatarGroupItems.js +3 -2
- package/lib/utils/partitionAvatarGroupItems.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js +5 -96
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js +3 -1
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js +4 -3
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/partitionAvatarGroupItems.js +3 -2
- package/lib-commonjs/utils/partitionAvatarGroupItems.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,105 @@
|
|
|
2
2
|
"name": "@fluentui/react-avatar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 02 Nov 2022 11:54:48 GMT",
|
|
6
|
+
"tag": "@fluentui/react-avatar_v9.2.5",
|
|
7
|
+
"version": "9.2.5",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "esteban.230@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-avatar",
|
|
13
|
+
"commit": "c470fd771afa981f0a37571b5553509019e187cf",
|
|
14
|
+
"comment": "fix: Removing gaps between ::after pseudo-element and AvatarGroupItem/AvatarGroupPopover.\""
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "olfedias@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-avatar",
|
|
19
|
+
"commit": "c619ba066f11a8654e95375314824ba6b81b003e",
|
|
20
|
+
"comment": "chore: Update Griffel to latest version"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-avatar",
|
|
25
|
+
"comment": "Bump @fluentui/react-badge to v9.0.11",
|
|
26
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-avatar",
|
|
31
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.0",
|
|
32
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-avatar",
|
|
37
|
+
"comment": "Bump @fluentui/react-popover to v9.3.0",
|
|
38
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-avatar",
|
|
43
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.1.0",
|
|
44
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-avatar",
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v9.2.1",
|
|
50
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-avatar",
|
|
55
|
+
"comment": "Bump @fluentui/react-tooltip to v9.1.0",
|
|
56
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-avatar",
|
|
61
|
+
"comment": "Bump @fluentui/react-utilities to v9.2.0",
|
|
62
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-avatar",
|
|
67
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17",
|
|
68
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
"none": [
|
|
72
|
+
{
|
|
73
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
74
|
+
"package": "@fluentui/react-avatar",
|
|
75
|
+
"commit": "f3bef94c75214f94749e760a4ab270e3b5a9b8d4",
|
|
76
|
+
"comment": "chore: adds disableButtonEnhancement on triggers"
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"date": "Tue, 25 Oct 2022 00:35:28 GMT",
|
|
83
|
+
"tag": "@fluentui/react-avatar_v9.2.4",
|
|
84
|
+
"version": "9.2.4",
|
|
85
|
+
"comments": {
|
|
86
|
+
"patch": [
|
|
87
|
+
{
|
|
88
|
+
"author": "esteban.230@hotmail.com",
|
|
89
|
+
"package": "@fluentui/react-avatar",
|
|
90
|
+
"commit": "28364be921fa9e04eb472a069416b61b30da8652",
|
|
91
|
+
"comment": "fix: Add undefined option to overflowItems in partitionAvatarGroupItems."
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"author": "beachball",
|
|
95
|
+
"package": "@fluentui/react-avatar",
|
|
96
|
+
"comment": "Bump @fluentui/react-badge to v9.0.10",
|
|
97
|
+
"commit": "eef12b9ae58b64ff68576dc2d865b601e46c85b9"
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"date": "Thu, 20 Oct 2022 08:39:58 GMT",
|
|
6
104
|
"tag": "@fluentui/react-avatar_v9.2.3",
|
|
7
105
|
"version": "9.2.3",
|
|
8
106
|
"comments": {
|
|
@@ -23,55 +121,55 @@
|
|
|
23
121
|
"author": "beachball",
|
|
24
122
|
"package": "@fluentui/react-avatar",
|
|
25
123
|
"comment": "Bump @fluentui/react-badge to v9.0.9",
|
|
26
|
-
"commit": "
|
|
124
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
27
125
|
},
|
|
28
126
|
{
|
|
29
127
|
"author": "beachball",
|
|
30
128
|
"package": "@fluentui/react-avatar",
|
|
31
129
|
"comment": "Bump @fluentui/react-context-selector to v9.0.5",
|
|
32
|
-
"commit": "
|
|
130
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
33
131
|
},
|
|
34
132
|
{
|
|
35
133
|
"author": "beachball",
|
|
36
134
|
"package": "@fluentui/react-avatar",
|
|
37
135
|
"comment": "Bump @fluentui/react-popover to v9.2.1",
|
|
38
|
-
"commit": "
|
|
136
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
39
137
|
},
|
|
40
138
|
{
|
|
41
139
|
"author": "beachball",
|
|
42
140
|
"package": "@fluentui/react-avatar",
|
|
43
141
|
"comment": "Bump @fluentui/react-shared-contexts to v9.0.2",
|
|
44
|
-
"commit": "
|
|
142
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
45
143
|
},
|
|
46
144
|
{
|
|
47
145
|
"author": "beachball",
|
|
48
146
|
"package": "@fluentui/react-avatar",
|
|
49
147
|
"comment": "Bump @fluentui/react-tabster to v9.2.0",
|
|
50
|
-
"commit": "
|
|
148
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
51
149
|
},
|
|
52
150
|
{
|
|
53
151
|
"author": "beachball",
|
|
54
152
|
"package": "@fluentui/react-avatar",
|
|
55
153
|
"comment": "Bump @fluentui/react-theme to v9.1.1",
|
|
56
|
-
"commit": "
|
|
154
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
57
155
|
},
|
|
58
156
|
{
|
|
59
157
|
"author": "beachball",
|
|
60
158
|
"package": "@fluentui/react-avatar",
|
|
61
159
|
"comment": "Bump @fluentui/react-tooltip to v9.0.9",
|
|
62
|
-
"commit": "
|
|
160
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
63
161
|
},
|
|
64
162
|
{
|
|
65
163
|
"author": "beachball",
|
|
66
164
|
"package": "@fluentui/react-avatar",
|
|
67
165
|
"comment": "Bump @fluentui/react-utilities to v9.1.2",
|
|
68
|
-
"commit": "
|
|
166
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
69
167
|
},
|
|
70
168
|
{
|
|
71
169
|
"author": "beachball",
|
|
72
170
|
"package": "@fluentui/react-avatar",
|
|
73
171
|
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16",
|
|
74
|
-
"commit": "
|
|
172
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
75
173
|
}
|
|
76
174
|
]
|
|
77
175
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,27 +1,55 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-avatar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 02 Nov 2022 11:54:48 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.5)
|
|
8
|
+
|
|
9
|
+
Wed, 02 Nov 2022 11:54:48 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.4..@fluentui/react-avatar_v9.2.5)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Removing gaps between ::after pseudo-element and AvatarGroupItem/AvatarGroupPopover." ([PR #25382](https://github.com/microsoft/fluentui/pull/25382) by esteban.230@hotmail.com)
|
|
15
|
+
- chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-badge to v9.0.11 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v9.1.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
18
|
+
- Bump @fluentui/react-popover to v9.3.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
19
|
+
- Bump @fluentui/react-shared-contexts to v9.1.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.2.1 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tooltip to v9.1.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
|
24
|
+
|
|
25
|
+
## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.4)
|
|
26
|
+
|
|
27
|
+
Tue, 25 Oct 2022 00:35:28 GMT
|
|
28
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.3..@fluentui/react-avatar_v9.2.4)
|
|
29
|
+
|
|
30
|
+
### Patches
|
|
31
|
+
|
|
32
|
+
- fix: Add undefined option to overflowItems in partitionAvatarGroupItems. ([PR #25310](https://github.com/microsoft/fluentui/pull/25310) by esteban.230@hotmail.com)
|
|
33
|
+
- Bump @fluentui/react-badge to v9.0.10 ([PR #25363](https://github.com/microsoft/fluentui/pull/25363) by beachball)
|
|
34
|
+
|
|
7
35
|
## [9.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.3)
|
|
8
36
|
|
|
9
|
-
Thu, 20 Oct 2022 08:
|
|
37
|
+
Thu, 20 Oct 2022 08:39:58 GMT
|
|
10
38
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.2..@fluentui/react-avatar_v9.2.3)
|
|
11
39
|
|
|
12
40
|
### Patches
|
|
13
41
|
|
|
14
42
|
- chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
|
|
15
43
|
- chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
|
|
16
|
-
- Bump @fluentui/react-badge to v9.0.9 ([
|
|
17
|
-
- Bump @fluentui/react-context-selector to v9.0.5 ([
|
|
18
|
-
- Bump @fluentui/react-popover to v9.2.1 ([
|
|
19
|
-
- Bump @fluentui/react-shared-contexts to v9.0.2 ([
|
|
20
|
-
- Bump @fluentui/react-tabster to v9.2.0 ([
|
|
21
|
-
- Bump @fluentui/react-theme to v9.1.1 ([
|
|
22
|
-
- Bump @fluentui/react-tooltip to v9.0.9 ([
|
|
23
|
-
- Bump @fluentui/react-utilities to v9.1.2 ([
|
|
24
|
-
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([
|
|
44
|
+
- Bump @fluentui/react-badge to v9.0.9 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
45
|
+
- Bump @fluentui/react-context-selector to v9.0.5 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
46
|
+
- Bump @fluentui/react-popover to v9.2.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
47
|
+
- Bump @fluentui/react-shared-contexts to v9.0.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
48
|
+
- Bump @fluentui/react-tabster to v9.2.0 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
49
|
+
- Bump @fluentui/react-theme to v9.1.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
50
|
+
- Bump @fluentui/react-tooltip to v9.0.9 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
51
|
+
- Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
52
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
25
53
|
|
|
26
54
|
## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.2)
|
|
27
55
|
|
package/dist/index.d.ts
CHANGED
|
@@ -129,7 +129,7 @@ export declare type AvatarGroupPopoverSlots = {
|
|
|
129
129
|
/**
|
|
130
130
|
* State used in rendering AvatarGroupPopover
|
|
131
131
|
*/
|
|
132
|
-
export declare type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> & Required<Pick<AvatarGroupPopoverProps, 'indicator'>> & {
|
|
132
|
+
export declare type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> & Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {
|
|
133
133
|
popoverOpen: boolean;
|
|
134
134
|
layout: AvatarGroupProps['layout'];
|
|
135
135
|
size: AvatarSizes;
|
|
@@ -282,6 +282,11 @@ export declare type AvatarState = ComponentState<AvatarSlots> & Required<Pick<Av
|
|
|
282
282
|
|
|
283
283
|
/* Excluded from this release type: getInitials */
|
|
284
284
|
|
|
285
|
+
export declare type PartitionAvatarGroupItems<T> = {
|
|
286
|
+
inlineItems: readonly T[];
|
|
287
|
+
overflowItems?: readonly T[];
|
|
288
|
+
};
|
|
289
|
+
|
|
285
290
|
/**
|
|
286
291
|
* Get the inline items and overflowing items based on the array of AvatarGroupItems needed for AvatarGroup.
|
|
287
292
|
*
|
|
@@ -289,10 +294,7 @@ export declare type AvatarState = ComponentState<AvatarSlots> & Required<Pick<Av
|
|
|
289
294
|
*
|
|
290
295
|
* @returns Two arrays split into inline items and overflow items based on maxInlineItems.
|
|
291
296
|
*/
|
|
292
|
-
export declare const partitionAvatarGroupItems: <T>(options: PartitionAvatarGroupItemsOptions<T>) =>
|
|
293
|
-
inlineItems: T[];
|
|
294
|
-
overflowItems: readonly T[];
|
|
295
|
-
};
|
|
297
|
+
export declare const partitionAvatarGroupItems: <T>(options: PartitionAvatarGroupItemsOptions<T>) => PartitionAvatarGroupItems<T>;
|
|
296
298
|
|
|
297
299
|
export declare type PartitionAvatarGroupItemsOptions<T> = {
|
|
298
300
|
items: readonly T[];
|
|
@@ -74,83 +74,14 @@ const useOverflowLabelStyles = /*#__PURE__*/__styles({
|
|
|
74
74
|
|
|
75
75
|
|
|
76
76
|
const useStackStyles = /*#__PURE__*/__styles({
|
|
77
|
-
"base": {
|
|
78
|
-
"Bsft5z2": "f1iwjod4",
|
|
79
|
-
"E3zdtr": "f1mdlcz9",
|
|
80
|
-
"ap17g6": "f15zbnnk",
|
|
81
|
-
"B0n5ga8": "f1de97fc",
|
|
82
|
-
"s924m2": ["fnkdar3", "f1rue1y9"],
|
|
83
|
-
"B1q35kw": "f6bjq4p",
|
|
84
|
-
"Gp14am": ["f1rue1y9", "fnkdar3"],
|
|
85
|
-
"B3778ie": ["fprarqb", "f14vs0nd"],
|
|
86
|
-
"d9w3h3": ["f14vs0nd", "fprarqb"],
|
|
87
|
-
"Bl18szs": ["f1gtfqs9", "f18zvfd9"],
|
|
88
|
-
"B4j8arr": ["f18zvfd9", "f1gtfqs9"],
|
|
89
|
-
"Bm2nyyq": "f8rth92",
|
|
90
|
-
"Barhvk9": ["flthirb", "ftkbnf5"],
|
|
91
|
-
"Bw17bha": "f1lh990p",
|
|
92
|
-
"vfts7": ["ftkbnf5", "flthirb"],
|
|
93
|
-
"qx5q1e": "f1dpauah"
|
|
94
|
-
},
|
|
95
|
-
"overflowButton": {
|
|
96
|
-
"Bc0dv0h": "f1o149bd",
|
|
97
|
-
"Bt0nq95": ["f1xgvrhv", "f34pcxu"],
|
|
98
|
-
"Bte176d": "f9nu0bd",
|
|
99
|
-
"Buo7p3s": ["f34pcxu", "f1xgvrhv"]
|
|
100
|
-
},
|
|
101
77
|
"thick": {
|
|
102
|
-
"
|
|
103
|
-
"Dlnsje": "f5o33kw",
|
|
104
|
-
"Eqx8gd": ["f5kz84h", "f8jassg"],
|
|
105
|
-
"bn5sak": "f1oigyhu",
|
|
106
|
-
"xrcqlc": "fozawe0",
|
|
107
|
-
"Ihftqj": ["f15gmigz", "f11o3tup"],
|
|
108
|
-
"Bcgy8vk": "f14pi962",
|
|
109
|
-
"Bhxzhr1": ["f11o3tup", "f15gmigz"]
|
|
78
|
+
"E5pizo": "foiuzp5"
|
|
110
79
|
},
|
|
111
80
|
"thicker": {
|
|
112
|
-
"
|
|
113
|
-
"Dlnsje": "f5o33kw",
|
|
114
|
-
"Eqx8gd": ["f1f2c3j3", "f1g5d141"],
|
|
115
|
-
"bn5sak": "f1vvl5ts",
|
|
116
|
-
"xrcqlc": "f1gbh4dy",
|
|
117
|
-
"Ihftqj": ["f1os6oqe", "f4y7ea8"],
|
|
118
|
-
"Bcgy8vk": "f1a3lyng",
|
|
119
|
-
"Bhxzhr1": ["f4y7ea8", "f1os6oqe"]
|
|
81
|
+
"E5pizo": "f1x6o7w7"
|
|
120
82
|
},
|
|
121
83
|
"thickest": {
|
|
122
|
-
"
|
|
123
|
-
"Dlnsje": "f5o33kw",
|
|
124
|
-
"Eqx8gd": ["fueot05", "f1mir6xb"],
|
|
125
|
-
"bn5sak": "f1izs6vq",
|
|
126
|
-
"xrcqlc": "f15ae8rs",
|
|
127
|
-
"Ihftqj": ["f1c7xjog", "fn35eni"],
|
|
128
|
-
"Bcgy8vk": "f9v1pvc",
|
|
129
|
-
"Bhxzhr1": ["fn35eni", "f1c7xjog"]
|
|
130
|
-
},
|
|
131
|
-
"borderThin": {
|
|
132
|
-
"a2br6o": "fe2wxzu",
|
|
133
|
-
"Dlnsje": "fcr18t3",
|
|
134
|
-
"Eqx8gd": ["fhjhgwu", "fh9v7u1"],
|
|
135
|
-
"bn5sak": "f1mqssek"
|
|
136
|
-
},
|
|
137
|
-
"borderThick": {
|
|
138
|
-
"a2br6o": "f19rfb2x",
|
|
139
|
-
"Dlnsje": "fk4cr37",
|
|
140
|
-
"Eqx8gd": ["foc71j7", "f1xoeo06"],
|
|
141
|
-
"bn5sak": "fd6iyyb"
|
|
142
|
-
},
|
|
143
|
-
"borderThicker": {
|
|
144
|
-
"a2br6o": "f1byqz6t",
|
|
145
|
-
"Dlnsje": "fdqxnrd",
|
|
146
|
-
"Eqx8gd": ["f1x8rm7i", "ftx9300"],
|
|
147
|
-
"bn5sak": "f13zu3lb"
|
|
148
|
-
},
|
|
149
|
-
"borderThickest": {
|
|
150
|
-
"a2br6o": "f1i9snzy",
|
|
151
|
-
"Dlnsje": "f19z50l7",
|
|
152
|
-
"Eqx8gd": ["f1fgc9m6", "f1d4bgoy"],
|
|
153
|
-
"bn5sak": "fkll7mr"
|
|
84
|
+
"E5pizo": "f2aml1u"
|
|
154
85
|
},
|
|
155
86
|
"xxs": {
|
|
156
87
|
"jhia2w": ["f1cjco14", "f13dxjc9"]
|
|
@@ -165,11 +96,7 @@ const useStackStyles = /*#__PURE__*/__styles({
|
|
|
165
96
|
"jhia2w": ["flv48ch", "fnh1ydj"]
|
|
166
97
|
}
|
|
167
98
|
}, {
|
|
168
|
-
"d": [".
|
|
169
|
-
"m": [["@media (forced-colors: active){.f1dpauah::after{forced-color-adjust:none;}}", {
|
|
170
|
-
"m": "(forced-colors: active)"
|
|
171
|
-
}]],
|
|
172
|
-
"f": [".f1o149bd:focus::after{border-top-color:transparent;}", ".f1xgvrhv:focus::after{border-right-color:transparent;}", ".f34pcxu:focus::after{border-left-color:transparent;}", ".f9nu0bd:focus::after{border-bottom-color:transparent;}"]
|
|
99
|
+
"d": [".foiuzp5{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground2);}", ".f1x6o7w7{box-shadow:0 0 0 var(--strokeWidthThicker) var(--colorNeutralBackground2);}", ".f2aml1u{box-shadow:0 0 0 var(--strokeWidthThickest) var(--colorNeutralBackground2);}", ".f1cjco14:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXXS));}", ".f13dxjc9:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXXS));}", ".f15p6bln:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXS));}", ".f1bab3ru:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXS));}", ".f1v53ncc:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalS));}", ".f17pu8r8:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalS));}", ".flv48ch:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalL));}", ".fnh1ydj:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalL));}"]
|
|
173
100
|
});
|
|
174
101
|
/**
|
|
175
102
|
* Styles for the spread layout
|
|
@@ -288,37 +215,19 @@ export const useAvatarGroupItemStyles_unstable = state => {
|
|
|
288
215
|
* needed for each layout.
|
|
289
216
|
*/
|
|
290
217
|
|
|
291
|
-
export const useGroupChildClassName = (layout, size
|
|
218
|
+
export const useGroupChildClassName = (layout, size) => {
|
|
292
219
|
const stackStyles = useStackStyles();
|
|
293
220
|
const spreadStyles = useSpreadStyles();
|
|
294
221
|
const layoutClasses = [];
|
|
295
222
|
|
|
296
223
|
if (size) {
|
|
297
224
|
if (layout === 'stack') {
|
|
298
|
-
layoutClasses.push(stackStyles.base);
|
|
299
|
-
|
|
300
225
|
if (size < 56) {
|
|
301
226
|
layoutClasses.push(stackStyles.thick);
|
|
302
227
|
} else if (size < 72) {
|
|
303
228
|
layoutClasses.push(stackStyles.thicker);
|
|
304
229
|
} else {
|
|
305
230
|
layoutClasses.push(stackStyles.thickest);
|
|
306
|
-
} // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width
|
|
307
|
-
// since the ::after pseudo-element doesn't take the overflowButton's border for its size.
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
if (isOverflowButton) {
|
|
311
|
-
layoutClasses.push(stackStyles.overflowButton);
|
|
312
|
-
|
|
313
|
-
if (size < 36) {
|
|
314
|
-
layoutClasses.push(stackStyles.borderThin);
|
|
315
|
-
} else if (size < 56) {
|
|
316
|
-
layoutClasses.push(stackStyles.borderThick);
|
|
317
|
-
} else if (size < 72) {
|
|
318
|
-
layoutClasses.push(stackStyles.borderThicker);
|
|
319
|
-
} else {
|
|
320
|
-
layoutClasses.push(stackStyles.borderThickest);
|
|
321
|
-
}
|
|
322
231
|
}
|
|
323
232
|
|
|
324
233
|
if (size < 24) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSizes } 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: {\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n },\n nonOverflowItem: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute',\n },\n pie: {\n ...shorthands.borderRadius(0),\n },\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 base: {\n '&::after': {\n content: \"''\",\n position: 'absolute',\n display: 'inline-flex',\n // Border is used instead of outline due to a bug in webkit browsers where border-radius is ignored in outline.\n ...shorthands.borderColor(tokens.colorNeutralBackground2),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n },\n },\n },\n overflowButton: {\n '&:focus::after': {\n ...shorthands.borderColor('transparent'),\n },\n },\n thick: {\n '&::after': {\n width: '100%',\n height: '100%',\n left: `calc(-1 * ${tokens.strokeWidthThick})`,\n top: `calc(-1 * ${tokens.strokeWidthThick})`,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n thicker: {\n '&::after': {\n width: '100%',\n height: '100%',\n left: `calc(-1 * ${tokens.strokeWidthThicker})`,\n top: `calc(-1 * ${tokens.strokeWidthThicker})`,\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n thickest: {\n '&::after': {\n width: '100%',\n height: '100%',\n left: `calc(-1 * ${tokens.strokeWidthThickest})`,\n top: `calc(-1 * ${tokens.strokeWidthThickest})`,\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n borderThin: {\n '&::after': {\n width: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n height: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n left: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n top: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n },\n },\n borderThick: {\n '&::after': {\n width: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n height: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n left: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n top: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n },\n },\n borderThicker: {\n '&::after': {\n width: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n height: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n left: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n top: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n },\n },\n borderThickest: {\n '&::after': {\n width: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n height: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n left: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n top: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n },\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 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 const { isOverflowItem, layout, size } = state;\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 } 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 = (\n layout: AvatarGroupProps['layout'],\n size: AvatarSizes,\n isOverflowButton?: boolean,\n): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\n layoutClasses.push(stackStyles.base);\n\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 // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width\n // since the ::after pseudo-element doesn't take the overflowButton's border for its size.\n if (isOverflowButton) {\n layoutClasses.push(stackStyles.overflowButton);\n\n if (size < 36) {\n layoutClasses.push(stackStyles.borderThin);\n } else if (size < 56) {\n layoutClasses.push(stackStyles.borderThick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.borderThicker);\n } else {\n layoutClasses.push(stackStyles.borderThickest);\n }\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"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSizes } 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: {\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n },\n nonOverflowItem: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute',\n },\n pie: {\n ...shorthands.borderRadius(0),\n },\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 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 const { isOverflowItem, layout, size } = state;\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 } 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: AvatarSizes): 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"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupPopover.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { AvatarSizes } 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, 'indicator'>> & {\n popoverOpen: boolean;\n layout: AvatarGroupProps['layout'];\n size: AvatarSizes;\n };\n"]}
|
|
1
|
+
{"version":3,"file":"AvatarGroupPopover.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { AvatarSizes } 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: AvatarSizes;\n };\n"]}
|
|
@@ -12,7 +12,9 @@ export const renderAvatarGroupPopover_unstable = (state, contextValues) => {
|
|
|
12
12
|
slotProps
|
|
13
13
|
} = getSlots(state);
|
|
14
14
|
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
15
|
-
}, /*#__PURE__*/React.createElement(PopoverTrigger,
|
|
15
|
+
}, /*#__PURE__*/React.createElement(PopoverTrigger, {
|
|
16
|
+
disableButtonEnhancement: true
|
|
17
|
+
}, /*#__PURE__*/React.createElement(slots.tooltip, { ...slotProps.tooltip
|
|
16
18
|
}, /*#__PURE__*/React.createElement(slots.triggerButton, { ...slotProps.triggerButton
|
|
17
19
|
}))), /*#__PURE__*/React.createElement(slots.popoverSurface, { ...slotProps.popoverSurface
|
|
18
20
|
}, /*#__PURE__*/React.createElement(AvatarGroupProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,mCAApC;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAuB,cAAvB,QAA6C,yBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,aAF+C,KAG7C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA0B,KAA1B,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,mCAApC;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAuB,cAAvB,QAA6C,yBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,aAF+C,KAG7C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA0B,KAA1B,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe;IAAC,wBAAwB,EAAA;EAAzB,CAAf,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CADF,CADF,CADF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,eACE,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAApB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CADF,CANF,CADF;AAcD,CApBM","sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\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 const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <slots.root {...(slotProps.root as PopoverProps)}>\n <PopoverTrigger disableButtonEnhancement>\n <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n <slots.triggerButton {...slotProps.triggerButton} />\n </slots.tooltip>\n </PopoverTrigger>\n <slots.popoverSurface {...slotProps.popoverSurface}>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <slots.content {...slotProps.content} />\n </AvatarGroupProvider>\n </slots.popoverSurface>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -49,9 +49,10 @@ export const useAvatarGroupPopover_unstable = props => {
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
return {
|
|
52
|
-
|
|
53
|
-
layout,
|
|
52
|
+
count,
|
|
54
53
|
indicator,
|
|
54
|
+
layout,
|
|
55
|
+
popoverOpen,
|
|
55
56
|
size,
|
|
56
57
|
components: {
|
|
57
58
|
root: Popover,
|
|
@@ -79,7 +80,7 @@ export const useAvatarGroupPopover_unstable = props => {
|
|
|
79
80
|
content: resolveShorthand(props.content, {
|
|
80
81
|
required: true,
|
|
81
82
|
defaultProps: {
|
|
82
|
-
children
|
|
83
|
+
children,
|
|
83
84
|
role: 'list'
|
|
84
85
|
}
|
|
85
86
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,8BAAT,QAA+C,mCAA/C;AACA,SAAS,sBAAT,QAAuC,+BAAvC;AACA,SAAS,gBAAT,EAA2B,oBAA3B,QAAuD,2BAAvD;AACA,SAAS,qBAAT,QAAsC,uBAAtC;AACA,SAA8C,OAA9C,EAAuD,cAAvD,QAA6E,yBAA7E;AAEA,SAAS,OAAT,QAAwB,yBAAxB;AAEA;;;;;;;AAOG;;AACH,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAA4D;;;EACxG,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,8BAA8B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAA9B,MAA+C,IAA/C,IAA+C,EAAA,KAAA,KAAA,CAA/C,GAA+C,EAA/C,GAAmD,sBAAhE;EACA,MAAM,MAAM,GAAG,8BAA8B,CAAC,GAAG,IAAI,GAAG,CAAC,MAAZ,CAA7C;EACA,MAAM;IACJ,SAAS,GAAG,IAAI,GAAG,EAAP,GAAY,MAAZ,GAAqB,OAD7B;IAEJ,KAAK,GAAG,KAAK,CAAC,QAAN,CAAe,KAAf,CAAqB,KAAK,CAAC,QAA3B,CAFJ;IAGJ,QAHI;IAIJ,GAAG;EAJC,IAKF,KALJ;EAOA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,oBAAoB,CAAC;IACzD,KAAK,EAAE,KAAK,CAAC,IAD4C;IAEzD,YAAY,EAAE,KAAK,CAAC,WAFqC;IAGzD,YAAY,EAAE;EAH2C,CAAD,CAA1D;;EAMA,MAAM,qBAAqB,GAAG,CAAC,CAAD,EAAuB,IAAvB,KAAiD;;;IAC7E,CAAA,EAAA,GAAA,WAAW,CAAC,YAAZ,MAAwB,IAAxB,IAAwB,EAAA,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAwB,EAAA,CAAA,IAAA,CAAxB,WAAwB,EAAG,CAAH,EAAM,IAAN,CAAxB;IACA,cAAc,CAAC,IAAI,CAAC,IAAN,CAAd;EACD,CAHD;;EAKA,IAAI,qBAAJ;;EACA,IAAI,MAAM,KAAK,KAAf,EAAsB;IACpB,qBAAqB,GAAG,IAAxB;EACD,CAFD,MAEO,IAAI,SAAS,KAAK,MAAlB,EAA0B;IAC/B,qBAAqB,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAxB;EACD,CAFM,MAEA;IACL,qBAAqB,GAAG,KAAK,GAAG,EAAR,GAAa,KAAb,GAAqB,IAAI,KAAK,EAAtD;EACD;;EAED,OAAO;IACL,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand, useControllableState } 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: {\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 triggerButton: resolveShorthand(props.triggerButton, {\n required: true,\n defaultProps: {\n children: triggerButtonChildren,\n type: 'button',\n },\n }),\n content: resolveShorthand(props.content, {\n required: true,\n defaultProps: {\n children,\n role: 'list',\n },\n }),\n popoverSurface: resolveShorthand(props.popoverSurface, {\n required: true,\n defaultProps: {\n 'aria-label': 'Overflow',\n tabIndex: 0,\n },\n }),\n tooltip: resolveShorthand(props.tooltip, {\n required: true,\n defaultProps: {\n content: 'View more people.',\n relationship: 'label',\n },\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -243,7 +243,7 @@ export const useAvatarGroupPopoverStyles_unstable = state => {
|
|
|
243
243
|
const triggerButtonStyles = useTriggerButtonStyles();
|
|
244
244
|
const contentStyles = useContentStyles();
|
|
245
245
|
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
246
|
-
const groupChildClassName = useGroupChildClassName(layout, size
|
|
246
|
+
const groupChildClassName = useGroupChildClassName(layout, size);
|
|
247
247
|
const triggerButtonClasses = [];
|
|
248
248
|
|
|
249
249
|
if (size < 36) {
|