refactor: Componentizes table cell types and adds permutations

src/table/body-cell/disabled-inline-editor.tsx

@@ -8,6 +8,7 @@ import Portal from '../../internal/components/portal';
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import useHiddenDescription from '../../internal/hooks/use-hidden-description';
 import { usePortalModeClasses } from '../../internal/hooks/use-portal-mode-classes';
+import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import InternalLiveRegion from '../../live-region/internal';
 import Arrow from '../../popover/arrow';
 import PopoverBody from '../../popover/body';
@@ -31,10 +32,10 @@ export function DisabledInlineEditor<ItemType>({
   onEditStart,
   onEditEnd,
   editDisabledReason,
-  isVisualRefresh,
   resizableColumns = false,
   ...rest
 }: DisabledInlineEditorProps<ItemType>) {
+  const isVisualRefresh = useVisualRefresh();
   const clickAwayRef = useClickAway(() => {
     if (isEditing) {
       onEditEnd(true);

src/table/body-cell/index.tsx

@@ -7,6 +7,7 @@ import { useInternalI18n } from '../../i18n/context';
 import Icon from '../../icon/internal';
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js';
 import { usePrevious } from '../../internal/hooks/use-previous';
+import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import InternalLiveRegion from '../../live-region/internal';
 import { TableProps } from '../interfaces';
 import { DisabledInlineEditor } from './disabled-inline-editor';
@@ -40,12 +41,12 @@ function TableCellEditable<ItemType>({
   onEditEnd,
   submitEdit,
   ariaLabels,
-  isVisualRefresh,
   resizableColumns = false,
   successfulEdit = false,
   ...rest
 }: TableBodyCellProps<ItemType>) {
   const i18n = useInternalI18n('table');
+  const isVisualRefresh = useVisualRefresh();
   const editActivateRef = useRef<HTMLButtonElement>(null);
   const tdNativeAttributes = {
     'data-inline-editing-active': isEditing.toString(),
@@ -155,15 +156,14 @@ export function TableBodyCell<ItemType>({
   isEditable,
   ...rest
 }: TableBodyCellProps<ItemType> & { isEditable: boolean }) {
-  const isExpandableColumnCell = rest.level !== undefined;
   const editDisabledReason = rest.column.editConfig?.disabledReason?.(rest.item);
 
   // Inline editing is deactivated for expandable column because editable cells are interactive
   // and cannot include interactive content such as expand toggles.
-  if (editDisabledReason && !isExpandableColumnCell) {
+  if (editDisabledReason) {
     return <DisabledInlineEditor editDisabledReason={editDisabledReason} {...rest} />;
   }
-  if ((isEditable || rest.isEditing) && !isExpandableColumnCell) {
+  if (isEditable || rest.isEditing) {
     return <TableCellEditable {...rest} />;
   }
 

src/table/body-cell/td-element.tsx

@@ -7,6 +7,7 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
 
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
+import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import { ExpandToggleButton } from '../expandable-rows/expand-toggle-button';
 import { TableProps } from '../interfaces.js';
 import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
@@ -40,7 +41,6 @@ export interface TableTdElementProps {
   columnId: PropertyKey;
   colIndex: number;
   stickyState: StickyColumnsModel;
-  isVisualRefresh?: boolean;
   tableRole: TableRole;
   level?: number;
   isExpandable?: boolean;
@@ -70,7 +70,6 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
       onMouseLeave,
       isEvenRow,
       stripedRows,
-      isVisualRefresh,
       hasSelection,
       hasFooter,
       columnId,
@@ -89,6 +88,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
     ref
   ) => {
     const Element = isRowHeader ? 'th' : 'td';
+    const isVisualRefresh = useVisualRefresh();
 
     nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };
 

src/table/header-cell/index.tsx

@@ -32,7 +32,10 @@ export interface TableHeaderCellProps<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;
@@ -47,6 +50,7 @@ export interface TableHeaderCellProps<ItemType> {
   resizerRoleDescription?: string;
   isExpandable?: boolean;
   hasDynamicContent?: boolean;
+  variant: TableProps.Variant;
 }
 
 export function TableHeaderCell<ItemType>({
@@ -59,7 +63,10 @@ export function TableHeaderCell<ItemType>({
   sortingDisabled,
   wrapLines,
   focusedComponent,
+  stuck,
+  sticky,
   hidden,
+  stripedRows,
   onClick,
   colIndex,
   updateColumn,
@@ -73,6 +80,7 @@ export function TableHeaderCell<ItemType>({
   resizerRoleDescription,
   isExpandable,
   hasDynamicContent,
+  variant,
 }: TableHeaderCellProps<ItemType>) {
   const i18n = useInternalI18n('table');
   const sortable = !!column.sortingComparator || !!column.sortingField;
@@ -120,11 +128,15 @@ export function TableHeaderCell<ItemType>({
       sortingStatus={sortingStatus}
       sortingDisabled={sortingDisabled}
       focusedComponent={focusedComponent}
+      stuck={stuck}
+      sticky={sticky}
       hidden={hidden}
+      stripedRows={stripedRows}
       colIndex={colIndex}
       columnId={columnId}
       stickyState={stickyState}
       tableRole={tableRole}
+      variant={variant}
       {...(sortingDisabled
         ? {}
         : getAnalyticsMetadataAttribute({

src/table/header-cell/th-element.tsx

@@ -7,26 +7,32 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
 
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
+import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
+import { TableProps } from '../interfaces';
 import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
 import { getTableColHeaderRoleProps, TableRole } from '../table-role';
 import { getStickyClassNames } from '../utils';
 import { SortingStatus } from './utils';
 
 import styles from './styles.css.js';
 
-interface TableThElementProps {
+export interface TableThElementProps {
   className?: string;
   style?: React.CSSProperties;
   sortingStatus?: SortingStatus;
   sortingDisabled?: boolean;
   focusedComponent?: null | string;
+  stuck?: boolean;
+  sticky?: boolean;
   hidden?: boolean;
+  stripedRows?: boolean;
   colIndex: number;
   columnId: PropertyKey;
   stickyState: StickyColumnsModel;
   cellRef?: React.RefCallback<HTMLElement> | null;
   tableRole: TableRole;
   children: React.ReactNode;
+  variant: TableProps.Variant;
 }
 
 export function TableThElement({
@@ -35,15 +41,21 @@ export function TableThElement({
   sortingStatus,
   sortingDisabled,
   focusedComponent,
+  stuck,
+  sticky,
   hidden,
+  stripedRows,
   colIndex,
   columnId,
   stickyState,
   cellRef,
   tableRole,
   children,
+  variant,
   ...props
 }: TableThElementProps) {
+  const isVisualRefresh = useVisualRefresh();
+
   const stickyStyles = useStickyCellStyles({
     stickyColumns: stickyState,
     columnId,
@@ -58,6 +70,12 @@ export function TableThElement({
     <th
       data-focus-id={`header-${String(columnId)}`}
       className={clsx(
+        styles['header-cell'],
+        styles[`header-cell-variant-${variant}`],
+        sticky && styles['header-cell-sticky'],
+        stuck && styles['header-cell-stuck'],
+        stripedRows && styles['has-striped-rows'],
+        isVisualRefresh && styles['is-visual-refresh'],
         className,
         {
           [styles['header-cell-fake-focus']]: focusedComponent === `header-${String(columnId)}`,

src/table/internal.tsx

@@ -32,15 +32,15 @@ import { SomeRequired } from '../internal/types';
 import InternalLiveRegion from '../live-region/internal';
 import { GeneratedAnalyticsMetadataTableComponent } from './analytics-metadata/interfaces';
 import { TableBodyCell } from './body-cell';
-import { TableTdElement } from './body-cell/td-element';
 import { checkColumnWidths } from './column-widths-utils';
 import { useExpandableTableProps } from './expandable-rows/expandable-rows-utils';
 import { TableForwardRefType, TableProps, TableRow } from './interfaces';
 import { NoDataCell } from './no-data-cell';
-import { ItemsLoader } from './progressive-loading/items-loader';
+import { TableLoaderCell } from './progressive-loading/loader-cell';
 import { useProgressiveLoadingProps } from './progressive-loading/progressive-loading-utils';
 import { ResizeTracker } from './resizer';
-import { focusMarkers, SelectionControl, useSelection, useSelectionFocusMove } from './selection';
+import { focusMarkers, useSelection, useSelectionFocusMove } from './selection';
+import { TableBodySelectionCell } from './selection/selection-cells';
 import { useStickyColumns } from './sticky-columns';
 import StickyHeader, { StickyHeaderRef } from './sticky-header';
 import { StickyScrollbar } from './sticky-scrollbar';
@@ -550,7 +550,6 @@ const InternalTable = React.forwardRef(
                           });
                           const getTableItemKey = (item: T) => getItemKey(trackBy, item, rowIndex);
                           const sharedCellProps = {
-                            isVisualRefresh,
                             isFirstRow,
                             isLastRow,
                             isSelected: hasSelection && isRowSelected(row),
@@ -584,21 +583,17 @@ const InternalTable = React.forwardRef(
                                 {...rowRoleProps}
                               >
                                 {getItemSelectionProps && (
-                                  <TableTdElement
+                                  <TableBodySelectionCell
                                     {...sharedCellProps}
-                                    className={styles['selection-control']}
-                                    wrapLines={false}
                                     columnId={selectionColumnId}
-                                    colIndex={0}
-                                  >
-                                    <SelectionControl
-                                      onFocusDown={moveFocusDown}
-                                      onFocusUp={moveFocusUp}
-                                      {...getItemSelectionProps(row.item)}
-                                      rowIndex={rowIndex}
-                                      itemKey={`${getTableItemKey(row.item)}`}
-                                    />
-                                  </TableTdElement>
+                                    selectionControlProps={{
+                                      ...getItemSelectionProps(row.item),
+                                      onFocusDown: moveFocusDown,
+                                      onFocusUp: moveFocusUp,
+                                      rowIndex,
+                                      itemKey: `${getTableItemKey(row.item)}`,
+                                    }}
+                                  />
                                 )}
 
                                 {visibleColumnDefinitions.map((column, colIndex) => {
@@ -667,37 +662,24 @@ const InternalTable = React.forwardRef(
                               {...rowRoleProps}
                             >
                               {getItemSelectionProps && (
-                                <TableTdElement
-                                  {...sharedCellProps}
-                                  className={styles['selection-control']}
-                                  wrapLines={false}
-                                  columnId={selectionColumnId}
-                                  colIndex={0}
-                                >
-                                  {null}
-                                </TableTdElement>
+                                <TableBodySelectionCell {...sharedCellProps} columnId={selectionColumnId} />
                               )}
                               {visibleColumnDefinitions.map((column, colIndex) => (
-                                <TableTdElement
+                                <TableLoaderCell
                                   key={getColumnKey(column, colIndex)}
                                   {...sharedCellProps}
                                   wrapLines={false}
                                   columnId={column.id ?? colIndex}
                                   colIndex={colIndex + colIndexOffset}
                                   isRowHeader={colIndex === 0}
                                   level={row.level}
-                                >
-                                  {colIndex === 0 ? (
-                                    <ItemsLoader
-                                      item={row.item}
-                                      loadingStatus={row.status}
-                                      renderLoaderPending={renderLoaderPending}
-                                      renderLoaderLoading={renderLoaderLoading}
-                                      renderLoaderError={renderLoaderError}
-                                      trackBy={trackBy}
-                                    />
-                                  ) : null}
-                                </TableTdElement>
+                                  item={row.item}
+                                  loadingStatus={row.status}
+                                  renderLoaderPending={renderLoaderPending}
+                                  renderLoaderLoading={renderLoaderLoading}
+                                  renderLoaderError={renderLoaderError}
+                                  trackBy={trackBy}
+                                />
                               ))}
                             </tr>
                           );

src/table/no-data-cell.tsx

@@ -10,7 +10,7 @@ import InternalStatusIndicator from '../status-indicator/internal';
 
 import styles from './styles.css.js';
 
-interface NoDataCellProps {
+export interface NoDataCellProps {
   totalColumnsCount: number;
   hasFooter: boolean;
   loading?: boolean;

src/table/progressive-loading/items-loader.tsx

@@ -10,7 +10,7 @@ import { applyTrackBy } from '../utils';
 
 import styles from './styles.css.js';
 
-interface ItemsLoaderProps<T> {
+export interface ItemsLoaderProps<T> {
   item: null | T;
   loadingStatus: TableProps.LoadingStatus;
   renderLoaderPending?: (detail: TableProps.RenderLoaderDetail<T>) => React.ReactNode;

src/table/progressive-loading/loader-cell.tsx

@@ -0,0 +1,34 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { TableTdElement, TableTdElementProps } from '../body-cell/td-element';
+import { ItemsLoader, ItemsLoaderProps } from './items-loader';
+
+export interface TableLoaderCellProps<ItemType> extends TableTdElementProps, ItemsLoaderProps<ItemType> {}
+
+export function TableLoaderCell<ItemType>({
+  item,
+  loadingStatus,
+  renderLoaderPending,
+  renderLoaderLoading,
+  renderLoaderError,
+  trackBy,
+  ...props
+}: TableLoaderCellProps<ItemType>) {
+  return (
+    <TableTdElement {...props}>
+      {props.isRowHeader ? (
+        <ItemsLoader
+          item={item}
+          loadingStatus={loadingStatus}
+          renderLoaderPending={renderLoaderPending}
+          renderLoaderLoading={renderLoaderLoading}
+          renderLoaderError={renderLoaderError}
+          trackBy={trackBy}
+        />
+      ) : null}
+    </TableTdElement>
+  );
+}