@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.
Files changed (57) hide show
  1. package/annotation-context/annotation/styles.css.js +24 -24
  2. package/annotation-context/annotation/styles.scoped.css +30 -30
  3. package/annotation-context/annotation/styles.selectors.js +24 -24
  4. package/app-layout/drawer/interfaces.d.ts +5 -1
  5. package/app-layout/drawer/interfaces.d.ts.map +1 -1
  6. package/app-layout/drawer/interfaces.js.map +1 -1
  7. package/app-layout/drawer/resizable-drawer.js +1 -1
  8. package/app-layout/drawer/resizable-drawer.js.map +1 -1
  9. package/app-layout/index.d.ts.map +1 -1
  10. package/app-layout/index.js +28 -16
  11. package/app-layout/index.js.map +1 -1
  12. package/app-layout/mobile-toolbar/index.d.ts +2 -1
  13. package/app-layout/mobile-toolbar/index.d.ts.map +1 -1
  14. package/app-layout/mobile-toolbar/index.js +2 -2
  15. package/app-layout/mobile-toolbar/index.js.map +1 -1
  16. package/app-layout/notifications/styles.css.js +3 -3
  17. package/app-layout/notifications/styles.scoped.css +7 -7
  18. package/app-layout/notifications/styles.selectors.js +3 -3
  19. package/app-layout/visual-refresh/styles.css.js +72 -72
  20. package/app-layout/visual-refresh/styles.scoped.css +275 -274
  21. package/app-layout/visual-refresh/styles.selectors.js +72 -72
  22. package/column-layout/styles.css.js +13 -13
  23. package/column-layout/styles.scoped.css +45 -45
  24. package/column-layout/styles.selectors.js +13 -13
  25. package/container/internal.d.ts +2 -1
  26. package/container/internal.d.ts.map +1 -1
  27. package/container/internal.js +2 -2
  28. package/container/internal.js.map +1 -1
  29. package/container/use-sticky-header.d.ts +12 -1
  30. package/container/use-sticky-header.d.ts.map +1 -1
  31. package/container/use-sticky-header.js +41 -16
  32. package/container/use-sticky-header.js.map +1 -1
  33. package/flashbar/styles.css.js +45 -45
  34. package/flashbar/styles.scoped.css +169 -169
  35. package/flashbar/styles.selectors.js +45 -45
  36. package/header/internal.d.ts.map +1 -1
  37. package/header/internal.js +4 -1
  38. package/header/internal.js.map +1 -1
  39. package/internal/base-component/styles.scoped.css +0 -3
  40. package/internal/context/app-layout-context.d.ts +1 -0
  41. package/internal/context/app-layout-context.d.ts.map +1 -1
  42. package/internal/context/app-layout-context.js +1 -0
  43. package/internal/context/app-layout-context.js.map +1 -1
  44. package/internal/environment.js +1 -1
  45. package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  46. package/internal/generated/custom-css-properties/index.js +32 -31
  47. package/internal/generated/custom-css-properties/index.js.map +1 -1
  48. package/internal/generated/theming/index.cjs +0 -11
  49. package/internal/generated/theming/index.js +0 -11
  50. package/internal/manifest.json +1 -1
  51. package/package.json +1 -1
  52. package/table/internal.d.ts.map +1 -1
  53. package/table/internal.js +3 -5
  54. package/table/internal.js.map +1 -1
  55. package/tiles/styles.css.js +28 -28
  56. package/tiles/styles.scoped.css +70 -70
  57. 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": "awsui_arrow_1hpp3_1fwnq_93",
5
- "arrow-outer": "awsui_arrow-outer_1hpp3_1fwnq_97",
6
- "arrow-inner": "awsui_arrow-inner_1hpp3_1fwnq_97",
7
- "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1fwnq_128",
8
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1fwnq_128",
9
- "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1fwnq_131",
10
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1fwnq_131",
11
- "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1fwnq_134",
12
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1fwnq_134",
13
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1fwnq_137",
14
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1fwnq_137",
15
- "annotation": "awsui_annotation_1hpp3_1fwnq_145",
16
- "next-button": "awsui_next-button_1hpp3_1fwnq_146",
17
- "previous-button": "awsui_previous-button_1hpp3_1fwnq_147",
18
- "finish-button": "awsui_finish-button_1hpp3_1fwnq_148",
19
- "header": "awsui_header_1hpp3_1fwnq_149",
20
- "step-counter-content": "awsui_step-counter-content_1hpp3_1fwnq_150",
21
- "content": "awsui_content_1hpp3_1fwnq_151",
22
- "description": "awsui_description_1hpp3_1fwnq_155",
23
- "actionBar": "awsui_actionBar_1hpp3_1fwnq_160",
24
- "stepCounter": "awsui_stepCounter_1hpp3_1fwnq_167",
25
- "divider": "awsui_divider_1hpp3_1fwnq_171",
26
- "hotspot": "awsui_hotspot_1hpp3_1fwnq_175",
27
- "icon": "awsui_icon_1hpp3_1fwnq_215"
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
- .awsui_arrow_1hpp3_1fwnq_93:not(#\9) {
93
+ .awsui_arrow_1hpp3_1wv9h_93:not(#\9) {
94
94
  width: 20px;
95
95
  height: 10px;
96
96
  }
97
- .awsui_arrow-outer_1hpp3_1fwnq_97:not(#\9), .awsui_arrow-inner_1hpp3_1fwnq_97:not(#\9) {
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-outer_1hpp3_1fwnq_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1fwnq_97:not(#\9)::after {
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-outer_1hpp3_1fwnq_97:not(#\9)::after {
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-inner_1hpp3_1fwnq_97:not(#\9) {
121
+ .awsui_arrow-inner_1hpp3_1wv9h_97:not(#\9) {
122
122
  top: 2px;
123
123
  }
124
- .awsui_arrow-inner_1hpp3_1fwnq_97:not(#\9)::after {
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-top_1hpp3_1fwnq_128 > .awsui_arrow-outer_1hpp3_1fwnq_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1fwnq_128 > .awsui_arrow-outer_1hpp3_1fwnq_97:not(#\9)::after {
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-top_1hpp3_1fwnq_131 > .awsui_arrow-outer_1hpp3_1fwnq_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1fwnq_131 > .awsui_arrow-outer_1hpp3_1fwnq_97:not(#\9)::after {
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-center_1hpp3_1fwnq_134 > .awsui_arrow-outer_1hpp3_1fwnq_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1fwnq_134 > .awsui_arrow-outer_1hpp3_1fwnq_97:not(#\9)::after {
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-center_1hpp3_1fwnq_137 > .awsui_arrow-outer_1hpp3_1fwnq_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1fwnq_137 > .awsui_arrow-outer_1hpp3_1fwnq_97:not(#\9)::after {
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
- .awsui_annotation_1hpp3_1fwnq_145:not(#\9),
146
- .awsui_next-button_1hpp3_1fwnq_146:not(#\9),
147
- .awsui_previous-button_1hpp3_1fwnq_147:not(#\9),
148
- .awsui_finish-button_1hpp3_1fwnq_148:not(#\9),
149
- .awsui_header_1hpp3_1fwnq_149:not(#\9),
150
- .awsui_step-counter-content_1hpp3_1fwnq_150:not(#\9),
151
- .awsui_content_1hpp3_1fwnq_151:not(#\9) {
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
- .awsui_description_1hpp3_1fwnq_155:not(#\9) {
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
- .awsui_actionBar_1hpp3_1fwnq_160:not(#\9) {
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
- .awsui_stepCounter_1hpp3_1fwnq_167:not(#\9) {
167
+ .awsui_stepCounter_1hpp3_1wv9h_167:not(#\9) {
168
168
  margin-right: 20px;
169
169
  }
170
170
 
171
- .awsui_divider_1hpp3_1fwnq_171:not(#\9) {
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
- .awsui_hotspot_1hpp3_1fwnq_175:not(#\9) {
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-3j0evk, 40px 0 0 0);
216
+ scroll-margin: var(--awsui-content-scroll-margin-rrnppm, 40px 0 0 0);
217
217
  width: 16px;
218
218
  height: 16px;
219
219
  }
220
- .awsui_hotspot_1hpp3_1fwnq_175:not(#\9):focus {
220
+ .awsui_hotspot_1hpp3_1wv9h_175:not(#\9):focus {
221
221
  outline: none;
222
222
  }
223
- body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1fwnq_175:not(#\9):focus {
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] .awsui_hotspot_1hpp3_1fwnq_175:not(#\9):focus {
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] .awsui_hotspot_1hpp3_1fwnq_175:not(#\9):focus::before {
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
- .awsui_hotspot_1hpp3_1fwnq_175 > .awsui_icon_1hpp3_1fwnq_215:not(#\9) {
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
- .awsui_hotspot_1hpp3_1fwnq_175:not(#\9):hover > .awsui_icon_1hpp3_1fwnq_215 {
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
- .awsui_hotspot_1hpp3_1fwnq_175:not(#\9):active > .awsui_icon_1hpp3_1fwnq_215 {
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": "awsui_arrow_1hpp3_1fwnq_93",
6
- "arrow-outer": "awsui_arrow-outer_1hpp3_1fwnq_97",
7
- "arrow-inner": "awsui_arrow-inner_1hpp3_1fwnq_97",
8
- "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1fwnq_128",
9
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1fwnq_128",
10
- "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1fwnq_131",
11
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1fwnq_131",
12
- "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1fwnq_134",
13
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1fwnq_134",
14
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1fwnq_137",
15
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1fwnq_137",
16
- "annotation": "awsui_annotation_1hpp3_1fwnq_145",
17
- "next-button": "awsui_next-button_1hpp3_1fwnq_146",
18
- "previous-button": "awsui_previous-button_1hpp3_1fwnq_147",
19
- "finish-button": "awsui_finish-button_1hpp3_1fwnq_148",
20
- "header": "awsui_header_1hpp3_1fwnq_149",
21
- "step-counter-content": "awsui_step-counter-content_1hpp3_1fwnq_150",
22
- "content": "awsui_content_1hpp3_1fwnq_151",
23
- "description": "awsui_description_1hpp3_1fwnq_155",
24
- "actionBar": "awsui_actionBar_1hpp3_1fwnq_160",
25
- "stepCounter": "awsui_stepCounter_1hpp3_1fwnq_167",
26
- "divider": "awsui_divider_1hpp3_1fwnq_171",
27
- "hotspot": "awsui_hotspot_1hpp3_1fwnq_175",
28
- "icon": "awsui_icon_1hpp3_1fwnq_215"
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
- size?: number;
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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,iBAAiB,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,QAAQ,EAAE,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,IAAI,EAAE,sBAAsB,CAAC;CAC9B;AAED,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE;QACP,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,CAAC;IACF,UAAU,EAAE,oBAAoB,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAC7C,QAAQ,CAAC,EAAE,yBAAyB,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACnE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}
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 size?: number;\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"]}
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.size) && activeDrawer.size < 280 ? activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.size : 280;
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":"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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?.size && activeDrawer.size < 280 ? activeDrawer?.size : 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
+ {"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,WAAW,KAAI,YAAY,CAAC,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC;IAChH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,kEAAkE;QAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;YAC9B,eAAe,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExB,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAC/B,MAAM,IAAI,GAAG,eAAe,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QACzD,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,MAAM,IAAI,EAAE,IAAI,QAAQ,IAAI,SAAS,EAAE;YACzC,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,CAAC;IACxB,MAAM,oBAAoB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;IACtC,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAErD,MAAM,gBAAgB,GAAqB;QACzC,QAAQ;QACR,aAAa,EAAE,eAAe;QAC9B,SAAS,EAAE,IAAI,CAAC,MAAM;QACtB,iBAAiB;QACjB,oBAAoB;KACrB,CAAC;IAEF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,CACnB,6BACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,mBACnC,GAAG,mBACH,CAAC,mBACD,YAAY,EAC3B,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC,EAC3G,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB;QAElC,oBAAC,aAAa,IAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,GAAI,CACrG,CACP,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,oBACD,KAAK,IACT,GAAG,EAAE,eAAe,EACpB,YAAY,EACV,CAAC,QAAQ;aACT,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA,IAAI,6BAAK,SAAS,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,IAAG,YAAY,CAAO,KAGzG,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CAAC","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,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAyC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AAgsBF,eAAe,SAAS,CAAC"}
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"}
@@ -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 sizes = (() => {
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 (!drawers) {
146
+ if (!drawerItems) {
146
147
  return {};
147
148
  }
148
- for (const item of drawers.items) {
149
- if (item.size) {
150
- sizes[item.id] = item.size;
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 = {}, setDrawerSizes] = useControllable(Object.keys(sizes).length > 0 ? sizes : undefined, drawers === null || drawers === void 0 ? void 0 : drawers.onResize, {}, {
156
- componentName: 'AppLayout',
157
- controlledProp: 'drawers.items[].size',
158
- changeHandler: 'drawers.onResize',
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
- const width = parseInt(getComputedStyle(mainContentRef.current).width);
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: (disableBodyScroll ? 0 : headerHeight) +
390
- (stickyNotificationsHeight !== null ? stickyNotificationsHeight : 0),
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: {