df-ae-forms-package 1.1.3 → 1.1.5

package/dist/index.js

@@ -1004,20 +1004,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
     React.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
@@ -2409,6 +2404,7 @@ const DfFormFileUpload = ({ id, properties, validationErrors = {}, formValue = n
     const [isDragOver, setIsDragOver] = React.useState(false);
     const [isTouched, setIsTouched] = React.useState(false);
     const fileInputRef = React.useRef(null);
+    const lastFormValueRef = React.useRef(null); // Track the last formValue to prevent unnecessary resets
     // Convert FileList or File[] to IFilePreview[]
     const convertToFilePreviews = React.useCallback((fileList, startIndex = 0) => {
         if (!fileList)
@@ -2501,12 +2497,20 @@ const DfFormFileUpload = ({ id, properties, validationErrors = {}, formValue = n
                 if (fileObject.url || fileObject.path) {
                     preview = fileObject.url || fileObject.path;
                 }
-                else if (fileType.startsWith('image/') && fileObject.data) {
-                    // Handle base64 data
+                else if (fileObject.data) {
+                    // Handle base64 data - works for all file types with data
+                    const resolvedType = fileType || 'application/octet-stream';
                     const fileData = fileObject.data;
-                    preview = typeof fileData === 'string'
-                        ? (fileData.startsWith('data:') ? fileData : `data:${fileType};base64,${fileData}`)
-                        : undefined;
+                    if (typeof fileData === 'string') {
+                        if (fileData.startsWith('data:')) {
+                            // Already a full data URI
+                            preview = fileData;
+                        }
+                        else {
+                            // Raw base64 - construct data URI
+                            preview = `data:${resolvedType};base64,${fileData}`;
+                        }
+                    }
                 }
                 // Use the original object to preserve data
                 fileObj = fileObject;
@@ -2691,10 +2695,35 @@ const DfFormFileUpload = ({ id, properties, validationErrors = {}, formValue = n
         }
     }, [mode]);
     // Update value when formValue prop changes or on mount
+    // CRITICAL: Use a stable reference check to prevent unnecessary resets
     React.useEffect(() => {
-        // Always convert formValue, even if it's null/undefined (will return empty array)
+        // Skip if formValue is null/undefined (no data)
+        if (formValue === null || formValue === undefined || (typeof formValue === 'string' && formValue === '')) {
+            // Only clear files if we previously had files from formValue
+            // Don't clear files that were added by user interaction
+            if (lastFormValueRef.current !== null && lastFormValueRef.current !== undefined && lastFormValueRef.current !== '') {
+                setFiles([]);
+                lastFormValueRef.current = null;
+            }
+            return;
+        }
+        // Check if formValue actually changed (deep comparison for arrays)
+        try {
+            const currentStr = JSON.stringify(formValue);
+            const prevStr = JSON.stringify(lastFormValueRef.current);
+            if (currentStr === prevStr) {
+                return; // No change, skip
+            }
+        }
+        catch {
+            // If stringify fails, proceed with update
+        }
+        // Convert and set new files
         const newFiles = convertToFilePreviews(formValue);
-        setFiles(newFiles);
+        if (newFiles.length > 0) {
+            setFiles(newFiles);
+            lastFormValueRef.current = formValue;
+        }
     }, [formValue, convertToFilePreviews]);
     // Mark as touched when form is submitted
     React.useEffect(() => {
@@ -4967,8 +4996,7 @@ 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
                 });
             }
         }
@@ -5439,7 +5467,38 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     const initializeComponentValues = (components, values) => {
         components.forEach(component => {
             const componentId = ensureStringId$1(component.id);
-            if (componentId) {
+            if (!componentId)
+                return; // Skip components without valid IDs
+            // CRITICAL: Handle file component FIRST — file data is an array, not a simple string
+            // The general handler below would misinterpret an empty file array
+            if (component.name === 'file' && component.basic) {
+                // Don't overwrite if already initialized
+                if (values[componentId] !== undefined && values[componentId] !== '' && values[componentId] !== null) ;
+                else {
+                    // Check all possible locations where file data could be stored
+                    const fileData = component.basic.value ||
+                        component.basic.files ||
+                        component.basic.attachments;
+                    if (fileData && (Array.isArray(fileData) ? fileData.length > 0 : true)) {
+                        values[componentId] = fileData;
+                    }
+                    else {
+                        values[componentId] = null; // Use null, not empty string, for file components
+                    }
+                }
+            }
+            // Handle instructions component
+            else if (component.name === 'instructions' && component.basic) {
+                if (!component.basic.instructions) {
+                    component.basic.instructions = [];
+                }
+                const instructionValue = component.basic.value || component.basic.instructions;
+                if (instructionValue) {
+                    values[componentId] = instructionValue;
+                }
+            }
+            // General handler for all other components
+            else {
                 // ALWAYS prioritize existing form state (values param) if it exists
                 if (values[componentId] !== undefined) ;
                 // Then use captured value in basic.value
@@ -5454,10 +5513,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 else {
                     // For checkbox and multi-select, empty array
                     if (component.name === 'checkbox' || component.name === 'select') {
-                        values[component.id] = [];
+                        values[componentId] = [];
                     }
                     else {
-                        values[component.id] = '';
+                        values[componentId] = '';
                     }
                 }
             }
@@ -5479,31 +5538,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }
                 });
             }
-            // Handle file component - initialize with file data if present
-            if (component.name === 'file' && component.basic) {
-                const fileData = component.basic.files || component.basic.attachments || component.basic.value;
-                if (fileData) {
-                    values[component.id] = fileData;
-                }
-            }
             // Initialize notes and attachments
-            if (component.id && component.basic) {
+            if (componentId && component.basic) {
                 if (component.basic.notes) ;
             }
-            // Handle instructions component - ensure instructions array exists and initialize formValue
-            if (component.name === 'instructions' && component.basic) {
-                if (!component.basic.instructions) {
-                    // Initialize empty instructions array if not present
-                    component.basic.instructions = [];
-                }
-                // CRITICAL: Initialize formValue for instructions from API data
-                // Check if component has value from API (could be in basic.value, basic.instructions, or formData)
-                const instructionValue = component.basic.value || component.basic.instructions;
-                if (instructionValue) {
-                    // Store instruction data in formValues so it can be passed to DfFormInstruction
-                    values[component.id] = instructionValue;
-                }
-            }
             // Handle nested components in section children
             if (component.children && Array.isArray(component.children)) {
                 initializeComponentValues(component.children, values);
@@ -5663,8 +5701,34 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         }
         // Set the state
         setFormValues(prev => {
-            // Merge with previous state to avoid blowing away user input on re-renders
-            return { ...initialValues, ...prev };
+            // Smart merge: initial values should win over empty/stale prev values
+            // but user-entered values in prev should win over initial defaults
+            const merged = { ...initialValues };
+            Object.keys(prev).forEach(key => {
+                const prevVal = prev[key];
+                const initVal = initialValues[key];
+                // If prev has a meaningful value (not empty/null/undefined), keep it
+                if (prevVal !== undefined && prevVal !== null && prevVal !== '') {
+                    // But if initVal is an array (like file data) and prevVal is a simple empty value,
+                    // prefer the initialValue
+                    if (Array.isArray(initVal) && initVal.length > 0 && !Array.isArray(prevVal)) {
+                        // initialValue is a populated array but prev is not — keep initial
+                        merged[key] = initVal;
+                    }
+                    else {
+                        merged[key] = prevVal;
+                    }
+                }
+                // If prev has empty string but initial has actual data, use initial
+                else if (initVal !== undefined && initVal !== null && initVal !== '') {
+                    merged[key] = initVal;
+                }
+                // Otherwise keep prev (even if empty — preserves user clearing a field)
+                else {
+                    merged[key] = prevVal;
+                }
+            });
+            return merged;
         });
         // Initialize notes and attachments state
         setComponentNotes(prev => ({ ...initialNotes, ...prev }));
@@ -5684,9 +5748,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;
         }
@@ -5705,7 +5795,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) {
@@ -5721,7 +5811,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) {
@@ -5737,13 +5828,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
                             }
                         };
                     }
@@ -6797,12 +6887,14 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     } }));
             case 'file':
                 // Get file value from formValues, or from component basic properties
-                // CRITICAL: Check basic.value first (API data structure), then formValue
-                const fileFormValue = formValue ||
-                    component.basic?.value ||
-                    component.basic?.files ||
-                    component.basic?.attachments ||
-                    null;
+                // CRITICAL: formValue could be '' (empty string) which is falsy — check explicitly
+                const hasFormValue = formValue !== undefined && formValue !== null && formValue !== '';
+                const fileFormValue = hasFormValue
+                    ? formValue
+                    : (component.basic?.value ||
+                        component.basic?.files ||
+                        component.basic?.attachments ||
+                        null);
                 return (jsxRuntime.jsx(DfFormFileUpload, { ...commonProps, properties: component, formValue: fileFormValue }));
             default:
                 return (jsxRuntime.jsx("div", { className: "form-group", children: jsxRuntime.jsxs("div", { className: "form-group-label", children: ["Unsupported Component: ", component.name] }) }));