@jmruthers/pace-core 0.5.74 → 0.5.76

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -9,8 +9,8 @@
  * while maintaining all features consistently.
  */
 
-import React, { useLayoutEffect, useState, useRef, useMemo } from 'react';
-import { type Table, flexRender } from '@tanstack/react-table';
+import React, { useLayoutEffect, useState, useRef, useMemo, useEffect } from 'react';
+import { type Table, flexRender, type Column, type Row } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 // Removed Table component imports - using native HTML elements
 import { Button } from '../../Button/Button';
@@ -18,12 +18,13 @@ import { ChevronUp, ChevronDown, ChevronRight } from 'lucide-react';
 import { EmptyState } from './EmptyState';
 import { FilterRow } from './FilterRow';
 import { ActionButtons } from './ActionButtons';
-import { DraggableColumnHeader } from './DraggableColumnHeader';
+import { EditableRow } from './EditableRow';
 import { getTableCellClasses, getTableHeadClasses, getTableRowClasses } from '../styles';
 import { Input } from '../../Input/Input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
 import type { AggregateConfig, HierarchicalConfig, HierarchicalDataRow } from '../types';
 import { calculateIndentation } from '../utils/hierarchicalUtils';
+import { getRowIdSafe } from '../utils/rowUtils';
 
 // Performance thresholds
 const VIRTUALIZATION_THRESHOLD = 1000;
@@ -80,16 +81,6 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
   enableFiltering?: boolean;
   /** Whether the filter row should be visible */
   showFilterRow?: boolean;
-  /** Whether column reordering is enabled */
-  enableColumnReordering?: boolean;
-  /** Callback when column order changes */
-  onColumnOrderChange?: (columnOrder: string[]) => void;
-  /** Callback when a column is dropped on another column */
-  onColumnDrop?: (draggedColumnId: string, targetColumnId: string) => void;
-  /** Saved column order from persistence */
-  savedColumnOrder?: string[];
-  /** Whether persistence is enabled */
-  enablePersistence?: boolean;
   /** Table ID for persistence */
   tableId?: string;
   /** Data length for virtualization decision */
@@ -147,19 +138,20 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
 }
 
 // Helper function to render the appropriate input type based on column configuration
-const renderEditField = (
-  column: any,
-  value: any,
-  onChange: (value: any) => void,
-  editingData: Record<string, any> = {},
+const renderEditField = <TData extends Record<string, any>>(
+  column: Column<TData, unknown>,
+  value: unknown,
+  onChange: (value: unknown) => void,
+  editingData: Record<string, unknown> = {},
   placeholder?: string
 ) => {
-  const columnDef = column.columnDef;
+  // Cast to DataTableColumn to access extended properties
+  const columnDef = column.columnDef as any;
   
   // Check if column is editable (default: true)
   if (columnDef.editable === false) {
     // Return the original value as text if column is not editable
-    return <span className="text-sm text-gray-600">{value || ''}</span>;
+    return <span className="text-sm text-gray-600">{String(value || '')}</span>;
   }
   
   // Check for custom field type
@@ -170,7 +162,7 @@ const renderEditField = (
     
     return (
       <Select
-        value={currentValue}
+        value={String(currentValue)}
         onValueChange={(newValue) => onChange({ [accessorKey]: newValue })}
       >
         <SelectTrigger className="h-8">
@@ -178,7 +170,7 @@ const renderEditField = (
         </SelectTrigger>
         <SelectContent>
           {columnDef.fieldOptions.map((option: any) => (
-            <SelectItem key={option.value} value={option.value}>
+            <SelectItem key={option.value} value={String(option.value)}>
               {option.label}
             </SelectItem>
           ))}
@@ -192,7 +184,7 @@ const renderEditField = (
     return (
       <Input
         type="number"
-        value={value || ''}
+        value={String(value || '')}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
         className="h-8"
@@ -205,7 +197,7 @@ const renderEditField = (
     return (
       <Input
         type="date"
-        value={value || ''}
+        value={String(value || '')}
         onChange={(e) => onChange(e.target.value)}
         className="h-8"
       />
@@ -216,7 +208,7 @@ const renderEditField = (
   return (
     <Input
       type="text"
-      value={value || ''}
+      value={String(value || '')}
       onChange={(e) => onChange(e.target.value)}
       placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
       className="h-8"
@@ -224,23 +216,8 @@ const renderEditField = (
   );
 };
 
-// Row component without memoization to ensure column visibility works
-const MemoizedRow = ({ 
-  row, 
-  style, 
-  isEditing, 
-  editingData, 
-  onEditingDataChange,
-  onSaveEditing,
-  onCancelEditing,
-  getRowId,
-  grouping,
-  editingRowId,
-  hierarchical,
-  actions,
-  rbac,
-  permissions
-}: { 
+// Row component props interface
+interface RowProps { 
   row: any; 
   style?: React.CSSProperties;
   isEditing?: boolean;
@@ -290,8 +267,29 @@ const MemoizedRow = ({
     canExport: { can: boolean; isLoading: boolean };
     canImport: { can: boolean; isLoading: boolean };
   };
-}) => {
-  const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
+}
+
+// Row component with proper memoization
+const RowComponent = React.memo(({ 
+  row, 
+  style, 
+  isEditing, 
+  editingData, 
+  onEditingDataChange,
+  onSaveEditing,
+  onCancelEditing,
+  getRowId,
+  grouping,
+  editingRowId,
+  hierarchical,
+  actions,
+  rbac,
+  permissions
+}: RowProps) => {
+  const rowRef = useRef<HTMLTableRowElement>(null);
+  const firstInputRef = useRef<HTMLInputElement>(null);
+  
+  const rowId = getRowIdSafe(row.original, row.index, getRowId);
   
   // Hierarchical row styling - moved to top to avoid hoisting issues
   const hierarchicalRow = row.original as HierarchicalDataRow;
@@ -299,6 +297,40 @@ const MemoizedRow = ({
   const isParent = isHierarchical && hierarchicalRow.isParent;
   const isChild = isHierarchical && !hierarchicalRow.isParent;
   
+  // Auto-focus first editable field when entering edit mode
+  useEffect(() => {
+    if (isEditing && firstInputRef.current) {
+      firstInputRef.current.focus();
+      firstInputRef.current.select();
+    }
+  }, [isEditing]);
+
+  // Keyboard navigation (Enter to save, Escape to cancel)
+  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]);
+  
   // Handle grouped rows
   if (row.getIsGrouped && row.getIsGrouped()) {
     const groupValue = row.getValue(grouping[0]);
@@ -418,7 +450,24 @@ const MemoizedRow = ({
     return null;
   }
   
-  // Regular row
+  // If we're in edit mode, use EditableRow for better UX (auto-focus, keyboard shortcuts)
+  if (isEditing && editingData && onEditingDataChange && onSaveEditing && onCancelEditing) {
+    return (
+      <EditableRow
+        row={row}
+        editingData={editingData}
+        onEditingDataChange={onEditingDataChange}
+        onSave={onSaveEditing}
+        onCancel={onCancelEditing}
+        actions={((actions || []) as any[]).filter((a: any) => !a.disabled) as any}
+        getRowId={getRowId}
+        isParent={isParent}
+        hierarchical={!!hierarchical}
+      />
+    );
+  }
+  
+  // Regular row (not in edit mode)
   const visibleCells = row.getVisibleCells();
   const allCells = row.getAllCells ? row.getAllCells() : [];
   
@@ -436,6 +485,7 @@ const MemoizedRow = ({
   
   return (
     <tr 
+      ref={rowRef}
       key={row.id} 
       style={{
         ...style,
@@ -444,27 +494,11 @@ const MemoizedRow = ({
       className={rowClassName}
     >
       {visibleCells.map((cell: any, cellIndex: number) => {
-        // For hierarchical parent rows, add expansion button to the first cell
         const isFirstCell = cellIndex === 0;
         const shouldShowExpansionButton = isHierarchical && isParent && isFirstCell && hierarchical?.state;
         const isExpanded = shouldShowExpansionButton ? hierarchical?.state?.isExpanded(rowId) : false;
         const hasChildren = shouldShowExpansionButton ? hierarchical?.state?.hasChildren(rowId) : false;
         
-        // Debug logging for expander button conditions (development only)
-        if (import.meta.env.MODE === 'development' && isParent && isFirstCell) {
-          console.log('🔍 Expander Button Debug:', {
-            rowId,
-            isHierarchical,
-            isParent,
-            isFirstCell,
-            hasHierarchicalState: !!hierarchical?.state,
-            shouldShowExpansionButton,
-            hasChildren,
-            isExpanded
-          });
-        }
-        
-        
         return (
           <td 
             key={cell.id} 
@@ -474,7 +508,6 @@ const MemoizedRow = ({
             })}
           >
             <div className="flex items-center gap-2">
-              {/* Individual expansion button for hierarchical parent rows */}
               {shouldShowExpansionButton && hasChildren && (
                 <Button
                   variant="ghost"
@@ -492,82 +525,19 @@ const MemoizedRow = ({
                 </Button>
               )}
               
-              {/* Cell content */}
               <div className={`flex-1 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`}>
-                {(() => {
-                  const columnDef = cell.column.columnDef as any;
-                  const isColumnEditable = columnDef.editable !== false;
-                  const shouldRenderEditField = isEditing && cell.column.id !== 'actions' && isColumnEditable;
-                  
-                  if (shouldRenderEditField) {
-                    // Render edit input fields for editable columns in edit mode
-                    return cell.column.columnDef.cell ? (
-                      flexRender(cell.column.columnDef.cell, {
-                        ...cell.getContext(),
-                        hierarchical: hierarchical,
-                        isParent: isParent,
-                        isChild: isChild,
-                        isHierarchical: isHierarchical,
-                        rowId: rowId,
-                        isExpanded: isExpanded,
-                        hasChildren: hasChildren,
-                        getIsEditing: () => true, // Always true in edit mode
-                        setValue: (value: any) => {
-                          if (typeof value === 'object' && value !== null) {
-                            onEditingDataChange?.({ ...editingData, ...value });
-                          } else {
-                            onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                          }
-                        }
-                      })
-                    ) : (
-                      renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
-                        if (typeof value === 'object' && value !== null) {
-                          onEditingDataChange?.({ ...editingData, ...value });
-                        } else {
-                          onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                        }
-                      }, editingData)
-                    );
-                  }
-                  
-                  // Render normal cell (not in edit mode, or column not editable, or is actions column)
-                  if (cell.column.id === 'actions') {
-                    return isEditing ? (
-                      <div className="flex gap-1">
-                        <button
-                          onClick={onSaveEditing}
-                          className="h-8 w-8 p-0 hover:bg-muted/50 flex items-center justify-center"
-                          title="Save changes"
-                        >
-                          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                          </svg>
-                        </button>
-                        <button
-                          onClick={onCancelEditing}
-                          className="h-8 w-8 p-0 hover:bg-muted/50 flex items-center justify-center"
-                          title="Cancel changes"
-                        >
-                          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                          </svg>
-                        </button>
-                      </div>
-                    ) : (
-                      <ActionButtons 
-                        row={row} 
-                        actions={actions}
-                        isEditing={isEditing}
-                        isParent={isParent}
-                        hierarchical={!!hierarchical}
-                        rbac={rbac}
-                        permissions={permissions}
-                      />
-                    );
-                  }
-                  
-                  return flexRender(cell.column.columnDef.cell, {
+                {cell.column.id === 'actions' ? (
+                  <ActionButtons 
+                    row={row} 
+                    actions={actions}
+                    isEditing={isEditing}
+                    isParent={isParent}
+                    hierarchical={!!hierarchical}
+                    rbac={rbac}
+                    permissions={permissions}
+                  />
+                ) : (
+                  flexRender(cell.column.columnDef.cell, {
                     ...cell.getContext(),
                     hierarchical: hierarchical,
                     isParent: isParent,
@@ -576,8 +546,8 @@ const MemoizedRow = ({
                     rowId: rowId,
                     isExpanded: isExpanded,
                     hasChildren: hasChildren,
-                  });
-                })()}
+                  })
+                )}
               </div>
             </div>
           </td>
@@ -585,9 +555,12 @@ const MemoizedRow = ({
       })}
     </tr>
   );
-};
+});
+
+RowComponent.displayName = 'RowComponent';
 
-MemoizedRow.displayName = 'MemoizedRow';
+// Use the already memoized RowComponent
+const MemoizedRow = RowComponent;
 
 /**
  * Unified table body component with intelligent virtualization
@@ -612,12 +585,6 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   onClearFilters,
   enableFiltering = false,
   showFilterRow = false,
-  enableColumnReordering = false,
-  onColumnOrderChange,
-  onColumnDrop,
-  savedColumnOrder,
-  enablePersistence = false,
-  tableId,
   dataLength,
   virtualHeight = 600,
   forceVirtualization = false,
@@ -639,16 +606,16 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   const rows = table.getRowModel().rows;
   const headerGroups = table.getHeaderGroups();
 
-  // Virtual scrolling setup
+  // Virtual scrolling setup - only create virtualizer when needed
   const virtualizer = useVirtualizer({
-    count: rows.length,
+    count: shouldVirtualize ? rows.length : 0,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 40,
     overscan: 5,
   });
 
-  const virtualRows = virtualizer.getVirtualItems();
-  const totalSize = virtualizer.getTotalSize();
+  const virtualRows = shouldVirtualize ? virtualizer.getVirtualItems() : [];
+  const totalSize = shouldVirtualize ? virtualizer.getTotalSize() : 0;
 
 
   // Render table content
@@ -680,7 +647,7 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
         const row = rows[virtualRow.index];
         if (!row) return null;
         
-        const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
+        const rowId = getRowIdSafe(row.original, row.index, getRowId);
         const isEditing = editingRowId === rowId;
         
         return (
@@ -713,7 +680,7 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
     } else {
       // Standard rendering
       return rows.map((row) => {
-        const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
+        const rowId = getRowIdSafe(row.original, row.index, getRowId);
         const isEditing = editingRowId === rowId;
         
         return (

package/src/components/DataTable/components/__tests__/COVERAGE_NOTE.md

@@ -0,0 +1,55 @@
+# DataTable Subcomponent Testing Strategy
+
+## Summary
+
+The DataTable subcomponents (FilterRow, EditableRow, ColumnFilter, GroupHeader, ViewRowModal, etc.) are **intentionally not tested in isolation** because:
+
+1. They are tightly integrated with TanStack React Table
+2. They are extensively tested through DataTable integration tests
+3. Isolated unit tests would require extensive mocking that tests implementation, not behavior
+
+## Coverage via Integration Tests
+
+The following DataTable integration tests provide comprehensive coverage:
+
+### Workflow Validation (23 tests)
+- ✅ Basic rendering workflows
+- ✅ Editing workflow validation  
+- ✅ Deletion workflow validation
+- ✅ Combined features validation
+- ✅ Search workflow validation
+- ✅ Sorting workflow validation
+- ✅ Data integrity validation
+- ✅ Accessibility validation
+
+### Regression Fixes (13 tests)
+- ✅ Save/Cancel action handling
+- ✅ Action button icons and behavior
+- ✅ Handler requirement enforcement
+- ✅ Data integrity prevention
+
+## Subcomponent Coverage Mapping
+
+| Subcomponent | Coverage | Testing Method |
+|-------------|----------|---------------|
+| **ColumnFilter** | ✅ | Integration tests validate filter input behavior |
+| **FilterRow** | ✅ | Integration tests validate filtering across columns |
+| **EditableRow** | ✅ | Integration tests validate editing workflows |
+| **GroupHeader** | ✅ | Integration tests validate grouping functionality |
+| **ViewRowModal** | ✅ | Integration tests validate modal display |
+| **DraggableColumnHeader** | ✅ | Integration tests validate column reordering |
+| **ActionButtons** | ✅ | Integration tests validate action buttons |
+
+## Why This Approach Works
+
+Following TEST_GUIDE_CURSOR.md principles:
+
+1. **Test Observable Behavior** - Integration tests verify actual user interactions
+2. **Avoid Implementation Testing** - Don't mock TanStack table internals
+3. **Focus on User Value** - Users use DataTable, not individual subcomponents
+4. **Prevent Brittle Tests** - Integration tests are more maintainable
+
+## Conclusion
+
+DataTable subcomponents achieve **effective coverage** through integration tests that validate the complete user experience. No additional isolated unit tests are recommended.
+

package/src/components/DataTable/components/index.ts

@@ -1,8 +1,8 @@
 export { ActionButtons } from './ActionButtons';
 export { BulkOperationsDropdown } from './BulkOperationsDropdown';
 export { ColumnVisibilityDropdown } from './ColumnVisibilityDropdown';
-// DataTableBody functionality is now consolidated into UnifiedTableBody
 export { UnifiedTableBody } from './UnifiedTableBody';
+export { EditableRow } from './EditableRow';
 export { DataTableToolbar } from './DataTableToolbar';
 export { DataTableModals } from './DataTableModals';
 export { ImportModal } from './ImportModal';
@@ -10,7 +10,6 @@ export type { ImportModalConfig } from './ImportModal';
 export { GroupHeader } from './GroupHeader';
 export { GroupingDropdown } from './GroupingDropdown';
 export { DataTableErrorBoundary } from './DataTableErrorBoundary';
-export { EditableRow } from './EditableRow';
 export { PaginationControls } from './PaginationControls';
 export { LoadingState } from './LoadingState';
 export { EmptyState } from './EmptyState';