@fluentui/react-avatar 9.0.3 → 9.1.0

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 (104) hide show
  1. package/CHANGELOG.json +253 -7
  2. package/CHANGELOG.md +56 -8
  3. package/README-AvatarGroup.md +63 -39
  4. package/SPEC-AvatarGroup.md +103 -85
  5. package/dist/index.d.ts +117 -40
  6. package/lib/AvatarGroupPopover.js +2 -0
  7. package/lib/AvatarGroupPopover.js.map +1 -0
  8. package/lib/components/Avatar/useAvatar.js +3 -7
  9. package/lib/components/Avatar/useAvatar.js.map +1 -1
  10. package/lib/components/Avatar/useAvatarStyles.js +27 -5
  11. package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
  12. package/lib/components/AvatarGroup/AvatarGroup.js +4 -2
  13. package/lib/components/AvatarGroup/AvatarGroup.js.map +1 -1
  14. package/lib/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
  15. package/lib/components/AvatarGroup/index.js +1 -0
  16. package/lib/components/AvatarGroup/index.js.map +1 -1
  17. package/lib/components/AvatarGroup/renderAvatarGroup.js +5 -31
  18. package/lib/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
  19. package/lib/components/AvatarGroup/useAvatarGroup.js +4 -62
  20. package/lib/components/AvatarGroup/useAvatarGroup.js.map +1 -1
  21. package/lib/components/AvatarGroup/useAvatarGroupContextValues.js +14 -0
  22. package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -0
  23. package/lib/components/AvatarGroup/useAvatarGroupStyles.js +5 -265
  24. package/lib/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
  25. package/lib/components/AvatarGroupItem/AvatarGroupItem.js +1 -1
  26. package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
  27. package/lib/components/AvatarGroupItem/AvatarGroupItem.types.js.map +1 -1
  28. package/lib/components/AvatarGroupItem/useAvatarGroupItem.js +10 -11
  29. package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
  30. package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js +51 -59
  31. package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
  32. package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js +16 -0
  33. package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -0
  34. package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js +2 -0
  35. package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map +1 -0
  36. package/lib/components/AvatarGroupPopover/index.js +6 -0
  37. package/lib/components/AvatarGroupPopover/index.js.map +1 -0
  38. package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js +23 -0
  39. package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -0
  40. package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js +102 -0
  41. package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -0
  42. package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js +10 -0
  43. package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -0
  44. package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +307 -0
  45. package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -0
  46. package/lib/contexts/AvatarGroupContext.js +7 -3
  47. package/lib/contexts/AvatarGroupContext.js.map +1 -1
  48. package/lib/index.js +4 -2
  49. package/lib/index.js.map +1 -1
  50. package/lib/utils/index.js +1 -0
  51. package/lib/utils/index.js.map +1 -1
  52. package/lib/utils/partitionAvatarGroupItems.js +30 -0
  53. package/lib/utils/partitionAvatarGroupItems.js.map +1 -0
  54. package/lib-commonjs/AvatarGroupPopover.js +10 -0
  55. package/lib-commonjs/AvatarGroupPopover.js.map +1 -0
  56. package/lib-commonjs/components/Avatar/useAvatar.js +2 -7
  57. package/lib-commonjs/components/Avatar/useAvatar.js.map +1 -1
  58. package/lib-commonjs/components/Avatar/useAvatarStyles.js +27 -5
  59. package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
  60. package/lib-commonjs/components/AvatarGroup/AvatarGroup.js +5 -2
  61. package/lib-commonjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
  62. package/lib-commonjs/components/AvatarGroup/index.js +2 -0
  63. package/lib-commonjs/components/AvatarGroup/index.js.map +1 -1
  64. package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js +4 -32
  65. package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
  66. package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js +3 -64
  67. package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js.map +1 -1
  68. package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js +23 -0
  69. package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -0
  70. package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js +3 -265
  71. package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
  72. package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js +2 -2
  73. package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
  74. package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js +8 -9
  75. package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
  76. package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js +52 -60
  77. package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
  78. package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js +29 -0
  79. package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -0
  80. package/lib-commonjs/{contexts/AvatarGroupContext.types.js → components/AvatarGroupPopover/AvatarGroupPopover.types.js} +1 -1
  81. package/lib-commonjs/{contexts/AvatarGroupContext.types.js.map → components/AvatarGroupPopover/AvatarGroupPopover.types.js.map} +0 -0
  82. package/lib-commonjs/components/AvatarGroupPopover/index.js +18 -0
  83. package/lib-commonjs/components/AvatarGroupPopover/index.js.map +1 -0
  84. package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js +36 -0
  85. package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -0
  86. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js +118 -0
  87. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -0
  88. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js +19 -0
  89. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -0
  90. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +321 -0
  91. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -0
  92. package/lib-commonjs/contexts/AvatarGroupContext.js +10 -3
  93. package/lib-commonjs/contexts/AvatarGroupContext.js.map +1 -1
  94. package/lib-commonjs/index.js +61 -1
  95. package/lib-commonjs/index.js.map +1 -1
  96. package/lib-commonjs/utils/index.js +10 -1
  97. package/lib-commonjs/utils/index.js.map +1 -1
  98. package/lib-commonjs/utils/partitionAvatarGroupItems.js +39 -0
  99. package/lib-commonjs/utils/partitionAvatarGroupItems.js.map +1 -0
  100. package/package.json +16 -13
  101. package/MIGRATION-AvatarGroup.md +0 -35
  102. package/dist/tsdoc-metadata.json +0 -11
  103. package/lib/contexts/AvatarGroupContext.types.js +0 -2
  104. package/lib/contexts/AvatarGroupContext.types.js.map +0 -1
@@ -0,0 +1,321 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useAvatarGroupPopoverStyles_unstable = exports.avatarGroupPopoverClassNames = void 0;
7
+
8
+ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
9
+
10
+ const react_1 = /*#__PURE__*/require("@griffel/react");
11
+
12
+ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
13
+
14
+ const useAvatarGroupItemStyles_1 = /*#__PURE__*/require("../AvatarGroupItem/useAvatarGroupItemStyles");
15
+
16
+ const useAvatarStyles_1 = /*#__PURE__*/require("../Avatar/useAvatarStyles");
17
+
18
+ exports.avatarGroupPopoverClassNames = {
19
+ root: 'fui-AvatarGroupPopover',
20
+ content: 'fui-AvatarGroupPopover__content',
21
+ popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',
22
+ tooltip: 'fui-AvatarGroupPopover__tooltip',
23
+ triggerButton: 'fui-AvatarGroupPopover__triggerButton'
24
+ };
25
+ /**
26
+ * Styles for the content slot.
27
+ */
28
+
29
+ const useContentStyles = /*#__PURE__*/react_1.__styles({
30
+ "base": {
31
+ "dclx09": "ftrb29c",
32
+ "B6of3ja": "f1hu3pq6",
33
+ "t21cq0": ["f11qmguv", "f1tyq0we"],
34
+ "jrapky": "f19f4twv",
35
+ "Frg6f3": ["f1tyq0we", "f11qmguv"],
36
+ "z8tnut": "f1g0x7ka",
37
+ "z189sj": ["fhxju0i", "f1cnd47f"],
38
+ "Byoj8tv": "f1qch9an",
39
+ "uwmqm3": ["f1cnd47f", "fhxju0i"]
40
+ }
41
+ }, {
42
+ "d": [".ftrb29c{list-style-type:none;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}"]
43
+ });
44
+ /**
45
+ * Styles for the popoverSurface slot.
46
+ */
47
+
48
+
49
+ const usePopoverSurfaceStyles = /*#__PURE__*/react_1.__styles({
50
+ "base": {
51
+ "Bxyxcbc": "fopcw2o",
52
+ "sshi5w": "f1n5o1gx",
53
+ "B68tc82": "f1p9o1ba",
54
+ "Bmxbyg5": "fqkkaap",
55
+ "z8tnut": "f1kwiid1",
56
+ "z189sj": ["f1vdfbxk", "f1f5gg8d"],
57
+ "Byoj8tv": "f5b47ha",
58
+ "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
59
+ "a9b677": "f13dwy2t"
60
+ }
61
+ }, {
62
+ "d": [".fopcw2o{max-height:220px;}", ".f1n5o1gx{min-height:80px;}", ".f1p9o1ba{overflow-x:hidden;}", ".fqkkaap{overflow-y:scroll;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f13dwy2t{width:220px;}"]
63
+ });
64
+ /**
65
+ * Styles for the triggerButton slot.
66
+ */
67
+
68
+
69
+ const useTriggerButtonStyles = /*#__PURE__*/react_1.__styles({
70
+ "base": {
71
+ "mc9l5x": "ftuwxu6",
72
+ "qhf8xq": "f10pi13n",
73
+ "Bnnss6s": "fi64zpg",
74
+ "Brf1p80": "f4d9j23",
75
+ "Bt984gj": "f122n59",
76
+ "sj55zd": "f19n0e5",
77
+ "De3pzq": "fxugw4r",
78
+ "g2u3we": "fj3muxo",
79
+ "h3c5rm": ["f1akhkt", "f1lxtadh"],
80
+ "B9xav0g": "f1aperda",
81
+ "zhjwy3": ["f1lxtadh", "f1akhkt"],
82
+ "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
83
+ "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
84
+ "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
85
+ "Btl43ni": ["f1s8kh49", "f1djnp8u"],
86
+ "icvyot": "fzkkow9",
87
+ "vrafjx": ["fcdblym", "fjik90z"],
88
+ "oivjwe": "fg706s2",
89
+ "wvpqe5": ["fjik90z", "fcdblym"],
90
+ "z8tnut": "f1g0x7ka",
91
+ "z189sj": ["fhxju0i", "f1cnd47f"],
92
+ "Byoj8tv": "f1qch9an",
93
+ "uwmqm3": ["f1cnd47f", "fhxju0i"],
94
+ "Bjwas2f": "fw33nwi",
95
+ "Bn1d65q": ["f1ptkjjm", "fmzzjfk"],
96
+ "Bxeuatn": "f15j0dln",
97
+ "n51gp8": ["fmzzjfk", "f1ptkjjm"]
98
+ },
99
+ "pie": {
100
+ "De3pzq": "f1c21dwh",
101
+ "g2u3we": "fghlq4f",
102
+ "h3c5rm": ["f1gn591s", "fjscplz"],
103
+ "B9xav0g": "fb073pr",
104
+ "zhjwy3": ["fjscplz", "f1gn591s"],
105
+ "sj55zd": "f44pa96"
106
+ },
107
+ "focusIndicator": {
108
+ "Brovlpu": "ftqa4ok",
109
+ "B486eqv": "f2hkw1w",
110
+ "r6j8yp": "f9sgzds",
111
+ "w235jp": ["fut1j4r", "fkf1fqv"],
112
+ "Bjm0d8m": "f1t0sa4d",
113
+ "jwfw70": ["fkf1fqv", "fut1j4r"],
114
+ "Hbfjuj": "fikr5py",
115
+ "zog540": "f1rsleix",
116
+ "yj03m6": "fv9e16l"
117
+ },
118
+ "pieFocusIndicator": {
119
+ "Brovlpu": "ftqa4ok",
120
+ "B486eqv": "f2hkw1w",
121
+ "oszr8s": "f1y8129k",
122
+ "B50rz4d": ["fu21ej", "f1pmrd9z"],
123
+ "Bb145of": "f1vgtxyk",
124
+ "Bxp30wo": ["f1pmrd9z", "fu21ej"],
125
+ "d5lb0k": "f1pah1tb",
126
+ "Bvq7845": ["f1q2ljzj", "f1cf0pyq"],
127
+ "Bt5y04j": "fgb2zbd",
128
+ "Bt3jgif": ["f1cf0pyq", "f1q2ljzj"],
129
+ "r6j8yp": "fm5t4ci",
130
+ "w235jp": ["f1f04vxt", "f1bag0yd"],
131
+ "Bjm0d8m": "fxk9raq",
132
+ "jwfw70": ["f1bag0yd", "f1f04vxt"]
133
+ },
134
+ "states": {
135
+ "Bi91k9c": "feu1g3u",
136
+ "Jwef8y": "f1knas48",
137
+ "Bgoe8wy": "fvcxoqz",
138
+ "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
139
+ "oetu4i": "f1xlaoq0",
140
+ "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
141
+ "lj723h": "f1g4hkjv",
142
+ "ecr2s2": "fb40n2d",
143
+ "B6oc9vd": "fvs00aa",
144
+ "ak43y8": ["f1assf6x", "f4ruux4"],
145
+ "wmxk5l": "fumykes",
146
+ "B50zh58": ["f4ruux4", "f1assf6x"]
147
+ },
148
+ "selected": {
149
+ "sj55zd": "f14nttnl",
150
+ "De3pzq": "f1nfm20t",
151
+ "g2u3we": "f1ly1fcm",
152
+ "h3c5rm": ["fi8bssc", "fj6btzu"],
153
+ "B9xav0g": "f1s9tnsa",
154
+ "zhjwy3": ["fj6btzu", "fi8bssc"]
155
+ },
156
+ "icon12": {
157
+ "Be2twd7": "f1ugzwwg"
158
+ },
159
+ "icon16": {
160
+ "Be2twd7": "f4ybsrx"
161
+ },
162
+ "icon20": {
163
+ "Be2twd7": "fe5j1ua"
164
+ },
165
+ "icon24": {
166
+ "Be2twd7": "f1rt2boy"
167
+ },
168
+ "icon28": {
169
+ "Be2twd7": "f24l1pt"
170
+ },
171
+ "icon32": {
172
+ "Be2twd7": "ffl51b"
173
+ },
174
+ "icon48": {
175
+ "Be2twd7": "f18m8u13"
176
+ },
177
+ "caption2Strong": {
178
+ "Bahqtrf": "fk6fouc",
179
+ "Be2twd7": "f13mqy1h",
180
+ "Bhrd7zp": "fl43uef",
181
+ "Bg96gwp": "fcpl73t"
182
+ },
183
+ "caption1Strong": {
184
+ "Bahqtrf": "fk6fouc",
185
+ "Be2twd7": "fy9rknc",
186
+ "Bhrd7zp": "fl43uef",
187
+ "Bg96gwp": "fwrc4pm"
188
+ },
189
+ "body1Strong": {
190
+ "Bahqtrf": "fk6fouc",
191
+ "Be2twd7": "fkhj508",
192
+ "Bhrd7zp": "fl43uef",
193
+ "Bg96gwp": "f1i3iumi"
194
+ },
195
+ "subtitle2": {
196
+ "Bahqtrf": "fk6fouc",
197
+ "Be2twd7": "fod5ikn",
198
+ "Bhrd7zp": "fl43uef",
199
+ "Bg96gwp": "faaz57k"
200
+ },
201
+ "subtitle1": {
202
+ "Bahqtrf": "fk6fouc",
203
+ "Be2twd7": "f1pp30po",
204
+ "Bhrd7zp": "fl43uef",
205
+ "Bg96gwp": "f106mvju"
206
+ },
207
+ "title3": {
208
+ "Bahqtrf": "fk6fouc",
209
+ "Be2twd7": "f1x0m3f5",
210
+ "Bhrd7zp": "fl43uef",
211
+ "Bg96gwp": "fb86gi6"
212
+ },
213
+ "borderThin": {
214
+ "B4j52fo": "f192inf7",
215
+ "Bekrc4i": ["f5tn483", "f1ojsxk5"],
216
+ "Bn0qgzm": "f1vxd6vx",
217
+ "ibv6hh": ["f1ojsxk5", "f5tn483"]
218
+ },
219
+ "borderThick": {
220
+ "B4j52fo": "f18zi460",
221
+ "Bekrc4i": ["f1wpluaz", "fsfsuhs"],
222
+ "Bn0qgzm": "fmklw6v",
223
+ "ibv6hh": ["fsfsuhs", "f1wpluaz"]
224
+ },
225
+ "borderThicker": {
226
+ "B4j52fo": "fgx37oo",
227
+ "Bekrc4i": ["f130t4y6", "f1efpmoh"],
228
+ "Bn0qgzm": "fv51ejd",
229
+ "ibv6hh": ["f1efpmoh", "f130t4y6"]
230
+ },
231
+ "borderThickest": {
232
+ "B4j52fo": "fwn6jck",
233
+ "Bekrc4i": ["figl7jc", "f1g0iy8l"],
234
+ "Bn0qgzm": "f1b8shu7",
235
+ "ibv6hh": ["f1g0iy8l", "figl7jc"]
236
+ }
237
+ }, {
238
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f9sgzds.fui-focus-visible{border-top-color:transparent;}", ".fut1j4r.fui-focus-visible{border-right-color:transparent;}", ".fkf1fqv.fui-focus-visible{border-left-color:transparent;}", ".f1t0sa4d.fui-focus-visible{border-bottom-color:transparent;}", ".fikr5py.fui-focus-visible{outline-color:var(--colorStrokeFocus2);}", ".f1rsleix.fui-focus-visible{outline-width:var(--strokeWidthThick);}", ".fv9e16l.fui-focus-visible{outline-style:solid;}", ".f1y8129k.fui-focus-visible{border-top-width:var(--strokeWidthThick);}", ".fu21ej.fui-focus-visible{border-right-width:var(--strokeWidthThick);}", ".f1pmrd9z.fui-focus-visible{border-left-width:var(--strokeWidthThick);}", ".f1vgtxyk.fui-focus-visible{border-bottom-width:var(--strokeWidthThick);}", ".f1pah1tb.fui-focus-visible{border-top-style:solid;}", ".f1q2ljzj.fui-focus-visible{border-right-style:solid;}", ".f1cf0pyq.fui-focus-visible{border-left-style:solid;}", ".fgb2zbd.fui-focus-visible{border-bottom-style:solid;}", ".fm5t4ci.fui-focus-visible{border-top-color:var(--colorStrokeFocus2);}", ".f1f04vxt.fui-focus-visible{border-right-color:var(--colorStrokeFocus2);}", ".f1bag0yd.fui-focus-visible{border-left-color:var(--colorStrokeFocus2);}", ".fxk9raq.fui-focus-visible{border-bottom-color:var(--colorStrokeFocus2);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}", ".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}", ".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}", ".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
239
+ "m": [["@media (forced-colors: active){.fw33nwi{border-top-color:CanvasText;}}", {
240
+ "m": "(forced-colors: active)"
241
+ }], ["@media (forced-colors: active){.f1ptkjjm{border-right-color:CanvasText;}.fmzzjfk{border-left-color:CanvasText;}}", {
242
+ "m": "(forced-colors: active)"
243
+ }], ["@media (forced-colors: active){.f15j0dln{border-bottom-color:CanvasText;}}", {
244
+ "m": "(forced-colors: active)"
245
+ }], ["@media (forced-colors: active){.fmzzjfk{border-left-color:CanvasText;}.f1ptkjjm{border-right-color:CanvasText;}}", {
246
+ "m": "(forced-colors: active)"
247
+ }]],
248
+ "f": [".ftqa4ok:focus{outline-style:none;}"],
249
+ "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
250
+ "h": [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}"],
251
+ "a": [".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}"]
252
+ });
253
+ /**
254
+ * Apply styling to the AvatarGroupPopover slots based on the state
255
+ */
256
+
257
+
258
+ const useAvatarGroupPopoverStyles_unstable = state => {
259
+ const {
260
+ indicator,
261
+ size,
262
+ layout,
263
+ popoverOpen
264
+ } = state;
265
+ const sizeStyles = useAvatarStyles_1.useSizeStyles();
266
+ const triggerButtonStyles = useTriggerButtonStyles();
267
+ const contentStyles = useContentStyles();
268
+ const popoverSurfaceStyles = usePopoverSurfaceStyles();
269
+ const groupChildClassName = useAvatarGroupItemStyles_1.useGroupChildClassName(layout, size, true);
270
+ const triggerButtonClasses = [];
271
+
272
+ if (size < 36) {
273
+ triggerButtonClasses.push(triggerButtonStyles.borderThin);
274
+ } else if (size < 56) {
275
+ triggerButtonClasses.push(triggerButtonStyles.borderThick);
276
+ } else if (size < 72) {
277
+ triggerButtonClasses.push(triggerButtonStyles.borderThicker);
278
+ } else {
279
+ triggerButtonClasses.push(triggerButtonStyles.borderThickest);
280
+ }
281
+
282
+ if (indicator === 'count') {
283
+ if (size <= 24) {
284
+ triggerButtonClasses.push(triggerButtonStyles.caption2Strong);
285
+ } else if (size <= 28) {
286
+ triggerButtonClasses.push(triggerButtonStyles.caption1Strong);
287
+ } else if (size <= 40) {
288
+ triggerButtonClasses.push(triggerButtonStyles.body1Strong);
289
+ } else if (size <= 56) {
290
+ triggerButtonClasses.push(triggerButtonStyles.subtitle2);
291
+ } else if (size <= 96) {
292
+ triggerButtonClasses.push(triggerButtonStyles.subtitle1);
293
+ } else {
294
+ triggerButtonClasses.push(triggerButtonStyles.title3);
295
+ }
296
+ } else {
297
+ if (size <= 16) {
298
+ triggerButtonClasses.push(triggerButtonStyles.icon12);
299
+ } else if (size <= 24) {
300
+ triggerButtonClasses.push(triggerButtonStyles.icon16);
301
+ } else if (size <= 40) {
302
+ triggerButtonClasses.push(triggerButtonStyles.icon20);
303
+ } else if (size <= 48) {
304
+ triggerButtonClasses.push(triggerButtonStyles.icon24);
305
+ } else if (size <= 56) {
306
+ triggerButtonClasses.push(triggerButtonStyles.icon28);
307
+ } else if (size <= 72) {
308
+ triggerButtonClasses.push(triggerButtonStyles.icon32);
309
+ } else {
310
+ triggerButtonClasses.push(triggerButtonStyles.icon48);
311
+ }
312
+ }
313
+
314
+ state.triggerButton.className = react_1.mergeClasses(exports.avatarGroupPopoverClassNames.triggerButton, groupChildClassName, sizeStyles[size], triggerButtonStyles.base, layout === 'pie' && triggerButtonStyles.pie, layout === 'pie' && triggerButtonStyles.pieFocusIndicator, layout !== 'pie' && triggerButtonStyles.focusIndicator, layout !== 'pie' && triggerButtonStyles.states, layout !== 'pie' && popoverOpen && triggerButtonStyles.selected, ...triggerButtonClasses, state.triggerButton.className);
315
+ state.content.className = react_1.mergeClasses(exports.avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
316
+ state.popoverSurface.className = react_1.mergeClasses(exports.avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
317
+ return state;
318
+ };
319
+
320
+ exports.useAvatarGroupPopoverStyles_unstable = useAvatarGroupPopoverStyles_unstable;
321
+ //# sourceMappingURL=useAvatarGroupPopoverStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,6CAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIa,OAAA,CAAA,4BAAA,GAAwE;EACnF,IAAI,EAAE,wBAD6E;EAEnF,OAAO,EAAE,iCAF0E;EAGnF,cAAc,EAAE,wCAHmE;EAInF,OAAO,EAAE,iCAJ0E;EAKnF,aAAa,EAAE;AALoE,CAAxE;AAQb;;AAEG;;AACH,MAAM,gBAAgB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAzB;AAQA;;AAEG;;;AACH,MAAM,uBAAuB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAhC;AAUA;;AAEG;;;AACH,MAAM,sBAAsB,gBAAG,OAAA,SAAA;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;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;AA6EA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,MAAM;IAAE,SAAF;IAAa,IAAb;IAAmB,MAAnB;IAA2B;EAA3B,IAA2C,KAAjD;EACA,MAAM,UAAU,GAAG,iBAAA,CAAA,aAAA,EAAnB;EACA,MAAM,mBAAmB,GAAG,sBAAsB,EAAlD;EACA,MAAM,aAAa,GAAG,gBAAgB,EAAtC;EACA,MAAM,oBAAoB,GAAG,uBAAuB,EAApD;EACA,MAAM,mBAAmB,GAAG,0BAAA,CAAA,sBAAA,CAAuB,MAAvB,EAA+B,IAA/B,EAAqC,IAArC,CAA5B;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,OAAA,CAAA,YAAA,CAC9B,OAAA,CAAA,4BAAA,CAA6B,aADC,EAE9B,mBAF8B,EAG9B,UAAU,CAAC,IAAD,CAHoB,EAI9B,mBAAmB,CAAC,IAJU,EAK9B,MAAM,KAAK,KAAX,IAAoB,mBAAmB,CAAC,GALV,EAM9B,MAAM,KAAK,KAAX,IAAoB,mBAAmB,CAAC,iBANV,EAO9B,MAAM,KAAK,KAAX,IAAoB,mBAAmB,CAAC,cAPV,EAQ9B,MAAM,KAAK,KAAX,IAAoB,mBAAmB,CAAC,MARV,EAS9B,MAAM,KAAK,KAAX,IAAoB,WAApB,IAAmC,mBAAmB,CAAC,QATzB,EAU9B,GAAG,oBAV2B,EAW9B,KAAK,CAAC,aAAN,CAAoB,SAXU,CAAhC;EAcA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CACxB,OAAA,CAAA,4BAAA,CAA6B,OADL,EAExB,aAAa,CAAC,IAFU,EAGxB,KAAK,CAAC,OAAN,CAAc,SAHU,CAA1B;EAMA,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAC/B,OAAA,CAAA,4BAAA,CAA6B,cADE,EAE/B,oBAAoB,CAAC,IAFU,EAG/B,KAAK,CAAC,cAAN,CAAqB,SAHU,CAAjC;EAMA,OAAO,KAAP;AACD,CA/EM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","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 // These styles match the default button styles.\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: tokens.colorStrokeFocus2,\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n }),\n\n // This custom focus indicator is required for the pie layout due to the clip-path applied to the root\n pieFocusIndicator: 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 layout === 'pie' && triggerButtonStyles.pieFocusIndicator,\n layout !== 'pie' && 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/"}
@@ -3,13 +3,20 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.AvatarGroupContext = void 0;
6
+ exports.useAvatarGroupContext_unstable = exports.AvatarGroupProvider = exports.AvatarGroupContext = void 0;
7
7
 
8
8
  const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
9
9
  /**
10
- * AvatarGroupContext is provided by AvatarGroup, and is consumed by Avatar to determine default values of some props.
10
+ * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine
11
+ * default values of some props.
11
12
  */
12
13
 
13
14
 
14
- exports.AvatarGroupContext = /*#__PURE__*/react_context_selector_1.createContext({});
15
+ exports.AvatarGroupContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
16
+ const avatarGroupContextDefaultValue = {};
17
+ exports.AvatarGroupProvider = exports.AvatarGroupContext.Provider;
18
+
19
+ const useAvatarGroupContext_unstable = selector => react_context_selector_1.useContextSelector(exports.AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));
20
+
21
+ exports.useAvatarGroupContext_unstable = useAvatarGroupContext_unstable;
15
22
  //# sourceMappingURL=AvatarGroupContext.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["contexts/AvatarGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,kBAAA,gBAAuD,wBAAA,CAAA,aAAA,CAAc,EAAd,CAAvD","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from './AvatarGroupContext.types';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup, and is consumed by Avatar to determine default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext({});\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["contexts/AvatarGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,kBAAA,gBAAuD,wBAAA,CAAA,aAAA,CAClE,SADkE,CAAvD;AAIb,MAAM,8BAA8B,GAA4B,EAAhE;AAEa,OAAA,CAAA,mBAAA,GAAsB,OAAA,CAAA,kBAAA,CAAmB,QAAzC;;AAEN,MAAM,8BAA8B,GAAO,QAAJ,IAC5C,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,kBAAnB,EAAuC,CAAC,GAAG,GAAG,8BAAP,KAA0C,QAAQ,CAAC,GAAD,CAAzF,CADK;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useAvatarGroupItem_unstable = exports.useAvatarGroupItemStyles_unstable = exports.renderAvatarGroupItem_unstable = exports.avatarGroupItemClassNames = exports.AvatarGroupItem = exports.useAvatarGroup_unstable = exports.useAvatarGroupStyles_unstable = exports.renderAvatarGroup_unstable = exports.avatarGroupClassNames = exports.AvatarGroup = exports.getInitials = exports.useAvatar_unstable = exports.useAvatarStyles_unstable = exports.renderAvatar_unstable = exports.avatarClassNames = exports.Avatar = void 0;
6
+ exports.useAvatarGroupContext_unstable = exports.AvatarGroupProvider = exports.useAvatarGroupPopover_unstable = exports.useAvatarGroupPopoverStyles_unstable = exports.renderAvatarGroupPopover_unstable = exports.avatarGroupPopoverClassNames = exports.AvatarGroupPopover = exports.useAvatarGroupItem_unstable = exports.useAvatarGroupItemStyles_unstable = exports.renderAvatarGroupItem_unstable = exports.avatarGroupItemClassNames = exports.AvatarGroupItem = exports.useAvatarGroup_unstable = exports.useAvatarGroupStyles_unstable = exports.useAvatarGroupContextValues = exports.renderAvatarGroup_unstable = exports.avatarGroupClassNames = exports.AvatarGroup = exports.partitionAvatarGroupItems = exports.getInitials = exports.useAvatar_unstable = exports.useAvatarStyles_unstable = exports.renderAvatar_unstable = exports.avatarClassNames = exports.Avatar = void 0;
7
7
 
8
8
  var Avatar_1 = /*#__PURE__*/require("./Avatar");
9
9
 
@@ -46,6 +46,12 @@ Object.defineProperty(exports, "getInitials", {
46
46
  return index_1.getInitials;
47
47
  }
48
48
  });
49
+ Object.defineProperty(exports, "partitionAvatarGroupItems", {
50
+ enumerable: true,
51
+ get: function () {
52
+ return index_1.partitionAvatarGroupItems;
53
+ }
54
+ });
49
55
 
50
56
  var AvatarGroup_1 = /*#__PURE__*/require("./AvatarGroup");
51
57
 
@@ -67,6 +73,12 @@ Object.defineProperty(exports, "renderAvatarGroup_unstable", {
67
73
  return AvatarGroup_1.renderAvatarGroup_unstable;
68
74
  }
69
75
  });
76
+ Object.defineProperty(exports, "useAvatarGroupContextValues", {
77
+ enumerable: true,
78
+ get: function () {
79
+ return AvatarGroup_1.useAvatarGroupContextValues;
80
+ }
81
+ });
70
82
  Object.defineProperty(exports, "useAvatarGroupStyles_unstable", {
71
83
  enumerable: true,
72
84
  get: function () {
@@ -112,4 +124,52 @@ Object.defineProperty(exports, "useAvatarGroupItem_unstable", {
112
124
  return AvatarGroupItem_1.useAvatarGroupItem_unstable;
113
125
  }
114
126
  });
127
+
128
+ var AvatarGroupPopover_1 = /*#__PURE__*/require("./AvatarGroupPopover");
129
+
130
+ Object.defineProperty(exports, "AvatarGroupPopover", {
131
+ enumerable: true,
132
+ get: function () {
133
+ return AvatarGroupPopover_1.AvatarGroupPopover;
134
+ }
135
+ });
136
+ Object.defineProperty(exports, "avatarGroupPopoverClassNames", {
137
+ enumerable: true,
138
+ get: function () {
139
+ return AvatarGroupPopover_1.avatarGroupPopoverClassNames;
140
+ }
141
+ });
142
+ Object.defineProperty(exports, "renderAvatarGroupPopover_unstable", {
143
+ enumerable: true,
144
+ get: function () {
145
+ return AvatarGroupPopover_1.renderAvatarGroupPopover_unstable;
146
+ }
147
+ });
148
+ Object.defineProperty(exports, "useAvatarGroupPopoverStyles_unstable", {
149
+ enumerable: true,
150
+ get: function () {
151
+ return AvatarGroupPopover_1.useAvatarGroupPopoverStyles_unstable;
152
+ }
153
+ });
154
+ Object.defineProperty(exports, "useAvatarGroupPopover_unstable", {
155
+ enumerable: true,
156
+ get: function () {
157
+ return AvatarGroupPopover_1.useAvatarGroupPopover_unstable;
158
+ }
159
+ });
160
+
161
+ var index_2 = /*#__PURE__*/require("./contexts/index");
162
+
163
+ Object.defineProperty(exports, "AvatarGroupProvider", {
164
+ enumerable: true,
165
+ get: function () {
166
+ return index_2.AvatarGroupProvider;
167
+ }
168
+ });
169
+ Object.defineProperty(exports, "useAvatarGroupContext_unstable", {
170
+ enumerable: true,
171
+ get: function () {
172
+ return index_2.useAvatarGroupContext_unstable;
173
+ }
174
+ });
115
175
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n Avatar,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials } from './utils/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n renderAvatarGroup_unstable,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type { AvatarGroupProps, AvatarGroupSlots, AvatarGroupState } from './AvatarGroup';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n Avatar,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport {\n AvatarGroupPopover,\n avatarGroupPopoverClassNames,\n renderAvatarGroupPopover_unstable,\n useAvatarGroupPopoverStyles_unstable,\n useAvatarGroupPopover_unstable,\n} from './AvatarGroupPopover';\nexport type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';\nexport { AvatarGroupProvider, useAvatarGroupContext_unstable } from './contexts/index';\n"],"sourceRoot":"../src/"}
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.getInitials = void 0;
6
+ exports.partitionAvatarGroupItems = exports.getInitials = void 0;
7
7
 
8
8
  var getInitials_1 = /*#__PURE__*/require("./getInitials");
9
9
 
@@ -13,4 +13,13 @@ Object.defineProperty(exports, "getInitials", {
13
13
  return getInitials_1.getInitials;
14
14
  }
15
15
  });
16
+
17
+ var partitionAvatarGroupItems_1 = /*#__PURE__*/require("./partitionAvatarGroupItems");
18
+
19
+ Object.defineProperty(exports, "partitionAvatarGroupItems", {
20
+ enumerable: true,
21
+ get: function () {
22
+ return partitionAvatarGroupItems_1.partitionAvatarGroupItems;
23
+ }
24
+ });
16
25
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["utils/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,WAAA;EAAW;AAAX,CAAA","sourcesContent":["export { getInitials } from './getInitials';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["utils/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,WAAA;EAAW;AAAX,CAAA;;AACT,IAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,2BAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA","sourcesContent":["export { getInitials } from './getInitials';\nexport { partitionAvatarGroupItems } from './partitionAvatarGroupItems';\nexport type { PartitionAvatarGroupItemsOptions } from './partitionAvatarGroupItems';\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.partitionAvatarGroupItems = void 0;
7
+ /**
8
+ * Get the inline items and overflowing items based on the array of AvatarGroupItems needed for AvatarGroup.
9
+ *
10
+ * @param options - Configure the partition options
11
+ *
12
+ * @returns Two arrays split into inline items and overflow items based on maxInlineItems.
13
+ */
14
+
15
+ const partitionAvatarGroupItems = options => {
16
+ var _a;
17
+
18
+ const {
19
+ items
20
+ } = options;
21
+ const isPie = options.layout === 'pie';
22
+
23
+ if (isPie) {
24
+ return {
25
+ inlineItems: items.slice(0, 3),
26
+ overflowItems: items
27
+ };
28
+ }
29
+
30
+ const maxInlineItems = (_a = options.maxInlineItems) !== null && _a !== void 0 ? _a : 5;
31
+ const inlineCount = -(maxInlineItems - (items.length > maxInlineItems ? 1 : 0));
32
+ return {
33
+ inlineItems: items.slice(inlineCount),
34
+ overflowItems: items.slice(0, inlineCount)
35
+ };
36
+ };
37
+
38
+ exports.partitionAvatarGroupItems = partitionAvatarGroupItems;
39
+ //# sourceMappingURL=partitionAvatarGroupItems.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["utils/partitionAvatarGroupItems.ts"],"names":[],"mappings":";;;;;;AAMA;;;;;;AAMG;;AACI,MAAM,yBAAyB,GAAO,OAAJ,IAAoD;;;EAC3F,MAAM;IAAE;EAAF,IAAY,OAAlB;EACA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAR,KAAmB,KAAjC;;EAEA,IAAI,KAAJ,EAAW;IACT,OAAO;MACL,WAAW,EAAE,KAAK,CAAC,KAAN,CAAY,CAAZ,EAAe,CAAf,CADR;MAEL,aAAa,EAAE;IAFV,CAAP;EAID;;EAED,MAAM,cAAc,GAAG,CAAA,EAAA,GAAA,OAAO,CAAC,cAAR,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,EAAtB,GAA0B,CAAjD;EACA,MAAM,WAAW,GAAG,EAAE,cAAc,IAAI,KAAK,CAAC,MAAN,GAAe,cAAf,GAAgC,CAAhC,GAAoC,CAAxC,CAAhB,CAApB;EAEA,OAAO;IACL,WAAW,EAAE,KAAK,CAAC,KAAN,CAAY,WAAZ,CADR;IAEL,aAAa,EAAE,KAAK,CAAC,KAAN,CAAY,CAAZ,EAAe,WAAf;EAFV,CAAP;AAID,CAlBM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["export type PartitionAvatarGroupItemsOptions<T> = {\n items: readonly T[];\n layout?: 'spread' | 'stack' | 'pie';\n maxInlineItems?: number;\n};\n\n/**\n * Get the inline items and overflowing items based on the array of AvatarGroupItems needed for AvatarGroup.\n *\n * @param options - Configure the partition options\n *\n * @returns Two arrays split into inline items and overflow items based on maxInlineItems.\n */\nexport const partitionAvatarGroupItems = <T>(options: PartitionAvatarGroupItemsOptions<T>) => {\n const { items } = options;\n const isPie = options.layout === 'pie';\n\n if (isPie) {\n return {\n inlineItems: items.slice(0, 3),\n overflowItems: items,\n };\n }\n\n const maxInlineItems = options.maxInlineItems ?? 5;\n const inlineCount = -(maxInlineItems - (items.length > maxInlineItems ? 1 : 0));\n\n return {\n inlineItems: items.slice(inlineCount),\n overflowItems: items.slice(0, inlineCount),\n };\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-avatar",
3
- "version": "9.0.3",
3
+ "version": "9.1.0",
4
4
  "description": "React components for building Microsoft web experiences.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -19,30 +19,32 @@
19
19
  "just": "just-scripts",
20
20
  "lint": "just-scripts lint",
21
21
  "start": "yarn storybook",
22
+ "e2e": "yarn cypress run --component",
23
+ "e2e:local": "yarn cypress open --component",
22
24
  "test": "jest --passWithNoTests",
23
25
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
26
  "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-avatar/src && yarn docs",
25
- "storybook": "node ../../../scripts/storybook/runner",
27
+ "storybook": "start-storybook",
26
28
  "type-check": "tsc -b tsconfig.json"
27
29
  },
28
30
  "devDependencies": {
29
31
  "@fluentui/eslint-plugin": "*",
30
32
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.11",
33
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.13",
32
34
  "@fluentui/scripts": "^1.0.0",
33
35
  "es6-weak-map": "^2.0.2"
34
36
  },
35
37
  "dependencies": {
36
- "@fluentui/react-badge": "^9.0.3",
37
- "@fluentui/react-context-selector": "^9.0.2",
38
+ "@fluentui/react-badge": "^9.0.5",
39
+ "@fluentui/react-context-selector": "^9.0.3",
38
40
  "@fluentui/react-icons": "^2.0.175",
39
- "@fluentui/react-popover": "^9.0.3",
40
- "@fluentui/react-shared-contexts": "^9.0.0",
41
- "@fluentui/react-tabster": "^9.0.3",
42
- "@fluentui/react-theme": "^9.0.0",
43
- "@fluentui/react-tooltip": "^9.0.3",
44
- "@fluentui/react-utilities": "^9.0.2",
45
- "@griffel/react": "^1.2.0",
41
+ "@fluentui/react-popover": "^9.1.0",
42
+ "@fluentui/react-shared-contexts": "^9.0.1",
43
+ "@fluentui/react-tabster": "^9.1.1",
44
+ "@fluentui/react-theme": "^9.1.0",
45
+ "@fluentui/react-tooltip": "^9.0.5",
46
+ "@fluentui/react-utilities": "^9.1.0",
47
+ "@griffel/react": "^1.3.0",
46
48
  "tslib": "^2.1.0"
47
49
  },
48
50
  "peerDependencies": {
@@ -54,7 +56,8 @@
54
56
  },
55
57
  "beachball": {
56
58
  "disallowedChangeTypes": [
57
- "major"
59
+ "major",
60
+ "prerelease"
58
61
  ]
59
62
  },
60
63
  "exports": {