@jmruthers/pace-core 0.6.9 → 0.6.10

package/src/components/DataTable/hooks/useDataTableState.ts

@@ -33,10 +33,8 @@ export type { DataRecord, CellValue, RowId };
 /**
  * DataTable state interface.
  * Contains all state for table operations including sorting, filtering, pagination, and editing.
- * 
- * @template TData - The type of data records in the table
  */
-export interface DataTableState<TData extends DataRecord> {
+export interface DataTableState {
   // Table state
   sorting: SortingState;
   columnFilters: ColumnFiltersState;
@@ -66,10 +64,8 @@ export interface DataTableState<TData extends DataRecord> {
 /**
  * Actions interface for DataTable state management.
  * Provides functions to update all aspects of table state.
- * 
- * @template TData - The type of data records in the table
  */
-export interface DataTableStateActions<TData extends DataRecord> {
+export interface DataTableStateActions {
   setSorting: (sorting: SortingState) => void;
   setColumnFilters: (filters: ColumnFiltersState) => void;
   setColumnVisibility: (visibility: VisibilityState) => void;
@@ -91,7 +87,7 @@ export interface DataTableStateActions<TData extends DataRecord> {
   setFilterRow: (show: boolean) => void;
   setSearchQuery: (query: string) => void;
   resetState: () => void;
-  initializeState: (partialState: Partial<DataTableState<TData>>) => void;
+  initializeState: (partialState: Partial<DataTableState>) => void;
 }
 
 /**
@@ -111,7 +107,7 @@ export interface DataTableComputed {
 // ACTION TYPES
 // ============================================================================
 
-export type DataTableAction<TData extends DataRecord> =
+export type DataTableAction =
   | { type: 'SET_SORTING'; payload: SortingState }
   | { type: 'SET_COLUMN_FILTERS'; payload: ColumnFiltersState }
   | { type: 'SET_COLUMN_VISIBILITY'; payload: VisibilityState }
@@ -131,7 +127,7 @@ export type DataTableAction<TData extends DataRecord> =
   | { type: 'SET_FILTER_ROW'; payload: boolean }
   | { type: 'SET_SEARCH_QUERY'; payload: string }
   | { type: 'RESET_STATE' }
-  | { type: 'INITIALIZE_STATE'; payload: Partial<DataTableState<TData>> };
+  | { type: 'INITIALIZE_STATE'; payload: Partial<DataTableState> };
 
 // ============================================================================
 // REDUCER
@@ -146,10 +142,10 @@ export type DataTableAction<TData extends DataRecord> =
  * @param action - Action to perform
  * @returns New table state
  */
-export function dataTableReducer<TData extends DataRecord>(
-  state: DataTableState<TData>,
-  action: DataTableAction<TData>
-): DataTableState<TData> {
+export function dataTableReducer(
+  state: DataTableState,
+  action: DataTableAction
+): DataTableState {
   switch (action.type) {
     case 'SET_SORTING':
       return { ...state, sorting: action.payload };
@@ -216,7 +212,7 @@ export function dataTableReducer<TData extends DataRecord>(
       return { ...state, searchQuery: action.payload };
     
     case 'RESET_STATE':
-      return createInitialState<TData>();
+      return createInitialState();
     
     case 'INITIALIZE_STATE':
       return { ...state, ...action.payload };
@@ -230,12 +226,12 @@ export function dataTableReducer<TData extends DataRecord>(
 // INITIAL STATE
 // ============================================================================
 
-export function createInitialState<TData extends DataRecord>(
+export function createInitialState(
   initialPageSize: number = 10,
   columnIds: string[] = [],
   defaultSorting?: SortingState,
   defaultGrouping?: GroupingState
-): DataTableState<TData> {
+): DataTableState {
   return {
     sorting: defaultSorting || [],
     columnFilters: [],
@@ -262,7 +258,7 @@ export function createInitialState<TData extends DataRecord>(
 // HOOK
 // ============================================================================
 
-export interface UseDataTableStateOptions<TData extends DataRecord> {
+export interface UseDataTableStateOptions {
   initialPageSize?: number;
   columnIds?: string[];
   initialRowSelection?: Record<string, boolean>;
@@ -276,7 +272,7 @@ export interface UseDataTableStateOptions<TData extends DataRecord> {
   columnFieldNames?: string[]; // Field names for sensitive field filtering
 }
 
-export function useDataTableState<TData extends DataRecord>({
+export function useDataTableState<_TData extends DataRecord = DataRecord>({
   initialPageSize = 10,
   columnIds = [],
   initialRowSelection = {},
@@ -287,7 +283,7 @@ export function useDataTableState<TData extends DataRecord>({
   title,
   location,
   columnFieldNames = [],
-}: UseDataTableStateOptions<TData> = {}) {
+}: UseDataTableStateOptions = {}) {
   
   // Call all hooks unconditionally at the top level
   // Hooks must be called in the same order on every render
@@ -310,12 +306,12 @@ export function useDataTableState<TData extends DataRecord>({
 
   // Create initial state
   const baseInitialState = useMemo(() => 
-    createInitialState<TData>(initialPageSize, columnIds, defaultSorting, defaultGrouping),
+    createInitialState(initialPageSize, columnIds, defaultSorting, defaultGrouping),
     [initialPageSize, columnIds, defaultSorting, defaultGrouping]
   );
 
   // Define state subset to persist (excluding sensitive fields from editing/creation data)
-  type PersistedState = Omit<DataTableState<TData>, 'editingData' | 'creationData'> & {
+  type PersistedState = Omit<DataTableState, 'editingData' | 'creationData'> & {
     editingData: Partial<Record<string, CellValue>>;
     creationData: Partial<Record<string, CellValue>>;
   };
@@ -353,13 +349,13 @@ export function useDataTableState<TData extends DataRecord>({
     };
   }, [baseInitialState, persistedState, initialRowSelection, persistenceKey]);
 
-  const [state, dispatch] = useReducer(dataTableReducer<TData>, initialState);
+  const [state, dispatch] = useReducer(dataTableReducer, initialState);
 
   // ============================================================================
   // ACTION CREATORS
   // ============================================================================
 
-  const actions = useMemo<DataTableStateActions<TData>>(() => ({
+  const actions = useMemo<DataTableStateActions>(() => ({
     setSorting: (sorting: SortingState) =>
       dispatch({ type: 'SET_SORTING', payload: sorting }),
     
@@ -425,7 +421,7 @@ export function useDataTableState<TData extends DataRecord>({
     resetState: () => 
       dispatch({ type: 'RESET_STATE' }),
     
-    initializeState: (partialState: Partial<DataTableState<TData>>) =>
+    initializeState: (partialState: Partial<DataTableState>) =>
       dispatch({ type: 'INITIALIZE_STATE', payload: partialState })
   }), [state.rowSelection, onRowSelectionChange]);
 

package/src/components/DataTable/hooks/useKeyboardNavigation.ts

@@ -120,7 +120,7 @@ export function useKeyboardNavigation(
     
     const cells = row.querySelectorAll('td[role="cell"], th[role="columnheader"]');
     return cells[columnIndex] as HTMLElement || null;
-  }, []);
+  }, [tableRef]);
 
   // Helper to get header element
   const getHeaderElement = useCallback((columnIndex: number): HTMLElement | null => {
@@ -134,7 +134,7 @@ export function useKeyboardNavigation(
     
     const headers = headerRow.querySelectorAll('th[role="columnheader"]');
     return headers[columnIndex] as HTMLElement || null;
-  }, []);
+  }, [tableRef]);
 
   // Focus a specific cell
   const focusCell = useCallback((rowIndex: number, columnIndex: number) => {
@@ -295,7 +295,7 @@ export function useKeyboardNavigation(
       }
     };
 
-    const onFocus = (event: React.FocusEvent) => {
+    const onFocus = (_event: React.FocusEvent) => {
       setState(prev => ({
         ...prev,
         focusedRowIndex: rowIndex,
@@ -306,7 +306,7 @@ export function useKeyboardNavigation(
       onFocusChange?.(rowIndex, columnIndex);
     };
 
-    const onBlur = (event: React.FocusEvent) => {
+    const onBlur = (_event: React.FocusEvent) => {
       // Clear navigation state after a delay to allow for focus transitions
       if (navigationTimeoutRef.current) {
         clearTimeout(navigationTimeoutRef.current);
@@ -386,7 +386,7 @@ export function useKeyboardNavigation(
       }
     };
 
-    const onFocus = (event: React.FocusEvent) => {
+    const onFocus = (_event: React.FocusEvent) => {
       // Headers don't participate in cell navigation state
     };
 

package/src/components/DataTable/hooks/useServerSideDataEffect.ts

@@ -3,6 +3,9 @@
  */
 
 import { useCallback, useEffect } from 'react';
+import { createLogger } from '../../../utils/core/logger';
+
+const logger = createLogger('useServerSideDataEffect');
 import type {
   DataRecord,
   PaginationMode,
@@ -66,7 +69,16 @@ export function useServerSideDataEffect<TData extends DataRecord>({
       grouping,
     };
 
-    await fetchServerData(params);
+    try {
+      await fetchServerData(params);
+    } catch (error) {
+      // Errors from fetchServerData are handled gracefully
+      // The error is caught to prevent unhandled promise rejections
+      // Error handling/display should be implemented in the fetchServerData function itself
+      if (import.meta.env.DEV) {
+        logger.error('Error fetching server data', error);
+      }
+    }
   }, [
     finalPaginationMode,
     serverSide,

package/src/components/DataTable/hooks/useTableColumns.ts

@@ -19,8 +19,7 @@ import type {
   DataTableAction,
   DataRecord
 } from '../types';
-import type { ColumnDef } from '@tanstack/react-table';
-import type { HeaderContext, CellContext } from '@tanstack/react-table';
+import type { ColumnDef, HeaderContext, CellContext } from '@tanstack/react-table';
 
 /**
  * Options for the useTableColumns hook.
@@ -61,7 +60,7 @@ export function useTableColumns<TData extends DataRecord>({
     // Create enhanced base columns
     const baseColumns: ColumnDef<TData>[] = [...columns].map(column => {
       const dataTableColumn = column as DataTableColumn<TData>;
-      const baseColumn = {
+      const baseColumn: ColumnDef<TData> = {
         ...column,
         enableSorting: features.sorting && (column.enableSorting !== false),
         enableColumnFilter: features.filtering && (column.enableColumnFilter !== false),
@@ -79,9 +78,9 @@ export function useTableColumns<TData extends DataRecord>({
         !baseColumn.cell
       ) {
         // Inject automatic cell renderer that displays labels in read mode
-        baseColumn.cell = ({ getValue, row, column: col }) => {
+        baseColumn.cell = ({ getValue }: { getValue: () => unknown }) => {
           const value = getValue();
-          const label = findSelectLabel(value as any, dataTableColumn.fieldOptions);
+          const label = findSelectLabel(value as string | number | null, dataTableColumn.fieldOptions);
           
           // Display label if found, otherwise fall back to raw value (backward compatibility)
           // In edit mode, EditableRow will handle rendering the Select component
@@ -123,18 +122,6 @@ export function useTableColumns<TData extends DataRecord>({
       header: ({ table }: HeaderContext<TData, unknown>) => {
         const isAllSelected = table.getIsAllPageRowsSelected();
         const isSomeSelected = table.getIsSomePageRowsSelected();
-        const pageRows = table.getRowModel().rows;
-        const selectedCount = Object.values(table.getState().rowSelection || {}).filter(Boolean).length;
-        
-        // Always log - remove NODE_ENV check for debugging
-        console.log('[DataTable Selection] Header checkbox state:', {
-          isAllSelected,
-          isSomeSelected,
-          pageRowCount: pageRows.length,
-          totalSelectedCount: selectedCount,
-          rowSelection: table.getState().rowSelection,
-          pageRowIds: pageRows.map(row => row.id),
-        });
         
         return React.createElement(Checkbox, {
           checked: isAllSelected,
@@ -142,34 +129,23 @@ export function useTableColumns<TData extends DataRecord>({
           onCheckedChange: (checked: boolean | 'indeterminate') => {
             // Ensure we pass a boolean value
             const shouldSelect = checked === true || checked === 'indeterminate';
-            
-            // Always log - remove NODE_ENV check for debugging
-            console.log('[DataTable Selection] Header checkbox clicked:', {
-              checked,
-              shouldSelect,
-              pageRowCount: pageRows.length,
-              pageRowIds: pageRows.map(row => row.id),
-              currentSelection: table.getState().rowSelection,
-            });
-            
             table.toggleAllPageRowsSelected(shouldSelect);
-            
-            // Log after toggle to see what changed
-            setTimeout(() => {
-              console.log('[DataTable Selection] After toggleAllPageRowsSelected:', {
-                newSelection: table.getState().rowSelection,
-                isAllSelected: table.getIsAllPageRowsSelected(),
-                isSomeSelected: table.getIsSomePageRowsSelected(),
-                pageRowIds: table.getRowModel().rows.map(row => row.id),
-              });
-            }, 0);
           },
           'aria-label': "Select all"
         });
       },
-      cell: ({ row }: CellContext<TData, unknown>) => {
+      cell: ({ row, table }: CellContext<TData, unknown>) => {
+        // CRITICAL FIX: Read selection state directly from table.getState().rowSelection
+        // instead of relying solely on row.getIsSelected() which may not trigger re-renders
+        // when the row object reference doesn't change
+        const rowSelection = table.getState().rowSelection;
+        const rowId = row.id;
+        // Read directly from rowSelection state to ensure reactivity
+        // This ensures the cell re-renders when the rowSelection object reference changes
+        const isSelected = rowSelection[rowId] === true;
+        
         return React.createElement(Checkbox, {
-          checked: row.getIsSelected(),
+          checked: isSelected,
           onCheckedChange: (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
           'aria-label': "Select row"
         });

package/src/components/DataTable/hooks/useTableHandlers.ts

@@ -26,10 +26,8 @@ export interface TableLayoutChange {
 /**
  * Snapshot of table state at a point in time.
  * Used for state persistence and restoration.
- * 
- * @template TData - The type of data records in the table
  */
-export interface TableStateSnapshot<TData extends DataRecord> {
+export interface TableStateSnapshot {
   sorting: SortingState;
   columnFilters: ColumnFiltersState;
   columnVisibility: VisibilityState;
@@ -56,10 +54,10 @@ export interface TableHandlers {
   onColumnOrderChange: (updaterOrValue: unknown) => void;
 }
 
-interface UseTableHandlersOptions<TData extends DataRecord> {
-  state: DataTableState<TData>;
-  stateSnapshot: TableStateSnapshot<TData>;
-  actions: DataTableStateActions<TData>;
+interface UseTableHandlersOptions {
+  state: DataTableState;
+  stateSnapshot: TableStateSnapshot;
+  actions: DataTableStateActions;
   selection?: Record<string, boolean>;
   onRowSelectionChange?: (selection: Record<string, boolean>) => void;
   effectiveColumnOrder: string[];
@@ -70,7 +68,7 @@ interface UseTableHandlersOptions<TData extends DataRecord> {
   onLayoutChange?: (layout: TableLayoutChange) => void;
 }
 
-export function useTableHandlers<TData extends DataRecord>({
+export function useTableHandlers<_TData extends DataRecord = DataRecord>({
   state,
   stateSnapshot,
   actions,
@@ -82,7 +80,8 @@ export function useTableHandlers<TData extends DataRecord>({
   updateSavedColumnVisibility,
   updateColumnOrder,
   onLayoutChange,
-}: UseTableHandlersOptions<TData>): TableHandlers {
+}: UseTableHandlersOptions): TableHandlers {
+
   const handleSortingChange = useCallback((updaterOrValue: unknown) => {
     const nextValue = typeof updaterOrValue === 'function'
       ? (updaterOrValue as (prev: SortingState) => SortingState)(stateSnapshot.sorting)
@@ -120,17 +119,6 @@ export function useTableHandlers<TData extends DataRecord>({
       ? (updaterOrValue as (prev: Record<string, boolean>) => Record<string, boolean>)(currentSelection)
       : updaterOrValue as Record<string, boolean>;
 
-    // Always log - remove NODE_ENV check for debugging
-    console.log('[DataTable Selection] handleRowSelectionChange called:', {
-      isControlled: selection !== undefined,
-      currentSelectionCount: Object.values(currentSelection).filter(Boolean).length,
-      nextSelectionCount: Object.values(nextSelection).filter(Boolean).length,
-      currentSelectionKeys: Object.keys(currentSelection).filter(key => currentSelection[key]),
-      nextSelectionKeys: Object.keys(nextSelection).filter(key => nextSelection[key]),
-      added: Object.keys(nextSelection).filter(key => nextSelection[key] && !currentSelection[key]),
-      removed: Object.keys(currentSelection).filter(key => currentSelection[key] && !nextSelection[key]),
-    });
-
     if (selection === undefined) {
       // Uncontrolled mode - update internal state
       actions.setRowSelection(nextSelection);

package/src/components/DataTable/index.ts

@@ -62,10 +62,32 @@ export type { ColumnDef, SortingState, ColumnFiltersState } from '@tanstack/reac
 export { ColumnFactory } from './core/ColumnFactory';
 
 // Components
-export * from './components';
+export { ActionButtons } from './components/ActionButtons';
+export { BulkOperationsDropdown } from './components/BulkOperationsDropdown';
+export { ColumnVisibilityDropdown } from './components/ColumnVisibilityDropdown';
+export { UnifiedTableBody } from './components/UnifiedTableBody';
+export { EditableRow } from './components/EditableRow';
+export { DataTableToolbar } from './components/DataTableToolbar';
+export { DataTableModals } from './components/DataTableModals';
+export { ImportModal } from './components/ImportModal';
+export type { ImportModalConfig } from './components/ImportModal';
+export { GroupingDropdown } from './components/GroupingDropdown';
+export { LoadingState } from './components/LoadingState';
+export { EmptyState } from './components/EmptyState';
+export { SortIndicator } from './components/SortIndicator';
+export type { SortIndicatorProps } from './components/SortIndicator';
 
 // Utility functions
-export * from './utils';
+export * from './utils/aggregationUtils';
+export * from './utils/exportUtils';
+export * from './utils/rowUtils';
+export * from './utils/hierarchicalUtils';
+export * from './utils/hierarchicalSorting';
+export * from './utils/a11yUtils';
+export * from './utils/paginationUtils';
+export * from './utils/columnUtils';
+export * from './utils/errorHandling';
+export * from './utils/selectFieldUtils';
 
 // Aggregation utilities (explicitly exported for convenience)
 export { sum, average, count, min, max } from './utils/aggregationUtils';

package/src/components/DataTable/types.ts

@@ -9,16 +9,14 @@ import React from 'react';
 import type { 
   SortingState, 
   ColumnFiltersState, 
-  VisibilityState, 
   GroupingState, 
-  ExpandedState,
-  PaginationState,
   ColumnDef
 } from '@tanstack/react-table';
 import type { ImportModalConfig } from './components/ImportModal';
 
 // Extend TanStack Table types to include custom meta properties
 declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData, TValue> {
     /** Text alignment for the column content */
     align?: 'left' | 'right' | 'center';
@@ -26,6 +24,7 @@ declare module '@tanstack/react-table' {
     type?: 'text' | 'number' | 'date' | 'boolean' | 'custom';
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnDefBase<TData, TValue> {
     /** Alternative accessor key used while editing */
     editAccessorKey?: string;
@@ -295,6 +294,8 @@ export interface DataTableColumn<TData extends DataRecord = DataRecord> extends
   filterSelectOptions?: Array<{ value: string | number; label: string }>;
   /** Whether this column is editable in edit mode (default: true) */
   editable?: boolean;
+  /** Alternative CSV headers that should map to this column during import */
+  importAliases?: string[];
   
   // Hierarchical rendering
   /** Custom renderer for parent rows */
@@ -704,6 +705,8 @@ export interface DataTableProps<TData extends DataRecord> {
     id: string;
     desc: boolean;
   }>;
+  /** Initial column visibility state - columns with value `false` will be hidden by default. Keys should match column `id` or `accessorKey`. */
+  initialColumnVisibility?: Record<string, boolean>;
 
   // Event handlers
   /** Row edit handler */

package/src/components/DataTable/utils/__tests__/a11yUtils.test.ts

@@ -42,19 +42,13 @@ describe('[unit] a11yUtils', () => {
   });
 
   describe('initializeLiveRegion', () => {
-    it('creates live region element when none exists', () => {
+    it('creates live region element with correct accessibility attributes', () => {
       const region = initializeLiveRegion();
 
       expect(region).not.toBeNull();
       expect(region).toBeInstanceOf(HTMLElement);
       expect(region?.getAttribute('aria-live')).toBe('polite');
       expect(region?.getAttribute('aria-atomic')).toBe('true');
-      expect(region?.getAttribute('class')).toBe('sr-only');
-      expect(region?.style.position).toBe('absolute');
-      expect(region?.style.left).toBe('-10000px');
-      expect(region?.style.width).toBe('1px');
-      expect(region?.style.height).toBe('1px');
-      expect(region?.style.overflow).toBe('hidden');
       expect(document.body.contains(region!)).toBe(true);
     });
 
@@ -75,16 +69,6 @@ describe('[unit] a11yUtils', () => {
       expect(document.body.contains(secondRegion!)).toBe(true);
     });
 
-    it('returns null in SSR environment', () => {
-      const originalWindow = global.window;
-      // @ts-expect-error - Testing SSR scenario
-      delete global.window;
-
-      const region = initializeLiveRegion();
-      expect(region).toBeNull();
-
-      global.window = originalWindow;
-    });
   });
 
   describe('cleanupLiveRegion', () => {
@@ -96,12 +80,12 @@ describe('[unit] a11yUtils', () => {
       expect(document.body.contains(region!)).toBe(false);
     });
 
-    it('sets live region to null after cleanup', () => {
+    it('handles multiple cleanup calls gracefully', () => {
       initializeLiveRegion();
       cleanupLiveRegion();
       
       // Second call should not throw
-      cleanupLiveRegion();
+      expect(() => cleanupLiveRegion()).not.toThrow();
       expect(document.body.querySelector('.sr-only[aria-live]')).toBeNull();
     });
 
@@ -109,22 +93,7 @@ describe('[unit] a11yUtils', () => {
       expect(() => cleanupLiveRegion()).not.toThrow();
     });
 
-    it('handles cleanup when region is not in document', () => {
-      const region = initializeLiveRegion();
-      document.body.removeChild(region!);
-      
-      expect(() => cleanupLiveRegion()).not.toThrow();
-    });
-
-    it('returns early in SSR environment', () => {
-      const originalWindow = global.window;
-      // @ts-expect-error - Testing SSR scenario
-      delete global.window;
 
-      expect(() => cleanupLiveRegion()).not.toThrow();
-
-      global.window = originalWindow;
-    });
   });
 
   describe('announce', () => {
@@ -172,30 +141,6 @@ describe('[unit] a11yUtils', () => {
       expect(region.textContent).toBe('');
     });
 
-    it('does not clear message if content changed during delay', () => {
-      initializeLiveRegion();
-      announce('First message');
-      vi.advanceTimersByTime(100);
-      
-      const region = document.body.querySelector('.sr-only[aria-live]') as HTMLElement;
-      expect(region.textContent).toBe('First message');
-
-      // Announce new message before first timeout clears
-      announce('Second message');
-      vi.advanceTimersByTime(100);
-      expect(region.textContent).toBe('Second message');
-
-      // First timeout should not clear since content changed (it was 'Second message', not 'First message')
-      vi.advanceTimersByTime(900);
-      // The second timeout should clear it after 1000ms, but we need to advance past the first timeout
-      // The first timeout (1000ms after first announce) checks if textContent === 'First message'
-      // Since it's now 'Second message', it won't clear
-      // Then we advance to the second timeout (1000ms after second announce)
-      vi.advanceTimersByTime(100);
-      // Now the second timeout should check if textContent === 'Second message' and clear it
-      expect(region.textContent).toBe('');
-    });
-
     it('does not announce empty or whitespace-only messages', () => {
       initializeLiveRegion();
       const region = document.body.querySelector('.sr-only[aria-live]') as HTMLElement;
@@ -208,15 +153,6 @@ describe('[unit] a11yUtils', () => {
       expect(region.textContent).toBe('');
     });
 
-    it('returns early in SSR environment', () => {
-      const originalWindow = global.window;
-      // @ts-expect-error - Testing SSR scenario
-      delete global.window;
-
-      expect(() => announce('Test message')).not.toThrow();
-
-      global.window = originalWindow;
-    });
 
     it('initializes live region if not already initialized', () => {
       announce('Auto-init message');