@cloudscape-design/components-themeable 3.0.1173 → 3.0.1175
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/app-layout/styles.scss +1 -0
- package/lib/internal/scss/attribute-editor/styles.scss +2 -1
- package/lib/internal/scss/error-boundary/styles.scss +11 -0
- package/lib/internal/scss/error-boundary/test-classes/styles.scss +13 -0
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/template/app-layout/visual-refresh/drawers.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/drawers.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/drawers.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/main.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/main.js +3 -1
- package/lib/internal/template/app-layout/visual-refresh/main.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/local-drawer.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/local-drawer.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/local-drawer.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js +2 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
- package/lib/internal/template/attribute-editor/styles.css.js +15 -15
- package/lib/internal/template/attribute-editor/styles.scoped.css +26 -26
- package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
- package/lib/internal/template/container/internal.d.ts +6 -1
- package/lib/internal/template/container/internal.d.ts.map +1 -1
- package/lib/internal/template/container/internal.js +32 -28
- package/lib/internal/template/container/internal.js.map +1 -1
- package/lib/internal/template/drawer/implementation.d.ts.map +1 -1
- package/lib/internal/template/drawer/implementation.js +5 -3
- package/lib/internal/template/drawer/implementation.js.map +1 -1
- package/lib/internal/template/error-boundary/fallback.d.ts +3 -0
- package/lib/internal/template/error-boundary/fallback.d.ts.map +1 -0
- package/lib/internal/template/error-boundary/fallback.js +61 -0
- package/lib/internal/template/error-boundary/fallback.js.map +1 -0
- package/lib/internal/template/error-boundary/index.d.ts +5 -0
- package/lib/internal/template/error-boundary/index.d.ts.map +1 -0
- package/lib/internal/template/error-boundary/index.js +22 -0
- package/lib/internal/template/error-boundary/index.js.map +1 -0
- package/lib/internal/template/error-boundary/interfaces.d.ts +85 -0
- package/lib/internal/template/error-boundary/interfaces.d.ts.map +1 -0
- package/lib/internal/template/error-boundary/interfaces.js +4 -0
- package/lib/internal/template/error-boundary/interfaces.js.map +1 -0
- package/lib/internal/template/error-boundary/internal.d.ts +23 -0
- package/lib/internal/template/error-boundary/internal.d.ts.map +1 -0
- package/lib/internal/template/error-boundary/internal.js +58 -0
- package/lib/internal/template/error-boundary/internal.js.map +1 -0
- package/lib/internal/template/error-boundary/styles.css.js +9 -0
- package/lib/internal/template/error-boundary/styles.scoped.css +10 -0
- package/lib/internal/template/error-boundary/styles.selectors.js +10 -0
- package/lib/internal/template/error-boundary/test-classes/styles.css.js +11 -0
- package/lib/internal/template/error-boundary/test-classes/styles.scoped.css +12 -0
- package/lib/internal/template/error-boundary/test-classes/styles.selectors.js +12 -0
- package/lib/internal/template/error-boundary/utils.d.ts +2 -0
- package/lib/internal/template/error-boundary/utils.d.ts.map +1 -0
- package/lib/internal/template/error-boundary/utils.js +7 -0
- package/lib/internal/template/error-boundary/utils.js.map +1 -0
- package/lib/internal/template/form/internal.d.ts.map +1 -1
- package/lib/internal/template/form/internal.js +20 -14
- package/lib/internal/template/form/internal.js.map +1 -1
- package/lib/internal/template/i18n/messages-types.d.ts +5 -4
- package/lib/internal/template/i18n/messages-types.d.ts.map +1 -1
- package/lib/internal/template/i18n/messages-types.js.map +1 -1
- package/lib/internal/template/icon/interfaces.d.ts +1 -1
- package/lib/internal/template/icon/interfaces.d.ts.map +1 -1
- package/lib/internal/template/icon/interfaces.js.map +1 -1
- package/lib/internal/template/index.d.ts +1 -0
- package/lib/internal/template/index.d.ts.map +1 -1
- package/lib/internal/template/index.js +1 -0
- package/lib/internal/template/index.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/modal/internal.d.ts.map +1 -1
- package/lib/internal/template/modal/internal.js +8 -5
- package/lib/internal/template/modal/internal.js.map +1 -1
- package/lib/internal/template/package.json +1 -0
- package/lib/internal/template/popover/body.d.ts.map +1 -1
- package/lib/internal/template/popover/body.js +10 -8
- package/lib/internal/template/popover/body.js.map +1 -1
- package/lib/internal/template/split-panel/implementation.d.ts.map +1 -1
- package/lib/internal/template/split-panel/implementation.js +5 -2
- package/lib/internal/template/split-panel/implementation.js.map +1 -1
- package/lib/internal/template/tabs/index.d.ts.map +1 -1
- package/lib/internal/template/tabs/index.js +1 -1
- package/lib/internal/template/tabs/index.js.map +1 -1
- package/lib/internal/template/test-utils/dom/error-boundary/index.d.ts +9 -0
- package/lib/internal/template/test-utils/dom/error-boundary/index.js +26 -0
- package/lib/internal/template/test-utils/dom/error-boundary/index.js.map +1 -0
- package/lib/internal/template/test-utils/dom/index.d.ts +20 -0
- package/lib/internal/template/test-utils/dom/index.js +16 -2
- package/lib/internal/template/test-utils/dom/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/error-boundary/index.d.ts +9 -0
- package/lib/internal/template/test-utils/selectors/error-boundary/index.js +26 -0
- package/lib/internal/template/test-utils/selectors/error-boundary/index.js.map +1 -0
- package/lib/internal/template/test-utils/selectors/index.d.ts +18 -0
- package/lib/internal/template/test-utils/selectors/index.js +16 -2
- package/lib/internal/template/test-utils/selectors/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -150,10 +150,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
150
150
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
151
151
|
SPDX-License-Identifier: Apache-2.0
|
|
152
152
|
*/
|
|
153
|
-
.awsui_empty-
|
|
154
|
-
animation: awsui_awsui-motion-fade-
|
|
153
|
+
.awsui_empty-appear_n4qlp_13krv_153:not(#\9) {
|
|
154
|
+
animation: awsui_awsui-motion-fade-in_n4qlp_13krv_1 var(--motion-duration-transition-show-paced-0w35xp, 180ms) var(--motion-easing-transition-show-paced-ufdgkj, ease-out);
|
|
155
155
|
}
|
|
156
|
-
@keyframes awsui_awsui-motion-fade-
|
|
156
|
+
@keyframes awsui_awsui-motion-fade-in_n4qlp_13krv_1 {
|
|
157
157
|
from {
|
|
158
158
|
opacity: 0.2;
|
|
159
159
|
}
|
|
@@ -162,17 +162,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
164
|
@media (prefers-reduced-motion: reduce) {
|
|
165
|
-
.awsui_empty-
|
|
165
|
+
.awsui_empty-appear_n4qlp_13krv_153:not(#\9) {
|
|
166
166
|
animation: none;
|
|
167
167
|
transition: none;
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
|
-
.awsui-motion-disabled .awsui_empty-
|
|
170
|
+
.awsui-motion-disabled .awsui_empty-appear_n4qlp_13krv_153:not(#\9), .awsui-mode-entering .awsui_empty-appear_n4qlp_13krv_153:not(#\9) {
|
|
171
171
|
animation: none;
|
|
172
172
|
transition: none;
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
-
.
|
|
175
|
+
.awsui_root_n4qlp_13krv_175:not(#\9) {
|
|
176
176
|
border-collapse: separate;
|
|
177
177
|
border-spacing: 0;
|
|
178
178
|
box-sizing: border-box;
|
|
@@ -208,31 +208,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
208
208
|
align-items: start;
|
|
209
209
|
}
|
|
210
210
|
|
|
211
|
-
.
|
|
211
|
+
.awsui_empty_n4qlp_13krv_153:not(#\9) {
|
|
212
212
|
font-size: var(--font-size-body-m-vv54cm, 14px);
|
|
213
213
|
line-height: var(--line-height-body-m-bedeoh, 22px);
|
|
214
214
|
color: var(--color-text-empty-vtt4l2, #687078);
|
|
215
215
|
grid-column: 1/-1;
|
|
216
216
|
}
|
|
217
217
|
|
|
218
|
-
.
|
|
218
|
+
.awsui_row_n4qlp_13krv_218:not(#\9) {
|
|
219
219
|
display: contents;
|
|
220
220
|
}
|
|
221
221
|
|
|
222
|
-
.
|
|
222
|
+
.awsui_divider_n4qlp_13krv_222:not(#\9) {
|
|
223
223
|
grid-column: 1/-1;
|
|
224
224
|
border-block-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
|
|
225
225
|
}
|
|
226
226
|
|
|
227
|
-
.awsui_row-
|
|
227
|
+
.awsui_row-control_n4qlp_13krv_227:not(#\9) {
|
|
228
228
|
/* used in test-utils */
|
|
229
229
|
}
|
|
230
230
|
|
|
231
|
-
.
|
|
232
|
-
|
|
231
|
+
.awsui_field_n4qlp_13krv_231:not(#\9) {
|
|
232
|
+
min-inline-size: 40px;
|
|
233
233
|
}
|
|
234
234
|
|
|
235
|
-
.awsui_additional-
|
|
235
|
+
.awsui_additional-info_n4qlp_13krv_235:not(#\9) {
|
|
236
236
|
color: var(--color-text-form-secondary-4sp9un, #687078);
|
|
237
237
|
font-size: var(--font-size-body-s-psgqn2, 12px);
|
|
238
238
|
line-height: var(--line-height-body-s-otgtsr, 16px);
|
|
@@ -242,7 +242,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
242
242
|
margin-block-start: var(--space-xxs-jnczic, 4px);
|
|
243
243
|
/* stylelint-disable-next-line selector-max-type */
|
|
244
244
|
}
|
|
245
|
-
.awsui_additional-
|
|
245
|
+
.awsui_additional-info_n4qlp_13krv_235 > a:not(#\9) {
|
|
246
246
|
text-underline-offset: 0.3em;
|
|
247
247
|
text-decoration-thickness: 1px;
|
|
248
248
|
color: var(--awsui-style-color-default-rhu47t, var(--color-text-link-default-z7zuy8, #0073bb));
|
|
@@ -256,50 +256,50 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
256
256
|
transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
|
|
257
257
|
}
|
|
258
258
|
@media (prefers-reduced-motion: reduce) {
|
|
259
|
-
.awsui_additional-
|
|
259
|
+
.awsui_additional-info_n4qlp_13krv_235 > a:not(#\9) {
|
|
260
260
|
animation: none;
|
|
261
261
|
transition: none;
|
|
262
262
|
}
|
|
263
263
|
}
|
|
264
|
-
.awsui-motion-disabled .awsui_additional-
|
|
264
|
+
.awsui-motion-disabled .awsui_additional-info_n4qlp_13krv_235 > a:not(#\9), .awsui-mode-entering .awsui_additional-info_n4qlp_13krv_235 > a:not(#\9) {
|
|
265
265
|
animation: none;
|
|
266
266
|
transition: none;
|
|
267
267
|
}
|
|
268
|
-
.awsui_additional-
|
|
268
|
+
.awsui_additional-info_n4qlp_13krv_235 > a:not(#\9):hover {
|
|
269
269
|
cursor: pointer;
|
|
270
270
|
color: var(--awsui-style-color-hover-rhu47t, var(--color-text-link-hover-pqxtsy, #0a4a74));
|
|
271
271
|
}
|
|
272
|
-
.awsui_additional-
|
|
272
|
+
.awsui_additional-info_n4qlp_13krv_235 > a:not(#\9):focus {
|
|
273
273
|
outline: none;
|
|
274
274
|
}
|
|
275
|
-
.awsui_additional-
|
|
275
|
+
.awsui_additional-info_n4qlp_13krv_235 > a:not(#\9):active {
|
|
276
276
|
color: var(--awsui-style-color-active-rhu47t, var(--color-text-link-hover-pqxtsy, #0a4a74));
|
|
277
277
|
}
|
|
278
|
-
.awsui_additional-
|
|
278
|
+
.awsui_additional-info_n4qlp_13krv_235 > a:not(#\9):active, .awsui_additional-info_n4qlp_13krv_235 > a:not(#\9):focus, .awsui_additional-info_n4qlp_13krv_235 > a:not(#\9):hover {
|
|
279
279
|
text-decoration-line: underline;
|
|
280
280
|
text-decoration-color: currentColor;
|
|
281
281
|
}
|
|
282
282
|
|
|
283
|
-
.awsui_add-
|
|
283
|
+
.awsui_add-row_n4qlp_13krv_281:not(#\9) {
|
|
284
284
|
grid-column: 1/-1;
|
|
285
285
|
}
|
|
286
286
|
|
|
287
|
-
.awsui_add-
|
|
287
|
+
.awsui_add-button_n4qlp_13krv_285:not(#\9) {
|
|
288
288
|
/* used in test-utils */
|
|
289
289
|
}
|
|
290
290
|
|
|
291
|
-
.awsui_remove-button-
|
|
291
|
+
.awsui_remove-button-container_n4qlp_13krv_289:not(#\9) {
|
|
292
292
|
display: inline-block;
|
|
293
293
|
}
|
|
294
294
|
|
|
295
|
-
.awsui_remove-button-field-
|
|
295
|
+
.awsui_remove-button-field-padding_n4qlp_13krv_293:not(#\9) {
|
|
296
296
|
padding-block-start: calc(var(--space-xxs-jnczic, 4px) + var(--line-height-body-m-bedeoh, 22px));
|
|
297
297
|
}
|
|
298
298
|
|
|
299
|
-
.awsui_remove-button-own-
|
|
299
|
+
.awsui_remove-button-own-row_n4qlp_13krv_297:not(#\9) {
|
|
300
300
|
justify-self: end;
|
|
301
301
|
}
|
|
302
302
|
|
|
303
|
-
.awsui_remove-
|
|
303
|
+
.awsui_remove-button_n4qlp_13krv_289:not(#\9) {
|
|
304
304
|
/* used in test-utils */
|
|
305
305
|
}
|
|
@@ -2,20 +2,20 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"empty-appear": "awsui_empty-
|
|
6
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
7
|
-
"root": "
|
|
8
|
-
"empty": "
|
|
9
|
-
"row": "
|
|
10
|
-
"divider": "
|
|
11
|
-
"row-control": "awsui_row-
|
|
12
|
-
"field": "
|
|
13
|
-
"additional-info": "awsui_additional-
|
|
14
|
-
"add-row": "awsui_add-
|
|
15
|
-
"add-button": "awsui_add-
|
|
16
|
-
"remove-button-container": "awsui_remove-button-
|
|
17
|
-
"remove-button-field-padding": "awsui_remove-button-field-
|
|
18
|
-
"remove-button-own-row": "awsui_remove-button-own-
|
|
19
|
-
"remove-button": "awsui_remove-
|
|
5
|
+
"empty-appear": "awsui_empty-appear_n4qlp_13krv_153",
|
|
6
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_13krv_1",
|
|
7
|
+
"root": "awsui_root_n4qlp_13krv_175",
|
|
8
|
+
"empty": "awsui_empty_n4qlp_13krv_153",
|
|
9
|
+
"row": "awsui_row_n4qlp_13krv_218",
|
|
10
|
+
"divider": "awsui_divider_n4qlp_13krv_222",
|
|
11
|
+
"row-control": "awsui_row-control_n4qlp_13krv_227",
|
|
12
|
+
"field": "awsui_field_n4qlp_13krv_231",
|
|
13
|
+
"additional-info": "awsui_additional-info_n4qlp_13krv_235",
|
|
14
|
+
"add-row": "awsui_add-row_n4qlp_13krv_281",
|
|
15
|
+
"add-button": "awsui_add-button_n4qlp_13krv_285",
|
|
16
|
+
"remove-button-container": "awsui_remove-button-container_n4qlp_13krv_289",
|
|
17
|
+
"remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_13krv_293",
|
|
18
|
+
"remove-button-own-row": "awsui_remove-button-own-row_n4qlp_13krv_297",
|
|
19
|
+
"remove-button": "awsui_remove-button_n4qlp_13krv_289"
|
|
20
20
|
};
|
|
21
21
|
|
|
@@ -21,7 +21,12 @@ export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>,
|
|
|
21
21
|
variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';
|
|
22
22
|
__funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];
|
|
23
23
|
__subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];
|
|
24
|
+
/**
|
|
25
|
+
* React key attached to the content wrapper. It is used to force content re-mount but not container re-mount, which
|
|
26
|
+
* is necessary for components that use container as a root node internally so that their test-utils wrapper is not detached.
|
|
27
|
+
*/
|
|
28
|
+
__contentKey?: string;
|
|
24
29
|
}
|
|
25
30
|
export declare function InternalContainerAsSubstep(props: InternalContainerProps): JSX.Element;
|
|
26
|
-
export default function InternalContainer({ header, footer, children, variant, disableHeaderPaddings, disableContentPaddings, disableFooterPaddings, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader, __internalRootRef, __disableFooterDivider, __hiddenContent, __headerRef, __fullPage, __disableStickyMobile, __funnelSubStepProps, __subStepRef, ...restProps }: InternalContainerProps): JSX.Element;
|
|
31
|
+
export default function InternalContainer({ header, footer, children, variant, disableHeaderPaddings, disableContentPaddings, disableFooterPaddings, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader, __internalRootRef, __disableFooterDivider, __hiddenContent, __headerRef, __fullPage, __disableStickyMobile, __funnelSubStepProps, __subStepRef, __contentKey, ...restProps }: InternalContainerProps): JSX.Element;
|
|
27
32
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAQ9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;IAEjE;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,qBAA6B,EAC7B,SAAS,EACT,KAAK,EACL,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAiB,EACjB,sBAA8B,EAC9B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,eAwIxB"}
|
|
@@ -4,6 +4,8 @@ import React, { useRef } from 'react';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
7
|
+
import InternalBox from '../box/internal';
|
|
8
|
+
import { BuiltInErrorBoundary } from '../error-boundary/internal';
|
|
7
9
|
import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
|
|
8
10
|
import { getBaseProps } from '../internal/base-component';
|
|
9
11
|
import { ContainerHeaderContextProvider } from '../internal/context/container-header';
|
|
@@ -20,7 +22,7 @@ export function InternalContainerAsSubstep(props) {
|
|
|
20
22
|
const modalContext = useModalContext();
|
|
21
23
|
return (React.createElement(InternalContainer, { ...props, __subStepRef: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? { current: null } : subStepRef, __funnelSubStepProps: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? {} : funnelSubStepProps }));
|
|
22
24
|
}
|
|
23
|
-
export default function InternalContainer({ header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, disableFooterPaddings = false, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef, __disableFooterDivider = false, __hiddenContent = false, __headerRef, __fullPage = false, __disableStickyMobile = true, __funnelSubStepProps, __subStepRef, ...restProps }) {
|
|
25
|
+
export default function InternalContainer({ header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, disableFooterPaddings = false, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef, __disableFooterDivider = false, __hiddenContent = false, __headerRef, __fullPage = false, __disableStickyMobile = true, __funnelSubStepProps, __subStepRef, __contentKey, ...restProps }) {
|
|
24
26
|
var _a;
|
|
25
27
|
const isMobile = useMobile();
|
|
26
28
|
const isRefresh = useVisualRefresh();
|
|
@@ -41,32 +43,34 @@ export default function InternalContainer({ header, footer, children, variant =
|
|
|
41
43
|
hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top'
|
|
42
44
|
? { ...getMediaStyles(mediaPosition, style), height: (media === null || media === void 0 ? void 0 : media.height) || '' }
|
|
43
45
|
: { ...getMediaStyles(mediaPosition, style), width: (media === null || media === void 0 ? void 0 : media.width) || '' } }, media.content)),
|
|
44
|
-
React.createElement("div", { id: contentId, ref: __subStepRef, className: clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height']) },
|
|
45
|
-
|
|
46
|
-
React.createElement(
|
|
47
|
-
React.createElement(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
React.createElement("div", { className: clsx(styles
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
46
|
+
React.createElement("div", { id: contentId, ref: __subStepRef, key: __contentKey, className: clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height']) },
|
|
47
|
+
React.createElement(BuiltInErrorBoundary, { wrapper: content => React.createElement(InternalBox, { padding: "m" }, content) },
|
|
48
|
+
header && (React.createElement(ContainerHeaderContextProvider, null,
|
|
49
|
+
React.createElement(StickyHeaderContext.Provider, { value: { isStuck, isStuckAtBottom } },
|
|
50
|
+
React.createElement("div", { className: clsx(isRefresh && styles.refresh, styles.header, analyticsSelectors.header, styles[`header-variant-${variant}`], {
|
|
51
|
+
[styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
|
|
52
|
+
[styles['header-sticky-enabled']]: isSticky,
|
|
53
|
+
[styles['header-dynamic-height']]: hasDynamicHeight,
|
|
54
|
+
[styles['header-stuck']]: isStuck,
|
|
55
|
+
[styles['with-paddings']]: !disableHeaderPaddings,
|
|
56
|
+
[styles['with-hidden-content']]: !children || __hiddenContent,
|
|
57
|
+
[styles['header-with-media']]: hasMedia,
|
|
58
|
+
[styles['header-full-page']]: __fullPage && isRefresh,
|
|
59
|
+
}), ref: headerMergedRef, style: {
|
|
60
|
+
...stickyStyles.style,
|
|
61
|
+
...getHeaderStyles(style),
|
|
62
|
+
} },
|
|
63
|
+
isStuck && !isMobile && isRefresh && __fullPage && React.createElement("div", { className: styles['header-cover'] }),
|
|
64
|
+
header)))),
|
|
65
|
+
React.createElement("div", { className: clsx(styles.content, fitHeight && styles['content-fit-height']) },
|
|
66
|
+
React.createElement("div", { className: clsx(styles['content-inner'], testStyles['content-inner'], {
|
|
67
|
+
[styles['with-paddings']]: !disableContentPaddings,
|
|
68
|
+
[styles['with-header']]: !!header,
|
|
69
|
+
}), style: getContentStyles(style) },
|
|
70
|
+
React.createElement(BuiltInErrorBoundary, { wrapper: content => (React.createElement(InternalBox, { padding: disableContentPaddings ? 'm' : undefined }, content)) }, children))),
|
|
71
|
+
footer && (React.createElement("div", { className: clsx(styles.footer, {
|
|
72
|
+
[styles['with-divider']]: !__disableFooterDivider,
|
|
73
|
+
[styles['with-paddings']]: !disableFooterPaddings,
|
|
74
|
+
}), style: getFooterStyles(style) }, footer))))));
|
|
71
75
|
}
|
|
72
76
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC1F,OAAO,EAAE,0BAA0B,EAAE,MAAM,kEAAkE,CAAC;AAE9G,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,8BAA8B,EAAE,MAAM,sCAAsC,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC5G,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3E,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,8BAA8B,CAAC;AAwBtD,MAAM,UAAU,0BAA0B,CAAC,KAA6B;IACtE,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC9D,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,OAAO,CACL,oBAAC,iBAAiB,OACZ,KAAK,EACT,YAAY,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,EAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,UAAU,EACtE,oBAAoB,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,EAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,GACvE,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,KAAK,EAC9B,qBAAqB,GAAG,KAAK,EAC7B,SAAS,EACT,KAAK,EACL,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAc,GAAG,KAAK,EACtB,iBAAiB,EACjB,sBAAsB,GAAG,KAAK,EAC9B,eAAe,GAAG,KAAK,EACvB,WAAW,EACX,UAAU,GAAG,KAAK,EAClB,qBAAqB,GAAG,IAAI,EAC5B,oBAAoB,EACpB,YAAY,EACZ,GAAG,SAAS,EACW;;IACvB,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,eAAe,CAC1E,OAAO,EACP,SAAS,EACT,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,UAAU,IAAI,SAAS,IAAI,CAAC,QAAQ,CACrC,CAAC;IACF,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;IAEhC,MAAM,gBAAgB,GAAG,SAAS,IAAI,OAAO,KAAK,WAAW,CAAC;IAE9D,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAC3D,MAAM,eAAe,GAAG,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAE7D,4EAA4E;IAC5E,6HAA6H;IAC7H,MAAM,sBAAsB,GAAG,QAAQ,IAAI,CAAC,QAAQ,CAAC;IAErD,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAA,CAAC;IAClC,MAAM,aAAa,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,mCAAI,KAAK,CAAC;IAE/C,OAAO,CACL,gCACM,SAAS,KACT,oBAAoB,EACxB,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAC5B,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,EACjC,QAAQ,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAC7F,sBAAsB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EACpD,sBAAsB,IAAI,OAAO,IAAI,eAAe,IAAI,CAAC,MAAM,CAAC,oCAAoC,CAAC,CAAC,EACtG,SAAS,IAAI,MAAM,CAAC,OAAO,CAC5B,EACD,GAAG,EAAE,SAAS,KACV,0BAA0B,CAC5B,IAAI,kBAAkB,CAAC,MAAM,SAAS,kBAAkB,CAAC,MAAM,SAAS,kBAAkB,CAAC,MAAM,KAAK,CACvG,EACD,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC;QAE1B,QAAQ,IAAI,CACX,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAC3F,KAAK,EACH,aAAa,KAAK,KAAK;gBACrB,CAAC,CAAC,EAAE,GAAG,cAAc,CAAC,aAAa,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,KAAI,EAAE,EAAE;gBAC1E,CAAC,CAAC,EAAE,GAAG,cAAc,CAAC,aAAa,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,KAAI,EAAE,EAAE,IAG3E,KAAK,CAAC,OAAO,CACV,CACP;QACD,6BACE,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC,4BAA4B,CAAC,CAAC;YAE5F,MAAM,IAAI,CACT,oBAAC,8BAA8B;gBAC7B,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE;oBAC/D,6BACE,SAAS,EAAE,IAAI,CACb,SAAS,IAAI,MAAM,CAAC,OAAO,EAC3B,MAAM,CAAC,MAAM,EACb,kBAAkB,CAAC,MAAM,EACzB,MAAM,CAAC,kBAAkB,OAAO,EAAE,CAAC,EACnC;4BACE,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,cAAc,IAAI,CAAC,QAAQ;4BAC/D,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,QAAQ;4BAC3C,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,gBAAgB;4BACnD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,OAAO;4BACjC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,qBAAqB;4BACjD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,CAAC,QAAQ,IAAI,eAAe;4BAC7D,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,QAAQ;4BACvC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,UAAU,IAAI,SAAS;yBACtD,CACF,EACD,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE;4BACL,GAAG,YAAY,CAAC,KAAK;4BACrB,GAAG,eAAe,CAAC,KAAK,CAAC;yBAC1B;wBAEA,OAAO,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,UAAU,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,GAAQ;wBACjG,MAAM,CACH,CACuB,CACA,CAClC;YACD,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,CAAC;gBAC7E,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,EAAE;wBACpE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,sBAAsB;wBAClD,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM;qBAClC,CAAC,EACF,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAE7B,QAAQ,CACL,CACF;YACL,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;oBAC7B,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,sBAAsB;oBACjD,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,qBAAqB;iBAClD,CAAC,EACF,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,IAE5B,MAAM,CACH,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { ContainerProps } from './interfaces';\nimport { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n disableFooterPaddings?: boolean;\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __mobileStickyOffset?: number;\n __disableFooterDivider?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __fullPage?: boolean;\n __disableStickyMobile?: boolean;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n const modalContext = useModalContext();\n\n return (\n <InternalContainer\n {...props}\n __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n />\n );\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n disableFooterPaddings = false,\n fitHeight,\n media,\n style,\n __stickyOffset,\n __mobileStickyOffset,\n __stickyHeader = false,\n __internalRootRef,\n __disableFooterDivider = false,\n __hiddenContent = false,\n __headerRef,\n __fullPage = false,\n __disableStickyMobile = true,\n __funnelSubStepProps,\n __subStepRef,\n ...restProps\n}: InternalContainerProps) {\n const isMobile = useMobile();\n const isRefresh = useVisualRefresh();\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(\n rootRef,\n headerRef,\n __stickyHeader,\n __stickyOffset,\n __mobileStickyOffset,\n __disableStickyMobile,\n __fullPage && isRefresh && !isMobile\n );\n const contentId = useUniqueId();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n // The container is only sticky on mobile if it is the header for the table.\n // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n const shouldHaveStickyStyles = isSticky && !isMobile;\n\n const hasMedia = !!media?.content;\n const mediaPosition = media?.position ?? 'top';\n\n return (\n <div\n {...baseProps}\n {...__funnelSubStepProps}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[`variant-${variant}`],\n fitHeight && styles['fit-height'],\n hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n shouldHaveStickyStyles && [styles['sticky-enabled']],\n shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']],\n isRefresh && styles.refresh\n )}\n ref={mergedRef}\n {...getAnalyticsLabelAttribute(\n `.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`\n )}\n style={getRootStyles(style)}\n >\n {hasMedia && (\n <div\n className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n style={\n mediaPosition === 'top'\n ? { ...getMediaStyles(mediaPosition, style), height: media?.height || '' }\n : { ...getMediaStyles(mediaPosition, style), width: media?.width || '' }\n }\n >\n {media.content}\n </div>\n )}\n <div\n id={contentId}\n ref={__subStepRef}\n className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n >\n {header && (\n <ContainerHeaderContextProvider>\n <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>\n <div\n className={clsx(\n isRefresh && styles.refresh,\n styles.header,\n analyticsSelectors.header,\n styles[`header-variant-${variant}`],\n {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-hidden-content']]: !children || __hiddenContent,\n [styles['header-with-media']]: hasMedia,\n [styles['header-full-page']]: __fullPage && isRefresh,\n }\n )}\n ref={headerMergedRef}\n style={{\n ...stickyStyles.style,\n ...getHeaderStyles(style),\n }}\n >\n {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n {header}\n </div>\n </StickyHeaderContext.Provider>\n </ContainerHeaderContextProvider>\n )}\n <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>\n <div\n className={clsx(styles['content-inner'], testStyles['content-inner'], {\n [styles['with-paddings']]: !disableContentPaddings,\n [styles['with-header']]: !!header,\n })}\n style={getContentStyles(style)}\n >\n {children}\n </div>\n </div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !disableFooterPaddings,\n })}\n style={getFooterStyles(style)}\n >\n {footer}\n </div>\n )}\n </div>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.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\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { ContainerProps } from './interfaces';\nimport { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n disableFooterPaddings?: boolean;\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __mobileStickyOffset?: number;\n __disableFooterDivider?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __fullPage?: boolean;\n __disableStickyMobile?: boolean;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n\n /**\n * React key attached to the content wrapper. It is used to force content re-mount but not container re-mount, which\n * is necessary for components that use container as a root node internally so that their test-utils wrapper is not detached.\n */\n __contentKey?: string;\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n const modalContext = useModalContext();\n\n return (\n <InternalContainer\n {...props}\n __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n />\n );\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n disableFooterPaddings = false,\n fitHeight,\n media,\n style,\n __stickyOffset,\n __mobileStickyOffset,\n __stickyHeader = false,\n __internalRootRef,\n __disableFooterDivider = false,\n __hiddenContent = false,\n __headerRef,\n __fullPage = false,\n __disableStickyMobile = true,\n __funnelSubStepProps,\n __subStepRef,\n __contentKey,\n ...restProps\n}: InternalContainerProps) {\n const isMobile = useMobile();\n const isRefresh = useVisualRefresh();\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(\n rootRef,\n headerRef,\n __stickyHeader,\n __stickyOffset,\n __mobileStickyOffset,\n __disableStickyMobile,\n __fullPage && isRefresh && !isMobile\n );\n const contentId = useUniqueId();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n // The container is only sticky on mobile if it is the header for the table.\n // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n const shouldHaveStickyStyles = isSticky && !isMobile;\n\n const hasMedia = !!media?.content;\n const mediaPosition = media?.position ?? 'top';\n\n return (\n <div\n {...baseProps}\n {...__funnelSubStepProps}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[`variant-${variant}`],\n fitHeight && styles['fit-height'],\n hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n shouldHaveStickyStyles && [styles['sticky-enabled']],\n shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']],\n isRefresh && styles.refresh\n )}\n ref={mergedRef}\n {...getAnalyticsLabelAttribute(\n `.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`\n )}\n style={getRootStyles(style)}\n >\n {hasMedia && (\n <div\n className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n style={\n mediaPosition === 'top'\n ? { ...getMediaStyles(mediaPosition, style), height: media?.height || '' }\n : { ...getMediaStyles(mediaPosition, style), width: media?.width || '' }\n }\n >\n {media.content}\n </div>\n )}\n <div\n id={contentId}\n ref={__subStepRef}\n key={__contentKey}\n className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n >\n {/* We use a wrapper around the boundary to preserve container's paddings. */}\n <BuiltInErrorBoundary wrapper={content => <InternalBox padding=\"m\">{content}</InternalBox>}>\n {header && (\n <ContainerHeaderContextProvider>\n <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>\n <div\n className={clsx(\n isRefresh && styles.refresh,\n styles.header,\n analyticsSelectors.header,\n styles[`header-variant-${variant}`],\n {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-hidden-content']]: !children || __hiddenContent,\n [styles['header-with-media']]: hasMedia,\n [styles['header-full-page']]: __fullPage && isRefresh,\n }\n )}\n ref={headerMergedRef}\n style={{\n ...stickyStyles.style,\n ...getHeaderStyles(style),\n }}\n >\n {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n {header}\n </div>\n </StickyHeaderContext.Provider>\n </ContainerHeaderContextProvider>\n )}\n <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>\n <div\n className={clsx(styles['content-inner'], testStyles['content-inner'], {\n [styles['with-paddings']]: !disableContentPaddings,\n [styles['with-header']]: !!header,\n })}\n style={getContentStyles(style)}\n >\n {/* We use a wrapper around the boundary to preserve paddings in case they were disabled by the consumer.\n That is needed because the consumer-defined paddings that normally come with the content can no longer\n apply since the content failed to render. */}\n <BuiltInErrorBoundary\n wrapper={content => (\n <InternalBox padding={disableContentPaddings ? 'm' : undefined}>{content}</InternalBox>\n )}\n >\n {children}\n </BuiltInErrorBoundary>\n </div>\n </div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !disableFooterPaddings,\n })}\n style={getFooterStyles(style)}\n >\n {footer}\n </div>\n )}\n </BuiltInErrorBoundary>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,KAAK,mBAAmB,GAAG,WAAW,GAAG,0BAA0B,CAAC;AAEpE,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,mBAAmB,eAqErB;AAED,eAAO,MAAM,sBAAsB,mFAAkD,CAAC"}
|
|
@@ -4,6 +4,7 @@ import React, { useRef } from 'react';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useRuntimeDrawerContext } from '../app-layout/runtime-drawer/use-runtime-drawer-context';
|
|
6
6
|
import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
|
|
7
|
+
import { BuiltInErrorBoundary } from '../error-boundary/internal';
|
|
7
8
|
import { useInternalI18n } from '../i18n/context';
|
|
8
9
|
import { getBaseProps } from '../internal/base-component';
|
|
9
10
|
import { createWidgetizedComponent } from '../internal/widgets';
|
|
@@ -21,7 +22,7 @@ export function DrawerImplementation({ header, footer, children, loading, i18nSt
|
|
|
21
22
|
};
|
|
22
23
|
const footerRef = useRef(null);
|
|
23
24
|
const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: __internalRootRef });
|
|
24
|
-
const
|
|
25
|
+
const hasAdditionalDrawerAction = !!(runtimeDrawerContext === null || runtimeDrawerContext === void 0 ? void 0 : runtimeDrawerContext.isExpandable);
|
|
25
26
|
const { isSticky: isFooterSticky } = useStickyFooter({
|
|
26
27
|
drawerRef: __internalRootRef,
|
|
27
28
|
footerRef,
|
|
@@ -29,10 +30,11 @@ export function DrawerImplementation({ header, footer, children, loading, i18nSt
|
|
|
29
30
|
return loading ? (React.createElement("div", { ...containerProps, className: clsx(containerProps.className, styles['content-with-paddings']), ref: __internalRootRef },
|
|
30
31
|
React.createElement(InternalStatusIndicator, { type: "loading" },
|
|
31
32
|
React.createElement(InternalLiveRegion, { tagName: "span" }, i18n('i18nStrings.loadingText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.loadingText))))) : (React.createElement("div", { ...containerProps, ref: __internalRootRef },
|
|
32
|
-
header && (React.createElement("div", { className: clsx(styles.header, runtimeDrawerContext && styles['with-runtime-context'],
|
|
33
|
+
header && (React.createElement("div", { className: clsx(styles.header, runtimeDrawerContext && styles['with-runtime-context'], hasAdditionalDrawerAction && styles['with-additional-action']) },
|
|
33
34
|
header,
|
|
34
35
|
headerActions && React.createElement("div", { className: styles['header-actions'] }, headerActions))),
|
|
35
|
-
React.createElement("div", { className: clsx(styles['test-utils-drawer-content'], styles.content, !disableContentPaddings && styles['content-with-paddings']) },
|
|
36
|
+
React.createElement("div", { className: clsx(styles['test-utils-drawer-content'], styles.content, !disableContentPaddings && styles['content-with-paddings']) },
|
|
37
|
+
React.createElement(BuiltInErrorBoundary, null, children)),
|
|
36
38
|
footer && (React.createElement("div", { ref: footerRef, className: clsx(styles.footer, {
|
|
37
39
|
[styles['is-sticky']]: isFooterSticky,
|
|
38
40
|
}) }, footer))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAa,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,uBAAuB,EAAE,MAAM,yDAAyD,CAAC;AAClG,OAAO,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,oBAAoB,CAAC,EACnC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,GAAG,SAAS,EACQ;IACpB,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,gCAAgC,EAAE,CAAC;IACrD,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvC,MAAM,cAAc,GAAG;QACrB,GAAG,SAAS;QACZ,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,MAAM,EACb,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,EACnC,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,CAClC;KACF,CAAC;IACF,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,EAAE,OAAO,EAAE,iBAA2C,EAAE,CAAC,CAAC;IAC/G,MAAM,
|
|
1
|
+
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/drawer/implementation.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 React, { RefObject, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useRuntimeDrawerContext } from '../app-layout/runtime-drawer/use-runtime-drawer-context';\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { DrawerProps } from './interfaces';\nimport { useStickyFooter } from './use-sticky-footer';\n\nimport styles from './styles.css.js';\n\ntype DrawerInternalProps = DrawerProps & InternalBaseComponentProps;\n\nexport function DrawerImplementation({\n header,\n footer,\n children,\n loading,\n i18nStrings,\n disableContentPaddings,\n __internalRootRef,\n headerActions,\n ...restProps\n}: DrawerInternalProps) {\n const baseProps = getBaseProps(restProps);\n const isToolbar = useAppLayoutToolbarDesignEnabled();\n const i18n = useInternalI18n('drawer');\n const containerProps = {\n ...baseProps,\n className: clsx(\n baseProps.className,\n styles.drawer,\n isToolbar && styles['with-toolbar'],\n !!footer && styles['with-footer']\n ),\n };\n const footerRef = useRef<HTMLDivElement>(null);\n\n const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: __internalRootRef as RefObject<HTMLElement> });\n const hasAdditionalDrawerAction = !!runtimeDrawerContext?.isExpandable;\n const { isSticky: isFooterSticky } = useStickyFooter({\n drawerRef: __internalRootRef as RefObject<HTMLElement>,\n footerRef,\n });\n\n return loading ? (\n <div\n {...containerProps}\n className={clsx(containerProps.className, styles['content-with-paddings'])}\n ref={__internalRootRef}\n >\n <InternalStatusIndicator type=\"loading\">\n <InternalLiveRegion tagName=\"span\">\n {i18n('i18nStrings.loadingText', i18nStrings?.loadingText)}\n </InternalLiveRegion>\n </InternalStatusIndicator>\n </div>\n ) : (\n <div {...containerProps} ref={__internalRootRef}>\n {header && (\n <div\n className={clsx(\n styles.header,\n runtimeDrawerContext && styles['with-runtime-context'],\n hasAdditionalDrawerAction && styles['with-additional-action']\n )}\n >\n {header}\n {headerActions && <div className={styles['header-actions']}>{headerActions}</div>}\n </div>\n )}\n <div\n className={clsx(\n styles['test-utils-drawer-content'],\n styles.content,\n !disableContentPaddings && styles['content-with-paddings']\n )}\n >\n <BuiltInErrorBoundary>{children}</BuiltInErrorBoundary>\n </div>\n {footer && (\n <div\n ref={footerRef}\n className={clsx(styles.footer, {\n [styles['is-sticky']]: isFooterSticky,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n );\n}\n\nexport const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fallback.d.ts","sourceRoot":"","sources":["../../../src/error-boundary/fallback.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAMlD,wBAAgB,qBAAqB,CAAC,EACpC,WAAgB,EAChB,cAAc,GACf,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,GAAG,aAAa,CAAC,eA2B5D"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import IntlMessageFormat from 'intl-messageformat';
|
|
6
|
+
import InternalAlert from '../alert/internal';
|
|
7
|
+
import InternalButton from '../button/internal';
|
|
8
|
+
import { useInternalI18n } from '../i18n/context';
|
|
9
|
+
import { refreshPage } from './utils';
|
|
10
|
+
import styles from './styles.css.js';
|
|
11
|
+
import testUtilStyles from './test-classes/styles.css.js';
|
|
12
|
+
export function ErrorBoundaryFallback({ i18nStrings = {}, renderFallback, }) {
|
|
13
|
+
var _a;
|
|
14
|
+
const defaultSlots = {
|
|
15
|
+
header: (React.createElement("div", { className: clsx(styles.header, testUtilStyles.header) },
|
|
16
|
+
React.createElement(DefaultHeaderContent, { i18nStrings: i18nStrings }))),
|
|
17
|
+
description: (React.createElement("div", { className: clsx(styles.description, testUtilStyles.description) },
|
|
18
|
+
React.createElement(DefaultDescriptionContent, { i18nStrings: i18nStrings }))),
|
|
19
|
+
action: (React.createElement("div", { className: clsx(styles.action, testUtilStyles.action) },
|
|
20
|
+
React.createElement(DefaultActionContent, { i18nStrings: i18nStrings }))),
|
|
21
|
+
};
|
|
22
|
+
return (React.createElement("div", { className: testUtilStyles.fallback }, (_a = renderFallback === null || renderFallback === void 0 ? void 0 : renderFallback(defaultSlots)) !== null && _a !== void 0 ? _a : (React.createElement(InternalAlert, { type: "error", header: defaultSlots.header, action: defaultSlots.action }, defaultSlots.description))));
|
|
23
|
+
}
|
|
24
|
+
function DefaultHeaderContent({ i18nStrings }) {
|
|
25
|
+
const i18n = useInternalI18n('error-boundary');
|
|
26
|
+
return React.createElement(React.Fragment, null, i18n('i18nStrings.headerText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.headerText));
|
|
27
|
+
}
|
|
28
|
+
function DefaultDescriptionContent({ i18nStrings: { descriptionText, components: { Feedback } = {} } = {}, }) {
|
|
29
|
+
const i18n = useInternalI18n('error-boundary');
|
|
30
|
+
// Dependencies for the intl-format function, where the pseudo-tags are declared as functions from parsed chunks.
|
|
31
|
+
const formatArgs = Feedback
|
|
32
|
+
? {
|
|
33
|
+
hasFeedback: true,
|
|
34
|
+
Feedback: (chunks) => {
|
|
35
|
+
var _a;
|
|
36
|
+
return (React.createElement("span", { className: testUtilStyles['feedback-action'] },
|
|
37
|
+
React.createElement(Feedback, null, (_a = chunks[0]) !== null && _a !== void 0 ? _a : '')));
|
|
38
|
+
},
|
|
39
|
+
}
|
|
40
|
+
: { hasFeedback: false, Feedback: () => React.createElement(React.Fragment, null) };
|
|
41
|
+
// This ensures that the description string provided via i18nStrings also supports the <Feedback> injection,
|
|
42
|
+
// because the i18n() helper propagates the second argument as is, without applying intl-format to it.
|
|
43
|
+
// We wrap the format with try-catch to avoid intl errors caused by incorrectly referenced components.
|
|
44
|
+
function safeFormat(descriptionText) {
|
|
45
|
+
try {
|
|
46
|
+
return descriptionText ? new IntlMessageFormat(descriptionText).format(formatArgs) : undefined;
|
|
47
|
+
}
|
|
48
|
+
catch {
|
|
49
|
+
return descriptionText;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
const message = i18n('i18nStrings.descriptionText', safeFormat(descriptionText), format => format(formatArgs));
|
|
53
|
+
// When the description includes <Feedback>, then the translated message is represented as an array of strings and
|
|
54
|
+
// React elements that require keys when rendering to avoid React warnings.
|
|
55
|
+
return (React.createElement(React.Fragment, null, Array.isArray(message) ? message.map((chunk, i) => React.createElement(React.Fragment, { key: i }, chunk)) : message));
|
|
56
|
+
}
|
|
57
|
+
function DefaultActionContent({ i18nStrings }) {
|
|
58
|
+
const i18n = useInternalI18n('error-boundary');
|
|
59
|
+
return (React.createElement(InternalButton, { iconName: "refresh", onClick: refreshPage, className: testUtilStyles['refresh-action'] }, i18n('i18nStrings.refreshActionText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.refreshActionText)));
|
|
60
|
+
}
|
|
61
|
+
//# sourceMappingURL=fallback.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fallback.js","sourceRoot":"","sources":["../../../src/error-boundary/fallback.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\n\nimport React from 'react';\nimport clsx from 'clsx';\nimport IntlMessageFormat from 'intl-messageformat';\n\nimport InternalAlert from '../alert/internal';\nimport InternalButton from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { ErrorBoundaryProps } from './interfaces';\nimport { refreshPage } from './utils';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport function ErrorBoundaryFallback({\n i18nStrings = {},\n renderFallback,\n}: Pick<ErrorBoundaryProps, 'renderFallback' | 'i18nStrings'>) {\n const defaultSlots = {\n header: (\n <div className={clsx(styles.header, testUtilStyles.header)}>\n <DefaultHeaderContent i18nStrings={i18nStrings} />\n </div>\n ),\n description: (\n <div className={clsx(styles.description, testUtilStyles.description)}>\n <DefaultDescriptionContent i18nStrings={i18nStrings} />\n </div>\n ),\n action: (\n <div className={clsx(styles.action, testUtilStyles.action)}>\n <DefaultActionContent i18nStrings={i18nStrings} />\n </div>\n ),\n };\n return (\n <div className={testUtilStyles.fallback}>\n {renderFallback?.(defaultSlots) ?? (\n <InternalAlert type=\"error\" header={defaultSlots.header} action={defaultSlots.action}>\n {defaultSlots.description}\n </InternalAlert>\n )}\n </div>\n );\n}\n\nfunction DefaultHeaderContent({ i18nStrings }: { i18nStrings: ErrorBoundaryProps.I18nStrings }) {\n const i18n = useInternalI18n('error-boundary');\n return <>{i18n('i18nStrings.headerText', i18nStrings?.headerText)}</>;\n}\n\nfunction DefaultDescriptionContent({\n i18nStrings: { descriptionText, components: { Feedback } = {} } = {},\n}: {\n i18nStrings: ErrorBoundaryProps.I18nStrings;\n}) {\n const i18n = useInternalI18n('error-boundary');\n\n // Dependencies for the intl-format function, where the pseudo-tags are declared as functions from parsed chunks.\n const formatArgs = Feedback\n ? {\n hasFeedback: true,\n Feedback: (chunks: React.ReactNode[]) => (\n <span className={testUtilStyles['feedback-action']}>\n <Feedback>{chunks[0] ?? ''}</Feedback>\n </span>\n ),\n }\n : { hasFeedback: false, Feedback: () => <></> };\n\n // This ensures that the description string provided via i18nStrings also supports the <Feedback> injection,\n // because the i18n() helper propagates the second argument as is, without applying intl-format to it.\n // We wrap the format with try-catch to avoid intl errors caused by incorrectly referenced components.\n function safeFormat(descriptionText?: string) {\n try {\n return descriptionText ? new IntlMessageFormat(descriptionText).format(formatArgs) : undefined;\n } catch {\n return descriptionText;\n }\n }\n const message = i18n('i18nStrings.descriptionText', safeFormat(descriptionText), format => format(formatArgs));\n\n // When the description includes <Feedback>, then the translated message is represented as an array of strings and\n // React elements that require keys when rendering to avoid React warnings.\n return (\n <>\n {Array.isArray(message) ? message.map((chunk, i) => <React.Fragment key={i}>{chunk}</React.Fragment>) : message}\n </>\n );\n}\n\nfunction DefaultActionContent({ i18nStrings }: { i18nStrings?: ErrorBoundaryProps.I18nStrings }) {\n const i18n = useInternalI18n('error-boundary');\n return (\n <InternalButton iconName=\"refresh\" onClick={refreshPage} className={testUtilStyles['refresh-action']}>\n {i18n('i18nStrings.refreshActionText', i18nStrings?.refreshActionText)}\n </InternalButton>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/error-boundary/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,iBAAS,aAAa,CAAC,EAAE,cAAsB,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,eAU9E;AAID,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
'use client';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
6
|
+
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
7
|
+
import { InternalErrorBoundary } from './internal';
|
|
8
|
+
function ErrorBoundary({ suppressNested = false, ...props }) {
|
|
9
|
+
var _a, _b;
|
|
10
|
+
const baseComponentProps = useBaseComponent('ErrorBoundary', {
|
|
11
|
+
props: { suppressNested },
|
|
12
|
+
metadata: {
|
|
13
|
+
hasBoundaryId: !!props.errorBoundaryId,
|
|
14
|
+
hasFeedbackAction: !!((_b = (_a = props.i18nStrings) === null || _a === void 0 ? void 0 : _a.components) === null || _b === void 0 ? void 0 : _b.Feedback),
|
|
15
|
+
hasRenderFallback: !!props.renderFallback,
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
return React.createElement(InternalErrorBoundary, { ...baseComponentProps, ...props, suppressNested: suppressNested });
|
|
19
|
+
}
|
|
20
|
+
applyDisplayName(ErrorBoundary, 'ErrorBoundary');
|
|
21
|
+
export default ErrorBoundary;
|
|
22
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/error-boundary/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAInD,SAAS,aAAa,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,GAAG,KAAK,EAAsB;;IAC7E,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,eAAe,EAAE;QAC3D,KAAK,EAAE,EAAE,cAAc,EAAE;QACzB,QAAQ,EAAE;YACR,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,eAAe;YACtC,iBAAiB,EAAE,CAAC,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,WAAW,0CAAE,UAAU,0CAAE,QAAQ,CAAA;YAC5D,iBAAiB,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc;SAC1C;KACF,CAAC,CAAC;IACH,OAAO,oBAAC,qBAAqB,OAAK,kBAAkB,KAAM,KAAK,EAAE,cAAc,EAAE,cAAc,GAAI,CAAC;AACtG,CAAC;AAED,gBAAgB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AAEjD,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ErrorBoundaryProps } from './interfaces';\nimport { InternalErrorBoundary } from './internal';\n\nexport { ErrorBoundaryProps };\n\nfunction ErrorBoundary({ suppressNested = false, ...props }: ErrorBoundaryProps) {\n const baseComponentProps = useBaseComponent('ErrorBoundary', {\n props: { suppressNested },\n metadata: {\n hasBoundaryId: !!props.errorBoundaryId,\n hasFeedbackAction: !!props.i18nStrings?.components?.Feedback,\n hasRenderFallback: !!props.renderFallback,\n },\n });\n return <InternalErrorBoundary {...baseComponentProps} {...props} suppressNested={suppressNested} />;\n}\n\napplyDisplayName(ErrorBoundary, 'ErrorBoundary');\n\nexport default ErrorBoundary;\n"]}
|