df-ae-forms-package 1.0.79 → 1.0.81

package/dist/index.d.ts

@@ -785,6 +785,7 @@ interface DfFormTableProps {
     };
     onCreateIssue?: (issueData: any, attachments: File[]) => Promise<any>;
     onUpdateIssue?: (issueId: string, updateData: any) => Promise<void>;
+    shouldShowComponent?: (id: string) => boolean;
 }
 declare const DfFormTable: React.FC<DfFormTableProps>;
 

package/dist/index.esm.js

@@ -6017,24 +6017,16 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }
                 }
             }
-            // Handle nested components in table cells
+            // Handle nested components in table cells (2D array: row → cell → components)
             if (component.cells && Array.isArray(component.cells)) {
-                component.cells.forEach((rowOrCell, _rowIndex) => {
-                    // Handle 2D array (standard)
-                    if (Array.isArray(rowOrCell)) {
-                        rowOrCell.forEach((cell, _cellIndex) => {
+                component.cells.forEach((row) => {
+                    if (Array.isArray(row)) {
+                        row.forEach((cell) => {
                             if (cell && cell.components && Array.isArray(cell.components)) {
                                 initializeComponentValues(cell.components, values);
                             }
                         });
                     }
-                    // Handle 1D array (flat) structure
-                    else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
-                        const cell = rowOrCell;
-                        if (cell && cell.components && Array.isArray(cell.components)) {
-                            initializeComponentValues(cell.components, values);
-                        }
-                    }
                 });
             }
             // Handle nested components in datagrid entries
@@ -6146,20 +6138,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     validatedComponent.children = getValidatedComponents(validatedComponent.children);
                 }
                 if (validatedComponent.cells && Array.isArray(validatedComponent.cells)) {
-                    validatedComponent.cells = validatedComponent.cells.map((row) => {
-                        if (Array.isArray(row)) {
-                            return row.map((cell) => {
-                                if (cell && cell.components && Array.isArray(cell.components)) {
-                                    return {
-                                        ...cell,
-                                        components: getValidatedComponents(cell.components)
-                                    };
-                                }
-                                return cell;
-                            });
-                        }
-                        return row;
-                    });
+                    validatedComponent.cells = validatedComponent.cells.map((row) => row.map((cell) => ({
+                        ...cell,
+                        components: cell.components ? getValidatedComponents(cell.components) : []
+                    })));
                 }
                 if (validatedComponent.entries && Array.isArray(validatedComponent.entries)) {
                     validatedComponent.entries = validatedComponent.entries.map((entry) => {
@@ -6239,24 +6221,16 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         visibility[component.basic.label] = true;
                 }
             }
-            // Handle nested components in table cells
+            // Handle nested components in table cells (2D: row → cell → components)
             if (component.cells && Array.isArray(component.cells)) {
-                component.cells.forEach((rowOrCell) => {
-                    // Handle 2D array (standard)
-                    if (Array.isArray(rowOrCell)) {
-                        rowOrCell.forEach((cell) => {
+                component.cells.forEach((row) => {
+                    if (Array.isArray(row)) {
+                        row.forEach((cell) => {
                             if (cell.components && Array.isArray(cell.components)) {
                                 evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
                             }
                         });
                     }
-                    // Handle 1D array (flat) structure
-                    else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
-                        const cell = rowOrCell;
-                        if (cell.components && Array.isArray(cell.components)) {
-                            evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
-                        }
-                    }
                 });
             }
             // Handle nested components in datagrid entries
@@ -7186,86 +7160,46 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     } }));
             case 'table':
                 return (jsx(React.Suspense, { fallback: jsx("div", { children: "Loading table..." }), children: 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) => {
-                            // Handle notes change for table cell components
                             const updatedComponents = formComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updatedCells = comp.cells.map((rowOrCell) => {
-                                        if (Array.isArray(rowOrCell)) {
-                                            return rowOrCell.map((cell) => {
-                                                if (cell.components) {
-                                                    const updatedCellComponents = cell.components.map((cellComp) => {
-                                                        if (cellComp.id === componentId) {
-                                                            return { ...cellComp, basic: { ...cellComp.basic, notes } };
-                                                        }
-                                                        return cellComp;
-                                                    });
-                                                    return { ...cell, components: updatedCellComponents };
-                                                }
-                                                return cell;
-                                            });
-                                        }
-                                        else {
-                                            const cell = rowOrCell;
-                                            if (cell.components) {
-                                                const updatedCellComponents = cell.components.map((cellComp) => {
-                                                    if (cellComp.id === componentId) {
-                                                        return { ...cellComp, basic: { ...cellComp.basic, notes } };
-                                                    }
-                                                    return cellComp;
-                                                });
-                                                return { ...cell, components: updatedCellComponents };
-                                            }
-                                            return cell;
+                                    const updatedCells = comp.cells.map((row) => row.map((cell) => {
+                                        if (cell.components) {
+                                            return {
+                                                ...cell,
+                                                components: cell.components.map((cellComp) => cellComp.id === componentId
+                                                    ? { ...cellComp, basic: { ...cellComp.basic, notes } }
+                                                    : cellComp)
+                                            };
                                         }
-                                    });
+                                        return cell;
+                                    }));
                                     return { ...comp, cells: updatedCells };
                                 }
                                 return comp;
                             });
                             onFormDataChange?.(updatedComponents);
                         }, onAttachmentChange: (componentId, attachments) => {
-                            // Handle attachment change for table cell components
                             const updatedComponents = formComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updatedCells = comp.cells.map((rowOrCell) => {
-                                        if (Array.isArray(rowOrCell)) {
-                                            return rowOrCell.map((cell) => {
-                                                if (cell.components) {
-                                                    const updatedCellComponents = cell.components.map((cellComp) => {
-                                                        if (cellComp.id === componentId) {
-                                                            return { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } };
-                                                        }
-                                                        return cellComp;
-                                                    });
-                                                    return { ...cell, components: updatedCellComponents };
-                                                }
-                                                return cell;
-                                            });
-                                        }
-                                        else {
-                                            const cell = rowOrCell;
-                                            if (cell.components) {
-                                                const updatedCellComponents = cell.components.map((cellComp) => {
-                                                    if (cellComp.id === componentId) {
-                                                        return { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } };
-                                                    }
-                                                    return cellComp;
-                                                });
-                                                return { ...cell, components: updatedCellComponents };
-                                            }
-                                            return cell;
+                                    const updatedCells = comp.cells.map((row) => row.map((cell) => {
+                                        if (cell.components) {
+                                            return {
+                                                ...cell,
+                                                components: cell.components.map((cellComp) => cellComp.id === componentId
+                                                    ? { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } }
+                                                    : cellComp)
+                                            };
                                         }
-                                    });
+                                        return cell;
+                                    }));
                                     return { ...comp, cells: updatedCells };
                                 }
                                 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);
-                        } }) }));
+                        }, shouldShowComponent: shouldShowComponent }) }));
             case 'datagrid':
                 return (jsx(DfFormDataGrid, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: (componentId, notes) => {
                         handleComponentNotesChange(componentId, notes);
@@ -7575,12 +7509,13 @@ const ensureComponentHasId = (component) => {
     }
     return component;
 };
-const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
+const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
     const formValue = formData[component.id];
+    const isVisible = shouldShowComponent ? shouldShowComponent(component.id) : true;
     // Check if component has notes or attachments for submission view
     const hasSubmissionData = mode === 'preview' && ((component.basic?.notes && component.basic.notes.trim().length > 0) ||
         (component.basic?.attachments && Array.isArray(component.basic.attachments) && component.basic.attachments.length > 0));
-    return (jsxs("div", { className: "simple-table-component", children: [renderFormComponent(component), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsx(ComponentActionFeatures, { component: component, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(component.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(component.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue })), hasSubmissionData && (jsx(ComponentSubmissionActions, { component: component }))] }));
+    return (jsxs("div", { className: `simple-table-component ${(!isVisible && mode !== 'edit') ? 'conditionally-hidden' : ''}`, style: { display: (isVisible || mode === 'edit') ? undefined : 'none' }, children: [renderFormComponent(component), mode === 'test' && !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsx(ComponentActionFeatures, { component: component, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(component.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(component.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue })), hasSubmissionData && (jsx(ComponentSubmissionActions, { component: component }))] }));
 };
 const DraggableTableComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, }) => {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging, isSorting, } = useSortable({
@@ -7601,7 +7536,7 @@ const DraggableTableComponent = ({ component, selectedComponent, mode, onCompone
                             onComponentDelete(component, e);
                         }, type: "button", title: "Delete Component", children: jsx(Trash2, { size: 12 }) })] }))] }));
 };
-const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
+const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
     const dropZoneId = `table-cell-${tableId}-${cell.row}-${cell.column}`;
     const { setNodeRef, isOver } = useDroppable({
         id: dropZoneId,
@@ -7636,7 +7571,7 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
             cell.components.map((component) => {
                 // Only ensure ID if it's truly missing - don't regenerate existing IDs
                 const componentWithId = component.id ? component : ensureComponentHasId(component);
-                return (jsx(SimpleTableComponent, { component: componentWithId, mode: mode, renderFormComponent: renderFormComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, componentWithId.id));
+                return (jsx(SimpleTableComponent, { component: componentWithId, mode: mode, renderFormComponent: renderFormComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, shouldShowComponent: shouldShowComponent }, componentWithId.id));
             }))) : (
             // Only show drop zone content in edit mode
             mode === 'edit' ? (jsx("div", { className: "empty-cell-placeholder", children: jsxs("div", { className: "cell-info", children: [jsx("span", { className: "drop-zone-text", children: "Drag and Drop a form component" }), jsxs("span", { className: "cell-coordinates", children: ["Cell (", cell.row + 1, ", ", cell.column + 1, ")"] })] }) })) : (
@@ -7647,37 +7582,13 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
                     visibility: 'hidden' // Hide content but maintain space
                 }, children: "\u00A0" }))) }) }));
 };
-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]);
+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] = useState(false);
+    // By the time cells arrive here, DfFormPreview.getValidatedComponents has already
+    // normalized them from 1D flat (API format) to proper 2D arrays.
+    // So we can use properties.cells directly, exactly like the website version.
     // Check if table has any components in any cells
-    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(() => {
-        // Skip updates to prevent flickering - cells are already initialized
-        return;
-    }, [properties.table?.rows, properties.table?.columns, properties.basic?.rows, properties.basic?.columns, properties.cells, id, onValueChange]); // Watch for rows/columns changes
+    const hasAnyComponents = properties.cells?.some((row) => Array.isArray(row) && row.some((cell) => cell && cell.components && cell.components.length > 0)) || false;
     const handleTableClick = useCallback((event) => {
         event.stopPropagation();
         onSelect?.();
@@ -7693,54 +7604,29 @@ 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 = normalizedCells.map(row => (Array.isArray(row) ? row : []).map(cell => {
+        const updatedCells = properties.cells.map((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
-                };
+                return { ...cell, components: cell.components.filter((comp) => comp.id !== component.id) };
             }
             return cell;
         }));
-        // Update the table with the modified cells
-        if (onValueChange) {
-            onValueChange({
-                id,
-                value: { ...properties, cells: updatedCells }
-            });
-        }
-        // Don't call parent delete handler for table cell components
-        // The parent delete handler is for deleting entire fields, not components within table cells
+        onValueChange?.({ id, value: { ...properties, cells: updatedCells } });
     }, [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 (!normalizedCells || normalizedCells.length === 0)
-            return [];
-        return normalizedCells.map((row, rowIndex) => (Array.isArray(row) ? row : []).map((cell, cellIndex) => ({
+    // Ensure all table cell components have IDs (matching website ensureTableCellComponentsHaveIds)
+    const ensureTableCellComponentsHaveIds = (cells) => {
+        return cells.map((row) => (Array.isArray(row) ? row : []).map((cell) => ({
             ...cell,
-            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
-                    if (comp.id && typeof comp.id === 'string' && comp.id.trim() !== '') {
-                        // ID already exists - keep it as is
-                        return comp;
-                    }
-                    // Generate unique ID that includes table ID, row, cell, and component index
-                    // This ensures no conflicts with other components
-                    const uniqueId = `${comp.name || 'component'}-table-${id}-row-${rowIndex}-cell-${cellIndex}-comp-${compIndex}`;
-                    return {
-                        ...comp,
-                        id: uniqueId
-                    };
-                })
-                : []
+            components: (cell?.components || []).map((comp) => {
+                if (!comp.id || comp.id.trim() === '') {
+                    return { ...comp, id: `table-cell-${comp.name}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` };
+                }
+                return comp;
+            })
         })));
-    }, [normalizedCells, id]); // Only recalculate if cells or table ID changes
+    };
+    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(() => {
@@ -7868,7 +7754,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                                                 fontSize: '14px',
                                                 textAlign: 'center'
                                             }, children: columnName }, `header-${colIndex}`));
-                                    }) }) })), jsx("tbody", { children: cellsWithIds.filter(row => Array.isArray(row) && row.length > 0).map((row, rowIndex) => (jsx("tr", { className: "table-row", children: row.filter(cell => cell != null).map((cell) => (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 }, cell.id))) }, rowIndex))) })] })] }))] }));
+                                    }) }) })), jsx("tbody", { children: cellsWithIds.filter(row => Array.isArray(row) && row.length > 0).map((row, rowIndex) => (jsx("tr", { className: "table-row", children: row.filter(cell => cell != null).map((cell) => (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({