@evoke-platform/ui-components 1.16.0 → 1.17.0

package/dist/published/components/custom/CriteriaBuilder/utils.js

@@ -3,32 +3,105 @@ import { parseMongoDB } from '../util';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
  *
- * @param {TreeViewProperty[]} tree - The tree structure to update.
+ * @param {TreeItem[]} tree - The tree structure to update.
  * @param {string} nodeId - The ID of the node to update.
- * @param {(node: TreeViewProperty) => TreeViewProperty} updater - The function to apply to the node.
- * @returns {TreeViewProperty[]} - The updated tree structure.
+ * @param {(node: TreeItem) => TreeItem} updater - The function to apply to the node.
+ * @returns {TreeItem[]} - The updated tree structure.
  */
-export const updateTreeViewProperty = (tree, nodeId, updater) => {
+export const updateTreeNode = (tree, nodeId, updater) => {
     return tree.map((node) => {
         if (node.id === nodeId) {
             return updater(node);
         }
         else if (node.children) {
-            return { ...node, children: updateTreeViewProperty(node.children, nodeId, updater) };
+            return { ...node, children: updateTreeNode(node.children, nodeId, updater) };
         }
         else {
             return node;
         }
     });
 };
-export const convertTreeViewPropertyToTreeItem = (property) => ({
-    id: property.id,
-    label: property.name,
-    value: property.id,
-    type: property.type,
-    objectId: property.objectId,
-    children: property.children?.map(convertTreeViewPropertyToTreeItem),
-});
+/**
+ * Fetches the display name path for a given property ID within an object hierarchy.
+ *
+ * @param {string} propertyId - The property ID to find the display name for.
+ * @param {Obj} rootObject - The root object to start the search from.
+ * @param {FetchObjectFunction} fetchObject - Function to fetch an object by its ID.
+ * @returns {Promise<string>} - A promise that resolves to the display name path.
+ */
+export const fetchDisplayNamePath = async (propertyId, rootObject, fetchObject) => {
+    const propertyInfo = await traversePropertyPath(propertyId, rootObject, fetchObject);
+    return propertyInfo ? propertyInfo.name : '';
+};
+/**
+ * stores full dot-notation path to each property ID in the given array of properties.
+ *
+ * @param {ObjectProperty[]} properties - The array of properties to update.
+ * @param {string} parentPath - The parent path to attach to each property ID.
+ * @returns {ObjectProperty[]} The updated array of properties with the parent path attached to each property ID.
+ */
+export const setIdPaths = (properties, parentPath) => {
+    return properties.map((prop) => {
+        const fullPath = parentPath ? `${parentPath}.${prop.id}` : prop.id;
+        return {
+            ...prop,
+            id: fullPath,
+        };
+    });
+};
+/**
+ * Traverses a property path within an object hierarchy to retrieve detailed property information.
+ *
+ * @param {string} propertyPath - The dot-separated path of the property to traverse.
+ * @param {Obj} rootObject - The root object from which to start the traversal.
+ * @param {FetchObjectFunction} fetchObject - A function to fetch an object by its ID.
+ * @returns {Promise<ObjectProperty | null>} A promise that resolves to an ObjectProperty if found, or null otherwise.
+ */
+export const traversePropertyPath = async (propertyPath, rootObject, fetchObject) => {
+    const segments = propertyPath.split('.');
+    let currentObject = rootObject;
+    let fullPath = '';
+    let namePath = '';
+    for (let i = 0; i < segments.length; i++) {
+        const remainingPath = segments.slice(i).join('.');
+        let prop = currentObject.properties?.find((p) => p.id === remainingPath);
+        if (prop) {
+            // flattened address or user properties
+            fullPath = fullPath ? `${fullPath}.${remainingPath}` : remainingPath;
+            namePath = namePath ? `${namePath} / ${prop.name}` : prop.name;
+            return {
+                ...prop,
+                id: fullPath,
+                name: namePath,
+            };
+        }
+        else {
+            prop = currentObject.properties?.find((p) => p.id === segments[i]);
+            if (!prop) {
+                return null;
+            }
+            fullPath = fullPath ? `${fullPath}.${prop.id}` : prop.id;
+            namePath = namePath ? `${namePath} / ${prop.name}` : prop.name;
+            if (i === segments.length - 1) {
+                return {
+                    ...prop,
+                    id: fullPath,
+                    name: namePath,
+                };
+            }
+            if (prop.type === 'object' && prop.objectId) {
+                const fetchedObject = await fetchObject(prop.objectId);
+                if (fetchedObject) {
+                    currentObject = fetchedObject;
+                }
+                else {
+                    return null;
+                }
+            }
+        }
+    }
+    return null;
+};
 /**
  * Truncates the name path if it exceeds the specified character limit.
  *
@@ -111,11 +184,9 @@ export const findTreeItemById = (nodes, nodeId) => {
     for (const node of nodes) {
         if (node.id === nodeId)
             return node;
-        if (nodeId.startsWith(node.id)) {
-            const found = node.children && findTreeItemById(node.children, nodeId);
-            if (found)
-                return found;
-        }
+        const found = node.children && findTreeItemById(node.children, nodeId);
+        if (found)
+            return found;
     }
     return null;
 };

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/Document.js

@@ -43,7 +43,7 @@ export const Document = (props) => {
             // For 'file' type properties, check permissions on the sys__file object
             // For 'document' type properties, check document attachment permissions
             const endpoint = property.type === 'file'
-                ? getPrefixedUrl('/objects/sys__file/instances/checkAccess?action=execute&field=_create')
+                ? getPrefixedUrl(`/objects/sys__file/instances/${instance.id}/checkAccess?action=update`)
                 : getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=update`);
             apiServices
                 .get(endpoint)

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentList.js

@@ -64,15 +64,12 @@ export const DocumentList = (props) => {
     }, []);
     const checkPermissions = () => {
         if (instance?.[property.id]?.length) {
-            // For 'file' type properties, check regular object instance permissions
+            // For 'file' type properties, check permissions on the sys__file object
             // For 'document' type properties, check document attachment permissions
             const endpoint = property.type === 'file'
-                ? getPrefixedUrl(`/objects/sys__file/instances/checkAccess?action=read&field=content`)
+                ? getPrefixedUrl(`/objects/sys__file/instances/${instance.id}/checkAccess?action=view`)
                 : getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=view`);
-            apiServices
-                .get(endpoint)
-                .then((accessCheck) => setHasViewPermission(accessCheck.result))
-                .catch(() => setHasViewPermission(false));
+            apiServices.get(endpoint).then((accessCheck) => setHasViewPermission(accessCheck.result));
         }
     };
     const isFile = (doc) => doc instanceof File;

package/dist/published/components/custom/Form/utils.d.ts

@@ -1,4 +1,4 @@
-import { ActionInput, ActionInputType, ApiServices, AxiosError, FormEntry, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType, UserAccount } from '@evoke-platform/context';
+import { ActionInput, ActionInputType, ApiServices, AxiosError, FormEntry, FormletReference, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType, UserAccount } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import { LocalDateTime } from '@js-joda/core';
 import { AutocompleteOption } from '../../core';
@@ -7,7 +7,7 @@ export declare function determineComponentType(properties: Property[], parameter
 export declare function determineParameterType(componentType: string): PropertyType;
 export declare function getFlattenEntries(entries: FormEntry[]): InputParameterReference[];
 export declare function convertFormToComponents(entries: FormEntry[], parameters: InputParameter[], object: Obj): ActionInput[];
-export declare function convertComponentsToForm(components: ActionInput[]): FormEntry[];
+export declare function convertComponentsToForm(components: ActionInput[]): Exclude<FormEntry, FormletReference>[];
 export declare function getMiddleObjectFilter(property: Property, instance: ObjectInstance): {
     where: {
         [x: string]: string;
@@ -25,7 +25,6 @@ export declare function flattenFormComponents(components?: ActionInput[]): Actio
 export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], allCriteriaInputs?: string[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, associatedObject?: {
     instanceId?: string;
     propertyId?: string;
-    objectId?: string;
 }, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: (query: string) => Promise<Address[]>, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent): Promise<ActionInput[]>;
 export declare function getDefaultValue(initialValue: unknown, selectOptions?: AutocompleteOption[]): unknown;
 export declare const buildComponentPropsFromObjectProperties: (properties: Property[], objectId: string, instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, hasActionPermissions?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, readOnly?: boolean, queryAddresses?: ((query: string) => Promise<Address[]>) | undefined, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent) => unknown[];

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -48,7 +48,7 @@ const AddressFieldComponent = (props) => {
         !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: readOnly ? undefined : placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
-            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
+            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}), sx: { backgroundColor: 'white' } })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: 'none',

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.js

@@ -4,11 +4,17 @@ import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank, Help, ToggleOff, Toggle
 import { defaultTheme } from '../../../../theme/defaultTheme';
 import { Autocomplete, Checkbox, FormControl, FormControlLabel, FormHelperText, IconButton, Switch, TextField, Tooltip, Typography, } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
-const descriptionStyles = {
-    color: '#999 !important',
-    whiteSpace: 'normal',
-    paddingBottom: '4px',
-    marginX: 0,
+import { Box } from '../../../layout';
+const styles = {
+    descriptionStyles: { color: '#999 !important', whiteSpace: 'normal', paddingBottom: '4px', marginX: 0 },
+    checkboxIconBox: {
+        backgroundColor: 'white',
+        width: '18px',
+        height: '18px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
 };
 const BooleanSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, size, displayOption, label, strictlyTrue, tooltip, description, placeholder, onBlur, additionalProps, } = props;
@@ -31,7 +37,7 @@ const BooleanSelect = (props) => {
         },
     ];
     const descriptionComponent = () => {
-        return (description && (React.createElement(FormHelperText, { sx: descriptionStyles, component: Typography }, parse(description))));
+        return (description && (React.createElement(FormHelperText, { sx: styles.descriptionStyles, component: Typography }, parse(description))));
     };
     const labelComponent = () => {
         return (React.createElement(Typography, { component: "span", variant: "body2", sx: { wordWrap: 'break-word', ...defaultTheme.typography.body2 } },
@@ -58,7 +64,9 @@ const BooleanSelect = (props) => {
     return displayOption === 'dropdown' ? (React.createElement(Autocomplete, { renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, placeholder: placeholder, size: size ?? 'medium' })), value: booleanOptions.find((opt) => opt.value === value) ?? '', onChange: (e, selectedValue) => handleChange(selectedValue.value), isOptionEqualToValue: (option, val) => option?.value === val?.value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}), sortBy: "NONE", required: strictlyTrue })) : (React.createElement(FormControl, { required: strictlyTrue, error: error, fullWidth: true },
         React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), sx: { marginLeft: '-8px' }, control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
-                }, ...(additionalProps ?? {}) })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
+                }, ...(additionalProps ?? {}) })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), icon: React.createElement(Box, { sx: styles.checkboxIconBox },
+                    React.createElement(CheckBoxOutlineBlank, { fontSize: size ?? 'medium' })), checkedIcon: React.createElement(Box, { sx: styles.checkboxIconBox },
+                    React.createElement(CheckBoxIcon, { fontSize: size ?? 'medium' })), sx: {
                     alignSelf: 'start',
                     padding: '4px 9px 9px 9px',
                 }, ...(additionalProps ?? {}) })) }),

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -56,7 +56,6 @@ const InputFieldComponent = (props) => {
             : property.enum, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder })), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
         }, error: error, required: required, inputValue: inputValue ?? '', onInputChange: handleInputValueChange, ...(additionalProps ?? {}) })) : !mask || isValueProtected ? (React.createElement(TextField, { id: id, sx: {
-            background: 'white',
             borderRadius: '8px',
             ...(readOnly && {
                 '& .MuiOutlinedInput-notchedOutline': {
@@ -67,6 +66,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }),
+            backgroundColor: 'white',
         }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, endAdornment, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: readOnly ? undefined : placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {

package/dist/published/components/custom/FormField/Select/Select.js

@@ -161,7 +161,7 @@ const Select = (props) => {
             React.createElement(Typography, { variant: "caption" }, "Clear Selection"))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array', id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur, inputProps: {
                 ...params.inputProps,
                 'aria-describedby': isCombobox ? `${id}-instructions` : undefined,
-            } })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, filterOptions: (options, params) => {
+            }, sx: { backgroundColor: 'white', borderRadius: '8px' } })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, filterOptions: (options, params) => {
             const filtered = filter(options, params);
             const { inputValue } = params;
             // Suggest to the user to add a new value.

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

@@ -9,7 +9,7 @@ import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 export type FormRendererProps = BaseProps & {
     richTextEditor?: ComponentType<SimpleEditorProps>;
     value?: FieldValues;
-    onSubmit?: (data: FieldValues) => Promise<void> | ((data: FieldValues) => void);
+    onSubmit?: (data: FieldValues) => void;
     onDiscardChanges?: () => void;
     onSubmitError?: SubmitErrorHandler<FieldValues>;
     hideTitle?: boolean;
@@ -22,7 +22,6 @@ export type FormRendererProps = BaseProps & {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string;
     };
     renderHeader?: (props: HeaderProps) => React.ReactNode;
     renderBody?: (props: BodyProps) => React.ReactNode;

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

@@ -54,17 +54,17 @@ const FormRendererInternal = (props) => {
         enabled: !!objectId,
     });
     const updatedEntries = useMemo(() => {
-        return object ? assignIdsToSectionsAndRichText(entries, object, parameters) : [];
+        return assignIdsToSectionsAndRichText(entries, object, parameters);
     }, [entries, object, parameters]);
     useEffect(() => {
-        if (!object)
+        if (objectId && !object)
             return;
-        const action = object.actions?.find((a) => a.id === actionId);
+        const action = object?.actions?.find((a) => a.id === actionId);
         setAction(action);
         // if forms action is synced with object properties then convertPropertiesToParams
-        setParameters(action?.parameters ?? convertPropertiesToParams(object));
+        setParameters(action?.parameters ?? (object ? convertPropertiesToParams(object) : []));
         setIsInitializing(false);
-    }, [object, actionId]);
+    }, [object, actionId, objectId]);
     useEffect(() => {
         const currentValues = getValues();
         if (value) {
@@ -158,9 +158,9 @@ const FormRendererInternal = (props) => {
     async function unregisterHiddenFieldsAndSubmit() {
         unregisterHiddenFields(entries ?? []);
         removeUneditedProtectedValues();
-        await handleSubmit(async (data) => {
+        await handleSubmit((data) => {
             if (onSubmit) {
-                await onSubmit(action?.type === 'delete' ? {} : data);
+                onSubmit(action?.type === 'delete' ? {} : data);
                 // clear fetched options after successful submit to allow re-evaluation with the new instance data
                 setFetchedOptions({});
             }

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

@@ -34,10 +34,6 @@ export type FormRendererContainerProps = BaseProps & {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string;
-    } | {
-        instanceId: string;
-        objectId: string;
     };
     renderContainer?: (state: FormRendererState) => React.ReactNode;
     renderHeader?: FormRendererProps['renderHeader'];

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

@@ -9,7 +9,7 @@ import ErrorComponent from '../ErrorComponent';
 import ConditionalQueryClientProvider from './components/ConditionalQueryClientProvider';
 import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
 import Header from './components/Header';
-import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, extractAllCriteria, extractPresetValuesFromCriteria, extractPresetValuesFromDynamicDefaultValues, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, handleFileUpload, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
+import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, extractAllCriteria, extractPresetValuesFromCriteria, extractPresetValuesFromDynamicDefaultValues, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, getVisibleEditableFieldIds, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
 import FormRenderer from './FormRenderer';
 import { DepGraph } from 'dependency-graph';
 // Wrapper to provide QueryClient context for FormRendererContainer if this is not a nested form
@@ -164,16 +164,18 @@ function FormRendererContainerInner(props) {
                     set(result, fieldId, fieldValue);
                 }
             }
-            else if (entry.type !== 'sections' && entry.type !== 'columns' && entry.type !== 'content') {
+            else if (entry.type !== 'sections' &&
+                entry.type !== 'columns' &&
+                entry.type !== 'content' &&
+                // there cannot be formlets here since the `form` is the effective form
+                entry.type !== 'formlet') {
                 const parameter = parameters?.find((param) => param.id === fieldId);
-                if (associatedObject &&
-                    'propertyId' in associatedObject &&
-                    associatedObject?.propertyId === fieldId &&
+                if (associatedObject?.propertyId === fieldId &&
                     associatedObject?.instanceId &&
-                    (parameter || associatedObject.objectId) &&
+                    parameter &&
                     action?.type === 'create') {
                     try {
-                        const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter?.objectId || associatedObject.objectId}/instances/${associatedObject.instanceId}`), {
+                        const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter.objectId}/instances/${associatedObject.instanceId}`), {
                             params: {
                                 expand: uniquePresetValues.filter((value) => value.startsWith(`{{{input.${fieldId}.`) ||
                                     value.startsWith(`{{input.${fieldId}.`)),
@@ -185,9 +187,6 @@ function FormRendererContainerInner(props) {
                         console.error(error);
                     }
                 }
-                else if (entry.type === 'formlet') {
-                    // TODO: this should eventually fetch the formletId then get the fields and default values of those fields
-                }
                 else if (entry.type !== 'readonlyField') {
                     if (isEmptyWithDefault(fieldValue, entry, result)) {
                         if (fieldId && parameters && parameters.length > 0) {
@@ -207,10 +206,6 @@ function FormRendererContainerInner(props) {
                     else if (parameter?.type === 'boolean' && (fieldValue === undefined || fieldValue === null)) {
                         result[fieldId] = false;
                     }
-                    else if (parameter?.type === 'fileContent' &&
-                        (fieldValue === undefined || fieldValue === null)) {
-                        result[fieldId] = instanceData['name'] ? new File([], instanceData['name']) : undefined;
-                    }
                     else if (fieldValue !== undefined && fieldValue !== null) {
                         if (parameter?.type === 'richText' && typeof fieldValue === 'string') {
                             let RTFFieldValue = fieldValue;
@@ -309,6 +304,10 @@ function FormRendererContainerInner(props) {
                 // Deep clone to avoid reference issues
                 setLastSavedData(cloneDeep(defaultValues));
             }
+            else {
+                // if there is a form with no entries
+                setFormData({});
+            }
         };
         getInitialValues();
     }, [instanceId, instance, flattenFormEntries, getDefaultValues]);
@@ -334,96 +333,59 @@ function FormRendererContainerInner(props) {
             });
         }
     };
-    /**
-     * Manually links any newly uploaded files in the submission to the specified instance.
-     * @param submission The form submission data
-     * @param linkTo The instance to link the files to
-     */
     const linkFiles = async (submission, linkTo) => {
-        // Create file links for any uploaded files that haven't been linked yet
+        // Create file links for any uploaded files after instance creation
         for (const property of sanitizedObject?.properties?.filter((property) => property.type === 'file') ?? []) {
             const files = submission[property.id];
             if (files?.length) {
-                // Only link files that have the 'unsaved' flag (newly uploaded, not yet linked)
-                const unsavedFiles = files.filter((file) => file.unsaved);
-                if (unsavedFiles.length) {
-                    await createFileLinks(unsavedFiles, linkTo, apiServices);
+                try {
+                    await createFileLinks(files, linkTo, apiServices);
+                }
+                catch (error) {
+                    console.error('Failed to create file links:', error);
+                    // Don't fail the entire submission if file linking fails
                 }
             }
         }
     };
-    /**
-     * Strips unsaved flags from file properties before sending to API.
-     * The API doesn't expect the unsaved flag, but we need it for linking logic.
-     */
-    const stripUnsavedFlags = (data) => {
-        const result = { ...data };
-        const fileParameters = parameters.filter((param) => param.type === 'file');
-        fileParameters.forEach((param) => {
-            if (Array.isArray(result[param.id])) {
-                result[param.id] = result[param.id].map((file) => ({
-                    id: file.id,
-                    name: file.name,
-                }));
-            }
-        });
-        return result;
-    };
     const saveHandler = async (submission) => {
         if (!form) {
             return;
         }
-        const formattedSubmission = await formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
-        submission = pick(formattedSubmission, parameters.map((parameter) => parameter.id));
+        submission = await formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
         try {
             if (action?.type === 'create') {
-                let response = undefined;
-                if ((await objectStore.get()).rootObjectId === 'sys__file' && actionId) {
-                    response = await handleFileUpload(apiServices, submission, actionId, objectId, instanceId, associatedObject && !('propertyId' in associatedObject) ? associatedObject : undefined);
-                }
-                else {
-                    response = await apiServices.post(getPrefixedUrl(`/objects/${objectId}/instances/actions`), {
-                        actionId: actionId,
-                        instanceId: instanceId,
-                        input: stripUnsavedFlags(submission),
-                    });
+                const response = await apiServices.post(getPrefixedUrl(`/objects/${form.objectId}/instances/actions`), {
+                    actionId: form.actionId,
+                    input: pick(submission, parameters.map((parameter) => parameter.id)),
+                });
+                if (response) {
+                    // Manually link files to created instance.
+                    await linkFiles(submission, { id: response.id, objectId: form.objectId });
+                    onSubmissionSuccess(response);
                 }
-                // Manually link files to created instance.
-                await linkFiles(submission, { id: response.id, objectId: form.objectId });
-                onSubmissionSuccess(response);
             }
             else if (instanceId && action) {
-                let response = undefined;
-                if ((await objectStore.get()).rootObjectId === 'sys__file') {
-                    response = await handleFileUpload(apiServices, submission, action.id, objectId, instanceId);
-                }
-                else {
-                    response = await apiServices.post(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/actions`), {
-                        actionId: action.id,
-                        input: stripUnsavedFlags(submission),
-                    });
-                }
+                const response = await objectStore.instanceAction(instanceId, {
+                    actionId: action.id,
+                    input: pick(submission, parameters.map((parameter) => parameter.id)),
+                });
                 if (sanitizedObject && instance) {
-                    if (!onAutosave) {
-                        // For non-autosave updates, link any uploaded files to the instance.
-                        await linkFiles(submission, { id: instanceId, objectId: objectId });
-                    }
                     onSubmissionSuccess(response);
-                    // Only delete the necessary files after submission succeeds to avoid deleting a file prematurely.
-                    await deleteDocuments(submission, true, apiServices, sanitizedObject, instance, action, setSnackbarError);
+                    deleteDocuments(submission, true, apiServices, sanitizedObject, instance, action, setSnackbarError);
                 }
             }
         }
         catch (error) {
+            // Handle deleteDocuments for uploaded documents if the main submission fails
+            if (instanceId && action && sanitizedObject && instance) {
+                deleteDocuments(submission, false, apiServices, sanitizedObject, instance, action, setSnackbarError);
+            }
             setSnackbarError({
                 isError: true,
                 showAlert: true,
                 message: error.response?.data?.error?.message ?? 'An error occurred',
             });
-            if (instanceId && action && sanitizedObject && instance) {
-                // For an update, uploaded documents have been linked to the instance and need to be deleted.
-                await deleteDocuments(submission, false, apiServices, sanitizedObject, instance, action, setSnackbarError);
-            }
             throw error; // Throw error so caller knows submission failed
         }
     };
@@ -447,6 +409,12 @@ function FormRendererContainerInner(props) {
         if (!form?.autosaveActionId || !formDataRef.current) {
             return;
         }
+        const visibleEditableFieldIds = getVisibleEditableFieldIds(form.entries ?? [], instance, formDataRef.current);
+        const allowedParameterIds = parameters?.filter((parameter) => parameter.type !== 'collection').map((parameter) => parameter.id) ?? [];
+        const autosaveFieldIds = visibleEditableFieldIds.filter((id) => allowedParameterIds.includes(id));
+        if (!autosaveFieldIds.includes(fieldId)) {
+            return;
+        }
         const currentValue = get(formDataRef.current, fieldId);
         const lastValue = get(lastSavedData, fieldId);
         if (isEqual(currentValue, lastValue)) {
@@ -455,23 +423,13 @@ function FormRendererContainerInner(props) {
         try {
             setIsSaving(true);
             const cleanedData = removeUneditedProtectedValues(formDataRef.current);
-            const submission = await formatSubmission(cleanedData, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
+            const scopedData = pick(cleanedData, autosaveFieldIds);
+            const submission = await formatSubmission(scopedData, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
             // Handle object instance autosave
             if (instanceId && action?.type === 'update') {
-                const pickedSubmission = pick(submission, sanitizedObject?.properties
-                    ?.filter((property) => !property.formula && property.type !== 'collection')
-                    .map((property) => property.id) ?? []);
                 await apiServices.post(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/actions`), {
                     actionId: form.autosaveActionId,
-                    input: stripUnsavedFlags(pickedSubmission),
-                });
-                if (sanitizedObject && instance) {
-                    // Only delete the necessary files after submission succeeds to avoid deleting a file prematurely.
-                    await deleteDocuments(submission, true, apiServices, sanitizedObject, instance, action, setSnackbarError);
-                }
-                // Invalidate the instance to fetch the latest version
-                queryClient.invalidateQueries({
-                    queryKey: [objectId, instanceId, 'instance'],
+                    input: submission,
                 });
             }
             setLastSavedData(cloneDeep(formDataRef.current));
@@ -508,7 +466,7 @@ function FormRendererContainerInner(props) {
             setFormData(newData);
         }
     }
-    const isLoading = (instanceId && !formDataRef.current) || !form || !sanitizedObject;
+    const isLoading = !form || !sanitizedObject || (instanceId && formDataRef.current === undefined);
     const status = error ? 'error' : isLoading ? 'loading' : 'ready';
     // Compose a header renderer that injects the saving indicator into the rendered header
     const composedRenderHeader = (props) => {
@@ -532,7 +490,7 @@ function FormRendererContainerInner(props) {
             border: !isLoading ? '1px solid #dbe0e4' : undefined,
             ...sx,
         } }, !isLoading ? (React.createElement(React.Fragment, null,
-        React.createElement(FormRenderer, { onSubmit: onSubmit ? async (data) => await onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, hideTitle: title?.hidden, fieldHeight: display?.fieldHeight ?? 'medium', value: formDataRef.current, form: form, instance: instance, onChange: onChange, onAutosave: onAutosave, associatedObject: associatedObject && 'propertyId' in associatedObject ? associatedObject : undefined, renderHeader: composedRenderHeader, renderBody: renderBody, renderFooter: renderFooter }))) : (React.createElement(Box, { sx: { padding: '20px' } },
+        React.createElement(FormRenderer, { onSubmit: onSubmit ? (data) => onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, hideTitle: title?.hidden, fieldHeight: display?.fieldHeight ?? 'medium', value: formDataRef.current, form: form, instance: instance, onChange: onChange, onAutosave: onAutosave, associatedObject: associatedObject, renderHeader: composedRenderHeader, renderBody: renderBody, renderFooter: 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/FormContext.d.ts

@@ -22,7 +22,6 @@ type FormContextType = {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string;
     };
     form?: EvokeForm;
     width: number;

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

@@ -13,7 +13,6 @@ export type ActionDialogProps = {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string;
     };
 };
 export declare const ActionDialog: (props: ActionDialogProps) => React.JSX.Element;

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

@@ -85,6 +85,9 @@ export const DropdownRepeatableFieldInput = (props) => {
                             : undefined),
                     }, onChange: (event) => {
                         setSearchValue(event.target.value);
+                    }, sx: {
+                        backgroundColor: 'white',
+                        borderRadius: '8px',
                     } })),
                 loading,
                 sortBy: 'NONE',