@cloudscape-design/components-themeable 3.0.1309 → 3.0.1311

package/lib/internal/template/table/resizer/styles.scoped.css

@@ -142,13 +142,13 @@
 */
 /* 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 */
-.awsui_resize-active_x7peu_poa6s_145:not(#\9):not(.awsui_resize-active-with-focus_x7peu_poa6s_145) * {
+.awsui_resize-active_x7peu_1jg4x_145:not(#\9):not(.awsui_resize-active-with-focus_x7peu_1jg4x_145) * {
   cursor: col-resize;
   -webkit-user-select: none;
           user-select: none;
 }
 
-.awsui_resizer-wrapper_x7peu_poa6s_150:not(#\9) {
+.awsui_resizer-wrapper_x7peu_1jg4x_150:not(#\9) {
   inset-block: 0;
   position: absolute;
   inset-inline-end: calc(-1 * var(--space-xl-4dmkh1, 24px) / 2);
@@ -156,16 +156,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: hidden;
   z-index: 10;
 }
-th:not(#\9):last-child > .awsui_resizer-wrapper_x7peu_poa6s_150:has(.awsui_divider-interactive_x7peu_poa6s_158).awsui_is-borderless_x7peu_poa6s_158 {
+th:not(#\9):last-child > .awsui_resizer-wrapper_x7peu_1jg4x_150:has(.awsui_divider-interactive_x7peu_1jg4x_158).awsui_is-borderless_x7peu_1jg4x_158 {
   inset-inline-end: 0;
 }
 
-.awsui_resizer-button-wrapper_x7peu_poa6s_162:not(#\9) {
+.awsui_resizer-button-wrapper_x7peu_1jg4x_162:not(#\9) {
   block-size: 100%;
 }
 
-th:not(#\9):not(:last-child) > .awsui_divider_x7peu_poa6s_158,
-.awsui_divider-interactive_x7peu_poa6s_158:not(#\9) {
+th:not(#\9):not([data-rightmost]) > .awsui_divider_x7peu_1jg4x_158,
+.awsui_divider-interactive_x7peu_1jg4x_158:not(#\9) {
   position: absolute;
   outline: none;
   pointer-events: none;
@@ -176,27 +176,40 @@ th:not(#\9):not(:last-child) > .awsui_divider_x7peu_poa6s_158,
   max-block-size: calc(100% - calc(2 * var(--space-xs-kw7k3v, 8px) + var(--space-xxxs-3w1kr2, 2px)));
   margin-block: auto;
   margin-inline: auto;
-  border-inline-start: var(--border-item-width-acvlhx, 1px) solid var(--color-border-divider-interactive-default-cyw7tx, #687078);
+  border-inline-start: var(--border-divider-list-width-8ggz94, 1px) solid var(--color-border-divider-interactive-default-cyw7tx, #687078);
   box-sizing: border-box;
 }
-
-th:not(#\9):not(:last-child) > .awsui_divider-disabled_x7peu_poa6s_182 {
-  border-inline-start-color: var(--color-border-divider-default-ipvpev, #eaeded);
+th:not(#\9):not([data-rightmost]) > .awsui_divider_x7peu_1jg4x_158.awsui_divider-position-top_x7peu_1jg4x_181,
+.awsui_divider-interactive_x7peu_1jg4x_158.awsui_divider-position-top_x7peu_1jg4x_181:not(#\9) {
+  margin-block-start: 0;
+  margin-block-end: auto;
+  max-block-size: calc(100% - calc(2 * var(--space-xs-kw7k3v, 8px) + var(--space-xxxs-3w1kr2, 2px)) / 2);
+}
+th:not(#\9):not([data-rightmost]) > .awsui_divider_x7peu_1jg4x_158.awsui_divider-position-bottom_x7peu_1jg4x_187,
+.awsui_divider-interactive_x7peu_1jg4x_158.awsui_divider-position-bottom_x7peu_1jg4x_187:not(#\9) {
+  margin-block-start: auto;
+  margin-block-end: 0;
+  max-block-size: calc(100% - calc(2 * var(--space-xs-kw7k3v, 8px) + var(--space-xxxs-3w1kr2, 2px)) / 2);
+}
+th:not(#\9):not([data-rightmost]) > .awsui_divider_x7peu_1jg4x_158.awsui_divider-position-full_x7peu_1jg4x_193,
+.awsui_divider-interactive_x7peu_1jg4x_158.awsui_divider-position-full_x7peu_1jg4x_193:not(#\9) {
+  margin-block: 0;
+  max-block-size: 100%;
 }
 
-.awsui_divider-interactive_x7peu_poa6s_158:not(#\9) {
+.awsui_divider-interactive_x7peu_1jg4x_158:not(#\9) {
   inset-inline-end: calc(var(--space-xl-4dmkh1, 24px) / 2);
 }
 
-th:not(#\9):last-child > .awsui_resizer-wrapper_x7peu_poa6s_150.awsui_visual-refresh_x7peu_poa6s_190.awsui_is-borderless_x7peu_poa6s_158 .awsui_divider-interactive_x7peu_poa6s_158 {
-  inset-inline-end: 0;
+.awsui_divider-active_x7peu_1jg4x_203:not(#\9) {
+  /* used in test-utils */
 }
 
-.awsui_divider-active_x7peu_poa6s_194:not(#\9) {
-  border-inline-start: 2px solid var(--color-border-divider-active-d5kcok, #687078);
+.awsui_resizer-wrapper_x7peu_1jg4x_150.awsui_visual-refresh_x7peu_1jg4x_207.awsui_is-borderless_x7peu_1jg4x_158.awsui_is-last_x7peu_1jg4x_207 > .awsui_divider-interactive_x7peu_1jg4x_158:not(#\9) {
+  inset-inline-end: 0;
 }
 
-.awsui_resizer_x7peu_poa6s_150:not(#\9) {
+.awsui_resizer_x7peu_1jg4x_150:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -234,24 +247,21 @@ th:not(#\9):last-child > .awsui_resizer-wrapper_x7peu_poa6s_150.awsui_visual-ref
   block-size: 100%;
   inline-size: var(--space-xl-4dmkh1, 24px);
 }
-.awsui_resizer_x7peu_poa6s_150:not(#\9):focus {
+.awsui_resizer_x7peu_1jg4x_150:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_resize-active_x7peu_poa6s_145 .awsui_resizer_x7peu_poa6s_150:not(#\9) {
+.awsui_resize-active_x7peu_1jg4x_145 .awsui_resizer_x7peu_1jg4x_150:not(#\9) {
   pointer-events: none;
 }
-.awsui_resizer_x7peu_poa6s_150:not(#\9):hover + .awsui_divider_x7peu_poa6s_158 {
-  border-inline-start: 2px solid var(--color-border-divider-active-d5kcok, #687078);
-}
-body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_poa6s_150.awsui_has-focus_x7peu_poa6s_246:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_1jg4x_150.awsui_has-focus_x7peu_1jg4x_256:not(#\9) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_poa6s_150.awsui_has-focus_x7peu_poa6s_246:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_1jg4x_150.awsui_has-focus_x7peu_1jg4x_256:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(calc(var(--space-table-header-focus-outline-gutter-0zj6up, 0px) - 2px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_poa6s_150.awsui_has-focus_x7peu_poa6s_246:not(#\9)::before {
+body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_1jg4x_150.awsui_has-focus_x7peu_1jg4x_256:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -266,13 +276,13 @@ body[data-awsui-focus-visible=true] .awsui_resizer_x7peu_poa6s_150.awsui_has-foc
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
 
-.awsui_tracker_x7peu_poa6s_268:not(#\9) {
+.awsui_tracker_x7peu_1jg4x_278:not(#\9) {
   display: none;
   position: absolute;
   border-inline-start: var(--border-divider-list-width-8ggz94, 1px) dashed var(--color-border-divider-active-d5kcok, #687078);
   inline-size: 0;
   inset-block: 0;
 }
-.awsui_resize-active_x7peu_poa6s_145 .awsui_tracker_x7peu_poa6s_268:not(#\9) {
+.awsui_resize-active_x7peu_1jg4x_145 .awsui_tracker_x7peu_1jg4x_278:not(#\9) {
   display: block;
 }

package/lib/internal/template/table/resizer/styles.selectors.js

@@ -2,18 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "resize-active": "awsui_resize-active_x7peu_poa6s_145",
-  "resize-active-with-focus": "awsui_resize-active-with-focus_x7peu_poa6s_145",
-  "resizer-wrapper": "awsui_resizer-wrapper_x7peu_poa6s_150",
-  "divider-interactive": "awsui_divider-interactive_x7peu_poa6s_158",
-  "is-borderless": "awsui_is-borderless_x7peu_poa6s_158",
-  "resizer-button-wrapper": "awsui_resizer-button-wrapper_x7peu_poa6s_162",
-  "divider": "awsui_divider_x7peu_poa6s_158",
-  "divider-disabled": "awsui_divider-disabled_x7peu_poa6s_182",
-  "visual-refresh": "awsui_visual-refresh_x7peu_poa6s_190",
-  "divider-active": "awsui_divider-active_x7peu_poa6s_194",
-  "resizer": "awsui_resizer_x7peu_poa6s_150",
-  "has-focus": "awsui_has-focus_x7peu_poa6s_246",
-  "tracker": "awsui_tracker_x7peu_poa6s_268"
+  "resize-active": "awsui_resize-active_x7peu_1jg4x_145",
+  "resize-active-with-focus": "awsui_resize-active-with-focus_x7peu_1jg4x_145",
+  "resizer-wrapper": "awsui_resizer-wrapper_x7peu_1jg4x_150",
+  "divider-interactive": "awsui_divider-interactive_x7peu_1jg4x_158",
+  "is-borderless": "awsui_is-borderless_x7peu_1jg4x_158",
+  "resizer-button-wrapper": "awsui_resizer-button-wrapper_x7peu_1jg4x_162",
+  "divider": "awsui_divider_x7peu_1jg4x_158",
+  "divider-position-top": "awsui_divider-position-top_x7peu_1jg4x_181",
+  "divider-position-bottom": "awsui_divider-position-bottom_x7peu_1jg4x_187",
+  "divider-position-full": "awsui_divider-position-full_x7peu_1jg4x_193",
+  "divider-active": "awsui_divider-active_x7peu_1jg4x_203",
+  "visual-refresh": "awsui_visual-refresh_x7peu_1jg4x_207",
+  "is-last": "awsui_is-last_x7peu_1jg4x_207",
+  "resizer": "awsui_resizer_x7peu_1jg4x_150",
+  "has-focus": "awsui_has-focus_x7peu_1jg4x_256",
+  "tracker": "awsui_tracker_x7peu_1jg4x_278"
 };
   

package/lib/internal/template/table/skeleton-rows.d.ts

@@ -0,0 +1,23 @@
+import { TableProps } from './interfaces';
+import { StickyColumnsModel } from './sticky-columns';
+import { TableRole } from './table-role';
+interface SkeletonRowsProps {
+    count: number;
+    hasDataRows: boolean;
+    totalColumnsCount: number;
+    loadingText: string | undefined;
+    hasSelection: boolean;
+    hasFooter: boolean;
+    stickyState: StickyColumnsModel;
+    tableRole: TableRole;
+    ariaLabels: TableProps['ariaLabels'];
+    cellVerticalAlign: TableProps.VerticalAlign | undefined;
+    computedVariant: string;
+    visibleColumnDefinitions: readonly TableProps.ColumnDefinition<any>[];
+    wrapLines: boolean | undefined;
+    resizableColumns: boolean | undefined;
+    colIndexOffset: number;
+}
+export declare function SkeletonRows({ count, hasDataRows, totalColumnsCount, loadingText, hasSelection, hasFooter, stickyState, tableRole, ariaLabels, cellVerticalAlign, computedVariant, visibleColumnDefinitions, wrapLines, resizableColumns, colIndexOffset, }: SkeletonRowsProps): JSX.Element;
+export {};
+//# sourceMappingURL=skeleton-rows.d.ts.map

package/lib/internal/template/table/skeleton-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-rows.d.ts","sourceRoot":"","sources":["../../../src/table/skeleton-rows.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzC,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,kBAAkB,CAAC;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,iBAAiB,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACxD,eAAe,EAAE,MAAM,CAAC;IACxB,wBAAwB,EAAE,SAAS,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;IACtE,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,WAAW,EACX,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,wBAAwB,EACxB,SAAS,EACT,gBAAgB,EAChB,cAAc,GACf,EAAE,iBAAiB,eAuDnB"}

package/lib/internal/template/table/skeleton-rows.js

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import ScreenreaderOnly from '../internal/components/screenreader-only';
+import InternalSkeleton from '../skeleton/internal';
+import { TableBodyCell } from './body-cell';
+import { getColumnKey } from './utils';
+import styles from './styles.css.js';
+const noop = () => { };
+export function SkeletonRows({ count, hasDataRows, totalColumnsCount, loadingText, hasSelection, hasFooter, stickyState, tableRole, ariaLabels, cellVerticalAlign, computedVariant, visibleColumnDefinitions, wrapLines, resizableColumns, colIndexOffset, }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("tr", { "aria-hidden": "false" },
+            React.createElement("td", { colSpan: totalColumnsCount, className: styles['skeleton-loading-cell'] },
+                React.createElement(ScreenreaderOnly, null, loadingText))),
+        Array.from({ length: count }, (_, i) => {
+            const isFirstRow = !hasDataRows && i === 0;
+            const isLastRow = i === count - 1;
+            return (React.createElement("tr", { key: `skeleton-row-${i}`, className: styles.row, "aria-hidden": "true" },
+                hasSelection && React.createElement("td", { className: styles['selection-control'] }),
+                visibleColumnDefinitions.map((column, colIndex) => {
+                    var _a, _b;
+                    return (React.createElement(TableBodyCell, { key: `skeleton-${getColumnKey(column, colIndex)}`, isFirstRow: isFirstRow, isLastRow: isLastRow, isSelected: false, isPrevSelected: false, isNextSelected: false, hasSelection: hasSelection, hasFooter: hasFooter, stickyState: stickyState, tableRole: tableRole, resizableStyle: {
+                            width: column.width,
+                            minWidth: column.minWidth,
+                            maxWidth: column.maxWidth,
+                        }, ariaLabels: ariaLabels, column: {
+                            ...column,
+                            cell: () => React.createElement(InternalSkeleton, { variant: "dynamic", tagOverride: "span" }),
+                        }, item: {}, wrapLines: wrapLines, isEditable: false, isEditing: false, isRowHeader: column.isRowHeader, resizableColumns: resizableColumns, onEditStart: noop, onEditEnd: noop, columnId: (_a = column.id) !== null && _a !== void 0 ? _a : colIndex, colIndex: colIndex + colIndexOffset, verticalAlign: (_b = column.verticalAlign) !== null && _b !== void 0 ? _b : cellVerticalAlign, tableVariant: computedVariant }));
+                })));
+        })));
+}
+//# sourceMappingURL=skeleton-rows.js.map

package/lib/internal/template/table/skeleton-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-rows.js","sourceRoot":"","sources":["../../../src/table/skeleton-rows.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,0CAA0C,CAAC;AACxE,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,IAAI,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AAoBtB,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,WAAW,EACX,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,wBAAwB,EACxB,SAAS,EACT,gBAAgB,EAChB,cAAc,GACI;IAClB,OAAO,CACL;QACE,2CAAgB,OAAO;YACrB,4BAAI,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;gBACxE,oBAAC,gBAAgB,QAAE,WAAW,CAAoB,CAC/C,CACF;QACJ,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,UAAU,GAAG,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,MAAM,SAAS,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC;YAClC,OAAO,CACL,4BAAI,GAAG,EAAE,gBAAgB,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,GAAG,iBAAc,MAAM;gBACpE,YAAY,IAAI,4BAAI,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,GAAI;gBAC9D,wBAAwB,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,QAAgB,EAAE,EAAE;;oBAAC,OAAA,CAC/D,oBAAC,aAAa,IACZ,GAAG,EAAE,YAAY,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,EACjD,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,KAAK,EACjB,cAAc,EAAE,KAAK,EACrB,cAAc,EAAE,KAAK,EACrB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE;4BACd,KAAK,EAAE,MAAM,CAAC,KAAK;4BACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ;4BACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ;yBAC1B,EACD,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE;4BACN,GAAG,MAAM;4BACT,IAAI,EAAE,GAAG,EAAE,CAAC,oBAAC,gBAAgB,IAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAC,MAAM,GAAG;yBACtE,EACD,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,MAAM,CAAC,WAAW,EAC/B,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,IAAI,EACjB,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,MAAA,MAAM,CAAC,EAAE,mCAAI,QAAQ,EAC/B,QAAQ,EAAE,QAAQ,GAAG,cAAc,EACnC,aAAa,EAAE,MAAA,MAAM,CAAC,aAAa,mCAAI,iBAAiB,EACxD,YAAY,EAAE,eAAe,GAC7B,CACH,CAAA;iBAAA,CAAC,CACC,CACN,CAAC;QACJ,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport InternalSkeleton from '../skeleton/internal';\nimport { TableBodyCell } from './body-cell';\nimport { TableProps } from './interfaces';\nimport { StickyColumnsModel } from './sticky-columns';\nimport { TableRole } from './table-role';\nimport { getColumnKey } from './utils';\n\nimport styles from './styles.css.js';\n\nconst noop = () => {};\n\ninterface SkeletonRowsProps {\n  count: number;\n  hasDataRows: boolean;\n  totalColumnsCount: number;\n  loadingText: string | undefined;\n  hasSelection: boolean;\n  hasFooter: boolean;\n  stickyState: StickyColumnsModel;\n  tableRole: TableRole;\n  ariaLabels: TableProps['ariaLabels'];\n  cellVerticalAlign: TableProps.VerticalAlign | undefined;\n  computedVariant: string;\n  visibleColumnDefinitions: readonly TableProps.ColumnDefinition<any>[];\n  wrapLines: boolean | undefined;\n  resizableColumns: boolean | undefined;\n  colIndexOffset: number;\n}\n\nexport function SkeletonRows({\n  count,\n  hasDataRows,\n  totalColumnsCount,\n  loadingText,\n  hasSelection,\n  hasFooter,\n  stickyState,\n  tableRole,\n  ariaLabels,\n  cellVerticalAlign,\n  computedVariant,\n  visibleColumnDefinitions,\n  wrapLines,\n  resizableColumns,\n  colIndexOffset,\n}: SkeletonRowsProps) {\n  return (\n    <>\n      <tr aria-hidden=\"false\">\n        <td colSpan={totalColumnsCount} className={styles['skeleton-loading-cell']}>\n          <ScreenreaderOnly>{loadingText}</ScreenreaderOnly>\n        </td>\n      </tr>\n      {Array.from({ length: count }, (_, i) => {\n        const isFirstRow = !hasDataRows && i === 0;\n        const isLastRow = i === count - 1;\n        return (\n          <tr key={`skeleton-row-${i}`} className={styles.row} aria-hidden=\"true\">\n            {hasSelection && <td className={styles['selection-control']} />}\n            {visibleColumnDefinitions.map((column: any, colIndex: number) => (\n              <TableBodyCell\n                key={`skeleton-${getColumnKey(column, colIndex)}`}\n                isFirstRow={isFirstRow}\n                isLastRow={isLastRow}\n                isSelected={false}\n                isPrevSelected={false}\n                isNextSelected={false}\n                hasSelection={hasSelection}\n                hasFooter={hasFooter}\n                stickyState={stickyState}\n                tableRole={tableRole}\n                resizableStyle={{\n                  width: column.width,\n                  minWidth: column.minWidth,\n                  maxWidth: column.maxWidth,\n                }}\n                ariaLabels={ariaLabels}\n                column={{\n                  ...column,\n                  cell: () => <InternalSkeleton variant=\"dynamic\" tagOverride=\"span\" />,\n                }}\n                item={{}}\n                wrapLines={wrapLines}\n                isEditable={false}\n                isEditing={false}\n                isRowHeader={column.isRowHeader}\n                resizableColumns={resizableColumns}\n                onEditStart={noop}\n                onEditEnd={noop}\n                columnId={column.id ?? colIndex}\n                colIndex={colIndex + colIndexOffset}\n                verticalAlign={column.verticalAlign ?? cellVerticalAlign}\n                tableVariant={computedVariant}\n              />\n            ))}\n          </tr>\n        );\n      })}\n    </>\n  );\n}\n"]}

package/lib/internal/template/table/sticky-header.d.ts

@@ -18,6 +18,9 @@ interface StickyHeaderProps {
     contentDensity?: 'comfortable' | 'compact';
     tableHasHeader?: boolean;
     tableRole: TableRole;
+    hasGroupedColumns?: boolean;
+    columnDefinitions?: ReadonlyArray<TableProps.ColumnDefinition<any>>;
+    hasSelection?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<StickyHeaderProps & React.RefAttributes<StickyHeaderRef>>;
 export default _default;

package/lib/internal/template/table/sticky-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-header.d.ts","sourceRoot":"","sources":["../../../src/table/sticky-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAK7F,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAqB,SAAS,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK5C,MAAM,WAAW,eAAe;IAC9B,WAAW,IAAI,IAAI,CAAC;IACpB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,GAAG,IAAI,CAAC;IAC5C,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;CACxC;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAC/C,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,SAAS,CAAC;CACtB;;AAED,wBAAwC"}
+{"version":3,"file":"sticky-header.d.ts","sourceRoot":"","sources":["../../../src/table/sticky-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAqB,SAAS,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK5C,MAAM,WAAW,eAAe;IAC9B,WAAW,IAAI,IAAI,CAAC;IACpB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,GAAG,IAAI,CAAC;IAC5C,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;CACxC;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAC/C,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;;AAED,wBAAwC"}

package/lib/internal/template/table/sticky-header.js

@@ -4,12 +4,13 @@ import React, { forwardRef, useContext, useImperativeHandle, useRef, useState }
 import clsx from 'clsx';
 import { StickyHeaderContext } from '../container/use-sticky-header';
 import { getVisualContextClassname } from '../internal/components/visual-context';
+import { TableColGroup } from './column-groups/col-group';
 import { getTableRoleProps } from './table-role';
 import Thead from './thead';
 import { useStickyHeader } from './use-sticky-header';
 import styles from './styles.css.js';
 export default forwardRef(StickyHeader);
-function StickyHeader({ variant, theadProps, wrapperRef, theadRef, secondaryWrapperRef, onScroll, tableRef, tableHasHeader, contentDensity, tableRole, }, ref) {
+function StickyHeader({ variant, theadProps, wrapperRef, theadRef, secondaryWrapperRef, tableRef, onScroll, tableHasHeader, contentDensity, tableRole, hasGroupedColumns, columnDefinitions, hasSelection, }, ref) {
     const secondaryTheadRef = useRef(null);
     const secondaryTableRef = useRef(null);
     const { isStuck } = useContext(StickyHeaderContext);
@@ -20,13 +21,17 @@ function StickyHeader({ variant, theadProps, wrapperRef, theadRef, secondaryWrap
         scrollToRow,
         setFocus: setFocusedComponent,
     }));
+    // For grouped columns, the secondary table needs a <colgroup> to define column
+    // widths. Without it, table-layout:fixed uses the first row (which has colspan group
+    // headers) to determine widths — giving wrong results.
     return (React.createElement("div", { className: clsx(styles['header-secondary'], styles[`variant-${variant}`], {
             [styles['table-has-header']]: tableHasHeader,
         }), "aria-hidden": true, 
         // Prevents receiving focus in Firefox. Focus on the overflowing table is sufficient
         // to scroll the table horizontally
         tabIndex: -1, ref: secondaryWrapperRef, onScroll: onScroll },
-        React.createElement("table", { className: clsx(styles.table, styles['table-layout-fixed'], contentDensity === 'compact' && getVisualContextClassname('compact-table')), ref: secondaryTableRef, ...getTableRoleProps({ tableRole }) },
+        React.createElement("table", { className: clsx(styles.table, styles['table-layout-fixed'], hasGroupedColumns && styles['has-grouped-header'], contentDensity === 'compact' && getVisualContextClassname('compact-table')), ref: secondaryTableRef, ...getTableRoleProps({ tableRole }) },
+            hasGroupedColumns && columnDefinitions && (React.createElement(TableColGroup, { visibleColumnDefinitions: columnDefinitions, hasSelection: !!hasSelection, sticky: true, selectionColumnId: theadProps.selectionColumnId })),
             React.createElement(Thead, { ref: secondaryTheadRef, sticky: true, stuck: isStuck, focusedComponent: focusedComponent, ...theadProps }))));
 }
 //# sourceMappingURL=sticky-header.js.map

package/lib/internal/template/table/sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-header.js","sourceRoot":"","sources":["../../../src/table/sticky-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAElF,OAAO,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAC5D,OAAO,KAAqB,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAqBrC,eAAe,UAAU,CAAC,YAAY,CAAC,CAAC;AAExC,SAAS,YAAY,CACnB,EACE,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,EACR,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,cAAc,EACd,SAAS,GACS,EACpB,GAA+B;IAE/B,MAAM,iBAAiB,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAEpD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC9E,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,eAAe,CAClD,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,CACX,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,WAAW;QACX,WAAW;QACX,QAAQ,EAAE,mBAAmB;KAC9B,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE;YACxE,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,cAAc;SAC7C,CAAC,iBACW,IAAI;QACjB,oFAAoF;QACpF,mCAAmC;QACnC,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,mBAAmB,EACxB,QAAQ,EAAE,QAAQ;QAElB,+BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,oBAAoB,CAAC,EAC5B,cAAc,KAAK,SAAS,IAAI,yBAAyB,CAAC,eAAe,CAAC,CAC3E,EACD,GAAG,EAAE,iBAAiB,KAClB,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;YAEpC,oBAAC,KAAK,IACJ,GAAG,EAAE,iBAAiB,EACtB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,OAAO,EACd,gBAAgB,EAAE,gBAAgB,KAC9B,UAAU,GACd,CACI,CACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useContext, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\nimport { TableProps } from './interfaces';\nimport { getTableRoleProps, TableRole } from './table-role';\nimport Thead, { TheadProps } from './thead';\nimport { useStickyHeader } from './use-sticky-header';\n\nimport styles from './styles.css.js';\n\nexport interface StickyHeaderRef {\n  scrollToTop(): void;\n  scrollToRow(node: null | HTMLElement): void;\n  setFocus(focusId: null | string): void;\n}\n\ninterface StickyHeaderProps {\n  variant: TableProps.Variant;\n  theadProps: TheadProps;\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  theadRef: React.RefObject<HTMLTableRowElement>;\n  secondaryWrapperRef: React.RefObject<HTMLDivElement>;\n  tableRef: React.RefObject<HTMLTableElement>;\n  onScroll?: React.UIEventHandler<HTMLDivElement>;\n  contentDensity?: 'comfortable' | 'compact';\n  tableHasHeader?: boolean;\n  tableRole: TableRole;\n}\n\nexport default forwardRef(StickyHeader);\n\nfunction StickyHeader(\n  {\n    variant,\n    theadProps,\n    wrapperRef,\n    theadRef,\n    secondaryWrapperRef,\n    onScroll,\n    tableRef,\n    tableHasHeader,\n    contentDensity,\n    tableRole,\n  }: StickyHeaderProps,\n  ref: React.Ref<StickyHeaderRef>\n) {\n  const secondaryTheadRef = useRef<HTMLTableRowElement>(null);\n  const secondaryTableRef = useRef<HTMLTableElement>(null);\n  const { isStuck } = useContext(StickyHeaderContext);\n\n  const [focusedComponent, setFocusedComponent] = useState<null | string>(null);\n  const { scrollToRow, scrollToTop } = useStickyHeader(\n    tableRef,\n    theadRef,\n    secondaryTheadRef,\n    secondaryTableRef,\n    wrapperRef\n  );\n\n  useImperativeHandle(ref, () => ({\n    scrollToTop,\n    scrollToRow,\n    setFocus: setFocusedComponent,\n  }));\n\n  return (\n    <div\n      className={clsx(styles['header-secondary'], styles[`variant-${variant}`], {\n        [styles['table-has-header']]: tableHasHeader,\n      })}\n      aria-hidden={true}\n      // Prevents receiving focus in Firefox. Focus on the overflowing table is sufficient\n      // to scroll the table horizontally\n      tabIndex={-1}\n      ref={secondaryWrapperRef}\n      onScroll={onScroll}\n    >\n      <table\n        className={clsx(\n          styles.table,\n          styles['table-layout-fixed'],\n          contentDensity === 'compact' && getVisualContextClassname('compact-table')\n        )}\n        ref={secondaryTableRef}\n        {...getTableRoleProps({ tableRole })}\n      >\n        <Thead\n          ref={secondaryTheadRef}\n          sticky={true}\n          stuck={isStuck}\n          focusedComponent={focusedComponent}\n          {...theadProps}\n        />\n      </table>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"sticky-header.js","sourceRoot":"","sources":["../../../src/table/sticky-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAC5D,OAAO,KAAqB,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAwBrC,eAAe,UAAU,CAAC,YAAY,CAAC,CAAC;AAExC,SAAS,YAAY,CACnB,EACE,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,EACR,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,cAAc,EACd,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,GACM,EACpB,GAA+B;IAE/B,MAAM,iBAAiB,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAEpD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC9E,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,eAAe,CAClD,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,CACX,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,WAAW;QACX,WAAW;QACX,QAAQ,EAAE,mBAAmB;KAC9B,CAAC,CAAC,CAAC;IAEJ,+EAA+E;IAC/E,qFAAqF;IACrF,uDAAuD;IAEvD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE;YACxE,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,cAAc;SAC7C,CAAC,iBACW,IAAI;QACjB,oFAAoF;QACpF,mCAAmC;QACnC,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,mBAAmB,EACxB,QAAQ,EAAE,QAAQ;QAElB,+BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,oBAAoB,CAAC,EAC5B,iBAAiB,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACjD,cAAc,KAAK,SAAS,IAAI,yBAAyB,CAAC,eAAe,CAAC,CAC3E,EACD,GAAG,EAAE,iBAAiB,KAClB,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;YAEnC,iBAAiB,IAAI,iBAAiB,IAAI,CACzC,oBAAC,aAAa,IACZ,wBAAwB,EAAE,iBAAiB,EAC3C,YAAY,EAAE,CAAC,CAAC,YAAY,EAC5B,MAAM,EAAE,IAAI,EACZ,iBAAiB,EAAE,UAAU,CAAC,iBAAiB,GAC/C,CACH;YACD,oBAAC,KAAK,IACJ,GAAG,EAAE,iBAAiB,EACtB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,OAAO,EACd,gBAAgB,EAAE,gBAAgB,KAC9B,UAAU,GACd,CACI,CACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useContext, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\nimport { TableColGroup } from './column-groups/col-group';\nimport { TableProps } from './interfaces';\nimport { getTableRoleProps, TableRole } from './table-role';\nimport Thead, { TheadProps } from './thead';\nimport { useStickyHeader } from './use-sticky-header';\n\nimport styles from './styles.css.js';\n\nexport interface StickyHeaderRef {\n  scrollToTop(): void;\n  scrollToRow(node: null | HTMLElement): void;\n  setFocus(focusId: null | string): void;\n}\n\ninterface StickyHeaderProps {\n  variant: TableProps.Variant;\n  theadProps: TheadProps;\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  theadRef: React.RefObject<HTMLTableRowElement>;\n  secondaryWrapperRef: React.RefObject<HTMLDivElement>;\n  tableRef: React.RefObject<HTMLTableElement>;\n  onScroll?: React.UIEventHandler<HTMLDivElement>;\n  contentDensity?: 'comfortable' | 'compact';\n  tableHasHeader?: boolean;\n  tableRole: TableRole;\n  hasGroupedColumns?: boolean;\n  columnDefinitions?: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  hasSelection?: boolean;\n}\n\nexport default forwardRef(StickyHeader);\n\nfunction StickyHeader(\n  {\n    variant,\n    theadProps,\n    wrapperRef,\n    theadRef,\n    secondaryWrapperRef,\n    tableRef,\n    onScroll,\n    tableHasHeader,\n    contentDensity,\n    tableRole,\n    hasGroupedColumns,\n    columnDefinitions,\n    hasSelection,\n  }: StickyHeaderProps,\n  ref: React.Ref<StickyHeaderRef>\n) {\n  const secondaryTheadRef = useRef<HTMLTableRowElement>(null);\n  const secondaryTableRef = useRef<HTMLTableElement>(null);\n  const { isStuck } = useContext(StickyHeaderContext);\n\n  const [focusedComponent, setFocusedComponent] = useState<null | string>(null);\n  const { scrollToRow, scrollToTop } = useStickyHeader(\n    tableRef,\n    theadRef,\n    secondaryTheadRef,\n    secondaryTableRef,\n    wrapperRef\n  );\n\n  useImperativeHandle(ref, () => ({\n    scrollToTop,\n    scrollToRow,\n    setFocus: setFocusedComponent,\n  }));\n\n  // For grouped columns, the secondary table needs a <colgroup> to define column\n  // widths. Without it, table-layout:fixed uses the first row (which has colspan group\n  // headers) to determine widths — giving wrong results.\n\n  return (\n    <div\n      className={clsx(styles['header-secondary'], styles[`variant-${variant}`], {\n        [styles['table-has-header']]: tableHasHeader,\n      })}\n      aria-hidden={true}\n      // Prevents receiving focus in Firefox. Focus on the overflowing table is sufficient\n      // to scroll the table horizontally\n      tabIndex={-1}\n      ref={secondaryWrapperRef}\n      onScroll={onScroll}\n    >\n      <table\n        className={clsx(\n          styles.table,\n          styles['table-layout-fixed'],\n          hasGroupedColumns && styles['has-grouped-header'],\n          contentDensity === 'compact' && getVisualContextClassname('compact-table')\n        )}\n        ref={secondaryTableRef}\n        {...getTableRoleProps({ tableRole })}\n      >\n        {hasGroupedColumns && columnDefinitions && (\n          <TableColGroup\n            visibleColumnDefinitions={columnDefinitions}\n            hasSelection={!!hasSelection}\n            sticky={true}\n            selectionColumnId={theadProps.selectionColumnId}\n          />\n        )}\n        <Thead\n          ref={secondaryTheadRef}\n          sticky={true}\n          stuck={isStuck}\n          focusedComponent={focusedComponent}\n          {...theadProps}\n        />\n      </table>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/table/sticky-scrolling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-scrolling.d.ts","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACxD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;yBAWzB,WAAW,GAAG,IAAI;EAc/C;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,UAInF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,QAQhE"}
+{"version":3,"file":"sticky-scrolling.d.ts","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACxD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;yBAWzB,WAAW,GAAG,IAAI;EAkB/C;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,UAInF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,QAQhE"}

package/lib/internal/template/table/sticky-scrolling.js

@@ -19,10 +19,15 @@ export default function stickyScrolling(containerRef, stickyRef) {
         }
     };
     const scrollToItem = (item) => {
+        var _a;
         if (!item || !containerRef.current || !stickyRef.current) {
             return;
         }
-        const stickyBottom = getLogicalBoundingClientRect(stickyRef.current).insetBlockEnd;
+        // For grouped headers with multiple <tr> rows, stickyRef points to the first <tr>.
+        // Use the full <thead> bottom so we account for all header rows.
+        /* istanbul ignore next: requires DOM scroll measurements */
+        const stickyEl = (_a = stickyRef.current.closest('thead')) !== null && _a !== void 0 ? _a : stickyRef.current;
+        const stickyBottom = getLogicalBoundingClientRect(stickyEl).insetBlockEnd;
         const scrollingOffset = stickyBottom - getLogicalBoundingClientRect(item).insetBlockStart;
         if (scrollingOffset > 0) {
             scrollUpBy(scrollingOffset, containerRef.current);

package/lib/internal/template/table/sticky-scrolling.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-scrolling.js","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAE7F,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAwD,EACxD,SAAqD;IAErD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YAChD,OAAO;QACT,CAAC;QACD,MAAM,eAAe,GAAG,wBAAwB,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1F,IAAI,eAAe,GAAG,CAAC,EAAE,CAAC;YACxB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,CAAC;IACF,MAAM,YAAY,GAAG,CAAC,IAAwB,EAAE,EAAE;QAChD,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACzD,OAAO;QACT,CAAC;QACD,MAAM,YAAY,GAAG,4BAA4B,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;QACnF,MAAM,eAAe,GAAG,YAAY,GAAG,4BAA4B,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC;QAC1F,IAAI,eAAe,GAAG,CAAC,EAAE,CAAC;YACxB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,CAAC;IACF,OAAO;QACL,WAAW;QACX,YAAY;KACb,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,wBAAwB,CAAC,SAAsB,EAAE,MAAmB;IAClF,MAAM,UAAU,GAAG,4BAA4B,CAAC,MAAM,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,4BAA4B,CAAC,SAAS,CAAC,CAAC;IAC9D,OAAO,UAAU,CAAC,eAAe,GAAG,aAAa,CAAC,eAAe,CAAC;AACpE,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,SAAsB;IAC/D,MAAM,MAAM,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC7C,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;QAClB,qCAAqC;QACrC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC;IAChC,CAAC;SAAM,CAAC;QACN,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,WAAW,GAAG,MAAM,EAAE,CAAC,CAAC;IACxD,CAAC;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\n\n/**\n * @param containerRef ref to surrounding container with sticky element\n * @param stickyRef ref to sticky element scrolled inside of containerRef\n * @param containerOffset offset between header and container\n *                        originating borders or paddings\n */\nexport default function stickyScrolling(\n  containerRef: React.MutableRefObject<HTMLElement | null>,\n  stickyRef: React.MutableRefObject<HTMLElement | null>\n) {\n  const scrollToTop = () => {\n    if (!containerRef.current || !stickyRef.current) {\n      return;\n    }\n    const scrollingOffset = calculateScrollingOffset(containerRef.current, stickyRef.current);\n    if (scrollingOffset > 0) {\n      scrollUpBy(scrollingOffset, containerRef.current);\n    }\n  };\n  const scrollToItem = (item: HTMLElement | null) => {\n    if (!item || !containerRef.current || !stickyRef.current) {\n      return;\n    }\n    const stickyBottom = getLogicalBoundingClientRect(stickyRef.current).insetBlockEnd;\n    const scrollingOffset = stickyBottom - getLogicalBoundingClientRect(item).insetBlockStart;\n    if (scrollingOffset > 0) {\n      scrollUpBy(scrollingOffset, containerRef.current);\n    }\n  };\n  return {\n    scrollToTop,\n    scrollToItem,\n  };\n}\n\n/**\n * Calculates the scrolling offset between container and\n * sticky element with container offset caused by border\n * or padding\n * @param container\n * @param sticky element inside of container\n * @param containerOffset caused by borders or paddings\n */\nexport function calculateScrollingOffset(container: HTMLElement, sticky: HTMLElement) {\n  const stickyRect = getLogicalBoundingClientRect(sticky);\n  const containerRect = getLogicalBoundingClientRect(container);\n  return stickyRect.insetBlockStart - containerRect.insetBlockStart;\n}\n\n/**\n * Scrolls suitable parent of container up by amount of pixels\n * @param amount pixels to be scrolled up\n * @param container used to determine next parent element for scrolling\n */\nexport function scrollUpBy(amount: number, container: HTMLElement) {\n  const parent = getOverflowParents(container);\n  if (parent.length) {\n    // Take next overflow parent in stack\n    parent[0].scrollTop -= amount;\n  } else {\n    window.scrollTo({ top: window.pageYOffset - amount });\n  }\n}\n"]}
+{"version":3,"file":"sticky-scrolling.js","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAE7F,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAwD,EACxD,SAAqD;IAErD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YAChD,OAAO;QACT,CAAC;QACD,MAAM,eAAe,GAAG,wBAAwB,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1F,IAAI,eAAe,GAAG,CAAC,EAAE,CAAC;YACxB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,CAAC;IACF,MAAM,YAAY,GAAG,CAAC,IAAwB,EAAE,EAAE;;QAChD,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACzD,OAAO;QACT,CAAC;QACD,mFAAmF;QACnF,iEAAiE;QACjE,4DAA4D;QAC5D,MAAM,QAAQ,GAAG,MAAA,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,mCAAI,SAAS,CAAC,OAAO,CAAC;QACzE,MAAM,YAAY,GAAG,4BAA4B,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC;QAC1E,MAAM,eAAe,GAAG,YAAY,GAAG,4BAA4B,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC;QAC1F,IAAI,eAAe,GAAG,CAAC,EAAE,CAAC;YACxB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,CAAC;IACF,OAAO;QACL,WAAW;QACX,YAAY;KACb,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,wBAAwB,CAAC,SAAsB,EAAE,MAAmB;IAClF,MAAM,UAAU,GAAG,4BAA4B,CAAC,MAAM,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,4BAA4B,CAAC,SAAS,CAAC,CAAC;IAC9D,OAAO,UAAU,CAAC,eAAe,GAAG,aAAa,CAAC,eAAe,CAAC;AACpE,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,SAAsB;IAC/D,MAAM,MAAM,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC7C,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;QAClB,qCAAqC;QACrC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC;IAChC,CAAC;SAAM,CAAC;QACN,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,WAAW,GAAG,MAAM,EAAE,CAAC,CAAC;IACxD,CAAC;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\n\n/**\n * @param containerRef ref to surrounding container with sticky element\n * @param stickyRef ref to sticky element scrolled inside of containerRef\n * @param containerOffset offset between header and container\n *                        originating borders or paddings\n */\nexport default function stickyScrolling(\n  containerRef: React.MutableRefObject<HTMLElement | null>,\n  stickyRef: React.MutableRefObject<HTMLElement | null>\n) {\n  const scrollToTop = () => {\n    if (!containerRef.current || !stickyRef.current) {\n      return;\n    }\n    const scrollingOffset = calculateScrollingOffset(containerRef.current, stickyRef.current);\n    if (scrollingOffset > 0) {\n      scrollUpBy(scrollingOffset, containerRef.current);\n    }\n  };\n  const scrollToItem = (item: HTMLElement | null) => {\n    if (!item || !containerRef.current || !stickyRef.current) {\n      return;\n    }\n    // For grouped headers with multiple <tr> rows, stickyRef points to the first <tr>.\n    // Use the full <thead> bottom so we account for all header rows.\n    /* istanbul ignore next: requires DOM scroll measurements */\n    const stickyEl = stickyRef.current.closest('thead') ?? stickyRef.current;\n    const stickyBottom = getLogicalBoundingClientRect(stickyEl).insetBlockEnd;\n    const scrollingOffset = stickyBottom - getLogicalBoundingClientRect(item).insetBlockStart;\n    if (scrollingOffset > 0) {\n      scrollUpBy(scrollingOffset, containerRef.current);\n    }\n  };\n  return {\n    scrollToTop,\n    scrollToItem,\n  };\n}\n\n/**\n * Calculates the scrolling offset between container and\n * sticky element with container offset caused by border\n * or padding\n * @param container\n * @param sticky element inside of container\n * @param containerOffset caused by borders or paddings\n */\nexport function calculateScrollingOffset(container: HTMLElement, sticky: HTMLElement) {\n  const stickyRect = getLogicalBoundingClientRect(sticky);\n  const containerRect = getLogicalBoundingClientRect(container);\n  return stickyRect.insetBlockStart - containerRect.insetBlockStart;\n}\n\n/**\n * Scrolls suitable parent of container up by amount of pixels\n * @param amount pixels to be scrolled up\n * @param container used to determine next parent element for scrolling\n */\nexport function scrollUpBy(amount: number, container: HTMLElement) {\n  const parent = getOverflowParents(container);\n  if (parent.length) {\n    // Take next overflow parent in stack\n    parent[0].scrollTop -= amount;\n  } else {\n    window.scrollTo({ top: window.pageYOffset - amount });\n  }\n}\n"]}

package/lib/internal/template/table/styles.css.js

@@ -1,39 +1,41 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_wih1l_1kah9_153",
-  "tools": "awsui_tools_wih1l_1kah9_164",
-  "tools-filtering": "awsui_tools-filtering_wih1l_1kah9_173",
-  "tools-align-right": "awsui_tools-align-right_wih1l_1kah9_186",
-  "tools-pagination": "awsui_tools-pagination_wih1l_1kah9_190",
-  "tools-preferences": "awsui_tools-preferences_wih1l_1kah9_190",
-  "tools-small": "awsui_tools-small_wih1l_1kah9_196",
-  "table": "awsui_table_wih1l_1kah9_200",
-  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_1kah9_206",
-  "wrapper": "awsui_wrapper_wih1l_1kah9_210",
-  "variant-stacked": "awsui_variant-stacked_wih1l_1kah9_217",
-  "wrapper-content-measure": "awsui_wrapper-content-measure_wih1l_1kah9_217",
-  "variant-container": "awsui_variant-container_wih1l_1kah9_217",
-  "has-footer": "awsui_has-footer_wih1l_1kah9_220",
-  "has-header": "awsui_has-header_wih1l_1kah9_223",
-  "cell-merged": "awsui_cell-merged_wih1l_1kah9_240",
-  "cell-merged-content": "awsui_cell-merged-content_wih1l_1kah9_252",
-  "empty": "awsui_empty_wih1l_1kah9_268",
-  "loading": "awsui_loading_wih1l_1kah9_272",
-  "selection-control": "awsui_selection-control_wih1l_1kah9_281",
-  "selection-control-header": "awsui_selection-control-header_wih1l_1kah9_288",
-  "header-secondary": "awsui_header-secondary_wih1l_1kah9_294",
-  "variant-full-page": "awsui_variant-full-page_wih1l_1kah9_305",
-  "table-has-header": "awsui_table-has-header_wih1l_1kah9_311",
-  "header-controls": "awsui_header-controls_wih1l_1kah9_322",
-  "variant-embedded": "awsui_variant-embedded_wih1l_1kah9_331",
-  "variant-borderless": "awsui_variant-borderless_wih1l_1kah9_331",
-  "footer-wrapper": "awsui_footer-wrapper_wih1l_1kah9_336",
-  "footer": "awsui_footer_wih1l_1kah9_336",
-  "footer-with-pagination": "awsui_footer-with-pagination_wih1l_1kah9_344",
-  "footer-pagination": "awsui_footer-pagination_wih1l_1kah9_352",
-  "thead-active": "awsui_thead-active_wih1l_1kah9_356",
-  "row": "awsui_row_wih1l_1kah9_357",
-  "row-selected": "awsui_row-selected_wih1l_1kah9_358"
+  "root": "awsui_root_wih1l_1usgh_153",
+  "tools": "awsui_tools_wih1l_1usgh_164",
+  "tools-filtering": "awsui_tools-filtering_wih1l_1usgh_173",
+  "tools-align-right": "awsui_tools-align-right_wih1l_1usgh_186",
+  "tools-pagination": "awsui_tools-pagination_wih1l_1usgh_190",
+  "tools-preferences": "awsui_tools-preferences_wih1l_1usgh_190",
+  "tools-small": "awsui_tools-small_wih1l_1usgh_196",
+  "table": "awsui_table_wih1l_1usgh_200",
+  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_1usgh_206",
+  "wrapper": "awsui_wrapper_wih1l_1usgh_210",
+  "variant-stacked": "awsui_variant-stacked_wih1l_1usgh_217",
+  "wrapper-content-measure": "awsui_wrapper-content-measure_wih1l_1usgh_217",
+  "variant-container": "awsui_variant-container_wih1l_1usgh_217",
+  "has-footer": "awsui_has-footer_wih1l_1usgh_220",
+  "has-header": "awsui_has-header_wih1l_1usgh_223",
+  "cell-merged": "awsui_cell-merged_wih1l_1usgh_240",
+  "cell-merged-content": "awsui_cell-merged-content_wih1l_1usgh_252",
+  "empty": "awsui_empty_wih1l_1usgh_268",
+  "loading": "awsui_loading_wih1l_1usgh_272",
+  "selection-control": "awsui_selection-control_wih1l_1usgh_281",
+  "selection-control-header": "awsui_selection-control-header_wih1l_1usgh_288",
+  "selection-control-content-spans-rows": "awsui_selection-control-content-spans-rows_wih1l_1usgh_293",
+  "header-secondary": "awsui_header-secondary_wih1l_1usgh_300",
+  "variant-full-page": "awsui_variant-full-page_wih1l_1usgh_311",
+  "table-has-header": "awsui_table-has-header_wih1l_1usgh_317",
+  "header-controls": "awsui_header-controls_wih1l_1usgh_328",
+  "variant-embedded": "awsui_variant-embedded_wih1l_1usgh_337",
+  "variant-borderless": "awsui_variant-borderless_wih1l_1usgh_337",
+  "footer-wrapper": "awsui_footer-wrapper_wih1l_1usgh_342",
+  "footer": "awsui_footer_wih1l_1usgh_342",
+  "footer-with-pagination": "awsui_footer-with-pagination_wih1l_1usgh_350",
+  "footer-pagination": "awsui_footer-pagination_wih1l_1usgh_358",
+  "thead-active": "awsui_thead-active_wih1l_1usgh_362",
+  "row": "awsui_row_wih1l_1usgh_363",
+  "row-selected": "awsui_row-selected_wih1l_1usgh_364",
+  "skeleton-loading-cell": "awsui_skeleton-loading-cell_wih1l_1usgh_368"
 };