@fluentui/react-avatar 9.2.4 → 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.
Files changed (15) hide show
  1. package/CHANGELOG.json +78 -1
  2. package/CHANGELOG.md +20 -2
  3. package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js +5 -96
  4. package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
  5. package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js +3 -1
  6. package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
  7. package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +1 -1
  8. package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -1
  9. package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js +5 -96
  10. package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
  11. package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js +3 -1
  12. package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
  13. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +1 -1
  14. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -1
  15. package/package.json +10 -10
package/CHANGELOG.json CHANGED
@@ -2,7 +2,84 @@
2
2
  "name": "@fluentui/react-avatar",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 25 Oct 2022 00:34:06 GMT",
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",
6
83
  "tag": "@fluentui/react-avatar_v9.2.4",
7
84
  "version": "9.2.4",
8
85
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,30 @@
1
1
  # Change Log - @fluentui/react-avatar
2
2
 
3
- This log was last generated on Tue, 25 Oct 2022 00:34:06 GMT and should not be manually modified.
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
+
7
25
  ## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.4)
8
26
 
9
- Tue, 25 Oct 2022 00:34:06 GMT
27
+ Tue, 25 Oct 2022 00:35:28 GMT
10
28
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.3..@fluentui/react-avatar_v9.2.4)
11
29
 
12
30
  ### Patches
package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js CHANGED
@@ -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
- "a2br6o": "fiy03ts",
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
- "a2br6o": "fiy03ts",
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
- "a2br6o": "fiy03ts",
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": [".f1iwjod4::after{content:'';}", ".f1mdlcz9::after{position:absolute;}", ".f15zbnnk::after{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1de97fc::after{border-top-color:var(--colorNeutralBackground2);}", ".fnkdar3::after{border-right-color:var(--colorNeutralBackground2);}", ".f1rue1y9::after{border-left-color:var(--colorNeutralBackground2);}", ".f6bjq4p::after{border-bottom-color:var(--colorNeutralBackground2);}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fiy03ts::after{width:100%;}", ".f5o33kw::after{height:100%;}", ".f5kz84h::after{left:calc(-1 * var(--strokeWidthThick));}", ".f8jassg::after{right:calc(-1 * var(--strokeWidthThick));}", ".f1oigyhu::after{top:calc(-1 * var(--strokeWidthThick));}", ".fozawe0::after{border-top-width:var(--strokeWidthThick);}", ".f15gmigz::after{border-right-width:var(--strokeWidthThick);}", ".f11o3tup::after{border-left-width:var(--strokeWidthThick);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1f2c3j3::after{left:calc(-1 * var(--strokeWidthThicker));}", ".f1g5d141::after{right:calc(-1 * var(--strokeWidthThicker));}", ".f1vvl5ts::after{top:calc(-1 * var(--strokeWidthThicker));}", ".f1gbh4dy::after{border-top-width:var(--strokeWidthThicker);}", ".f1os6oqe::after{border-right-width:var(--strokeWidthThicker);}", ".f4y7ea8::after{border-left-width:var(--strokeWidthThicker);}", ".f1a3lyng::after{border-bottom-width:var(--strokeWidthThicker);}", ".fueot05::after{left:calc(-1 * var(--strokeWidthThickest));}", ".f1mir6xb::after{right:calc(-1 * var(--strokeWidthThickest));}", ".f1izs6vq::after{top:calc(-1 * var(--strokeWidthThickest));}", ".f15ae8rs::after{border-top-width:var(--strokeWidthThickest);}", ".f1c7xjog::after{border-right-width:var(--strokeWidthThickest);}", ".fn35eni::after{border-left-width:var(--strokeWidthThickest);}", ".f9v1pvc::after{border-bottom-width:var(--strokeWidthThickest);}", ".fe2wxzu::after{width:calc(100% + var(--strokeWidthThin) * 2);}", ".fcr18t3::after{height:calc(100% + var(--strokeWidthThin) * 2);}", ".fhjhgwu::after{left:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".fh9v7u1::after{right:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".f1mqssek::after{top:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".f19rfb2x::after{width:calc(100% + var(--strokeWidthThick) * 2);}", ".fk4cr37::after{height:calc(100% + var(--strokeWidthThick) * 2);}", ".foc71j7::after{left:calc(-1 * var(--strokeWidthThick) * 2);}", ".f1xoeo06::after{right:calc(-1 * var(--strokeWidthThick) * 2);}", ".fd6iyyb::after{top:calc(-1 * var(--strokeWidthThick) * 2);}", ".f1byqz6t::after{width:calc(100% + var(--strokeWidthThicker) * 2);}", ".fdqxnrd::after{height:calc(100% + var(--strokeWidthThicker) * 2);}", ".f1x8rm7i::after{left:calc(-1 * var(--strokeWidthThicker) * 2);}", ".ftx9300::after{right:calc(-1 * var(--strokeWidthThicker) * 2);}", ".f13zu3lb::after{top:calc(-1 * var(--strokeWidthThicker) * 2);}", ".f1i9snzy::after{width:calc(100% + var(--strokeWidthThickest) * 2);}", ".f19z50l7::after{height:calc(100% + var(--strokeWidthThickest) * 2);}", ".f1fgc9m6::after{left:calc(-1 * var(--strokeWidthThickest) * 2);}", ".f1d4bgoy::after{right:calc(-1 * var(--strokeWidthThickest) * 2);}", ".fkll7mr::after{top:calc(-1 * var(--strokeWidthThickest) * 2);}", ".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));}"],
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, isOverflowButton) => {
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) {
package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map CHANGED
@@ -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/"}
package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js CHANGED
@@ -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, null, /*#__PURE__*/React.createElement(slots.tooltip, { ...slotProps.tooltip
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, {
package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map CHANGED
@@ -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,IAAf,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>\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/"}
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/"}
package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js CHANGED
@@ -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, true);
246
+ const groupChildClassName = useGroupChildClassName(layout, size);
247
247
  const triggerButtonClasses = [];
248
248
 
249
249
  if (size < 36) {
package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts"],"names":[],"mappings":"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","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';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots> = {\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/**\n * Styles for the content slot.\n */\nconst useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n ...shorthands.margin('0'),\n ...shorthands.padding('0'),\n },\n});\n\n/**\n * Styles for the popoverSurface slot.\n */\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n ...shorthands.overflow('hidden', 'scroll'),\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n width: '220px',\n },\n});\n\n/**\n * Styles for the triggerButton slot.\n */\nconst 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 ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.padding(0),\n\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n }),\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\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */\nexport const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverState): AvatarGroupPopoverState => {\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, true);\n\n const triggerButtonClasses = [];\n\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\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\n state.triggerButton.className = mergeClasses(\n avatarGroupPopoverClassNames.triggerButton,\n groupChildClassName,\n sizeStyles[size],\n triggerButtonStyles.base,\n layout === 'pie' && triggerButtonStyles.pie,\n triggerButtonStyles.focusIndicator,\n layout !== 'pie' && triggerButtonStyles.states,\n layout !== 'pie' && popoverOpen && triggerButtonStyles.selected,\n ...triggerButtonClasses,\n state.triggerButton.className,\n );\n\n state.content.className = mergeClasses(\n avatarGroupPopoverClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n\n state.popoverSurface.className = mergeClasses(\n avatarGroupPopoverClassNames.popoverSurface,\n popoverSurfaceStyles.base,\n state.popoverSurface.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts"],"names":[],"mappings":"AAAA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AACA,SAAS,sBAAT,QAAuC,6CAAvC;AACA,SAAS,aAAT,QAA8B,2BAA9B;AAIA,OAAO,MAAM,4BAA4B,GAA4C;EACnF,IAAI,EAAE,wBAD6E;EAEnF,OAAO,EAAE,iCAF0E;EAGnF,cAAc,EAAE,wCAHmE;EAInF,OAAO,EAAE,iCAJ0E;EAKnF,aAAa,EAAE;AALoE,CAA9E;AAQP;;AAEG;;AACH,MAAM,gBAAgB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAzB;AAQA;;AAEG;;;AACH,MAAM,uBAAuB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAhC;AAUA;;AAEG;;;AACH,MAAM,sBAAsB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EAA/B;AAoEA;;AAEG;;;AACH,OAAO,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,MAAM;IAAE,SAAF;IAAa,IAAb;IAAmB,MAAnB;IAA2B;EAA3B,IAA2C,KAAjD;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,mBAAmB,GAAG,sBAAsB,EAAlD;EACA,MAAM,aAAa,GAAG,gBAAgB,EAAtC;EACA,MAAM,oBAAoB,GAAG,uBAAuB,EAApD;EACA,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,MAAD,EAAS,IAAT,CAAlD;EAEA,MAAM,oBAAoB,GAAG,EAA7B;;EAEA,IAAI,IAAI,GAAG,EAAX,EAAe;IACb,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,UAA9C;EACD,CAFD,MAEO,IAAI,IAAI,GAAG,EAAX,EAAe;IACpB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,WAA9C;EACD,CAFM,MAEA,IAAI,IAAI,GAAG,EAAX,EAAe;IACpB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,aAA9C;EACD,CAFM,MAEA;IACL,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,cAA9C;EACD;;EAED,IAAI,SAAS,KAAK,OAAlB,EAA2B;IACzB,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACd,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,cAA9C;IACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,cAA9C;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,WAA9C;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,SAA9C;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,SAA9C;IACD,CAFM,MAEA;MACL,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,MAA9C;IACD;EACF,CAdD,MAcO;IACL,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACd,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,MAA9C;IACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,MAA9C;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,MAA9C;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,MAA9C;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,MAA9C;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,MAA9C;IACD,CAFM,MAEA;MACL,oBAAoB,CAAC,IAArB,CAA0B,mBAAmB,CAAC,MAA9C;IACD;EACF;;EAED,KAAK,CAAC,aAAN,CAAoB,SAApB,GAAgC,YAAY,CAC1C,4BAA4B,CAAC,aADa,EAE1C,mBAF0C,EAG1C,UAAU,CAAC,IAAD,CAHgC,EAI1C,mBAAmB,CAAC,IAJsB,EAK1C,MAAM,KAAK,KAAX,IAAoB,mBAAmB,CAAC,GALE,EAM1C,mBAAmB,CAAC,cANsB,EAO1C,MAAM,KAAK,KAAX,IAAoB,mBAAmB,CAAC,MAPE,EAQ1C,MAAM,KAAK,KAAX,IAAoB,WAApB,IAAmC,mBAAmB,CAAC,QARb,EAS1C,GAAG,oBATuC,EAU1C,KAAK,CAAC,aAAN,CAAoB,SAVsB,CAA5C;EAaA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CACpC,4BAA4B,CAAC,OADO,EAEpC,aAAa,CAAC,IAFsB,EAGpC,KAAK,CAAC,OAAN,CAAc,SAHsB,CAAtC;EAMA,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,YAAY,CAC3C,4BAA4B,CAAC,cADc,EAE3C,oBAAoB,CAAC,IAFsB,EAG3C,KAAK,CAAC,cAAN,CAAqB,SAHsB,CAA7C;EAMA,OAAO,KAAP;AACD,CA9EM","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';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots> = {\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/**\n * Styles for the content slot.\n */\nconst useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n ...shorthands.margin('0'),\n ...shorthands.padding('0'),\n },\n});\n\n/**\n * Styles for the popoverSurface slot.\n */\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n ...shorthands.overflow('hidden', 'scroll'),\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n width: '220px',\n },\n});\n\n/**\n * Styles for the triggerButton slot.\n */\nconst 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 ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.padding(0),\n\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n }),\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\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */\nexport const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverState): AvatarGroupPopoverState => {\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\n const triggerButtonClasses = [];\n\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\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\n state.triggerButton.className = mergeClasses(\n avatarGroupPopoverClassNames.triggerButton,\n groupChildClassName,\n sizeStyles[size],\n triggerButtonStyles.base,\n layout === 'pie' && triggerButtonStyles.pie,\n triggerButtonStyles.focusIndicator,\n layout !== 'pie' && triggerButtonStyles.states,\n layout !== 'pie' && popoverOpen && triggerButtonStyles.selected,\n ...triggerButtonClasses,\n state.triggerButton.className,\n );\n\n state.content.className = mergeClasses(\n avatarGroupPopoverClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n\n state.popoverSurface.className = mergeClasses(\n avatarGroupPopoverClassNames.popoverSurface,\n popoverSurfaceStyles.base,\n state.popoverSurface.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js CHANGED
@@ -84,83 +84,14 @@ const useOverflowLabelStyles = /*#__PURE__*/react_1.__styles({
84
84
 
85
85
 
86
86
  const useStackStyles = /*#__PURE__*/react_1.__styles({
87
- "base": {
88
- "Bsft5z2": "f1iwjod4",
89
- "E3zdtr": "f1mdlcz9",
90
- "ap17g6": "f15zbnnk",
91
- "B0n5ga8": "f1de97fc",
92
- "s924m2": ["fnkdar3", "f1rue1y9"],
93
- "B1q35kw": "f6bjq4p",
94
- "Gp14am": ["f1rue1y9", "fnkdar3"],
95
- "B3778ie": ["fprarqb", "f14vs0nd"],
96
- "d9w3h3": ["f14vs0nd", "fprarqb"],
97
- "Bl18szs": ["f1gtfqs9", "f18zvfd9"],
98
- "B4j8arr": ["f18zvfd9", "f1gtfqs9"],
99
- "Bm2nyyq": "f8rth92",
100
- "Barhvk9": ["flthirb", "ftkbnf5"],
101
- "Bw17bha": "f1lh990p",
102
- "vfts7": ["ftkbnf5", "flthirb"],
103
- "qx5q1e": "f1dpauah"
104
- },
105
- "overflowButton": {
106
- "Bc0dv0h": "f1o149bd",
107
- "Bt0nq95": ["f1xgvrhv", "f34pcxu"],
108
- "Bte176d": "f9nu0bd",
109
- "Buo7p3s": ["f34pcxu", "f1xgvrhv"]
110
- },
111
87
  "thick": {
112
- "a2br6o": "fiy03ts",
113
- "Dlnsje": "f5o33kw",
114
- "Eqx8gd": ["f5kz84h", "f8jassg"],
115
- "bn5sak": "f1oigyhu",
116
- "xrcqlc": "fozawe0",
117
- "Ihftqj": ["f15gmigz", "f11o3tup"],
118
- "Bcgy8vk": "f14pi962",
119
- "Bhxzhr1": ["f11o3tup", "f15gmigz"]
88
+ "E5pizo": "foiuzp5"
120
89
  },
121
90
  "thicker": {
122
- "a2br6o": "fiy03ts",
123
- "Dlnsje": "f5o33kw",
124
- "Eqx8gd": ["f1f2c3j3", "f1g5d141"],
125
- "bn5sak": "f1vvl5ts",
126
- "xrcqlc": "f1gbh4dy",
127
- "Ihftqj": ["f1os6oqe", "f4y7ea8"],
128
- "Bcgy8vk": "f1a3lyng",
129
- "Bhxzhr1": ["f4y7ea8", "f1os6oqe"]
91
+ "E5pizo": "f1x6o7w7"
130
92
  },
131
93
  "thickest": {
132
- "a2br6o": "fiy03ts",
133
- "Dlnsje": "f5o33kw",
134
- "Eqx8gd": ["fueot05", "f1mir6xb"],
135
- "bn5sak": "f1izs6vq",
136
- "xrcqlc": "f15ae8rs",
137
- "Ihftqj": ["f1c7xjog", "fn35eni"],
138
- "Bcgy8vk": "f9v1pvc",
139
- "Bhxzhr1": ["fn35eni", "f1c7xjog"]
140
- },
141
- "borderThin": {
142
- "a2br6o": "fe2wxzu",
143
- "Dlnsje": "fcr18t3",
144
- "Eqx8gd": ["fhjhgwu", "fh9v7u1"],
145
- "bn5sak": "f1mqssek"
146
- },
147
- "borderThick": {
148
- "a2br6o": "f19rfb2x",
149
- "Dlnsje": "fk4cr37",
150
- "Eqx8gd": ["foc71j7", "f1xoeo06"],
151
- "bn5sak": "fd6iyyb"
152
- },
153
- "borderThicker": {
154
- "a2br6o": "f1byqz6t",
155
- "Dlnsje": "fdqxnrd",
156
- "Eqx8gd": ["f1x8rm7i", "ftx9300"],
157
- "bn5sak": "f13zu3lb"
158
- },
159
- "borderThickest": {
160
- "a2br6o": "f1i9snzy",
161
- "Dlnsje": "f19z50l7",
162
- "Eqx8gd": ["f1fgc9m6", "f1d4bgoy"],
163
- "bn5sak": "fkll7mr"
94
+ "E5pizo": "f2aml1u"
164
95
  },
165
96
  "xxs": {
166
97
  "jhia2w": ["f1cjco14", "f13dxjc9"]
@@ -175,11 +106,7 @@ const useStackStyles = /*#__PURE__*/react_1.__styles({
175
106
  "jhia2w": ["flv48ch", "fnh1ydj"]
176
107
  }
177
108
  }, {
178
- "d": [".f1iwjod4::after{content:'';}", ".f1mdlcz9::after{position:absolute;}", ".f15zbnnk::after{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1de97fc::after{border-top-color:var(--colorNeutralBackground2);}", ".fnkdar3::after{border-right-color:var(--colorNeutralBackground2);}", ".f1rue1y9::after{border-left-color:var(--colorNeutralBackground2);}", ".f6bjq4p::after{border-bottom-color:var(--colorNeutralBackground2);}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fiy03ts::after{width:100%;}", ".f5o33kw::after{height:100%;}", ".f5kz84h::after{left:calc(-1 * var(--strokeWidthThick));}", ".f8jassg::after{right:calc(-1 * var(--strokeWidthThick));}", ".f1oigyhu::after{top:calc(-1 * var(--strokeWidthThick));}", ".fozawe0::after{border-top-width:var(--strokeWidthThick);}", ".f15gmigz::after{border-right-width:var(--strokeWidthThick);}", ".f11o3tup::after{border-left-width:var(--strokeWidthThick);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1f2c3j3::after{left:calc(-1 * var(--strokeWidthThicker));}", ".f1g5d141::after{right:calc(-1 * var(--strokeWidthThicker));}", ".f1vvl5ts::after{top:calc(-1 * var(--strokeWidthThicker));}", ".f1gbh4dy::after{border-top-width:var(--strokeWidthThicker);}", ".f1os6oqe::after{border-right-width:var(--strokeWidthThicker);}", ".f4y7ea8::after{border-left-width:var(--strokeWidthThicker);}", ".f1a3lyng::after{border-bottom-width:var(--strokeWidthThicker);}", ".fueot05::after{left:calc(-1 * var(--strokeWidthThickest));}", ".f1mir6xb::after{right:calc(-1 * var(--strokeWidthThickest));}", ".f1izs6vq::after{top:calc(-1 * var(--strokeWidthThickest));}", ".f15ae8rs::after{border-top-width:var(--strokeWidthThickest);}", ".f1c7xjog::after{border-right-width:var(--strokeWidthThickest);}", ".fn35eni::after{border-left-width:var(--strokeWidthThickest);}", ".f9v1pvc::after{border-bottom-width:var(--strokeWidthThickest);}", ".fe2wxzu::after{width:calc(100% + var(--strokeWidthThin) * 2);}", ".fcr18t3::after{height:calc(100% + var(--strokeWidthThin) * 2);}", ".fhjhgwu::after{left:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".fh9v7u1::after{right:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".f1mqssek::after{top:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".f19rfb2x::after{width:calc(100% + var(--strokeWidthThick) * 2);}", ".fk4cr37::after{height:calc(100% + var(--strokeWidthThick) * 2);}", ".foc71j7::after{left:calc(-1 * var(--strokeWidthThick) * 2);}", ".f1xoeo06::after{right:calc(-1 * var(--strokeWidthThick) * 2);}", ".fd6iyyb::after{top:calc(-1 * var(--strokeWidthThick) * 2);}", ".f1byqz6t::after{width:calc(100% + var(--strokeWidthThicker) * 2);}", ".fdqxnrd::after{height:calc(100% + var(--strokeWidthThicker) * 2);}", ".f1x8rm7i::after{left:calc(-1 * var(--strokeWidthThicker) * 2);}", ".ftx9300::after{right:calc(-1 * var(--strokeWidthThicker) * 2);}", ".f13zu3lb::after{top:calc(-1 * var(--strokeWidthThicker) * 2);}", ".f1i9snzy::after{width:calc(100% + var(--strokeWidthThickest) * 2);}", ".f19z50l7::after{height:calc(100% + var(--strokeWidthThickest) * 2);}", ".f1fgc9m6::after{left:calc(-1 * var(--strokeWidthThickest) * 2);}", ".f1d4bgoy::after{right:calc(-1 * var(--strokeWidthThickest) * 2);}", ".fkll7mr::after{top:calc(-1 * var(--strokeWidthThickest) * 2);}", ".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));}"],
179
- "m": [["@media (forced-colors: active){.f1dpauah::after{forced-color-adjust:none;}}", {
180
- "m": "(forced-colors: active)"
181
- }]],
182
- "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;}"]
109
+ "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));}"]
183
110
  });
184
111
  /**
185
112
  * Styles for the spread layout
@@ -300,37 +227,19 @@ exports.useAvatarGroupItemStyles_unstable = useAvatarGroupItemStyles_unstable;
300
227
  * needed for each layout.
301
228
  */
302
229
 
303
- const useGroupChildClassName = (layout, size, isOverflowButton) => {
230
+ const useGroupChildClassName = (layout, size) => {
304
231
  const stackStyles = useStackStyles();
305
232
  const spreadStyles = useSpreadStyles();
306
233
  const layoutClasses = [];
307
234
 
308
235
  if (size) {
309
236
  if (layout === 'stack') {
310
- layoutClasses.push(stackStyles.base);
311
-
312
237
  if (size < 56) {
313
238
  layoutClasses.push(stackStyles.thick);
314
239
  } else if (size < 72) {
315
240
  layoutClasses.push(stackStyles.thicker);
316
241
  } else {
317
242
  layoutClasses.push(stackStyles.thickest);
318
- } // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width
319
- // since the ::after pseudo-element doesn't take the overflowButton's border for its size.
320
-
321
-
322
- if (isOverflowButton) {
323
- layoutClasses.push(stackStyles.overflowButton);
324
-
325
- if (size < 36) {
326
- layoutClasses.push(stackStyles.borderThin);
327
- } else if (size < 56) {
328
- layoutClasses.push(stackStyles.borderThick);
329
- } else if (size < 72) {
330
- layoutClasses.push(stackStyles.borderThicker);
331
- } else {
332
- layoutClasses.push(stackStyles.borderThickest);
333
- }
334
243
  }
335
244
 
336
245
  if (size < 24) {
package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map CHANGED
@@ -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/"}
package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js CHANGED
@@ -23,7 +23,9 @@ const renderAvatarGroupPopover_unstable = (state, contextValues) => {
23
23
  slotProps
24
24
  } = react_utilities_1.getSlots(state);
25
25
  return React.createElement(slots.root, { ...slotProps.root
26
- }, React.createElement(react_popover_1.PopoverTrigger, null, React.createElement(slots.tooltip, { ...slotProps.tooltip
26
+ }, React.createElement(react_popover_1.PopoverTrigger, {
27
+ disableButtonEnhancement: true
28
+ }, React.createElement(slots.tooltip, { ...slotProps.tooltip
27
29
  }, React.createElement(slots.triggerButton, { ...slotProps.triggerButton
28
30
  }))), React.createElement(slots.popoverSurface, { ...slotProps.popoverSurface
29
31
  }, React.createElement(AvatarGroupContext_1.AvatarGroupProvider, {
package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACI,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,aAF+C,KAG7C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAkC,KAAlC,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,cAAD,EAAe,IAAf,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,oBAAA,CAAA,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;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","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>\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/"}
1
+ {"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACI,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,aAF+C,KAG7C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAkC,KAAlC,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,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,oBAAA,CAAA,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;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","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/"}
package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js CHANGED
@@ -255,7 +255,7 @@ const useAvatarGroupPopoverStyles_unstable = state => {
255
255
  const triggerButtonStyles = useTriggerButtonStyles();
256
256
  const contentStyles = useContentStyles();
257
257
  const popoverSurfaceStyles = usePopoverSurfaceStyles();
258
- const groupChildClassName = useAvatarGroupItemStyles_1.useGroupChildClassName(layout, size, true);
258
+ const groupChildClassName = useAvatarGroupItemStyles_1.useGroupChildClassName(layout, size);
259
259
  const triggerButtonClasses = [];
260
260
 
261
261
  if (size < 36) {
package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts"],"names":[],"mappings":"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","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';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots> = {\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/**\n * Styles for the content slot.\n */\nconst useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n ...shorthands.margin('0'),\n ...shorthands.padding('0'),\n },\n});\n\n/**\n * Styles for the popoverSurface slot.\n */\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n ...shorthands.overflow('hidden', 'scroll'),\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n width: '220px',\n },\n});\n\n/**\n * Styles for the triggerButton slot.\n */\nconst 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 ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.padding(0),\n\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n }),\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\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */\nexport const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverState): AvatarGroupPopoverState => {\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, true);\n\n const triggerButtonClasses = [];\n\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\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\n state.triggerButton.className = mergeClasses(\n avatarGroupPopoverClassNames.triggerButton,\n groupChildClassName,\n sizeStyles[size],\n triggerButtonStyles.base,\n layout === 'pie' && triggerButtonStyles.pie,\n triggerButtonStyles.focusIndicator,\n layout !== 'pie' && triggerButtonStyles.states,\n layout !== 'pie' && popoverOpen && triggerButtonStyles.selected,\n ...triggerButtonClasses,\n state.triggerButton.className,\n );\n\n state.content.className = mergeClasses(\n avatarGroupPopoverClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n\n state.popoverSurface.className = mergeClasses(\n avatarGroupPopoverClassNames.popoverSurface,\n popoverSurfaceStyles.base,\n state.popoverSurface.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts"],"names":[],"mappings":"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","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';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots> = {\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/**\n * Styles for the content slot.\n */\nconst useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n ...shorthands.margin('0'),\n ...shorthands.padding('0'),\n },\n});\n\n/**\n * Styles for the popoverSurface slot.\n */\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n ...shorthands.overflow('hidden', 'scroll'),\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n width: '220px',\n },\n});\n\n/**\n * Styles for the triggerButton slot.\n */\nconst 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 ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.padding(0),\n\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n }),\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\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */\nexport const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverState): AvatarGroupPopoverState => {\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\n const triggerButtonClasses = [];\n\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\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\n state.triggerButton.className = mergeClasses(\n avatarGroupPopoverClassNames.triggerButton,\n groupChildClassName,\n sizeStyles[size],\n triggerButtonStyles.base,\n layout === 'pie' && triggerButtonStyles.pie,\n triggerButtonStyles.focusIndicator,\n layout !== 'pie' && triggerButtonStyles.states,\n layout !== 'pie' && popoverOpen && triggerButtonStyles.selected,\n ...triggerButtonClasses,\n state.triggerButton.className,\n );\n\n state.content.className = mergeClasses(\n avatarGroupPopoverClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n\n state.popoverSurface.className = mergeClasses(\n avatarGroupPopoverClassNames.popoverSurface,\n popoverSurfaceStyles.base,\n state.popoverSurface.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-avatar",
3
- "version": "9.2.4",
3
+ "version": "9.2.5",
4
4
  "description": "React components for building Microsoft web experiences.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -29,21 +29,21 @@
29
29
  "devDependencies": {
30
30
  "@fluentui/eslint-plugin": "*",
31
31
  "@fluentui/react-conformance": "*",
32
- "@fluentui/react-conformance-griffel": "9.0.0-beta.16",
32
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.17",
33
33
  "@fluentui/scripts": "^1.0.0",
34
34
  "es6-weak-map": "^2.0.2"
35
35
  },
36
36
  "dependencies": {
37
- "@fluentui/react-badge": "^9.0.10",
38
- "@fluentui/react-context-selector": "^9.0.5",
37
+ "@fluentui/react-badge": "^9.0.11",
38
+ "@fluentui/react-context-selector": "^9.1.0",
39
39
  "@fluentui/react-icons": "^2.0.175",
40
- "@fluentui/react-popover": "^9.2.1",
41
- "@fluentui/react-shared-contexts": "^9.0.2",
42
- "@fluentui/react-tabster": "^9.2.0",
40
+ "@fluentui/react-popover": "^9.3.0",
41
+ "@fluentui/react-shared-contexts": "^9.1.0",
42
+ "@fluentui/react-tabster": "^9.2.1",
43
43
  "@fluentui/react-theme": "^9.1.1",
44
- "@fluentui/react-tooltip": "^9.0.9",
45
- "@fluentui/react-utilities": "^9.1.2",
46
- "@griffel/react": "^1.4.1",
44
+ "@fluentui/react-tooltip": "^9.1.0",
45
+ "@fluentui/react-utilities": "^9.2.0",
46
+ "@griffel/react": "^1.4.2",
47
47
  "tslib": "^2.1.0"
48
48
  },
49
49
  "peerDependencies": {