@jmruthers/pace-core 0.5.193 → 0.6.2

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

@@ -166,7 +166,7 @@ describe('[component] UnifiedTableBody', () => {
     return result.current;
   };
 
-  const defaultProps = {
+  const baseProps = {
     table: createMockTable(),
     isCreating: false,
     creationData: {},
@@ -213,7 +213,7 @@ describe('[component] UnifiedTableBody', () => {
       const table = createMockTable();
       render(
         <table>
-          <UnifiedTableBody {...defaultProps} table={table} />
+          <UnifiedTableBody {...baseProps} table={table} />
         </table>
       );
 
@@ -225,7 +225,7 @@ describe('[component] UnifiedTableBody', () => {
       const table = createMockTable([]);
       render(
         <table>
-          <UnifiedTableBody {...defaultProps} table={table} dataLength={0} />
+          <UnifiedTableBody {...baseProps} table={table} dataLength={0} />
         </table>
       );
 
@@ -241,7 +241,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             dataLength={0}
             emptyState={emptyState}
@@ -258,7 +258,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             enableFiltering={true}
             showFilterRow={true}
@@ -276,7 +276,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ name: 'New User', email: 'new@example.com' }}
@@ -297,7 +297,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ name: '' }}
@@ -321,7 +321,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ name: 'New User' }}
@@ -344,7 +344,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ name: 'New User' }}
@@ -377,7 +377,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ status: 'active' }}
@@ -402,7 +402,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ age: '25' }}
@@ -429,7 +429,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ createdAt: '2024-01-01' }}
@@ -451,7 +451,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             editingRowId={rowId}
             editingData={{ name: 'Edited Name' }}
@@ -471,7 +471,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             editingRowId={rowId}
             editingData={{ name: 'Current Name' }}
@@ -496,7 +496,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             editingRowId={rowId}
             editingData={{ name: 'Edited Name' }}
@@ -520,7 +520,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             editingRowId={rowId}
             editingData={{ name: 'Edited Name' }}
@@ -559,7 +559,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={tableWithGrouped as any}
             grouping={['department']}
           />
@@ -593,7 +593,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={tableWithGrouped as any}
             grouping={['department']}
           />
@@ -625,7 +625,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             hierarchical={{
               enabled: true,
@@ -656,7 +656,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             hierarchical={{
               enabled: true,
@@ -693,7 +693,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             actions={actions}
           />
@@ -728,7 +728,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             actions={actions}
           />
@@ -754,7 +754,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             dataLength={0}
             isFiltered={true}
@@ -777,7 +777,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             dataLength={5}
             forceVirtualization={false}
@@ -796,7 +796,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             dataLength={1500}
             forceVirtualization={false}
@@ -814,7 +814,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             dataLength={5}
             forceVirtualization={true}
@@ -833,7 +833,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ name: null as any, email: null as any }}
@@ -850,7 +850,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             getRowId={undefined}
           />
@@ -866,7 +866,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             actions={[]}
           />
@@ -891,7 +891,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ fullName: 'New Name' }}
@@ -925,7 +925,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ status: '' }}
@@ -960,7 +960,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ category: '' }}
@@ -989,7 +989,7 @@ describe('[component] UnifiedTableBody', () => {
       render(
         <table>
           <UnifiedTableBody
-            {...defaultProps}
+            {...baseProps}
             table={table}
             isCreating={true}
             creationData={{ status: '' }}

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

@@ -76,7 +76,7 @@ describe('[component] ViewRowModal', () => {
     createdAt: new Date('2024-01-01'),
   };
 
-  const defaultProps = {
+  const baseProps = {
     isOpen: true,
     onClose: vi.fn(),
     data: mockData,
@@ -93,20 +93,20 @@ describe('[component] ViewRowModal', () => {
   describe('Rendering', () => {
     it('returns null when data is null', () => {
       const { container } = render(
-        <ViewRowModal {...defaultProps} data={null} />
+        <ViewRowModal {...baseProps} data={null} />
       );
       expect(container.firstChild).toBeNull();
     });
 
     it('returns null when modal is closed', () => {
       const { container } = render(
-        <ViewRowModal {...defaultProps} isOpen={false} />
+        <ViewRowModal {...baseProps} isOpen={false} />
       );
       expect(container.firstChild).toBeNull();
     });
 
     it('renders modal when open with data', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       // Dialog renders with role="dialog" from Radix UI
       expect(screen.getByRole('dialog')).toBeInTheDocument();
@@ -116,21 +116,21 @@ describe('[component] ViewRowModal', () => {
     });
 
     it('renders default title when title prop is not provided', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       // DialogTitle renders as h2, check for text content
       expect(screen.getByText('Row Details')).toBeInTheDocument();
     });
 
     it('renders custom title when title prop is provided', () => {
-      render(<ViewRowModal {...defaultProps} title="Custom Title" />);
+      render(<ViewRowModal {...baseProps} title="Custom Title" />);
       
       // DialogTitle renders as h2, check for text content
       expect(screen.getByText('Custom Title')).toBeInTheDocument();
     });
 
     it('renders all data fields', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       expect(screen.getByText(/id/i)).toBeInTheDocument();
       expect(screen.getByText(/name/i)).toBeInTheDocument();
@@ -140,7 +140,7 @@ describe('[component] ViewRowModal', () => {
     });
 
     it('renders field values correctly', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       expect(screen.getByText('1')).toBeInTheDocument();
       expect(screen.getByText('John Doe')).toBeInTheDocument();
@@ -150,7 +150,7 @@ describe('[component] ViewRowModal', () => {
     });
 
     it('formats Date values as locale date strings', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       const dateValue = screen.getByText(new Date('2024-01-01').toLocaleDateString());
       expect(dateValue).toBeInTheDocument();
@@ -162,7 +162,7 @@ describe('[component] ViewRowModal', () => {
         metadata: { key: 'value', nested: { data: 'test' } },
       };
       
-      render(<ViewRowModal {...defaultProps} data={dataWithObject} />);
+      render(<ViewRowModal {...baseProps} data={dataWithObject} />);
       
       // JSON stringified objects contain the key parts
       expect(screen.getByText(/key/i)).toBeInTheDocument();
@@ -176,7 +176,7 @@ describe('[component] ViewRowModal', () => {
         nullableField: null,
       };
       
-      render(<ViewRowModal {...defaultProps} data={dataWithNull} />);
+      render(<ViewRowModal {...baseProps} data={dataWithNull} />);
       
       // Check that the field label is rendered
       expect(screen.getByText(/nullable field/i)).toBeInTheDocument();
@@ -189,7 +189,7 @@ describe('[component] ViewRowModal', () => {
         lastName: 'Doe',
       };
       
-      render(<ViewRowModal {...defaultProps} data={dataWithCamelCase} />);
+      render(<ViewRowModal {...baseProps} data={dataWithCamelCase} />);
       
       expect(screen.getByText(/first name/i)).toBeInTheDocument();
       expect(screen.getByText(/last name/i)).toBeInTheDocument();
@@ -201,7 +201,7 @@ describe('[component] ViewRowModal', () => {
       const user = userEvent.setup();
       const handleClose = vi.fn();
       
-      render(<ViewRowModal {...defaultProps} onClose={handleClose} />);
+      render(<ViewRowModal {...baseProps} onClose={handleClose} />);
       
       // Get the main "Close" button (not the X icon button)
       const closeButtons = screen.getAllByRole('button', { name: /close/i });
@@ -217,7 +217,7 @@ describe('[component] ViewRowModal', () => {
       const user = userEvent.setup();
       const handleClose = vi.fn();
       
-      render(<ViewRowModal {...defaultProps} onClose={handleClose} />);
+      render(<ViewRowModal {...baseProps} onClose={handleClose} />);
       
       // Get the X icon button specifically (first button with X icon)
       const xButtons = screen.getAllByTestId('x-icon');
@@ -235,7 +235,7 @@ describe('[component] ViewRowModal', () => {
       
       render(
         <ViewRowModal
-          {...defaultProps}
+          {...baseProps}
           onClose={handleOpenChange}
         />
       );
@@ -253,7 +253,7 @@ describe('[component] ViewRowModal', () => {
 
   describe('Edge Cases', () => {
     it('handles empty data object', () => {
-      render(<ViewRowModal {...defaultProps} data={{}} />);
+      render(<ViewRowModal {...baseProps} data={{}} />);
       
       expect(screen.getByRole('dialog')).toBeInTheDocument();
       expect(screen.getAllByRole('button', { name: /close/i }).length).toBeGreaterThan(0);
@@ -265,7 +265,7 @@ describe('[component] ViewRowModal', () => {
         optionalField: undefined,
       };
       
-      render(<ViewRowModal {...defaultProps} data={dataWithUndefined} />);
+      render(<ViewRowModal {...baseProps} data={dataWithUndefined} />);
       
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
@@ -276,7 +276,7 @@ describe('[component] ViewRowModal', () => {
         tags: ['tag1', 'tag2', 'tag3'],
       };
       
-      render(<ViewRowModal {...defaultProps} data={dataWithArray} />);
+      render(<ViewRowModal {...baseProps} data={dataWithArray} />);
       
       // Check that array values are displayed (they'll be JSON stringified)
       expect(screen.getByText(/tag1/i)).toBeInTheDocument();
@@ -294,7 +294,7 @@ describe('[component] ViewRowModal', () => {
         },
       };
       
-      render(<ViewRowModal {...defaultProps} data={dataWithNested} />);
+      render(<ViewRowModal {...baseProps} data={dataWithNested} />);
       
       // JSON stringified objects contain the key parts
       expect(screen.getByText(/street/i)).toBeInTheDocument();
@@ -309,7 +309,7 @@ describe('[component] ViewRowModal', () => {
         description: longString,
       };
       
-      render(<ViewRowModal {...defaultProps} data={dataWithLongString} />);
+      render(<ViewRowModal {...baseProps} data={dataWithLongString} />);
       
       expect(screen.getByText(longString)).toBeInTheDocument();
     });
@@ -320,7 +320,7 @@ describe('[component] ViewRowModal', () => {
         'field-with-special-chars!@#': 'value',
       };
       
-      render(<ViewRowModal {...defaultProps} data={dataWithSpecial} />);
+      render(<ViewRowModal {...baseProps} data={dataWithSpecial} />);
       
       // The component only handles camelCase, not special characters
       // Special characters remain in the field name, so check for parts of the name
@@ -334,7 +334,7 @@ describe('[component] ViewRowModal', () => {
         count: 0,
       };
       
-      render(<ViewRowModal {...defaultProps} data={dataWithZero} />);
+      render(<ViewRowModal {...baseProps} data={dataWithZero} />);
       
       // Zero should render as "0" - check for it in the value cell
       const countLabel = screen.getByText(/count:/i);
@@ -348,7 +348,7 @@ describe('[component] ViewRowModal', () => {
         active: false,
       };
       
-      render(<ViewRowModal {...defaultProps} data={dataWithFalse} />);
+      render(<ViewRowModal {...baseProps} data={dataWithFalse} />);
       
       // Boolean false should render as "false" - check for it in the value cell
       const activeLabel = screen.getByText(/active:/i);
@@ -359,21 +359,21 @@ describe('[component] ViewRowModal', () => {
 
   describe('Accessibility', () => {
     it('provides close button with aria-label', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       const buttons = screen.getAllByRole('button');
       expect(buttons.length).toBeGreaterThan(0);
     });
 
     it('provides main close button with accessible text', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       const closeButtons = screen.getAllByRole('button', { name: /close/i });
       expect(closeButtons.length).toBeGreaterThan(0);
     });
 
     it('renders dialog with proper structure', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       expect(screen.getByRole('dialog')).toBeInTheDocument();
       // Check for content structure instead of testids
@@ -384,7 +384,7 @@ describe('[component] ViewRowModal', () => {
 
   describe('Layout and Styling', () => {
     it('applies max-width and max-height classes to dialog content', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       // DialogContent receives className prop, check if dialog has the classes
       const dialog = screen.getByRole('dialog');
@@ -394,7 +394,7 @@ describe('[component] ViewRowModal', () => {
     });
 
     it('renders field labels with proper styling classes', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       // Check that field labels are rendered (they should have specific classes)
       const nameLabel = screen.getByText(/name/i);
@@ -402,7 +402,7 @@ describe('[component] ViewRowModal', () => {
     });
 
     it('renders close button in header with proper styling', () => {
-      render(<ViewRowModal {...defaultProps} />);
+      render(<ViewRowModal {...baseProps} />);
       
       const xIcons = screen.getAllByTestId('x-icon');
       expect(xIcons.length).toBeGreaterThan(0);

package/src/components/DataTable/components/cellValueUtils.ts

@@ -0,0 +1,40 @@
+import type { CellValue, DataRecord } from '../types';
+
+const isCellValue = (value: unknown): value is CellValue => {
+  if (value === null || value === undefined) {
+    return true;
+  }
+
+  if (value instanceof Date) {
+    return true;
+  }
+
+  const valueType = typeof value;
+  return valueType === 'string' || valueType === 'number' || valueType === 'boolean';
+};
+
+/**
+ * Converts a data record to a cell value record.
+ * Filters and converts values to valid cell values (string, number, boolean, Date, null, undefined).
+ * 
+ * @template TData - The type of data records
+ * @param row - The data record to convert
+ * @returns A record with cell-compatible values
+ */
+export const toCellValueRecord = <TData extends DataRecord>(row: TData): Record<string, CellValue> => {
+  if (typeof row !== 'object' || row === null) {
+    return {};
+  }
+
+  return Object.entries(row).reduce<Record<string, CellValue>>((accumulator, [key, entryValue]) => {
+    if (isCellValue(entryValue)) {
+      accumulator[key] = entryValue;
+    } else if (entryValue && typeof entryValue === 'object' && 'toString' in entryValue) {
+      accumulator[key] = String(entryValue) as CellValue;
+    } else {
+      accumulator[key] = entryValue as CellValue;
+    }
+
+    return accumulator;
+  }, {});
+};

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

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from 'react';
+import type { UseKeyboardNavigationReturn } from '../../hooks/useKeyboardNavigation';
+
+/**
+ * Hook for managing focus when the import modal opens/closes.
+ * Stores and restores focus to maintain keyboard navigation flow.
+ * 
+ * @param isImportOpen - Whether the import modal is currently open
+ * @param keyboardNavigation - Keyboard navigation utilities
+ * @returns Object with last focused element reference
+ */
+export function useImportModalFocus(isImportOpen: boolean, keyboardNavigation: UseKeyboardNavigationReturn) {
+  const lastFocusedElementRef = useRef<HTMLElement | null>(null);
+  const wasImportModalOpenRef = useRef(false);
+
+  useEffect(() => {
+    if (isImportOpen) {
+      wasImportModalOpenRef.current = true;
+      keyboardNavigation.storeFocus();
+      if (document.activeElement instanceof HTMLElement) {
+        lastFocusedElementRef.current = document.activeElement;
+      }
+    }
+  }, [isImportOpen, keyboardNavigation]);
+
+  useEffect(() => {
+    if (isImportOpen) {
+      return;
+    }
+
+    if (!wasImportModalOpenRef.current) {
+      return;
+    }
+
+    wasImportModalOpenRef.current = false;
+    setTimeout(() => {
+      const storedElement = lastFocusedElementRef.current;
+      lastFocusedElementRef.current = null;
+
+      const elementToRestore = storedElement?.isConnected
+        ? storedElement
+        : document.querySelector<HTMLElement>('[data-restore-target="datatable-import-button"]');
+
+      if (elementToRestore && typeof elementToRestore.focus === 'function') {
+        elementToRestore.focus();
+      } else {
+        keyboardNavigation.restoreFocus();
+      }
+    }, 100);
+  }, [isImportOpen, keyboardNavigation]);
+
+  return { lastFocusedElementRef };
+}