@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -1,462 +0,0 @@
-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';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  SelectGroup,
-  SelectLabel,
-  SelectSeparator,
-} from '../../Select/Select';
-import { createLogger } from '../../../utils/core/logger';
-import type { CellValue, DataRecord, DataTableAction, EditableColumnDef } from '../types';
-
-interface EditableRowProps<TData extends DataRecord> {
-  row: Row<TData>;
-  editingData: Record<string, CellValue>;
-  onEditingDataChange: (data: Record<string, CellValue>) => void;
-  onSave: () => void;
-  onCancel: () => void;
-  actions: DataTableAction<TData>[];
-  getRowId?: (row: TData, index: number) => string;
-  isParent?: boolean;
-  hierarchical?: boolean;
-}
-
-// Component for select fields with searchable and creatable support
-function SelectEditField<TData extends DataRecord>({
-  columnDef,
-  accessorKey,
-  currentValue,
-  placeholder,
-  onChange,
-  className,
-}: {
-  columnDef: EditableColumnDef<TData>;
-  accessorKey: string;
-  currentValue: CellValue;
-  placeholder?: string;
-  onChange: (value: CellValue) => void;
-  className?: string;
-}) {
-  const logger = createLogger('SelectEditField');
-  // Determine if searchable - explicitly check for true to ensure visible search input appears
-  // When selectSearchable is true or undefined, show the visible search input box
-  // When selectSearchable is false, hide the search input (type-to-search still works via SelectContent internals)
-  const isSearchable = columnDef.selectSearchable !== false;
-  const isCreatable = columnDef.creatable === true;
-  const selectRef = React.useRef<HTMLFieldSetElement>(null);
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [showCreateOption, setShowCreateOption] = React.useState(false);
-
-  // Monitor search input value via DOM events to detect when user types
-  React.useEffect(() => {
-    if (!isOpen || !isSearchable || !isCreatable) return;
-    
-    // Function to find and attach listener to search input
-    const findAndAttachSearchInput = (): (() => void) | null => {
-      // Try to find search input - check both within selectRef and document
-      // SelectContent might be rendered outside the form element
-      let searchInput: HTMLInputElement | null = null;
-      
-      if (selectRef.current) {
-        searchInput = selectRef.current.querySelector<HTMLInputElement>('[data-testid="select-search-input"]');
-      }
-      
-      // If not found in selectRef, try document (in case SelectContent is in a portal)
-      if (!searchInput) {
-        // Find the most recently opened select's search input
-        const allSearchInputs = document.querySelectorAll<HTMLInputElement>('[data-testid="select-search-input"]');
-        // Get the one that's visible (not hidden)
-        for (const input of Array.from(allSearchInputs)) {
-          const content = input.closest('[data-testid="select-content"]');
-          if (content && content.getAttribute('aria-hidden') !== 'true') {
-            searchInput = input;
-            break;
-          }
-        }
-      }
-      
-      if (!searchInput) return null;
-
-      const handleInput = (e: Event) => {
-        const target = e.target as HTMLInputElement;
-        const currentSearch = target.value;
-        setSearchTerm(currentSearch);
-        
-        // Check if search doesn't match any option (including items in groups)
-        if (currentSearch.trim()) {
-          const searchLower = currentSearch.toLowerCase().trim();
-          
-          // Helper to check if an option matches
-          // Use explicit union type instead of typeof to avoid Babel parsing issues
-          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 => {
-            // Simple option
-            if ('value' in opt && !('type' in opt)) {
-              return opt.label.toLowerCase().includes(searchLower);
-            }
-            // Group - check items within the group
-            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));
-            }
-            // Separator - doesn't match
-            return false;
-          };
-          
-          const hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
-          setShowCreateOption(!hasMatch);
-        } else {
-          setShowCreateOption(false);
-        }
-      };
-
-      // Check initial value in case user has already typed
-      const initialValue = searchInput.value;
-      if (initialValue) {
-        const currentSearch = initialValue;
-        setSearchTerm(currentSearch);
-        
-        // Check if search doesn't match any option (including items in groups)
-        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 hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
-          setShowCreateOption(!hasMatch);
-        } else {
-          setShowCreateOption(false);
-        }
-      }
-
-      searchInput.addEventListener('input', handleInput);
-      
-      return () => {
-        searchInput?.removeEventListener('input', handleInput);
-      };
-    };
-
-    // Try to find immediately
-    let cleanup: (() => void) | null = findAndAttachSearchInput();
-    
-    // If not found, try again after a short delay (SelectContent might render asynchronously)
-    if (!cleanup) {
-      let timeoutCleanup: (() => void) | null = null;
-      const timeoutId = setTimeout(() => {
-        timeoutCleanup = findAndAttachSearchInput();
-      }, 50);
-      
-      return () => {
-        clearTimeout(timeoutId);
-        timeoutCleanup?.();
-      };
-    }
-    
-    return cleanup;
-  }, [isOpen, isSearchable, isCreatable, columnDef.fieldOptions]);
-
-  const handleCreateNew = React.useCallback(async () => {
-    if (!isCreatable || !columnDef.onCreateNew || !searchTerm.trim()) return;
-    
-    try {
-      const newValue = await columnDef.onCreateNew(searchTerm.trim());
-      onChange(newValue);
-      setSearchTerm('');
-      setShowCreateOption(false);
-    } catch (error) {
-      logger.error('Error creating new item:', error);
-    }
-  }, [isCreatable, columnDef.onCreateNew, searchTerm, onChange, logger]);
-
-  return (
-    <Select
-      ref={selectRef}
-      value={String(currentValue)}
-      onValueChange={(newValue) => {
-        if (newValue.startsWith('__create_new__')) {
-          handleCreateNew();
-        } else {
-          onChange(newValue as CellValue);
-        }
-      }}
-      onOpenChange={(open) => {
-        setIsOpen(open);
-        if (!open) {
-          setSearchTerm('');
-          setShowCreateOption(false);
-        }
-      }}
-    >
-      <SelectTrigger className={className || "w-full h-7"}>
-        <SelectValue placeholder={placeholder || `Select ${columnDef.header || 'option'}...`} />
-      </SelectTrigger>
-      <SelectContent 
-        searchable={Boolean(isSearchable)}
-        searchPlaceholder={`Search ${columnDef.header || 'options'}...`}
-        maxHeight={columnDef.selectMaxHeight}
-        className={columnDef.selectContentClassName}
-        style={columnDef.selectContentStyle}
-      >
-        {columnDef.fieldOptions?.map((option, index) => {
-          // Simple option item
-          if ('value' in option && !('type' in option)) {
-            return (
-              <SelectItem key={`${option.value}-${index}`} value={String(option.value)}>
-                {option.label}
-              </SelectItem>
-            );
-          }
-          
-          // Separator
-          if ('type' in option && option.type === 'separator') {
-            return <SelectSeparator key={`separator-${index}`} />;
-          }
-          
-          // Group with label
-          if ('type' in option && option.type === 'group') {
-            const groupOption = option as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> };
-            return (
-              <SelectGroup key={`group-${groupOption.label}-${index}`}>
-                <SelectLabel>{groupOption.label}</SelectLabel>
-                {groupOption.items.map((item: { value: string | number; label: string }) => (
-                  <SelectItem key={`${item.value}-${index}`} value={String(item.value)}>
-                    {item.label}
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            );
-          }
-          
-          return null;
-        })}
-        {showCreateOption && isCreatable && searchTerm.trim() && (
-          <SelectItem 
-            key="__create_new__" 
-            value={`__create_new__${searchTerm}`}
-            className="bg-main-100 font-medium border-t border-main-200"
-          >
-            Create "{searchTerm}"
-          </SelectItem>
-        )}
-      </SelectContent>
-    </Select>
-  );
-}
-
-const renderEditField = <TData extends DataRecord>(
-  column: Column<TData, unknown>,
-  value: CellValue,
-  onChange: (value: CellValue | Record<string, CellValue>) => void,
-  editingData: Record<string, CellValue> = {},
-  placeholder?: string,
-  inputRef?: React.Ref<HTMLInputElement>
-) => {
-  const columnDef = column.columnDef as EditableColumnDef<TData>;
-
-  if (columnDef.editable === false) {
-    return <span className="text-sm text-sec-600">{String(value ?? '')}</span>;
-  }
-
-  if (columnDef.fieldType === 'select' && columnDef.fieldOptions) {
-    const accessorKey = columnDef.editAccessorKey || column.id;
-    const currentValue = editingData[accessorKey] ?? value ?? '';
-
-    return (
-      <SelectEditField
-        columnDef={columnDef}
-        accessorKey={accessorKey}
-        currentValue={currentValue}
-        placeholder={placeholder}
-        onChange={(newValue) => onChange({ [accessorKey]: newValue })}
-        className="w-full h-7"
-      />
-    );
-  }
-
-  if (columnDef.fieldType === 'date') {
-    return (
-      <Input
-        ref={inputRef}
-        type="date"
-        value={String(value ?? '')}
-        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
-        className="w-full h-7"
-      />
-    );
-  }
-
-  if (columnDef.fieldType === 'number') {
-    // Hide spinner arrows by default for number, currency, and percentage fields
-    // Only show spinners if explicitly set to false
-    const hideSpinners = columnDef.hideNumberSpinners !== false; // Default to true
-    return (
-      <Input
-        ref={inputRef}
-        type="number"
-        value={String(value ?? '')}
-        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
-        className={`w-full h-7 ${hideSpinners ? 'datatable-number-no-spinners' : ''}`}
-      />
-    );
-  }
-
-  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={placeholder || `Enter ${column.id}`}
-    />
-  );
-};
-
-/**
- * Editable row component for DataTable.
- * Renders a row in edit mode with input fields for each editable column.
- * 
- * @template TData - The type of data records in the table
- * @param props - Editable row configuration
- * @returns The rendered editable row
- */
-export function EditableRow<TData extends DataRecord>({
-  row,
-  editingData,
-  onEditingDataChange,
-  onSave,
-  onCancel,
-  actions,
-  getRowId,
-  isParent = false,
-  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
-      role="row"
-      aria-selected={typeof row.getIsSelected === 'function' ? (row.getIsSelected() ? 'true' : 'false') : 'false'}
-      aria-rowindex={row.index + 1}
-    >
-      {row.getVisibleCells().map(cell => {
-        // Skip rendering edit fields for system columns (select, actions)
-        const isSystemColumn = cell.column.id === 'select' || cell.column.id === 'actions';
-        
-        return (
-          <td key={cell.id} role="cell" className={cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}>
-            {isSystemColumn ? (
-                // System columns: render their normal cell content (checkbox for select, buttons for actions)
-                cell.column.id === 'actions' ? (
-                  <>
-                    <Button onClick={onSave} size="sm" variant="default" aria-label="Save changes" className="mr-1">
-                      <Check className="size-4" />
-                    </Button>
-                    <Button onClick={onCancel} size="sm" variant="outline" aria-label="Cancel editing">
-                      <X className="size-4" />
-                    </Button>
-                    </>
-                ) : (
-                  // Select column: render the checkbox normally
-                  flexRender(cell.column.columnDef.cell, cell.getContext())
-                )
-              ) : (
-                // Data columns: render edit fields
-                (() => {
-                  const columnDef = cell.column.columnDef as EditableColumnDef<TData>;
-                  
-                  // CRITICAL FIX: For editable columns (editable !== false), ALWAYS use renderEditField
-                  // to ensure input fields are shown in edit mode. Custom cell renderers are only used
-                  // when the column is explicitly marked as editable: false (non-editable columns).
-                  // This ensures that editable fields always display as input fields in edit mode.
-                  
-                  // 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-sec-600">{String(cell.getValue() ?? '')}</span>
-                    );
-                  }
-                  
-                  // Column is editable (editable !== false or undefined) - ALWAYS use renderEditField
-                  // This ensures input fields are always displayed in edit mode, regardless of custom cell renderers.
-                  // Custom cell renderers are for display purposes only and should not interfere with edit mode.
-                  const shouldGetRef = !hasAssignedRef.current;
-                  if (shouldGetRef) {
-                    hasAssignedRef.current = true;
-                  }
-                  
-                  // CRITICAL FIX: Use the correct accessor key (editAccessorKey or column.id) to get the value
-                  // This ensures that when editAccessorKey is different from column.id, we use the correct key
-                  const accessorKey = columnDef.editAccessorKey || cell.column.id;
-                  const currentValue = editingData[accessorKey] ?? (cell.getValue() as CellValue);
-                  
-                  return renderEditField(
-                    cell.column, 
-                    currentValue, 
-                    (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,
-                    undefined, // placeholder
-                    shouldGetRef ? firstInputRef : undefined
-                  );
-                })()
-              )}
-          </td>
-        );
-      })}
-    </tr>
-  );
-}

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

@@ -1,79 +0,0 @@
-import React from 'react';
-import { Database, Search, Plus, User } from 'lucide-react';
-import { Button } from '../../Button/Button';
-import { Alert, AlertTitle, AlertDescription } from '../../Alert/Alert';
-
-/**
- * Props for the EmptyState component.
- */
-interface EmptyStateProps {
-  title?: string;
-  description?: string;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-  action?: {
-    label: string;
-    onClick: () => void;
-  };
-  isFiltered?: boolean;
-  onClearFilters?: () => void;
-}
-
-/**
- * Empty state component for DataTable.
- * Displays a message when the table has no data or no filtered results.
- * 
- * @param props - Empty state configuration
- * @returns The rendered empty state UI
- */
-export function EmptyState({ 
-  title,
-  description,
-  icon: Icon = Database,
-  action,
-  isFiltered = false,
-  onClearFilters
-}: EmptyStateProps) {
-  const defaultTitle = isFiltered ? "No results found" : "No data available";
-  const defaultDescription = isFiltered 
-    ? "Try adjusting your search or filter criteria"
-    : "Get started by adding your first entry";
-
-  return (
-    <Alert 
-      role="status"
-      aria-live="polite"
-      className="grid place-items-center text-center max-w-lg mx-auto"
-    >
-      <Icon 
-        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'}
-      />
-      <AlertTitle className="text-lg font-semibold mb-2">
-        {title || defaultTitle}
-      </AlertTitle>
-      <AlertDescription className="text-sm text-muted-foreground mb-4 max-w-sm">
-        {description || defaultDescription}
-      </AlertDescription>
-      
-      {(isFiltered && onClearFilters) || action ? (
-        <>
-          {isFiltered && onClearFilters && (
-            <Button variant="outline" onClick={onClearFilters}>
-              <Search className="size-4 mr-2" />
-              Clear filters
-            </Button>
-          )}
-          
-          {action && (
-            <Button onClick={action.onClick}>
-              <Plus className="size-4 mr-2" />
-              {action.label}
-            </Button>
-          )}
-        </>
-      ) : null}
-    </Alert>
-  );
-}

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

@@ -1,141 +0,0 @@
-import React from 'react';
-import { ColumnFilter } from './ColumnFilter';
-import type { Header, Table } from '@tanstack/react-table';
-import { getColumnHeaderText } from '../utils/columnUtils';
-import type { Column } from '@tanstack/react-table';
-import type { DataRecord } from '../types';
-
-/**
- * Props for the FilterRow component.
- * @template TData - The type of data records in the table
- */
-interface FilterRowProps<TData> {
-  table: Table<TData>;
-  visibleColumns: Header<TData, unknown>[];
-}
-
-/**
- * Filter row component for DataTable.
- * Renders filter inputs for each visible column.
- * 
- * @template TData - The type of data records in the table
- * @param props - Filter row configuration
- * @returns The rendered filter row
- */
-export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData>) {
-  const { getState } = table;
-  const { columnFilters } = getState();
-
-  // 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;
-    
-    // Check for filterSelectOptions first (preferred for filters)
-    if (columnDef.filterSelectOptions && Array.isArray(columnDef.filterSelectOptions)) {
-      return columnDef.filterSelectOptions;
-    }
-    
-    // Check if column has explicit field options
-    if (columnDef.fieldOptions && Array.isArray(columnDef.fieldOptions)) {
-      return columnDef.fieldOptions;
-    }
-
-    // Fallback to generating options from data
-    const uniqueValues = new Set<string>();
-    table.getRowModel().rows.forEach((row) => {
-      const value = row.getValue(columnId);
-      if (value !== null && value !== undefined) {
-        uniqueValues.add(String(value));
-      }
-    });
-
-    return Array.from(uniqueValues)
-      .sort()
-      .map((value) => ({ value, label: value }));
-  }, [table]);
-
-  // Determine filter type based on column data
-  // IMPORTANT: Explicit filterType always takes priority - auto-detection only runs if filterType is not set
-  const getFilterType = React.useCallback((columnId: string) => {
-    const column = table.getColumn(columnId);
-    if (!column) return 'text';
-
-    const columnDef = column.columnDef as any;
-    
-    // PRIORITY 1: Check if column has explicit filter type configuration
-    // This MUST be checked first and must respect any explicit value, including 'text'
-    // Check for valid filter type strings explicitly to prevent any edge cases
-    // This prevents auto-detection from overriding explicit filterType settings
-    const explicitFilterType = columnDef.filterType;
-    if (
-      explicitFilterType === 'text' ||
-      explicitFilterType === 'select' ||
-      explicitFilterType === 'number' ||
-      explicitFilterType === 'date'
-    ) {
-      // Explicit filterType set - return it immediately (no auto-detection)
-      // This ensures filterType: 'text' is always respected, even for columns with ≤10 unique values
-      return explicitFilterType as 'text' | 'select' | 'number' | 'date';
-    }
-    
-    // Only proceed with auto-detection if filterType was NOT explicitly set
-    
-    // PRIORITY 2: Auto-detect select filter if filterSelectOptions is explicitly provided
-    if (columnDef.filterSelectOptions && Array.isArray(columnDef.filterSelectOptions)) {
-      return 'select';
-    }
-
-    // PRIORITY 3: Check if it's a date column (by column ID pattern)
-    if (columnId.toLowerCase().includes('date') || columnId.toLowerCase().includes('time')) {
-      return 'date';
-    }
-
-    // PRIORITY 4: Check if it's a number column (by data type)
-    const firstValue = table.getRowModel().rows[0]?.getValue(columnId);
-    if (typeof firstValue === 'number') {
-      return 'number';
-    }
-
-    // PRIORITY 5: Auto-detect select filter if limited unique values (≤10)
-    // Only runs if filterType was NOT explicitly set (checked above)
-    const uniqueValues = getColumnOptions(columnId);
-    if (uniqueValues.length <= 10 && uniqueValues.length > 1) {
-      return 'select';
-    }
-
-    // Default to text filter
-    return 'text';
-  }, [table, getColumnOptions]);
-
-  return (
-    <tr className="border-b bg-sec-50/50">
-      {visibleColumns.map((header) => {
-        const column = header.column;
-        const canFilter = column.getCanFilter();
-        const filterType = getFilterType(column.id);
-        const options = filterType === 'select' ? getColumnOptions(column.id) : [];
-
-        return (
-          <td
-            key={header.id}
-            className="p-1"
-          >
-            {canFilter ? (
-              <ColumnFilter
-                column={column}
-                filterType={filterType}
-                options={options}
-                placeholder={`Filter ${getColumnHeaderText(column as unknown as Column<DataRecord, unknown>)}...`}
-              />
-            ) : (
-              <>&nbsp;</>
-            )}
-          </td>
-        );
-      })}
-    </tr>
-  );
-}