@jmruthers/pace-core 0.5.76 → 0.5.78

package/src/components/DataTable/components/DataTableErrorBoundary.tsx

@@ -10,6 +10,7 @@
 import React, { Component, ErrorInfo, ReactNode } from 'react';
 import { Alert, AlertDescription, AlertTitle } from '../../Alert/Alert';
 import { Button } from '../../Button/Button';
+import { createLogger } from '../../../utils/logger';
 // Icons removed to avoid test mocking issues
 
 // ============================================================================
@@ -45,6 +46,7 @@ export class DataTableErrorBoundary extends Component<
   DataTableErrorBoundaryProps,
   ErrorBoundaryState
 > {
+  private logger = createLogger('DataTableErrorBoundary');
   private retryTimeoutId: NodeJS.Timeout | null = null;
 
   constructor(props: DataTableErrorBoundaryProps) {
@@ -74,7 +76,7 @@ export class DataTableErrorBoundary extends Component<
     this.props.onError?.(error, errorInfo);
 
     // Log error for debugging
-    console.error('DataTable Error Boundary caught an error:', error, errorInfo);
+    this.logger.error('Error Boundary caught an error:', error, errorInfo);
   }
 
   componentWillUnmount() {
@@ -88,7 +90,7 @@ export class DataTableErrorBoundary extends Component<
     const { retryCount } = this.state;
 
     if (retryCount >= maxRetries) {
-      console.warn('DataTable Error Boundary: Maximum retry attempts reached');
+      this.logger.warn('Error Boundary: Maximum retry attempts reached');
       return;
     }
 

package/src/components/DataTable/components/DataTableModals.tsx

@@ -21,7 +21,7 @@
  * ```
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ImportModal, type ImportModalConfig } from './ImportModal';
 
 /**
@@ -39,6 +39,11 @@ export interface DataTableModalsProps {
   /** Configuration object for customizing import modal text content */
   importModalConfig?: ImportModalConfig;
   
+  // Focus management
+  /** Function to store focus before opening modal */
+  onStoreFocus?: () => void;
+  /** Function to restore focus after closing modal */
+  onRestoreFocus?: () => void;
 }
 
 /**
@@ -72,7 +77,23 @@ export function DataTableModals({
   onCloseImportModal,
   onImport,
   importModalConfig,
+  onStoreFocus,
+  onRestoreFocus,
 }: DataTableModalsProps) {
+  // Handle focus management for import modal
+  useEffect(() => {
+    if (showImportModal) {
+      onStoreFocus?.();
+    } else {
+      // Restore focus when modal closes
+      const timeoutId = setTimeout(() => {
+        onRestoreFocus?.();
+      }, 100); // Small delay to ensure modal is fully closed
+      
+      return () => clearTimeout(timeoutId);
+    }
+  }, [showImportModal, onStoreFocus, onRestoreFocus]);
+
   return (
     <>
       <ImportModal

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

@@ -1,15 +1,22 @@
 import React from 'react';
-import { flexRender } from '@tanstack/react-table';
-import { ActionButtons } from './ActionButtons';
-import { Input } from '../../Input/Input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
+import { flexRender, type Row, type Column } from '@tanstack/react-table';
+
 import { Button } from '../../Button/Button';
-import type { DataTableAction, DataRecord } from '../types';
+import { Input } from '../../Input/Input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../Select/Select';
+import { ActionButtons } from './ActionButtons';
+import type { CellValue, DataRecord, DataTableAction, EditableColumnDef } from '../types';
 
 interface EditableRowProps<TData extends DataRecord> {
-  row: any;
-  editingData: Record<string, any>;
-  onEditingDataChange: (data: Record<string, any>) => void;
+  row: Row<TData>;
+  editingData: Record<string, CellValue>;
+  onEditingDataChange: (data: Record<string, CellValue>) => void;
   onSave: () => void;
   onCancel: () => void;
   actions: DataTableAction<TData>[];
@@ -18,45 +25,32 @@ interface EditableRowProps<TData extends DataRecord> {
   hierarchical?: boolean;
 }
 
-// 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> = {},
-  placeholder?: string
+const renderEditField = <TData extends DataRecord>(
+  column: Column<TData, unknown>,
+  value: CellValue,
+  onChange: (value: CellValue | Record<string, CellValue>) => void,
+  editingData: Record<string, CellValue> = {}
 ) => {
-  const columnDef = column.columnDef;
-  
-  // Check if column is editable (default: true)
+  const columnDef = column.columnDef as EditableColumnDef<TData>;
+
   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
+
   if (columnDef.fieldType === 'select' && columnDef.fieldOptions) {
-    // Use editAccessorKey if specified, otherwise use the column id
-    const editKey = columnDef.editAccessorKey || column.id;
-    const editValue = editingData[editKey] || value;
-    
+    const accessorKey = columnDef.editAccessorKey || column.id;
+    const currentValue = editingData[accessorKey] ?? value ?? '';
+
     return (
       <Select
-        value={String(editValue || '')}
-        onValueChange={(newValue) => {
-          // If editAccessorKey is specified, update that field instead
-          if (columnDef.editAccessorKey) {
-            onChange({ [columnDef.editAccessorKey]: Number(newValue) });
-          } else {
-            onChange(newValue);
-          }
-        }}
+        value={String(currentValue)}
+        onValueChange={(newValue) => onChange({ [accessorKey]: newValue as CellValue })}
       >
         <SelectTrigger className="w-full h-7">
-          <SelectValue placeholder={placeholder || `Select ${column.id}`} />
+          <SelectValue placeholder={`Select ${column.id}`} />
         </SelectTrigger>
         <SelectContent>
-          {columnDef.fieldOptions.map((option: any) => (
+          {columnDef.fieldOptions.map(option => (
             <SelectItem key={option.value} value={String(option.value)}>
               {option.label}
             </SelectItem>
@@ -65,26 +59,36 @@ const renderEditField = (
       </Select>
     );
   }
-  
+
   if (columnDef.fieldType === 'date') {
     return (
       <Input
         type="date"
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
+        value={String(value ?? '')}
+        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
         className="w-full h-7"
       />
     );
   }
-  
-  // Default to text input
+
+  if (columnDef.fieldType === 'number') {
+    return (
+      <Input
+        type="number"
+        value={String(value ?? '')}
+        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
+        className="w-full h-7"
+      />
+    );
+  }
+
   return (
     <Input
       type="text"
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
+      value={String(value ?? '')}
+      onChange={(e) => onChange(e.target.value as unknown as CellValue)}
       className="w-full h-7"
-      placeholder={placeholder || `Enter ${column.id}`}
+      placeholder={`Enter ${column.id}`}
     />
   );
 };
@@ -102,62 +106,43 @@ export function EditableRow<TData extends DataRecord>({
 }: EditableRowProps<TData>) {
   const rowId = getRowId ? getRowId(row.original, row.index) : String(row.id);
 
-  // Convert DataTableAction to ActionButtons format with proper disabled handling
-  const convertedActions = actions.map(action => ({
-    label: action.label,
-    onClick: action.onClick,
-    icon: action.icon,
-    variant: action.variant === 'destructive' ? 'destructive' as const : 'default' as const,
-    disabled: action.disabled ? ((row?: any) => action.disabled!(row)) : false,
-    testId: action.testId || `action-${action.label.toLowerCase().replace(/\s+/g, '-')}-${rowId}`,
-    visible: true,
-  }));
-
   return (
-    <tr>
-      {row.getVisibleCells().map((cell: any) => (
-        <td key={cell.id}>
+    <tr
+      role="row"
+      aria-selected={typeof row.getIsSelected === 'function' ? (row.getIsSelected() ? 'true' : 'false') : 'false'}
+      aria-rowindex={row.index + 1}
+    >
+      {row.getVisibleCells().map(cell => (
+        <td key={cell.id} role="cell">
           <div className={cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}>
             {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(),
-                  getIsEditing: () => true, // Always true in edit mode
-                  setValue: (value: any) => {
-                    if (typeof value === 'object' && value !== null) {
-                      onEditingDataChange({ ...editingData, ...value });
+                  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 });
+                      onEditingDataChange({ ...editingData, [cell.column.id]: value as CellValue });
                     }
                   }
                 })
               ) : (
-                // 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) {
-                    // Handle editAccessorKey case
-                    onEditingDataChange({ ...editingData, ...value });
+                  if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+                    onEditingDataChange({ ...editingData, ...(value as Record<string, CellValue>) });
                   } else {
-                    // Handle simple value case
-                    onEditingDataChange({ ...editingData, [cell.column.id]: value });
+                    onEditingDataChange({ ...editingData, [cell.column.id]: value as CellValue });
                   }
                 }, editingData)
               )
             ) : (
               <div className="flex gap-1">
-                <Button
-                  onClick={onSave}
-                  size="sm"
-                  variant="default"
-                >
+                <Button onClick={onSave} size="sm" variant="default">
                   Save
                 </Button>
-                <Button
-                  onClick={onCancel}
-                  size="sm"
-                  variant="outline"
-                >
+                <Button onClick={onCancel} size="sm" variant="outline">
                   Cancel
                 </Button>
               </div>
@@ -168,11 +153,11 @@ export function EditableRow<TData extends DataRecord>({
       {actions.length > 0 && (
         <td>
           <ActionButtons
-            row={row.original}
+            row={row}
             rowId={rowId}
             index={row.index}
-            actions={convertedActions}
-            isEditing={true}
+            actions={actions}
+            isEditing
             isParent={isParent}
             hierarchical={hierarchical}
           />

package/src/components/DataTable/components/EmptyState.tsx

@@ -28,7 +28,11 @@ export function EmptyState({
     : "Get started by adding your first entry";
 
   return (
-    <div className="flex flex-col items-center justify-center p-8 text-center">
+    <div 
+      role="status" 
+      aria-live="polite"
+      className="flex flex-col items-center justify-center p-8 text-center"
+    >
       <Icon 
         role="img" 
         aria-hidden="true" 

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

@@ -40,6 +40,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { Button } from '../../Button/Button';
 import { Input } from '../../Input/Input';
 import { Upload, FileText, AlertCircle } from 'lucide-react';
+import { createLogger } from '../../../utils/logger';
 
 /**
  * Configuration interface for customizing ImportModal text content
@@ -76,7 +77,7 @@ interface ImportModalProps {
   /** Callback function when the modal is closed */
   onClose: () => void;
   /** Callback function when data is imported successfully */
-  onImport: (data: any[]) => void | Promise<void>;
+  onImport: (data: Array<Record<string, unknown>>) => void | Promise<void>;
   /** Configuration object for customizing modal text content */
   config?: ImportModalConfig;
 }
@@ -107,11 +108,13 @@ interface ImportModalProps {
  * ```
  */
 export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportModalProps) {
+  const logger = createLogger('ImportModal');
   const [file, setFile] = useState<File | null>(null);
   const [isProcessing, setIsProcessing] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [previewData, setPreviewData] = useState<any[] | null>(null);
+  const [previewData, setPreviewData] = useState<Array<Record<string, unknown>> | null>(null);
   const [totalCount, setTotalCount] = useState<number>(0);
+  const [validationErrors, setValidationErrors] = useState<Array<{row: number; field: string; message: string}>>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const isMountedRef = useRef(true);
 
@@ -135,38 +138,13 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
     totalRowsText = 'Total rows to import: {count}'
   } = config;
 
-  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = event.target.files?.[0];
-    console.log('📁 File selected:', selectedFile?.name);
-    if (selectedFile) {
-      setFile(selectedFile);
-      setError(null);
-      
-      // Generate preview
-      try {
-        const text = await selectedFile.text();
-        console.log('📄 File content length:', text.length);
-        const data = processCSV(text);
-        console.log('📊 Parsed CSV data:', data.length, 'rows');
-        console.log('👀 Setting preview data:', data.slice(0, 5));
-        setPreviewData(data.slice(0, 5)); // Show first 5 rows as preview
-        setTotalCount(data.length); // Store total count
-        console.log('👀 Preview data state should be updated');
-      } catch (err) {
-        console.error('❌ CSV parsing error:', err);
-        setError(err instanceof Error ? err.message : 'Failed to preview file');
-        setPreviewData(null);
-        setTotalCount(0);
-      }
-    }
-  };
 
-  const processCSV = (csvText: string): any[] => {
-    console.log('📄 Raw CSV text:', csvText.substring(0, 200) + '...');
+  const processCSV = (csvText: string): Array<Record<string, unknown>> => {
+    logger.debug('Raw CSV text:', csvText.substring(0, 200) + '...');
     
     const lines = csvText.split('\n').filter(line => line.trim());
-    console.log('📄 CSV lines count:', lines.length);
-    console.log('📄 First few lines:', lines.slice(0, 3));
+    logger.debug('CSV lines count:', lines.length);
+    logger.debug('First few lines:', lines.slice(0, 3));
     
     if (lines.length < 2) {
       throw new Error('CSV must have at least a header row and one data row');
@@ -195,19 +173,19 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
     };
 
     const headers = parseCSVLine(lines[0]).map(h => h.replace(/"/g, '').trim());
-    console.log('📄 Parsed headers:', headers);
+    logger.debug('Parsed headers:', headers);
     
     const data = lines.slice(1).map((line, index) => {
       const values = parseCSVLine(line).map(v => v.replace(/"/g, '').trim());
-      const row: any = {};
+      const row: Record<string, unknown> = {};
       headers.forEach((header, colIndex) => {
         row[header] = values[colIndex] || '';
       });
-      console.log(`📄 Row ${index + 1}:`, row);
+      logger.debug(`Row ${index + 1}:`, row);
       return row;
     });
 
-    console.log('📄 Final parsed data:', data);
+    logger.debug('Final parsed data:', data);
     return data;
   };
 
@@ -243,8 +221,36 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
     setError(null);
     setPreviewData(null);
     setTotalCount(0);
+    setValidationErrors([]);
     onClose();
   };
+  
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = event.target.files?.[0];
+    logger.debug('File selected:', selectedFile?.name);
+    if (selectedFile) {
+      setFile(selectedFile);
+      setError(null);
+      setValidationErrors([]);
+      
+      // Generate preview
+      try {
+        const text = await selectedFile.text();
+        logger.debug('File content length:', text.length);
+        const data = processCSV(text);
+        logger.debug('Parsed CSV data:', data.length, 'rows');
+        logger.debug('Setting preview data:', data.slice(0, 5));
+        setPreviewData(data.slice(0, 5)); // Show first 5 rows as preview
+        setTotalCount(data.length); // Store total count
+        logger.debug('Preview data state should be updated');
+      } catch (err) {
+        logger.error('CSV parsing error:', err);
+        setError(err instanceof Error ? err.message : 'Failed to preview file');
+        setPreviewData(null);
+        setTotalCount(0);
+      }
+    }
+  };
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
@@ -290,6 +296,29 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
               <span className="text-sm">{error}</span>
             </div>
           )}
+          
+          {validationErrors.length > 0 && (
+            <div className="space-y-2">
+              <div className="flex items-center gap-2 p-3 bg-acc-50 border border-acc-200 rounded text-acc-700">
+                <AlertCircle className="h-4 w-4" />
+                <span className="text-sm font-medium">
+                  {validationErrors.length} validation error{validationErrors.length !== 1 ? 's' : ''} found
+                </span>
+              </div>
+              <div className="max-h-32 overflow-y-auto space-y-1">
+                {validationErrors.slice(0, 10).map((err, idx) => (
+                  <div key={idx} className="text-xs text-acc-600 p-2 bg-acc-50 border border-acc-200 rounded">
+                    <span className="font-medium">Row {err.row}</span> • {err.field}: {err.message}
+                  </div>
+                ))}
+                {validationErrors.length > 10 && (
+                  <div className="text-xs text-sec-500 italic">
+                    ... and {validationErrors.length - 10} more errors
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
 
 
           {previewData && previewData.length > 0 && (
@@ -310,7 +339,7 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
                     <tbody>
                       {previewData.map((row, index) => (
                         <tr key={index} className={index % 2 === 0 ? 'bg-app-main-50' : 'bg-sec-50'}>
-                          {Object.values(row).map((value: any, cellIndex) => (
+                          {Object.values(row).map((value, cellIndex) => (
                             <td key={cellIndex} className="px-2 py-1 text-sec-700 border-b">
                               {String(value)}
                             </td>