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

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

@@ -32,7 +32,6 @@ const styles = {
     },
     icon: {
         color: '#fff',
-        zIndex: 40,
         fontSize: '16px',
     },
     deleteIcon: {
@@ -56,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') {
@@ -64,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 {
+                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 {
+            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({
@@ -81,7 +106,7 @@ export const Image = (props) => {
         accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.svg'] },
     });
     return (React.createElement(React.Fragment, null, image ? (React.createElement(Box, { sx: styles.imageContainer },
-        React.createElement(Box, { sx: { position: 'relative', left: 0, zIndex: 5 } },
+        React.createElement(Box, { sx: { position: 'relative', left: 0 } },
             React.createElement(CardMedia, { component: "img", image: image, alt: 'Uploaded Image', sx: styles.image }),
             canUpdateProperty && (React.createElement(IconButton, { onClick: handleRemove, "aria-label": "Remove image", sx: styles.deleteIcon },
                 React.createElement(ClearRounded, { sx: styles.icon })))))) : canUpdateProperty ? (React.createElement(Box, { sx: {

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 {
+            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') {

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

@@ -11,7 +11,7 @@ import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } fro
 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);
@@ -90,14 +90,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 {
+                            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 +144,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') {
@@ -383,19 +404,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);
+                            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);
+                            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) {
@@ -468,9 +508,21 @@ const ObjectPropertyInput = (props) => {
                     : 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 {
+                                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();
@@ -42,7 +42,20 @@ const RelatedObjectInstance = (props) => {
     const linkExistingInstance = async () => {
         if (selectedRow) {
             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 {
+                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

@@ -6,6 +6,7 @@ import { ExpandedSection } from './types';
 export type HeaderProps = {
     hasAccordions: boolean;
     shouldShowValidationErrors: boolean;
+    validationErrorsRef?: React.Ref<HTMLDivElement>;
     title?: string;
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;
@@ -13,6 +14,7 @@ export type HeaderProps = {
     form: EvokeForm;
     errors?: FieldErrors;
     action?: Action;
+    autosaving?: boolean;
     sx?: SxProps;
 };
 declare const Header: React.FC<HeaderProps>;

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, validationErrorsRef, form, sx } = props;
     const { width } = useFormContext();
     const { breakpoints, isBelow } = useWidgetSize({
         scroll: false,
@@ -14,6 +15,7 @@ const Header = (props) => {
     });
     const isSmallerThanMd = isBelow('md');
     const { isXs, isSm } = breakpoints;
+    const isSmall = isSm || isXs;
     return (React.createElement(Box, { sx: {
             paddingX: isSmallerThanMd ? 2 : 3,
             paddingTop: '0px',
@@ -25,12 +27,25 @@ const Header = (props) => {
             borderBottom: !form.id ? undefined : '1px solid #e9ecef',
             gap: isSm || isXs ? 2 : 3,
             ...sx,
+            '.evoke-form-renderer-header': {
+                flex: 1,
+            },
         } },
-        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));
+        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 })),
+            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%' } })))),
+        React.createElement("div", { ref: validationErrorsRef, className: 'evoke-form-renderer-header' }, shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null)));
 };
 // Default slot components for convenience
 export const Title = ({ title }) => (React.createElement(Typography, { sx: {
@@ -60,4 +75,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,7 +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();
+    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, onAutosave, 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;
@@ -90,18 +91,31 @@ 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, {
@@ -113,7 +127,11 @@ export function RecursiveEntryRenderer(props) {
                 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 }))));
+            })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), 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 +174,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 || getValues(entryId), 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/utils.js

@@ -482,11 +482,6 @@ export function convertDocToEntries(document) {
                     sortBy: 'ASC',
                 },
             },
-            enumWithLabels: [
-                { label: 'Public', value: 'Public' },
-                { label: 'Private', value: 'Private' },
-                { label: 'Portal', value: 'Portal' },
-            ],
         });
     }
     entries.push({
@@ -507,8 +502,8 @@ export function formatDataToDoc(data) {
         uploadedDate: data.uploadedDate,
         versionId: data.versionId,
         metadata: {
-            type: data.type,
-            view_permission: data.view_permission,
+            type: data.type ?? '',
+            view_permission: data.view_permission ?? '',
         },
     };
 }
@@ -567,6 +562,7 @@ export const uploadDocuments = async (files, metadata, apiServices, instanceId,
     const allDocuments = [];
     const formData = new FormData();
     for (const [index, file] of files.entries()) {
+        // Only upload File instances; SavedDocumentReference objects are already uploaded
         if ('size' in file) {
             formData.append(`files[${index}]`, file);
         }
@@ -628,6 +624,7 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
 export async function formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError) {
     for (const [key, value] of Object.entries(submission)) {
         if (isArray(value)) {
+            // Only upload if array contains File instances (not SavedDocumentReference)
             const fileInArray = value.some((item) => item instanceof File);
             if (fileInArray && instanceId && apiServices && objectId) {
                 try {