@evoke-platform/ui-components 1.10.0-dev.1 → 1.10.0-dev.10

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

@@ -1,11 +1,12 @@
 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, merge, 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) {
@@ -20,14 +21,34 @@ function FormRendererContainer(props) {
     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) => {
@@ -59,6 +80,10 @@ function FormRendererContainer(props) {
                     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');
@@ -99,7 +124,8 @@ function FormRendererContainer(props) {
             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);
                 }
@@ -184,6 +210,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 +224,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();
@@ -245,8 +275,8 @@ function FormRendererContainer(props) {
             else if (action?.type === 'create') {
                 const response = await apiServices.post(getPrefixedUrl(`/objects/${form.objectId}/instances/actions`), {
                     actionId: form.actionId,
-                    input: pick(submission, sanitizedObject?.properties
-                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                    input: omit(submission, sanitizedObject?.properties
+                        ?.filter((property) => property.formula || property.type === 'collection')
                         .map((property) => property.id) ?? []),
                 });
                 if (response) {
@@ -256,8 +286,8 @@ function FormRendererContainer(props) {
             else if (instanceId && action) {
                 const response = await objectStore.instanceAction(instanceId, {
                     actionId: action.id,
-                    input: pick(submission, sanitizedObject?.properties
-                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                    input: omit(submission, sanitizedObject?.properties
+                        ?.filter((property) => property.formula || property.type === 'collection')
                         .map((property) => property.id) ?? []),
                 });
                 if (sanitizedObject && instance) {
@@ -346,7 +376,7 @@ function FormRendererContainer(props) {
                                 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);
+                                        const dependentFields = await processValueUpdate(form?.entries, parameters, fieldValue, apiServices, fieldId, formDataRef.current, userAccount);
                                         for (const field of dependentFields) {
                                             set(result, field.fieldId, field.fieldValue);
                                         }
@@ -377,6 +407,45 @@ function FormRendererContainer(props) {
         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 +456,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(form?.entries, parameters, value, apiServices, id, formDataRef.current, userAccount);
                 for (const field of dependentFields) {
                     onChange(field.fieldId, field.fieldValue);
                 }
@@ -398,16 +467,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 +500,7 @@ 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, form && sanitizedObject && (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/Footer.d.ts

@@ -8,6 +8,7 @@ export type FooterProps = {
     submitButtonLabel?: string;
     discardChangesButtonLabel?: string;
     sx?: SxProps;
+    disableDiscardChanges?: boolean;
 };
 export declare const Footer: React.FC<FooterProps>;
 export type FooterActionsProps = Omit<FooterProps, 'sx'>;

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

@@ -22,12 +22,13 @@ export const Footer = (props) => {
             alignItems: 'center',
             borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
             borderRadius: '0px 0px 6px 6px',
+            zIndex: 3,
             ...sx,
         } },
         React.createElement(FooterActions, { ...props })));
 };
 export const FooterActions = (props) => {
-    const { action, onDiscardChanges, onSubmit, submitButtonLabel, discardChangesButtonLabel } = props;
+    const { action, onDiscardChanges, onSubmit, submitButtonLabel, discardChangesButtonLabel, disableDiscardChanges } = props;
     const { width } = useContext(FormContext);
     const [loading, setLoading] = React.useState(false);
     const handleSubmit = async () => {
@@ -45,7 +46,7 @@ export const FooterActions = (props) => {
     });
     const { isXs } = breakpoints;
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: onDiscardChanges, variant: "outlined", sx: {
+        !disableDiscardChanges && (React.createElement(Button, { onClick: onDiscardChanges, variant: "outlined", sx: {
                 margin: '5px',
                 marginX: isXs ? '0px' : undefined,
                 color: 'black',
@@ -55,7 +56,7 @@ export const FooterActions = (props) => {
                     backgroundColor: '#f2f4f7',
                     border: '1px solid rgb(206, 212, 218)',
                 },
-            } }, discardChangesButtonLabel),
+            } }, discardChangesButtonLabel)),
         React.createElement(LoadingButton, { onClick: handleSubmit, variant: "contained", sx: {
                 lineHeight: '2.75',
                 margin: '5px 0 5px 5px',

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

@@ -15,7 +15,8 @@ type FormContextType = {
     setExpandedSections?: React.Dispatch<React.SetStateAction<ExpandedSection[]>>;
     setExpandAll?: React.Dispatch<React.SetStateAction<boolean | undefined | null>>;
     parameters?: InputParameter[];
-    handleChange: (name: string, value: unknown) => void;
+    handleChange: (name: string, value: unknown) => void | Promise<void>;
+    onAutosave?: (fieldId: string) => void | Promise<void>;
     fieldHeight?: 'small' | 'medium';
     triggerFieldReset?: boolean;
     showSubmitError?: boolean;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/AddressFields.js

@@ -7,7 +7,7 @@ import FieldWrapper from '../FieldWrapper';
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 function AddressFields(props) {
     const { entry, readOnly, entryId, fieldDefinition } = props;
-    const { getValues, instance, errors, handleChange, fieldHeight, parameters } = useFormContext();
+    const { getValues, instance, errors, handleChange, onAutosave, fieldHeight, parameters } = useFormContext();
     const apiServices = useApiServices();
     const addressObject = entryId.split('.')[0];
     const addressField = entryId.split('.')[1];
@@ -22,24 +22,41 @@ function AddressFields(props) {
             params: { query: query },
         });
     };
-    const handleAddressChange = (name, value) => {
-        if (addressField === 'line1' && typeof value === 'object' && value.line1) {
-            const addressKeys = ['line1', 'city', 'county', 'state', 'zipCode'];
-            addressKeys.forEach((key) => {
-                const fullKey = `${addressObject}.${key}`;
-                if (parameters?.some((p) => p.id === fullKey)) {
-                    const fieldValue = value[key];
-                    handleChange(fullKey, fieldValue);
+    const handleAddressChange = async (name, value) => {
+        try {
+            if (addressField === 'line1' && typeof value === 'object' && value.line1) {
+                const addressKeys = ['line1', 'city', 'county', 'state', 'zipCode'];
+                // Await each handleChange sequentially to ensure proper order
+                for (const key of addressKeys) {
+                    const fullKey = `${addressObject}.${key}`;
+                    if (parameters?.some((p) => p.id === fullKey)) {
+                        const fieldValue = value[key];
+                        await handleChange(fullKey, fieldValue);
+                    }
                 }
-            });
+                // Autosave immediately after autocomplete fills all fields
+                try {
+                    await onAutosave?.(entryId);
+                }
+                catch (error) {
+                    console.error('Autosave failed:', error);
+                }
+            }
+            else {
+                await handleChange(name, value);
+            }
         }
-        else {
-            handleChange(name, value);
+        catch (error) {
+            console.error('Failed to update field:', error);
         }
     };
     const addressErrors = errors?.[addressObject];
     const addressFieldError = addressErrors?.[addressField];
-    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: "string", label: display?.label || 'default', description: !readOnly ? display?.description : undefined, tooltip: display?.tooltip, value: fieldValue, maxLength: 'maxLength' in validation ? validation?.maxLength : 0, required: entry.display?.required || false, showCharCount: !readOnly && display?.charCount, viewOnly: !!readOnly, prefix: display?.prefix, suffix: display?.suffix }, !readOnly ? (React.createElement(FormField, { property: fieldDefinition, defaultValue: fieldValue, onChange: handleAddressChange, isMultiLineText: !!display?.rowCount, readOnly: entry.type === 'readonlyField', ...(addressField === 'line1' && { queryAddresses }), mask: validation?.mask, placeholder: display?.placeholder, isOptionEqualToValue: isOptionEqualToValue, size: fieldHeight, error: !!addressFieldError, errorMessage: addressFieldError?.message, additionalProps: {
+    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: "string", label: display?.label || 'default', description: !readOnly ? display?.description : undefined, tooltip: display?.tooltip, value: fieldValue, maxLength: 'maxLength' in validation ? validation?.maxLength : 0, required: entry.display?.required || false, showCharCount: !readOnly && display?.charCount, viewOnly: !!readOnly, prefix: display?.prefix, suffix: display?.suffix }, !readOnly ? (React.createElement(FormField, { property: fieldDefinition, defaultValue: fieldValue, onChange: handleAddressChange, onBlur: () => {
+            onAutosave?.(entryId)?.catch((error) => {
+                console.error('Autosave failed:', error);
+            });
+        }, isMultiLineText: !!display?.rowCount, readOnly: entry.type === 'readonlyField', ...(addressField === 'line1' && { queryAddresses }), mask: validation?.mask, placeholder: display?.placeholder, isOptionEqualToValue: isOptionEqualToValue, size: fieldHeight, error: !!addressFieldError, errorMessage: addressFieldError?.message, additionalProps: {
             ...(display?.description && {
                 inputProps: {
                     'aria-describedby': `${entryId}-description`,

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.js

@@ -87,7 +87,7 @@ export const ActionDialog = (props) => {
                     borderBottom: action.type === 'delete' ? undefined : '1px solid #e9ecef',
                 } },
                 action && hasAccess && !loading ? action?.name : '',
-                React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
+                React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose, "aria-label": "Close" },
                     React.createElement(Close, { fontSize: "small" })),
                 formHeaderProps.hasAccordions && React.createElement(AccordionActions, { ...formHeaderProps })));
         }, renderBody: (bodyProps) => (React.createElement(DialogContent, { sx: {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.d.ts

@@ -6,9 +6,6 @@ export type ObjectPropertyInputProps = {
     criteria?: object;
     viewLayout?: ViewLayoutEntityReference;
     entry: InputField | InputParameterReference | ReadonlyField;
-    createActionId?: string;
-    updateActionId?: string;
-    deleteActionId?: string;
 };
 declare const RepeatableField: (props: ObjectPropertyInputProps) => React.JSX.Element;
 export default RepeatableField;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js

@@ -1,5 +1,5 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
-import { get, isEqual, pick, startCase } from 'lodash';
+import { get, isEqual, omit, startCase } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useState } from 'react';
 import sift from 'sift';
@@ -34,7 +34,7 @@ const styles = {
     },
 };
 const RepeatableField = (props) => {
-    const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry, createActionId, updateActionId, deleteActionId, } = props;
+    const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry } = props;
     const { fetchedOptions, setFetchedOptions, instance, width } = useFormContext();
     const { isBelow } = useWidgetSize({
         scroll: false,
@@ -62,9 +62,9 @@ const RepeatableField = (props) => {
         showAlert: false,
         isError: false,
     });
-    const createAction = relatedObject?.actions?.find((item) => item.id === createActionId);
-    const updateAction = relatedObject?.actions?.find((item) => item.id === updateActionId);
-    const deleteAction = relatedObject?.actions?.find((item) => item.id === deleteActionId);
+    const createAction = relatedObject?.actions?.find((item) => item.id === entry.display?.createActionId);
+    const updateAction = relatedObject?.actions?.find((item) => item.id === entry.display?.updateActionId);
+    const deleteAction = relatedObject?.actions?.find((item) => item.id === entry.display?.deleteActionId);
     function getForm(setForm, action, formId) {
         if (formId || action?.defaultFormId) {
             apiServices
@@ -209,11 +209,11 @@ const RepeatableField = (props) => {
     }, [fetchCriteriaObjects, relatedObject]);
     useEffect(() => {
         if (createAction && !createForm)
-            getForm(setCreateForm, createAction); // TODO: pass entry.display?.createForm as a third argument
+            getForm(setCreateForm, createAction, entry.display?.createFormId);
         if (updateAction && !updateForm)
-            getForm(setUpdateForm, updateAction); // TODO: pass entry.display?.updateForm as a third argument
+            getForm(setUpdateForm, updateAction, entry.display?.updateFormId);
         if (deleteAction && !deleteForm)
-            getForm(setDeleteForm, deleteAction); // TODO: pass entry.display?.deleteForm as a third argument
+            getForm(setDeleteForm, deleteAction, entry.display?.deleteFormId);
     }, [entry.display, createAction, updateAction, deleteAction]);
     useEffect(() => {
         if (relatedObject?.rootObjectId) {
@@ -269,10 +269,10 @@ const RepeatableField = (props) => {
         if (fieldDefinition.objectId && canUpdateProperty && !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
             apiServices
                 .get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
-                params: { action: 'execute', field: '_create', scope: 'data' },
+                params: { action: 'execute', field: entry.display?.createActionId, scope: 'data' },
             })
                 .then((checkAccess) => {
-                const action = relatedObject.actions?.find((item) => item.id === '_create');
+                const action = relatedObject.actions?.find((item) => item.id === entry.display?.createActionId);
                 if (action && fieldDefinition.relatedPropertyId) {
                     const { relatedObjectProperty, criteria } = retrieveCriteria(fieldDefinition.relatedPropertyId, action, relatedObject);
                     if (!criteria || JSON.stringify(criteria).includes('{{{input.') || !relatedObjectProperty) {
@@ -346,17 +346,21 @@ const RepeatableField = (props) => {
             }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
     const save = async (input) => {
         const action = relatedObject?.actions?.find((a) => a.id ===
-            (dialogType === 'create' ? createActionId : dialogType === 'update' ? updateActionId : deleteActionId));
+            (dialogType === 'create'
+                ? entry.display?.createActionId
+                : dialogType === 'update'
+                    ? entry.display?.updateActionId
+                    : entry.display?.deleteActionId));
         // when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
         input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : undefined);
-        if (action?.type === 'create' && createActionId) {
+        if (action?.type === 'create' && entry.display?.createActionId) {
             const updatedInput = {
                 ...input,
                 [fieldDefinition?.relatedPropertyId]: { id: instance?.id },
             };
             try {
                 const instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
-                    actionId: createActionId,
+                    actionId: entry.display?.createActionId,
                     input: updatedInput,
                 });
                 const hasAccess = fieldDefinition?.relatedPropertyId && fieldDefinition.relatedPropertyId in instance;
@@ -379,8 +383,8 @@ const RepeatableField = (props) => {
             try {
                 const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${selectedInstanceId}/actions`), {
                     actionId: `_${action?.type}`,
-                    input: pick(input, relatedObject?.properties
-                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                    input: omit(input, relatedObject?.properties
+                        ?.filter((property) => property.formula || property.type === 'collection')
                         .map((property) => property.id) ?? []),
                 });
                 if (response && relatedObject && instance) {
@@ -519,12 +523,12 @@ const RepeatableField = (props) => {
                                 users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' &&
                                 ' (Inactive)')))))),
                     canUpdateProperty && (React.createElement(Box, { sx: { mt: 2, display: 'flex', gap: 1 } },
-                        React.createElement(IconButton, { onClick: () => editRow(relatedInstance.id) },
+                        entry.display?.updateActionId && (React.createElement(IconButton, { onClick: () => editRow(relatedInstance.id) },
                             React.createElement(Tooltip, { title: "Edit" },
-                                React.createElement(Edit, null))),
-                        React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
+                                React.createElement(Edit, null)))),
+                        entry.display?.deleteActionId && (React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
                             React.createElement(Tooltip, { title: "Delete" },
-                                React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))))))))) : (React.createElement(TableContainer, { sx: {
+                                React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))) : (React.createElement(TableContainer, { sx: {
                     borderRadius: '6px',
                     border: '1px solid #919EAB3D',
                     boxShadow: 'none',
@@ -544,7 +548,7 @@ const RepeatableField = (props) => {
                                             cursor: 'pointer',
                                         },
                                     }
-                                    : {}, onClick: updateActionId &&
+                                    : {}, onClick: entry.display?.updateActionId &&
                                     canUpdateProperty &&
                                     prop.id === 'name'
                                     ? () => editRow(relatedInstance.id)
@@ -554,19 +558,19 @@ const RepeatableField = (props) => {
                                     users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && (React.createElement("span", null, ' (Inactive)'))))));
                         }),
                         canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
-                            updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
+                            entry.display?.updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
                                 React.createElement(Tooltip, { title: "Edit" },
                                     React.createElement(Edit, null)))),
-                            React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
+                            entry.display?.deleteActionId && (React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
                                 React.createElement(Tooltip, { title: "Delete" },
-                                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
-            hasCreateAction && createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
+                                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))))))))))),
+            hasCreateAction && entry.display?.createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, disabled: !createAction, onClick: addRow, "aria-label": 'Add' }, "Add"))),
         relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), onSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create'
-                    ? createActionId
+                    ? entry.display?.createActionId
                     : dialogType === 'update'
-                        ? updateActionId
-                        : deleteActionId)), relatedFormId: dialogType === 'create'
+                        ? entry.display?.updateActionId
+                        : entry.display?.deleteActionId)), relatedFormId: dialogType === 'create'
                 ? createForm?.id
                 : dialogType === 'update'
                     ? updateForm?.id

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Criteria.js

@@ -8,7 +8,7 @@ import { addressProperties, getPrefixedUrl } from '../utils';
 export default function Criteria(props) {
     const { value, canUpdateProperty, fieldDefinition, error } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, handleChange } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave } = useFormContext();
     const [loadingError, setLoadingError] = useState(false);
     const [loading, setLoading] = useState(false);
     const [properties, setProperties] = useState(fetchedOptions[`${fieldDefinition.id}Options`] || []);
@@ -57,9 +57,22 @@ export default function Criteria(props) {
     useEffect(() => {
         fetchProperties();
     }, [fetchProperties]);
-    const handleUpdate = (criteria) => {
+    const handleUpdate = async (criteria) => {
         if (criteria || value) {
-            handleChange(fieldDefinition.id, criteria ?? null);
+            const newValue = criteria ?? null;
+            try {
+                await handleChange(fieldDefinition.id, newValue);
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                return;
+            }
+            try {
+                await onAutosave?.(fieldDefinition.id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
         }
     };
     if (loadingError) {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js

@@ -12,7 +12,7 @@ import { DocumentList } from './DocumentList';
 export const Document = (props) => {
     const { id, canUpdateProperty, error, value, validate, hasDescription } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, object, handleChange, instance } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, object, handleChange, onAutosave: onAutosave, instance, } = useFormContext();
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
     const [hasUpdatePermission, setHasUpdatePermission] = useState(fetchedOptions[`${id}UpdatePermission`]);
@@ -49,13 +49,25 @@ export const Document = (props) => {
         checkPermissions();
     }, [checkPermissions]);
     const handleUpload = async (files) => {
+        // Store File objects in form state - they will be uploaded during autosave via formatSubmission()
         const newDocuments = [...(documents ?? []), ...(files ?? [])];
         setDocuments(newDocuments);
-        handleChange(id, newDocuments);
+        try {
+            await handleChange(id, newDocuments);
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return;
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     };
     const uploadDisabled = !!validate?.maxDocuments && (documents?.length ?? 0) >= validate.maxDocuments;
     const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrop: (files) => handleUpload(files),
         disabled: uploadDisabled,
         accept: validate?.allowedFileExtensions
@@ -109,7 +121,7 @@ export const Document = (props) => {
                         } }, validate?.maxDocuments === 1
                         ? `Maximum size is ${formattedMaxSize}.`
                         : `The maximum size of each document is ${formattedMaxSize}.`)))))),
-        canUpdateProperty && isNil(hasUpdatePermission) ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, handleChange: handleChange, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
+        canUpdateProperty && isNil(hasUpdatePermission) ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, handleChange: handleChange, onAutosave: onAutosave, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
         React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' }),
         errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
             React.createElement(InfoRounded, { sx: { fontSize: '.75rem', marginRight: '3px', color: '#D3271B' } }),

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { SavedDocumentReference } from '../../types';
 type DocumentListProps = {
     handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    onAutosave?: (fieldId: string) => void | Promise<void>;
     id: string;
     canUpdateProperty: boolean;
     value: (File | SavedDocumentReference)[] | undefined;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.js

@@ -24,7 +24,7 @@ const viewableFileTypes = [
     'text/plain',
 ];
 export const DocumentList = (props) => {
-    const { handleChange, id, canUpdateProperty, value: documents, setSnackbarError } = props;
+    const { handleChange, onAutosave, id, canUpdateProperty, value: documents, setSnackbarError } = props;
     const apiServices = useApiServices();
     const { fetchedOptions, setFetchedOptions, object, instance } = useFormContext();
     const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
@@ -88,9 +88,22 @@ export const DocumentList = (props) => {
     };
     const isFile = (doc) => doc instanceof File;
     const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);
-    const handleRemove = (index) => {
+    const handleRemove = async (index) => {
         const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
-        handleChange(id, updatedDocuments.length === 0 ? undefined : updatedDocuments);
+        const newValue = updatedDocuments.length === 0 ? undefined : updatedDocuments;
+        try {
+            await handleChange(id, newValue);
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return;
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     };
     const openDocument = async (index) => {
         const doc = documents?.[index];