@fluentui/react-alert 9.0.0-beta.1 → 9.0.0-beta.11

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 (22) hide show
  1. package/CHANGELOG.json +365 -1
  2. package/CHANGELOG.md +124 -2
  3. package/Spec.md +2 -0
  4. package/dist/index.d.ts +13 -1
  5. package/lib/components/Alert/Alert.js.map +1 -1
  6. package/lib/components/Alert/Alert.types.js.map +1 -1
  7. package/lib/components/Alert/renderAlert.js +1 -0
  8. package/lib/components/Alert/renderAlert.js.map +1 -1
  9. package/lib/components/Alert/useAlert.js +31 -10
  10. package/lib/components/Alert/useAlert.js.map +1 -1
  11. package/lib/components/Alert/useAlertStyles.js +37 -13
  12. package/lib/components/Alert/useAlertStyles.js.map +1 -1
  13. package/lib-commonjs/components/Alert/Alert.js.map +1 -1
  14. package/lib-commonjs/components/Alert/renderAlert.js +1 -0
  15. package/lib-commonjs/components/Alert/renderAlert.js.map +1 -1
  16. package/lib-commonjs/components/Alert/useAlert.js +32 -10
  17. package/lib-commonjs/components/Alert/useAlert.js.map +1 -1
  18. package/lib-commonjs/components/Alert/useAlertStyles.js +37 -13
  19. package/lib-commonjs/components/Alert/useAlertStyles.js.map +1 -1
  20. package/lib-commonjs/index.js.map +1 -1
  21. package/package.json +11 -9
  22. package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json CHANGED
@@ -2,7 +2,371 @@
2
2
  "name": "@fluentui/react-alert",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 26 May 2022 20:59:58 GMT",
5
+ "date": "Mon, 03 Oct 2022 22:22:53 GMT",
6
+ "tag": "@fluentui/react-alert_v9.0.0-beta.11",
7
+ "version": "9.0.0-beta.11",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-alert",
13
+ "comment": "Bump @fluentui/react-avatar to v9.2.0",
14
+ "commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-alert",
19
+ "comment": "Bump @fluentui/react-button to v9.1.3",
20
+ "commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Tue, 20 Sep 2022 20:55:45 GMT",
27
+ "tag": "@fluentui/react-alert_v9.0.0-beta.10",
28
+ "version": "9.0.0-beta.10",
29
+ "comments": {
30
+ "prerelease": [
31
+ {
32
+ "author": "beachball",
33
+ "package": "@fluentui/react-alert",
34
+ "comment": "Bump @fluentui/react-avatar to v9.1.1",
35
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
36
+ },
37
+ {
38
+ "author": "beachball",
39
+ "package": "@fluentui/react-alert",
40
+ "comment": "Bump @fluentui/react-button to v9.1.2",
41
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui/react-alert",
46
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
47
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
48
+ }
49
+ ]
50
+ }
51
+ },
52
+ {
53
+ "date": "Thu, 15 Sep 2022 09:49:47 GMT",
54
+ "tag": "@fluentui/react-alert_v9.0.0-beta.9",
55
+ "version": "9.0.0-beta.9",
56
+ "comments": {
57
+ "none": [
58
+ {
59
+ "author": "martinhochel@microsoft.com",
60
+ "package": "@fluentui/react-alert",
61
+ "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
62
+ "comment": "chore: update package scaffold"
63
+ },
64
+ {
65
+ "author": "rohitpag@microsoft.com",
66
+ "package": "@fluentui/react-alert",
67
+ "commit": "045c66e2a2142e3d2380da05a9aa60b54de6888c",
68
+ "comment": "Adding appearance prop to the alert component"
69
+ }
70
+ ],
71
+ "prerelease": [
72
+ {
73
+ "author": "olfedias@microsoft.com",
74
+ "package": "@fluentui/react-alert",
75
+ "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
76
+ "comment": "chore: Update Griffel to latest version"
77
+ },
78
+ {
79
+ "author": "beachball",
80
+ "package": "@fluentui/react-alert",
81
+ "comment": "Bump @fluentui/react-avatar to v9.1.0",
82
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
83
+ },
84
+ {
85
+ "author": "beachball",
86
+ "package": "@fluentui/react-alert",
87
+ "comment": "Bump @fluentui/react-button to v9.1.1",
88
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
89
+ },
90
+ {
91
+ "author": "beachball",
92
+ "package": "@fluentui/react-alert",
93
+ "comment": "Bump @fluentui/react-theme to v9.1.0",
94
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
95
+ },
96
+ {
97
+ "author": "beachball",
98
+ "package": "@fluentui/react-alert",
99
+ "comment": "Bump @fluentui/react-utilities to v9.1.0",
100
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
101
+ },
102
+ {
103
+ "author": "beachball",
104
+ "package": "@fluentui/react-alert",
105
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
106
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
107
+ }
108
+ ]
109
+ }
110
+ },
111
+ {
112
+ "date": "Wed, 03 Aug 2022 16:03:36 GMT",
113
+ "tag": "@fluentui/react-alert_v9.0.0-beta.8",
114
+ "version": "9.0.0-beta.8",
115
+ "comments": {
116
+ "prerelease": [
117
+ {
118
+ "author": "miroslav.stastny@microsoft.com",
119
+ "package": "@fluentui/react-alert",
120
+ "commit": "08563664778fd80284561d3c9d254307a0a32362",
121
+ "comment": "chore: Bump Griffel dependencies"
122
+ },
123
+ {
124
+ "author": "beachball",
125
+ "package": "@fluentui/react-alert",
126
+ "comment": "Bump @fluentui/react-avatar to v9.0.4",
127
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
128
+ },
129
+ {
130
+ "author": "beachball",
131
+ "package": "@fluentui/react-alert",
132
+ "comment": "Bump @fluentui/react-button to v9.1.0",
133
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
134
+ },
135
+ {
136
+ "author": "beachball",
137
+ "package": "@fluentui/react-alert",
138
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
139
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
140
+ }
141
+ ]
142
+ }
143
+ },
144
+ {
145
+ "date": "Thu, 14 Jul 2022 21:21:08 GMT",
146
+ "tag": "@fluentui/react-alert_v9.0.0-beta.7",
147
+ "version": "9.0.0-beta.7",
148
+ "comments": {
149
+ "prerelease": [
150
+ {
151
+ "author": "Humberto.Morimoto@microsoft.com",
152
+ "package": "@fluentui/react-alert",
153
+ "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2",
154
+ "comment": "fix: Fixing bad version bump of @fluentui/react-utilities."
155
+ },
156
+ {
157
+ "author": "beachball",
158
+ "package": "@fluentui/react-alert",
159
+ "comment": "Bump @fluentui/react-avatar to v9.0.3",
160
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
161
+ },
162
+ {
163
+ "author": "beachball",
164
+ "package": "@fluentui/react-alert",
165
+ "comment": "Bump @fluentui/react-button to v9.0.3",
166
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
167
+ },
168
+ {
169
+ "author": "beachball",
170
+ "package": "@fluentui/react-alert",
171
+ "comment": "Bump @fluentui/react-utilities to v9.0.2",
172
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
173
+ }
174
+ ]
175
+ }
176
+ },
177
+ {
178
+ "date": "Thu, 14 Jul 2022 17:06:12 GMT",
179
+ "tag": "@fluentui/react-alert_v9.0.0-beta.6",
180
+ "version": "9.0.0-beta.6",
181
+ "comments": {
182
+ "prerelease": [
183
+ {
184
+ "author": "ololubek@microsoft.com",
185
+ "package": "@fluentui/react-alert",
186
+ "commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
187
+ "comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
188
+ },
189
+ {
190
+ "author": "sarah.higley@microsoft.com",
191
+ "package": "@fluentui/react-alert",
192
+ "commit": "18cb868b8978fc56b9dc2ded0aaf79d17e6deeee",
193
+ "comment": "update Alert with live region attributes"
194
+ },
195
+ {
196
+ "author": "rohitpag@microsoft.com",
197
+ "package": "@fluentui/react-alert",
198
+ "commit": "b4a1586d84a3f1480327d288b128eb102b44ba5a",
199
+ "comment": "feat: Adding avatar slot support to Alert"
200
+ },
201
+ {
202
+ "author": "beachball",
203
+ "package": "@fluentui/react-alert",
204
+ "comment": "Bump @fluentui/react-avatar to v9.0.2",
205
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
206
+ },
207
+ {
208
+ "author": "beachball",
209
+ "package": "@fluentui/react-alert",
210
+ "comment": "Bump @fluentui/react-button to v9.0.2",
211
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
212
+ },
213
+ {
214
+ "author": "beachball",
215
+ "package": "@fluentui/react-alert",
216
+ "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
217
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
218
+ },
219
+ {
220
+ "author": "beachball",
221
+ "package": "@fluentui/react-alert",
222
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
223
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
224
+ }
225
+ ]
226
+ }
227
+ },
228
+ {
229
+ "date": "Tue, 28 Jun 2022 17:39:46 GMT",
230
+ "tag": "@fluentui/react-alert_v9.0.0-beta.5",
231
+ "version": "9.0.0-beta.5",
232
+ "comments": {
233
+ "prerelease": [
234
+ {
235
+ "author": "lingfangao@hotmail.com",
236
+ "package": "@fluentui/react-alert",
237
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
238
+ "comment": "fix: Use caret dependency range for Griffel"
239
+ },
240
+ {
241
+ "author": "beachball",
242
+ "package": "@fluentui/react-alert",
243
+ "comment": "Bump @fluentui/react-button to v9.0.1",
244
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
245
+ },
246
+ {
247
+ "author": "beachball",
248
+ "package": "@fluentui/react-alert",
249
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
250
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
251
+ }
252
+ ]
253
+ }
254
+ },
255
+ {
256
+ "date": "Tue, 28 Jun 2022 15:14:12 GMT",
257
+ "tag": "@fluentui/react-alert_v9.0.0-beta.4",
258
+ "version": "9.0.0-beta.4",
259
+ "comments": {
260
+ "prerelease": [
261
+ {
262
+ "author": "lingfangao@hotmail.com",
263
+ "package": "@fluentui/react-alert",
264
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
265
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
266
+ },
267
+ {
268
+ "author": "lingfangao@hotmail.com",
269
+ "package": "@fluentui/react-alert",
270
+ "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
271
+ "comment": "Bump Griffel dependencies"
272
+ },
273
+ {
274
+ "author": "olfedias@microsoft.com",
275
+ "package": "@fluentui/react-alert",
276
+ "commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
277
+ "comment": "chore: Update @fluentui/react-icons to latest version"
278
+ },
279
+ {
280
+ "author": "beachball",
281
+ "package": "@fluentui/react-alert",
282
+ "comment": "Bump @fluentui/react-button to v9.0.0",
283
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
284
+ },
285
+ {
286
+ "author": "beachball",
287
+ "package": "@fluentui/react-alert",
288
+ "comment": "Bump @fluentui/react-theme to v9.0.0",
289
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
290
+ },
291
+ {
292
+ "author": "beachball",
293
+ "package": "@fluentui/react-alert",
294
+ "comment": "Bump @fluentui/react-utilities to v9.0.0",
295
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
296
+ },
297
+ {
298
+ "author": "beachball",
299
+ "package": "@fluentui/react-alert",
300
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
301
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
302
+ }
303
+ ],
304
+ "none": [
305
+ {
306
+ "author": "mgodbolt@microsoft.com",
307
+ "package": "@fluentui/react-alert",
308
+ "commit": "262d148f068ea1d3354994dd659ac881b31dda28",
309
+ "comment": "chore: Move alert stories into folder and use index entry point."
310
+ }
311
+ ]
312
+ }
313
+ },
314
+ {
315
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
316
+ "tag": "@fluentui/react-alert_v9.0.0-beta.3",
317
+ "version": "9.0.0-beta.3",
318
+ "comments": {
319
+ "prerelease": [
320
+ {
321
+ "author": "beachball",
322
+ "package": "@fluentui/react-alert",
323
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.14",
324
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
325
+ },
326
+ {
327
+ "author": "beachball",
328
+ "package": "@fluentui/react-alert",
329
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
330
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
331
+ }
332
+ ]
333
+ }
334
+ },
335
+ {
336
+ "date": "Tue, 31 May 2022 21:28:35 GMT",
337
+ "tag": "@fluentui/react-alert_v9.0.0-beta.2",
338
+ "version": "9.0.0-beta.2",
339
+ "comments": {
340
+ "prerelease": [
341
+ {
342
+ "author": "olfedias@microsoft.com",
343
+ "package": "@fluentui/react-alert",
344
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
345
+ "comment": "chore: Update Griffel to latest version"
346
+ },
347
+ {
348
+ "author": "beachball",
349
+ "package": "@fluentui/react-alert",
350
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.13",
351
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
352
+ },
353
+ {
354
+ "author": "beachball",
355
+ "package": "@fluentui/react-alert",
356
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
357
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
358
+ },
359
+ {
360
+ "author": "beachball",
361
+ "package": "@fluentui/react-alert",
362
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
363
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
364
+ }
365
+ ]
366
+ }
367
+ },
368
+ {
369
+ "date": "Thu, 26 May 2022 21:01:22 GMT",
6
370
  "tag": "@fluentui/react-alert_v9.0.0-beta.1",
7
371
  "version": "9.0.0-beta.1",
8
372
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,134 @@
1
1
  # Change Log - @fluentui/react-alert
2
2
 
3
- This log was last generated on Thu, 26 May 2022 20:59:58 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 03 Oct 2022 22:22:53 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.11)
8
+
9
+ Mon, 03 Oct 2022 22:22:53 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.10..@fluentui/react-alert_v9.0.0-beta.11)
11
+
12
+ ### Changes
13
+
14
+ - Bump @fluentui/react-avatar to v9.2.0 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball)
15
+ - Bump @fluentui/react-button to v9.1.3 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball)
16
+
17
+ ## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.10)
18
+
19
+ Tue, 20 Sep 2022 20:55:45 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.9..@fluentui/react-alert_v9.0.0-beta.10)
21
+
22
+ ### Changes
23
+
24
+ - Bump @fluentui/react-avatar to v9.1.1 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
25
+ - Bump @fluentui/react-button to v9.1.2 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
26
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
27
+
28
+ ## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.9)
29
+
30
+ Thu, 15 Sep 2022 09:49:47 GMT
31
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.8..@fluentui/react-alert_v9.0.0-beta.9)
32
+
33
+ ### Changes
34
+
35
+ - chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
36
+ - Bump @fluentui/react-avatar to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
37
+ - Bump @fluentui/react-button to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
38
+ - Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
39
+ - Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
40
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
41
+
42
+ ## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.8)
43
+
44
+ Wed, 03 Aug 2022 16:03:36 GMT
45
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.7..@fluentui/react-alert_v9.0.0-beta.8)
46
+
47
+ ### Changes
48
+
49
+ - chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
50
+ - Bump @fluentui/react-avatar to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
51
+ - Bump @fluentui/react-button to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
52
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
53
+
54
+ ## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.7)
55
+
56
+ Thu, 14 Jul 2022 21:21:08 GMT
57
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.6..@fluentui/react-alert_v9.0.0-beta.7)
58
+
59
+ ### Changes
60
+
61
+ - fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
62
+ - Bump @fluentui/react-avatar to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
63
+ - Bump @fluentui/react-button to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
64
+ - Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
65
+
66
+ ## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.6)
67
+
68
+ Thu, 14 Jul 2022 17:06:12 GMT
69
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.5..@fluentui/react-alert_v9.0.0-beta.6)
70
+
71
+ ### Changes
72
+
73
+ - chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
74
+ - update Alert with live region attributes ([PR #23284](https://github.com/microsoft/fluentui/pull/23284) by sarah.higley@microsoft.com)
75
+ - feat: Adding avatar slot support to Alert ([PR #23591](https://github.com/microsoft/fluentui/pull/23591) by rohitpag@microsoft.com)
76
+ - Bump @fluentui/react-avatar to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
77
+ - Bump @fluentui/react-button to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
78
+ - Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
79
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
80
+
81
+ ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.5)
82
+
83
+ Tue, 28 Jun 2022 17:39:46 GMT
84
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.4..@fluentui/react-alert_v9.0.0-beta.5)
85
+
86
+ ### Changes
87
+
88
+ - fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
89
+ - Bump @fluentui/react-button to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
90
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
91
+
92
+ ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.4)
93
+
94
+ Tue, 28 Jun 2022 15:14:12 GMT
95
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.3..@fluentui/react-alert_v9.0.0-beta.4)
96
+
97
+ ### Changes
98
+
99
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
100
+ - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
101
+ - chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
102
+ - Bump @fluentui/react-button to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
103
+ - Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
104
+ - Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
105
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
106
+
107
+ ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.3)
108
+
109
+ Thu, 23 Jun 2022 14:25:31 GMT
110
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.2..@fluentui/react-alert_v9.0.0-beta.3)
111
+
112
+ ### Changes
113
+
114
+ - Bump @fluentui/react-button to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
115
+ - Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
116
+
117
+ ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.2)
118
+
119
+ Tue, 31 May 2022 21:28:35 GMT
120
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.1..@fluentui/react-alert_v9.0.0-beta.2)
121
+
122
+ ### Changes
123
+
124
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
125
+ - Bump @fluentui/react-button to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
126
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
127
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
128
+
7
129
  ## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.1)
8
130
 
9
- Thu, 26 May 2022 20:59:58 GMT
131
+ Thu, 26 May 2022 21:01:22 GMT
10
132
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-alpha.0..@fluentui/react-alert_v9.0.0-beta.1)
11
133
 
12
134
  ### Changes
package/Spec.md CHANGED
@@ -38,6 +38,7 @@ See [Alert.types.ts](./src/components/Alert/Alert.types.ts)
38
38
  - `root`: The outermost `<div>` that contains the rest of the slots
39
39
  - `icon`: (optional) A `<span>` that renders an icon and is inferred by the `intent` prop or passed in via the `icon` prop
40
40
  - `action`: (optional) A `<button>` that prompts users to act on it
41
+ - `avatar`: (optional) A slot that renders an `Avatar` component passed in via the `avatar` prop
41
42
 
42
43
  ### **Public**
43
44
 
@@ -50,6 +51,7 @@ See [Alert.types.ts](./src/components/Alert/Alert.types.ts)
50
51
  ```tsx
51
52
  <slots.root {...slotProps.root}>
52
53
  {slots.icon && <slots.icon {...slotProps.icon} />}
54
+ {slots.avatar && <slots.avatar {...slotProps.avatar} />}
53
55
  {slotProps.root.children}
54
56
  {slots.action && <slots.action {...slotProps.action} />}
55
57
  </slots.root>
package/dist/index.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ /// <reference types="react" />
2
+
3
+ import { Avatar } from '@fluentui/react-avatar';
1
4
  import { Button } from '@fluentui/react-button';
2
5
  import type { ComponentProps } from '@fluentui/react-utilities';
3
6
  import type { ComponentState } from '@fluentui/react-utilities';
@@ -23,6 +26,11 @@ export declare type AlertProps = ComponentProps<AlertSlots> & {
23
26
  * overrides the intent prop
24
27
  */
25
28
  intent?: 'info' | 'success' | 'error' | 'warning';
29
+ /**
30
+ * The appearance of the Alert.
31
+ * @default 'primary'
32
+ */
33
+ appearance?: 'primary' | 'inverted';
26
34
  };
27
35
 
28
36
  export declare type AlertSlots = {
@@ -38,12 +46,16 @@ export declare type AlertSlots = {
38
46
  * The action slot renders a button that prompts the user to take action on the alert
39
47
  */
40
48
  action?: Slot<typeof Button>;
49
+ /**
50
+ * The avatar slot renders an avatar before the contents of the alert
51
+ */
52
+ avatar?: Slot<typeof Avatar>;
41
53
  };
42
54
 
43
55
  /**
44
56
  * State used in rendering Alert
45
57
  */
46
- export declare type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'>;
58
+ export declare type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'> & Required<Pick<AlertProps, 'appearance'>>;
47
59
 
48
60
  export declare const renderAlert_unstable: (state: AlertState) => JSX.Element;
49
61
 
package/lib/components/Alert/Alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAKA;;;AAGG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AACA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n const state = useAlert_unstable(props, ref);\n\n useAlertStyles_unstable(state);\n return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAKA;;;AAGG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EAEA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n const state = useAlert_unstable(props, ref);\n\n useAlertStyles_unstable(state);\n return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"],"sourceRoot":"../src/"}
package/lib/components/Alert/Alert.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.types.js","sourceRoot":"../src/","sources":["components/Alert/Alert.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AlertSlots = {\n /**\n * The root slot is the top level container for the alert component\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The icon slot renders the icon determined by the `icon` or `intent` prop\n */\n icon?: Slot<'span'>;\n /**\n * The action slot renders a button that prompts the user to take action on the alert\n */\n action?: Slot<typeof Button>;\n};\n\n/**\n * Alert Props\n */\nexport type AlertProps = ComponentProps<AlertSlots> & {\n /**\n * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop\n * overrides the intent prop\n */\n intent?: 'info' | 'success' | 'error' | 'warning';\n};\n\n/**\n * State used in rendering Alert\n */\nexport type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'>;\n"]}
1
+ {"version":3,"file":"Alert.types.js","sourceRoot":"../src/","sources":["components/Alert/Alert.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AlertSlots = {\n /**\n * The root slot is the top level container for the alert component\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The icon slot renders the icon determined by the `icon` or `intent` prop\n */\n icon?: Slot<'span'>;\n /**\n * The action slot renders a button that prompts the user to take action on the alert\n */\n action?: Slot<typeof Button>;\n /**\n * The avatar slot renders an avatar before the contents of the alert\n */\n avatar?: Slot<typeof Avatar>;\n};\n\n/**\n * Alert Props\n */\nexport type AlertProps = ComponentProps<AlertSlots> & {\n /**\n * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop\n * overrides the intent prop\n */\n intent?: 'info' | 'success' | 'error' | 'warning';\n /**\n * The appearance of the Alert.\n * @default 'primary'\n */\n appearance?: 'primary' | 'inverted';\n};\n\n/**\n * State used in rendering Alert\n */\nexport type AlertState = ComponentState<AlertSlots> &\n Pick<AlertProps, 'intent'> &\n Required<Pick<AlertProps, 'appearance'>>;\n"]}
package/lib/components/Alert/renderAlert.js CHANGED
@@ -7,6 +7,7 @@ export const renderAlert_unstable = state => {
7
7
  } = getSlots(state);
8
8
  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
9
9
  }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
10
+ }), slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, { ...slotProps.avatar
10
11
  }), slotProps.root.children, slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
11
12
  }));
12
13
  };
package/lib/components/Alert/renderAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AAIA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,EAGG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAHnB,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AAIA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAJnB,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.avatar && <slots.avatar {...slotProps.avatar} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Alert/useAlert.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { Avatar } from '@fluentui/react-avatar';
2
3
  import { Button } from '@fluentui/react-button';
3
4
  import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';
4
5
  import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
@@ -14,11 +15,13 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
14
15
 
15
16
  export const useAlert_unstable = (props, ref) => {
16
17
  const {
18
+ appearance = 'primary',
17
19
  intent
18
20
  } = props;
19
- /** Determine the icon to render based on the intent */
21
+ /** Determine the role and icon to render based on the intent */
20
22
 
21
23
  let defaultIcon;
24
+ let defaultRole = 'status';
22
25
 
23
26
  switch (intent) {
24
27
  case 'success':
@@ -27,10 +30,12 @@ export const useAlert_unstable = (props, ref) => {
27
30
 
28
31
  case 'error':
29
32
  defaultIcon = /*#__PURE__*/React.createElement(DismissCircleFilled, null);
33
+ defaultRole = 'alert';
30
34
  break;
31
35
 
32
36
  case 'warning':
33
37
  defaultIcon = /*#__PURE__*/React.createElement(WarningFilled, null);
38
+ defaultRole = 'alert';
34
39
  break;
35
40
 
36
41
  case 'info':
@@ -38,26 +43,42 @@ export const useAlert_unstable = (props, ref) => {
38
43
  break;
39
44
  }
40
45
 
41
- const icon = resolveShorthand(props.icon, {
46
+ const action = resolveShorthand(props.action, {
42
47
  defaultProps: {
43
- children: defaultIcon
44
- },
45
- required: !!props.intent
48
+ appearance: 'transparent'
49
+ }
46
50
  });
51
+ const avatar = resolveShorthand(props.avatar);
52
+ let icon;
53
+ /** Avatar prop takes precedence over the icon or intent prop */
54
+
55
+ if (!avatar) {
56
+ icon = resolveShorthand(props.icon, {
57
+ defaultProps: {
58
+ children: defaultIcon
59
+ },
60
+ required: !!props.intent
61
+ });
62
+ }
63
+
47
64
  return {
65
+ action,
66
+ appearance,
67
+ avatar,
48
68
  components: {
49
69
  root: 'div',
50
70
  icon: 'span',
51
- action: Button
71
+ action: Button,
72
+ avatar: Avatar
52
73
  },
74
+ icon,
75
+ intent,
53
76
  root: getNativeElementProps('div', {
54
77
  ref,
78
+ role: defaultRole,
55
79
  children: props.children,
56
80
  ...props
57
- }),
58
- icon,
59
- action: resolveShorthand(props.action),
60
- intent
81
+ })
61
82
  };
62
83
  };
63
84
  //# sourceMappingURL=useAlert.js.map
package/lib/components/Alert/useAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,qBAAT,EAAgC,mBAAhC,EAAqD,UAArD,EAAiE,aAAjE,QAAsF,uBAAtF;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAIA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AAC9F,QAAM;AAAE,IAAA;AAAF,MAAa,KAAnB;AAEA;;AACA,MAAI,WAAJ;;AACA,UAAQ,MAAR;AACE,SAAK,SAAL;AACE,MAAA,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAd;AACA;;AACF,SAAK,OAAL;AACE,MAAA,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB,IAApB,CAAd;AACA;;AACF,SAAK,SAAL;AACE,MAAA,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CAAd;AACA;;AACF,SAAK,MAAL;AACE,MAAA,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CAAd;AACA;AAZJ;;AAeA,QAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACxC,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,EAAE;AADE,KAD0B;AAIxC,IAAA,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AAJsB,GAAb,CAA7B;AAOA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,MAAM,EAAE;AAHE,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,MAAA,QAAQ,EAAE,KAAK,CAAC,QAFiB;AAGjC,SAAG;AAH8B,KAAR,CANtB;AAWL,IAAA,IAXK;AAYL,IAAA,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAZnB;AAaL,IAAA;AAbK,GAAP;AAeD,CA1CM","sourcesContent":["import * as React from 'react';\n\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { intent } = props;\n\n /** Determine the icon to render based on the intent */\n let defaultIcon;\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n\n return {\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n },\n root: getNativeElementProps('div', {\n ref,\n children: props.children,\n ...props,\n }),\n icon,\n action: resolveShorthand(props.action),\n intent,\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,qBAAT,EAAgC,mBAAhC,EAAqD,UAArD,EAAiE,aAAjE,QAAsF,uBAAtF;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAIA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B;EAA1B,IAAqC,KAA3C;EAEA;;EACA,IAAI,WAAJ;EACA,IAAI,WAAW,GAAG,QAAlB;;EACA,QAAQ,MAAR;IACE,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAd;MACA;;IACF,KAAK,OAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB,IAApB,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CAAd;MACA;EAdJ;;EAiBA,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAP,EAAe;IAAE,YAAY,EAAE;MAAE,UAAU,EAAE;IAAd;EAAhB,CAAf,CAA/B;EACA,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAA/B;EACA,IAAI,IAAJ;EACA;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MAClC,YAAY,EAAE;QACZ,QAAQ,EAAE;MADE,CADoB;MAIlC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;IAJgB,CAAb,CAAvB;EAMD;;EAED,OAAO;IACL,MADK;IAEL,UAFK;IAGL,MAHK;IAIL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,MAHE;MAIV,MAAM,EAAE;IAJE,CAJP;IAUL,IAVK;IAWL,MAXK;IAYL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,IAAI,EAAE,WAF2B;MAGjC,QAAQ,EAAE,KAAK,CAAC,QAHiB;MAIjC,GAAG;IAJ8B,CAAR;EAZtB,CAAP;AAmBD,CAvDM","sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { appearance = 'primary', intent } = props;\n\n /** Determine the role and icon to render based on the intent */\n let defaultIcon;\n let defaultRole = 'status';\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n defaultRole = 'alert';\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n defaultRole = 'alert';\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const action = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });\n const avatar = resolveShorthand(props.avatar);\n let icon;\n /** Avatar prop takes precedence over the icon or intent prop */\n if (!avatar) {\n icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n }\n\n return {\n action,\n appearance,\n avatar,\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n icon,\n intent,\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Alert/useAlertStyles.js CHANGED
@@ -3,7 +3,8 @@ import { __styles, mergeClasses, shorthands } from '@griffel/react';
3
3
  export const alertClassNames = {
4
4
  root: 'fui-Alert',
5
5
  icon: 'fui-Alert__icon',
6
- action: 'fui-Alert__action'
6
+ action: 'fui-Alert__action',
7
+ avatar: 'fui-Alert__avatar'
7
8
  };
8
9
 
9
10
  const useStyles = /*#__PURE__*/__styles({
@@ -15,18 +16,31 @@ const useStyles = /*#__PURE__*/__styles({
15
16
  "z189sj": ["f11qrl6u", "fjlbh76"],
16
17
  "Byoj8tv": "f1qch9an",
17
18
  "uwmqm3": ["fjlbh76", "f11qrl6u"],
18
- "De3pzq": "fxugw4r",
19
- "g2u3we": "f1p3nwhy",
20
- "h3c5rm": ["f11589ue", "f1pdflbu"],
21
- "B9xav0g": "f1q5o8ev",
22
- "zhjwy3": ["f1pdflbu", "f11589ue"],
23
19
  "Bbmb7ep": ["fff7au0", "f1bjk9e1"],
24
20
  "Beyfa6y": ["f1bjk9e1", "fff7au0"],
25
21
  "B7oj6ja": ["fwsfkhu", "f8wkphi"],
26
22
  "Btl43ni": ["f8wkphi", "fwsfkhu"],
23
+ "B4j52fo": "f5ogflp",
24
+ "Bekrc4i": ["f1hqa2wf", "finvdd3"],
25
+ "Bn0qgzm": "f1f09k3d",
26
+ "ibv6hh": ["finvdd3", "f1hqa2wf"],
27
+ "icvyot": "fzkkow9",
28
+ "vrafjx": ["fcdblym", "fjik90z"],
29
+ "oivjwe": "fg706s2",
30
+ "wvpqe5": ["fjik90z", "fcdblym"],
31
+ "g2u3we": "f1bh3yvw",
32
+ "h3c5rm": ["fmi79ni", "f11fozsx"],
33
+ "B9xav0g": "fnzw4c6",
34
+ "zhjwy3": ["f11fozsx", "fmi79ni"],
27
35
  "E5pizo": "fz58gqq",
28
36
  "Be2twd7": "fkhj508",
29
- "Bhrd7zp": "fl43uef"
37
+ "Bhrd7zp": "fl43uef",
38
+ "sj55zd": "f19n0e5",
39
+ "De3pzq": "fxugw4r"
40
+ },
41
+ "inverted": {
42
+ "sj55zd": "fqpbvvt",
43
+ "De3pzq": "f5pduvr"
30
44
  },
31
45
  "icon": {
32
46
  "Bqenvij": "fd461yt",
@@ -36,6 +50,12 @@ const useStyles = /*#__PURE__*/__styles({
36
50
  "Byoj8tv": "f1qch9an",
37
51
  "uwmqm3": ["f1cnd47f", "fhxju0i"]
38
52
  },
53
+ "avatar": {
54
+ "B6of3ja": "f1hu3pq6",
55
+ "t21cq0": ["f1phki43", "ff9s3yw"],
56
+ "jrapky": "f19f4twv",
57
+ "Frg6f3": ["f1tyq0we", "f11qmguv"]
58
+ },
39
59
  "action": {
40
60
  "z8tnut": "f1g0x7ka",
41
61
  "z189sj": ["fhxju0i", "f1cnd47f"],
@@ -43,18 +63,18 @@ const useStyles = /*#__PURE__*/__styles({
43
63
  "uwmqm3": ["f1cnd47f", "fhxju0i"],
44
64
  "Bf4jedk": "fy77jfu",
45
65
  "Frg6f3": ["fcgxt0o", "f1ujusj6"],
46
- "sj55zd": "faj9fo0"
66
+ "sj55zd": "fyind8e"
47
67
  }
48
68
  }, {
49
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".faj9fo0{color:var(--colorBrandForeground2);}"]
69
+ "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1hu3pq6{margin-top:0;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f19f4twv{margin-bottom:0;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".fyind8e{color:var(--colorBrandForegroundLink);}"]
50
70
  });
51
71
 
52
72
  const useIntentIconStyles = /*#__PURE__*/__styles({
53
73
  "success": {
54
- "sj55zd": "ffb3rxr"
74
+ "sj55zd": "f1m7fhi8"
55
75
  },
56
76
  "error": {
57
- "sj55zd": "fvi85wt"
77
+ "sj55zd": "f1whyuy6"
58
78
  },
59
79
  "warning": {
60
80
  "sj55zd": "fpti2h4"
@@ -63,7 +83,7 @@ const useIntentIconStyles = /*#__PURE__*/__styles({
63
83
  "sj55zd": "fkfq4zb"
64
84
  }
65
85
  }, {
66
- "d": [".ffb3rxr{color:var(--colorPaletteGreenBackground3);}", ".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
86
+ "d": [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
67
87
  });
68
88
  /**
69
89
  * Apply styling to the Alert slots based on the state
@@ -73,12 +93,16 @@ const useIntentIconStyles = /*#__PURE__*/__styles({
73
93
  export const useAlertStyles_unstable = state => {
74
94
  const styles = useStyles();
75
95
  const intentIconStyles = useIntentIconStyles();
76
- state.root.className = mergeClasses(alertClassNames.root, styles.root, state.root.className);
96
+ state.root.className = mergeClasses(alertClassNames.root, styles.root, state.appearance !== 'primary' && styles.inverted, state.root.className);
77
97
 
78
98
  if (state.icon) {
79
99
  state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && intentIconStyles[state.intent], state.icon.className);
80
100
  }
81
101
 
102
+ if (state.avatar) {
103
+ state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);
104
+ }
105
+
82
106
  if (state.action) {
83
107
  state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);
84
108
  }
package/lib/components/Alert/useAlertStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAKA,OAAO,MAAM,eAAe,GAA+B;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,IAAI,EAAE,iBAFmD;AAGzD,EAAA,MAAM,EAAE;AAHiD,CAApD;;AAMP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AA0BA,MAAM,mBAAmB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,QAAM,gBAAgB,GAAG,mBAAmB,EAA5C;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,eAAe,CAAC,IAAjB,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,MAAN,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHC,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAMD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,eAAe,CAAC,MAAjB,EAAyB,MAAM,CAAC,MAAhC,EAAwC,KAAK,CAAC,MAAN,CAAa,SAArD,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CApBM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n backgroundColor: tokens.colorNeutralBackground1, // todo - there is no bg10, used bg1\n ...shorthands.borderColor('transparent'),\n ...shorthands.borderRadius('4px'),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300, // todo - lineheight in tokens\n fontWeight: tokens.fontWeightSemibold,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('0'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground2, // todo - foreground3 doesn't exist\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenBackground3,\n },\n error: {\n color: tokens.colorPaletteRedBackground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const styles = useStyles();\n const intentIconStyles = useIntentIconStyles();\n\n state.root.className = mergeClasses(alertClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && intentIconStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.action) {\n state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAKA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE,mBAHiD;EAIzD,MAAM,EAAE;AAJiD,CAApD;;AAOP,MAAM,SAAS,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;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAkCA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,QAHR,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,MAAN,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHC,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAMD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,eAAe,CAAC,MAAjB,EAAyB,MAAM,CAAC,MAAhC,EAAwC,KAAK,CAAC,MAAN,CAAa,SAArD,CAArC;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,eAAe,CAAC,MAAjB,EAAyB,MAAM,CAAC,MAAhC,EAAwC,KAAK,CAAC,MAAN,CAAa,SAArD,CAArC;EACD;;EAED,OAAO,KAAP;AACD,CA7BM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n avatar: {\n ...shorthands.margin('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('0'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForegroundLink,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForeground3,\n },\n error: {\n color: tokens.colorPaletteRedForeground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const styles = useStyles();\n const intentIconStyles = useIntentIconStyles();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n state.appearance !== 'primary' && styles.inverted,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && intentIconStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n }\n\n if (state.action) {\n state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Alert/Alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/Alert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAKA;;;AAGG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AACA,SAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n const state = useAlert_unstable(props, ref);\n\n useAlertStyles_unstable(state);\n return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/Alert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAKA;;;AAGG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n const state = useAlert_unstable(props, ref);\n\n useAlertStyles_unstable(state);\n return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Alert/renderAlert.js CHANGED
@@ -16,6 +16,7 @@ const renderAlert_unstable = state => {
16
16
  } = react_utilities_1.getSlots(state);
17
17
  return React.createElement(slots.root, { ...slotProps.root
18
18
  }, slots.icon && React.createElement(slots.icon, { ...slotProps.icon
19
+ }), slots.avatar && React.createElement(slots.avatar, { ...slotProps.avatar
19
20
  }), slotProps.root.children, slots.action && React.createElement(slots.action, { ...slotProps.action
20
21
  }));
21
22
  };
package/lib-commonjs/components/Alert/renderAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,EAGG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAHnB,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAJnB,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.avatar && <slots.avatar {...slotProps.avatar} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Alert/useAlert.js CHANGED
@@ -7,6 +7,8 @@ exports.useAlert_unstable = void 0;
7
7
 
8
8
  const React = /*#__PURE__*/require("react");
9
9
 
10
+ const react_avatar_1 = /*#__PURE__*/require("@fluentui/react-avatar");
11
+
10
12
  const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
11
13
 
12
14
  const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
@@ -25,11 +27,13 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
25
27
 
26
28
  const useAlert_unstable = (props, ref) => {
27
29
  const {
30
+ appearance = 'primary',
28
31
  intent
29
32
  } = props;
30
- /** Determine the icon to render based on the intent */
33
+ /** Determine the role and icon to render based on the intent */
31
34
 
32
35
  let defaultIcon;
36
+ let defaultRole = 'status';
33
37
 
34
38
  switch (intent) {
35
39
  case 'success':
@@ -38,10 +42,12 @@ const useAlert_unstable = (props, ref) => {
38
42
 
39
43
  case 'error':
40
44
  defaultIcon = React.createElement(react_icons_1.DismissCircleFilled, null);
45
+ defaultRole = 'alert';
41
46
  break;
42
47
 
43
48
  case 'warning':
44
49
  defaultIcon = React.createElement(react_icons_1.WarningFilled, null);
50
+ defaultRole = 'alert';
45
51
  break;
46
52
 
47
53
  case 'info':
@@ -49,26 +55,42 @@ const useAlert_unstable = (props, ref) => {
49
55
  break;
50
56
  }
51
57
 
52
- const icon = react_utilities_1.resolveShorthand(props.icon, {
58
+ const action = react_utilities_1.resolveShorthand(props.action, {
53
59
  defaultProps: {
54
- children: defaultIcon
55
- },
56
- required: !!props.intent
60
+ appearance: 'transparent'
61
+ }
57
62
  });
63
+ const avatar = react_utilities_1.resolveShorthand(props.avatar);
64
+ let icon;
65
+ /** Avatar prop takes precedence over the icon or intent prop */
66
+
67
+ if (!avatar) {
68
+ icon = react_utilities_1.resolveShorthand(props.icon, {
69
+ defaultProps: {
70
+ children: defaultIcon
71
+ },
72
+ required: !!props.intent
73
+ });
74
+ }
75
+
58
76
  return {
77
+ action,
78
+ appearance,
79
+ avatar,
59
80
  components: {
60
81
  root: 'div',
61
82
  icon: 'span',
62
- action: react_button_1.Button
83
+ action: react_button_1.Button,
84
+ avatar: react_avatar_1.Avatar
63
85
  },
86
+ icon,
87
+ intent,
64
88
  root: react_utilities_1.getNativeElementProps('div', {
65
89
  ref,
90
+ role: defaultRole,
66
91
  children: props.children,
67
92
  ...props
68
- }),
69
- icon,
70
- action: react_utilities_1.resolveShorthand(props.action),
71
- intent
93
+ })
72
94
  };
73
95
  };
74
96
 
package/lib-commonjs/components/Alert/useAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AAC9F,QAAM;AAAE,IAAA;AAAF,MAAa,KAAnB;AAEA;;AACA,MAAI,WAAJ;;AACA,UAAQ,MAAR;AACE,SAAK,SAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAd;AACA;;AACF,SAAK,OAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,mBAAD,EAAoB,IAApB,CAAd;AACA;;AACF,SAAK,SAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,aAAD,EAAc,IAAd,CAAd;AACA;;AACF,SAAK,MAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,UAAD,EAAW,IAAX,CAAd;AACA;AAZJ;;AAeA,QAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;AACxC,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,EAAE;AADE,KAD0B;AAIxC,IAAA,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AAJsB,GAA7B,CAAb;AAOA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,MAAM,EAAE,cAAA,CAAA;AAHE,KADP;AAML,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,MAAA,QAAQ,EAAE,KAAK,CAAC,QAFiB;AAGjC,SAAG;AAH8B,KAA7B,CAND;AAWL,IAAA,IAXK;AAYL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,CAZH;AAaL,IAAA;AAbK,GAAP;AAeD,CA1CM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\n\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { intent } = props;\n\n /** Determine the icon to render based on the intent */\n let defaultIcon;\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n\n return {\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n },\n root: getNativeElementProps('div', {\n ref,\n children: props.children,\n ...props,\n }),\n icon,\n action: resolveShorthand(props.action),\n intent,\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B;EAA1B,IAAqC,KAA3C;EAEA;;EACA,IAAI,WAAJ;EACA,IAAI,WAAW,GAAG,QAAlB;;EACA,QAAQ,MAAR;IACE,KAAK,SAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAd;MACA;;IACF,KAAK,OAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,mBAAD,EAAoB,IAApB,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,SAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,aAAD,EAAc,IAAd,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,UAAD,EAAW,IAAX,CAAd;MACA;EAdJ;;EAiBA,MAAM,MAAM,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,EAA+B;IAAE,YAAY,EAAE;MAAE,UAAU,EAAE;IAAd;EAAhB,CAA/B,CAAf;EACA,MAAM,MAAM,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,CAAf;EACA,IAAI,IAAJ;EACA;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MAClC,YAAY,EAAE;QACZ,QAAQ,EAAE;MADE,CADoB;MAIlC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;IAJgB,CAA7B,CAAP;EAMD;;EAED,OAAO;IACL,MADK;IAEL,UAFK;IAGL,MAHK;IAIL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,cAAA,CAAA,MAHE;MAIV,MAAM,EAAE,cAAA,CAAA;IAJE,CAJP;IAUL,IAVK;IAWL,MAXK;IAYL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,IAAI,EAAE,WAF2B;MAGjC,QAAQ,EAAE,KAAK,CAAC,QAHiB;MAIjC,GAAG;IAJ8B,CAA7B;EAZD,CAAP;AAmBD,CAvDM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { appearance = 'primary', intent } = props;\n\n /** Determine the role and icon to render based on the intent */\n let defaultIcon;\n let defaultRole = 'status';\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n defaultRole = 'alert';\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n defaultRole = 'alert';\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const action = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });\n const avatar = resolveShorthand(props.avatar);\n let icon;\n /** Avatar prop takes precedence over the icon or intent prop */\n if (!avatar) {\n icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n }\n\n return {\n action,\n appearance,\n avatar,\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n icon,\n intent,\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Alert/useAlertStyles.js CHANGED
@@ -12,7 +12,8 @@ const react_1 = /*#__PURE__*/require("@griffel/react");
12
12
  exports.alertClassNames = {
13
13
  root: 'fui-Alert',
14
14
  icon: 'fui-Alert__icon',
15
- action: 'fui-Alert__action'
15
+ action: 'fui-Alert__action',
16
+ avatar: 'fui-Alert__avatar'
16
17
  };
17
18
 
18
19
  const useStyles = /*#__PURE__*/react_1.__styles({
@@ -24,18 +25,31 @@ const useStyles = /*#__PURE__*/react_1.__styles({
24
25
  "z189sj": ["f11qrl6u", "fjlbh76"],
25
26
  "Byoj8tv": "f1qch9an",
26
27
  "uwmqm3": ["fjlbh76", "f11qrl6u"],
27
- "De3pzq": "fxugw4r",
28
- "g2u3we": "f1p3nwhy",
29
- "h3c5rm": ["f11589ue", "f1pdflbu"],
30
- "B9xav0g": "f1q5o8ev",
31
- "zhjwy3": ["f1pdflbu", "f11589ue"],
32
28
  "Bbmb7ep": ["fff7au0", "f1bjk9e1"],
33
29
  "Beyfa6y": ["f1bjk9e1", "fff7au0"],
34
30
  "B7oj6ja": ["fwsfkhu", "f8wkphi"],
35
31
  "Btl43ni": ["f8wkphi", "fwsfkhu"],
32
+ "B4j52fo": "f5ogflp",
33
+ "Bekrc4i": ["f1hqa2wf", "finvdd3"],
34
+ "Bn0qgzm": "f1f09k3d",
35
+ "ibv6hh": ["finvdd3", "f1hqa2wf"],
36
+ "icvyot": "fzkkow9",
37
+ "vrafjx": ["fcdblym", "fjik90z"],
38
+ "oivjwe": "fg706s2",
39
+ "wvpqe5": ["fjik90z", "fcdblym"],
40
+ "g2u3we": "f1bh3yvw",
41
+ "h3c5rm": ["fmi79ni", "f11fozsx"],
42
+ "B9xav0g": "fnzw4c6",
43
+ "zhjwy3": ["f11fozsx", "fmi79ni"],
36
44
  "E5pizo": "fz58gqq",
37
45
  "Be2twd7": "fkhj508",
38
- "Bhrd7zp": "fl43uef"
46
+ "Bhrd7zp": "fl43uef",
47
+ "sj55zd": "f19n0e5",
48
+ "De3pzq": "fxugw4r"
49
+ },
50
+ "inverted": {
51
+ "sj55zd": "fqpbvvt",
52
+ "De3pzq": "f5pduvr"
39
53
  },
40
54
  "icon": {
41
55
  "Bqenvij": "fd461yt",
@@ -45,6 +59,12 @@ const useStyles = /*#__PURE__*/react_1.__styles({
45
59
  "Byoj8tv": "f1qch9an",
46
60
  "uwmqm3": ["f1cnd47f", "fhxju0i"]
47
61
  },
62
+ "avatar": {
63
+ "B6of3ja": "f1hu3pq6",
64
+ "t21cq0": ["f1phki43", "ff9s3yw"],
65
+ "jrapky": "f19f4twv",
66
+ "Frg6f3": ["f1tyq0we", "f11qmguv"]
67
+ },
48
68
  "action": {
49
69
  "z8tnut": "f1g0x7ka",
50
70
  "z189sj": ["fhxju0i", "f1cnd47f"],
@@ -52,18 +72,18 @@ const useStyles = /*#__PURE__*/react_1.__styles({
52
72
  "uwmqm3": ["f1cnd47f", "fhxju0i"],
53
73
  "Bf4jedk": "fy77jfu",
54
74
  "Frg6f3": ["fcgxt0o", "f1ujusj6"],
55
- "sj55zd": "faj9fo0"
75
+ "sj55zd": "fyind8e"
56
76
  }
57
77
  }, {
58
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".faj9fo0{color:var(--colorBrandForeground2);}"]
78
+ "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1hu3pq6{margin-top:0;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f19f4twv{margin-bottom:0;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".fyind8e{color:var(--colorBrandForegroundLink);}"]
59
79
  });
60
80
 
61
81
  const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
62
82
  "success": {
63
- "sj55zd": "ffb3rxr"
83
+ "sj55zd": "f1m7fhi8"
64
84
  },
65
85
  "error": {
66
- "sj55zd": "fvi85wt"
86
+ "sj55zd": "f1whyuy6"
67
87
  },
68
88
  "warning": {
69
89
  "sj55zd": "fpti2h4"
@@ -72,7 +92,7 @@ const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
72
92
  "sj55zd": "fkfq4zb"
73
93
  }
74
94
  }, {
75
- "d": [".ffb3rxr{color:var(--colorPaletteGreenBackground3);}", ".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
95
+ "d": [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
76
96
  });
77
97
  /**
78
98
  * Apply styling to the Alert slots based on the state
@@ -82,12 +102,16 @@ const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
82
102
  const useAlertStyles_unstable = state => {
83
103
  const styles = useStyles();
84
104
  const intentIconStyles = useIntentIconStyles();
85
- state.root.className = react_1.mergeClasses(exports.alertClassNames.root, styles.root, state.root.className);
105
+ state.root.className = react_1.mergeClasses(exports.alertClassNames.root, styles.root, state.appearance !== 'primary' && styles.inverted, state.root.className);
86
106
 
87
107
  if (state.icon) {
88
108
  state.icon.className = react_1.mergeClasses(exports.alertClassNames.icon, styles.icon, state.intent && intentIconStyles[state.intent], state.icon.className);
89
109
  }
90
110
 
111
+ if (state.avatar) {
112
+ state.avatar.className = react_1.mergeClasses(exports.alertClassNames.avatar, styles.avatar, state.avatar.className);
113
+ }
114
+
91
115
  if (state.action) {
92
116
  state.action.className = react_1.mergeClasses(exports.alertClassNames.action, styles.action, state.action.className);
93
117
  }
package/lib-commonjs/components/Alert/useAlertStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,GAA8C;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,IAAI,EAAE,iBAFmD;AAGzD,EAAA,MAAM,EAAE;AAHiD,CAA9C;;AAMb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AA0BA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,QAAM,gBAAgB,GAAG,mBAAmB,EAA5C;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,IAA7B,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHX,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAMD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,MAA7B,EAAqC,MAAM,CAAC,MAA5C,EAAoD,KAAK,CAAC,MAAN,CAAa,SAAjE,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CApBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n backgroundColor: tokens.colorNeutralBackground1, // todo - there is no bg10, used bg1\n ...shorthands.borderColor('transparent'),\n ...shorthands.borderRadius('4px'),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300, // todo - lineheight in tokens\n fontWeight: tokens.fontWeightSemibold,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('0'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground2, // todo - foreground3 doesn't exist\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenBackground3,\n },\n error: {\n color: tokens.colorPaletteRedBackground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const styles = useStyles();\n const intentIconStyles = useIntentIconStyles();\n\n state.root.className = mergeClasses(alertClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && intentIconStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.action) {\n state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE,mBAHiD;EAIzD,MAAM,EAAE;AAJiD,CAA9C;;AAOb,MAAM,SAAS,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;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAkCA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,QAHpB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHX,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAMD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,MAA7B,EAAqC,MAAM,CAAC,MAA5C,EAAoD,KAAK,CAAC,MAAN,CAAa,SAAjE,CAAzB;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,MAA7B,EAAqC,MAAM,CAAC,MAA5C,EAAoD,KAAK,CAAC,MAAN,CAAa,SAAjE,CAAzB;EACD;;EAED,OAAO,KAAP;AACD,CA7BM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n avatar: {\n ...shorthands.margin('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('0'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForegroundLink,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForeground3,\n },\n error: {\n color: tokens.colorPaletteRedForeground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const styles = useStyles();\n const intentIconStyles = useIntentIconStyles();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n state.appearance !== 'primary' && styles.inverted,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && intentIconStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n }\n\n if (state.action) {\n state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA","sourcesContent":["export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA","sourcesContent":["export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-alert",
3
- "version": "9.0.0-beta.1",
3
+ "version": "9.0.0-beta.11",
4
4
  "description": "An alert component to display brief messages",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -13,6 +13,7 @@
13
13
  "license": "MIT",
14
14
  "scripts": {
15
15
  "build": "just-scripts build",
16
+ "bundle-size": "bundle-size measure",
16
17
  "clean": "just-scripts clean",
17
18
  "code-style": "just-scripts code-style",
18
19
  "just": "just-scripts",
@@ -20,22 +21,23 @@
20
21
  "start": "yarn storybook",
21
22
  "test": "jest --passWithNoTests",
22
23
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
23
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-alert/src && yarn docs",
24
- "storybook": "node ../../../scripts/storybook/runner",
24
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-alert/src && yarn docs",
25
+ "storybook": "start-storybook",
25
26
  "type-check": "tsc -b tsconfig.json"
26
27
  },
27
28
  "devDependencies": {
28
29
  "@fluentui/eslint-plugin": "*",
29
30
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "9.0.0-beta.7",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.14",
31
32
  "@fluentui/scripts": "^1.0.0"
32
33
  },
33
34
  "dependencies": {
34
- "@fluentui/react-button": "9.0.0-rc.12",
35
- "@fluentui/react-icons": "^2.0.166-rc.3",
36
- "@fluentui/react-theme": "9.0.0-rc.9",
37
- "@fluentui/react-utilities": "9.0.0-rc.9",
38
- "@griffel/react": "1.0.5",
35
+ "@fluentui/react-avatar": "^9.2.0",
36
+ "@fluentui/react-button": "^9.1.3",
37
+ "@fluentui/react-icons": "^2.0.175",
38
+ "@fluentui/react-theme": "^9.1.0",
39
+ "@fluentui/react-utilities": "^9.1.0",
40
+ "@griffel/react": "^1.3.0",
39
41
  "tslib": "^2.1.0"
40
42
  },
41
43
  "peerDependencies": {
package/dist/tsdoc-metadata.json DELETED
@@ -1,11 +0,0 @@
1
- // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
- // It should be published with your NPM package. It should not be tracked by Git.
3
- {
4
- "tsdocVersion": "0.12",
5
- "toolPackages": [
6
- {
7
- "packageName": "@microsoft/api-extractor",
8
- "packageVersion": "7.18.1"
9
- }
10
- ]
11
- }