@jmruthers/pace-core 0.5.93 → 0.5.94

package/src/components/DataTable/components/EditableRow.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { flexRender, type Row, type Column } from '@tanstack/react-table';
+import { X, Check } from 'lucide-react';
 
 import { Button } from '../../Button/Button';
 import { Input } from '../../Input/Input';
@@ -29,7 +30,9 @@ const renderEditField = <TData extends DataRecord>(
   column: Column<TData, unknown>,
   value: CellValue,
   onChange: (value: CellValue | Record<string, CellValue>) => void,
-  editingData: Record<string, CellValue> = {}
+  editingData: Record<string, CellValue> = {},
+  placeholder?: string,
+  inputRef?: React.Ref<HTMLInputElement>
 ) => {
   const columnDef = column.columnDef as EditableColumnDef<TData>;
 
@@ -63,6 +66,7 @@ const renderEditField = <TData extends DataRecord>(
   if (columnDef.fieldType === 'date') {
     return (
       <Input
+        ref={inputRef}
         type="date"
         value={String(value ?? '')}
         onChange={(e) => onChange(e.target.value as unknown as CellValue)}
@@ -74,6 +78,7 @@ const renderEditField = <TData extends DataRecord>(
   if (columnDef.fieldType === 'number') {
     return (
       <Input
+        ref={inputRef}
         type="number"
         value={String(value ?? '')}
         onChange={(e) => onChange(e.target.value as unknown as CellValue)}
@@ -84,11 +89,12 @@ const renderEditField = <TData extends DataRecord>(
 
   return (
     <Input
+      ref={inputRef}
       type="text"
       value={String(value ?? '')}
       onChange={(e) => onChange(e.target.value as unknown as CellValue)}
       className="w-full h-7"
-      placeholder={`Enter ${column.id}`}
+      placeholder={placeholder || `Enter ${column.id}`}
     />
   );
 };
@@ -105,6 +111,16 @@ export function EditableRow<TData extends DataRecord>({
   hierarchical = false,
 }: EditableRowProps<TData>) {
   const rowId = getRowId ? getRowId(row.original, row.index) : String(row.id);
+  const firstInputRef = React.useRef<HTMLInputElement>(null);
+  const hasAssignedRef = React.useRef(false);
+
+  // Auto-focus first input field when entering edit mode
+  React.useEffect(() => {
+    if (firstInputRef.current) {
+      firstInputRef.current.focus();
+      firstInputRef.current.select();
+    }
+  }, []);
 
   return (
     <tr
@@ -116,34 +132,58 @@ export function EditableRow<TData extends DataRecord>({
         <td key={cell.id} role="cell">
           <div className={cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}>
             {cell.column.id !== 'actions' ? (
-              cell.column.columnDef.cell ? (
-                flexRender(cell.column.columnDef.cell, {
-                  ...cell.getContext(),
-                  getIsEditing: () => true,
-                  setValue: (value: CellValue | Record<string, CellValue>) => {
+              // In edit mode, always use renderEditField for editable columns
+              // Custom cell renderers are for display mode only
+              (() => {
+                const columnDef = cell.column.columnDef as EditableColumnDef<TData>;
+                // If column is explicitly marked as not editable, check if custom cell renderer handles editing
+                if (columnDef.editable === false) {
+                  // Not editable - use custom cell renderer if available, otherwise show static value
+                  return cell.column.columnDef.cell ? (
+                    flexRender(cell.column.columnDef.cell, {
+                      ...cell.getContext(),
+                      getIsEditing: () => true,
+                      setValue: (value: CellValue | Record<string, CellValue>) => {
+                        if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+                          onEditingDataChange({ ...editingData, ...(value as Record<string, CellValue>) });
+                        } else {
+                          onEditingDataChange({ ...editingData, [cell.column.id]: value as CellValue });
+                        }
+                      }
+                    })
+                  ) : (
+                    <span className="text-sm text-gray-600">{String(cell.getValue() ?? '')}</span>
+                  );
+                }
+                
+                // Column is editable - always use renderEditField in EditableRow
+                const shouldGetRef = !hasAssignedRef.current;
+                if (shouldGetRef) {
+                  hasAssignedRef.current = true;
+                }
+                
+                return renderEditField(
+                  cell.column, 
+                  editingData[cell.column.id] ?? (cell.getValue() as CellValue), 
+                  (value) => {
                     if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
                       onEditingDataChange({ ...editingData, ...(value as Record<string, CellValue>) });
                     } else {
                       onEditingDataChange({ ...editingData, [cell.column.id]: value as CellValue });
                     }
-                  }
-                })
-              ) : (
-                renderEditField(cell.column, editingData[cell.column.id], (value) => {
-                  if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
-                    onEditingDataChange({ ...editingData, ...(value as Record<string, CellValue>) });
-                  } else {
-                    onEditingDataChange({ ...editingData, [cell.column.id]: value as CellValue });
-                  }
-                }, editingData)
-              )
+                  }, 
+                  editingData,
+                  undefined, // placeholder
+                  shouldGetRef ? firstInputRef : undefined
+                );
+              })()
             ) : (
               <div className="flex gap-1">
-                <Button onClick={onSave} size="sm" variant="default">
-                  Save
+                <Button onClick={onSave} size="sm" variant="default" aria-label="Save changes">
+                  <Check className="h-4 w-4" />
                 </Button>
-                <Button onClick={onCancel} size="sm" variant="outline">
-                  Cancel
+                <Button onClick={onCancel} size="sm" variant="outline" aria-label="Cancel editing">
+                  <X className="h-4 w-4" />
                 </Button>
               </div>
             )}

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

@@ -319,109 +319,33 @@ const RowComponent = React.memo(({
     const subRowsCount = row.subRows?.length || 0;
     const isExpanded = row.getIsExpanded();
     
+    // Only render the group header row - sub-rows will be rendered by the standard rendering loop
     return (
-      <React.Fragment>
-        {/* Group Header Row */}
-        <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
-          <td 
-            className={getTableCellClasses({
-              isCompact: true,
-              className: "px-3 py-2 flex items-center font-medium"
-            })} 
-            colSpan={row.getAllCells().length}
+      <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
+        <td 
+          className={getTableCellClasses({
+            isCompact: true,
+            className: "px-3 py-2 flex items-center font-medium"
+          })} 
+          colSpan={row.getAllCells().length}
+        >
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => row.toggleExpanded()}
+            className="p-0 h-auto mr-2"
           >
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => row.toggleExpanded()}
-              className="p-0 h-auto mr-2"
-            >
-              {isExpanded ? (
-                <ChevronDown className="h-4 w-4" />
-              ) : (
-                <ChevronRight className="h-4 w-4" />
-              )}
-            </Button>
-            <span className="text-sm">
-              {String(groupValue)} ({subRowsCount} items)
-            </span>
-          </td>
-        </tr>
-        
-        {/* Render sub-rows if expanded */}
-        {isExpanded && row.subRows?.map((subRow: any) => {
-          const subRowId = getRowId ? getRowId(subRow.original, subRow.index) : String(subRow.index);
-          const isSubRowEditing = editingRowId === subRowId;
-          
-          return (
-            <tr key={subRow.id} className="border-l-2 border-l-blue-200" style={style}>
-              {subRow.getVisibleCells().map((cell: any) => (
-                <td 
-                  key={cell.id} 
-                  className={getTableCellClasses({
-                    isCompact: true,
-                    className: `px-3 py-2 pl-8 ${cell.column.id === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words'} ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`
-                  })}
-                >
-                  {isSubRowEditing && cell.column.id !== 'actions' ? (
-                    // Check if column has a custom cell renderer - if so, use it in edit mode
-                    cell.column.columnDef.cell ? (
-                      flexRender(cell.column.columnDef.cell, {
-                        ...cell.getContext(),
-                        hierarchical: hierarchical,
-                        isParent: false,
-                        isChild: true,
-                        isHierarchical: false,
-                        rowId: subRowId,
-                        isExpanded: false,
-                        hasChildren: false,
-                        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 });
-                          }
-                        }
-                      })
-                    ) : (
-                      // Fall back to default edit field rendering when no custom cell renderer
-                      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)
-                    )
-                  ) : 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: false,
-                      isChild: true,
-                      isHierarchical: false,
-                      rowId: subRowId,
-                      isExpanded: false,
-                      hasChildren: false
-                    })
-                  )}
-                </td>
-              ))}
-            </tr>
-          );
-        })}
-      </React.Fragment>
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )}
+          </Button>
+          <span className="text-sm">
+            {String(groupValue)} ({subRowsCount} items)
+          </span>
+        </td>
+      </tr>
     );
   }