@cloudscape-design/components-themeable 3.0.1309 → 3.0.1310

package/lib/internal/template/table/header-cell/common-props.d.ts

@@ -0,0 +1,24 @@
+import { ColumnWidthStyle } from '../column-widths-utils';
+import { TableProps } from '../interfaces';
+import { StickyColumnsModel } from '../sticky-columns';
+import { TableRole } from '../table-role';
+export interface BaseHeaderCellProps {
+    tabIndex: number;
+    colIndex: number;
+    focusedComponent?: null | string;
+    resizableColumns?: boolean;
+    resizableStyle?: ColumnWidthStyle;
+    onResizeFinish: () => void;
+    sticky?: boolean;
+    hidden?: boolean;
+    stripedRows?: boolean;
+    stickyState: StickyColumnsModel;
+    cellRef: React.RefCallback<HTMLElement>;
+    tableRole: TableRole;
+    resizerRoleDescription?: string;
+    resizerTooltipText?: string;
+    variant: TableProps.Variant;
+    tableVariant?: TableProps.Variant;
+    wrapLines?: boolean;
+}
+//# sourceMappingURL=common-props.d.ts.map

package/lib/internal/template/table/header-cell/common-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-props.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/common-props.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,SAAS,EAAE,SAAS,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/lib/internal/template/table/header-cell/common-props.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=common-props.js.map

package/lib/internal/template/table/header-cell/common-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-props.js","sourceRoot":"","sources":["../../../../src/table/header-cell/common-props.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ColumnWidthStyle } from '../column-widths-utils';\nimport { TableProps } from '../interfaces';\nimport { StickyColumnsModel } from '../sticky-columns';\nimport { TableRole } from '../table-role';\n\nexport interface BaseHeaderCellProps {\n  tabIndex: number;\n  colIndex: number;\n  focusedComponent?: null | string;\n  resizableColumns?: boolean;\n  resizableStyle?: ColumnWidthStyle;\n  onResizeFinish: () => void;\n  sticky?: boolean;\n  hidden?: boolean;\n  stripedRows?: boolean;\n  stickyState: StickyColumnsModel;\n  cellRef: React.RefCallback<HTMLElement>;\n  tableRole: TableRole;\n  resizerRoleDescription?: string;\n  resizerTooltipText?: string;\n  variant: TableProps.Variant;\n  tableVariant?: TableProps.Variant;\n  wrapLines?: boolean;\n}\n"]}

package/lib/internal/template/table/header-cell/group-header-cell.d.ts

@@ -0,0 +1,18 @@
+import { TableProps } from '../interfaces';
+import { BaseHeaderCellProps } from './common-props';
+export interface TableGroupHeaderCellProps extends BaseHeaderCellProps {
+    group: TableProps.GroupDefinition;
+    colspan: number;
+    rowspan: number;
+    groupId: string;
+    updateGroupWidth: (groupId: PropertyKey, newWidth: number) => void;
+    childColumnIds: PropertyKey[];
+    firstChildColumnId?: PropertyKey;
+    lastChildColumnId?: PropertyKey;
+    columnGroupId?: string;
+    stickyColumnId?: PropertyKey;
+    stickyBoundaryColumnId?: PropertyKey;
+    isLast?: boolean;
+}
+export declare function TableGroupHeaderCell({ group, colspan, rowspan, colIndex, groupId, resizableColumns, resizableStyle, onResizeFinish, updateGroupWidth, childColumnIds, focusedComponent, tabIndex, sticky, hidden, stripedRows, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, variant, tableVariant, columnGroupId, stickyColumnId, stickyBoundaryColumnId, isLast, wrapLines, }: TableGroupHeaderCellProps): JSX.Element;
+//# sourceMappingURL=group-header-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/group-header-cell.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAK3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrD,MAAM,WAAW,yBAA0B,SAAQ,mBAAmB;IACpE,KAAK,EAAE,UAAU,CAAC,eAAe,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,cAAc,EAAE,WAAW,EAAE,CAAC;IAC9B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,sBAAsB,CAAC,EAAE,WAAW,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,WAAW,EACX,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,MAAM,EACN,SAAS,GACV,EAAE,yBAAyB,eAmF3B"}

package/lib/internal/template/table/header-cell/group-header-cell.js

@@ -0,0 +1,44 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
+import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import { Divider, Resizer } from '../resizer';
+import { useStickyCellStyles } from '../sticky-columns';
+import { DEFAULT_COLUMN_WIDTH, useColumnWidths } from '../use-column-widths';
+import { getStickyClassNames } from '../utils';
+import { TableThElement } from './th-element';
+import styles from './styles.css.js';
+export function TableGroupHeaderCell({ group, colspan, rowspan, colIndex, groupId, resizableColumns, resizableStyle, onResizeFinish, updateGroupWidth, childColumnIds, focusedComponent, tabIndex, sticky, hidden, stripedRows, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, variant, tableVariant, columnGroupId, stickyColumnId, stickyBoundaryColumnId, isLast, wrapLines, }) {
+    var _a, _b;
+    const headerId = useUniqueId('table-group-header-');
+    const { columnWidths } = useColumnWidths();
+    // Effective min = sum of non-rightmost children's current widths (fixed) + rightmost child's minWidth
+    const lastChild = childColumnIds[childColumnIds.length - 1];
+    const groupMinWidth = childColumnIds.reduce((sum, id) => {
+        if (id === lastChild) {
+            return sum + DEFAULT_COLUMN_WIDTH;
+        }
+        return sum + (columnWidths.get(id) || DEFAULT_COLUMN_WIDTH);
+    }, 0);
+    const clickableHeaderRef = useRef(null);
+    const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });
+    // Subscribe to the boundary column's sticky state to inherit shadow/clip-path classes.
+    // The offset/position comes from stickyColumnId (first child); this only adds boundary classes.
+    const boundaryStyles = useStickyCellStyles({
+        stickyColumns: stickyState,
+        columnId: (_a = stickyBoundaryColumnId !== null && stickyBoundaryColumnId !== void 0 ? stickyBoundaryColumnId : stickyColumnId) !== null && _a !== void 0 ? _a : groupId,
+        getClassName: props => getStickyClassNames(styles, props),
+    });
+    // boundaryStyles.className is populated by scroll/intersection observers in the browser.
+    // In JSDOM these observers don't fire, so this branch is only exercised in integration tests.
+    const boundaryClassName = stickyBoundaryColumnId && boundaryStyles.className ? boundaryStyles.className : undefined;
+    return (React.createElement(TableThElement, { resizableStyle: resizableStyle, cellRef: cellRef, focusedComponent: focusedComponent, sticky: sticky, resizable: resizableColumns, hidden: hidden, stripedRows: stripedRows, colIndex: colIndex, columnId: stickyColumnId !== null && stickyColumnId !== void 0 ? stickyColumnId : groupId, stickyState: stickyState, tableRole: tableRole, variant: variant, tableVariant: tableVariant, colSpan: colspan, rowSpan: rowspan, scope: "colgroup", isLast: isLast, columnGroupId: columnGroupId, className: boundaryClassName, boundaryRef: stickyBoundaryColumnId ? boundaryStyles.ref : undefined },
+        React.createElement("div", { ref: clickableHeaderRef, "data-focus-id": `group-header-${groupId}`, className: clsx(styles['header-cell-content'], {
+                [styles['header-cell-fake-focus']]: focusedComponent === `group-header-${groupId}`,
+            }), "aria-label": (_b = group.ariaLabel) === null || _b === void 0 ? void 0 : _b.call(group, { sorted: false, descending: false, disabled: true }), tabIndex: clickableHeaderTabIndex },
+            React.createElement("div", { className: clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap']), id: headerId }, group.header)),
+        resizableColumns ? (React.createElement(Resizer, { tabIndex: tabIndex, focusId: `resize-group-${groupId}`, showFocusRing: focusedComponent === `resize-group-${groupId}`, onWidthUpdate: newWidth => updateGroupWidth(groupId, newWidth), onWidthUpdateCommit: onResizeFinish, ariaLabelledby: headerId, minWidth: groupMinWidth, roleDescription: resizerRoleDescription, tooltipText: resizerTooltipText, isBorderless: variant === 'full-page' || variant === 'embedded' || variant === 'borderless', isLast: isLast, dividerPosition: columnGroupId ? 'full' : 'bottom' })) : (React.createElement(Divider, { position: columnGroupId ? 'full' : 'bottom' }))));
+}
+//# sourceMappingURL=group-header-cell.js.map

package/lib/internal/template/table/header-cell/group-header-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-header-cell.js","sourceRoot":"","sources":["../../../../src/table/header-cell/group-header-cell.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { TableProps } from '../interfaces';\nimport { Divider, Resizer } from '../resizer';\nimport { useStickyCellStyles } from '../sticky-columns';\nimport { DEFAULT_COLUMN_WIDTH, useColumnWidths } from '../use-column-widths';\nimport { getStickyClassNames } from '../utils';\nimport { BaseHeaderCellProps } from './common-props';\nimport { TableThElement } from './th-element';\n\nimport styles from './styles.css.js';\n\nexport interface TableGroupHeaderCellProps extends BaseHeaderCellProps {\n  group: TableProps.GroupDefinition;\n  colspan: number;\n  rowspan: number;\n  groupId: string;\n  updateGroupWidth: (groupId: PropertyKey, newWidth: number) => void;\n  childColumnIds: PropertyKey[];\n  firstChildColumnId?: PropertyKey;\n  lastChildColumnId?: PropertyKey;\n  columnGroupId?: string;\n  stickyColumnId?: PropertyKey;\n  stickyBoundaryColumnId?: PropertyKey;\n  isLast?: boolean;\n}\n\nexport function TableGroupHeaderCell({\n  group,\n  colspan,\n  rowspan,\n  colIndex,\n  groupId,\n  resizableColumns,\n  resizableStyle,\n  onResizeFinish,\n  updateGroupWidth,\n  childColumnIds,\n  focusedComponent,\n  tabIndex,\n  sticky,\n  hidden,\n  stripedRows,\n  stickyState,\n  cellRef,\n  tableRole,\n  resizerRoleDescription,\n  resizerTooltipText,\n  variant,\n  tableVariant,\n  columnGroupId,\n  stickyColumnId,\n  stickyBoundaryColumnId,\n  isLast,\n  wrapLines,\n}: TableGroupHeaderCellProps) {\n  const headerId = useUniqueId('table-group-header-');\n  const { columnWidths } = useColumnWidths();\n\n  // Effective min = sum of non-rightmost children's current widths (fixed) + rightmost child's minWidth\n  const lastChild = childColumnIds[childColumnIds.length - 1];\n  const groupMinWidth = childColumnIds.reduce<number>((sum, id) => {\n    if (id === lastChild) {\n      return sum + DEFAULT_COLUMN_WIDTH;\n    }\n    return sum + (columnWidths.get(id) || DEFAULT_COLUMN_WIDTH);\n  }, 0);\n  const clickableHeaderRef = useRef<HTMLDivElement>(null);\n  const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });\n\n  // Subscribe to the boundary column's sticky state to inherit shadow/clip-path classes.\n  // The offset/position comes from stickyColumnId (first child); this only adds boundary classes.\n  const boundaryStyles = useStickyCellStyles({\n    stickyColumns: stickyState,\n    columnId: stickyBoundaryColumnId ?? stickyColumnId ?? groupId,\n    getClassName: props => getStickyClassNames(styles, props),\n  });\n\n  // boundaryStyles.className is populated by scroll/intersection observers in the browser.\n  // In JSDOM these observers don't fire, so this branch is only exercised in integration tests.\n  const boundaryClassName = stickyBoundaryColumnId && boundaryStyles.className ? boundaryStyles.className : undefined;\n\n  return (\n    <TableThElement\n      resizableStyle={resizableStyle}\n      cellRef={cellRef}\n      focusedComponent={focusedComponent}\n      sticky={sticky}\n      resizable={resizableColumns}\n      hidden={hidden}\n      stripedRows={stripedRows}\n      colIndex={colIndex}\n      columnId={stickyColumnId ?? groupId}\n      stickyState={stickyState}\n      tableRole={tableRole}\n      variant={variant}\n      tableVariant={tableVariant}\n      colSpan={colspan}\n      rowSpan={rowspan}\n      scope=\"colgroup\"\n      isLast={isLast}\n      columnGroupId={columnGroupId}\n      className={boundaryClassName}\n      boundaryRef={stickyBoundaryColumnId ? boundaryStyles.ref : undefined}\n    >\n      <div\n        ref={clickableHeaderRef}\n        data-focus-id={`group-header-${groupId}`}\n        className={clsx(styles['header-cell-content'], {\n          [styles['header-cell-fake-focus']]: focusedComponent === `group-header-${groupId}`,\n        })}\n        aria-label={group.ariaLabel?.({ sorted: false, descending: false, disabled: true })}\n        tabIndex={clickableHeaderTabIndex}\n      >\n        <div className={clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap'])} id={headerId}>\n          {group.header}\n        </div>\n      </div>\n      {resizableColumns ? (\n        <Resizer\n          tabIndex={tabIndex}\n          focusId={`resize-group-${groupId}`}\n          showFocusRing={focusedComponent === `resize-group-${groupId}`}\n          onWidthUpdate={newWidth => updateGroupWidth(groupId, newWidth)}\n          onWidthUpdateCommit={onResizeFinish}\n          ariaLabelledby={headerId}\n          minWidth={groupMinWidth}\n          roleDescription={resizerRoleDescription}\n          tooltipText={resizerTooltipText}\n          isBorderless={variant === 'full-page' || variant === 'embedded' || variant === 'borderless'}\n          isLast={isLast}\n          dividerPosition={columnGroupId ? 'full' : 'bottom'}\n        />\n      ) : (\n        <Divider position={columnGroupId ? 'full' : 'bottom'} />\n      )}\n    </TableThElement>\n  );\n}\n"]}

package/lib/internal/template/table/header-cell/index.d.ts

@@ -1,37 +1,22 @@
-import React from 'react';
-import { ColumnWidthStyle } from '../column-widths-utils';
 import { TableProps } from '../interfaces';
-import { StickyColumnsModel } from '../sticky-columns';
-import { TableRole } from '../table-role';
-export interface TableHeaderCellProps<ItemType> {
-    tabIndex: number;
+import { BaseHeaderCellProps } from './common-props';
+export interface TableHeaderCellProps<ItemType> extends BaseHeaderCellProps {
     column: TableProps.ColumnDefinition<ItemType>;
     activeSortingColumn?: TableProps.SortingColumn<ItemType>;
     sortingDescending?: boolean;
     sortingDisabled?: boolean;
-    wrapLines?: boolean;
     stuck?: boolean;
-    sticky?: boolean;
-    hidden?: boolean;
-    stripedRows?: boolean;
     onClick(detail: TableProps.SortingState<any>): void;
-    onResizeFinish: () => void;
-    colIndex: number;
     updateColumn: (columnId: PropertyKey, newWidth: number) => void;
-    resizableColumns?: boolean;
-    resizableStyle?: ColumnWidthStyle;
     isEditable?: boolean;
     columnId: PropertyKey;
-    stickyState: StickyColumnsModel;
-    cellRef: React.RefCallback<HTMLElement>;
-    focusedComponent?: null | string;
-    tableRole: TableRole;
-    resizerRoleDescription?: string;
-    resizerTooltipText?: string;
     isExpandable?: boolean;
     hasDynamicContent?: boolean;
-    variant: TableProps.Variant;
-    tableVariant?: TableProps.Variant;
+    colSpan?: number;
+    rowSpan?: number;
+    columnGroupId?: string;
+    isLastChildOfGroup?: boolean;
+    isLast?: boolean;
 }
-export declare function TableHeaderCell<ItemType>({ tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, stuck, sticky, hidden, stripedRows, onClick, colIndex, updateColumn, resizableColumns, resizableStyle, onResizeFinish, isEditable, columnId, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, isExpandable, hasDynamicContent, variant, tableVariant, }: TableHeaderCellProps<ItemType>): JSX.Element;
+export declare function TableHeaderCell<ItemType>({ tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, stuck, sticky, hidden, stripedRows, onClick, colIndex, updateColumn, resizableColumns, resizableStyle, onResizeFinish, isEditable, columnId, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, isExpandable, hasDynamicContent, variant, colSpan, rowSpan, columnGroupId, isLastChildOfGroup, isLast, tableVariant, }: TableHeaderCellProps<ItemType>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAWtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAO1C,MAAM,WAAW,oBAAoB,CAAC,QAAQ;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,mBAAmB,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,WAAW,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,EACxC,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,OAAO,EACP,YAAY,GACb,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eA0IhC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAOrD,MAAM,WAAW,oBAAoB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IACzE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,mBAAmB,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,YAAY,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,EACxC,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,YAAY,GACb,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eAgJhC"}

package/lib/internal/template/table/header-cell/index.js

@@ -13,7 +13,7 @@ import { TableThElement } from './th-element';
 import { getSortingIconName, getSortingStatus, isSorted } from './utils';
 import analyticsSelectors from '../analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
-export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, stuck, sticky, hidden, stripedRows, onClick, colIndex, updateColumn, resizableColumns, resizableStyle, onResizeFinish, isEditable, columnId, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, isExpandable, hasDynamicContent, variant, tableVariant, }) {
+export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, stuck, sticky, hidden, stripedRows, onClick, colIndex, updateColumn, resizableColumns, resizableStyle, onResizeFinish, isEditable, columnId, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, isExpandable, hasDynamicContent, variant, colSpan, rowSpan, columnGroupId, isLastChildOfGroup, isLast, tableVariant, }) {
     var _a;
     const i18n = useInternalI18n('table');
     const sortable = !!column.sortingComparator || !!column.sortingField;
@@ -46,7 +46,7 @@ export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sorting
     useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {
         updateColumn(columnId, entry.borderBoxWidth);
     });
-    return (React.createElement(TableThElement, { resizableStyle: resizableStyle, cellRef: cellRefCombined, sortingStatus: sortingStatus, sortingDisabled: sortingDisabled, focusedComponent: focusedComponent, stuck: stuck, sticky: sticky, resizable: resizableColumns, hidden: hidden, stripedRows: stripedRows, colIndex: colIndex, columnId: columnId, stickyState: stickyState, tableRole: tableRole, variant: variant, tableVariant: tableVariant, ...(sortingDisabled
+    return (React.createElement(TableThElement, { resizableStyle: resizableStyle, cellRef: cellRefCombined, sortingStatus: sortingStatus, sortingDisabled: sortingDisabled, focusedComponent: focusedComponent, stuck: stuck, sticky: sticky, resizable: resizableColumns, hidden: hidden, stripedRows: stripedRows, colIndex: colIndex, columnId: columnId, stickyState: stickyState, tableRole: tableRole, variant: variant, tableVariant: tableVariant, colSpan: colSpan, rowSpan: rowSpan, columnGroupId: columnGroupId, isLast: isLast, ...(sortingDisabled
             ? {}
             : getAnalyticsMetadataAttribute({
                 action: 'sort',
@@ -83,6 +83,6 @@ export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sorting
         resizableColumns ? (React.createElement(Resizer, { tabIndex: tabIndex, focusId: `resize-control-${String(columnId)}`, showFocusRing: focusedComponent === `resize-control-${String(columnId)}`, onWidthUpdate: newWidth => updateColumn(columnId, newWidth), onWidthUpdateCommit: onResizeFinish, ariaLabelledby: headerId, minWidth: typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth, roleDescription: i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription), 
             // TODO: Replace with this when strings are available
             // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)}
-            tooltipText: resizerTooltipText, isBorderless: variant === 'full-page' || variant === 'embedded' || variant === 'borderless' })) : (React.createElement(Divider, { className: styles['resize-divider'] }))));
+            tooltipText: resizerTooltipText, isBorderless: variant === 'full-page' || variant === 'embedded' || variant === 'borderless', isLast: isLast, dividerPosition: isLastChildOfGroup ? 'top' : undefined })) : (React.createElement(Divider, { className: styles['resize-divider'], position: isLastChildOfGroup ? 'top' : undefined }))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/table/header-cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/header-cell/index.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport InternalIcon from '../../icon/internal';\nimport { KeyCode } from '../../internal/keycode';\nimport { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';\nimport { ColumnWidthStyle } from '../column-widths-utils';\nimport { TableProps } from '../interfaces';\nimport { Divider, Resizer } from '../resizer';\nimport { StickyColumnsModel } from '../sticky-columns';\nimport { TableRole } from '../table-role';\nimport { TableThElement } from './th-element';\nimport { getSortingIconName, getSortingStatus, isSorted } from './utils';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableHeaderCellProps<ItemType> {\n  tabIndex: number;\n  column: TableProps.ColumnDefinition<ItemType>;\n  activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n  sortingDescending?: boolean;\n  sortingDisabled?: boolean;\n  wrapLines?: boolean;\n  stuck?: boolean;\n  sticky?: boolean;\n  hidden?: boolean;\n  stripedRows?: boolean;\n  onClick(detail: TableProps.SortingState<any>): void;\n  onResizeFinish: () => void;\n  colIndex: number;\n  updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n  resizableColumns?: boolean;\n  resizableStyle?: ColumnWidthStyle;\n  isEditable?: boolean;\n  columnId: PropertyKey;\n  stickyState: StickyColumnsModel;\n  cellRef: React.RefCallback<HTMLElement>;\n  focusedComponent?: null | string;\n  tableRole: TableRole;\n  resizerRoleDescription?: string;\n  resizerTooltipText?: string;\n  isExpandable?: boolean;\n  hasDynamicContent?: boolean;\n  variant: TableProps.Variant;\n  tableVariant?: TableProps.Variant;\n}\n\nexport function TableHeaderCell<ItemType>({\n  tabIndex,\n  column,\n  activeSortingColumn,\n  sortingDescending,\n  sortingDisabled,\n  wrapLines,\n  focusedComponent,\n  stuck,\n  sticky,\n  hidden,\n  stripedRows,\n  onClick,\n  colIndex,\n  updateColumn,\n  resizableColumns,\n  resizableStyle,\n  onResizeFinish,\n  isEditable,\n  columnId,\n  stickyState,\n  cellRef,\n  tableRole,\n  resizerRoleDescription,\n  resizerTooltipText,\n  isExpandable,\n  hasDynamicContent,\n  variant,\n  tableVariant,\n}: TableHeaderCellProps<ItemType>) {\n  const i18n = useInternalI18n('table');\n  const sortable = !!column.sortingComparator || !!column.sortingField;\n  const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);\n  const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);\n  const handleClick = () =>\n    onClick({\n      sortingColumn: column,\n      isDescending: sorted ? !sortingDescending : false,\n    });\n\n  // Elements with role=\"button\" do not have the default behavior of <button>, where pressing\n  // Enter or Space will trigger a click event. Therefore we need to add this ourselves.\n  // The native <button> element cannot be used due to a misaligned implementation in Firefox:\n  // https://bugzilla.mozilla.org/show_bug.cgi?id=843003\n  const handleKeyPress = ({ nativeEvent: e }: React.KeyboardEvent) => {\n    if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {\n      e.preventDefault();\n      handleClick();\n    }\n  };\n\n  const headerId = useUniqueId('table-header-');\n\n  const clickableHeaderRef = useRef<HTMLDivElement>(null);\n  const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });\n\n  const cellRefObject = useRef<HTMLElement>(null);\n  const cellRefCombined = useMergeRefs(cellRef, cellRefObject);\n\n  // Keep sticky and non-sticky headers in sync for dynamic cell\n  // content changes. This is only needed when:\n  // - Column has dynamic content\n  // - This is the non-sticky version of a sticky header (hidden === true)\n  // - Columns are not resizable\n  useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {\n    updateColumn(columnId, entry.borderBoxWidth);\n  });\n\n  return (\n    <TableThElement\n      resizableStyle={resizableStyle}\n      cellRef={cellRefCombined}\n      sortingStatus={sortingStatus}\n      sortingDisabled={sortingDisabled}\n      focusedComponent={focusedComponent}\n      stuck={stuck}\n      sticky={sticky}\n      resizable={resizableColumns}\n      hidden={hidden}\n      stripedRows={stripedRows}\n      colIndex={colIndex}\n      columnId={columnId}\n      stickyState={stickyState}\n      tableRole={tableRole}\n      variant={variant}\n      tableVariant={tableVariant}\n      {...(sortingDisabled\n        ? {}\n        : getAnalyticsMetadataAttribute({\n            action: 'sort',\n            detail: {\n              position: `${colIndex + 1}`,\n              columnId: column.id ? `${column.id}` : '',\n              label: `.${analyticsSelectors['header-cell-text']}`,\n              sortingDescending: `${!sortingDescending}`,\n            },\n          } as GeneratedAnalyticsMetadataTableSort))}\n    >\n      <div\n        ref={clickableHeaderRef}\n        data-focus-id={`sorting-control-${String(columnId)}`}\n        className={clsx(styles['header-cell-content'], {\n          [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,\n          [styles['header-cell-content-expandable']]: isExpandable,\n        })}\n        aria-label={\n          column.ariaLabel\n            ? column.ariaLabel({\n                sorted: sorted,\n                descending: sorted && !!sortingDescending,\n                disabled: !!sortingDisabled,\n              })\n            : undefined\n        }\n        {...(sortingStatus && !sortingDisabled\n          ? {\n              onKeyPress: handleKeyPress,\n              tabIndex: clickableHeaderTabIndex,\n              role: 'button',\n              onClick: handleClick,\n            }\n          : {})}\n      >\n        <div\n          className={clsx(\n            styles['header-cell-text'],\n            analyticsSelectors['header-cell-text'],\n            wrapLines && styles['header-cell-text-wrap']\n          )}\n          id={headerId}\n        >\n          {column.header}\n          {isEditable ? (\n            <span className={styles['edit-icon']}>\n              <InternalIcon\n                name=\"edit\"\n                ariaLabel={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}\n              />\n            </span>\n          ) : null}\n        </div>\n        {sortingStatus && (\n          <span className={styles['sorting-icon']}>\n            <InternalIcon name={getSortingIconName(sortingStatus)} />\n          </span>\n        )}\n      </div>\n      {resizableColumns ? (\n        <Resizer\n          tabIndex={tabIndex}\n          focusId={`resize-control-${String(columnId)}`}\n          showFocusRing={focusedComponent === `resize-control-${String(columnId)}`}\n          onWidthUpdate={newWidth => updateColumn(columnId, newWidth)}\n          onWidthUpdateCommit={onResizeFinish}\n          ariaLabelledby={headerId}\n          minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n          roleDescription={i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription)}\n          // TODO: Replace with this when strings are available\n          // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)}\n          tooltipText={resizerTooltipText}\n          isBorderless={variant === 'full-page' || variant === 'embedded' || variant === 'borderless'}\n        />\n      ) : (\n        <Divider className={styles['resize-divider']} />\n      )}\n    </TableThElement>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/header-cell/index.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport InternalIcon from '../../icon/internal';\nimport { KeyCode } from '../../internal/keycode';\nimport { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';\nimport { TableProps } from '../interfaces';\nimport { Divider, Resizer } from '../resizer';\nimport { BaseHeaderCellProps } from './common-props';\nimport { TableThElement } from './th-element';\nimport { getSortingIconName, getSortingStatus, isSorted } from './utils';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableHeaderCellProps<ItemType> extends BaseHeaderCellProps {\n  column: TableProps.ColumnDefinition<ItemType>;\n  activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n  sortingDescending?: boolean;\n  sortingDisabled?: boolean;\n  stuck?: boolean;\n  onClick(detail: TableProps.SortingState<any>): void;\n  updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n  isEditable?: boolean;\n  columnId: PropertyKey;\n  isExpandable?: boolean;\n  hasDynamicContent?: boolean;\n  colSpan?: number;\n  rowSpan?: number;\n  columnGroupId?: string;\n  isLastChildOfGroup?: boolean;\n  isLast?: boolean;\n}\n\nexport function TableHeaderCell<ItemType>({\n  tabIndex,\n  column,\n  activeSortingColumn,\n  sortingDescending,\n  sortingDisabled,\n  wrapLines,\n  focusedComponent,\n  stuck,\n  sticky,\n  hidden,\n  stripedRows,\n  onClick,\n  colIndex,\n  updateColumn,\n  resizableColumns,\n  resizableStyle,\n  onResizeFinish,\n  isEditable,\n  columnId,\n  stickyState,\n  cellRef,\n  tableRole,\n  resizerRoleDescription,\n  resizerTooltipText,\n  isExpandable,\n  hasDynamicContent,\n  variant,\n  colSpan,\n  rowSpan,\n  columnGroupId,\n  isLastChildOfGroup,\n  isLast,\n  tableVariant,\n}: TableHeaderCellProps<ItemType>) {\n  const i18n = useInternalI18n('table');\n  const sortable = !!column.sortingComparator || !!column.sortingField;\n  const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);\n  const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);\n  const handleClick = () =>\n    onClick({\n      sortingColumn: column,\n      isDescending: sorted ? !sortingDescending : false,\n    });\n\n  // Elements with role=\"button\" do not have the default behavior of <button>, where pressing\n  // Enter or Space will trigger a click event. Therefore we need to add this ourselves.\n  // The native <button> element cannot be used due to a misaligned implementation in Firefox:\n  // https://bugzilla.mozilla.org/show_bug.cgi?id=843003\n  const handleKeyPress = ({ nativeEvent: e }: React.KeyboardEvent) => {\n    if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {\n      e.preventDefault();\n      handleClick();\n    }\n  };\n\n  const headerId = useUniqueId('table-header-');\n\n  const clickableHeaderRef = useRef<HTMLDivElement>(null);\n  const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });\n\n  const cellRefObject = useRef<HTMLElement>(null);\n  const cellRefCombined = useMergeRefs(cellRef, cellRefObject);\n\n  // Keep sticky and non-sticky headers in sync for dynamic cell\n  // content changes. This is only needed when:\n  // - Column has dynamic content\n  // - This is the non-sticky version of a sticky header (hidden === true)\n  // - Columns are not resizable\n  useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {\n    updateColumn(columnId, entry.borderBoxWidth);\n  });\n\n  return (\n    <TableThElement\n      resizableStyle={resizableStyle}\n      cellRef={cellRefCombined}\n      sortingStatus={sortingStatus}\n      sortingDisabled={sortingDisabled}\n      focusedComponent={focusedComponent}\n      stuck={stuck}\n      sticky={sticky}\n      resizable={resizableColumns}\n      hidden={hidden}\n      stripedRows={stripedRows}\n      colIndex={colIndex}\n      columnId={columnId}\n      stickyState={stickyState}\n      tableRole={tableRole}\n      variant={variant}\n      tableVariant={tableVariant}\n      colSpan={colSpan}\n      rowSpan={rowSpan}\n      columnGroupId={columnGroupId}\n      isLast={isLast}\n      {...(sortingDisabled\n        ? {}\n        : getAnalyticsMetadataAttribute({\n            action: 'sort',\n            detail: {\n              position: `${colIndex + 1}`,\n              columnId: column.id ? `${column.id}` : '',\n              label: `.${analyticsSelectors['header-cell-text']}`,\n              sortingDescending: `${!sortingDescending}`,\n            },\n          } as GeneratedAnalyticsMetadataTableSort))}\n    >\n      <div\n        ref={clickableHeaderRef}\n        data-focus-id={`sorting-control-${String(columnId)}`}\n        className={clsx(styles['header-cell-content'], {\n          [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,\n          [styles['header-cell-content-expandable']]: isExpandable,\n        })}\n        aria-label={\n          column.ariaLabel\n            ? column.ariaLabel({\n                sorted: sorted,\n                descending: sorted && !!sortingDescending,\n                disabled: !!sortingDisabled,\n              })\n            : undefined\n        }\n        {...(sortingStatus && !sortingDisabled\n          ? {\n              onKeyPress: handleKeyPress,\n              tabIndex: clickableHeaderTabIndex,\n              role: 'button',\n              onClick: handleClick,\n            }\n          : {})}\n      >\n        <div\n          className={clsx(\n            styles['header-cell-text'],\n            analyticsSelectors['header-cell-text'],\n            wrapLines && styles['header-cell-text-wrap']\n          )}\n          id={headerId}\n        >\n          {column.header}\n          {isEditable ? (\n            <span className={styles['edit-icon']}>\n              <InternalIcon\n                name=\"edit\"\n                ariaLabel={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}\n              />\n            </span>\n          ) : null}\n        </div>\n        {sortingStatus && (\n          <span className={styles['sorting-icon']}>\n            <InternalIcon name={getSortingIconName(sortingStatus)} />\n          </span>\n        )}\n      </div>\n      {resizableColumns ? (\n        <Resizer\n          tabIndex={tabIndex}\n          focusId={`resize-control-${String(columnId)}`}\n          showFocusRing={focusedComponent === `resize-control-${String(columnId)}`}\n          onWidthUpdate={newWidth => updateColumn(columnId, newWidth)}\n          onWidthUpdateCommit={onResizeFinish}\n          ariaLabelledby={headerId}\n          minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n          roleDescription={i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription)}\n          // TODO: Replace with this when strings are available\n          // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)}\n          tooltipText={resizerTooltipText}\n          isBorderless={variant === 'full-page' || variant === 'embedded' || variant === 'borderless'}\n          isLast={isLast}\n          dividerPosition={isLastChildOfGroup ? 'top' : undefined}\n        />\n      ) : (\n        <Divider className={styles['resize-divider']} position={isLastChildOfGroup ? 'top' : undefined} />\n      )}\n    </TableThElement>\n  );\n}\n"]}

package/lib/internal/template/table/header-cell/styles.css.js

@@ -1,35 +1,38 @@
 
     import './styles.scoped.css';
     export default {
-  "header-cell": "awsui_header-cell_1spae_1so90_149",
-  "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_1so90_183",
-  "header-cell-sticky": "awsui_header-cell-sticky_1spae_1so90_204",
-  "header-cell-stuck": "awsui_header-cell-stuck_1spae_1so90_207",
-  "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_1so90_207",
-  "header-cell-hidden": "awsui_header-cell-hidden_1spae_1so90_213",
-  "header-cell-variant-embedded": "awsui_header-cell-variant-embedded_1spae_1so90_216",
-  "is-visual-refresh": "awsui_is-visual-refresh_1spae_1so90_216",
-  "sticky-cell": "awsui_sticky-cell_1spae_1so90_216",
-  "header-cell-variant-borderless": "awsui_header-cell-variant-borderless_1spae_1so90_216",
-  "header-cell-sortable": "awsui_header-cell-sortable_1spae_1so90_219",
-  "table-variant-full-page": "awsui_table-variant-full-page_1spae_1so90_240",
-  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_1so90_243",
-  "has-selection": "awsui_has-selection_1spae_1so90_243",
-  "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_1spae_1so90_246",
-  "resize-divider": "awsui_resize-divider_1spae_1so90_251",
-  "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_1spae_1so90_258",
-  "sorting-icon": "awsui_sorting-icon_1spae_1so90_268",
-  "edit-icon": "awsui_edit-icon_1spae_1so90_276",
-  "header-cell-content": "awsui_header-cell-content_1spae_1so90_282",
-  "header-cell-content-expandable": "awsui_header-cell-content-expandable_1spae_1so90_288",
-  "header-cell-disabled": "awsui_header-cell-disabled_1spae_1so90_340",
-  "header-cell-sorted": "awsui_header-cell-sorted_1spae_1so90_340",
-  "header-cell-text": "awsui_header-cell-text_1spae_1so90_354",
-  "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_1so90_358",
-  "header-cell-ascending": "awsui_header-cell-ascending_1spae_1so90_364",
-  "header-cell-descending": "awsui_header-cell-descending_1spae_1so90_365",
-  "has-striped-rows": "awsui_has-striped-rows_1spae_1so90_479",
-  "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_1spae_1so90_479",
-  "header-cell-resizable": "awsui_header-cell-resizable_1spae_1so90_491"
+  "header-cell": "awsui_header-cell_1spae_1map5_149",
+  "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_1map5_183",
+  "header-cell-group": "awsui_header-cell-group_1spae_1map5_204",
+  "header-cell-grouped": "awsui_header-cell-grouped_1spae_1map5_204",
+  "header-cell-spans-rows": "awsui_header-cell-spans-rows_1spae_1map5_204",
+  "header-cell-sticky": "awsui_header-cell-sticky_1spae_1map5_208",
+  "header-cell-stuck": "awsui_header-cell-stuck_1spae_1map5_211",
+  "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_1map5_211",
+  "header-cell-hidden": "awsui_header-cell-hidden_1spae_1map5_217",
+  "header-cell-variant-embedded": "awsui_header-cell-variant-embedded_1spae_1map5_220",
+  "is-visual-refresh": "awsui_is-visual-refresh_1spae_1map5_220",
+  "sticky-cell": "awsui_sticky-cell_1spae_1map5_220",
+  "header-cell-variant-borderless": "awsui_header-cell-variant-borderless_1spae_1map5_220",
+  "header-cell-sortable": "awsui_header-cell-sortable_1spae_1map5_223",
+  "table-variant-full-page": "awsui_table-variant-full-page_1spae_1map5_244",
+  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_1map5_247",
+  "has-selection": "awsui_has-selection_1spae_1map5_247",
+  "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_1spae_1map5_250",
+  "resize-divider": "awsui_resize-divider_1spae_1map5_255",
+  "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_1spae_1map5_262",
+  "sorting-icon": "awsui_sorting-icon_1spae_1map5_272",
+  "edit-icon": "awsui_edit-icon_1spae_1map5_280",
+  "header-cell-content": "awsui_header-cell-content_1spae_1map5_286",
+  "header-cell-content-expandable": "awsui_header-cell-content-expandable_1spae_1map5_292",
+  "header-cell-disabled": "awsui_header-cell-disabled_1spae_1map5_347",
+  "header-cell-sorted": "awsui_header-cell-sorted_1spae_1map5_347",
+  "header-cell-text": "awsui_header-cell-text_1spae_1map5_378",
+  "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_1map5_382",
+  "header-cell-ascending": "awsui_header-cell-ascending_1spae_1map5_388",
+  "header-cell-descending": "awsui_header-cell-descending_1spae_1map5_389",
+  "has-striped-rows": "awsui_has-striped-rows_1spae_1map5_503",
+  "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_1spae_1map5_503",
+  "header-cell-resizable": "awsui_header-cell-resizable_1spae_1map5_515"
 };