df-ae-forms-package 1.0.88 → 1.0.90

package/dist/index.esm.js

@@ -5304,6 +5304,12 @@ const DfFormTable$1 = React.lazy(() => Promise.resolve().then(function () { retu
 const DfFormPreview = ({ formComponents = [], currentDevice = 'desktop', isPreviewMode = false, initialFormData = [], onSubmit, onFormDataChange, formTitle, formDescription, formTemplateId, 
 // Add component management props for edit mode
 onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
+    // Local copy of formComponents so structure updates (e.g. table cell init) are reflected immediately
+    const [localFormComponents, setLocalFormComponents] = useState(formComponents);
+    // Sync local state when the prop changes from the parent
+    useEffect(() => {
+        setLocalFormComponents(formComponents);
+    }, [formComponents]);
     // Form state
     const [formValues, setFormValues] = useState({});
     const [validationErrors, setValidationErrors] = useState({});
@@ -5324,7 +5330,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     // Initialize form state
     useEffect(() => {
         initializeFormState();
-    }, [formComponents, initialFormData]);
+    }, [localFormComponents, initialFormData]);
     // Recursive function to initialize values from nested components
     const initializeComponentValues = (components, values) => {
         components.forEach(component => {
@@ -5494,11 +5500,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             });
         };
         // Initialize validated components
-        let validatedFormComponents = formComponents;
-        if (formComponents && formComponents.length > 0) {
-            validatedFormComponents = getValidatedComponents(formComponents);
+        let validatedFormComponents = localFormComponents;
+        if (localFormComponents && localFormComponents.length > 0) {
+            validatedFormComponents = getValidatedComponents(localFormComponents);
             // Notifying parent of changed components if they were mutated (IDs added/fixed)
-            if (JSON.stringify(validatedFormComponents) !== JSON.stringify(formComponents)) {
+            if (JSON.stringify(validatedFormComponents) !== JSON.stringify(localFormComponents)) {
                 onFormDataChange?.(validatedFormComponents);
             }
         }
@@ -5526,7 +5532,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         setComponentAttachments(prev => ({ ...initialAttachments, ...prev }));
         // Conditional logic evaluation disabled temporarily to fix table issues
         // evaluateConditionalLogic()
-    }, [initialFormData, formComponents]);
+    }, [initialFormData, localFormComponents]);
     // Conditional logic disabled temporarily - all components are always visible
     const shouldShowComponent = useCallback((_componentId) => {
         return true;
@@ -5539,7 +5545,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             return;
         }
         // CRITICAL: Check if multiple components share this ID (ID collision detection)
-        const componentsWithSameId = formComponents.filter(comp => comp.id === change.id);
+        const componentsWithSameId = localFormComponents.filter(comp => comp.id === 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 })));
             // Don't update - this would cause all components with this ID to get the same value
@@ -5560,7 +5566,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 = formComponents.find(comp => comp.id === change.id);
+        const component = localFormComponents.find(comp => comp.id === change.id);
         if (component) {
             const threshold = component?.threshold;
             if (threshold && threshold.conditions && threshold.conditions.length > 0) {
@@ -5638,7 +5644,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             });
         };
         // Update form components
-        const updatedComponents = updateComponentValue(formComponents);
+        const updatedComponents = updateComponentValue(localFormComponents);
+        // CRITICAL: Update local state immediately so structure changes (e.g. table cell init)
+        // are reflected without waiting for Angular parent round-trip
+        setLocalFormComponents(updatedComponents);
         onFormDataChange?.(updatedComponents);
         // Clear validation errors when user starts typing and re-validate
         if (validationErrors[change.id]) {
@@ -5675,7 +5684,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         }
         // Conditional logic evaluation disabled temporarily
         // evaluateConditionalLogic(newFormValues, updatedComponents)
-    }, [formComponents, formValues, validationErrors, onFormDataChange]);
+    }, [localFormComponents, formValues, validationErrors, onFormDataChange]);
     // Recursive function to find a component by ID in nested structures
     const findComponentById = useCallback((components, fieldId) => {
         for (const comp of components) {
@@ -5719,7 +5728,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         if (isPreviewMode)
             return;
         // Find component recursively (handles nested components)
-        const component = findComponentById(formComponents, fieldId);
+        const component = findComponentById(localFormComponents, fieldId);
         if (!component)
             return;
         // Get current value from form values (real-time input)
@@ -5814,7 +5823,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             ...prev,
             [fieldId]: errorMessage
         }));
-    }, [formComponents, isPreviewMode, formValues, findComponentById]);
+    }, [localFormComponents, isPreviewMode, formValues, findComponentById]);
     // Handle form control blur
     const onFormControlBlur = useCallback((fieldId) => {
         setTouchedFields(prev => ({
@@ -5844,11 +5853,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     // useEffect(() => {
     //   if (!isPreviewMode && Object.keys(formValues).length > 0) {
     //     // Validate all form components when form values change (but not on initial load)
-    //     formComponents.forEach(component => {
+    //     localFormComponents.forEach(component => {
     //       validateField(component.id)
     //     })
     //   }
-    // }, [formValues, validateField, isPreviewMode, formComponents])
+    // }, [formValues, validateField, isPreviewMode, localFormComponents])
     // Enhanced form validity check
     const isFormValid = useCallback(() => {
         // Check if there are any validation errors
@@ -5857,7 +5866,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             return false;
         }
         // Check required fields
-        return formComponents.every(component => {
+        return localFormComponents.every(component => {
             // Use real-time form values instead of component values
             const currentValue = formValues[component.id] || '';
             // Check if field has a value
@@ -5903,7 +5912,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             }
             return true;
         });
-    }, [formComponents, formValues, validationErrors]);
+    }, [localFormComponents, formValues, validationErrors]);
     // Evaluate threshold condition (handles both numeric and string values)
     const evaluateThresholdCondition = useCallback((condition, currentVal) => {
         // Handle array values (for checkbox)
@@ -5957,7 +5966,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         if (isPreviewMode)
             return [];
         const metConditions = [];
-        formComponents.forEach(component => {
+        localFormComponents.forEach(component => {
             const condition = component?.condition;
             if (!condition || !condition.conditions || condition.conditions.length === 0) {
                 return;
@@ -5983,7 +5992,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             });
         });
         return metConditions;
-    }, [formComponents, formValues, isPreviewMode, evaluateThresholdCondition]);
+    }, [localFormComponents, formValues, isPreviewMode, evaluateThresholdCondition]);
     // Validate threshold conditions - check if all met conditions have all mandatory actions completed
     const validateThresholdConditions = useCallback(() => {
         if (isPreviewMode)
@@ -6068,7 +6077,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         let isValid = true;
         setFormSubmitted(true);
         const errors = {};
-        formComponents.forEach(component => {
+        localFormComponents.forEach(component => {
             // Use real-time form values instead of component values
             const currentValue = formValues[component.id] || '';
             // Check if field has a value
@@ -6135,13 +6144,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         });
         setValidationErrors(errors);
         return isValid;
-    }, [formComponents, isPreviewMode, formValues]);
+    }, [localFormComponents, isPreviewMode, formValues]);
     // Handle form submission
     const handleSubmit = useCallback((status = 'Submitted') => {
         setFormSubmitted(true);
         if (!validateAllFields()) {
             // Focus on the first invalid field
-            const firstErrorField = formComponents.find(comp => {
+            const firstErrorField = localFormComponents.find(comp => {
                 const currentValue = formValues[comp.id] || '';
                 // Check if field has a value
                 let hasValue = false;
@@ -6244,12 +6253,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             });
         };
         // Prepare final form data
-        const finalFormData = updateComponentValues(formComponents);
+        const finalFormData = updateComponentValues(localFormComponents);
         // Also prepare a clean key-value payload
         const payloadValues = { ...formValues, status };
         // Pass both the updated component tree and the flat values object
         onSubmit?.(finalFormData, payloadValues);
-    }, [formComponents, formValues, validateAllFields, onSubmit, componentNotes, componentAttachments]);
+    }, [localFormComponents, formValues, validateAllFields, onSubmit, componentNotes, componentAttachments]);
     // Get preview classes
     const getPreviewClasses = useCallback(() => {
         return {
@@ -6311,7 +6320,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Debug: Log if formValue is being shared incorrectly
         if (formValue !== undefined) {
             // Check if this value is being used by multiple components
-            const componentsWithSameValue = formComponents.filter(comp => comp.id !== componentId && formValues[comp.id] === formValue);
+            const componentsWithSameValue = localFormComponents.filter(comp => comp.id !== componentId && formValues[comp.id] === formValue);
             if (componentsWithSameValue.length > 0) {
                 console.warn(`[DfFormPreview] Component ${componentId} shares form value with other components:`, componentsWithSameValue.map(c => c.id));
             }
@@ -6406,9 +6415,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         return renderFormComponent(field);
                     } }));
             case 'table':
-                return (jsx(React.Suspense, { fallback: jsx("div", { children: "Loading table..." }), children: jsx(DfFormTable$1, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, validationErrors: validationErrors, touchedFields: touchedFields, formSubmitted: formSubmitted, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, workOrderNumber: workOrderNumber, assetNumber: assetNumber, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, onNotesChange: (componentId, notes) => {
+                return (jsx(React.Suspense, { fallback: jsx("div", { children: "Loading table..." }), children: jsx(DfFormTable$1, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, validationErrors: validationErrors, touchedFields: touchedFields, formSubmitted: formSubmitted, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, workOrderNumber: workOrderNumber, assetNumber: assetNumber, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, renderFormComponent: (field) => {
+                            return renderFormComponent(field);
+                        }, onNotesChange: (componentId, notes) => {
                             // Handle notes change for table cell components
-                            const updatedComponents = formComponents.map(comp => {
+                            const updatedComponents = localFormComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
                                     const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
                                         if (cell.components) {
@@ -6435,7 +6446,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             onFormDataChange?.(updatedComponents);
                         }, onAttachmentChange: (componentId, attachments) => {
                             // Handle attachment change for table cell components
-                            const updatedComponents = formComponents.map(comp => {
+                            const updatedComponents = localFormComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
                                     const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
                                         if (cell.components) {
@@ -6460,16 +6471,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                 return comp;
                             });
                             onFormDataChange?.(updatedComponents);
-                        }, renderFormComponent: (field) => {
-                            // CRITICAL: Pass the field to renderFormComponent which has access to latest formValues
-                            // renderFormComponent uses formValues[field.id] internally, so it will get the correct value
-                            return renderFormComponent(field);
                         } }) }));
             case 'datagrid':
                 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 = formComponents.map(comp => {
+                        const updatedComponents = localFormComponents.map(comp => {
                             if (comp.id === component.id && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
                                     if (entry.components) {
@@ -6497,7 +6504,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }, onAttachmentChange: (componentId, attachments) => {
                         handleComponentAttachmentChange(componentId, attachments);
                         // Handle attachment change for datagrid entry components
-                        const updatedComponents = formComponents.map(comp => {
+                        const updatedComponents = localFormComponents.map(comp => {
                             if (comp.id === component.id && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
                                     if (entry.components) {
@@ -6525,8 +6532,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }, onValueChange: (change) => {
                         // Handle datagrid value changes (entries updates)
                         if (change.id === component.id && change.value && typeof change.value === 'object' && 'entries' in change.value) {
-                            // Update formComponents with new entries structure
-                            const updatedComponents = formComponents.map(comp => {
+                            // Update localFormComponents with new entries structure
+                            const updatedComponents = localFormComponents.map(comp => {
                                 if (comp.id === component.id) {
                                     return {
                                         ...comp,
@@ -6564,12 +6571,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         }
                     }, onEntryAdd: () => {
                         // CRITICAL: Entry has already been added via onValueChange in DfFormDataGrid
-                        // Get the updated component from formComponents (which should have been updated by onValueChange)
-                        const currentComponent = formComponents.find(comp => comp.id === component.id);
+                        // 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 formComponents is in sync (no-op if already synced)
-                            const updatedComponents = formComponents.map(comp => {
+                            // 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 {
@@ -6586,7 +6593,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             setTimeout(() => {
                                 const datagridValue = formValues[component.id];
                                 if (datagridValue && typeof datagridValue === 'object' && 'entries' in datagridValue) {
-                                    const updatedComponents = formComponents.map(comp => {
+                                    const updatedComponents = localFormComponents.map(comp => {
                                         if (comp.id === component.id) {
                                             return {
                                                 ...comp,
@@ -6601,7 +6608,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         }
                     }, onEntryRemove: (entryIndex) => {
                         // Handle entry remove - update form components
-                        const updatedComponents = formComponents.map(comp => {
+                        const updatedComponents = localFormComponents.map(comp => {
                             if (comp.id === component.id && comp.entries) {
                                 const currentEntries = comp.entries || [];
                                 const updatedEntries = currentEntries
@@ -6643,7 +6650,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 return (jsx("div", { className: "form-group", children: jsxs("div", { className: "form-group-label", children: ["Unsupported Component: ", component.name] }) }));
         }
     };
-    return (jsx("div", { className: "form-preview-container", children: jsx("div", { className: "form-preview-wrapper", children: jsxs("div", { className: `form-preview ${Object.entries(getPreviewClasses()).map(([key, value]) => value ? key : '').join(' ')}`, children: [jsx("div", { className: "form-canvas-header" }), formComponents.length === 0 ? (jsx("div", { className: "empty-state", children: jsx("div", { className: "empty-state-card", children: jsx("div", { className: "empty-state-preview-area", children: jsx("span", { className: "empty-state-placeholder", children: "Add components to see the form preview" }) }) }) })) : (jsxs("form", { className: "form-preview-form", onSubmit: (e) => { e.preventDefault(); handleSubmit(); }, children: [(formTitle || formDescription) && (jsxs("div", { className: "form-header", children: [formTitle && (jsx("h1", { className: "form-title", children: formTitle })), formDescription && (jsx("p", { className: "form-description", children: formDescription }))] })), formComponents.map((component) => {
+    return (jsx("div", { className: "form-preview-container", children: jsx("div", { className: "form-preview-wrapper", children: jsxs("div", { className: `form-preview ${Object.entries(getPreviewClasses()).map(([key, value]) => value ? key : '').join(' ')}`, children: [jsx("div", { className: "form-canvas-header" }), localFormComponents.length === 0 ? (jsx("div", { className: "empty-state", children: jsx("div", { className: "empty-state-card", children: jsx("div", { className: "empty-state-preview-area", children: jsx("span", { className: "empty-state-placeholder", children: "Add components to see the form preview" }) }) }) })) : (jsxs("form", { className: "form-preview-form", onSubmit: (e) => { e.preventDefault(); handleSubmit(); }, children: [(formTitle || formDescription) && (jsxs("div", { className: "form-header", children: [formTitle && (jsx("h1", { className: "form-title", children: formTitle })), formDescription && (jsx("p", { className: "form-description", children: formDescription }))] })), localFormComponents.map((component) => {
                                 const basic = component.basic;
                                 const formValue = formValues[component.id];
                                 const isOptionBased = ['select', 'radio', 'checkbox', 'segment'].includes(component.name || '');
@@ -6695,7 +6702,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                                 // Update local state immediately
                                                 setComponentNotes(prev => ({ ...prev, [component.id]: notes }));
                                                 // Handle notes change for regular components - update component.basic.notes
-                                                const updatedComponents = formComponents.map(comp => {
+                                                const updatedComponents = localFormComponents.map(comp => {
                                                     if (comp.id === component.id) {
                                                         return {
                                                             ...comp,
@@ -6712,7 +6719,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                                 // Update local state immediately
                                                 setComponentAttachments(prev => ({ ...prev, [component.id]: attachments || [] }));
                                                 // Handle attachment change for regular components - update component.basic.attachments
-                                                const updatedComponents = formComponents.map(comp => {
+                                                const updatedComponents = localFormComponents.map(comp => {
                                                     if (comp.id === component.id) {
                                                         return {
                                                             ...comp,