df-ae-forms-package 1.1.4 → 1.1.5

package/dist/index.js

@@ -2404,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)
@@ -2496,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;
@@ -2686,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(() => {
@@ -5433,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
@@ -5448,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] = '';
                     }
                 }
             }
@@ -5473,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);
@@ -5657,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 }));
@@ -6817,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] }) }));