@jmruthers/pace-core 0.5.191 → 0.6.1

package/src/components/DataTable/__tests__/pagination.modes.test.tsx

@@ -9,7 +9,8 @@
  */
 
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { DataTable } from '../DataTable';
 import { getPaginationBinding, getPageSizeOptions, calculateOptimalPageSize } from '../utils/paginationUtils';
@@ -76,8 +77,47 @@ vi.mock('../../../providers/services/UnifiedAuthProvider', () => ({
 
 // Mock RBAC hooks
 vi.mock('../../../rbac/hooks', () => ({
-  useCan: () => ({ can: true, reason: null }),
-  useResolvedScope: () => ({ pageId: 'test-page-id' }),
+  useCan: () => ({ can: true, isLoading: false, error: null }),
+  useResolvedScope: () => ({ 
+    resolvedScope: {
+      organisationId: 'test-org', 
+      eventId: 'test-event',
+      appId: 'test-app'
+    },
+    isLoading: false
+  }),
+}));
+
+// Mock useDataTablePermissions to return non-loading permissions
+const mockUseDataTablePermissions = vi.hoisted(() => vi.fn(() => ({
+  permissions: {
+    canRead: { can: true, isLoading: false, error: null },
+    canCreate: { can: true, isLoading: false, error: null },
+    canUpdate: { can: true, isLoading: false, error: null },
+    canDelete: { can: true, isLoading: false, error: null },
+    canExport: { can: true, isLoading: false, error: null },
+    canImport: { can: true, isLoading: false, error: null },
+  },
+  secureFeatures: {
+    search: true,
+    sorting: true,
+    pagination: true,
+    selection: true,
+    creation: true,
+    editing: true,
+    deletion: true,
+    deleteSelected: true,
+    export: true,
+    import: true,
+    columnVisibility: true,
+    filtering: true,
+    grouping: true,
+  },
+  effectivePageId: 'test-pagination',
+})));
+
+vi.mock('../hooks/useDataTablePermissions', () => ({
+  useDataTablePermissions: mockUseDataTablePermissions
 }));
 
 // Mock toast
@@ -300,7 +340,7 @@ describe('DataTable Pagination Integration', () => {
   const largeDataset = generateTestData(100);
 
   describe('Client Mode Integration', () => {
-    it('should render pagination controls for client mode', () => {
+    it('should render pagination controls for client mode', async () => {
       render(
         <DataTable
           data={smallDataset}
@@ -328,11 +368,17 @@ describe('DataTable Pagination Integration', () => {
         />
       );
 
-      expect(screen.getByText('Page 1 of 3')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Page 1 of 3')).toBeInTheDocument();
       expect(screen.getByText('Rows per page')).toBeInTheDocument();
     });
 
     it('should navigate pages correctly in client mode', async () => {
+      const user = userEvent.setup();
       render(
         <DataTable
           data={smallDataset}
@@ -360,16 +406,27 @@ describe('DataTable Pagination Integration', () => {
         />
       );
 
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
       // Should start on page 1
-      expect(screen.getByText('Page 1 of 3')).toBeInTheDocument();
+      expect(await screen.findByText('Page 1 of 3')).toBeInTheDocument();
 
-      // Click next page
+      // Click next page using userEvent
       const nextButton = screen.getByLabelText('Go to next page');
-      fireEvent.click(nextButton);
-
+      
+      // Click the button - this triggers table.nextPage() which calls onPaginationChange
+      // The onPaginationChange handler updates React state, which should trigger a re-render
+      await user.click(nextButton);
+      
+      // Wait for the page text to update - TanStack Table updates state synchronously,
+      // but React needs to process the state update and re-render
+      // We wait for the text to change, which indicates the component has re-rendered
       await waitFor(() => {
         expect(screen.getByText('Page 2 of 3')).toBeInTheDocument();
-      });
+      }, { timeout: 10000, interval: 100 });
     });
 
     // Note: Page size change test removed due to test environment issues with Select component
@@ -493,7 +550,7 @@ describe('DataTable Pagination Integration', () => {
   });
 
   describe('Edge Cases', () => {
-    it('should handle empty datasets gracefully', () => {
+    it('should handle empty datasets gracefully', async () => {
       render(
         <DataTable
           data={[]}
@@ -520,10 +577,15 @@ describe('DataTable Pagination Integration', () => {
         />
       );
 
-      expect(screen.getByText('Page 1 of 1')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Page 1 of 1')).toBeInTheDocument();
     });
 
-    it('should handle single page datasets', () => {
+    it('should handle single page datasets', async () => {
       const singlePageData = generateTestData(5);
       
       render(
@@ -553,7 +615,12 @@ describe('DataTable Pagination Integration', () => {
         />
       );
 
-      expect(screen.getByText('Page 1 of 1')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Page 1 of 1')).toBeInTheDocument();
       
       // Navigation buttons should be disabled
       expect(screen.getByLabelText('Go to previous page')).toBeDisabled();
@@ -587,7 +654,7 @@ describe('DataTable Pagination Integration', () => {
 // ============================================================================
 
 describe('Pagination Performance', () => {
-  it('should handle large datasets efficiently in client mode', () => {
+  it('should handle large datasets efficiently in client mode', async () => {
     const largeDataset = generateTestData(10000);
     
     const startTime = performance.now();
@@ -624,7 +691,12 @@ describe('Pagination Performance', () => {
     
     // Should render within reasonable time (adjust threshold as needed)
     expect(renderTime).toBeLessThan(1000); // 1 second
-    expect(screen.getByText('Page 1 of 200')).toBeInTheDocument();
+    // Wait for table to render
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    expect(await screen.findByText('Page 1 of 200')).toBeInTheDocument();
   });
 
   it('should use appropriate page sizes for different modes', () => {

package/src/components/DataTable/__tests__/ssr.strict-mode.test.tsx

@@ -4,7 +4,7 @@
  * @module Components/DataTable/__tests__
  * @since 2.0.0
  *
- * Tests for SSR safety and React 18 strict mode compatibility.
+ * Tests for SSR safety and React 19 strict mode compatibility.
  */
 
 import React from 'react';
@@ -39,7 +39,7 @@ const testColumns: DataTableColumn<TestData>[] = [
   },
 ];
 
-const defaultProps = {
+const baseProps = {
   data: testData,
   columns: testColumns,
   rbac: { pageId: 'test' },
@@ -92,7 +92,7 @@ describe('DataTable SSR and Strict Mode Compatibility', () => {
       (global as any).window = {} as any;
 
       expect(() => {
-        React.createElement(SafeDataTable, defaultProps);
+        React.createElement(SafeDataTable, baseProps);
       }).not.toThrow();
 
       global.window = originalWindow;
@@ -104,7 +104,7 @@ describe('DataTable SSR and Strict Mode Compatibility', () => {
       (global as any).localStorage = undefined as any;
 
       expect(() => {
-        React.createElement(SafeDataTable, defaultProps);
+        React.createElement(SafeDataTable, baseProps);
       }).not.toThrow();
 
       global.localStorage = originalLocalStorage;
@@ -116,20 +116,20 @@ describe('DataTable SSR and Strict Mode Compatibility', () => {
       (global as any).document = {} as any;
 
       expect(() => {
-        React.createElement(SafeDataTable, defaultProps);
+        React.createElement(SafeDataTable, baseProps);
       }).not.toThrow();
 
       global.document = originalDocument;
     });
   });
 
-  describe('React 18 Strict Mode Compatibility', () => {
+  describe('React 19 Strict Mode Compatibility', () => {
     it('should handle strict mode double-invoke without errors', () => {
       let renderCount = 0;
       
       const TestComponent = () => {
         renderCount++;
-        return <SafeDataTable {...defaultProps} />;
+        return <SafeDataTable {...baseProps} />;
       };
 
       expect(() => {
@@ -153,7 +153,7 @@ describe('DataTable SSR and Strict Mode Compatibility', () => {
           };
         }, []);
 
-        return <SafeDataTable {...defaultProps} />;
+        return <SafeDataTable {...baseProps} />;
       };
 
       expect(() => {
@@ -176,7 +176,7 @@ describe('DataTable SSR and Strict Mode Compatibility', () => {
         return (
           <div>
             <span data-testid="count">{count}</span>
-            <SafeDataTable {...defaultProps} />
+            <SafeDataTable {...baseProps} />
           </div>
         );
       };
@@ -270,7 +270,7 @@ describe('DataTable SSR and Strict Mode Compatibility', () => {
 
         return (
           <div>
-            <SafeDataTable {...defaultProps} />
+            <SafeDataTable {...baseProps} />
             {mounted && <div data-testid="client-only">Client Only</div>}
           </div>
         );
@@ -291,7 +291,7 @@ describe('DataTable SSR and Strict Mode Compatibility', () => {
 
         return (
           <div>
-            <SafeDataTable {...defaultProps} />
+            <SafeDataTable {...baseProps} />
             <div data-testid="client-state">
               {isClient ? 'Client' : 'Server'}
             </div>
@@ -311,7 +311,7 @@ describe('DataTable SSR and Strict Mode Compatibility', () => {
       
       render(
         <React.StrictMode>
-          <SafeDataTable {...defaultProps} />
+          <SafeDataTable {...baseProps} />
         </React.StrictMode>
       );
       

package/src/components/DataTable/components/AccessDeniedPage.tsx

@@ -33,7 +33,7 @@
  * - Card component for layout
  * - Button component for actions
  * - Lucide React icons
- * - React 18+ hooks
+ * - React 19+ hooks
  */
 
 import React from 'react';

package/src/components/DataTable/components/BulkOperationsDropdown.tsx

@@ -38,7 +38,7 @@
  * - Select components (formerly DropdownMenu)
  * - Button component
  * - Lucide React icons
- * - React 18+ hooks
+ * - React 19+ hooks
  */
 
 import React from 'react';

package/src/components/DataTable/components/DataTableCore.tsx

@@ -8,12 +8,10 @@
  * This is the main component that consumers will use.
  */
 
-import React, { useMemo, useCallback, useEffect, useState, useRef } from 'react';
-import { useReactTable, flexRender } from '@tanstack/react-table';
+import React, { useMemo, useCallback, useEffect, useRef } from 'react';
+import { useReactTable } from '@tanstack/react-table';
 import type {
   SortingState,
-  ColumnFiltersState,
-  VisibilityState,
   GroupingState,
   ExpandedState,
   PaginationState,
@@ -159,7 +157,7 @@ export interface DataTableCoreProps<TData extends DataRecord> {
   // Utilities
   getRowId?: GetRowId<TData>;
   isLoading?: boolean;
-  emptyState?: EmptyStateConfig | React.ReactElement;
+  emptyState?: EmptyStateConfig | React.ReactElement<any>;
   aggregates?: AggregateConfig[];
   importModalConfig?: ImportModalConfig;
   actions?: DataTableAction<TData>[];
@@ -220,7 +218,7 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
     onLayoutChange,
   } = props;
   
-  const logger = React.useMemo(() => createLogger('DataTableCore'), []);
+  const logger = createLogger('DataTableCore');
   
   // ============================================================================
   // ALL HOOKS MUST BE CALLED IN THE SAME ORDER EVERY RENDER
@@ -1234,7 +1232,6 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
         )}
 
       </table>
-
       {/* Modal Dialogs */}
       <DataTableModals
         showImportModal={state.showImportModal}

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

@@ -184,7 +184,7 @@ export function DataTableModals<TData extends Record<string, unknown> = Record<s
   onStoreFocus,
   onRestoreFocus,
 }: DataTableModalsProps<TData>) {
-  const logger = React.useMemo(() => createLogger('DataTableModals'), []);
+  const logger = createLogger('DataTableModals');
   // Handle focus management for import modal
   useEffect(() => {
     if (showImportModal) {

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

@@ -45,7 +45,7 @@ function SelectEditField<TData extends DataRecord>({
   onChange: (value: CellValue) => void;
   className?: string;
 }) {
-  const logger = React.useMemo(() => createLogger('SelectEditField'), []);
+  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)

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -23,6 +23,7 @@ import { getTableCellClasses, getTableHeadClasses, getTableRowClasses } from '..
 import { Input } from '../../Input/Input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectGroup, SelectLabel, SelectSeparator } from '../../Select/Select';
 import { createLogger } from '../../../utils/core/logger';
+import { cn } from '../../../utils/core/cn';
 import type {
   AggregateConfig,
   DataRecord,
@@ -136,7 +137,7 @@ function SelectEditField<TData extends DataRecord>({
   placeholder?: string;
   onChange: (value: CellValue) => void;
 }) {
-  const logger = React.useMemo(() => createLogger('SelectEditField'), []);
+  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)
@@ -516,7 +517,7 @@ const RowComponent = React.memo(({
 }: RowProps) => {
   const rowRef = useRef<HTMLTableRowElement>(null);
   const firstInputRef = useRef<HTMLInputElement>(null);
-  const logger = React.useMemo(() => createLogger('RowComponent'), []);
+  const logger = createLogger('RowComponent');
   
   const rowId = getRowIdSafe(row.original, row.index, getRowId);
   
@@ -526,6 +527,10 @@ const RowComponent = React.memo(({
   const isParent = isHierarchical && hierarchicalRow.isParent;
   const isChild = isHierarchical && !hierarchicalRow.isParent;
   
+  // React Compiler handles memoization automatically
+  const visibleCells = row.getVisibleCells();
+  const isSelected = typeof row.getIsSelected === 'function' ? row.getIsSelected() : false;
+  
   // Auto-focus first editable field when entering edit mode
   useEffect(() => {
     if (isEditing && firstInputRef.current) {
@@ -565,7 +570,6 @@ const RowComponent = React.memo(({
     const groupValue = row.getValue(grouping[0]);
     const subRowsCount = row.subRows?.length || 0;
     const isExpanded = row.getIsExpanded();
-    const visibleCells = row.getVisibleCells();
     
     // Get child rows for aggregation (convert TanStack Row to original data)
     const childRows: DataRecord[] = row.subRows?.map((subRow: any) => subRow.original) || [];
@@ -709,20 +713,30 @@ const RowComponent = React.memo(({
   }
   
   // Regular row (not in edit mode)
-  const visibleCells = row.getVisibleCells();
-  const allCells = row.getAllCells ? row.getAllCells() : [];
+  // visibleCells is already memoized above
   
   // Calculate indentation for child rows
   const indentSize = hierarchical?.indentSize || 24;
-  const indentation = isChild && hierarchical?.state ? 
-    calculateIndentation(hierarchicalRow, [], indentSize) : 0;
+  const indentation = React.useMemo(() => {
+    return isChild && hierarchical?.state ? 
+      calculateIndentation(hierarchicalRow, [], indentSize) : 0;
+  }, [isChild, hierarchical?.state, hierarchicalRow, indentSize]);
   
-  // Apply hierarchical row classes
-  const rowClassName = isHierarchical ? (
-    isParent 
-      ? hierarchical?.parentRowClassName || 'bg-main-50 hover:bg-main-100 font-medium'
-      : hierarchical?.childRowClassName || 'bg-sec-25 hover:bg-sec-50'
-  ) : '';
+  // Apply hierarchical row classes - combine with standard row classes
+  const rowClassName = React.useMemo(() => {
+    if (isHierarchical) {
+      const hierarchicalClass = isParent 
+        ? hierarchical?.parentRowClassName || 'bg-main-50 hover:bg-main-100 font-medium'
+        : hierarchical?.childRowClassName || 'bg-sec-25 hover:bg-sec-50';
+      // Combine with standard row classes for consistent hover behavior
+      return cn(
+        getTableRowClasses({ isSelected, isVirtualized: false }),
+        hierarchicalClass
+      );
+    }
+    // Use standard row classes when not hierarchical
+    return getTableRowClasses({ isSelected, isVirtualized: false });
+  }, [isHierarchical, isParent, isSelected, hierarchical]);
   
   return (
     <tr 
@@ -734,7 +748,7 @@ const RowComponent = React.memo(({
         ...(isChild && indentation > 0 ? { paddingLeft: `${indentation}px` } : {})
       }}
       className={rowClassName}
-      aria-selected={typeof row.getIsSelected === 'function' ? (row.getIsSelected() ? 'true' : 'false') : 'false'}
+      aria-selected={isSelected ? 'true' : 'false'}
     >
       {visibleCells.map((cell: any, cellIndex: number) => {
         const isFirstCell = cellIndex === 0;
@@ -797,8 +811,63 @@ const RowComponent = React.memo(({
 
 RowComponent.displayName = 'RowComponent';
 
-// Use the already memoized RowComponent
-const MemoizedRow = RowComponent;
+// Custom comparison function for React.memo to prevent unnecessary re-renders
+// This compares the actual row data and props, not just object references
+const areRowPropsEqual = (prevProps: RowProps, nextProps: RowProps): boolean => {
+  // Compare row by ID and index (stable identifiers)
+  if (prevProps.row.id !== nextProps.row.id || prevProps.row.index !== nextProps.row.index) {
+    return false;
+  }
+  
+  // Compare editing state
+  if (prevProps.isEditing !== nextProps.isEditing) {
+    return false;
+  }
+  
+  if (prevProps.editingRowId !== nextProps.editingRowId) {
+    return false;
+  }
+  
+  // Compare style object (shallow comparison)
+  if (prevProps.style !== nextProps.style) {
+    if (!prevProps.style || !nextProps.style) {
+      return false;
+    }
+    // Convert to records for comparison
+    const prevStyle = prevProps.style as Record<string, unknown>;
+    const nextStyle = nextProps.style as Record<string, unknown>;
+    const styleKeys = new Set([...Object.keys(prevStyle), ...Object.keys(nextStyle)]);
+    for (const key of styleKeys) {
+      if (prevStyle[key] !== nextStyle[key]) {
+        return false;
+      }
+    }
+  }
+  
+  // Compare other primitive props
+  if (prevProps.grouping.length !== nextProps.grouping.length ||
+      prevProps.grouping.some((id, i) => id !== nextProps.grouping[i])) {
+    return false;
+  }
+  
+  // For hierarchical state, compare the enabled flag and state functions
+  if (prevProps.hierarchical?.enabled !== nextProps.hierarchical?.enabled) {
+    return false;
+  }
+  
+  // Compare row selection state by checking the function result
+  const prevSelected = typeof prevProps.row.getIsSelected === 'function' ? prevProps.row.getIsSelected() : false;
+  const nextSelected = typeof nextProps.row.getIsSelected === 'function' ? nextProps.row.getIsSelected() : false;
+  if (prevSelected !== nextSelected) {
+    return false;
+  }
+  
+  // If all checks pass, props are equal
+  return true;
+};
+
+// Use the memoized RowComponent with custom comparison
+const MemoizedRow = React.memo(RowComponent, areRowPropsEqual);
 
 /**
  * Unified table body component with intelligent virtualization
@@ -831,7 +900,7 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   rbac,
   permissions
 }: UnifiedTableBodyProps<TData>) {
-  const logger = React.useMemo(() => createLogger('UnifiedTableBody'), []);
+  const logger = createLogger('UnifiedTableBody');
   
   const headerRef = useRef<HTMLTableSectionElement>(null);
   const bodyRef = useRef<HTMLTableSectionElement>(null);