@cloudscape-design/components 3.0.244 → 3.0.246
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/annotation-context/annotation/annotation-trigger.d.ts.map +1 -1
- package/annotation-context/annotation/annotation-trigger.js +1 -3
- package/annotation-context/annotation/annotation-trigger.js.map +1 -1
- package/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +29 -29
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/visual-refresh/styles.css.js +61 -61
- package/app-layout/visual-refresh/styles.scoped.css +151 -151
- package/app-layout/visual-refresh/styles.selectors.js +61 -61
- package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
- package/app-layout/visual-refresh/trigger-button.js +2 -4
- package/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/breadcrumb-group/item/item.d.ts.map +1 -1
- package/breadcrumb-group/item/item.js +2 -5
- package/breadcrumb-group/item/item.js.map +1 -1
- package/breadcrumb-group/item/styles.css.js +9 -9
- package/breadcrumb-group/item/styles.scoped.css +17 -17
- package/breadcrumb-group/item/styles.selectors.js +9 -9
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +2 -3
- package/button/internal.js.map +1 -1
- package/button/styles.css.js +19 -18
- package/button/styles.scoped.css +136 -136
- package/button/styles.selectors.js +19 -18
- package/calendar/grid/index.d.ts.map +1 -1
- package/calendar/grid/index.js +2 -4
- package/calendar/grid/index.js.map +1 -1
- package/calendar/styles.css.js +18 -18
- package/calendar/styles.scoped.css +38 -38
- package/calendar/styles.selectors.js +18 -18
- package/code-editor/styles.css.js +32 -32
- package/code-editor/styles.scoped.css +109 -109
- package/code-editor/styles.selectors.js +32 -32
- package/code-editor/tab-button.d.ts.map +1 -1
- package/code-editor/tab-button.js +2 -4
- package/code-editor/tab-button.js.map +1 -1
- package/date-picker/index.d.ts.map +1 -1
- package/date-picker/index.js +1 -3
- package/date-picker/index.js.map +1 -1
- package/date-picker/styles.css.js +7 -7
- package/date-picker/styles.scoped.css +9 -9
- package/date-picker/styles.selectors.js +7 -7
- package/date-range-picker/calendar/grids/grid.d.ts.map +1 -1
- package/date-range-picker/calendar/grids/grid.js +1 -3
- package/date-range-picker/calendar/grids/grid.js.map +1 -1
- package/date-range-picker/calendar/grids/index.d.ts.map +1 -1
- package/date-range-picker/calendar/grids/index.js +1 -3
- package/date-range-picker/calendar/grids/index.js.map +1 -1
- package/date-range-picker/calendar/grids/styles.css.js +25 -25
- package/date-range-picker/calendar/grids/styles.scoped.css +42 -42
- package/date-range-picker/calendar/grids/styles.selectors.js +25 -25
- package/date-range-picker/dropdown.d.ts.map +1 -1
- package/date-range-picker/dropdown.js +1 -3
- package/date-range-picker/dropdown.js.map +1 -1
- package/date-range-picker/styles.css.js +38 -38
- package/date-range-picker/styles.scoped.css +45 -45
- package/date-range-picker/styles.selectors.js +38 -38
- package/expandable-section/expandable-section-header.d.ts.map +1 -1
- package/expandable-section/expandable-section-header.js +8 -11
- package/expandable-section/expandable-section-header.js.map +1 -1
- package/expandable-section/styles.css.js +23 -23
- package/expandable-section/styles.scoped.css +44 -44
- package/expandable-section/styles.selectors.js +23 -23
- package/flashbar/collapsible-flashbar.d.ts.map +1 -1
- package/flashbar/collapsible-flashbar.js +1 -3
- package/flashbar/collapsible-flashbar.js.map +1 -1
- package/flashbar/flash.d.ts.map +1 -1
- package/flashbar/flash.js +1 -3
- package/flashbar/flash.js.map +1 -1
- package/flashbar/styles.css.js +45 -45
- package/flashbar/styles.scoped.css +144 -144
- package/flashbar/styles.selectors.js +45 -45
- package/internal/components/abstract-switch/index.d.ts.map +1 -1
- package/internal/components/abstract-switch/index.js +8 -4
- package/internal/components/abstract-switch/index.js.map +1 -1
- package/internal/components/abstract-switch/styles.css.js +13 -13
- package/internal/components/abstract-switch/styles.scoped.css +19 -19
- package/internal/components/abstract-switch/styles.selectors.js +13 -13
- package/internal/components/button-trigger/index.d.ts.map +1 -1
- package/internal/components/button-trigger/index.js +1 -3
- package/internal/components/button-trigger/index.js.map +1 -1
- package/internal/components/button-trigger/styles.css.js +9 -9
- package/internal/components/button-trigger/styles.scoped.css +23 -23
- package/internal/components/button-trigger/styles.selectors.js +9 -9
- package/internal/components/chart-legend/index.d.ts.map +1 -1
- package/internal/components/chart-legend/index.js +2 -4
- package/internal/components/chart-legend/index.js.map +1 -1
- package/internal/components/chart-legend/styles.css.js +6 -6
- package/internal/components/chart-legend/styles.scoped.css +15 -15
- package/internal/components/chart-legend/styles.selectors.js +6 -6
- package/internal/components/chart-plot/focus-outline.d.ts.map +1 -1
- package/internal/components/chart-plot/focus-outline.js +25 -3
- package/internal/components/chart-plot/focus-outline.js.map +1 -1
- package/internal/components/filtering-token/index.d.ts +2 -1
- package/internal/components/filtering-token/index.d.ts.map +1 -1
- package/internal/components/filtering-token/index.js +3 -5
- package/internal/components/filtering-token/index.js.map +1 -1
- package/internal/components/filtering-token/styles.css.js +7 -7
- package/internal/components/filtering-token/styles.scoped.css +13 -13
- package/internal/components/filtering-token/styles.selectors.js +7 -7
- package/internal/components/menu-dropdown/index.d.ts.map +1 -1
- package/internal/components/menu-dropdown/index.js +2 -4
- package/internal/components/menu-dropdown/index.js.map +1 -1
- package/internal/components/menu-dropdown/styles.css.js +7 -7
- package/internal/components/menu-dropdown/styles.scoped.css +13 -13
- package/internal/components/menu-dropdown/styles.selectors.js +7 -7
- package/internal/components/options-list/utils/use-keyboard.d.ts +0 -2
- package/internal/components/options-list/utils/use-keyboard.d.ts.map +1 -1
- package/internal/components/options-list/utils/use-keyboard.js +2 -3
- package/internal/components/options-list/utils/use-keyboard.js.map +1 -1
- package/internal/components/token-list/index.d.ts +1 -1
- package/internal/components/token-list/index.d.ts.map +1 -1
- package/internal/components/token-list/index.js +3 -3
- package/internal/components/token-list/index.js.map +1 -1
- package/internal/components/token-list/interfaces.d.ts +0 -1
- package/internal/components/token-list/interfaces.d.ts.map +1 -1
- package/internal/components/token-list/interfaces.js.map +1 -1
- package/internal/components/token-list/styles.css.js +9 -9
- package/internal/components/token-list/styles.scoped.css +20 -20
- package/internal/components/token-list/styles.selectors.js +9 -9
- package/internal/components/token-list/token-focus-controller.js +1 -1
- package/internal/components/token-list/token-focus-controller.js.map +1 -1
- package/internal/components/token-list/token-limit-toggle.d.ts.map +1 -1
- package/internal/components/token-list/token-limit-toggle.js +1 -3
- package/internal/components/token-list/token-limit-toggle.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/hooks/focus-visible/index.d.ts +2 -5
- package/internal/hooks/focus-visible/index.d.ts.map +1 -1
- package/internal/hooks/focus-visible/index.js +42 -22
- package/internal/hooks/focus-visible/index.js.map +1 -1
- package/internal/hooks/use-base-component/index.d.ts.map +1 -1
- package/internal/hooks/use-base-component/index.js +2 -0
- package/internal/hooks/use-base-component/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/link/internal.d.ts.map +1 -1
- package/link/internal.js +1 -3
- package/link/internal.js.map +1 -1
- package/link/styles.css.js +20 -20
- package/link/styles.scoped.css +71 -71
- package/link/styles.selectors.js +20 -20
- package/package.json +1 -1
- package/pagination/internal.d.ts.map +1 -1
- package/pagination/internal.js +1 -3
- package/pagination/internal.js.map +1 -1
- package/pagination/styles.css.js +9 -9
- package/pagination/styles.scoped.css +23 -23
- package/pagination/styles.selectors.js +9 -9
- package/popover/internal.d.ts.map +1 -1
- package/popover/internal.js +1 -3
- package/popover/internal.js.map +1 -1
- package/popover/styles.css.js +50 -50
- package/popover/styles.scoped.css +63 -63
- package/popover/styles.selectors.js +50 -50
- package/property-filter/index.d.ts.map +1 -1
- package/property-filter/index.js +2 -2
- package/property-filter/index.js.map +1 -1
- package/property-filter/token.d.ts.map +1 -1
- package/property-filter/token.js +1 -1
- package/property-filter/token.js.map +1 -1
- package/segmented-control/segment.d.ts.map +1 -1
- package/segmented-control/segment.js +1 -3
- package/segmented-control/segment.js.map +1 -1
- package/segmented-control/styles.css.js +14 -14
- package/segmented-control/styles.scoped.css +33 -33
- package/segmented-control/styles.selectors.js +14 -14
- package/select/utils/use-select.d.ts.map +1 -1
- package/select/utils/use-select.js +0 -3
- package/select/utils/use-select.js.map +1 -1
- package/side-navigation/internal.d.ts.map +1 -1
- package/side-navigation/internal.js +2 -5
- package/side-navigation/internal.js.map +1 -1
- package/side-navigation/styles.css.js +27 -27
- package/side-navigation/styles.scoped.css +37 -37
- package/side-navigation/styles.selectors.js +27 -27
- package/split-panel/index.d.ts.map +1 -1
- package/split-panel/index.js +1 -3
- package/split-panel/index.js.map +1 -1
- package/split-panel/styles.css.js +59 -59
- package/split-panel/styles.scoped.css +81 -81
- package/split-panel/styles.selectors.js +59 -59
- package/table/body-cell/index.d.ts.map +1 -1
- package/table/body-cell/index.js +3 -3
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/styles.css.js +18 -18
- package/table/body-cell/styles.scoped.css +57 -55
- package/table/body-cell/styles.selectors.js +18 -18
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +11 -9
- package/table/header-cell/index.js.map +1 -1
- package/table/header-cell/styles.css.js +19 -19
- package/table/header-cell/styles.scoped.css +32 -32
- package/table/header-cell/styles.selectors.js +19 -19
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +1 -3
- package/table/internal.js.map +1 -1
- package/table/resizer/styles.css.js +6 -6
- package/table/resizer/styles.scoped.css +11 -11
- package/table/resizer/styles.selectors.js +6 -6
- package/table/styles.css.js +33 -33
- package/table/styles.scoped.css +41 -41
- package/table/styles.selectors.js +33 -33
- package/tabs/index.d.ts.map +1 -1
- package/tabs/index.js +8 -3
- package/tabs/index.js.map +1 -1
- package/tabs/styles.css.js +21 -21
- package/tabs/styles.scoped.css +38 -38
- package/tabs/styles.selectors.js +21 -21
- package/tabs/tab-header-bar.d.ts.map +1 -1
- package/tabs/tab-header-bar.js +9 -3
- package/tabs/tab-header-bar.js.map +1 -1
- package/tag-editor/internal.d.ts.map +1 -1
- package/tag-editor/internal.js +2 -4
- package/tag-editor/internal.js.map +1 -1
- package/tag-editor/styles.css.js +3 -3
- package/tag-editor/styles.scoped.css +10 -10
- package/tag-editor/styles.selectors.js +3 -3
- package/token-group/dismiss-button.d.ts.map +1 -1
- package/token-group/dismiss-button.js +1 -3
- package/token-group/dismiss-button.js.map +1 -1
- package/token-group/internal.js +2 -2
- package/token-group/internal.js.map +1 -1
- package/token-group/styles.css.js +5 -5
- package/token-group/styles.scoped.css +12 -12
- package/token-group/styles.selectors.js +5 -5
- package/token-group/token.d.ts +3 -5
- package/token-group/token.d.ts.map +1 -1
- package/token-group/token.js +2 -2
- package/token-group/token.js.map +1 -1
- package/top-navigation/1.0-beta/internal.d.ts.map +1 -1
- package/top-navigation/1.0-beta/internal.js +1 -3
- package/top-navigation/1.0-beta/internal.js.map +1 -1
- package/top-navigation/1.0-beta/styles.css.js +25 -25
- package/top-navigation/1.0-beta/styles.scoped.css +42 -42
- package/top-navigation/1.0-beta/styles.selectors.js +25 -25
- package/top-navigation/interfaces.d.ts +4 -0
- package/top-navigation/interfaces.d.ts.map +1 -1
- package/top-navigation/interfaces.js.map +1 -1
- package/top-navigation/internal.d.ts.map +1 -1
- package/top-navigation/internal.js +1 -3
- package/top-navigation/internal.js.map +1 -1
- package/top-navigation/parts/overflow-menu/menu-item.d.ts.map +1 -1
- package/top-navigation/parts/overflow-menu/menu-item.js +9 -13
- package/top-navigation/parts/overflow-menu/menu-item.js.map +1 -1
- package/top-navigation/parts/utility.d.ts.map +1 -1
- package/top-navigation/parts/utility.js +2 -1
- package/top-navigation/parts/utility.js.map +1 -1
- package/top-navigation/styles.css.js +47 -47
- package/top-navigation/styles.scoped.css +66 -66
- package/top-navigation/styles.selectors.js +47 -47
- package/tutorial-panel/components/tutorial-list/index.d.ts.map +1 -1
- package/tutorial-panel/components/tutorial-list/index.js +1 -3
- package/tutorial-panel/components/tutorial-list/index.js.map +1 -1
- package/tutorial-panel/components/tutorial-list/styles.css.js +18 -18
- package/tutorial-panel/components/tutorial-list/styles.scoped.css +27 -27
- package/tutorial-panel/components/tutorial-list/styles.selectors.js +18 -18
- package/wizard/styles.css.js +32 -32
- package/wizard/styles.scoped.css +63 -63
- package/wizard/styles.selectors.js +32 -32
- package/wizard/wizard-form.d.ts.map +1 -1
- package/wizard/wizard-form.js +1 -3
- package/wizard/wizard-form.js.map +1 -1
|
@@ -94,10 +94,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
94
94
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
95
|
SPDX-License-Identifier: Apache-2.0
|
|
96
96
|
*/
|
|
97
|
-
.awsui_content-
|
|
98
|
-
animation: awsui_awsui-motion-fade-
|
|
97
|
+
.awsui_content-enter_gwq0h_lduum_97:not(#\9) {
|
|
98
|
+
animation: awsui_awsui-motion-fade-in_gwq0h_lduum_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
|
|
99
99
|
}
|
|
100
|
-
@keyframes awsui_awsui-motion-fade-
|
|
100
|
+
@keyframes awsui_awsui-motion-fade-in_gwq0h_lduum_1 {
|
|
101
101
|
from {
|
|
102
102
|
opacity: 0.2;
|
|
103
103
|
}
|
|
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
@media (prefers-reduced-motion: reduce) {
|
|
109
|
-
.awsui_content-
|
|
109
|
+
.awsui_content-enter_gwq0h_lduum_97:not(#\9) {
|
|
110
110
|
animation: none;
|
|
111
111
|
transition: none;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
-
.awsui-motion-disabled .awsui_content-
|
|
114
|
+
.awsui-motion-disabled .awsui_content-enter_gwq0h_lduum_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_lduum_97:not(#\9) {
|
|
115
115
|
animation: none;
|
|
116
116
|
transition: none;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
.awsui_trigger-
|
|
119
|
+
.awsui_trigger-expanded_gwq0h_lduum_119:not(#\9) {
|
|
120
120
|
transition: border-bottom-color var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
|
|
121
121
|
}
|
|
122
122
|
@media (prefers-reduced-motion: reduce) {
|
|
123
|
-
.awsui_trigger-
|
|
123
|
+
.awsui_trigger-expanded_gwq0h_lduum_119:not(#\9) {
|
|
124
124
|
animation: none;
|
|
125
125
|
transition: none;
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
|
-
.awsui-motion-disabled .awsui_trigger-
|
|
128
|
+
.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_lduum_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_lduum_119:not(#\9) {
|
|
129
129
|
animation: none;
|
|
130
130
|
transition: none;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
.
|
|
133
|
+
.awsui_icon_gwq0h_lduum_133:not(#\9) {
|
|
134
134
|
transition: transform var(--motion-duration-rotate-90-ux18sr, 135ms) var(--motion-easing-rotate-90-eoew89, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
135
135
|
}
|
|
136
136
|
@media (prefers-reduced-motion: reduce) {
|
|
137
|
-
.
|
|
137
|
+
.awsui_icon_gwq0h_lduum_133:not(#\9) {
|
|
138
138
|
animation: none;
|
|
139
139
|
transition: none;
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
.awsui-motion-disabled .
|
|
142
|
+
.awsui-motion-disabled .awsui_icon_gwq0h_lduum_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_lduum_133:not(#\9) {
|
|
143
143
|
animation: none;
|
|
144
144
|
transition: none;
|
|
145
145
|
}
|
|
@@ -148,7 +148,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
148
148
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
149
149
|
SPDX-License-Identifier: Apache-2.0
|
|
150
150
|
*/
|
|
151
|
-
.
|
|
151
|
+
.awsui_root_gwq0h_lduum_151:not(#\9) {
|
|
152
152
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
153
153
|
border-collapse: separate;
|
|
154
154
|
border-spacing: 0;
|
|
@@ -191,23 +191,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
191
191
|
display: block;
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
.
|
|
194
|
+
.awsui_icon_gwq0h_lduum_133:not(#\9) {
|
|
195
195
|
transform: rotate(-90deg);
|
|
196
196
|
}
|
|
197
|
-
.
|
|
197
|
+
.awsui_icon_gwq0h_lduum_133.awsui_expanded_gwq0h_lduum_171:not(#\9) {
|
|
198
198
|
transform: rotate(0deg);
|
|
199
199
|
}
|
|
200
200
|
|
|
201
|
-
.awsui_icon-
|
|
201
|
+
.awsui_icon-container_gwq0h_lduum_175:not(#\9) {
|
|
202
202
|
position: relative;
|
|
203
203
|
margin-left: calc((var(--font-body-m-line-height-i7xxvv, 22px) - var(--size-icon-normal-j1z5fn, 16px)) / -2);
|
|
204
204
|
margin-right: calc(var(--space-xxs-ynfts5, 4px) + var(--border-divider-list-width-hacikr, 1px));
|
|
205
205
|
}
|
|
206
|
-
.awsui_icon-container-
|
|
206
|
+
.awsui_icon-container-container_gwq0h_lduum_180:not(#\9) {
|
|
207
207
|
margin-right: var(--space-xs-rsr2qu, 8px);
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
-
.
|
|
210
|
+
.awsui_trigger_gwq0h_lduum_119:not(#\9) {
|
|
211
211
|
cursor: pointer;
|
|
212
212
|
box-sizing: border-box;
|
|
213
213
|
display: flex;
|
|
@@ -216,19 +216,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
216
216
|
line-height: var(--font-body-m-line-height-i7xxvv, 22px);
|
|
217
217
|
text-align: left;
|
|
218
218
|
}
|
|
219
|
-
.awsui_trigger-
|
|
219
|
+
.awsui_trigger-default_gwq0h_lduum_193:not(#\9) {
|
|
220
220
|
padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-xxs-ynfts5, 4px);
|
|
221
221
|
}
|
|
222
|
-
.awsui_trigger-
|
|
222
|
+
.awsui_trigger-footer_gwq0h_lduum_196:not(#\9) {
|
|
223
223
|
padding: var(--space-scaled-xxs-95dhkm, 4px) 0;
|
|
224
224
|
}
|
|
225
|
-
.awsui_trigger-
|
|
225
|
+
.awsui_trigger-default_gwq0h_lduum_193:not(#\9), .awsui_trigger-footer_gwq0h_lduum_196:not(#\9) {
|
|
226
226
|
border: var(--border-divider-section-width-4wm2it, 2px) solid transparent;
|
|
227
227
|
}
|
|
228
|
-
.awsui_trigger-
|
|
228
|
+
.awsui_trigger-navigation_gwq0h_lduum_202:not(#\9) {
|
|
229
229
|
border-left: var(--border-divider-section-width-4wm2it, 2px) solid transparent;
|
|
230
230
|
}
|
|
231
|
-
.awsui_trigger-
|
|
231
|
+
.awsui_trigger-default_gwq0h_lduum_193:not(#\9), .awsui_trigger-navigation_gwq0h_lduum_202:not(#\9), .awsui_trigger-footer_gwq0h_lduum_196:not(#\9) {
|
|
232
232
|
color: var(--color-text-expandable-section-default-k03p1p, #000716);
|
|
233
233
|
font-weight: var(--font-heading-s-weight-k8ys41, 800);
|
|
234
234
|
-webkit-font-smoothing: var(--font-smoothing-webkit-vu3hx4, antialiased);
|
|
@@ -236,36 +236,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
236
236
|
font-size: var(--font-expandable-heading-size-m2wptt, 16px);
|
|
237
237
|
letter-spacing: var(--font-heading-s-letter-spacing-4d69jc, -0.005em);
|
|
238
238
|
}
|
|
239
|
-
.awsui_trigger-
|
|
239
|
+
.awsui_trigger-default_gwq0h_lduum_193:not(#\9):hover, .awsui_trigger-navigation_gwq0h_lduum_202:not(#\9):hover, .awsui_trigger-footer_gwq0h_lduum_196:not(#\9):hover {
|
|
240
240
|
color: var(--color-text-expandable-section-hover-73g3du, #0972d3);
|
|
241
241
|
}
|
|
242
|
-
.awsui_trigger-
|
|
242
|
+
.awsui_trigger-container_gwq0h_lduum_216:not(#\9) {
|
|
243
243
|
padding: var(--space-container-header-vertical-zsjhel, 12px) var(--space-container-horizontal-tlw03i, 20px);
|
|
244
244
|
}
|
|
245
|
-
|
|
245
|
+
body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_lduum_216:not(#\9):focus {
|
|
246
246
|
padding: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--border-divider-section-width-4wm2it, 2px)) calc(var(--space-l-4vl6xu, 20px) - var(--border-divider-section-width-4wm2it, 2px));
|
|
247
247
|
}
|
|
248
|
-
.awsui_trigger-
|
|
248
|
+
.awsui_trigger-default_gwq0h_lduum_193.awsui_trigger-expanded_gwq0h_lduum_119:not(#\9) {
|
|
249
249
|
border-bottom-color: var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
250
250
|
}
|
|
251
251
|
|
|
252
|
-
.
|
|
252
|
+
.awsui_header_gwq0h_lduum_226:not(#\9) {
|
|
253
253
|
display: flex;
|
|
254
254
|
}
|
|
255
|
-
.awsui_header-
|
|
255
|
+
.awsui_header-wrapper_gwq0h_lduum_229:not(#\9) {
|
|
256
256
|
font-weight: inherit;
|
|
257
257
|
font-size: inherit;
|
|
258
258
|
letter-spacing: inherit;
|
|
259
259
|
margin: 0;
|
|
260
260
|
padding: 0;
|
|
261
261
|
}
|
|
262
|
-
.awsui_header-
|
|
262
|
+
.awsui_header-container_gwq0h_lduum_236:not(#\9) {
|
|
263
263
|
width: 100%;
|
|
264
264
|
}
|
|
265
|
-
.awsui_header-
|
|
265
|
+
.awsui_header-container_gwq0h_lduum_236 > .awsui_icon-container_gwq0h_lduum_175:not(#\9) {
|
|
266
266
|
margin-top: var(--space-expandable-section-icon-offset-top-q2xewd, 4px);
|
|
267
267
|
}
|
|
268
|
-
.awsui_header-
|
|
268
|
+
.awsui_header-container_gwq0h_lduum_236[data-awsui-focus-visible=true]:not(#\9):focus-within {
|
|
269
269
|
outline: none;
|
|
270
270
|
text-decoration: none;
|
|
271
271
|
padding: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--border-divider-section-width-4wm2it, 2px)) calc(var(--space-l-4vl6xu, 20px) - var(--border-divider-section-width-4wm2it, 2px));
|
|
@@ -274,15 +274,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
274
274
|
border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
275
275
|
box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-srzyiu, 0px) var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
276
276
|
}
|
|
277
|
-
.awsui_header-container-
|
|
277
|
+
.awsui_header-container-button_gwq0h_lduum_251:not(#\9) {
|
|
278
278
|
box-sizing: border-box;
|
|
279
279
|
display: flex;
|
|
280
280
|
}
|
|
281
|
-
.awsui_header-container-
|
|
281
|
+
.awsui_header-container-button_gwq0h_lduum_251:not(#\9):focus {
|
|
282
282
|
outline: none;
|
|
283
283
|
text-decoration: none;
|
|
284
284
|
}
|
|
285
|
-
.awsui_header-
|
|
285
|
+
.awsui_header-navigation_gwq0h_lduum_259 > .awsui_icon-container_gwq0h_lduum_175:not(#\9) {
|
|
286
286
|
display: inline-flex;
|
|
287
287
|
cursor: pointer;
|
|
288
288
|
color: var(--color-text-expandable-section-navigation-icon-default-lb9rm0, #414d5c);
|
|
@@ -293,17 +293,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
293
293
|
text-decoration: none;
|
|
294
294
|
flex-direction: column;
|
|
295
295
|
}
|
|
296
|
-
.awsui_header-
|
|
296
|
+
.awsui_header-navigation_gwq0h_lduum_259 > .awsui_icon-container_gwq0h_lduum_175:not(#\9):hover {
|
|
297
297
|
color: var(--color-text-expandable-section-hover-73g3du, #0972d3);
|
|
298
298
|
}
|
|
299
|
-
|
|
299
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_lduum_259 > .awsui_icon-container_gwq0h_lduum_175:not(#\9):focus {
|
|
300
300
|
position: relative;
|
|
301
301
|
}
|
|
302
|
-
|
|
302
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_lduum_259 > .awsui_icon-container_gwq0h_lduum_175:not(#\9):focus {
|
|
303
303
|
outline: 2px dotted transparent;
|
|
304
304
|
outline-offset: calc(2px - 1px);
|
|
305
305
|
}
|
|
306
|
-
|
|
306
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_lduum_259 > .awsui_icon-container_gwq0h_lduum_175:not(#\9):focus::before {
|
|
307
307
|
content: " ";
|
|
308
308
|
display: block;
|
|
309
309
|
position: absolute;
|
|
@@ -315,24 +315,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
315
315
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
316
316
|
}
|
|
317
317
|
|
|
318
|
-
.
|
|
318
|
+
.awsui_content_gwq0h_lduum_97:not(#\9) {
|
|
319
319
|
display: none;
|
|
320
320
|
}
|
|
321
|
-
.awsui_content-
|
|
321
|
+
.awsui_content-default_gwq0h_lduum_295:not(#\9) {
|
|
322
322
|
padding: var(--space-scaled-xs-6859qs, 8px) 0;
|
|
323
323
|
}
|
|
324
|
-
.awsui_content-
|
|
324
|
+
.awsui_content-footer_gwq0h_lduum_298:not(#\9) {
|
|
325
325
|
padding: var(--space-xs-rsr2qu, 8px) 0;
|
|
326
326
|
}
|
|
327
|
-
.awsui_content-
|
|
327
|
+
.awsui_content-expanded_gwq0h_lduum_301:not(#\9) {
|
|
328
328
|
display: block;
|
|
329
329
|
}
|
|
330
330
|
|
|
331
|
-
.
|
|
331
|
+
.awsui_focusable_gwq0h_lduum_305:not(#\9):focus {
|
|
332
332
|
outline: none;
|
|
333
333
|
text-decoration: none;
|
|
334
334
|
}
|
|
335
|
-
|
|
335
|
+
body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_lduum_305:not(#\9):focus {
|
|
336
336
|
outline: 2px dotted transparent;
|
|
337
337
|
border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
338
338
|
border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
@@ -2,28 +2,28 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"content-enter": "awsui_content-
|
|
6
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
7
|
-
"trigger-expanded": "awsui_trigger-
|
|
8
|
-
"icon": "
|
|
9
|
-
"root": "
|
|
10
|
-
"expanded": "
|
|
11
|
-
"icon-container": "awsui_icon-
|
|
12
|
-
"icon-container-container": "awsui_icon-container-
|
|
13
|
-
"trigger": "
|
|
14
|
-
"trigger-default": "awsui_trigger-
|
|
15
|
-
"trigger-footer": "awsui_trigger-
|
|
16
|
-
"trigger-navigation": "awsui_trigger-
|
|
17
|
-
"trigger-container": "awsui_trigger-
|
|
18
|
-
"header": "
|
|
19
|
-
"header-wrapper": "awsui_header-
|
|
20
|
-
"header-container": "awsui_header-
|
|
21
|
-
"header-container-button": "awsui_header-container-
|
|
22
|
-
"header-navigation": "awsui_header-
|
|
23
|
-
"content": "
|
|
24
|
-
"content-default": "awsui_content-
|
|
25
|
-
"content-footer": "awsui_content-
|
|
26
|
-
"content-expanded": "awsui_content-
|
|
27
|
-
"focusable": "
|
|
5
|
+
"content-enter": "awsui_content-enter_gwq0h_lduum_97",
|
|
6
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_lduum_1",
|
|
7
|
+
"trigger-expanded": "awsui_trigger-expanded_gwq0h_lduum_119",
|
|
8
|
+
"icon": "awsui_icon_gwq0h_lduum_133",
|
|
9
|
+
"root": "awsui_root_gwq0h_lduum_151",
|
|
10
|
+
"expanded": "awsui_expanded_gwq0h_lduum_171",
|
|
11
|
+
"icon-container": "awsui_icon-container_gwq0h_lduum_175",
|
|
12
|
+
"icon-container-container": "awsui_icon-container-container_gwq0h_lduum_180",
|
|
13
|
+
"trigger": "awsui_trigger_gwq0h_lduum_119",
|
|
14
|
+
"trigger-default": "awsui_trigger-default_gwq0h_lduum_193",
|
|
15
|
+
"trigger-footer": "awsui_trigger-footer_gwq0h_lduum_196",
|
|
16
|
+
"trigger-navigation": "awsui_trigger-navigation_gwq0h_lduum_202",
|
|
17
|
+
"trigger-container": "awsui_trigger-container_gwq0h_lduum_216",
|
|
18
|
+
"header": "awsui_header_gwq0h_lduum_226",
|
|
19
|
+
"header-wrapper": "awsui_header-wrapper_gwq0h_lduum_229",
|
|
20
|
+
"header-container": "awsui_header-container_gwq0h_lduum_236",
|
|
21
|
+
"header-container-button": "awsui_header-container-button_gwq0h_lduum_251",
|
|
22
|
+
"header-navigation": "awsui_header-navigation_gwq0h_lduum_259",
|
|
23
|
+
"content": "awsui_content_gwq0h_lduum_97",
|
|
24
|
+
"content-default": "awsui_content-default_gwq0h_lduum_295",
|
|
25
|
+
"content-footer": "awsui_content-footer_gwq0h_lduum_298",
|
|
26
|
+
"content-expanded": "awsui_content-expanded_gwq0h_lduum_301",
|
|
27
|
+
"focusable": "awsui_focusable_gwq0h_lduum_305"
|
|
28
28
|
};
|
|
29
29
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"lib/default/","sources":["flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"lib/default/","sources":["flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAkB7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAQzB,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,eA2TjF"}
|
|
@@ -8,7 +8,6 @@ import { Flash, focusFlashById } from './flash';
|
|
|
8
8
|
import InternalIcon from '../icon/internal';
|
|
9
9
|
import { TransitionGroup } from 'react-transition-group';
|
|
10
10
|
import { Transition } from '../internal/components/transition';
|
|
11
|
-
import useFocusVisible from '../internal/hooks/focus-visible';
|
|
12
11
|
import { getVisualContextClassname } from '../internal/components/visual-context';
|
|
13
12
|
import styles from './styles.css.js';
|
|
14
13
|
import { counterTypes, getFlashTypeCount, getVisibleCollapsedItems } from './utils';
|
|
@@ -49,7 +48,6 @@ export default function CollapsibleFlashbar(_a) {
|
|
|
49
48
|
}, onItemsRemoved: removedItems => {
|
|
50
49
|
setExitingItems([...exitingItems, ...removedItems]);
|
|
51
50
|
} }));
|
|
52
|
-
const isFocusVisible = useFocusVisible();
|
|
53
51
|
const collapsedItemRefs = useRef({});
|
|
54
52
|
const expandedItemRefs = useRef({});
|
|
55
53
|
const [initialAnimationState, setInitialAnimationState] = useState(null);
|
|
@@ -195,7 +193,7 @@ export default function CollapsibleFlashbar(_a) {
|
|
|
195
193
|
React.createElement("span", { "aria-live": "polite", className: styles.status, role: "status", id: itemCountElementId },
|
|
196
194
|
notificationBarText && React.createElement("h2", { className: styles.header }, notificationBarText),
|
|
197
195
|
React.createElement("span", { className: styles['item-count'] }, counterTypes.map(({ type, labelName, iconName }) => (React.createElement(NotificationTypeCount, { key: type, iconName: iconName, label: iconAriaLabels[labelName], count: countByType[type] }))))),
|
|
198
|
-
React.createElement("button",
|
|
196
|
+
React.createElement("button", { "aria-controls": flashbarElementId, "aria-describedby": itemCountElementId, "aria-expanded": isFlashbarStackExpanded, "aria-label": notificationBarAriaLabel, className: clsx(styles.button, isFlashbarStackExpanded && styles.expanded) },
|
|
199
197
|
React.createElement(InternalIcon, { className: styles.icon, size: "normal", name: "angle-down" })))),
|
|
200
198
|
!isFlashbarStackExpanded && renderList())));
|
|
201
199
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible-flashbar.js","sourceRoot":"lib/default/","sources":["flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\nimport { counterTypes, getFlashTypeCount, getVisibleCollapsedItems, StackableItem } from './utils';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { IconProps } from '../icon/interfaces';\nimport { sendToggleMetric } from './internal/analytics';\nimport { useFlashbar } from './common';\nimport { throttle } from '../internal/utils/throttle';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../internal/utils/dom';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nexport { FlashbarProps };\n\n// If the number of items is equal or less than this value,\n// the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.\nconst maxNonCollapsibleItems = 1;\n\nconst resizeListenerThrottleDelay = 100;\n\nexport default function CollapsibleFlashbar({ items, ...restProps }: FlashbarProps) {\n const [enteringItems, setEnteringItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [exitingItems, setExitingItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n const getElementsToAnimate = useCallback(() => {\n const flashElements = isFlashbarStackExpanded ? expandedItemRefs.current : collapsedItemRefs.current;\n return { ...flashElements, notificationBar: notificationBarRef.current };\n }, [isFlashbarStackExpanded]);\n\n const prepareAnimations = useCallback(() => {\n const rects = getDOMRects(getElementsToAnimate());\n setInitialAnimationState(rects);\n }, [getElementsToAnimate]);\n\n const { baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({\n items,\n ...restProps,\n onItemsAdded: newItems => {\n setEnteringItems([...enteringItems, ...newItems]);\n },\n onItemsChanged: options => {\n // If not all items have ID, we can still animate collapse/expand transitions\n // because we can rely on each item's index in the original array,\n // but we can't do that when elements are added or removed, since the index changes.\n if (options?.allItemsHaveId && !options?.isReducedMotion) {\n prepareAnimations();\n }\n },\n onItemsRemoved: removedItems => {\n setExitingItems([...exitingItems, ...removedItems]);\n },\n });\n\n const isFocusVisible = useFocusVisible();\n const collapsedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n const expandedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n const [initialAnimationState, setInitialAnimationState] = useState<Record<string | number, DOMRect> | null>(null);\n const listElementRef = useRef<HTMLUListElement | null>(null);\n const notificationBarRef = useRef<HTMLDivElement | null>(null);\n const [transitioning, setTransitioning] = useState(false);\n const flashbarElementId = useUniqueId('flashbar');\n const itemCountElementId = useUniqueId('item-count');\n\n if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n setIsFlashbarStackExpanded(false);\n }\n\n const animateFlash = !isReducedMotion;\n\n function toggleCollapseExpand() {\n sendToggleMetric(items.length, !isFlashbarStackExpanded);\n if (!isReducedMotion) {\n prepareAnimations();\n }\n setIsFlashbarStackExpanded(prev => !prev);\n }\n\n useLayoutEffect(() => {\n if (isFlashbarStackExpanded && items?.length) {\n const mostRecentItem = items[0];\n if (mostRecentItem.id !== undefined) {\n focusFlashById(ref.current, mostRecentItem.id);\n }\n }\n // Run this after expanding, but not every time the items change.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isFlashbarStackExpanded]);\n\n const updateBottomSpacing = useMemo(\n () =>\n throttle(() => {\n // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,\n // otherwise avoid spacing with eventual sticky elements below.\n const listElement = listElementRef?.current;\n const flashbar = listElement?.parentElement;\n if (listElement && flashbar) {\n // Make sure the bottom padding is present when we make the calculations,\n // then we might decide to remove it or not.\n flashbar.classList.remove(styles.floating);\n const windowHeight = window.innerHeight;\n // Take the parent region into account if using the App Layout, because it might have additional margins.\n // Otherwise we use the Flashbar component for this calculation.\n const outerElement = findUpUntil(flashbar, element => element.getAttribute('role') === 'region') || flashbar;\n const applySpacing =\n isFlashbarStackExpanded && Math.ceil(outerElement.getBoundingClientRect().bottom) >= windowHeight;\n if (!applySpacing) {\n flashbar.classList.add(styles.floating);\n }\n }\n }, resizeListenerThrottleDelay),\n [isFlashbarStackExpanded]\n );\n\n useLayoutEffect(() => {\n window.addEventListener('resize', updateBottomSpacing);\n return () => {\n window.removeEventListener('resize', updateBottomSpacing);\n updateBottomSpacing.cancel();\n };\n }, [updateBottomSpacing]);\n\n const { i18nStrings } = restProps;\n\n const i18n = useInternalI18n('flashbar');\n const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel);\n const notificationBarText = i18n('i18nStrings.notificationBarText', i18nStrings?.notificationBarText);\n const notificationBarAriaLabel = i18n('i18nStrings.notificationBarAriaLabel', i18nStrings?.notificationBarAriaLabel);\n const iconAriaLabels = {\n errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel),\n inProgressIconAriaLabel: i18n('i18nStrings.inProgressIconAriaLabel', i18nStrings?.inProgressIconAriaLabel),\n infoIconAriaLabel: i18n('i18nStrings.infoIconAriaLabel', i18nStrings?.infoIconAriaLabel),\n successIconAriaLabel: i18n('i18nStrings.successIconAriaLabel', i18nStrings?.successIconAriaLabel),\n warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel),\n };\n\n useLayoutEffect(() => {\n // When `useLayoutEffect` is called, the DOM is updated but has not been painted yet,\n // so it's a good moment to trigger animations that will make calculations based on old and new DOM state.\n // The old state is kept in `initialAnimationState`\n // and the new state can be retrieved from the current DOM elements.\n\n if (initialAnimationState) {\n updateBottomSpacing();\n\n animate({\n elements: getElementsToAnimate(),\n oldState: initialAnimationState,\n newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n onTransitionsEnd: () => setTransitioning(false),\n });\n\n // When collapsing, scroll up if necessary to avoid losing track of the focused button\n if (!isFlashbarStackExpanded && notificationBarRef.current) {\n scrollElementIntoView(notificationBarRef.current);\n }\n\n setTransitioning(true);\n setInitialAnimationState(null);\n }\n }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);\n\n const isCollapsible = items.length > maxNonCollapsibleItems;\n\n const countByType = getFlashTypeCount(items);\n\n const stackDepth = Math.min(3, items.length);\n\n const itemsToShow = isFlashbarStackExpanded\n ? items.map((item, index) => ({ ...item, expandedIndex: index }))\n : getVisibleCollapsedItems(items, stackDepth).map((item: StackableItem, index: number) => ({\n ...item,\n collapsedIndex: index,\n }));\n\n const getItemId = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n item.id ?? (item as StackableItem).expandedIndex ?? 0;\n\n // This check allows us to use the standard \"enter\" Transition only when the notification was not existing before.\n // If instead it was moved to the top of the stack but was already present in the array\n // (e.g, after dismissing another notification),\n // we need to use different, more custom and more controlled animations.\n const hasEntered = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n enteringItems.some(_item => _item.id && _item.id === item.id);\n const hasLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => !('expandedIndex' in item);\n const hasEnteredOrLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => hasEntered(item) || hasLeft(item);\n\n const showInnerContent = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n isFlashbarStackExpanded || hasLeft(item) || ('expandedIndex' in item && item.expandedIndex === 0);\n\n const shouldUseStandardAnimation = (item: StackableItem, index: number) => index === 0 && hasEnteredOrLeft(item);\n\n const getAnimationElementId = (item: StackableItem) => `flash-${getItemId(item)}`;\n\n const renderList = () => (\n <ul\n ref={listElementRef}\n className={clsx(\n styles['flash-list'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n initialAnimationState && styles['animation-ready'],\n isVisualRefresh && styles['visual-refresh']\n )}\n id={flashbarElementId}\n aria-label={ariaLabel}\n aria-describedby={isCollapsible ? itemCountElementId : undefined}\n style={\n !isFlashbarStackExpanded || transitioning\n ? {\n [customCssProps.flashbarStackDepth]: stackDepth,\n }\n : undefined\n }\n >\n <TransitionGroup component={null}>\n {itemsToShow.map((item: StackableItem, index: number) => (\n <Transition\n key={getItemId(item)}\n in={!hasLeft(item)}\n onStatusChange={status => {\n if (status === 'entered') {\n setEnteringItems([]);\n } else if (status === 'exited') {\n setExitingItems([]);\n }\n }}\n >\n {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n <li\n aria-hidden={!showInnerContent(item)}\n className={\n showInnerContent(item)\n ? clsx(\n styles['flash-list-item'],\n !isFlashbarStackExpanded && styles.item,\n !collapsedItemRefs.current[getAnimationElementId(item)] && styles['expanded-only']\n )\n : clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`], styles.item)\n }\n ref={element => {\n if (isFlashbarStackExpanded) {\n expandedItemRefs.current[getAnimationElementId(item)] = element;\n } else {\n collapsedItemRefs.current[getAnimationElementId(item)] = element;\n }\n }}\n style={\n !isFlashbarStackExpanded || transitioning\n ? {\n [customCssProps.flashbarStackIndex]:\n (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n }\n : undefined\n }\n key={getItemId(item)}\n >\n {showInnerContent(item) && (\n <Flash\n // eslint-disable-next-line react/forbid-component-props\n className={clsx(\n animateFlash && styles['flash-with-motion'],\n isVisualRefresh && styles['flash-refresh']\n )}\n key={getItemId(item)}\n ref={shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined}\n transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n {...item}\n />\n )}\n </li>\n )}\n </Transition>\n ))}\n </TransitionGroup>\n </ul>\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.flashbar,\n styles[`breakpoint-${breakpoint}`],\n styles.stack,\n isCollapsible && styles.collapsible,\n items.length === 2 && styles['short-list'],\n isFlashbarStackExpanded && styles.expanded,\n isVisualRefresh && styles['visual-refresh'],\n getVisualContextClassname('flashbar')\n )}\n ref={mergedRef}\n >\n <>\n {isFlashbarStackExpanded && renderList()}\n {isCollapsible && (\n <div\n className={clsx(\n styles['notification-bar'],\n isVisualRefresh && styles['visual-refresh'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n items.length === 2 && styles['short-list']\n )}\n onClick={toggleCollapseExpand}\n ref={notificationBarRef}\n >\n <span aria-live=\"polite\" className={styles.status} role=\"status\" id={itemCountElementId}>\n {notificationBarText && <h2 className={styles.header}>{notificationBarText}</h2>}\n <span className={styles['item-count']}>\n {counterTypes.map(({ type, labelName, iconName }) => (\n <NotificationTypeCount\n key={type}\n iconName={iconName}\n label={iconAriaLabels[labelName]}\n count={countByType[type]}\n />\n ))}\n </span>\n </span>\n <button\n aria-controls={flashbarElementId}\n aria-describedby={itemCountElementId}\n aria-expanded={isFlashbarStackExpanded}\n aria-label={notificationBarAriaLabel}\n className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n {...isFocusVisible}\n >\n <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n </button>\n </div>\n )}\n {!isFlashbarStackExpanded && renderList()}\n </>\n </div>\n );\n}\n\nconst NotificationTypeCount = ({\n iconName,\n label,\n count,\n}: {\n iconName: IconProps.Name;\n label?: string;\n count: number;\n}) => {\n return (\n <span className={styles['type-count']}>\n <span aria-label={label} role=\"img\">\n <span title={label} aria-hidden=\"true\">\n <InternalIcon name={iconName} />\n </span>\n </span>\n <span className={styles['count-number']}>{count}</span>\n </span>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"collapsible-flashbar.js","sourceRoot":"lib/default/","sources":["flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\nimport { counterTypes, getFlashTypeCount, getVisibleCollapsedItems, StackableItem } from './utils';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { IconProps } from '../icon/interfaces';\nimport { sendToggleMetric } from './internal/analytics';\nimport { useFlashbar } from './common';\nimport { throttle } from '../internal/utils/throttle';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../internal/utils/dom';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nexport { FlashbarProps };\n\n// If the number of items is equal or less than this value,\n// the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.\nconst maxNonCollapsibleItems = 1;\n\nconst resizeListenerThrottleDelay = 100;\n\nexport default function CollapsibleFlashbar({ items, ...restProps }: FlashbarProps) {\n const [enteringItems, setEnteringItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [exitingItems, setExitingItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n const getElementsToAnimate = useCallback(() => {\n const flashElements = isFlashbarStackExpanded ? expandedItemRefs.current : collapsedItemRefs.current;\n return { ...flashElements, notificationBar: notificationBarRef.current };\n }, [isFlashbarStackExpanded]);\n\n const prepareAnimations = useCallback(() => {\n const rects = getDOMRects(getElementsToAnimate());\n setInitialAnimationState(rects);\n }, [getElementsToAnimate]);\n\n const { baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({\n items,\n ...restProps,\n onItemsAdded: newItems => {\n setEnteringItems([...enteringItems, ...newItems]);\n },\n onItemsChanged: options => {\n // If not all items have ID, we can still animate collapse/expand transitions\n // because we can rely on each item's index in the original array,\n // but we can't do that when elements are added or removed, since the index changes.\n if (options?.allItemsHaveId && !options?.isReducedMotion) {\n prepareAnimations();\n }\n },\n onItemsRemoved: removedItems => {\n setExitingItems([...exitingItems, ...removedItems]);\n },\n });\n\n const collapsedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n const expandedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n const [initialAnimationState, setInitialAnimationState] = useState<Record<string | number, DOMRect> | null>(null);\n const listElementRef = useRef<HTMLUListElement | null>(null);\n const notificationBarRef = useRef<HTMLDivElement | null>(null);\n const [transitioning, setTransitioning] = useState(false);\n const flashbarElementId = useUniqueId('flashbar');\n const itemCountElementId = useUniqueId('item-count');\n\n if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n setIsFlashbarStackExpanded(false);\n }\n\n const animateFlash = !isReducedMotion;\n\n function toggleCollapseExpand() {\n sendToggleMetric(items.length, !isFlashbarStackExpanded);\n if (!isReducedMotion) {\n prepareAnimations();\n }\n setIsFlashbarStackExpanded(prev => !prev);\n }\n\n useLayoutEffect(() => {\n if (isFlashbarStackExpanded && items?.length) {\n const mostRecentItem = items[0];\n if (mostRecentItem.id !== undefined) {\n focusFlashById(ref.current, mostRecentItem.id);\n }\n }\n // Run this after expanding, but not every time the items change.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isFlashbarStackExpanded]);\n\n const updateBottomSpacing = useMemo(\n () =>\n throttle(() => {\n // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,\n // otherwise avoid spacing with eventual sticky elements below.\n const listElement = listElementRef?.current;\n const flashbar = listElement?.parentElement;\n if (listElement && flashbar) {\n // Make sure the bottom padding is present when we make the calculations,\n // then we might decide to remove it or not.\n flashbar.classList.remove(styles.floating);\n const windowHeight = window.innerHeight;\n // Take the parent region into account if using the App Layout, because it might have additional margins.\n // Otherwise we use the Flashbar component for this calculation.\n const outerElement = findUpUntil(flashbar, element => element.getAttribute('role') === 'region') || flashbar;\n const applySpacing =\n isFlashbarStackExpanded && Math.ceil(outerElement.getBoundingClientRect().bottom) >= windowHeight;\n if (!applySpacing) {\n flashbar.classList.add(styles.floating);\n }\n }\n }, resizeListenerThrottleDelay),\n [isFlashbarStackExpanded]\n );\n\n useLayoutEffect(() => {\n window.addEventListener('resize', updateBottomSpacing);\n return () => {\n window.removeEventListener('resize', updateBottomSpacing);\n updateBottomSpacing.cancel();\n };\n }, [updateBottomSpacing]);\n\n const { i18nStrings } = restProps;\n\n const i18n = useInternalI18n('flashbar');\n const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel);\n const notificationBarText = i18n('i18nStrings.notificationBarText', i18nStrings?.notificationBarText);\n const notificationBarAriaLabel = i18n('i18nStrings.notificationBarAriaLabel', i18nStrings?.notificationBarAriaLabel);\n const iconAriaLabels = {\n errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel),\n inProgressIconAriaLabel: i18n('i18nStrings.inProgressIconAriaLabel', i18nStrings?.inProgressIconAriaLabel),\n infoIconAriaLabel: i18n('i18nStrings.infoIconAriaLabel', i18nStrings?.infoIconAriaLabel),\n successIconAriaLabel: i18n('i18nStrings.successIconAriaLabel', i18nStrings?.successIconAriaLabel),\n warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel),\n };\n\n useLayoutEffect(() => {\n // When `useLayoutEffect` is called, the DOM is updated but has not been painted yet,\n // so it's a good moment to trigger animations that will make calculations based on old and new DOM state.\n // The old state is kept in `initialAnimationState`\n // and the new state can be retrieved from the current DOM elements.\n\n if (initialAnimationState) {\n updateBottomSpacing();\n\n animate({\n elements: getElementsToAnimate(),\n oldState: initialAnimationState,\n newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n onTransitionsEnd: () => setTransitioning(false),\n });\n\n // When collapsing, scroll up if necessary to avoid losing track of the focused button\n if (!isFlashbarStackExpanded && notificationBarRef.current) {\n scrollElementIntoView(notificationBarRef.current);\n }\n\n setTransitioning(true);\n setInitialAnimationState(null);\n }\n }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);\n\n const isCollapsible = items.length > maxNonCollapsibleItems;\n\n const countByType = getFlashTypeCount(items);\n\n const stackDepth = Math.min(3, items.length);\n\n const itemsToShow = isFlashbarStackExpanded\n ? items.map((item, index) => ({ ...item, expandedIndex: index }))\n : getVisibleCollapsedItems(items, stackDepth).map((item: StackableItem, index: number) => ({\n ...item,\n collapsedIndex: index,\n }));\n\n const getItemId = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n item.id ?? (item as StackableItem).expandedIndex ?? 0;\n\n // This check allows us to use the standard \"enter\" Transition only when the notification was not existing before.\n // If instead it was moved to the top of the stack but was already present in the array\n // (e.g, after dismissing another notification),\n // we need to use different, more custom and more controlled animations.\n const hasEntered = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n enteringItems.some(_item => _item.id && _item.id === item.id);\n const hasLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => !('expandedIndex' in item);\n const hasEnteredOrLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => hasEntered(item) || hasLeft(item);\n\n const showInnerContent = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n isFlashbarStackExpanded || hasLeft(item) || ('expandedIndex' in item && item.expandedIndex === 0);\n\n const shouldUseStandardAnimation = (item: StackableItem, index: number) => index === 0 && hasEnteredOrLeft(item);\n\n const getAnimationElementId = (item: StackableItem) => `flash-${getItemId(item)}`;\n\n const renderList = () => (\n <ul\n ref={listElementRef}\n className={clsx(\n styles['flash-list'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n initialAnimationState && styles['animation-ready'],\n isVisualRefresh && styles['visual-refresh']\n )}\n id={flashbarElementId}\n aria-label={ariaLabel}\n aria-describedby={isCollapsible ? itemCountElementId : undefined}\n style={\n !isFlashbarStackExpanded || transitioning\n ? {\n [customCssProps.flashbarStackDepth]: stackDepth,\n }\n : undefined\n }\n >\n <TransitionGroup component={null}>\n {itemsToShow.map((item: StackableItem, index: number) => (\n <Transition\n key={getItemId(item)}\n in={!hasLeft(item)}\n onStatusChange={status => {\n if (status === 'entered') {\n setEnteringItems([]);\n } else if (status === 'exited') {\n setExitingItems([]);\n }\n }}\n >\n {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n <li\n aria-hidden={!showInnerContent(item)}\n className={\n showInnerContent(item)\n ? clsx(\n styles['flash-list-item'],\n !isFlashbarStackExpanded && styles.item,\n !collapsedItemRefs.current[getAnimationElementId(item)] && styles['expanded-only']\n )\n : clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`], styles.item)\n }\n ref={element => {\n if (isFlashbarStackExpanded) {\n expandedItemRefs.current[getAnimationElementId(item)] = element;\n } else {\n collapsedItemRefs.current[getAnimationElementId(item)] = element;\n }\n }}\n style={\n !isFlashbarStackExpanded || transitioning\n ? {\n [customCssProps.flashbarStackIndex]:\n (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n }\n : undefined\n }\n key={getItemId(item)}\n >\n {showInnerContent(item) && (\n <Flash\n // eslint-disable-next-line react/forbid-component-props\n className={clsx(\n animateFlash && styles['flash-with-motion'],\n isVisualRefresh && styles['flash-refresh']\n )}\n key={getItemId(item)}\n ref={shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined}\n transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n {...item}\n />\n )}\n </li>\n )}\n </Transition>\n ))}\n </TransitionGroup>\n </ul>\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.flashbar,\n styles[`breakpoint-${breakpoint}`],\n styles.stack,\n isCollapsible && styles.collapsible,\n items.length === 2 && styles['short-list'],\n isFlashbarStackExpanded && styles.expanded,\n isVisualRefresh && styles['visual-refresh'],\n getVisualContextClassname('flashbar')\n )}\n ref={mergedRef}\n >\n <>\n {isFlashbarStackExpanded && renderList()}\n {isCollapsible && (\n <div\n className={clsx(\n styles['notification-bar'],\n isVisualRefresh && styles['visual-refresh'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n items.length === 2 && styles['short-list']\n )}\n onClick={toggleCollapseExpand}\n ref={notificationBarRef}\n >\n <span aria-live=\"polite\" className={styles.status} role=\"status\" id={itemCountElementId}>\n {notificationBarText && <h2 className={styles.header}>{notificationBarText}</h2>}\n <span className={styles['item-count']}>\n {counterTypes.map(({ type, labelName, iconName }) => (\n <NotificationTypeCount\n key={type}\n iconName={iconName}\n label={iconAriaLabels[labelName]}\n count={countByType[type]}\n />\n ))}\n </span>\n </span>\n <button\n aria-controls={flashbarElementId}\n aria-describedby={itemCountElementId}\n aria-expanded={isFlashbarStackExpanded}\n aria-label={notificationBarAriaLabel}\n className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n >\n <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n </button>\n </div>\n )}\n {!isFlashbarStackExpanded && renderList()}\n </>\n </div>\n );\n}\n\nconst NotificationTypeCount = ({\n iconName,\n label,\n count,\n}: {\n iconName: IconProps.Name;\n label?: string;\n count: number;\n}) => {\n return (\n <span className={styles['type-count']}>\n <span aria-label={label} role=\"img\">\n <span title={label} aria-hidden=\"true\">\n <InternalIcon name={iconName} />\n </span>\n </span>\n <span className={styles['count-number']}>{count}</span>\n </span>\n );\n};\n"]}
|
package/flashbar/flash.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flash.d.ts","sourceRoot":"lib/default/","sources":["flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"flash.d.ts","sourceRoot":"lib/default/","sources":["flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAoD1B,eAAO,MAAM,cAAc,mEACf,WAAW,GAAG,IAAI,UAAU,MAAM,UAM7C,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,aAAa,CAAC,iBAAiB;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,mFA+FjB,CAAC"}
|
package/flashbar/flash.js
CHANGED
|
@@ -7,7 +7,6 @@ import { InternalButton } from '../button/internal';
|
|
|
7
7
|
import { warnOnce } from '../internal/logging';
|
|
8
8
|
import { isDevelopment } from '../internal/is-development';
|
|
9
9
|
import { throttle } from '../internal/utils/throttle';
|
|
10
|
-
import useFocusVisible from '../internal/hooks/focus-visible';
|
|
11
10
|
import LiveRegion from '../internal/components/live-region';
|
|
12
11
|
import { sendDismissMetric } from './internal/analytics';
|
|
13
12
|
import { FOCUS_THROTTLE_DELAY } from './utils';
|
|
@@ -30,7 +29,6 @@ export const focusFlashById = throttle((element, itemId) => {
|
|
|
30
29
|
(_a = element === null || element === void 0 ? void 0 : element.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.focus();
|
|
31
30
|
}, FOCUS_THROTTLE_DELAY, { trailing: false });
|
|
32
31
|
export const Flash = React.forwardRef(({ id, header, content, dismissible, dismissLabel, statusIconAriaLabel, loading, action, buttonText, onButtonClick, onDismiss, className, transitionState, ariaRole, type = 'info', }, ref) => {
|
|
33
|
-
const focusVisible = useFocusVisible();
|
|
34
32
|
if (isDevelopment) {
|
|
35
33
|
if (buttonText && !onButtonClick) {
|
|
36
34
|
warnOnce('Flashbar', `You provided a \`buttonText\` prop without an \`onButtonClick\` handler. This will render a non-interactive action button.`);
|
|
@@ -60,7 +58,7 @@ export const Flash = React.forwardRef(({ id, header, content, dismissible, dismi
|
|
|
60
58
|
[styles.exited]: transitionState === 'exited',
|
|
61
59
|
}) },
|
|
62
60
|
React.createElement("div", { className: styles['flash-body'] },
|
|
63
|
-
React.createElement("div",
|
|
61
|
+
React.createElement("div", { className: styles['flash-focus-container'], tabIndex: -1 },
|
|
64
62
|
React.createElement("div", { className: clsx(styles['flash-icon'], styles['flash-text']), role: "img", "aria-label": statusIconAriaLabel }, icon),
|
|
65
63
|
React.createElement("div", { className: clsx(styles['flash-message'], styles['flash-text']) },
|
|
66
64
|
React.createElement("div", { className: styles['flash-header'] }, header),
|
package/flashbar/flash.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flash.js","sourceRoot":"lib/default/","sources":["flashbar/flash.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,MAAM,qBAAqB,CAAC;AAClD,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,
|
|
1
|
+
{"version":3,"file":"flash.js","sourceRoot":"lib/default/","sources":["flashbar/flash.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { FlashbarProps } from './interfaces';\nimport React from 'react';\nimport InternalSpinner from '../spinner/internal';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { warnOnce } from '../internal/logging';\nimport { isDevelopment } from '../internal/is-development';\nimport { throttle } from '../internal/utils/throttle';\nimport LiveRegion from '../internal/components/live-region';\nimport { ButtonProps } from '../button/interfaces';\n\nimport { sendDismissMetric } from './internal/analytics';\n\nimport { FOCUS_THROTTLE_DELAY } from './utils';\n\nconst ICON_TYPES = {\n success: 'status-positive',\n warning: 'status-warning',\n info: 'status-info',\n error: 'status-negative',\n} as const;\n\nfunction actionButton(\n buttonText: FlashbarProps.MessageDefinition['buttonText'],\n onButtonClick: FlashbarProps.MessageDefinition['onButtonClick']\n) {\n return (\n <InternalButton onClick={onButtonClick} className={styles['action-button']} formAction=\"none\">\n {buttonText}\n </InternalButton>\n );\n}\n\nfunction dismissButton(\n dismissLabel: FlashbarProps.MessageDefinition['dismissLabel'],\n onDismiss: FlashbarProps.MessageDefinition['onDismiss']\n) {\n return (\n <div className={styles['dismiss-button-wrapper']}>\n <InternalButton\n onClick={onDismiss}\n className={styles['dismiss-button']}\n variant=\"flashbar-icon\"\n iconName=\"close\"\n formAction=\"none\"\n ariaLabel={dismissLabel}\n />\n </div>\n );\n}\n\nexport const focusFlashById = throttle(\n (element: HTMLElement | null, itemId: string) => {\n const selector = `[data-itemid=\"${CSS.escape(itemId)}\"] .${styles['flash-focus-container']}`;\n element?.querySelector<HTMLElement>(selector)?.focus();\n },\n FOCUS_THROTTLE_DELAY,\n { trailing: false }\n);\n\nexport interface FlashProps extends FlashbarProps.MessageDefinition {\n className: string;\n transitionState?: string;\n}\n\nexport const Flash = React.forwardRef(\n (\n {\n id,\n header,\n content,\n dismissible,\n dismissLabel,\n statusIconAriaLabel,\n loading,\n action,\n buttonText,\n onButtonClick,\n onDismiss,\n className,\n transitionState,\n ariaRole,\n type = 'info',\n }: FlashProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n if (isDevelopment) {\n if (buttonText && !onButtonClick) {\n warnOnce(\n 'Flashbar',\n `You provided a \\`buttonText\\` prop without an \\`onButtonClick\\` handler. This will render a non-interactive action button.`\n );\n }\n\n if (dismissible && !onDismiss) {\n warnOnce(\n 'Flashbar',\n `You have set the \\`dismissible\\` prop without an \\`onDismiss\\` handler. This will render a non-interactive dismiss button.`\n );\n }\n }\n\n const button = action || (buttonText && actionButton(buttonText, onButtonClick));\n\n const iconType = ICON_TYPES[type];\n\n const icon = loading ? <InternalSpinner /> : <InternalIcon name={iconType} />;\n\n const effectiveType = loading ? 'info' : type;\n\n const announcement = [statusIconAriaLabel, header, content].filter(Boolean).join(' ');\n\n const handleDismiss: ButtonProps['onClick'] = event => {\n sendDismissMetric(effectiveType);\n onDismiss && onDismiss(event);\n };\n\n return (\n // We're not using \"polite\" or \"assertive\" here, just turning default behavior off.\n // eslint-disable-next-line @cloudscape-design/prefer-live-region\n <div\n ref={ref}\n role={ariaRole}\n aria-live={ariaRole ? 'off' : undefined}\n data-itemid={id}\n className={clsx(\n styles.flash,\n styles[`flash-type-${effectiveType}`],\n className,\n transitionState && {\n [styles.enter]: transitionState === 'enter',\n [styles.entering]: transitionState === 'entering',\n [styles.entered]: transitionState === 'entered',\n [styles.exit]: transitionState === 'exit',\n [styles.exiting]: transitionState === 'exiting',\n [styles.exited]: transitionState === 'exited',\n }\n )}\n >\n <div className={styles['flash-body']}>\n <div className={styles['flash-focus-container']} tabIndex={-1}>\n <div\n className={clsx(styles['flash-icon'], styles['flash-text'])}\n role=\"img\"\n aria-label={statusIconAriaLabel}\n >\n {icon}\n </div>\n <div className={clsx(styles['flash-message'], styles['flash-text'])}>\n <div className={styles['flash-header']}>{header}</div>\n <div className={styles['flash-content']}>{content}</div>\n </div>\n </div>\n {button && <div className={styles['action-button-wrapper']}>{button}</div>}\n </div>\n {dismissible && dismissButton(dismissLabel, handleDismiss)}\n {ariaRole === 'status' && <LiveRegion>{announcement}</LiveRegion>}\n </div>\n );\n }\n);\n"]}
|