@jmruthers/pace-core 0.6.8 → 0.6.10

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { flexRender } from '@tanstack/react-table';
+import { flexRender, type Row, type Cell } from '@tanstack/react-table';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { Button } from '../../Button/Button';
 import { ActionButtons } from './ActionButtons';
@@ -13,6 +13,7 @@ import type {
   DataTableColumn,
   HierarchicalConfig,
   HierarchicalDataRow,
+  CellValue,
 } from '../types';
 import { calculateIndentation } from '../utils/hierarchicalUtils';
 import { getRowIdSafe } from '../utils/rowUtils';
@@ -22,16 +23,17 @@ import { getRowIdSafe } from '../utils/rowUtils';
  * Defines the configuration for rendering a single table row.
  */
 export interface RowProps {
-  row: any;
+  row: Row<DataRecord>;
   style?: React.CSSProperties;
   isEditing?: boolean;
-  editingData?: Record<string, any>;
-  onEditingDataChange?: (data: Record<string, any>) => void;
+  editingData?: Record<string, unknown>;
+  onEditingDataChange?: (data: Record<string, unknown>) => void;
   onSaveEditing?: () => void;
   onCancelEditing?: () => void;
-  getRowId?: (row: any, index: number) => string;
+  getRowId?: (row: DataRecord, index: number) => string;
   grouping: string[];
   editingRowId?: string | null;
+  rowSelection?: Record<string, boolean>;
   hierarchical?:
     | (HierarchicalConfig & {
         state?: {
@@ -44,11 +46,11 @@ export interface RowProps {
     | undefined;
   actions?: DataTableAction<DataRecord>[] | Array<{
     label: string;
-    onClick: (row: any) => void;
-    icon?: any;
+    onClick: (row: DataRecord) => void;
+    icon?: React.ComponentType<{ className?: string }> | React.ReactNode;
     variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
-    disabled?: boolean | ((row?: any) => boolean);
-    visible?: boolean | ((row?: any) => boolean);
+    disabled?: boolean | ((row?: DataRecord) => boolean);
+    visible?: boolean | ((row?: DataRecord) => boolean);
     testId?: string;
     showInEditMode?: boolean;
     hideInViewMode?: boolean;
@@ -56,8 +58,8 @@ export interface RowProps {
     hidden?: boolean;
     showForParent?: boolean;
     showForChild?: boolean;
-    parentIcon?: any;
-    childIcon?: any;
+    parentIcon?: React.ComponentType<{ className?: string }> | React.ReactNode;
+    childIcon?: React.ComponentType<{ className?: string }> | React.ReactNode;
     parentLabel?: string;
     childLabel?: string;
   }>;
@@ -85,7 +87,7 @@ const RowComponent = ({
     onCancelEditing,
     getRowId,
     grouping,
-    editingRowId,
+    editingRowId: _editingRowId,
     hierarchical,
     actions,
     rbac,
@@ -159,11 +161,11 @@ const RowComponent = ({
       const subRowsCount = row.subRows?.length || 0;
       const isExpanded = row.getIsExpanded();
 
-      const childRows: DataRecord[] = row.subRows?.map((subRow: any) => subRow.original) || [];
+      const childRows: DataRecord[] = row.subRows?.map((subRow: Row<DataRecord>) => subRow.original) || [];
 
       return (
         <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
-          {visibleCells.map((cell: any, cellIndex: number) => {
+          {visibleCells.map((cell: Cell<DataRecord, unknown>, cellIndex: number) => {
             const columnDef = cell.column.columnDef as DataTableColumn<DataRecord>;
             const isGroupingColumn = cellIndex === 0 || grouping.includes(cell.column.id || '');
 
@@ -194,19 +196,25 @@ const RowComponent = ({
                 if (columnDef.aggregateCell) {
                   cellContent = columnDef.aggregateCell(aggregatedValue, childRows, columnDef);
                 } else if (columnDef.cell) {
+                  // Create a mock cell with aggregated value for rendering
+                  // Type assertion needed because aggregatedValue type may not match cell's expected value type
                   const mockCell = {
                     ...cell,
                     getValue: () => aggregatedValue,
                     renderValue: () => aggregatedValue,
-                  };
-                  cellContent = flexRender(columnDef.cell, {
+                  } as unknown as Cell<DataRecord, unknown>;
+                  // Create cell context for flexRender - need to match CellContext type
+                  // Type assertion needed because aggregated value may not match expected cell value type
+                  const cellContext = {
                     ...mockCell,
                     row: row,
                     column: cell.column,
                     cell: mockCell,
                     getValue: () => aggregatedValue,
                     renderValue: () => aggregatedValue,
-                  });
+                  };
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type assertion needed for aggregated values
+                  cellContent = flexRender(columnDef.cell, cellContext as any);
                 } else {
                   cellContent = aggregatedValue != null ? String(aggregatedValue) : '';
                 }
@@ -254,11 +262,11 @@ const RowComponent = ({
       return (
         <EditableRow
           row={row}
-          editingData={editingData}
-          onEditingDataChange={onEditingDataChange}
+          editingData={editingData as Record<string, CellValue>}
+          onEditingDataChange={onEditingDataChange as (data: Record<string, CellValue>) => void}
           onSave={onSaveEditing}
           onCancel={onCancelEditing}
-          actions={actions ?? []}
+          actions={(actions ?? []) as DataTableAction<DataRecord>[]}
           getRowId={getRowId}
           isParent={isParent}
           hierarchical={!!hierarchical}
@@ -278,7 +286,7 @@ const RowComponent = ({
         className={rowClassName}
         aria-selected={isSelected ? 'true' : 'false'}
       >
-        {visibleCells.map((cell: any, cellIndex: number) => {
+        {visibleCells.map((cell: Cell<DataRecord, unknown>, cellIndex: number) => {
           const isFirstCell = cellIndex === 0;
           const shouldShowExpansionButton = isHierarchical && isParent && isFirstCell && hierarchical?.state;
           const isExpanded = shouldShowExpansionButton ? hierarchical?.state?.isExpanded(rowId) : false;
@@ -309,7 +317,7 @@ const RowComponent = ({
               {cell.column.id === 'actions' ? (
                 <ActionButtons
                   row={row}
-                  actions={actions}
+                  actions={(actions ?? []) as DataTableAction<DataRecord>[]}
                   isEditing={isEditing}
                   isParent={isParent}
                   hierarchical={!!hierarchical}
@@ -375,11 +383,23 @@ const areRowPropsEqual = (prevProps: RowProps, nextProps: RowProps): boolean =>
     return false;
   }
 
+  // CRITICAL FIX: Check selection state from both row.getIsSelected() and rowSelection prop
+  // This ensures rows re-render when selection changes, even if row object reference doesn't change
   const prevSelected = typeof prevProps.row.getIsSelected === 'function' ? prevProps.row.getIsSelected() : false;
   const nextSelected = typeof nextProps.row.getIsSelected === 'function' ? nextProps.row.getIsSelected() : false;
   if (prevSelected !== nextSelected) {
     return false;
   }
+  
+  // Also check rowSelection prop if provided (for additional reactivity)
+  if (prevProps.rowSelection !== undefined || nextProps.rowSelection !== undefined) {
+    const rowId = prevProps.row.id;
+    const prevRowSelected = prevProps.rowSelection?.[rowId] === true;
+    const nextRowSelected = nextProps.rowSelection?.[rowId] === true;
+    if (prevRowSelected !== nextRowSelected) {
+      return false;
+    }
+  }
 
   // CRITICAL FIX: Check if editingData has changed
   // This ensures EditableRow re-renders when editingData updates (e.g., when dropdown value changes)

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

@@ -10,7 +10,7 @@
  */
 
 import React, { useEffect, useRef } from 'react';
-import { type Table } from '@tanstack/react-table';
+import { type Table, type Row } from '@tanstack/react-table';
 import { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual';
 import { EmptyState } from './EmptyState';
 import { FilterRow } from './FilterRow';
@@ -116,7 +116,7 @@ interface UnifiedTableBodyProps<TData extends DataRecord> {
 /**
  * Unified table body component with intelligent virtualization
  */
-export function UnifiedTableBody<TData extends Record<string, any>>({
+export function UnifiedTableBody<TData extends DataRecord>({
   table,
   isCreating,
   creationData,
@@ -194,6 +194,7 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
     }
 
     if (effectiveShouldVirtualize && virtualRows.length > 0) {
+      const rowSelection = table.getState().rowSelection;
       return virtualRows.map((virtualRow: VirtualItem) => {
         const row = rows[virtualRow.index];
         if (!row) return null;
@@ -204,17 +205,36 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
         return (
           <MemoizedRow
             key={row.id}
-            row={row}
+            row={row as unknown as Row<DataRecord>}
             isEditing={isEditing}
-            editingData={editingData}
-            onEditingDataChange={onEditingDataChange}
+            editingData={editingData as Record<string, unknown>}
+            onEditingDataChange={onEditingDataChange as (data: Record<string, unknown>) => void}
             onSaveEditing={onSaveEditing}
             onCancelEditing={onCancelEditing}
-            getRowId={getRowId}
+            getRowId={getRowId as ((row: DataRecord, index: number) => string) | undefined}
             grouping={grouping}
             editingRowId={editingRowId}
             hierarchical={hierarchical}
-            actions={actions}
+            rowSelection={rowSelection}
+            actions={actions as DataTableAction<DataRecord>[] | Array<{
+              label: string;
+              onClick: (row: DataRecord) => void;
+              icon?: React.ComponentType<{ className?: string }> | React.ReactNode;
+              variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
+              disabled?: boolean | ((row?: DataRecord) => boolean);
+              visible?: boolean | ((row?: DataRecord) => boolean);
+              testId?: string;
+              showInEditMode?: boolean;
+              hideInViewMode?: boolean;
+              showInViewMode?: boolean;
+              hidden?: boolean;
+              showForParent?: boolean;
+              showForChild?: boolean;
+              parentIcon?: React.ComponentType<{ className?: string }> | React.ReactNode;
+              childIcon?: React.ComponentType<{ className?: string }> | React.ReactNode;
+              parentLabel?: string;
+              childLabel?: string;
+            }> | undefined}
             rbac={rbac}
             permissions={permissions}
             style={{
@@ -230,6 +250,7 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
       });
     }
 
+    const rowSelection = table.getState().rowSelection;
     return rows.map((row) => {
       const rowId = getRowIdSafe(row.original, row.index, getRowId);
       const isEditing = editingRowId === rowId;
@@ -237,17 +258,36 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
       return (
         <MemoizedRow
           key={row.id}
-          row={row}
+          row={row as unknown as Row<DataRecord>}
           isEditing={isEditing}
-          editingData={editingData}
-          onEditingDataChange={onEditingDataChange}
+          editingData={editingData as Record<string, unknown>}
+          onEditingDataChange={onEditingDataChange as (data: Record<string, unknown>) => void}
           onSaveEditing={onSaveEditing}
           onCancelEditing={onCancelEditing}
-          getRowId={getRowId}
+          getRowId={getRowId as ((row: DataRecord, index: number) => string) | undefined}
           grouping={grouping}
           editingRowId={editingRowId}
           hierarchical={hierarchical}
-          actions={actions}
+          rowSelection={rowSelection}
+          actions={actions as DataTableAction<DataRecord>[] | Array<{
+            label: string;
+            onClick: (row: DataRecord) => void;
+            icon?: React.ComponentType<{ className?: string }> | React.ReactNode;
+            variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
+            disabled?: boolean | ((row?: DataRecord) => boolean);
+            visible?: boolean | ((row?: DataRecord) => boolean);
+            testId?: string;
+            showInEditMode?: boolean;
+            hideInViewMode?: boolean;
+            showInViewMode?: boolean;
+            hidden?: boolean;
+            showForParent?: boolean;
+            showForChild?: boolean;
+            parentIcon?: React.ComponentType<{ className?: string }> | React.ReactNode;
+            childIcon?: React.ComponentType<{ className?: string }> | React.ReactNode;
+            parentLabel?: string;
+            childLabel?: string;
+          }> | undefined}
           rbac={rbac}
           permissions={permissions}
         />