@jmruthers/pace-core 0.5.193 → 0.6.1

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

@@ -70,7 +70,7 @@ describe('[component] DataTable', () => {
   const testData = createTestData(3);
   const testColumns = createTestColumns();
   const defaultRBAC = { pageId: 'test-page-id' };
-  const defaultProps = {
+  const baseProps = {
     data: testData,
     columns: testColumns,
     rbac: defaultRBAC,
@@ -90,7 +90,7 @@ describe('[component] DataTable', () => {
 
   describe('Rendering', () => {
     it('renders DataTableCore with required props', () => {
-      render(<DataTable {...defaultProps} />);
+      render(<DataTable {...baseProps} />);
       
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
       expect(getMockedDataTableCore()).toHaveBeenCalledTimes(1);
@@ -99,7 +99,7 @@ describe('[component] DataTable', () => {
     it('renders with title and description', () => {
       render(
         <DataTable 
-          {...defaultProps} 
+          {...baseProps} 
           title="Test Table" 
           description="Test description" 
         />
@@ -111,14 +111,14 @@ describe('[component] DataTable', () => {
     });
 
     it('renders with custom variant', () => {
-      render(<DataTable {...defaultProps} variant="compact" />);
+      render(<DataTable {...baseProps} variant="compact" />);
       
       const core = screen.getByTestId('data-table-core');
       expect(core).toHaveAttribute('data-variant', 'compact');
     });
 
     it('renders with custom className', () => {
-      render(<DataTable {...defaultProps} className="custom-table-class" />);
+      render(<DataTable {...baseProps} className="custom-table-class" />);
       
       const core = screen.getByTestId('data-table-core');
       expect(core).toHaveAttribute('data-class-name', 'custom-table-class');
@@ -127,7 +127,7 @@ describe('[component] DataTable', () => {
 
   describe('Feature Configuration', () => {
     it('normalizes undefined features to default disabled features', () => {
-      render(<DataTable {...defaultProps} />);
+      render(<DataTable {...baseProps} />);
       
       const core = screen.getByTestId('data-table-core');
       const features = JSON.parse(core.getAttribute('data-features') || '{}');
@@ -157,7 +157,7 @@ describe('[component] DataTable', () => {
         pagination: true,
       };
       
-      render(<DataTable {...defaultProps} features={partialFeatures} />);
+      render(<DataTable {...baseProps} features={partialFeatures} />);
       
       const core = screen.getByTestId('data-table-core');
       const features = JSON.parse(core.getAttribute('data-features') || '{}');
@@ -170,7 +170,7 @@ describe('[component] DataTable', () => {
 
     it('passes fully normalized features to DataTableCore', () => {
       const features = createFullFeatures();
-      render(<DataTable {...defaultProps} features={features} />);
+      render(<DataTable {...baseProps} features={features} />);
       
       const core = screen.getByTestId('data-table-core');
       const normalizedFeatures = JSON.parse(core.getAttribute('data-features') || '{}');
@@ -192,11 +192,11 @@ describe('[component] DataTable', () => {
 
     it('memoizes normalized features when features prop does not change', () => {
       const features = createDefaultFeatures();
-      const { rerender } = render(<DataTable {...defaultProps} features={features} />);
+      const { rerender } = render(<DataTable {...baseProps} features={features} />);
       
       expect(getMockedDataTableCore()).toHaveBeenCalledTimes(1);
       
-      rerender(<DataTable {...defaultProps} features={features} />);
+      rerender(<DataTable {...baseProps} features={features} />);
       
       // Should not re-normalize if features object reference is the same
       expect(getMockedDataTableCore()).toHaveBeenCalledTimes(2);
@@ -205,14 +205,14 @@ describe('[component] DataTable', () => {
 
   describe('RBAC Configuration', () => {
     it('passes rbac with pageId to DataTableCore', () => {
-      render(<DataTable {...defaultProps} rbac={{ pageId: 'custom-page-id' }} />);
+      render(<DataTable {...baseProps} rbac={{ pageId: 'custom-page-id' }} />);
       
       const core = screen.getByTestId('data-table-core');
       expect(core).toHaveAttribute('data-page-id', 'custom-page-id');
     });
 
     it('passes rbac with pageName to DataTableCore', () => {
-      render(<DataTable {...defaultProps} rbac={{ pageName: 'custom-page-name' }} />);
+      render(<DataTable {...baseProps} rbac={{ pageName: 'custom-page-name' }} />);
       
       const core = screen.getByTestId('data-table-core');
       expect(core).toHaveAttribute('data-page-name', 'custom-page-name');
@@ -223,7 +223,7 @@ describe('[component] DataTable', () => {
     it('logs debug information in development mode', () => {
       // Note: Debug logging has been removed from DataTable component
       // The component now uses a logger utility instead of console.log
-      render(<DataTable {...defaultProps} />);
+      render(<DataTable {...baseProps} />);
       
       // Verify component renders correctly
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
@@ -241,7 +241,7 @@ describe('[component] DataTable', () => {
       mockLogger.info.mockClear();
       
       // Render without features prop - should trigger the warning in development mode
-      render(<DataTable {...defaultProps} />);
+      render(<DataTable {...baseProps} />);
       
       // Wait for useEffect to run - it runs after render
       // The effect checks: if (!features && import.meta.env?.MODE === 'development')
@@ -259,7 +259,7 @@ describe('[component] DataTable', () => {
     });
 
     it('does not log info message when features are provided', () => {
-      render(<DataTable {...defaultProps} features={createDefaultFeatures()} />);
+      render(<DataTable {...baseProps} features={createDefaultFeatures()} />);
       
       expect(mockLogger.info).not.toHaveBeenCalled();
     });
@@ -270,7 +270,7 @@ describe('[component] DataTable', () => {
         deletion: false,
       });
       
-      render(<DataTable {...defaultProps} features={invalidFeatures} />);
+      render(<DataTable {...baseProps} features={invalidFeatures} />);
       
       expect(mockLogger.warn).toHaveBeenCalledWith(
         'deleteSelected requires deletion to be enabled'
@@ -283,7 +283,7 @@ describe('[component] DataTable', () => {
         deletion: true,
       });
       
-      render(<DataTable {...defaultProps} features={validFeatures} />);
+      render(<DataTable {...baseProps} features={validFeatures} />);
       
       expect(mockLogger.warn).not.toHaveBeenCalled();
     });
@@ -292,81 +292,57 @@ describe('[component] DataTable', () => {
   describe('Event Handlers', () => {
     it('passes onEditRow handler to DataTableCore', () => {
       const onEditRow = vi.fn();
-      render(<DataTable {...defaultProps} onEditRow={onEditRow} />);
+      render(<DataTable {...baseProps} onEditRow={onEditRow} />);
       
-      expect(getMockedDataTableCore()).toHaveBeenCalledWith(
-        expect.objectContaining({
-          onEditRow,
-        }),
-        expect.anything()
-      );
+      const mockCall = getMockedDataTableCore().mock.calls[0];
+      expect(mockCall[0]).toHaveProperty('onEditRow', onEditRow);
     });
 
     it('passes onDeleteRow handler to DataTableCore', () => {
       const onDeleteRow = vi.fn();
-      render(<DataTable {...defaultProps} onDeleteRow={onDeleteRow} />);
+      render(<DataTable {...baseProps} onDeleteRow={onDeleteRow} />);
       
-      expect(getMockedDataTableCore()).toHaveBeenCalledWith(
-        expect.objectContaining({
-          onDeleteRow,
-        }),
-        expect.anything()
-      );
+      const mockCall = getMockedDataTableCore().mock.calls[0];
+      expect(mockCall[0]).toHaveProperty('onDeleteRow', onDeleteRow);
     });
 
     it('passes onCreateRow handler to DataTableCore', () => {
       const onCreateRow = vi.fn();
-      render(<DataTable {...defaultProps} onCreateRow={onCreateRow} />);
+      render(<DataTable {...baseProps} onCreateRow={onCreateRow} />);
       
-      expect(getMockedDataTableCore()).toHaveBeenCalledWith(
-        expect.objectContaining({
-          onCreateRow,
-        }),
-        expect.anything()
-      );
+      const mockCall = getMockedDataTableCore().mock.calls[0];
+      expect(mockCall[0]).toHaveProperty('onCreateRow', onCreateRow);
     });
 
     it('passes onImport handler to DataTableCore', () => {
       const onImport = vi.fn();
-      render(<DataTable {...defaultProps} onImport={onImport} />);
+      render(<DataTable {...baseProps} onImport={onImport} />);
       
-      expect(getMockedDataTableCore()).toHaveBeenCalledWith(
-        expect.objectContaining({
-          onImport,
-        }),
-        expect.anything()
-      );
+      const mockCall = getMockedDataTableCore().mock.calls[0];
+      expect(mockCall[0]).toHaveProperty('onImport', onImport);
     });
 
     it('passes onRowSelectionChange handler to DataTableCore', () => {
       const onRowSelectionChange = vi.fn();
-      render(<DataTable {...defaultProps} onRowSelectionChange={onRowSelectionChange} />);
+      render(<DataTable {...baseProps} onRowSelectionChange={onRowSelectionChange} />);
       
-      expect(getMockedDataTableCore()).toHaveBeenCalledWith(
-        expect.objectContaining({
-          onRowSelectionChange,
-        }),
-        expect.anything()
-      );
+      const mockCall = getMockedDataTableCore().mock.calls[0];
+      expect(mockCall[0]).toHaveProperty('onRowSelectionChange', onRowSelectionChange);
     });
 
     it('passes onDeleteSelected handler to DataTableCore', () => {
       const onDeleteSelected = vi.fn();
-      render(<DataTable {...defaultProps} onDeleteSelected={onDeleteSelected} />);
+      render(<DataTable {...baseProps} onDeleteSelected={onDeleteSelected} />);
       
-      expect(getMockedDataTableCore()).toHaveBeenCalledWith(
-        expect.objectContaining({
-          onDeleteSelected,
-        }),
-        expect.anything()
-      );
+      const mockCall = getMockedDataTableCore().mock.calls[0];
+      expect(mockCall[0]).toHaveProperty('onDeleteSelected', onDeleteSelected);
     });
   });
 
   describe('Data Handling', () => {
     it('handles empty data array', () => {
       // Note: Debug logging has been removed from DataTable component
-      render(<DataTable {...defaultProps} data={[]} />);
+      render(<DataTable {...baseProps} data={[]} />);
       
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
     });
@@ -374,7 +350,7 @@ describe('[component] DataTable', () => {
     it('handles single data item', () => {
       // Note: Debug logging has been removed from DataTable component
       const singleData = testDataScenarios.single;
-      render(<DataTable {...defaultProps} data={singleData} />);
+      render(<DataTable {...baseProps} data={singleData} />);
       
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
     });
@@ -382,14 +358,14 @@ describe('[component] DataTable', () => {
     it('handles large dataset', () => {
       // Note: Debug logging has been removed from DataTable component
       const largeData = testDataScenarios.large;
-      render(<DataTable {...defaultProps} data={largeData} />);
+      render(<DataTable {...baseProps} data={largeData} />);
       
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
     });
 
     it('handles data with null values', () => {
       const dataWithNulls = testDataScenarios.withNulls;
-      render(<DataTable {...defaultProps} data={dataWithNulls} />);
+      render(<DataTable {...baseProps} data={dataWithNulls} />);
       
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
     });
@@ -402,14 +378,10 @@ describe('[component] DataTable', () => {
         enableChunking: true,
       };
       
-      render(<DataTable {...defaultProps} performance={performance} />);
+      render(<DataTable {...baseProps} performance={performance} />);
       
-      expect(getMockedDataTableCore()).toHaveBeenCalledWith(
-        expect.objectContaining({
-          performance,
-        }),
-        expect.anything()
-      );
+      const mockCall = getMockedDataTableCore().mock.calls[0];
+      expect(mockCall[0]).toHaveProperty('performance', performance);
     });
 
     it('passes serverSide config to DataTableCore', () => {
@@ -418,32 +390,24 @@ describe('[component] DataTable', () => {
         enableServerSorting: true,
       };
       
-      render(<DataTable {...defaultProps} serverSide={serverSide} />);
+      render(<DataTable {...baseProps} serverSide={serverSide} />);
       
-      expect(getMockedDataTableCore()).toHaveBeenCalledWith(
-        expect.objectContaining({
-          serverSide,
-        }),
-        expect.anything()
-      );
+      const mockCall = getMockedDataTableCore().mock.calls[0];
+      expect(mockCall[0]).toHaveProperty('serverSide', serverSide);
     });
 
     it('passes paginationMode to DataTableCore', () => {
-      render(<DataTable {...defaultProps} paginationMode="server" />);
+      render(<DataTable {...baseProps} paginationMode="server" />);
       
-      expect(getMockedDataTableCore()).toHaveBeenCalledWith(
-        expect.objectContaining({
-          paginationMode: 'server',
-        }),
-        expect.anything()
-      );
+      const mockCall = getMockedDataTableCore().mock.calls[0];
+      expect(mockCall[0]).toHaveProperty('paginationMode', 'server');
     });
   });
 
   describe('Component Integration', () => {
     it('passes all props to DataTableCore except features', () => {
       const allProps = {
-        ...defaultProps,
+        ...baseProps,
         title: 'Test Table',
         description: 'Test description',
         variant: 'compact' as const,
@@ -490,7 +454,7 @@ describe('[component] DataTable', () => {
 
   describe('Memory Management', () => {
     it('cleans up resources on unmount', () => {
-      const { unmount } = render(<DataTable {...defaultProps} />);
+      const { unmount } = render(<DataTable {...baseProps} />);
       
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
       
@@ -499,11 +463,11 @@ describe('[component] DataTable', () => {
     });
 
     it('handles rapid mount/unmount cycles', () => {
-      const { unmount: unmount1 } = render(<DataTable {...defaultProps} />);
+      const { unmount: unmount1 } = render(<DataTable {...baseProps} />);
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
       unmount1();
       
-      const { unmount: unmount2 } = render(<DataTable {...defaultProps} />);
+      const { unmount: unmount2 } = render(<DataTable {...baseProps} />);
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
       unmount2();
       
@@ -514,27 +478,27 @@ describe('[component] DataTable', () => {
   describe('Edge Cases', () => {
     it('handles missing columns gracefully', () => {
       // Note: Debug logging has been removed from DataTable component
-      render(<DataTable {...defaultProps} columns={[]} />);
+      render(<DataTable {...baseProps} columns={[]} />);
       
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
     });
 
     it('handles undefined rbac pageId and pageName', () => {
       // Note: Debug logging has been removed from DataTable component
-      render(<DataTable {...defaultProps} rbac={{}} />);
+      render(<DataTable {...baseProps} rbac={{}} />);
       
       expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
     });
 
     it('handles rapid feature prop changes', () => {
-      const { rerender } = render(<DataTable {...defaultProps} features={{ search: true }} />);
+      const { rerender } = render(<DataTable {...baseProps} features={{ search: true }} />);
       
       expect(getMockedDataTableCore()).toHaveBeenCalledTimes(1);
       
-      rerender(<DataTable {...defaultProps} features={{ search: false }} />);
+      rerender(<DataTable {...baseProps} features={{ search: false }} />);
       expect(getMockedDataTableCore()).toHaveBeenCalledTimes(2);
       
-      rerender(<DataTable {...defaultProps} features={{ search: true, pagination: true }} />);
+      rerender(<DataTable {...baseProps} features={{ search: true, pagination: true }} />);
       expect(getMockedDataTableCore()).toHaveBeenCalledTimes(3);
     });
   });

package/src/components/DataTable/DataTable.tsx

@@ -424,7 +424,7 @@ export interface DataTableProps<TData extends DataRecord> {
   /** Whether the table is in a loading state */
   isLoading?: boolean;
   /** Custom component to display when table is empty */
-  emptyState?: EmptyStateConfig | React.ReactElement;
+  emptyState?: EmptyStateConfig | React.ReactElement<any>;
   /** Array of aggregation functions for grouped data */
   aggregates?: AggregateConfig[];
   
@@ -463,7 +463,7 @@ export interface DataTableProps<TData extends DataRecord> {
  * Features are configured through the unified `features` prop for maximum flexibility.
  */
 export function DataTable<TData extends DataRecord>(props: DataTableProps<TData>) {
-  const logger = React.useMemo(() => createLogger('DataTable'), []);
+  const logger = createLogger('DataTable');
   const { features, ...rest } = props;
 
   const normalizedFeatures = React.useMemo(

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';
@@ -377,6 +378,7 @@ describe('DataTable Pagination Integration', () => {
     });
 
     it('should navigate pages correctly in client mode', async () => {
+      const user = userEvent.setup();
       render(
         <DataTable
           data={smallDataset}
@@ -412,13 +414,19 @@ describe('DataTable Pagination Integration', () => {
       // Should start on page 1
       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

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)