@cloudscape-design/components 3.0.721 → 3.0.723

package/table/styles.scoped.css

@@ -66,6 +66,50 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
 /* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /*
@@ -84,8 +128,6 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
-surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -94,11 +136,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_wih1l_177zk_101:not(#\9) {
+.awsui_root_wih1l_1hj7j_149:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   color: var(--color-text-body-default-at06ol, #000716);
@@ -109,7 +157,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 100%;
 }
 
-.awsui_tools_wih1l_177zk_112:not(#\9) {
+.awsui_tools_wih1l_1hj7j_160:not(#\9) {
   display: flex;
   align-items: flex-end;
   flex-wrap: wrap;
@@ -117,67 +165,67 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block-end: var(--space-table-header-tools-bottom-25ubsj, 0px);
   padding-inline: 0;
 }
-.awsui_tools-filtering_wih1l_177zk_120:not(#\9) {
+.awsui_tools-filtering_wih1l_1hj7j_168:not(#\9) {
   max-inline-size: 100%;
   margin-inline-end: var(--space-l-t419sm, 20px);
 }
 @supports (flex-basis: fit-content) {
-  .awsui_tools-filtering_wih1l_177zk_120:not(#\9) {
+  .awsui_tools-filtering_wih1l_1hj7j_168:not(#\9) {
     flex: 1 1 fit-content;
   }
 }
 @supports not (flex-basis: fit-content) {
-  .awsui_tools-filtering_wih1l_177zk_120:not(#\9) {
+  .awsui_tools-filtering_wih1l_1hj7j_168:not(#\9) {
     flex: 1 1 auto;
   }
 }
-.awsui_tools-align-right_wih1l_177zk_134:not(#\9) {
+.awsui_tools-align-right_wih1l_1hj7j_182:not(#\9) {
   display: flex;
   margin-inline-start: auto;
 }
-.awsui_tools-pagination_wih1l_177zk_138 + .awsui_tools-preferences_wih1l_177zk_138:not(#\9) {
+.awsui_tools-pagination_wih1l_1hj7j_186 + .awsui_tools-preferences_wih1l_1hj7j_186:not(#\9) {
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
   box-sizing: border-box;
   margin-inline-start: var(--space-xs-zb16t3, 8px);
   padding-inline-start: var(--space-xs-zb16t3, 8px);
 }
-.awsui_tools-small_wih1l_177zk_144 > .awsui_tools-filtering_wih1l_177zk_120:not(#\9) {
+.awsui_tools-small_wih1l_1hj7j_192 > .awsui_tools-filtering_wih1l_1hj7j_168:not(#\9) {
   margin-inline-end: 0;
   margin-block-end: var(--space-scaled-xs-26e2du, 8px);
   flex-basis: 100%;
 }
 
-.awsui_table_wih1l_177zk_150:not(#\9) {
+.awsui_table_wih1l_1hj7j_198:not(#\9) {
   inline-size: 100%;
   border-spacing: 0;
   position: relative;
   box-sizing: border-box;
 }
-.awsui_table-layout-fixed_wih1l_177zk_156:not(#\9) {
+.awsui_table-layout-fixed_wih1l_1hj7j_204:not(#\9) {
   table-layout: fixed;
 }
 
-.awsui_wrapper_wih1l_177zk_160:not(#\9) {
+.awsui_wrapper_wih1l_1hj7j_208:not(#\9) {
   position: relative;
   box-sizing: border-box;
   inline-size: 100%;
   overflow-x: auto;
   scrollbar-width: none; /* Hide scrollbar in Firefox */
 }
-.awsui_wrapper_wih1l_177zk_160.awsui_variant-stacked_wih1l_177zk_167 > .awsui_table_wih1l_177zk_150:not(#\9), .awsui_wrapper_wih1l_177zk_160.awsui_variant-stacked_wih1l_177zk_167 > .awsui_wrapper-content-measure_wih1l_177zk_167:not(#\9), .awsui_wrapper_wih1l_177zk_160.awsui_variant-container_wih1l_177zk_167 > .awsui_table_wih1l_177zk_150:not(#\9), .awsui_wrapper_wih1l_177zk_160.awsui_variant-container_wih1l_177zk_167 > .awsui_wrapper-content-measure_wih1l_177zk_167:not(#\9) {
+.awsui_wrapper_wih1l_1hj7j_208.awsui_variant-stacked_wih1l_1hj7j_215 > .awsui_table_wih1l_1hj7j_198:not(#\9), .awsui_wrapper_wih1l_1hj7j_208.awsui_variant-stacked_wih1l_1hj7j_215 > .awsui_wrapper-content-measure_wih1l_1hj7j_215:not(#\9), .awsui_wrapper_wih1l_1hj7j_208.awsui_variant-container_wih1l_1hj7j_215 > .awsui_table_wih1l_1hj7j_198:not(#\9), .awsui_wrapper_wih1l_1hj7j_208.awsui_variant-container_wih1l_1hj7j_215 > .awsui_wrapper-content-measure_wih1l_1hj7j_215:not(#\9) {
   padding-inline: var(--space-table-horizontal-8davlm, 20px);
 }
-.awsui_wrapper_wih1l_177zk_160.awsui_variant-container_wih1l_177zk_167:not(#\9):not(.awsui_has-footer_wih1l_177zk_170) {
+.awsui_wrapper_wih1l_1hj7j_208.awsui_variant-container_wih1l_1hj7j_215:not(#\9):not(.awsui_has-footer_wih1l_1hj7j_218) {
   padding-block-end: var(--space-table-content-bottom-9yr834, 4px);
 }
-.awsui_wrapper_wih1l_177zk_160:not(#\9):not(.awsui_has-header_wih1l_177zk_173) {
+.awsui_wrapper_wih1l_1hj7j_208:not(#\9):not(.awsui_has-header_wih1l_1hj7j_221) {
   border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
 }
-.awsui_wrapper_wih1l_177zk_160:not(#\9)::-webkit-scrollbar {
+.awsui_wrapper_wih1l_1hj7j_208:not(#\9)::-webkit-scrollbar {
   display: none; /* Hide scrollbar in Safari and Chrome */
 }
-body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_177zk_160:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_1hj7j_208:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -187,19 +235,19 @@ body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_177zk_160:not(#\9):focu
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_cell-merged_wih1l_177zk_190:not(#\9) {
+.awsui_cell-merged_wih1l_1hj7j_238:not(#\9) {
   text-align: center;
   padding-block: 0;
   padding-inline: 0;
 }
-.awsui_cell-merged_wih1l_177zk_190.awsui_has-footer_wih1l_177zk_170:not(#\9) {
+.awsui_cell-merged_wih1l_1hj7j_238.awsui_has-footer_wih1l_1hj7j_218:not(#\9) {
   /*
   Add a bottom border to the body cell of an empty table as a separator between the 
   table and the footer
   */
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_cell-merged-content_wih1l_177zk_202:not(#\9) {
+.awsui_cell-merged-content_wih1l_1hj7j_250:not(#\9) {
   box-sizing: border-box;
   inline-size: 100%;
   padding-block-start: var(--space-scaled-m-mo5yse, 16px);
@@ -207,7 +255,7 @@ body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_177zk_160:not(#\9):focu
   padding-inline: var(--space-l-t419sm, 20px);
 }
 @supports (position: sticky) {
-  .awsui_cell-merged-content_wih1l_177zk_202:not(#\9) {
+  .awsui_cell-merged-content_wih1l_1hj7j_250:not(#\9) {
     position: sticky;
     inset-inline-start: 0;
     margin-block: 0;
@@ -215,11 +263,11 @@ body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_177zk_160:not(#\9):focu
   }
 }
 
-.awsui_empty_wih1l_177zk_218:not(#\9) {
+.awsui_empty_wih1l_1hj7j_266:not(#\9) {
   color: var(--color-text-empty-2wfcyr, #5f6b7a);
 }
 
-.awsui_loading_wih1l_177zk_222:not(#\9) {
+.awsui_loading_wih1l_1hj7j_270:not(#\9) {
   /* used in test-utils */
 }
 
@@ -228,20 +276,20 @@ The min/max/width token values in Visual Refresh should align
 the table header and body cells selection control with the table
 filter search icon.
 */
-.awsui_selection-control_wih1l_177zk_231:not(#\9) {
+.awsui_selection-control_wih1l_1hj7j_279:not(#\9) {
   box-sizing: border-box;
   max-inline-size: var(--size-table-selection-horizontal-oqvl1b, 40px);
   min-inline-size: var(--size-table-selection-horizontal-oqvl1b, 40px);
   position: relative;
   inline-size: var(--size-table-selection-horizontal-oqvl1b, 40px);
 }
-.awsui_selection-control_wih1l_177zk_231.awsui_selection-control-header_wih1l_177zk_238:not(#\9) {
+.awsui_selection-control_wih1l_1hj7j_279.awsui_selection-control-header_wih1l_1hj7j_286:not(#\9) {
   padding-block: var(--space-scaled-xs-26e2du, 8px);
   padding-inline: var(--space-scaled-l-0hpmd7, 20px);
   border-inline-start: var(--border-item-width-yel47s, 2px) solid transparent;
 }
 
-.awsui_header-secondary_wih1l_177zk_244:not(#\9) {
+.awsui_header-secondary_wih1l_1hj7j_292:not(#\9) {
   overflow: auto;
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
@@ -253,46 +301,46 @@ filter search icon.
   border-end-end-radius: 0;
   background: var(--color-background-table-header-82ew8p, #ffffff);
 }
-.awsui_header-secondary_wih1l_177zk_244.awsui_variant-full-page_wih1l_177zk_256:not(#\9) {
+.awsui_header-secondary_wih1l_1hj7j_292.awsui_variant-full-page_wih1l_1hj7j_304:not(#\9) {
   background: var(--color-background-layout-main-nx09lr, #ffffff);
 }
-.awsui_header-secondary_wih1l_177zk_244.awsui_variant-stacked_wih1l_177zk_167 > .awsui_table_wih1l_177zk_150:not(#\9), .awsui_header-secondary_wih1l_177zk_244.awsui_variant-container_wih1l_177zk_167 > .awsui_table_wih1l_177zk_150:not(#\9) {
+.awsui_header-secondary_wih1l_1hj7j_292.awsui_variant-stacked_wih1l_1hj7j_215 > .awsui_table_wih1l_1hj7j_198:not(#\9), .awsui_header-secondary_wih1l_1hj7j_292.awsui_variant-container_wih1l_1hj7j_215 > .awsui_table_wih1l_1hj7j_198:not(#\9) {
   padding-inline: var(--space-table-horizontal-8davlm, 20px);
 }
-.awsui_header-secondary_wih1l_177zk_244.awsui_variant-stacked_wih1l_177zk_167:not(#\9):not(.awsui_table-has-header_wih1l_177zk_262), .awsui_header-secondary_wih1l_177zk_244.awsui_variant-container_wih1l_177zk_167:not(#\9):not(.awsui_table-has-header_wih1l_177zk_262) {
+.awsui_header-secondary_wih1l_1hj7j_292.awsui_variant-stacked_wih1l_1hj7j_215:not(#\9):not(.awsui_table-has-header_wih1l_1hj7j_310), .awsui_header-secondary_wih1l_1hj7j_292.awsui_variant-container_wih1l_1hj7j_215:not(#\9):not(.awsui_table-has-header_wih1l_1hj7j_310) {
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
 }
-.awsui_header-secondary_wih1l_177zk_244:not(#\9)::-webkit-scrollbar {
+.awsui_header-secondary_wih1l_1hj7j_292:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
-.awsui_header-secondary_wih1l_177zk_244.awsui_table-has-header_wih1l_177zk_262:not(#\9) {
+.awsui_header-secondary_wih1l_1hj7j_292.awsui_table-has-header_wih1l_1hj7j_310:not(#\9) {
   border-block-start: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-container-divider-p2uygo, transparent);
 }
 
-.awsui_header-controls_wih1l_177zk_273:not(#\9) {
+.awsui_header-controls_wih1l_1hj7j_321:not(#\9) {
   padding-block: var(--space-container-header-top-5qav00, 12px) var(--space-container-header-bottom-vj01hn, 8px);
 }
-.awsui_header-controls_wih1l_177zk_273.awsui_variant-full-page_wih1l_177zk_256:not(#\9) {
+.awsui_header-controls_wih1l_1hj7j_321.awsui_variant-full-page_wih1l_1hj7j_304:not(#\9) {
   padding-block: 0 calc(var(--space-container-header-bottom-vj01hn, 8px) + var(--space-table-header-tools-full-page-bottom-xulfq9, 4px));
 }
-.awsui_header-controls_wih1l_177zk_273.awsui_variant-stacked_wih1l_177zk_167:not(#\9), .awsui_header-controls_wih1l_177zk_273.awsui_variant-container_wih1l_177zk_167:not(#\9) {
+.awsui_header-controls_wih1l_1hj7j_321.awsui_variant-stacked_wih1l_1hj7j_215:not(#\9), .awsui_header-controls_wih1l_1hj7j_321.awsui_variant-container_wih1l_1hj7j_215:not(#\9) {
   padding-inline: calc(var(--space-table-horizontal-8davlm, 20px) + var(--space-table-header-horizontal-wl3ykr, 0px));
 }
-.awsui_header-controls_wih1l_177zk_273.awsui_variant-embedded_wih1l_177zk_282:not(#\9), .awsui_header-controls_wih1l_177zk_273.awsui_variant-borderless_wih1l_177zk_282:not(#\9) {
+.awsui_header-controls_wih1l_1hj7j_321.awsui_variant-embedded_wih1l_1hj7j_330:not(#\9), .awsui_header-controls_wih1l_1hj7j_321.awsui_variant-borderless_wih1l_1hj7j_330:not(#\9) {
   padding-inline: var(--space-table-header-horizontal-wl3ykr, 0px);
   padding-block-start: var(--space-table-embedded-header-top-bfjeam, 0px);
 }
 
-.awsui_footer-wrapper_wih1l_177zk_287.awsui_variant-stacked_wih1l_177zk_167:not(#\9), .awsui_footer-wrapper_wih1l_177zk_287.awsui_variant-container_wih1l_177zk_167:not(#\9) {
+.awsui_footer-wrapper_wih1l_1hj7j_335.awsui_variant-stacked_wih1l_1hj7j_215:not(#\9), .awsui_footer-wrapper_wih1l_1hj7j_335.awsui_variant-container_wih1l_1hj7j_215:not(#\9) {
   padding-inline: var(--space-table-horizontal-8davlm, 20px);
 }
 
-.awsui_footer_wih1l_177zk_287:not(#\9) {
+.awsui_footer_wih1l_1hj7j_335:not(#\9) {
   padding-block: var(--space-scaled-s-aqzyko, 12px);
   padding-inline: var(--space-table-footer-horizontal-ptapb9, 0px);
 }
-.awsui_footer-with-pagination_wih1l_177zk_295:not(#\9) {
+.awsui_footer-with-pagination_wih1l_1hj7j_343:not(#\9) {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -300,12 +348,12 @@ filter search icon.
   flex-wrap: wrap;
   gap: var(--space-scaled-s-aqzyko, 12px);
 }
-.awsui_footer-pagination_wih1l_177zk_303:not(#\9) {
+.awsui_footer-pagination_wih1l_1hj7j_351:not(#\9) {
   margin-inline-start: auto;
 }
 
-.awsui_thead-active_wih1l_177zk_307:not(#\9),
-.awsui_row_wih1l_177zk_308:not(#\9),
-.awsui_row-selected_wih1l_177zk_309:not(#\9) {
+.awsui_thead-active_wih1l_1hj7j_355:not(#\9),
+.awsui_row_wih1l_1hj7j_356:not(#\9),
+.awsui_row-selected_wih1l_1hj7j_357:not(#\9) {
   /* used in test-utils */
 }

package/table/styles.selectors.js

@@ -2,39 +2,39 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_wih1l_177zk_101",
-  "tools": "awsui_tools_wih1l_177zk_112",
-  "tools-filtering": "awsui_tools-filtering_wih1l_177zk_120",
-  "tools-align-right": "awsui_tools-align-right_wih1l_177zk_134",
-  "tools-pagination": "awsui_tools-pagination_wih1l_177zk_138",
-  "tools-preferences": "awsui_tools-preferences_wih1l_177zk_138",
-  "tools-small": "awsui_tools-small_wih1l_177zk_144",
-  "table": "awsui_table_wih1l_177zk_150",
-  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_177zk_156",
-  "wrapper": "awsui_wrapper_wih1l_177zk_160",
-  "variant-stacked": "awsui_variant-stacked_wih1l_177zk_167",
-  "wrapper-content-measure": "awsui_wrapper-content-measure_wih1l_177zk_167",
-  "variant-container": "awsui_variant-container_wih1l_177zk_167",
-  "has-footer": "awsui_has-footer_wih1l_177zk_170",
-  "has-header": "awsui_has-header_wih1l_177zk_173",
-  "cell-merged": "awsui_cell-merged_wih1l_177zk_190",
-  "cell-merged-content": "awsui_cell-merged-content_wih1l_177zk_202",
-  "empty": "awsui_empty_wih1l_177zk_218",
-  "loading": "awsui_loading_wih1l_177zk_222",
-  "selection-control": "awsui_selection-control_wih1l_177zk_231",
-  "selection-control-header": "awsui_selection-control-header_wih1l_177zk_238",
-  "header-secondary": "awsui_header-secondary_wih1l_177zk_244",
-  "variant-full-page": "awsui_variant-full-page_wih1l_177zk_256",
-  "table-has-header": "awsui_table-has-header_wih1l_177zk_262",
-  "header-controls": "awsui_header-controls_wih1l_177zk_273",
-  "variant-embedded": "awsui_variant-embedded_wih1l_177zk_282",
-  "variant-borderless": "awsui_variant-borderless_wih1l_177zk_282",
-  "footer-wrapper": "awsui_footer-wrapper_wih1l_177zk_287",
-  "footer": "awsui_footer_wih1l_177zk_287",
-  "footer-with-pagination": "awsui_footer-with-pagination_wih1l_177zk_295",
-  "footer-pagination": "awsui_footer-pagination_wih1l_177zk_303",
-  "thead-active": "awsui_thead-active_wih1l_177zk_307",
-  "row": "awsui_row_wih1l_177zk_308",
-  "row-selected": "awsui_row-selected_wih1l_177zk_309"
+  "root": "awsui_root_wih1l_1hj7j_149",
+  "tools": "awsui_tools_wih1l_1hj7j_160",
+  "tools-filtering": "awsui_tools-filtering_wih1l_1hj7j_168",
+  "tools-align-right": "awsui_tools-align-right_wih1l_1hj7j_182",
+  "tools-pagination": "awsui_tools-pagination_wih1l_1hj7j_186",
+  "tools-preferences": "awsui_tools-preferences_wih1l_1hj7j_186",
+  "tools-small": "awsui_tools-small_wih1l_1hj7j_192",
+  "table": "awsui_table_wih1l_1hj7j_198",
+  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_1hj7j_204",
+  "wrapper": "awsui_wrapper_wih1l_1hj7j_208",
+  "variant-stacked": "awsui_variant-stacked_wih1l_1hj7j_215",
+  "wrapper-content-measure": "awsui_wrapper-content-measure_wih1l_1hj7j_215",
+  "variant-container": "awsui_variant-container_wih1l_1hj7j_215",
+  "has-footer": "awsui_has-footer_wih1l_1hj7j_218",
+  "has-header": "awsui_has-header_wih1l_1hj7j_221",
+  "cell-merged": "awsui_cell-merged_wih1l_1hj7j_238",
+  "cell-merged-content": "awsui_cell-merged-content_wih1l_1hj7j_250",
+  "empty": "awsui_empty_wih1l_1hj7j_266",
+  "loading": "awsui_loading_wih1l_1hj7j_270",
+  "selection-control": "awsui_selection-control_wih1l_1hj7j_279",
+  "selection-control-header": "awsui_selection-control-header_wih1l_1hj7j_286",
+  "header-secondary": "awsui_header-secondary_wih1l_1hj7j_292",
+  "variant-full-page": "awsui_variant-full-page_wih1l_1hj7j_304",
+  "table-has-header": "awsui_table-has-header_wih1l_1hj7j_310",
+  "header-controls": "awsui_header-controls_wih1l_1hj7j_321",
+  "variant-embedded": "awsui_variant-embedded_wih1l_1hj7j_330",
+  "variant-borderless": "awsui_variant-borderless_wih1l_1hj7j_330",
+  "footer-wrapper": "awsui_footer-wrapper_wih1l_1hj7j_335",
+  "footer": "awsui_footer_wih1l_1hj7j_335",
+  "footer-with-pagination": "awsui_footer-with-pagination_wih1l_1hj7j_343",
+  "footer-pagination": "awsui_footer-pagination_wih1l_1hj7j_351",
+  "thead-active": "awsui_thead-active_wih1l_1hj7j_355",
+  "row": "awsui_row_wih1l_1hj7j_356",
+  "row-selected": "awsui_row-selected_wih1l_1hj7j_357"
 };
   

package/table/use-column-widths.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-column-widths.d.ts","sourceRoot":"","sources":["../../../src/table/use-column-widths.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAOtF,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,WAAW,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAwCD,UAAU,aAAa;IACrB,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC;IAC7E,YAAY,EAAE,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACvC,YAAY,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,WAAW,KAAK,IAAI,CAAC;CACrF;AAED,QAAA,MAAM,aAAa,8BAKjB,CAAC;AAEH,UAAU,kBAAkB;IAC1B,cAAc,EAAE,SAAS,qBAAqB,EAAE,CAAC;IACjD,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,kBAAkB,eAoHpH;AAED,wBAAgB,eAAe,kBAE9B"}
+{"version":3,"file":"use-column-widths.d.ts","sourceRoot":"","sources":["../../../src/table/use-column-widths.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAOtF,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,WAAW,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAwCD,UAAU,aAAa;IACrB,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC;IAC7E,YAAY,EAAE,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACvC,YAAY,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,WAAW,KAAK,IAAI,CAAC;CACrF;AAED,QAAA,MAAM,aAAa,8BAKjB,CAAC;AAEH,UAAU,kBAAkB;IAC1B,cAAc,EAAE,SAAS,qBAAqB,EAAE,CAAC;IACjD,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,kBAAkB,eAwHpH;AAED,wBAAgB,eAAe,kBAE9B"}

package/table/use-column-widths.js

@@ -61,7 +61,10 @@ export function ColumnWidthsProvider({ visibleColumns, resizableColumns, contain
             return {};
         }
         if (sticky) {
-            return { width: ((_a = cellsRef.current.get(column.id)) === null || _a === void 0 ? void 0 : _a.offsetWidth) || ((_b = columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths.get(column.id)) !== null && _b !== void 0 ? _b : column.width) };
+            return {
+                width: ((_a = cellsRef.current.get(column.id)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) ||
+                    ((_b = columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths.get(column.id)) !== null && _b !== void 0 ? _b : column.width),
+            };
         }
         if (resizableColumns && columnWidths) {
             const isLastColumn = column.id === ((_c = visibleColumns[visibleColumns.length - 1]) === null || _c === void 0 ? void 0 : _c.id);
@@ -99,7 +102,7 @@ export function ColumnWidthsProvider({ visibleColumns, resizableColumns, contain
     // Observes container size and requests an update to the last cell width as it depends on the container's width.
     useResizeObserver(containerRef, ({ contentBoxWidth: containerWidth }) => {
         containerWidthRef.current = containerWidth;
-        updateColumnWidths();
+        requestAnimationFrame(() => updateColumnWidths());
     });
     // The widths of the dynamically added columns (after the first render) if not set explicitly
     // will default to the DEFAULT_COLUMN_WIDTH.

package/table/use-column-widths.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-column-widths.js","sourceRoot":"","sources":["../../../src/table/use-column-widths.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtF,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AACrG,OAAO,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAE7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AASxC,SAAS,UAAU,CACjB,OAAsD,EACtD,cAAgD;IAEhD,MAAM,MAAM,GAAG,IAAI,GAAG,EAAuB,CAAC;IAC9C,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QAC1D,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,KAAK,GAAI,MAAM,CAAC,KAAgB,IAAI,CAAC,CAAC;QAC1C,MAAM,QAAQ,GAAI,MAAM,CAAC,QAAmB,IAAI,KAAK,IAAI,oBAAoB,CAAC;QAC9E,IACE,CAAC,KAAK,IAAI,yDAAyD;YACnE,KAAK,KAAK,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,kFAAkF;UACtH;YACA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACjC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAC;SACvF;QACD,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;KAClD;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,YAAY,CACnB,cAAgD,EAChD,SAAmC,EACnC,QAAgB,EAChB,QAAqB;IAErB,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,OAAO,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAA,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC;IAC/F,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACxC,IAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE;QACxC,OAAO,SAAS,CAAC;KAClB;IACD,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAClC,OAAO,SAAS,CAAC;AACnB,CAAC;AASD,MAAM,aAAa,GAAG,aAAa,CAAgB;IACjD,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;IAC3B,YAAY,EAAE,IAAI,GAAG,EAAE;IACvB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CAClB,CAAC,CAAC;AASH,MAAM,UAAU,oBAAoB,CAAC,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAQ,EAAsB;IACnH,MAAM,iBAAiB,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IAC7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAkC,IAAI,CAAC,CAAC;IAExF,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,GAAG,EAA4B,CAAC,CAAC;IAC7D,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,GAAG,EAA4B,CAAC,CAAC;IACnE,MAAM,OAAO,GAAG,CAAC,QAAqB,EAAsB,EAAE,WAAC,OAAA,MAAA,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,mCAAI,IAAI,CAAA,EAAA,CAAC;IACtG,MAAM,OAAO,GAAG,CAAC,MAAe,EAAE,QAAqB,EAAE,IAAwB,EAAE,EAAE;QACnF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC/C,IAAI,IAAI,EAAE;YACR,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;SACjC;aAAM;YACL,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;SAC9B;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,QAAqB,EAAuB,EAAE;;QACtF,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;QACrE,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,EAAE,CAAC;SACX;QAED,IAAI,MAAM,EAAE;YACV,OAAO,EAAE,KAAK,EAAE,CAAA,MAAA,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,0CAAE,WAAW,KAAI,CAAC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,mCAAI,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;SAClH;QAED,IAAI,gBAAgB,IAAI,YAAY,EAAE;YACpC,MAAM,YAAY,GAAG,MAAM,CAAC,EAAE,MAAK,MAAA,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,EAAE,CAAA,CAAC;YACjF,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,oBAAoB,CAAC,EACrE,CAAC,CACF,CAAC;YACF,IAAI,YAAY,IAAI,iBAAiB,CAAC,OAAO,GAAG,UAAU,EAAE;gBAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAE,CAAC;aACtD;iBAAM;gBACL,OAAO,EAAE,KAAK,EAAE,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAE,CAAC;aAC3E;SACF;QACD,OAAO;YACL,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,QAAQ,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;SAC1D,CAAC;IACJ,CAAC,CAAC;IAEF,iEAAiE;IACjE,6EAA6E;IAC7E,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,GAAG,EAAE;QAChD,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI,cAAc,EAAE;YACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YACzC,IAAI,OAAO,EAAE;gBACX,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;aACvD;SACF;QACD,sFAAsF;QACtF,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI,cAAc,EAAE;YACnC,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAC/C,IAAI,OAAO,EAAE;gBACX,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;aACtD;SACF;IACH,CAAC,CAAC,CAAC;IAEH,gHAAgH;IAChH,iBAAiB,CAAC,YAAY,EAAE,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,EAAE;QACtE,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC;QAC3C,kBAAkB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,6FAA6F;IAC7F,4CAA4C;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,EAAE,CAAC;QAErB,IAAI,CAAC,gBAAgB,EAAE;YACrB,OAAO;SACR;QACD,IAAI,OAAO,GAAG,KAAK,CAAC;QACpB,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC;QAC9C,IAAI,WAAW,EAAE;YACf,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBAC1D,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;gBACrC,IAAI,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA,IAAI,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE;oBAC1E,OAAO,GAAG,IAAI,CAAC;oBACf,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,EAAG,MAAM,CAAC,KAAgB,IAAI,oBAAoB,CAAC,CAAC;iBAClF;aACF;YACD,IAAI,OAAO,EAAE;gBACX,eAAe,CAAC,eAAe,CAAC,CAAC;aAClC;SACF;QACD,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEzE,0FAA0F;IAC1F,wCAAwC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,gBAAgB,EAAE;YACrB,OAAO;SACR;QACD,eAAe,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;QAC3D,sGAAsG;QACtG,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,YAAY,CAAC,QAAqB,EAAE,QAAgB;QAC3D,eAAe,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,cAAc,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,GAAG,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC/G,CAAC;IAED,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,GAAG,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,IAC/G,QAAQ,CACc,CAC1B,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AACnC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { createContext, useContext, useEffect, useRef, useState } from 'react';\n\nimport { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { setElementWidths } from './column-widths-utils';\n\nexport const DEFAULT_COLUMN_WIDTH = 120;\n\nexport interface ColumnWidthDefinition {\n  id: PropertyKey;\n  minWidth?: string | number;\n  maxWidth?: string | number;\n  width?: string | number;\n}\n\nfunction readWidths(\n  getCell: (columnId: PropertyKey) => null | HTMLElement,\n  visibleColumns: readonly ColumnWidthDefinition[]\n) {\n  const result = new Map<PropertyKey, number>();\n  for (let index = 0; index < visibleColumns.length; index++) {\n    const column = visibleColumns[index];\n    let width = (column.width as number) || 0;\n    const minWidth = (column.minWidth as number) || width || DEFAULT_COLUMN_WIDTH;\n    if (\n      !width && // read width from the DOM if it is missing in the config\n      index !== visibleColumns.length - 1 // skip reading for the last column, because it expands to fully fit the container\n    ) {\n      const colEl = getCell(column.id);\n      width = colEl ? getLogicalBoundingClientRect(colEl).inlineSize : DEFAULT_COLUMN_WIDTH;\n    }\n    result.set(column.id, Math.max(width, minWidth));\n  }\n  return result;\n}\n\nfunction updateWidths(\n  visibleColumns: readonly ColumnWidthDefinition[],\n  oldWidths: Map<PropertyKey, number>,\n  newWidth: number,\n  columnId: PropertyKey\n) {\n  const column = visibleColumns.find(column => column.id === columnId);\n  const minWidth = typeof column?.minWidth === 'number' ? column.minWidth : DEFAULT_COLUMN_WIDTH;\n  newWidth = Math.max(newWidth, minWidth);\n  if (oldWidths.get(columnId) === newWidth) {\n    return oldWidths;\n  }\n  const newWidths = new Map(oldWidths);\n  newWidths.set(columnId, newWidth);\n  return newWidths;\n}\n\ninterface WidthsContext {\n  getColumnStyles(sticky: boolean, columnId: PropertyKey): React.CSSProperties;\n  columnWidths: Map<PropertyKey, number>;\n  updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n  setCell: (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => void;\n}\n\nconst WidthsContext = createContext<WidthsContext>({\n  getColumnStyles: () => ({}),\n  columnWidths: new Map(),\n  updateColumn: () => {},\n  setCell: () => {},\n});\n\ninterface WidthProviderProps {\n  visibleColumns: readonly ColumnWidthDefinition[];\n  resizableColumns: boolean | undefined;\n  containerRef: React.RefObject<HTMLElement>;\n  children: React.ReactNode;\n}\n\nexport function ColumnWidthsProvider({ visibleColumns, resizableColumns, containerRef, children }: WidthProviderProps) {\n  const visibleColumnsRef = useRef<PropertyKey[] | null>(null);\n  const containerWidthRef = useRef(0);\n  const [columnWidths, setColumnWidths] = useState<null | Map<PropertyKey, number>>(null);\n\n  const cellsRef = useRef(new Map<PropertyKey, HTMLElement>());\n  const stickyCellsRef = useRef(new Map<PropertyKey, HTMLElement>());\n  const getCell = (columnId: PropertyKey): null | HTMLElement => cellsRef.current.get(columnId) ?? null;\n  const setCell = (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => {\n    const ref = sticky ? stickyCellsRef : cellsRef;\n    if (node) {\n      ref.current.set(columnId, node);\n    } else {\n      ref.current.delete(columnId);\n    }\n  };\n\n  const getColumnStyles = (sticky: boolean, columnId: PropertyKey): React.CSSProperties => {\n    const column = visibleColumns.find(column => column.id === columnId);\n    if (!column) {\n      return {};\n    }\n\n    if (sticky) {\n      return { width: cellsRef.current.get(column.id)?.offsetWidth || (columnWidths?.get(column.id) ?? column.width) };\n    }\n\n    if (resizableColumns && columnWidths) {\n      const isLastColumn = column.id === visibleColumns[visibleColumns.length - 1]?.id;\n      const totalWidth = visibleColumns.reduce(\n        (sum, { id }) => sum + (columnWidths.get(id) || DEFAULT_COLUMN_WIDTH),\n        0\n      );\n      if (isLastColumn && containerWidthRef.current > totalWidth) {\n        return { width: 'auto', minWidth: column?.minWidth };\n      } else {\n        return { width: columnWidths.get(column.id), minWidth: column?.minWidth };\n      }\n    }\n    return {\n      width: column.width,\n      minWidth: column.minWidth,\n      maxWidth: !resizableColumns ? column.maxWidth : undefined,\n    };\n  };\n\n  // Imperatively sets width style for a cell avoiding React state.\n  // This allows setting the style as soon container's size change is observed.\n  const updateColumnWidths = useStableCallback(() => {\n    for (const { id } of visibleColumns) {\n      const element = cellsRef.current.get(id);\n      if (element) {\n        setElementWidths(element, getColumnStyles(false, id));\n      }\n    }\n    // Sticky column widths must be synchronized once all real column widths are assigned.\n    for (const { id } of visibleColumns) {\n      const element = stickyCellsRef.current.get(id);\n      if (element) {\n        setElementWidths(element, getColumnStyles(true, id));\n      }\n    }\n  });\n\n  // Observes container size and requests an update to the last cell width as it depends on the container's width.\n  useResizeObserver(containerRef, ({ contentBoxWidth: containerWidth }) => {\n    containerWidthRef.current = containerWidth;\n    updateColumnWidths();\n  });\n\n  // The widths of the dynamically added columns (after the first render) if not set explicitly\n  // will default to the DEFAULT_COLUMN_WIDTH.\n  useEffect(() => {\n    updateColumnWidths();\n\n    if (!resizableColumns) {\n      return;\n    }\n    let updated = false;\n    const newColumnWidths = new Map(columnWidths);\n    const lastVisible = visibleColumnsRef.current;\n    if (lastVisible) {\n      for (let index = 0; index < visibleColumns.length; index++) {\n        const column = visibleColumns[index];\n        if (!columnWidths?.get(column.id) && lastVisible.indexOf(column.id) === -1) {\n          updated = true;\n          newColumnWidths.set(column.id, (column.width as number) || DEFAULT_COLUMN_WIDTH);\n        }\n      }\n      if (updated) {\n        setColumnWidths(newColumnWidths);\n      }\n    }\n    visibleColumnsRef.current = visibleColumns.map(column => column.id);\n  }, [columnWidths, resizableColumns, visibleColumns, updateColumnWidths]);\n\n  // Read the actual column widths after the first render to employ the browser defaults for\n  // those columns without explicit width.\n  useEffect(() => {\n    if (!resizableColumns) {\n      return;\n    }\n    setColumnWidths(() => readWidths(getCell, visibleColumns));\n    // This code is intended to run only at the first render and should not re-run when table props change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  function updateColumn(columnId: PropertyKey, newWidth: number) {\n    setColumnWidths(columnWidths => updateWidths(visibleColumns, columnWidths ?? new Map(), newWidth, columnId));\n  }\n\n  return (\n    <WidthsContext.Provider value={{ getColumnStyles, columnWidths: columnWidths ?? new Map(), updateColumn, setCell }}>\n      {children}\n    </WidthsContext.Provider>\n  );\n}\n\nexport function useColumnWidths() {\n  return useContext(WidthsContext);\n}\n"]}
+{"version":3,"file":"use-column-widths.js","sourceRoot":"","sources":["../../../src/table/use-column-widths.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { createContext, useContext, useEffect, useRef, useState } from 'react';\n\nimport { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { setElementWidths } from './column-widths-utils';\n\nexport const DEFAULT_COLUMN_WIDTH = 120;\n\nexport interface ColumnWidthDefinition {\n  id: PropertyKey;\n  minWidth?: string | number;\n  maxWidth?: string | number;\n  width?: string | number;\n}\n\nfunction readWidths(\n  getCell: (columnId: PropertyKey) => null | HTMLElement,\n  visibleColumns: readonly ColumnWidthDefinition[]\n) {\n  const result = new Map<PropertyKey, number>();\n  for (let index = 0; index < visibleColumns.length; index++) {\n    const column = visibleColumns[index];\n    let width = (column.width as number) || 0;\n    const minWidth = (column.minWidth as number) || width || DEFAULT_COLUMN_WIDTH;\n    if (\n      !width && // read width from the DOM if it is missing in the config\n      index !== visibleColumns.length - 1 // skip reading for the last column, because it expands to fully fit the container\n    ) {\n      const colEl = getCell(column.id);\n      width = colEl ? getLogicalBoundingClientRect(colEl).inlineSize : DEFAULT_COLUMN_WIDTH;\n    }\n    result.set(column.id, Math.max(width, minWidth));\n  }\n  return result;\n}\n\nfunction updateWidths(\n  visibleColumns: readonly ColumnWidthDefinition[],\n  oldWidths: Map<PropertyKey, number>,\n  newWidth: number,\n  columnId: PropertyKey\n) {\n  const column = visibleColumns.find(column => column.id === columnId);\n  const minWidth = typeof column?.minWidth === 'number' ? column.minWidth : DEFAULT_COLUMN_WIDTH;\n  newWidth = Math.max(newWidth, minWidth);\n  if (oldWidths.get(columnId) === newWidth) {\n    return oldWidths;\n  }\n  const newWidths = new Map(oldWidths);\n  newWidths.set(columnId, newWidth);\n  return newWidths;\n}\n\ninterface WidthsContext {\n  getColumnStyles(sticky: boolean, columnId: PropertyKey): React.CSSProperties;\n  columnWidths: Map<PropertyKey, number>;\n  updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n  setCell: (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => void;\n}\n\nconst WidthsContext = createContext<WidthsContext>({\n  getColumnStyles: () => ({}),\n  columnWidths: new Map(),\n  updateColumn: () => {},\n  setCell: () => {},\n});\n\ninterface WidthProviderProps {\n  visibleColumns: readonly ColumnWidthDefinition[];\n  resizableColumns: boolean | undefined;\n  containerRef: React.RefObject<HTMLElement>;\n  children: React.ReactNode;\n}\n\nexport function ColumnWidthsProvider({ visibleColumns, resizableColumns, containerRef, children }: WidthProviderProps) {\n  const visibleColumnsRef = useRef<PropertyKey[] | null>(null);\n  const containerWidthRef = useRef(0);\n  const [columnWidths, setColumnWidths] = useState<null | Map<PropertyKey, number>>(null);\n\n  const cellsRef = useRef(new Map<PropertyKey, HTMLElement>());\n  const stickyCellsRef = useRef(new Map<PropertyKey, HTMLElement>());\n  const getCell = (columnId: PropertyKey): null | HTMLElement => cellsRef.current.get(columnId) ?? null;\n  const setCell = (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => {\n    const ref = sticky ? stickyCellsRef : cellsRef;\n    if (node) {\n      ref.current.set(columnId, node);\n    } else {\n      ref.current.delete(columnId);\n    }\n  };\n\n  const getColumnStyles = (sticky: boolean, columnId: PropertyKey): React.CSSProperties => {\n    const column = visibleColumns.find(column => column.id === columnId);\n    if (!column) {\n      return {};\n    }\n\n    if (sticky) {\n      return {\n        width:\n          cellsRef.current.get(column.id)?.getBoundingClientRect().width ||\n          (columnWidths?.get(column.id) ?? column.width),\n      };\n    }\n\n    if (resizableColumns && columnWidths) {\n      const isLastColumn = column.id === visibleColumns[visibleColumns.length - 1]?.id;\n      const totalWidth = visibleColumns.reduce(\n        (sum, { id }) => sum + (columnWidths.get(id) || DEFAULT_COLUMN_WIDTH),\n        0\n      );\n      if (isLastColumn && containerWidthRef.current > totalWidth) {\n        return { width: 'auto', minWidth: column?.minWidth };\n      } else {\n        return { width: columnWidths.get(column.id), minWidth: column?.minWidth };\n      }\n    }\n    return {\n      width: column.width,\n      minWidth: column.minWidth,\n      maxWidth: !resizableColumns ? column.maxWidth : undefined,\n    };\n  };\n\n  // Imperatively sets width style for a cell avoiding React state.\n  // This allows setting the style as soon container's size change is observed.\n  const updateColumnWidths = useStableCallback(() => {\n    for (const { id } of visibleColumns) {\n      const element = cellsRef.current.get(id);\n      if (element) {\n        setElementWidths(element, getColumnStyles(false, id));\n      }\n    }\n    // Sticky column widths must be synchronized once all real column widths are assigned.\n    for (const { id } of visibleColumns) {\n      const element = stickyCellsRef.current.get(id);\n      if (element) {\n        setElementWidths(element, getColumnStyles(true, id));\n      }\n    }\n  });\n\n  // Observes container size and requests an update to the last cell width as it depends on the container's width.\n  useResizeObserver(containerRef, ({ contentBoxWidth: containerWidth }) => {\n    containerWidthRef.current = containerWidth;\n    requestAnimationFrame(() => updateColumnWidths());\n  });\n\n  // The widths of the dynamically added columns (after the first render) if not set explicitly\n  // will default to the DEFAULT_COLUMN_WIDTH.\n  useEffect(() => {\n    updateColumnWidths();\n\n    if (!resizableColumns) {\n      return;\n    }\n    let updated = false;\n    const newColumnWidths = new Map(columnWidths);\n    const lastVisible = visibleColumnsRef.current;\n    if (lastVisible) {\n      for (let index = 0; index < visibleColumns.length; index++) {\n        const column = visibleColumns[index];\n        if (!columnWidths?.get(column.id) && lastVisible.indexOf(column.id) === -1) {\n          updated = true;\n          newColumnWidths.set(column.id, (column.width as number) || DEFAULT_COLUMN_WIDTH);\n        }\n      }\n      if (updated) {\n        setColumnWidths(newColumnWidths);\n      }\n    }\n    visibleColumnsRef.current = visibleColumns.map(column => column.id);\n  }, [columnWidths, resizableColumns, visibleColumns, updateColumnWidths]);\n\n  // Read the actual column widths after the first render to employ the browser defaults for\n  // those columns without explicit width.\n  useEffect(() => {\n    if (!resizableColumns) {\n      return;\n    }\n    setColumnWidths(() => readWidths(getCell, visibleColumns));\n    // This code is intended to run only at the first render and should not re-run when table props change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  function updateColumn(columnId: PropertyKey, newWidth: number) {\n    setColumnWidths(columnWidths => updateWidths(visibleColumns, columnWidths ?? new Map(), newWidth, columnId));\n  }\n\n  return (\n    <WidthsContext.Provider value={{ getColumnStyles, columnWidths: columnWidths ?? new Map(), updateColumn, setCell }}>\n      {children}\n    </WidthsContext.Provider>\n  );\n}\n\nexport function useColumnWidths() {\n  return useContext(WidthsContext);\n}\n"]}

package/table/use-sticky-header.js

@@ -13,11 +13,11 @@ export const useStickyHeader = (tableRef, theadRef, secondaryTheadRef, secondary
             secondaryTheadRef.current &&
             secondaryTableRef.current &&
             tableWrapperRef.current) {
-            // Using the tableRef offsetWidth instead of the theadRef because in VR
+            // Using the tableRef getBoundingClientRect().width instead of the theadRef because in VR
             // the tableRef adds extra padding to the table and by default the theadRef will have a width
             // without the padding and will make the sticky header width incorrect.
-            secondaryTableRef.current.style.inlineSize = `${tableRef.current.offsetWidth}px`;
-            tableWrapperRef.current.style.marginBlockStart = `-${theadRef.current.offsetHeight}px`;
+            secondaryTableRef.current.style.inlineSize = `${tableRef.current.getBoundingClientRect().width}px`;
+            tableWrapperRef.current.style.marginBlockStart = `-${theadRef.current.getBoundingClientRect().height}px`;
         }
     }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);
     useLayoutEffect(() => {

package/table/use-sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAa,WAAW,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,eAAe,EAAE,EAAE,wBAAwB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE3F,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,QAAgC,EAChC,QAAgC,EAChC,iBAAyC,EACzC,iBAAyC,EACzC,eAAuC,EACvC,EAAE;IACF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,qFAAqF;IACrF,MAAM,sBAAsB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9C,IACE,QAAQ,CAAC,OAAO;YAChB,QAAQ,CAAC,OAAO;YAChB,iBAAiB,CAAC,OAAO;YACzB,iBAAiB,CAAC,OAAO;YACzB,eAAe,CAAC,OAAO,EACvB;YACA,uEAAuE;YACvE,6FAA6F;YAC7F,uEAAuE;YACvE,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,IAAI,CAAC;YAEjF,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC;SACxF;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;IAChF,eAAe,CAAC,GAAG,EAAE;QACnB,sBAAsB,EAAE,CAAC;IAC3B,CAAC,CAAC,CAAC;IACH,iBAAiB,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,EAAE;YACzF,MAAM,UAAU,GAAG,wBAAwB,CAAC,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;YACzF,IAAI,UAAU,GAAG,CAAC,EAAE;gBAClB,UAAU,CAAC,UAAU,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;aACjD;SACF;IACH,CAAC,CAAC;IACF,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;IAC7E,MAAM,WAAW,GAAG,CAAC,QAA4B,EAAE,EAAE;QACnD,IAAI,CAAC,QAAQ,EAAE;YACb,YAAY,CAAC,QAAQ,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IACF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AACtC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { RefObject, useCallback, useLayoutEffect } from 'react';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport stickyScrolling, { calculateScrollingOffset, scrollUpBy } from './sticky-scrolling';\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      // 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.inlineSize = `${tableRef.current.offsetWidth}px`;\n\n      tableWrapperRef.current.style.marginBlockStart = `-${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"]}
+{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAa,WAAW,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,eAAe,EAAE,EAAE,wBAAwB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE3F,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,QAAgC,EAChC,QAAgC,EAChC,iBAAyC,EACzC,iBAAyC,EACzC,eAAuC,EACvC,EAAE;IACF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,qFAAqF;IACrF,MAAM,sBAAsB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9C,IACE,QAAQ,CAAC,OAAO;YAChB,QAAQ,CAAC,OAAO;YAChB,iBAAiB,CAAC,OAAO;YACzB,iBAAiB,CAAC,OAAO;YACzB,eAAe,CAAC,OAAO,EACvB;YACA,yFAAyF;YACzF,6FAA6F;YAC7F,uEAAuE;YACvE,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,IAAI,CAAC;YAEnG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,IAAI,CAAC;SAC1G;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;IAChF,eAAe,CAAC,GAAG,EAAE;QACnB,sBAAsB,EAAE,CAAC;IAC3B,CAAC,CAAC,CAAC;IACH,iBAAiB,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,EAAE;YACzF,MAAM,UAAU,GAAG,wBAAwB,CAAC,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;YACzF,IAAI,UAAU,GAAG,CAAC,EAAE;gBAClB,UAAU,CAAC,UAAU,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;aACjD;SACF;IACH,CAAC,CAAC;IACF,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;IAC7E,MAAM,WAAW,GAAG,CAAC,QAA4B,EAAE,EAAE;QACnD,IAAI,CAAC,QAAQ,EAAE;YACb,YAAY,CAAC,QAAQ,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IACF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AACtC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { RefObject, useCallback, useLayoutEffect } from 'react';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport stickyScrolling, { calculateScrollingOffset, scrollUpBy } from './sticky-scrolling';\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      // Using the tableRef getBoundingClientRect().width 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.inlineSize = `${tableRef.current.getBoundingClientRect().width}px`;\n\n      tableWrapperRef.current.style.marginBlockStart = `-${theadRef.current.getBoundingClientRect().height}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

@@ -1,33 +1,33 @@
 
     import './styles.scoped.css';
     export default {
-  "tabs-header": "awsui_tabs-header_14rmt_1wcao_194",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_1wcao_202",
-  "pagination-button": "awsui_pagination-button_14rmt_1wcao_219",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_1wcao_226",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1wcao_229",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_1wcao_233",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1wcao_236",
-  "tabs-tab": "awsui_tabs-tab_14rmt_1wcao_241",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1wcao_250",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1wcao_261",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1wcao_272",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1wcao_272",
-  "refresh": "awsui_refresh_14rmt_1wcao_276",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1wcao_280",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1wcao_322",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1wcao_398",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1wcao_405",
-  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1wcao_409",
-  "root": "awsui_root_14rmt_1wcao_413",
-  "tabs": "awsui_tabs_14rmt_1wcao_194",
-  "tabs-content": "awsui_tabs-content_14rmt_1wcao_454",
-  "fit-height": "awsui_fit-height_14rmt_1wcao_458",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_1wcao_464",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1wcao_478",
-  "with-paddings": "awsui_with-paddings_14rmt_1wcao_478",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1wcao_489",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1wcao_500",
-  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1wcao_504"
+  "tabs-header": "awsui_tabs-header_14rmt_166lr_282",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_166lr_290",
+  "pagination-button": "awsui_pagination-button_14rmt_166lr_307",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_166lr_314",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_166lr_317",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_166lr_321",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_166lr_324",
+  "tabs-tab": "awsui_tabs-tab_14rmt_166lr_329",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_166lr_338",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_166lr_349",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_166lr_360",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_166lr_360",
+  "refresh": "awsui_refresh_14rmt_166lr_364",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_166lr_368",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_166lr_410",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_166lr_486",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_166lr_493",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_166lr_497",
+  "root": "awsui_root_14rmt_166lr_501",
+  "tabs": "awsui_tabs_14rmt_166lr_282",
+  "tabs-content": "awsui_tabs-content_14rmt_166lr_542",
+  "fit-height": "awsui_fit-height_14rmt_166lr_546",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_166lr_552",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_166lr_566",
+  "with-paddings": "awsui_with-paddings_14rmt_166lr_566",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_166lr_577",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_166lr_588",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_166lr_592"
 };