@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/DataTable/{components → ui/table}/RowComponent.tsx

@@ -1,22 +1,165 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { flexRender, type Row, type Cell } from '@tanstack/react-table';
+import { flexRender, type Row, type Cell, type CellContext } from '@tanstack/react-table';
 import { ChevronDown, ChevronRight } from 'lucide-react';
-import { Button } from '../../Button/Button';
-import { ActionButtons } from './ActionButtons';
+import { Button } from '../../../Button/Button';
+import { ActionButtons } from '../shared/ActionButtons';
 import { EditableRow } from './EditableRow';
-import { cn } from '../../../utils/core/cn';
-import { createLogger } from '../../../utils/core/logger';
-import { getTableCellClasses, getTableRowClasses } from '../styles';
+import { cn } from '../../../../utils/core/cn';
+import { createLogger } from '../../../../utils/core/logger';
+import { getTableCellClasses, getTableRowClasses } from '../../styles';
 import type {
   DataRecord,
   DataTableAction,
   DataTableColumn,
-  HierarchicalConfig,
+  DataTableRBACConfig,
+  DataTableRowPermissions,
+  HierarchicalConfigWithState,
   HierarchicalDataRow,
+  RowActionsProp,
   CellValue,
-} from '../types';
-import { calculateIndentation } from '../utils/hierarchicalUtils';
-import { getRowIdSafe } from '../utils/rowUtils';
+} from '../../types';
+import { calculateIndentation } from '../../utils/hierarchicalUtils';
+import { getRowIdSafe } from '../../utils/rowUtils';
+
+/** Attaches Enter (save) and Escape (cancel) key handlers when editing; only when focus is in INPUT/TEXTAREA. */
+function useRowEditingKeys(params: {
+  rowRef: React.RefObject<HTMLTableRowElement | null>;
+  isEditing: boolean | undefined;
+  onSaveEditing: (() => void) | undefined;
+  onCancelEditing: (() => void) | undefined;
+}): void {
+  const { rowRef, isEditing, onSaveEditing, onCancelEditing } = params;
+  useEffect(() => {
+    if (!isEditing) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+        if (event.key === 'Enter' && !event.shiftKey && target.tagName === 'INPUT') {
+          event.preventDefault();
+          onSaveEditing?.();
+        } else if (event.key === 'Escape') {
+          event.preventDefault();
+          onCancelEditing?.();
+        }
+      }
+    };
+    const currentRow = rowRef.current;
+    if (currentRow) {
+      currentRow.addEventListener('keydown', handleKeyDown);
+      return () => currentRow.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isEditing, onSaveEditing, onCancelEditing, rowRef]);
+}
+
+/** Renders a grouped row: expand button, group value, and aggregate cells. */
+function GroupedRow({
+  row,
+  visibleCells,
+  grouping,
+  getTableCellClasses: getCellClasses,
+  logger,
+  style,
+}: {
+  row: Row<DataRecord>;
+  visibleCells: Cell<DataRecord, unknown>[];
+  grouping: string[];
+  getTableCellClasses: typeof getTableCellClasses;
+  logger: ReturnType<typeof createLogger>;
+  style?: React.CSSProperties;
+}) {
+  const groupValue = row.getValue(grouping[0]);
+  const subRowsCount = row.subRows?.length || 0;
+  const isExpanded = row.getIsExpanded();
+  const childRows: DataRecord[] = row.subRows?.map((subRow: Row<DataRecord>) => subRow.original) || [];
+
+  return (
+    <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
+      {visibleCells.map((cell: Cell<DataRecord, unknown>, cellIndex: number) => {
+        const columnDef = cell.column.columnDef as DataTableColumn<DataRecord>;
+        const isGroupingColumn = cellIndex === 0 || grouping.includes(cell.column.id || '');
+
+        if (isGroupingColumn && cellIndex === 0) {
+          return (
+            <td
+              key={cell.id}
+              className={getCellClasses({
+                isCompact: true,
+                className: 'px-3 py-2 flex items-center font-medium',
+              })}
+            >
+              <Button variant="ghost" size="sm" onClick={() => row.toggleExpanded()} className="p-0 h-auto mr-2">
+                {isExpanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
+              </Button>
+              <span>
+                {String(groupValue)} ({subRowsCount} items)
+              </span>
+            </td>
+          );
+        }
+
+        if (columnDef.aggregateFn && childRows.length > 0) {
+          try {
+            const aggregatedValue = columnDef.aggregateFn(childRows, columnDef);
+            let cellContent: React.ReactNode;
+            if (columnDef.aggregateCell) {
+              cellContent = columnDef.aggregateCell(aggregatedValue, childRows, columnDef);
+            } else if (columnDef.cell) {
+              const mockCell = {
+                ...cell,
+                getValue: () => aggregatedValue,
+                renderValue: () => aggregatedValue,
+              } as unknown as Cell<DataRecord, unknown>;
+              const cellContext = {
+                ...mockCell,
+                row: row,
+                column: cell.column,
+                cell: mockCell,
+                getValue: () => aggregatedValue,
+                renderValue: () => aggregatedValue,
+              };
+              // Aggregated cell context: mock lacks table; assert to CellContext for flexRender (Standard 4: avoid any)
+              cellContent = flexRender(columnDef.cell, cellContext as unknown as CellContext<DataRecord, unknown>);
+            } else {
+              cellContent = aggregatedValue != null ? String(aggregatedValue) : '';
+            }
+            return (
+              <td
+                key={cell.id}
+                className={getCellClasses({
+                  isCompact: true,
+                  className: `px-3 py-2 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`,
+                })}
+              >
+                {cellContent}
+              </td>
+            );
+          } catch (error) {
+            logger.warn('Error in aggregation function:', error);
+            return (
+              <td
+                key={cell.id}
+                className={getCellClasses({
+                  isCompact: true,
+                  className: 'px-3 py-2',
+                })}
+              />
+            );
+          }
+        }
+
+        return (
+          <td
+            key={cell.id}
+            className={getCellClasses({
+              isCompact: true,
+              className: 'px-3 py-2',
+            })}
+          />
+        );
+      })}
+    </tr>
+  );
+}
 
 /**
  * Props for the Row component.
@@ -34,47 +177,10 @@ export interface RowProps {
   grouping: string[];
   editingRowId?: string | null;
   rowSelection?: Record<string, boolean>;
-  hierarchical?:
-    | (HierarchicalConfig & {
-        state?: {
-          isExpanded: (rowId: string) => boolean;
-          hasChildren: (rowId: string) => boolean;
-          getChildrenCount: (rowId: string) => number;
-          toggleRow: (rowId: string) => void;
-        };
-      })
-    | undefined;
-  actions?: DataTableAction<DataRecord>[] | Array<{
-    label: string;
-    onClick: (row: DataRecord) => void;
-    icon?: React.ComponentType<{ className?: string }> | React.ReactNode;
-    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
-    disabled?: boolean | ((row?: DataRecord) => boolean);
-    visible?: boolean | ((row?: DataRecord) => boolean);
-    testId?: string;
-    showInEditMode?: boolean;
-    hideInViewMode?: boolean;
-    showInViewMode?: boolean;
-    hidden?: boolean;
-    showForParent?: boolean;
-    showForChild?: boolean;
-    parentIcon?: React.ComponentType<{ className?: string }> | React.ReactNode;
-    childIcon?: React.ComponentType<{ className?: string }> | React.ReactNode;
-    parentLabel?: string;
-    childLabel?: string;
-  }>;
-  rbac?: {
-    pageId?: string;
-    pageName?: string;
-  };
-  permissions?: {
-    canRead: { can: boolean; isLoading: boolean };
-    canCreate: { can: boolean; isLoading: boolean };
-    canUpdate: { can: boolean; isLoading: boolean };
-    canDelete: { can: boolean; isLoading: boolean };
-    canExport: { can: boolean; isLoading: boolean };
-    canImport: { can: boolean; isLoading: boolean };
-  };
+  hierarchical?: HierarchicalConfigWithState;
+  actions?: RowActionsProp;
+  rbac?: DataTableRBACConfig;
+  permissions?: DataTableRowPermissions;
 }
 
 const RowComponent = ({
@@ -114,30 +220,12 @@ const RowComponent = ({
       }
     }, [isEditing]);
 
-    useEffect(() => {
-      if (!isEditing) return;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        const target = event.target as HTMLElement;
-        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
-          if (event.key === 'Enter' && !event.shiftKey && target.tagName === 'INPUT') {
-            event.preventDefault();
-            onSaveEditing?.();
-          } else if (event.key === 'Escape') {
-            event.preventDefault();
-            onCancelEditing?.();
-          }
-        }
-      };
-
-      const currentRow = rowRef.current;
-      if (currentRow) {
-        currentRow.addEventListener('keydown', handleKeyDown);
-        return () => {
-          currentRow.removeEventListener('keydown', handleKeyDown);
-        };
-      }
-    }, [isEditing, onSaveEditing, onCancelEditing]);
+    useRowEditingKeys({
+      rowRef,
+      isEditing,
+      onSaveEditing,
+      onCancelEditing,
+    });
 
     // CRITICAL: All hooks must be called before any early returns to avoid React hooks violations
     // Move useMemo hooks here so they're always called, regardless of early returns below
@@ -157,104 +245,15 @@ const RowComponent = ({
     }, [isHierarchical, isParent, isSelected, hierarchical]);
 
     if (row.getIsGrouped && row.getIsGrouped()) {
-      const groupValue = row.getValue(grouping[0]);
-      const subRowsCount = row.subRows?.length || 0;
-      const isExpanded = row.getIsExpanded();
-
-      const childRows: DataRecord[] = row.subRows?.map((subRow: Row<DataRecord>) => subRow.original) || [];
-
       return (
-        <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
-          {visibleCells.map((cell: Cell<DataRecord, unknown>, cellIndex: number) => {
-            const columnDef = cell.column.columnDef as DataTableColumn<DataRecord>;
-            const isGroupingColumn = cellIndex === 0 || grouping.includes(cell.column.id || '');
-
-            if (isGroupingColumn && cellIndex === 0) {
-              return (
-                <td
-                  key={cell.id}
-                  className={getTableCellClasses({
-                    isCompact: true,
-                    className: 'px-3 py-2 flex items-center font-medium',
-                  })}
-                >
-                  <Button variant="ghost" size="sm" onClick={() => row.toggleExpanded()} className="p-0 h-auto mr-2">
-                    {isExpanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
-                  </Button>
-                  <span className="text-sm">
-                    {String(groupValue)} ({subRowsCount} items)
-                  </span>
-                </td>
-              );
-            }
-
-            if (columnDef.aggregateFn && childRows.length > 0) {
-              try {
-                const aggregatedValue = columnDef.aggregateFn(childRows, columnDef);
-
-                let cellContent: React.ReactNode;
-                if (columnDef.aggregateCell) {
-                  cellContent = columnDef.aggregateCell(aggregatedValue, childRows, columnDef);
-                } else if (columnDef.cell) {
-                  // Create a mock cell with aggregated value for rendering
-                  // Type assertion needed because aggregatedValue type may not match cell's expected value type
-                  const mockCell = {
-                    ...cell,
-                    getValue: () => aggregatedValue,
-                    renderValue: () => aggregatedValue,
-                  } as unknown as Cell<DataRecord, unknown>;
-                  // Create cell context for flexRender - need to match CellContext type
-                  // Type assertion needed because aggregated value may not match expected cell value type
-                  const cellContext = {
-                    ...mockCell,
-                    row: row,
-                    column: cell.column,
-                    cell: mockCell,
-                    getValue: () => aggregatedValue,
-                    renderValue: () => aggregatedValue,
-                  };
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type assertion needed for aggregated values
-                  cellContent = flexRender(columnDef.cell, cellContext as any);
-                } else {
-                  cellContent = aggregatedValue != null ? String(aggregatedValue) : '';
-                }
-
-                return (
-                  <td
-                    key={cell.id}
-                    className={getTableCellClasses({
-                      isCompact: true,
-                      className: `px-3 py-2 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`,
-                    })}
-                  >
-                    {cellContent}
-                  </td>
-                );
-              } catch (error) {
-                logger.warn('Error in aggregation function:', error);
-                return (
-                  <td
-                    key={cell.id}
-                    className={getTableCellClasses({
-                      isCompact: true,
-                      className: 'px-3 py-2',
-                    })}
-                  />
-                );
-              }
-            }
-
-            return (
-              <td
-                key={cell.id}
-                className={getTableCellClasses({
-                  isCompact: true,
-                  className: 'px-3 py-2',
-                })}
-              />
-            );
-          })}
-        </tr>
+        <GroupedRow
+          row={row}
+          visibleCells={visibleCells}
+          grouping={grouping}
+          getTableCellClasses={getTableCellClasses}
+          logger={logger}
+          style={style}
+        />
       );
     }
 
@@ -279,10 +278,13 @@ const RowComponent = ({
         ref={rowRef}
         key={row.id}
         role="row"
-        style={{
-          ...style,
-          ...(isChild && indentation > 0 ? { paddingLeft: `${indentation}px` } : {}),
-        }}
+        style={
+          // Standard 5 exception: virtualization and hierarchical indentation require dynamic inline style
+          {
+            ...style,
+            ...(isChild && indentation > 0 ? { paddingLeft: `${indentation}px` } : {}),
+          }
+        }
         className={rowClassName}
         aria-selected={isSelected ? 'true' : 'false'}
       >
@@ -292,6 +294,8 @@ const RowComponent = ({
           const isExpanded = shouldShowExpansionButton ? hierarchical?.state?.isExpanded(rowId) : false;
           const hasChildren = shouldShowExpansionButton ? hierarchical?.state?.hasChildren(rowId) : false;
 
+          const isSystemColumn = cell.column.id === 'select' || cell.column.id === 'actions';
+          
           return (
             <td
               key={cell.id}
@@ -299,7 +303,9 @@ const RowComponent = ({
                 isCompact: true,
                 className: `px-3 py-2 ${
                   cell.column.id === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words'
-                } ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`,
+                } ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''} ${
+                  isSystemColumn ? 'print:hidden' : ''
+                }`,
               })}
             >
               {shouldShowExpansionButton && hasChildren && (