df-ae-forms-package 1.1.2 → 1.1.4

package/dist/index.esm.js

@@ -1002,20 +1002,15 @@ const DfFormInput = ({ id, properties, validationErrors = {}, formValue = '', in
             touchedFields[id] = true;
         }
     }, [isTouched, id, touchedFields]);
-    // Reset touched state and value when switching modes
+    // Reset touched state when switching modes
     useEffect(() => {
+        setIsTouched(false);
+        // Only reset value when explicitly moving to edit mode to show current default
         if (mode === 'edit') {
-            setIsTouched(false);
-            // Reset value to default value when switching to edit mode
             const defaultValue = properties?.basic?.defaultValue || '';
             setValue(defaultValue);
         }
-        else if (mode === 'test') {
-            setIsTouched(false);
-            // Reset value to empty when switching to test mode for fresh start
-            setValue('');
-        }
-    }, [mode, properties?.basic?.defaultValue]);
+    }, [mode]);
     // Update value when formValue prop changes (but don't override user input)
     // CRITICAL: Only update if formValue is actually for THIS component's ID
     // Use componentIdRef to ensure we're checking against the correct component ID
@@ -4591,7 +4586,11 @@ 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: (e) => {
+                            e.stopPropagation();
+                            console.log('[TableView] Add Entry button clicked (grid view)', 'entries:', dataEntries.length, 'max:', maxEntries);
+                            onAddEntry();
+                        }, disabled: dataEntries.length >= maxEntries, style: {
                             padding: '8px 16px',
                             backgroundColor: dataEntries.length >= maxEntries ? '#f3f4f6' : '#10b981',
                             color: dataEntries.length >= maxEntries ? '#9ca3af' : '#ffffff',
@@ -4713,7 +4712,11 @@ 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: (e) => {
+                        e.stopPropagation();
+                        console.log('[TableView] Add Entry button clicked (list view)', 'entries:', dataEntries.length, 'max:', maxEntries);
+                        onAddEntry();
+                    }, disabled: dataEntries.length >= maxEntries, style: {
                         padding: '8px 16px',
                         backgroundColor: dataEntries.length >= maxEntries ? '#f3f4f6' : '#10b981',
                         color: dataEntries.length >= maxEntries ? '#9ca3af' : '#ffffff',
@@ -4737,7 +4740,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
 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);
-    const gridId = ensureStringId$2(id);
+    const gridId = ensureStringId$2(id) || properties._id || (typeof id === 'string' ? id : 'datagrid-id');
     // Get all components in the grid and sanitize them to ensure no data leaks into templates
     let gridComponents = (properties.templateComponents || []).map((comp, index) => ({
         ...comp,
@@ -4957,24 +4960,25 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             // This allows the form data to be updated for interactive components
             if (onValueChange) {
                 onValueChange({
-                    id: change.id,
-                    value: change.value
+                    ...change
                 });
             }
         }
         // 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] handleAddEntry called - Component ID:', id);
+        // Safety check: ensure we have entries array
+        const currentEntries = Array.isArray(properties.entries) ? properties.entries : [];
+        console.log('[DfFormDataGrid] gridComponents:', gridComponents.length);
+        console.log('[DfFormDataGrid] current entries count:', currentEntries.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}`;
         const newEntry = {
             id: newEntryId,
-            index: properties.entries.length,
+            index: currentEntries.length,
             components: gridComponents.map((comp, componentIndex) => {
                 const componentId = `${ensureStringId$2(comp.id)}-${newEntryId}-${componentIndex}`;
                 return {
@@ -4983,7 +4987,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                     id: componentId,
                     basic: {
                         ...comp.basic,
-                        value: '', // Explicitly clear value for new entries
+                        value: comp.basic?.defaultValue || '', // Use defaultValue if available, else empty
                         showLabel: false // Hide label in datagrid cells
                     }
                 };
@@ -4991,31 +4995,41 @@ 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];
+        const updatedEntries = [...currentEntries, newEntry];
         console.log('[DfFormDataGrid] updatedEntries count:', updatedEntries.length);
         if (onValueChange) {
-            console.log('[DfFormDataGrid] calling onValueChange with updated entries');
+            console.log('[DfFormDataGrid] calling onValueChange with updated datagrid structure - Entries:', updatedEntries.length);
             onValueChange({
-                id,
-                value: { ...properties, entries: updatedEntries }
+                id: gridId, // Use sanitized gridId
+                value: {
+                    ...properties,
+                    entries: updatedEntries
+                }
             });
+            // Notify parent if callback provided
+            if (onEntryAdd) {
+                console.log('[DfFormDataGrid] calling onEntryAdd callback');
+                onEntryAdd();
+            }
         }
         else {
-            console.log('[DfFormDataGrid] WARNING: onValueChange is not defined!');
+            console.warn('[DfFormDataGrid] Cannot add entry: onValueChange is missing');
         }
-        onEntryAdd?.();
-    }, [properties, onValueChange, id, onEntryAdd, gridComponents]);
+    }, [onValueChange, properties, gridId, gridComponents, onEntryAdd]);
     const handleRemoveEntry = useCallback((entryIndex) => {
-        const updatedEntries = properties.entries
+        // Safety check: ensure we have entries array
+        const currentEntries = Array.isArray(properties.entries) ? properties.entries : [];
+        const updatedEntries = currentEntries
             .filter((_, index) => index !== entryIndex)
             .map((entry, index) => ({ ...entry, index })); // Only update index, preserve unique ID
         if (onValueChange) {
+            console.log('[DfFormDataGrid] Removing entry at index:', entryIndex, 'New count:', updatedEntries.length);
             onValueChange({
-                id,
+                id: gridId, // Use sanitized gridId
                 value: { ...properties, entries: updatedEntries }
             });
         }
-    }, [properties, onValueChange, id, onEntryRemove]);
+    }, [properties.entries, onValueChange, gridId, properties]);
     // Use our own render function to ensure proper onComponentUpdate handling
     const renderComponent = useCallback((field, hideLabel = false) => {
         const formValue = mode === 'test' ? (formData[field.id] || ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '')) : ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '');
@@ -5606,6 +5620,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         return entry;
                     });
                 }
+                // CRITICAL: Also validate templateComponents for datagrids
+                if (validatedComponent.name === 'datagrid' && validatedComponent.templateComponents && Array.isArray(validatedComponent.templateComponents)) {
+                    const datagridId = ensureStringId$1(validatedComponent.id);
+                    validatedComponent.templateComponents = getValidatedComponents(validatedComponent.templateComponents, `${datagridId}-template`);
+                }
                 return validatedComponent;
             });
         };
@@ -5613,8 +5632,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         let validatedFormComponents = localFormComponents;
         if (localFormComponents && localFormComponents.length > 0) {
             validatedFormComponents = getValidatedComponents(localFormComponents);
-            // Notifying parent of changed components if they were mutated (IDs added/fixed)
+            // Synchronize local state if components were mutated (IDs added/fixed)
             if (JSON.stringify(validatedFormComponents) !== JSON.stringify(localFormComponents)) {
+                console.log('[DfFormPreview] Synchronizing local components after ID validation');
+                setLocalFormComponents(validatedFormComponents);
                 onFormDataChange?.(validatedFormComponents);
             }
         }
@@ -5655,9 +5676,35 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             return;
         }
         // CRITICAL: Check if multiple components share this ID (ID collision detection)
-        const componentsWithSameId = localFormComponents.filter(comp => comp.id === change.id);
+        // Use recursive search for accurate detection across all levels
+        const checkIdCollision = (components, targetId) => {
+            let matches = [];
+            components.forEach(comp => {
+                if (ensureStringId$1(comp.id) === targetId)
+                    matches.push(comp);
+                if (comp.name === 'section' && comp.children) {
+                    matches = [...matches, ...checkIdCollision(comp.children, targetId)];
+                }
+                if (comp.name === 'table' && comp.cells) {
+                    comp.cells.forEach((row) => {
+                        normalizeTableRow(row).forEach((cell) => {
+                            if (cell.components)
+                                matches = [...matches, ...checkIdCollision(cell.components, targetId)];
+                        });
+                    });
+                }
+                if (comp.name === 'datagrid' && comp.entries) {
+                    comp.entries.forEach((entry) => {
+                        if (entry.components)
+                            matches = [...matches, ...checkIdCollision(entry.components, targetId)];
+                    });
+                }
+            });
+            return matches;
+        };
+        const componentsWithSameId = checkIdCollision(localFormComponents, change.id);
         if (componentsWithSameId.length > 1) {
-            console.error(`[DfFormPreview] ID COLLISION DETECTED! Multiple components share ID "${change.id}":`, componentsWithSameId.map(c => ({ id: c.id, name: c.name, label: c.basic?.label })));
+            console.error(`[DfFormPreview] ID COLLISION DETECTED! Multiple components share ID "${change.id}":`, componentsWithSameId.map(c => ({ id: ensureStringId$1(c.id), name: c.name, label: c.basic?.label })));
             // Don't update - this would cause all components with this ID to get the same value
             return;
         }
@@ -5676,7 +5723,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         }
         // Clear raised issues for this component when value changes
         // This ensures that if threshold condition changes, user must raise issue again
-        const component = localFormComponents.find(comp => comp.id === change.id);
+        const component = findComponentById(localFormComponents, change.id);
         if (component) {
             const threshold = component?.threshold;
             if (threshold && threshold.conditions && threshold.conditions.length > 0) {
@@ -5692,7 +5739,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Recursive function to update component values
         const updateComponentValue = (components) => {
             return components.map(component => {
-                if (component.id === change.id) {
+                const componentId = ensureStringId$1(component.id);
+                if (componentId === change.id) {
                     // CRITICAL: Handle table/datagrid structure updates (cells, entries, etc.)
                     // When a table sends onValueChange with cells data, update the whole component structure
                     if (change.value && typeof change.value === 'object' && 'cells' in change.value) {
@@ -5708,13 +5756,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             ...change.value
                         };
                     }
-                    if ('defaultValue' in component.basic) {
+                    if ('value' in component.basic || 'defaultValue' in component.basic) {
                         return {
                             ...component,
                             basic: {
                                 ...component.basic,
-                                value: change.value ?? component.basic.defaultValue,
-                                defaultValue: change.value
+                                value: change.value
                             }
                         };
                     }
@@ -6526,12 +6573,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             return renderFormComponent(field);
                         }, onNotesChange: (componentId, notes) => {
                             // Handle notes change for table cell components
+                            const targetTableId = ensureStringId$1(component.id);
                             const updatedComponents = localFormComponents.map(comp => {
-                                if (comp.id === component.id && comp.cells) {
+                                if (ensureStringId$1(comp.id) === targetTableId && comp.cells) {
                                     const updatedCells = comp.cells.map((row) => normalizeTableRow(row).map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
-                                                if (cellComp.id === componentId) {
+                                                if (ensureStringId$1(cellComp.id) === componentId) {
                                                     return {
                                                         ...cellComp,
                                                         basic: {
@@ -6553,12 +6601,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             onFormDataChange?.(updatedComponents);
                         }, onAttachmentChange: (componentId, attachments) => {
                             // Handle attachment change for table cell components
+                            const targetTableId = ensureStringId$1(component.id);
                             const updatedComponents = localFormComponents.map(comp => {
-                                if (comp.id === component.id && comp.cells) {
+                                if (ensureStringId$1(comp.id) === targetTableId && comp.cells) {
                                     const updatedCells = comp.cells.map((row) => normalizeTableRow(row).map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
-                                                if (cellComp.id === componentId) {
+                                                if (ensureStringId$1(cellComp.id) === componentId) {
                                                     return {
                                                         ...cellComp,
                                                         basic: {
@@ -6583,12 +6632,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 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 targetGridId = ensureStringId$1(component.id);
                         const updatedComponents = localFormComponents.map(comp => {
-                            if (comp.id === component.id && comp.entries) {
+                            if (ensureStringId$1(comp.id) === targetGridId && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
                                     if (entry.components) {
                                         const updatedEntryComponents = entry.components.map((entryComp) => {
-                                            if (entryComp.id === componentId) {
+                                            if (ensureStringId$1(entryComp.id) === componentId) {
                                                 return {
                                                     ...entryComp,
                                                     basic: {
@@ -6611,12 +6661,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }, onAttachmentChange: (componentId, attachments) => {
                         handleComponentAttachmentChange(componentId, attachments);
                         // Handle attachment change for datagrid entry components
+                        const targetGridId = ensureStringId$1(component.id);
                         const updatedComponents = localFormComponents.map(comp => {
-                            if (comp.id === component.id && comp.entries) {
+                            if (ensureStringId$1(comp.id) === targetGridId && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
                                     if (entry.components) {
                                         const updatedEntryComponents = entry.components.map((entryComp) => {
-                                            if (entryComp.id === componentId) {
+                                            if (ensureStringId$1(entryComp.id) === componentId) {
                                                 return {
                                                     ...entryComp,
                                                     basic: {
@@ -6637,13 +6688,16 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         });
                         onFormDataChange?.(updatedComponents);
                     }, onValueChange: (change) => {
-                        console.log('[DfFormPreview] datagrid onValueChange received:', change.id, 'hasEntries:', change.value && typeof change.value === 'object' && 'entries' in change.value);
+                        const changeId = ensureStringId$1(change.id);
+                        const componentId = ensureStringId$1(component.id);
+                        console.log(`[DfFormPreview] datagrid onValueChange - Target: ${changeId}, Component: ${componentId}`);
                         // Handle datagrid value changes (entries updates)
-                        if (change.id === component.id && change.value && typeof change.value === 'object' && 'entries' in change.value) {
+                        if (changeId === componentId && 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) {
+                                const currentCompId = ensureStringId$1(comp.id);
+                                if (currentCompId === componentId) {
                                     return {
                                         ...comp,
                                         ...change.value
@@ -6654,26 +6708,37 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             // CRITICAL: Update local state immediately so new entries render without Angular round-trip
                             setLocalFormComponents(updatedComponents);
                             onFormDataChange?.(updatedComponents);
-                            // Also update formValues for nested components
+                            // Also update formValues for nested components to prevent undefined values
                             if (change.value.entries && Array.isArray(change.value.entries)) {
+                                const newValues = { ...formValues };
+                                let valuesChanged = false;
                                 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 nestedId = ensureStringId$1(nestedComp.id);
+                                            if (!nestedId)
+                                                return;
+                                            if (newValues[nestedId] === undefined) {
+                                                // Initialize with defaultValue if available, otherwise empty string/array
                                                 const defaultValue = nestedComp.basic?.defaultValue;
                                                 if (defaultValue !== undefined) {
-                                                    setFormValues(prev => ({
-                                                        ...prev,
-                                                        [nestedComp.id]: defaultValue
-                                                    }));
+                                                    newValues[nestedId] = defaultValue;
+                                                }
+                                                else if (nestedComp.name === 'checkbox' || nestedComp.name === 'select') {
+                                                    newValues[nestedId] = [];
                                                 }
+                                                else {
+                                                    newValues[nestedId] = '';
+                                                }
+                                                valuesChanged = true;
                                             }
                                         });
                                     }
                                 });
+                                if (valuesChanged) {
+                                    console.log('[DfFormPreview] Initializing form values for new datagrid entries');
+                                    setFormValues(newValues);
+                                }
                             }
                         }
                         else {