@evoke-platform/ui-components 1.10.0-testing.8 → 1.10.0

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

@@ -1,7 +1,7 @@
 import { isArray, isEmpty, uniq } from 'lodash';
 import { DateTime } from 'luxon';
 import { getEntryId, getPrefixedUrl, isAddressProperty } from './utils';
-export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, apiServices, userAccount, formValues, updatedRelatedObjectValue) {
+export async function evalDefaultVals(parameters, unnestedEntries, entry, fieldValue, fieldId, apiServices, userAccount, formValues, updatedRelatedObjectValue) {
     const updates = [];
     const parameter = parameters.find((param) => param.id === fieldId);
     const defaultValue = entry.display?.defaultValue;
@@ -15,9 +15,9 @@ export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, ap
             const groups = regex.exec(item)?.groups;
             if (groups?.relatedObjectProperty && groups?.nestedProperty) {
                 const relatedObjectParameter = parameters.find((param) => param.id === groups?.relatedObjectProperty);
-                let relatedObject = updatedRelatedObjectValue;
-                if (!relatedObject && !isEmpty(formValues)) {
-                    relatedObject = formValues[groups.relatedObjectProperty];
+                let relatedObjectInstance = updatedRelatedObjectValue;
+                if (!relatedObjectInstance && !isEmpty(formValues)) {
+                    relatedObjectInstance = formValues[groups.relatedObjectProperty];
                 }
                 if (updatedRelatedObjectValue?.[groups.nestedProperty]) {
                     fieldValue = uniq([
@@ -28,9 +28,14 @@ export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, ap
                     ]);
                     updates.push({ fieldId, fieldValue });
                 }
-                else if (relatedObject && relatedObject.id && relatedObjectParameter) {
+                else if (relatedObjectInstance?.id && relatedObjectParameter) {
+                    let relatedObjectId = relatedObjectParameter.objectId;
+                    if (!relatedObjectId) {
+                        const relatedObjectParamEntry = unnestedEntries.find((e) => getEntryId(e) === relatedObjectParameter.id);
+                        relatedObjectId = relatedObjectParamEntry?.display?.relatedObjectId;
+                    }
                     const instance = await new Promise((resolve) => {
-                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectParameter.objectId}/instances/${relatedObject?.id}`), (error, instance) => {
+                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${relatedObjectInstance?.id}`), (error, instance) => {
                             if (error) {
                                 console.error(error);
                                 return resolve(undefined);
@@ -64,17 +69,22 @@ export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, ap
             const groups = regex.exec(defaultValue)?.groups;
             if (groups?.relatedObjectProperty && groups?.addressProperty && groups?.nestedAddressProperty) {
                 const relatedObjectParameter = parameters.find((param) => param.id === groups?.relatedObjectProperty);
-                let relatedObject = updatedRelatedObjectValue;
-                if (!relatedObject && !isEmpty(formValues)) {
-                    relatedObject = formValues[groups.relatedObjectProperty];
+                let relatedObjectInstance = updatedRelatedObjectValue;
+                if (!relatedObjectInstance && !isEmpty(formValues)) {
+                    relatedObjectInstance = formValues[groups.relatedObjectProperty];
                 }
                 if (updatedRelatedObjectValue?.[groups.addressProperty]?.[groups.nestedAddressProperty]) {
                     fieldValue = updatedRelatedObjectValue?.[groups.addressProperty]?.[groups.nestedAddressProperty];
                     updates.push({ fieldId, fieldValue });
                 }
-                else if (relatedObject && relatedObject.id && relatedObjectParameter) {
+                else if (relatedObjectInstance?.id && relatedObjectParameter) {
+                    let relatedObjectId = relatedObjectParameter.objectId;
+                    if (!relatedObjectId) {
+                        const relatedObjectParamEntry = unnestedEntries.find((e) => getEntryId(e) === relatedObjectParameter.id);
+                        relatedObjectId = relatedObjectParamEntry?.display?.relatedObjectId;
+                    }
                     const instance = await new Promise((resolve) => {
-                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectParameter.objectId}/instances/${relatedObject?.id}`), (error, instance) => {
+                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${relatedObjectInstance?.id}`), (error, instance) => {
                             if (error) {
                                 console.error(error);
                                 return resolve(undefined);
@@ -99,17 +109,22 @@ export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, ap
             const groups = regex.exec(defaultValue)?.groups;
             if (groups?.relatedObjectProperty && groups?.nestedProperty) {
                 const relatedObjectParameter = parameters.find((param) => param.id === groups?.relatedObjectProperty);
-                let relatedObject = updatedRelatedObjectValue;
-                if (!relatedObject && !isEmpty(formValues)) {
-                    relatedObject = formValues[groups.relatedObjectProperty];
+                let relatedObjectInstance = updatedRelatedObjectValue;
+                if (!relatedObjectInstance && !isEmpty(formValues)) {
+                    relatedObjectInstance = formValues[groups.relatedObjectProperty];
                 }
                 if (updatedRelatedObjectValue?.[groups.nestedProperty]) {
                     fieldValue = updatedRelatedObjectValue[groups.nestedProperty];
                     updates.push({ fieldId, fieldValue });
                 }
-                else if (relatedObject?.id && relatedObjectParameter) {
+                else if (relatedObjectInstance?.id && relatedObjectParameter) {
+                    let relatedObjectId = relatedObjectParameter.objectId;
+                    if (!relatedObjectId) {
+                        const relatedObjectParamEntry = unnestedEntries.find((e) => getEntryId(e) === relatedObjectParameter.id);
+                        relatedObjectId = relatedObjectParamEntry?.display?.relatedObjectId;
+                    }
                     const instance = await new Promise((resolve) => {
-                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectParameter.objectId}/instances/${relatedObject?.id}`), (error, instance) => {
+                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${relatedObjectInstance?.id}`), (error, instance) => {
                             if (error) {
                                 console.error(error);
                                 return resolve(undefined);
@@ -153,16 +168,9 @@ export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, ap
     }
     return updates;
 }
-export async function processValueUpdate(entries, parameters, updatedRelatedObjectValue, apiServices, changedEntryId, formValues, userAccount) {
+export async function processValueUpdate(unnestedEntries, parameters, updatedRelatedObjectValue, apiServices, changedEntryId, formValues, userAccount) {
     const updates = [];
-    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) {
-                const subUpdates = await processValueUpdate(subEntry.entries, parameters, updatedRelatedObjectValue, apiServices, changedEntryId, formValues, userAccount);
-                updates.push(...subUpdates);
-            }
-        }
+    for (const entry of unnestedEntries) {
         if ((entry.type === 'input' || entry.type === 'inputField') && entry?.display?.defaultValue) {
             const parameterId = getEntryId(entry);
             if (!parameterId)
@@ -175,7 +183,7 @@ export async function processValueUpdate(entries, parameters, updatedRelatedObje
                     groups?.addressProperty &&
                     groups?.nestedAddressProperty &&
                     changedEntryId === groups.relatedObjectProperty) {
-                    const result = await evalDefaultVals(parameters, entry, formValues?.[addressObject]?.[addressField], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                    const result = await evalDefaultVals(parameters, unnestedEntries, entry, formValues?.[addressObject]?.[addressField], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
                     updates.push(...result);
                 }
             }
@@ -187,7 +195,7 @@ export async function processValueUpdate(entries, parameters, updatedRelatedObje
                     if (groups?.relatedObjectProperty &&
                         groups?.nestedProperty &&
                         changedEntryId === groups.relatedObjectProperty) {
-                        const result = await evalDefaultVals(parameters, entry, entry.display.defaultValue, parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                        const result = await evalDefaultVals(parameters, unnestedEntries, entry, entry.display.defaultValue, parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
                         updates.push(...result);
                     }
                 }
@@ -198,7 +206,7 @@ export async function processValueUpdate(entries, parameters, updatedRelatedObje
                 if (groups?.relatedObjectProperty &&
                     groups?.nestedProperty &&
                     changedEntryId === groups.relatedObjectProperty) {
-                    const result = await evalDefaultVals(parameters, entry, formValues?.[parameterId], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                    const result = await evalDefaultVals(parameters, unnestedEntries, entry, formValues?.[parameterId], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
                     updates.push(...result);
                 }
             }

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

@@ -55,7 +55,7 @@ const FieldWrapper = (props) => {
     const remainingChars = maxLength ? maxLength - charCount : undefined;
     return (React.createElement(Box, null,
         React.createElement(Box, { sx: { padding: '10px 0' } },
-            inputType !== 'boolean' && (React.createElement(InputLabel, { htmlFor: inputId, sx: {
+            (inputType !== 'boolean' || viewOnly) && (React.createElement(InputLabel, { htmlFor: inputId, sx: {
                     display: 'flex',
                     alignItems: 'center',
                     color: viewOnly ? 'text.secondary' : 'text.primary',

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

@@ -6,7 +6,7 @@ import { Box } from '../../../layout';
 import { FormContext } from './FormContext';
 /* Default FormRenderer Footer. Displays a submit button and cancel changes button. */
 export const Footer = (props) => {
-    const { action, sx } = props;
+    const { sx } = props;
     const { width } = useContext(FormContext);
     const { isBelow, breakpoints } = useWidgetSize({
         scroll: false,
@@ -20,15 +20,18 @@ export const Footer = (props) => {
             padding: isSmallerThanMd ? '16px' : '20px',
             justifyContent: isXs ? 'center' : 'flex-end',
             alignItems: 'center',
-            borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
+            borderTop: '1px solid #f4f6f8',
             borderRadius: '0px 0px 6px 6px',
             zIndex: 3,
+            width: '100%',
+            // this will ensure footer does not exceed form width when form has padding
+            maxWidth: width - (isSmallerThanMd ? 32 : 40),
             ...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 () => {
@@ -46,7 +49,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',
@@ -56,7 +59,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

@@ -5,7 +5,7 @@ import { ExpandedSection, SimpleEditorProps } from './types';
 type FormContextType = {
     fetchedOptions: FieldValues;
     setFetchedOptions: (newData: FieldValues) => void;
-    getValues: UseFormGetValues<FieldValues>;
+    getValues?: UseFormGetValues<FieldValues>;
     object?: Obj;
     errors?: FieldValues;
     instance?: FieldValues;
@@ -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.d.ts

@@ -2,7 +2,16 @@ import { InputField, InputParameter, InputParameterReference, Property, Readonly
 import React from 'react';
 interface AddressProps {
     entry: InputParameterReference | ReadonlyField | InputField;
+    /**
+     * Indicates that the field is a readonlyField in an action form.
+     * Used for regular form read-only fields.
+     */
     readOnly?: boolean;
+    /**
+     * Indicates that the field should not have a gray background.
+     * Used for ViewDetails widgets.
+     */
+    viewOnly?: boolean;
     entryId: string;
     fieldDefinition: InputParameter | Property;
 }

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

@@ -6,12 +6,12 @@ import FormField from '../../../FormField';
 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 { entry, readOnly, viewOnly, entryId, fieldDefinition } = props;
+    const { getValues, instance, errors, handleChange, onAutosave, fieldHeight, parameters } = useFormContext();
     const apiServices = useApiServices();
     const addressObject = entryId.split('.')[0];
     const addressField = entryId.split('.')[1];
-    const addressValues = entry.type === 'readonlyField' ? instance?.[addressObject] : getValues(addressObject);
+    const addressValues = entry.type === 'readonlyField' ? instance?.[addressObject] : getValues ? getValues(addressObject) : undefined;
     const fieldValue = addressValues?.[addressField];
     const display = entry?.display;
     const validation = fieldDefinition?.validation
@@ -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];
+                        handleChange && (await handleChange(fullKey, fieldValue));
+                    }
                 }
-            });
+                // Autosave immediately after autocomplete fills all fields
+                try {
+                    await onAutosave?.(entryId);
+                }
+                catch (error) {
+                    console.error('Autosave failed:', error);
+                }
+            }
+            else {
+                handleChange && (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: !!(viewOnly ?? readOnly), prefix: display?.prefix, suffix: display?.suffix }, !viewOnly ? (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

@@ -84,7 +84,7 @@ export const ActionDialog = (props) => {
         objectId: relatedParameter.objectId, onSubmit: handleFormSave, onDiscardChanges: onClose, onSubmitError: handleSaveError, richTextEditor: richTextEditor, associatedObject: associatedObject, renderHeader: (formHeaderProps) => {
             return (React.createElement(DialogTitle, { sx: {
                     ...styles.dialogTitle,
-                    borderBottom: action.type === 'delete' ? undefined : '1px solid #e9ecef',
+                    borderBottom: '1px solid #e9ecef',
                 } },
                 action && hasAccess && !loading ? action?.name : '',
                 React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose, "aria-label": "Close" },
@@ -99,7 +99,7 @@ export const ActionDialog = (props) => {
             React.createElement("div", { ref: validationErrorsRef }, !isEmpty(bodyProps.errors) && bodyProps.shouldShowValidationErrors ? (React.createElement(ValidationErrors, { errors: bodyProps.errors, sx: {
                     my: isSm || isXs ? 2 : 3,
                 } })) : null),
-            React.createElement(Body, { ...bodyProps, sx: { padding: 0 } }))), renderFooter: (footerProps) => (React.createElement(DialogActions, { sx: { padding: 0 } },
+            React.createElement(Body, { ...bodyProps, sx: { padding: 0 } }))), renderFooter: (footerProps) => (React.createElement(DialogActions, { sx: { padding: 0, margin: 0 } },
             React.createElement(Footer, { ...footerProps, discardChangesButtonLabel: "Cancel" }))), renderContainer: ({ status, error, defaultContainer }) => (React.createElement(React.Fragment, null,
             status === 'ready' && defaultContainer,
             status === 'loading' && (React.createElement(DialogContent, null,

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

@@ -66,6 +66,8 @@ const RepeatableField = (props) => {
     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 === '_auto_')
+            return;
         if (formId || action?.defaultFormId) {
             apiServices
                 .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
@@ -76,27 +78,6 @@ const RepeatableField = (props) => {
                 console.error(error);
             });
         }
-        else if (action) {
-            apiServices
-                .get(getPrefixedUrl('/forms'), {
-                params: {
-                    filter: {
-                        where: {
-                            actionId: action.id,
-                            objectId: fieldDefinition.objectId,
-                        },
-                    },
-                },
-            })
-                .then((matchingForms) => {
-                if (matchingForms.length === 1) {
-                    setForm(matchingForms[0]);
-                }
-            })
-                .catch((error) => {
-                console.error(error);
-            });
-        }
     }
     const fetchRelatedInstances = useCallback(async (refetch = false) => {
         let relatedObject;
@@ -564,7 +545,7 @@ const RepeatableField = (props) => {
                             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 && entry.display?.createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
+            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'
                     ? entry.display?.createActionId
@@ -575,7 +556,9 @@ const RepeatableField = (props) => {
                 : dialogType === 'update'
                     ? updateForm?.id
                     : dialogType === 'delete'
-                        ? deleteForm?.id
+                        ? entry.display?.deleteFormId === '_auto_'
+                            ? '_auto_'
+                            : deleteForm?.id
                         : undefined, instanceId: selectedInstanceId, relatedParameter: fieldDefinition, associatedObject: instance?.id && fieldDefinition.relatedPropertyId
                 ? { instanceId: instance.id, propertyId: fieldDefinition.relatedPropertyId }
                 : undefined })),

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 {
+                handleChange && (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`]);
@@ -42,6 +42,12 @@ export const Document = (props) => {
                     [`${id}UpdatePermission`]: accessCheck.result,
                 });
                 setHasUpdatePermission(accessCheck.result);
+            })
+                .catch(() => {
+                setFetchedOptions({
+                    [`${id}UpdatePermission`]: false,
+                });
+                setHasUpdatePermission(false);
             });
         }
     }, [canUpdateProperty, fetchedOptions, instance, object]);
@@ -49,13 +55,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 {
+            handleChange && (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 +127,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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { SavedDocumentReference } from '../../types';
 type DocumentListProps = {
-    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    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 {
+            handleChange && (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];

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

@@ -55,7 +55,7 @@ const styles = {
 };
 export const Image = (props) => {
     const { id, canUpdateProperty, error, value, hasDescription } = props;
-    const { handleChange } = useFormContext();
+    const { handleChange, onAutosave: onAutosave } = useFormContext();
     const [image, setImage] = useState();
     useEffect(() => {
         if (typeof value === 'string') {
@@ -63,15 +63,41 @@ export const Image = (props) => {
         }
     }, [value]);
     const handleUpload = async (file) => {
+        // max file size 300KB
         if (file?.size && file.size <= 300000) {
-            const dataUrl = file ? await blobToDataUrl(file) : null;
+            const dataUrl = await blobToDataUrl(file);
             setImage(dataUrl);
-            handleChange(id, dataUrl);
+            try {
+                handleChange && (await handleChange(id, dataUrl));
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                return;
+            }
+            try {
+                await onAutosave?.(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
         }
     };
-    const handleRemove = (e) => {
+    const handleRemove = async (e) => {
         setImage(null);
-        handleChange(id, '');
+        try {
+            handleChange && (await handleChange(id, ''));
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            e.stopPropagation();
+            return;
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
         e.stopPropagation();
     };
     const { getRootProps, getInputProps, open } = useDropzone({

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

@@ -6,7 +6,7 @@ import { Autocomplete, IconButton, Paper, TextField, Typography } from '../../..
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 const UserProperty = (props) => {
     const { id, error, value, readOnly, hasDescription } = props;
-    const { fetchedOptions, setFetchedOptions, handleChange, fieldHeight } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave: onAutosave, fieldHeight } = useFormContext();
     const [loadingOptions, setLoadingOptions] = useState(false);
     const apiServices = useApiServices();
     const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
@@ -40,9 +40,21 @@ const UserProperty = (props) => {
             });
         }
     }, [id]);
-    function handleChangeUserProperty(id, value) {
+    async function handleChangeUserProperty(id, value) {
         const updatedValue = typeof value?.value === 'string' ? { name: value.label, id: value.value } : null;
-        handleChange(id, updatedValue);
+        try {
+            handleChange && (await handleChange(id, updatedValue));
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return; // Exit early if handleChange fails
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     }
     return (options && (React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue || readOnly ? '' : React.createElement(ExpandMore, null), clearIcon: !loadingOptions && userValue ? (React.createElement(IconButton, { size: "small", disableRipple: true, onKeyDown: (e) => {
                 if (e.key === 'Enter') {