@evoke-platform/ui-components 1.10.0-dev.2 → 1.10.0-dev.21

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';
@@ -12,7 +12,7 @@ import { assignIdsToSectionsAndRichText, convertDocToParameters, convertProperti
 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,
@@ -134,9 +135,17 @@ 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))();
+        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError(errors))();
     }
     const headerProps = {
         title,
@@ -146,8 +155,10 @@ const FormRendererInternal = (props) => {
         errors,
         hasAccordions: hasSections && isSmallerThanMd,
         shouldShowValidationErrors: isSubmitted,
-        form,
+        isDeleteForm: form.id === '',
         action,
+        validationContainerRef: validationContainerRef,
+        autosaveEnabled: !!form.autosaveActionId,
     };
     const footerProps = {
         onSubmit: unregisterHiddenFieldsAndSubmit,
@@ -155,6 +166,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 +184,7 @@ const FormRendererInternal = (props) => {
                 parameters,
                 fieldHeight,
                 handleChange: onChange,
+                onAutosave,
                 triggerFieldReset,
                 showSubmitError: isSubmitted,
                 associatedObject,

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, 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) {
     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) => {
@@ -59,6 +79,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');
@@ -78,28 +102,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 +128,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>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 +178,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 +192,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 +243,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 +254,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 +344,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 +375,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 +424,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 +435,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 +468,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/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;

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

@@ -28,7 +28,7 @@ export const Footer = (props) => {
         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 +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',
@@ -56,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

@@ -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

@@ -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;