@jmruthers/pace-core 0.6.8 → 0.6.10

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

@@ -25,9 +25,26 @@ import React, { useEffect } from 'react';
 import { ImportModal, type ImportModalConfig } from './ImportModal';
 import { createLogger } from '../../../utils/core/logger';
 
+/**
+ * Normalizes a column name for comparison by:
+ * - Converting to lowercase
+ * - Replacing spaces with underscores
+ * - Removing special characters (keeping alphanumeric and underscores)
+ * - Collapsing multiple underscores/hyphens to single underscore
+ */
+function normalizeColumnName(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/\s+/g, '_')           // Replace spaces with underscores
+    .replace(/[^a-z0-9_]/g, '_')    // Replace special chars with underscores
+    .replace(/[_-]+/g, '_')         // Collapse multiple underscores/hyphens
+    .trim();
+}
+
 /**
  * Maps CSV column data to table column structure
  * Handles reference fields (columns with editAccessorKey) and direct accessorKey columns
+ * Implements a comprehensive fallback chain for flexible column matching
  */
 function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<string, unknown>>(
   csvData: Array<Record<string, unknown>>,
@@ -36,69 +53,138 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
     accessorKey?: string;
     header?: string;
     editAccessorKey?: string;
+    importAliases?: string[];
   }>
 ): TData[] {
   const logger = createLogger('mapCSVToTableColumns');
-  // Create a mapping from CSV headers to table field names
+  
+  if (csvData.length === 0) {
+    logger.warn('No CSV data to map');
+    return [];
+  }
+  
+  // Build comprehensive mapping from CSV headers to table field names
   // Priority: editAccessorKey > accessorKey > id
+  // For each column, we create multiple mappings to support the fallback chain
   const columnMap = new Map<string, string>();
   
   columns.forEach(col => {
     const fieldName = col.editAccessorKey || col.accessorKey || col.id;
     const header = typeof col.header === 'string' ? col.header : '';
     
-    if (fieldName && header) {
+    if (!fieldName) {
+      logger.warn('Skipping column with missing fieldName:', col);
+      return;
+    }
+    
+    if (header) {
+      // 1. Exact header match (case-sensitive)
+      columnMap.set(header, fieldName);
+      
+      // 2. Exact header match (case-insensitive)
       const headerLower = header.toLowerCase();
-      // Map header to field name (case-insensitive)
       columnMap.set(headerLower, fieldName);
       
-      // Also map id/accessorKey if different from header
-      const colId = col.id || col.accessorKey;
-      if (colId && colId !== header && colId !== fieldName) {
-        columnMap.set(colId.toLowerCase(), fieldName);
+      // 3. Normalized header match
+      const normalizedHeader = normalizeColumnName(header);
+      if (normalizedHeader !== headerLower) {
+        columnMap.set(normalizedHeader, fieldName);
+      }
+    }
+    
+    // 4. AccessorKey match (case-insensitive and normalized)
+    if (col.accessorKey) {
+      const accessorKeyLower = col.accessorKey.toLowerCase();
+      columnMap.set(accessorKeyLower, fieldName);
+      
+      const normalizedAccessorKey = normalizeColumnName(col.accessorKey);
+      if (normalizedAccessorKey !== accessorKeyLower) {
+        columnMap.set(normalizedAccessorKey, fieldName);
+      }
+    }
+    
+    // 5. EditAccessorKey match (case-insensitive and normalized)
+    if (col.editAccessorKey) {
+      const editAccessorKeyLower = col.editAccessorKey.toLowerCase();
+      columnMap.set(editAccessorKeyLower, col.editAccessorKey);
+      
+      const normalizedEditAccessorKey = normalizeColumnName(col.editAccessorKey);
+      if (normalizedEditAccessorKey !== editAccessorKeyLower) {
+        columnMap.set(normalizedEditAccessorKey, col.editAccessorKey);
       }
       
       // For reference fields with editAccessorKey, also map the ID column header
       // This handles exports that include both "Type" and "Type (ID)" columns
-      if (col.editAccessorKey && header) {
-        const editAccessorKey = col.editAccessorKey; // Store in const for proper type narrowing
+      if (header) {
         const idColumnHeader = `${header} (ID)`;
-        columnMap.set(idColumnHeader.toLowerCase(), editAccessorKey);
-        // Also map the editAccessorKey directly (in case CSV uses the field name)
-        columnMap.set(editAccessorKey.toLowerCase(), editAccessorKey);
+        columnMap.set(idColumnHeader.toLowerCase(), col.editAccessorKey);
+        const normalizedIdHeader = normalizeColumnName(idColumnHeader);
+        if (normalizedIdHeader !== idColumnHeader.toLowerCase()) {
+          columnMap.set(normalizedIdHeader, col.editAccessorKey);
+        }
+      }
+    }
+    
+    // 6. ImportAliases match (case-insensitive and normalized)
+    if (col.importAliases && Array.isArray(col.importAliases)) {
+      col.importAliases.forEach(alias => {
+        // Case-insensitive match
+        const aliasLower = alias.toLowerCase();
+        columnMap.set(aliasLower, fieldName);
+        
+        // Normalized match
+        const normalizedAlias = normalizeColumnName(alias);
+        if (normalizedAlias !== aliasLower) {
+          columnMap.set(normalizedAlias, fieldName);
+        }
+      });
+    }
+    
+    // Also map id if different from header and accessorKey
+    if (col.id && col.id !== header && col.id !== col.accessorKey && col.id !== fieldName) {
+      const idLower = col.id.toLowerCase();
+      columnMap.set(idLower, fieldName);
+      
+      const normalizedId = normalizeColumnName(col.id);
+      if (normalizedId !== idLower) {
+        columnMap.set(normalizedId, fieldName);
       }
-    } else {
-      logger.warn('Skipping column with missing fieldName or header:', col);
     }
   });
   
-  if (csvData.length === 0) {
-    logger.warn('No CSV data to map');
-    return [];
-  }
-  
-  // Transform CSV data using the mapping
+  // Transform CSV data using the mapping with fallback chain
   const mappedData = csvData.map((row, index) => {
     const mappedRow: Record<string, unknown> = {};
     
-    // For each CSV column, find the corresponding table field
+    // For each CSV column, find the corresponding table field using fallback chain
     Object.keys(row).forEach(csvHeader => {
-      const csvHeaderLower = csvHeader.toLowerCase();
+      let fieldName: string | undefined;
+      
+      // Fallback chain - try each strategy in order
+      // 1. Exact case-sensitive match
+      fieldName = columnMap.get(csvHeader);
       
-      // Try exact match first
-      let fieldName = columnMap.get(csvHeaderLower);
+      // 2. Exact case-insensitive match
+      if (!fieldName) {
+        fieldName = columnMap.get(csvHeader.toLowerCase());
+      }
+      
+      // 3. Normalized match
+      if (!fieldName) {
+        const normalizedCsvHeader = normalizeColumnName(csvHeader);
+        fieldName = columnMap.get(normalizedCsvHeader);
+      }
       
-      // If no exact match, try flexible suffix matching:
+      // 4. Flexible suffix matching (backward compatibility)
       // If CSV header ends with " [space] ColumnHeader", match it
       // This handles cases like "Meal Type" → "Type", "User Name" → "Name", etc.
-      // Also handles "Meal Type (ID)" → matches the column with header "Type (ID)"
       if (!fieldName) {
+        const csvHeaderLower = csvHeader.toLowerCase();
         for (const [mapKey, mapValue] of columnMap.entries()) {
-          // Check if CSV header ends with the mapped key (with a space before it, or exact match)
           const keyWithSpace = ` ${mapKey}`;
           if (csvHeaderLower === mapKey || csvHeaderLower.endsWith(keyWithSpace)) {
             fieldName = mapValue;
-            break; // Found a match, stop searching
+            break;
           }
         }
       }
@@ -106,8 +192,9 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
       if (fieldName) {
         mappedRow[fieldName] = row[csvHeader];
       } else {
-        // If no mapping found, use the CSV header as-is (lowercase)
-        mappedRow[csvHeaderLower] = row[csvHeader];
+        // If no mapping found after all strategies, use the CSV header as-is (lowercase)
+        mappedRow[csvHeader.toLowerCase()] = row[csvHeader];
+        // Only warn on first row to avoid spam
         if (index === 0) {
           logger.warn(`No mapping found for "${csvHeader}", using as-is`);
         }
@@ -140,6 +227,7 @@ export interface DataTableModalsProps<TData extends Record<string, unknown> = Re
     accessorKey?: string;
     header?: string;
     editAccessorKey?: string;
+    importAliases?: string[];
   }>;
   
   // Focus management

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

@@ -55,7 +55,7 @@
 import React from 'react';
 import { Input } from '../../Input/Input';
 import { Button } from '../../Button/Button';
-import { Search, Plus, Upload, Download, Settings2, Filter, Trash2 } from 'lucide-react';
+import { Plus, Upload, Download, Filter, Trash2 } from 'lucide-react';
 import { GroupingDropdown } from './GroupingDropdown';
 import { ColumnVisibilityDropdown } from './ColumnVisibilityDropdown';
 import type { DataTableColumn, DataRecord, SimpleColumn, DataTableFeatureConfig, DataTableRBACConfig } from '../types';
@@ -151,7 +151,7 @@ interface DataTableToolbarProps<TData extends DataRecord = DataRecord> {
  */
 export function DataTableToolbar<TData extends DataRecord>({
   features,
-  rbac,
+  rbac: _rbac,
   permissions,
   globalFilter,
   onGlobalFilterChange,

package/src/components/DataTable/components/EditFields.tsx

@@ -19,7 +19,7 @@ import type { CellValue, DataRecord, EditableColumnDef } from '../types';
  */
 export function SelectEditField<TData extends DataRecord>({
   columnDef,
-  accessorKey,
+  accessorKey: _accessorKey,
   currentValue,
   placeholder,
   onChange,
@@ -72,27 +72,6 @@ export function SelectEditField<TData extends DataRecord>({
         setSearchTerm(currentSearch);
 
         if (currentSearch.trim()) {
-          const searchLower = currentSearch.toLowerCase().trim();
-
-          type FieldOption =
-            | { value: string | number; label: string }
-            | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
-            | { type: 'separator' };
-
-          const checkMatch = (opt: FieldOption): boolean => {
-            if ('value' in opt && !('type' in opt)) {
-              return opt.label.toLowerCase().includes(searchLower);
-            }
-            if ('type' in opt && opt.type === 'group') {
-              return (
-                (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some(
-                  (item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower)
-                )
-              );
-            }
-            return false;
-          };
-
           const shouldShow = isCreatable && !!columnDef.onCreateNew;
 
           setShowCreateOption(shouldShow);
@@ -107,27 +86,6 @@ export function SelectEditField<TData extends DataRecord>({
         setSearchTerm(currentSearch);
 
         if (currentSearch.trim()) {
-          const searchLower = currentSearch.toLowerCase().trim();
-
-          type FieldOption =
-            | { value: string | number; label: string }
-            | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
-            | { type: 'separator' };
-
-          const checkMatch = (opt: FieldOption): boolean => {
-            if ('value' in opt && !('type' in opt)) {
-              return opt.label.toLowerCase().includes(searchLower);
-            }
-            if ('type' in opt && opt.type === 'group') {
-              return (
-                (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some(
-                  (item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower)
-                )
-              );
-            }
-            return false;
-          };
-
           const shouldShow = isCreatable && !!columnDef.onCreateNew;
           setShowCreateOption(shouldShow);
         } else {
@@ -142,7 +100,7 @@ export function SelectEditField<TData extends DataRecord>({
       };
     };
 
-    let cleanup: (() => void) | null = findAndAttachSearchInput();
+    const cleanup: (() => void) | null = findAndAttachSearchInput();
 
     if (!cleanup) {
       let timeoutCleanup: (() => void) | null = null;
@@ -157,7 +115,7 @@ export function SelectEditField<TData extends DataRecord>({
     }
 
     return cleanup;
-  }, [isOpen, isSearchable, isCreatable, columnDef.fieldOptions, columnDef.onCreateNew]);
+  }, [isOpen, isSearchable, isCreatable, columnDef]);
 
   const handleCreateNew = React.useCallback(async () => {
     if (!isCreatable || !columnDef.onCreateNew || !searchTerm.trim()) return;
@@ -170,7 +128,7 @@ export function SelectEditField<TData extends DataRecord>({
     } catch (error) {
       logger.error('Error creating new item:', error);
     }
-  }, [isCreatable, columnDef.onCreateNew, searchTerm, onChange, logger]);
+  }, [isCreatable, columnDef, searchTerm, onChange, logger]);
 
   return (
     <Select
@@ -243,6 +201,7 @@ export function SelectEditField<TData extends DataRecord>({
 /**
  * Helper function to render the appropriate input type based on column configuration
  */
+// eslint-disable-next-line react-refresh/only-export-components
 export const renderEditField = <TData extends DataRecord>(
   column: Column<TData, unknown>,
   value: CellValue,
@@ -270,7 +229,7 @@ export const renderEditField = <TData extends DataRecord>(
     const handleValueChange = (newValue: CellValue) => {
       // Store the new value - preserve original type if option values are numbers
       // Check if any option has a numeric value to determine if we should convert
-      const hasNumericValues = columnDef.fieldOptions?.some((opt: any) => 
+      const hasNumericValues = columnDef.fieldOptions?.some((opt) => 
         'value' in opt && !('type' in opt) && typeof opt.value === 'number'
       );
       const finalValue = hasNumericValues && !isNaN(Number(newValue)) && newValue !== ''

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

@@ -32,7 +32,7 @@ interface EditableRowProps<TData extends DataRecord> {
 // Component for select fields with searchable and creatable support
 function SelectEditField<TData extends DataRecord>({
   columnDef,
-  accessorKey,
+  accessorKey: _accessorKey,
   currentValue,
   placeholder,
   onChange,
@@ -162,7 +162,7 @@ function SelectEditField<TData extends DataRecord>({
     };
 
     // Try to find immediately
-    let cleanup: (() => void) | null = findAndAttachSearchInput();
+    const cleanup: (() => void) | null = findAndAttachSearchInput();
     
     // If not found, try again after a short delay (SelectContent might render asynchronously)
     if (!cleanup) {
@@ -178,7 +178,7 @@ function SelectEditField<TData extends DataRecord>({
     }
     
     return cleanup;
-  }, [isOpen, isSearchable, isCreatable, columnDef.fieldOptions]);
+  }, [isOpen, isSearchable, isCreatable, columnDef]);
 
   const handleCreateNew = React.useCallback(async () => {
     if (!isCreatable || !columnDef.onCreateNew || !searchTerm.trim()) return;
@@ -191,7 +191,7 @@ function SelectEditField<TData extends DataRecord>({
     } catch (error) {
       logger.error('Error creating new item:', error);
     }
-  }, [isCreatable, columnDef.onCreateNew, searchTerm, onChange, logger]);
+  }, [isCreatable, columnDef, searchTerm, onChange, logger]);
 
   return (
     <Select
@@ -351,12 +351,12 @@ export function EditableRow<TData extends DataRecord>({
   onEditingDataChange,
   onSave,
   onCancel,
-  actions,
+  actions: _actions,
   getRowId,
-  isParent = false,
-  hierarchical = false,
+  isParent: _isParent = false,
+  hierarchical: _hierarchical = false,
 }: EditableRowProps<TData>) {
-  const rowId = getRowId ? getRowId(row.original, row.index) : String(row.id);
+  const _rowId = getRowId ? getRowId(row.original, row.index) : String(row.id);
   const firstInputRef = React.useRef<HTMLInputElement>(null);
   const hasAssignedRef = React.useRef(false);
 

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

@@ -28,7 +28,7 @@ interface EmptyStateProps {
 export function EmptyState({ 
   title,
   description,
-  icon: Icon = Database,
+  icon: Icon,
   action,
   isFiltered = false,
   onClearFilters
@@ -38,17 +38,20 @@ export function EmptyState({
     ? "Try adjusting your search or filter criteria"
     : "Get started by adding your first entry";
 
+  // Use default icon only if no icon is provided
+  const DisplayIcon = Icon || Database;
+
   return (
     <Alert 
       role="status"
       aria-live="polite"
       className="grid place-items-center text-center max-w-lg mx-auto"
     >
-      <Icon 
+      <DisplayIcon 
         role="img" 
         aria-hidden="true" 
         className="size-12 text-muted-foreground mb-4"
-        data-testid={Icon === Database ? 'lucide-database' : Icon === User ? 'lucide-user' : 'custom-icon'}
+        data-testid={DisplayIcon === Database ? 'lucide-database' : DisplayIcon === User ? 'lucide-user' : 'custom-icon'}
       />
       <AlertTitle className="text-lg font-semibold mb-2">
         {title || defaultTitle}

package/src/components/DataTable/components/FilterRow.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import { ColumnFilter } from './ColumnFilter';
-import type { Header, Table } from '@tanstack/react-table';
+import type { Column, Header, Table } from '@tanstack/react-table';
 import { getColumnHeaderText } from '../utils/columnUtils';
-import type { Column } from '@tanstack/react-table';
-import type { DataRecord } from '../types';
+import type { DataRecord, DataTableColumn } from '../types';
 
 /**
  * Props for the FilterRow component.
  * @template TData - The type of data records in the table
  */
-interface FilterRowProps<TData> {
+interface FilterRowProps<TData extends DataRecord> {
   table: Table<TData>;
   visibleColumns: Header<TData, unknown>[];
 }
@@ -22,16 +21,14 @@ interface FilterRowProps<TData> {
  * @param props - Filter row configuration
  * @returns The rendered filter row
  */
-export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData>) {
-  const { getState } = table;
-  const { columnFilters } = getState();
+export function FilterRow<TData extends DataRecord>({ table, visibleColumns }: FilterRowProps<TData>) {
 
   // Get unique values for select filters
   const getColumnOptions = React.useCallback((columnId: string) => {
     const column = table.getColumn(columnId);
     if (!column) return [];
 
-    const columnDef = column.columnDef as any;
+    const columnDef = column.columnDef as DataTableColumn<TData>;
     
     // Check for filterSelectOptions first (preferred for filters)
     if (columnDef.filterSelectOptions && Array.isArray(columnDef.filterSelectOptions)) {
@@ -63,7 +60,7 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
     const column = table.getColumn(columnId);
     if (!column) return 'text';
 
-    const columnDef = column.columnDef as any;
+    const columnDef = column.columnDef as DataTableColumn<TData>;
     
     // PRIORITY 1: Check if column has explicit filter type configuration
     // This MUST be checked first and must respect any explicit value, including 'text'
@@ -116,7 +113,17 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
         const column = header.column;
         const canFilter = column.getCanFilter();
         const filterType = getFilterType(column.id);
-        const options = filterType === 'select' ? getColumnOptions(column.id) : [];
+        const rawOptions = filterType === 'select' ? getColumnOptions(column.id) : [];
+        
+        // Filter and normalize options for ColumnFilter (only simple options, convert to string values)
+        const options: Array<{ value: string; label: string }> = rawOptions
+          .filter((opt): opt is { value: string | number; label: string } => 
+            'value' in opt && 'label' in opt && !('type' in opt)
+          )
+          .map(opt => ({
+            value: String(opt.value),
+            label: opt.label
+          }));
 
         return (
           <td
@@ -125,7 +132,7 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
           >
             {canFilter ? (
               <ColumnFilter
-                column={column}
+                column={column as unknown as Column<DataRecord, unknown>}
                 filterType={filterType}
                 options={options}
                 placeholder={`Filter ${getColumnHeaderText(column as unknown as Column<DataRecord, unknown>)}...`}

package/src/components/DataTable/components/GroupingDropdown.tsx

@@ -5,7 +5,6 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue,
 } from '../../Select/Select';
 import { Group } from 'lucide-react';
 import type { DataTableColumn, DataRecord, SimpleColumn } from '../types';