@fluentui/react-components 9.7.0 → 9.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,448 @@
2
2
  "name": "@fluentui/react-components",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 11 Nov 2022 14:53:16 GMT",
5
+ "date": "Thu, 17 Nov 2022 23:02:27 GMT",
6
+ "tag": "@fluentui/react-components_v9.7.1",
7
+ "version": "9.7.1",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "martinhochel@microsoft.com",
12
+ "package": "@fluentui/react-toolbar",
13
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
14
+ "comment": "chore: update package scaffold"
15
+ },
16
+ {
17
+ "author": "chassunc@microsoft.com",
18
+ "package": "@fluentui/react-toolbar",
19
+ "commit": "4f5eec8081eed87fce6e8c4a071fb48e37629d1c",
20
+ "comment": "chore: add onClick on test title"
21
+ },
22
+ {
23
+ "author": "martinhochel@microsoft.com",
24
+ "package": "@fluentui/react-tooltip",
25
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
26
+ "comment": "chore: update package scaffold"
27
+ },
28
+ {
29
+ "author": "martinhochel@microsoft.com",
30
+ "package": "@fluentui/react-utilities",
31
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
32
+ "comment": "chore: update package scaffold"
33
+ },
34
+ {
35
+ "author": "martinhochel@microsoft.com",
36
+ "package": "@fluentui/babel-preset-global-context",
37
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
38
+ "comment": "chore: update package scaffold"
39
+ },
40
+ {
41
+ "author": "martinhochel@microsoft.com",
42
+ "package": "@fluentui/global-context",
43
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
44
+ "comment": "chore: update package scaffold"
45
+ },
46
+ {
47
+ "author": "martinhochel@microsoft.com",
48
+ "package": "@fluentui/keyboard-keys",
49
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
50
+ "comment": "chore: update package scaffold"
51
+ },
52
+ {
53
+ "author": "martinhochel@microsoft.com",
54
+ "package": "@fluentui/priority-overflow",
55
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
56
+ "comment": "chore: update package scaffold"
57
+ },
58
+ {
59
+ "author": "martinhochel@microsoft.com",
60
+ "package": "@fluentui/react-accordion",
61
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
62
+ "comment": "chore: update package scaffold"
63
+ },
64
+ {
65
+ "author": "martinhochel@microsoft.com",
66
+ "package": "@fluentui/react-alert",
67
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
68
+ "comment": "chore: update package scaffold"
69
+ },
70
+ {
71
+ "author": "martinhochel@microsoft.com",
72
+ "package": "@fluentui/react-aria",
73
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
74
+ "comment": "chore: update package scaffold"
75
+ },
76
+ {
77
+ "author": "martinhochel@microsoft.com",
78
+ "package": "@fluentui/react-avatar",
79
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
80
+ "comment": "chore: update package scaffold"
81
+ },
82
+ {
83
+ "author": "martinhochel@microsoft.com",
84
+ "package": "@fluentui/react-badge",
85
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
86
+ "comment": "chore: update package scaffold"
87
+ },
88
+ {
89
+ "author": "martinhochel@microsoft.com",
90
+ "package": "@fluentui/react-button",
91
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
92
+ "comment": "chore: update package scaffold"
93
+ },
94
+ {
95
+ "author": "martinhochel@microsoft.com",
96
+ "package": "@fluentui/react-card",
97
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
98
+ "comment": "chore: update package scaffold"
99
+ },
100
+ {
101
+ "author": "martinhochel@microsoft.com",
102
+ "package": "@fluentui/react-checkbox",
103
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
104
+ "comment": "chore: update package scaffold"
105
+ },
106
+ {
107
+ "author": "martinhochel@microsoft.com",
108
+ "package": "@fluentui/react-combobox",
109
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
110
+ "comment": "chore: update package scaffold"
111
+ },
112
+ {
113
+ "author": "sarah.higley@microsoft.com",
114
+ "package": "@fluentui/react-combobox",
115
+ "commit": "7fde358cdf0a2caac13bd79d3af893d435c81e33",
116
+ "comment": "feat: add Accessibility section to Dropdown docs page"
117
+ },
118
+ {
119
+ "author": "martinhochel@microsoft.com",
120
+ "package": "@fluentui/react-components",
121
+ "commit": "a412f34094516f3ad80f55d8c38c3dcc1bbe9408",
122
+ "comment": "refactor: use getPackageStoriesGlob instead of invalid/duplicated local getVnextStories"
123
+ },
124
+ {
125
+ "author": "martinhochel@microsoft.com",
126
+ "package": "@fluentui/react-components",
127
+ "commit": "131d20e15d6c59dce2dcbbd8794b5ee75701a670",
128
+ "comment": "chore(react-components): align storybook configuration with rest of the suite"
129
+ },
130
+ {
131
+ "author": "martinhochel@microsoft.com",
132
+ "package": "@fluentui/react-components",
133
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
134
+ "comment": "chore: update package scaffold"
135
+ },
136
+ {
137
+ "author": "martinhochel@microsoft.com",
138
+ "package": "@fluentui/react-conformance-griffel",
139
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
140
+ "comment": "chore: update package scaffold"
141
+ },
142
+ {
143
+ "author": "martinhochel@microsoft.com",
144
+ "package": "@fluentui/react-context-selector",
145
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
146
+ "comment": "chore: update package scaffold"
147
+ },
148
+ {
149
+ "author": "martinhochel@microsoft.com",
150
+ "package": "@fluentui/react-dialog",
151
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
152
+ "comment": "chore: update package scaffold"
153
+ },
154
+ {
155
+ "author": "martinhochel@microsoft.com",
156
+ "package": "@fluentui/react-divider",
157
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
158
+ "comment": "chore: update package scaffold"
159
+ },
160
+ {
161
+ "author": "martinhochel@microsoft.com",
162
+ "package": "@fluentui/react-field",
163
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
164
+ "comment": "chore: update package scaffold"
165
+ },
166
+ {
167
+ "author": "martinhochel@microsoft.com",
168
+ "package": "@fluentui/react-image",
169
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
170
+ "comment": "chore: update package scaffold"
171
+ },
172
+ {
173
+ "author": "martinhochel@microsoft.com",
174
+ "package": "@fluentui/react-input",
175
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
176
+ "comment": "chore: update package scaffold"
177
+ },
178
+ {
179
+ "author": "martinhochel@microsoft.com",
180
+ "package": "@fluentui/react-label",
181
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
182
+ "comment": "chore: update package scaffold"
183
+ },
184
+ {
185
+ "author": "martinhochel@microsoft.com",
186
+ "package": "@fluentui/react-link",
187
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
188
+ "comment": "chore: update package scaffold"
189
+ },
190
+ {
191
+ "author": "martinhochel@microsoft.com",
192
+ "package": "@fluentui/react-menu",
193
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
194
+ "comment": "chore: update package scaffold"
195
+ },
196
+ {
197
+ "author": "martinhochel@microsoft.com",
198
+ "package": "@fluentui/react-overflow",
199
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
200
+ "comment": "chore: update package scaffold"
201
+ },
202
+ {
203
+ "author": "martinhochel@microsoft.com",
204
+ "package": "@fluentui/react-persona",
205
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
206
+ "comment": "chore: update package scaffold"
207
+ },
208
+ {
209
+ "author": "martinhochel@microsoft.com",
210
+ "package": "@fluentui/react-popover",
211
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
212
+ "comment": "chore: update package scaffold"
213
+ },
214
+ {
215
+ "author": "martinhochel@microsoft.com",
216
+ "package": "@fluentui/react-portal",
217
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
218
+ "comment": "chore: update package scaffold"
219
+ },
220
+ {
221
+ "author": "martinhochel@microsoft.com",
222
+ "package": "@fluentui/react-portal-compat",
223
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
224
+ "comment": "chore: update package scaffold"
225
+ },
226
+ {
227
+ "author": "martinhochel@microsoft.com",
228
+ "package": "@fluentui/react-portal-compat-context",
229
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
230
+ "comment": "chore: update package scaffold"
231
+ },
232
+ {
233
+ "author": "martinhochel@microsoft.com",
234
+ "package": "@fluentui/react-positioning",
235
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
236
+ "comment": "chore: update package scaffold"
237
+ },
238
+ {
239
+ "author": "martinhochel@microsoft.com",
240
+ "package": "@fluentui/react-progress",
241
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
242
+ "comment": "chore: update package scaffold"
243
+ },
244
+ {
245
+ "author": "martinhochel@microsoft.com",
246
+ "package": "@fluentui/react-provider",
247
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
248
+ "comment": "chore: update package scaffold"
249
+ },
250
+ {
251
+ "author": "martinhochel@microsoft.com",
252
+ "package": "@fluentui/react-radio",
253
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
254
+ "comment": "chore: update package scaffold"
255
+ },
256
+ {
257
+ "author": "martinhochel@microsoft.com",
258
+ "package": "@fluentui/react-select",
259
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
260
+ "comment": "chore: update package scaffold"
261
+ },
262
+ {
263
+ "author": "martinhochel@microsoft.com",
264
+ "package": "@fluentui/react-shared-contexts",
265
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
266
+ "comment": "chore: update package scaffold"
267
+ },
268
+ {
269
+ "author": "martinhochel@microsoft.com",
270
+ "package": "@fluentui/react-slider",
271
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
272
+ "comment": "chore: update package scaffold"
273
+ },
274
+ {
275
+ "author": "martinhochel@microsoft.com",
276
+ "package": "@fluentui/react-spinbutton",
277
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
278
+ "comment": "chore: update package scaffold"
279
+ },
280
+ {
281
+ "author": "martinhochel@microsoft.com",
282
+ "package": "@fluentui/react-spinner",
283
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
284
+ "comment": "chore: update package scaffold"
285
+ },
286
+ {
287
+ "author": "martinhochel@microsoft.com",
288
+ "package": "@fluentui/react-switch",
289
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
290
+ "comment": "chore: update package scaffold"
291
+ },
292
+ {
293
+ "author": "martinhochel@microsoft.com",
294
+ "package": "@fluentui/react-table",
295
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
296
+ "comment": "chore: update package scaffold"
297
+ },
298
+ {
299
+ "author": "martinhochel@microsoft.com",
300
+ "package": "@fluentui/react-tabs",
301
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
302
+ "comment": "chore: update package scaffold"
303
+ },
304
+ {
305
+ "author": "martinhochel@microsoft.com",
306
+ "package": "@fluentui/react-tabster",
307
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
308
+ "comment": "chore: update package scaffold"
309
+ },
310
+ {
311
+ "author": "martinhochel@microsoft.com",
312
+ "package": "@fluentui/react-text",
313
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
314
+ "comment": "chore: update package scaffold"
315
+ },
316
+ {
317
+ "author": "martinhochel@microsoft.com",
318
+ "package": "@fluentui/react-textarea",
319
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
320
+ "comment": "chore: update package scaffold"
321
+ },
322
+ {
323
+ "author": "miroslav.stastny@microsoft.com",
324
+ "package": "@fluentui/react-theme",
325
+ "commit": "a5bfbcf4405549a7126b939980721bfa90846d89",
326
+ "comment": "chore(react-theme): do not export spacings"
327
+ },
328
+ {
329
+ "author": "martinhochel@microsoft.com",
330
+ "package": "@fluentui/react-theme",
331
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
332
+ "comment": "chore: update package scaffold"
333
+ },
334
+ {
335
+ "author": "martinhochel@microsoft.com",
336
+ "package": "@fluentui/react-theme-sass",
337
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
338
+ "comment": "chore: update package scaffold"
339
+ }
340
+ ],
341
+ "patch": [
342
+ {
343
+ "author": "bernardo.sunderhus@gmail.com",
344
+ "package": "@fluentui/react-utilities",
345
+ "commit": "5ca29f62f68fdce6e127f6ef61ecf36416a68478",
346
+ "comment": "fix: supports colSpan property for th"
347
+ },
348
+ {
349
+ "author": "behowell@microsoft.com",
350
+ "package": "@fluentui/react-badge",
351
+ "commit": "38cbc51623baf411e5379936c050f0b2c53ecc54",
352
+ "comment": "chore: Update Badge colors with new mappings from design"
353
+ },
354
+ {
355
+ "author": "humberto_makoto@hotmail.com",
356
+ "package": "@fluentui/react-badge",
357
+ "commit": "fc94f09d58f1bb48bb8bdcc562d9a8fc5b801e98",
358
+ "comment": "fix: Allow PresenceBadge's icon to be overridden by the user."
359
+ },
360
+ {
361
+ "author": "lingfangao@hotmail.com",
362
+ "package": "@fluentui/react-components",
363
+ "commit": "80075557d5f685b21d145de3b538af5e80534feb",
364
+ "comment": "feat: bump @fluentui/react-overflow to RC"
365
+ },
366
+ {
367
+ "author": "esteban.230@hotmail.com",
368
+ "package": "@fluentui/react-components",
369
+ "commit": "e22929a533e0830fc75e547b733b38dee60af00e",
370
+ "comment": "feat: Adding InfoButton to unstable."
371
+ },
372
+ {
373
+ "author": "bernardo.sunderhus@gmail.com",
374
+ "package": "@fluentui/react-components",
375
+ "commit": "71139fbfe025c22f9934738ab53d14b5f62e4d66",
376
+ "comment": "react-menu: deprecates MenuOpenEvents in favor of MenuOpenEvent"
377
+ },
378
+ {
379
+ "author": "bernardo.sunderhus@gmail.com",
380
+ "package": "@fluentui/react-dialog",
381
+ "commit": "a510bccdb429d1a038f5c28b84bf3e98b51906b3",
382
+ "comment": "feat: removes aria-haspopup"
383
+ }
384
+ ],
385
+ "prerelease": [
386
+ {
387
+ "author": "lingfangao@hotmail.com",
388
+ "package": "@fluentui/priority-overflow",
389
+ "commit": "80075557d5f685b21d145de3b538af5e80534feb",
390
+ "comment": "feat: Bump to RC"
391
+ },
392
+ {
393
+ "author": "esteban.230@hotmail.com",
394
+ "package": "@fluentui/react-infobutton",
395
+ "commit": "e22929a533e0830fc75e547b733b38dee60af00e",
396
+ "comment": "chore: Making the package public and preparing to add to unstable."
397
+ },
398
+ {
399
+ "author": "lingfangao@hotmail.com",
400
+ "package": "@fluentui/react-overflow",
401
+ "commit": "80075557d5f685b21d145de3b538af5e80534feb",
402
+ "comment": "feat: Bump to RC"
403
+ },
404
+ {
405
+ "author": "esteban.230@hotmail.com",
406
+ "package": "@fluentui/react-persona",
407
+ "commit": "9066dc6a278db9df1fe3a277e66c94c201107d14",
408
+ "comment": "feat: Adding size and textAlignment props and updating styles."
409
+ },
410
+ {
411
+ "author": "ololubek@microsoft.com",
412
+ "package": "@fluentui/react-progress",
413
+ "commit": "76ebdee7eba4a9decbc1df97f3ff62b7784fdb8f",
414
+ "comment": "fix: update validationState tokens to use background instead of foreground"
415
+ },
416
+ {
417
+ "author": "lingfangao@hotmail.com",
418
+ "package": "@fluentui/react-table",
419
+ "commit": "aef719f25d85a8d83f3d6b44d61b75d55f805ee8",
420
+ "comment": "BREAKING: `sortable` prop no longer enables `TableHeader` navigation"
421
+ },
422
+ {
423
+ "author": "tigeroakes@microsoft.com",
424
+ "package": "@fluentui/react-table",
425
+ "commit": "2c004858da092ef9ae0aad2f96b313ec0102913d",
426
+ "comment": "fix: Match hover background colors between table row and cell actions"
427
+ },
428
+ {
429
+ "author": "lingfangao@hotmail.com",
430
+ "package": "@fluentui/react-table",
431
+ "commit": "b49ab600353c77e48b67cc23bcb422535cad1b83",
432
+ "comment": "BREAKING: Headless table callbacks require event"
433
+ }
434
+ ],
435
+ "minor": [
436
+ {
437
+ "author": "bernardo.sunderhus@gmail.com",
438
+ "package": "@fluentui/react-menu",
439
+ "commit": "71139fbfe025c22f9934738ab53d14b5f62e4d66",
440
+ "comment": "feature: menu open change data union types"
441
+ }
442
+ ]
443
+ }
444
+ },
445
+ {
446
+ "date": "Fri, 11 Nov 2022 14:57:29 GMT",
6
447
  "tag": "@fluentui/react-components_v9.7.0",
7
448
  "version": "9.7.0",
8
449
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,53 @@
1
1
  # Change Log - @fluentui/react-components
2
2
 
3
- This log was last generated on Fri, 11 Nov 2022 14:53:16 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 17 Nov 2022 23:02:27 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.7.1)
8
+
9
+ Thu, 17 Nov 2022 23:02:27 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.7.0..@fluentui/react-components_v9.7.1)
11
+
12
+ ### Minor changes
13
+
14
+ - `@fluentui/react-menu`
15
+ - feature: menu open change data union types ([PR #25503](https://github.com/microsoft/fluentui/pull/25503) by bernardo.sunderhus@gmail.com)
16
+
17
+ ### Patches
18
+
19
+ - `@fluentui/react-utilities`
20
+ - fix: supports colSpan property for th ([PR #25613](https://github.com/microsoft/fluentui/pull/25613) by bernardo.sunderhus@gmail.com)
21
+ - `@fluentui/react-badge`
22
+ - chore: Update Badge colors with new mappings from design ([PR #25599](https://github.com/microsoft/fluentui/pull/25599) by behowell@microsoft.com)
23
+ - fix: Allow PresenceBadge's icon to be overridden by the user. ([PR #25684](https://github.com/microsoft/fluentui/pull/25684) by humberto_makoto@hotmail.com)
24
+ - `@fluentui/react-components`
25
+ - feat: bump @fluentui/react-overflow to RC ([PR #25659](https://github.com/microsoft/fluentui/pull/25659) by lingfangao@hotmail.com)
26
+ - feat: Adding InfoButton to unstable. ([PR #25686](https://github.com/microsoft/fluentui/pull/25686) by esteban.230@hotmail.com)
27
+ - react-menu: deprecates MenuOpenEvents in favor of MenuOpenEvent ([PR #25503](https://github.com/microsoft/fluentui/pull/25503) by bernardo.sunderhus@gmail.com)
28
+ - `@fluentui/react-dialog`
29
+ - feat: removes aria-haspopup ([PR #25611](https://github.com/microsoft/fluentui/pull/25611) by bernardo.sunderhus@gmail.com)
30
+
31
+ ### Changes
32
+
33
+ - `@fluentui/priority-overflow`
34
+ - feat: Bump to RC ([PR #25659](https://github.com/microsoft/fluentui/pull/25659) by lingfangao@hotmail.com)
35
+ - `@fluentui/react-infobutton`
36
+ - chore: Making the package public and preparing to add to unstable. ([PR #25686](https://github.com/microsoft/fluentui/pull/25686) by esteban.230@hotmail.com)
37
+ - `@fluentui/react-overflow`
38
+ - feat: Bump to RC ([PR #25659](https://github.com/microsoft/fluentui/pull/25659) by lingfangao@hotmail.com)
39
+ - `@fluentui/react-persona`
40
+ - feat: Adding size and textAlignment props and updating styles. ([PR #25626](https://github.com/microsoft/fluentui/pull/25626) by esteban.230@hotmail.com)
41
+ - `@fluentui/react-progress`
42
+ - fix: update validationState tokens to use background instead of foreground ([PR #25664](https://github.com/microsoft/fluentui/pull/25664) by ololubek@microsoft.com)
43
+ - `@fluentui/react-table`
44
+ - BREAKING: `sortable` prop no longer enables `TableHeader` navigation ([PR #25656](https://github.com/microsoft/fluentui/pull/25656) by lingfangao@hotmail.com)
45
+ - fix: Match hover background colors between table row and cell actions ([PR #25628](https://github.com/microsoft/fluentui/pull/25628) by tigeroakes@microsoft.com)
46
+ - BREAKING: Headless table callbacks require event ([PR #25658](https://github.com/microsoft/fluentui/pull/25658) by lingfangao@hotmail.com)
47
+
7
48
  ## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.7.0)
8
49
 
9
- Fri, 11 Nov 2022 14:53:16 GMT
50
+ Fri, 11 Nov 2022 14:57:29 GMT
10
51
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.6.3..@fluentui/react-components_v9.7.0)
11
52
 
12
53
  ### Minor changes
package/dist/index.d.ts CHANGED
@@ -247,6 +247,7 @@ import { MenuListProvider } from '@fluentui/react-menu';
247
247
  import { MenuListSlots } from '@fluentui/react-menu';
248
248
  import { MenuListState } from '@fluentui/react-menu';
249
249
  import { MenuOpenChangeData } from '@fluentui/react-menu';
250
+ import { MenuOpenEvent } from '@fluentui/react-menu';
250
251
  import { MenuOpenEvents } from '@fluentui/react-menu';
251
252
  import { MenuPopover } from '@fluentui/react-menu';
252
253
  import { menuPopoverClassNames } from '@fluentui/react-menu';
@@ -1121,6 +1122,8 @@ export { MenuListState }
1121
1122
 
1122
1123
  export { MenuOpenChangeData }
1123
1124
 
1125
+ export { MenuOpenEvent }
1126
+
1124
1127
  export { MenuOpenEvents }
1125
1128
 
1126
1129
  export { MenuPopover }
@@ -59,6 +59,11 @@ import { FieldProps } from '@fluentui/react-field';
59
59
  import { FieldSlots } from '@fluentui/react-field';
60
60
  import { FieldState } from '@fluentui/react-field';
61
61
  import { getFieldClassNames } from '@fluentui/react-field';
62
+ import { InfoButton } from '@fluentui/react-infobutton';
63
+ import { infoButtonClassNames } from '@fluentui/react-infobutton';
64
+ import { InfoButtonProps } from '@fluentui/react-infobutton';
65
+ import { InfoButtonSlots } from '@fluentui/react-infobutton';
66
+ import { InfoButtonState } from '@fluentui/react-infobutton';
62
67
  import { InputField_unstable as InputField } from '@fluentui/react-input';
63
68
  import { inputFieldClassNames } from '@fluentui/react-input';
64
69
  import { InputFieldProps_unstable as InputFieldProps } from '@fluentui/react-input';
@@ -106,6 +111,7 @@ import { renderCardPreview_unstable } from '@fluentui/react-card';
106
111
  import { renderCombobox_unstable } from '@fluentui/react-combobox';
107
112
  import { renderDropdown_unstable } from '@fluentui/react-combobox';
108
113
  import { renderField_unstable } from '@fluentui/react-field';
114
+ import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
109
115
  import { renderListbox_unstable } from '@fluentui/react-combobox';
110
116
  import { renderOption_unstable } from '@fluentui/react-combobox';
111
117
  import { renderOptionGroup_unstable } from '@fluentui/react-combobox';
@@ -231,6 +237,8 @@ import { useDropdown_unstable } from '@fluentui/react-combobox';
231
237
  import { useDropdownStyles_unstable } from '@fluentui/react-combobox';
232
238
  import { useField_unstable } from '@fluentui/react-field';
233
239
  import { useFieldStyles_unstable } from '@fluentui/react-field';
240
+ import { useInfoButton_unstable } from '@fluentui/react-infobutton';
241
+ import { useInfoButtonStyles_unstable } from '@fluentui/react-infobutton';
234
242
  import { useIsOverflowGroupVisible } from '@fluentui/react-overflow';
235
243
  import { useIsOverflowItemVisible } from '@fluentui/react-overflow';
236
244
  import { useListbox_unstable } from '@fluentui/react-combobox';
@@ -395,6 +403,16 @@ export { FieldState }
395
403
 
396
404
  export { getFieldClassNames }
397
405
 
406
+ export { InfoButton }
407
+
408
+ export { infoButtonClassNames }
409
+
410
+ export { InfoButtonProps }
411
+
412
+ export { InfoButtonSlots }
413
+
414
+ export { InfoButtonState }
415
+
398
416
  export { InputField }
399
417
 
400
418
  export { inputFieldClassNames }
@@ -489,6 +507,8 @@ export { renderDropdown_unstable }
489
507
 
490
508
  export { renderField_unstable }
491
509
 
510
+ export { renderInfoButton_unstable }
511
+
492
512
  export { renderListbox_unstable }
493
513
 
494
514
  export { renderOption_unstable }
@@ -740,6 +760,10 @@ export { useField_unstable }
740
760
 
741
761
  export { useFieldStyles_unstable }
742
762
 
763
+ export { useInfoButton_unstable }
764
+
765
+ export { useInfoButtonStyles_unstable }
766
+
743
767
  export { useIsOverflowGroupVisible }
744
768
 
745
769
  export { useIsOverflowItemVisible }
@@ -1 +1 @@
1
- {"version":3,"sources":["AccessibilityScenarios/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,SAAS,GAAG,yBAAlB;AACA,MAAM,mBAAmB,GAAG,KAA5B,C,CAQA;AACA;;AACA,OAAO,MAAM,cAAc,GAAI,KAAD,iBAC5B,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;EAAG,SAAS,EAAC,iBAAb;EAA+B,IAAI,EAAE,kBAAkB,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,KAAK,EAAnF;EAAuF,MAAM,EAAC;AAA9F,CAAA,EACG,KAAK,CAAC,OADT,CADK;AAMP,OAAO,MAAM,iBAAiB,GAAa,KAAK,iBAC9C,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;EACE,SAAS,EAAC,iBADZ;EAEE,IAAI,EAAE;AAFR,CAAA,EAIG,KAAK,CAAC,QAJT,CADK;AASP,OAAO,MAAM,QAAQ,GAAG,mBAAM,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB,EAAkB,sBAAlB,CAAvB;AAEP,OAAO,MAAM,QAAQ,GAAmD,CAAC;EAAE,SAAF;EAAa;AAAb,CAAD,KAA4B;EAClG,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,QAAQ,CAAC,KAAT,GAAiB,SAAS,GAAG,mBAAZ,GAAkC,SAAnD;EACD,CAFD,EAEG,CAAC,SAAD,CAFH;EAIA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;IAAK,IAAI,EAAC;EAAV,CAAA,eACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS,IAAT,CADF,eAEE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAFF,EAGG,QAHH,CADF;AAOD,CAZM","sourcesContent":["import * as React from 'react';\n\nconst APP_TITLE = 'Accessibility Scenarios';\nconst APP_TITLE_SEPARATOR = ' | ';\n\ninterface FullscreenLinkProps {\n parent: string;\n story: string;\n content: string;\n}\n\n// https://storybook.js.org/addons/@storybook/addon-links does not allow opening a story in new tab\n// so this is a naive attempt for opening a story in full screen\nexport const FullscreenLink = (props: FullscreenLinkProps) => (\n <a className=\"sbdocs sbdocs-a\" href={`iframe.html?id=${props.parent}--${props.story}`} target=\"_blank\">\n {props.content}\n </a>\n);\n\nexport const ScenariosListLink: React.FC = props => (\n <a\n className=\"sbdocs sbdocs-a\"\n href={`iframe.html?id=concepts-developer-accessibility-stories-list-of-scenarios--page`}\n >\n {props.children}\n </a>\n);\n\nexport const BackLink = () => <ScenariosListLink>Go back to main menu</ScenariosListLink>;\n\nexport const Scenario: React.FunctionComponent<{ pageTitle: string }> = ({ pageTitle, children }) => {\n React.useEffect(() => {\n document.title = pageTitle + APP_TITLE_SEPARATOR + APP_TITLE;\n }, [pageTitle]);\n\n return (\n <div role=\"main\">\n <BackLink />\n <br />\n {children}\n </div>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-components/src/AccessibilityScenarios/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,SAAS,GAAG,yBAAlB;AACA,MAAM,mBAAmB,GAAG,KAA5B,C,CAQA;AACA;;AACA,OAAO,MAAM,cAAc,GAAI,KAAD,iBAC5B,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;EAAG,SAAS,EAAC,iBAAb;EAA+B,IAAI,EAAE,kBAAkB,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,KAAK,EAAnF;EAAuF,MAAM,EAAC;AAA9F,CAAA,EACG,KAAK,CAAC,OADT,CADK;AAMP,OAAO,MAAM,iBAAiB,GAAa,KAAK,iBAC9C,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;EACE,SAAS,EAAC,iBADZ;EAEE,IAAI,EAAE;AAFR,CAAA,EAIG,KAAK,CAAC,QAJT,CADK;AASP,OAAO,MAAM,QAAQ,GAAG,mBAAM,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB,EAAkB,sBAAlB,CAAvB;AAEP,OAAO,MAAM,QAAQ,GAAmD,CAAC;EAAE,SAAF;EAAa;AAAb,CAAD,KAA4B;EAClG,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,QAAQ,CAAC,KAAT,GAAiB,SAAS,GAAG,mBAAZ,GAAkC,SAAnD;EACD,CAFD,EAEG,CAAC,SAAD,CAFH;EAIA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;IAAK,IAAI,EAAC;EAAV,CAAA,eACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS,IAAT,CADF,eAEE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAFF,EAGG,QAHH,CADF;AAOD,CAZM","sourcesContent":["import * as React from 'react';\n\nconst APP_TITLE = 'Accessibility Scenarios';\nconst APP_TITLE_SEPARATOR = ' | ';\n\ninterface FullscreenLinkProps {\n parent: string;\n story: string;\n content: string;\n}\n\n// https://storybook.js.org/addons/@storybook/addon-links does not allow opening a story in new tab\n// so this is a naive attempt for opening a story in full screen\nexport const FullscreenLink = (props: FullscreenLinkProps) => (\n <a className=\"sbdocs sbdocs-a\" href={`iframe.html?id=${props.parent}--${props.story}`} target=\"_blank\">\n {props.content}\n </a>\n);\n\nexport const ScenariosListLink: React.FC = props => (\n <a\n className=\"sbdocs sbdocs-a\"\n href={`iframe.html?id=concepts-developer-accessibility-stories-list-of-scenarios--page`}\n >\n {props.children}\n </a>\n);\n\nexport const BackLink = () => <ScenariosListLink>Go back to main menu</ScenariosListLink>;\n\nexport const Scenario: React.FunctionComponent<{ pageTitle: string }> = ({ pageTitle, children }) => {\n React.useEffect(() => {\n document.title = pageTitle + APP_TITLE_SEPARATOR + APP_TITLE;\n }, [pageTitle]);\n\n return (\n <div role=\"main\">\n <BackLink />\n <br />\n {children}\n </div>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["Concepts/Icons/ReactIconGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { FluentIconsProps } from '@fluentui/react-icons';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport * as ReactIcons from '@fluentui/react-icons';\nimport { Input } from '@fluentui/react-input';\nimport { makeStyles, shorthands } from '@griffel/react';\n\nconst useStyles = makeStyles({\n grid: {\n display: 'grid',\n gridTemplateColumns: 'auto auto auto auto',\n gridGap: '10px',\n backgroundColor: '#F7F7F7',\n\n '> div': {\n alignItems: 'center',\n backgroundColor: '#FFFFFF',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-around',\n ...shorthands.padding('8px'),\n ...shorthands.overflow('hidden'),\n\n '> code': {\n fontSize: '8px',\n display: 'inline-block',\n height: 'auto',\n ...shorthands.padding('0px 8px'),\n },\n },\n },\n\n searchBox: {\n backgroundColor: '#F7F7F7',\n maxWidth: '320px',\n marginBottom: '10px',\n },\n\n radio: {\n backgroundColor: '#F7F7F7',\n fontSize: '11px',\n },\n});\n\nconst reactIcons: React.FC<ReactIcons.FluentIconsProps>[] = Object.keys(ReactIcons)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .map(iconName => (ReactIcons as any)[iconName])\n .filter(icon => !!icon && !!icon.displayName);\n\nconst ReactIconGrid = () => {\n const [search, setSearch] = React.useState('');\n const [size, setSize] = React.useState<string | number>(24);\n const styles = useStyles();\n\n const _onSearchQueryChanged = (ev?: React.FormEvent<HTMLInputElement>) => {\n setSearch(ev ? ev.currentTarget.value : '');\n };\n\n const _filterBySize = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>) => {\n const newSize = ev ? (ev.currentTarget as HTMLInputElement).value : '';\n if (newSize === 'All') {\n setSize('');\n } else if (newSize === 'Unsized') {\n setSize('Unsized');\n } else {\n setSize(newSize);\n }\n };\n\n const _renderIcon = (Icon: React.FC<FluentIconsProps>): JSX.Element => {\n return (\n <div key={Icon.displayName} aria-label={Icon.displayName}>\n <Icon />\n <br />\n <code>{Icon.displayName}</code>\n </div>\n );\n };\n\n const filteredIcons = React.useMemo(\n () =>\n reactIcons.filter(icon =>\n size === 'Unsized'\n ? icon.displayName! && !/\\d/.test(icon.displayName.toLowerCase())\n : icon.displayName?.toLowerCase().indexOf(search.toLowerCase()) !== -1 &&\n icon.displayName?.indexOf(String(size)) !== -1,\n ),\n [search, size],\n );\n\n return (\n <div>\n <Input\n type=\"search\"\n placeholder=\"Search icons\"\n value={search}\n aria-label=\"search\"\n // eslint-disable-next-line react/jsx-no-bind\n onChange={_onSearchQueryChanged}\n className={styles.searchBox}\n />\n {[16, 20, 24, 28, 32, 48, 'Unsized', 'All'].map(option => (\n <>\n <input\n id={`option-${option}`}\n defaultChecked={option === 24}\n type=\"radio\"\n value={option}\n name=\"size\"\n onChange={_filterBySize}\n />\n <label htmlFor={`option-${option}`} className={styles.radio}>\n {option}\n </label>\n </>\n ))}\n <div className={styles.grid}>{filteredIcons.map(_renderIcon)}</div>\n </div>\n );\n};\n\nexport default ReactIconGrid;\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-components/src/Concepts/Icons/ReactIconGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { FluentIconsProps } from '@fluentui/react-icons';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport * as ReactIcons from '@fluentui/react-icons';\nimport { Input } from '@fluentui/react-input';\nimport { makeStyles, shorthands } from '@griffel/react';\n\nconst useStyles = makeStyles({\n grid: {\n display: 'grid',\n gridTemplateColumns: 'auto auto auto auto',\n gridGap: '10px',\n backgroundColor: '#F7F7F7',\n\n '> div': {\n alignItems: 'center',\n backgroundColor: '#FFFFFF',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-around',\n ...shorthands.padding('8px'),\n ...shorthands.overflow('hidden'),\n\n '> code': {\n fontSize: '8px',\n display: 'inline-block',\n height: 'auto',\n ...shorthands.padding('0px 8px'),\n },\n },\n },\n\n searchBox: {\n backgroundColor: '#F7F7F7',\n maxWidth: '320px',\n marginBottom: '10px',\n },\n\n radio: {\n backgroundColor: '#F7F7F7',\n fontSize: '11px',\n },\n});\n\nconst reactIcons: React.FC<ReactIcons.FluentIconsProps>[] = Object.keys(ReactIcons)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .map(iconName => (ReactIcons as any)[iconName])\n .filter(icon => !!icon && !!icon.displayName);\n\nconst ReactIconGrid = () => {\n const [search, setSearch] = React.useState('');\n const [size, setSize] = React.useState<string | number>(24);\n const styles = useStyles();\n\n const _onSearchQueryChanged = (ev?: React.FormEvent<HTMLInputElement>) => {\n setSearch(ev ? ev.currentTarget.value : '');\n };\n\n const _filterBySize = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>) => {\n const newSize = ev ? (ev.currentTarget as HTMLInputElement).value : '';\n if (newSize === 'All') {\n setSize('');\n } else if (newSize === 'Unsized') {\n setSize('Unsized');\n } else {\n setSize(newSize);\n }\n };\n\n const _renderIcon = (Icon: React.FC<FluentIconsProps>): JSX.Element => {\n return (\n <div key={Icon.displayName} aria-label={Icon.displayName}>\n <Icon />\n <br />\n <code>{Icon.displayName}</code>\n </div>\n );\n };\n\n const filteredIcons = React.useMemo(\n () =>\n reactIcons.filter(icon =>\n size === 'Unsized'\n ? icon.displayName! && !/\\d/.test(icon.displayName.toLowerCase())\n : icon.displayName?.toLowerCase().indexOf(search.toLowerCase()) !== -1 &&\n icon.displayName?.indexOf(String(size)) !== -1,\n ),\n [search, size],\n );\n\n return (\n <div>\n <Input\n type=\"search\"\n placeholder=\"Search icons\"\n value={search}\n aria-label=\"search\"\n // eslint-disable-next-line react/jsx-no-bind\n onChange={_onSearchQueryChanged}\n className={styles.searchBox}\n />\n {[16, 20, 24, 28, 32, 48, 'Unsized', 'All'].map(option => (\n <>\n <input\n id={`option-${option}`}\n defaultChecked={option === 24}\n type=\"radio\"\n value={option}\n name=\"size\"\n onChange={_filterBySize}\n />\n <label htmlFor={`option-${option}`} className={styles.radio}>\n {option}\n </label>\n </>\n ))}\n <div className={styles.grid}>{filteredIcons.map(_renderIcon)}</div>\n </div>\n );\n};\n\nexport default ReactIconGrid;\n"],"sourceRoot":"../src/"}