@jmruthers/pace-core 0.6.4 → 0.6.6

package/src/components/DataTable/components/DataTableBody.tsx

@@ -301,15 +301,23 @@ export function DataTableBody<TData extends DataRecord>({
           <tr>
             {table.getVisibleFlatColumns().map((column) => (
               <td key={column.id}>
-                                 {renderEditField(column, creationData[column.id], (value) => {
-                   if (typeof value === 'object' && value !== null) {
-                     // Handle editAccessorKey case
-                     onCreationDataChange({ ...creationData, ...value });
-                   } else {
-                     // Handle simple value case
-                     onCreationDataChange({ ...creationData, [column.id]: value });
-                   }
-                 }, creationData)}
+                {(() => {
+                  // CRITICAL FIX: Use the correct accessor key (editAccessorKey or column.id) to get the value
+                  // This ensures that when editAccessorKey is different from column.id, we use the correct key
+                  const columnDef = column.columnDef;
+                  const accessorKey = columnDef.editAccessorKey || column.id;
+                  const currentValue = creationData[accessorKey] ?? creationData[column.id] ?? '';
+                  
+                  return renderEditField(column, currentValue, (value) => {
+                    if (typeof value === 'object' && value !== null) {
+                      // Handle editAccessorKey case
+                      onCreationDataChange({ ...creationData, ...value });
+                    } else {
+                      // Handle simple value case
+                      onCreationDataChange({ ...creationData, [column.id]: value });
+                    }
+                  }, creationData);
+                })()}
               </td>
             ))}
             <td className="flex gap-1">
@@ -397,19 +405,27 @@ export function DataTableBody<TData extends DataRecord>({
                     <tr key={subRow.id} className="border-l-2 border-l-blue-200">
                       {subRow.getVisibleCells().map((cell) => (
                         <td key={cell.id} className="pl-8">
-                                            {isSubRowEditing && cell.column.id !== 'actions' ? (
-                    renderEditField(cell.column, editingData[cell.column.id], (value) => {
-                      if (typeof value === 'object' && value !== null) {
-                        // Handle editAccessorKey case
-                        onEditingDataChange({ ...editingData, ...value });
-                      } else {
-                        // Handle simple value case
-                        onEditingDataChange({ ...editingData, [cell.column.id]: value });
-                      }
-                    }, editingData)
-                  ) : (
-                    flexRender(cell.column.columnDef.cell, cell.getContext())
-                  )}
+                          {isSubRowEditing && cell.column.id !== 'actions' ? (
+                            (() => {
+                              // CRITICAL FIX: Use the correct accessor key (editAccessorKey or column.id) to get the value
+                              // This ensures that when editAccessorKey is different from column.id, we use the correct key
+                              const columnDef = cell.column.columnDef;
+                              const accessorKey = columnDef.editAccessorKey || cell.column.id;
+                              const currentValue = editingData[accessorKey] ?? editingData[cell.column.id] ?? cell.getValue();
+                              
+                              return renderEditField(cell.column, currentValue, (value) => {
+                                if (typeof value === 'object' && value !== null) {
+                                  // Handle editAccessorKey case
+                                  onEditingDataChange({ ...editingData, ...value });
+                                } else {
+                                  // Handle simple value case
+                                  onEditingDataChange({ ...editingData, [cell.column.id]: value });
+                                }
+                              }, editingData);
+                            })()
+                          ) : (
+                            flexRender(cell.column.columnDef.cell, cell.getContext())
+                          )}
                         </td>
                       ))}
                     </tr>
@@ -431,15 +447,23 @@ export function DataTableBody<TData extends DataRecord>({
               {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
                   {isEditing && cell.column.id !== 'actions' ? (
-                    renderEditField(cell.column, editingData[cell.column.id], (value) => {
-                      if (typeof value === 'object' && value !== null) {
-                        // Handle editAccessorKey case
-                        onEditingDataChange({ ...editingData, ...value });
-                      } else {
-                        // Handle simple value case
-                        onEditingDataChange({ ...editingData, [cell.column.id]: value });
-                      }
-                    }, editingData)
+                    (() => {
+                      // CRITICAL FIX: Use the correct accessor key (editAccessorKey or column.id) to get the value
+                      // This ensures that when editAccessorKey is different from column.id, we use the correct key
+                      const columnDef = cell.column.columnDef;
+                      const accessorKey = columnDef.editAccessorKey || cell.column.id;
+                      const currentValue = editingData[accessorKey] ?? editingData[cell.column.id] ?? cell.getValue();
+                      
+                      return renderEditField(cell.column, currentValue, (value) => {
+                        if (typeof value === 'object' && value !== null) {
+                          // Handle editAccessorKey case
+                          onEditingDataChange({ ...editingData, ...value });
+                        } else {
+                          // Handle simple value case
+                          onEditingDataChange({ ...editingData, [cell.column.id]: value });
+                        }
+                      }, editingData);
+                    })()
                   ) : (
                     flexRender(cell.column.columnDef.cell, cell.getContext())
                   )}

package/src/components/DataTable/components/DataTableCore.tsx

@@ -8,8 +8,9 @@
  * This is the main component that consumers will use.
  */
 
-import React, { useMemo, useCallback, useEffect, useRef } from 'react';
+import React, { useMemo, useCallback, useEffect, useLayoutEffect, useRef, useState, startTransition, useDeferredValue } from 'react';
 import { useReactTable } from '@tanstack/react-table';
+import { useLocation } from 'react-router-dom';
 import type {
   SortingState,
 } from '@tanstack/react-table';
@@ -182,6 +183,81 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
   
   const logger = createLogger('DataTableCore');
   
+  // Track deletion state to batch updates and prevent flashing
+  const [isDeleting, setIsDeleting] = useState(false);
+  const deletionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const pendingDeletionsRef = useRef<Set<string>>(new Set());
+  const dataSnapshotRef = useRef<TData[]>(data);
+  const dataChangeCountRef = useRef(0);
+  const previousDataLengthRef = useRef(data.length);
+  
+  // CRITICAL: Use useLayoutEffect to capture previous length synchronously
+  // This runs before paint, so we can detect changes before React commits
+  useLayoutEffect(() => {
+    const currentLength = data.length;
+    const previousLength = previousDataLengthRef.current;
+    
+    // Check if length decreased - this is the key detection
+    const lengthDecreased = currentLength < previousLength;
+    
+    if (lengthDecreased && !isDeleting) {
+      // Data length decreased - start deletion batching
+      const snapshotLength = dataSnapshotRef.current.length;
+      
+      // Data decrease detected (logging removed for performance)
+      
+      // If snapshot is larger, it's valid (has pre-deletion state)
+      // Otherwise, update it to preserve current state
+      if (snapshotLength <= currentLength) {
+        dataSnapshotRef.current = [...data];
+      }
+      
+      setIsDeleting(true);
+      
+      // Set timeout to reset after batching
+      if (deletionTimeoutRef.current) {
+        clearTimeout(deletionTimeoutRef.current);
+      }
+      deletionTimeoutRef.current = setTimeout(() => {
+        setIsDeleting(false);
+        dataSnapshotRef.current = data;
+        previousDataLengthRef.current = data.length;
+        // Batching complete (logging removed for performance)
+      }, 150);
+      
+      // Update previous length AFTER setting up batching
+      previousDataLengthRef.current = currentLength;
+    } else if (!lengthDecreased && !isDeleting) {
+      // No deletion - update snapshot and previous length normally
+      dataSnapshotRef.current = data;
+      previousDataLengthRef.current = currentLength;
+    } else if (isDeleting) {
+      // Already deleting - just update previous length for next comparison
+      previousDataLengthRef.current = currentLength;
+    }
+  }, [data, isDeleting]);
+  
+  // Keep data snapshot stable during deletions to prevent flashing
+  // Logging effect - runs after layout to show what happened
+  useEffect(() => {
+    dataChangeCountRef.current += 1;
+    
+    const previousLength = previousDataLengthRef.current;
+    const currentLength = data.length;
+    const snapshotLength = dataSnapshotRef.current.length;
+    const lengthDecreased = currentLength < previousLength;
+    
+    // Data prop changed (logging removed for performance)
+  }, [data, isDeleting]);
+  
+  // Use snapshot data during deletions to prevent flashing
+  // CRITICAL: If we're deleting and data length decreased, use snapshot to prevent flashing
+  const dataLengthChanged = data.length !== dataSnapshotRef.current.length;
+  const isDataDecreasing = data.length < dataSnapshotRef.current.length;
+  const effectiveData = (isDeleting && isDataDecreasing) ? dataSnapshotRef.current : data;
+  
+  // Effective data tracking (logging removed for performance)
+  
   // ============================================================================
   // ALL HOOKS MUST BE CALLED IN THE SAME ORDER EVERY RENDER
   // ============================================================================
@@ -241,15 +317,38 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
     return {};
   }, [secureFeatures.columnVisibility, savedColumnVisibility]);
   
+  // Get location for route-based key derivation
+  let location: { pathname: string } | null = null;
+  try {
+    // useLocation may not be available if React Router is not set up
+    const routerLocation = useLocation();
+    location = routerLocation;
+  } catch {
+    // Router not available, location will be null
+    location = null;
+  }
+
+  // Extract column field names for sensitive field filtering
+  const columnFieldNames = useMemo(() => {
+    return columns
+      .map((col) => col.accessorKey || col.id)
+      .filter((key): key is string => Boolean(key));
+  }, [columns]);
+  
   // Use the centralized state management hook for ALL table state
   // Note: 'actions' prop parameter is shadowed by destructuring, so we rename to stateActions
-  const { state, actions: stateActions } = useDataTableState<TData>({
+  const { state, actions: stateActions, clearDraft } = useDataTableState<TData>({
     initialPageSize,
     columnIds: effectiveColumnOrder,
     initialRowSelection: selection || {},
     onRowSelectionChange,
     defaultSorting: defaultSorting || [],
-    defaultGrouping: defaultGrouping || []
+    defaultGrouping: defaultGrouping || [],
+    // Persistence props
+    rbacPageId: rbac.pageId,
+    title,
+    location,
+    columnFieldNames,
   });
   
   // Apply saved visibility to state if available
@@ -344,7 +443,7 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
     hierarchicalState,
     hierarchicalValidation,
   } = useDataTableDataPipeline<TData>({
-    data,
+    data: effectiveData,
     features: secureFeatures,
     hierarchical,
     sorting: state.sorting,
@@ -357,6 +456,34 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
       logger.error('Hierarchical data validation failed:', hierarchicalValidation.errors);
     }
   }, [hierarchicalValidation, logger]);
+  
+  // Final table data tracking (logging removed for performance)
+
+  // Cleanup deletion timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (deletionTimeoutRef.current) {
+        clearTimeout(deletionTimeoutRef.current);
+      }
+      pendingDeletionsRef.current.clear();
+    };
+  }, []);
+  
+  // Update data snapshot when data changes and we're not deleting
+  useEffect(() => {
+    if (!isDeleting && data !== dataSnapshotRef.current) {
+      dataSnapshotRef.current = data;
+    }
+  }, [data, isDeleting]);
+
+  // Cleanup deletion timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (deletionTimeoutRef.current) {
+        clearTimeout(deletionTimeoutRef.current);
+      }
+    };
+  }, []);
 
   const {
     columnOrder: savedColumnOrder,
@@ -563,19 +690,24 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
   // RBAC VALIDATION AND SECURE CONFIGURATION - ALWAYS call these hooks
   // ============================================================================
 
+  // Wrap handlers - persistence is handled automatically via useDataTableState
+  // The state actions (clearCreationData, clearEditing) will automatically update persisted state
+  const wrappedOnCreateRow = onCreateRow;
+  const wrappedOnEditRow = onEditRow;
+
   // MANDATORY: Handlers are automatically secured
   const secureHandlers = useMemo(() => {
     const handlers = {
-      onEditRow: permissions.canUpdate.can ? onEditRow : undefined,
+      onEditRow: permissions.canUpdate.can ? wrappedOnEditRow : undefined,
       onDeleteRow: permissions.canDelete.can ? onDeleteRow : undefined,
-      onCreateRow: permissions.canCreate.can ? onCreateRow : undefined,
+      onCreateRow: permissions.canCreate.can ? wrappedOnCreateRow : undefined,
       onImport: permissions.canImport.can ? onImport : undefined,
       onExport: permissions.canExport.can ? onExport : undefined,
       onDeleteSelected: permissions.canDelete.can ? onDeleteSelected : undefined,
     };
     
     return handlers;
-  }, [permissions.canUpdate.can, permissions.canDelete.can, permissions.canCreate.can, permissions.canImport.can, permissions.canExport.can, onEditRow, onDeleteRow, onCreateRow, onImport, onExport, onDeleteSelected, secureFeatures.creation]);
+  }, [permissions.canUpdate.can, permissions.canDelete.can, permissions.canCreate.can, permissions.canImport.can, permissions.canExport.can, wrappedOnEditRow, onDeleteRow, wrappedOnCreateRow, onImport, onExport, onDeleteSelected, secureFeatures.creation]);
 
   // MANDATORY: Process actions with RBAC checks
   const effectiveActions = useMemo(() => {
@@ -617,19 +749,60 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
             });
             return;
           }
+          
+          // Get row ID for tracking - use current data, not effectiveData
+          const rowIndex = data.findIndex(r => r === row);
+          const rowId = resolvedGetRowId(row, rowIndex >= 0 ? rowIndex : 0);
+          
+          // Mark deletion as in progress and track this deletion
+          // CRITICAL: Set isDeleting and snapshot BEFORE calling the handler
+          // This prevents the parent's data update from causing a flash
+          if (!isDeleting) {
+            // Snapshot current data BEFORE deletion
+            dataSnapshotRef.current = [...data]; // Create a copy to prevent reference issues
+            setIsDeleting(true);
+          }
+          pendingDeletionsRef.current.add(rowId);
+          
+          // Clear any existing timeout
+          if (deletionTimeoutRef.current) {
+            clearTimeout(deletionTimeoutRef.current);
+          }
+          
           try {
+            // Call the delete handler - this may update the parent's data prop
+            const deleteStartTime = Date.now();
             const result = secureHandlers.onDeleteRow!(row) as any;
             // Handle async operations
             if (result !== undefined && result !== null && typeof result === 'object' && typeof result.then === 'function') {
               await result;
             }
-            toast({
-              title: "Delete Successful",
-              description: "Row deleted successfully",
-              variant: "default"
-            });
+            // Remove from pending deletions
+            pendingDeletionsRef.current.delete(rowId);
+            
+            // Reset deletion state after a delay to allow batching
+            // This prevents the table from refreshing after each individual deletion
+            deletionTimeoutRef.current = setTimeout(() => {
+              // Only reset if all deletions are complete
+              if (pendingDeletionsRef.current.size === 0) {
+                setIsDeleting(false);
+                // Update snapshot to latest data
+                dataSnapshotRef.current = data;
+                toast({
+                  title: "Delete Successful",
+                  description: "Row deleted successfully",
+                  variant: "default"
+                });
+              }
+            }, 150); // Delay to batch rapid deletions
+            
           } catch (error) {
             logger.error('Delete error:', error);
+            pendingDeletionsRef.current.delete(rowId);
+            if (pendingDeletionsRef.current.size === 0) {
+              setIsDeleting(false);
+              dataSnapshotRef.current = data;
+            }
             toast({
               title: "Delete Failed",
               description: error instanceof Error ? error.message : 'Failed to delete row',
@@ -645,7 +818,7 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
     }
 
     return result;
-  }, [actions, secureFeatures, permissions, secureHandlers, resolvedGetRowId, stateActions, data]);
+  }, [actions, secureFeatures, permissions, secureHandlers, resolvedGetRowId, stateActions, effectiveData, isDeleting, pendingDeletionsRef, deletionTimeoutRef, dataSnapshotRef]);
 
   // Normalize columnOrder for useTableColumns: ensure 'select' is always first
   const normalizedColumnOrderForColumns = useMemo(() => {

package/src/components/DataTable/components/DataTableLayout.tsx

@@ -13,6 +13,7 @@ import { getTableClasses } from '../styles';
 import { toast } from '../../../hooks/useToast';
 import type {
   AggregateConfig,
+  CellValue,
   DataRecord,
   DataTableAction,
   DataTableColumn,
@@ -130,6 +131,12 @@ export function DataTableLayout<TData extends DataRecord>({
   keyboardNavigation,
   lastFocusedElementRef,
 }: DataTableLayoutProps<TData>) {
+  // CRITICAL FIX: Use a ref to track the latest editingData to avoid stale closure issues
+  // The ref is always kept in sync with state.editingData via useEffect
+  const editingDataRef = React.useRef(state.editingData);
+  React.useEffect(() => {
+    editingDataRef.current = state.editingData;
+  }, [state.editingData]);
   const handleExport = async () => {
     try {
       const tableRows = table.getFilteredRowModel().rows;
@@ -282,6 +289,8 @@ export function DataTableLayout<TData extends DataRecord>({
                       if (result !== undefined && result !== null && typeof result === 'object' && typeof result.then === 'function') {
                         await result;
                       }
+                      // Clear selection after successful deletion
+                      stateActions.clearRowSelection();
                       toast({
                         title: 'Delete Successful',
                         description: `Successfully deleted ${selectedCount} ${selectedCount === 1 ? 'row' : 'rows'}`,
@@ -424,8 +433,18 @@ export function DataTableLayout<TData extends DataRecord>({
           creationData={state.creationData}
           onCreationDataChange={stateActions.setCreationData}
           onSaveCreation={() => {
+            const creationDataToUse = state.creationData;
+            // CRITICAL FIX: Ensure status field is included with default value "active" if not already set
+            // This ensures new rows are created with the correct status
+            const finalCreationData = {
+              ...creationDataToUse,
+              // Only set status to "active" if it's not already set and if status is a column in the table
+              ...(creationDataToUse.status === undefined && table.getAllColumns().some(col => col.id === 'status')
+                ? { status: 'active' as CellValue }
+                : {}),
+            };
             if (onCreateRow) {
-              onCreateRow(state.creationData as Partial<TData>);
+              onCreateRow(finalCreationData as Partial<TData>);
               stateActions.clearCreationData();
               stateActions.setCreating(false);
             }
@@ -442,17 +461,23 @@ export function DataTableLayout<TData extends DataRecord>({
             }
           }}
           onSaveEditing={() => {
+            // CRITICAL FIX: Use ref to get the latest editingData to avoid stale closure issues
+            // The ref is always kept in sync with state.editingData, so it should always have the correct value
+            const latestEditingData = editingDataRef.current;
             if (onEditRow && state.editingRowId) {
-              const originalRow = data.find((row) => {
+              // CRITICAL FIX: Use findIndex to get the actual index, then use that index for getRowId
+              const originalRowIndex = data.findIndex((row, index) => {
                 try {
-                  const rowId = resolvedGetRowId(row, 0);
+                  const rowId = resolvedGetRowId(row, index);
                   return rowId === state.editingRowId;
                 } catch {
                   return false;
                 }
               });
-              if (originalRow) {
-                onEditRow(originalRow, state.editingData as Partial<TData>);
+              
+              if (originalRowIndex >= 0) {
+                const originalRow = data[originalRowIndex];
+                onEditRow(originalRow, latestEditingData as Partial<TData>);
               }
             }
             stateActions.clearEditing();

package/src/components/DataTable/components/EditFields.tsx

@@ -33,7 +33,7 @@ export function SelectEditField<TData extends DataRecord>({
   const logger = createLogger('SelectEditField');
   const isSearchable = columnDef.selectSearchable !== false;
   const isCreatable = columnDef.creatable === true;
-  const selectRef = React.useRef<HTMLFormElement>(null);
+  const selectRef = React.useRef<HTMLFieldSetElement>(null);
   const [searchTerm, setSearchTerm] = React.useState('');
   const [isOpen, setIsOpen] = React.useState(false);
   const [showCreateOption, setShowCreateOption] = React.useState(false);
@@ -258,7 +258,27 @@ export const renderEditField = <TData extends DataRecord>(
 
   if (columnDef.fieldType === 'select' && columnDef.fieldOptions) {
     const accessorKey = columnDef.editAccessorKey || column.id;
-    const currentValue = editingData[accessorKey] ?? value ?? '';
+    // CRITICAL FIX: Ensure we use the value from editingData first, then fall back to the passed value
+    // Convert to string to match Select component's string-based value system
+    // Always prioritize editingData[accessorKey] to ensure we use the most recent value
+    const rawValue = editingData[accessorKey] !== undefined && editingData[accessorKey] !== null
+      ? editingData[accessorKey]
+      : (value !== undefined && value !== null ? value : '');
+    const currentValue = rawValue !== null && rawValue !== undefined ? String(rawValue) : '';
+
+    // Create onChange handler that immediately updates state
+    const handleValueChange = (newValue: CellValue) => {
+      // Store the new value - preserve original type if option values are numbers
+      // Check if any option has a numeric value to determine if we should convert
+      const hasNumericValues = columnDef.fieldOptions?.some((opt: any) => 
+        'value' in opt && !('type' in opt) && typeof opt.value === 'number'
+      );
+      const finalValue = hasNumericValues && !isNaN(Number(newValue)) && newValue !== ''
+        ? Number(newValue) 
+        : newValue;
+      // Immediately update state - this happens synchronously
+      onChange({ [accessorKey]: finalValue });
+    };
 
     return (
       <SelectEditField
@@ -266,7 +286,7 @@ export const renderEditField = <TData extends DataRecord>(
         accessorKey={accessorKey}
         currentValue={currentValue}
         placeholder={placeholder}
-        onChange={(newValue) => onChange({ [accessorKey]: newValue })}
+        onChange={handleValueChange}
       />
     );
   }

package/src/components/DataTable/components/EditableRow.tsx

@@ -51,7 +51,7 @@ function SelectEditField<TData extends DataRecord>({
   // When selectSearchable is false, hide the search input (type-to-search still works via SelectContent internals)
   const isSearchable = columnDef.selectSearchable !== false;
   const isCreatable = columnDef.creatable === true;
-  const selectRef = React.useRef<HTMLFormElement>(null);
+  const selectRef = React.useRef<HTMLFieldSetElement>(null);
   const [searchTerm, setSearchTerm] = React.useState('');
   const [isOpen, setIsOpen] = React.useState(false);
   const [showCreateOption, setShowCreateOption] = React.useState(false);
@@ -434,9 +434,14 @@ export function EditableRow<TData extends DataRecord>({
                     hasAssignedRef.current = true;
                   }
                   
+                  // CRITICAL FIX: Use the correct accessor key (editAccessorKey or column.id) to get the value
+                  // This ensures that when editAccessorKey is different from column.id, we use the correct key
+                  const accessorKey = columnDef.editAccessorKey || cell.column.id;
+                  const currentValue = editingData[accessorKey] ?? (cell.getValue() as CellValue);
+                  
                   return renderEditField(
                     cell.column, 
-                    editingData[cell.column.id] ?? (cell.getValue() as CellValue), 
+                    currentValue, 
                     (value) => {
                       if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
                         onEditingDataChange({ ...editingData, ...(value as Record<string, CellValue>) });

package/src/components/DataTable/components/ImportModal.tsx

@@ -36,7 +36,7 @@
  * - Customizable text content
  */
 import React, { useState, useRef, useEffect } from 'react';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../Dialog';
+import { Dialog, DialogContent, DialogHeader } from '../../Dialog';
 import { Button } from '../../Button/Button';
 import { Input } from '../../Input/Input';
 import { Progress } from '../../Progress';
@@ -372,12 +372,10 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-2xl bg-main-50">
+      <DialogContent className="sm:max-w-2xl bg-main-50" title={title} description={description}>
         <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>
-            {description}
-          </DialogDescription>
+          <h2>{title}</h2>
+          <p>{description}</p>
         </DialogHeader>
 
         <div className="space-y-4">

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/ViewRowModal.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../Dialog/Dialog';
+import { Dialog, DialogContent, DialogHeader } from '../../Dialog/Dialog';
 import { Button } from '../../Button/Button';
 import { X } from 'lucide-react';
 
@@ -27,9 +27,9 @@ export function ViewRowModal<TData extends Record<string, any>>({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto" title={title}>
         <DialogHeader>
-          <DialogTitle className="flex items-center justify-between">
+          <h2 className="flex items-center justify-between">
             {title}
             <Button
               variant="ghost"
@@ -39,7 +39,7 @@ export function ViewRowModal<TData extends Record<string, any>>({
             >
               <X className="size-4" />
             </Button>
-          </DialogTitle>
+          </h2>
         </DialogHeader>
         
         <div className="mt-4">