@cloudscape-design/components 3.0.149 → 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.
Files changed (48) hide show
  1. package/cards/styles.css.js +37 -37
  2. package/cards/styles.scoped.css +49 -49
  3. package/cards/styles.selectors.js +37 -37
  4. package/container/styles.css.js +16 -16
  5. package/container/styles.scoped.css +30 -30
  6. package/container/styles.selectors.js +16 -16
  7. package/expandable-section/styles.css.js +21 -21
  8. package/expandable-section/styles.scoped.css +43 -43
  9. package/expandable-section/styles.selectors.js +21 -21
  10. package/internal/base-component/styles.scoped.css +5 -4
  11. package/internal/environment.js +1 -1
  12. package/internal/generated/styles/tokens.js +1 -1
  13. package/internal/generated/theming/index.cjs +13 -6
  14. package/internal/generated/theming/index.js +13 -6
  15. package/internal/manifest.json +1 -1
  16. package/modal/styles.css.js +22 -22
  17. package/modal/styles.scoped.css +41 -41
  18. package/modal/styles.selectors.js +22 -22
  19. package/package.json +1 -1
  20. package/table/body-cell/index.d.ts +3 -1
  21. package/table/body-cell/index.d.ts.map +1 -1
  22. package/table/body-cell/index.js +4 -2
  23. package/table/body-cell/index.js.map +1 -1
  24. package/table/body-cell/styles.css.js +12 -8
  25. package/table/body-cell/styles.scoped.css +56 -20
  26. package/table/body-cell/styles.selectors.js +12 -8
  27. package/table/header-cell/styles.css.js +18 -16
  28. package/table/header-cell/styles.scoped.css +54 -27
  29. package/table/header-cell/styles.selectors.js +18 -16
  30. package/table/internal.d.ts.map +1 -1
  31. package/table/internal.js +11 -9
  32. package/table/internal.js.map +1 -1
  33. package/table/selection-control/styles.css.js +3 -3
  34. package/table/selection-control/styles.scoped.css +3 -5
  35. package/table/selection-control/styles.selectors.js +3 -3
  36. package/table/styles.css.js +33 -34
  37. package/table/styles.scoped.css +63 -58
  38. package/table/styles.selectors.js +33 -34
  39. package/table/thead.d.ts +1 -0
  40. package/table/thead.d.ts.map +1 -1
  41. package/table/thead.js +5 -3
  42. package/table/thead.js.map +1 -1
  43. package/table/use-sticky-header.d.ts.map +1 -1
  44. package/table/use-sticky-header.js +0 -13
  45. package/table/use-sticky-header.js.map +1 -1
  46. package/tabs/styles.css.js +21 -21
  47. package/tabs/styles.scoped.css +39 -39
  48. package/tabs/styles.selectors.js +21 -21
package/table/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
- .awsui_root_wih1l_1qjbt_97:not(#\9) {
97
+ .awsui_root_wih1l_1xb6i_97:not(#\9) {
98
98
  font-size: var(--font-body-m-size-sregvd, 14px);
99
99
  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
100
100
  color: var(--color-text-body-default-ajf1h5, #000716);
@@ -103,44 +103,44 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
103
103
  width: 100%;
104
104
  }
105
105
 
106
- .awsui_tools_wih1l_1qjbt_106:not(#\9) {
106
+ .awsui_tools_wih1l_1xb6i_106:not(#\9) {
107
107
  display: flex;
108
108
  align-items: flex-start;
109
109
  flex-wrap: wrap;
110
110
  padding: var(--space-scaled-xs-6859qs, 8px) 0 var(--space-scaled-xxs-95dhkm, 4px);
111
111
  }
112
- .awsui_tools-filtering_wih1l_1qjbt_112:not(#\9) {
112
+ .awsui_tools-filtering_wih1l_1xb6i_112:not(#\9) {
113
113
  flex: 1 1 0%;
114
114
  max-width: 100%;
115
115
  margin-right: var(--space-l-4vl6xu, 20px);
116
116
  }
117
- .awsui_tools-align-right_wih1l_1qjbt_117:not(#\9) {
117
+ .awsui_tools-align-right_wih1l_1xb6i_117:not(#\9) {
118
118
  display: flex;
119
119
  margin-left: auto;
120
120
  }
121
- .awsui_tools-pagination_wih1l_1qjbt_121 + .awsui_tools-preferences_wih1l_1qjbt_121:not(#\9) {
121
+ .awsui_tools-pagination_wih1l_1xb6i_121 + .awsui_tools-preferences_wih1l_1xb6i_121:not(#\9) {
122
122
  border-left: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
123
123
  box-sizing: border-box;
124
124
  margin-left: var(--space-xs-rsr2qu, 8px);
125
125
  padding-left: var(--space-xs-rsr2qu, 8px);
126
126
  }
127
- .awsui_tools-small_wih1l_1qjbt_127 > .awsui_tools-filtering_wih1l_1qjbt_112:not(#\9) {
127
+ .awsui_tools-small_wih1l_1xb6i_127 > .awsui_tools-filtering_wih1l_1xb6i_112:not(#\9) {
128
128
  margin-right: 0;
129
129
  margin-bottom: var(--space-scaled-xs-6859qs, 8px);
130
130
  flex-basis: 100%;
131
131
  }
132
132
 
133
- .awsui_table_wih1l_1qjbt_133:not(#\9) {
133
+ .awsui_table_wih1l_1xb6i_133:not(#\9) {
134
134
  width: 100%;
135
135
  border-spacing: 0;
136
136
  position: relative;
137
137
  box-sizing: border-box;
138
138
  }
139
- .awsui_table-layout-fixed_wih1l_1qjbt_139:not(#\9) {
139
+ .awsui_table-layout-fixed_wih1l_1xb6i_139:not(#\9) {
140
140
  table-layout: fixed;
141
141
  }
142
142
 
143
- .awsui_wrapper_wih1l_1qjbt_143:not(#\9) {
143
+ .awsui_wrapper_wih1l_1xb6i_143:not(#\9) {
144
144
  position: relative;
145
145
  box-sizing: border-box;
146
146
  width: 100%;
@@ -148,35 +148,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
148
148
  padding-bottom: var(--space-table-content-bottom-pg6yvn, 4px);
149
149
  overflow-x: auto;
150
150
  }
151
- .awsui_wrapper_wih1l_1qjbt_143.awsui_variant-stacked_wih1l_1qjbt_151 > .awsui_table_wih1l_1qjbt_133:not(#\9), .awsui_wrapper_wih1l_1qjbt_143.awsui_variant-container_wih1l_1qjbt_151 > .awsui_table_wih1l_1qjbt_133:not(#\9) {
152
- padding-left: var(--space-table-horizontal-58vuca, 24px);
153
- padding-right: var(--space-table-horizontal-58vuca, 24px);
151
+ .awsui_wrapper_wih1l_1xb6i_143.awsui_variant-stacked_wih1l_1xb6i_151 > .awsui_table_wih1l_1xb6i_133:not(#\9), .awsui_wrapper_wih1l_1xb6i_143.awsui_variant-container_wih1l_1xb6i_151 > .awsui_table_wih1l_1xb6i_133:not(#\9) {
152
+ padding-left: var(--space-table-horizontal-mj7h0h, 20px);
153
+ padding-right: var(--space-table-horizontal-mj7h0h, 20px);
154
154
  }
155
- .awsui_wrapper_wih1l_1qjbt_143.awsui_variant-embedded_wih1l_1qjbt_155:not(#\9) {
155
+ .awsui_wrapper_wih1l_1xb6i_143.awsui_variant-embedded_wih1l_1xb6i_155:not(#\9) {
156
156
  padding-bottom: var(--space-table-embedded-content-bottom-7vc5vt, 0px);
157
157
  }
158
- .awsui_wrapper_wih1l_1qjbt_143.awsui_has-header_wih1l_1qjbt_158:not(#\9) {
158
+ .awsui_wrapper_wih1l_1xb6i_143.awsui_has-header_wih1l_1xb6i_158:not(#\9) {
159
159
  padding-top: 0px;
160
160
  }
161
- .awsui_wrapper_wih1l_1qjbt_143.awsui_has-footer_wih1l_1qjbt_161:not(#\9) {
161
+ .awsui_wrapper_wih1l_1xb6i_143.awsui_has-footer_wih1l_1xb6i_161:not(#\9) {
162
162
  padding-bottom: 0px;
163
163
  }
164
- .awsui_wrapper_wih1l_1qjbt_143:not(#\9):not(.awsui_has-header_wih1l_1qjbt_158) {
164
+ .awsui_wrapper_wih1l_1xb6i_143:not(#\9):not(.awsui_has-header_wih1l_1xb6i_158) {
165
165
  border-top-right-radius: var(--border-radius-container-gh9ysk, 16px);
166
166
  border-top-left-radius: var(--border-radius-container-gh9ysk, 16px);
167
167
  }
168
- .awsui_wrapper_wih1l_1qjbt_143[data-awsui-focus-visible=true]:not(#\9):focus {
168
+ .awsui_wrapper_wih1l_1xb6i_143[data-awsui-focus-visible=true]:not(#\9):focus {
169
169
  outline: 2px dotted transparent;
170
170
  outline-offset: 2px;
171
171
  border-radius: var(--border-radius-container-gh9ysk, 16px);
172
172
  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
173
173
  }
174
174
 
175
- .awsui_cell-merged_wih1l_1qjbt_175:not(#\9) {
175
+ .awsui_cell-merged_wih1l_1xb6i_175:not(#\9) {
176
176
  text-align: center;
177
177
  padding: 0;
178
178
  }
179
- .awsui_cell-merged-content_wih1l_1qjbt_179:not(#\9) {
179
+ .awsui_cell-merged_wih1l_1xb6i_175.awsui_has-footer_wih1l_1xb6i_161:not(#\9) {
180
+ /*
181
+ Add a bottom border to the body cell of an empty table as a separator between the
182
+ table and the footer
183
+ */
184
+ border-bottom: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
185
+ }
186
+ .awsui_cell-merged-content_wih1l_1xb6i_186:not(#\9) {
180
187
  box-sizing: border-box;
181
188
  width: 100%;
182
189
  padding: var(--space-scaled-m-pv0fmt, 16px) var(--space-l-4vl6xu, 20px) var(--space-scaled-l-t03y3z, 20px);
@@ -184,34 +191,39 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
184
191
  /* stylelint-enable plugin/no-unsupported-browser-features */
185
192
  }
186
193
  @supports (position: sticky) {
187
- .awsui_cell-merged-content_wih1l_1qjbt_179:not(#\9) {
194
+ .awsui_cell-merged-content_wih1l_1xb6i_186:not(#\9) {
188
195
  position: sticky;
189
196
  left: 0;
190
- margin: 0 calc(-2 * var(--space-table-horizontal-58vuca, 24px));
197
+ margin: 0 calc(-2 * var(--space-table-horizontal-mj7h0h, 20px));
191
198
  }
192
199
  }
193
200
 
194
- .awsui_empty_wih1l_1qjbt_194:not(#\9) {
201
+ .awsui_empty_wih1l_1xb6i_201:not(#\9) {
195
202
  color: var(--color-text-empty-fjv325, #5f6b7a);
196
203
  }
197
204
 
198
- .awsui_loading_wih1l_1qjbt_198:not(#\9) {
205
+ .awsui_loading_wih1l_1xb6i_205:not(#\9) {
199
206
  /* used in test-utils */
200
207
  }
201
208
 
202
- .awsui_selection-control_wih1l_1qjbt_202:not(#\9) {
203
- position: relative;
209
+ /*
210
+ The min/max/width token values in Visual Refresh should align
211
+ the table header and body cells selection control with the table
212
+ filter search icon.
213
+ */
214
+ .awsui_selection-control_wih1l_1xb6i_214:not(#\9) {
204
215
  box-sizing: border-box;
205
- width: 54px;
206
- max-width: 54px;
207
- min-width: 54px;
216
+ max-width: var(--size-table-selection-horizontal-o8c8gs, 40px);
217
+ min-width: var(--size-table-selection-horizontal-o8c8gs, 40px);
218
+ position: relative;
219
+ width: var(--size-table-selection-horizontal-o8c8gs, 40px);
208
220
  }
209
- .awsui_selection-control_wih1l_1qjbt_202.awsui_selection-control-header_wih1l_1qjbt_209:not(#\9) {
221
+ .awsui_selection-control_wih1l_1xb6i_214.awsui_selection-control-header_wih1l_1xb6i_221:not(#\9) {
210
222
  padding: var(--space-scaled-xs-6859qs, 8px) var(--space-scaled-l-t03y3z, 20px);
211
223
  border-left: var(--border-item-width-qbbbsa, 2px) solid transparent;
212
224
  }
213
225
 
214
- .awsui_sticky-scrollbar_wih1l_1qjbt_214:not(#\9) {
226
+ .awsui_sticky-scrollbar_wih1l_1xb6i_226:not(#\9) {
215
227
  height: 15px;
216
228
  position: fixed;
217
229
  display: none;
@@ -221,10 +233,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
221
233
  bottom: 0;
222
234
  width: 100%;
223
235
  }
224
- .awsui_sticky-scrollbar-content_wih1l_1qjbt_224:not(#\9) {
236
+ .awsui_sticky-scrollbar-content_wih1l_1xb6i_236:not(#\9) {
225
237
  height: 15px;
226
238
  }
227
- .awsui_sticky-scrollbar-visible_wih1l_1qjbt_227:not(#\9) {
239
+ .awsui_sticky-scrollbar-visible_wih1l_1xb6i_239:not(#\9) {
228
240
  display: block;
229
241
  }
230
242
 
@@ -232,11 +244,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
232
244
  The dynamic height dark header needs a background that will cover
233
245
  the default white background of the container component.
234
246
  */
235
- .awsui_dark-header_wih1l_1qjbt_235:not(#\9) {
247
+ .awsui_dark-header_wih1l_1xb6i_247:not(#\9) {
236
248
  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
237
249
  }
238
250
 
239
- .awsui_header-secondary_wih1l_1qjbt_239:not(#\9) {
251
+ .awsui_header-secondary_wih1l_1xb6i_251:not(#\9) {
240
252
  overflow: auto;
241
253
  -ms-overflow-style: none; /* Internet Explorer 10+ */
242
254
  scrollbar-width: none; /* Firefox */
@@ -245,49 +257,42 @@ the default white background of the container component.
245
257
  border-radius: 0;
246
258
  background: var(--color-background-table-header-i1pa1g, #ffffff);
247
259
  }
248
- .awsui_header-secondary_wih1l_1qjbt_239.awsui_variant-stacked_wih1l_1qjbt_151 > .awsui_table_wih1l_1qjbt_133:not(#\9), .awsui_header-secondary_wih1l_1qjbt_239.awsui_variant-container_wih1l_1qjbt_151 > .awsui_table_wih1l_1qjbt_133:not(#\9) {
249
- padding-left: var(--space-table-horizontal-58vuca, 24px);
250
- padding-right: var(--space-table-horizontal-58vuca, 24px);
260
+ .awsui_header-secondary_wih1l_1xb6i_251.awsui_variant-stacked_wih1l_1xb6i_151 > .awsui_table_wih1l_1xb6i_133:not(#\9), .awsui_header-secondary_wih1l_1xb6i_251.awsui_variant-container_wih1l_1xb6i_151 > .awsui_table_wih1l_1xb6i_133:not(#\9) {
261
+ padding-left: var(--space-table-horizontal-mj7h0h, 20px);
262
+ padding-right: var(--space-table-horizontal-mj7h0h, 20px);
251
263
  }
252
- .awsui_header-secondary_wih1l_1qjbt_239:not(#\9)::-webkit-scrollbar {
264
+ .awsui_header-secondary_wih1l_1xb6i_251:not(#\9)::-webkit-scrollbar {
253
265
  display: none; /* Safari and Chrome */
254
266
  }
255
- .awsui_header-secondary_wih1l_1qjbt_239.awsui_table-has-header_wih1l_1qjbt_255:not(#\9) {
267
+ .awsui_header-secondary_wih1l_1xb6i_251.awsui_table-has-header_wih1l_1xb6i_267:not(#\9) {
256
268
  border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-container-divider-4ade7z, transparent);
257
269
  }
258
270
 
259
- .awsui_header-controls_wih1l_1qjbt_259:not(#\9) {
271
+ .awsui_header-controls_wih1l_1xb6i_271:not(#\9) {
260
272
  padding-top: var(--space-container-header-vertical-zsjhel, 12px);
261
273
  padding-bottom: var(--space-container-header-vertical-zsjhel, 12px);
262
274
  }
263
- .awsui_header-controls_wih1l_1qjbt_259.awsui_variant-stacked_wih1l_1qjbt_151:not(#\9), .awsui_header-controls_wih1l_1qjbt_259.awsui_variant-container_wih1l_1qjbt_151:not(#\9) {
264
- padding-left: calc(var(--space-table-horizontal-58vuca, 24px) + var(--space-table-header-horizontal-et2ko8, 0px));
265
- padding-right: calc(var(--space-table-horizontal-58vuca, 24px) + var(--space-table-header-horizontal-et2ko8, 0px));
275
+ .awsui_header-controls_wih1l_1xb6i_271.awsui_variant-stacked_wih1l_1xb6i_151:not(#\9), .awsui_header-controls_wih1l_1xb6i_271.awsui_variant-container_wih1l_1xb6i_151:not(#\9) {
276
+ padding-left: calc(var(--space-table-horizontal-mj7h0h, 20px) + var(--space-table-header-horizontal-et2ko8, 0px));
277
+ padding-right: calc(var(--space-table-horizontal-mj7h0h, 20px) + var(--space-table-header-horizontal-et2ko8, 0px));
266
278
  }
267
- .awsui_header-controls_wih1l_1qjbt_259.awsui_variant-embedded_wih1l_1qjbt_155:not(#\9) {
279
+ .awsui_header-controls_wih1l_1xb6i_271.awsui_variant-embedded_wih1l_1xb6i_155:not(#\9) {
268
280
  padding-left: var(--space-table-header-horizontal-et2ko8, 0px);
269
281
  padding-right: var(--space-table-header-horizontal-et2ko8, 0px);
270
282
  padding-top: var(--space-table-embedded-header-top-zf07fk, 0px);
271
283
  }
272
284
 
273
- .awsui_divider_wih1l_1qjbt_273:not(#\9) {
274
- border: none;
275
- margin: 0;
276
- height: 0;
277
- border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
278
- }
279
-
280
- .awsui_footer-wrapper_wih1l_1qjbt_280.awsui_variant-stacked_wih1l_1qjbt_151:not(#\9), .awsui_footer-wrapper_wih1l_1qjbt_280.awsui_variant-container_wih1l_1qjbt_151:not(#\9) {
281
- padding-left: var(--space-table-horizontal-58vuca, 24px);
282
- padding-right: var(--space-table-horizontal-58vuca, 24px);
285
+ .awsui_footer-wrapper_wih1l_1xb6i_285.awsui_variant-stacked_wih1l_1xb6i_151:not(#\9), .awsui_footer-wrapper_wih1l_1xb6i_285.awsui_variant-container_wih1l_1xb6i_151:not(#\9) {
286
+ padding-left: var(--space-table-horizontal-mj7h0h, 20px);
287
+ padding-right: var(--space-table-horizontal-mj7h0h, 20px);
283
288
  }
284
289
 
285
- .awsui_footer_wih1l_1qjbt_280:not(#\9) {
290
+ .awsui_footer_wih1l_1xb6i_285:not(#\9) {
286
291
  padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-table-footer-horizontal-8o6sk8, 0px);
287
292
  }
288
293
 
289
- .awsui_thead-active_wih1l_1qjbt_289:not(#\9),
290
- .awsui_row_wih1l_1qjbt_290:not(#\9),
291
- .awsui_row-selected_wih1l_1qjbt_291:not(#\9) {
294
+ .awsui_thead-active_wih1l_1xb6i_294:not(#\9),
295
+ .awsui_row_wih1l_1xb6i_295:not(#\9),
296
+ .awsui_row-selected_wih1l_1xb6i_296:not(#\9) {
292
297
  /* used in test-utils */
293
298
  }
package/table/styles.selectors.js CHANGED
@@ -2,39 +2,38 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_wih1l_1qjbt_97",
6
- "tools": "awsui_tools_wih1l_1qjbt_106",
7
- "tools-filtering": "awsui_tools-filtering_wih1l_1qjbt_112",
8
- "tools-align-right": "awsui_tools-align-right_wih1l_1qjbt_117",
9
- "tools-pagination": "awsui_tools-pagination_wih1l_1qjbt_121",
10
- "tools-preferences": "awsui_tools-preferences_wih1l_1qjbt_121",
11
- "tools-small": "awsui_tools-small_wih1l_1qjbt_127",
12
- "table": "awsui_table_wih1l_1qjbt_133",
13
- "table-layout-fixed": "awsui_table-layout-fixed_wih1l_1qjbt_139",
14
- "wrapper": "awsui_wrapper_wih1l_1qjbt_143",
15
- "variant-stacked": "awsui_variant-stacked_wih1l_1qjbt_151",
16
- "variant-container": "awsui_variant-container_wih1l_1qjbt_151",
17
- "variant-embedded": "awsui_variant-embedded_wih1l_1qjbt_155",
18
- "has-header": "awsui_has-header_wih1l_1qjbt_158",
19
- "has-footer": "awsui_has-footer_wih1l_1qjbt_161",
20
- "cell-merged": "awsui_cell-merged_wih1l_1qjbt_175",
21
- "cell-merged-content": "awsui_cell-merged-content_wih1l_1qjbt_179",
22
- "empty": "awsui_empty_wih1l_1qjbt_194",
23
- "loading": "awsui_loading_wih1l_1qjbt_198",
24
- "selection-control": "awsui_selection-control_wih1l_1qjbt_202",
25
- "selection-control-header": "awsui_selection-control-header_wih1l_1qjbt_209",
26
- "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_1qjbt_214",
27
- "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_1qjbt_224",
28
- "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_1qjbt_227",
29
- "dark-header": "awsui_dark-header_wih1l_1qjbt_235",
30
- "header-secondary": "awsui_header-secondary_wih1l_1qjbt_239",
31
- "table-has-header": "awsui_table-has-header_wih1l_1qjbt_255",
32
- "header-controls": "awsui_header-controls_wih1l_1qjbt_259",
33
- "divider": "awsui_divider_wih1l_1qjbt_273",
34
- "footer-wrapper": "awsui_footer-wrapper_wih1l_1qjbt_280",
35
- "footer": "awsui_footer_wih1l_1qjbt_280",
36
- "thead-active": "awsui_thead-active_wih1l_1qjbt_289",
37
- "row": "awsui_row_wih1l_1qjbt_290",
38
- "row-selected": "awsui_row-selected_wih1l_1qjbt_291"
5
+ "root": "awsui_root_wih1l_1xb6i_97",
6
+ "tools": "awsui_tools_wih1l_1xb6i_106",
7
+ "tools-filtering": "awsui_tools-filtering_wih1l_1xb6i_112",
8
+ "tools-align-right": "awsui_tools-align-right_wih1l_1xb6i_117",
9
+ "tools-pagination": "awsui_tools-pagination_wih1l_1xb6i_121",
10
+ "tools-preferences": "awsui_tools-preferences_wih1l_1xb6i_121",
11
+ "tools-small": "awsui_tools-small_wih1l_1xb6i_127",
12
+ "table": "awsui_table_wih1l_1xb6i_133",
13
+ "table-layout-fixed": "awsui_table-layout-fixed_wih1l_1xb6i_139",
14
+ "wrapper": "awsui_wrapper_wih1l_1xb6i_143",
15
+ "variant-stacked": "awsui_variant-stacked_wih1l_1xb6i_151",
16
+ "variant-container": "awsui_variant-container_wih1l_1xb6i_151",
17
+ "variant-embedded": "awsui_variant-embedded_wih1l_1xb6i_155",
18
+ "has-header": "awsui_has-header_wih1l_1xb6i_158",
19
+ "has-footer": "awsui_has-footer_wih1l_1xb6i_161",
20
+ "cell-merged": "awsui_cell-merged_wih1l_1xb6i_175",
21
+ "cell-merged-content": "awsui_cell-merged-content_wih1l_1xb6i_186",
22
+ "empty": "awsui_empty_wih1l_1xb6i_201",
23
+ "loading": "awsui_loading_wih1l_1xb6i_205",
24
+ "selection-control": "awsui_selection-control_wih1l_1xb6i_214",
25
+ "selection-control-header": "awsui_selection-control-header_wih1l_1xb6i_221",
26
+ "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_1xb6i_226",
27
+ "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_1xb6i_236",
28
+ "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_1xb6i_239",
29
+ "dark-header": "awsui_dark-header_wih1l_1xb6i_247",
30
+ "header-secondary": "awsui_header-secondary_wih1l_1xb6i_251",
31
+ "table-has-header": "awsui_table-has-header_wih1l_1xb6i_267",
32
+ "header-controls": "awsui_header-controls_wih1l_1xb6i_271",
33
+ "footer-wrapper": "awsui_footer-wrapper_wih1l_1xb6i_285",
34
+ "footer": "awsui_footer_wih1l_1xb6i_285",
35
+ "thead-active": "awsui_thead-active_wih1l_1xb6i_294",
36
+ "row": "awsui_row_wih1l_1xb6i_295",
37
+ "row-selected": "awsui_row-selected_wih1l_1xb6i_296"
39
38
  };
40
39
 
package/table/thead.d.ts CHANGED
@@ -23,6 +23,7 @@ export interface TheadProps {
23
23
  hidden?: boolean;
24
24
  stuck?: boolean;
25
25
  singleSelectionHeaderAriaLabel?: string;
26
+ stripedRows?: boolean;
26
27
  }
27
28
  declare const Thead: React.ForwardRefExoticComponent<TheadProps & React.RefAttributes<HTMLTableRowElement>>;
28
29
  export default Thead;
package/table/thead.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,MAAM,WAAW,UAAU;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,cAAc,EAAE,qBAAqB,CAAC;IACtC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;CACzC;AAED,QAAA,MAAM,KAAK,wFAqGV,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AASvF,MAAM,WAAW,UAAU;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,cAAc,EAAE,qBAAqB,CAAC;IACtC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,KAAK,wFAgHV,CAAC;AAEF,eAAe,KAAK,CAAC"}
package/table/thead.js CHANGED
@@ -9,13 +9,15 @@ import { fireNonCancelableEvent } from '../internal/events';
9
9
  import { getColumnKey } from './utils';
10
10
  import { TableHeaderCell } from './header-cell';
11
11
  import { useColumnWidths } from './use-column-widths';
12
+ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
12
13
  import styles from './styles.css.js';
13
14
  import headerCellStyles from './header-cell/styles.css.js';
14
15
  import ScreenreaderOnly from '../internal/components/screenreader-only';
15
16
  var Thead = React.forwardRef(function (_a, outerRef) {
16
- var containerWidth = _a.containerWidth, selectionType = _a.selectionType, selectAllProps = _a.selectAllProps, columnDefinitions = _a.columnDefinitions, sortingColumn = _a.sortingColumn, sortingDisabled = _a.sortingDisabled, sortingDescending = _a.sortingDescending, resizableColumns = _a.resizableColumns, variant = _a.variant, wrapLines = _a.wrapLines, onFocusMove = _a.onFocusMove, onCellFocus = _a.onCellFocus, onCellBlur = _a.onCellBlur, onSortingChange = _a.onSortingChange, onResizeFinish = _a.onResizeFinish, singleSelectionHeaderAriaLabel = _a.singleSelectionHeaderAriaLabel, _b = _a.showFocusRing, showFocusRing = _b === void 0 ? null : _b, _c = _a.sticky, sticky = _c === void 0 ? false : _c, _d = _a.hidden, hidden = _d === void 0 ? false : _d, _e = _a.stuck, stuck = _e === void 0 ? false : _e;
17
- var headerCellClass = clsx(headerCellStyles['header-cell'], headerCellStyles["header-cell-variant-".concat(variant)], sticky && headerCellStyles['header-cell-sticky'], stuck && headerCellStyles['header-cell-stuck']);
18
- var selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header']);
17
+ var containerWidth = _a.containerWidth, selectionType = _a.selectionType, selectAllProps = _a.selectAllProps, columnDefinitions = _a.columnDefinitions, sortingColumn = _a.sortingColumn, sortingDisabled = _a.sortingDisabled, sortingDescending = _a.sortingDescending, resizableColumns = _a.resizableColumns, variant = _a.variant, wrapLines = _a.wrapLines, onFocusMove = _a.onFocusMove, onCellFocus = _a.onCellFocus, onCellBlur = _a.onCellBlur, onSortingChange = _a.onSortingChange, onResizeFinish = _a.onResizeFinish, singleSelectionHeaderAriaLabel = _a.singleSelectionHeaderAriaLabel, stripedRows = _a.stripedRows, _b = _a.showFocusRing, showFocusRing = _b === void 0 ? null : _b, _c = _a.sticky, sticky = _c === void 0 ? false : _c, _d = _a.hidden, hidden = _d === void 0 ? false : _d, _e = _a.stuck, stuck = _e === void 0 ? false : _e;
18
+ var isVisualRefresh = useVisualRefresh();
19
+ var headerCellClass = clsx(headerCellStyles['header-cell'], headerCellStyles["header-cell-variant-".concat(variant)], sticky && headerCellStyles['header-cell-sticky'], stuck && headerCellStyles['header-cell-stuck'], stripedRows && headerCellStyles['has-striped-rows'], isVisualRefresh && headerCellStyles['is-visual-refresh']);
20
+ var selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header'], isVisualRefresh && styles['is-visual-refresh']);
19
21
  var _f = useColumnWidths(), columnWidths = _f.columnWidths, totalWidth = _f.totalWidth, updateColumn = _f.updateColumn;
20
22
  return (React.createElement("thead", { className: clsx(!hidden && styles['thead-active']) },
21
23
  React.createElement("tr", __assign({}, focusMarkers.all, { ref: outerRef, "aria-rowindex": 1 }),
package/table/thead.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.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 from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl, { SelectionControlProps } from './selection-control';\nimport { focusMarkers } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\n\nexport interface TheadProps {\n containerWidth: number | null;\n selectionType: TableProps.SelectionType | undefined;\n columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n sortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n variant: TableProps.Variant;\n wrapLines: boolean | undefined;\n resizableColumns: boolean | undefined;\n selectAllProps: SelectionControlProps;\n onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n onCellFocus?: (colIndex: number) => void;\n onCellBlur?: () => void;\n onResizeFinish: (newWidths: Record<string, number>) => void;\n showFocusRing?: number | null;\n onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n sticky?: boolean;\n hidden?: boolean;\n stuck?: boolean;\n singleSelectionHeaderAriaLabel?: string;\n}\n\nconst Thead = React.forwardRef(\n (\n {\n containerWidth,\n selectionType,\n selectAllProps,\n columnDefinitions,\n sortingColumn,\n sortingDisabled,\n sortingDescending,\n resizableColumns,\n variant,\n wrapLines,\n onFocusMove,\n onCellFocus,\n onCellBlur,\n onSortingChange,\n onResizeFinish,\n singleSelectionHeaderAriaLabel,\n showFocusRing = null,\n sticky = false,\n hidden = false,\n stuck = false,\n }: TheadProps,\n outerRef: React.Ref<HTMLTableRowElement>\n ) => {\n const headerCellClass = clsx(\n headerCellStyles['header-cell'],\n headerCellStyles[`header-cell-variant-${variant}`],\n sticky && headerCellStyles['header-cell-sticky'],\n stuck && headerCellStyles['header-cell-stuck']\n );\n const selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header']);\n const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n return (\n <thead className={clsx(!hidden && styles['thead-active'])}>\n <tr {...focusMarkers.all} ref={outerRef} aria-rowindex={1}>\n {selectionType === 'multi' && (\n <th\n className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n scope=\"col\"\n >\n <SelectionControl\n onFocusDown={event => onFocusMove!(event.target as HTMLElement, -1, +1)}\n {...selectAllProps}\n {...(hidden ? { tabIndex: -1 } : {})}\n />\n </th>\n )}\n {selectionType === 'single' && (\n <th\n className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n scope=\"col\"\n >\n <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n </th>\n )}\n {columnDefinitions.map((column, colIndex) => {\n let widthOverride;\n if (resizableColumns) {\n if (columnWidths) {\n // use stateful value if available\n widthOverride = columnWidths[getColumnKey(column, colIndex)];\n }\n if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n // let the last column grow and fill the container width\n widthOverride = 'auto';\n }\n }\n return (\n <TableHeaderCell\n key={getColumnKey(column, colIndex)}\n className={headerCellClass}\n style={{\n width: widthOverride || column.width,\n minWidth: sticky ? undefined : column.minWidth,\n maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n }}\n tabIndex={sticky ? -1 : 0}\n showFocusRing={colIndex === showFocusRing}\n column={column}\n activeSortingColumn={sortingColumn}\n sortingDescending={sortingDescending}\n sortingDisabled={sortingDisabled}\n wrapLines={wrapLines}\n hidden={hidden}\n colIndex={colIndex}\n updateColumn={updateColumn}\n onResizeFinish={() => onResizeFinish(columnWidths)}\n resizableColumns={resizableColumns}\n onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n onFocus={() => onCellFocus?.(colIndex)}\n onBlur={onCellBlur}\n />\n );\n })}\n </tr>\n </thead>\n );\n }\n);\n\nexport default Thead;\n"]}
1
+ {"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.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 from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl, { SelectionControlProps } from './selection-control';\nimport { focusMarkers } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\n\nexport interface TheadProps {\n containerWidth: number | null;\n selectionType: TableProps.SelectionType | undefined;\n columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n sortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n variant: TableProps.Variant;\n wrapLines: boolean | undefined;\n resizableColumns: boolean | undefined;\n selectAllProps: SelectionControlProps;\n onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n onCellFocus?: (colIndex: number) => void;\n onCellBlur?: () => void;\n onResizeFinish: (newWidths: Record<string, number>) => void;\n showFocusRing?: number | null;\n onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n sticky?: boolean;\n hidden?: boolean;\n stuck?: boolean;\n singleSelectionHeaderAriaLabel?: string;\n stripedRows?: boolean;\n}\n\nconst Thead = React.forwardRef(\n (\n {\n containerWidth,\n selectionType,\n selectAllProps,\n columnDefinitions,\n sortingColumn,\n sortingDisabled,\n sortingDescending,\n resizableColumns,\n variant,\n wrapLines,\n onFocusMove,\n onCellFocus,\n onCellBlur,\n onSortingChange,\n onResizeFinish,\n singleSelectionHeaderAriaLabel,\n stripedRows,\n showFocusRing = null,\n sticky = false,\n hidden = false,\n stuck = false,\n }: TheadProps,\n outerRef: React.Ref<HTMLTableRowElement>\n ) => {\n const isVisualRefresh = useVisualRefresh();\n\n const headerCellClass = clsx(\n headerCellStyles['header-cell'],\n headerCellStyles[`header-cell-variant-${variant}`],\n sticky && headerCellStyles['header-cell-sticky'],\n stuck && headerCellStyles['header-cell-stuck'],\n stripedRows && headerCellStyles['has-striped-rows'],\n isVisualRefresh && headerCellStyles['is-visual-refresh']\n );\n\n const selectionCellClass = clsx(\n styles['selection-control'],\n styles['selection-control-header'],\n isVisualRefresh && styles['is-visual-refresh']\n );\n\n const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n return (\n <thead className={clsx(!hidden && styles['thead-active'])}>\n <tr {...focusMarkers.all} ref={outerRef} aria-rowindex={1}>\n {selectionType === 'multi' && (\n <th\n className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n scope=\"col\"\n >\n <SelectionControl\n onFocusDown={event => onFocusMove!(event.target as HTMLElement, -1, +1)}\n {...selectAllProps}\n {...(hidden ? { tabIndex: -1 } : {})}\n />\n </th>\n )}\n {selectionType === 'single' && (\n <th\n className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n scope=\"col\"\n >\n <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n </th>\n )}\n {columnDefinitions.map((column, colIndex) => {\n let widthOverride;\n if (resizableColumns) {\n if (columnWidths) {\n // use stateful value if available\n widthOverride = columnWidths[getColumnKey(column, colIndex)];\n }\n if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n // let the last column grow and fill the container width\n widthOverride = 'auto';\n }\n }\n return (\n <TableHeaderCell\n key={getColumnKey(column, colIndex)}\n className={headerCellClass}\n style={{\n width: widthOverride || column.width,\n minWidth: sticky ? undefined : column.minWidth,\n maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n }}\n tabIndex={sticky ? -1 : 0}\n showFocusRing={colIndex === showFocusRing}\n column={column}\n activeSortingColumn={sortingColumn}\n sortingDescending={sortingDescending}\n sortingDisabled={sortingDisabled}\n wrapLines={wrapLines}\n hidden={hidden}\n colIndex={colIndex}\n updateColumn={updateColumn}\n onResizeFinish={() => onResizeFinish(columnWidths)}\n resizableColumns={resizableColumns}\n onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n onFocus={() => onCellFocus?.(colIndex)}\n onBlur={onCellBlur}\n />\n );\n })}\n </tr>\n </thead>\n );\n }\n);\n\nexport default Thead;\n"]}
package/table/use-sticky-header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,SAAS,EAAe,MAAM,OAAO,CAAC;AAkBhE,eAAO,MAAM,eAAe,aAChB,UAAU,WAAW,CAAC,YACtB,UAAU,WAAW,CAAC,qBACb,UAAU,WAAW,CAAC,qBACtB,UAAU,WAAW,CAAC,mBACxB,UAAU,WAAW,CAAC;4BAgDR,WAAW,GAAG,IAAI;;CAMlD,CAAC"}
1
+ {"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,SAAS,EAAe,MAAM,OAAO,CAAC;AAkBhE,eAAO,MAAM,eAAe,aAChB,UAAU,WAAW,CAAC,YACtB,UAAU,WAAW,CAAC,qBACb,UAAU,WAAW,CAAC,qBACtB,UAAU,WAAW,CAAC,mBACxB,UAAU,WAAW,CAAC;4BAmCR,WAAW,GAAG,IAAI;;CAMlD,CAAC"}
package/table/use-sticky-header.js CHANGED
@@ -35,19 +35,6 @@ export var useStickyHeader = function (tableRef, theadRef, secondaryTheadRef, se
35
35
  }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);
36
36
  useLayoutEffect(function () {
37
37
  syncColumnHeaderWidths();
38
- // Content is not going to be layed out until the next frame in angular,
39
- // so we need to sync the column headers again.
40
- setTimeout(function () { return syncColumnHeaderWidths(); }, 0);
41
- var secondaryTable = secondaryTableRef.current;
42
- var primaryTable = tableWrapperRef.current;
43
- return function () {
44
- if (secondaryTable) {
45
- secondaryTable.style.width = '';
46
- }
47
- if (primaryTable) {
48
- primaryTable.style.marginTop = '';
49
- }
50
- };
51
38
  });
52
39
  useResizeObserver(theadRef, syncColumnHeaderWidths);
53
40
  var scrollToTop = function () {
package/table/use-sticky-header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"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 { useLayoutEffect, RefObject, useCallback } from 'react';\nimport { useResizeObserver } from '../internal/hooks/container-queries/use-resize-observer';\nimport stickyScrolling, { calculateScrollingOffset, scrollUpBy } from './sticky-scrolling';\nimport { useMobile } from '../internal/hooks/use-mobile';\n\nfunction syncSizes(from: HTMLElement, to: HTMLElement) {\n const fromCells = Array.prototype.slice.apply(from.children);\n const toCells = Array.prototype.slice.apply(to.children);\n for (let i = 0; i < fromCells.length; i++) {\n let width = fromCells[i].style.width;\n // use auto if it is set by resizable columns or real size otherwise\n if (width !== 'auto') {\n width = `${fromCells[i].offsetWidth}px`;\n }\n toCells[i].style.width = width;\n }\n}\n\nexport const useStickyHeader = (\n tableRef: RefObject<HTMLElement>,\n theadRef: RefObject<HTMLElement>,\n secondaryTheadRef: RefObject<HTMLElement>,\n secondaryTableRef: RefObject<HTMLElement>,\n tableWrapperRef: RefObject<HTMLElement>\n) => {\n const isMobile = useMobile();\n // Sync the sizes of the column header copies in the sticky header with the originals\n const syncColumnHeaderWidths = useCallback(() => {\n if (\n tableRef.current &&\n theadRef.current &&\n secondaryTheadRef.current &&\n secondaryTableRef.current &&\n tableWrapperRef.current\n ) {\n syncSizes(theadRef.current, secondaryTheadRef.current);\n\n // Using the tableRef offsetWidth instead of the theadRef because in VR\n // the tableRef adds extra padding to the table and by default the theadRef will have a width\n // without the padding and will make the sticky header width incorrect.\n secondaryTableRef.current.style.width = `${tableRef.current.offsetWidth}px`;\n\n tableWrapperRef.current.style.marginTop = `-${theadRef.current.offsetHeight}px`;\n }\n }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);\n useLayoutEffect(() => {\n syncColumnHeaderWidths();\n // Content is not going to be layed out until the next frame in angular,\n // so we need to sync the column headers again.\n setTimeout(() => syncColumnHeaderWidths(), 0);\n const secondaryTable = secondaryTableRef.current;\n const primaryTable = tableWrapperRef.current;\n return () => {\n if (secondaryTable) {\n secondaryTable.style.width = '';\n }\n if (primaryTable) {\n primaryTable.style.marginTop = '';\n }\n };\n });\n useResizeObserver(theadRef, syncColumnHeaderWidths);\n const scrollToTop = () => {\n if (!isMobile && theadRef.current && secondaryTheadRef.current && tableWrapperRef.current) {\n const scrollDist = calculateScrollingOffset(theadRef.current, secondaryTheadRef.current);\n if (scrollDist > 0) {\n scrollUpBy(scrollDist, tableWrapperRef.current);\n }\n }\n };\n const { scrollToItem } = stickyScrolling(tableWrapperRef, secondaryTheadRef);\n const scrollToRow = (itemNode: HTMLElement | null) => {\n if (!isMobile) {\n scrollToItem(itemNode);\n }\n };\n return { scrollToRow, scrollToTop };\n};\n"]}
1
+ {"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"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 { useLayoutEffect, RefObject, useCallback } from 'react';\nimport { useResizeObserver } from '../internal/hooks/container-queries/use-resize-observer';\nimport stickyScrolling, { calculateScrollingOffset, scrollUpBy } from './sticky-scrolling';\nimport { useMobile } from '../internal/hooks/use-mobile';\n\nfunction syncSizes(from: HTMLElement, to: HTMLElement) {\n const fromCells = Array.prototype.slice.apply(from.children);\n const toCells = Array.prototype.slice.apply(to.children);\n for (let i = 0; i < fromCells.length; i++) {\n let width = fromCells[i].style.width;\n // use auto if it is set by resizable columns or real size otherwise\n if (width !== 'auto') {\n width = `${fromCells[i].offsetWidth}px`;\n }\n toCells[i].style.width = width;\n }\n}\n\nexport const useStickyHeader = (\n tableRef: RefObject<HTMLElement>,\n theadRef: RefObject<HTMLElement>,\n secondaryTheadRef: RefObject<HTMLElement>,\n secondaryTableRef: RefObject<HTMLElement>,\n tableWrapperRef: RefObject<HTMLElement>\n) => {\n const isMobile = useMobile();\n // Sync the sizes of the column header copies in the sticky header with the originals\n const syncColumnHeaderWidths = useCallback(() => {\n if (\n tableRef.current &&\n theadRef.current &&\n secondaryTheadRef.current &&\n secondaryTableRef.current &&\n tableWrapperRef.current\n ) {\n syncSizes(theadRef.current, secondaryTheadRef.current);\n\n // Using the tableRef offsetWidth instead of the theadRef because in VR\n // the tableRef adds extra padding to the table and by default the theadRef will have a width\n // without the padding and will make the sticky header width incorrect.\n secondaryTableRef.current.style.width = `${tableRef.current.offsetWidth}px`;\n\n tableWrapperRef.current.style.marginTop = `-${theadRef.current.offsetHeight}px`;\n }\n }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);\n useLayoutEffect(() => {\n syncColumnHeaderWidths();\n });\n useResizeObserver(theadRef, syncColumnHeaderWidths);\n const scrollToTop = () => {\n if (!isMobile && theadRef.current && secondaryTheadRef.current && tableWrapperRef.current) {\n const scrollDist = calculateScrollingOffset(theadRef.current, secondaryTheadRef.current);\n if (scrollDist > 0) {\n scrollUpBy(scrollDist, tableWrapperRef.current);\n }\n }\n };\n const { scrollToItem } = stickyScrolling(tableWrapperRef, secondaryTheadRef);\n const scrollToRow = (itemNode: HTMLElement | null) => {\n if (!isMobile) {\n scrollToItem(itemNode);\n }\n };\n return { scrollToRow, scrollToTop };\n};\n"]}
package/tabs/styles.css.js CHANGED
@@ -1,26 +1,26 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "tabs-header": "awsui_tabs-header_14rmt_17xev_186",
5
- "tabs-header-list": "awsui_tabs-header-list_14rmt_17xev_192",
6
- "pagination-button": "awsui_pagination-button_14rmt_17xev_207",
7
- "pagination-button-left": "awsui_pagination-button-left_14rmt_17xev_212",
8
- "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_17xev_215",
9
- "pagination-button-right": "awsui_pagination-button-right_14rmt_17xev_219",
10
- "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_17xev_222",
11
- "tabs-tab": "awsui_tabs-tab_14rmt_17xev_227",
12
- "tabs-tab-label": "awsui_tabs-tab-label_14rmt_17xev_238",
13
- "tabs-tab-link": "awsui_tabs-tab-link_14rmt_17xev_254",
14
- "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_17xev_311",
15
- "refresh": "awsui_refresh_14rmt_17xev_329",
16
- "tabs-tab-active": "awsui_tabs-tab-active_14rmt_17xev_343",
17
- "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_17xev_350",
18
- "root": "awsui_root_14rmt_17xev_354",
19
- "tabs": "awsui_tabs_14rmt_17xev_186",
20
- "tabs-content": "awsui_tabs-content_14rmt_17xev_371",
21
- "tabs-content-active": "awsui_tabs-content-active_14rmt_17xev_375",
22
- "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_17xev_385",
23
- "with-paddings": "awsui_with-paddings_14rmt_17xev_385",
24
- "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_17xev_389"
4
+ "tabs-header": "awsui_tabs-header_14rmt_1reve_186",
5
+ "tabs-header-list": "awsui_tabs-header-list_14rmt_1reve_192",
6
+ "pagination-button": "awsui_pagination-button_14rmt_1reve_207",
7
+ "pagination-button-left": "awsui_pagination-button-left_14rmt_1reve_212",
8
+ "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1reve_215",
9
+ "pagination-button-right": "awsui_pagination-button-right_14rmt_1reve_219",
10
+ "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1reve_222",
11
+ "tabs-tab": "awsui_tabs-tab_14rmt_1reve_227",
12
+ "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1reve_238",
13
+ "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1reve_254",
14
+ "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1reve_311",
15
+ "refresh": "awsui_refresh_14rmt_1reve_329",
16
+ "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1reve_343",
17
+ "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1reve_350",
18
+ "root": "awsui_root_14rmt_1reve_354",
19
+ "tabs": "awsui_tabs_14rmt_1reve_186",
20
+ "tabs-content": "awsui_tabs-content_14rmt_1reve_371",
21
+ "tabs-content-active": "awsui_tabs-content-active_14rmt_1reve_375",
22
+ "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1reve_385",
23
+ "with-paddings": "awsui_with-paddings_14rmt_1reve_385",
24
+ "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1reve_389"
25
25
  };
26
26