@react-md/core 1.0.0-next.1 → 1.0.0-next.2

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 (138) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +8 -0
  3. package/coverage/clover.xml +2 -2
  4. package/coverage/lcov-report/DefaultToastRenderer.tsx.html +166 -112
  5. package/coverage/lcov-report/Snackbar.tsx.html +360 -402
  6. package/coverage/lcov-report/Toast.tsx.html +868 -0
  7. package/coverage/lcov-report/ToastManager.tsx.html +1783 -0
  8. package/coverage/lcov-report/ToastManagerProvider.tsx.html +216 -216
  9. package/coverage/lcov-report/icon/FontIcon.tsx.html +28 -28
  10. package/coverage/lcov-report/icon/index.html +1 -1
  11. package/coverage/lcov-report/index.html +1 -1
  12. package/coverage/lcov-report/snackbar/Snackbar.tsx.html +55 -97
  13. package/coverage/lcov-report/snackbar/Toast.tsx.html +546 -501
  14. package/coverage/lcov-report/snackbar/ToastManager.tsx.html +269 -269
  15. package/coverage/lcov-report/snackbar/ToastManagerProvider.tsx.html +23 -23
  16. package/coverage/lcov-report/snackbar/index.html +59 -14
  17. package/coverage/lcov-report/snackbar/snackbarStyles.ts.html +12 -87
  18. package/coverage/lcov-report/snackbar/toastStyles.ts.html +206 -146
  19. package/coverage/lcov-report/snackbar/useCurrentToastActions.ts.html +226 -0
  20. package/coverage/lcov-report/snackbarStyles.ts.html +46 -121
  21. package/coverage/lcov-report/transition/config.ts.html +5 -5
  22. package/coverage/lcov-report/transition/index.html +1 -1
  23. package/coverage/lcov-report/typography/Typography.tsx.html +108 -402
  24. package/coverage/lcov-report/typography/index.html +10 -10
  25. package/dist/_core.scss +34 -1
  26. package/dist/_utils.scss +57 -0
  27. package/dist/app-bar/_app-bar.scss +15 -23
  28. package/dist/avatar/_avatar.scss +25 -34
  29. package/dist/badge/_badge.scss +71 -44
  30. package/dist/box/_box.scss +18 -29
  31. package/dist/button/_button.scss +50 -62
  32. package/dist/card/_card.scss +14 -23
  33. package/dist/chip/_chip.scss +33 -46
  34. package/dist/dialog/_dialog.scss +95 -93
  35. package/dist/divider/Divider.d.ts +0 -1
  36. package/dist/divider/Divider.js.map +1 -1
  37. package/dist/divider/_divider.scss +33 -43
  38. package/dist/form/Label.d.ts +5 -5
  39. package/dist/form/Label.js.map +1 -1
  40. package/dist/form/TextArea.js +1 -1
  41. package/dist/form/TextArea.js.map +1 -1
  42. package/dist/form/TextFieldContainerStyles.d.ts +7 -7
  43. package/dist/form/TextFieldContainerStyles.js.map +1 -1
  44. package/dist/form/_form.scss +200 -203
  45. package/dist/form/textAreaStyles.d.ts +2 -2
  46. package/dist/form/textAreaStyles.js.map +1 -1
  47. package/dist/form/types.d.ts +0 -2
  48. package/dist/form/types.js.map +1 -1
  49. package/dist/icon/_icon.scss +31 -47
  50. package/dist/interaction/_interaction.scss +47 -57
  51. package/dist/layout/_layout.scss +14 -19
  52. package/dist/link/_link.scss +15 -23
  53. package/dist/list/_list.scss +53 -63
  54. package/dist/menu/_menu.scss +16 -27
  55. package/dist/overlay/_overlay.scss +14 -19
  56. package/dist/progress/_progress.scss +25 -30
  57. package/dist/segmented-button/_segmented-button.scss +32 -43
  58. package/dist/sheet/_sheet.scss +24 -42
  59. package/dist/snackbar/DefaultToastRenderer.js +1 -1
  60. package/dist/snackbar/DefaultToastRenderer.js.map +1 -1
  61. package/dist/snackbar/Snackbar.d.ts +1 -3
  62. package/dist/snackbar/Snackbar.js +2 -3
  63. package/dist/snackbar/Snackbar.js.map +1 -1
  64. package/dist/snackbar/Toast.d.ts +1 -1
  65. package/dist/snackbar/Toast.js +5 -1
  66. package/dist/snackbar/Toast.js.map +1 -1
  67. package/dist/snackbar/ToastManager.d.ts +2 -1
  68. package/dist/snackbar/ToastManager.js +1 -1
  69. package/dist/snackbar/ToastManager.js.map +1 -1
  70. package/dist/snackbar/_snackbar.scss +15 -23
  71. package/dist/table/_table.scss +55 -70
  72. package/dist/tabs/_tabs.scss +25 -30
  73. package/dist/theme/_theme.scss +31 -89
  74. package/dist/tooltip/_tooltip.scss +16 -25
  75. package/dist/transition/_transition.scss +38 -37
  76. package/dist/tree/_tree.scss +102 -109
  77. package/dist/typography/_typography.scss +17 -22
  78. package/dist/window-splitter/_window-splitter.scss +19 -45
  79. package/package.json +1 -1
  80. package/src/_core.scss +34 -1
  81. package/src/_utils.scss +57 -0
  82. package/src/app-bar/_app-bar.scss +15 -23
  83. package/src/avatar/_avatar.scss +25 -34
  84. package/src/badge/_badge.scss +71 -44
  85. package/src/box/_box.scss +18 -29
  86. package/src/button/_button.scss +50 -62
  87. package/src/card/_card.scss +14 -23
  88. package/src/chip/_chip.scss +33 -46
  89. package/src/dialog/_dialog.scss +95 -93
  90. package/src/divider/Divider.tsx +0 -1
  91. package/src/divider/_divider.scss +33 -43
  92. package/src/form/Label.tsx +5 -5
  93. package/src/form/TextArea.tsx +1 -1
  94. package/src/form/TextFieldContainerStyles.ts +7 -7
  95. package/src/form/_form.scss +200 -203
  96. package/src/form/textAreaStyles.ts +2 -2
  97. package/src/form/types.ts +0 -2
  98. package/src/icon/_icon.scss +31 -47
  99. package/src/interaction/_interaction.scss +47 -57
  100. package/src/layout/_layout.scss +14 -19
  101. package/src/link/_link.scss +15 -23
  102. package/src/list/_list.scss +53 -63
  103. package/src/menu/_menu.scss +16 -27
  104. package/src/overlay/_overlay.scss +14 -19
  105. package/src/progress/_progress.scss +25 -30
  106. package/src/segmented-button/_segmented-button.scss +32 -43
  107. package/src/sheet/_sheet.scss +24 -42
  108. package/src/snackbar/DefaultToastRenderer.tsx +1 -1
  109. package/src/snackbar/Snackbar.tsx +17 -25
  110. package/src/snackbar/Toast.tsx +7 -2
  111. package/src/snackbar/ToastManager.tsx +3 -2
  112. package/src/snackbar/__tests__/Snackbar.tsx +12 -11
  113. package/src/snackbar/__tests__/ToastManagerProvider.tsx +20 -42
  114. package/src/snackbar/__tests__/__snapshots__/Snackbar.tsx.snap +127 -27
  115. package/src/snackbar/__tests__/__snapshots__/ToastManagerProvider.tsx.snap +23 -8
  116. package/src/snackbar/_snackbar.scss +15 -23
  117. package/src/table/_table.scss +55 -70
  118. package/src/tabs/_tabs.scss +25 -30
  119. package/src/theme/_theme.scss +31 -89
  120. package/src/tooltip/_tooltip.scss +16 -25
  121. package/src/transition/_transition.scss +38 -37
  122. package/src/tree/_tree.scss +102 -109
  123. package/src/typography/_typography.scss +17 -22
  124. package/src/window-splitter/_window-splitter.scss +19 -45
  125. package/.turbo/turbo-lint.log +0 -12
  126. package/.turbo/turbo-test.log +0 -166
  127. package/.turbo/turbo-typecheck.log +0 -4
  128. package/dist/divider/VerticalDivider.d.ts +0 -32
  129. package/dist/divider/useVerticalDividerHeight.d.ts +0 -37
  130. package/dist/icon/MaterialIconsProvider.d.ts +0 -12
  131. package/dist/icon/MaterialIconsProvider.js +0 -17
  132. package/dist/icon/MaterialIconsProvider.js.map +0 -1
  133. package/dist/icon/MaterialSymbolsProvider.d.ts +0 -145
  134. package/dist/icon/MaterialSymbolsProvider.js +0 -60
  135. package/dist/icon/MaterialSymbolsProvider.js.map +0 -1
  136. package/dist/link/LinkProvider.d.ts +0 -29
  137. package/dist/menu/menuConfig.d.ts +0 -60
  138. package/dist/tooltip/useOverflowTooltip.d.ts +0 -61
package/coverage/lcov-report/Snackbar.tsx.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">0% </span>
26
+ <span class="strong">100% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>0/189</span>
28
+ <span class='fraction'>175/175</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">0% </span>
33
+ <span class="strong">100% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>0/1</span>
35
+ <span class='fraction'>1/1</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">0% </span>
40
+ <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>0/1</span>
42
+ <span class='fraction'>1/1</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">0% </span>
47
+ <span class="strong">100% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>0/189</span>
49
+ <span class='fraction'>175/175</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line low'></div>
64
+ <div class='status-line high'></div>
65
65
  <pre><table class="coverage">
66
66
  <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
67
  <a name='L2'></a><a href='#L2'>2</a>
@@ -238,398 +238,356 @@
238
238
  <a name='L173'></a><a href='#L173'>173</a>
239
239
  <a name='L174'></a><a href='#L174'>174</a>
240
240
  <a name='L175'></a><a href='#L175'>175</a>
241
- <a name='L176'></a><a href='#L176'>176</a>
242
- <a name='L177'></a><a href='#L177'>177</a>
243
- <a name='L178'></a><a href='#L178'>178</a>
244
- <a name='L179'></a><a href='#L179'>179</a>
245
- <a name='L180'></a><a href='#L180'>180</a>
246
- <a name='L181'></a><a href='#L181'>181</a>
247
- <a name='L182'></a><a href='#L182'>182</a>
248
- <a name='L183'></a><a href='#L183'>183</a>
249
- <a name='L184'></a><a href='#L184'>184</a>
250
- <a name='L185'></a><a href='#L185'>185</a>
251
- <a name='L186'></a><a href='#L186'>186</a>
252
- <a name='L187'></a><a href='#L187'>187</a>
253
- <a name='L188'></a><a href='#L188'>188</a>
254
- <a name='L189'></a><a href='#L189'>189</a>
255
- <a name='L190'></a><a href='#L190'>190</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
256
- <span class="cline-any cline-no">&nbsp;</span>
257
- <span class="cline-any cline-no">&nbsp;</span>
258
- <span class="cline-any cline-no">&nbsp;</span>
259
- <span class="cline-any cline-no">&nbsp;</span>
260
- <span class="cline-any cline-no">&nbsp;</span>
261
- <span class="cline-any cline-no">&nbsp;</span>
262
- <span class="cline-any cline-no">&nbsp;</span>
263
- <span class="cline-any cline-no">&nbsp;</span>
264
- <span class="cline-any cline-no">&nbsp;</span>
265
- <span class="cline-any cline-no">&nbsp;</span>
266
- <span class="cline-any cline-no">&nbsp;</span>
267
- <span class="cline-any cline-no">&nbsp;</span>
268
- <span class="cline-any cline-no">&nbsp;</span>
269
- <span class="cline-any cline-no">&nbsp;</span>
270
- <span class="cline-any cline-no">&nbsp;</span>
271
- <span class="cline-any cline-no">&nbsp;</span>
272
- <span class="cline-any cline-no">&nbsp;</span>
273
- <span class="cline-any cline-no">&nbsp;</span>
274
- <span class="cline-any cline-no">&nbsp;</span>
275
- <span class="cline-any cline-no">&nbsp;</span>
276
- <span class="cline-any cline-no">&nbsp;</span>
277
- <span class="cline-any cline-no">&nbsp;</span>
278
- <span class="cline-any cline-no">&nbsp;</span>
279
- <span class="cline-any cline-no">&nbsp;</span>
280
- <span class="cline-any cline-no">&nbsp;</span>
281
- <span class="cline-any cline-no">&nbsp;</span>
282
- <span class="cline-any cline-no">&nbsp;</span>
283
- <span class="cline-any cline-no">&nbsp;</span>
284
- <span class="cline-any cline-no">&nbsp;</span>
285
- <span class="cline-any cline-no">&nbsp;</span>
286
- <span class="cline-any cline-no">&nbsp;</span>
287
- <span class="cline-any cline-no">&nbsp;</span>
288
- <span class="cline-any cline-no">&nbsp;</span>
289
- <span class="cline-any cline-no">&nbsp;</span>
290
- <span class="cline-any cline-no">&nbsp;</span>
291
- <span class="cline-any cline-no">&nbsp;</span>
292
- <span class="cline-any cline-no">&nbsp;</span>
293
- <span class="cline-any cline-no">&nbsp;</span>
294
- <span class="cline-any cline-no">&nbsp;</span>
295
- <span class="cline-any cline-no">&nbsp;</span>
296
- <span class="cline-any cline-no">&nbsp;</span>
297
- <span class="cline-any cline-no">&nbsp;</span>
298
- <span class="cline-any cline-no">&nbsp;</span>
299
- <span class="cline-any cline-no">&nbsp;</span>
300
- <span class="cline-any cline-no">&nbsp;</span>
301
- <span class="cline-any cline-no">&nbsp;</span>
302
- <span class="cline-any cline-no">&nbsp;</span>
303
- <span class="cline-any cline-no">&nbsp;</span>
304
- <span class="cline-any cline-no">&nbsp;</span>
305
- <span class="cline-any cline-no">&nbsp;</span>
306
- <span class="cline-any cline-no">&nbsp;</span>
307
- <span class="cline-any cline-no">&nbsp;</span>
308
- <span class="cline-any cline-no">&nbsp;</span>
309
- <span class="cline-any cline-no">&nbsp;</span>
310
- <span class="cline-any cline-no">&nbsp;</span>
311
- <span class="cline-any cline-no">&nbsp;</span>
312
- <span class="cline-any cline-no">&nbsp;</span>
313
- <span class="cline-any cline-no">&nbsp;</span>
314
- <span class="cline-any cline-no">&nbsp;</span>
315
- <span class="cline-any cline-no">&nbsp;</span>
316
- <span class="cline-any cline-no">&nbsp;</span>
317
- <span class="cline-any cline-no">&nbsp;</span>
318
- <span class="cline-any cline-no">&nbsp;</span>
319
- <span class="cline-any cline-no">&nbsp;</span>
320
- <span class="cline-any cline-no">&nbsp;</span>
321
- <span class="cline-any cline-no">&nbsp;</span>
322
- <span class="cline-any cline-no">&nbsp;</span>
323
- <span class="cline-any cline-no">&nbsp;</span>
324
- <span class="cline-any cline-no">&nbsp;</span>
325
- <span class="cline-any cline-no">&nbsp;</span>
326
- <span class="cline-any cline-no">&nbsp;</span>
327
- <span class="cline-any cline-no">&nbsp;</span>
328
- <span class="cline-any cline-no">&nbsp;</span>
329
- <span class="cline-any cline-no">&nbsp;</span>
330
- <span class="cline-any cline-no">&nbsp;</span>
331
- <span class="cline-any cline-no">&nbsp;</span>
332
- <span class="cline-any cline-no">&nbsp;</span>
333
- <span class="cline-any cline-no">&nbsp;</span>
334
- <span class="cline-any cline-no">&nbsp;</span>
335
- <span class="cline-any cline-no">&nbsp;</span>
336
- <span class="cline-any cline-no">&nbsp;</span>
337
- <span class="cline-any cline-no">&nbsp;</span>
338
- <span class="cline-any cline-no">&nbsp;</span>
339
- <span class="cline-any cline-no">&nbsp;</span>
340
- <span class="cline-any cline-no">&nbsp;</span>
341
- <span class="cline-any cline-no">&nbsp;</span>
342
- <span class="cline-any cline-no">&nbsp;</span>
343
- <span class="cline-any cline-no">&nbsp;</span>
344
- <span class="cline-any cline-no">&nbsp;</span>
345
- <span class="cline-any cline-no">&nbsp;</span>
346
- <span class="cline-any cline-no">&nbsp;</span>
347
- <span class="cline-any cline-no">&nbsp;</span>
348
- <span class="cline-any cline-no">&nbsp;</span>
349
- <span class="cline-any cline-no">&nbsp;</span>
350
- <span class="cline-any cline-no">&nbsp;</span>
351
- <span class="cline-any cline-no">&nbsp;</span>
352
- <span class="cline-any cline-no">&nbsp;</span>
353
- <span class="cline-any cline-no">&nbsp;</span>
354
- <span class="cline-any cline-no">&nbsp;</span>
355
- <span class="cline-any cline-no">&nbsp;</span>
356
- <span class="cline-any cline-no">&nbsp;</span>
357
- <span class="cline-any cline-no">&nbsp;</span>
358
- <span class="cline-any cline-no">&nbsp;</span>
359
- <span class="cline-any cline-no">&nbsp;</span>
360
- <span class="cline-any cline-no">&nbsp;</span>
361
- <span class="cline-any cline-no">&nbsp;</span>
362
- <span class="cline-any cline-no">&nbsp;</span>
363
- <span class="cline-any cline-no">&nbsp;</span>
364
- <span class="cline-any cline-no">&nbsp;</span>
365
- <span class="cline-any cline-no">&nbsp;</span>
366
- <span class="cline-any cline-no">&nbsp;</span>
367
- <span class="cline-any cline-no">&nbsp;</span>
368
- <span class="cline-any cline-no">&nbsp;</span>
369
- <span class="cline-any cline-no">&nbsp;</span>
370
- <span class="cline-any cline-no">&nbsp;</span>
371
- <span class="cline-any cline-no">&nbsp;</span>
372
- <span class="cline-any cline-no">&nbsp;</span>
373
- <span class="cline-any cline-no">&nbsp;</span>
374
- <span class="cline-any cline-no">&nbsp;</span>
375
- <span class="cline-any cline-no">&nbsp;</span>
376
- <span class="cline-any cline-no">&nbsp;</span>
377
- <span class="cline-any cline-no">&nbsp;</span>
378
- <span class="cline-any cline-no">&nbsp;</span>
379
- <span class="cline-any cline-no">&nbsp;</span>
380
- <span class="cline-any cline-no">&nbsp;</span>
381
- <span class="cline-any cline-no">&nbsp;</span>
382
- <span class="cline-any cline-no">&nbsp;</span>
383
- <span class="cline-any cline-no">&nbsp;</span>
384
- <span class="cline-any cline-no">&nbsp;</span>
385
- <span class="cline-any cline-no">&nbsp;</span>
386
- <span class="cline-any cline-no">&nbsp;</span>
387
- <span class="cline-any cline-no">&nbsp;</span>
388
- <span class="cline-any cline-no">&nbsp;</span>
389
- <span class="cline-any cline-no">&nbsp;</span>
390
- <span class="cline-any cline-no">&nbsp;</span>
391
- <span class="cline-any cline-no">&nbsp;</span>
392
- <span class="cline-any cline-no">&nbsp;</span>
393
- <span class="cline-any cline-no">&nbsp;</span>
394
- <span class="cline-any cline-no">&nbsp;</span>
395
- <span class="cline-any cline-no">&nbsp;</span>
396
- <span class="cline-any cline-no">&nbsp;</span>
397
- <span class="cline-any cline-no">&nbsp;</span>
398
- <span class="cline-any cline-no">&nbsp;</span>
399
- <span class="cline-any cline-no">&nbsp;</span>
400
- <span class="cline-any cline-no">&nbsp;</span>
401
- <span class="cline-any cline-no">&nbsp;</span>
402
- <span class="cline-any cline-no">&nbsp;</span>
403
- <span class="cline-any cline-no">&nbsp;</span>
404
- <span class="cline-any cline-no">&nbsp;</span>
405
- <span class="cline-any cline-no">&nbsp;</span>
406
- <span class="cline-any cline-no">&nbsp;</span>
407
- <span class="cline-any cline-no">&nbsp;</span>
408
- <span class="cline-any cline-no">&nbsp;</span>
409
- <span class="cline-any cline-no">&nbsp;</span>
410
- <span class="cline-any cline-no">&nbsp;</span>
411
- <span class="cline-any cline-no">&nbsp;</span>
412
- <span class="cline-any cline-no">&nbsp;</span>
413
- <span class="cline-any cline-no">&nbsp;</span>
414
- <span class="cline-any cline-no">&nbsp;</span>
415
- <span class="cline-any cline-no">&nbsp;</span>
416
- <span class="cline-any cline-no">&nbsp;</span>
417
- <span class="cline-any cline-no">&nbsp;</span>
418
- <span class="cline-any cline-no">&nbsp;</span>
419
- <span class="cline-any cline-no">&nbsp;</span>
420
- <span class="cline-any cline-no">&nbsp;</span>
421
- <span class="cline-any cline-no">&nbsp;</span>
422
- <span class="cline-any cline-no">&nbsp;</span>
423
- <span class="cline-any cline-no">&nbsp;</span>
424
- <span class="cline-any cline-no">&nbsp;</span>
425
- <span class="cline-any cline-no">&nbsp;</span>
426
- <span class="cline-any cline-no">&nbsp;</span>
427
- <span class="cline-any cline-no">&nbsp;</span>
428
- <span class="cline-any cline-no">&nbsp;</span>
429
- <span class="cline-any cline-no">&nbsp;</span>
430
- <span class="cline-any cline-no">&nbsp;</span>
431
- <span class="cline-any cline-no">&nbsp;</span>
432
- <span class="cline-any cline-no">&nbsp;</span>
433
- <span class="cline-any cline-no">&nbsp;</span>
434
- <span class="cline-any cline-no">&nbsp;</span>
435
- <span class="cline-any cline-no">&nbsp;</span>
436
- <span class="cline-any cline-no">&nbsp;</span>
437
- <span class="cline-any cline-no">&nbsp;</span>
438
- <span class="cline-any cline-no">&nbsp;</span>
439
- <span class="cline-any cline-no">&nbsp;</span>
440
- <span class="cline-any cline-no">&nbsp;</span>
441
- <span class="cline-any cline-no">&nbsp;</span>
442
- <span class="cline-any cline-no">&nbsp;</span>
443
- <span class="cline-any cline-no">&nbsp;</span>
444
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js"><span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" ><span class="branch-0 cbranch-no" title="branch not covered" >"use client";</span></span></span>
445
- <span class="cstat-no" title="statement not covered" >import {</span>
446
- <span class="cstat-no" title="statement not covered" > forwardRef,</span>
447
- <span class="cstat-no" title="statement not covered" > type AriaRole,</span>
448
- <span class="cstat-no" title="statement not covered" > type ComponentType,</span>
449
- <span class="cstat-no" title="statement not covered" > type HTMLAttributes,</span>
450
- <span class="cstat-no" title="statement not covered" >} from "react";</span>
451
- <span class="cstat-no" title="statement not covered" >import { Portal } from "../portal/Portal.js";</span>
452
- <span class="cstat-no" title="statement not covered" >import { useEnsuredId } from "../useEnsuredId.js";</span>
453
- <span class="cstat-no" title="statement not covered" >import {</span>
454
- <span class="cstat-no" title="statement not covered" > DefaultToastRenderer,</span>
455
- <span class="cstat-no" title="statement not covered" > type ToastRendererProps,</span>
456
- <span class="cstat-no" title="statement not covered" >} from "./DefaultToastRenderer.js";</span>
457
- <span class="cstat-no" title="statement not covered" >import { type ConfigurableToastProps } from "./Toast.js";</span>
458
- <span class="cstat-no" title="statement not covered" >import { useToastQueue } from "./ToastManagerProvider.js";</span>
459
- <span class="cstat-no" title="statement not covered" >import { snackbar, type SnackbarPosition } from "./snackbarStyles.js";</span>
460
- <span class="cstat-no" title="statement not covered" ></span>
461
- <span class="cstat-no" title="statement not covered" >/**</span>
462
- <span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0 The `id` prop is optional</span>
463
- <span class="cstat-no" title="statement not covered" > */</span>
464
- <span class="cstat-no" title="statement not covered" >export interface SnackbarProps extends HTMLAttributes&lt;HTMLDivElement&gt; {</span>
465
- <span class="cstat-no" title="statement not covered" > /**</span>
466
- <span class="cstat-no" title="statement not covered" > * @defaultValue `"snackbar-" + useId()`</span>
467
- <span class="cstat-no" title="statement not covered" > */</span>
468
- <span class="cstat-no" title="statement not covered" > id?: string;</span>
469
- <span class="cstat-no" title="statement not covered" ></span>
470
- <span class="cstat-no" title="statement not covered" > /** @defaultValue `"status"` */</span>
471
- <span class="cstat-no" title="statement not covered" > role?: AriaRole;</span>
472
- <span class="cstat-no" title="statement not covered" ></span>
473
- <span class="cstat-no" title="statement not covered" > /**</span>
474
- <span class="cstat-no" title="statement not covered" > * Set this to the number of toasts that can be visible within the snackbar at</span>
475
- <span class="cstat-no" title="statement not covered" > * the same time. Any toasts added after this value will be added into the</span>
476
- <span class="cstat-no" title="statement not covered" > * queue to be shown.</span>
477
- <span class="cstat-no" title="statement not covered" > *</span>
478
- <span class="cstat-no" title="statement not covered" > * @defaultValue `1`</span>
479
- <span class="cstat-no" title="statement not covered" > */</span>
480
- <span class="cstat-no" title="statement not covered" > limit?: number;</span>
481
- <span class="cstat-no" title="statement not covered" ></span>
482
- <span class="cstat-no" title="statement not covered" > /**</span>
483
- <span class="cstat-no" title="statement not covered" > * @defaultValue `"bottom"`</span>
484
- <span class="cstat-no" title="statement not covered" > */</span>
485
- <span class="cstat-no" title="statement not covered" > position?: SnackbarPosition;</span>
486
- <span class="cstat-no" title="statement not covered" ></span>
487
- <span class="cstat-no" title="statement not covered" > /**</span>
488
- <span class="cstat-no" title="statement not covered" > * @defaultValue `false`</span>
489
- <span class="cstat-no" title="statement not covered" > */</span>
490
- <span class="cstat-no" title="statement not covered" > disablePortal?: boolean;</span>
491
- <span class="cstat-no" title="statement not covered" ></span>
492
- <span class="cstat-no" title="statement not covered" > /**</span>
493
- <span class="cstat-no" title="statement not covered" > * This can be used to create a custom toast implementation.</span>
494
- <span class="cstat-no" title="statement not covered" > *</span>
495
- <span class="cstat-no" title="statement not covered" > * @example</span>
496
- <span class="cstat-no" title="statement not covered" > * ```ts</span>
497
- <span class="cstat-no" title="statement not covered" > * import type { ToastRendererProps } from "@react-md/core";</span>
498
- <span class="cstat-no" title="statement not covered" > * import {</span>
499
- <span class="cstat-no" title="statement not covered" > * Snackbar,</span>
500
- <span class="cstat-no" title="statement not covered" > * Toast,</span>
501
- <span class="cstat-no" title="statement not covered" > * ToastContent,</span>
502
- <span class="cstat-no" title="statement not covered" > * useToastManager,</span>
503
- <span class="cstat-no" title="statement not covered" > * } from "@react-md/core";</span>
504
- <span class="cstat-no" title="statement not covered" > * import type { ReactElement } from "react";</span>
505
- <span class="cstat-no" title="statement not covered" > *</span>
506
- <span class="cstat-no" title="statement not covered" > * function CustomToast(props: CustomToastRendererProps): ReactElement {</span>
507
- <span class="cstat-no" title="statement not covered" > * // Pretend like we don't need anything else from the toast since the</span>
508
- <span class="cstat-no" title="statement not covered" > * // custom behavior is related to the `toastId`</span>
509
- <span class="cstat-no" title="statement not covered" > * const { toastId, visible, duplicates, visibleTime } = props;</span>
510
- <span class="cstat-no" title="statement not covered" > *</span>
511
- <span class="cstat-no" title="statement not covered" > * const toastManager = useToastManager();</span>
512
- <span class="cstat-no" title="statement not covered" > *</span>
513
- <span class="cstat-no" title="statement not covered" > * // Note: If you want to rely on the `action` and `closeButton` behavior,</span>
514
- <span class="cstat-no" title="statement not covered" > * // you must also wrap the `Toast` with:</span>
515
- <span class="cstat-no" title="statement not covered" > * // &lt;RemoveToastProvider value={() =&gt; toastManager.removeToast(toastId, true)}&gt;</span>
516
- <span class="cstat-no" title="statement not covered" > *</span>
517
- <span class="cstat-no" title="statement not covered" > * return (</span>
518
- <span class="cstat-no" title="statement not covered" > * &lt;Toast</span>
519
- <span class="cstat-no" title="statement not covered" > * theme={isError(toastId) ? "error" : "surface"}</span>
520
- <span class="cstat-no" title="statement not covered" > * visible={visible}</span>
521
- <span class="cstat-no" title="statement not covered" > * onEntered={() =&gt; {</span>
522
- <span class="cstat-no" title="statement not covered" > * toastManager.startRemoveTimeout(toastId);</span>
523
- <span class="cstat-no" title="statement not covered" > * }}</span>
524
- <span class="cstat-no" title="statement not covered" > * onExited={() =&gt; {</span>
525
- <span class="cstat-no" title="statement not covered" > * toastManager.removeToast(toastId, false)</span>
526
- <span class="cstat-no" title="statement not covered" > * }}</span>
527
- <span class="cstat-no" title="statement not covered" > * disableContentWrapper</span>
528
- <span class="cstat-no" title="statement not covered" > * &gt;</span>
529
- <span class="cstat-no" title="statement not covered" > * &lt;ToastContent&gt;</span>
530
- <span class="cstat-no" title="statement not covered" > * &lt;TranslateMessage id={toastId} /&gt;</span>
531
- <span class="cstat-no" title="statement not covered" > * &lt;/ToastContent&gt;</span>
532
- <span class="cstat-no" title="statement not covered" > * {isActionable(toastId) &amp;&amp; (</span>
533
- <span class="cstat-no" title="statement not covered" > * &lt;Button</span>
534
- <span class="cstat-no" title="statement not covered" > * onClick={async () =&gt; {</span>
535
- <span class="cstat-no" title="statement not covered" > * await someApiCall();</span>
536
- <span class="cstat-no" title="statement not covered" > * toastManager.removeToast(toastId, true);</span>
537
- <span class="cstat-no" title="statement not covered" > * }}</span>
538
- <span class="cstat-no" title="statement not covered" > * &gt;</span>
539
- <span class="cstat-no" title="statement not covered" > * Dismiss</span>
540
- <span class="cstat-no" title="statement not covered" > * &lt;/Button&gt;</span>
541
- <span class="cstat-no" title="statement not covered" > * )}</span>
542
- <span class="cstat-no" title="statement not covered" > * &lt;/Toast&gt;</span>
543
- <span class="cstat-no" title="statement not covered" > * );</span>
544
- <span class="cstat-no" title="statement not covered" > * }</span>
545
- <span class="cstat-no" title="statement not covered" > *</span>
546
- <span class="cstat-no" title="statement not covered" > * function Example(): ReactElement {</span>
547
- <span class="cstat-no" title="statement not covered" > * return &lt;Snackbar renderToast={CustomToast} /&gt;</span>
548
- <span class="cstat-no" title="statement not covered" > * }</span>
549
- <span class="cstat-no" title="statement not covered" > * ```</span>
550
- <span class="cstat-no" title="statement not covered" > *</span>
551
- <span class="cstat-no" title="statement not covered" > * @see {@link DefaultToastRenderer}</span>
552
- <span class="cstat-no" title="statement not covered" > * @defaultValue `DefaultToastRenderer`</span>
553
- <span class="cstat-no" title="statement not covered" > */</span>
554
- <span class="cstat-no" title="statement not covered" > renderToast?: ComponentType&lt;ToastRendererProps&gt;;</span>
555
- <span class="cstat-no" title="statement not covered" ></span>
556
- <span class="cstat-no" title="statement not covered" > /**</span>
557
- <span class="cstat-no" title="statement not covered" > * Optional props that should be passed to each `Toast` from the `Snackbar`.</span>
558
- <span class="cstat-no" title="statement not covered" > * This is a great way to enforce each toast having a close button, a custom</span>
559
- <span class="cstat-no" title="statement not covered" > * class name, theme, etc.</span>
560
- <span class="cstat-no" title="statement not covered" > *</span>
561
- <span class="cstat-no" title="statement not covered" > * @see {@link DefaultToastRenderer}</span>
562
- <span class="cstat-no" title="statement not covered" > */</span>
563
- <span class="cstat-no" title="statement not covered" > toastDefaults?: ConfigurableToastProps;</span>
564
- <span class="cstat-no" title="statement not covered" >}</span>
565
- <span class="cstat-no" title="statement not covered" ></span>
566
- <span class="cstat-no" title="statement not covered" >/**</span>
567
- <span class="cstat-no" title="statement not covered" > * **Client Component**</span>
568
- <span class="cstat-no" title="statement not covered" > *</span>
569
- <span class="cstat-no" title="statement not covered" > * @example</span>
570
- <span class="cstat-no" title="statement not covered" > * Super SImple Example</span>
571
- <span class="cstat-no" title="statement not covered" > * ```tsx</span>
572
- <span class="cstat-no" title="statement not covered" > * import { Button, Snackbar, addToast } from "@react-md/core";</span>
573
- <span class="cstat-no" title="statement not covered" > * import type { ReactElement } from "react";</span>
574
- <span class="cstat-no" title="statement not covered" > *</span>
575
- <span class="cstat-no" title="statement not covered" > * function Example(): ReactElement {</span>
576
- <span class="cstat-no" title="statement not covered" > * return (</span>
577
- <span class="cstat-no" title="statement not covered" > * &lt;&gt;</span>
578
- <span class="cstat-no" title="statement not covered" > * &lt;Button</span>
579
- <span class="cstat-no" title="statement not covered" > * onClick={() =&gt; {</span>
580
- <span class="cstat-no" title="statement not covered" > * addToast({ children: "A new toast!" });</span>
581
- <span class="cstat-no" title="statement not covered" > * }}</span>
582
- <span class="cstat-no" title="statement not covered" > * &gt;</span>
583
- <span class="cstat-no" title="statement not covered" > * Toast!</span>
584
- <span class="cstat-no" title="statement not covered" > * &lt;/Button&gt;</span>
585
- <span class="cstat-no" title="statement not covered" > * &lt;Snackbar /&gt;</span>
586
- <span class="cstat-no" title="statement not covered" > * &lt;/&gt;</span>
587
- <span class="cstat-no" title="statement not covered" > * );</span>
588
- <span class="cstat-no" title="statement not covered" > * }</span>
589
- <span class="cstat-no" title="statement not covered" > * ```</span>
590
- <span class="cstat-no" title="statement not covered" > *</span>
591
- <span class="cstat-no" title="statement not covered" > * @see {@link SnackbarProps.renderToast} for creating a custom toast</span>
592
- <span class="cstat-no" title="statement not covered" > * implementation.</span>
593
- <span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0 Rewritten to use a new API that supports adding toasts</span>
594
- <span class="cstat-no" title="statement not covered" > * outside of React components and rendering multiple toasts at once.</span>
595
- <span class="cstat-no" title="statement not covered" > */</span>
596
- <span class="cstat-no" title="statement not covered" >export const Snackbar = forwardRef&lt;HTMLDivElement, SnackbarProps&gt;(</span>
597
- <span class="cstat-no" title="statement not covered" > function Snackbar(props, ref) {</span>
598
- <span class="cstat-no" title="statement not covered" > const {</span>
599
- <span class="cstat-no" title="statement not covered" > id: propId,</span>
600
- <span class="cstat-no" title="statement not covered" > role = "status",</span>
601
- <span class="cstat-no" title="statement not covered" > className,</span>
602
- <span class="cstat-no" title="statement not covered" > limit = 1,</span>
603
- <span class="cstat-no" title="statement not covered" > position = "bottom",</span>
604
- <span class="cstat-no" title="statement not covered" > renderToast: RenderToast = DefaultToastRenderer,</span>
605
- <span class="cstat-no" title="statement not covered" > disablePortal,</span>
606
- <span class="cstat-no" title="statement not covered" > toastDefaults,</span>
607
- <span class="cstat-no" title="statement not covered" > ...remaining</span>
608
- <span class="cstat-no" title="statement not covered" > } = props;</span>
609
- <span class="cstat-no" title="statement not covered" > const id = useEnsuredId(propId, "snackbar");</span>
610
- <span class="cstat-no" title="statement not covered" > const queue = useToastQueue(limit);</span>
611
- <span class="cstat-no" title="statement not covered" ></span>
612
- <span class="cstat-no" title="statement not covered" > return (</span>
613
- <span class="cstat-no" title="statement not covered" > &lt;Portal disabled={disablePortal}&gt;</span>
614
- <span class="cstat-no" title="statement not covered" > &lt;div</span>
615
- <span class="cstat-no" title="statement not covered" > {...remaining}</span>
616
- <span class="cstat-no" title="statement not covered" > id={id}</span>
617
- <span class="cstat-no" title="statement not covered" > ref={ref}</span>
618
- <span class="cstat-no" title="statement not covered" > role={role}</span>
619
- <span class="cstat-no" title="statement not covered" > className={snackbar({ position, className })}</span>
620
- <span class="cstat-no" title="statement not covered" > &gt;</span>
621
- <span class="cstat-no" title="statement not covered" > {queue.map((toast) =&gt; (</span>
622
- <span class="cstat-no" title="statement not covered" > &lt;RenderToast</span>
623
- <span class="cstat-no" title="statement not covered" > {...toast}</span>
624
- <span class="cstat-no" title="statement not covered" > key={toast.toastId}</span>
625
- <span class="cstat-no" title="statement not covered" > toastDefaults={toastDefaults}</span>
626
- <span class="cstat-no" title="statement not covered" > /&gt;</span>
627
- <span class="cstat-no" title="statement not covered" > ))}</span>
628
- <span class="cstat-no" title="statement not covered" > &lt;/div&gt;</span>
629
- <span class="cstat-no" title="statement not covered" > &lt;/Portal&gt;</span>
630
- <span class="cstat-no" title="statement not covered" > );</span>
631
- <span class="cstat-no" title="statement not covered" > }</span>
632
- <span class="cstat-no" title="statement not covered" >);</span>
241
+ <a name='L176'></a><a href='#L176'>176</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
242
+ <span class="cline-any cline-yes">1x</span>
243
+ <span class="cline-any cline-yes">1x</span>
244
+ <span class="cline-any cline-yes">1x</span>
245
+ <span class="cline-any cline-yes">1x</span>
246
+ <span class="cline-any cline-yes">1x</span>
247
+ <span class="cline-any cline-yes">1x</span>
248
+ <span class="cline-any cline-yes">1x</span>
249
+ <span class="cline-any cline-yes">1x</span>
250
+ <span class="cline-any cline-yes">1x</span>
251
+ <span class="cline-any cline-yes">1x</span>
252
+ <span class="cline-any cline-yes">1x</span>
253
+ <span class="cline-any cline-yes">1x</span>
254
+ <span class="cline-any cline-yes">1x</span>
255
+ <span class="cline-any cline-yes">1x</span>
256
+ <span class="cline-any cline-yes">1x</span>
257
+ <span class="cline-any cline-yes">1x</span>
258
+ <span class="cline-any cline-yes">1x</span>
259
+ <span class="cline-any cline-yes">1x</span>
260
+ <span class="cline-any cline-yes">1x</span>
261
+ <span class="cline-any cline-yes">1x</span>
262
+ <span class="cline-any cline-yes">1x</span>
263
+ <span class="cline-any cline-yes">1x</span>
264
+ <span class="cline-any cline-yes">1x</span>
265
+ <span class="cline-any cline-yes">1x</span>
266
+ <span class="cline-any cline-yes">1x</span>
267
+ <span class="cline-any cline-yes">1x</span>
268
+ <span class="cline-any cline-yes">1x</span>
269
+ <span class="cline-any cline-yes">1x</span>
270
+ <span class="cline-any cline-yes">1x</span>
271
+ <span class="cline-any cline-yes">1x</span>
272
+ <span class="cline-any cline-yes">1x</span>
273
+ <span class="cline-any cline-yes">1x</span>
274
+ <span class="cline-any cline-yes">1x</span>
275
+ <span class="cline-any cline-yes">1x</span>
276
+ <span class="cline-any cline-yes">1x</span>
277
+ <span class="cline-any cline-yes">1x</span>
278
+ <span class="cline-any cline-yes">1x</span>
279
+ <span class="cline-any cline-yes">1x</span>
280
+ <span class="cline-any cline-yes">1x</span>
281
+ <span class="cline-any cline-yes">1x</span>
282
+ <span class="cline-any cline-yes">1x</span>
283
+ <span class="cline-any cline-yes">1x</span>
284
+ <span class="cline-any cline-yes">1x</span>
285
+ <span class="cline-any cline-yes">1x</span>
286
+ <span class="cline-any cline-yes">1x</span>
287
+ <span class="cline-any cline-yes">1x</span>
288
+ <span class="cline-any cline-yes">1x</span>
289
+ <span class="cline-any cline-yes">1x</span>
290
+ <span class="cline-any cline-yes">1x</span>
291
+ <span class="cline-any cline-yes">1x</span>
292
+ <span class="cline-any cline-yes">1x</span>
293
+ <span class="cline-any cline-yes">1x</span>
294
+ <span class="cline-any cline-yes">1x</span>
295
+ <span class="cline-any cline-yes">1x</span>
296
+ <span class="cline-any cline-yes">1x</span>
297
+ <span class="cline-any cline-yes">1x</span>
298
+ <span class="cline-any cline-yes">1x</span>
299
+ <span class="cline-any cline-yes">1x</span>
300
+ <span class="cline-any cline-yes">1x</span>
301
+ <span class="cline-any cline-yes">1x</span>
302
+ <span class="cline-any cline-yes">1x</span>
303
+ <span class="cline-any cline-yes">1x</span>
304
+ <span class="cline-any cline-yes">1x</span>
305
+ <span class="cline-any cline-yes">1x</span>
306
+ <span class="cline-any cline-yes">1x</span>
307
+ <span class="cline-any cline-yes">1x</span>
308
+ <span class="cline-any cline-yes">1x</span>
309
+ <span class="cline-any cline-yes">1x</span>
310
+ <span class="cline-any cline-yes">1x</span>
311
+ <span class="cline-any cline-yes">1x</span>
312
+ <span class="cline-any cline-yes">1x</span>
313
+ <span class="cline-any cline-yes">1x</span>
314
+ <span class="cline-any cline-yes">1x</span>
315
+ <span class="cline-any cline-yes">1x</span>
316
+ <span class="cline-any cline-yes">1x</span>
317
+ <span class="cline-any cline-yes">1x</span>
318
+ <span class="cline-any cline-yes">1x</span>
319
+ <span class="cline-any cline-yes">1x</span>
320
+ <span class="cline-any cline-yes">1x</span>
321
+ <span class="cline-any cline-yes">1x</span>
322
+ <span class="cline-any cline-yes">1x</span>
323
+ <span class="cline-any cline-yes">1x</span>
324
+ <span class="cline-any cline-yes">1x</span>
325
+ <span class="cline-any cline-yes">1x</span>
326
+ <span class="cline-any cline-yes">1x</span>
327
+ <span class="cline-any cline-yes">1x</span>
328
+ <span class="cline-any cline-yes">1x</span>
329
+ <span class="cline-any cline-yes">1x</span>
330
+ <span class="cline-any cline-yes">1x</span>
331
+ <span class="cline-any cline-yes">1x</span>
332
+ <span class="cline-any cline-yes">1x</span>
333
+ <span class="cline-any cline-yes">1x</span>
334
+ <span class="cline-any cline-yes">1x</span>
335
+ <span class="cline-any cline-yes">1x</span>
336
+ <span class="cline-any cline-yes">1x</span>
337
+ <span class="cline-any cline-yes">1x</span>
338
+ <span class="cline-any cline-yes">1x</span>
339
+ <span class="cline-any cline-yes">1x</span>
340
+ <span class="cline-any cline-yes">1x</span>
341
+ <span class="cline-any cline-yes">1x</span>
342
+ <span class="cline-any cline-yes">1x</span>
343
+ <span class="cline-any cline-yes">1x</span>
344
+ <span class="cline-any cline-yes">1x</span>
345
+ <span class="cline-any cline-yes">1x</span>
346
+ <span class="cline-any cline-yes">1x</span>
347
+ <span class="cline-any cline-yes">1x</span>
348
+ <span class="cline-any cline-yes">1x</span>
349
+ <span class="cline-any cline-yes">1x</span>
350
+ <span class="cline-any cline-yes">1x</span>
351
+ <span class="cline-any cline-yes">1x</span>
352
+ <span class="cline-any cline-yes">1x</span>
353
+ <span class="cline-any cline-yes">1x</span>
354
+ <span class="cline-any cline-yes">1x</span>
355
+ <span class="cline-any cline-yes">1x</span>
356
+ <span class="cline-any cline-yes">1x</span>
357
+ <span class="cline-any cline-yes">1x</span>
358
+ <span class="cline-any cline-yes">1x</span>
359
+ <span class="cline-any cline-yes">1x</span>
360
+ <span class="cline-any cline-yes">1x</span>
361
+ <span class="cline-any cline-yes">1x</span>
362
+ <span class="cline-any cline-yes">1x</span>
363
+ <span class="cline-any cline-yes">1x</span>
364
+ <span class="cline-any cline-yes">1x</span>
365
+ <span class="cline-any cline-yes">1x</span>
366
+ <span class="cline-any cline-yes">1x</span>
367
+ <span class="cline-any cline-yes">1x</span>
368
+ <span class="cline-any cline-yes">1x</span>
369
+ <span class="cline-any cline-yes">1x</span>
370
+ <span class="cline-any cline-yes">1x</span>
371
+ <span class="cline-any cline-yes">1x</span>
372
+ <span class="cline-any cline-yes">1x</span>
373
+ <span class="cline-any cline-yes">1x</span>
374
+ <span class="cline-any cline-yes">1x</span>
375
+ <span class="cline-any cline-yes">1x</span>
376
+ <span class="cline-any cline-yes">1x</span>
377
+ <span class="cline-any cline-yes">1x</span>
378
+ <span class="cline-any cline-yes">1x</span>
379
+ <span class="cline-any cline-yes">1x</span>
380
+ <span class="cline-any cline-yes">1x</span>
381
+ <span class="cline-any cline-yes">1x</span>
382
+ <span class="cline-any cline-yes">124x</span>
383
+ <span class="cline-any cline-yes">124x</span>
384
+ <span class="cline-any cline-yes">124x</span>
385
+ <span class="cline-any cline-yes">124x</span>
386
+ <span class="cline-any cline-yes">124x</span>
387
+ <span class="cline-any cline-yes">124x</span>
388
+ <span class="cline-any cline-yes">124x</span>
389
+ <span class="cline-any cline-yes">124x</span>
390
+ <span class="cline-any cline-yes">124x</span>
391
+ <span class="cline-any cline-yes">124x</span>
392
+ <span class="cline-any cline-yes">124x</span>
393
+ <span class="cline-any cline-yes">124x</span>
394
+ <span class="cline-any cline-yes">124x</span>
395
+ <span class="cline-any cline-yes">124x</span>
396
+ <span class="cline-any cline-yes">124x</span>
397
+ <span class="cline-any cline-yes">124x</span>
398
+ <span class="cline-any cline-yes">124x</span>
399
+ <span class="cline-any cline-yes">124x</span>
400
+ <span class="cline-any cline-yes">124x</span>
401
+ <span class="cline-any cline-yes">124x</span>
402
+ <span class="cline-any cline-yes">124x</span>
403
+ <span class="cline-any cline-yes">124x</span>
404
+ <span class="cline-any cline-yes">124x</span>
405
+ <span class="cline-any cline-yes">124x</span>
406
+ <span class="cline-any cline-yes">124x</span>
407
+ <span class="cline-any cline-yes">124x</span>
408
+ <span class="cline-any cline-yes">124x</span>
409
+ <span class="cline-any cline-yes">124x</span>
410
+ <span class="cline-any cline-yes">124x</span>
411
+ <span class="cline-any cline-yes">124x</span>
412
+ <span class="cline-any cline-yes">124x</span>
413
+ <span class="cline-any cline-yes">124x</span>
414
+ <span class="cline-any cline-yes">124x</span>
415
+ <span class="cline-any cline-yes">1x</span>
416
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">"use client";
417
+ import { forwardRef, type ComponentType, type HTMLAttributes } from "react";
418
+ import { Portal } from "../portal/Portal.js";
419
+ import { useEnsuredId } from "../useEnsuredId.js";
420
+ import {
421
+ DefaultToastRenderer,
422
+ type ToastRendererProps,
423
+ } from "./DefaultToastRenderer.js";
424
+ import { type ConfigurableToastProps } from "./Toast.js";
425
+ import { useToastQueue } from "./ToastManagerProvider.js";
426
+ import { snackbar } from "./snackbarStyles.js";
427
+ &nbsp;
428
+ /**
429
+ * @remarks \@since 6.0.0 The `id` prop is optional
430
+ */
431
+ export interface SnackbarProps extends HTMLAttributes&lt;HTMLDivElement&gt; {
432
+ /**
433
+ * @defaultValue `"snackbar-" + useId()`
434
+ */
435
+ id?: string;
436
+ &nbsp;
437
+ /**
438
+ * Set this to the number of toasts that can be visible within the snackbar at
439
+ * the same time. Any toasts added after this value will be added into the
440
+ * queue to be shown.
441
+ *
442
+ * @defaultValue `1`
443
+ */
444
+ limit?: number;
445
+ &nbsp;
446
+ /**
447
+ * @defaultValue `false`
448
+ */
449
+ disablePortal?: boolean;
450
+ &nbsp;
451
+ /**
452
+ * This can be used to create a custom toast implementation.
453
+ *
454
+ * @example
455
+ * ```ts
456
+ * import type { ToastRendererProps } from "@react-md/core";
457
+ * import {
458
+ * Snackbar,
459
+ * Toast,
460
+ * ToastContent,
461
+ * useToastManager,
462
+ * } from "@react-md/core";
463
+ * import type { ReactElement } from "react";
464
+ *
465
+ * function CustomToast(props: CustomToastRendererProps): ReactElement {
466
+ * // Pretend like we don't need anything else from the toast since the
467
+ * // custom behavior is related to the `toastId`
468
+ * const { toastId, visible, duplicates, visibleTime } = props;
469
+ *
470
+ * const toastManager = useToastManager();
471
+ *
472
+ * // Note: If you want to rely on the `action` and `closeButton` behavior,
473
+ * // you must also wrap the `Toast` with:
474
+ * // &lt;RemoveToastProvider value={() =&gt; toastManager.removeToast(toastId, true)}&gt;
475
+ *
476
+ * return (
477
+ * &lt;Toast
478
+ * theme={isError(toastId) ? "error" : "surface"}
479
+ * visible={visible}
480
+ * onEntered={() =&gt; {
481
+ * toastManager.startRemoveTimeout(toastId);
482
+ * }}
483
+ * onExited={() =&gt; {
484
+ * toastManager.removeToast(toastId, false)
485
+ * }}
486
+ * disableContentWrapper
487
+ * &gt;
488
+ * &lt;ToastContent&gt;
489
+ * &lt;TranslateMessage id={toastId} /&gt;
490
+ * &lt;/ToastContent&gt;
491
+ * {isActionable(toastId) &amp;&amp; (
492
+ * &lt;Button
493
+ * onClick={async () =&gt; {
494
+ * await someApiCall();
495
+ * toastManager.removeToast(toastId, true);
496
+ * }}
497
+ * &gt;
498
+ * Dismiss
499
+ * &lt;/Button&gt;
500
+ * )}
501
+ * &lt;/Toast&gt;
502
+ * );
503
+ * }
504
+ *
505
+ * function Example(): ReactElement {
506
+ * return &lt;Snackbar renderToast={CustomToast} /&gt;
507
+ * }
508
+ * ```
509
+ *
510
+ * @see {@link DefaultToastRenderer}
511
+ * @defaultValue `DefaultToastRenderer`
512
+ */
513
+ renderToast?: ComponentType&lt;ToastRendererProps&gt;;
514
+ &nbsp;
515
+ /**
516
+ * Optional props that should be passed to each `Toast` from the `Snackbar`.
517
+ * This is a great way to enforce each toast having a close button, a custom
518
+ * class name, theme, etc.
519
+ *
520
+ * @see {@link DefaultToastRenderer}
521
+ */
522
+ toastDefaults?: ConfigurableToastProps;
523
+ }
524
+ &nbsp;
525
+ /**
526
+ * **Client Component**
527
+ *
528
+ * @example
529
+ * Super SImple Example
530
+ * ```tsx
531
+ * import { Button, Snackbar, addToast } from "@react-md/core";
532
+ * import type { ReactElement } from "react";
533
+ *
534
+ * function Example(): ReactElement {
535
+ * return (
536
+ * &lt;&gt;
537
+ * &lt;Button
538
+ * onClick={() =&gt; {
539
+ * addToast({ children: "A new toast!" });
540
+ * }}
541
+ * &gt;
542
+ * Toast!
543
+ * &lt;/Button&gt;
544
+ * &lt;Snackbar /&gt;
545
+ * &lt;/&gt;
546
+ * );
547
+ * }
548
+ * ```
549
+ *
550
+ * @see {@link SnackbarProps.renderToast} for creating a custom toast
551
+ * implementation.
552
+ * @remarks \@since 6.0.0 Rewritten to use a new API that supports adding toasts
553
+ * outside of React components and rendering multiple toasts at once.
554
+ */
555
+ export const Snackbar = forwardRef&lt;HTMLDivElement, SnackbarProps&gt;(
556
+ function Snackbar(props, ref) {
557
+ const {
558
+ id: propId,
559
+ className,
560
+ limit = 1,
561
+ renderToast: RenderToast = DefaultToastRenderer,
562
+ disablePortal,
563
+ toastDefaults,
564
+ ...remaining
565
+ } = props;
566
+ const id = useEnsuredId(propId, "snackbar");
567
+ const queue = useToastQueue(limit);
568
+ &nbsp;
569
+ return (
570
+ &lt;Portal disabled={disablePortal}&gt;
571
+ {queue.length &gt; 0 &amp;&amp; (
572
+ &lt;div
573
+ {...remaining}
574
+ id={id}
575
+ ref={ref}
576
+ className={snackbar({ className })}
577
+ &gt;
578
+ {queue.map((toast) =&gt; (
579
+ &lt;RenderToast
580
+ {...toast}
581
+ key={toast.toastId}
582
+ toastDefaults={toastDefaults}
583
+ /&gt;
584
+ ))}
585
+ &lt;/div&gt;
586
+ )}
587
+ &lt;/Portal&gt;
588
+ );
589
+ }
590
+ );
633
591
  &nbsp;</pre></td></tr></table></pre>
634
592
 
635
593
  <div class='push'></div><!-- for sticky footer -->
@@ -637,7 +595,7 @@
637
595
  <div class='footer quiet pad2 space-top1 center small'>
638
596
  Code coverage generated by
639
597
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
640
- at 2023-09-23T22:18:28.885Z
598
+ at 2023-11-18T21:24:04.667Z
641
599
  </div>
642
600
  <script src="prettify.js"></script>
643
601
  <script>