df-ae-forms-package 1.0.71 → 1.0.73

package/dist/index.js

@@ -6247,11 +6247,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     const evaluateComponentConditionalLogic = (components, visibility, currentFormValues, fullSchema) => {
         components.forEach(component => {
             if (component.id) {
-                // Skip conditional logic for table and datagrid components - they are always visible
-                if (component.name === 'table' || component.name === 'datagrid') {
-                    visibility[component.id] = true;
-                }
-                else if (component.conditional) {
+                // Handle conditional logic for all components including table and datagrid
+                if (component.conditional) {
                     // Use the proper conditional logic service
                     const result = conditionalLogicService.evaluateConditionalLogic(component.conditional, fullSchema, currentFormValues);
                     visibility[component.id] = result.shouldShow;
@@ -6268,15 +6265,32 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     if (component.basic?.label)
                         visibility[component.basic.label] = true;
                 }
+                // Process nested components in table and datagrid regardless of parent visibility
+                if (component.name === 'table' || component.name === 'datagrid') {
+                    // Still add the parent to visibility map (as visible if no conditional logic)
+                    if (!component.conditional) {
+                        visibility[component.id] = true;
+                    }
+                }
             }
             // Handle nested components in table cells
             if (component.cells && Array.isArray(component.cells)) {
-                component.cells.forEach((row) => {
-                    row.forEach((cell) => {
+                component.cells.forEach((rowOrCell) => {
+                    // Handle 2D array (standard)
+                    if (Array.isArray(rowOrCell)) {
+                        rowOrCell.forEach((cell) => {
+                            if (cell.components && Array.isArray(cell.components)) {
+                                evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
+                            }
+                        });
+                    }
+                    // Handle 1D array (flat)
+                    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
@@ -6311,19 +6325,25 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     }, [formComponents, formValues]);
     // Check if a component should be visible based on conditional logic
     const shouldShowComponent = React.useCallback((componentId) => {
-        // Recursive find to get the component to check its type and alternate ID
-        // We need this because formComponents might only be top-level
+        // Check the visibility map first for the exact ID
+        if (componentVisibility.hasOwnProperty(componentId)) {
+            return componentVisibility[componentId] === true;
+        }
+        // If not found by exact ID, try to find the component in formComponents
+        // and check if it exists in visibility map by other identifiers (_id, label)
         const component = conditionalLogicService.findComponent(formComponents, componentId);
-        // Table and datagrid components are always visible at the root level (their contents handle logic)
-        if (component && (component.name === 'table' || component.name === 'datagrid')) {
-            return true;
+        if (component) {
+            // Check visibility by _id if available
+            if (component._id && componentVisibility.hasOwnProperty(component._id)) {
+                return componentVisibility[component._id] === true;
+            }
+            // Check visibility by label if available
+            if (component.basic?.label && componentVisibility.hasOwnProperty(component.basic.label)) {
+                return componentVisibility[component.basic.label] === true;
+            }
         }
-        // Default to visible if not explicitly hidden
-        // Check both id and _id for maximum resilience
-        const isVisible = (componentVisibility[componentId] !== false) &&
-            (!component?._id || componentVisibility[component._id] !== false) &&
-            (!component?.id || componentVisibility[component.id] !== false);
-        return isVisible;
+        // If not found in visibility map by any identifier, component should be visible by default
+        return true;
     }, [componentVisibility, formComponents]);
     // Handle form value changes and re-evaluate conditional logic
     const onFormValueChange = React.useCallback((change) => {
@@ -6400,13 +6420,28 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 if (component.name === 'table' && component.cells) {
                     return {
                         ...component,
-                        cells: component.cells.map((row) => row.map((cell) => {
-                            const updatedCell = { ...cell };
-                            if (updatedCell.components) {
-                                updatedCell.components = updateComponentValue(updatedCell.components);
+                        cells: component.cells.map((rowOrCell) => {
+                            // Handle 2D array (standard)
+                            if (Array.isArray(rowOrCell)) {
+                                return rowOrCell.map((cell) => {
+                                    const updatedCell = { ...cell };
+                                    if (updatedCell.components) {
+                                        updatedCell.components = updateComponentValue(updatedCell.components);
+                                    }
+                                    return updatedCell;
+                                });
+                            }
+                            // Handle 1D array (flat)
+                            else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
+                                const cell = rowOrCell;
+                                const updatedCell = { ...cell };
+                                if (updatedCell.components) {
+                                    updatedCell.components = updateComponentValue(updatedCell.components);
+                                }
+                                return updatedCell;
                             }
-                            return updatedCell;
-                        }))
+                            return rowOrCell;
+                        })
                     };
                 }
                 if (component.name === 'datagrid' && component.entries) {
@@ -7633,8 +7668,18 @@ 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;
+    // Check if table has any components in any cells - handle both 2D and 1D structures
+    const hasAnyComponents = properties.cells?.some((rowOrCell) => {
+        // Handle 2D array structure (each row is an array of cells)
+        if (Array.isArray(rowOrCell)) {
+            return rowOrCell.some((cell) => cell.components && cell.components.length > 0);
+        }
+        // Handle 1D array structure (each element is a cell)
+        else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
+            return rowOrCell.components && rowOrCell.components.length > 0;
+        }
+        return false;
+    }) || false;
     // Initialize and update table cells when rows/columns change
     // CRITICAL: Skip cell initialization updates to prevent flickering when user types
     React.useEffect(() => {
@@ -7656,17 +7701,34 @@ 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);
-                return {
-                    ...cell,
-                    components: filteredComponents
-                };
+        // Find and remove the component from the table cell - handle both 2D and 1D structures
+        const updatedCells = properties.cells.map((rowOrCell) => {
+            // Handle 2D array structure (each row is an array of cells)
+            if (Array.isArray(rowOrCell)) {
+                return rowOrCell.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;
+                });
             }
-            return cell;
-        }));
+            // Handle 1D array structure (each element is a cell)
+            else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
+                if (rowOrCell.components && rowOrCell.components.some((comp) => comp.id === component.id)) {
+                    const filteredComponents = rowOrCell.components.filter((comp) => comp.id !== component.id);
+                    return {
+                        ...rowOrCell,
+                        components: filteredComponents
+                    };
+                }
+                return rowOrCell;
+            }
+            return rowOrCell;
+        });
         // Update the table with the modified cells
         if (onValueChange) {
             onValueChange({
@@ -7682,26 +7744,56 @@ 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) => ({
-            ...cell,
-            components: (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
-                    };
-                })
-                : []
-        })));
+        return properties.cells.map((rowOrCell, rowIndex) => {
+            // Handle 2D array structure (each row is an array of cells)
+            if (Array.isArray(rowOrCell)) {
+                return rowOrCell.map((cell, cellIndex) => ({
+                    ...cell,
+                    components: (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
+                            };
+                        })
+                        : []
+                }));
+            }
+            // Handle 1D array structure (each element is a cell)
+            else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
+                const cell = rowOrCell;
+                return {
+                    ...cell,
+                    components: (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-0-comp-${compIndex}`;
+                            return {
+                                ...comp,
+                                id: uniqueId
+                            };
+                        })
+                        : []
+                };
+            }
+            return [];
+        });
     }, [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
@@ -7830,7 +7922,17 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                                                 fontSize: '14px',
                                                 textAlign: 'center'
                                             }, children: columnName }, `header-${colIndex}`));
-                                    }) }) })), jsxRuntime.jsx("tbody", { children: cellsWithIds.map((row, rowIndex) => (jsxRuntime.jsx("tr", { className: "table-row", children: row.map((cell) => (jsxRuntime.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))) })] })] }))] }));
+                                    }) }) })), jsxRuntime.jsx("tbody", { children: cellsWithIds.map((rowOrCell, rowIndex) => {
+                                    // Handle 2D array structure (each row is an array of cells)
+                                    if (Array.isArray(rowOrCell)) {
+                                        return (jsxRuntime.jsx("tr", { className: "table-row", children: rowOrCell.map((cell) => (jsxRuntime.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));
+                                    }
+                                    // Handle 1D array structure (each element is a cell)
+                                    else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
+                                        return (jsxRuntime.jsx("tr", { className: "table-row", children: jsxRuntime.jsx(TableCellComponent, { cell: rowOrCell, 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 }, rowOrCell.id) }, rowIndex));
+                                    }
+                                    return null;
+                                }) })] })] }))] }));
 };
 
 var dfFormTable = /*#__PURE__*/Object.freeze({