From 6365afaec238a79410c7d1cb89e423faceff20dc Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Fri, 15 Nov 2024 14:08:57 +0100
Subject: [PATCH] using actual table for demo

---
 pages/table/cell-permutations.page.tsx   | 386 ++++++-----------------
 src/table/__tests__/header-cell.test.tsx |   1 +
 src/table/body-cell/index.tsx            |   5 +-
 src/table/no-data-cell.tsx               |   2 +-
 4 files changed, 101 insertions(+), 293 deletions(-)

diff --git a/pages/table/cell-permutations.page.tsx b/pages/table/cell-permutations.page.tsx
index 93ecf0b0f3..560eed95ed 100644
--- a/pages/table/cell-permutations.page.tsx
+++ b/pages/table/cell-permutations.page.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { range } from 'lodash';
 
 import {
@@ -15,15 +15,9 @@ import {
   Slider,
   SpaceBetween,
   StatusIndicator,
+  Table,
   TableProps,
 } from '~components';
-import { useMergeRefs } from '~components/internal/hooks/use-merge-refs';
-import { TableBodyCell, TableBodyCellProps } from '~components/table/body-cell';
-import { TableHeaderCell, TableHeaderCellProps } from '~components/table/header-cell';
-import { NoDataCell } from '~components/table/no-data-cell';
-import { TableLoaderCell, TableLoaderCellProps } from '~components/table/progressive-loading/loader-cell';
-import { TableBodySelectionCell, TableHeaderSelectionCell } from '~components/table/selection/selection-cell';
-import { StickyColumnsModel, useStickyColumns } from '~components/table/sticky-columns';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import ScreenshotArea from '../utils/screenshot-area';
@@ -34,7 +28,6 @@ type PageContext = React.Context<
     verticalAlignTop?: boolean;
     sortingDisabled?: boolean;
     resizableColumns?: boolean;
-    resizableColumnWidth?: string;
     isExpandable?: boolean;
     isExpanded?: boolean;
     isEditable?: boolean;
@@ -154,15 +147,6 @@ export default function InlineEditorPermutations() {
             </SpaceBetween>
 
             <SpaceBetween size="m" direction="horizontal" alignItems="center">
-              <FormField label="Resizable column width">
-                <Slider
-                  value={settings.resizableColumnWidth}
-                  onChange={event => setUrlParams({ resizableColumnWidth: event.detail.value.toString() })}
-                  min={50}
-                  max={300}
-                />
-              </FormField>
-
               <FormField label="Sticky columns first">
                 <Slider
                   value={settings.stickyColumnsFirst}
@@ -184,292 +168,120 @@ export default function InlineEditorPermutations() {
           </SpaceBetween>
         </ExpandableSection>
 
-        <Container variant="stacked" header={<Header variant="h2">Standard cells</Header>}>
-          <StandardCellsTable />
+        <Container variant="stacked" header={<Header variant="h2">Actual table demo</Header>}>
+          <TableCellsDemo />
         </Container>
       </ScreenshotArea>
     </Box>
   );
 }
 
-function StandardCellsTable() {
+function TableCellsDemo() {
   const { settings } = usePageSettings();
-  const containerRefObject = useRef<HTMLDivElement>(null);
-  const containerRef = useMergeRefs(containerRefObject, settings.stickyState.refs.wrapper);
-  const tableRefObject = useRef<HTMLTableElement>(null);
-  const tableRef = useMergeRefs(tableRefObject, settings.stickyState.refs.table);
-  return (
-    <div ref={containerRef} style={{ overflowX: 'auto', ...settings.stickyState.style.wrapper }}>
-      <table ref={tableRef} style={{ tableLayout: 'fixed', borderSpacing: 0, width: '100%' }}>
-        <thead>
-          <TextHeaders {...settings} />
-        </thead>
-        <tbody>
-          {settings.tableEmpty || settings.tableLoading ? (
-            <tr>
-              <NoDataCell
-                totalColumnsCount={columns.length}
-                hasFooter={settings.hasFooter}
-                loading={settings.tableLoading}
-                loadingText="Loading"
-                empty="Empty"
-                containerRef={containerRefObject}
-                tableRef={tableRefObject}
-              />
-            </tr>
-          ) : (
-            <>
-              <TextColumns {...settings} level={1} isEvenRow={false} isFirstRow={true} />
-              <TextColumns {...settings} level={2} isEvenRow={true} />
-              <TextColumns {...settings} level={3} isEvenRow={false} isNextSelected={true} />
-              <TextColumns {...settings} level={4} isEvenRow={true} isSelected={true} />
-              <TextColumns {...settings} level={5} isEvenRow={false} isPrevSelected={true} isNextSelected={true} />
-              <TextColumns {...settings} level={1} isEvenRow={true} isSelected={true} isNextSelected={true} />
-              <TextColumns {...settings} level={2} isEvenRow={false} isSelected={true} isPrevSelected={true} />
-              <TextColumns {...settings} level={3} isEvenRow={true} isPrevSelected={true} />
-              <LoaderColumns {...settings} level={3} isEvenRow={false} loadingStatus="pending" />
-              <LoaderColumns {...settings} level={2} isEvenRow={false} loadingStatus="loading" />
-              <LoaderColumns {...settings} level={1} isEvenRow={false} isLastRow={true} loadingStatus="error" />
-            </>
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-}
+  const [editedValues, setEditedValues] = useState<Record<string, string>>({});
 
-function TextHeaders(
-  props: Partial<TableHeaderCellProps<string>> & {
-    stickyState: StickyColumnsModel;
-    resizableColumnWidth?: number;
-    isExpandable?: boolean;
-    hasSelection?: boolean;
-    multiSelection?: boolean;
-  }
-) {
-  return (
-    <tr>
-      {props.hasSelection && (
-        <TableHeaderSelectionCell
-          {...defaultCellProps()}
-          {...props}
-          onFocusMove={() => {}}
-          columnId="selection"
-          getSelectAllProps={
-            props.multiSelection
-              ? () => ({
-                  name: 'select-all',
-                  disabled: false,
-                  selectionType: 'multi',
-                  indeterminate: true,
-                  checked: false,
-                  onChange: () => {},
-                })
-              : undefined
-          }
-        />
-      )}
-      {columns.map(index => (
-        <PlaygroundHeaderCell
-          key={index}
-          {...props}
-          colIndex={index}
-          isExpandable={index === 1 && props.isExpandable}
-          sortable={[2, 3, 4, 5].includes(index)}
-          activeSorting={[4, 5].includes(index)}
-          sortingDescending={[3, 5].includes(index)}
-        >
-          {`Header cell content ${index}${index === 8 ? ' with longer text' : ''}`}
-        </PlaygroundHeaderCell>
-      ))}
-    </tr>
-  );
-}
+  const items = [0, 1, 2, 3, 4, 5, 6, 7];
+  const itemLevels = [1, 2, 3, 4, 5, 1, 2, 3];
+  const itemChildren: Record<number, number[]> = { 0: [1], 1: [2], 2: [3], 3: [4], 5: [6], 6: [7] };
+  const itemLoading = new Map<null | number, TableProps.LoadingStatus>([
+    [3, 'pending'],
+    [6, 'error'],
+    [null, 'loading'],
+  ]);
+  const selectedItems = [3, 5, 6];
 
-function TextColumns(
-  props: Partial<TableBodyCellProps<string>> & {
-    level: number;
-    stickyState: StickyColumnsModel;
-    isExpandable?: boolean;
-    isExpanded?: boolean;
-    multiSelection?: boolean;
-  }
-) {
-  return (
-    <tr>
-      {props.hasSelection && (
-        <TableBodySelectionCell
-          {...defaultCellProps()}
-          {...props}
-          columnId="selection"
-          isExpandable={false}
-          selectionControlProps={{
-            name: 'select-one',
-            disabled: false,
-            selectionType: props.multiSelection ? 'multi' : 'single',
-            checked: !!props.isSelected,
-            onChange: () => {},
-          }}
-        />
-      )}
-      {columns.map(index => (
-        <PlaygroundBodyCell
-          key={index}
-          {...props}
-          colIndex={index}
-          level={index === 1 && props.isExpandable ? props.level : 0}
-          isExpandable={index === 1 && props.isExpandable}
-          isExpanded={index === 1 && props.isExpanded}
-        >
-          {`Body cell content ${index}${index === 1 ? ` (L=${props.level})` : ''}${index === 8 ? ' with longer text' : ''}`}
-        </PlaygroundBodyCell>
-      ))}
-    </tr>
-  );
-}
+  const columnDefinitions: TableProps.ColumnDefinition<number>[] = columns.map(index => {
+    const columnId = index.toString();
+    const cellContent = (item: number) =>
+      editedValues[`${columnId}:${item}`] ??
+      `Body cell content ${item}:${index}${index === 1 ? ` (L=${itemLevels[item]})` : ''}${index === 8 ? ' with longer text' : ''}`;
+    return {
+      id: columnId,
+      header: `Header cell content ${index}${index === 8 ? ' with longer text' : ''}`,
+      sortingField: index === 2 ? 'field-1' : index === 3 ? 'field-2' : undefined,
+      activeSorting: index === 3,
+      cell: cellContent,
+      verticalAlign: settings.verticalAlign,
+      editConfig: settings.isEditable
+        ? {
+            ariaLabel: 'Edit dialog aria label',
+            editIconAriaLabel: 'Edit icon label',
+            errorIconAriaLabel: 'Edit error icon label',
+            validation(_item, value = '') {
+              if (value.trim() && value.toLowerCase().includes('content')) {
+                return 'Must not include "content"';
+              }
+            },
+            editingCell(item, { currentValue, setValue }: TableProps.CellContext<string>) {
+              return (
+                <Input
+                  autoFocus={true}
+                  value={currentValue ?? cellContent(item)}
+                  onChange={event => setValue(event.detail.value)}
+                />
+              );
+            },
+          }
+        : undefined,
+    };
+  });
 
-function LoaderColumns(
-  props: Partial<TableLoaderCellProps<string>> & {
-    level: number;
-    stickyState: StickyColumnsModel;
-    loadingStatus: TableProps.LoadingStatus;
+  let expandableRows: undefined | TableProps.ExpandableRows<number> = undefined;
+  if (settings.isExpandable) {
+    expandableRows = {
+      getItemChildren: item => itemChildren[item] ?? [],
+      isItemExpandable: item => !!itemChildren[item],
+      expandedItems: settings.isExpanded ? items : [],
+      onExpandableItemToggle: () => {},
+    };
   }
-) {
-  return (
-    <tr>
-      {props.hasSelection && (
-        <TableBodySelectionCell {...defaultCellProps()} {...props} columnId="selection" isExpandable={false} />
-      )}
-      {columns.map(index => (
-        <TableLoaderCell
-          {...defaultCellProps()}
-          {...props}
-          key={index}
-          colIndex={index}
-          columnId={index.toString()}
-          level={index === 1 && props.isExpandable ? props.level - 1 : 0}
-          isRowHeader={index === 1}
-          isExpandable={false}
-          isExpanded={false}
-          item={''}
-          renderLoaderPending={() => <Button>Load more</Button>}
-          renderLoaderLoading={() => <StatusIndicator type="loading">Loading more</StatusIndicator>}
-          renderLoaderError={() => <StatusIndicator type="error">Error when loading more</StatusIndicator>}
-        />
-      ))}
-    </tr>
-  );
-}
 
-function PlaygroundHeaderCell(
-  props: Partial<TableHeaderCellProps<string>> & {
-    children: React.ReactNode;
-    colIndex: number;
-    resizableColumnWidth?: number;
-    stickyState: StickyColumnsModel;
-    sortable?: boolean;
-    activeSorting?: boolean;
+  let selectionType: undefined | TableProps.SelectionType = undefined;
+  if (settings.hasSelection) {
+    selectionType = settings.multiSelection ? 'multi' : 'single';
   }
-) {
-  const column: TableProps.ColumnDefinition<string> = {
-    id: props.colIndex.toString(),
-    header: props.children,
-    cell: () => '',
-    sortingField: props.sortable ? 'field' : undefined,
-  };
-  return (
-    <TableHeaderCell
-      style={{ width: props.resizableColumns ? props.resizableColumnWidth : undefined }}
-      tabIndex={-1}
-      column={column}
-      activeSortingColumn={props.activeSorting ? column : undefined}
-      columnId={props.colIndex.toString()}
-      hidden={false}
-      {...defaultCellProps()}
-      onResizeFinish={() => {}}
-      updateColumn={() => {}}
-      onClick={() => {}}
-      cellRef={() => {}}
-      tableRole="grid"
-      {...props}
-    />
-  );
-}
 
-function PlaygroundBodyCell(
-  props: Partial<TableBodyCellProps<string>> & {
-    children: React.ReactNode;
-    stickyState: StickyColumnsModel;
-    colIndex: number;
-    isEditable?: boolean;
-  }
-) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [successfulEdit, setSuccessfulEdit] = useState(false);
-  const [editedValue, setEditedValue] = useState('');
   return (
-    <TableBodyCell
+    <Table
       ariaLabels={{
-        activateEditLabel: column => `Edit ${column.header}`,
-        cancelEditLabel: column => `Cancel editing ${column.header}`,
-        submitEditLabel: column => `Submit edit ${column.header}`,
-        successfulEditLabel: () => 'Edit successful',
-      }}
-      column={{
-        id: props.colIndex.toString(),
-        header: '',
-        cell: () => editedValue || props.children,
-        editConfig: {
-          ariaLabel: 'Edit dialog aria label',
-          editIconAriaLabel: 'Edit icon label',
-          errorIconAriaLabel: 'Edit error icon label',
-          validation(_item, value = '') {
-            if (value.trim() && value.toLowerCase().includes('content')) {
-              return 'Must not include "content"';
-            }
-          },
-          editingCell(_item, { currentValue, setValue }: TableProps.CellContext<string>) {
-            return (
-              <Input
-                autoFocus={true}
-                value={currentValue ?? (typeof props.children === 'string' ? props.children : '')}
-                onChange={event => setValue(event.detail.value)}
-              />
-            );
-          },
-        },
+        selectionGroupLabel: 'selectionGroupLabel',
+        activateEditLabel: () => 'activateEditLabel',
+        cancelEditLabel: () => 'cancelEditLabel',
+        submitEditLabel: () => 'submitEditLabel',
+        allItemsSelectionLabel: () => 'allItemsSelectionLabel',
+        itemSelectionLabel: () => 'itemSelectionLabel',
+        tableLabel: 'tableLabel',
+        expandButtonLabel: () => 'expand row',
+        collapseButtonLabel: () => 'collapse row',
       }}
-      isEditing={isEditing}
-      successfulEdit={successfulEdit}
-      onEditStart={() => setIsEditing(true)}
-      onEditEnd={() => {
-        setIsEditing(false);
-        setSuccessfulEdit(true);
-      }}
-      submitEdit={(_item, _column, newValue) => new Promise(resolve => resolve(setEditedValue(newValue as any)))}
-      columnId={props.colIndex.toString()}
-      item={''}
-      {...defaultCellProps()}
-      {...props}
+      columnDefinitions={columnDefinitions}
+      items={settings.tableEmpty ? [] : settings.isExpandable ? [0, 5] : items}
+      wrapLines={settings.wrapLines}
+      sortingDisabled={settings.sortingDisabled}
+      sortingColumn={{ sortingField: 'field-2' }}
+      resizableColumns={settings.resizableColumns}
+      stripedRows={settings.stripedRows}
+      footer={settings.hasFooter ? <Box>Table footer</Box> : null}
+      stickyColumns={{ first: settings.stickyColumnsFirst, last: settings.stickyColumnsLast }}
+      selectionType={selectionType}
+      selectedItems={selectedItems}
+      empty="Empty"
+      loading={settings.tableLoading}
+      loadingText="Loading"
+      submitEdit={(item, column, newValue) =>
+        new Promise(resolve =>
+          resolve(setEditedValues(prev => ({ ...prev, [`${column.id}:${item}`]: newValue as string })))
+        )
+      }
+      expandableRows={expandableRows}
+      getLoadingStatus={item => itemLoading.get(item) ?? 'finished'}
+      renderLoaderPending={() => <Button>Load more</Button>}
+      renderLoaderLoading={() => <StatusIndicator type="loading">Loading more</StatusIndicator>}
+      renderLoaderError={() => <StatusIndicator type="error">Error when loading more</StatusIndicator>}
     />
   );
 }
 
-function defaultCellProps() {
-  return {
-    isFirstRow: false,
-    isLastRow: false,
-    isSelected: false,
-    isNextSelected: false,
-    isPrevSelected: false,
-    wrapLines: false,
-    isEditable: false,
-    resizableColumns: false,
-    tableRole: 'grid' as const,
-    variant: 'container' as const,
-  };
-}
-
 function usePageSettings() {
   const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
   const settings = {
@@ -478,7 +290,6 @@ function usePageSettings() {
     isEditable: urlParams.isEditable ?? false,
     sortingDisabled: urlParams.sortingDisabled ?? false,
     resizableColumns: urlParams.resizableColumns ?? true,
-    resizableColumnWidth: parseInt(urlParams.resizableColumnWidth || '') || 150,
     wrapLines: urlParams.wrapLines ?? false,
     stripedRows: urlParams.stripedRows ?? false,
     hasSelection: urlParams.hasSelection ?? true,
@@ -490,10 +301,5 @@ function usePageSettings() {
     tableEmpty: urlParams.tableEmpty ?? false,
     tableLoading: urlParams.tableLoading ?? false,
   };
-  const stickyState = useStickyColumns({
-    visibleColumns: columns.map(index => index.toString()),
-    stickyColumnsFirst: settings.stickyColumnsFirst,
-    stickyColumnsLast: settings.stickyColumnsLast,
-  });
-  return { settings: { ...settings, stickyState }, setUrlParams };
+  return { settings, setUrlParams };
 }
diff --git a/src/table/__tests__/header-cell.test.tsx b/src/table/__tests__/header-cell.test.tsx
index 0d3ad4aef4..8056b17384 100644
--- a/src/table/__tests__/header-cell.test.tsx
+++ b/src/table/__tests__/header-cell.test.tsx
@@ -72,6 +72,7 @@ function TestComponent(props: Partial<TableHeaderCellProps<typeof testItem>>) {
       columnId="id"
       cellRef={() => {}}
       tableRole={tableRole}
+      variant="container"
       {...props}
     />
   );
diff --git a/src/table/body-cell/index.tsx b/src/table/body-cell/index.tsx
index 1aae5b3506..d27f2930cd 100644
--- a/src/table/body-cell/index.tsx
+++ b/src/table/body-cell/index.tsx
@@ -156,14 +156,15 @@ 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) {
+  if (editDisabledReason && !isExpandableColumnCell) {
     return <DisabledInlineEditor editDisabledReason={editDisabledReason} {...rest} />;
   }
-  if (isEditable || rest.isEditing) {
+  if ((isEditable || rest.isEditing) && !isExpandableColumnCell) {
     return <TableCellEditable {...rest} />;
   }
 
diff --git a/src/table/no-data-cell.tsx b/src/table/no-data-cell.tsx
index 4ef1707902..bc896d5f37 100644
--- a/src/table/no-data-cell.tsx
+++ b/src/table/no-data-cell.tsx
@@ -10,7 +10,7 @@ import InternalStatusIndicator from '../status-indicator/internal';
 
 import styles from './styles.css.js';
 
-export interface NoDataCellProps {
+interface NoDataCellProps {
   totalColumnsCount: number;
   hasFooter: boolean;
   loading?: boolean;