@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
@@ -20,41 +20,21 @@ $min-width: 7rem !default;
20
20
 
21
21
  $spacing: 1rem !default;
22
22
 
23
- $var-lookup: (
24
- background-color: (
25
- var: --rmd-menu-background-color,
26
- value: $background-color,
27
- ),
28
- color: (
29
- var: --rmd-menu-color,
30
- value: $color,
31
- ),
32
- min-width: (
33
- var: --rmd-menu-min-width,
34
- value: $min-width,
35
- ),
36
- spacing: (
37
- var: --rmd-menu-spacing,
38
- value: $spacing,
39
- ),
40
- );
23
+ $variables: (background-color, color, min-width, spacing);
41
24
 
42
25
  @function get-var($name, $fallback: null) {
43
- $found: utils.validate($var-lookup, $name, "dialog var");
44
- $var: map.get($found, var);
45
- $value: if($fallback, $fallback, map.get($found, value));
46
-
47
- @if $value {
48
- @return var(#{$var}, #{$value});
26
+ $var: utils.get-var-name($variables, $name, "menu");
27
+ @if $fallback {
28
+ @return var(#{$var}, #{$fallback});
49
29
  }
50
30
 
51
31
  @return var(#{$var});
52
32
  }
53
33
 
54
34
  @mixin set-var($name, $value) {
55
- $var: map.get(utils.validate($var-lookup, $name, "dialog var"), var);
56
-
57
- #{$var}: #{$value};
35
+ @if $value {
36
+ #{utils.get-var-name($variables, $name, "menu")}: #{$value};
37
+ }
58
38
  }
59
39
 
60
40
  @mixin use-var($property, $name: $property, $fallback: null) {
@@ -122,6 +102,15 @@ $var-lookup: (
122
102
  }
123
103
  }
124
104
 
105
+ @mixin variables {
106
+ @if not $disable-everything {
107
+ @include set-var(background-color, $background-color);
108
+ @include set-var(color, $color);
109
+ @include set-var(min-width, $min-width);
110
+ @include set-var(spacing, $spacing);
111
+ }
112
+ }
113
+
125
114
  @mixin styles {
126
115
  @if not $disable-everything {
127
116
  @include menu-styles;
@@ -9,39 +9,34 @@ $z-index: utils.$temporary-element-z-index !default;
9
9
  $transition-duration: transition.$linear-duration !default;
10
10
  $transition-timing-function: transition.$linear-timing-function !default;
11
11
 
12
- $var-lookup: (
13
- background-color: (
14
- var: --rmd-overlay-background-color,
15
- value: $background-color,
16
- ),
17
- z-index: (
18
- var: --rmd-overlay-z-index,
19
- value: $z-index,
20
- ),
21
- );
12
+ $variables: (background-color, z-index);
22
13
 
23
14
  @function get-var($name, $fallback: null) {
24
- $found: utils.validate($var-lookup, $name, "overlay var");
25
- $var: map.get($found, var);
26
- $value: if($fallback, $fallback, map.get($found, value));
27
-
28
- @if $value {
29
- @return var(#{$var}, #{$value});
15
+ $var: utils.get-var-name($variables, $name, "overlay");
16
+ @if $fallback {
17
+ @return var(#{$var}, #{$fallback});
30
18
  }
31
19
 
32
20
  @return var(#{$var});
33
21
  }
34
22
 
35
23
  @mixin set-var($name, $value) {
36
- $var: map.get(utils.validate($var-lookup, $name, "overlay var"), var);
37
-
38
- #{$var}: #{$value};
24
+ @if $value {
25
+ #{utils.get-var-name($variables, $name, "overlay")}: #{$value};
26
+ }
39
27
  }
40
28
 
41
29
  @mixin use-var($property, $name: $property, $fallback: null) {
42
30
  #{$property}: get-var($name, $fallback);
43
31
  }
44
32
 
33
+ @mixin variables {
34
+ @if not $disable-everything {
35
+ @include set-var(background-color, $background-color);
36
+ @include set-var(z-index, $z-index);
37
+ }
38
+ }
39
+
45
40
  @mixin styles {
46
41
  @if not $disable-everything {
47
42
  .rmd-overlay {
@@ -206,45 +206,27 @@ $linear-vertical-reverse-short-styles: (
206
206
  ),
207
207
  ) !default;
208
208
 
209
- $var-lookup: (
210
- background-color: (
211
- var: --rmd-progress-background-color,
212
- value: $background-color,
213
- ),
214
- color: (
215
- var: --rmd-progress-color,
216
- value: $color,
217
- ),
218
- circular-size: (
219
- var: --rmd-progress-circular-size,
220
- value: $circular-size,
221
- ),
222
- circular-stroke-width: (
223
- var: --rmd-progress-circular-width,
224
- value: $circular-stroke-width,
225
- ),
226
- linear-size: (
227
- var: --rmd-progress-linear-size,
228
- value: $linear-size,
229
- ),
209
+ $variables: (
210
+ background-color,
211
+ color,
212
+ circular-size,
213
+ circular-stroke-width,
214
+ linear-size
230
215
  );
231
216
 
232
217
  @function get-var($name, $fallback: null) {
233
- $found: utils.validate($var-lookup, $name, "progress var");
234
- $var: map.get($found, var);
235
- $value: if($fallback, $fallback, map.get($found, value));
236
-
237
- @if $value {
238
- @return var(#{$var}, #{$value});
218
+ $var: utils.get-var-name($variables, $name, "progress");
219
+ @if $fallback {
220
+ @return var(#{$var}, #{$fallback});
239
221
  }
240
222
 
241
223
  @return var(#{$var});
242
224
  }
243
225
 
244
226
  @mixin set-var($name, $value) {
245
- $var: map.get(utils.validate($var-lookup, $name, "progress var"), var);
246
-
247
- #{$var}: #{$value};
227
+ @if $value {
228
+ #{utils.get-var-name($variables, $name, "progress")}: #{$value};
229
+ }
248
230
  }
249
231
 
250
232
  @mixin use-var($property, $name: $property, $fallback: null) {
@@ -566,6 +548,19 @@ $var-lookup: (
566
548
  }
567
549
  }
568
550
 
551
+ @mixin variables {
552
+ @if not $disable-circular {
553
+ @include set-var(circular-size, $circular-size);
554
+ @include set-var(circular-stroke-width, $circular-stroke-width);
555
+ }
556
+
557
+ @if not $disable-linear {
558
+ @include set-var(background-color, $background-color);
559
+ @include set-var(color, $color);
560
+ @include set-var(linear-size, $linear-size);
561
+ }
562
+ }
563
+
569
564
  @mixin styles {
570
565
  @if not $disable-circular {
571
566
  @include _circular-progress;
@@ -59,29 +59,33 @@ $selected-background-color: theme.get-default-color(
59
59
 
60
60
  $typography-styles: typography.$button-styles !default;
61
61
 
62
- $var-lookup: (
63
- outline-width: (
64
- var: --rmd-segmented-button-outline-width,
65
- value: $outline-width,
66
- ),
67
- outline-color: (
68
- var: --rmd-segmented-button-outline-color,
69
- value: $outline-color,
70
- ),
71
- color: (
72
- var: --rmd-segmented-button-color,
73
- value: currentcolor,
74
- ),
75
- selected-background-color: (
76
- var: --rmd-segmented-button-selected-background-color,
77
- value: $selected-background-color,
78
- ),
79
- selected-color: (
80
- var: --rmd-segmented-button-selected-color,
81
- value: $selected-color,
82
- ),
62
+ $variables: (
63
+ outline-width,
64
+ outline-color,
65
+ color,
66
+ selected-background-color,
67
+ selected-color
83
68
  );
84
69
 
70
+ @function get-var($name, $fallback: null) {
71
+ $var: utils.get-var-name($variables, $name, "segmented-button");
72
+ @if $fallback {
73
+ @return var(#{$var}, #{$fallback});
74
+ }
75
+
76
+ @return var(#{$var});
77
+ }
78
+
79
+ @mixin set-var($name, $value) {
80
+ @if $value {
81
+ #{utils.get-var-name($variables, $name, "segmented-button")}: #{$value};
82
+ }
83
+ }
84
+
85
+ @mixin use-var($property, $name: $property, $fallback: null) {
86
+ #{$property}: get-var($name, $fallback);
87
+ }
88
+
85
89
  @mixin use-light-theme {
86
90
  @if not $disable-everything {
87
91
  @if $light-theme-outline-color != $dark-theme-outline-color {
@@ -124,29 +128,14 @@ $var-lookup: (
124
128
  }
125
129
  }
126
130
 
127
- @function get-var($name, $fallback: null) {
128
- $found: utils.validate($var-lookup, $name, "segmented button var");
129
- $var: map.get($found, var);
130
- $value: if($fallback, $fallback, map.get($found, value));
131
-
132
- @if $value {
133
- @return var(#{$var}, #{$value});
131
+ @mixin variables {
132
+ @if not $disable-everything {
133
+ @include set-var(outline-width, $outline-width);
134
+ @include set-var(outline-color, $outline-color);
135
+ @include set-var(color, currentcolor);
136
+ @include set-var(selected-background-color, $selected-background-color);
137
+ @include set-var(selected-color, $selected-color);
134
138
  }
135
-
136
- @return var(#{$var});
137
- }
138
-
139
- @mixin set-var($name, $value) {
140
- $var: map.get(
141
- utils.validate($var-lookup, $name, "segmented button var"),
142
- var
143
- );
144
-
145
- #{$var}: #{$value};
146
- }
147
-
148
- @mixin use-var($property, $name: $property, $fallback: null) {
149
- #{$property}: get-var($name, $fallback);
150
139
  }
151
140
 
152
141
  @mixin styles {
@@ -30,63 +30,45 @@ $touch-max-height: calc(100% - #{$touch-margin}) !default;
30
30
  $recommended-min-height: 3.5rem !default;
31
31
  $recommended-max-height: 50% !default;
32
32
 
33
- $var-lookup: (
34
- height: (
35
- var: --rmd-sheet-height,
36
- value: null,
37
- ),
38
- width: (
39
- var: --rmd-sheet-width,
40
- value: null,
41
- ),
42
- max-height: (
43
- var: --rmd-sheet-max-height,
44
- value: null,
45
- ),
46
- touch-width: (
47
- var: --rmd-sheet-touch-width,
48
- value: $touch-width,
49
- ),
50
- touch-max-height: (
51
- var: --rmd-sheet-touch-max-height,
52
- value: $touch-max-height,
53
- ),
54
- static-width: (
55
- var: --rmd-sheet-static-width,
56
- value: $static-width,
57
- ),
58
- transform-offscreen: (
59
- var: --rmd-sheet-transform-offscreen,
60
- value: null,
61
- ),
62
- z-index: (
63
- var: --rmd-sheet-z-index,
64
- value: $z-index,
65
- ),
33
+ $variables: (
34
+ height,
35
+ width,
36
+ max-height,
37
+ touch-width,
38
+ touch-max-height,
39
+ static-width,
40
+ transform-offscreen,
41
+ z-index
66
42
  );
67
43
 
68
44
  @function get-var($name, $fallback: null) {
69
- $found: utils.validate($var-lookup, $name, "sheet var");
70
- $var: map.get($found, var);
71
- $value: if($fallback, $fallback, map.get($found, value));
72
-
73
- @if $value {
74
- @return var(#{$var}, #{$value});
45
+ $var: utils.get-var-name($variables, $name, "sheet");
46
+ @if $fallback {
47
+ @return var(#{$var}, #{$fallback});
75
48
  }
76
49
 
77
50
  @return var(#{$var});
78
51
  }
79
52
 
80
53
  @mixin set-var($name, $value) {
81
- $var: map.get(utils.validate($var-lookup, $name, "sheet var"), var);
82
-
83
- #{$var}: #{$value};
54
+ @if $value {
55
+ #{utils.get-var-name($variables, $name, "sheet")}: #{$value};
56
+ }
84
57
  }
85
58
 
86
59
  @mixin use-var($property, $name: $property, $fallback: null) {
87
60
  #{$property}: get-var($name, $fallback);
88
61
  }
89
62
 
63
+ @mixin variables {
64
+ @if not $disable-everything {
65
+ @include set-var(touch-width, $touch-width);
66
+ @include set-var(touch-max-height, $touch-max-height);
67
+ @include set-var(static-width, $static-width);
68
+ @include set-var(z-index, $z-index);
69
+ }
70
+ }
71
+
90
72
  @mixin styles {
91
73
  @if not $disable-everything {
92
74
  .rmd-sheet {
@@ -28,7 +28,7 @@ const noop = ()=>{
28
28
  * @remarks \@since 6.0.0
29
29
  */ export function DefaultToastRenderer(props) {
30
30
  const { toastId, paused, visible, priority: _priority, duplicates: _duplicates, visibleTime, onExited = noop, onEntered = noop, onMouseEnter = noop, onMouseLeave = noop, toastDefaults = {}, ...remaining } = props;
31
- const { closeButtonProps, closeButton = !!closeButtonProps, onEntered: defaultEntered = noop, onExited: defaultExited = noop, onMouseEnter: defaultMouseEnter = noop, onMouseLeave: defaultMouseLeave = noop, ...defaults } = toastDefaults;
31
+ const { closeButtonProps, closeButton = !!closeButtonProps || !!remaining.closeButtonProps, onEntered: defaultEntered = noop, onExited: defaultExited = noop, onMouseEnter: defaultMouseEnter = noop, onMouseLeave: defaultMouseLeave = noop, ...defaults } = toastDefaults;
32
32
  const toastManager = useToastManager();
33
33
  const currentToastActions = useMemo(()=>({
34
34
  clearTimer () {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/snackbar/DefaultToastRenderer.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo, type ReactElement } from \"react\";\nimport { usePageInactive } from \"../usePageInactive.js\";\nimport { Toast, type ConfigurableToastProps } from \"./Toast.js\";\nimport { type ToastMeta } from \"./ToastManager.js\";\nimport { useToastManager } from \"./ToastManagerProvider.js\";\nimport {\n CurrentToastActionsProvider,\n type CurrentToastActions,\n} from \"./useCurrentToastActions.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ToastRendererProps extends ConfigurableToastProps, ToastMeta {\n /**\n * Optional props that should be passed to each `Toast` from the `Snackbar`.\n * This is a great way to enforce each toast having a close button, a custom\n * class name, theme, etc.\n */\n toastDefaults?: ConfigurableToastProps;\n}\n\n/**\n * **Client Component**\n *\n * This is the default implementation for rendering toasts that will:\n *\n * - controls the visibility of the toast with the {@link useToast} hook\n * - add a `closeButton` if the {@link ToastRendererProps.toastDefaults} has\n * `closeButton === true` or the `closeButtonProps` exists.\n * - add a `closeButton` if the `visibleTime` is `null` and the current toast\n * does not have an `action` or `actionButton`\n * - ensures both the toast's `onEntered` and the {@link ToastRendererProps.toastDefaults}'s\n * `onEntered` are called\n * - ensures both the toast's `onExited` and the {@link ToastRendererProps.toastDefaults}'s\n * `onExited` are called\n * - always renders the {@link ToastRendererProps.toastDefaults}'s `children`\n * 'after the optional toast's `children`\n *\n * @remarks \\@since 6.0.0\n */\nexport function DefaultToastRenderer(props: ToastRendererProps): ReactElement {\n const {\n toastId,\n paused,\n visible,\n priority: _priority,\n duplicates: _duplicates,\n visibleTime,\n onExited = noop,\n onEntered = noop,\n onMouseEnter = noop,\n onMouseLeave = noop,\n toastDefaults = {},\n ...remaining\n } = props;\n const {\n closeButtonProps,\n closeButton = !!closeButtonProps,\n onEntered: defaultEntered = noop,\n onExited: defaultExited = noop,\n onMouseEnter: defaultMouseEnter = noop,\n onMouseLeave: defaultMouseLeave = noop,\n ...defaults\n } = toastDefaults;\n\n const toastManager = useToastManager();\n const currentToastActions = useMemo<CurrentToastActions>(\n () => ({\n clearTimer() {\n toastManager.clearTimer(toastId);\n },\n removeToast(transition) {\n toastManager.removeToast(toastId, transition);\n },\n startRemoveTimeout() {\n toastManager.startRemoveTimeout(toastId);\n },\n pauseRemoveTimeout() {\n toastManager.pauseRemoveTimeout(toastId);\n },\n resumeRemoveTimeout() {\n toastManager.resumeRemoveTimeout(toastId);\n },\n }),\n [toastId, toastManager]\n );\n useEffect(() => {\n return () => {\n currentToastActions.clearTimer();\n };\n }, [currentToastActions]);\n usePageInactive({\n disabled: !visible,\n onChange(active) {\n if (active) {\n currentToastActions.resumeRemoveTimeout();\n } else {\n currentToastActions.pauseRemoveTimeout();\n }\n },\n });\n\n return (\n <CurrentToastActionsProvider value={currentToastActions}>\n <Toast\n closeButton={\n closeButton ||\n (!visibleTime && !remaining.action && !remaining.actionButton)\n }\n closeButtonProps={closeButtonProps}\n {...defaults}\n {...remaining}\n paused={paused}\n visible={visible}\n onEntered={(appearing) => {\n defaultEntered(appearing);\n onEntered(appearing);\n currentToastActions.startRemoveTimeout();\n }}\n onExited={() => {\n defaultExited();\n onExited();\n currentToastActions.removeToast(false);\n }}\n onMouseEnter={(event) => {\n defaultMouseEnter(event);\n onMouseEnter(event);\n currentToastActions.pauseRemoveTimeout();\n }}\n onMouseLeave={(event) => {\n defaultMouseLeave(event);\n onMouseLeave(event);\n currentToastActions.resumeRemoveTimeout();\n }}\n >\n {defaults.children}\n {remaining.children}\n </Toast>\n </CurrentToastActionsProvider>\n );\n}\n"],"names":["useEffect","useMemo","usePageInactive","Toast","useToastManager","CurrentToastActionsProvider","noop","DefaultToastRenderer","props","toastId","paused","visible","priority","_priority","duplicates","_duplicates","visibleTime","onExited","onEntered","onMouseEnter","onMouseLeave","toastDefaults","remaining","closeButtonProps","closeButton","defaultEntered","defaultExited","defaultMouseEnter","defaultMouseLeave","defaults","toastManager","currentToastActions","clearTimer","removeToast","transition","startRemoveTimeout","pauseRemoveTimeout","resumeRemoveTimeout","disabled","onChange","active","value","action","actionButton","appearing","event","children"],"mappings":"AAAA;;AACA,SAASA,SAAS,EAAEC,OAAO,QAA2B,QAAQ;AAC9D,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SAASC,KAAK,QAAqC,aAAa;AAEhE,SAASC,eAAe,QAAQ,4BAA4B;AAC5D,SACEC,2BAA2B,QAEtB,8BAA8B;AAErC,MAAMC,OAAO;AACX,aAAa;AACf;AAcA;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,qBAAqBC,KAAyB;IAC5D,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,OAAO,EACPC,UAAUC,SAAS,EACnBC,YAAYC,WAAW,EACvBC,WAAW,EACXC,WAAWX,IAAI,EACfY,YAAYZ,IAAI,EAChBa,eAAeb,IAAI,EACnBc,eAAed,IAAI,EACnBe,gBAAgB,CAAC,CAAC,EAClB,GAAGC,WACJ,GAAGd;IACJ,MAAM,EACJe,gBAAgB,EAChBC,cAAc,CAAC,CAACD,gBAAgB,EAChCL,WAAWO,iBAAiBnB,IAAI,EAChCW,UAAUS,gBAAgBpB,IAAI,EAC9Ba,cAAcQ,oBAAoBrB,IAAI,EACtCc,cAAcQ,oBAAoBtB,IAAI,EACtC,GAAGuB,UACJ,GAAGR;IAEJ,MAAMS,eAAe1B;IACrB,MAAM2B,sBAAsB9B,QAC1B,IAAO,CAAA;YACL+B;gBACEF,aAAaE,UAAU,CAACvB;YAC1B;YACAwB,aAAYC,UAAU;gBACpBJ,aAAaG,WAAW,CAACxB,SAASyB;YACpC;YACAC;gBACEL,aAAaK,kBAAkB,CAAC1B;YAClC;YACA2B;gBACEN,aAAaM,kBAAkB,CAAC3B;YAClC;YACA4B;gBACEP,aAAaO,mBAAmB,CAAC5B;YACnC;QACF,CAAA,GACA;QAACA;QAASqB;KAAa;IAEzB9B,UAAU;QACR,OAAO;YACL+B,oBAAoBC,UAAU;QAChC;IACF,GAAG;QAACD;KAAoB;IACxB7B,gBAAgB;QACdoC,UAAU,CAAC3B;QACX4B,UAASC,MAAM;YACb,IAAIA,QAAQ;gBACVT,oBAAoBM,mBAAmB;YACzC,OAAO;gBACLN,oBAAoBK,kBAAkB;YACxC;QACF;IACF;IAEA,qBACE,KAAC/B;QAA4BoC,OAAOV;kBAClC,cAAA,MAAC5B;YACCqB,aACEA,eACC,CAACR,eAAe,CAACM,UAAUoB,MAAM,IAAI,CAACpB,UAAUqB,YAAY;YAE/DpB,kBAAkBA;YACjB,GAAGM,QAAQ;YACX,GAAGP,SAAS;YACbZ,QAAQA;YACRC,SAASA;YACTO,WAAW,CAAC0B;gBACVnB,eAAemB;gBACf1B,UAAU0B;gBACVb,oBAAoBI,kBAAkB;YACxC;YACAlB,UAAU;gBACRS;gBACAT;gBACAc,oBAAoBE,WAAW,CAAC;YAClC;YACAd,cAAc,CAAC0B;gBACblB,kBAAkBkB;gBAClB1B,aAAa0B;gBACbd,oBAAoBK,kBAAkB;YACxC;YACAhB,cAAc,CAACyB;gBACbjB,kBAAkBiB;gBAClBzB,aAAayB;gBACbd,oBAAoBM,mBAAmB;YACzC;;gBAECR,SAASiB,QAAQ;gBACjBxB,UAAUwB,QAAQ;;;;AAI3B"}
1
+ {"version":3,"sources":["../../src/snackbar/DefaultToastRenderer.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo, type ReactElement } from \"react\";\nimport { usePageInactive } from \"../usePageInactive.js\";\nimport { Toast, type ConfigurableToastProps } from \"./Toast.js\";\nimport { type ToastMeta } from \"./ToastManager.js\";\nimport { useToastManager } from \"./ToastManagerProvider.js\";\nimport {\n CurrentToastActionsProvider,\n type CurrentToastActions,\n} from \"./useCurrentToastActions.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ToastRendererProps extends ConfigurableToastProps, ToastMeta {\n /**\n * Optional props that should be passed to each `Toast` from the `Snackbar`.\n * This is a great way to enforce each toast having a close button, a custom\n * class name, theme, etc.\n */\n toastDefaults?: ConfigurableToastProps;\n}\n\n/**\n * **Client Component**\n *\n * This is the default implementation for rendering toasts that will:\n *\n * - controls the visibility of the toast with the {@link useToast} hook\n * - add a `closeButton` if the {@link ToastRendererProps.toastDefaults} has\n * `closeButton === true` or the `closeButtonProps` exists.\n * - add a `closeButton` if the `visibleTime` is `null` and the current toast\n * does not have an `action` or `actionButton`\n * - ensures both the toast's `onEntered` and the {@link ToastRendererProps.toastDefaults}'s\n * `onEntered` are called\n * - ensures both the toast's `onExited` and the {@link ToastRendererProps.toastDefaults}'s\n * `onExited` are called\n * - always renders the {@link ToastRendererProps.toastDefaults}'s `children`\n * 'after the optional toast's `children`\n *\n * @remarks \\@since 6.0.0\n */\nexport function DefaultToastRenderer(props: ToastRendererProps): ReactElement {\n const {\n toastId,\n paused,\n visible,\n priority: _priority,\n duplicates: _duplicates,\n visibleTime,\n onExited = noop,\n onEntered = noop,\n onMouseEnter = noop,\n onMouseLeave = noop,\n toastDefaults = {},\n ...remaining\n } = props;\n const {\n closeButtonProps,\n closeButton = !!closeButtonProps || !!remaining.closeButtonProps,\n onEntered: defaultEntered = noop,\n onExited: defaultExited = noop,\n onMouseEnter: defaultMouseEnter = noop,\n onMouseLeave: defaultMouseLeave = noop,\n ...defaults\n } = toastDefaults;\n\n const toastManager = useToastManager();\n const currentToastActions = useMemo<CurrentToastActions>(\n () => ({\n clearTimer() {\n toastManager.clearTimer(toastId);\n },\n removeToast(transition) {\n toastManager.removeToast(toastId, transition);\n },\n startRemoveTimeout() {\n toastManager.startRemoveTimeout(toastId);\n },\n pauseRemoveTimeout() {\n toastManager.pauseRemoveTimeout(toastId);\n },\n resumeRemoveTimeout() {\n toastManager.resumeRemoveTimeout(toastId);\n },\n }),\n [toastId, toastManager]\n );\n useEffect(() => {\n return () => {\n currentToastActions.clearTimer();\n };\n }, [currentToastActions]);\n usePageInactive({\n disabled: !visible,\n onChange(active) {\n if (active) {\n currentToastActions.resumeRemoveTimeout();\n } else {\n currentToastActions.pauseRemoveTimeout();\n }\n },\n });\n\n return (\n <CurrentToastActionsProvider value={currentToastActions}>\n <Toast\n closeButton={\n closeButton ||\n (!visibleTime && !remaining.action && !remaining.actionButton)\n }\n closeButtonProps={closeButtonProps}\n {...defaults}\n {...remaining}\n paused={paused}\n visible={visible}\n onEntered={(appearing) => {\n defaultEntered(appearing);\n onEntered(appearing);\n currentToastActions.startRemoveTimeout();\n }}\n onExited={() => {\n defaultExited();\n onExited();\n currentToastActions.removeToast(false);\n }}\n onMouseEnter={(event) => {\n defaultMouseEnter(event);\n onMouseEnter(event);\n currentToastActions.pauseRemoveTimeout();\n }}\n onMouseLeave={(event) => {\n defaultMouseLeave(event);\n onMouseLeave(event);\n currentToastActions.resumeRemoveTimeout();\n }}\n >\n {defaults.children}\n {remaining.children}\n </Toast>\n </CurrentToastActionsProvider>\n );\n}\n"],"names":["useEffect","useMemo","usePageInactive","Toast","useToastManager","CurrentToastActionsProvider","noop","DefaultToastRenderer","props","toastId","paused","visible","priority","_priority","duplicates","_duplicates","visibleTime","onExited","onEntered","onMouseEnter","onMouseLeave","toastDefaults","remaining","closeButtonProps","closeButton","defaultEntered","defaultExited","defaultMouseEnter","defaultMouseLeave","defaults","toastManager","currentToastActions","clearTimer","removeToast","transition","startRemoveTimeout","pauseRemoveTimeout","resumeRemoveTimeout","disabled","onChange","active","value","action","actionButton","appearing","event","children"],"mappings":"AAAA;;AACA,SAASA,SAAS,EAAEC,OAAO,QAA2B,QAAQ;AAC9D,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SAASC,KAAK,QAAqC,aAAa;AAEhE,SAASC,eAAe,QAAQ,4BAA4B;AAC5D,SACEC,2BAA2B,QAEtB,8BAA8B;AAErC,MAAMC,OAAO;AACX,aAAa;AACf;AAcA;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,qBAAqBC,KAAyB;IAC5D,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,OAAO,EACPC,UAAUC,SAAS,EACnBC,YAAYC,WAAW,EACvBC,WAAW,EACXC,WAAWX,IAAI,EACfY,YAAYZ,IAAI,EAChBa,eAAeb,IAAI,EACnBc,eAAed,IAAI,EACnBe,gBAAgB,CAAC,CAAC,EAClB,GAAGC,WACJ,GAAGd;IACJ,MAAM,EACJe,gBAAgB,EAChBC,cAAc,CAAC,CAACD,oBAAoB,CAAC,CAACD,UAAUC,gBAAgB,EAChEL,WAAWO,iBAAiBnB,IAAI,EAChCW,UAAUS,gBAAgBpB,IAAI,EAC9Ba,cAAcQ,oBAAoBrB,IAAI,EACtCc,cAAcQ,oBAAoBtB,IAAI,EACtC,GAAGuB,UACJ,GAAGR;IAEJ,MAAMS,eAAe1B;IACrB,MAAM2B,sBAAsB9B,QAC1B,IAAO,CAAA;YACL+B;gBACEF,aAAaE,UAAU,CAACvB;YAC1B;YACAwB,aAAYC,UAAU;gBACpBJ,aAAaG,WAAW,CAACxB,SAASyB;YACpC;YACAC;gBACEL,aAAaK,kBAAkB,CAAC1B;YAClC;YACA2B;gBACEN,aAAaM,kBAAkB,CAAC3B;YAClC;YACA4B;gBACEP,aAAaO,mBAAmB,CAAC5B;YACnC;QACF,CAAA,GACA;QAACA;QAASqB;KAAa;IAEzB9B,UAAU;QACR,OAAO;YACL+B,oBAAoBC,UAAU;QAChC;IACF,GAAG;QAACD;KAAoB;IACxB7B,gBAAgB;QACdoC,UAAU,CAAC3B;QACX4B,UAASC,MAAM;YACb,IAAIA,QAAQ;gBACVT,oBAAoBM,mBAAmB;YACzC,OAAO;gBACLN,oBAAoBK,kBAAkB;YACxC;QACF;IACF;IAEA,qBACE,KAAC/B;QAA4BoC,OAAOV;kBAClC,cAAA,MAAC5B;YACCqB,aACEA,eACC,CAACR,eAAe,CAACM,UAAUoB,MAAM,IAAI,CAACpB,UAAUqB,YAAY;YAE/DpB,kBAAkBA;YACjB,GAAGM,QAAQ;YACX,GAAGP,SAAS;YACbZ,QAAQA;YACRC,SAASA;YACTO,WAAW,CAAC0B;gBACVnB,eAAemB;gBACf1B,UAAU0B;gBACVb,oBAAoBI,kBAAkB;YACxC;YACAlB,UAAU;gBACRS;gBACAT;gBACAc,oBAAoBE,WAAW,CAAC;YAClC;YACAd,cAAc,CAAC0B;gBACblB,kBAAkBkB;gBAClB1B,aAAa0B;gBACbd,oBAAoBK,kBAAkB;YACxC;YACAhB,cAAc,CAACyB;gBACbjB,kBAAkBiB;gBAClBzB,aAAayB;gBACbd,oBAAoBM,mBAAmB;YACzC;;gBAECR,SAASiB,QAAQ;gBACjBxB,UAAUwB,QAAQ;;;;AAI3B"}
@@ -1,4 +1,4 @@
1
- import { type AriaRole, type ComponentType, type HTMLAttributes } from "react";
1
+ import { type ComponentType, type HTMLAttributes } from "react";
2
2
  import { type ToastRendererProps } from "./DefaultToastRenderer.js";
3
3
  import { type ConfigurableToastProps } from "./Toast.js";
4
4
  import { type SnackbarPosition } from "./snackbarStyles.js";
@@ -10,8 +10,6 @@ export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
10
10
  * @defaultValue `"snackbar-" + useId()`
11
11
  */
12
12
  id?: string;
13
- /** @defaultValue `"status"` */
14
- role?: AriaRole;
15
13
  /**
16
14
  * Set this to the number of toasts that can be visible within the snackbar at
17
15
  * the same time. Any toasts added after this value will be added into the
@@ -37,16 +37,15 @@ import { snackbar } from "./snackbarStyles.js";
37
37
  * @remarks \@since 6.0.0 Rewritten to use a new API that supports adding toasts
38
38
  * outside of React components and rendering multiple toasts at once.
39
39
  */ export const Snackbar = /*#__PURE__*/ forwardRef(function Snackbar(props, ref) {
40
- const { id: propId, role = "status", className, limit = 1, position = "bottom", renderToast: RenderToast = DefaultToastRenderer, disablePortal, toastDefaults, ...remaining } = props;
40
+ const { id: propId, className, limit = 1, position = "bottom", renderToast: RenderToast = DefaultToastRenderer, disablePortal, toastDefaults, ...remaining } = props;
41
41
  const id = useEnsuredId(propId, "snackbar");
42
42
  const queue = useToastQueue(limit);
43
43
  return /*#__PURE__*/ _jsx(Portal, {
44
44
  disabled: disablePortal,
45
- children: /*#__PURE__*/ _jsx("div", {
45
+ children: queue.length > 0 && /*#__PURE__*/ _jsx("div", {
46
46
  ...remaining,
47
47
  id: id,
48
48
  ref: ref,
49
- role: role,
50
49
  className: snackbar({
51
50
  position,
52
51
  className
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/snackbar/Snackbar.tsx"],"sourcesContent":["\"use client\";\nimport {\n forwardRef,\n type AriaRole,\n type ComponentType,\n type HTMLAttributes,\n} from \"react\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n DefaultToastRenderer,\n type ToastRendererProps,\n} from \"./DefaultToastRenderer.js\";\nimport { type ConfigurableToastProps } from \"./Toast.js\";\nimport { useToastQueue } from \"./ToastManagerProvider.js\";\nimport { snackbar, type SnackbarPosition } from \"./snackbarStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0 The `id` prop is optional\n */\nexport interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * @defaultValue `\"snackbar-\" + useId()`\n */\n id?: string;\n\n /** @defaultValue `\"status\"` */\n role?: AriaRole;\n\n /**\n * Set this to the number of toasts that can be visible within the snackbar at\n * the same time. Any toasts added after this value will be added into the\n * queue to be shown.\n *\n * @defaultValue `1`\n */\n limit?: number;\n\n /**\n * @defaultValue `\"bottom\"`\n */\n position?: SnackbarPosition;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * This can be used to create a custom toast implementation.\n *\n * @example\n * ```ts\n * import type { ToastRendererProps } from \"@react-md/core\";\n * import {\n * Snackbar,\n * Toast,\n * ToastContent,\n * useToastManager,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function CustomToast(props: CustomToastRendererProps): ReactElement {\n * // Pretend like we don't need anything else from the toast since the\n * // custom behavior is related to the `toastId`\n * const { toastId, visible, duplicates, visibleTime } = props;\n *\n * const toastManager = useToastManager();\n *\n * // Note: If you want to rely on the `action` and `closeButton` behavior,\n * // you must also wrap the `Toast` with:\n * // <RemoveToastProvider value={() => toastManager.removeToast(toastId, true)}>\n *\n * return (\n * <Toast\n * theme={isError(toastId) ? \"error\" : \"surface\"}\n * visible={visible}\n * onEntered={() => {\n * toastManager.startRemoveTimeout(toastId);\n * }}\n * onExited={() => {\n * toastManager.removeToast(toastId, false)\n * }}\n * disableContentWrapper\n * >\n * <ToastContent>\n * <TranslateMessage id={toastId} />\n * </ToastContent>\n * {isActionable(toastId) && (\n * <Button\n * onClick={async () => {\n * await someApiCall();\n * toastManager.removeToast(toastId, true);\n * }}\n * >\n * Dismiss\n * </Button>\n * )}\n * </Toast>\n * );\n * }\n *\n * function Example(): ReactElement {\n * return <Snackbar renderToast={CustomToast} />\n * }\n * ```\n *\n * @see {@link DefaultToastRenderer}\n * @defaultValue `DefaultToastRenderer`\n */\n renderToast?: ComponentType<ToastRendererProps>;\n\n /**\n * Optional props that should be passed to each `Toast` from the `Snackbar`.\n * This is a great way to enforce each toast having a close button, a custom\n * class name, theme, etc.\n *\n * @see {@link DefaultToastRenderer}\n */\n toastDefaults?: ConfigurableToastProps;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Super SImple Example\n * ```tsx\n * import { Button, Snackbar, addToast } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <>\n * <Button\n * onClick={() => {\n * addToast({ children: \"A new toast!\" });\n * }}\n * >\n * Toast!\n * </Button>\n * <Snackbar />\n * </>\n * );\n * }\n * ```\n *\n * @see {@link SnackbarProps.renderToast} for creating a custom toast\n * implementation.\n * @remarks \\@since 6.0.0 Rewritten to use a new API that supports adding toasts\n * outside of React components and rendering multiple toasts at once.\n */\nexport const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(\n function Snackbar(props, ref) {\n const {\n id: propId,\n role = \"status\",\n className,\n limit = 1,\n position = \"bottom\",\n renderToast: RenderToast = DefaultToastRenderer,\n disablePortal,\n toastDefaults,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"snackbar\");\n const queue = useToastQueue(limit);\n\n return (\n <Portal disabled={disablePortal}>\n <div\n {...remaining}\n id={id}\n ref={ref}\n role={role}\n className={snackbar({ position, className })}\n >\n {queue.map((toast) => (\n <RenderToast\n {...toast}\n key={toast.toastId}\n toastDefaults={toastDefaults}\n />\n ))}\n </div>\n </Portal>\n );\n }\n);\n"],"names":["forwardRef","Portal","useEnsuredId","DefaultToastRenderer","useToastQueue","snackbar","Snackbar","props","ref","id","propId","role","className","limit","position","renderToast","RenderToast","disablePortal","toastDefaults","remaining","queue","disabled","div","map","toast","key","toastId"],"mappings":"AAAA;;;AACA,SACEA,UAAU,QAIL,QAAQ;AACf,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,oBAAoB,QAEf,4BAA4B;AAEnC,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAA+B,sBAAsB;AA2GtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,yBAAWN,WACtB,SAASM,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAO,QAAQ,EACfC,SAAS,EACTC,QAAQ,CAAC,EACTC,WAAW,QAAQ,EACnBC,aAAaC,cAAcb,oBAAoB,EAC/Cc,aAAa,EACbC,aAAa,EACb,GAAGC,WACJ,GAAGZ;IACJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMU,QAAQhB,cAAcS;IAE5B,qBACE,KAACZ;QAAOoB,UAAUJ;kBAChB,cAAA,KAACK;YACE,GAAGH,SAAS;YACbV,IAAIA;YACJD,KAAKA;YACLG,MAAMA;YACNC,WAAWP,SAAS;gBAAES;gBAAUF;YAAU;sBAEzCQ,MAAMG,GAAG,CAAC,CAACC,sBACV,eAACR;oBACE,GAAGQ,KAAK;oBACTC,KAAKD,MAAME,OAAO;oBAClBR,eAAeA;;;;AAM3B,GACA"}
1
+ {"version":3,"sources":["../../src/snackbar/Snackbar.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ComponentType, type HTMLAttributes } from \"react\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n DefaultToastRenderer,\n type ToastRendererProps,\n} from \"./DefaultToastRenderer.js\";\nimport { type ConfigurableToastProps } from \"./Toast.js\";\nimport { useToastQueue } from \"./ToastManagerProvider.js\";\nimport { snackbar, type SnackbarPosition } from \"./snackbarStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0 The `id` prop is optional\n */\nexport interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * @defaultValue `\"snackbar-\" + useId()`\n */\n id?: string;\n\n /**\n * Set this to the number of toasts that can be visible within the snackbar at\n * the same time. Any toasts added after this value will be added into the\n * queue to be shown.\n *\n * @defaultValue `1`\n */\n limit?: number;\n\n /**\n * @defaultValue `\"bottom\"`\n */\n position?: SnackbarPosition;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * This can be used to create a custom toast implementation.\n *\n * @example\n * ```ts\n * import type { ToastRendererProps } from \"@react-md/core\";\n * import {\n * Snackbar,\n * Toast,\n * ToastContent,\n * useToastManager,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function CustomToast(props: CustomToastRendererProps): ReactElement {\n * // Pretend like we don't need anything else from the toast since the\n * // custom behavior is related to the `toastId`\n * const { toastId, visible, duplicates, visibleTime } = props;\n *\n * const toastManager = useToastManager();\n *\n * // Note: If you want to rely on the `action` and `closeButton` behavior,\n * // you must also wrap the `Toast` with:\n * // <RemoveToastProvider value={() => toastManager.removeToast(toastId, true)}>\n *\n * return (\n * <Toast\n * theme={isError(toastId) ? \"error\" : \"surface\"}\n * visible={visible}\n * onEntered={() => {\n * toastManager.startRemoveTimeout(toastId);\n * }}\n * onExited={() => {\n * toastManager.removeToast(toastId, false)\n * }}\n * disableContentWrapper\n * >\n * <ToastContent>\n * <TranslateMessage id={toastId} />\n * </ToastContent>\n * {isActionable(toastId) && (\n * <Button\n * onClick={async () => {\n * await someApiCall();\n * toastManager.removeToast(toastId, true);\n * }}\n * >\n * Dismiss\n * </Button>\n * )}\n * </Toast>\n * );\n * }\n *\n * function Example(): ReactElement {\n * return <Snackbar renderToast={CustomToast} />\n * }\n * ```\n *\n * @see {@link DefaultToastRenderer}\n * @defaultValue `DefaultToastRenderer`\n */\n renderToast?: ComponentType<ToastRendererProps>;\n\n /**\n * Optional props that should be passed to each `Toast` from the `Snackbar`.\n * This is a great way to enforce each toast having a close button, a custom\n * class name, theme, etc.\n *\n * @see {@link DefaultToastRenderer}\n */\n toastDefaults?: ConfigurableToastProps;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Super SImple Example\n * ```tsx\n * import { Button, Snackbar, addToast } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <>\n * <Button\n * onClick={() => {\n * addToast({ children: \"A new toast!\" });\n * }}\n * >\n * Toast!\n * </Button>\n * <Snackbar />\n * </>\n * );\n * }\n * ```\n *\n * @see {@link SnackbarProps.renderToast} for creating a custom toast\n * implementation.\n * @remarks \\@since 6.0.0 Rewritten to use a new API that supports adding toasts\n * outside of React components and rendering multiple toasts at once.\n */\nexport const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(\n function Snackbar(props, ref) {\n const {\n id: propId,\n className,\n limit = 1,\n position = \"bottom\",\n renderToast: RenderToast = DefaultToastRenderer,\n disablePortal,\n toastDefaults,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"snackbar\");\n const queue = useToastQueue(limit);\n\n return (\n <Portal disabled={disablePortal}>\n {queue.length > 0 && (\n <div\n {...remaining}\n id={id}\n ref={ref}\n className={snackbar({ position, className })}\n >\n {queue.map((toast) => (\n <RenderToast\n {...toast}\n key={toast.toastId}\n toastDefaults={toastDefaults}\n />\n ))}\n </div>\n )}\n </Portal>\n );\n }\n);\n"],"names":["forwardRef","Portal","useEnsuredId","DefaultToastRenderer","useToastQueue","snackbar","Snackbar","props","ref","id","propId","className","limit","position","renderToast","RenderToast","disablePortal","toastDefaults","remaining","queue","disabled","length","div","map","toast","key","toastId"],"mappings":"AAAA;;;AACA,SAASA,UAAU,QAAiD,QAAQ;AAC5E,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,oBAAoB,QAEf,4BAA4B;AAEnC,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAA+B,sBAAsB;AAwGtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,yBAAWN,WACtB,SAASM,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,CAAC,EACTC,WAAW,QAAQ,EACnBC,aAAaC,cAAcZ,oBAAoB,EAC/Ca,aAAa,EACbC,aAAa,EACb,GAAGC,WACJ,GAAGX;IACJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMS,QAAQf,cAAcQ;IAE5B,qBACE,KAACX;QAAOmB,UAAUJ;kBACfG,MAAME,MAAM,GAAG,mBACd,KAACC;YACE,GAAGJ,SAAS;YACbT,IAAIA;YACJD,KAAKA;YACLG,WAAWN,SAAS;gBAAEQ;gBAAUF;YAAU;sBAEzCQ,MAAMI,GAAG,CAAC,CAACC,sBACV,eAACT;oBACE,GAAGS,KAAK;oBACTC,KAAKD,MAAME,OAAO;oBAClBT,eAAeA;;;;AAO7B,GACA"}
@@ -17,7 +17,7 @@ export interface ConfigurableToastProps extends HTMLAttributes<HTMLDivElement>,
17
17
  /**
18
18
  * Note: This is set while creating the toast.
19
19
  *
20
- * @defaultValue `visibleTime === null ? "alert" : undefined`
20
+ * @defaultValue `visibleTime === null ? "alert" : "status"`
21
21
  */
22
22
  role?: AriaRole;
23
23
  /**
@@ -15,7 +15,7 @@ import { toast } from "./toastStyles.js";
15
15
  *
16
16
  * @remarks \@since 6.0.0
17
17
  */ export const Toast = /*#__PURE__*/ forwardRef(function Toast(props, ref) {
18
- const { id: propId, className, timeout, classNames, theme = "surface", action: propAction, actionButton: propActionButton, paused, visible, closeIcon, closeButtonProps, closeButton = !!closeButtonProps, contentProps, disableToastContent, stacked, multiline, onEnter, onEntering, onEntered, onExit, onExiting, onExited, children, ...remaining } = props;
18
+ const { id: propId, className, timeout, classNames, theme = "surface", action: propAction, actionButton: propActionButton, paused, visible, closeIcon: propCloseIcon, closeButtonProps, closeButton = !!closeButtonProps, contentProps, disableToastContent, stacked, multiline, onEnter, onEntering, onEntered, onExit, onExiting, onExited, children, ...remaining } = props;
19
19
  const id = useEnsuredId(propId, "toast");
20
20
  let actionButton = propActionButton;
21
21
  if (propAction) {
@@ -35,6 +35,10 @@ import { toast } from "./toastStyles.js";
35
35
  children: buttonChildren
36
36
  });
37
37
  }
38
+ let closeIcon = propCloseIcon;
39
+ if (typeof closeButtonProps?.children !== "undefined") {
40
+ closeIcon = closeButtonProps.children;
41
+ }
38
42
  const action = !!actionButton;
39
43
  const reordered = stacked && action && closeButton;
40
44
  const { elementProps, rendered } = useScaleTransition({
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/snackbar/Toast.tsx"],"sourcesContent":["\"use client\";\nimport {\n forwardRef,\n isValidElement,\n type AriaRole,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionCallbacks,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useScaleTransition } from \"../transition/useScaleTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { ToastActionButton } from \"./ToastActionButton.js\";\nimport { ToastCloseButton } from \"./ToastCloseButton.js\";\nimport { ToastContent, type ToastContentProps } from \"./ToastContent.js\";\nimport { toast } from \"./toastStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ConfigurableToastProps\n extends HTMLAttributes<HTMLDivElement>,\n TransitionCallbacks {\n /**\n * Note: this default value will only be generated in the `Toast` component.\n *\n * @defaultValue `\"toast-\" + useId()`\n */\n id?: string;\n\n /**\n * Note: This is set while creating the toast.\n *\n * @defaultValue `visibleTime === null ? \"alert\" : undefined`\n */\n role?: AriaRole;\n\n /**\n * @defaultValue `\"surface\"`\n */\n theme?: BackgroundColor;\n\n /**\n * Set this to `true` to stack the content above the {@link action}. It is not\n * recommended to enable this prop if the {@link closeButton} is enabled.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * If this is not provided, a `ResizeObserver` will be used to determine if\n * there are multiple lines of content.\n */\n multiline?: boolean;\n\n /**\n * When this is a string or React element, it will be rendered as the\n * `children` within a `Button`\n */\n action?: ButtonProps | ReactElement | string;\n\n /**\n * This can be used to replace the custom action button behavior.\n */\n actionButton?: ReactNode;\n\n /**\n * @defaultValue `getIcon(\"close\")`\n */\n closeIcon?: ReactNode;\n\n /**\n * Set this to `true` if a close button should be rendered to the right of the\n * `children`.\n *\n * @defaultValue `!!closeButtonProps`\n */\n closeButton?: boolean;\n\n /**\n * Use this prop to override most of the close button behavior. The\n */\n closeButtonProps?: ButtonProps;\n\n /**\n * Any additional props that should be provided to the `<div>` that surrounds\n * the toast `children`.\n */\n contentProps?: PropsWithRef<ToastContentProps, HTMLDivElement>;\n\n /**\n * Set this to `true` if the `children` for the toast should no longer be\n * wrapped in an additional `<div>` that applies some toast layout styles.\n * This should normally only be used for custom `Toast` implementations.\n *\n * @see the `Snackbar`'s `renderToast` prop for an example.\n */\n disableToastContent?: boolean;\n\n /**\n * The toast's transition timeout for entering and exiting. This is **not**\n * how long the toast should remain visible.\n *\n * @defaultValue `SCALE_TIMEOUT`\n */\n timeout?: TransitionTimeout;\n\n /**\n * The toast's transition class names for entering and exiting.\n *\n * @defaultValue `SCALE_CLASSNAMES`\n */\n classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ToastProps extends ConfigurableToastProps {\n paused?: boolean;\n visible: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This component is just used for toast styling and does not implement any of\n * the visibility behavior.\n *\n * @remarks \\@since 6.0.0\n */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n function Toast(props, ref) {\n const {\n id: propId,\n className,\n timeout,\n classNames,\n theme = \"surface\",\n action: propAction,\n actionButton: propActionButton,\n paused,\n visible,\n closeIcon,\n closeButtonProps,\n closeButton = !!closeButtonProps,\n contentProps,\n disableToastContent,\n stacked,\n multiline,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n children,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"toast\");\n\n let actionButton = propActionButton;\n if (propAction) {\n let overrides: ButtonProps = {};\n let buttonChildren: ReactNode;\n // have to use `any` to correctly filter out all react elements\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (isValidElement<any>(propAction) || typeof propAction !== \"object\") {\n buttonChildren = propAction;\n } else {\n ({ children: buttonChildren, ...overrides } = propAction);\n }\n\n actionButton = (\n <ToastActionButton\n theme={theme === \"surface\" ? \"secondary\" : \"clear\"}\n reordered={stacked && closeButton}\n {...overrides}\n >\n {buttonChildren}\n </ToastActionButton>\n );\n }\n\n const action = !!actionButton;\n const reordered = stacked && action && closeButton;\n const { elementProps, rendered } = useScaleTransition({\n appear: true,\n nodeRef: ref,\n className: toast({\n className,\n theme,\n action,\n paused,\n stacked,\n reordered,\n closeButton,\n }),\n timeout,\n classNames,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary: true,\n transitionIn: visible,\n exitedHidden: true,\n });\n\n // this might get rid of the weird popping-back-in for a split second\n // that sometimes happens on mobile firefox\n if (!rendered) {\n return null;\n }\n\n return (\n <div {...remaining} {...elementProps} id={id}>\n <ToastContent\n action={action}\n stacked={stacked}\n multiline={multiline}\n closeButton={closeButton}\n disableWrapper={disableToastContent}\n {...contentProps}\n >\n {children}\n </ToastContent>\n {actionButton}\n {closeButton && (\n <ToastCloseButton reordered={reordered} {...closeButtonProps}>\n {closeIcon}\n </ToastCloseButton>\n )}\n </div>\n );\n }\n);\n"],"names":["forwardRef","isValidElement","useScaleTransition","useEnsuredId","ToastActionButton","ToastCloseButton","ToastContent","toast","Toast","props","ref","id","propId","className","timeout","classNames","theme","action","propAction","actionButton","propActionButton","paused","visible","closeIcon","closeButtonProps","closeButton","contentProps","disableToastContent","stacked","multiline","onEnter","onEntering","onEntered","onExit","onExiting","onExited","children","remaining","overrides","buttonChildren","reordered","elementProps","rendered","appear","nodeRef","temporary","transitionIn","exitedHidden","div","disableWrapper"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,cAAc,QAKT,QAAQ;AAQf,SAASC,kBAAkB,QAAQ,sCAAsC;AAEzE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAASC,KAAK,QAAQ,mBAAmB;AA6GzC;;;;;;;CAOC,GACD,OAAO,MAAMC,sBAAQR,WACnB,SAASQ,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,QAAQ,SAAS,EACjBC,QAAQC,UAAU,EAClBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,gBAAgB,EAChBC,cAAc,CAAC,CAACD,gBAAgB,EAChCE,YAAY,EACZC,mBAAmB,EACnBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAG5B;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAIO,eAAeC;IACnB,IAAIF,YAAY;QACd,IAAIoB,YAAyB,CAAC;QAC9B,IAAIC;QACJ,+DAA+D;QAC/D,8DAA8D;QAC9D,kBAAItC,eAAoBiB,eAAe,OAAOA,eAAe,UAAU;YACrEqB,iBAAiBrB;QACnB,OAAO;YACJ,CAAA,EAAEkB,UAAUG,cAAc,EAAE,GAAGD,WAAW,GAAGpB,UAAS;QACzD;QAEAC,6BACE,KAACf;YACCY,OAAOA,UAAU,YAAY,cAAc;YAC3CwB,WAAWZ,WAAWH;YACrB,GAAGa,SAAS;sBAEZC;;IAGP;IAEA,MAAMtB,SAAS,CAAC,CAACE;IACjB,MAAMqB,YAAYZ,WAAWX,UAAUQ;IACvC,MAAM,EAAEgB,YAAY,EAAEC,QAAQ,EAAE,GAAGxC,mBAAmB;QACpDyC,QAAQ;QACRC,SAASlC;QACTG,WAAWN,MAAM;YACfM;YACAG;YACAC;YACAI;YACAO;YACAY;YACAf;QACF;QACAX;QACAC;QACAe;QACAC;QACAC;QACAC;QACAC;QACAC;QACAU,WAAW;QACXC,cAAcxB;QACdyB,cAAc;IAChB;IAEA,qEAAqE;IACrE,2CAA2C;IAC3C,IAAI,CAACL,UAAU;QACb,OAAO;IACT;IAEA,qBACE,MAACM;QAAK,GAAGX,SAAS;QAAG,GAAGI,YAAY;QAAE9B,IAAIA;;0BACxC,KAACL;gBACCW,QAAQA;gBACRW,SAASA;gBACTC,WAAWA;gBACXJ,aAAaA;gBACbwB,gBAAgBtB;gBACf,GAAGD,YAAY;0BAEfU;;YAEFjB;YACAM,6BACC,KAACpB;gBAAiBmC,WAAWA;gBAAY,GAAGhB,gBAAgB;0BACzDD;;;;AAKX,GACA"}
1
+ {"version":3,"sources":["../../src/snackbar/Toast.tsx"],"sourcesContent":["\"use client\";\nimport {\n forwardRef,\n isValidElement,\n type AriaRole,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionCallbacks,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useScaleTransition } from \"../transition/useScaleTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { ToastActionButton } from \"./ToastActionButton.js\";\nimport { ToastCloseButton } from \"./ToastCloseButton.js\";\nimport { ToastContent, type ToastContentProps } from \"./ToastContent.js\";\nimport { toast } from \"./toastStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ConfigurableToastProps\n extends HTMLAttributes<HTMLDivElement>,\n TransitionCallbacks {\n /**\n * Note: this default value will only be generated in the `Toast` component.\n *\n * @defaultValue `\"toast-\" + useId()`\n */\n id?: string;\n\n /**\n * Note: This is set while creating the toast.\n *\n * @defaultValue `visibleTime === null ? \"alert\" : \"status\"`\n */\n role?: AriaRole;\n\n /**\n * @defaultValue `\"surface\"`\n */\n theme?: BackgroundColor;\n\n /**\n * Set this to `true` to stack the content above the {@link action}. It is not\n * recommended to enable this prop if the {@link closeButton} is enabled.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * If this is not provided, a `ResizeObserver` will be used to determine if\n * there are multiple lines of content.\n */\n multiline?: boolean;\n\n /**\n * When this is a string or React element, it will be rendered as the\n * `children` within a `Button`\n */\n action?: ButtonProps | ReactElement | string;\n\n /**\n * This can be used to replace the custom action button behavior.\n */\n actionButton?: ReactNode;\n\n /**\n * @defaultValue `getIcon(\"close\")`\n */\n closeIcon?: ReactNode;\n\n /**\n * Set this to `true` if a close button should be rendered to the right of the\n * `children`.\n *\n * @defaultValue `!!closeButtonProps`\n */\n closeButton?: boolean;\n\n /**\n * Use this prop to override most of the close button behavior. The\n */\n closeButtonProps?: ButtonProps;\n\n /**\n * Any additional props that should be provided to the `<div>` that surrounds\n * the toast `children`.\n */\n contentProps?: PropsWithRef<ToastContentProps, HTMLDivElement>;\n\n /**\n * Set this to `true` if the `children` for the toast should no longer be\n * wrapped in an additional `<div>` that applies some toast layout styles.\n * This should normally only be used for custom `Toast` implementations.\n *\n * @see the `Snackbar`'s `renderToast` prop for an example.\n */\n disableToastContent?: boolean;\n\n /**\n * The toast's transition timeout for entering and exiting. This is **not**\n * how long the toast should remain visible.\n *\n * @defaultValue `SCALE_TIMEOUT`\n */\n timeout?: TransitionTimeout;\n\n /**\n * The toast's transition class names for entering and exiting.\n *\n * @defaultValue `SCALE_CLASSNAMES`\n */\n classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ToastProps extends ConfigurableToastProps {\n paused?: boolean;\n visible: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This component is just used for toast styling and does not implement any of\n * the visibility behavior.\n *\n * @remarks \\@since 6.0.0\n */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n function Toast(props, ref) {\n const {\n id: propId,\n className,\n timeout,\n classNames,\n theme = \"surface\",\n action: propAction,\n actionButton: propActionButton,\n paused,\n visible,\n closeIcon: propCloseIcon,\n closeButtonProps,\n closeButton = !!closeButtonProps,\n contentProps,\n disableToastContent,\n stacked,\n multiline,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n children,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"toast\");\n\n let actionButton = propActionButton;\n if (propAction) {\n let overrides: ButtonProps = {};\n let buttonChildren: ReactNode;\n // have to use `any` to correctly filter out all react elements\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (isValidElement<any>(propAction) || typeof propAction !== \"object\") {\n buttonChildren = propAction;\n } else {\n ({ children: buttonChildren, ...overrides } = propAction);\n }\n\n actionButton = (\n <ToastActionButton\n theme={theme === \"surface\" ? \"secondary\" : \"clear\"}\n reordered={stacked && closeButton}\n {...overrides}\n >\n {buttonChildren}\n </ToastActionButton>\n );\n }\n\n let closeIcon = propCloseIcon;\n if (typeof closeButtonProps?.children !== \"undefined\") {\n closeIcon = closeButtonProps.children;\n }\n\n const action = !!actionButton;\n const reordered = stacked && action && closeButton;\n const { elementProps, rendered } = useScaleTransition({\n appear: true,\n nodeRef: ref,\n className: toast({\n className,\n theme,\n action,\n paused,\n stacked,\n reordered,\n closeButton,\n }),\n timeout,\n classNames,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary: true,\n transitionIn: visible,\n exitedHidden: true,\n });\n\n // this might get rid of the weird popping-back-in for a split second\n // that sometimes happens on mobile firefox\n if (!rendered) {\n return null;\n }\n\n return (\n <div {...remaining} {...elementProps} id={id}>\n <ToastContent\n action={action}\n stacked={stacked}\n multiline={multiline}\n closeButton={closeButton}\n disableWrapper={disableToastContent}\n {...contentProps}\n >\n {children}\n </ToastContent>\n {actionButton}\n {closeButton && (\n <ToastCloseButton reordered={reordered} {...closeButtonProps}>\n {closeIcon}\n </ToastCloseButton>\n )}\n </div>\n );\n }\n);\n"],"names":["forwardRef","isValidElement","useScaleTransition","useEnsuredId","ToastActionButton","ToastCloseButton","ToastContent","toast","Toast","props","ref","id","propId","className","timeout","classNames","theme","action","propAction","actionButton","propActionButton","paused","visible","closeIcon","propCloseIcon","closeButtonProps","closeButton","contentProps","disableToastContent","stacked","multiline","onEnter","onEntering","onEntered","onExit","onExiting","onExited","children","remaining","overrides","buttonChildren","reordered","elementProps","rendered","appear","nodeRef","temporary","transitionIn","exitedHidden","div","disableWrapper"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,cAAc,QAKT,QAAQ;AAQf,SAASC,kBAAkB,QAAQ,sCAAsC;AAEzE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAASC,KAAK,QAAQ,mBAAmB;AA6GzC;;;;;;;CAOC,GACD,OAAO,MAAMC,sBAAQR,WACnB,SAASQ,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,QAAQ,SAAS,EACjBC,QAAQC,UAAU,EAClBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,OAAO,EACPC,WAAWC,aAAa,EACxBC,gBAAgB,EAChBC,cAAc,CAAC,CAACD,gBAAgB,EAChCE,YAAY,EACZC,mBAAmB,EACnBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAIO,eAAeC;IACnB,IAAIF,YAAY;QACd,IAAIqB,YAAyB,CAAC;QAC9B,IAAIC;QACJ,+DAA+D;QAC/D,8DAA8D;QAC9D,kBAAIvC,eAAoBiB,eAAe,OAAOA,eAAe,UAAU;YACrEsB,iBAAiBtB;QACnB,OAAO;YACJ,CAAA,EAAEmB,UAAUG,cAAc,EAAE,GAAGD,WAAW,GAAGrB,UAAS;QACzD;QAEAC,6BACE,KAACf;YACCY,OAAOA,UAAU,YAAY,cAAc;YAC3CyB,WAAWZ,WAAWH;YACrB,GAAGa,SAAS;sBAEZC;;IAGP;IAEA,IAAIjB,YAAYC;IAChB,IAAI,OAAOC,kBAAkBY,aAAa,aAAa;QACrDd,YAAYE,iBAAiBY,QAAQ;IACvC;IAEA,MAAMpB,SAAS,CAAC,CAACE;IACjB,MAAMsB,YAAYZ,WAAWZ,UAAUS;IACvC,MAAM,EAAEgB,YAAY,EAAEC,QAAQ,EAAE,GAAGzC,mBAAmB;QACpD0C,QAAQ;QACRC,SAASnC;QACTG,WAAWN,MAAM;YACfM;YACAG;YACAC;YACAI;YACAQ;YACAY;YACAf;QACF;QACAZ;QACAC;QACAgB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAU,WAAW;QACXC,cAAczB;QACd0B,cAAc;IAChB;IAEA,qEAAqE;IACrE,2CAA2C;IAC3C,IAAI,CAACL,UAAU;QACb,OAAO;IACT;IAEA,qBACE,MAACM;QAAK,GAAGX,SAAS;QAAG,GAAGI,YAAY;QAAE/B,IAAIA;;0BACxC,KAACL;gBACCW,QAAQA;gBACRY,SAASA;gBACTC,WAAWA;gBACXJ,aAAaA;gBACbwB,gBAAgBtB;gBACf,GAAGD,YAAY;0BAEfU;;YAEFlB;YACAO,6BACC,KAACrB;gBAAiBoC,WAAWA;gBAAY,GAAGhB,gBAAgB;0BACzDF;;;;AAKX,GACA"}
@@ -12,7 +12,8 @@ export declare const DEFAULT_TOAST_VISIBLE_TIME = 5000;
12
12
  * - `"replace"` - if there is a currently visible toast, it will start the
13
13
  * leave transition and display the newly added toast instead.
14
14
  * - `"immediate"` - the same behavior as `"replace"` except that if there was a
15
- * currently visible toast, it will be shown once the newly added toast again.
15
+ * currently visible toast, the toast will be shown again once the `"immediate"`
16
+ * toast is hidden.
16
17
  *
17
18
  * @remarks \@since 6.0.0 Renamed from `MessagePriority` to `ToastPriority`
18
19
  */
@@ -221,7 +221,7 @@ var _queue = /*#__PURE__*/ new WeakMap(), _timers = /*#__PURE__*/ new WeakMap(),
221
221
  * });
222
222
  * ```
223
223
  */ _define_property(this, "addToast", (toast)=>{
224
- const { toastId = nanoid(), visibleTime = DEFAULT_TOAST_VISIBLE_TIME, role = visibleTime === null ? "alert" : undefined, priority = "normal", duplicates = "restart" } = toast;
224
+ const { toastId = nanoid(), visibleTime = DEFAULT_TOAST_VISIBLE_TIME, role = visibleTime === null ? "alert" : "status", priority = "normal", duplicates = "restart" } = toast;
225
225
  const existingIndex = _class_private_field_get(this, _getToastIndex).call(this, toast.toastId);
226
226
  if (existingIndex !== -1 && duplicates !== "allow") {
227
227
  const existingToast = _class_private_field_get(this, _queue)[existingIndex];