@evoke-platform/ui-components 1.10.0-testing.9 → 1.10.1-dev.0

package/dist/published/components/custom/FormV2/FormRenderer.js

@@ -1,6 +1,6 @@
 import { useObject } from '@evoke-platform/context';
 import { isEmpty, isEqual, omit } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useWidgetSize } from '../../../theme';
 import { Box } from '../../layout';
@@ -8,11 +8,11 @@ import { Body } from './components/Body';
 import { Footer, FooterActions } from './components/Footer';
 import { FormContext } from './components/FormContext';
 import Header, { AccordionActions, Title } from './components/Header';
-import { assignIdsToSectionsAndRichText, convertDocToParameters, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, } from './components/utils';
+import { assignIdsToSectionsAndRichText, convertDocToParameters, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, obfuscateValue, } from './components/utils';
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 const FormRendererInternal = (props) => {
-    const { onSubmit, onDiscardChanges, onSubmitError, value, fieldHeight, richTextEditor, form, instance, onChange, associatedObject, renderHeader, renderBody, renderFooter, } = props;
+    const { onSubmit, onDiscardChanges, onSubmitError: onSubmitErrorOverride, value, fieldHeight, richTextEditor, form, instance, onChange, onAutosave, associatedObject, renderHeader, renderBody, renderFooter, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
@@ -32,6 +32,7 @@ const FormRendererInternal = (props) => {
     const [isInitializing, setIsInitializing] = useState(true);
     const [parameters, setParameters] = useState();
     const objectStore = useObject(objectId);
+    const validationContainerRef = useRef(null);
     const updateFetchedOptions = (newData) => {
         setFetchedOptions((prev) => ({
             ...prev,
@@ -45,7 +46,7 @@ const FormRendererInternal = (props) => {
         setExpandAll(false);
     }
     const updatedEntries = useMemo(() => {
-        return assignIdsToSectionsAndRichText(entries, object, parameters);
+        return object ? assignIdsToSectionsAndRichText(entries, object, parameters) : [];
     }, [entries, object, parameters]);
     useEffect(() => {
         (async () => {
@@ -78,6 +79,15 @@ const FormRendererInternal = (props) => {
         if (value) {
             for (const key of Object.keys(currentValues)) {
                 if (!isEqual(currentValues[key], value[key])) {
+                    // For protected properties, don't validate initial obfuscated value
+                    const property = object?.properties?.find((prop) => prop.id === key);
+                    const isProtectedProperty = property?.protection?.maskChar;
+                    if (isProtectedProperty) {
+                        if (value[key] === obfuscateValue(value[key], property)) {
+                            setValue(key, value[key], { shouldValidate: false });
+                            continue;
+                        }
+                    }
                     setValue(key, value[key], { shouldValidate: true });
                 }
             }
@@ -108,7 +118,7 @@ const FormRendererInternal = (props) => {
                     }
                 });
             }
-            if (!entryIsVisible(entry, getValues(), instance)) {
+            if (!entryIsVisible(entry, instance, getValues())) {
                 if (entry.type === 'sections' || entry.type === 'columns') {
                     const fieldsToUnregister = getNestedParameterIds(entry);
                     fieldsToUnregister.forEach(processFieldUnregister);
@@ -121,6 +131,22 @@ const FormRendererInternal = (props) => {
             }
         });
     };
+    const removeUneditedProtectedValues = () => {
+        const protectedProperties = object?.properties?.filter((prop) => prop.protection?.maskChar);
+        if (!protectedProperties || protectedProperties.length === 0) {
+            return;
+        }
+        protectedProperties.forEach((property) => {
+            const fieldId = property.id;
+            const originalValue = instance?.[fieldId];
+            const value = getValues(fieldId);
+            // When protected value hasn't been edited or viewed, unregister to
+            // avoid saving the obfuscated value.
+            if (value === originalValue) {
+                processFieldUnregister(fieldId);
+            }
+        });
+    };
     const processFieldUnregister = (fieldId) => {
         if (isAddressProperty(fieldId)) {
             // Unregister entire addressObject to clear hidden field errors, then restore existing values since unregistering address.line1 etc is not working
@@ -134,9 +160,18 @@ const FormRendererInternal = (props) => {
             unregister(fieldId);
         }
     };
+    const onSubmitError = (errors) => {
+        if (onSubmitErrorOverride) {
+            onSubmitErrorOverride(errors);
+        }
+        else if (validationContainerRef.current) {
+            validationContainerRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    };
     async function unregisterHiddenFieldsAndSubmit() {
         unregisterHiddenFields(entries ?? []);
-        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError?.(errors))();
+        removeUneditedProtectedValues();
+        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError(errors))();
     }
     const headerProps = {
         title,
@@ -146,8 +181,9 @@ const FormRendererInternal = (props) => {
         errors,
         hasAccordions: hasSections && isSmallerThanMd,
         shouldShowValidationErrors: isSubmitted,
-        form,
         action,
+        validationContainerRef: validationContainerRef,
+        autosaveEnabled: !!form.autosaveActionId,
     };
     const footerProps = {
         onSubmit: unregisterHiddenFieldsAndSubmit,
@@ -155,6 +191,7 @@ const FormRendererInternal = (props) => {
         action,
         discardChangesButtonLabel: 'Discard Changes',
         submitButtonLabel: display?.submitLabel ?? 'Submit',
+        disableDiscardChanges: !!form?.autosaveActionId,
     };
     return (React.createElement(Box, { ref: containerRef },
         React.createElement(FormContext.Provider, { value: {
@@ -172,6 +209,7 @@ const FormRendererInternal = (props) => {
                 parameters,
                 fieldHeight,
                 handleChange: onChange,
+                onAutosave,
                 triggerFieldReset,
                 showSubmitError: isSubmitted,
                 associatedObject,
@@ -200,7 +238,7 @@ const FormRendererInternal = (props) => {
                         expandedSections,
                         hasAccordions: hasSections && isSmallerThanMd,
                     } })),
-                (actionId || form.id === 'documentForm') &&
+                (action || form.id === 'documentForm') &&
                     onSubmit &&
                     (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
 };

package/dist/published/components/custom/FormV2/FormRendererContainer.js

@@ -1,33 +1,53 @@
 import { useApiServices, useApp, useAuthenticationContext, useNavigate, useObject, } from '@evoke-platform/context';
 import axios from 'axios';
-import { get, isArray, isEmpty, isEqual, merge, omit, pick, set, uniq } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import { cloneDeep, get, isArray, isEmpty, isEqual, omit, pick, set, uniq } from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton, Snackbar } from '../../core';
 import { Box } from '../../layout';
 import ErrorComponent from '../ErrorComponent';
 import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
+import Header from './components/Header';
 import { convertDocToEntries, deleteDocuments, encodePageSlug, formatDataToDoc, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, } from './components/utils';
 import FormRenderer from './FormRenderer';
 function FormRendererContainer(props) {
     const { instanceId, pageNavigation, documentId, dataType, display, formId, objectId, actionId, richTextEditor, onSubmit, onDiscardChanges: onDiscardChangesOverride, associatedObject, renderContainer, onSubmitError, sx, renderHeader, renderBody, renderFooter, } = props;
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
-    const { id: appId, defaultPages } = useApp();
+    const { id: appId } = useApp();
     const [hasDocumentUpdateAccess, setHasDocumentUpdateAccess] = useState();
-    const [defaultPagesWithSlugs, setDefaultPagesWithSlugs] = useState({});
     const [sanitizedObject, setSanitizedObject] = useState();
     const [navigationSlug, setNavigationSlug] = useState();
     const [parameters, setParameters] = useState();
     const [document, setDocument] = useState();
     const [instance, setInstance] = useState();
-    const [formData, setFormData] = useState();
+    const formDataRef = useRef();
+    // We only need the setter to force a re-render when form data updates; the value itself
+    // is intentionally not referenced elsewhere to avoid stale reads (we use formDataRef).
+    // Keep the setter to allow updating a version counter without declaring the value
+    // which would trigger a lint error for being unused.
+    const [, setFormDataVersion] = useState(0);
     const [action, setAction] = useState();
+    /**
+     * Updates form data synchronously and triggers a re-render.
+     *
+     * This function uses a ref for synchronous updates (to avoid race conditions in autosave)
+     * combined with a version counter to trigger React re-renders. This ensures that:
+     * 1. formDataRef.current is updated immediately (synchronous)
+     * 2. Components that depend on formData will re-render (via version increment)
+     * 3. Autosave always reads the latest data without timing issues
+     */
+    const setFormData = (newData) => {
+        formDataRef.current = newData;
+        setFormDataVersion((v) => v + 1);
+    };
     const [error, setError] = useState();
     const [form, setForm] = useState();
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: true,
     });
+    const [isSaving, setIsSaving] = useState(false);
+    const [lastSavedData, setLastSavedData] = useState({});
     const userAccount = useAuthenticationContext()?.account;
     const objectStore = useObject(form?.objectId ?? objectId);
     const onError = (err) => {
@@ -50,15 +70,18 @@ function FormRendererContainer(props) {
                 }
                 else {
                     if (instanceId) {
-                        objectStore.getInstance(instanceId).then((instance) => {
-                            setInstance(instance);
-                        });
+                        const instance = await objectStore.getInstance(instanceId);
+                        setInstance(instance);
                     }
                     const object = await apiServices.get(getPrefixedUrl(`/objects/${form?.objectId || objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } });
                     setSanitizedObject(object);
                     const action = object?.actions?.find((a) => a.id === (form?.actionId || actionId));
                     if (action && (instanceId || action.type === 'create')) {
                         setAction(action);
+                        // Clear error if action is found after being missing
+                        // TODO: This entire effect should take place after form is fetched to avoid an error flickering
+                        // That is, this effect should be merged with the one below that fetches the form
+                        setError((prevError) => prevError === 'Action could not be found' ? undefined : prevError);
                     }
                     else {
                         setError('Action could not be found');
@@ -78,28 +101,21 @@ function FormRendererContainer(props) {
                 setNavigationSlug(page?.slug);
             });
         }
-        if (defaultPages) {
-            for (const [objectId, defaultPage] of Object.entries(defaultPages)) {
-                const pageId = defaultPage.includes('/')
-                    ? encodePageSlug(defaultPage.split('/').slice(2).join('/'))
-                    : defaultPage;
-                apiServices.get(getPrefixedUrl(`/apps/${appId}/pages/${pageId}`)).then((page) => {
-                    setDefaultPagesWithSlugs({
-                        ...defaultPagesWithSlugs,
-                        [objectId]: '/' + page.appId + '/' + page.slug,
-                    });
-                });
-            }
-        }
     }, []);
     useEffect(() => {
+        const needsInstance = action?.type !== 'create' && !!instanceId;
+        // Instance and Action are loaded in the side effect above; wait for them to complete.
+        const loading = (actionId && !action) || (needsInstance && !instance);
         if (dataType === 'documents' || form)
             return;
-        if (formId || action?.defaultFormId) {
+        if (loading)
+            return;
+        if ((formId || action?.defaultFormId) && formId !== '_auto_') {
             apiServices
                 .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
                 .then((evokeForm) => {
-                if (evokeForm?.actionId === actionId) {
+                // If an actionId is provided, ensure it matches the form's actionId
+                if (!actionId || evokeForm?.actionId === actionId) {
                     const form = evokeForm;
                     setForm(form);
                 }
@@ -111,50 +127,27 @@ function FormRendererContainer(props) {
                 onError(error);
             });
         }
-        else if (action) {
-            apiServices
-                .get(getPrefixedUrl('/forms'), {
-                params: {
-                    filter: {
-                        where: {
-                            actionId: action.id,
-                            objectId: objectId,
-                        },
+        else if (action?.type === 'delete' && formId === '_auto_') {
+            setForm({
+                id: '',
+                name: '',
+                entries: [
+                    {
+                        type: 'content',
+                        html: `<p style="padding-top: 24px; padding-bottom: 24px;">You are about to delete <strong>${instance?.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
                     },
+                ],
+                objectId: objectId,
+                actionId: '_delete',
+                display: {
+                    submitLabel: 'Delete',
                 },
-            })
-                .then((matchingForms) => {
-                if (matchingForms.length === 1) {
-                    const form = matchingForms[0];
-                    setForm(form);
-                    // use this default form if no delete form is found
-                }
-                else if (action.type === 'delete' && instance) {
-                    setForm({
-                        id: '',
-                        name: '',
-                        entries: [
-                            {
-                                type: 'content',
-                                html: `<p>You are about to delete <strong>${instance.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
-                            },
-                        ],
-                        objectId: objectId,
-                        actionId: '_delete',
-                        display: {
-                            submitLabel: 'Delete',
-                        },
-                    });
-                }
-                else if (instance || action.type === 'create') {
-                    setError('Default action form could not be found');
-                }
-            })
-                .catch((error) => {
-                onError(error);
             });
         }
-    }, [action, objectId, instance]);
+        else {
+            setError('Action form could not be found');
+        }
+    }, [action, actionId, objectId, instance]);
     useEffect(() => {
         if (form?.id === 'documentForm') {
             setParameters([
@@ -184,6 +177,8 @@ function FormRendererContainer(props) {
             if (document && objectId) {
                 const defaultValues = await getDefaultValues(convertDocToEntries(document), document);
                 setFormData(defaultValues);
+                // Deep clone to avoid reference issues
+                setLastSavedData(cloneDeep(defaultValues));
                 if (!form) {
                     setForm({
                         id: 'documentForm',
@@ -196,6 +191,8 @@ function FormRendererContainer(props) {
             else if (form && (instance || !instanceId)) {
                 const defaultValues = await getDefaultValues(form.entries, instance || {});
                 setFormData(defaultValues);
+                // Deep clone to avoid reference issues
+                setLastSavedData(cloneDeep(defaultValues));
             }
         };
         getInitialValues();
@@ -281,102 +278,124 @@ function FormRendererContainer(props) {
     };
     const getDefaultValues = async (entries, instanceData) => {
         const result = {};
-        const processEntries = async (entries) => {
-            if (!entries)
-                return;
-            for (const entry of entries) {
-                if (entry.type === 'sections' || entry.type === 'columns') {
-                    const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
-                    for (const subEntry of subEntries) {
-                        if (subEntry.entries) {
-                            const nested = await getDefaultValues(subEntry.entries, instanceData);
-                            merge(result, nested);
-                        }
+        const unnestedEntries = getUnnestedEntries(entries);
+        for (const entry of unnestedEntries) {
+            if ((entry.type === 'input' || entry.type === 'inputField') &&
+                isAddressProperty(entry.parameterId || entry.input?.id)) {
+                const fieldId = getEntryId(entry);
+                if (!fieldId)
+                    continue;
+                const fieldValue = get(instanceData, fieldId);
+                if ((isEmpty(instanceData) || fieldValue === undefined || fieldValue === null || fieldValue === '') &&
+                    entry?.display?.defaultValue &&
+                    parameters) {
+                    const defaultValuesArray = await evalDefaultVals(parameters, unnestedEntries, entry, fieldValue, fieldId, apiServices, userAccount, instanceData);
+                    if (isArray(defaultValuesArray)) {
+                        defaultValuesArray.forEach(({ fieldId, fieldValue }) => {
+                            set(result, fieldId, fieldValue);
+                        });
                     }
                 }
-                if ((entry.type === 'input' || entry.type === 'inputField') &&
-                    isAddressProperty(entry.parameterId || entry.input?.id)) {
-                    const fieldId = getEntryId(entry);
-                    if (!fieldId)
-                        return;
-                    const fieldValue = get(instanceData, fieldId);
-                    if ((isEmpty(instanceData) ||
-                        fieldValue === undefined ||
-                        fieldValue === null ||
-                        fieldValue === '') &&
-                        entry?.display?.defaultValue &&
-                        parameters) {
-                        const defaultValuesArray = await evalDefaultVals(parameters, entry, fieldValue, fieldId, apiServices, userAccount, instanceData);
-                        if (isArray(defaultValuesArray)) {
-                            defaultValuesArray.forEach(({ fieldId, fieldValue }) => {
-                                set(result, fieldId, fieldValue);
-                            });
-                        }
-                    }
-                    else if (fieldValue !== undefined && fieldValue !== null) {
-                        set(result, fieldId, fieldValue);
-                    }
+                else if (fieldValue !== undefined && fieldValue !== null) {
+                    set(result, fieldId, fieldValue);
                 }
-                else if (entry.type !== 'sections' && entry.type !== 'columns' && entry.type !== 'content') {
-                    const fieldId = entry.type === 'input'
-                        ? entry.parameterId
-                        : entry.type === 'inputField'
-                            ? entry.input?.id
-                            : undefined;
-                    if (fieldId) {
-                        const fieldValue = instanceData?.[fieldId] ??
-                            instanceData?.metadata?.[fieldId];
-                        const parameter = parameters?.find((param) => param.id === fieldId);
-                        if (associatedObject?.propertyId === fieldId &&
-                            associatedObject?.instanceId &&
-                            parameter &&
-                            action?.type === 'create') {
-                            try {
-                                const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter.objectId}/instances/${associatedObject.instanceId}`));
-                                result[associatedObject.propertyId] = instance;
-                            }
-                            catch (error) {
-                                console.error(error);
-                            }
+            }
+            else if (entry.type !== 'sections' && entry.type !== 'columns' && entry.type !== 'content') {
+                const fieldId = entry.type === 'input'
+                    ? entry.parameterId
+                    : entry.type === 'inputField'
+                        ? entry.input?.id
+                        : undefined;
+                if (fieldId) {
+                    const fieldValue = instanceData?.[fieldId] ??
+                        instanceData?.metadata?.[fieldId];
+                    const parameter = parameters?.find((param) => param.id === fieldId);
+                    if (associatedObject?.propertyId === fieldId &&
+                        associatedObject?.instanceId &&
+                        parameter &&
+                        action?.type === 'create') {
+                        try {
+                            const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter.objectId}/instances/${associatedObject.instanceId}`));
+                            result[associatedObject.propertyId] = instance;
+                        }
+                        catch (error) {
+                            console.error(error);
                         }
-                        else if (entry.type !== 'readonlyField' &&
-                            isEmptyWithDefault(fieldValue, entry, instanceData)) {
-                            if (fieldId && parameters && parameters.length > 0) {
-                                const defaultValuesArray = await evalDefaultVals(parameters, entry, fieldValue, fieldId, apiServices, userAccount, instanceData);
-                                for (const { fieldId, fieldValue } of defaultValuesArray) {
-                                    const parameter = parameters?.find((param) => param.id === fieldId);
-                                    if (parameter?.type === 'object') {
-                                        const dependentFields = await processValueUpdate(form?.entries, parameters, fieldValue, apiServices, fieldId, formData, userAccount);
-                                        for (const field of dependentFields) {
-                                            set(result, field.fieldId, field.fieldValue);
-                                        }
+                    }
+                    else if (entry.type !== 'readonlyField' && isEmptyWithDefault(fieldValue, entry, instanceData)) {
+                        if (fieldId && parameters && parameters.length > 0) {
+                            const defaultValuesArray = await evalDefaultVals(parameters, unnestedEntries, entry, fieldValue, fieldId, apiServices, userAccount, instanceData);
+                            for (const { fieldId, fieldValue } of defaultValuesArray) {
+                                const parameter = parameters?.find((param) => param.id === fieldId);
+                                if (parameter?.type === 'object') {
+                                    const dependentFields = await processValueUpdate(unnestedEntries, parameters, fieldValue, apiServices, fieldId, formDataRef.current, userAccount);
+                                    for (const field of dependentFields) {
+                                        set(result, field.fieldId, field.fieldValue);
                                     }
-                                    set(result, fieldId, fieldValue);
                                 }
+                                set(result, fieldId, fieldValue);
                             }
                         }
-                        else if (parameter?.type === 'boolean' && (fieldValue === undefined || fieldValue === null)) {
-                            result[fieldId] = false;
-                        }
-                        else if (fieldValue !== undefined && fieldValue !== null) {
-                            if (parameter?.type === 'richText' && typeof fieldValue === 'string') {
-                                let RTFFieldValue = fieldValue;
-                                if (!fieldValue.trim().startsWith('{\\rtf')) {
-                                    RTFFieldValue = plainTextToRtf(fieldValue);
-                                }
-                                result[fieldId] = RTFFieldValue;
-                            }
-                            else {
-                                result[fieldId] = fieldValue;
+                    }
+                    else if (parameter?.type === 'boolean' && (fieldValue === undefined || fieldValue === null)) {
+                        result[fieldId] = false;
+                    }
+                    else if (fieldValue !== undefined && fieldValue !== null) {
+                        if (parameter?.type === 'richText' && typeof fieldValue === 'string') {
+                            let RTFFieldValue = fieldValue;
+                            if (!fieldValue.trim().startsWith('{\\rtf')) {
+                                RTFFieldValue = plainTextToRtf(fieldValue);
                             }
+                            result[fieldId] = RTFFieldValue;
+                        }
+                        else {
+                            result[fieldId] = fieldValue;
                         }
                     }
                 }
             }
-        };
-        await processEntries(entries);
+        }
         return result;
     };
+    const handleAutosave = async (fieldId) => {
+        if (!form?.autosaveActionId || !formDataRef.current) {
+            return;
+        }
+        const currentValue = get(formDataRef.current, fieldId);
+        const lastValue = get(lastSavedData, fieldId);
+        if (isEqual(currentValue, lastValue)) {
+            return; // Field hasn't changed, skip save
+        }
+        try {
+            setIsSaving(true);
+            const submission = await formatSubmission(formDataRef.current, apiServices, objectId, instanceId, form, setSnackbarError);
+            // Handle document autosave
+            if (dataType === 'documents' && document) {
+                await apiServices.patch(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/documents/${documentId}`), pick(submission, ['metadata']).metadata ?? submission);
+                setDocument((prev) => ({
+                    ...prev,
+                    metadata: submission.metadata,
+                }));
+            }
+            // Handle object instance autosave
+            else if (instanceId && action?.type === 'update') {
+                await apiServices.post(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/actions`), {
+                    actionId: form.autosaveActionId,
+                    input: pick(submission, sanitizedObject?.properties
+                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                        .map((property) => property.id) ?? []),
+                });
+            }
+            setLastSavedData(cloneDeep(formDataRef.current));
+            setIsSaving(false);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+            setIsSaving(false);
+        }
+    };
+    // Autosave is enabled if form.autosaveActionId exists.
+    const onAutosave = form?.autosaveActionId ? handleAutosave : undefined;
     async function onChange(id, value) {
         const parameter = parameters?.find((param) => param.id === id);
         const entries = getUnnestedEntries(form.entries);
@@ -387,7 +406,7 @@ function FormRendererContainer(props) {
         if (parameter) {
             if (parameter.type === 'object' && parameters && parameters.length > 0) {
                 // On change of a related object, update default values dependent on that object
-                const dependentFields = await processValueUpdate(form?.entries, parameters, value, apiServices, id, formData, userAccount);
+                const dependentFields = await processValueUpdate(entries, parameters, value, apiServices, id, formDataRef.current, userAccount);
                 for (const field of dependentFields) {
                     onChange(field.fieldId, field.fieldValue);
                 }
@@ -398,16 +417,21 @@ function FormRendererContainer(props) {
                 value = value.value ? value.value : value;
             }
         }
-        if (!isEqual(value, get(formData, id))) {
-            setFormData((prev) => {
-                const newData = { ...prev };
-                set(newData, id, value);
-                return newData;
-            });
+        if (!isEqual(value, get(formDataRef.current, id))) {
+            const newData = { ...formDataRef.current };
+            set(newData, id, value);
+            setFormData(newData);
         }
     }
-    const isLoading = (instanceId && !formData && !document) || !form || !sanitizedObject;
+    const isLoading = (instanceId && !formDataRef.current && !document) || !form || !sanitizedObject;
     const status = error ? 'error' : isLoading ? 'loading' : 'ready';
+    // Compose a header renderer that injects the saving indicator into the rendered header
+    const composedRenderHeader = (props) => {
+        if (renderHeader) {
+            return renderHeader({ ...props, autosaving: !!form?.autosaveActionId && isSaving });
+        }
+        return React.createElement(Header, { ...props, autosaving: !!form?.autosaveActionId && isSaving });
+    };
     const onDiscardChanges = onDiscardChangesOverride
         ? onDiscardChangesOverride
         : async () => {
@@ -426,7 +450,8 @@ function FormRendererContainer(props) {
             padding: '0px',
             border: !isLoading ? '1px solid #dbe0e4' : undefined,
             ...sx,
-        } }, !isLoading ? (React.createElement(React.Fragment, null, form && sanitizedObject && (React.createElement(FormRenderer, { onSubmit: onSubmit ? (data) => onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, fieldHeight: display?.fieldHeight ?? 'medium', value: formData, form: form, instance: dataType !== 'documents' ? instance : document, onChange: onChange, associatedObject: associatedObject, renderHeader: renderHeader, renderBody: renderBody, renderFooter: document && !hasDocumentUpdateAccess ? () => React.createElement(React.Fragment, null) : renderFooter })))) : (React.createElement(Box, { sx: { padding: '20px' } },
+        } }, !isLoading ? (React.createElement(React.Fragment, null,
+        React.createElement(FormRenderer, { onSubmit: onSubmit ? (data) => onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, fieldHeight: display?.fieldHeight ?? 'medium', value: formDataRef.current, form: form, instance: dataType !== 'documents' ? instance : document, onChange: onChange, onAutosave: onAutosave, associatedObject: associatedObject, renderHeader: composedRenderHeader, renderBody: renderBody, renderFooter: document && !hasDocumentUpdateAccess ? () => React.createElement(React.Fragment, null) : renderFooter }))) : (React.createElement(Box, { sx: { padding: '20px' } },
         React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
             React.createElement(Skeleton, { width: '78%', sx: { borderRadius: '8px', height: '40px' } }),
             React.createElement(Skeleton, { width: '20%', sx: { borderRadius: '8px', height: '40px' } })),

package/dist/published/components/custom/FormV2/components/AccordionSections.js

@@ -4,10 +4,11 @@ import React, { useEffect } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../../core';
 import { Box } from '../../../layout';
+import { ViewOnlyEntryRenderer } from '../../ViewDetailsV2';
 import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
 import { getErrorCountForSection } from './utils';
 function AccordionSections(props) {
-    const { entry } = props;
+    const { entry, readOnly } = props;
     const { errors, expandedSections, setExpandedSections, expandAll, setExpandAll, showSubmitError, width } = useFormContext();
     const { isAbove } = useWidgetSize({
         scroll: false,
@@ -92,6 +93,8 @@ function AccordionSections(props) {
                 '&:before': {
                     display: 'none',
                 },
+                ...(sectionIndex === lastSection && { marginBottom: '16px  !important' }),
+                ...(sectionIndex === 0 && { marginTop: '16px !important' }),
             } },
             React.createElement(AccordionSummary, { sx: {
                     '&.Mui-expanded': {
@@ -133,7 +136,9 @@ function AccordionSections(props) {
                             margin: '0px',
                             marginRight: '16px',
                         } }, errorCount)))),
-            React.createElement(AccordionDetails, null, section.entries?.map((sectionEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry }))))));
+            React.createElement(AccordionDetails, null, readOnly
+                ? section.entries?.map((sectionEntry, index) => (React.createElement(ViewOnlyEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry })))
+                : section.entries?.map((sectionEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry }))))));
     })));
 }
 export default AccordionSections;

package/dist/published/components/custom/FormV2/components/Body.d.ts

@@ -7,7 +7,7 @@ export type BodyProps = {
     entries: FormEntry[];
     isInitializing: boolean;
     errors?: FieldErrors;
-    shouldShowValidationErrors: boolean;
+    shouldShowValidationErrors?: boolean;
     hasAccordions: boolean;
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;