@evoke-platform/ui-components 1.15.0 → 1.16.0

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.js

@@ -1,6 +1,5 @@
 import { useApiServices } from '@evoke-platform/context';
 import { useQuery } from '@tanstack/react-query';
-import { isEqual } from 'lodash';
 import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 import { FileWithExtension, LaunchRounded, TrashCan, WarningRounded } from '../../../../../../icons';
@@ -25,33 +24,44 @@ const viewableFileTypes = [
     'text/plain',
 ];
 export const DocumentList = (props) => {
-    const { handleChange, onAutosave, id, canUpdateProperty, value: documents, setSnackbarError } = props;
+    const { handleChange, onAutosave, id, fieldType = 'document', canUpdateProperty, value: documents, setSnackbarError, } = props;
     const apiServices = useApiServices();
     const { fetchedOptions, setFetchedOptions, object, instance } = useFormContext();
     // Determine property type once at component level
-    const propertyType = object?.properties?.find((p) => p.id === id)?.type;
-    const isFileType = propertyType === 'file';
+    const isFileType = fieldType === 'file';
     // savedDocuments is either FileInstance[] or DocumentType[], never a mix
     const [savedDocuments, setSavedDocuments] = useState(fetchedOptions[`${id}SavedDocuments`]);
+    const [deletedDocumentIds, setDeletedDocumentIds] = useState([]);
+    // The stable list we render — only updated once savedDocuments has metadata for
+    // every referenced ID. While waiting for metadata, the previous list is kept so
+    // the UI doesn't flash empty sizes, missing icons, or "Deleted" chips.
+    const [displayDocuments, setDisplayDocuments] = useState(documents);
     useEffect(() => {
-        const currentValue = instance?.[id];
-        if (currentValue?.length) {
-            const currentDocumentIds = currentValue.map((doc) => doc.id);
-            if (currentDocumentIds.length &&
-                // these need to be sorted otherwise it will evaluate as not equal if the ids are in different orders causing unnecessary fetches
-                !isEqual(currentDocumentIds.slice().sort(), savedDocuments
-                    ?.map((doc) => doc.id)
-                    .slice()
-                    .sort())) {
-                getDocuments(currentDocumentIds);
+        const currentDocumentIds = (documents ?? [])
+            .filter((doc) => !(doc instanceof File))
+            .map((doc) => doc.id);
+        if (!currentDocumentIds.length) {
+            // Only File objects — metadata not needed, display immediately.
+            setDisplayDocuments(documents);
+            return;
+        }
+        const savedDocumentIds = savedDocuments?.map((doc) => doc.id) ?? [];
+        const missingDocumentIds = currentDocumentIds.filter((docId) => !savedDocumentIds.includes(docId) && !deletedDocumentIds.includes(docId));
+        if (missingDocumentIds.length) {
+            // Metadata not yet available — fetch it.
+            // If we already have a stable display, keep it to avoid flashing.
+            // If there's nothing to show yet (initial load), display immediately so
+            // the file names are visible while metadata loads.
+            if (!displayDocuments?.length) {
+                setDisplayDocuments(documents);
             }
+            getDocuments(currentDocumentIds);
         }
-    }, [id, documents, object]);
-    useEffect(() => {
-        if (fetchedOptions[`${id}SavedDocuments`]) {
-            setSavedDocuments(fetchedOptions[`${id}SavedDocuments`]);
+        else {
+            // All IDs have metadata — safe to update the display.
+            setDisplayDocuments(documents);
         }
-    }, [fetchedOptions]);
+    }, [documents, savedDocuments, fieldType, apiServices]);
     const getDocuments = (currentDocumentIds, shouldRetry = true) => {
         // For 'file' type properties, fetch sys__file instances directly
         // For 'document' type properties, fetch attachment documents
@@ -64,7 +74,7 @@ export const DocumentList = (props) => {
             // There is a short delay between when a document is uploaded and when
             // it is indexed. Therefore, try again if documents are not found.
             if (shouldRetry &&
-                (!docs ||
+                (!docs?.length ||
                     currentDocumentIds.some((docId) => !docs.find((doc) => docId === doc.id)))) {
                 setTimeout(() => getDocuments(currentDocumentIds, false), 2000);
             }
@@ -72,6 +82,9 @@ export const DocumentList = (props) => {
                 setSnackbarError('error', 'Error occurred while retrieving saved documents');
             }
             else {
+                // IDs that were requested but not returned by the server = deleted/not found.
+                const deletedIds = currentDocumentIds.filter((docId) => !docs?.find((doc) => doc.id === docId));
+                setDeletedDocumentIds(deletedIds);
                 setSavedDocuments(docs);
                 setFetchedOptions({
                     [`${id}SavedDocuments`]: docs,
@@ -97,12 +110,13 @@ export const DocumentList = (props) => {
         staleTime: Infinity,
     });
     const isFile = (doc) => doc instanceof File;
+    const isUnsavedFile = (doc) => isFile(doc) || !!doc.unsaved;
     const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);
     const handleRemove = async (index) => {
         const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
         const newValue = updatedDocuments.length === 0 ? undefined : updatedDocuments;
         try {
-            handleChange && (await handleChange(id, newValue));
+            handleChange?.(id, newValue);
         }
         catch (error) {
             console.error('Failed to update field:', error);
@@ -116,7 +130,7 @@ export const DocumentList = (props) => {
         }
     };
     const openDocument = async (index) => {
-        const doc = documents?.[index];
+        const doc = displayDocuments?.[index];
         if (doc) {
             let url;
             const contentType = doc instanceof File
@@ -124,9 +138,7 @@ export const DocumentList = (props) => {
                 : savedDocuments?.find((savedDocument) => savedDocument.id === doc.id)?.contentType;
             if (!isFile(doc)) {
                 try {
-                    // Determine property type to use the correct endpoint
-                    const propertyType = object?.properties?.find((p) => p.id === id)?.type;
-                    const contentEndpoint = propertyType === 'file'
+                    const contentEndpoint = isFileType
                         ? getPrefixedUrl(`/files/${doc.id}/content`)
                         : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}/content`);
                     const documentResponse = await apiServices.get(contentEndpoint, { responseType: 'blob' });
@@ -167,8 +179,8 @@ export const DocumentList = (props) => {
         return size;
     };
     return (React.createElement(React.Fragment, null,
-        !documents && !canUpdateProperty && (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No documents")),
-        !!documents?.length && (React.createElement(Box, null, documents.map((doc, index) => (React.createElement(Grid, { container: true, sx: {
+        !displayDocuments && !canUpdateProperty && (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No documents")),
+        !!displayDocuments?.length && (React.createElement(Box, null, displayDocuments.map((doc, index) => (React.createElement(Grid, { container: true, sx: {
                 width: '100%',
                 border: '1px solid #C4CDD5',
                 borderRadius: '6px',
@@ -189,10 +201,10 @@ export const DocumentList = (props) => {
                         } }, doc.name)),
                 React.createElement(Grid, { item: true, xs: 12 },
                     React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, getDocumentSize(doc)))),
-            (isFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
+            (isUnsavedFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
                 React.createElement(IconButton, { "aria-label": "open document", sx: { ...styles.icon, marginRight: '16px' }, onClick: () => openDocument(index) },
                     React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))),
-            !isFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
+            !isFile(doc) && !isUnsavedFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
                     marginRight: '16px',
                     backgroundColor: 'rgba(222, 48, 36, 0.16)',
                     color: '#A91813',

package/dist/published/components/custom/FormV2/components/FormFieldTypes/FileContent.d.ts

@@ -0,0 +1,12 @@
+import { DocumentParameterValidation } from '@evoke-platform/context';
+import React from 'react';
+type FileContentProps = {
+    id: string;
+    canUpdateProperty: boolean;
+    error: boolean;
+    validate?: DocumentParameterValidation;
+    value: File | undefined;
+    hasDescription?: boolean;
+};
+export declare const FileContent: (props: FileContentProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,197 @@
+import { useApiServices } from '@evoke-platform/context';
+import prettyBytes from 'pretty-bytes';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { FileWithExtension, InfoRounded, LaunchRounded, TrashCan, UploadCloud } from '../../../../../icons';
+import { useFormContext } from '../../../../../theme/hooks';
+import { IconButton, Snackbar, Typography } from '../../../../core';
+import { Box, Grid } from '../../../../layout';
+import { getPrefixedUrl } from '../utils';
+import mime from 'mime';
+export const FileContent = (props) => {
+    const { id, canUpdateProperty, error, validate, hasDescription, value } = props;
+    const { handleChange, instance } = useFormContext();
+    const apiServices = useApiServices();
+    const [snackbarError, setSnackbarError] = useState();
+    const [file, setFile] = useState(value);
+    const [hasReadAccess, setHasReadAccess] = useState(false);
+    const maxSizeInBytes = Number.isFinite(validate?.maxSizeInKB)
+        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            validate.maxSizeInKB * 1000 // convert to bytes
+        : undefined;
+    const formattedMaxSize = maxSizeInBytes !== undefined ? prettyBytes(maxSizeInBytes) : '';
+    const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
+        onDrop: (files) => handleUpload(files),
+        disabled: !!file,
+        accept: validate?.allowedFileExtensions
+            ? {
+                'type/custom': validate.allowedFileExtensions.map((extension) => extension.startsWith('.') ? extension : `.${extension}`),
+            }
+            : undefined,
+        maxSize: maxSizeInBytes,
+    });
+    let allowedTypesMessage = '';
+    if (validate?.allowedFileExtensions?.length) {
+        if (validate.allowedFileExtensions.length === 1) {
+            allowedTypesMessage = `Only ${validate.allowedFileExtensions[0]} files are allowed`;
+        }
+        else {
+            allowedTypesMessage = `Allowed file types are: ${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
+        }
+    }
+    useEffect(() => {
+        setFile(value);
+    }, [value]);
+    const checkPermissions = useCallback(async () => {
+        if (instance) {
+            try {
+                const response = await apiServices.get(getPrefixedUrl(`/objects/${instance.objectId}/instances/${instance.id}/checkAccess`), {
+                    params: {
+                        action: 'read',
+                        field: 'content',
+                    },
+                });
+                setHasReadAccess(response.result);
+            }
+            catch (error) {
+                setHasReadAccess(false);
+            }
+        }
+        else {
+            setHasReadAccess(true);
+        }
+    }, [apiServices, instance]);
+    useEffect(() => {
+        checkPermissions();
+    }, [checkPermissions]);
+    const handleUpload = async (files) => {
+        const file = files ? files[0] : undefined;
+        if (file)
+            setFile(file);
+        try {
+            handleChange && (await handleChange(id, file));
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return;
+        }
+    };
+    const viewFileContent = async () => {
+        const contentType = instance ? instance.contentType : file?.type;
+        let url = '';
+        if (file && file.size > 0) {
+            url = URL.createObjectURL(file);
+        }
+        else if (instance) {
+            try {
+                const contentResponse = await apiServices.get(getPrefixedUrl(`/files/${instance.id}/content`), { responseType: 'blob' });
+                const blob = new Blob([contentResponse], { type: contentType });
+                url = window.URL.createObjectURL(blob);
+            }
+            catch (error) {
+                setSnackbarError({
+                    message: `Viewing the contents of ${instance.name} is currently not available.`,
+                    type: 'error',
+                });
+                return;
+            }
+        }
+        if (contentType &&
+            [
+                'application/pdf',
+                'image/jpeg',
+                'image/jpg',
+                'image/png',
+                'image/gif',
+                'image/bmp',
+                'image/webp',
+                'text/plain',
+            ].includes(contentType)) {
+            window.open(url, '_blank');
+        }
+        else {
+            const link = document.createElement('a');
+            link.href = url;
+            link.setAttribute('download', file?.name ?? '');
+            document.body.appendChild(link);
+            link.click();
+            // Clean up and remove the link
+            link.parentNode?.removeChild(link);
+        }
+    };
+    const errors = [];
+    if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-invalid-type'))) {
+        errors.push(`Invalid file extension. ${allowedTypesMessage}`);
+    }
+    if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-too-large'))) {
+        errors.push(`File size exceeds the maximum limit of ${formattedMaxSize}`);
+    }
+    return (React.createElement(React.Fragment, null,
+        file ? (React.createElement(Grid, { container: true, sx: {
+                width: '100%',
+                border: '1px solid #C4CDD5',
+                borderRadius: '6px',
+                margin: '5px 2px',
+                padding: ' 8px',
+                display: 'flex',
+                alignItems: 'center',
+            } },
+            React.createElement(Grid, { item: true, sx: { display: 'flex', justifyContent: 'center', padding: '7px', marginLeft: '4px' } },
+                React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: mime.getExtension(file.type && file.type !== '' ? file.type : instance?.['contentType']) ?? undefined, sx: { height: '1.5em', width: '1.5em' } })),
+            React.createElement(Grid, { item: true, sx: { flex: 1, justifyContent: 'center', paddingBottom: '5px' } },
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { sx: {
+                            fontSize: '14px',
+                            fontWeight: 700,
+                            lineHeight: '15px',
+                            paddingTop: '8px',
+                        } }, file.name)),
+                file.size ? (React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, prettyBytes(file.size)))) : null),
+            canUpdateProperty && (React.createElement(Grid, { item: true },
+                React.createElement(IconButton, { "aria-label": "Delete File", sx: { padding: '3px', color: '#637381', marginRight: '10px' }, onClick: () => {
+                        setFile(undefined);
+                        handleChange && handleChange(id, undefined);
+                    } },
+                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))),
+            hasReadAccess && (React.createElement(Grid, { item: true },
+                React.createElement(IconButton, { "aria-label": "View File Content", sx: { padding: '3px', color: '#637381', marginRight: '16px' }, onClick: () => viewFileContent() },
+                    React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))))) : canUpdateProperty ? (React.createElement(Box, { sx: {
+                margin: '5px 0',
+                height: formattedMaxSize || allowedTypesMessage ? '115px' : '90px',
+                borderRadius: '8px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border: `1px dashed ${error ? 'red' : '#858585'}`,
+                position: 'relative',
+                cursor: 'pointer',
+            }, ...getRootProps(), onClick: open },
+            React.createElement("input", { ...getInputProps({ id }), ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined) }),
+            React.createElement(Grid, { container: true, sx: { width: '100%' } },
+                React.createElement(Grid, { item: true, xs: 12, sx: { display: 'flex', justifyContent: 'center', paddingBottom: '7px' } },
+                    React.createElement(UploadCloud, { sx: { color: '#919EAB', width: '50px', height: '30px' } })),
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { variant: "body2", sx: { color: '#212B36', textAlign: 'center' } },
+                        "Drag and drop or",
+                        ' ',
+                        React.createElement(Typography, { component: 'span', color: 'primary', sx: { fontSize: '14px' } }, "select file"),
+                        ' ',
+                        "to upload"),
+                    allowedTypesMessage && (React.createElement(Typography, { sx: {
+                            color: '#637381',
+                            textAlign: 'center',
+                            fontSize: '12px',
+                        } },
+                        allowedTypesMessage,
+                        ".")),
+                    formattedMaxSize && (React.createElement(Typography, { sx: {
+                            color: '#637381',
+                            textAlign: 'center',
+                            fontSize: '12px',
+                        } }, `Maximum size is ${formattedMaxSize}.`)))))) : (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No file uploaded.")),
+        React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' }),
+        errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
+            React.createElement(InfoRounded, { sx: { fontSize: '.75rem', marginRight: '3px', color: '#D3271B' } }),
+            React.createElement(Typography, { fontSize: '12px', color: '#D3271B', sx: { lineHeight: '18px' } }, errors.join('; ') + '.')))));
+};

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

@@ -56,11 +56,9 @@ const styles = {
 export const Image = (props) => {
     const { id, canUpdateProperty, error, value, hasDescription } = props;
     const { handleChange, onAutosave: onAutosave } = useFormContext();
-    const [image, setImage] = useState();
+    const [image, setImage] = useState(value ?? null);
     useEffect(() => {
-        if (typeof value === 'string') {
-            setImage(value);
-        }
+        setImage(value ?? null);
     }, [value]);
     const handleUpload = async (file) => {
         // max file size 300KB

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

@@ -102,6 +102,20 @@ const InstanceLookup = (props) => {
                             },
                         });
                     }
+                    else if (property.type === 'fileContent') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueGetter: (params) => {
+                                const row = params.row;
+                                // Currently the `fileContent` property type is only supported on the `sys__file` system object.
+                                // Display the 'name' property of the `sys__file` instance.
+                                return row['name'];
+                            },
+                        });
+                    }
                     else if (property.type === 'date') {
                         columns.push({
                             field: prop.id,

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

@@ -1,7 +1,7 @@
 import { useApiServices } from '@evoke-platform/context';
 import { DialogActions } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
-import { isEmpty } from 'lodash';
+import { isEmpty, pick } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Close } from '../../../../../../icons';
 import useWidgetSize, { useFormContext } from '../../../../../../theme/hooks';
@@ -95,11 +95,15 @@ const RelatedObjectInstance = (props) => {
             // Handle the case where relatedObject is undefined
             return;
         }
+        const action = relatedObject.actions?.find((act) => act.id === actionId);
+        const parameters = action?.parameters || [];
         submission = await formatSubmission(submission, apiServices, relatedObject.id);
         try {
             const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObject.id}/instances/actions`), {
                 actionId: actionId,
-                input: submission,
+                input: pick(submission, parameters
+                    .filter((param) => param.type !== 'collection' && !param.formula)
+                    .map((param) => param.id)),
             });
             const expandedInstance = await apiServices.get(getPrefixedUrl(`/objects/${relatedObject.id}/instances/${response.id}`), {
                 params: {

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

@@ -13,6 +13,7 @@ import DropdownRepeatableField from './FormFieldTypes/CollectionFiles/DropdownRe
 import RepeatableField from './FormFieldTypes/CollectionFiles/RepeatableField';
 import Criteria from './FormFieldTypes/Criteria';
 import { Document } from './FormFieldTypes/DocumentFiles/Document';
+import { FileContent } from './FormFieldTypes/FileContent';
 import { Image } from './FormFieldTypes/Image';
 import ObjectPropertyInput from './FormFieldTypes/relatedObjectFiles/ObjectPropertyInput';
 import UserProperty from './FormFieldTypes/UserProperty';
@@ -39,7 +40,7 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
 }
 export function RecursiveEntryRenderer(props) {
     const { entry } = props;
-    const { object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, width, } = useFormContext();
+    const { object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, associatedObject, width, } = useFormContext();
     const { isBelow, breakpoints } = useWidgetSize({
         scroll: false,
         defaultWidth: width,
@@ -87,10 +88,9 @@ export function RecursiveEntryRenderer(props) {
         },
     });
     const memorizedCriteria = useMemo(() => {
-        return 'criteria' in validation && validation.criteria && getValues
-            ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
-            : undefined;
-    }, [validation, getValues && getValues(), userAccount, instance]);
+        const criteria = 'criteria' in validation && validation.criteria ? validation.criteria : display?.criteria;
+        return getValues && criteria ? updateCriteriaInputs(criteria, getValues(), userAccount, instance) : undefined;
+    }, [validation, getValues && getValues(), userAccount, instance, display]);
     const memorizedDefaultValueCriteria = useMemo(() => {
         return display?.defaultValue &&
             typeof display.defaultValue === 'object' &&
@@ -154,7 +154,7 @@ export function RecursiveEntryRenderer(props) {
             }
         }
         else if (fieldDefinition.type === 'richText') {
-            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, RichTextEditor ? (React.createElement(RichTextEditor
+            return (React.createElement(FieldWrapper, { key: `${entryId}-${fieldValue}`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, RichTextEditor ? (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
@@ -166,11 +166,15 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'document' || fieldDefinition.type === 'file') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(Document, { id: entryId, error: !!errors?.[entryId], value: fieldValue, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description, validate: validation })));
+                React.createElement(Document, { id: entryId, fieldType: fieldDefinition.type, error: !!errors?.[entryId], value: fieldValue, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description, validate: validation })));
+        }
+        else if (fieldDefinition.type === 'fileContent') {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                React.createElement(FileContent, { id: entryId, error: !!errors?.[entryId], value: fieldValue, hasDescription: !!display?.description, canUpdateProperty: !(entry.type === 'readonlyField'), validate: validation })));
         }
         else if (fieldDefinition.type === 'criteria') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(Criteria, { key: triggerFieldReset ? `${entryId}-reset-true` : `${entryId}-reset-false`, fieldDefinition: fieldDefinition, value: fieldValue, canUpdateProperty: !(entry.type === 'readonlyField'), error: !!errors?.[entryId] })));
+                React.createElement(Criteria, { key: `${entryId}-${fieldValue}`, fieldDefinition: fieldDefinition, value: fieldValue, canUpdateProperty: !(entry.type === 'readonlyField'), error: !!errors?.[entryId] })));
         }
         else {
             // Add `aria-describedby` to ensure screen readers read the description
@@ -198,12 +202,11 @@ export function RecursiveEntryRenderer(props) {
                  * Key remounts the field if a value is changed.
                  * Needed to clear certain fields on discard changes.
                  */
-                key: (fieldDefinition.type === 'choices' ||
+                key: fieldDefinition.type === 'choices' ||
                     fieldDefinition?.type === 'time' ||
-                    fieldDefinition?.type === 'boolean') &&
-                    triggerFieldReset
-                    ? `${entryId}-reset-true`
-                    : `${entryId}-reset-false`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors), errorMessage: undefined },
+                    fieldDefinition?.type === 'boolean'
+                    ? `${entryId}-${fieldValue}`
+                    : undefined, ...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, onChange: handleChange, onBlur: () => {

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

@@ -12,9 +12,10 @@ export type FieldAddress = {
 export type AccessCheck = {
     result: boolean;
 };
-export type SavedDocumentReference = {
+export type DocumentReference = {
     id: string;
     name: string;
+    unsaved?: boolean;
 };
 export type Document = {
     id: string;
@@ -112,3 +113,7 @@ export type InstanceLink = {
     id: string;
     objectId: string;
 };
+export type FileUploadBatchResult = {
+    errorMessage?: string;
+    successfulUploads: DocumentReference[];
+};

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount, ObjWithRoot, PanelViewEntry } from '@evoke-platform/context';
+import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, ObjWithRoot, PanelViewEntry, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
 import { LocalDateTime } from '@js-joda/core';
 import { FieldErrors, FieldValues } from 'react-hook-form';
 import { ObjectProperty } from '../../../../types';
 import { AutocompleteOption } from '../../../core';
-import { InstanceLink, SavedDocumentReference } from './types';
+import { DocumentReference, FileUploadBatchResult, InstanceLink } from './types';
 export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
 export declare const normalizeDateTime: (dateTime: LocalDateTime) => string;
 export declare function isAddressProperty(key: string): boolean;
@@ -50,16 +50,13 @@ export declare const convertPropertiesToParams: (object: Obj) => InputParameter[
 export declare function getUnnestedEntries(entries: FormEntry[]): FormEntry[];
 export declare const isEmptyWithDefault: (fieldValue: unknown, entry: InputParameterReference | InputField, instance: Record<string, unknown> | object) => boolean | "" | 0 | undefined;
 export declare const docProperties: Property[];
-/**
- * Upload files using the POST /files endpoint for sys__file objects
- */
-export declare const uploadFiles: (files: (File | SavedDocumentReference)[], apiServices: ApiServices, actionId?: string, metadata?: Record<string, string>, linkTo?: InstanceLink) => Promise<SavedDocumentReference[]>;
+export declare const uploadFiles: (files: (File | DocumentReference)[], apiServices: ApiServices, actionId?: string, fileObjectId?: string, linkTo?: InstanceLink, shortCircuit?: boolean) => Promise<FileUploadBatchResult>;
 /**
  * Creates file links for uploaded files by calling the objects endpoint with sys__fileLink
  * This is used after instance creation when the instance ID becomes available
  */
-export declare const createFileLinks: (files: SavedDocumentReference[], linkedInstance: InstanceLink, apiServices: ApiServices) => Promise<void>;
-export declare const uploadDocuments: (files: (File | SavedDocumentReference)[], metadata: Record<string, string>, apiServices: ApiServices, instanceId: string, objectId: string) => Promise<SavedDocumentReference[]>;
+export declare const createFileLinks: (fileReferences: DocumentReference[], linkedInstance: InstanceLink, apiServices: ApiServices) => Promise<void>;
+export declare const uploadDocuments: (files: (File | DocumentReference)[], metadata: Record<string, string>, apiServices: ApiServices, instanceId: string, objectId: string) => Promise<DocumentReference[]>;
 export declare const deleteDocuments: (submittedFields: FieldValues, requestSuccess: boolean, apiServices: ApiServices, object: Obj, instance: FieldValues, action?: Action, setSnackbarError?: React.Dispatch<React.SetStateAction<{
     showAlert: boolean;
     message?: string;
@@ -85,6 +82,7 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
 }>>, associatedObject?: {
     instanceId: string;
     propertyId: string;
+    objectId?: string;
 }, parameters?: InputParameter[]): Promise<FieldValues>;
 export declare function filterEmptySections(entry: Sections | Columns, instance?: FieldValues, formData?: FieldValues): Sections | Columns | null;
 export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | PanelViewEntry[], object: Obj, parameters?: InputParameter[]): FormEntry[] | PanelViewEntry[];
@@ -103,6 +101,10 @@ export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | Pa
 export declare function plainTextToRtf(plainText: string): string;
 export declare function getFieldDefinition(entry: FormEntry | PanelViewEntry, object: Obj, parameters?: InputParameter[]): InputParameter | Property | undefined;
 export declare function obfuscateValue(value: unknown, property?: Partial<Property> | Partial<ObjectProperty>): unknown;
+export declare function handleFileUpload(apiServices: ApiServices, submission: FieldValues, actionId: string, objectId?: string, instanceId?: string, linkTo?: {
+    instanceId: string;
+    objectId: string;
+}): Promise<ObjectInstance>;
 export declare function useFormById(formId: string, apiServices: ApiServices, errorMessage?: string): import("@tanstack/react-query/build/legacy/types").UseQueryResult<EvokeForm, Error>;
 /**
  * Extract all values from a criteria/filter object.