df-ae-forms-package 1.0.87 → 1.0.89

package/dist/index.js

@@ -6408,7 +6408,9 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         return renderFormComponent(field);
                     } }));
             case 'table':
-                return (jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { children: "Loading table..." }), children: jsxRuntime.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) => {
+                return (jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { children: "Loading table..." }), children: jsxRuntime.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, renderFormComponent: (field) => {
+                            return renderFormComponent(field);
+                        }, onNotesChange: (componentId, notes) => {
                             // Handle notes change for table cell components
                             const updatedComponents = formComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
@@ -6462,10 +6464,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                 return comp;
                             });
                             onFormDataChange?.(updatedComponents);
-                        }, renderFormComponent: (field) => {
-                            // CRITICAL: Pass the field to renderFormComponent which has access to latest formValues
-                            // renderFormComponent uses formValues[field.id] internally, so it will get the correct value
-                            return renderFormComponent(field);
                         } }) }));
             case 'datagrid':
                 return (jsxRuntime.jsx(DfFormDataGrid, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: (componentId, notes) => {
@@ -6851,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] = React.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
     React.useEffect(() => {
@@ -6860,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++) {
@@ -6872,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({
@@ -6890,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 = React.useCallback((event) => {
         event.stopPropagation();
         onSelect?.();
@@ -6907,16 +6904,16 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     const handleComponentDelete = React.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({
@@ -6932,7 +6929,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     const cellsWithIds = React.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) => {
@@ -6951,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
@@ -6962,10 +6959,12 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     // Always defined to avoid conditional hook calls (React hooks rule)
     const fallbackRenderComponent = React.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);
@@ -6997,18 +6996,21 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
             case 'textarea':
                 return jsxRuntime.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 jsxRuntime.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 jsxRuntime.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 || []
@@ -7030,6 +7032,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
             case 'datagrid':
                 return (jsxRuntime.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 || []