df-ae-forms-package 1.0.86 → 1.0.88

package/dist/index.esm.js

@@ -4476,7 +4476,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis'
-                                }, children: component.basic?.label || `Column ${index + 1}` }, `header-${component.id}`))) })), dataEntries.length > 0 ? (dataEntries.map((entry, entryIndex) => (jsxs("div", { className: "table-row", style: {
+                                }, children: component.basic?.label || `Column ${index + 1}` }, `header-${component.id || index}`))) })), dataEntries.length > 0 ? (dataEntries.map((entry, entryIndex) => (jsxs("div", { className: "table-row", style: {
                                 // Use flex column for column view, grid for row view
                                 display: columnView ? 'flex' : 'grid',
                                 flexDirection: columnView ? 'column' : 'row',
@@ -5420,11 +5420,14 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 // Recurse
                 if (comp.children)
                     extractNotesAndAttachments(comp.children);
-                if (comp.cells)
-                    comp.cells.forEach((row) => row.forEach((cell) => {
-                        if (cell.components)
-                            extractNotesAndAttachments(cell.components);
-                    }));
+                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);
+                            });
+                    });
                 if (comp.entries)
                     comp.entries.forEach((entry) => {
                         if (entry.components)
@@ -5610,13 +5613,13 @@ 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) => Array.isArray(row) ? row.map((cell) => {
                             const updatedCell = { ...cell };
                             if (updatedCell.components) {
                                 updatedCell.components = updateComponentValue(updatedCell.components);
                             }
                             return updatedCell;
-                        }))
+                        }) : row)
                     };
                 }
                 if (component.name === 'datagrid' && component.entries) {
@@ -6220,13 +6223,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     updatedComponent.children = updateComponentValues(updatedComponent.children);
                 }
                 if (updatedComponent.name === 'table' && updatedComponent.cells) {
-                    updatedComponent.cells = updatedComponent.cells.map((row) => row.map((cell) => {
+                    updatedComponent.cells = updatedComponent.cells.map((row) => Array.isArray(row) ? 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) => {
@@ -6407,7 +6410,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             // Handle notes change for table cell components
                             const updatedComponents = formComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updatedCells = comp.cells.map((row) => row.map((cell) => {
+                                    const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
                                                 if (cellComp.id === componentId) {
@@ -6424,7 +6427,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                             return { ...cell, components: updatedCellComponents };
                                         }
                                         return cell;
-                                    }));
+                                    }) : row);
                                     return { ...comp, cells: updatedCells };
                                 }
                                 return comp;
@@ -6434,7 +6437,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             // Handle attachment change for table cell components
                             const updatedComponents = formComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updatedCells = comp.cells.map((row) => row.map((cell) => {
+                                    const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
                                                 if (cellComp.id === componentId) {
@@ -6451,7 +6454,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                             return { ...cell, components: updatedCellComponents };
                                         }
                                         return cell;
-                                    }));
+                                    }) : row);
                                     return { ...comp, cells: updatedCells };
                                 }
                                 return comp;
@@ -6846,7 +6849,7 @@ 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
     // 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 = properties.cells?.some((row) => Array.isArray(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(() => {
@@ -6855,10 +6858,9 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
         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);
+            (currentCells.length > 0 && Array.isArray(currentCells[0]) && currentCells[0].length !== currentColumns);
         if (needsUpdate) {
             const newCells = [];
             for (let row = 0; row < currentRows; row++) {
@@ -6867,7 +6869,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 (currentCells[row] && currentCells[row][col]) {
+                    if (Array.isArray(currentCells[row]) && currentCells[row][col]) {
                         existingComponents = (currentCells[row][col].components || []).map(ensureComponentHasId);
                     }
                     rowCells.push({
@@ -6885,7 +6887,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]); // Watch rows/columns changes and cells length for initial init
+    }, [properties.table?.rows, properties.table?.columns, properties.basic?.rows, properties.basic?.columns, properties.cells?.length, id, onValueChange]);
     const handleTableClick = useCallback((event) => {
         event.stopPropagation();
         onSelect?.();
@@ -6902,16 +6904,16 @@ 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 = properties.cells.map((row) => Array.isArray(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;
-        }));
+        }) : row);
         // Update the table with the modified cells
         if (onValueChange) {
             onValueChange({
@@ -6927,7 +6929,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     const cellsWithIds = useMemo(() => {
         if (!properties.cells)
             return [];
-        return properties.cells.map((row, rowIndex) => row.map((cell, cellIndex) => ({
+        return properties.cells.map((row, rowIndex) => Array.isArray(row) ? row.map((cell, cellIndex) => ({
             ...cell,
             components: (cell.components && Array.isArray(cell.components))
                 ? cell.components.map((comp, compIndex) => {
@@ -6946,7 +6948,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                     };
                 })
                 : []
-        })));
+        })) : []);
     }, [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
@@ -6957,10 +6959,12 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     // Always defined to avoid conditional hook calls (React hooks rule)
     const fallbackRenderComponent = 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);
@@ -6992,18 +6996,21 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
             case 'textarea':
                 return 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 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 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 || []
@@ -7025,6 +7032,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
             case 'datagrid':
                 return (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 || []