df-ae-forms-package 1.0.99 → 1.1.1

package/dist/index.js

@@ -4494,7 +4494,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     let entryComponent = entry.components?.[componentIndex];
                                     if (!entryComponent) {
                                         // Use entry.id (which is unique) instead of entryIndex to prevent data collisions
-                                        const uniqueId = `${templateComponent.id}-${entry.id}-${componentIndex}`;
+                                        const uniqueId = `${templateComponent.id || 'comp'}-${entry.id}-${componentIndex}`;
                                         entryComponent = {
                                             ...templateComponent,
                                             id: uniqueId,
@@ -4507,7 +4507,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     else {
                                         entryComponent = {
                                             ...entryComponent,
-                                            id: entryComponent.id,
+                                            id: entryComponent.id || `${templateComponent.id || 'comp'}-${entry.id}-${componentIndex}`,
                                             basic: {
                                                 ...entryComponent.basic,
                                                 showLabel: columnView // Show label in column view
@@ -4631,7 +4631,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     comp.basic?.label === templateComponent.basic?.label);
                             }
                             if (!entryComponent) {
-                                const uniqueId = `${templateComponent.id}-${entry.id}-${componentIndex}`;
+                                const uniqueId = `${templateComponent.id || 'comp'}-${entry.id}-${componentIndex}`;
                                 entryComponent = {
                                     ...templateComponent,
                                     id: uniqueId,
@@ -4644,7 +4644,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                             else {
                                 entryComponent = {
                                     ...entryComponent,
-                                    id: entryComponent.id,
+                                    id: entryComponent.id || `${templateComponent.id || 'comp'}-${entry.id}-${componentIndex}`,
                                     basic: {
                                         ...entryComponent.basic,
                                         showLabel: columnView // Show label in column view, hide in grid view
@@ -4713,8 +4713,9 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
     const [isCollapsed, setIsCollapsed] = React.useState(false);
     const hasInitialized = React.useRef(false);
     // Get all components in the grid and sanitize them to ensure no data leaks into templates
-    let gridComponents = (properties.templateComponents || []).map(comp => ({
+    let gridComponents = (properties.templateComponents || []).map((comp, index) => ({
         ...comp,
+        id: comp.id || `${id}-template-${index}`, // CRITICAL: Ensure template components have stable IDs
         basic: {
             ...comp.basic,
             // Use an empty string instead of undefined to satisfy component typing
@@ -4725,9 +4726,10 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
     const dataEntries = properties.entries || [];
     // Fallback: If no template components but we have entries, extract template from first entry
     if (gridComponents.length === 0 && dataEntries.length > 0 && dataEntries[0].components) {
-        gridComponents = dataEntries[0].components.map((comp) => ({
+        gridComponents = dataEntries[0].components.map((comp, index) => ({
             ...comp,
-            id: comp.id?.replace(/-entry-\d+$/, '') || comp.id, // Remove entry suffix for template
+            // Remove entry suffix for template, use stable ID if missing
+            id: comp.id?.replace(/-entry-.*$/, '') || `${id}-template-${index}`,
             basic: {
                 ...comp.basic,
                 // Clear any data values while keeping types happy
@@ -4795,12 +4797,9 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                     // Check if entry is missing any template components or if existing components need updates
                     return gridComponents.some((templateComp, componentIndex) => {
                         const existingComponent = entry.components?.[componentIndex];
-                        if (!existingComponent) {
-                            return true; // Missing component at this index
+                        if (!existingComponent || !existingComponent.id) {
+                            return true; // Missing component or missing ID at this index
                         }
-                        // We don't check for ID matches here anymore
-                        // const expectedId = `${templateComp.id}-entry-${entry.index}-${componentIndex}`
-                        // const hasProperId = existingComponent.id === expectedId
                         // Check if existing component needs to be updated with new template properties
                         // Compare key properties that should be synced
                         const needsPropertyUpdate = JSON.stringify(existingComponent.basic?.options) !== JSON.stringify(templateComp.basic?.options) ||
@@ -4808,7 +4807,6 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                             existingComponent.basic?.defaultValue !== templateComp.basic?.defaultValue ||
                             existingComponent.basic?.label !== templateComp.basic?.label ||
                             existingComponent.validation?.required !== templateComp.validation?.required;
-                        // We do not check for ID mismatch anymore as we want to preserve unique IDs
                         return needsPropertyUpdate;
                     });
                 });
@@ -4829,7 +4827,8 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                                 // Update existing component with new template properties while ensuring unique ID and preserving form values
                                 const updatedComponent = {
                                     ...templateComp,
-                                    id: existingComponent.id, // Preserve existing ID !!
+                                    // Preserve existing ID or generate one if missing
+                                    id: existingComponent.id || `${templateComp.id}-${entry.id}-${componentIndex}`,
                                     basic: {
                                         ...templateComp.basic,
                                         showLabel: false, // Hide label in datagrid cells
@@ -5463,7 +5462,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             });
         };
         // Validate component IDs for uniqueness without mutating original props
-        const getValidatedComponents = (components) => {
+        const getValidatedComponents = (components, parentId) => {
             return components.map((component, index) => {
                 let validatedComponent = { ...component };
                 // Ensure component has an ID
@@ -5472,33 +5471,42 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     const name = validatedComponent.name || 'component';
                     const label = validatedComponent.basic?.label || '';
                     const safeLabel = label.replace(/[^a-zA-Z0-9]/g, '').toLowerCase().substring(0, 10);
-                    // Generate a unique ID
-                    validatedComponent.id = `${name}-${safeLabel || 'gen'}-${Date.now()}-${Math.random().toString(36).substr(2, 6)}-${index}`;
+                    // Generate a stable unique ID if parentId is provided, otherwise fallback to semi-stable
+                    if (parentId) {
+                        validatedComponent.id = `${parentId}-${name}-${index}`;
+                    }
+                    else {
+                        // For root components, use label if available for stability
+                        const labelPart = safeLabel ? `-${safeLabel}` : '';
+                        validatedComponent.id = `${name}${labelPart}-${index}`;
+                    }
                     console.warn(`[DfFormPreview] Assigned missing ID: ${validatedComponent.id}`);
                 }
                 else {
                     // Check for duplicates
                     if (seenIds.has(validatedComponent.id)) {
                         console.error(`[DfFormPreview] Duplicate component ID detected: ${validatedComponent.id}`);
-                        // Generate a unique ID for duplicate
-                        validatedComponent.id = `${validatedComponent.id}-duplicate-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                        // Generate a unique ID for duplicate - using index to keep it somewhat stable
+                        validatedComponent.id = `${validatedComponent.id}-dup-${index}`;
                         console.warn(`[DfFormPreview] Generated new unique ID: ${validatedComponent.id}`);
                     }
                 }
                 seenIds.add(validatedComponent.id);
                 // Recursively validate nested components
                 if (validatedComponent.children && Array.isArray(validatedComponent.children)) {
-                    validatedComponent.children = getValidatedComponents(validatedComponent.children);
+                    validatedComponent.children = getValidatedComponents(validatedComponent.children, validatedComponent.id);
                 }
                 if (validatedComponent.cells && Array.isArray(validatedComponent.cells)) {
-                    validatedComponent.cells = validatedComponent.cells.map((row) => {
+                    validatedComponent.cells = validatedComponent.cells.map((row, rowIndex) => {
                         const normalizedRow = normalizeTableRow(row);
                         if (normalizedRow.length > 0) {
-                            return normalizedRow.map((cell) => {
+                            return normalizedRow.map((cell, cellIndex) => {
                                 if (cell && cell.components && Array.isArray(cell.components)) {
+                                    // Stable ID for table cells: tableId-row-X-cell-Y
+                                    const cellContextId = `${validatedComponent.id}-row-${rowIndex}-cell-${cellIndex}`;
                                     return {
                                         ...cell,
-                                        components: getValidatedComponents(cell.components)
+                                        components: getValidatedComponents(cell.components, cellContextId)
                                     };
                                 }
                                 return cell;
@@ -5510,9 +5518,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 if (validatedComponent.entries && Array.isArray(validatedComponent.entries)) {
                     validatedComponent.entries = validatedComponent.entries.map((entry) => {
                         if (entry && entry.components && Array.isArray(entry.components)) {
+                            // Stable ID for datagrid entries: datagridId-entryId or using entry.id
                             return {
                                 ...entry,
-                                components: getValidatedComponents(entry.components)
+                                components: getValidatedComponents(entry.components, entry.id || `${validatedComponent.id}-entry-${entry.index}`)
                             };
                         }
                         return entry;