df-ae-forms-package 1.1.1 → 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 || 'comp'}-${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 || `${templateComponent.id || 'comp'}-${entry.id}-${componentIndex}`,
+                                            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 || 'comp'}-${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 || `${templateComponent.id || 'comp'}-${entry.id}-${componentIndex}`,
+                                    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,10 +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, index) => ({
         ...comp,
-        id: comp.id || `${id}-template-${index}`, // CRITICAL: Ensure template components have stable IDs
+        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
@@ -4727,7 +4755,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
         gridComponents = dataEntries[0].components.map((comp, index) => ({
             ...comp,
             // Remove entry suffix for template, use stable ID if missing
-            id: comp.id?.replace(/-entry-.*$/, '') || `${id}-template-${index}`,
+            id: ensureStringId$2(comp.id).replace(/-entry-.*$/, '') || `${gridId}-template-${index}`,
             basic: {
                 ...comp.basic,
                 // Clear any data values while keeping types happy
@@ -4770,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
@@ -4825,8 +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,
-                                    // Preserve existing ID or generate one if missing
-                                    id: existingComponent.id || `${templateComp.id}-${entry.id}-${componentIndex}`,
+                                    // 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
@@ -4840,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,
@@ -4946,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
@@ -5310,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) => {
@@ -5355,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 {
@@ -5434,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,27 +5524,43 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         };
         // Validate component IDs for uniqueness without mutating original props
         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 stable unique ID if parentId is provided, otherwise fallback to semi-stable
-                    if (parentId) {
-                        validatedComponent.id = `${parentId}-${name}-${index}`;
+                    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] Assigned missing ID: ${validatedComponent.id}`);
+                    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 - using index to keep it somewhat stable
@@ -5501,7 +5580,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             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}`;
+                                    const cellContextId = `${ensureStringId$1(validatedComponent.id)}-row-${rowIndex}-cell-${cellIndex}`;
                                     return {
                                         ...cell,
                                         components: getValidatedComponents(cell.components, cellContextId)
@@ -5517,9 +5596,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     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, entry.id || `${validatedComponent.id}-entry-${entry.index}`)
+                                id: entryId, // Ensure entry itself has a string ID
+                                components: getValidatedComponents(entry.components, entryId)
                             };
                         }
                         return entry;
@@ -6312,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
@@ -6804,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) => {
@@ -6998,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