df-ae-forms-package 1.0.90 → 1.0.92

package/dist/index.esm.js

@@ -5060,7 +5060,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                 , { 
                     // Cast to FormComponentType[] to satisfy TableView typing; gridComponents
                     // are always child form components of the datagrid.
-                    templateComponents: gridComponents, dataEntries: dataEntries, renderFormComponent: renderFormComponent || renderComponent, mode: mode, allowAddRemoveEntries: properties.datagrid?.allowAddRemoveEntries ?? true, addAnotherText: properties.datagrid?.addAnotherText ?? 'Add Entry', removeText: properties.datagrid?.removeText ?? 'Remove', maxEntries: properties.datagrid?.maxEntries ?? 10, minEntries: properties.datagrid?.minEntries ?? 1, displayAsGrid: properties.datagrid?.displayAsGrid ?? true, onAddEntry: onEntryAdd ? onEntryAdd : handleAddEntry, onRemoveEntry: onEntryRemove ? onEntryRemove : handleRemoveEntry, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, columnView: properties.datagrid?.columnView, shouldShowComponent: shouldShowComponent })) }))] }));
+                    templateComponents: gridComponents, dataEntries: dataEntries, renderFormComponent: renderFormComponent || renderComponent, mode: mode, allowAddRemoveEntries: properties.datagrid?.allowAddRemoveEntries ?? true, addAnotherText: properties.datagrid?.addAnotherText ?? 'Add Entry', removeText: properties.datagrid?.removeText ?? 'Remove', maxEntries: properties.datagrid?.maxEntries ?? 10, minEntries: properties.datagrid?.minEntries ?? 1, displayAsGrid: properties.datagrid?.displayAsGrid ?? true, onAddEntry: handleAddEntry, onRemoveEntry: handleRemoveEntry, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, columnView: properties.datagrid?.columnView, shouldShowComponent: shouldShowComponent })) }))] }));
 };
 
 const DraggableChild = ({ child, selectedChild, mode, onChildSelect, onChildDelete, renderFormComponent, isOverlay = false, isChildrenEditMode = false, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
@@ -5301,6 +5301,18 @@ 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; }));
+// Normalize a table row from API format (object with numeric keys) into a proper array.
+// The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...].
+const normalizeTableRow = (row) => {
+    if (Array.isArray(row))
+        return row;
+    if (row && typeof row === 'object') {
+        const keys = Object.keys(row).filter(k => !isNaN(Number(k))).sort((a, b) => Number(a) - Number(b));
+        if (keys.length > 0)
+            return keys.map(k => row[k]);
+    }
+    return [];
+};
 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 }) => {
@@ -5359,13 +5371,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             // Handle nested components in table cells
             if (component.cells && Array.isArray(component.cells)) {
                 component.cells.forEach((row, _rowIndex) => {
-                    if (Array.isArray(row)) {
-                        row.forEach((cell, _cellIndex) => {
-                            if (cell && cell.components && Array.isArray(cell.components)) {
-                                initializeComponentValues(cell.components, values);
-                            }
-                        });
-                    }
+                    normalizeTableRow(row).forEach((cell, _cellIndex) => {
+                        if (cell && cell.components && Array.isArray(cell.components)) {
+                            initializeComponentValues(cell.components, values);
+                        }
+                    });
                 });
             }
             // Handle nested components in datagrid entries
@@ -5428,11 +5438,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     extractNotesAndAttachments(comp.children);
                 if (comp.cells && Array.isArray(comp.cells))
                     comp.cells.forEach((row) => {
-                        if (Array.isArray(row))
-                            row.forEach((cell) => {
-                                if (cell && cell.components)
-                                    extractNotesAndAttachments(cell.components);
-                            });
+                        normalizeTableRow(row).forEach((cell) => {
+                            if (cell && cell.components)
+                                extractNotesAndAttachments(cell.components);
+                        });
                     });
                 if (comp.entries)
                     comp.entries.forEach((entry) => {
@@ -5471,8 +5480,9 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 }
                 if (validatedComponent.cells && Array.isArray(validatedComponent.cells)) {
                     validatedComponent.cells = validatedComponent.cells.map((row) => {
-                        if (Array.isArray(row)) {
-                            return row.map((cell) => {
+                        const normalizedRow = normalizeTableRow(row);
+                        if (normalizedRow.length > 0) {
+                            return normalizedRow.map((cell) => {
                                 if (cell && cell.components && Array.isArray(cell.components)) {
                                     return {
                                         ...cell,
@@ -5619,13 +5629,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 if (component.name === 'table' && component.cells) {
                     return {
                         ...component,
-                        cells: component.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
+                        cells: component.cells.map((row) => normalizeTableRow(row).map((cell) => {
                             const updatedCell = { ...cell };
                             if (updatedCell.components) {
                                 updatedCell.components = updateComponentValue(updatedCell.components);
                             }
                             return updatedCell;
-                        }) : row)
+                        }))
                     };
                 }
                 if (component.name === 'datagrid' && component.entries) {
@@ -6232,13 +6242,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     updatedComponent.children = updateComponentValues(updatedComponent.children);
                 }
                 if (updatedComponent.name === 'table' && updatedComponent.cells) {
-                    updatedComponent.cells = updatedComponent.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
+                    updatedComponent.cells = updatedComponent.cells.map((row) => normalizeTableRow(row).map((cell) => {
                         const updatedCell = { ...cell };
                         if (updatedCell.components) {
                             updatedCell.components = updateComponentValues(updatedCell.components);
                         }
                         return updatedCell;
-                    }) : row);
+                    }));
                 }
                 if (updatedComponent.name === 'datagrid' && updatedComponent.entries) {
                     updatedComponent.entries = updatedComponent.entries.map((entry) => {
@@ -6421,7 +6431,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             // Handle notes change for table cell components
                             const updatedComponents = localFormComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
+                                    const updatedCells = comp.cells.map((row) => normalizeTableRow(row).map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
                                                 if (cellComp.id === componentId) {
@@ -6438,7 +6448,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                             return { ...cell, components: updatedCellComponents };
                                         }
                                         return cell;
-                                    }) : row);
+                                    }));
                                     return { ...comp, cells: updatedCells };
                                 }
                                 return comp;
@@ -6448,7 +6458,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             // Handle attachment change for table cell components
                             const updatedComponents = localFormComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
+                                    const updatedCells = comp.cells.map((row) => normalizeTableRow(row).map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
                                                 if (cellComp.id === componentId) {
@@ -6465,7 +6475,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                             return { ...cell, components: updatedCellComponents };
                                         }
                                         return cell;
-                                    }) : row);
+                                    }));
                                     return { ...comp, cells: updatedCells };
                                 }
                                 return comp;
@@ -6542,6 +6552,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                 }
                                 return comp;
                             });
+                            // CRITICAL: Update local state immediately so new entries render without Angular round-trip
+                            setLocalFormComponents(updatedComponents);
                             onFormDataChange?.(updatedComponents);
                             // Also update formValues for nested components
                             if (change.value.entries && Array.isArray(change.value.entries)) {
@@ -6771,6 +6783,26 @@ const DfFormComments = ({ comment = '', onSave, placeholder = 'Enter your reason
     return (jsxs("div", { className: `df-form-comments ${className}`, children: [jsxs("div", { className: "df-form-comments__header", children: [jsx("h3", { className: "df-form-comments__title", children: "Comments" }), jsx("button", { className: "df-form-comments__toggle", type: "button", onClick: toggleComments, "aria-expanded": isExpanded, "aria-label": "Toggle comments section", disabled: disabled, children: isExpanded ? (jsx("span", { className: "df-form-comments__toggle-icon", children: "\u25BC" })) : (jsx("span", { className: "df-form-comments__toggle-icon", children: "\u25B6" })) })] }), jsx("div", { className: `df-form-comments__content ${isExpanded ? 'df-form-comments__content--expanded' : ''}`, children: jsx("div", { className: "df-form-comments__input-container", children: jsx("div", { className: "df-form-comments__input-line", children: jsx("input", { type: "text", id: "comment-input", className: "df-form-comments__input", value: currentComment, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, placeholder: placeholder, disabled: disabled }) }) }) })] }));
 };
 
+// Normalize a row from the API format (object with numeric keys) into a proper TableCell array.
+// The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...].
+const normalizeRow = (row) => {
+    if (Array.isArray(row))
+        return row;
+    if (row && typeof row === 'object') {
+        // Convert object with numeric keys to array, sorted by key
+        const keys = Object.keys(row).filter(k => !isNaN(Number(k))).sort((a, b) => Number(a) - Number(b));
+        if (keys.length > 0) {
+            return keys.map(k => row[k]);
+        }
+    }
+    return [];
+};
+// Normalize the entire cells structure from API format to TableCell[][]
+const normalizeCells = (cells) => {
+    if (!cells || !Array.isArray(cells))
+        return [];
+    return cells.map(normalizeRow);
+};
 // Function to ensure table cell components have proper IDs
 const ensureComponentHasId = (component) => {
     if (!component.id) {
@@ -6855,19 +6887,22 @@ 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
+    // CRITICAL: Normalize cells from API format (object with numeric keys) to proper 2D array
+    // The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...]
+    const normalizedCells = useMemo(() => normalizeCells(properties.cells), [properties.cells]);
     // Check if table has any components in any cells
-    const hasAnyComponents = properties.cells?.some((row) => Array.isArray(row) && row.some((cell) => cell.components && cell.components.length > 0)) || false;
+    const hasAnyComponents = normalizedCells.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
     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 || [];
+        const currentCells = normalizedCells;
         // 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);
+            (currentCells.length > 0 && currentCells[0].length !== currentColumns);
         if (needsUpdate) {
             const newCells = [];
             for (let row = 0; row < currentRows; row++) {
@@ -6876,7 +6911,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                     const cellId = `cell-${row}-${col}`;
                     // Try to preserve existing components if the cell exists
                     let existingComponents = [];
-                    if (Array.isArray(currentCells[row]) && currentCells[row][col]) {
+                    if (currentCells[row] && currentCells[row][col]) {
                         existingComponents = (currentCells[row][col].components || []).map(ensureComponentHasId);
                     }
                     rowCells.push({
@@ -6894,7 +6929,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                 value: { ...properties, cells: newCells }
             });
         }
-    }, [properties.table?.rows, properties.table?.columns, properties.basic?.rows, properties.basic?.columns, properties.cells?.length, id, onValueChange]);
+    }, [properties.table?.rows, properties.table?.columns, properties.basic?.rows, properties.basic?.columns, normalizedCells, id, onValueChange]);
     const handleTableClick = useCallback((event) => {
         event.stopPropagation();
         onSelect?.();
@@ -6911,7 +6946,7 @@ 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) => Array.isArray(row) ? row.map((cell) => {
+        const updatedCells = normalizedCells.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 {
@@ -6920,7 +6955,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                 };
             }
             return cell;
-        }) : row);
+        }));
         // Update the table with the modified cells
         if (onValueChange) {
             onValueChange({
@@ -6930,13 +6965,13 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
         }
         // 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]);
+    }, [onComponentDelete, normalizedCells, 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
     const cellsWithIds = useMemo(() => {
-        if (!properties.cells)
+        if (normalizedCells.length === 0)
             return [];
-        return properties.cells.map((row, rowIndex) => Array.isArray(row) ? row.map((cell, cellIndex) => ({
+        return normalizedCells.map((row, rowIndex) => row.map((cell, cellIndex) => ({
             ...cell,
             components: (cell.components && Array.isArray(cell.components))
                 ? cell.components.map((comp, compIndex) => {
@@ -6955,8 +6990,8 @@ 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(() => {