df-ae-forms-package 1.0.81 → 1.0.83

package/dist/index.esm.js

@@ -5969,9 +5969,47 @@ 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 = [], currentDevice = 'desktop', isPreviewMode = false, initialFormData = [], onSubmit, onFormDataChange, formTitle, formDescription, formTemplateId, 
+const DfFormPreview = ({ formComponents: rawFormComponents = [], 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 = 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] = useState({});
     const [validationErrors, setValidationErrors] = useState({});
@@ -6072,7 +6110,6 @@ 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 => {
@@ -6109,76 +6146,16 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     });
             });
         };
-        // 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) => row.map((cell) => ({
-                        ...cell,
-                        components: cell.components ? getValidatedComponents(cell.components) : []
-                    })));
-                }
-                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) {
-            validatedInitialFormData = getValidatedComponents(initialFormData);
-        }
+        // IDs are already ensured by the useMemo at the top - no need for getValidatedComponents
         // Initialize form values from initial data
-        if (validatedInitialFormData && validatedInitialFormData.length > 0) {
-            initializeComponentValues(validatedInitialFormData, initialValues);
+        if (initialFormData && initialFormData.length > 0) {
+            initializeComponentValues(initialFormData, 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 (validatedFormComponents && validatedFormComponents.length > 0) {
-            initializeComponentValues(validatedFormComponents, initialValues);
-            extractNotesAndAttachments(validatedFormComponents);
+        if (formComponents && formComponents.length > 0) {
+            initializeComponentValues(formComponents, initialValues);
+            extractNotesAndAttachments(formComponents);
         }
         // Set the state
         setFormValues(prev => {
@@ -6226,11 +6203,18 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 component.cells.forEach((row) => {
                     if (Array.isArray(row)) {
                         row.forEach((cell) => {
-                            if (cell.components && Array.isArray(cell.components)) {
+                            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)) {
+                            evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
+                        }
+                    }
                 });
             }
             // Handle nested components in datagrid entries
@@ -6354,13 +6338,24 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 if (component.name === 'table' && component.cells) {
                     return {
                         ...component,
-                        cells: component.cells.map((row) => row.map((cell) => {
+                        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;
                             const updatedCell = { ...cell };
                             if (updatedCell.components) {
                                 updatedCell.components = updateComponentValue(updatedCell.components);
                             }
                             return updatedCell;
-                        }))
+                        })
                     };
                 }
                 if (component.name === 'datagrid' && component.entries) {
@@ -6432,8 +6427,19 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             // Check nested components in table cells
             if (comp.name === 'table' && comp.cells) {
                 for (const row of comp.cells) {
-                    for (const cell of row) {
-                        if (cell.components) {
+                    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) {
                             const found = findComponentById(cell.components, fieldId);
                             if (found)
                                 return found;
@@ -7162,7 +7168,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 return (jsx(React.Suspense, { fallback: jsx("div", { children: "Loading table..." }), children: jsx(DfFormTable$1, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, validationErrors: validationErrors, touchedFields: touchedFields, formSubmitted: formSubmitted, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, workOrderNumber: workOrderNumber, assetNumber: assetNumber, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, onNotesChange: (componentId, notes) => {
                             const updatedComponents = formComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updatedCells = comp.cells.map((row) => row.map((cell) => {
+                                    const updateCell = (cell) => {
                                         if (cell.components) {
                                             return {
                                                 ...cell,
@@ -7172,7 +7178,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                             };
                                         }
                                         return cell;
-                                    }));
+                                    };
+                                    const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map(updateCell) : updateCell(row));
                                     return { ...comp, cells: updatedCells };
                                 }
                                 return comp;
@@ -7181,7 +7188,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         }, onAttachmentChange: (componentId, attachments) => {
                             const updatedComponents = formComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updatedCells = comp.cells.map((row) => row.map((cell) => {
+                                    const updateCell = (cell) => {
                                         if (cell.components) {
                                             return {
                                                 ...cell,
@@ -7191,7 +7198,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                             };
                                         }
                                         return cell;
-                                    }));
+                                    };
+                                    const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map(updateCell) : updateCell(row));
                                     return { ...comp, cells: updatedCells };
                                 }
                                 return comp;
@@ -7584,11 +7592,53 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
 };
 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] = useState(false);
-    // By the time cells arrive here, DfFormPreview.getValidatedComponents has already
-    // normalized them from 1D flat (API format) to proper 2D arrays.
-    // So we can use properties.cells directly, exactly like the website version.
+    // Initialize and update table cells when rows/columns change (matching main website)
+    useEffect(() => {
+        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
+        const needsUpdate = currentCells.length === 0 ||
+            currentCells.length !== currentRows ||
+            (currentCells.length > 0 && Array.isArray(currentCells[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] && Array.isArray(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);
+            }
+            if (onValueChange) {
+                onValueChange({
+                    id,
+                    value: { ...properties, cells: newCells }
+                });
+            }
+        }
+    }, [properties.table?.rows, properties.table?.columns, properties.basic?.rows, properties.basic?.columns, properties.cells, id, onValueChange]);
     // Check if table has any components in any cells
-    const hasAnyComponents = properties.cells?.some((row) => Array.isArray(row) && row.some((cell) => cell && cell.components && cell.components.length > 0)) || false;
+    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 handleTableClick = useCallback((event) => {
         event.stopPropagation();
         onSelect?.();
@@ -7604,34 +7654,58 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     };
     const handleComponentDelete = useCallback((component, event) => {
         event.stopPropagation();
-        const updatedCells = properties.cells.map((row) => row.map((cell) => {
+        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) };
             }
             return cell;
-        }));
+        });
         onValueChange?.({ id, value: { ...properties, cells: updatedCells } });
     }, [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) => (Array.isArray(row) ? row : []).map((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;
-            })
-        })));
+        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)
         : [];
-    // 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
-    // }, [])
+    // CRITICAL FIX: Update the parent component with the cells that have proper IDs (matching main website)
+    useEffect(() => {
+        if (cellsWithIds.length > 0 && JSON.stringify(cellsWithIds) !== JSON.stringify(properties.cells)) {
+            onValueChange?.({
+                id: id,
+                value: {
+                    ...properties,
+                    cells: cellsWithIds
+                }
+            });
+        }
+    }, [cellsWithIds, properties.cells, id, onValueChange]);
     // CRITICAL: Create a stable renderComponent that doesn't recreate on every render
     // Match main app implementation - directly access formData from closure
     const renderComponent = renderFormComponent || useCallback((field) => {
@@ -7739,22 +7813,22 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     if (!hasAnyComponents && mode === 'preview') {
         return null;
     }
-    return (jsxs("div", { className: `form-group df-form-table ${isSelected ? 'selected' : ''} ${mode === 'preview' ? 'preview-mode' : mode === 'test' ? 'test-mode' : ''} ${className}`, onClick: handleTableClick, style: tableStyle, children: [jsx("div", { className: "table-header", children: jsx("div", { className: "table-title", onClick: toggleCollapse, children: jsxs("div", { className: "title-content", children: [isCollapsed ? jsx(ChevronRight, { size: 16 }) : jsx(ChevronDown, { size: 16 }), jsx(Table, { size: 16 }), jsx("span", { className: "table-label", children: properties.basic?.label || 'Table' }), properties.validation?.required && (jsx("span", { className: "required-indicator", children: "*" }))] }) }) }), properties.basic?.description && !isCollapsed && (jsx("div", { className: "table-description", children: properties.basic.description })), !isCollapsed && (jsxs("div", { className: "table-content", children: [(() => {
-                        return null;
-                    })(), jsxs("table", { style: tableElementStyle, children: [properties.table?.displayAsTable && (mode === 'edit' || properties.table?.showColumns) && (jsx("thead", { children: 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 (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}`));
-                                    }) }) })), jsx("tbody", { children: cellsWithIds.filter(row => Array.isArray(row) && row.length > 0).map((row, rowIndex) => (jsx("tr", { className: "table-row", children: row.filter(cell => cell != null).map((cell) => (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 (jsxs("div", { className: `form-group df-form-table ${isSelected ? 'selected' : ''} ${mode === 'preview' ? 'preview-mode' : mode === 'test' ? 'test-mode' : ''} ${className}`, onClick: handleTableClick, style: tableStyle, children: [jsx("div", { className: "table-header", children: jsx("div", { className: "table-title", onClick: toggleCollapse, children: jsxs("div", { className: "title-content", children: [isCollapsed ? jsx(ChevronRight, { size: 16 }) : jsx(ChevronDown, { size: 16 }), jsx(Table, { size: 16 }), jsx("span", { className: "table-label", children: properties.basic?.label || 'Table' }), properties.validation?.required && (jsx("span", { className: "required-indicator", children: "*" }))] }) }) }), properties.basic?.description && !isCollapsed && (jsx("div", { className: "table-description", children: properties.basic.description })), !isCollapsed && (jsx("div", { className: "table-content", children: jsxs("table", { style: tableElementStyle, children: [properties.table?.displayAsTable && (mode === 'edit' || properties.table?.showColumns) && (jsx("thead", { children: 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 (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}`));
+                                }) }) })), jsx("tbody", { children: cellsWithIds.map((row, rowIndex) => {
+                                const rowCells = Array.isArray(row) ? row : [row];
+                                return (jsx("tr", { className: "table-row", children: rowCells.map((cell) => (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));
+                            }) })] }) }))] }));
 };
 
 var dfFormTable = /*#__PURE__*/Object.freeze({