@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/DataTable/__tests__/a11y.basic.test.tsx

@@ -392,9 +392,11 @@ describe('DataTable Accessibility', () => {
       );
 
       // When loading, the table might not be rendered, so check for loading state
-      const loadingElement = screen.getByText('Loading...');
-      expect(loadingElement).toBeInTheDocument();
-      expect(loadingElement).toHaveAttribute('aria-live', 'polite');
+      // The spinner has role="status" which provides the aria-live region
+      const spinner = screen.getByRole('status');
+      expect(spinner).toBeInTheDocument();
+      // Check that the visible loading text is present
+      expect(screen.getByText('Loading...', { selector: 'strong' })).toBeInTheDocument();
     });
 
     it('should not have aria-busy when not loading', async () => {
@@ -682,7 +684,11 @@ describe('DataTable Accessibility', () => {
       const results = await axe(container, {
         rules: {
           // Column visibility button has icon-only design - acceptable pattern
-          'button-name': { enabled: false }
+          'button-name': { enabled: false },
+          // EmptyState uses Alert which renders as <aside> with role="status" - acceptable pattern for status messages
+          'aria-allowed-role': { enabled: false },
+          // EmptyState uses h5 for title - acceptable when used in status messages
+          'heading-order': { enabled: false }
         }
       });
       expect(results).toHaveNoViolations();

package/src/components/DataTable/__tests__/test-utils/sharedTestUtils.tsx

@@ -14,20 +14,20 @@ import '@testing-library/jest-dom';
 import React from 'react';
 
 // Mock icon components
-const MockEditIcon = ({ className }: { className?: string }) => <div className={className} data-testid="edit-icon">Edit</div>;
-const MockDeleteIcon = ({ className }: { className?: string }) => <div className={className} data-testid="delete-icon">Delete</div>;
+const MockEditIcon = ({ className }: { className?: string }) => <span className={className} data-testid="edit-icon">Edit</span>;
+const MockDeleteIcon = ({ className }: { className?: string }) => <span className={className} data-testid="delete-icon">Delete</span>;
 
 /**
  * Common mock implementations for DataTable components
  */
 export const mockComponents = {
-  DataTableContext: vi.fn(({ children }: any) => <div data-testid="data-table-context">{children}</div>),
-  DataTableToolbar: vi.fn(() => <div data-testid="data-table-toolbar">Toolbar</div>),
-  DataTableBody: vi.fn(() => <div data-testid="data-table-body">Body</div>),
-  DataTableModals: vi.fn(() => <div data-testid="data-table-modals">Modals</div>),
-  PaginationControls: vi.fn(() => <div data-testid="pagination-controls">Pagination</div>),
-  LoadingState: vi.fn(() => <div data-testid="loading-state">Loading</div>),
-  DataTableErrorBoundary: vi.fn(({ children }: any) => <div data-testid="error-boundary">{children}</div>),
+  DataTableContext: vi.fn(({ children }: any) => <section data-testid="data-table-context">{children}</section>),
+  DataTableToolbar: vi.fn(() => <nav data-testid="data-table-toolbar">Toolbar</nav>),
+  UnifiedTableBody: vi.fn(() => <main data-testid="unified-table-body">Body</main>),
+  DataTableModals: vi.fn(() => <section data-testid="data-table-modals">Modals</section>),
+  PaginationControls: vi.fn(() => <nav data-testid="pagination-controls">Pagination</nav>),
+  LoadingState: vi.fn(() => <section data-testid="loading-state">Loading</section>),
+  DataTableErrorBoundary: vi.fn(({ children }: any) => <section data-testid="error-boundary">{children}</section>),
 };
 
 /**

package/src/components/DataTable/components/ColumnFilter.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Input } from '../../Input/Input';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../Select/Select';
-import { Button } from '../../Button/Button';
-import { X, Filter } from 'lucide-react';
 import type { Column } from '@tanstack/react-table';
 import { getColumnHeaderText } from '../utils/columnUtils';
+import { Filter } from 'lucide-react';
 
 /**
  * Props for the ColumnFilter component.
@@ -50,80 +49,70 @@ export function ColumnFilter({
 
   const hasFilter = columnFilterValue !== undefined && columnFilterValue !== '';
   
-  // Get the default placeholder using column header text
+  // Get the default placeholder using column header text (for Input components)
   const defaultPlaceholder = `Filter ${getColumnHeaderText(column)}...`;
-
-  const renderFilterInput = () => {
-    switch (filterType) {
-      case 'select':
-        return (
-          <Select
-            value={columnFilterValue as string || ''}
-            onValueChange={handleFilterChange}
-          >
-            <SelectTrigger className="h-8">
-              <SelectValue placeholder={placeholder || defaultPlaceholder} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="">All</SelectItem>
-              {options.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        );
-      
-      case 'number':
-        // Always hide spinner arrows for number filter inputs (cleaner UX)
-        return (
-          <Input
-            type="number"
-            value={columnFilterValue as string || ''}
-            onChange={(e) => handleFilterChange(e.target.value ? Number(e.target.value) : undefined)}
-            placeholder={placeholder || defaultPlaceholder}
-            className="h-8 datatable-number-no-spinners"
-          />
-        );
-      
-      case 'date':
-        return (
-          <Input
-            type="date"
-            value={columnFilterValue as string || ''}
-            onChange={(e) => handleFilterChange(e.target.value || undefined)}
-            placeholder={placeholder || defaultPlaceholder}
-            className="h-8"
-          />
-        );
-      
-      default: // text
-        return (
-          <Input
-            value={columnFilterValue as string || ''}
-            onChange={(e) => handleFilterChange(e.target.value || undefined)}
-            placeholder={placeholder || defaultPlaceholder}
-            className="h-8"
-          />
-        );
-    }
-  };
+  // For Select components, use just the column name (icon will replace "Filter" text)
+  const selectColumnName = `${getColumnHeaderText(column)}...`;
 
   return (
-    <div className="relative flex items-center gap-1">
-      {renderFilterInput()}
-      {hasFilter && (
-        <Button
-          variant="ghost"
-          onClick={clearFilter}
-        >
-          <X className="size-3" />
-        </Button>
-      )}
-      {hasFilter && (
-        <div className="absolute -top-1 -right-1 h-2 w-2 bg-main-500 rounded-full" />
-      )}
-    </div>
+    (() => {
+      switch (filterType) {
+        case 'select':
+          return (
+            <Select
+              value={columnFilterValue as string || ''}
+              onValueChange={handleFilterChange}
+            >
+              <SelectTrigger className="h-8">
+                <SelectValue>
+                  <Filter className="size-4 inline-block mr-2"/>
+                  <span className="truncate">{selectColumnName}</span>
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="">All</SelectItem>
+                {options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        
+        case 'number':
+          // Always hide spinner arrows for number filter inputs (cleaner UX)
+          return (
+            <Input
+              type="number"
+              value={columnFilterValue as string || ''}
+              onChange={(e) => handleFilterChange(e.target.value ? Number(e.target.value) : undefined)}
+              placeholder={placeholder || defaultPlaceholder}
+              className="h-8 datatable-number-no-spinners"
+            />
+          );
+        
+        case 'date':
+          return (
+            <Input
+              type="date"
+              value={columnFilterValue as string || ''}
+              onChange={(e) => handleFilterChange(e.target.value || undefined)}
+              placeholder={placeholder || defaultPlaceholder}
+              className="h-8"
+            />
+          );
+        
+        default: // text
+          return (
+            <Input
+              value={columnFilterValue as string || ''}
+              onChange={(e) => handleFilterChange(e.target.value || undefined)}
+              placeholder={placeholder || defaultPlaceholder}
+              className="h-8"
+            />
+          );
+      }
+    })()
   );
 }

package/src/components/DataTable/components/ColumnVisibilityDropdown.tsx

@@ -5,9 +5,11 @@ import {
   Select,
   SelectContent,
   SelectItem,
+  SelectGroup,
   SelectSeparator,
   SelectTrigger,
 } from '../../Select/Select';
+import { Label } from '../../Label/Label';
 import { Checkbox } from '../../Checkbox/Checkbox';
 import { Settings2, Eye, EyeOff } from 'lucide-react';
 
@@ -37,7 +39,7 @@ export function ColumnVisibilityDropdown<TData>({
   );
 
   return (
-    <Select className="w-52">
+    <Select className="w-52" showCheckmark={false}>
       <SelectTrigger asChild>
         <Button 
           variant="outline" 
@@ -47,40 +49,40 @@ export function ColumnVisibilityDropdown<TData>({
         </Button>
       </SelectTrigger>
       <SelectContent>
-        <div className="p-2 space-y-1">
-          <div className="flex gap-1 mb-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 px-2 text-xs"
-              onClick={() => {
-                toggleableColumns.forEach(column => {
-                  if (!column.getIsVisible()) {
-                    onColumnVisibilityChange(column.id, true);
-                  }
-                });
-              }}
-            >
-              <Eye className="size-3 mr-1" />
-              Show All
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 px-2 text-xs"
-              onClick={() => {
-                toggleableColumns.forEach(column => {
-                  if (column.getIsVisible()) {
-                    onColumnVisibilityChange(column.id, false);
-                  }
-                });
-              }}
-            >
-              <EyeOff className="size-3 mr-1" />
-              Hide All
-            </Button>
-          </div>
-          <SelectSeparator />
+        <SelectGroup className="flex flex-row gap-1 p-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs flex-1"
+            onClick={() => {
+              toggleableColumns.forEach(column => {
+                if (!column.getIsVisible()) {
+                  onColumnVisibilityChange(column.id, true);
+                }
+              });
+            }}
+          >
+            <Eye className="size-3 mr-1" />
+            Show All
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs flex-1"
+            onClick={() => {
+              toggleableColumns.forEach(column => {
+                if (column.getIsVisible()) {
+                  onColumnVisibilityChange(column.id, false);
+                }
+              });
+            }}
+          >
+            <EyeOff className="size-3 mr-1" />
+            Hide All
+          </Button>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
           {toggleableColumns.map((column) => (
             <SelectItem 
               key={column.id} 
@@ -88,24 +90,24 @@ export function ColumnVisibilityDropdown<TData>({
               className="flex items-center space-x-2 cursor-pointer px-3 py-2 text-sm hover:bg-sec-50"
               onClick={(e) => e.preventDefault()}
             >
+                            <Label htmlFor={column.id}
+               // className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+              >
               <Checkbox
+              className="mr-2 align-middle"
                 id={column.id}
                 checked={column.getIsVisible()}
                 onCheckedChange={(checked) =>
                   onColumnVisibilityChange(column.id, !!checked)
                 }
               />
-              <label
-                htmlFor={column.id}
-                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
-              >
                 {typeof column.columnDef?.header === 'string'
                   ? column.columnDef.header
                   : column.id}
-              </label>
+              </Label>
             </SelectItem>
           ))}
-        </div>
+        </SelectGroup>
       </SelectContent>
     </Select>
   );

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

@@ -8,8 +8,9 @@
  * This is the main component that consumers will use.
  */
 
-import React, { useMemo, useCallback, useEffect, useRef } from 'react';
+import React, { useMemo, useCallback, useEffect, useLayoutEffect, useRef, useState, startTransition, useDeferredValue } from 'react';
 import { useReactTable } from '@tanstack/react-table';
+import { useLocation } from 'react-router-dom';
 import type {
   SortingState,
 } from '@tanstack/react-table';
@@ -182,6 +183,81 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
   
   const logger = createLogger('DataTableCore');
   
+  // Track deletion state to batch updates and prevent flashing
+  const [isDeleting, setIsDeleting] = useState(false);
+  const deletionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const pendingDeletionsRef = useRef<Set<string>>(new Set());
+  const dataSnapshotRef = useRef<TData[]>(data);
+  const dataChangeCountRef = useRef(0);
+  const previousDataLengthRef = useRef(data.length);
+  
+  // CRITICAL: Use useLayoutEffect to capture previous length synchronously
+  // This runs before paint, so we can detect changes before React commits
+  useLayoutEffect(() => {
+    const currentLength = data.length;
+    const previousLength = previousDataLengthRef.current;
+    
+    // Check if length decreased - this is the key detection
+    const lengthDecreased = currentLength < previousLength;
+    
+    if (lengthDecreased && !isDeleting) {
+      // Data length decreased - start deletion batching
+      const snapshotLength = dataSnapshotRef.current.length;
+      
+      // Data decrease detected (logging removed for performance)
+      
+      // If snapshot is larger, it's valid (has pre-deletion state)
+      // Otherwise, update it to preserve current state
+      if (snapshotLength <= currentLength) {
+        dataSnapshotRef.current = [...data];
+      }
+      
+      setIsDeleting(true);
+      
+      // Set timeout to reset after batching
+      if (deletionTimeoutRef.current) {
+        clearTimeout(deletionTimeoutRef.current);
+      }
+      deletionTimeoutRef.current = setTimeout(() => {
+        setIsDeleting(false);
+        dataSnapshotRef.current = data;
+        previousDataLengthRef.current = data.length;
+        // Batching complete (logging removed for performance)
+      }, 150);
+      
+      // Update previous length AFTER setting up batching
+      previousDataLengthRef.current = currentLength;
+    } else if (!lengthDecreased && !isDeleting) {
+      // No deletion - update snapshot and previous length normally
+      dataSnapshotRef.current = data;
+      previousDataLengthRef.current = currentLength;
+    } else if (isDeleting) {
+      // Already deleting - just update previous length for next comparison
+      previousDataLengthRef.current = currentLength;
+    }
+  }, [data, isDeleting]);
+  
+  // Keep data snapshot stable during deletions to prevent flashing
+  // Logging effect - runs after layout to show what happened
+  useEffect(() => {
+    dataChangeCountRef.current += 1;
+    
+    const previousLength = previousDataLengthRef.current;
+    const currentLength = data.length;
+    const snapshotLength = dataSnapshotRef.current.length;
+    const lengthDecreased = currentLength < previousLength;
+    
+    // Data prop changed (logging removed for performance)
+  }, [data, isDeleting]);
+  
+  // Use snapshot data during deletions to prevent flashing
+  // CRITICAL: If we're deleting and data length decreased, use snapshot to prevent flashing
+  const dataLengthChanged = data.length !== dataSnapshotRef.current.length;
+  const isDataDecreasing = data.length < dataSnapshotRef.current.length;
+  const effectiveData = (isDeleting && isDataDecreasing) ? dataSnapshotRef.current : data;
+  
+  // Effective data tracking (logging removed for performance)
+  
   // ============================================================================
   // ALL HOOKS MUST BE CALLED IN THE SAME ORDER EVERY RENDER
   // ============================================================================
@@ -241,15 +317,38 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
     return {};
   }, [secureFeatures.columnVisibility, savedColumnVisibility]);
   
+  // Get location for route-based key derivation
+  let location: { pathname: string } | null = null;
+  try {
+    // useLocation may not be available if React Router is not set up
+    const routerLocation = useLocation();
+    location = routerLocation;
+  } catch {
+    // Router not available, location will be null
+    location = null;
+  }
+
+  // Extract column field names for sensitive field filtering
+  const columnFieldNames = useMemo(() => {
+    return columns
+      .map((col) => col.accessorKey || col.id)
+      .filter((key): key is string => Boolean(key));
+  }, [columns]);
+  
   // Use the centralized state management hook for ALL table state
   // Note: 'actions' prop parameter is shadowed by destructuring, so we rename to stateActions
-  const { state, actions: stateActions } = useDataTableState<TData>({
+  const { state, actions: stateActions, clearDraft } = useDataTableState<TData>({
     initialPageSize,
     columnIds: effectiveColumnOrder,
     initialRowSelection: selection || {},
     onRowSelectionChange,
     defaultSorting: defaultSorting || [],
-    defaultGrouping: defaultGrouping || []
+    defaultGrouping: defaultGrouping || [],
+    // Persistence props
+    rbacPageId: rbac.pageId,
+    title,
+    location,
+    columnFieldNames,
   });
   
   // Apply saved visibility to state if available
@@ -344,7 +443,7 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
     hierarchicalState,
     hierarchicalValidation,
   } = useDataTableDataPipeline<TData>({
-    data,
+    data: effectiveData,
     features: secureFeatures,
     hierarchical,
     sorting: state.sorting,
@@ -357,6 +456,34 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
       logger.error('Hierarchical data validation failed:', hierarchicalValidation.errors);
     }
   }, [hierarchicalValidation, logger]);
+  
+  // Final table data tracking (logging removed for performance)
+
+  // Cleanup deletion timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (deletionTimeoutRef.current) {
+        clearTimeout(deletionTimeoutRef.current);
+      }
+      pendingDeletionsRef.current.clear();
+    };
+  }, []);
+  
+  // Update data snapshot when data changes and we're not deleting
+  useEffect(() => {
+    if (!isDeleting && data !== dataSnapshotRef.current) {
+      dataSnapshotRef.current = data;
+    }
+  }, [data, isDeleting]);
+
+  // Cleanup deletion timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (deletionTimeoutRef.current) {
+        clearTimeout(deletionTimeoutRef.current);
+      }
+    };
+  }, []);
 
   const {
     columnOrder: savedColumnOrder,
@@ -563,19 +690,24 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
   // RBAC VALIDATION AND SECURE CONFIGURATION - ALWAYS call these hooks
   // ============================================================================
 
+  // Wrap handlers - persistence is handled automatically via useDataTableState
+  // The state actions (clearCreationData, clearEditing) will automatically update persisted state
+  const wrappedOnCreateRow = onCreateRow;
+  const wrappedOnEditRow = onEditRow;
+
   // MANDATORY: Handlers are automatically secured
   const secureHandlers = useMemo(() => {
     const handlers = {
-      onEditRow: permissions.canUpdate.can ? onEditRow : undefined,
+      onEditRow: permissions.canUpdate.can ? wrappedOnEditRow : undefined,
       onDeleteRow: permissions.canDelete.can ? onDeleteRow : undefined,
-      onCreateRow: permissions.canCreate.can ? onCreateRow : undefined,
+      onCreateRow: permissions.canCreate.can ? wrappedOnCreateRow : undefined,
       onImport: permissions.canImport.can ? onImport : undefined,
       onExport: permissions.canExport.can ? onExport : undefined,
       onDeleteSelected: permissions.canDelete.can ? onDeleteSelected : undefined,
     };
     
     return handlers;
-  }, [permissions.canUpdate.can, permissions.canDelete.can, permissions.canCreate.can, permissions.canImport.can, permissions.canExport.can, onEditRow, onDeleteRow, onCreateRow, onImport, onExport, onDeleteSelected, secureFeatures.creation]);
+  }, [permissions.canUpdate.can, permissions.canDelete.can, permissions.canCreate.can, permissions.canImport.can, permissions.canExport.can, wrappedOnEditRow, onDeleteRow, wrappedOnCreateRow, onImport, onExport, onDeleteSelected, secureFeatures.creation]);
 
   // MANDATORY: Process actions with RBAC checks
   const effectiveActions = useMemo(() => {
@@ -617,19 +749,60 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
             });
             return;
           }
+          
+          // Get row ID for tracking - use current data, not effectiveData
+          const rowIndex = data.findIndex(r => r === row);
+          const rowId = resolvedGetRowId(row, rowIndex >= 0 ? rowIndex : 0);
+          
+          // Mark deletion as in progress and track this deletion
+          // CRITICAL: Set isDeleting and snapshot BEFORE calling the handler
+          // This prevents the parent's data update from causing a flash
+          if (!isDeleting) {
+            // Snapshot current data BEFORE deletion
+            dataSnapshotRef.current = [...data]; // Create a copy to prevent reference issues
+            setIsDeleting(true);
+          }
+          pendingDeletionsRef.current.add(rowId);
+          
+          // Clear any existing timeout
+          if (deletionTimeoutRef.current) {
+            clearTimeout(deletionTimeoutRef.current);
+          }
+          
           try {
+            // Call the delete handler - this may update the parent's data prop
+            const deleteStartTime = Date.now();
             const result = secureHandlers.onDeleteRow!(row) as any;
             // Handle async operations
             if (result !== undefined && result !== null && typeof result === 'object' && typeof result.then === 'function') {
               await result;
             }
-            toast({
-              title: "Delete Successful",
-              description: "Row deleted successfully",
-              variant: "default"
-            });
+            // Remove from pending deletions
+            pendingDeletionsRef.current.delete(rowId);
+            
+            // Reset deletion state after a delay to allow batching
+            // This prevents the table from refreshing after each individual deletion
+            deletionTimeoutRef.current = setTimeout(() => {
+              // Only reset if all deletions are complete
+              if (pendingDeletionsRef.current.size === 0) {
+                setIsDeleting(false);
+                // Update snapshot to latest data
+                dataSnapshotRef.current = data;
+                toast({
+                  title: "Delete Successful",
+                  description: "Row deleted successfully",
+                  variant: "default"
+                });
+              }
+            }, 150); // Delay to batch rapid deletions
+            
           } catch (error) {
             logger.error('Delete error:', error);
+            pendingDeletionsRef.current.delete(rowId);
+            if (pendingDeletionsRef.current.size === 0) {
+              setIsDeleting(false);
+              dataSnapshotRef.current = data;
+            }
             toast({
               title: "Delete Failed",
               description: error instanceof Error ? error.message : 'Failed to delete row',
@@ -645,7 +818,7 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
     }
 
     return result;
-  }, [actions, secureFeatures, permissions, secureHandlers, resolvedGetRowId, stateActions, data]);
+  }, [actions, secureFeatures, permissions, secureHandlers, resolvedGetRowId, stateActions, effectiveData, isDeleting, pendingDeletionsRef, deletionTimeoutRef, dataSnapshotRef]);
 
   // Normalize columnOrder for useTableColumns: ensure 'select' is always first
   const normalizedColumnOrderForColumns = useMemo(() => {