df-ae-forms-package 1.1.4 → 1.1.6

package/dist/index.js

@@ -820,7 +820,6 @@ const DfFormInput = ({ id, properties, validationErrors = {}, formValue = '', in
     // Update ref if ID changes (shouldn't happen, but safety check)
     React.useEffect(() => {
         if (id !== componentIdRef.current) {
-            console.warn(`[DfFormInput] Component ID changed from ${componentIdRef.current} to ${id}`);
             componentIdRef.current = id;
         }
     }, [id]);
@@ -2404,6 +2403,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 +2496,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 +2694,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(() => {
@@ -2964,8 +2997,6 @@ const DfFormLocation = ({ id, properties, validationErrors = {}, formValue = nul
                 }
             }
             catch (error) {
-                // Capacitor not properly initialized, fall through to web geolocation
-                console.warn('Capacitor Geolocation not available, falling back to web geolocation');
             }
         }
         // Fallback to standard web geolocation API (for browsers)
@@ -3679,7 +3710,6 @@ const AttachmentThumbnails = ({ attachments, onRemove }) => {
                     newUrls.set(index, url);
                 }
                 catch (e) {
-                    console.warn('Failed to create object URL for attachment:', e);
                 }
             }
             else if (file && file.url && file.type && file.type.startsWith('image/')) {
@@ -4590,7 +4620,6 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                         zIndex: 5
                     }, children: jsxRuntime.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',
@@ -4716,7 +4745,6 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                     justifyContent: 'center'
                 }, children: jsxRuntime.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',
@@ -4969,12 +4997,8 @@ 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 = React.useCallback(() => {
-        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}`;
@@ -4996,11 +5020,8 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             }),
             styles: {}
         };
-        console.log('[DfFormDataGrid] newEntry created:', newEntry.id, 'with', newEntry.components.length, 'components');
         const updatedEntries = [...currentEntries, newEntry];
-        console.log('[DfFormDataGrid] updatedEntries count:', updatedEntries.length);
         if (onValueChange) {
-            console.log('[DfFormDataGrid] calling onValueChange with updated datagrid structure - Entries:', updatedEntries.length);
             onValueChange({
                 id: gridId, // Use sanitized gridId
                 value: {
@@ -5010,13 +5031,9 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             });
             // Notify parent if callback provided
             if (onEntryAdd) {
-                console.log('[DfFormDataGrid] calling onEntryAdd callback');
                 onEntryAdd();
             }
         }
-        else {
-            console.warn('[DfFormDataGrid] Cannot add entry: onValueChange is missing');
-        }
     }, [onValueChange, properties, gridId, gridComponents, onEntryAdd]);
     const handleRemoveEntry = React.useCallback((entryIndex) => {
         // Safety check: ensure we have entries array
@@ -5025,7 +5042,6 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             .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: gridId, // Use sanitized gridId
                 value: { ...properties, entries: updatedEntries }
@@ -5413,8 +5429,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     const [validationErrors, setValidationErrors] = React.useState({});
     const [formSubmitted, setFormSubmitted] = React.useState(false);
     const [touchedFields, setTouchedFields] = React.useState({});
-    // Conditional logic disabled temporarily
-    // const [componentVisibility, setComponentVisibility] = useState<Record<string, boolean>>({})
+    // Component visibility state - driven by conditional logic evaluation
+    const [componentVisibility, setComponentVisibility] = React.useState({});
     // Track raised issues for threshold conditions (Set of condition IDs)
     const [raisedThresholdIssues, setRaisedThresholdIssues] = React.useState(new Set());
     // Track threshold action completions: Map<conditionId, { notesCompleted, attachmentsCompleted, emailSent }>
@@ -5433,7 +5449,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 +5495,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,35 +5520,19 @@ 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);
             }
+            // CRITICAL for conditional logic: Also store value under the label key
+            // so condition lookups by label (e.g. "Temperature") work during init
+            if (component.basic?.label && componentId && values[componentId] !== undefined) {
+                values[component.basic.label] = values[componentId];
+            }
         });
     };
     const initializeFormState = React.useCallback(() => {
@@ -5573,15 +5604,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         const labelPart = safeLabel ? `-${safeLabel}` : '';
                         validatedComponent.id = `${name}${labelPart}-${index}`;
                     }
-                    console.warn(`[DfFormPreview] Fixed missing/invalid ID: ${validatedComponent.id}`);
                 }
                 else {
                     // ID is a valid string, check for duplicates
                     if (seenIds.has(validatedComponent.id)) {
-                        console.error(`[DfFormPreview] Duplicate component ID detected: ${validatedComponent.id}`);
                         // Generate a unique ID for duplicate - using index to keep it somewhat stable
                         validatedComponent.id = `${validatedComponent.id}-dup-${index}`;
-                        console.warn(`[DfFormPreview] Generated new unique ID: ${validatedComponent.id}`);
                     }
                 }
                 seenIds.add(validatedComponent.id);
@@ -5636,7 +5664,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             validatedFormComponents = getValidatedComponents(localFormComponents);
             // 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);
             }
@@ -5657,19 +5684,261 @@ 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 }));
         setComponentAttachments(prev => ({ ...initialAttachments, ...prev }));
-        // Conditional logic evaluation disabled temporarily to fix table issues
-        // evaluateConditionalLogic()
+        // Evaluate conditional logic on initialization
+        evaluateConditionalLogic(initialValues);
     }, [initialFormData, localFormComponents]);
-    // Conditional logic disabled temporarily - all components are always visible
-    const shouldShowComponent = React.useCallback((_componentId) => {
-        return true;
+    // ======================== CONDITIONAL LOGIC ENGINE ========================
+    // This is a pure visibility layer. It NEVER modifies component data.
+    // It computes a { [componentId]: boolean } map based on each component's
+    // `logic` property and the current form values.
+    // Helper: Flatten all components (including nested) into a flat list
+    const flattenAllComponents = React.useCallback((components) => {
+        const flat = [];
+        const traverse = (items) => {
+            if (!items || !Array.isArray(items))
+                return;
+            for (const item of items) {
+                flat.push(item);
+                if (item.children && Array.isArray(item.children))
+                    traverse(item.children);
+                if (item.cells && Array.isArray(item.cells)) {
+                    for (const row of item.cells) {
+                        const normalizedRow = normalizeTableRow(row);
+                        for (const cell of normalizedRow) {
+                            if (cell.components)
+                                traverse(cell.components);
+                        }
+                    }
+                }
+                if (item.entries && Array.isArray(item.entries)) {
+                    for (const entry of item.entries) {
+                        if (entry.components)
+                            traverse(entry.components);
+                    }
+                }
+                if (item.templateComponents && Array.isArray(item.templateComponents)) {
+                    traverse(item.templateComponents);
+                }
+            }
+        };
+        traverse(components);
+        return flat;
+    }, []);
+    // Helper: Get the value of a component referenced by a condition's `when` field.
+    // The `when` field is typically a component LABEL (e.g. "Temperature"), not an ID.
+    const getConditionComponentValue = React.useCallback((conditionWhen, allComponents, currentFormValues) => {
+        // Try to find the component by label, id, or _id
+        const comp = allComponents.find(c => c.basic?.label === conditionWhen ||
+            ensureStringId$1(c.id) === conditionWhen ||
+            ensureStringId$1(c._id) === conditionWhen);
+        if (!comp)
+            return undefined;
+        const compId = ensureStringId$1(comp.id || comp._id);
+        // Check formValues by ID first
+        if (compId && currentFormValues[compId] !== undefined) {
+            return currentFormValues[compId];
+        }
+        // Also check by label (main website stores values by label too)
+        if (comp.basic?.label && currentFormValues[comp.basic.label] !== undefined) {
+            return currentFormValues[comp.basic.label];
+        }
+        // Fall back to component's basic.value or defaultValue
+        if (comp.basic?.value !== undefined && comp.basic?.value !== null && comp.basic?.value !== '') {
+            return comp.basic.value;
+        }
+        if (comp.basic?.defaultValue !== undefined && comp.basic?.defaultValue !== null && comp.basic?.defaultValue !== '') {
+            return comp.basic.defaultValue;
+        }
+        return undefined;
+    }, []);
+    // Helper: Evaluate a single condition
+    const evaluateSingleCondition = React.useCallback((condition, componentValue) => {
+        const { operator, value } = condition;
+        // isEmpty / isNotEmpty
+        if (operator === 'isEmpty') {
+            if (componentValue == null)
+                return true;
+            if (typeof componentValue === 'string')
+                return componentValue.trim() === '';
+            if (Array.isArray(componentValue))
+                return componentValue.length === 0;
+            return false;
+        }
+        if (operator === 'isNotEmpty') {
+            if (componentValue == null)
+                return false;
+            if (typeof componentValue === 'string')
+                return componentValue.trim() !== '';
+            if (Array.isArray(componentValue))
+                return componentValue.length > 0;
+            return true;
+        }
+        // checked / notChecked (for checkboxes)
+        if (operator === 'checked' || operator === 'notChecked') {
+            let isChecked = false;
+            if (typeof componentValue === 'boolean')
+                isChecked = componentValue;
+            else if (typeof componentValue === 'string')
+                isChecked = componentValue.toLowerCase() === 'true' || componentValue === '1' || componentValue.length > 0;
+            else if (Array.isArray(componentValue))
+                isChecked = componentValue.length > 0;
+            else if (typeof componentValue === 'number')
+                isChecked = componentValue > 0;
+            return operator === 'checked' ? isChecked : !isChecked;
+        }
+        // equals / notEquals
+        if (operator === 'equals' || operator === 'notEquals') {
+            let isEqual = false;
+            // Loose comparison
+            if (componentValue == value)
+                isEqual = true;
+            // String comparison (case-insensitive, trimmed)
+            if (!isEqual && componentValue != null && value != null) {
+                const strA = String(componentValue).trim();
+                const strB = String(value).trim();
+                // Numeric comparison within strings
+                if (strA !== '' && strB !== '' && !isNaN(Number(strA)) && !isNaN(Number(strB))) {
+                    isEqual = Number(strA) === Number(strB);
+                }
+                if (!isEqual) {
+                    isEqual = strA.toLowerCase() === strB.toLowerCase();
+                }
+            }
+            // Array contains check (for multi-select)
+            if (!isEqual && Array.isArray(componentValue)) {
+                isEqual = componentValue.some(v => String(v).trim().toLowerCase() === String(value).trim().toLowerCase());
+            }
+            return operator === 'equals' ? isEqual : !isEqual;
+        }
+        // contains / notContains
+        if (operator === 'contains' || operator === 'notContains') {
+            let doesContain = false;
+            if (typeof componentValue === 'string' && value != null) {
+                doesContain = componentValue.trim().toLowerCase().includes(String(value).trim().toLowerCase());
+            }
+            else if (Array.isArray(componentValue) && value != null) {
+                doesContain = componentValue.some(v => String(v).trim().toLowerCase() === String(value).trim().toLowerCase());
+            }
+            return operator === 'contains' ? doesContain : !doesContain;
+        }
+        // Numeric comparisons
+        if (['greaterThan', 'lessThan', 'greaterThanOrEqual', 'lessThanOrEqual'].includes(operator)) {
+            const numA = typeof componentValue === 'number' ? componentValue : parseFloat(String(componentValue));
+            const numB = typeof value === 'number' ? value : parseFloat(String(value));
+            if (isNaN(numA) || isNaN(numB))
+                return false;
+            switch (operator) {
+                case 'greaterThan': return numA > numB;
+                case 'lessThan': return numA < numB;
+                case 'greaterThanOrEqual': return numA >= numB;
+                case 'lessThanOrEqual': return numA <= numB;
+                default: return false;
+            }
+        }
+        return false;
     }, []);
+    // Main conditional logic evaluation function
+    const evaluateConditionalLogic = React.useCallback((explicitValues) => {
+        const currentComponents = localFormComponents;
+        const currentValues = explicitValues || formValues;
+        if (!currentComponents || currentComponents.length === 0)
+            return;
+        const allComponents = flattenAllComponents(currentComponents);
+        const visibility = {};
+        allComponents.forEach(component => {
+            const compId = ensureStringId$1(component.id || component._id);
+            if (!compId)
+                return;
+            // Container components are ALWAYS visible — their children handle their own logic
+            if (['table', 'datagrid', 'section', 'heading', 'instructions'].includes(component.name)) {
+                visibility[compId] = true;
+                return;
+            }
+            // Get the logic property (API sends it as `logic`, builder uses `conditional`)
+            const logic = component.logic || component.conditional;
+            // No logic or action is 'always' → always show
+            if (!logic || logic.action === 'always' || !logic.conditions || logic.conditions.length === 0) {
+                visibility[compId] = true;
+                return;
+            }
+            // Evaluate each condition
+            const conditionResults = logic.conditions.map((condition) => {
+                const componentValue = getConditionComponentValue(condition.when, allComponents, currentValues);
+                return evaluateSingleCondition(condition, componentValue);
+            });
+            // Determine if conditions are met based on 'when' (all/any)
+            let conditionsMet;
+            if (logic.when === 'any') {
+                conditionsMet = conditionResults.some((r) => r);
+            }
+            else {
+                // Default to 'all'
+                conditionsMet = conditionResults.every((r) => r);
+            }
+            // Apply action
+            if (logic.action === 'show') {
+                visibility[compId] = conditionsMet;
+            }
+            else if (logic.action === 'hide') {
+                visibility[compId] = !conditionsMet;
+            }
+            else {
+                visibility[compId] = true;
+            }
+        });
+        // Only update state if visibility actually changed (prevent re-render loops)
+        setComponentVisibility(prev => {
+            const prevStr = JSON.stringify(prev);
+            const newStr = JSON.stringify(visibility);
+            if (prevStr === newStr)
+                return prev;
+            return visibility;
+        });
+    }, [localFormComponents, formValues, flattenAllComponents, getConditionComponentValue, evaluateSingleCondition]);
+    // Re-evaluate conditional logic whenever form values change
+    React.useEffect(() => {
+        evaluateConditionalLogic();
+    }, [formValues, evaluateConditionalLogic]);
+    // Check if a component should be visible
+    const shouldShowComponent = React.useCallback((componentId) => {
+        // In preview mode (read-only submission view), always show everything
+        if (isPreviewMode)
+            return true;
+        // Default to visible if not explicitly set to false
+        return componentVisibility[componentId] !== false;
+    }, [componentVisibility, isPreviewMode]);
     // Handle form value changes and re-evaluate conditional logic
     const onFormValueChange = React.useCallback((change) => {
         // CRITICAL: Validate that change.id is valid and unique
@@ -5721,6 +5990,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Only update formValues for actual value changes, not structure updates
         if (!isStructureUpdate) {
             newFormValues[change.id] = change.value;
+            // CRITICAL for conditional logic: Also store value under the component's label.
+            // Conditions reference components by label (e.g. "Temperature"), not by ID.
+            const allComponents = flattenAllComponents(localFormComponents);
+            const targetComp = allComponents.find(c => ensureStringId$1(c.id || c._id) === change.id);
+            if (targetComp?.basic?.label) {
+                newFormValues[targetComp.basic.label] = change.value;
+            }
             setFormValues(newFormValues);
         }
         // Clear raised issues for this component when value changes
@@ -6461,7 +6737,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 componentCounterRef.current += 1;
                 cachedId = `generated-${name}-${componentCounterRef.current}-${Math.random().toString(36).substr(2, 9)}`;
                 componentIdCacheRef.current.set(cacheKey, cachedId);
-                console.warn('[DfFormPreview] Generated and cached ID for component:', cachedId, 'key:', cacheKey);
             }
             finalComponentId = cachedId;
             // Create a new component object with the cached ID (don't mutate original)
@@ -6477,9 +6752,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         if (formValue !== undefined) {
             // Check if this value is being used by multiple components
             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));
-            }
+            if (componentsWithSameValue.length > 0) ;
         }
         const commonProps = {
             id: componentId, // Use the validated component ID
@@ -6692,10 +6965,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }, onValueChange: (change) => {
                         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 (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 => {
                                 const currentCompId = ensureStringId$1(comp.id);
@@ -6738,7 +7009,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                     }
                                 });
                                 if (valuesChanged) {
-                                    console.log('[DfFormPreview] Initializing form values for new datagrid entries');
                                     setFormValues(newValues);
                                 }
                             }
@@ -6817,12 +7087,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] }) }));