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

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js

@@ -7,15 +7,14 @@ import { Close } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Autocomplete, Button, IconButton, Link, ListItem, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
 import { Box } from '../../../../../layout';
-import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
+import { getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
 import RelatedObjectInstance from './RelatedObjectInstance';
 const ObjectPropertyInput = (props) => {
     const { id, fieldDefinition, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, } = props;
-    const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, instance, } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, onAutosave: onAutosave, instance, } = useFormContext();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
-    const [allDefaultPages, setAllDefaultPages] = useState(defaultPages ?? {});
     const [loadingOptions, setLoadingOptions] = useState(false);
     const [navigationSlug, setNavigationSlug] = useState(fetchedOptions[`${id}NavigationSlug`]);
     const [relatedObject, setRelatedObject] = useState(fetchedOptions[`${id}RelatedObject`]);
@@ -24,7 +23,6 @@ const ObjectPropertyInput = (props) => {
     const [hasFetched, setHasFetched] = useState(fetchedOptions[`${id}OptionsHaveFetched`] || false);
     const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
     const [layout, setLayout] = useState();
-    const [appId, setAppId] = useState(fetchedOptions[`${id}AppId`]);
     const [form, setForm] = useState();
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
@@ -90,14 +88,27 @@ const ObjectPropertyInput = (props) => {
             });
             if (updatedFilter.where) {
                 setLoadingOptions(true);
-                apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), (error, instances) => {
+                apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), async (error, instances) => {
                     if (error) {
                         console.error(error);
                         setLoadingOptions(false);
                     }
                     if (instances && instances.length > 0) {
                         setSelectedInstance(instances[0]);
-                        handleChangeObjectField(id, instances[0]);
+                        try {
+                            handleChangeObjectField && (await handleChangeObjectField(id, instances[0]));
+                        }
+                        catch (error) {
+                            console.error('Failed to update field:', error);
+                            setLoadingOptions(false);
+                            return;
+                        }
+                        try {
+                            await onAutosave?.(id);
+                        }
+                        catch (error) {
+                            console.error('Autosave failed:', error);
+                        }
                     }
                     setLoadingOptions(false);
                 });
@@ -131,7 +142,15 @@ const ObjectPropertyInput = (props) => {
                 }
             });
         }
-    }, [fieldDefinition, updatedCriteria, layout, fetchedOptions, hasFetched, id]);
+    }, [
+        fieldDefinition,
+        updatedCriteria,
+        layout,
+        fetchedOptions?.[`${id}Options`],
+        fetchedOptions?.[`${id}UpdatedCriteria`],
+        hasFetched,
+        id,
+    ]);
     const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 200), [getDropdownOptions]);
     useEffect(() => {
         if (displayOption === 'dropdown') {
@@ -143,38 +162,28 @@ const ObjectPropertyInput = (props) => {
         setSelectedInstance(initialValue);
     }, [initialValue]);
     useEffect(() => {
-        if (formId || action?.defaultFormId) {
-            apiServices
-                .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
-                .then((evokeForm) => {
-                setForm(evokeForm);
-            })
-                .catch((error) => {
-                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]);
+        // Early return if already fetched
+        if (fetchedOptions[`${id}Form`])
+            return;
+        const fetchForm = async () => {
+            try {
+                let evokeForm;
+                if (formId || action?.defaultFormId) {
+                    evokeForm = await apiServices.get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`));
                 }
-            })
-                .catch((error) => {
-                console.error(error);
-            });
-        }
-    }, [action, formId]);
+                if (evokeForm) {
+                    setForm(evokeForm);
+                    setFetchedOptions({
+                        [`${id}Form`]: evokeForm,
+                    });
+                }
+            }
+            catch (error) {
+                console.error('Error fetching form:', error);
+            }
+        };
+        fetchForm();
+    }, [action, formId, id, fieldDefinition.objectId, apiServices, fetchedOptions]);
     useEffect(() => {
         if (!fetchedOptions[`${id}RelatedObject`]) {
             apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), (error, object) => {
@@ -188,31 +197,24 @@ const ObjectPropertyInput = (props) => {
         }
     }, [fieldDefinition.objectId, fetchedOptions, id]);
     useEffect(() => {
-        const fetchDefaultPages = async () => {
-            if (parameters && !fetchedOptions['allDefaultPages']) {
+        (async () => {
+            if (parameters && fetchedOptions[`${id}NavigationSlug`] === undefined) {
                 const pages = await getDefaultPages(parameters, defaultPages, findDefaultPageSlugFor);
-                setAllDefaultPages(pages);
-                setFetchedOptions({ [`allDefaultPages`]: pages });
-            }
-        };
-        fetchDefaultPages();
-    }, [fetchedOptions, parameters, defaultPages, findDefaultPageSlugFor]);
-    useEffect(() => {
-        if (fieldDefinition.objectId &&
-            allDefaultPages &&
-            allDefaultPages[fieldDefinition.objectId] &&
-            (!fetchedOptions?.[`${id}NavigationSlug`] || !fetchedOptions[`${id}AppId`])) {
-            apiServices.get(getPrefixedUrl(`/apps/${allDefaultPages[fieldDefinition.objectId].split('/').slice(1, 2)}/pages/${encodePageSlug(allDefaultPages[fieldDefinition.objectId].split('/').slice(2).join('/'))}`), (error, page) => {
-                if (error) {
-                    console.error(error);
+                if (fieldDefinition.objectId && pages[fieldDefinition.objectId]) {
+                    setNavigationSlug(pages[fieldDefinition.objectId]);
+                    setFetchedOptions({
+                        [`${id}NavigationSlug`]: pages[fieldDefinition.objectId],
+                    });
                 }
                 else {
-                    setAppId(page?.appId);
-                    setNavigationSlug(page?.slug);
+                    // setting the nav slug to null if there is no default page for this object to avoid re-fetching
+                    setFetchedOptions({
+                        [`${id}NavigationSlug`]: null,
+                    });
                 }
-            });
-        }
-    }, [fieldDefinition, allDefaultPages, fetchedOptions, id]);
+            }
+        })();
+    }, [parameters, defaultPages, findDefaultPageSlugFor, fieldDefinition, fetchedOptions]);
     const handleClose = () => {
         setOpenCreateDialog(false);
     };
@@ -240,12 +242,7 @@ const ObjectPropertyInput = (props) => {
                 [`${id}NavigationSlug`]: navigationSlug,
             });
         }
-        if (appId && !fetchedOptions[`${id}AppId`]) {
-            setFetchedOptions({
-                [`${id}AppId`]: appId,
-            });
-        }
-    }, [relatedObject, options, hasFetched, navigationSlug, fetchedOptions, appId, id]);
+    }, [relatedObject, options, hasFetched, navigationSlug, fetchedOptions, id]);
     const dropdownOptions = [
         ...options.map((o) => ({ label: o.name, value: o.id })),
         ...(mode !== 'existingOnly' && relatedObject?.actions?.some((a) => a.id === createActionId)
@@ -383,19 +380,38 @@ const ObjectPropertyInput = (props) => {
                     if (selectedInstance?.id) {
                         e.preventDefault();
                     }
-                }, loading: loadingOptions, onChange: (event, value) => {
-                    if (isNil(value)) {
-                        setDropdownInput(undefined);
-                        setSelectedInstance(undefined);
-                        handleChangeObjectField(id, null);
-                    }
-                    else if (value?.value === '__new__') {
-                        setOpenCreateDialog(true);
+                }, loading: loadingOptions, onChange: async (event, value) => {
+                    try {
+                        if (isNil(value)) {
+                            setDropdownInput(undefined);
+                            setSelectedInstance(undefined);
+                            handleChangeObjectField && (await handleChangeObjectField(id, null));
+                            // Trigger autosave immediately upon clearing
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
+                        }
+                        else if (value?.value === '__new__') {
+                            setOpenCreateDialog(true);
+                        }
+                        else {
+                            const selectedInstance = options.find((o) => o.id === value?.value);
+                            setSelectedInstance(selectedInstance);
+                            handleChangeObjectField && (await handleChangeObjectField(id, selectedInstance));
+                            // Trigger autosave immediately upon selection
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
+                        }
                     }
-                    else {
-                        const selectedInstance = options.find((o) => o.id === value?.value);
-                        setSelectedInstance(selectedInstance);
-                        handleChangeObjectField(id, selectedInstance);
+                    catch (error) {
+                        console.error('Failed to update field:', error);
                     }
                 }, selectOnFocus: false, onBlur: () => {
                     if (dropdownInput) {
@@ -434,7 +450,7 @@ const ObjectPropertyInput = (props) => {
                         ...params.InputProps,
                         startAdornment: selectedInstance?.id ? (React.createElement(Typography, { onClick: () => {
                                 if (navigationSlug && selectedInstance?.id) {
-                                    navigateTo(`/${appId}/${navigationSlug.replace(':instanceId', selectedInstance.id)}`);
+                                    navigateTo(`/${navigationSlug.replace(':instanceId', selectedInstance.id)}`);
                                 }
                             }, sx: {
                                 cursor: navigationSlug ? 'pointer' : 'default',
@@ -464,13 +480,25 @@ const ObjectPropertyInput = (props) => {
                             ? '#999'
                             : '#212B36',
                 }, variant: "body2", href: navigationSlug && !isModal
-                    ? `${'/app'}/${appId}/${navigationSlug.replace(':instanceId', selectedInstance?.id ?? '')}`
+                    ? `${'/app'}${navigationSlug.replace(':instanceId', selectedInstance?.id ?? '')}`
                     : undefined, "aria-label": selectedInstance?.name }, selectedInstance?.name ? selectedInstance?.name : readOnly && 'None')),
             !readOnly && selectedInstance ? (React.createElement(Tooltip, { title: `Unlink` },
                 React.createElement("span", null,
-                    React.createElement(IconButton, { onClick: (event) => {
+                    React.createElement(IconButton, { onClick: async (event) => {
                             event.stopPropagation();
-                            handleChangeObjectField(id, null);
+                            try {
+                                handleChangeObjectField && (await handleChangeObjectField(id, null));
+                            }
+                            catch (error) {
+                                console.error('Failed to update field:', error);
+                                return;
+                            }
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
                             setSelectedInstance(undefined);
                         }, sx: { p: 0, marginBottom: '4px' }, "aria-label": `Unlink` },
                         React.createElement(Close, { sx: { width: '20px', height: '20px' } }))))) : (React.createElement(Button, { sx: {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.js

@@ -29,7 +29,7 @@ const styles = {
 };
 const RelatedObjectInstance = (props) => {
     const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, fieldDefinition, setSnackbarError, setOptions, options, } = props;
-    const { handleChange: handleChangeObjectField, richTextEditor, fieldHeight, width } = useFormContext();
+    const { handleChange: handleChangeObjectField, onAutosave, richTextEditor, fieldHeight, width } = useFormContext();
     const [selectedRow, setSelectedRow] = useState();
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' || mode === 'newOnly' ? 'new' : 'existing');
     const apiServices = useApiServices();
@@ -40,9 +40,22 @@ const RelatedObjectInstance = (props) => {
     });
     const { isXs, isSm } = breakpoints;
     const linkExistingInstance = async () => {
-        if (selectedRow) {
+        if (selectedRow && handleChangeObjectField) {
             setSelectedInstance(selectedRow);
-            handleChangeObjectField(id, selectedRow);
+            try {
+                await handleChangeObjectField(id, selectedRow);
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                onClose();
+                return;
+            }
+            try {
+                await onAutosave?.(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
         }
         onClose();
     };
@@ -56,22 +69,31 @@ const RelatedObjectInstance = (props) => {
         }
         submission = await formatSubmission(submission, apiServices, relatedObject.id);
         try {
-            await apiServices
-                .post(getPrefixedUrl(`/objects/${relatedObject.id}/instances/actions`), {
+            const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObject.id}/instances/actions`), {
                 actionId: actionId,
                 input: submission,
-            })
-                .then((response) => {
-                handleChangeObjectField(id, response);
-                setSelectedInstance(response);
-                setSnackbarError({
-                    showAlert: true,
-                    message: 'New instance created',
-                    isError: false,
-                });
-                setOptions(options.concat([response]));
-                onClose();
             });
+            try {
+                handleChangeObjectField && (await handleChangeObjectField(id, response));
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                return;
+            }
+            try {
+                await onAutosave?.(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+            setSelectedInstance(response);
+            setSnackbarError({
+                showAlert: true,
+                message: 'New instance created',
+                isError: false,
+            });
+            setOptions(options.concat([response]));
+            onClose();
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
         catch (err) {

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

@@ -1,19 +1,29 @@
-import { Action, EvokeForm } from '@evoke-platform/context';
+import { Action } from '@evoke-platform/context';
 import { SxProps } from '@mui/material';
 import React from 'react';
 import { FieldErrors } from 'react-hook-form';
 import { ExpandedSection } from './types';
 export type HeaderProps = {
     hasAccordions: boolean;
-    shouldShowValidationErrors: boolean;
+    shouldShowValidationErrors?: boolean;
+    validationContainerRef?: React.Ref<HTMLDivElement>;
     title?: string;
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;
     onCollapseAll?: () => void;
-    form: EvokeForm;
+    /**
+     * Indicates whether this is a "delete form".
+     * This flag adjusts header styling specifically for delete forms.
+     *
+     * @warning This prop is temporary and will be removed
+     * when delete form styling is finalized.
+     */
+    isDeleteForm?: boolean;
     errors?: FieldErrors;
     action?: Action;
+    autosaving?: boolean;
     sx?: SxProps;
+    autosaveEnabled?: boolean;
 };
 declare const Header: React.FC<HeaderProps>;
 export type TitleProps = {

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

@@ -1,12 +1,13 @@
 import { isEmpty } from 'lodash';
 import React from 'react';
+import { Autorenew } from '../../../../icons';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import Button from '../../../core/Button/Button';
 import { Typography } from '../../../core/Typography';
 import Box from '../../../layout/Box/Box';
 import ValidationErrors from './ValidationFiles/ValidationErrors';
 const Header = (props) => {
-    const { title, errors, hasAccordions, shouldShowValidationErrors, form, sx } = props;
+    const { title, errors, hasAccordions, shouldShowValidationErrors, validationContainerRef, sx, isDeleteForm, autosaveEnabled, } = props;
     const { width } = useFormContext();
     const { breakpoints, isBelow } = useWidgetSize({
         scroll: false,
@@ -14,6 +15,8 @@ const Header = (props) => {
     });
     const isSmallerThanMd = isBelow('md');
     const { isXs, isSm } = breakpoints;
+    const isSmall = isSm || isXs;
+    const displayValidationErrors = shouldShowValidationErrors && !isEmpty(errors);
     return (React.createElement(Box, { sx: {
             paddingX: isSmallerThanMd ? 2 : 3,
             paddingTop: '0px',
@@ -22,15 +25,25 @@ const Header = (props) => {
             flexWrap: 'wrap',
             paddingY: isSm || isXs ? 2 : 3,
             // when rendering the default delete action, we don't want a border
-            borderBottom: !form.id ? undefined : '1px solid #e9ecef',
+            borderBottom: isDeleteForm ? undefined : '1px solid #e9ecef',
             gap: isSm || isXs ? 2 : 3,
             ...sx,
-        } },
-        title && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
-            React.createElement(Title, { ...props }))),
-        hasAccordions && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
-            React.createElement(AccordionActions, { ...props }))),
-        shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null));
+        }, ref: validationContainerRef },
+        title && (React.createElement(Box, { sx: { flex: '1 1 auto', minWidth: 0, display: 'flex', alignItems: 'center', gap: 1 } },
+            React.createElement(Title, { ...props }),
+            props.autosaving && !isSmall && React.createElement(SavingIndicator, null))),
+        hasAccordions && (React.createElement(Box, { sx: { flex: '0 0 auto', display: 'flex', alignItems: 'center' } },
+            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+                React.createElement(AccordionActions, { ...props })),
+            autosaveEnabled && (React.createElement(Box, { sx: {
+                    width: '96px',
+                    minWidth: '72px',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    marginLeft: 0.5,
+                } }, props.autosaving && isSmall ? React.createElement(SavingIndicator, null) : React.createElement(Box, { sx: { width: '100%' } }))))),
+        displayValidationErrors ? React.createElement(ValidationErrors, { errors: errors }) : null));
 };
 // Default slot components for convenience
 export const Title = ({ title }) => (React.createElement(Typography, { sx: {
@@ -60,4 +73,30 @@ export const AccordionActions = ({ onExpandAll, onCollapseAll, expandedSections
                 fontSize: '14px',
             } }, "Collapse all")));
 };
+/**
+ * SavingIndicator displays a spinning icon with "Saving" text
+ * to indicate that an autosave operation is in progress.
+ */
+const SavingIndicator = () => (React.createElement(Box, { sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+    } },
+    React.createElement(Typography, { sx: {
+            fontSize: '14px',
+            color: 'text.secondary',
+        } }, "Saving"),
+    React.createElement(Autorenew, { sx: {
+            fontSize: '16px',
+            color: 'text.secondary',
+            animation: 'spin 1s linear infinite',
+            '@keyframes spin': {
+                '0%': {
+                    transform: 'rotate(0deg)',
+                },
+                '100%': {
+                    transform: 'rotate(360deg)',
+                },
+            },
+        } })));
 export default Header;

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

@@ -1,6 +1,7 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
 import DOMPurify from 'dompurify';
+import { isEmpty } from 'lodash';
 import React, { useEffect, useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import { TextField, Typography } from '../../../core';
@@ -37,11 +38,7 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
 }
 export function RecursiveEntryRenderer(props) {
     const { entry } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, fieldHeight, triggerFieldReset, associatedObject, form, width, } = useFormContext();
-    // If the entry is hidden, clear its value and any nested values, and skip rendering
-    if (!entryIsVisible(entry, getValues(), instance)) {
-        return null;
-    }
+    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, form, width, } = useFormContext();
     const { isBelow, breakpoints } = useWidgetSize({
         scroll: false,
         defaultWidth: width,
@@ -52,20 +49,24 @@ export function RecursiveEntryRenderer(props) {
     const userAccount = useAuthenticationContext()?.account;
     const entryId = getEntryId(entry) || 'defaultId';
     const display = 'display' in entry ? entry.display : undefined;
-    const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues(entryId);
+    const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues ? getValues(entryId) : undefined;
     const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
     const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const fieldDefinition = useMemo(() => {
         return getFieldDefinition(entry, object, parameters, form?.id === 'documentForm');
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
-    if (associatedObject?.propertyId === entryId)
-        return null;
     useEffect(() => {
         if (fieldDefinition?.type === 'collection' && fieldDefinition?.manyToManyPropertyId && instance) {
             fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instance.id, fetchedOptions, initialMiddleObjectInstances);
         }
     }, [fieldDefinition, instance]);
+    if (associatedObject?.propertyId === entryId)
+        return null;
+    // If the entry is hidden, clear its value and any nested values, and skip rendering
+    if (!getValues || !entryIsVisible(entry, instance, getValues())) {
+        return null;
+    }
     if (entry.type === 'content') {
         return (React.createElement(Box, { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(entry.html) }, sx: {
                 fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
@@ -74,7 +75,7 @@ export function RecursiveEntryRenderer(props) {
     else if ((entry.type === 'input' || entry.type === 'readonlyField' || entry.type === 'inputField') &&
         fieldDefinition) {
         if (isAddressProperty(entryId)) {
-            return React.createElement(AddressFields, { entry: entry, entryId: entryId, fieldDefinition: fieldDefinition });
+            return (React.createElement(AddressFields, { entry: entry, entryId: entryId, fieldDefinition: fieldDefinition, readOnly: entry.type === 'readonlyField' }));
         }
         else if (fieldDefinition.type === 'image') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
@@ -90,30 +91,42 @@ export function RecursiveEntryRenderer(props) {
                         ? display?.defaultValue.orderBy
                         : undefined, defaultValueCriteria: typeof display?.defaultValue === 'object' && 'criteria' in display.defaultValue
                         ? display?.defaultValue?.criteria
-                        : undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description, 
-                    // formId={display?.createFormId}  // TODO: this should be added as part of the builder update
-                    createActionId: '_create' })));
+                        : undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description, formId: display?.createFormId, createActionId: display?.createActionId })));
         }
         else if (fieldDefinition.type === 'user') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
                 React.createElement(UserProperty, { id: entryId, value: fieldValue, error: !!errors?.[entryId], readOnly: entry.type === 'readonlyField', hasDescription: !!display?.description })));
         }
         else if (fieldDefinition.type === 'collection') {
-            return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] || initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description })))) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry, createActionId: '_create', updateActionId: '_update', deleteActionId: '_delete' })));
+            if (fieldDefinition?.manyToManyPropertyId) {
+                if (middleObject && !isEmpty(middleObject)) {
+                    return (initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] ||
+                                initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description }))));
+                }
+                else {
+                    // when in the builder preview, the middle object won't be fetched so instead show an empty field
+                    const singleSelectProperty = structuredClone(fieldDefinition);
+                    singleSelectProperty.type = 'choices';
+                    return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(FormField, { id: entryId, property: singleSelectProperty, defaultValue: fieldValue || getValues(entryId), selectOptions: [], size: fieldHeight })));
+                }
+            }
+            else {
+                return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                    React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry })));
+            }
         }
         else if (fieldDefinition.type === 'richText') {
-            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, RichTextEditor && handleChange ? (React.createElement(RichTextEditor
+            // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
+            , { 
                 // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
-                id: entry.uniqueId,
-                value: fieldValue,
-                handleUpdate: (value) => handleChange(entryId, value),
-                format: 'rtf',
-                disabled: entry.type === 'readonlyField',
-                rows: display?.rowCount,
-                hasError: !!errors?.[entryId],
-            })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, size: fieldHeight }))));
+                id: entry.uniqueId, value: fieldValue, handleUpdate: (value) => handleChange(entryId, value), format: "rtf", disabled: entry.type === 'readonlyField', rows: display?.rowCount, hasError: !!errors?.[entryId] })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue, onChange: handleChange, onBlur: () => {
+                    onAutosave?.(entryId)?.catch((error) => {
+                        console.error('Autosave failed:', error);
+                    });
+                }, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, size: fieldHeight }))));
         }
         else if (fieldDefinition.type === 'document') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
@@ -156,18 +169,14 @@ export function RecursiveEntryRenderer(props) {
                     : `${entryId}-reset-false`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors), errorMessage: undefined },
                 React.createElement(FormField, { id: entryId, 
                     // TODO: Ideally the FormField prop should be called parameter but can't change the name for backwards compatibility reasons
-                    property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, getOptionLabel: (option) => {
-                        if (typeof option === 'string') {
-                            return (entry?.enumWithLabels?.find((e) => e.value === option)
-                                ?.label ?? option);
-                        }
-                        else {
-                            return (entry?.enumWithLabels?.find((e) => e.value === option.value)?.label ?? String(option.value));
-                        }
-                    }, size: fieldHeight, sortBy: display?.choicesDisplay?.sortBy && display.choicesDisplay.sortBy, displayOption: fieldDefinition.type === 'boolean'
+                    property: fieldDefinition, defaultValue: fieldValue, onChange: handleChange, onBlur: () => {
+                        // Blur event - reads current value from formData
+                        onAutosave?.(entryId)?.catch((error) => {
+                            console.error('Autosave failed:', error);
+                        });
+                    }, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, size: fieldHeight, sortBy: display?.choicesDisplay?.sortBy && display.choicesDisplay.sortBy, displayOption: fieldDefinition.type === 'boolean'
                         ? display?.booleanDisplay
-                        : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: entry?.enumWithLabels &&
-                        entry.enumWithLabels, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue })));
+                        : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: fieldDefinition?.enum, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue })));
         }
     }
     else if (entry.type === 'columns') {

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrors.js

@@ -29,7 +29,7 @@ function ValidationErrors(props) {
             border: '1px solid #721c24',
             padding: '8px 24px',
             borderRadius: '4px',
-            flex: 1,
+            flex: '1 1 100%',
             ...sx,
         } },
         React.createElement(Typography, { sx: { color: '#721c24', mt: '16px', mb: '8px' } }, "Please fix the following errors before submitting:"),

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

@@ -93,6 +93,7 @@ export type EntryRendererProps = {
 };
 export type SectionsProps = {
     entry: ExpandedSections;
+    readOnly?: boolean;
 };
 export type DocumentData = {
     id: string;