df-ae-forms-package 1.0.96 → 1.0.98

package/dist/index.d.ts

@@ -716,27 +716,38 @@ declare const DfFormSection: React.FC<DfFormSectionProps>;
 interface DfFormDataGridProps {
     id: string;
     properties: IDataGridComponent;
+    validationErrors?: Record<string, any>;
+    formValue?: any;
+    formData?: Record<string, any>;
+    readonly?: boolean;
+    disabled?: boolean;
+    touchedFields?: Record<string, boolean>;
+    formSubmitted?: boolean;
     mode?: 'edit' | 'preview' | 'test';
-    formData?: any;
     onValueChange?: (change: IFormControlChange) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
     onSelect?: () => void;
     isSelected?: boolean;
     className?: string;
-    onDataGridSelect?: (component: IDataGridComponent) => void;
+    onDataGridSelect?: (dataGrid: IDataGridComponent) => void;
+    onDataGridDelete?: (dataGridId: string) => void;
+    onEntryChange?: (entryIndex: number, components: FormComponentType[]) => void;
     onComponentSelect?: (component: FormComponentType) => void;
     onComponentDelete?: (component: FormComponentType, event: React.MouseEvent) => void;
     onComponentEdit?: (component: FormComponentType) => void;
     onComponentUpdate?: (componentId: string, updates: Partial<FormComponentType>) => void;
     selectedComponent?: FormComponentType | null;
-    renderFormComponent?: (component: FormComponentType, hideLabel?: boolean) => React.ReactNode;
+    renderFormComponent?: (field: FormComponentType, hideLabel?: boolean) => React.ReactNode;
+    onDataGridUpdate?: (dataGridId: string, updates: Partial<IDataGridComponent>) => void;
     onEntryAdd?: () => void;
-    onEntryRemove?: (index: number) => void;
+    onEntryRemove?: (entryIndex: number) => void;
     formTemplateId?: string;
     onThresholdActionCompletion?: (conditionId: string, action: 'notes' | 'attachments' | 'email', completed: boolean) => void;
     onThresholdIssueRaised?: (conditionId: string) => void;
     onNotesChange?: (componentId: string, notes: string) => void;
     onAttachmentChange?: (componentId: string, attachments: File[] | null) => void;
-    shouldShowComponent?: (componentId: string) => boolean;
+    shouldShowComponent?: (id: string) => boolean;
 }
 declare const DfFormDataGrid: React.FC<DfFormDataGridProps>;
 

package/dist/index.esm.js

@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { AlertTriangle, X as X$1, User, Calendar, MessageSquare, UploadCloud, Paperclip, Loader2, Navigation, MapPin, Bold, Italic, List, ListOrdered, Image as Image$1, Check, Mail, AlertCircle, ChevronUp, ChevronDown, ChevronRight, Grid, GripVertical, Edit, Trash2, Table } from 'lucide-react';
 import require$$0, { createPortal } from 'react-dom';
-import { useDroppable, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext } from '@dnd-kit/core';
-import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, horizontalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { v4 } from 'uuid';
 
@@ -4332,57 +4332,20 @@ const DraggableGridComponent = ({ component, selectedComponent, mode, onComponen
                             e.currentTarget.style.backgroundColor = '#ef4444';
                         }, children: jsx(Trash2, { size: 12 }) })] }))] }));
 };
-// Sub-component for the drop zone within the grid
-const GridDropZone = ({ gridComponents, mode, onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, renderFormComponent, gridId, formData, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, columnView, shouldShowComponent }) => {
+const GridDropZone = ({ gridComponents, mode, onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, renderFormComponent, gridId, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, columnView = false, shouldShowComponent }) => {
     const { setNodeRef, isOver } = useDroppable({
         id: `grid-drop-zone-${gridId}`,
-        disabled: mode !== 'edit',
-        data: {
-            isGridDropZone: true,
-            gridId: gridId
-        }
-    });
-    // Sensors for drag and drop
-    const sensors = useSensors(useSensor(PointerSensor, {
-        activationConstraint: {
-            distance: 8,
-        },
-    }), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-    }));
-    const handleDragEnd = ((event) => {
-        const { active, over } = event;
-        if (over && active.id !== over.id) {
-            gridComponents.findIndex((item) => item.id === active.id);
-            gridComponents.findIndex((item) => item.id === over.id);
-        }
+        disabled: mode !== 'edit'
     });
-    return (jsx("div", { ref: setNodeRef, className: `grid-drop-zone ${gridComponents.length === 0 ? 'empty' : ''}`, style: {
-            border: isOver ? '2px dashed #3b82f6' : '1px dashed #d1d5db',
+    return (jsx("div", { ref: setNodeRef, className: "grid-drop-zone", style: {
+            border: isOver ? '2px dashed #3b82f6' : '2px dashed #d1d5db',
             borderRadius: '8px',
             padding: '16px',
-            backgroundColor: isOver ? 'var(--df-color-primary-light)' : '#f9fafb',
-            minHeight: '100px',
-            transition: 'all 0.2s ease'
-        }, children: gridComponents.length === 0 ? (jsxs("div", { style: {
-                textAlign: 'center',
-                color: 'var(--df-color-text-light)',
-                fontSize: '14px',
-                padding: '40px 20px',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: '8px',
-                backgroundColor: 'var(--df-color-fb-container)',
-                border: '1px dashed var(--df-color-fb-border)',
-                borderRadius: '8px'
-            }, children: [jsx("div", { style: {
-                        fontWeight: '500',
-                        color: isOver ? 'var(--df-color-primary)' : 'var(--df-color-text-dark)'
-                    }, children: isOver ? 'Drop components here' : 'Empty DataGrid' }), jsx("div", { style: {
-                        fontSize: '12px',
-                        color: '#9ca3af'
-                    }, children: "Drag and drop components here to create your grid" })] })) : (jsxs(DndContext, { sensors: sensors, onDragEnd: handleDragEnd, children: [jsx(SortableContext, { items: gridComponents.map(c => c.id), strategy: columnView ? verticalListSortingStrategy : horizontalListSortingStrategy, children: jsx("div", { style: {
+            backgroundColor: isOver ? 'var(--df-color-primary-light)' : 'var(--df-color-fb-container)',
+            minHeight: '120px',
+            transition: 'all 0.2s ease',
+            position: 'relative'
+        }, children: gridComponents.length > 0 ? (jsxs(Fragment, { children: [jsx(SortableContext, { items: gridComponents.map(c => c.id), strategy: horizontalListSortingStrategy, children: jsx("div", { style: {
                             display: 'flex',
                             flexDirection: columnView ? 'column' : 'row',
                             flexWrap: 'nowrap',
@@ -4407,14 +4370,28 @@ const GridDropZone = ({ gridComponents, mode, onComponentSelect, onComponentDele
                         minHeight: '40px',
                         display: 'flex',
                         alignItems: 'center',
-                        justifyContent: 'center',
-                        marginTop: '12px'
-                    }, children: isOver ? (jsx("span", { style: { color: '#3b82f6', fontWeight: '500' }, children: "Drop component here to add to grid" })) : (jsx("span", { children: "+ Drop more components here" })) })] })) }));
+                        justifyContent: 'center'
+                    }, children: isOver ? (jsx("span", { style: { color: '#3b82f6', fontWeight: '500' }, children: "Drop component here to add to grid" })) : (jsx("span", { children: "+ Drop more components here" })) })] })) : (jsxs("div", { style: {
+                textAlign: 'center',
+                color: 'var(--df-color-text-light)',
+                fontSize: '14px',
+                padding: '40px 20px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '8px',
+                backgroundColor: 'var(--df-color-fb-container)',
+                border: '1px dashed var(--df-color-fb-border)',
+                borderRadius: '8px'
+            }, children: [jsx("div", { style: {
+                        fontWeight: '500',
+                        color: isOver ? 'var(--df-color-primary)' : 'var(--df-color-text-dark)'
+                    }, children: isOver ? 'Drop components here' : 'Empty DataGrid' }), jsx("div", { style: {
+                        fontSize: '12px',
+                        color: '#9ca3af'
+                    }, children: "Drag and drop components here to create your grid" })] })) }));
 };
-// Sub-component for displaying entries (TableView)
-const TableView = ({ templateComponents, dataEntries, renderFormComponent, mode, allowAddRemoveEntries, addAnotherText, removeText, maxEntries, minEntries, displayAsGrid = true, onAddEntry, onRemoveEntry, formData, // Use current formData to render values
-formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, columnView, shouldShowComponent }) => {
-    const _formData = formData || {};
+const TableView = ({ templateComponents, dataEntries, renderFormComponent, mode = 'preview', allowAddRemoveEntries = true, addAnotherText = 'Add Another', removeText = 'Remove', maxEntries = 10, minEntries = 1, displayAsGrid = true, onAddEntry, onRemoveEntry, formData: _formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, columnView = false, shouldShowComponent }) => {
     const visibleTemplateComponents = React.useMemo(() => {
         if (!shouldShowComponent)
             return templateComponents;
@@ -4476,18 +4453,16 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis'
-                                }, children: component.basic?.label || `Column ${index + 1}` }, `header-${component.id || index}`))) })), dataEntries.length > 0 ? (dataEntries.map((entry, entryIndex) => (jsxs("div", { className: "table-row", style: {
-                                // Use flex column for column view, grid for row view
-                                display: columnView ? 'flex' : 'grid',
-                                flexDirection: columnView ? 'column' : 'row',
-                                gridTemplateColumns: !columnView
-                                    ? `repeat(${visibleTemplateComponents.length}, minmax(150px, 1fr))`
-                                    : undefined,
+                                }, children: component.basic?.label || `Column ${index + 1}` }, `header-${component.id}`))) })), dataEntries.length > 0 ? (dataEntries.map((entry, entryIndex) => (jsxs("div", { className: "table-row", style: {
+                                display: 'grid',
+                                // Change grid columns to 1fr for column view
+                                gridTemplateColumns: columnView
+                                    ? '1fr'
+                                    : `repeat(${visibleTemplateComponents.length}, minmax(150px, 1fr))`,
                                 borderBottom: entryIndex < dataEntries.length - 1 ? '1px solid var(--df-color-fb-border)' : 'none',
                                 backgroundColor: entryIndex % 2 === 0 ? 'var(--df-color-fb-container)' : 'var(--df-color-fb-bg)',
                                 position: 'relative',
-                                minWidth: columnView ? '100%' : `${visibleTemplateComponents.length * 150}px`,
-                                padding: columnView ? '16px' : '0'
+                                minWidth: columnView ? '100%' : `${visibleTemplateComponents.length * 150}px`
                             }, children: [visibleTemplateComponents.map((templateComponent, componentIndex) => {
                                     let entryComponent = entry.components?.[componentIndex];
                                     if (!entryComponent) {
@@ -4513,24 +4488,21 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                         };
                                     }
                                     return (jsx("div", { style: {
-                                            padding: columnView ? '12px 0' : '12px 16px',
+                                            padding: '12px 16px',
                                             borderRight: !columnView && componentIndex < visibleTemplateComponents.length - 1 ? '1px solid var(--df-color-fb-border)' : 'none',
                                             // Add bottom border for fields in column view except the last one
                                             borderBottom: columnView && componentIndex < visibleTemplateComponents.length - 1 ? '1px dashed var(--df-color-fb-border)' : 'none',
-                                            minHeight: columnView ? 'auto' : '60px',
+                                            minHeight: '60px',
                                             minWidth: columnView ? '100%' : '150px',
-                                            width: columnView ? '100%' : 'auto',
                                             display: 'flex',
-                                            flexDirection: columnView ? 'column' : 'row',
-                                            alignItems: columnView ? 'stretch' : 'center',
-                                            overflow: 'hidden',
-                                            gap: columnView ? '8px' : '0'
+                                            alignItems: 'center',
+                                            overflow: 'hidden'
                                         }, children: jsx("div", { style: {
                                                 width: '100%',
-                                                minWidth: columnView ? '100%' : '120px',
+                                                minWidth: '120px',
                                                 overflow: 'hidden'
                                             }, children: renderFormComponent(entryComponent, !columnView) }) }, `${entry.id}-${componentIndex}`));
-                                }), mode === 'test' && allowAddRemoveEntries && dataEntries.length > minEntries && (jsx("button", { onClick: () => onRemoveEntry(entryIndex), disabled: dataEntries.length <= minEntries, style: {
+                                }), mode === 'test' && allowAddRemoveEntries && dataEntries.length > minEntries && (jsx("button", { onClick: () => onRemoveEntry?.(entryIndex), disabled: dataEntries.length <= minEntries, style: {
                                         position: 'absolute',
                                         top: '8px',
                                         right: '8px',
@@ -4564,7 +4536,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                         position: 'sticky',
                         bottom: 0,
                         zIndex: 5
-                    }, children: jsxs("button", { onClick: () => { console.log('[TableView] Add Entry button clicked (grid view)', 'entries:', dataEntries.length, 'max:', maxEntries); onAddEntry(); }, disabled: dataEntries.length >= maxEntries, style: {
+                    }, children: jsxs("button", { onClick: onAddEntry, disabled: dataEntries.length >= maxEntries, style: {
                             padding: '8px 16px',
                             backgroundColor: dataEntries.length >= maxEntries ? '#f3f4f6' : '#10b981',
                             color: dataEntries.length >= maxEntries ? '#9ca3af' : '#ffffff',
@@ -4602,7 +4574,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     fontWeight: '600',
                                     color: 'var(--df-color-text-dark)',
                                     fontSize: '14px'
-                                }, children: ["Entry #", entryIndex + 1] }), mode === 'test' && allowAddRemoveEntries && dataEntries.length > 1 && (jsx("button", { onClick: () => onRemoveEntry(entryIndex), disabled: dataEntries.length <= minEntries, style: {
+                                }, children: ["Entry #", entryIndex + 1] }), mode === 'test' && allowAddRemoveEntries && dataEntries.length > 1 && (jsx("button", { onClick: () => onRemoveEntry?.(entryIndex), disabled: dataEntries.length <= minEntries, style: {
                                     padding: '4px 8px',
                                     backgroundColor: dataEntries.length <= minEntries ? '#f3f4f6' : '#ef4444',
                                     color: dataEntries.length <= minEntries ? '#9ca3af' : '#ffffff',
@@ -4618,39 +4590,40 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     height: '24px',
                                     justifyContent: 'center'
                                 }, title: removeText, children: jsx("span", { style: { fontSize: '14px' }, children: "\u00D7" }) }))] }), jsx("div", { style: {
-                            display: columnView ? 'flex' : 'grid',
-                            flexDirection: columnView ? 'column' : 'row',
-                            gridTemplateColumns: !columnView ? 'repeat(auto-fit, minmax(200px, 1fr))' : undefined,
+                            display: 'grid',
+                            gridTemplateColumns: columnView ? '1fr' : 'repeat(auto-fit, minmax(200px, 1fr))',
                             gap: '16px'
                         }, children: visibleTemplateComponents.map((templateComponent, componentIndex) => {
+                            // Find the corresponding component in this entry by index first, then by name+label
                             let entryComponent = entry.components?.[componentIndex];
+                            // If no component at this index, try to find by name+label
                             if (!entryComponent) {
                                 entryComponent = entry.components?.find((comp) => comp.name === templateComponent.name &&
                                     comp.basic?.label === templateComponent.basic?.label);
                             }
                             if (!entryComponent) {
+                                // Use entry.id (which is unique) instead of entryIndex
                                 const uniqueId = `${templateComponent.id}-${entry.id}-${componentIndex}`;
                                 entryComponent = {
                                     ...templateComponent,
                                     id: uniqueId,
                                     basic: {
                                         ...templateComponent.basic,
-                                        showLabel: columnView // Show label in column view, hide in grid view
+                                        showLabel: false // Hide label in datagrid cells
                                     }
                                 };
                             }
                             else {
+                                // Preserve the original ID to maintain form value connections
                                 entryComponent = {
                                     ...entryComponent,
-                                    id: entryComponent.id,
+                                    id: entryComponent.id, // Keep the original ID
                                     basic: {
                                         ...entryComponent.basic,
-                                        showLabel: columnView // Show label in column view, hide in grid view
+                                        showLabel: false // Hide label in datagrid cells
                                     }
                                 };
                             }
-                            if (!entryComponent)
-                                return null;
                             return (jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
@@ -4686,7 +4659,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                     borderRadius: '8px',
                     display: 'flex',
                     justifyContent: 'center'
-                }, children: jsxs("button", { onClick: () => { console.log('[TableView] Add Entry button clicked (list view)', 'entries:', dataEntries.length, 'max:', maxEntries); onAddEntry(); }, disabled: dataEntries.length >= maxEntries, style: {
+                }, children: jsxs("button", { onClick: onAddEntry, disabled: dataEntries.length >= maxEntries, style: {
                         padding: '8px 16px',
                         backgroundColor: dataEntries.length >= maxEntries ? '#f3f4f6' : '#10b981',
                         color: dataEntries.length >= maxEntries ? '#9ca3af' : '#ffffff',
@@ -4699,19 +4672,11 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                         alignItems: 'center',
                         gap: '8px',
                         transition: 'all 0.2s ease'
-                    }, onMouseEnter: (e) => {
-                        if (dataEntries.length < maxEntries) {
-                            e.currentTarget.style.backgroundColor = '#059669';
-                        }
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = '#10b981';
                     }, children: [jsx("span", { children: "+" }), addAnotherText] }) }))] }));
 };
 const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueChange, onSelect, isSelected = false, className = '', onDataGridSelect, onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, renderFormComponent, onEntryAdd, onEntryRemove, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, shouldShowComponent }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const hasInitialized = useRef(false);
-    // Track local form values for entry components to prevent value loss during parent round-trip
-    const localFormValuesRef = useRef({});
     // Get all components in the grid and sanitize them to ensure no data leaks into templates
     let gridComponents = (properties.templateComponents || []).map(comp => ({
         ...comp,
@@ -4789,6 +4754,87 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                     }
                 }
             }
+            else {
+                // Update existing entries to include all template components and sync their properties
+                const needsUpdate = dataEntries.some(entry => {
+                    // Check if entry is missing any template components or if existing components need updates
+                    return gridComponents.some((templateComp, componentIndex) => {
+                        const existingComponent = entry.components?.[componentIndex];
+                        if (!existingComponent) {
+                            return true; // Missing component at this index
+                        }
+                        // We don't check for ID matches here anymore
+                        // const expectedId = `${templateComp.id}-entry-${entry.index}-${componentIndex}`
+                        // const hasProperId = existingComponent.id === expectedId
+                        // Check if existing component needs to be updated with new template properties
+                        // Compare key properties that should be synced
+                        const needsPropertyUpdate = JSON.stringify(existingComponent.basic?.options) !== JSON.stringify(templateComp.basic?.options) ||
+                            existingComponent.basic?.placeholder !== templateComp.basic?.placeholder ||
+                            existingComponent.basic?.defaultValue !== templateComp.basic?.defaultValue ||
+                            existingComponent.basic?.label !== templateComp.basic?.label ||
+                            existingComponent.validation?.required !== templateComp.validation?.required;
+                        // We do not check for ID mismatch anymore as we want to preserve unique IDs
+                        return needsPropertyUpdate;
+                    });
+                });
+                if (needsUpdate && onValueChange) {
+                    const updatedEntries = dataEntries.map(entry => {
+                        // Use index-based matching to ensure each template component maps to the correct entry component
+                        const updatedComponents = gridComponents.map((templateComp, componentIndex) => {
+                            // Find existing component by index first
+                            let existingComponent = entry.components?.[componentIndex];
+                            // If no component at this index, try to find by name+label (for backward compatibility)
+                            if (!existingComponent) {
+                                existingComponent = entry.components?.find((comp) => comp.name === templateComp.name &&
+                                    comp.basic?.label === templateComp.basic?.label);
+                            }
+                            // Always ensure a valid ID exists, but respect existing one if possible
+                            // const uniqueId = `${templateComp.id}-entry-${entry.index}-${componentIndex}`
+                            if (existingComponent) {
+                                // Update existing component with new template properties while ensuring unique ID and preserving form values
+                                const updatedComponent = {
+                                    ...templateComp,
+                                    id: existingComponent.id, // Preserve existing ID !!
+                                    basic: {
+                                        ...templateComp.basic,
+                                        showLabel: false, // Hide label in datagrid cells
+                                        // Preserve any user-entered values
+                                        value: existingComponent.basic?.value || templateComp.basic?.defaultValue || ''
+                                    }
+                                };
+                                return updatedComponent;
+                            }
+                            else {
+                                // Create new component based on template
+                                // Only for NEW components in existing entries (e.g. column added) do we generate a new ID
+                                const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
+                                const newId = `${templateComp.id}-${uniqueSuffix}-${componentIndex}`;
+                                const newComponent = {
+                                    ...templateComp,
+                                    id: newId,
+                                    basic: {
+                                        ...templateComp.basic,
+                                        showLabel: false // Hide label in datagrid cells
+                                    }
+                                };
+                                return newComponent;
+                            }
+                        });
+                        return {
+                            ...entry,
+                            components: updatedComponents
+                        };
+                    });
+                    const newValue = { ...properties, entries: updatedEntries };
+                    // Only call onValueChange if the data actually changed
+                    if (JSON.stringify(newValue) !== JSON.stringify(properties)) {
+                        onValueChange({
+                            id,
+                            value: newValue
+                        });
+                    }
+                }
+            }
         }
     }, [gridComponents, dataEntries, id, onValueChange, properties, mode, properties.templateComponents]);
     const handleDataGridClick = useCallback((event) => {
@@ -4845,9 +4891,8 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
     // Handle component value change for form data updates (test mode)
     const handleComponentValueChange = useCallback((change) => {
         if (mode === 'test') {
-            // CRITICAL: Store value locally to prevent loss during parent round-trip
-            localFormValuesRef.current[change.id] = change.value;
-            // Also propagate up to parent for persistence
+            // In test mode, update form data through the parent's onValueChange
+            // This allows the form data to be updated for interactive components
             if (onValueChange) {
                 onValueChange({
                     id: change.id,
@@ -4858,10 +4903,6 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
         // In edit/preview modes, don't handle value changes as components are read-only
     }, [mode, onValueChange]);
     const handleAddEntry = useCallback(() => {
-        console.log('[DfFormDataGrid] handleAddEntry called');
-        console.log('[DfFormDataGrid] gridComponents:', gridComponents.length, gridComponents.map(c => c.id));
-        console.log('[DfFormDataGrid] current entries:', properties.entries?.length);
-        console.log('[DfFormDataGrid] onValueChange exists:', !!onValueChange);
         // Use timestamp and random string to ensure uniqueness even if entries are deleted
         const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
         const newEntryId = `entry-${uniqueSuffix}`;
@@ -4883,19 +4924,13 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             }),
             styles: {}
         };
-        console.log('[DfFormDataGrid] newEntry created:', newEntry.id, 'with', newEntry.components.length, 'components');
         const updatedEntries = [...properties.entries, newEntry];
-        console.log('[DfFormDataGrid] updatedEntries count:', updatedEntries.length);
         if (onValueChange) {
-            console.log('[DfFormDataGrid] calling onValueChange with updated entries');
             onValueChange({
                 id,
                 value: { ...properties, entries: updatedEntries }
             });
         }
-        else {
-            console.log('[DfFormDataGrid] WARNING: onValueChange is not defined!');
-        }
         onEntryAdd?.();
     }, [properties, onValueChange, id, onEntryAdd, gridComponents]);
     const handleRemoveEntry = useCallback((entryIndex) => {
@@ -4911,11 +4946,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
     }, [properties, onValueChange, id, onEntryRemove]);
     // Use our own render function to ensure proper onComponentUpdate handling
     const renderComponent = useCallback((field, hideLabel = false) => {
-        // CRITICAL: Use local values first, then fall back to formData prop, then defaults
-        // This ensures typed values in entry 2+ persist immediately
-        const formValue = mode === 'test'
-            ? (localFormValuesRef.current[field.id] ?? formData[field.id] ?? field.basic?.value ?? ('defaultValue' in field.basic ? field.basic.defaultValue || '' : ''))
-            : ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '');
+        const formValue = mode === 'test' ? (formData[field.id] || ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '')) : ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '');
         const commonProps = {
             id: field.id,
             properties: field,
@@ -4996,7 +5027,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                 , { 
                     // Cast to FormComponentType[] to satisfy TableView typing; gridComponents
                     // are always child form components of the datagrid.
-                    templateComponents: gridComponents, dataEntries: dataEntries, renderFormComponent: renderFormComponent || renderComponent, mode: mode, allowAddRemoveEntries: properties.datagrid?.allowAddRemoveEntries ?? true, addAnotherText: properties.datagrid?.addAnotherText ?? 'Add Entry', removeText: properties.datagrid?.removeText ?? 'Remove', maxEntries: properties.datagrid?.maxEntries ?? 10, minEntries: properties.datagrid?.minEntries ?? 1, displayAsGrid: properties.datagrid?.displayAsGrid ?? true, onAddEntry: handleAddEntry, onRemoveEntry: handleRemoveEntry, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, columnView: properties.datagrid?.columnView, shouldShowComponent: shouldShowComponent })) }))] }));
+                    templateComponents: gridComponents, dataEntries: dataEntries, renderFormComponent: renderFormComponent || renderComponent, mode: mode, allowAddRemoveEntries: properties.datagrid?.allowAddRemoveEntries ?? true, addAnotherText: properties.datagrid?.addAnotherText ?? 'Add Entry', removeText: properties.datagrid?.removeText ?? 'Remove', maxEntries: properties.datagrid?.maxEntries ?? 10, minEntries: properties.datagrid?.minEntries ?? 1, displayAsGrid: properties.datagrid?.displayAsGrid ?? true, onAddEntry: onEntryAdd ? onEntryAdd : handleAddEntry, onRemoveEntry: onEntryRemove ? onEntryRemove : handleRemoveEntry, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, columnView: properties.datagrid?.columnView, shouldShowComponent: shouldShowComponent })) }))] }));
 };
 
 const DraggableChild = ({ child, selectedChild, mode, onChildSelect, onChildDelete, renderFormComponent, isOverlay = false, isChildrenEditMode = false, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
@@ -6419,9 +6450,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             onFormDataChange?.(updatedComponents);
                         } }) }));
             case 'datagrid':
+                // Align package datagrid wiring with main app behaviour:
+                // - Let DfFormDataGrid manage entry structure via onValueChange
+                // - Use the shared onFormValueChange handler for nested field values
+                // - Keep notes/attachments wiring as before
                 return (jsx(DfFormDataGrid, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: (componentId, notes) => {
                         handleComponentNotesChange(componentId, notes);
-                        // Handle notes change for datagrid entry components
                         const updatedComponents = localFormComponents.map(comp => {
                             if (comp.id === component.id && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
@@ -6449,7 +6483,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         onFormDataChange?.(updatedComponents);
                     }, onAttachmentChange: (componentId, attachments) => {
                         handleComponentAttachmentChange(componentId, attachments);
-                        // Handle attachment change for datagrid entry components
                         const updatedComponents = localFormComponents.map(comp => {
                             if (comp.id === component.id && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
@@ -6475,116 +6508,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             return comp;
                         });
                         onFormDataChange?.(updatedComponents);
-                    }, onValueChange: (change) => {
-                        console.log('[DfFormPreview] datagrid onValueChange received:', change.id, 'hasEntries:', change.value && typeof change.value === 'object' && 'entries' in change.value);
-                        // Handle datagrid value changes (entries updates)
-                        if (change.id === component.id && change.value && typeof change.value === 'object' && 'entries' in change.value) {
-                            console.log('[DfFormPreview] datagrid entries update - entries count:', change.value.entries?.length);
-                            // Update localFormComponents with new entries structure
-                            const updatedComponents = localFormComponents.map(comp => {
-                                if (comp.id === component.id) {
-                                    return {
-                                        ...comp,
-                                        ...change.value
-                                    };
-                                }
-                                return comp;
-                            });
-                            // CRITICAL: Update local state immediately so new entries render without Angular round-trip
-                            setLocalFormComponents(updatedComponents);
-                            onFormDataChange?.(updatedComponents);
-                            // Also update formValues for nested components
-                            if (change.value.entries && Array.isArray(change.value.entries)) {
-                                change.value.entries.forEach((entry) => {
-                                    if (entry.components && Array.isArray(entry.components)) {
-                                        entry.components.forEach((nestedComp) => {
-                                            const nestedValue = formValues[nestedComp.id];
-                                            if (nestedValue !== undefined) ;
-                                            else {
-                                                // Initialize with defaultValue if available
-                                                const defaultValue = nestedComp.basic?.defaultValue;
-                                                if (defaultValue !== undefined) {
-                                                    setFormValues(prev => ({
-                                                        ...prev,
-                                                        [nestedComp.id]: defaultValue
-                                                    }));
-                                                }
-                                            }
-                                        });
-                                    }
-                                });
-                            }
-                        }
-                        else {
-                            // For nested component value changes, use the regular handler
-                            onFormValueChange(change);
-                        }
-                    }, onEntryAdd: () => {
-                        // CRITICAL: Entry has already been added via onValueChange in DfFormDataGrid
-                        // Get the updated component from localFormComponents (which should have been updated by onValueChange)
-                        const currentComponent = localFormComponents.find(comp => comp.id === component.id);
-                        if (currentComponent && currentComponent.entries) {
-                            // Entry should already be in the component via onValueChange
-                            // Just ensure localFormComponents is in sync (no-op if already synced)
-                            const updatedComponents = localFormComponents.map(comp => {
-                                if (comp.id === component.id) {
-                                    // Ensure entries are properly structured
-                                    return {
-                                        ...comp,
-                                        entries: comp.entries || []
-                                    };
-                                }
-                                return comp;
-                            });
-                            onFormDataChange?.(updatedComponents);
-                        }
-                        else {
-                            // Fallback: If component doesn't have entries yet, try to get from formValues
-                            setTimeout(() => {
-                                const datagridValue = formValues[component.id];
-                                if (datagridValue && typeof datagridValue === 'object' && 'entries' in datagridValue) {
-                                    const updatedComponents = localFormComponents.map(comp => {
-                                        if (comp.id === component.id) {
-                                            return {
-                                                ...comp,
-                                                entries: datagridValue.entries
-                                            };
-                                        }
-                                        return comp;
-                                    });
-                                    onFormDataChange?.(updatedComponents);
-                                }
-                            }, 100);
-                        }
-                    }, onEntryRemove: (entryIndex) => {
-                        // Handle entry remove - update form components
-                        const updatedComponents = localFormComponents.map(comp => {
-                            if (comp.id === component.id && comp.entries) {
-                                const currentEntries = comp.entries || [];
-                                const updatedEntries = currentEntries
-                                    .filter((_, index) => index !== entryIndex)
-                                    .map((entry, index) => ({
-                                    ...entry,
-                                    index,
-                                    id: `entry-${comp.id}-${index}`,
-                                    components: entry.components?.map((comp, compIndex) => {
-                                        const templateComp = (comp.templateComponents || [])[compIndex];
-                                        return {
-                                            ...comp,
-                                            id: templateComp ? `${templateComp.id}-entry-${index}-${compIndex}` : comp.id
-                                        };
-                                    }) || []
-                                }));
-                                return {
-                                    ...comp,
-                                    entries: updatedEntries
-                                };
-                            }
-                            return comp;
-                        });
-                        onFormDataChange?.(updatedComponents);
-                    }, renderFormComponent: (field) => {
-                        // Ensure the nested component gets the proper form value
+                    }, onValueChange: onFormValueChange, renderFormComponent: (field) => {
                         return renderFormComponent(field);
                     } }));
             case 'file':