@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.
- package/.turbo/turbo-build.log +1 -1
- package/CHANGELOG.md +8 -0
- package/coverage/clover.xml +2 -2
- package/coverage/lcov-report/DefaultToastRenderer.tsx.html +166 -112
- package/coverage/lcov-report/Snackbar.tsx.html +360 -402
- package/coverage/lcov-report/Toast.tsx.html +868 -0
- package/coverage/lcov-report/ToastManager.tsx.html +1783 -0
- package/coverage/lcov-report/ToastManagerProvider.tsx.html +216 -216
- package/coverage/lcov-report/icon/FontIcon.tsx.html +28 -28
- package/coverage/lcov-report/icon/index.html +1 -1
- package/coverage/lcov-report/index.html +1 -1
- package/coverage/lcov-report/snackbar/Snackbar.tsx.html +55 -97
- package/coverage/lcov-report/snackbar/Toast.tsx.html +546 -501
- package/coverage/lcov-report/snackbar/ToastManager.tsx.html +269 -269
- package/coverage/lcov-report/snackbar/ToastManagerProvider.tsx.html +23 -23
- package/coverage/lcov-report/snackbar/index.html +59 -14
- package/coverage/lcov-report/snackbar/snackbarStyles.ts.html +12 -87
- package/coverage/lcov-report/snackbar/toastStyles.ts.html +206 -146
- package/coverage/lcov-report/snackbar/useCurrentToastActions.ts.html +226 -0
- package/coverage/lcov-report/snackbarStyles.ts.html +46 -121
- package/coverage/lcov-report/transition/config.ts.html +5 -5
- package/coverage/lcov-report/transition/index.html +1 -1
- package/coverage/lcov-report/typography/Typography.tsx.html +108 -402
- package/coverage/lcov-report/typography/index.html +10 -10
- package/dist/_core.scss +34 -1
- package/dist/_utils.scss +57 -0
- package/dist/app-bar/_app-bar.scss +15 -23
- package/dist/avatar/_avatar.scss +25 -34
- package/dist/badge/_badge.scss +71 -44
- package/dist/box/_box.scss +18 -29
- package/dist/button/_button.scss +50 -62
- package/dist/card/_card.scss +14 -23
- package/dist/chip/_chip.scss +33 -46
- package/dist/dialog/_dialog.scss +95 -93
- package/dist/divider/Divider.d.ts +0 -1
- package/dist/divider/Divider.js.map +1 -1
- package/dist/divider/_divider.scss +33 -43
- package/dist/form/Label.d.ts +5 -5
- package/dist/form/Label.js.map +1 -1
- package/dist/form/TextArea.js +1 -1
- package/dist/form/TextArea.js.map +1 -1
- package/dist/form/TextFieldContainerStyles.d.ts +7 -7
- package/dist/form/TextFieldContainerStyles.js.map +1 -1
- package/dist/form/_form.scss +200 -203
- package/dist/form/textAreaStyles.d.ts +2 -2
- package/dist/form/textAreaStyles.js.map +1 -1
- package/dist/form/types.d.ts +0 -2
- package/dist/form/types.js.map +1 -1
- package/dist/icon/_icon.scss +31 -47
- package/dist/interaction/_interaction.scss +47 -57
- package/dist/layout/_layout.scss +14 -19
- package/dist/link/_link.scss +15 -23
- package/dist/list/_list.scss +53 -63
- package/dist/menu/_menu.scss +16 -27
- package/dist/overlay/_overlay.scss +14 -19
- package/dist/progress/_progress.scss +25 -30
- package/dist/segmented-button/_segmented-button.scss +32 -43
- package/dist/sheet/_sheet.scss +24 -42
- package/dist/snackbar/DefaultToastRenderer.js +1 -1
- package/dist/snackbar/DefaultToastRenderer.js.map +1 -1
- package/dist/snackbar/Snackbar.d.ts +1 -3
- package/dist/snackbar/Snackbar.js +2 -3
- package/dist/snackbar/Snackbar.js.map +1 -1
- package/dist/snackbar/Toast.d.ts +1 -1
- package/dist/snackbar/Toast.js +5 -1
- package/dist/snackbar/Toast.js.map +1 -1
- package/dist/snackbar/ToastManager.d.ts +2 -1
- package/dist/snackbar/ToastManager.js +1 -1
- package/dist/snackbar/ToastManager.js.map +1 -1
- package/dist/snackbar/_snackbar.scss +15 -23
- package/dist/table/_table.scss +55 -70
- package/dist/tabs/_tabs.scss +25 -30
- package/dist/theme/_theme.scss +31 -89
- package/dist/tooltip/_tooltip.scss +16 -25
- package/dist/transition/_transition.scss +38 -37
- package/dist/tree/_tree.scss +102 -109
- package/dist/typography/_typography.scss +17 -22
- package/dist/window-splitter/_window-splitter.scss +19 -45
- package/package.json +1 -1
- package/src/_core.scss +34 -1
- package/src/_utils.scss +57 -0
- package/src/app-bar/_app-bar.scss +15 -23
- package/src/avatar/_avatar.scss +25 -34
- package/src/badge/_badge.scss +71 -44
- package/src/box/_box.scss +18 -29
- package/src/button/_button.scss +50 -62
- package/src/card/_card.scss +14 -23
- package/src/chip/_chip.scss +33 -46
- package/src/dialog/_dialog.scss +95 -93
- package/src/divider/Divider.tsx +0 -1
- package/src/divider/_divider.scss +33 -43
- package/src/form/Label.tsx +5 -5
- package/src/form/TextArea.tsx +1 -1
- package/src/form/TextFieldContainerStyles.ts +7 -7
- package/src/form/_form.scss +200 -203
- package/src/form/textAreaStyles.ts +2 -2
- package/src/form/types.ts +0 -2
- package/src/icon/_icon.scss +31 -47
- package/src/interaction/_interaction.scss +47 -57
- package/src/layout/_layout.scss +14 -19
- package/src/link/_link.scss +15 -23
- package/src/list/_list.scss +53 -63
- package/src/menu/_menu.scss +16 -27
- package/src/overlay/_overlay.scss +14 -19
- package/src/progress/_progress.scss +25 -30
- package/src/segmented-button/_segmented-button.scss +32 -43
- package/src/sheet/_sheet.scss +24 -42
- package/src/snackbar/DefaultToastRenderer.tsx +1 -1
- package/src/snackbar/Snackbar.tsx +17 -25
- package/src/snackbar/Toast.tsx +7 -2
- package/src/snackbar/ToastManager.tsx +3 -2
- package/src/snackbar/__tests__/Snackbar.tsx +12 -11
- package/src/snackbar/__tests__/ToastManagerProvider.tsx +20 -42
- package/src/snackbar/__tests__/__snapshots__/Snackbar.tsx.snap +127 -27
- package/src/snackbar/__tests__/__snapshots__/ToastManagerProvider.tsx.snap +23 -8
- package/src/snackbar/_snackbar.scss +15 -23
- package/src/table/_table.scss +55 -70
- package/src/tabs/_tabs.scss +25 -30
- package/src/theme/_theme.scss +31 -89
- package/src/tooltip/_tooltip.scss +16 -25
- package/src/transition/_transition.scss +38 -37
- package/src/tree/_tree.scss +102 -109
- package/src/typography/_typography.scss +17 -22
- package/src/window-splitter/_window-splitter.scss +19 -45
- package/.turbo/turbo-lint.log +0 -12
- package/.turbo/turbo-test.log +0 -166
- package/.turbo/turbo-typecheck.log +0 -4
- package/dist/divider/VerticalDivider.d.ts +0 -32
- package/dist/divider/useVerticalDividerHeight.d.ts +0 -37
- package/dist/icon/MaterialIconsProvider.d.ts +0 -12
- package/dist/icon/MaterialIconsProvider.js +0 -17
- package/dist/icon/MaterialIconsProvider.js.map +0 -1
- package/dist/icon/MaterialSymbolsProvider.d.ts +0 -145
- package/dist/icon/MaterialSymbolsProvider.js +0 -60
- package/dist/icon/MaterialSymbolsProvider.js.map +0 -1
- package/dist/link/LinkProvider.d.ts +0 -29
- package/dist/menu/menuConfig.d.ts +0 -60
- package/dist/tooltip/useOverflowTooltip.d.ts +0 -61
package/dist/menu/_menu.scss
CHANGED
|
@@ -20,41 +20,21 @@ $min-width: 7rem !default;
|
|
|
20
20
|
|
|
21
21
|
$spacing: 1rem !default;
|
|
22
22
|
|
|
23
|
-
$
|
|
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
|
-
$
|
|
44
|
-
|
|
45
|
-
|
|
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
|
-
|
|
56
|
-
|
|
57
|
-
|
|
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
|
-
$
|
|
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
|
-
$
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
$
|
|
210
|
-
background-color
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
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
|
-
$
|
|
234
|
-
|
|
235
|
-
|
|
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
|
-
|
|
246
|
-
|
|
247
|
-
|
|
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
|
-
$
|
|
63
|
-
outline-width
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
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
|
-
@
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
@
|
|
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 {
|
package/dist/sheet/_sheet.scss
CHANGED
|
@@ -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
|
-
$
|
|
34
|
-
height
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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
|
-
$
|
|
70
|
-
|
|
71
|
-
|
|
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
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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,
|
|
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
|
|
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,
|
|
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 {
|
|
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"}
|
package/dist/snackbar/Toast.d.ts
CHANGED
|
@@ -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" :
|
|
20
|
+
* @defaultValue `visibleTime === null ? "alert" : "status"`
|
|
21
21
|
*/
|
|
22
22
|
role?: AriaRole;
|
|
23
23
|
/**
|
package/dist/snackbar/Toast.js
CHANGED
|
@@ -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\" :
|
|
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,
|
|
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" :
|
|
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];
|