@jmruthers/pace-core 0.6.2 → 0.6.4

package/scripts/audit/core/checks/documentation.cjs

@@ -97,6 +97,14 @@ const documentationCheck = {
         }
         
         // Find exported functions/components
+        // Match various export patterns:
+        // - export function Name
+        // - export const Name = ...
+        // - export class Name
+        // - export interface Name
+        // - export type Name
+        // - export default function Name
+        // - export default const Name = ...
         const exportPattern = /export\s+(?:default\s+)?(?:async\s+)?(function|const|class|interface|type)\s+(\w+)/g;
         let match;
         while ((match = exportPattern.exec(content)) !== null) {
@@ -105,9 +113,66 @@ const documentationCheck = {
           const exportIndex = match.index;
           
           // Check if there's JSDoc before this export
-          const beforeExport = content.substring(Math.max(0, exportIndex - 500), exportIndex);
-          const hasJSDoc = /\/\*\*[\s\S]*?\*\//.test(beforeExport) || 
-                          /\/\/\/\s*</.test(beforeExport);
+          // Search backwards up to 2000 characters, but stop at:
+          // - Previous export statement
+          // - Previous function/class/interface/type declaration (non-exported)
+          // - File start
+          const searchStart = Math.max(0, exportIndex - 2000);
+          const beforeExport = content.substring(searchStart, exportIndex);
+          
+          // Find the last export/declaration before this one to avoid false positives
+          // from JSDoc comments that belong to previous exports
+          const previousExportMatch = beforeExport.match(/export\s+(?:default\s+)?(?:async\s+)?(function|const|class|interface|type)\s+\w+/);
+          const previousDeclMatch = beforeExport.match(/(?:^|\n)\s*(?:async\s+)?(function|const|class|interface|type)\s+\w+/);
+          
+          let searchWindow = beforeExport;
+          if (previousExportMatch && previousExportMatch.index !== undefined) {
+            // Start search after the previous export
+            const prevExportEnd = previousExportMatch.index + previousExportMatch[0].length;
+            searchWindow = beforeExport.substring(prevExportEnd);
+          } else if (previousDeclMatch && previousDeclMatch.index !== undefined) {
+            // Start search after the previous declaration (but be more lenient)
+            const prevDeclEnd = previousDeclMatch.index + previousDeclMatch[0].length;
+            // Only use this if it's close to our export (within 500 chars)
+            if (prevDeclEnd > beforeExport.length - 500) {
+              searchWindow = beforeExport.substring(prevDeclEnd);
+            }
+          }
+          
+          // Check for JSDoc in the search window
+          // Look for standard JSDoc block comments /** ... */
+          // Also check for TypeScript triple-slash reference comments /// <
+          // Check if JSDoc ends close to our export (within last 100 chars of search window)
+          const jsdocBlockMatch = searchWindow.match(/\/\*\*[\s\S]*?\*\//g);
+          const jsdocRefMatch = searchWindow.match(/\/\/\/\s*</g);
+          
+          let hasJSDoc = false;
+          
+          // Check if JSDoc block comment ends close to our export
+          if (jsdocBlockMatch && jsdocBlockMatch.length > 0) {
+            const lastJSDoc = jsdocBlockMatch[jsdocBlockMatch.length - 1];
+            const lastJSDocEnd = searchWindow.lastIndexOf(lastJSDoc) + lastJSDoc.length;
+            // JSDoc is considered associated if it ends within 200 characters of the export
+            // or if there's only whitespace/comments between JSDoc and export
+            const distanceToExport = searchWindow.length - lastJSDocEnd;
+            const betweenJSDocAndExport = searchWindow.substring(lastJSDocEnd);
+            // Check if there's only whitespace, comments, or newlines between JSDoc and export
+            // Remove all whitespace and single-line comments, then check if anything remains
+            const cleanedBetween = betweenJSDocAndExport
+              .replace(/\/\/.*$/gm, '') // Remove single-line comments
+              .replace(/\/\*[\s\S]*?\*\//g, '') // Remove block comments (shouldn't be here, but just in case)
+              .replace(/[\s\n\r]/g, ''); // Remove all whitespace
+            const onlyWhitespaceBetween = cleanedBetween.length === 0;
+            hasJSDoc = distanceToExport <= 200 || onlyWhitespaceBetween;
+          }
+          
+          // Also check for TypeScript reference comments
+          if (!hasJSDoc && jsdocRefMatch && jsdocRefMatch.length > 0) {
+            const lastRef = jsdocRefMatch[jsdocRefMatch.length - 1];
+            const lastRefEnd = searchWindow.lastIndexOf(lastRef) + lastRef.length;
+            const distanceToExport = searchWindow.length - lastRefEnd;
+            hasJSDoc = distanceToExport <= 200;
+          }
           
           // Only check public exports (not internal utilities)
           const isPublic = match[0].includes('export') && 

package/scripts/audit/core/checks/environment.cjs

@@ -9,7 +9,6 @@
  * - Missing required environment variables
  * - Hardcoded secrets/API keys
  * - Incorrect environment variable usage
- * - Missing .env.example file
  */
 
 const fs = require('fs');
@@ -17,7 +16,7 @@ const path = require('path');
 
 const environmentCheck = {
   name: 'environment',
-  description: 'Environment variable usage (secrets, required vars, .env.example)',
+  description: 'Environment variable usage (secrets, required vars)',
   severity: 'warning',
   
   async run(context) {
@@ -26,24 +25,13 @@ const environmentCheck = {
     const warnings = [];
     const suggestions = [];
     
-    // Check for .env.example
-    const envExamplePath = path.join(projectRoot, '.env.example');
-    if (!fs.existsSync(envExamplePath)) {
-      suggestions.push({
-        type: 'missing-env-example',
-        file: '.env.example',
-        message: '.env.example file is missing',
-        recommendation: 'Create .env.example with all required environment variables (without actual values)'
-      });
-    }
-    
     // Required environment variables for pace-core apps
     const requiredEnvVars = [
       'VITE_SUPABASE_URL',
       'VITE_SUPABASE_PUBLISHABLE_KEY'
     ];
     
-    // Check .env.example for required vars
+    // Check .env.example for required vars (if file exists)
     if (fs.existsSync(envExamplePath)) {
       try {
         const envExampleContent = fs.readFileSync(envExamplePath, 'utf8');

package/scripts/audit/core/checks/error-handling.cjs

@@ -37,10 +37,56 @@ const errorHandlingCheck = {
     const packagesCorePath = path.join(projectRoot, 'packages', 'core');
     const isPaceCoreRepository = fs.existsSync(packagesCorePath);
     
-    // Check for ErrorBoundary usage
+    // Check for ErrorBoundary usage in main app file
     let hasErrorBoundary = false;
     const mainFiles = ['main.tsx', 'main.ts', 'App.tsx', 'App.ts', 'index.tsx', 'index.ts'];
     
+    // First, specifically check the main app file for ErrorBoundary usage
+    // This must be done before the general file loop to ensure we check the actual main file
+    // Previously, the check would skip src/ files (thinking they were demo apps) and only
+    // check if ErrorBoundary appeared anywhere in the codebase. Now we specifically check
+    // the main.tsx file for proper ErrorBoundary import and JSX usage patterns.
+    if (!isPaceCoreRepository) {
+      const mainFile = mainFiles.find(file => {
+        const filePath = path.join(projectRoot, 'src', file);
+        return fs.existsSync(filePath);
+      });
+      
+      if (mainFile) {
+        const mainFilePath = path.join(projectRoot, 'src', mainFile);
+        try {
+          const mainContent = fs.readFileSync(mainFilePath, 'utf8');
+          
+          // Check for ErrorBoundary import from pace-core
+          // Matches: import { ErrorBoundary } from '@jmruthers/pace-core'
+          // Matches: import { ..., ErrorBoundary, ... } from '@jmruthers/pace-core'
+          // Matches: import { ErrorBoundary } from '@jmruthers/pace-core/components'
+          const hasErrorBoundaryImport = /import\s+[^'"]*ErrorBoundary[^'"]*from\s+['"]@jmruthers\/pace-core/.test(mainContent);
+          
+          // Check for ErrorBoundary JSX usage
+          // Matches: <ErrorBoundary ...> or <ErrorBoundary>
+          const hasErrorBoundaryJSX = /<ErrorBoundary[\s>]/.test(mainContent);
+          
+          // Check if ErrorBoundary wraps the render call or app component
+          // Pattern 1: createRoot(...).render(<ErrorBoundary ...)
+          // Pattern 2: render(<ErrorBoundary ...)
+          // Pattern 3: <ErrorBoundary ...> wrapping App component or createRoot call
+          const hasErrorBoundaryInRender = /createRoot\s*\([^)]*\)\s*\.\s*render\s*\(\s*<ErrorBoundary/.test(mainContent) ||
+                                          /\.render\s*\(\s*<ErrorBoundary/.test(mainContent) ||
+                                          /<ErrorBoundary[\s\S]{0,500}?<App[\s>]/.test(mainContent) ||
+                                          /<ErrorBoundary[\s\S]{0,500}?createRoot/.test(mainContent);
+          
+          // ErrorBoundary is present if it's imported AND used in JSX
+          // We check both JSX usage and render wrapping to catch all valid patterns
+          if (hasErrorBoundaryImport && (hasErrorBoundaryJSX || hasErrorBoundaryInRender)) {
+            hasErrorBoundary = true;
+          }
+        } catch (error) {
+          // If we can't read the main file, continue with other checks
+        }
+      }
+    }
+    
     for (const filePath of files) {
       try {
         const content = fs.readFileSync(filePath, 'utf8');
@@ -61,11 +107,6 @@ const errorHandlingCheck = {
           continue; // Skip script files
         }
         
-        // Check for ErrorBoundary
-        if (content.includes('ErrorBoundary') || content.includes('error-boundary')) {
-          hasErrorBoundary = true;
-        }
-        
         // Check for unhandled promise rejections
         const asyncFunctionPattern = /(async\s+function|const\s+\w+\s*=\s*async|export\s+async\s+function)/g;
         let asyncMatch;

package/src/components/ContextSelector/ContextSelector.tsx

@@ -0,0 +1,384 @@
+/**
+ * @file Context Selector Component
+ * @package @jmruthers/pace-core
+ * @module Components/ContextSelector
+ * @since 0.6.4
+ *
+ * A unified intelligent selector component that shows all organisations and events
+ * a user can access based on their roles and permissions. This is the single
+ * selector for all apps - it intelligently determines what to show based on:
+ * - User's organisation roles
+ * - User's event-app roles
+ * - Super admin status (shows all)
+ *
+ * Features:
+ * - Intelligent display of accessible organisations and events
+ * - Grouped display (Organisations / Events sections)
+ * - Visual distinction between orgs and events
+ * - Super admin support (shows all orgs and events)
+ * - Loading states and error handling
+ * - Accessible interface design
+ * - Integration with OrganisationProvider and EventService
+ * - Automatically shows superset of what user can access
+ *
+ * @example
+ * ```tsx
+ * <ContextSelector
+ *   onOrganisationSelect={(org) => {
+ *     switchOrganisation(org.id);
+ *   }}
+ *   onEventSelect={(event) => {
+ *     setSelectedEvent(event);
+ *   }}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ * - Focus management
+ * - ARIA labels and descriptions
+ * - High contrast support
+ *
+ * @security
+ * - Only shows organisations/events user has access to
+ * - Super admins see all items
+ * - Validates access before selection
+ */
+
+import React, { useMemo } from 'react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectGroup, SelectLabel, SelectSeparator } from '../Select';
+import { Alert, AlertDescription } from '../Alert/Alert';
+import { Button } from '../Button/Button';
+import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
+import { RefreshCw, AlertCircle, Building2, Calendar } from 'lucide-react';
+import { useOrganisations } from '../../hooks/useOrganisations';
+import { useEvents } from '../../hooks/useEvents';
+import { useRBAC } from '../../rbac/hooks/useRBAC';
+import type { Organisation } from '../../types/organisation';
+import type { Event } from '../../types/event';
+import { logger } from '../../utils/core/logger';
+
+/**
+ * Props for the ContextSelector component.
+ */
+export interface ContextSelectorProps {
+  /** Placeholder text for the dropdown */
+  placeholder?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Callback fired when an organisation is selected */
+  onOrganisationSelect?: (org: Organisation) => void;
+  /** Callback fired when an event is selected */
+  onEventSelect?: (event: Event) => void;
+  /** Show friendly message when no items available */
+  showNoItemsMessage?: boolean;
+  /** Show retry button on errors */
+  showRetryButton?: boolean;
+  /** Compact display mode */
+  compact?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Show organisations section (default: true) */
+  showOrganisations?: boolean;
+  /** Show events section (default: true) */
+  showEvents?: boolean;
+}
+
+/**
+ * ContextSelector component for selecting organisations or events
+ * 
+ * This is the unified intelligent selector that shows all organisations and events
+ * a user can access. It automatically determines what to show based on the user's
+ * roles and permissions - no need to configure separate org/event selectors.
+ * 
+ * The selector intelligently shows:
+ * - All organisations the user has access to (via organisation roles)
+ * - All events the user has access to (via event-app roles or organisation membership)
+ * - Everything for super admins
+ * 
+ * @component
+ * @example
+ * <ContextSelector
+ *   onOrganisationSelect={(org) => switchOrganisation(org)}
+ *   onEventSelect={(event) => setSelectedEvent(event)}
+ * />
+ */
+export function ContextSelector({
+  placeholder = "Select organisation or event",
+  className,
+  onOrganisationSelect,
+  onEventSelect,
+  showNoItemsMessage = true,
+  showRetryButton = true,
+  compact = false,
+  disabled = false,
+  showOrganisations = true,
+  showEvents = true
+}: ContextSelectorProps) {
+  const { 
+    organisations, 
+    selectedOrganisation,
+    isLoading: orgLoading,
+    error: orgError,
+    refreshOrganisations
+  } = useOrganisations();
+  
+  const { 
+    events, 
+    selectedEvent, 
+    isLoading: eventLoading, 
+    error: eventError, 
+    refreshEvents
+  } = useEvents();
+  
+  const { isSuperAdmin } = useRBAC();
+  
+  const isLoading = (showOrganisations && orgLoading) || (showEvents && eventLoading);
+  const hasError = (showOrganisations && orgError) || (showEvents && eventError);
+  const hasItems = 
+    (showOrganisations && (organisations?.length || 0) > 0) || 
+    (showEvents && (events?.length || 0) > 0);
+  
+  // Determine current selection value
+  // Priority: Event selection takes precedence over organisation selection
+  // When an event is selected, show the event (even if an org is also selected)
+  // The organisation remains in context (derived from event) but selector shows the active selection
+  const currentValue = useMemo(() => {
+    if (showEvents && selectedEvent) {
+      return `event:${selectedEvent.event_id || selectedEvent.id}`;
+    }
+    if (showOrganisations && selectedOrganisation) {
+      return `org:${selectedOrganisation.id}`;
+    }
+    return '';
+  }, [showOrganisations, showEvents, selectedOrganisation?.id, selectedEvent]);
+  
+  const handleValueChange = (value: string) => {
+    if (disabled || isLoading) return;
+    
+    if (value.startsWith('org:') && showOrganisations) {
+      const orgId = value.replace('org:', '');
+      const org = organisations?.find(o => o.id === orgId);
+      if (org && onOrganisationSelect) {
+        onOrganisationSelect(org);
+      }
+    } else if (value.startsWith('event:') && showEvents) {
+      const eventId = value.replace('event:', '');
+      const event = events?.find(e => (e.event_id || e.id) === eventId);
+      if (event && onEventSelect) {
+        onEventSelect(event);
+      }
+    }
+  };
+  
+  const handleRetry = async () => {
+    try {
+      if (showOrganisations && orgError) {
+        await refreshOrganisations();
+      }
+      if (showEvents && eventError) {
+        await refreshEvents();
+      }
+    } catch (error) {
+      logger.error('ContextSelector', 'Failed to refresh:', error);
+    }
+  };
+  
+  // Loading state - only show loading if we don't have any items yet
+  // This prevents the selector from being stuck in loading when data exists
+  if (isLoading && !hasItems) {
+    const loadingText = compact ? "Loading..." : 
+      showOrganisations && showEvents ? "Loading organisations and events..." :
+      showOrganisations ? "Loading organisations..." :
+      "Loading events...";
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <LoadingSpinner size="sm" />
+        <span className="text-sm text-muted-foreground">
+          {loadingText}
+        </span>
+      </div>
+    );
+  }
+  
+  // Error state
+  if (hasError) {
+    const errorMessages = [];
+    if (showOrganisations && orgError) {
+      errorMessages.push(`Failed to load organisations: ${orgError.message}`);
+    }
+    if (showEvents && eventError) {
+      errorMessages.push(`Failed to load events: ${eventError.message}`);
+    }
+    return (
+      <div className={`space-y-2 ${className}`}>
+        <Alert variant="destructive">
+          <AlertCircle className="size-4" />
+          <AlertDescription>
+            {errorMessages.join(' ')}
+          </AlertDescription>
+        </Alert>
+        {showRetryButton && (
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={handleRetry}
+            disabled={isLoading}
+            className="w-full"
+          >
+            <RefreshCw className={`size-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+            Retry
+          </Button>
+        )}
+      </div>
+    );
+  }
+  
+  // No items available
+  if (!hasItems) {
+    if (showNoItemsMessage) {
+      const noItemsText = 
+        showOrganisations && showEvents ? "No organisations or events available. Please contact your administrator." :
+        showOrganisations ? "No organisations available. Please contact your administrator." :
+        "No events available. Please contact your administrator.";
+      return (
+        <div className={`space-y-2 ${className}`}>
+          <Alert>
+            <AlertCircle className="size-4" />
+            <AlertDescription>
+              {noItemsText}
+            </AlertDescription>
+          </Alert>
+          {showRetryButton && (
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={handleRetry}
+              disabled={isLoading}
+              className="w-full"
+            >
+              <RefreshCw className={`size-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+              Check Again
+            </Button>
+          )}
+        </div>
+      );
+    }
+    return null;
+  }
+  
+  // Format display value
+  // Priority: Event selection takes precedence over organisation selection (matches currentValue)
+  const displayValue = useMemo(() => {
+    if (showEvents && selectedEvent) {
+      return (
+        <div className="flex items-center gap-2">
+          <Calendar className="size-4 flex-shrink-0" />
+          <span className="truncate">{selectedEvent.event_name}</span>
+        </div>
+      );
+    }
+    if (showOrganisations && selectedOrganisation) {
+      return (
+        <div className="flex items-center gap-2">
+          <Building2 className="size-4 flex-shrink-0" />
+          <span className="truncate">{selectedOrganisation.display_name}</span>
+        </div>
+      );
+    }
+    return null;
+  }, [showOrganisations, showEvents, selectedOrganisation, selectedEvent]);
+  
+  // Determine placeholder text based on what's shown
+  const effectivePlaceholder = useMemo(() => {
+    if (placeholder !== "Select organisation or event") {
+      return placeholder;
+    }
+    if (showOrganisations && showEvents) {
+      return "Select organisation or event";
+    }
+    if (showOrganisations) {
+      return "Select organisation";
+    }
+    if (showEvents) {
+      return "Select event";
+    }
+    return placeholder;
+  }, [placeholder, showOrganisations, showEvents]);
+  
+  return (
+    <div className={className} data-testid="context-selector">
+      <Select 
+        value={currentValue}
+        onValueChange={handleValueChange}
+        disabled={disabled || isLoading}
+      >
+        <SelectTrigger 
+          className="text-left"
+          variant="outline"
+        >
+          <SelectValue placeholder={effectivePlaceholder}>
+            {displayValue}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {/* Organisations Section */}
+          {showOrganisations && organisations && organisations.length > 0 && (
+            <>
+              <SelectGroup>
+                <SelectLabel>Organisations</SelectLabel>
+                {organisations.map((org) => (
+                  <SelectItem 
+                    key={org.id} 
+                    value={`org:${org.id}`}
+                  >
+                    <div className="flex items-center gap-2">
+                      <Building2 className="size-4" />
+                      <div className="flex flex-col">
+                        <span className="font-medium">{org.display_name}</span>
+                        {!compact && org.description && (
+                          <span className="text-xs text-muted-foreground truncate max-w-40">
+                            {org.description}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+              {showEvents && events && events.length > 0 && <SelectSeparator />}
+            </>
+          )}
+          
+          {/* Events Section */}
+          {showEvents && events && events.length > 0 && (
+            <SelectGroup>
+              <SelectLabel>Events</SelectLabel>
+              {events.map((event) => (
+                <SelectItem 
+                  key={event.event_id || event.id} 
+                  value={`event:${event.event_id || event.id}`}
+                >
+                  <div className="flex items-center gap-2">
+                    <Calendar className="size-4" />
+                    <div className="flex flex-col">
+                      <span className="font-medium">{event.event_name}</span>
+                      {!compact && event.event_date && (
+                        <span className="text-xs text-muted-foreground">
+                          {new Date(event.event_date).toLocaleDateString()}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          )}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+

package/src/components/ContextSelector/index.ts

@@ -0,0 +1,3 @@
+export { ContextSelector } from './ContextSelector';
+export type { ContextSelectorProps } from './ContextSelector';
+

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

@@ -75,8 +75,7 @@ export interface RowProps {
   };
 }
 
-const RowComponent = React.memo(
-  ({
+const RowComponent = ({
     row,
     style,
     isEditing,
@@ -138,6 +137,23 @@ const RowComponent = React.memo(
       }
     }, [isEditing, onSaveEditing, onCancelEditing]);
 
+    // CRITICAL: All hooks must be called before any early returns to avoid React hooks violations
+    // Move useMemo hooks here so they're always called, regardless of early returns below
+    const indentSize = hierarchical?.indentSize || 24;
+    const indentation = useMemo(() => {
+      return isChild && hierarchical?.state ? calculateIndentation(hierarchicalRow, [], indentSize) : 0;
+    }, [isChild, hierarchical?.state, hierarchicalRow, indentSize]);
+
+    const rowClassName = useMemo(() => {
+      if (isHierarchical) {
+        const hierarchicalClass = isParent
+          ? hierarchical?.parentRowClassName || 'bg-main-50 hover:bg-main-100 font-medium'
+          : hierarchical?.childRowClassName || 'bg-sec-25 hover:bg-sec-50';
+        return cn(getTableRowClasses({ isSelected, isVirtualized: false }), hierarchicalClass);
+      }
+      return getTableRowClasses({ isSelected, isVirtualized: false });
+    }, [isHierarchical, isParent, isSelected, hierarchical]);
+
     if (row.getIsGrouped && row.getIsGrouped()) {
       const groupValue = row.getValue(grouping[0]);
       const subRowsCount = row.subRows?.length || 0;
@@ -250,21 +266,6 @@ const RowComponent = React.memo(
       );
     }
 
-    const indentSize = hierarchical?.indentSize || 24;
-    const indentation = useMemo(() => {
-      return isChild && hierarchical?.state ? calculateIndentation(hierarchicalRow, [], indentSize) : 0;
-    }, [isChild, hierarchical?.state, hierarchicalRow, indentSize]);
-
-    const rowClassName = useMemo(() => {
-      if (isHierarchical) {
-        const hierarchicalClass = isParent
-          ? hierarchical?.parentRowClassName || 'bg-main-50 hover:bg-main-100 font-medium'
-          : hierarchical?.childRowClassName || 'bg-sec-25 hover:bg-sec-50';
-        return cn(getTableRowClasses({ isSelected, isVirtualized: false }), hierarchicalClass);
-      }
-      return getTableRowClasses({ isSelected, isVirtualized: false });
-    }, [isHierarchical, isParent, isSelected, hierarchical]);
-
     return (
       <tr
         ref={rowRef}
@@ -332,8 +333,7 @@ const RowComponent = React.memo(
         })}
       </tr>
     );
-  }
-);
+  };
 
 RowComponent.displayName = 'RowComponent';
 

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

@@ -11,7 +11,7 @@
 
 import React, { useEffect, useRef } from 'react';
 import { type Table } from '@tanstack/react-table';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual';
 import { EmptyState } from './EmptyState';
 import { FilterRow } from './FilterRow';
 import { MemoizedRow } from './RowComponent';
@@ -194,7 +194,7 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
     }
 
     if (effectiveShouldVirtualize && virtualRows.length > 0) {
-      return virtualRows.map((virtualRow) => {
+      return virtualRows.map((virtualRow: VirtualItem) => {
         const row = rows[virtualRow.index];
         if (!row) return null;