@cloudscape-design/components 3.0.284 → 3.0.286
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +30 -30
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/drawer/interfaces.d.ts +5 -1
- package/app-layout/drawer/interfaces.d.ts.map +1 -1
- package/app-layout/drawer/interfaces.js.map +1 -1
- package/app-layout/drawer/resizable-drawer.js +1 -1
- package/app-layout/drawer/resizable-drawer.js.map +1 -1
- package/app-layout/index.d.ts.map +1 -1
- package/app-layout/index.js +28 -16
- package/app-layout/index.js.map +1 -1
- package/app-layout/mobile-toolbar/index.d.ts +2 -1
- package/app-layout/mobile-toolbar/index.d.ts.map +1 -1
- package/app-layout/mobile-toolbar/index.js +2 -2
- package/app-layout/mobile-toolbar/index.js.map +1 -1
- package/app-layout/notifications/styles.css.js +3 -3
- package/app-layout/notifications/styles.scoped.css +7 -7
- package/app-layout/notifications/styles.selectors.js +3 -3
- package/app-layout/visual-refresh/styles.css.js +72 -72
- package/app-layout/visual-refresh/styles.scoped.css +275 -274
- package/app-layout/visual-refresh/styles.selectors.js +72 -72
- package/column-layout/styles.css.js +13 -13
- package/column-layout/styles.scoped.css +45 -45
- package/column-layout/styles.selectors.js +13 -13
- package/container/internal.d.ts +2 -1
- package/container/internal.d.ts.map +1 -1
- package/container/internal.js +2 -2
- package/container/internal.js.map +1 -1
- package/container/use-sticky-header.d.ts +12 -1
- package/container/use-sticky-header.d.ts.map +1 -1
- package/container/use-sticky-header.js +41 -16
- package/container/use-sticky-header.js.map +1 -1
- package/flashbar/styles.css.js +45 -45
- package/flashbar/styles.scoped.css +169 -169
- package/flashbar/styles.selectors.js +45 -45
- package/header/internal.d.ts.map +1 -1
- package/header/internal.js +4 -1
- package/header/internal.js.map +1 -1
- package/internal/base-component/styles.scoped.css +0 -3
- package/internal/context/app-layout-context.d.ts +1 -0
- package/internal/context/app-layout-context.d.ts.map +1 -1
- package/internal/context/app-layout-context.js +1 -0
- package/internal/context/app-layout-context.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
- package/internal/generated/custom-css-properties/index.js +32 -31
- package/internal/generated/custom-css-properties/index.js.map +1 -1
- package/internal/generated/theming/index.cjs +0 -11
- package/internal/generated/theming/index.js +0 -11
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +3 -5
- package/table/internal.js.map +1 -1
- package/tiles/styles.css.js +28 -28
- package/tiles/styles.scoped.css +70 -70
- package/tiles/styles.selectors.js +28 -28
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"arrow": "
|
|
5
|
-
"arrow-outer": "awsui_arrow-
|
|
6
|
-
"arrow-inner": "awsui_arrow-
|
|
7
|
-
"arrow-position-right-top": "awsui_arrow-position-right-
|
|
8
|
-
"arrow-position-right-bottom": "awsui_arrow-position-right-
|
|
9
|
-
"arrow-position-left-top": "awsui_arrow-position-left-
|
|
10
|
-
"arrow-position-left-bottom": "awsui_arrow-position-left-
|
|
11
|
-
"arrow-position-top-center": "awsui_arrow-position-top-
|
|
12
|
-
"arrow-position-top-responsive": "awsui_arrow-position-top-
|
|
13
|
-
"arrow-position-bottom-center": "awsui_arrow-position-bottom-
|
|
14
|
-
"arrow-position-bottom-responsive": "awsui_arrow-position-bottom-
|
|
15
|
-
"annotation": "
|
|
16
|
-
"next-button": "awsui_next-
|
|
17
|
-
"previous-button": "awsui_previous-
|
|
18
|
-
"finish-button": "awsui_finish-
|
|
19
|
-
"header": "
|
|
20
|
-
"step-counter-content": "awsui_step-counter-
|
|
21
|
-
"content": "
|
|
22
|
-
"description": "
|
|
23
|
-
"actionBar": "
|
|
24
|
-
"stepCounter": "
|
|
25
|
-
"divider": "
|
|
26
|
-
"hotspot": "
|
|
27
|
-
"icon": "
|
|
4
|
+
"arrow": "awsui_arrow_1hpp3_1wv9h_93",
|
|
5
|
+
"arrow-outer": "awsui_arrow-outer_1hpp3_1wv9h_97",
|
|
6
|
+
"arrow-inner": "awsui_arrow-inner_1hpp3_1wv9h_97",
|
|
7
|
+
"arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1wv9h_128",
|
|
8
|
+
"arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1wv9h_128",
|
|
9
|
+
"arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1wv9h_131",
|
|
10
|
+
"arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1wv9h_131",
|
|
11
|
+
"arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1wv9h_134",
|
|
12
|
+
"arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1wv9h_134",
|
|
13
|
+
"arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1wv9h_137",
|
|
14
|
+
"arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1wv9h_137",
|
|
15
|
+
"annotation": "awsui_annotation_1hpp3_1wv9h_145",
|
|
16
|
+
"next-button": "awsui_next-button_1hpp3_1wv9h_146",
|
|
17
|
+
"previous-button": "awsui_previous-button_1hpp3_1wv9h_147",
|
|
18
|
+
"finish-button": "awsui_finish-button_1hpp3_1wv9h_148",
|
|
19
|
+
"header": "awsui_header_1hpp3_1wv9h_149",
|
|
20
|
+
"step-counter-content": "awsui_step-counter-content_1hpp3_1wv9h_150",
|
|
21
|
+
"content": "awsui_content_1hpp3_1wv9h_151",
|
|
22
|
+
"description": "awsui_description_1hpp3_1wv9h_155",
|
|
23
|
+
"actionBar": "awsui_actionBar_1hpp3_1wv9h_160",
|
|
24
|
+
"stepCounter": "awsui_stepCounter_1hpp3_1wv9h_167",
|
|
25
|
+
"divider": "awsui_divider_1hpp3_1wv9h_171",
|
|
26
|
+
"hotspot": "awsui_hotspot_1hpp3_1wv9h_175",
|
|
27
|
+
"icon": "awsui_icon_1hpp3_1wv9h_215"
|
|
28
28
|
};
|
|
29
29
|
|
|
@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.
|
|
93
|
+
.awsui_arrow_1hpp3_1wv9h_93:not(#\9) {
|
|
94
94
|
width: 20px;
|
|
95
95
|
height: 10px;
|
|
96
96
|
}
|
|
97
|
-
.awsui_arrow-
|
|
97
|
+
.awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9), .awsui_arrow-inner_1hpp3_1wv9h_97:not(#\9) {
|
|
98
98
|
position: absolute;
|
|
99
99
|
overflow: hidden;
|
|
100
100
|
width: 20px;
|
|
@@ -102,7 +102,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
102
102
|
top: 0;
|
|
103
103
|
left: 0;
|
|
104
104
|
}
|
|
105
|
-
.awsui_arrow-
|
|
105
|
+
.awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1wv9h_97:not(#\9)::after {
|
|
106
106
|
content: "";
|
|
107
107
|
box-sizing: border-box;
|
|
108
108
|
display: inline-block;
|
|
@@ -115,26 +115,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
115
115
|
transform: rotate(45deg);
|
|
116
116
|
transform-origin: 0 100%;
|
|
117
117
|
}
|
|
118
|
-
.awsui_arrow-
|
|
118
|
+
.awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9)::after {
|
|
119
119
|
background-color: var(--color-border-status-info-546i7i, #0972d3);
|
|
120
120
|
}
|
|
121
|
-
.awsui_arrow-
|
|
121
|
+
.awsui_arrow-inner_1hpp3_1wv9h_97:not(#\9) {
|
|
122
122
|
top: 2px;
|
|
123
123
|
}
|
|
124
|
-
.awsui_arrow-
|
|
124
|
+
.awsui_arrow-inner_1hpp3_1wv9h_97:not(#\9)::after {
|
|
125
125
|
border-radius: 1px 0 0 0;
|
|
126
126
|
background-color: var(--color-background-status-info-usb30e, #f2f8fd);
|
|
127
127
|
}
|
|
128
|
-
.awsui_arrow-position-right-
|
|
128
|
+
.awsui_arrow-position-right-top_1hpp3_1wv9h_128 > .awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1wv9h_128 > .awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9)::after {
|
|
129
129
|
box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-3se70f, rgba(0, 7, 22, 0.12));
|
|
130
130
|
}
|
|
131
|
-
.awsui_arrow-position-left-
|
|
131
|
+
.awsui_arrow-position-left-top_1hpp3_1wv9h_131 > .awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1wv9h_131 > .awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9)::after {
|
|
132
132
|
box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-3se70f, rgba(0, 7, 22, 0.12));
|
|
133
133
|
}
|
|
134
|
-
.awsui_arrow-position-top-
|
|
134
|
+
.awsui_arrow-position-top-center_1hpp3_1wv9h_134 > .awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1wv9h_134 > .awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9)::after {
|
|
135
135
|
box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-3se70f, rgba(0, 7, 22, 0.12));
|
|
136
136
|
}
|
|
137
|
-
.awsui_arrow-position-bottom-
|
|
137
|
+
.awsui_arrow-position-bottom-center_1hpp3_1wv9h_137 > .awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1wv9h_137 > .awsui_arrow-outer_1hpp3_1wv9h_97:not(#\9)::after {
|
|
138
138
|
box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-3se70f, rgba(0, 7, 22, 0.12));
|
|
139
139
|
}
|
|
140
140
|
|
|
@@ -142,37 +142,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
142
142
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
143
143
|
SPDX-License-Identifier: Apache-2.0
|
|
144
144
|
*/
|
|
145
|
-
.
|
|
146
|
-
.awsui_next-
|
|
147
|
-
.awsui_previous-
|
|
148
|
-
.awsui_finish-
|
|
149
|
-
.
|
|
150
|
-
.awsui_step-counter-
|
|
151
|
-
.
|
|
145
|
+
.awsui_annotation_1hpp3_1wv9h_145:not(#\9),
|
|
146
|
+
.awsui_next-button_1hpp3_1wv9h_146:not(#\9),
|
|
147
|
+
.awsui_previous-button_1hpp3_1wv9h_147:not(#\9),
|
|
148
|
+
.awsui_finish-button_1hpp3_1wv9h_148:not(#\9),
|
|
149
|
+
.awsui_header_1hpp3_1wv9h_149:not(#\9),
|
|
150
|
+
.awsui_step-counter-content_1hpp3_1wv9h_150:not(#\9),
|
|
151
|
+
.awsui_content_1hpp3_1wv9h_151:not(#\9) {
|
|
152
152
|
/* used in test-utils */
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
.
|
|
155
|
+
.awsui_description_1hpp3_1wv9h_155:not(#\9) {
|
|
156
156
|
overflow: hidden;
|
|
157
157
|
margin-top: var(--space-xxs-ynfts5, 4px);
|
|
158
158
|
}
|
|
159
159
|
|
|
160
|
-
.
|
|
160
|
+
.awsui_actionBar_1hpp3_1wv9h_160:not(#\9) {
|
|
161
161
|
display: flex;
|
|
162
162
|
justify-content: space-between;
|
|
163
163
|
align-items: center;
|
|
164
164
|
position: relative;
|
|
165
165
|
}
|
|
166
166
|
|
|
167
|
-
.
|
|
167
|
+
.awsui_stepCounter_1hpp3_1wv9h_167:not(#\9) {
|
|
168
168
|
margin-right: 20px;
|
|
169
169
|
}
|
|
170
170
|
|
|
171
|
-
.
|
|
171
|
+
.awsui_divider_1hpp3_1wv9h_171:not(#\9) {
|
|
172
172
|
border-bottom: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
-
.
|
|
175
|
+
.awsui_hotspot_1hpp3_1wv9h_175:not(#\9) {
|
|
176
176
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
177
177
|
border-collapse: separate;
|
|
178
178
|
border-spacing: 0;
|
|
@@ -213,21 +213,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
213
213
|
border: none;
|
|
214
214
|
padding: 0;
|
|
215
215
|
cursor: pointer;
|
|
216
|
-
scroll-margin: var(--awsui-content-scroll-margin-
|
|
216
|
+
scroll-margin: var(--awsui-content-scroll-margin-rrnppm, 40px 0 0 0);
|
|
217
217
|
width: 16px;
|
|
218
218
|
height: 16px;
|
|
219
219
|
}
|
|
220
|
-
.
|
|
220
|
+
.awsui_hotspot_1hpp3_1wv9h_175:not(#\9):focus {
|
|
221
221
|
outline: none;
|
|
222
222
|
}
|
|
223
|
-
body[data-awsui-focus-visible=true] .
|
|
223
|
+
body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1wv9h_175:not(#\9):focus {
|
|
224
224
|
position: relative;
|
|
225
225
|
}
|
|
226
|
-
body[data-awsui-focus-visible=true] .
|
|
226
|
+
body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1wv9h_175:not(#\9):focus {
|
|
227
227
|
outline: 2px dotted transparent;
|
|
228
228
|
outline-offset: calc(2px - 1px);
|
|
229
229
|
}
|
|
230
|
-
body[data-awsui-focus-visible=true] .
|
|
230
|
+
body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1wv9h_175:not(#\9):focus::before {
|
|
231
231
|
content: " ";
|
|
232
232
|
display: block;
|
|
233
233
|
position: absolute;
|
|
@@ -238,13 +238,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1fwnq_175:not(#\9):focu
|
|
|
238
238
|
border-radius: var(--border-radius-control-circular-focus-ring-qawzn7, 4px);
|
|
239
239
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
240
240
|
}
|
|
241
|
-
.
|
|
241
|
+
.awsui_hotspot_1hpp3_1wv9h_175 > .awsui_icon_1hpp3_1wv9h_215:not(#\9) {
|
|
242
242
|
position: relative;
|
|
243
243
|
stroke: var(--color-text-link-default-5f186r, #0972d3);
|
|
244
244
|
}
|
|
245
|
-
.
|
|
245
|
+
.awsui_hotspot_1hpp3_1wv9h_175:not(#\9):hover > .awsui_icon_1hpp3_1wv9h_215 {
|
|
246
246
|
stroke: var(--color-text-link-hover-kololx, #033160);
|
|
247
247
|
}
|
|
248
|
-
.
|
|
248
|
+
.awsui_hotspot_1hpp3_1wv9h_175:not(#\9):active > .awsui_icon_1hpp3_1wv9h_215 {
|
|
249
249
|
stroke: var(--color-text-link-default-5f186r, #0972d3);
|
|
250
250
|
}
|
|
@@ -2,29 +2,29 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"arrow": "
|
|
6
|
-
"arrow-outer": "awsui_arrow-
|
|
7
|
-
"arrow-inner": "awsui_arrow-
|
|
8
|
-
"arrow-position-right-top": "awsui_arrow-position-right-
|
|
9
|
-
"arrow-position-right-bottom": "awsui_arrow-position-right-
|
|
10
|
-
"arrow-position-left-top": "awsui_arrow-position-left-
|
|
11
|
-
"arrow-position-left-bottom": "awsui_arrow-position-left-
|
|
12
|
-
"arrow-position-top-center": "awsui_arrow-position-top-
|
|
13
|
-
"arrow-position-top-responsive": "awsui_arrow-position-top-
|
|
14
|
-
"arrow-position-bottom-center": "awsui_arrow-position-bottom-
|
|
15
|
-
"arrow-position-bottom-responsive": "awsui_arrow-position-bottom-
|
|
16
|
-
"annotation": "
|
|
17
|
-
"next-button": "awsui_next-
|
|
18
|
-
"previous-button": "awsui_previous-
|
|
19
|
-
"finish-button": "awsui_finish-
|
|
20
|
-
"header": "
|
|
21
|
-
"step-counter-content": "awsui_step-counter-
|
|
22
|
-
"content": "
|
|
23
|
-
"description": "
|
|
24
|
-
"actionBar": "
|
|
25
|
-
"stepCounter": "
|
|
26
|
-
"divider": "
|
|
27
|
-
"hotspot": "
|
|
28
|
-
"icon": "
|
|
5
|
+
"arrow": "awsui_arrow_1hpp3_1wv9h_93",
|
|
6
|
+
"arrow-outer": "awsui_arrow-outer_1hpp3_1wv9h_97",
|
|
7
|
+
"arrow-inner": "awsui_arrow-inner_1hpp3_1wv9h_97",
|
|
8
|
+
"arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1wv9h_128",
|
|
9
|
+
"arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1wv9h_128",
|
|
10
|
+
"arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1wv9h_131",
|
|
11
|
+
"arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1wv9h_131",
|
|
12
|
+
"arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1wv9h_134",
|
|
13
|
+
"arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1wv9h_134",
|
|
14
|
+
"arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1wv9h_137",
|
|
15
|
+
"arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1wv9h_137",
|
|
16
|
+
"annotation": "awsui_annotation_1hpp3_1wv9h_145",
|
|
17
|
+
"next-button": "awsui_next-button_1hpp3_1wv9h_146",
|
|
18
|
+
"previous-button": "awsui_previous-button_1hpp3_1wv9h_147",
|
|
19
|
+
"finish-button": "awsui_finish-button_1hpp3_1wv9h_148",
|
|
20
|
+
"header": "awsui_header_1hpp3_1wv9h_149",
|
|
21
|
+
"step-counter-content": "awsui_step-counter-content_1hpp3_1wv9h_150",
|
|
22
|
+
"content": "awsui_content_1hpp3_1wv9h_151",
|
|
23
|
+
"description": "awsui_description_1hpp3_1wv9h_155",
|
|
24
|
+
"actionBar": "awsui_actionBar_1hpp3_1wv9h_160",
|
|
25
|
+
"stepCounter": "awsui_stepCounter_1hpp3_1wv9h_167",
|
|
26
|
+
"divider": "awsui_divider_1hpp3_1wv9h_171",
|
|
27
|
+
"hotspot": "awsui_hotspot_1hpp3_1wv9h_175",
|
|
28
|
+
"icon": "awsui_icon_1hpp3_1wv9h_215"
|
|
29
29
|
};
|
|
30
30
|
|
|
@@ -74,7 +74,11 @@ export interface DrawerItem {
|
|
|
74
74
|
};
|
|
75
75
|
ariaLabels: DrawerItemAriaLabels;
|
|
76
76
|
resizable?: boolean;
|
|
77
|
-
|
|
77
|
+
defaultSize?: number;
|
|
78
|
+
onResize?: NonCancelableEventHandler<{
|
|
79
|
+
size: number;
|
|
80
|
+
id: string;
|
|
81
|
+
}>;
|
|
78
82
|
}
|
|
79
83
|
export interface SizeControlProps {
|
|
80
84
|
position: 'side';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';\n\nexport interface DesktopDrawerProps {\n contentClassName: string;\n toggleClassName: string;\n closeClassName: string;\n toggleRefs: {\n toggle: React.Ref<ButtonProps.Ref>;\n close: React.Ref<ButtonProps.Ref>;\n };\n width: number;\n topOffset: number | undefined;\n bottomOffset: number | undefined;\n ariaLabels: AppLayoutProps.Labels | undefined;\n drawersAriaLabels?: DrawerItemAriaLabels | undefined;\n children: React.ReactNode;\n type: keyof typeof togglesConfig;\n isMobile: boolean;\n isOpen: boolean;\n onToggle: (isOpen: boolean) => void;\n onClick?: (event: React.MouseEvent) => void;\n onLoseFocus?: (event: React.FocusEvent) => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string | undefined;\n onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n };\n resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n activeDrawer?: DrawerItem;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n size: number;\n getMaxWidth: () => number;\n refs: DrawerFocusControlRefs;\n}\n\nexport interface DrawerTriggersBarProps {\n contentClassName: string;\n toggleClassName: string;\n topOffset: number | undefined;\n bottomOffset: number | undefined;\n isMobile: boolean;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n ariaLabel?: string;\n };\n}\n\nexport interface DrawerItemAriaLabels {\n content?: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n}\n\nexport interface DrawerItem {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerItemAriaLabels;\n resizable?: boolean;\n
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';\n\nexport interface DesktopDrawerProps {\n contentClassName: string;\n toggleClassName: string;\n closeClassName: string;\n toggleRefs: {\n toggle: React.Ref<ButtonProps.Ref>;\n close: React.Ref<ButtonProps.Ref>;\n };\n width: number;\n topOffset: number | undefined;\n bottomOffset: number | undefined;\n ariaLabels: AppLayoutProps.Labels | undefined;\n drawersAriaLabels?: DrawerItemAriaLabels | undefined;\n children: React.ReactNode;\n type: keyof typeof togglesConfig;\n isMobile: boolean;\n isOpen: boolean;\n onToggle: (isOpen: boolean) => void;\n onClick?: (event: React.MouseEvent) => void;\n onLoseFocus?: (event: React.FocusEvent) => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string | undefined;\n onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n };\n resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n activeDrawer?: DrawerItem;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n size: number;\n getMaxWidth: () => number;\n refs: DrawerFocusControlRefs;\n}\n\nexport interface DrawerTriggersBarProps {\n contentClassName: string;\n toggleClassName: string;\n topOffset: number | undefined;\n bottomOffset: number | undefined;\n isMobile: boolean;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n ariaLabel?: string;\n };\n}\n\nexport interface DrawerItemAriaLabels {\n content?: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n}\n\nexport interface DrawerItem {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerItemAriaLabels;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n}\n\nexport interface SizeControlProps {\n position: 'side';\n splitPanelRef?: React.RefObject<HTMLDivElement>;\n handleRef?: React.RefObject<HTMLDivElement>;\n setSidePanelWidth: (width: number) => void;\n setBottomPanelHeight: (height: number) => void;\n}\n\nexport interface InternalDrawerProps {\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange?: NonCancelableEventHandler<string>;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n ariaLabel?: string;\n };\n}\n"]}
|
|
@@ -14,7 +14,7 @@ export const ResizableDrawer = (_a) => {
|
|
|
14
14
|
var _b;
|
|
15
15
|
var { onResize, size, getMaxWidth, refs, activeDrawer } = _a, props = __rest(_a, ["onResize", "size", "getMaxWidth", "refs", "activeDrawer"]);
|
|
16
16
|
const { isOpen, children, isMobile } = props;
|
|
17
|
-
const MIN_WIDTH = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.
|
|
17
|
+
const MIN_WIDTH = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) && activeDrawer.defaultSize < 280 ? activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize : 280;
|
|
18
18
|
const [relativeSize, setRelativeSize] = useState(0);
|
|
19
19
|
useEffect(() => {
|
|
20
20
|
// effects are called inside out in the components tree
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,gBAAgB,MAAM,iCAAiC,CAAC;AAG/D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAOT,EAAE,EAAE;;QAPK,EAC9B,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,YAAY,OAES,EADlB,KAAK,cANsB,2DAO/B,CADS;IAER,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7C,MAAM,SAAS,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,
|
|
1
|
+
{"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.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, useState, useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../../split-panel/utils/use-pointer-events';\nimport { useKeyboardEvents } from '../../split-panel/utils/use-keyboard-events';\nimport { Drawer } from './index';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport { SizeControlProps, ResizableDrawerProps } from './interfaces';\n\nexport const ResizableDrawer = ({\n onResize,\n size,\n getMaxWidth,\n refs,\n activeDrawer,\n ...props\n}: ResizableDrawerProps) => {\n const { isOpen, children, isMobile } = props;\n\n const MIN_WIDTH = activeDrawer?.defaultSize && activeDrawer.defaultSize < 280 ? activeDrawer?.defaultSize : 280;\n const [relativeSize, setRelativeSize] = useState(0);\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 = getMaxWidth();\n setRelativeSize((size / maxSize) * 100);\n });\n return () => cancelAnimationFrame(handle);\n }, [size, getMaxWidth]);\n\n const setSidePanelWidth = (width: number) => {\n const maxWidth = getMaxWidth();\n const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n const id = activeDrawer?.id;\n\n if (isOpen && id && maxWidth >= MIN_WIDTH) {\n onResize({ size, id });\n }\n };\n\n const position = 'side';\n const setBottomPanelHeight = () => {};\n const drawerRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n splitPanelRef: drawerRefObject,\n handleRef: refs.slider,\n setSidePanelWidth,\n setBottomPanelHeight,\n };\n\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={relativeSize}\n className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n >\n <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n </div>\n );\n\n return (\n <Drawer\n {...props}\n ref={drawerRefObject}\n resizeHandle={\n !isMobile &&\n activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n }\n >\n {children}\n </Drawer>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiF,MAAM,OAAO,CAAC;AAMtG,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAyC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AA2sBF,eAAe,SAAS,CAAC"}
|
package/app-layout/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { __rest } 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, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
5
|
+
import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
6
6
|
import { getBaseProps } from '../internal/base-component';
|
|
7
7
|
import { useControllable } from '../internal/hooks/use-controllable';
|
|
8
8
|
import { useMobile } from '../internal/hooks/use-mobile';
|
|
@@ -140,23 +140,25 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
140
140
|
controlledProp: 'splitPanelOpen',
|
|
141
141
|
changeHandler: 'onSplitPanelToggle',
|
|
142
142
|
});
|
|
143
|
-
const
|
|
143
|
+
const drawerItems = useMemo(() => (drawers === null || drawers === void 0 ? void 0 : drawers.items) || [], [drawers === null || drawers === void 0 ? void 0 : drawers.items]);
|
|
144
|
+
const getDrawerItemSizes = useCallback(() => {
|
|
144
145
|
const sizes = {};
|
|
145
|
-
if (!
|
|
146
|
+
if (!drawerItems) {
|
|
146
147
|
return {};
|
|
147
148
|
}
|
|
148
|
-
for (const item of
|
|
149
|
-
if (item.
|
|
150
|
-
sizes[item.id] = item.
|
|
149
|
+
for (const item of drawerItems) {
|
|
150
|
+
if (item.defaultSize) {
|
|
151
|
+
sizes[item.id] = item.defaultSize || toolsWidth;
|
|
151
152
|
}
|
|
152
153
|
}
|
|
153
154
|
return sizes;
|
|
154
|
-
})
|
|
155
|
-
const [drawerSizes
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
155
|
+
}, [drawerItems, toolsWidth]);
|
|
156
|
+
const [drawerSizes, setDrawerSizes] = useState(() => getDrawerItemSizes());
|
|
157
|
+
useEffect(() => {
|
|
158
|
+
// Ensure we only set new drawer items by performing a shallow merge
|
|
159
|
+
// of the latest drawer item sizes, and previous drawer item sizes.
|
|
160
|
+
setDrawerSizes(prev => (Object.assign(Object.assign({}, getDrawerItemSizes()), prev)));
|
|
161
|
+
}, [getDrawerItemSizes]);
|
|
160
162
|
const drawerSize = (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) && drawerSizes[selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id] ? drawerSizes[selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id] : toolsWidth;
|
|
161
163
|
const splitPanelPosition = (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) || 'bottom';
|
|
162
164
|
const [splitPanelReportedToggle, setSplitPanelReportedToggle] = useState({
|
|
@@ -221,7 +223,8 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
221
223
|
if (!mainContentRef.current || !defaults.minContentWidth) {
|
|
222
224
|
return NaN;
|
|
223
225
|
}
|
|
224
|
-
|
|
226
|
+
// Either use the computed width of the drawer or the drawerSize as defined.
|
|
227
|
+
const width = parseInt(getComputedStyle(mainContentRef.current).width || `${drawerSize}`);
|
|
225
228
|
// when disableContentPaddings is true there is less available space,
|
|
226
229
|
// so we subtract space-scaled-2x-xxxl * 2 for left and right padding
|
|
227
230
|
const contentPadding = disableContentPaddings ? 80 : 0;
|
|
@@ -341,9 +344,10 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
341
344
|
: splitPanelOpen
|
|
342
345
|
? splitPanelReportedSize
|
|
343
346
|
: splitPanelReportedHeaderHeight)) !== null && _c !== void 0 ? _c : undefined;
|
|
347
|
+
const [mobileBarHeight, mobileBarRef] = useContainerQuery(rect => rect.height);
|
|
344
348
|
return (React.createElement("div", { className: clsx(styles.root, testutilStyles.root, disableBodyScroll && styles['root-no-scroll']), ref: rootRef },
|
|
345
349
|
React.createElement("div", { className: styles['layout-wrapper'], style: contentHeightStyle },
|
|
346
|
-
isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, drawers: drawers
|
|
350
|
+
isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, mobileBarRef: mobileBarRef, drawers: drawers
|
|
347
351
|
? {
|
|
348
352
|
items: tools && !toolsHide ? [toolsItem, ...drawers.items] : drawers.items,
|
|
349
353
|
activeDrawerId: selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id,
|
|
@@ -386,9 +390,13 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
386
390
|
!contentHeader &&
|
|
387
391
|
styles['content-wrapper-first-child']) }),
|
|
388
392
|
React.createElement(AppLayoutContext.Provider, { value: {
|
|
389
|
-
stickyOffsetTop:
|
|
390
|
-
|
|
393
|
+
stickyOffsetTop:
|
|
394
|
+
// We don't support the table header being sticky in case the deprecated disableBodyScroll is enabled,
|
|
395
|
+
// therefore we ensure the table header scrolls out of view by offseting a large enough value (9999px)
|
|
396
|
+
(disableBodyScroll ? (isMobile ? -9999 : 0) : headerHeight) +
|
|
397
|
+
(isMobile ? 0 : stickyNotificationsHeight !== null ? stickyNotificationsHeight : 0),
|
|
391
398
|
stickyOffsetBottom: footerHeight + (splitPanelBottomOffset || 0),
|
|
399
|
+
mobileBarHeight: mobileBarHeight !== null && mobileBarHeight !== void 0 ? mobileBarHeight : 0,
|
|
392
400
|
hasBreadcrumbs: !!breadcrumbs,
|
|
393
401
|
} }, content))),
|
|
394
402
|
finalSplitPanePosition === 'bottom' && splitPanelWrapped),
|
|
@@ -407,6 +415,10 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
407
415
|
},
|
|
408
416
|
}, size: !isResizeInvalid ? drawerSize : toolsWidth, onResize: changeDetail => {
|
|
409
417
|
fireNonCancelableEvent(drawers.onResize, changeDetail);
|
|
418
|
+
const drawerItem = drawerItems.find(({ id }) => id === changeDetail.id);
|
|
419
|
+
if (drawerItem === null || drawerItem === void 0 ? void 0 : drawerItem.onResize) {
|
|
420
|
+
fireNonCancelableEvent(drawerItem.onResize, changeDetail);
|
|
421
|
+
}
|
|
410
422
|
setDrawerSizes(Object.assign(Object.assign({}, drawerSizes), { [changeDetail.id]: changeDetail.size }));
|
|
411
423
|
}, refs: drawerRefs, getMaxWidth: getDrawerMaxWidth }, selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.content)) : (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: ariaLabels, width: effectiveToolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
|
|
412
424
|
hasDrawers && (React.createElement(DrawerTriggersBar, { contentClassName: testutilStyles['drawers-desktop-triggers-container'], toggleClassName: testutilStyles['drawers-trigger'], bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: {
|