df-ae-forms-package 1.0.99 → 1.1.2

package/dist/index.esm.js

@@ -4241,6 +4241,33 @@ const ComponentSubmissionActions = ({ component }) => {
     return (jsx("div", { className: "component-submission-actions", children: jsxs("div", { className: "actions-content", children: [hasNotes && (jsx("div", { className: "notes-summary-section", children: jsxs("div", { className: "notes-full-text", children: [jsx("span", { className: "notes-label", children: "Notes:" }), " ", notes] }) })), hasAttachments && (jsx("div", { className: "attachments-section", children: jsx(SubmissionAttachmentThumbnails, { attachments: attachments }) }))] }) }));
 };
 
+// Helper to ensure an ID is a stable string, handling MongoDB-style object IDs
+// Helper to ensure an ID is a stable string, handling MongoDB-style object IDs
+function ensureStringId$2(id) {
+    if (!id)
+        return '';
+    if (typeof id === 'string') {
+        if (id.includes('[object Object]'))
+            return '';
+        return id;
+    }
+    if (typeof id === 'object' && id !== null) {
+        if (id.$oid)
+            return String(id.$oid);
+        if (id._id)
+            return ensureStringId$2(id._id);
+        try {
+            const str = id.toString();
+            if (str && str !== '[object Object]')
+                return str;
+            return JSON.stringify(id);
+        }
+        catch (e) {
+            return 'id-error';
+        }
+    }
+    return String(id);
+}
 const DraggableGridComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, shouldShowComponent }) => {
     const formValue = formData[component.id];
     const isVisible = shouldShowComponent ? shouldShowComponent(component.id) : true;
@@ -4492,7 +4519,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 = `${ensureStringId$2(templateComponent.id) || 'comp'}-${ensureStringId$2(entry.id)}-${componentIndex}`;
                                         entryComponent = {
                                             ...templateComponent,
                                             id: uniqueId,
@@ -4505,7 +4532,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     else {
                                         entryComponent = {
                                             ...entryComponent,
-                                            id: entryComponent.id,
+                                            id: ensureStringId$2(entryComponent.id) || `${ensureStringId$2(templateComponent.id) || 'comp'}-${ensureStringId$2(entry.id)}-${componentIndex}`,
                                             basic: {
                                                 ...entryComponent.basic,
                                                 showLabel: columnView // Show label in column view
@@ -4629,7 +4656,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     comp.basic?.label === templateComponent.basic?.label);
                             }
                             if (!entryComponent) {
-                                const uniqueId = `${templateComponent.id}-${entry.id}-${componentIndex}`;
+                                const uniqueId = `${ensureStringId$2(templateComponent.id) || 'comp'}-${ensureStringId$2(entry.id)}-${componentIndex}`;
                                 entryComponent = {
                                     ...templateComponent,
                                     id: uniqueId,
@@ -4642,7 +4669,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                             else {
                                 entryComponent = {
                                     ...entryComponent,
-                                    id: entryComponent.id,
+                                    id: ensureStringId$2(entryComponent.id) || `${ensureStringId$2(templateComponent.id) || 'comp'}-${ensureStringId$2(entry.id)}-${componentIndex}`,
                                     basic: {
                                         ...entryComponent.basic,
                                         showLabel: columnView // Show label in column view, hide in grid view
@@ -4710,9 +4737,11 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
 const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueChange, onSelect, isSelected = false, className = '', onDataGridSelect, onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, renderFormComponent, onEntryAdd, onEntryRemove, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, shouldShowComponent }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const hasInitialized = useRef(false);
+    const gridId = ensureStringId$2(id);
     // 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: ensureStringId$2(comp.id) || `${gridId}-template-${index}`, // CRITICAL: Ensure template components have stable string IDs
         basic: {
             ...comp.basic,
             // Use an empty string instead of undefined to satisfy component typing
@@ -4723,9 +4752,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: ensureStringId$2(comp.id).replace(/-entry-.*$/, '') || `${gridId}-template-${index}`,
             basic: {
                 ...comp.basic,
                 // Clear any data values while keeping types happy
@@ -4768,7 +4798,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                     index: 0,
                     components: gridComponents.map((comp, componentIndex) => ({
                         ...comp,
-                        id: `${comp.id}-${newEntryId}-${componentIndex}`,
+                        id: `${ensureStringId$2(comp.id)}-${newEntryId}-${componentIndex}`,
                         basic: {
                             ...comp.basic,
                             showLabel: false // Hide label in datagrid cells
@@ -4793,12 +4823,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) ||
@@ -4806,7 +4833,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;
                     });
                 });
@@ -4827,7 +4853,10 @@ 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 (ensure it's a string) or generate one if missing
+                                    id: (existingComponent.id && typeof existingComponent.id === 'string')
+                                        ? existingComponent.id
+                                        : `${ensureStringId$2(templateComp.id)}-${ensureStringId$2(entry.id)}-${componentIndex}`,
                                     basic: {
                                         ...templateComp.basic,
                                         showLabel: false, // Hide label in datagrid cells
@@ -4841,7 +4870,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                                 // Create new component based on template
                                 // Only for NEW components in existing entries (e.g. column added) do we generate a new ID
                                 const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
-                                const newId = `${templateComp.id}-${uniqueSuffix}-${componentIndex}`;
+                                const newId = `${ensureStringId$2(templateComp.id)}-${uniqueSuffix}-${componentIndex}`;
                                 const newComponent = {
                                     ...templateComp,
                                     id: newId,
@@ -4947,7 +4976,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             id: newEntryId,
             index: properties.entries.length,
             components: gridComponents.map((comp, componentIndex) => {
-                const componentId = `${comp.id}-${newEntryId}-${componentIndex}`;
+                const componentId = `${ensureStringId$2(comp.id)}-${newEntryId}-${componentIndex}`;
                 return {
                     ...comp,
                     // Use the unique entry ID in the component ID to prevent collisions
@@ -5311,6 +5340,37 @@ const DfFormSection = ({ id, properties, mode = 'edit', formData = {}, onValueCh
 
 // Dynamic imports to avoid circular dependencies
 const DfFormTable$1 = React.lazy(() => Promise.resolve().then(function () { return dfFormTable; }));
+// Helper to ensure an ID is a stable string, handling MongoDB-style object IDs
+// This is used globally in this file to prevent [object Object] corruption
+const ensureStringId$1 = (id) => {
+    if (!id)
+        return '';
+    if (typeof id === 'string') {
+        // If the ID is already corrupted, return empty to trigger regeneration
+        if (id.includes('[object Object]'))
+            return '';
+        return id;
+    }
+    if (typeof id === 'object' && id !== null) {
+        if (id.$oid)
+            return String(id.$oid);
+        if (id._id)
+            return ensureStringId$1(id._id);
+        // Fallback for other object structures that might be IDs
+        try {
+            // If it has a toString that isn't the default, use it
+            const str = id.toString();
+            if (str && str !== '[object Object]')
+                return str;
+            // Otherwise, use a hash or just JSON
+            return JSON.stringify(id);
+        }
+        catch (e) {
+            return 'id-error';
+        }
+    }
+    return String(id);
+};
 // Normalize a table row from API format (object with numeric keys) into a proper array.
 // The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...].
 const normalizeTableRow = (row) => {
@@ -5356,16 +5416,17 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     // Recursive function to initialize values from nested components
     const initializeComponentValues = (components, values) => {
         components.forEach(component => {
-            if (component.id) {
+            const componentId = ensureStringId$1(component.id);
+            if (componentId) {
                 // ALWAYS prioritize existing form state (values param) if it exists
-                if (values[component.id] !== undefined) ;
-                // Then check initialFormData (if we are merging it) - handled by caller usually, but safe to check
-                else if (component.basic && 'value' in component.basic && component.basic.value !== undefined && component.basic.value !== '' && component.basic.value !== null) {
-                    values[component.id] = component.basic.value;
+                if (values[componentId] !== undefined) ;
+                // Then use captured value in basic.value
+                else if (component.basic && 'value' in component.basic && component.basic.value !== undefined) {
+                    values[componentId] = component.basic.value;
                 }
-                // Then check defaultValue
-                else if (component.basic && 'defaultValue' in component.basic && component.basic.defaultValue !== undefined && component.basic.defaultValue !== '' && component.basic.defaultValue !== null) {
-                    values[component.id] = component.basic.defaultValue;
+                // Then use defaultValue
+                else if (component.basic && 'defaultValue' in component.basic && component.basic.defaultValue !== undefined) {
+                    values[componentId] = component.basic.defaultValue;
                 }
                 // Only then default to empty
                 else {
@@ -5435,12 +5496,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Helper to extract notes and attachments recursively
         const extractNotesAndAttachments = (components) => {
             components.forEach(comp => {
-                if (comp.id) {
+                const componentId = ensureStringId$1(comp.id);
+                if (componentId) {
                     if (comp.basic?.notes || comp.basic?.comments) {
-                        initialNotes[comp.id] = comp.basic?.notes || comp.basic?.comments;
+                        initialNotes[componentId] = comp.basic?.notes || comp.basic?.comments;
                     }
                     if (comp.basic?.attachments) {
-                        initialAttachments[comp.id] = comp.basic.attachments;
+                        initialAttachments[componentId] = comp.basic.attachments;
                     }
                 }
                 // Recurse
@@ -5461,42 +5523,67 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             });
         };
         // Validate component IDs for uniqueness without mutating original props
-        const getValidatedComponents = (components) => {
+        const getValidatedComponents = (components, parentId) => {
+            const parentIdStr = parentId ? ensureStringId$1(parentId) : '';
             return components.map((component, index) => {
                 let validatedComponent = { ...component };
-                // Ensure component has an ID
-                if (!validatedComponent.id || typeof validatedComponent.id !== 'string' || validatedComponent.id.trim() === '') {
+                // Ensure component has a valid string ID
+                let currentId = validatedComponent.id;
+                // CRITICAL: Reject any ID that is not a string, is empty, or contains "[object Object]"
+                let isIdValid = typeof currentId === 'string' &&
+                    currentId.trim() !== '' &&
+                    !currentId.includes('[object Object]');
+                if (!isIdValid) {
+                    // If it's an object ID (but not a corrupted string), convert it to string
+                    if (currentId && typeof currentId === 'object') {
+                        const convertedId = ensureStringId$1(currentId);
+                        if (convertedId && !convertedId.includes('[object Object]')) {
+                            validatedComponent.id = convertedId;
+                            isIdValid = true;
+                        }
+                    }
+                }
+                if (!isIdValid) {
                     // Determine a base name for the ID
                     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}`;
-                    console.warn(`[DfFormPreview] Assigned missing ID: ${validatedComponent.id}`);
+                    // Generate a stable unique ID if parentId is provided, otherwise fallback to semi-stable
+                    if (parentIdStr) {
+                        validatedComponent.id = `${parentIdStr}-${name}-${index}`;
+                    }
+                    else {
+                        // For root components, use label if available for stability
+                        const labelPart = safeLabel ? `-${safeLabel}` : '';
+                        validatedComponent.id = `${name}${labelPart}-${index}`;
+                    }
+                    console.warn(`[DfFormPreview] Fixed missing/invalid ID: ${validatedComponent.id}`);
                 }
                 else {
-                    // Check for duplicates
+                    // ID is a valid string, 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 = `${ensureStringId$1(validatedComponent.id)}-row-${rowIndex}-cell-${cellIndex}`;
                                     return {
                                         ...cell,
-                                        components: getValidatedComponents(cell.components)
+                                        components: getValidatedComponents(cell.components, cellContextId)
                                     };
                                 }
                                 return cell;
@@ -5508,9 +5595,12 @@ 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
+                            const entryId = entry.id ? ensureStringId$1(entry.id) : `${ensureStringId$1(validatedComponent.id)}-entry-${entry.index}`;
                             return {
                                 ...entry,
-                                components: getValidatedComponents(entry.components)
+                                id: entryId, // Ensure entry itself has a string ID
+                                components: getValidatedComponents(entry.components, entryId)
                             };
                         }
                         return entry;
@@ -6303,13 +6393,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     const componentIdCacheRef = useRef(new Map());
     const componentCounterRef = useRef(0);
     const renderFormComponent = (component) => {
-        // CRITICAL: Ensure component has a valid unique ID
+        // CRITICAL: Ensure component has a valid unique string ID
         // NEVER regenerate IDs - always use existing or cached ID
-        let finalComponentId;
-        if (component.id && typeof component.id === 'string' && component.id.trim() !== '') {
-            // Component already has an ID - use it (most common case)
-            finalComponentId = component.id;
-        }
+        let finalComponentId = ensureStringId$1(component.id);
+        if (finalComponentId && finalComponentId.trim() !== '') ;
         else {
             // Component is missing an ID - need to generate and cache it
             // Create a stable cache key using component properties that don't change
@@ -6795,6 +6882,32 @@ const DfFormComments = ({ comment = '', onSave, placeholder = 'Enter your reason
     return (jsxs("div", { className: `df-form-comments ${className}`, children: [jsxs("div", { className: "df-form-comments__header", children: [jsx("h3", { className: "df-form-comments__title", children: "Comments" }), jsx("button", { className: "df-form-comments__toggle", type: "button", onClick: toggleComments, "aria-expanded": isExpanded, "aria-label": "Toggle comments section", disabled: disabled, children: isExpanded ? (jsx("span", { className: "df-form-comments__toggle-icon", children: "\u25BC" })) : (jsx("span", { className: "df-form-comments__toggle-icon", children: "\u25B6" })) })] }), jsx("div", { className: `df-form-comments__content ${isExpanded ? 'df-form-comments__content--expanded' : ''}`, children: jsx("div", { className: "df-form-comments__input-container", children: jsx("div", { className: "df-form-comments__input-line", children: jsx("input", { type: "text", id: "comment-input", className: "df-form-comments__input", value: currentComment, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, placeholder: placeholder, disabled: disabled }) }) }) })] }));
 };
 
+// Helper to ensure an ID is a stable string, handling MongoDB-style object IDs
+const ensureStringId = (id) => {
+    if (!id)
+        return '';
+    if (typeof id === 'string') {
+        if (id.includes('[object Object]'))
+            return '';
+        return id;
+    }
+    if (typeof id === 'object' && id !== null) {
+        if (id.$oid)
+            return String(id.$oid);
+        if (id._id)
+            return ensureStringId(id._id);
+        try {
+            const str = id.toString();
+            if (str && str !== '[object Object]')
+                return str;
+            return JSON.stringify(id);
+        }
+        catch (e) {
+            return 'id-error';
+        }
+    }
+    return String(id);
+};
 // Normalize a row from the API format (object with numeric keys) into a proper TableCell array.
 // The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...].
 const normalizeRow = (row) => {
@@ -6989,13 +7102,15 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                 ? 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;
+                    const existingId = ensureStringId(comp.id);
+                    if (existingId) {
+                        // ID already exists and is valid - keep it but ensure it's a string
+                        return { ...comp, id: existingId };
                     }
                     // 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}`;
+                    const sanitizedTableId = ensureStringId(id);
+                    const uniqueId = `${comp.name || 'component'}-table-${sanitizedTableId}-row-${rowIndex}-cell-${cellIndex}-comp-${compIndex}`;
                     return {
                         ...comp,
                         id: uniqueId