@jmruthers/pace-core 0.6.9 → 0.6.10

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

@@ -0,0 +1,440 @@
+/**
+ * @file Unit Tests for useTableHandlers Hook
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Hooks/__tests__
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useTableHandlers } from '../useTableHandlers';
+import type { DataTableState, DataTableStateActions } from '../useDataTableState';
+import type { TableStateSnapshot } from '../useTableHandlers';
+import type { DataRecord } from '../../types';
+import type { SortingState, ColumnFiltersState, VisibilityState, GroupingState, ExpandedState, PaginationState } from '@tanstack/react-table';
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+}
+
+describe('[unit] useTableHandlers', () => {
+  const createMockState = (): DataTableState<TestData> => ({
+    sorting: [],
+    columnFilters: [],
+    columnVisibility: {},
+    rowSelection: {},
+    grouping: [],
+    expanded: {},
+    pagination: { pageIndex: 0, pageSize: 10 },
+    columnOrder: ['id', 'name'],
+    globalFilter: '',
+  });
+
+  const createMockStateSnapshot = (): TableStateSnapshot<TestData> => ({
+    sorting: [],
+    columnFilters: [],
+    columnVisibility: {},
+    rowSelection: {},
+    grouping: [],
+    expanded: {},
+    pagination: { pageIndex: 0, pageSize: 10 },
+    columnOrder: ['id', 'name'],
+    globalFilter: '',
+  });
+
+  const createMockActions = (): DataTableStateActions<TestData> => ({
+    setSorting: vi.fn(),
+    setColumnFilters: vi.fn(),
+    setColumnVisibility: vi.fn(),
+    setRowSelection: vi.fn(),
+    setGrouping: vi.fn(),
+    setExpanded: vi.fn(),
+    setPagination: vi.fn(),
+    setColumnOrder: vi.fn(),
+    setGlobalFilter: vi.fn(),
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Sorting Handler', () => {
+    it('handles sorting change with value', () => {
+      const actions = createMockActions();
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder: vi.fn(),
+      }));
+
+      const newSorting: SortingState = [{ id: 'name', desc: true }];
+      act(() => {
+        result.current.onSortingChange(newSorting);
+      });
+
+      expect(actions.setSorting).toHaveBeenCalledWith(newSorting);
+    });
+
+    it('handles sorting change with updater function', () => {
+      const actions = createMockActions();
+      const snapshot = createMockStateSnapshot();
+      snapshot.sorting = [{ id: 'id', desc: false }];
+
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: snapshot,
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder: vi.fn(),
+      }));
+
+      act(() => {
+        result.current.onSortingChange((prev) => [...prev, { id: 'name', desc: true }]);
+      });
+
+      expect(actions.setSorting).toHaveBeenCalledWith([
+        { id: 'id', desc: false },
+        { id: 'name', desc: true },
+      ]);
+    });
+  });
+
+  describe('Column Filters Handler', () => {
+    it('handles column filters change with value', () => {
+      const actions = createMockActions();
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder: vi.fn(),
+      }));
+
+      const newFilters: ColumnFiltersState = [{ id: 'name', value: 'test' }];
+      act(() => {
+        result.current.onColumnFiltersChange(newFilters);
+      });
+
+      expect(actions.setColumnFilters).toHaveBeenCalledWith(newFilters);
+    });
+
+    it('handles column filters change with updater function', () => {
+      const actions = createMockActions();
+      const snapshot = createMockStateSnapshot();
+      snapshot.columnFilters = [{ id: 'id', value: '1' }];
+
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: snapshot,
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder: vi.fn(),
+      }));
+
+      act(() => {
+        result.current.onColumnFiltersChange((prev) => [...prev, { id: 'name', value: 'test' }]);
+      });
+
+      expect(actions.setColumnFilters).toHaveBeenCalledWith([
+        { id: 'id', value: '1' },
+        { id: 'name', value: 'test' },
+      ]);
+    });
+  });
+
+  describe('Column Visibility Handler', () => {
+    it('handles column visibility change and persists when enabled', () => {
+      const actions = createMockActions();
+      const updateSavedColumnVisibility = vi.fn();
+      const onLayoutChange = vi.fn();
+
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: true,
+        canPersistOrder: false,
+        updateSavedColumnVisibility,
+        updateColumnOrder: vi.fn(),
+        onLayoutChange,
+      }));
+
+      const newVisibility: VisibilityState = { name: false };
+      act(() => {
+        result.current.onColumnVisibilityChange(newVisibility);
+      });
+
+      expect(actions.setColumnVisibility).toHaveBeenCalledWith(newVisibility);
+      expect(updateSavedColumnVisibility).toHaveBeenCalledWith(newVisibility);
+      expect(onLayoutChange).toHaveBeenCalledWith({
+        columnOrder: ['id', 'name'],
+        columnVisibility: newVisibility,
+      });
+    });
+
+    it('does not persist when persistence is disabled', () => {
+      const actions = createMockActions();
+      const updateSavedColumnVisibility = vi.fn();
+
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility,
+        updateColumnOrder: vi.fn(),
+      }));
+
+      const newVisibility: VisibilityState = { name: false };
+      act(() => {
+        result.current.onColumnVisibilityChange(newVisibility);
+      });
+
+      expect(actions.setColumnVisibility).toHaveBeenCalledWith(newVisibility);
+      expect(updateSavedColumnVisibility).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Row Selection Handler', () => {
+    it('handles row selection change in uncontrolled mode', () => {
+      const actions = createMockActions();
+      const onRowSelectionChange = vi.fn();
+      const state = createMockState();
+      state.rowSelection = { '1': true };
+
+      const { result } = renderHook(() => useTableHandlers({
+        state,
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder: vi.fn(),
+        onRowSelectionChange,
+      }));
+
+      const newSelection = { '1': false, '2': true };
+      act(() => {
+        result.current.onRowSelectionChange(newSelection);
+      });
+
+      expect(actions.setRowSelection).toHaveBeenCalledWith(newSelection);
+      expect(onRowSelectionChange).toHaveBeenCalledWith(newSelection);
+    });
+
+    it('handles row selection change in controlled mode', () => {
+      const actions = createMockActions();
+      const onRowSelectionChange = vi.fn();
+      const selection = { '1': true };
+
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        selection,
+        onRowSelectionChange,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder: vi.fn(),
+      }));
+
+      const newSelection = { '1': false, '2': true };
+      act(() => {
+        result.current.onRowSelectionChange(newSelection);
+      });
+
+      expect(actions.setRowSelection).not.toHaveBeenCalled();
+      expect(onRowSelectionChange).toHaveBeenCalledWith(newSelection);
+    });
+
+    it('handles row selection change with updater function', () => {
+      const actions = createMockActions();
+      const state = createMockState();
+      state.rowSelection = { '1': true };
+
+      const { result } = renderHook(() => useTableHandlers({
+        state,
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder: vi.fn(),
+      }));
+
+      act(() => {
+        result.current.onRowSelectionChange((prev) => ({ ...prev, '2': true }));
+      });
+
+      expect(actions.setRowSelection).toHaveBeenCalledWith({ '1': true, '2': true });
+    });
+  });
+
+  describe('Column Order Handler', () => {
+    it('handles column order change and persists when enabled', () => {
+      const actions = createMockActions();
+      const updateColumnOrder = vi.fn();
+      const onLayoutChange = vi.fn();
+      const snapshot = createMockStateSnapshot();
+      snapshot.columnVisibility = { name: true };
+
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: snapshot,
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: true,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder,
+        onLayoutChange,
+      }));
+
+      const newOrder = ['name', 'id'];
+      act(() => {
+        result.current.onColumnOrderChange(newOrder);
+      });
+
+      expect(actions.setColumnOrder).toHaveBeenCalledWith(newOrder);
+      expect(updateColumnOrder).toHaveBeenCalledWith(newOrder);
+      expect(onLayoutChange).toHaveBeenCalledWith({
+        columnOrder: newOrder,
+        columnVisibility: { name: true },
+      });
+    });
+
+    it('normalizes column order to keep select first', () => {
+      const actions = createMockActions();
+      const updateColumnOrder = vi.fn();
+
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['select', 'id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: true,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder,
+      }));
+
+      const newOrder = ['id', 'select', 'name'];
+      act(() => {
+        result.current.onColumnOrderChange(newOrder);
+      });
+
+      expect(actions.setColumnOrder).toHaveBeenCalledWith(['select', 'id', 'name']);
+      expect(updateColumnOrder).toHaveBeenCalledWith(['select', 'id', 'name']);
+    });
+
+    it('does not persist when persistence is disabled', () => {
+      const actions = createMockActions();
+      const updateColumnOrder = vi.fn();
+
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder,
+      }));
+
+      const newOrder = ['name', 'id'];
+      act(() => {
+        result.current.onColumnOrderChange(newOrder);
+      });
+
+      expect(actions.setColumnOrder).toHaveBeenCalledWith(newOrder);
+      expect(updateColumnOrder).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Other Handlers', () => {
+    it('handles grouping change', () => {
+      const actions = createMockActions();
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder: vi.fn(),
+      }));
+
+      const newGrouping: GroupingState = ['name'];
+      act(() => {
+        result.current.onGroupingChange(newGrouping);
+      });
+
+      expect(actions.setGrouping).toHaveBeenCalledWith(newGrouping);
+    });
+
+    it('handles expanded change', () => {
+      const actions = createMockActions();
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder: vi.fn(),
+      }));
+
+      const newExpanded: ExpandedState = { '1': true };
+      act(() => {
+        result.current.onExpandedChange(newExpanded);
+      });
+
+      expect(actions.setExpanded).toHaveBeenCalledWith(newExpanded);
+    });
+
+    it('handles pagination change', () => {
+      const actions = createMockActions();
+      const { result } = renderHook(() => useTableHandlers({
+        state: createMockState(),
+        stateSnapshot: createMockStateSnapshot(),
+        actions,
+        effectiveColumnOrder: ['id', 'name'],
+        canPersistVisibility: false,
+        canPersistOrder: false,
+        updateSavedColumnVisibility: vi.fn(),
+        updateColumnOrder: vi.fn(),
+      }));
+
+      const newPagination: PaginationState = { pageIndex: 1, pageSize: 20 };
+      act(() => {
+        result.current.onPaginationChange(newPagination);
+      });
+
+      expect(actions.setPagination).toHaveBeenCalledWith(newPagination);
+    });
+  });
+});

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { createLogger } from '../../../utils/core/logger';
 
 /**
@@ -24,14 +24,16 @@ export function useColumnOrderPersistence({
   enablePersistence = false,
   storageKey,
 }: UseColumnOrderPersistenceProps) {
-  const logger = createLogger('ColumnOrderPersistence');
+  const logger = useMemo(() => createLogger('ColumnOrderPersistence'), []);
   const [columnOrder, setColumnOrder] = useState<string[]>(defaultOrder);
   const [isLoaded, setIsLoaded] = useState(false);
 
-  // Generate a unique key for this table
-  const finalStorageKey = storageKey 
-    ? `${storageKey}-column-order` 
-    : (tableId ? `datatable-column-order-${tableId}` : 'datatable-column-order');
+  // Generate a unique key for this table (memoized to prevent effect re-runs)
+  const finalStorageKey = useMemo(() => {
+    return storageKey 
+      ? `${storageKey}-column-order` 
+      : (tableId ? `datatable-column-order-${tableId}` : 'datatable-column-order');
+  }, [storageKey, tableId]);
 
   // Load column order from localStorage on mount
   useEffect(() => {
@@ -59,6 +61,7 @@ export function useColumnOrderPersistence({
     } finally {
       setIsLoaded(true);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enablePersistence, finalStorageKey, storageKey, tableId]);
 
   // Save column order to localStorage
@@ -73,7 +76,7 @@ export function useColumnOrderPersistence({
     } catch (error) {
         logger.warn('Failed to save column order to localStorage:', error);
     }
-  }, [enablePersistence, finalStorageKey, storageKey, tableId]);
+  }, [enablePersistence, finalStorageKey, storageKey, tableId, logger]);
 
   // Update column order and save to localStorage
   const updateColumnOrder = useCallback((newOrder: string[]) => {
@@ -91,7 +94,7 @@ export function useColumnOrderPersistence({
         logger.warn('Failed to remove column order from localStorage:', error);
       }
     }
-  }, [defaultOrder, enablePersistence, finalStorageKey, storageKey, tableId]);
+  }, [defaultOrder, enablePersistence, finalStorageKey, storageKey, tableId, logger]);
 
   // Clear all saved preferences
   const clearAllPreferences = useCallback(() => {
@@ -108,7 +111,7 @@ export function useColumnOrderPersistence({
     } catch (error) {
         logger.warn('Failed to clear datatable preferences:', error);
     }
-  }, [enablePersistence]);
+  }, [enablePersistence, logger]);
 
   return {
     columnOrder,

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { createLogger } from '../../../utils/core/logger';
 
 /**
@@ -24,14 +24,16 @@ export function useColumnVisibilityPersistence({
   enablePersistence = false,
   storageKey,
 }: UseColumnVisibilityPersistenceProps) {
-  const logger = createLogger('ColumnVisibilityPersistence');
+  const logger = useMemo(() => createLogger('ColumnVisibilityPersistence'), []);
   const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>(defaultVisibility);
   const [isLoaded, setIsLoaded] = useState(false);
 
-  // Generate a unique key for this table
-  const finalStorageKey = storageKey 
-    ? `${storageKey}-column-visibility` 
-    : (tableId ? `datatable-column-visibility-${tableId}` : 'datatable-column-visibility');
+  // Generate a unique key for this table (memoized to prevent effect re-runs)
+  const finalStorageKey = useMemo(() => {
+    return storageKey 
+      ? `${storageKey}-column-visibility` 
+      : (tableId ? `datatable-column-visibility-${tableId}` : 'datatable-column-visibility');
+  }, [storageKey, tableId]);
 
   // Load column visibility from localStorage on mount
   useEffect(() => {
@@ -53,6 +55,7 @@ export function useColumnVisibilityPersistence({
     } finally {
       setIsLoaded(true);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enablePersistence, finalStorageKey]);
 
   // Save column visibility to localStorage
@@ -64,7 +67,7 @@ export function useColumnVisibilityPersistence({
     } catch (error) {
         logger.warn('Failed to save column visibility to localStorage:', error);
     }
-  }, [enablePersistence, finalStorageKey]);
+  }, [enablePersistence, finalStorageKey, logger]);
 
   // Update column visibility and save to localStorage
   const updateColumnVisibility = useCallback((newVisibility: Record<string, boolean>) => {
@@ -82,7 +85,7 @@ export function useColumnVisibilityPersistence({
         logger.warn('Failed to remove column visibility from localStorage:', error);
       }
     }
-  }, [defaultVisibility, enablePersistence, finalStorageKey]);
+  }, [defaultVisibility, enablePersistence, finalStorageKey, logger]);
 
   // Clear all saved preferences
   const clearAllPreferences = useCallback(() => {
@@ -99,7 +102,7 @@ export function useColumnVisibilityPersistence({
     } catch (error) {
         logger.warn('Failed to clear datatable preferences:', error);
     }
-  }, [enablePersistence]);
+  }, [enablePersistence, logger]);
 
   return {
     columnVisibility,

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

@@ -20,7 +20,7 @@ import type { TableHandlers, TableStateSnapshot } from './useTableHandlers';
 interface UseDataTableConfigurationOptions<TData extends DataRecord> {
   data: TData[];
   columns: ColumnDef<TData>[];
-  stateSnapshot: TableStateSnapshot<TData>;
+  stateSnapshot: TableStateSnapshot;
   handlers: TableHandlers;
   features: NormalizedDataTableFeatureConfig;
   getRowId: GetRowId<TData>;

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

@@ -10,7 +10,8 @@
 
 import { useMemo, useRef, useState, useEffect } from 'react';
 import { useUnifiedAuth } from '../../../providers/services/UnifiedAuthProvider';
-import { useCan, useResolvedScope } from '../../../rbac/hooks';
+import { useCan } from '../../../rbac/hooks/usePermissions';
+import { useResolvedScope } from '../../../rbac/hooks/useResolvedScope';
 import { createLogger } from '../../../utils/core/logger';
 import { isSuperAdmin } from '../../../rbac/api';
 import {
@@ -48,7 +49,7 @@ export interface UseDataTablePermissionsReturn {
  * @param features - Feature configuration to secure
  * @returns Permission checks and secure feature configuration
  */
-export function useDataTablePermissions<TData extends DataRecord>(
+export function useDataTablePermissions<_TData extends DataRecord>(
   rbac: DataTableRBACConfig,
   features: DataTableFeatureConfig = {}
 ): UseDataTablePermissionsReturn {
@@ -118,7 +119,7 @@ export function useDataTablePermissions<TData extends DataRecord>(
     };
 
     checkSuperAdminStatus();
-  }, [user?.id, logger]);
+  }, [user?.id, logger, isSuperAdminUser]);
 
   // MANDATORY: Check all permissions upfront - ALWAYS enforce RBAC
   // Use page-based permissions exclusively
@@ -310,25 +311,13 @@ export function useDataTablePermissions<TData extends DataRecord>(
   }, [
     isSuperAdminUser,
     isCheckingSuperAdmin,
-    // React 19 fix: Include individual properties instead of entire objects to ensure proper dependency tracking
-    canReadResult.can,
-    canReadResult.isLoading,
-    canReadResult.error,
-    canCreateResult.can,
-    canCreateResult.isLoading,
-    canCreateResult.error,
-    canUpdateResult.can,
-    canUpdateResult.isLoading,
-    canUpdateResult.error,
-    canDeleteResult.can,
-    canDeleteResult.isLoading,
-    canDeleteResult.error,
-    canExportResult.can,
-    canExportResult.isLoading,
-    canExportResult.error,
-    canImportResult.can,
-    canImportResult.isLoading,
-    canImportResult.error,
+    // Include result objects - individual properties are already part of the objects
+    canReadResult,
+    canCreateResult,
+    canUpdateResult,
+    canDeleteResult,
+    canExportResult,
+    canImportResult,
   ]);
 
   // MANDATORY: Features are automatically filtered by permissions