@cloudscape-design/components 3.0.148 → 3.0.150
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/app-layout/index.d.ts.map +1 -1
- package/app-layout/index.js +15 -25
- package/app-layout/index.js.map +1 -1
- package/app-layout/utils/use-observed-element.d.ts +1 -1
- package/app-layout/utils/use-observed-element.d.ts.map +1 -1
- package/app-layout/utils/use-observed-element.js +3 -12
- package/app-layout/utils/use-observed-element.js.map +1 -1
- package/app-layout/visual-refresh/context.d.ts +2 -1
- package/app-layout/visual-refresh/context.d.ts.map +1 -1
- package/app-layout/visual-refresh/context.js +33 -27
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/layout.d.ts.map +1 -1
- package/app-layout/visual-refresh/layout.js +2 -30
- package/app-layout/visual-refresh/layout.js.map +1 -1
- package/app-layout/visual-refresh/split-panel.d.ts.map +1 -1
- package/app-layout/visual-refresh/split-panel.js +6 -14
- package/app-layout/visual-refresh/split-panel.js.map +1 -1
- package/cards/styles.css.js +37 -37
- package/cards/styles.scoped.css +49 -49
- package/cards/styles.selectors.js +37 -37
- package/container/styles.css.js +16 -16
- package/container/styles.scoped.css +30 -30
- package/container/styles.selectors.js +16 -16
- package/expandable-section/styles.css.js +21 -21
- package/expandable-section/styles.scoped.css +43 -43
- package/expandable-section/styles.selectors.js +21 -21
- package/internal/base-component/styles.scoped.css +5 -4
- package/internal/context/split-panel-context.d.ts +1 -3
- package/internal/context/split-panel-context.d.ts.map +1 -1
- package/internal/context/split-panel-context.js +2 -4
- package/internal/context/split-panel-context.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/generated/styles/tokens.js +1 -1
- package/internal/generated/theming/index.cjs +13 -6
- package/internal/generated/theming/index.js +13 -6
- package/internal/manifest.json +1 -1
- package/modal/styles.css.js +22 -22
- package/modal/styles.scoped.css +41 -41
- package/modal/styles.selectors.js +22 -22
- package/package.json +1 -1
- package/split-panel/bottom.d.ts.map +1 -1
- package/split-panel/bottom.js +11 -3
- package/split-panel/bottom.js.map +1 -1
- package/split-panel/index.d.ts.map +1 -1
- package/split-panel/index.js +2 -2
- package/split-panel/index.js.map +1 -1
- package/table/body-cell/index.d.ts +3 -1
- package/table/body-cell/index.d.ts.map +1 -1
- package/table/body-cell/index.js +4 -2
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/styles.css.js +12 -8
- package/table/body-cell/styles.scoped.css +56 -20
- package/table/body-cell/styles.selectors.js +12 -8
- package/table/header-cell/styles.css.js +18 -16
- package/table/header-cell/styles.scoped.css +54 -27
- package/table/header-cell/styles.selectors.js +18 -16
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +11 -9
- package/table/internal.js.map +1 -1
- package/table/selection-control/styles.css.js +3 -3
- package/table/selection-control/styles.scoped.css +3 -5
- package/table/selection-control/styles.selectors.js +3 -3
- package/table/styles.css.js +33 -34
- package/table/styles.scoped.css +63 -58
- package/table/styles.selectors.js +33 -34
- package/table/thead.d.ts +1 -0
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +5 -3
- package/table/thead.js.map +1 -1
- package/table/use-sticky-header.d.ts.map +1 -1
- package/table/use-sticky-header.js +0 -13
- package/table/use-sticky-header.js.map +1 -1
- package/tabs/styles.css.js +21 -21
- package/tabs/styles.scoped.css +39 -39
- package/tabs/styles.selectors.js +21 -21
package/modal/styles.scoped.css
CHANGED
|
@@ -94,7 +94,7 @@ 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
|
-
@keyframes awsui_modal-slide-
|
|
97
|
+
@keyframes awsui_modal-slide-up_1d2i7_nzsqa_1 {
|
|
98
98
|
0% {
|
|
99
99
|
transform: translate(0, 10px);
|
|
100
100
|
}
|
|
@@ -102,12 +102,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
102
102
|
transform: translate(0, 0);
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
|
-
.
|
|
106
|
-
animation: awsui_modal-slide-
|
|
105
|
+
.awsui_dialog_1d2i7_nzsqa_105:not(#\9) {
|
|
106
|
+
animation: awsui_modal-slide-up_1d2i7_nzsqa_1 var(--motion-duration-slow-0273ow, 180ms) ease-out, awsui_awsui-motion-fade-in-0_1d2i7_nzsqa_1 var(--motion-duration-slow-0273ow, 180ms) ease-out;
|
|
107
107
|
animation-delay: var(--motion-duration-fast-nk2ap0, 90ms);
|
|
108
108
|
animation-fill-mode: both;
|
|
109
109
|
}
|
|
110
|
-
@keyframes awsui_awsui-motion-fade-in-
|
|
110
|
+
@keyframes awsui_awsui-motion-fade-in-0_1d2i7_nzsqa_1 {
|
|
111
111
|
from {
|
|
112
112
|
opacity: 0;
|
|
113
113
|
}
|
|
@@ -116,22 +116,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
@media (prefers-reduced-motion: reduce) {
|
|
119
|
-
.
|
|
119
|
+
.awsui_dialog_1d2i7_nzsqa_105:not(#\9) {
|
|
120
120
|
animation: none;
|
|
121
121
|
transition: none;
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
|
-
.awsui-motion-disabled .
|
|
124
|
+
.awsui-motion-disabled .awsui_dialog_1d2i7_nzsqa_105:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_nzsqa_105:not(#\9) {
|
|
125
125
|
animation: none;
|
|
126
126
|
transition: none;
|
|
127
127
|
}
|
|
128
|
-
.
|
|
129
|
-
animation: awsui_awsui-motion-scale-
|
|
128
|
+
.awsui_dialog_1d2i7_nzsqa_105.awsui_refresh_1d2i7_nzsqa_128:not(#\9) {
|
|
129
|
+
animation: awsui_awsui-motion-scale-popup_1d2i7_nzsqa_1, awsui_awsui-motion-fade-in-0_1d2i7_nzsqa_1;
|
|
130
130
|
animation-duration: var(--motion-duration-refresh-only-fast-addxjd, 115ms);
|
|
131
131
|
animation-timing-function: var(--motion-easing-refresh-only-a-sy0g8m, cubic-bezier(0, 0, 0, 1));
|
|
132
132
|
animation-fill-mode: both;
|
|
133
133
|
}
|
|
134
|
-
@keyframes awsui_awsui-motion-fade-in-
|
|
134
|
+
@keyframes awsui_awsui-motion-fade-in-0_1d2i7_nzsqa_1 {
|
|
135
135
|
from {
|
|
136
136
|
opacity: 0;
|
|
137
137
|
}
|
|
@@ -139,7 +139,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
139
139
|
opacity: 1;
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
@keyframes awsui_awsui-motion-scale-
|
|
142
|
+
@keyframes awsui_awsui-motion-scale-popup_1d2i7_nzsqa_1 {
|
|
143
143
|
0% {
|
|
144
144
|
transform: scale(0.95);
|
|
145
145
|
}
|
|
@@ -148,21 +148,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
150
|
@media (prefers-reduced-motion: reduce) {
|
|
151
|
-
.
|
|
151
|
+
.awsui_dialog_1d2i7_nzsqa_105.awsui_refresh_1d2i7_nzsqa_128:not(#\9) {
|
|
152
152
|
animation: none;
|
|
153
153
|
transition: none;
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
|
-
.awsui-motion-disabled .
|
|
156
|
+
.awsui-motion-disabled .awsui_dialog_1d2i7_nzsqa_105.awsui_refresh_1d2i7_nzsqa_128:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_nzsqa_105.awsui_refresh_1d2i7_nzsqa_128:not(#\9) {
|
|
157
157
|
animation: none;
|
|
158
158
|
transition: none;
|
|
159
159
|
}
|
|
160
160
|
|
|
161
|
-
.
|
|
162
|
-
animation: awsui_awsui-motion-fade-
|
|
161
|
+
.awsui_root_1d2i7_nzsqa_161:not(#\9) {
|
|
162
|
+
animation: awsui_awsui-motion-fade-in_1d2i7_nzsqa_1 var(--motion-duration-extra-slow-8ks5rs, 270ms) ease-out;
|
|
163
163
|
animation-fill-mode: both;
|
|
164
164
|
}
|
|
165
|
-
@keyframes awsui_awsui-motion-fade-
|
|
165
|
+
@keyframes awsui_awsui-motion-fade-in_1d2i7_nzsqa_1 {
|
|
166
166
|
from {
|
|
167
167
|
opacity: 0.2;
|
|
168
168
|
}
|
|
@@ -171,25 +171,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
173
|
@media (prefers-reduced-motion: reduce) {
|
|
174
|
-
.
|
|
174
|
+
.awsui_root_1d2i7_nzsqa_161:not(#\9) {
|
|
175
175
|
animation: none;
|
|
176
176
|
transition: none;
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
|
-
.awsui-motion-disabled .
|
|
179
|
+
.awsui-motion-disabled .awsui_root_1d2i7_nzsqa_161:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_nzsqa_161:not(#\9) {
|
|
180
180
|
animation: none;
|
|
181
181
|
transition: none;
|
|
182
182
|
}
|
|
183
|
-
.
|
|
183
|
+
.awsui_root_1d2i7_nzsqa_161.awsui_refresh_1d2i7_nzsqa_128:not(#\9) {
|
|
184
184
|
animation-duration: var(--motion-duration-refresh-only-fast-addxjd, 115ms);
|
|
185
185
|
}
|
|
186
186
|
@media (prefers-reduced-motion: reduce) {
|
|
187
|
-
.
|
|
187
|
+
.awsui_root_1d2i7_nzsqa_161.awsui_refresh_1d2i7_nzsqa_128:not(#\9) {
|
|
188
188
|
animation: none;
|
|
189
189
|
transition: none;
|
|
190
190
|
}
|
|
191
191
|
}
|
|
192
|
-
.awsui-motion-disabled .
|
|
192
|
+
.awsui-motion-disabled .awsui_root_1d2i7_nzsqa_161.awsui_refresh_1d2i7_nzsqa_128:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_nzsqa_161.awsui_refresh_1d2i7_nzsqa_128:not(#\9) {
|
|
193
193
|
animation: none;
|
|
194
194
|
transition: none;
|
|
195
195
|
}
|
|
@@ -198,7 +198,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
198
198
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
199
199
|
SPDX-License-Identifier: Apache-2.0
|
|
200
200
|
*/
|
|
201
|
-
.
|
|
201
|
+
.awsui_root_1d2i7_nzsqa_161:not(#\9) {
|
|
202
202
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
203
203
|
border-collapse: separate;
|
|
204
204
|
border-spacing: 0;
|
|
@@ -247,11 +247,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
247
247
|
overflow: auto;
|
|
248
248
|
cursor: pointer;
|
|
249
249
|
}
|
|
250
|
-
.
|
|
250
|
+
.awsui_root_1d2i7_nzsqa_161.awsui_hidden_1d2i7_nzsqa_224:not(#\9) {
|
|
251
251
|
display: none;
|
|
252
252
|
}
|
|
253
253
|
|
|
254
|
-
.awsui_focus-
|
|
254
|
+
.awsui_focus-lock_1d2i7_nzsqa_228:not(#\9) {
|
|
255
255
|
align-self: flex-start;
|
|
256
256
|
margin: auto;
|
|
257
257
|
padding: var(--space-s-hv8c1d, 12px) 0;
|
|
@@ -259,7 +259,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
259
259
|
pointer-events: none;
|
|
260
260
|
}
|
|
261
261
|
|
|
262
|
-
.
|
|
262
|
+
.awsui_dialog_1d2i7_nzsqa_105:not(#\9) {
|
|
263
263
|
position: static;
|
|
264
264
|
top: 0;
|
|
265
265
|
transform: translate(0, 0);
|
|
@@ -269,21 +269,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
269
269
|
z-index: 5000;
|
|
270
270
|
pointer-events: all;
|
|
271
271
|
}
|
|
272
|
-
.
|
|
272
|
+
.awsui_dialog_1d2i7_nzsqa_105.awsui_small_1d2i7_nzsqa_246:not(#\9) {
|
|
273
273
|
max-width: 320px;
|
|
274
274
|
}
|
|
275
|
-
.
|
|
275
|
+
.awsui_dialog_1d2i7_nzsqa_105.awsui_medium_1d2i7_nzsqa_249:not(#\9) {
|
|
276
276
|
max-width: 600px;
|
|
277
277
|
}
|
|
278
|
-
.
|
|
278
|
+
.awsui_dialog_1d2i7_nzsqa_105.awsui_large_1d2i7_nzsqa_252:not(#\9) {
|
|
279
279
|
max-width: 820px;
|
|
280
280
|
}
|
|
281
|
-
.
|
|
281
|
+
.awsui_dialog_1d2i7_nzsqa_105.awsui_max_1d2i7_nzsqa_255.awsui_breakpoint-xs_1d2i7_nzsqa_255:not(#\9) {
|
|
282
282
|
max-width: calc(100vw - (2 * 4 * 10px + var(--space-xxxl-bo9z7f, 40px)));
|
|
283
283
|
margin: auto;
|
|
284
284
|
}
|
|
285
285
|
|
|
286
|
-
.
|
|
286
|
+
.awsui_container_1d2i7_nzsqa_260:not(#\9) {
|
|
287
287
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
288
288
|
border-collapse: separate;
|
|
289
289
|
border-spacing: 0;
|
|
@@ -328,44 +328,44 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
328
328
|
word-wrap: break-word;
|
|
329
329
|
}
|
|
330
330
|
@media screen and (-ms-high-contrast: active) {
|
|
331
|
-
.
|
|
331
|
+
.awsui_container_1d2i7_nzsqa_260:not(#\9) {
|
|
332
332
|
border: var(--border-field-width-idlekx, 2px) solid var(--color-border-container-top-srcvx4, transparent);
|
|
333
333
|
}
|
|
334
334
|
}
|
|
335
335
|
|
|
336
|
-
.
|
|
337
|
-
padding: var(--space-container-content-top-fsd8nr, 0px) var(--space-modal-horizontal-
|
|
336
|
+
.awsui_content_1d2i7_nzsqa_284:not(#\9) {
|
|
337
|
+
padding: var(--space-container-content-top-fsd8nr, 0px) var(--space-modal-horizontal-ah0xld, 20px) var(--space-modal-content-bottom-cecclv, 16px);
|
|
338
338
|
}
|
|
339
|
-
.
|
|
339
|
+
.awsui_content_1d2i7_nzsqa_284.awsui_no-paddings_1d2i7_nzsqa_287:not(#\9) {
|
|
340
340
|
padding: 0;
|
|
341
341
|
}
|
|
342
342
|
|
|
343
|
-
.
|
|
344
|
-
padding: var(--space-s-hv8c1d, 12px) var(--space-modal-horizontal-
|
|
343
|
+
.awsui_header_1d2i7_nzsqa_291:not(#\9) {
|
|
344
|
+
padding: var(--space-s-hv8c1d, 12px) var(--space-modal-horizontal-ah0xld, 20px);
|
|
345
345
|
background-color: var(--color-background-container-header-4flbq5, #ffffff);
|
|
346
346
|
border-bottom: 1px solid var(--color-border-container-divider-4ade7z, transparent);
|
|
347
347
|
border-radius: var(--border-radius-container-gh9ysk, 16px) var(--border-radius-container-gh9ysk, 16px) 0 0;
|
|
348
348
|
}
|
|
349
349
|
|
|
350
|
-
.awsui_header--
|
|
350
|
+
.awsui_header--text_1d2i7_nzsqa_298:not(#\9) {
|
|
351
351
|
/* used in test-utils */
|
|
352
352
|
}
|
|
353
353
|
|
|
354
|
-
.
|
|
354
|
+
.awsui_footer_1d2i7_nzsqa_302:not(#\9) {
|
|
355
355
|
border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
356
|
-
padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-
|
|
356
|
+
padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-tlw03i, 20px);
|
|
357
357
|
}
|
|
358
|
-
.
|
|
358
|
+
.awsui_footer_1d2i7_nzsqa_302:not(#\9):after {
|
|
359
359
|
content: "";
|
|
360
360
|
display: table;
|
|
361
361
|
clear: both;
|
|
362
362
|
}
|
|
363
363
|
|
|
364
|
-
.awsui_dismiss-
|
|
364
|
+
.awsui_dismiss-control_1d2i7_nzsqa_312:not(#\9) {
|
|
365
365
|
/* used in test-utils */
|
|
366
366
|
}
|
|
367
367
|
|
|
368
|
-
.awsui_modal-
|
|
368
|
+
.awsui_modal-open_1d2i7_nzsqa_316:not(#\9) {
|
|
369
369
|
overflow: hidden;
|
|
370
370
|
/*
|
|
371
371
|
* When padding-right is added to account for scrollbar being turned
|
|
@@ -2,27 +2,27 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"dialog": "
|
|
6
|
-
"modal-slide-up": "awsui_modal-slide-
|
|
7
|
-
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-
|
|
8
|
-
"refresh": "
|
|
9
|
-
"awsui-motion-scale-popup": "awsui_awsui-motion-scale-
|
|
10
|
-
"root": "
|
|
11
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
12
|
-
"hidden": "
|
|
13
|
-
"focus-lock": "awsui_focus-
|
|
14
|
-
"small": "
|
|
15
|
-
"medium": "
|
|
16
|
-
"large": "
|
|
17
|
-
"max": "
|
|
18
|
-
"breakpoint-xs": "awsui_breakpoint-
|
|
19
|
-
"container": "
|
|
20
|
-
"content": "
|
|
21
|
-
"no-paddings": "awsui_no-
|
|
22
|
-
"header": "
|
|
23
|
-
"header--text": "awsui_header--
|
|
24
|
-
"footer": "
|
|
25
|
-
"dismiss-control": "awsui_dismiss-
|
|
26
|
-
"modal-open": "awsui_modal-
|
|
5
|
+
"dialog": "awsui_dialog_1d2i7_nzsqa_105",
|
|
6
|
+
"modal-slide-up": "awsui_modal-slide-up_1d2i7_nzsqa_1",
|
|
7
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_nzsqa_1",
|
|
8
|
+
"refresh": "awsui_refresh_1d2i7_nzsqa_128",
|
|
9
|
+
"awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_nzsqa_1",
|
|
10
|
+
"root": "awsui_root_1d2i7_nzsqa_161",
|
|
11
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_nzsqa_1",
|
|
12
|
+
"hidden": "awsui_hidden_1d2i7_nzsqa_224",
|
|
13
|
+
"focus-lock": "awsui_focus-lock_1d2i7_nzsqa_228",
|
|
14
|
+
"small": "awsui_small_1d2i7_nzsqa_246",
|
|
15
|
+
"medium": "awsui_medium_1d2i7_nzsqa_249",
|
|
16
|
+
"large": "awsui_large_1d2i7_nzsqa_252",
|
|
17
|
+
"max": "awsui_max_1d2i7_nzsqa_255",
|
|
18
|
+
"breakpoint-xs": "awsui_breakpoint-xs_1d2i7_nzsqa_255",
|
|
19
|
+
"container": "awsui_container_1d2i7_nzsqa_260",
|
|
20
|
+
"content": "awsui_content_1d2i7_nzsqa_284",
|
|
21
|
+
"no-paddings": "awsui_no-paddings_1d2i7_nzsqa_287",
|
|
22
|
+
"header": "awsui_header_1d2i7_nzsqa_291",
|
|
23
|
+
"header--text": "awsui_header--text_1d2i7_nzsqa_298",
|
|
24
|
+
"footer": "awsui_footer_1d2i7_nzsqa_302",
|
|
25
|
+
"dismiss-control": "awsui_dismiss-control_1d2i7_nzsqa_312",
|
|
26
|
+
"modal-open": "awsui_modal-open_1d2i7_nzsqa_316"
|
|
27
27
|
};
|
|
28
28
|
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bottom.d.ts","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"bottom.d.ts","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAMtD,UAAU,4BAA6B,SAAQ,sBAAsB;IACnE,KAAK,EAAE,gBAAgB,CAAC;IACxB,uBAAuB,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxC,iBAAiB,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;CACpD;AAED,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,KAAK,EACL,uBAAuB,EACvB,aAAa,EACb,UAAU,EACV,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,QAAQ,GACT,EAAE,4BAA4B,eA2D9B"}
|
package/split-panel/bottom.js
CHANGED
|
@@ -2,17 +2,25 @@ import { __assign } from "tslib";
|
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import clsx from 'clsx';
|
|
5
|
-
import React from 'react';
|
|
5
|
+
import React, { useEffect, useRef } from 'react';
|
|
6
6
|
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
7
7
|
import styles from './styles.css.js';
|
|
8
8
|
import { useSplitPanelContext } from '../internal/context/split-panel-context';
|
|
9
9
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
10
|
+
import { useResizeObserver } from '../internal/hooks/container-queries';
|
|
10
11
|
export function SplitPanelContentBottom(_a) {
|
|
11
12
|
var _b, _c, _d;
|
|
12
13
|
var baseProps = _a.baseProps, isOpen = _a.isOpen, state = _a.state, transitioningElementRef = _a.transitioningElementRef, splitPanelRef = _a.splitPanelRef, cappedSize = _a.cappedSize, header = _a.header, resizeHandle = _a.resizeHandle, children = _a.children, appLayoutMaxWidth = _a.appLayoutMaxWidth, panelHeaderId = _a.panelHeaderId, onToggle = _a.onToggle;
|
|
13
14
|
var isRefresh = useVisualRefresh();
|
|
14
|
-
var _e = useSplitPanelContext(), bottomOffset = _e.bottomOffset, leftOffset = _e.leftOffset, rightOffset = _e.rightOffset, disableContentPaddings = _e.disableContentPaddings, contentWrapperPaddings = _e.contentWrapperPaddings, isMobile = _e.isMobile,
|
|
15
|
+
var _e = useSplitPanelContext(), bottomOffset = _e.bottomOffset, leftOffset = _e.leftOffset, rightOffset = _e.rightOffset, disableContentPaddings = _e.disableContentPaddings, contentWrapperPaddings = _e.contentWrapperPaddings, isMobile = _e.isMobile, reportHeaderHeight = _e.reportHeaderHeight;
|
|
15
16
|
var transitionContentBottomRef = useMergeRefs(splitPanelRef || null, transitioningElementRef);
|
|
17
|
+
var headerRef = useRef(null);
|
|
18
|
+
useResizeObserver(headerRef, function (entry) { return reportHeaderHeight(entry.borderBoxHeight); });
|
|
19
|
+
useEffect(function () {
|
|
20
|
+
// report empty height when unmounting the panel
|
|
21
|
+
return function () { return reportHeaderHeight(0); };
|
|
22
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
23
|
+
}, []);
|
|
16
24
|
var centeredMaxWidthClasses = clsx((_b = {},
|
|
17
25
|
_b[styles['pane-bottom-center-align']] = isRefresh,
|
|
18
26
|
_b[styles['pane-bottom-content-nav-padding']] = contentWrapperPaddings === null || contentWrapperPaddings === void 0 ? void 0 : contentWrapperPaddings.closedNav,
|
|
@@ -32,7 +40,7 @@ export function SplitPanelContentBottom(_a) {
|
|
|
32
40
|
}, ref: transitionContentBottomRef }),
|
|
33
41
|
isOpen && React.createElement("div", { className: styles['slider-wrapper-bottom'] }, resizeHandle),
|
|
34
42
|
React.createElement("div", { className: styles['drawer-content-bottom'], "aria-labelledby": panelHeaderId, role: "region" },
|
|
35
|
-
React.createElement("div", { className: clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses), ref:
|
|
43
|
+
React.createElement("div", { className: clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses), ref: headerRef }, header),
|
|
36
44
|
React.createElement("div", { className: clsx(styles['content-bottom'], centeredMaxWidthClasses), "aria-hidden": !isOpen },
|
|
37
45
|
React.createElement("div", { className: clsx((_d = {}, _d[styles['content-bottom-max-width']] = isRefresh, _d)), style: appLayoutMaxWidth }, children)))));
|
|
38
46
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bottom.js","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"bottom.js","sourceRoot":"","sources":["../../../src/split-panel/bottom.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, { useEffect, useRef } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { TransitionStatus } from '../internal/components/transition';\nimport { SplitPanelContentProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useResizeObserver } from '../internal/hooks/container-queries';\n\ninterface SplitPanelContentBottomProps extends SplitPanelContentProps {\n state: TransitionStatus;\n transitioningElementRef: React.Ref<any>;\n appLayoutMaxWidth: React.CSSProperties | undefined;\n}\n\nexport function SplitPanelContentBottom({\n baseProps,\n isOpen,\n state,\n transitioningElementRef,\n splitPanelRef,\n cappedSize,\n header,\n resizeHandle,\n children,\n appLayoutMaxWidth,\n panelHeaderId,\n onToggle,\n}: SplitPanelContentBottomProps) {\n const isRefresh = useVisualRefresh();\n const {\n bottomOffset,\n leftOffset,\n rightOffset,\n disableContentPaddings,\n contentWrapperPaddings,\n isMobile,\n reportHeaderHeight,\n } = useSplitPanelContext();\n const transitionContentBottomRef = useMergeRefs(splitPanelRef || null, transitioningElementRef);\n\n const headerRef = useRef<HTMLDivElement>(null);\n useResizeObserver(headerRef, entry => reportHeaderHeight(entry.borderBoxHeight));\n useEffect(() => {\n // report empty height when unmounting the panel\n return () => reportHeaderHeight(0);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const centeredMaxWidthClasses = clsx({\n [styles['pane-bottom-center-align']]: isRefresh,\n [styles['pane-bottom-content-nav-padding']]: contentWrapperPaddings?.closedNav,\n [styles['pane-bottom-content-tools-padding']]: contentWrapperPaddings?.closedTools,\n });\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root, styles.drawer, styles['position-bottom'], {\n [styles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n [styles['drawer-disable-content-paddings']]: disableContentPaddings,\n [styles.animating]: isRefresh && (state === 'entering' || state === 'exiting'),\n [styles.refresh]: isRefresh,\n })}\n onClick={() => !isOpen && onToggle()}\n style={{\n bottom: bottomOffset,\n left: leftOffset,\n right: rightOffset,\n height: isOpen ? cappedSize : undefined,\n }}\n ref={transitionContentBottomRef}\n >\n {isOpen && <div className={styles['slider-wrapper-bottom']}>{resizeHandle}</div>}\n <div className={styles['drawer-content-bottom']} aria-labelledby={panelHeaderId} role=\"region\">\n <div className={clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses)} ref={headerRef}>\n {header}\n </div>\n <div className={clsx(styles['content-bottom'], centeredMaxWidthClasses)} aria-hidden={!isOpen}>\n <div className={clsx({ [styles['content-bottom-max-width']]: isRefresh })} style={appLayoutMaxWidth}>\n {children}\n </div>\n </div>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/split-panel/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAmBjE,OAAO,EAAE,eAAe,EAAE,CAAC;AAK3B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,qBAA6B,EAC7B,WAAW,EACX,GAAG,SAAS,EACb,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/split-panel/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAmBjE,OAAO,EAAE,eAAe,EAAE,CAAC;AAK3B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,qBAA6B,EAC7B,WAAW,EACX,GAAG,SAAS,EACb,EAAE,eAAe,eA4RjB"}
|
package/split-panel/index.js
CHANGED
|
@@ -29,7 +29,7 @@ export default function SplitPanel(_a) {
|
|
|
29
29
|
var header = _a.header, children = _a.children, _b = _a.hidePreferencesButton, hidePreferencesButton = _b === void 0 ? false : _b, i18nStrings = _a.i18nStrings, restProps = __rest(_a, ["header", "children", "hidePreferencesButton", "i18nStrings"]);
|
|
30
30
|
var isRefresh = useVisualRefresh();
|
|
31
31
|
var __internalRootRef = useBaseComponent('SplitPanel').__internalRootRef;
|
|
32
|
-
var _c = useSplitPanelContext(), size = _c.size, getMaxWidth = _c.getMaxWidth, getMaxHeight = _c.getMaxHeight, position = _c.position, topOffset = _c.topOffset, bottomOffset = _c.bottomOffset, rightOffset = _c.rightOffset, contentWidthStyles = _c.contentWidthStyles, isOpen = _c.isOpen, isForcedPosition = _c.isForcedPosition,
|
|
32
|
+
var _c = useSplitPanelContext(), size = _c.size, getMaxWidth = _c.getMaxWidth, getMaxHeight = _c.getMaxHeight, position = _c.position, topOffset = _c.topOffset, bottomOffset = _c.bottomOffset, rightOffset = _c.rightOffset, contentWidthStyles = _c.contentWidthStyles, isOpen = _c.isOpen, isForcedPosition = _c.isForcedPosition, lastInteraction = _c.lastInteraction, onPreferencesChange = _c.onPreferencesChange, onResize = _c.onResize, onToggle = _c.onToggle, reportSize = _c.reportSize, setOpenButtonAriaLabel = _c.setOpenButtonAriaLabel;
|
|
33
33
|
var baseProps = getBaseProps(restProps);
|
|
34
34
|
var focusVisible = useFocusVisible();
|
|
35
35
|
var _d = useState(false), isPreferencesOpen = _d[0], setPreferencesOpen = _d[1];
|
|
@@ -134,7 +134,7 @@ export default function SplitPanel(_a) {
|
|
|
134
134
|
root.style[property] = valueBefore;
|
|
135
135
|
}
|
|
136
136
|
}, [rightOffset, __internalRootRef]);
|
|
137
|
-
var mergedRef = useMergeRefs(
|
|
137
|
+
var mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);
|
|
138
138
|
/**
|
|
139
139
|
* The AppLayout factor moved the circular buttons out of the
|
|
140
140
|
* SplitPanel and into the Tools component. This conditional
|
package/split-panel/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/split-panel/index.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, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\n\nimport { SplitPanelProps, SizeControlProps } from './interfaces';\nimport ResizeHandler from './icons/resize-handler';\nimport PreferencesModal from './preferences-modal';\nimport { usePointerEvents } from './utils/use-pointer-events';\nimport { useKeyboardEvents } from './utils/use-keyboard-events';\n\nimport styles from './styles.css.js';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { AppLayoutContext } from '../internal/context/app-layout-context';\nimport { getLimitedValue } from './utils/size-utils';\nimport { Transition } from '../internal/components/transition';\nimport { ButtonProps } from '../button/interfaces';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SplitPanelContentSide } from './side';\nimport { SplitPanelContentBottom } from './bottom';\n\nexport { SplitPanelProps };\n\nconst MIN_HEIGHT = 160;\nconst MIN_WIDTH = 280;\n\nexport default function SplitPanel({\n header,\n children,\n hidePreferencesButton = false,\n i18nStrings,\n ...restProps\n}: SplitPanelProps) {\n const isRefresh = useVisualRefresh();\n const { __internalRootRef } = useBaseComponent('SplitPanel');\n const {\n size,\n getMaxWidth,\n getMaxHeight,\n position,\n topOffset,\n bottomOffset,\n rightOffset,\n contentWidthStyles,\n isOpen,\n isForcedPosition,\n splitPanelRef,\n lastInteraction,\n onPreferencesChange,\n onResize,\n onToggle,\n reportSize,\n setOpenButtonAriaLabel,\n } = useSplitPanelContext();\n const baseProps = getBaseProps(restProps);\n const focusVisible = useFocusVisible();\n const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n const [relativeSize, setRelativeSize] = useState(0);\n const [maxSize, setMaxSize] = useState(size);\n const minSize = position === 'bottom' ? MIN_HEIGHT : MIN_WIDTH;\n const cappedSize = getLimitedValue(minSize, size, maxSize);\n const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n useEffect(() => {\n setOpenButtonAriaLabel?.(i18nStrings.openButtonAriaLabel);\n }, [setOpenButtonAriaLabel, i18nStrings.openButtonAriaLabel]);\n\n useEffect(() => {\n // effects are called inside out in the components tree\n // wait one frame to allow app-layout to complete its calculations\n const handle = requestAnimationFrame(() => {\n const maxSize = position === 'bottom' ? getMaxHeight() : getMaxWidth();\n setRelativeSize((size / maxSize) * 100);\n setMaxSize(maxSize);\n });\n return () => cancelAnimationFrame(handle);\n }, [size, position, getMaxHeight, getMaxWidth]);\n\n useEffect(() => {\n reportSize(cappedSize);\n }, [reportSize, cappedSize]);\n\n useEffect(() => {\n const handler = () => setMaxSize(position === 'bottom' ? getMaxHeight() : getMaxWidth());\n window.addEventListener('resize', handler);\n return () => window.removeEventListener('resize', handler);\n }, [position, getMaxWidth, getMaxHeight]);\n\n const setSidePanelWidth = (width: number) => {\n const maxWidth = getMaxWidth();\n const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n\n if (isOpen && maxWidth >= MIN_WIDTH) {\n onResize({ size });\n }\n };\n\n const setBottomPanelHeight = (height: number) => {\n const maxHeight = getMaxHeight();\n const size = getLimitedValue(MIN_HEIGHT, height, maxHeight);\n\n if (isOpen && maxHeight >= MIN_HEIGHT) {\n onResize({ size });\n }\n };\n\n const splitPanelRefObject = useRef<HTMLDivElement>(null);\n const handleRef = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n splitPanelRef: splitPanelRefObject,\n handleRef,\n setSidePanelWidth,\n setBottomPanelHeight,\n };\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const toggleRef = useRef<ButtonProps.Ref>(null);\n const closeRef = useRef<ButtonProps.Ref>(null);\n const preferencesRef = useRef<ButtonProps.Ref>(null);\n\n useEffectOnUpdate(() => {\n switch (lastInteraction?.type) {\n case 'open':\n return handleRef.current?.focus();\n case 'close':\n return toggleRef.current?.focus();\n case 'position':\n return preferencesRef.current?.focus();\n default:\n return;\n }\n }, [lastInteraction]);\n\n const wrappedChildren = (\n <AppLayoutContext.Provider\n value={{\n stickyOffsetTop: topOffset,\n stickyOffsetBottom: bottomOffset,\n }}\n >\n {children}\n </AppLayoutContext.Provider>\n );\n\n const panelHeaderId = useUniqueId('split-panel-header');\n\n const wrappedHeader = (\n <div className={styles.header} style={appLayoutMaxWidth}>\n <h2 className={styles['header-text']} id={panelHeaderId}>\n {header}\n </h2>\n <div className={styles['header-actions']}>\n {!hidePreferencesButton && isOpen && (\n <>\n <InternalButton\n className={styles['preferences-button']}\n iconName=\"settings\"\n variant=\"icon\"\n onClick={() => setPreferencesOpen(true)}\n formAction=\"none\"\n ariaLabel={i18nStrings.preferencesTitle}\n ref={preferencesRef}\n />\n <span className={styles.divider} />\n </>\n )}\n\n {isOpen ? (\n <InternalButton\n className={styles['close-button']}\n iconName={isRefresh && position === 'side' ? 'angle-right' : isRefresh ? 'angle-down' : 'close'}\n variant=\"icon\"\n onClick={onToggle}\n formAction=\"none\"\n ariaLabel={i18nStrings.closeButtonAriaLabel}\n ref={closeRef}\n ariaExpanded={isOpen}\n />\n ) : position === 'side' ? null : (\n <InternalButton\n className={styles['open-button']}\n iconName=\"angle-up\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={i18nStrings.openButtonAriaLabel}\n ref={toggleRef}\n ariaExpanded={isOpen}\n />\n )}\n </div>\n </div>\n );\n\n const resizeHandle = (\n <div\n ref={handleRef}\n role=\"slider\"\n tabIndex={0}\n aria-label={i18nStrings.resizeHandleAriaLabel}\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={relativeSize}\n className={clsx(styles.slider, styles[`slider-${position}`])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n {...focusVisible}\n >\n <ResizeHandler className={clsx(styles['slider-icon'], styles[`slider-icon-${position}`])} />\n </div>\n );\n\n /*\n This effect forces the browser to recalculate the layout\n whenever the split panel might have moved.\n\n This is needed as a workaround for a bug in Safari, which does\n not automatically calculate the new position of the split panel\n _content_ when the split panel moves.\n */\n useLayoutEffect(() => {\n const root = __internalRootRef.current;\n\n if (root) {\n const property = 'transform';\n const temporaryValue = 'translateZ(0)';\n\n const valueBefore = root.style[property];\n root.style[property] = temporaryValue;\n\n // This line forces the browser to recalculate the layout\n void root.offsetHeight;\n\n root.style[property] = valueBefore;\n }\n }, [rightOffset, __internalRootRef]);\n\n const mergedRef = useMergeRefs(splitPanelRef, splitPanelRefObject, __internalRootRef);\n\n /**\n * The AppLayout factor moved the circular buttons out of the\n * SplitPanel and into the Tools component. This conditional\n * is still needed for the early return to prevent execution\n * of the following code.\n */\n if (isRefresh && !isOpen && position === 'side') {\n return <></>;\n }\n\n return (\n <Transition in={isOpen ?? false}>\n {(state, transitioningElementRef) => (\n <>\n {position === 'side' && (\n <SplitPanelContentSide\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={cappedSize}\n onToggle={onToggle}\n i18nStrings={i18nStrings}\n toggleRef={toggleRef}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n >\n {wrappedChildren}\n </SplitPanelContentSide>\n )}\n\n {position === 'bottom' && (\n <SplitPanelContentBottom\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={cappedSize}\n onToggle={onToggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n state={state}\n transitioningElementRef={transitioningElementRef}\n appLayoutMaxWidth={appLayoutMaxWidth}\n >\n {wrappedChildren}\n </SplitPanelContentBottom>\n )}\n {isPreferencesOpen && (\n <PreferencesModal\n visible={true}\n preferences={{ position }}\n disabledSidePosition={position === 'bottom' && isForcedPosition}\n isRefresh={isRefresh}\n i18nStrings={{\n header: i18nStrings.preferencesTitle,\n confirm: i18nStrings.preferencesConfirm,\n cancel: i18nStrings.preferencesCancel,\n positionLabel: i18nStrings.preferencesPositionLabel,\n positionDescription: i18nStrings.preferencesPositionDescription,\n positionBottom: i18nStrings.preferencesPositionBottom,\n positionSide: i18nStrings.preferencesPositionSide,\n }}\n onConfirm={preferences => {\n onPreferencesChange({ ...preferences });\n setPreferencesOpen(false);\n }}\n onDismiss={() => {\n setPreferencesOpen(false);\n }}\n />\n )}\n </>\n )}\n </Transition>\n );\n}\n\napplyDisplayName(SplitPanel, 'SplitPanel');\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/split-panel/index.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, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\n\nimport { SplitPanelProps, SizeControlProps } from './interfaces';\nimport ResizeHandler from './icons/resize-handler';\nimport PreferencesModal from './preferences-modal';\nimport { usePointerEvents } from './utils/use-pointer-events';\nimport { useKeyboardEvents } from './utils/use-keyboard-events';\n\nimport styles from './styles.css.js';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { AppLayoutContext } from '../internal/context/app-layout-context';\nimport { getLimitedValue } from './utils/size-utils';\nimport { Transition } from '../internal/components/transition';\nimport { ButtonProps } from '../button/interfaces';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SplitPanelContentSide } from './side';\nimport { SplitPanelContentBottom } from './bottom';\n\nexport { SplitPanelProps };\n\nconst MIN_HEIGHT = 160;\nconst MIN_WIDTH = 280;\n\nexport default function SplitPanel({\n header,\n children,\n hidePreferencesButton = false,\n i18nStrings,\n ...restProps\n}: SplitPanelProps) {\n const isRefresh = useVisualRefresh();\n const { __internalRootRef } = useBaseComponent('SplitPanel');\n const {\n size,\n getMaxWidth,\n getMaxHeight,\n position,\n topOffset,\n bottomOffset,\n rightOffset,\n contentWidthStyles,\n isOpen,\n isForcedPosition,\n lastInteraction,\n onPreferencesChange,\n onResize,\n onToggle,\n reportSize,\n setOpenButtonAriaLabel,\n } = useSplitPanelContext();\n const baseProps = getBaseProps(restProps);\n const focusVisible = useFocusVisible();\n const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n const [relativeSize, setRelativeSize] = useState(0);\n const [maxSize, setMaxSize] = useState(size);\n const minSize = position === 'bottom' ? MIN_HEIGHT : MIN_WIDTH;\n const cappedSize = getLimitedValue(minSize, size, maxSize);\n const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n useEffect(() => {\n setOpenButtonAriaLabel?.(i18nStrings.openButtonAriaLabel);\n }, [setOpenButtonAriaLabel, i18nStrings.openButtonAriaLabel]);\n\n useEffect(() => {\n // effects are called inside out in the components tree\n // wait one frame to allow app-layout to complete its calculations\n const handle = requestAnimationFrame(() => {\n const maxSize = position === 'bottom' ? getMaxHeight() : getMaxWidth();\n setRelativeSize((size / maxSize) * 100);\n setMaxSize(maxSize);\n });\n return () => cancelAnimationFrame(handle);\n }, [size, position, getMaxHeight, getMaxWidth]);\n\n useEffect(() => {\n reportSize(cappedSize);\n }, [reportSize, cappedSize]);\n\n useEffect(() => {\n const handler = () => setMaxSize(position === 'bottom' ? getMaxHeight() : getMaxWidth());\n window.addEventListener('resize', handler);\n return () => window.removeEventListener('resize', handler);\n }, [position, getMaxWidth, getMaxHeight]);\n\n const setSidePanelWidth = (width: number) => {\n const maxWidth = getMaxWidth();\n const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n\n if (isOpen && maxWidth >= MIN_WIDTH) {\n onResize({ size });\n }\n };\n\n const setBottomPanelHeight = (height: number) => {\n const maxHeight = getMaxHeight();\n const size = getLimitedValue(MIN_HEIGHT, height, maxHeight);\n\n if (isOpen && maxHeight >= MIN_HEIGHT) {\n onResize({ size });\n }\n };\n\n const splitPanelRefObject = useRef<HTMLDivElement>(null);\n const handleRef = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n splitPanelRef: splitPanelRefObject,\n handleRef,\n setSidePanelWidth,\n setBottomPanelHeight,\n };\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const toggleRef = useRef<ButtonProps.Ref>(null);\n const closeRef = useRef<ButtonProps.Ref>(null);\n const preferencesRef = useRef<ButtonProps.Ref>(null);\n\n useEffectOnUpdate(() => {\n switch (lastInteraction?.type) {\n case 'open':\n return handleRef.current?.focus();\n case 'close':\n return toggleRef.current?.focus();\n case 'position':\n return preferencesRef.current?.focus();\n default:\n return;\n }\n }, [lastInteraction]);\n\n const wrappedChildren = (\n <AppLayoutContext.Provider\n value={{\n stickyOffsetTop: topOffset,\n stickyOffsetBottom: bottomOffset,\n }}\n >\n {children}\n </AppLayoutContext.Provider>\n );\n\n const panelHeaderId = useUniqueId('split-panel-header');\n\n const wrappedHeader = (\n <div className={styles.header} style={appLayoutMaxWidth}>\n <h2 className={styles['header-text']} id={panelHeaderId}>\n {header}\n </h2>\n <div className={styles['header-actions']}>\n {!hidePreferencesButton && isOpen && (\n <>\n <InternalButton\n className={styles['preferences-button']}\n iconName=\"settings\"\n variant=\"icon\"\n onClick={() => setPreferencesOpen(true)}\n formAction=\"none\"\n ariaLabel={i18nStrings.preferencesTitle}\n ref={preferencesRef}\n />\n <span className={styles.divider} />\n </>\n )}\n\n {isOpen ? (\n <InternalButton\n className={styles['close-button']}\n iconName={isRefresh && position === 'side' ? 'angle-right' : isRefresh ? 'angle-down' : 'close'}\n variant=\"icon\"\n onClick={onToggle}\n formAction=\"none\"\n ariaLabel={i18nStrings.closeButtonAriaLabel}\n ref={closeRef}\n ariaExpanded={isOpen}\n />\n ) : position === 'side' ? null : (\n <InternalButton\n className={styles['open-button']}\n iconName=\"angle-up\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={i18nStrings.openButtonAriaLabel}\n ref={toggleRef}\n ariaExpanded={isOpen}\n />\n )}\n </div>\n </div>\n );\n\n const resizeHandle = (\n <div\n ref={handleRef}\n role=\"slider\"\n tabIndex={0}\n aria-label={i18nStrings.resizeHandleAriaLabel}\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={relativeSize}\n className={clsx(styles.slider, styles[`slider-${position}`])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n {...focusVisible}\n >\n <ResizeHandler className={clsx(styles['slider-icon'], styles[`slider-icon-${position}`])} />\n </div>\n );\n\n /*\n This effect forces the browser to recalculate the layout\n whenever the split panel might have moved.\n\n This is needed as a workaround for a bug in Safari, which does\n not automatically calculate the new position of the split panel\n _content_ when the split panel moves.\n */\n useLayoutEffect(() => {\n const root = __internalRootRef.current;\n\n if (root) {\n const property = 'transform';\n const temporaryValue = 'translateZ(0)';\n\n const valueBefore = root.style[property];\n root.style[property] = temporaryValue;\n\n // This line forces the browser to recalculate the layout\n void root.offsetHeight;\n\n root.style[property] = valueBefore;\n }\n }, [rightOffset, __internalRootRef]);\n\n const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n /**\n * The AppLayout factor moved the circular buttons out of the\n * SplitPanel and into the Tools component. This conditional\n * is still needed for the early return to prevent execution\n * of the following code.\n */\n if (isRefresh && !isOpen && position === 'side') {\n return <></>;\n }\n\n return (\n <Transition in={isOpen ?? false}>\n {(state, transitioningElementRef) => (\n <>\n {position === 'side' && (\n <SplitPanelContentSide\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={cappedSize}\n onToggle={onToggle}\n i18nStrings={i18nStrings}\n toggleRef={toggleRef}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n >\n {wrappedChildren}\n </SplitPanelContentSide>\n )}\n\n {position === 'bottom' && (\n <SplitPanelContentBottom\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={cappedSize}\n onToggle={onToggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n state={state}\n transitioningElementRef={transitioningElementRef}\n appLayoutMaxWidth={appLayoutMaxWidth}\n >\n {wrappedChildren}\n </SplitPanelContentBottom>\n )}\n {isPreferencesOpen && (\n <PreferencesModal\n visible={true}\n preferences={{ position }}\n disabledSidePosition={position === 'bottom' && isForcedPosition}\n isRefresh={isRefresh}\n i18nStrings={{\n header: i18nStrings.preferencesTitle,\n confirm: i18nStrings.preferencesConfirm,\n cancel: i18nStrings.preferencesCancel,\n positionLabel: i18nStrings.preferencesPositionLabel,\n positionDescription: i18nStrings.preferencesPositionDescription,\n positionBottom: i18nStrings.preferencesPositionBottom,\n positionSide: i18nStrings.preferencesPositionSide,\n }}\n onConfirm={preferences => {\n onPreferencesChange({ ...preferences });\n setPreferencesOpen(false);\n }}\n onDismiss={() => {\n setPreferencesOpen(false);\n }}\n />\n )}\n </>\n )}\n </Transition>\n );\n}\n\napplyDisplayName(SplitPanel, 'SplitPanel');\n"]}
|
|
@@ -12,8 +12,10 @@ interface TableBodyCellProps {
|
|
|
12
12
|
isNextSelected: boolean;
|
|
13
13
|
isPrevSelected: boolean;
|
|
14
14
|
children?: React.ReactNode;
|
|
15
|
+
hasSelection?: boolean;
|
|
16
|
+
hasFooter?: boolean;
|
|
15
17
|
}
|
|
16
|
-
export declare function TableBodyCell({ className, style, children, wrapLines, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, isEvenRow, stripedRows, }: TableBodyCellProps): JSX.Element;
|
|
18
|
+
export declare function TableBodyCell({ className, style, children, wrapLines, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, isEvenRow, stripedRows, hasSelection, hasFooter, }: TableBodyCellProps): JSX.Element;
|
|
17
19
|
interface TableBodyCellContentProps<ItemType> extends TableBodyCellProps {
|
|
18
20
|
column: TableProps.ColumnDefinition<ItemType>;
|
|
19
21
|
item: ItemType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,cAAc,EACd,SAAS,EACT,WAAW,EACX,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,eAyBpB;AAED,UAAU,yBAAyB,CAAC,QAAQ,CAAE,SAAQ,kBAAkB;IACtE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,yBAAyB,CAAC,QAAQ,CAAC,eAE5G"}
|
package/table/body-cell/index.js
CHANGED
|
@@ -4,9 +4,11 @@ import { __assign, __rest } from "tslib";
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import styles from './styles.css.js';
|
|
6
6
|
import React from 'react';
|
|
7
|
+
import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
|
|
7
8
|
export function TableBodyCell(_a) {
|
|
8
|
-
var className = _a.className, style = _a.style, children = _a.children, wrapLines = _a.wrapLines, isFirstRow = _a.isFirstRow, isLastRow = _a.isLastRow, isSelected = _a.isSelected, isNextSelected = _a.isNextSelected, isPrevSelected = _a.isPrevSelected, isEvenRow = _a.isEvenRow, stripedRows = _a.stripedRows;
|
|
9
|
-
|
|
9
|
+
var className = _a.className, style = _a.style, children = _a.children, wrapLines = _a.wrapLines, isFirstRow = _a.isFirstRow, isLastRow = _a.isLastRow, isSelected = _a.isSelected, isNextSelected = _a.isNextSelected, isPrevSelected = _a.isPrevSelected, isEvenRow = _a.isEvenRow, stripedRows = _a.stripedRows, hasSelection = _a.hasSelection, hasFooter = _a.hasFooter;
|
|
10
|
+
var isVisualRefresh = useVisualRefresh();
|
|
11
|
+
return (React.createElement("td", { style: style, className: clsx(className, styles['body-cell'], wrapLines && styles['body-cell-wrap'], isFirstRow && styles['body-cell-first-row'], isLastRow && styles['body-cell-last-row'], isSelected && styles['body-cell-selected'], isNextSelected && styles['body-cell-next-selected'], isPrevSelected && styles['body-cell-prev-selected'], !isEvenRow && stripedRows && styles['body-cell-shaded'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], hasSelection && styles['has-selection'], hasFooter && styles['has-footer']) }, children));
|
|
10
12
|
}
|
|
11
13
|
export function TableBodyCellContent(_a) {
|
|
12
14
|
var item = _a.item, column = _a.column, rest = __rest(_a, ["item", "column"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAkBxE,MAAM,UAAU,aAAa,CAAC,EAcT;QAbnB,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,SAAS,eAAA;IAET,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,OAAO,CACL,4BACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,WAAW,CAAC,EACnB,SAAS,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACrC,UAAU,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAC3C,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,UAAU,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAC1C,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,CAAC,SAAS,IAAI,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACvD,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACzC,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC9C,YAAY,IAAI,MAAM,CAAC,eAAe,CAAC,EACvC,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,CAClC,IAEA,QAAQ,CACN,CACN,CAAC;AACJ,CAAC;AAOD,MAAM,UAAU,oBAAoB,CAAW,EAA8D;IAA5D,IAAA,IAAI,UAAA,EAAE,MAAM,YAAA,EAAK,IAAI,cAAvB,kBAAyB,CAAF;IACpE,OAAO,oBAAC,aAAa,eAAK,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAiB,CAAC;AACtE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React from 'react';\nimport { TableProps } from '../interfaces';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\n\ninterface TableBodyCellProps {\n className?: string;\n style?: React.CSSProperties;\n wrapLines: boolean | undefined;\n isFirstRow: boolean;\n isLastRow: boolean;\n isEvenRow?: boolean;\n stripedRows?: boolean;\n isSelected: boolean;\n isNextSelected: boolean;\n isPrevSelected: boolean;\n children?: React.ReactNode;\n hasSelection?: boolean;\n hasFooter?: boolean;\n}\n\nexport function TableBodyCell({\n className,\n style,\n children,\n wrapLines,\n isFirstRow,\n isLastRow,\n isSelected,\n isNextSelected,\n isPrevSelected,\n isEvenRow,\n stripedRows,\n hasSelection,\n hasFooter,\n}: TableBodyCellProps) {\n const isVisualRefresh = useVisualRefresh();\n\n return (\n <td\n style={style}\n className={clsx(\n className,\n styles['body-cell'],\n wrapLines && styles['body-cell-wrap'],\n isFirstRow && styles['body-cell-first-row'],\n isLastRow && styles['body-cell-last-row'],\n isSelected && styles['body-cell-selected'],\n isNextSelected && styles['body-cell-next-selected'],\n isPrevSelected && styles['body-cell-prev-selected'],\n !isEvenRow && stripedRows && styles['body-cell-shaded'],\n stripedRows && styles['has-striped-rows'],\n isVisualRefresh && styles['is-visual-refresh'],\n hasSelection && styles['has-selection'],\n hasFooter && styles['has-footer']\n )}\n >\n {children}\n </td>\n );\n}\n\ninterface TableBodyCellContentProps<ItemType> extends TableBodyCellProps {\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n}\n\nexport function TableBodyCellContent<ItemType>({ item, column, ...rest }: TableBodyCellContentProps<ItemType>) {\n return <TableBodyCell {...rest}>{column.cell(item)}</TableBodyCell>;\n}\n"]}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"body-cell": "awsui_body-
|
|
5
|
-
"body-cell-wrap": "awsui_body-cell-
|
|
6
|
-
"body-cell-first-row": "awsui_body-cell-first-
|
|
7
|
-
"body-cell-last-row": "awsui_body-cell-last-
|
|
8
|
-
"body-cell-
|
|
9
|
-
"
|
|
10
|
-
"body-cell-
|
|
11
|
-
"body-cell-
|
|
4
|
+
"body-cell": "awsui_body-cell_c6tup_9o7yk_9",
|
|
5
|
+
"body-cell-wrap": "awsui_body-cell-wrap_c6tup_9o7yk_18",
|
|
6
|
+
"body-cell-first-row": "awsui_body-cell-first-row_c6tup_9o7yk_30",
|
|
7
|
+
"body-cell-last-row": "awsui_body-cell-last-row_c6tup_9o7yk_33",
|
|
8
|
+
"body-cell-selected": "awsui_body-cell-selected_c6tup_9o7yk_33",
|
|
9
|
+
"has-footer": "awsui_has-footer_c6tup_9o7yk_33",
|
|
10
|
+
"body-cell-shaded": "awsui_body-cell-shaded_c6tup_9o7yk_43",
|
|
11
|
+
"body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_9o7yk_65",
|
|
12
|
+
"body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_9o7yk_69",
|
|
13
|
+
"is-visual-refresh": "awsui_is-visual-refresh_c6tup_9o7yk_98",
|
|
14
|
+
"has-selection": "awsui_has-selection_c6tup_9o7yk_114",
|
|
15
|
+
"has-striped-rows": "awsui_has-striped-rows_c6tup_9o7yk_117"
|
|
12
16
|
};
|
|
13
17
|
|