@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/DataTable/components/LoadingState.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { LoadingSpinner } from '../../LoadingSpinner/LoadingSpinner';
 
 /**
  * Loading state component for DataTable.
@@ -8,11 +9,9 @@ import React from 'react';
  */
 export function LoadingState() {
   return (
-    <div className="p-8 text-center">
-      <div className="flex items-center justify-center space-x-2">
-        <div className="animate-spin rounded-full size-6 border-b-2 border-primary"></div>
-        <span aria-live="polite" className="text-muted-foreground">Loading...</span>
-      </div>
-    </div>
+    <p className="grid place-items-center text-center p-8">
+        <LoadingSpinner />
+        <strong>Loading...</strong>     
+    </p>
   );
 }

package/src/components/DataTable/components/RowComponent.tsx

@@ -381,6 +381,18 @@ const areRowPropsEqual = (prevProps: RowProps, nextProps: RowProps): boolean =>
     return false;
   }
 
+  // CRITICAL FIX: Check if editingData has changed
+  // This ensures EditableRow re-renders when editingData updates (e.g., when dropdown value changes)
+  // For React 19: Manual memoization is still beneficial for table rows to prevent unnecessary re-renders
+  // of hundreds/thousands of rows when only one row's editingData changes
+  if (prevProps.isEditing && nextProps.isEditing) {
+    // Simple reference equality check - if editingData object reference changed, it's different
+    // This works because setEditingRow creates a new object, so reference equality is sufficient
+    if (prevProps.editingData !== nextProps.editingData) {
+      return false;
+    }
+  }
+
   return true;
 };
 

package/src/components/DataTable/components/SortIndicator.tsx

@@ -0,0 +1,50 @@
+/**
+ * @file Sort Indicator Component
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.4.0
+ * 
+ * Shared component for displaying column sort indicators.
+ * Provides consistent sorting chevron icons across all DataTable components.
+ */
+
+import React from 'react';
+import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
+import { cn } from '../../../utils/core/cn';
+
+/**
+ * Props for the SortIndicator component
+ */
+export interface SortIndicatorProps {
+  /** Current sort state: 'asc' for ascending, 'desc' for descending, false for unsorted */
+  sortState: 'asc' | 'desc' | false;
+  /** Optional className for styling */
+  className?: string;
+}
+
+/**
+ * Sort indicator component that displays the appropriate chevron icon
+ * based on the current sort state.
+ * 
+ * @param props - Sort indicator configuration
+ * @returns The rendered sort indicator icon
+ * 
+ * @example
+ * ```tsx
+ * <SortIndicator sortState={column.getIsSorted()} />
+ * ```
+ */
+export function SortIndicator({ sortState, className }: SortIndicatorProps) {
+  return (
+    <>
+      {sortState === 'asc' ? (
+        <ChevronUp className={cn('size-4', className)} />
+      ) : sortState === 'desc' ? (
+        <ChevronDown className={cn('size-4', className)} />
+      ) : (
+        <ChevronsUpDown className={cn('size-4', className)} />
+      )}
+    </>
+  );
+}
+

package/src/components/DataTable/components/__tests__/COVERAGE_NOTE.md

@@ -2,7 +2,7 @@
 
 ## Summary
 
-The DataTable subcomponents (FilterRow, EditableRow, ColumnFilter, GroupHeader, ViewRowModal, etc.) are **intentionally not tested in isolation** because:
+The DataTable subcomponents (FilterRow, EditableRow, ColumnFilter, etc.) are **intentionally not tested in isolation** because:
 
 1. They are tightly integrated with TanStack React Table
 2. They are extensively tested through DataTable integration tests
@@ -35,9 +35,9 @@ The following DataTable integration tests provide comprehensive coverage:
 | **ColumnFilter** | ✅ | Integration tests validate filter input behavior |
 | **FilterRow** | ✅ | Integration tests validate filtering across columns |
 | **EditableRow** | ✅ | Integration tests validate editing workflows |
-| **GroupHeader** | ✅ | Integration tests validate grouping functionality |
-| **ViewRowModal** | ✅ | Integration tests validate modal display |
-| **DraggableColumnHeader** | ✅ | Integration tests validate column reordering |
+| **Grouped rows** | ✅ | Integration tests validate grouping functionality (handled inline by RowComponent) |
+| **Modal display** | ✅ | Integration tests validate modal functionality |
+| **Column reordering** | ✅ | Integration tests validate column order persistence |
 | **ActionButtons** | ✅ | Integration tests validate action buttons |
 
 ## Why This Approach Works

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

@@ -57,8 +57,8 @@ vi.mock('../../Select/Select', async () => {
         {children}
       </button>
     ),
-    SelectValue: ({ placeholder }: any) => (
-      <span data-testid="select-value">{placeholder}</span>
+    SelectValue: ({ children }: any) => (
+      <span data-testid="select-value">{children}</span>
     ),
     SelectContent: ({ children }: any) => (
       <div data-testid="select-content">{children}</div>
@@ -449,79 +449,6 @@ describe('[component] ColumnFilter', () => {
     });
   });
 
-  describe('Clear Filter Button', () => {
-    it('shows clear button when filter has value', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => 'test'),
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      const clearButton = screen.getByRole('button');
-      expect(clearButton).toBeInTheDocument();
-      expect(screen.getByTestId('x-icon')).toBeInTheDocument();
-    });
-
-    it('hides clear button when filter has no value', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => undefined),
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      expect(screen.queryByTestId('x-icon')).not.toBeInTheDocument();
-    });
-
-    it('hides clear button when filter value is empty string', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => ''),
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      expect(screen.queryByTestId('x-icon')).not.toBeInTheDocument();
-    });
-
-    it('clears filter when clear button is clicked', async () => {
-      const user = userEvent.setup();
-      const setFilterValue = vi.fn();
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => 'test'),
-        setFilterValue,
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      const clearButton = screen.getByRole('button');
-      await user.click(clearButton);
-
-      expect(setFilterValue).toHaveBeenCalledWith(undefined);
-    });
-  });
-
-  describe('Filter Indicator', () => {
-    it('shows filter indicator dot when filter has value', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => 'test'),
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      const indicator = document.querySelector('.bg-main-500.rounded-full');
-      expect(indicator).toBeInTheDocument();
-    });
-
-    it('hides filter indicator dot when filter has no value', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => undefined),
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      const indicator = document.querySelector('.bg-main-500.rounded-full');
-      expect(indicator).not.toBeInTheDocument();
-    });
-  });
 
   describe('Edge Cases', () => {
     it('handles undefined filter value gracefully', () => {
@@ -618,15 +545,29 @@ describe('[component] ColumnFilter', () => {
       expect(input).toBeInTheDocument();
     });
 
-    it('clear button is accessible', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => 'test'),
-      });
+    it('renders Filter icon in select filter', () => {
+      render(
+        <ColumnFilter 
+          column={mockColumn} 
+          filterType="select"
+          options={[{ value: 'option1', label: 'Option 1' }]}
+        />
+      );
 
-      render(<ColumnFilter column={column} />);
+      expect(screen.getByTestId('filter-icon')).toBeInTheDocument();
+    });
+
+    it('renders column name in select filter value', () => {
+      render(
+        <ColumnFilter 
+          column={mockColumn} 
+          filterType="select"
+          options={[{ value: 'option1', label: 'Option 1' }]}
+        />
+      );
 
-      const clearButton = screen.getByRole('button');
-      expect(clearButton).toBeInTheDocument();
+      const selectValue = screen.getByTestId('select-value');
+      expect(selectValue).toHaveTextContent('test-column...');
     });
   });
 

package/src/components/DataTable/components/__tests__/DataTableErrorBoundary.test.tsx

@@ -89,8 +89,9 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
-      // Alert component uses role="alert", not data-testid
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      // There may be multiple alerts (outer and inner), use getAllByRole
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
       expect(screen.getByText('DataTable Error')).toBeInTheDocument();
       expect(screen.getByText('Something went wrong')).toBeInTheDocument();
     });
@@ -127,8 +128,16 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
+      // Check for error details summary
       const details = screen.getByText('Error Details');
       expect(details).toBeInTheDocument();
+      // Check that error message is displayed in the details/pre element
+      // The error message is inside a <pre> tag within <details>
+      const preElement = screen.getByText((content, element) => {
+        return element?.tagName.toLowerCase() === 'pre' && content.includes('Test error');
+      }, { selector: 'pre' });
+      expect(preElement).toBeInTheDocument();
+      expect(preElement).toHaveTextContent('Test error');
     });
 
     it('hides error details when showErrorDetails is false', () => {
@@ -140,10 +149,11 @@ describe('[component] DataTableErrorBoundary', () => {
 
       // Error details section is shown when error.message exists
       // showErrorDetails only controls stack trace visibility, not the details section
-      // So we check that the details section exists but stack trace is not shown
       expect(screen.getByText('Error Details')).toBeInTheDocument();
       // Stack trace should not be visible when showErrorDetails is false
       expect(screen.queryByText(/Stack Trace/i)).not.toBeInTheDocument();
+      // Error message should still be visible
+      expect(screen.getByText('Test error')).toBeInTheDocument();
     });
 
     it('displays stack trace when showErrorDetails is true', () => {
@@ -155,6 +165,8 @@ describe('[component] DataTableErrorBoundary', () => {
 
       // Stack trace should be in the details section
       expect(screen.getByText('Error Details')).toBeInTheDocument();
+      // Stack trace text should be present when showErrorDetails is true
+      expect(screen.getByText(/Stack Trace/i)).toBeInTheDocument();
     });
   });
 
@@ -237,7 +249,8 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
 
       const retryButton = screen.getByRole('button', { name: /retry/i });
       await user.click(retryButton);
@@ -317,7 +330,8 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
 
       const resetButton = screen.getByRole('button', { name: /reset/i });
       
@@ -352,7 +366,9 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      // There may be multiple alerts when error has no message
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
       expect(screen.getByText('An unexpected error occurred')).toBeInTheDocument();
     });
 
@@ -365,19 +381,31 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
 
       const retryButton = screen.getByRole('button', { name: /retry/i });
       await user.click(retryButton);
 
-      // Trigger another error
+      // Wait for retry to complete and error state to reset
+      await waitFor(() => {
+        // Wait for the timeout to complete
+      }, { timeout: 200 });
+
+      // Trigger another error - rerender with new error
       rerender(
         <DataTableErrorBoundary showRetryButton={true}>
           <ThrowError shouldThrow={true} message="Second error" />
         </DataTableErrorBoundary>
       );
 
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      // Wait for the new error to be caught and displayed
+      await waitFor(() => {
+        const newAlerts = screen.getAllByRole('alert');
+        expect(newAlerts.length).toBeGreaterThan(0);
+        const preElement = document.querySelector('pre');
+        expect(preElement).toHaveTextContent('Second error');
+      }, { timeout: 300 });
     });
 
     it('handles cleanup on unmount', () => {

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

@@ -306,7 +306,8 @@ describe('[component] EmptyState', () => {
     it('uses semantic heading for title', () => {
       render(<EmptyState title="Custom Title" />);
 
-      const heading = screen.getByRole('heading', { level: 3 });
+      // AlertTitle renders as h5, not h3
+      const heading = screen.getByRole('heading', { level: 5 });
       expect(heading).toHaveTextContent('Custom Title');
     });
 
@@ -410,11 +411,12 @@ describe('[component] EmptyState', () => {
   });
 
   describe('Layout and Styling', () => {
-    it('renders with centered flex layout', () => {
+    it('renders with centered grid layout', () => {
       render(<EmptyState />);
 
       const container = screen.getByRole('status');
-      expect(container).toHaveClass('flex', 'flex-col', 'items-center', 'justify-center');
+      // EmptyState uses grid place-items-center, not flex
+      expect(container).toHaveClass('grid', 'place-items-center');
     });
 
     it('applies text-center class', () => {
@@ -428,7 +430,8 @@ describe('[component] EmptyState', () => {
       render(<EmptyState />);
 
       const container = screen.getByRole('status');
-      expect(container).toHaveClass('p-8');
+      // EmptyState uses p-4, not p-8
+      expect(container).toHaveClass('p-4');
     });
   });
 });

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

@@ -123,7 +123,7 @@ describe('[component] FilterRow', () => {
       expect(filters.length).toBeGreaterThan(0);
     });
 
-    it('displays "No filter" for non-filterable columns', () => {
+    it('displays non-breaking space for non-filterable columns', () => {
       const columns = [
         columnHelper.accessor('name', {
           header: 'Name',
@@ -133,9 +133,17 @@ describe('[component] FilterRow', () => {
       const table = createTable(columns);
       const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
       
-      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
-      
-      expect(screen.getByText('No filter')).toBeInTheDocument();
+      const { container } = render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      // Check that the cell exists and does not contain a filter component
+      const cell = container.querySelector('td');
+      expect(cell).toBeInTheDocument();
+      // The cell should not contain a ColumnFilter component
+      expect(cell?.querySelector('[data-testid="column-filter"]')).not.toBeInTheDocument();
+      // The cell should be empty or contain only whitespace (non-breaking space from React Fragment)
+      // React Fragment with &nbsp; renders as a non-breaking space, but textContent may normalize it
+      // The important thing is that no filter component is rendered
+      expect(cell?.children.length).toBe(0);
     });
 
     it('renders filter with correct placeholder', () => {

package/src/components/DataTable/components/__tests__/LoadingState.test.tsx

@@ -18,37 +18,45 @@ describe('[component] LoadingState', () => {
     it('renders loading spinner and text', () => {
       render(<LoadingState />);
 
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
+      // There are two "Loading..." texts (sr-only and visible), use getAllByText
+      const loadingTexts = screen.getAllByText('Loading...');
+      expect(loadingTexts.length).toBeGreaterThan(0);
+      // Check that the visible text is present
+      expect(screen.getByText('Loading...', { selector: 'strong' })).toBeInTheDocument();
     });
 
     it('renders with centered layout', () => {
       render(<LoadingState />);
 
-      // Find the outer container with text-center and p-8 classes
-      const container = screen.getByText('Loading...').parentElement?.parentElement;
+      // Find the container using getByRole for the spinner
+      const spinner = screen.getByRole('status');
+      const container = spinner.closest('p');
       expect(container).toHaveClass('text-center', 'p-8');
     });
 
     it('renders with padding', () => {
       render(<LoadingState />);
 
-      // Find the outer container with p-8 class
-      const container = screen.getByText('Loading...').parentElement?.parentElement;
+      // Find the container using getByRole for the spinner
+      const spinner = screen.getByRole('status');
+      const container = spinner.closest('p');
       expect(container).toHaveClass('p-8');
     });
 
     it('renders spinner with animation class', () => {
       render(<LoadingState />);
 
-      const spinner = screen.getByText('Loading...').previousElementSibling;
+      const spinner = screen.getByRole('status');
       expect(spinner).toHaveClass('animate-spin');
     });
 
-    it('renders flex container with items centered', () => {
+    it('renders grid container with items centered', () => {
       render(<LoadingState />);
 
-      const flexContainer = screen.getByText('Loading...').parentElement;
-      expect(flexContainer).toHaveClass('flex', 'items-center', 'justify-center');
+      // Container uses grid, not flex
+      const spinner = screen.getByRole('status');
+      const container = spinner.closest('p');
+      expect(container).toHaveClass('grid', 'place-items-center');
     });
   });
 
@@ -56,15 +64,17 @@ describe('[component] LoadingState', () => {
     it('provides aria-live region for loading state', () => {
       render(<LoadingState />);
 
-      const loadingText = screen.getByText('Loading...');
-      expect(loadingText).toHaveAttribute('aria-live', 'polite');
+      // The spinner has role="status" which provides the aria-live region
+      const spinner = screen.getByRole('status');
+      expect(spinner).toBeInTheDocument();
     });
 
     it('announces loading state to screen readers', () => {
       render(<LoadingState />);
 
-      const loadingText = screen.getByText('Loading...');
-      expect(loadingText).toBeInTheDocument();
+      // Check that the sr-only text is present for screen readers
+      const srOnlyText = screen.getByText('Loading...', { selector: 'span.sr-only' });
+      expect(srOnlyText).toBeInTheDocument();
     });
   });
 
@@ -72,49 +82,53 @@ describe('[component] LoadingState', () => {
     it('renders spinner before loading text', () => {
       render(<LoadingState />);
 
-      const container = screen.getByText('Loading...').parentElement;
-      const spinner = container?.firstElementChild;
-      const text = container?.lastElementChild;
+      const spinner = screen.getByRole('status');
+      const container = spinner.closest('p');
+      const text = container?.querySelector('strong');
 
       expect(spinner).toBeInTheDocument();
       expect(text).toHaveTextContent('Loading...');
     });
 
-    it('applies space between spinner and text', () => {
+    it('applies grid layout for centering', () => {
       render(<LoadingState />);
 
-      const container = screen.getByText('Loading...').parentElement;
-      expect(container).toHaveClass('space-x-2');
+      // Container uses grid place-items-center, not space-x-2
+      const spinner = screen.getByRole('status');
+      const container = spinner.closest('p');
+      expect(container).toHaveClass('grid', 'place-items-center');
     });
   });
 
   describe('Styling', () => {
-    it('applies muted foreground color to text', () => {
+    it('renders visible loading text', () => {
       render(<LoadingState />);
 
-      const text = screen.getByText('Loading...');
-      expect(text).toHaveClass('text-muted-foreground');
+      // Check that the visible text (in strong) is present
+      const text = screen.getByText('Loading...', { selector: 'strong' });
+      expect(text).toBeInTheDocument();
     });
 
     it('spinner has rounded-full class', () => {
       render(<LoadingState />);
 
-      const spinner = screen.getByText('Loading...').previousElementSibling;
+      const spinner = screen.getByRole('status');
       expect(spinner).toHaveClass('rounded-full');
     });
 
     it('spinner has border styling', () => {
       render(<LoadingState />);
 
-      const spinner = screen.getByText('Loading...').previousElementSibling;
-      expect(spinner).toHaveClass('border-b-2', 'border-primary');
+      const spinner = screen.getByRole('status');
+      // Spinner uses border-2 border-solid border-current border-r-transparent
+      expect(spinner).toHaveClass('border-2', 'border-solid', 'border-current', 'border-r-transparent');
     });
 
     it('spinner has appropriate size', () => {
       render(<LoadingState />);
 
-      const spinner = screen.getByText('Loading...').previousElementSibling;
-      // LoadingState spinner uses Tailwind v4 size-* utility instead of h-* w-*
+      const spinner = screen.getByRole('status');
+      // LoadingState spinner uses Tailwind v4 size-* utility
       expect(spinner).toHaveClass('size-6');
     });
   });

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

@@ -40,10 +40,6 @@ export function usePermissionTracking({
     if (permissions.canRead.isLoading && !hasStartedTracking.current) {
       hasStartedTracking.current = true;
       permissionCheckStartTime.current = Date.now();
-      logger.debug('DataTable: Permission check started', {
-        pageId: effectivePageId,
-        timestamp: permissionCheckStartTime.current,
-      });
 
       if (permissionWarningTimeoutId.current) {
         clearTimeout(permissionWarningTimeoutId.current);

package/src/components/DataTable/components/index.ts

@@ -7,9 +7,10 @@ export { DataTableToolbar } from './DataTableToolbar';
 export { DataTableModals } from './DataTableModals';
 export { ImportModal } from './ImportModal';
 export type { ImportModalConfig } from './ImportModal';
-export { GroupHeader } from './GroupHeader';
 export { GroupingDropdown } from './GroupingDropdown';
 export { DataTableErrorBoundary } from './DataTableErrorBoundary';
 export { PaginationControls } from './PaginationControls';
 export { LoadingState } from './LoadingState';
 export { EmptyState } from './EmptyState';
+export { SortIndicator } from './SortIndicator';
+export type { SortIndicatorProps } from './SortIndicator';