df-ae-forms-package 1.0.84 → 1.0.85

package/dist/index.js

@@ -180,19 +180,7 @@ class ConditionalLogicService {
             }
             if (comp.name === 'table' && comp.cells) {
                 for (const row of comp.cells) {
-                    // Check if row is iterable (array)
-                    if (Array.isArray(row)) {
-                        for (const cell of row) {
-                            if (cell.components) {
-                                const found = this.findComponent(cell.components, componentId);
-                                if (found)
-                                    return found;
-                            }
-                        }
-                    }
-                    else {
-                        // Handle case where cells is a 1D array (row is actually a cell)
-                        const cell = row;
+                    for (const cell of row) {
                         if (cell.components) {
                             const found = this.findComponent(cell.components, componentId);
                             if (found)
@@ -236,14 +224,7 @@ class ConditionalLogicService {
                     traverse(item.templateComponents);
                 if (item.cells) {
                     for (const row of item.cells) {
-                        if (Array.isArray(row)) {
-                            for (const cell of row) {
-                                if (cell.components)
-                                    traverse(cell.components);
-                            }
-                        }
-                        else {
-                            const cell = row;
+                        for (const cell of row) {
                             if (cell.components)
                                 traverse(cell.components);
                         }
@@ -5146,7 +5127,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis'
-                                }, children: component.basic?.label || `Column ${index + 1}` }, `header-${component.id || index}`))) })), dataEntries.length > 0 ? (dataEntries.map((entry, entryIndex) => (jsxRuntime.jsxs("div", { className: "table-row", style: {
+                                }, children: component.basic?.label || `Column ${index + 1}` }, `header-${component.id}`))) })), dataEntries.length > 0 ? (dataEntries.map((entry, entryIndex) => (jsxRuntime.jsxs("div", { className: "table-row", style: {
                                 // Use flex column for column view, grid for row view
                                 display: columnView ? 'flex' : 'grid',
                                 flexDirection: columnView ? 'column' : 'row',
@@ -5971,47 +5952,9 @@ const DfFormSection = ({ id, properties, mode = 'edit', formData = {}, onValueCh
 
 // Dynamic imports to avoid circular dependencies
 const DfFormTable$1 = React.lazy(() => Promise.resolve().then(function () { return dfFormTable; }));
-const DfFormPreview = ({ formComponents: rawFormComponents = [], currentDevice = 'desktop', isPreviewMode = false, initialFormData = [], onSubmit, onFormDataChange, formTitle, formDescription, formTemplateId, 
+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 }) => {
-    // Ensure all components have IDs (matching main website approach)
-    const formComponents = React.useMemo(() => {
-        const ensureIds = (components) => {
-            return components.map(comp => {
-                // Reuse existing ID or generate one
-                const id = comp.id || `generated-${Math.random().toString(36).substr(2, 9)}`;
-                const newComp = { ...comp, id };
-                // Recursively handle nested components
-                if (newComp.children && Array.isArray(newComp.children)) {
-                    newComp.children = ensureIds(newComp.children);
-                }
-                if (newComp.cells && Array.isArray(newComp.cells)) {
-                    newComp.cells = newComp.cells.map((row) => {
-                        if (Array.isArray(row)) {
-                            return row.map((cell) => ({
-                                ...cell,
-                                components: cell.components ? ensureIds(cell.components) : []
-                            }));
-                        }
-                        // Handle flat 1D cell (not wrapped in row array)
-                        const cell = row;
-                        return {
-                            ...cell,
-                            components: cell.components ? ensureIds(cell.components) : []
-                        };
-                    });
-                }
-                if (newComp.entries && Array.isArray(newComp.entries)) {
-                    newComp.entries = newComp.entries.map((entry) => ({
-                        ...entry,
-                        components: entry.components ? ensureIds(entry.components) : []
-                    }));
-                }
-                return newComp;
-            });
-        };
-        return ensureIds(rawFormComponents || []);
-    }, [rawFormComponents]);
     // Form state
     const [formValues, setFormValues] = React.useState({});
     const [validationErrors, setValidationErrors] = React.useState({});
@@ -6057,11 +6000,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }
                 }
             }
-            // Handle nested components in table cells (2D array: row → cell → components)
+            // Handle nested components in table cells
             if (component.cells && Array.isArray(component.cells)) {
-                component.cells.forEach((row) => {
+                component.cells.forEach((row, _rowIndex) => {
                     if (Array.isArray(row)) {
-                        row.forEach((cell) => {
+                        row.forEach((cell, _cellIndex) => {
                             if (cell && cell.components && Array.isArray(cell.components)) {
                                 initializeComponentValues(cell.components, values);
                             }
@@ -6112,6 +6055,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         const initialValues = {};
         const initialNotes = {};
         const initialAttachments = {};
+        const seenIds = new Set();
         // Helper to extract notes and attachments recursively
         const extractNotesAndAttachments = (components) => {
             components.forEach(comp => {
@@ -6127,20 +6071,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 if (comp.children)
                     extractNotesAndAttachments(comp.children);
                 if (comp.cells)
-                    comp.cells.forEach((row) => {
-                        if (Array.isArray(row)) {
-                            row.forEach((cell) => {
-                                if (cell.components)
-                                    extractNotesAndAttachments(cell.components);
-                            });
-                        }
-                        else {
-                            // Handle 1D array structure (row is actually a cell)
-                            const cell = row;
-                            if (cell.components)
-                                extractNotesAndAttachments(cell.components);
-                        }
-                    });
+                    comp.cells.forEach((row) => row.forEach((cell) => {
+                        if (cell.components)
+                            extractNotesAndAttachments(cell.components);
+                    }));
                 if (comp.entries)
                     comp.entries.forEach((entry) => {
                         if (entry.components)
@@ -6148,16 +6082,86 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     });
             });
         };
-        // IDs are already ensured by the useMemo at the top - no need for getValidatedComponents
-        // Initialize form values from initial data
+        // Validate component IDs for uniqueness without mutating original props
+        const getValidatedComponents = (components) => {
+            return components.map((component, index) => {
+                let validatedComponent = { ...component };
+                // Ensure component has an ID
+                if (!validatedComponent.id || typeof validatedComponent.id !== 'string' || validatedComponent.id.trim() === '') {
+                    // Determine a base name for the ID
+                    const name = validatedComponent.name || 'component';
+                    const label = validatedComponent.basic?.label || '';
+                    const safeLabel = label.replace(/[^a-zA-Z0-9]/g, '').toLowerCase().substring(0, 10);
+                    // Generate a unique ID
+                    validatedComponent.id = `${name}-${safeLabel || 'gen'}-${Date.now()}-${Math.random().toString(36).substr(2, 6)}-${index}`;
+                    console.warn(`[DfFormPreview] Assigned missing ID: ${validatedComponent.id}`);
+                }
+                else {
+                    // Check for duplicates
+                    if (seenIds.has(validatedComponent.id)) {
+                        console.error(`[DfFormPreview] Duplicate component ID detected: ${validatedComponent.id}`);
+                        // Generate a unique ID for duplicate
+                        validatedComponent.id = `${validatedComponent.id}-duplicate-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                        console.warn(`[DfFormPreview] Generated new unique ID: ${validatedComponent.id}`);
+                    }
+                }
+                seenIds.add(validatedComponent.id);
+                // Recursively validate nested components
+                if (validatedComponent.children && Array.isArray(validatedComponent.children)) {
+                    validatedComponent.children = getValidatedComponents(validatedComponent.children);
+                }
+                if (validatedComponent.cells && Array.isArray(validatedComponent.cells)) {
+                    validatedComponent.cells = validatedComponent.cells.map((row) => {
+                        if (Array.isArray(row)) {
+                            return row.map((cell) => {
+                                if (cell && cell.components && Array.isArray(cell.components)) {
+                                    return {
+                                        ...cell,
+                                        components: getValidatedComponents(cell.components)
+                                    };
+                                }
+                                return cell;
+                            });
+                        }
+                        return row;
+                    });
+                }
+                if (validatedComponent.entries && Array.isArray(validatedComponent.entries)) {
+                    validatedComponent.entries = validatedComponent.entries.map((entry) => {
+                        if (entry && entry.components && Array.isArray(entry.components)) {
+                            return {
+                                ...entry,
+                                components: getValidatedComponents(entry.components)
+                            };
+                        }
+                        return entry;
+                    });
+                }
+                return validatedComponent;
+            });
+        };
+        // Initialize validated components
+        let validatedFormComponents = formComponents;
+        if (formComponents && formComponents.length > 0) {
+            validatedFormComponents = getValidatedComponents(formComponents);
+            // Notifying parent of changed components if they were mutated (IDs added/fixed)
+            if (JSON.stringify(validatedFormComponents) !== JSON.stringify(formComponents)) {
+                onFormDataChange?.(validatedFormComponents);
+            }
+        }
+        let validatedInitialFormData = initialFormData;
         if (initialFormData && initialFormData.length > 0) {
-            initializeComponentValues(initialFormData, initialValues);
+            validatedInitialFormData = getValidatedComponents(initialFormData);
+        }
+        // Initialize form values from initial data
+        if (validatedInitialFormData && validatedInitialFormData.length > 0) {
+            initializeComponentValues(validatedInitialFormData, initialValues);
         }
         // Initialize form values from form components (for submitted data or pre-filled forms)
         // CRITICAL: This must run AFTER initialFormData to pick up any values embedded in the components themselves
-        if (formComponents && formComponents.length > 0) {
-            initializeComponentValues(formComponents, initialValues);
-            extractNotesAndAttachments(formComponents);
+        if (validatedFormComponents && validatedFormComponents.length > 0) {
+            initializeComponentValues(validatedFormComponents, initialValues);
+            extractNotesAndAttachments(validatedFormComponents);
         }
         // Set the state
         setFormValues(prev => {
@@ -6200,23 +6204,14 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         visibility[component.basic.label] = true;
                 }
             }
-            // Handle nested components in table cells (2D: row → cell → components)
+            // Handle nested components in table cells
             if (component.cells && Array.isArray(component.cells)) {
                 component.cells.forEach((row) => {
-                    if (Array.isArray(row)) {
-                        row.forEach((cell) => {
-                            if (cell && cell.components && Array.isArray(cell.components)) {
-                                evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
-                            }
-                        });
-                    }
-                    else {
-                        // Handle flat 1D cell
-                        const cell = row;
-                        if (cell && cell.components && Array.isArray(cell.components)) {
+                    row.forEach((cell) => {
+                        if (cell.components && Array.isArray(cell.components)) {
                             evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
                         }
-                    }
+                    });
                 });
             }
             // Handle nested components in datagrid entries
@@ -6282,19 +6277,26 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Debug: Log value changes to identify ID collisions
         const existingValue = formValues[change.id];
         if (existingValue !== undefined && existingValue !== change.value) ;
+        // CRITICAL: Check if this is a table/datagrid structure update (cells, entries, etc.)
+        // These should NOT be stored in formValues - they update the component structure only
+        const isStructureUpdate = change.value && typeof change.value === 'object' &&
+            ('cells' in change.value || ('entries' in change.value && 'name' in change.value));
         // Use the service's recursive find to find the component and update BOTH IDs in formValues
         const targetComponent = conditionalLogicService.findComponent(formComponents, change.id);
         const newFormValues = { ...formValues };
-        newFormValues[change.id] = change.value;
-        if (targetComponent) {
-            if (targetComponent.id)
-                newFormValues[targetComponent.id] = change.value;
-            if (targetComponent._id)
-                newFormValues[targetComponent._id] = change.value;
-            if (targetComponent.basic?.label)
-                newFormValues[targetComponent.basic.label] = change.value;
-        }
-        setFormValues(newFormValues);
+        // Only update formValues for actual value changes, not structure updates
+        if (!isStructureUpdate) {
+            newFormValues[change.id] = change.value;
+            if (targetComponent) {
+                if (targetComponent.id)
+                    newFormValues[targetComponent.id] = change.value;
+                if (targetComponent._id)
+                    newFormValues[targetComponent._id] = change.value;
+                if (targetComponent.basic?.label)
+                    newFormValues[targetComponent.basic.label] = change.value;
+            }
+            setFormValues(newFormValues);
+        }
         // Re-evaluate conditional logic after form value changes
         // Use setTimeout to ensure state update has completed
         setTimeout(() => {
@@ -6319,6 +6321,21 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         const updateComponentValue = (components) => {
             return components.map(component => {
                 if (component.id === 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) {
+                        return {
+                            ...component,
+                            ...change.value
+                        };
+                    }
+                    // Handle datagrid structure updates
+                    if (change.value && typeof change.value === 'object' && 'entries' in change.value) {
+                        return {
+                            ...component,
+                            ...change.value
+                        };
+                    }
                     if ('defaultValue' in component.basic) {
                         return {
                             ...component,
@@ -6340,24 +6357,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 if (component.name === 'table' && component.cells) {
                     return {
                         ...component,
-                        cells: component.cells.map((row) => {
-                            if (Array.isArray(row)) {
-                                return row.map((cell) => {
-                                    const updatedCell = { ...cell };
-                                    if (updatedCell.components) {
-                                        updatedCell.components = updateComponentValue(updatedCell.components);
-                                    }
-                                    return updatedCell;
-                                });
-                            }
-                            // Handle flat 1D cell
-                            const cell = row;
+                        cells: component.cells.map((row) => row.map((cell) => {
                             const updatedCell = { ...cell };
                             if (updatedCell.components) {
                                 updatedCell.components = updateComponentValue(updatedCell.components);
                             }
                             return updatedCell;
-                        })
+                        }))
                     };
                 }
                 if (component.name === 'datagrid' && component.entries) {
@@ -6429,19 +6435,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             // Check nested components in table cells
             if (comp.name === 'table' && comp.cells) {
                 for (const row of comp.cells) {
-                    if (Array.isArray(row)) {
-                        for (const cell of row) {
-                            if (cell && cell.components) {
-                                const found = findComponentById(cell.components, fieldId);
-                                if (found)
-                                    return found;
-                            }
-                        }
-                    }
-                    else {
-                        // Handle flat 1D cell
-                        const cell = row;
-                        if (cell && cell.components) {
+                    for (const cell of row) {
+                        if (cell.components) {
                             const found = findComponentById(cell.components, fieldId);
                             if (found)
                                 return found;
@@ -6972,25 +6967,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     updatedComponent.children = updateComponentValues(updatedComponent.children);
                 }
                 if (updatedComponent.name === 'table' && updatedComponent.cells) {
-                    updatedComponent.cells = updatedComponent.cells.map((rowOrCell) => {
-                        if (Array.isArray(rowOrCell)) {
-                            return rowOrCell.map((cell) => {
-                                const updatedCell = { ...cell };
-                                if (updatedCell.components) {
-                                    updatedCell.components = updateComponentValues(updatedCell.components);
-                                }
-                                return updatedCell;
-                            });
+                    updatedComponent.cells = updatedComponent.cells.map((row) => row.map((cell) => {
+                        const updatedCell = { ...cell };
+                        if (updatedCell.components) {
+                            updatedCell.components = updateComponentValues(updatedCell.components);
                         }
-                        else {
-                            // 1D flat cell
-                            const updatedCell = { ...rowOrCell };
-                            if (updatedCell.components) {
-                                updatedCell.components = updateComponentValues(updatedCell.components);
-                            }
-                            return updatedCell;
-                        }
-                    });
+                        return updatedCell;
+                    }));
                 }
                 if (updatedComponent.name === 'datagrid' && updatedComponent.entries) {
                     updatedComponent.entries = updatedComponent.entries.map((entry) => {
@@ -7168,48 +7151,64 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     } }));
             case 'table':
                 return (jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { children: "Loading table..." }), children: jsxRuntime.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) => {
+                            // Handle notes change for table cell components
                             const updatedComponents = formComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updateCell = (cell) => {
+                                    const updatedCells = comp.cells.map((row) => row.map((cell) => {
                                         if (cell.components) {
-                                            return {
-                                                ...cell,
-                                                components: cell.components.map((cellComp) => cellComp.id === componentId
-                                                    ? { ...cellComp, basic: { ...cellComp.basic, notes } }
-                                                    : cellComp)
-                                            };
+                                            const updatedCellComponents = cell.components.map((cellComp) => {
+                                                if (cellComp.id === componentId) {
+                                                    return {
+                                                        ...cellComp,
+                                                        basic: {
+                                                            ...cellComp.basic,
+                                                            notes
+                                                        }
+                                                    };
+                                                }
+                                                return cellComp;
+                                            });
+                                            return { ...cell, components: updatedCellComponents };
                                         }
                                         return cell;
-                                    };
-                                    const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map(updateCell) : updateCell(row));
+                                    }));
                                     return { ...comp, cells: updatedCells };
                                 }
                                 return comp;
                             });
                             onFormDataChange?.(updatedComponents);
                         }, onAttachmentChange: (componentId, attachments) => {
+                            // Handle attachment change for table cell components
                             const updatedComponents = formComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updateCell = (cell) => {
+                                    const updatedCells = comp.cells.map((row) => row.map((cell) => {
                                         if (cell.components) {
-                                            return {
-                                                ...cell,
-                                                components: cell.components.map((cellComp) => cellComp.id === componentId
-                                                    ? { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } }
-                                                    : cellComp)
-                                            };
+                                            const updatedCellComponents = cell.components.map((cellComp) => {
+                                                if (cellComp.id === componentId) {
+                                                    return {
+                                                        ...cellComp,
+                                                        basic: {
+                                                            ...cellComp.basic,
+                                                            attachments: attachments || []
+                                                        }
+                                                    };
+                                                }
+                                                return cellComp;
+                                            });
+                                            return { ...cell, components: updatedCellComponents };
                                         }
                                         return cell;
-                                    };
-                                    const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map(updateCell) : updateCell(row));
+                                    }));
                                     return { ...comp, cells: updatedCells };
                                 }
                                 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);
-                        }, shouldShowComponent: shouldShowComponent }) }));
+                        } }) }));
             case 'datagrid':
                 return (jsxRuntime.jsx(DfFormDataGrid, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: (componentId, notes) => {
                         handleComponentNotesChange(componentId, notes);
@@ -7519,13 +7518,12 @@ const ensureComponentHasId = (component) => {
     }
     return component;
 };
-const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
+const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
     const formValue = formData[component.id];
-    const isVisible = shouldShowComponent ? shouldShowComponent(component.id) : true;
     // Check if component has notes or attachments for submission view
     const hasSubmissionData = mode === 'preview' && ((component.basic?.notes && component.basic.notes.trim().length > 0) ||
         (component.basic?.attachments && Array.isArray(component.basic.attachments) && component.basic.attachments.length > 0));
-    return (jsxRuntime.jsxs("div", { className: `simple-table-component ${(!isVisible && mode !== 'edit') ? 'conditionally-hidden' : ''}`, style: { display: (isVisible || mode === 'edit') ? undefined : 'none' }, children: [renderFormComponent(component), mode === 'test' && !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsxRuntime.jsx(ComponentActionFeatures, { component: component, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(component.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(component.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue })), hasSubmissionData && (jsxRuntime.jsx(ComponentSubmissionActions, { component: component }))] }));
+    return (jsxRuntime.jsxs("div", { className: "simple-table-component", children: [renderFormComponent(component), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsxRuntime.jsx(ComponentActionFeatures, { component: component, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(component.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(component.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue })), hasSubmissionData && (jsxRuntime.jsx(ComponentSubmissionActions, { component: component }))] }));
 };
 const DraggableTableComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, }) => {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging, isSorting, } = sortable.useSortable({
@@ -7546,7 +7544,7 @@ const DraggableTableComponent = ({ component, selectedComponent, mode, onCompone
                             onComponentDelete(component, e);
                         }, type: "button", title: "Delete Component", children: jsxRuntime.jsx(lucideReact.Trash2, { size: 12 }) })] }))] }));
 };
-const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
+const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
     const dropZoneId = `table-cell-${tableId}-${cell.row}-${cell.column}`;
     const { setNodeRef, isOver } = core.useDroppable({
         id: dropZoneId,
@@ -7581,7 +7579,7 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
             cell.components.map((component) => {
                 // Only ensure ID if it's truly missing - don't regenerate existing IDs
                 const componentWithId = component.id ? component : ensureComponentHasId(component);
-                return (jsxRuntime.jsx(SimpleTableComponent, { component: componentWithId, mode: mode, renderFormComponent: renderFormComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, shouldShowComponent: shouldShowComponent }, componentWithId.id));
+                return (jsxRuntime.jsx(SimpleTableComponent, { component: componentWithId, mode: mode, renderFormComponent: renderFormComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, componentWithId.id));
             }))) : (
             // Only show drop zone content in edit mode
             mode === 'edit' ? (jsxRuntime.jsx("div", { className: "empty-cell-placeholder", children: jsxRuntime.jsxs("div", { className: "cell-info", children: [jsxRuntime.jsx("span", { className: "drop-zone-text", children: "Drag and Drop a form component" }), jsxRuntime.jsxs("span", { className: "cell-coordinates", children: ["Cell (", cell.row + 1, ", ", cell.column + 1, ")"] })] }) })) : (
@@ -7592,21 +7590,49 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
                     visibility: 'hidden' // Hide content but maintain space
                 }, children: "\u00A0" }))) }) }));
 };
-const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationErrors = {}, touchedFields = {}, formSubmitted = false, onValueChange, onSelect, isSelected = false, className = '', onTableSelect, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
-    const [isCollapsed, setIsCollapsed] = React.useState(false);
-    // NOTE: Unlike the main website, the package does NOT have a cell initialization useEffect.
-    // In the main website, onValueChange handles component structure updates (updating cells).
-    // In the package, onValueChange maps to onFormValueChange which only handles simple form values.
-    // The cells are already properly structured from the API and processed by the useMemo in DfFormPreview.
+const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationErrors = {}, touchedFields = {}, formSubmitted = false, onValueChange, onSelect, isSelected = false, className = '', onTableSelect, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
+    const [isCollapsed, setIsCollapsed] = React.useState(false); // Always start expanded to show drop zones
     // Check if table has any components in any cells
-    const hasAnyComponents = properties.cells?.some((row) => {
-        if (Array.isArray(row)) {
-            return row.some((cell) => cell && cell.components && cell.components.length > 0);
-        }
-        // Handle flat 1D cell
-        const cell = row;
-        return cell && cell.components && cell.components.length > 0;
-    }) || false;
+    const hasAnyComponents = properties.cells?.some(row => row.some(cell => cell.components && cell.components.length > 0)) || false;
+    // Initialize and update table cells when rows/columns change
+    // Only trigger when cells are truly missing or structure doesn't match rows/columns
+    React.useEffect(() => {
+        // Get rows and columns from table properties (where they're actually stored)
+        const currentRows = Number(properties.table?.rows || properties.basic?.rows || 3);
+        const currentColumns = Number(properties.table?.columns || properties.basic?.columns || 3);
+        const currentCells = properties.cells || [];
+        // Check if we need to update the table structure
+        // Only update if cells are empty or row/column count doesn't match
+        const needsUpdate = currentCells.length === 0 ||
+            currentCells.length !== currentRows ||
+            (currentCells.length > 0 && currentCells[0].length !== currentColumns);
+        if (needsUpdate) {
+            const newCells = [];
+            for (let row = 0; row < currentRows; row++) {
+                const rowCells = [];
+                for (let col = 0; col < currentColumns; col++) {
+                    const cellId = `cell-${row}-${col}`;
+                    // Try to preserve existing components if the cell exists
+                    let existingComponents = [];
+                    if (currentCells[row] && currentCells[row][col]) {
+                        existingComponents = (currentCells[row][col].components || []).map(ensureComponentHasId);
+                    }
+                    rowCells.push({
+                        id: cellId,
+                        row,
+                        column: col,
+                        components: existingComponents,
+                        styles: {}
+                    });
+                }
+                newCells.push(rowCells);
+            }
+            onValueChange?.({
+                id,
+                value: { ...properties, cells: newCells }
+            });
+        }
+    }, [properties.table?.rows, properties.table?.columns, properties.basic?.rows, properties.basic?.columns, properties.cells?.length, id, onValueChange]); // Watch rows/columns changes and cells length for initial init
     const handleTableClick = React.useCallback((event) => {
         event.stopPropagation();
         onSelect?.();
@@ -7622,60 +7648,66 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     };
     const handleComponentDelete = React.useCallback((component, event) => {
         event.stopPropagation();
-        const updatedCells = properties.cells.map((row) => {
-            if (Array.isArray(row)) {
-                return row.map((cell) => {
-                    if (cell && cell.components && cell.components.some((comp) => comp.id === component.id)) {
-                        return { ...cell, components: cell.components.filter((comp) => comp.id !== component.id) };
-                    }
-                    return cell;
-                });
-            }
-            // Handle flat 1D cell
-            const cell = row;
-            if (cell && cell.components && cell.components.some((comp) => comp.id === component.id)) {
-                return { ...cell, components: cell.components.filter((comp) => comp.id !== component.id) };
+        // Find and remove the component from the table cell
+        const updatedCells = properties.cells.map(row => row.map(cell => {
+            if (cell.components && cell.components.some(comp => comp.id === component.id)) {
+                const filteredComponents = cell.components.filter(comp => comp.id !== component.id);
+                return {
+                    ...cell,
+                    components: filteredComponents
+                };
             }
             return cell;
-        });
-        onValueChange?.({ id, value: { ...properties, cells: updatedCells } });
+        }));
+        // Update the table with the modified cells
+        if (onValueChange) {
+            onValueChange({
+                id,
+                value: { ...properties, cells: updatedCells }
+            });
+        }
+        // Don't call parent delete handler for table cell components
+        // The parent delete handler is for deleting entire fields, not components within table cells
     }, [onComponentDelete, properties, onValueChange, id]);
-    // Ensure all table cell components have IDs (matching website ensureTableCellComponentsHaveIds)
-    const ensureCellComponentIds = (cell) => ({
-        ...cell,
-        components: (cell?.components || []).map((comp) => {
-            if (!comp.id || comp.id.trim() === '') {
-                return { ...comp, id: `table-cell-${comp.name}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` };
-            }
-            return comp;
-        })
-    });
-    const ensureTableCellComponentsHaveIds = (cells) => {
-        return cells.map((row) => {
-            if (Array.isArray(row)) {
-                return row.map(ensureCellComponentIds);
-            }
-            // Handle flat 1D cell
-            return ensureCellComponentIds(row);
-        });
-    };
-    const cellsWithIds = properties.cells && properties.cells.length > 0
-        ? ensureTableCellComponentsHaveIds(properties.cells)
-        : [];
-    // NOTE: Unlike the main website, we do NOT sync cellsWithIds back via onValueChange.
-    // In the package, onValueChange = onFormValueChange which handles simple form values,
-    // not component structure updates. Syncing would corrupt the state.
-    // cellsWithIds is used only for rendering.
-    // CRITICAL: Create a stable renderComponent that doesn't recreate on every render
-    // Match main app implementation - directly access formData from closure
-    const renderComponent = renderFormComponent || React.useCallback((field) => {
+    // CRITICAL FIX: Ensure all table cell components have proper IDs with table and cell position
+    // Use useMemo to prevent ID regeneration on every render
+    const cellsWithIds = React.useMemo(() => {
+        if (!properties.cells)
+            return [];
+        return properties.cells.map((row, rowIndex) => row.map((cell, cellIndex) => ({
+            ...cell,
+            components: (cell.components && Array.isArray(cell.components))
+                ? cell.components.map((comp, compIndex) => {
+                    // CRITICAL: Only generate ID if it's missing - never regenerate existing IDs
+                    // This prevents component remounting and losing input state
+                    if (comp.id && typeof comp.id === 'string' && comp.id.trim() !== '') {
+                        // ID already exists - keep it as is
+                        return comp;
+                    }
+                    // Generate unique ID that includes table ID, row, cell, and component index
+                    // This ensures no conflicts with other components
+                    const uniqueId = `${comp.name || 'component'}-table-${id}-row-${rowIndex}-cell-${cellIndex}-comp-${compIndex}`;
+                    return {
+                        ...comp,
+                        id: uniqueId
+                    };
+                })
+                : []
+        })));
+    }, [properties.cells, id]); // Only recalculate if cells or table ID changes
+    // CRITICAL FIX: Update the parent component with the cells that have proper IDs
+    // Skip this in package to prevent flickering - cells are managed by parent
+    // useEffect(() => {
+    //   // Disabled to prevent flickering when user types
+    // }, [])
+    // Fallback renderer for when no renderFormComponent is provided by parent
+    // Always defined to avoid conditional hook calls (React hooks rule)
+    const fallbackRenderComponent = React.useCallback((field) => {
         // CRITICAL: Only ensure ID if it's missing - don't regenerate existing IDs
-        // This prevents component remounting and losing input state
         const componentWithId = field.id ? field : ensureComponentHasId(field);
         // Get form value - directly access formData from closure (matches main app)
         const formValue = formData[componentWithId.id] || ('defaultValue' in componentWithId.basic ? componentWithId.basic.defaultValue || '' : '');
         // CRITICAL: Ensure formValue is always a string for number inputs
-        // This prevents validation errors when formValue is a number type
         let normalizedFormValue = formValue;
         if (componentWithId.name === 'number-input' && typeof formValue === 'number') {
             normalizedFormValue = String(formValue);
@@ -7707,21 +7739,18 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
             case 'textarea':
                 return jsxRuntime.jsx(DfFormTextarea, { ...commonProps, properties: componentWithId, readonly: false, disabled: false });
             case 'select':
-                // Map basic.options to top-level options for select component
                 const selectProps = {
                     ...componentWithId,
                     options: componentWithId.basic?.options || []
                 };
                 return jsxRuntime.jsx(DfFormSelect, { ...commonProps, properties: selectProps, disabled: false });
             case 'checkbox':
-                // Map basic.options to top-level options for checkbox component
                 const checkboxProps = {
                     ...componentWithId,
                     options: componentWithId.basic?.options || []
                 };
                 return jsxRuntime.jsx(DfFormCheckbox, { ...commonProps, properties: checkboxProps, formValue: [], disabled: false });
             case 'radio':
-                // Map basic.options to top-level options for radio component
                 const radioProps = {
                     ...componentWithId,
                     options: componentWithId.basic?.options || []
@@ -7743,7 +7772,6 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
             case 'datagrid':
                 return (jsxRuntime.jsx(DfFormDataGrid, { ...commonProps, properties: componentWithId, formData: formData, mode: mode, onNotesChange: () => { }, onAttachmentChange: () => { } }));
             case 'segment':
-                // Map basic.options for segment
                 const segmentProps = {
                     ...componentWithId,
                     options: componentWithId.basic?.options || []
@@ -7752,7 +7780,9 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
             default:
                 return jsxRuntime.jsxs("div", { className: "unknown-component", children: ["Unknown component: ", componentWithId.name] });
         }
-    }, [renderFormComponent, mode, formData, onValueChange]); // Include renderFormComponent, formData and onValueChange to ensure latest values are used
+    }, [mode, formData, onValueChange]);
+    // Use parent-provided renderFormComponent if available, otherwise use fallback
+    const renderComponent = renderFormComponent || fallbackRenderComponent;
     const tableStyle = {
         backgroundColor: properties.styles?.backgroundColor || 'var(--df-color-fb-container)',
         borderColor: properties.styles?.borderColor || 'var(--df-color-fb-border)',
@@ -7773,22 +7803,22 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     if (!hasAnyComponents && mode === 'preview') {
         return null;
     }
-    return (jsxRuntime.jsxs("div", { className: `form-group df-form-table ${isSelected ? 'selected' : ''} ${mode === 'preview' ? 'preview-mode' : mode === 'test' ? 'test-mode' : ''} ${className}`, onClick: handleTableClick, style: tableStyle, children: [jsxRuntime.jsx("div", { className: "table-header", children: jsxRuntime.jsx("div", { className: "table-title", onClick: toggleCollapse, children: jsxRuntime.jsxs("div", { className: "title-content", children: [isCollapsed ? jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 }) : jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 }), jsxRuntime.jsx(lucideReact.Table, { size: 16 }), jsxRuntime.jsx("span", { className: "table-label", children: properties.basic?.label || 'Table' }), properties.validation?.required && (jsxRuntime.jsx("span", { className: "required-indicator", children: "*" }))] }) }) }), properties.basic?.description && !isCollapsed && (jsxRuntime.jsx("div", { className: "table-description", children: properties.basic.description })), !isCollapsed && (jsxRuntime.jsx("div", { className: "table-content", children: jsxRuntime.jsxs("table", { style: tableElementStyle, children: [properties.table?.displayAsTable && (mode === 'edit' || properties.table?.showColumns) && (jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { className: "table-header-row", children: Array.from({ length: properties.table?.columns || properties.basic?.columns || 3 }, (_, colIndex) => {
-                                    const columnNames = properties.table?.columnNames?.split(',').map((name) => name.trim()) || [];
-                                    const columnName = columnNames[colIndex] || `Column ${colIndex + 1}`;
-                                    return (jsxRuntime.jsx("th", { className: "table-header-cell", style: {
-                                            backgroundColor: 'var(--df-color-fb-container)',
-                                            color: properties.styles.headerTextColor || 'var(--df-color-text-dark)',
-                                            padding: '12px',
-                                            border: '1px solid var(--df-color-fb-border)',
-                                            fontWeight: '600',
-                                            fontSize: '14px',
-                                            textAlign: 'center'
-                                        }, children: columnName }, `header-${colIndex}`));
-                                }) }) })), jsxRuntime.jsx("tbody", { children: cellsWithIds.map((row, rowIndex) => {
-                                const rowCells = Array.isArray(row) ? row : [row];
-                                return (jsxRuntime.jsx("tr", { className: "table-row", children: rowCells.map((cell) => (jsxRuntime.jsx(TableCellComponent, { cell: cell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, shouldShowComponent: shouldShowComponent }, cell.id))) }, rowIndex));
-                            }) })] }) }))] }));
+    return (jsxRuntime.jsxs("div", { className: `form-group df-form-table ${isSelected ? 'selected' : ''} ${mode === 'preview' ? 'preview-mode' : mode === 'test' ? 'test-mode' : ''} ${className}`, onClick: handleTableClick, style: tableStyle, children: [jsxRuntime.jsx("div", { className: "table-header", children: jsxRuntime.jsx("div", { className: "table-title", onClick: toggleCollapse, children: jsxRuntime.jsxs("div", { className: "title-content", children: [isCollapsed ? jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 }) : jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 }), jsxRuntime.jsx(lucideReact.Table, { size: 16 }), jsxRuntime.jsx("span", { className: "table-label", children: properties.basic?.label || 'Table' }), properties.validation?.required && (jsxRuntime.jsx("span", { className: "required-indicator", children: "*" }))] }) }) }), properties.basic?.description && !isCollapsed && (jsxRuntime.jsx("div", { className: "table-description", children: properties.basic.description })), !isCollapsed && (jsxRuntime.jsxs("div", { className: "table-content", children: [(() => {
+                        return null;
+                    })(), jsxRuntime.jsxs("table", { style: tableElementStyle, children: [properties.table?.displayAsTable && (mode === 'edit' || properties.table?.showColumns) && (jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { className: "table-header-row", children: Array.from({ length: properties.table?.columns || properties.basic?.columns || 3 }, (_, colIndex) => {
+                                        // Parse column names from the comma-separated string
+                                        const columnNames = properties.table?.columnNames?.split(',').map(name => name.trim()) || [];
+                                        const columnName = columnNames[colIndex] || `Column ${colIndex + 1}`;
+                                        return (jsxRuntime.jsx("th", { className: "table-header-cell", style: {
+                                                backgroundColor: properties.styles.headerBackgroundColor || (mode === 'preview' || mode === 'test') ? 'var(--df-color-fb-container)' : 'var(--df-color-fb-container)',
+                                                color: properties.styles.headerTextColor || 'var(--df-color-text-dark)',
+                                                padding: '12px',
+                                                border: (mode === 'preview' || mode === 'test') ? '1px solid var(--df-color-fb-border)' : '1px solid var(--df-color-fb-border)',
+                                                fontWeight: '600',
+                                                fontSize: '14px',
+                                                textAlign: 'center'
+                                            }, children: columnName }, `header-${colIndex}`));
+                                    }) }) })), jsxRuntime.jsx("tbody", { children: cellsWithIds.map((row, rowIndex) => (jsxRuntime.jsx("tr", { className: "table-row", children: row.map((cell) => (jsxRuntime.jsx(TableCellComponent, { cell: cell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, cell.id))) }, rowIndex))) })] })] }))] }));
 };
 
 var dfFormTable = /*#__PURE__*/Object.freeze({