df-ae-forms-package 1.0.82 → 1.0.83

package/dist/index.js

@@ -7594,8 +7594,44 @@ 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] = React.useState(false);
-    // Cells may be 2D (row arrays) or 1D (flat cells) depending on API format.
-    // The useMemo in DfFormPreview ensures IDs, but structure may still vary.
+    // Initialize and update table cells when rows/columns change (matching main website)
+    React.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) => {
         if (Array.isArray(row)) {
@@ -7660,11 +7696,18 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     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)
+    React.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 || React.useCallback((field) => {
@@ -7772,22 +7815,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.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.filter((row) => Array.isArray(row) && row.length > 0).map((row, rowIndex) => (jsxRuntime.jsx("tr", { className: "table-row", children: row.filter((cell) => cell != null).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.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));
+                            }) })] }) }))] }));
 };
 
 var dfFormTable = /*#__PURE__*/Object.freeze({