@jmruthers/pace-core 0.5.114 → 0.5.116

package/src/components/DataTable/components/DataTableToolbar.tsx

@@ -224,9 +224,10 @@ export function DataTableToolbar<TData extends DataRecord>({
 
         {/* Import - ONLY if user has import permission */}
         {features.import && permissions.canImport.can && (
-          <Button 
-            variant="outline" 
+          <Button
+            variant="outline"
             onClick={onImportClick}
+            data-restore-target="datatable-import-button"
           >
             <Upload className="h-4 w-4 mr-2 flex-shrink-0" />
             <span className="truncate">Import</span>

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

@@ -336,7 +336,24 @@ export function EditableRow<TData extends DataRecord>({
                     );
                   }
                   
-                  // Column is editable - always use renderEditField in EditableRow
+                  // Column is editable - check if custom cell renderer handles editing
+                  // Custom renderers can provide their own editing UI (e.g., Select dropdowns, multi-field editors)
+                  if (cell.column.columnDef.cell) {
+                    // Try using custom cell renderer with editing context
+                    return 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 });
+                        }
+                      }
+                    });
+                  }
+                  
+                  // No custom renderer - use default renderEditField
                   const shouldGetRef = !hasAssignedRef.current;
                   if (shouldGetRef) {
                     hasAssignedRef.current = true;

package/src/components/DataTable/components/ImportModal.tsx

@@ -125,6 +125,23 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
     };
   }, []);
 
+  // Reset state when modal opens/closes to ensure clean initial state
+  useEffect(() => {
+    if (!isOpen) {
+      // Reset all state when modal is closed
+      setFile(null);
+      setPreviewData(null);
+      setTotalCount(0);
+      setError(null);
+      setValidationErrors([]);
+      setIsProcessing(false);
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  }, [isOpen]);
+
   // Extract config with defaults
   const {
     title = 'Import Data',
@@ -321,7 +338,7 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
           )}
 
 
-          {previewData && previewData.length > 0 && (
+          {file && previewData && previewData.length > 0 ? (
             <div className="space-y-3">
               <h4 className="text-sec-900">{previewHeaderText}</h4>
               <div className="border rounded-lg overflow-hidden">
@@ -354,7 +371,13 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
                 {totalRowsText.replace('{count}', totalCount.toString())}
               </p>
             </div>
-          )}
+          ) : !file ? (
+            <div className="border rounded-lg p-6 text-center bg-sec-50">
+              <p className="text-sec-500">
+                Select a CSV file to preview
+              </p>
+            </div>
+          ) : null}
 
           <div className="flex justify-end gap-2">
             <Button variant="outline" onClick={handleClose}>

package/src/components/DataTable/components/ViewRowModal.tsx

@@ -52,7 +52,7 @@ export function ViewRowModal<TData extends Record<string, any>>({
                 <div className="md:col-span-2 text-sm">
                   {value instanceof Date ? value.toLocaleDateString() : 
                    typeof value === 'object' && value !== null ? JSON.stringify(value, null, 2) :
-                   String(value || '')}
+                   String(value ?? '')}
                 </div>
               </div>
             ))}