df-ae-forms-package 1.0.77 → 1.0.78

package/dist/index.esm.js

@@ -7615,8 +7615,29 @@ 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 }) => {
     const [isCollapsed, setIsCollapsed] = useState(false); // Always start expanded to show drop zones
+    // Normalize cells: API may return a flat 1D array of cells (each with .row/.column)
+    // or a proper 2D array of rows. Always convert to 2D for consistent rendering.
+    const normalizedCells = useMemo(() => {
+        const raw = properties.cells;
+        if (!raw || !Array.isArray(raw) || raw.length === 0)
+            return [];
+        // Check if it's already a 2D array (first element is an array)
+        if (Array.isArray(raw[0])) {
+            return raw;
+        }
+        // It's a flat 1D array — reconstruct 2D using each cell's row/column
+        const grid = [];
+        raw.forEach((cell) => {
+            const r = typeof cell.row === 'number' ? cell.row : 0;
+            const c = typeof cell.column === 'number' ? cell.column : 0;
+            if (!grid[r])
+                grid[r] = [];
+            grid[r][c] = cell;
+        });
+        return grid;
+    }, [properties.cells]);
     // Check if table has any components in any cells
-    const hasAnyComponents = properties.cells?.some(row => row.some(cell => cell.components && cell.components.length > 0)) || false;
+    const hasAnyComponents = normalizedCells.some(row => Array.isArray(row) && row.some(cell => cell && cell.components && cell.components.length > 0)) || false;
     // Initialize and update table cells when rows/columns change
     // CRITICAL: Skip cell initialization updates to prevent flickering when user types
     useEffect(() => {
@@ -7639,9 +7660,9 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     const handleComponentDelete = useCallback((component, event) => {
         event.stopPropagation();
         // 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);
+        const updatedCells = normalizedCells.map(row => (Array.isArray(row) ? row : []).map(cell => {
+            if (cell && cell.components && cell.components.some((comp) => comp.id === component.id)) {
+                const filteredComponents = cell.components.filter((comp) => comp.id !== component.id);
                 return {
                     ...cell,
                     components: filteredComponents
@@ -7661,12 +7682,13 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     }, [onComponentDelete, properties, onValueChange, id]);
     // CRITICAL FIX: Ensure all table cell components have proper IDs with table and cell position
     // Use useMemo to prevent ID regeneration on every render
+    // Uses normalizedCells so it works whether API returns 1D or 2D cell arrays
     const cellsWithIds = useMemo(() => {
-        if (!properties.cells)
+        if (!normalizedCells || normalizedCells.length === 0)
             return [];
-        return properties.cells.map((row, rowIndex) => row.map((cell, cellIndex) => ({
+        return normalizedCells.map((row, rowIndex) => (Array.isArray(row) ? row : []).map((cell, cellIndex) => ({
             ...cell,
-            components: (cell.components && Array.isArray(cell.components))
+            components: (cell && 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
@@ -7684,7 +7706,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                 })
                 : []
         })));
-    }, [properties.cells, id]); // Only recalculate if cells or table ID changes
+    }, [normalizedCells, 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(() => {