@evoke-platform/ui-components 1.16.0 → 1.17.0

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

@@ -10,7 +10,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Button, IconButton, Skel
 import { Box } from '../../../../../layout';
 import { getReadableQuery } from '../../../../CriteriaBuilder';
 import { retrieveCustomErrorMessage } from '../../../../Form/utils';
-import { convertPropertiesToParams, deleteDocuments, formatSubmission, getPrefixedUrl, handleFileUpload, transformToWhere, useFormById, } from '../../utils';
+import { convertPropertiesToParams, deleteDocuments, formatSubmission, getPrefixedUrl, transformToWhere, useFormById, } from '../../utils';
 import { ActionDialog } from './ActionDialog';
 import { DocumentViewerCell } from './DocumentViewerCell';
 const styles = {
@@ -258,34 +258,20 @@ const RepeatableField = (props) => {
                 : dialogType === 'update'
                     ? entry.display?.updateActionId
                     : entry.display?.deleteActionId));
-        const relatedProperty = relatedObject?.properties?.find((p) => p.id === fieldDefinition.relatedPropertyId);
         // when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
-        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : action?.type === 'delete' ? deleteForm : createForm, undefined, instance?.id && fieldDefinition.relatedPropertyId
-            ? {
-                instanceId: instance.id,
-                propertyId: fieldDefinition.relatedPropertyId,
-                objectId: !relatedProperty?.objectId ? instance.objectId : undefined,
-            }
+        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : undefined, undefined, instance?.id && fieldDefinition.relatedPropertyId
+            ? { instanceId: instance.id, propertyId: fieldDefinition.relatedPropertyId }
             : undefined, action?.parameters ?? (relatedObject && convertPropertiesToParams(relatedObject)));
-        if (action?.type === 'create' && action.id) {
+        if (action?.type === 'create' && entry.display?.createActionId) {
             const updatedInput = {
                 ...input,
-                [fieldDefinition?.relatedPropertyId]: {
-                    id: instance?.id,
-                    objectId: !relatedProperty?.objectId ? instance?.objectId : undefined,
-                },
+                [fieldDefinition?.relatedPropertyId]: { id: instance?.id },
             };
             try {
-                let instance = undefined;
-                if (relatedObject?.rootObjectId === 'sys__file') {
-                    instance = await handleFileUpload(apiServices, updatedInput, action.id, fieldDefinition.objectId);
-                }
-                else {
-                    instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
-                        actionId: action.id,
-                        input: updatedInput,
-                    });
-                }
+                const instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
+                    actionId: entry.display?.createActionId,
+                    input: updatedInput,
+                });
                 queryClient.setQueryData(relatedInstancesQueryKey, (oldData) => {
                     if (!oldData)
                         return [instance];
@@ -307,19 +293,12 @@ const RepeatableField = (props) => {
         else {
             const relatedObjectId = relatedObject?.id;
             try {
-                let response = undefined;
-                const submission = omit(input, relatedObject?.properties
-                    ?.filter((property) => property.formula || property.type === 'collection')
-                    .map((property) => property.id) ?? []);
-                if (relatedObject?.rootObjectId === 'sys__file' && action?.id) {
-                    response = await handleFileUpload(apiServices, submission, action.id, relatedObjectId, selectedInstanceId);
-                }
-                else {
-                    response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${selectedInstanceId}/actions`), {
-                        actionId: action?.id ?? `_${action?.type}`,
-                        input: submission,
-                    });
-                }
+                const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${selectedInstanceId}/actions`), {
+                    actionId: `_${action?.type}`,
+                    input: omit(input, relatedObject?.properties
+                        ?.filter((property) => property.formula || property.type === 'collection')
+                        .map((property) => property.id) ?? []),
+                });
                 if (response && relatedObject && instance) {
                     deleteDocuments(input, !!response, apiServices, relatedObject, instance, action);
                 }
@@ -472,7 +451,7 @@ const RepeatableField = (props) => {
                         React.createElement(TableRow, null,
                             columns?.map((prop) => (React.createElement(TableCell, { sx: styles.tableCell }, prop.name))),
                             canUpdateProperty && React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
-                    React.createElement(TableBody, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
+                    React.createElement(TableBody, { sx: { backgroundColor: 'white' } }, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
                         columns?.map((prop) => {
                             return (React.createElement(TableCell, { sx: { fontSize: '16px' } }, prop.type === 'document' ? (React.createElement(DocumentViewerCell, { instance: relatedInstance, propertyId: prop.id, setSnackbarError: setSnackbarError })) : (React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
                                     ? {
@@ -512,13 +491,7 @@ const RepeatableField = (props) => {
                             ? '_auto_'
                             : deleteForm?.id
                         : undefined, instanceId: selectedInstanceId, relatedParameter: fieldDefinition, associatedObject: instance?.id && fieldDefinition.relatedPropertyId
-                ? {
-                    instanceId: instance.id,
-                    propertyId: fieldDefinition.relatedPropertyId,
-                    objectId: !relatedObject?.properties?.find((p) => p.id === fieldDefinition.relatedPropertyId)?.objectId
-                        ? instance.objectId
-                        : undefined,
-                }
+                ? { instanceId: instance.id, propertyId: fieldDefinition.relatedPropertyId }
                 : undefined })),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));
 };

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.d.ts

@@ -1,13 +1,12 @@
 import { DocumentParameterValidation } from '@evoke-platform/context';
 import React from 'react';
-import { DocumentReference } from '../../types';
+import { SavedDocumentReference } from '../../types';
 type DocumentProps = {
     id: string;
-    fieldType?: 'file' | 'document';
     canUpdateProperty: boolean;
     error: boolean;
     validate?: DocumentParameterValidation;
-    value: (File | DocumentReference)[] | undefined;
+    value: (File | SavedDocumentReference)[] | undefined;
     hasDescription?: boolean;
 };
 export declare const Document: (props: DocumentProps) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import { useApiServices, } from '@evoke-platform/context';
+import { useApiServices } from '@evoke-platform/context';
 import { useQuery } from '@tanstack/react-query';
 import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
@@ -7,12 +7,12 @@ import { InfoRounded, UploadCloud } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Skeleton, Snackbar, Typography } from '../../../../../core';
 import { Box, Grid } from '../../../../../layout';
-import { getEntryId, getPrefixedUrl, getUnnestedEntries, uploadFiles } from '../../utils';
+import { getPrefixedUrl } from '../../utils';
 import { DocumentList } from './DocumentList';
 export const Document = (props) => {
-    const { id, fieldType = 'document', canUpdateProperty, error, value, validate, hasDescription } = props;
+    const { id, canUpdateProperty, error, value, validate, hasDescription } = props;
     const apiServices = useApiServices();
-    const { object, handleChange, onAutosave: onAutosave, instance, form } = useFormContext();
+    const { object, handleChange, onAutosave: onAutosave, instance } = useFormContext();
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
     let allowedTypesMessage = '';
@@ -32,22 +32,11 @@ export const Document = (props) => {
     useEffect(() => {
         setDocuments(value);
     }, [value]);
-    // Find the entry to get the configured createActionId and fileObjectId
-    const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
-    const entry = allEntries?.find((entry) => getEntryId(entry) === id);
-    const createActionId = entry?.display?.createActionId ?? '_create';
-    // Get the configured objectId from display.fileObjectId, defaulting to sys__file
-    const fileObjectId = entry?.display?.fileObjectId ?? 'sys__file';
-    // For 'file' type properties, check regular object instance permissions
-    // For 'document' type properties, check document attachment permissions
-    const endpoint = fieldType === 'file'
-        ? getPrefixedUrl(`/objects/${fileObjectId}/instances/checkAccess?action=execute&field=${createActionId}`)
-        : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=update`);
     const { data: hasUpdatePermission = false, isLoading } = useQuery({
-        queryKey: ['hasUpdatePermission', object?.id, instance?.id, fieldType, id],
+        queryKey: ['hasDocUpdatePermission', object?.id, instance?.id],
         queryFn: async () => {
             try {
-                const accessCheck = await apiServices.get(endpoint);
+                const accessCheck = await apiServices.get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=update`));
                 return accessCheck.result;
             }
             catch {
@@ -55,36 +44,14 @@ export const Document = (props) => {
             }
         },
         staleTime: Infinity,
-        // For 'file' type fields the permission endpoint only requires the object ID, so the
-        // query can run on create actions where no instance exists yet. For 'document' type
-        // fields the endpoint is instance-scoped, so instance ID is still required.
-        enabled: canUpdateProperty && !!object?.id && (fieldType === 'file' || !!instance?.id),
+        enabled: canUpdateProperty && !!instance?.id && !!object?.id,
     });
     const handleUpload = async (files) => {
-        if (!files?.length) {
-            return;
-        }
-        let uploadedFiles = files;
-        // Get the createActionId and fileObjectId from form entry, default to '_create' and 'sys__file'
-        const allEntries = getUnnestedEntries(form?.entries ?? []);
-        const entry = allEntries?.find((entry) => getEntryId(entry) === id);
-        const createActionId = entry?.display?.createActionId ?? '_create';
-        const fileObjectId = entry?.display?.fileObjectId ?? 'sys__file';
-        // Immediately upload files for 'file' type properties when autosave is not enabled.
-        // Linking will happen upon final submission.
-        // If autosave is enabled, upload and linking will happen in the autosave handler.
-        if (fieldType === 'file' && !onAutosave) {
-            const { successfulUploads, errorMessage } = await uploadFiles(files, apiServices, createActionId, fileObjectId, undefined, false);
-            uploadedFiles = successfulUploads;
-            if (errorMessage) {
-                setSnackbarError({ message: errorMessage, type: 'error' });
-            }
-        }
-        // Store uploaded file references (or File objects) in form state
-        const newDocuments = [...(documents ?? []), ...uploadedFiles];
+        // Store File objects in form state - they will be uploaded during autosave via formatSubmission()
+        const newDocuments = [...(documents ?? []), ...(files ?? [])];
         setDocuments(newDocuments);
         try {
-            await handleChange?.(id, newDocuments);
+            handleChange && (await handleChange(id, newDocuments));
         }
         catch (error) {
             console.error('Failed to update field:', error);
@@ -126,6 +93,7 @@ export const Document = (props) => {
                 border: `1px dashed ${error ? 'red' : uploadDisabled ? '#DFE3E8' : '#858585'}`,
                 position: 'relative',
                 cursor: uploadDisabled ? 'cursor' : 'pointer',
+                backgroundColor: 'white',
             }, ...getRootProps(), onClick: open },
             React.createElement("input", { ...getInputProps({ id }), disabled: uploadDisabled, ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined) }),
             React.createElement(Grid, { container: true, sx: { width: '100%' } },
@@ -152,7 +120,7 @@ export const Document = (props) => {
                         } }, validate?.maxDocuments === 1
                         ? `Maximum size is ${formattedMaxSize}.`
                         : `The maximum size of each document is ${formattedMaxSize}.`)))))),
-        canUpdateProperty && isLoading ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, fieldType: fieldType, handleChange: handleChange, onAutosave: onAutosave, value: documents, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
+        canUpdateProperty && isLoading ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, handleChange: handleChange, onAutosave: onAutosave, value: documents, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
         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' } }),

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
-import { DocumentReference } from '../../types';
+import { SavedDocumentReference } from '../../types';
 type DocumentListProps = {
-    handleChange?: (propertyId: string, value: (File | DocumentReference)[] | undefined) => void;
+    handleChange?: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
     onAutosave?: (fieldId: string) => void | Promise<void>;
     id: string;
-    fieldType?: 'document' | 'file';
     canUpdateProperty: boolean;
-    value: (File | DocumentReference)[] | undefined;
+    value: (File | SavedDocumentReference)[] | undefined;
     setSnackbarError: (type: 'error' | 'success', message: string) => void;
 };
 export declare const DocumentList: (props: DocumentListProps) => React.JSX.Element;

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

@@ -1,5 +1,6 @@
 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';
@@ -24,44 +25,33 @@ const viewableFileTypes = [
     'text/plain',
 ];
 export const DocumentList = (props) => {
-    const { handleChange, onAutosave, id, fieldType = 'document', canUpdateProperty, value: documents, setSnackbarError, } = props;
+    const { handleChange, onAutosave, id, canUpdateProperty, value: documents, setSnackbarError } = props;
     const apiServices = useApiServices();
     const { fetchedOptions, setFetchedOptions, object, instance } = useFormContext();
     // Determine property type once at component level
-    const isFileType = fieldType === 'file';
+    const propertyType = object?.properties?.find((p) => p.id === id)?.type;
+    const isFileType = propertyType === '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 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);
+        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);
             }
-            getDocuments(currentDocumentIds);
         }
-        else {
-            // All IDs have metadata — safe to update the display.
-            setDisplayDocuments(documents);
+    }, [id, documents, object]);
+    useEffect(() => {
+        if (fetchedOptions[`${id}SavedDocuments`]) {
+            setSavedDocuments(fetchedOptions[`${id}SavedDocuments`]);
         }
-    }, [documents, savedDocuments, fieldType, apiServices]);
+    }, [fetchedOptions]);
     const getDocuments = (currentDocumentIds, shouldRetry = true) => {
         // For 'file' type properties, fetch sys__file instances directly
         // For 'document' type properties, fetch attachment documents
@@ -74,7 +64,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?.length ||
+                (!docs ||
                     currentDocumentIds.some((docId) => !docs.find((doc) => docId === doc.id)))) {
                 setTimeout(() => getDocuments(currentDocumentIds, false), 2000);
             }
@@ -82,9 +72,6 @@ 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,
@@ -110,13 +97,12 @@ 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?.(id, newValue);
+            handleChange && (await handleChange(id, newValue));
         }
         catch (error) {
             console.error('Failed to update field:', error);
@@ -130,7 +116,7 @@ export const DocumentList = (props) => {
         }
     };
     const openDocument = async (index) => {
-        const doc = displayDocuments?.[index];
+        const doc = documents?.[index];
         if (doc) {
             let url;
             const contentType = doc instanceof File
@@ -138,7 +124,9 @@ export const DocumentList = (props) => {
                 : savedDocuments?.find((savedDocument) => savedDocument.id === doc.id)?.contentType;
             if (!isFile(doc)) {
                 try {
-                    const contentEndpoint = isFileType
+                    // Determine property type to use the correct endpoint
+                    const propertyType = object?.properties?.find((p) => p.id === id)?.type;
+                    const contentEndpoint = propertyType === 'file'
                         ? getPrefixedUrl(`/files/${doc.id}/content`)
                         : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}/content`);
                     const documentResponse = await apiServices.get(contentEndpoint, { responseType: 'blob' });
@@ -179,8 +167,8 @@ export const DocumentList = (props) => {
         return size;
     };
     return (React.createElement(React.Fragment, null,
-        !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: {
+        !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: {
                 width: '100%',
                 border: '1px solid #C4CDD5',
                 borderRadius: '6px',
@@ -201,10 +189,10 @@ export const DocumentList = (props) => {
                         } }, doc.name)),
                 React.createElement(Grid, { item: true, xs: 12 },
                     React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, getDocumentSize(doc)))),
-            (isUnsavedFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
+            (isFile(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) && !isUnsavedFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
+            !isFile(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/Image.js

@@ -29,6 +29,7 @@ const styles = {
         border: '1px dashed #858585',
         position: 'relative',
         cursor: 'pointer',
+        backgroundColor: 'white',
     },
     icon: {
         color: '#fff',

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

@@ -141,6 +141,8 @@ const UserProperty = (props) => {
                         },
                     }
                     : {}),
+                backgroundColor: 'white',
+                borderRadius: '8px',
             } })), size: fieldHeight ?? 'medium', readOnly: readOnly, error: error })));
 };
 export default UserProperty;

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

@@ -102,20 +102,6 @@ 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/FormletRenderer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FormletReference } from '@evoke-platform/context';
+declare function FormletRenderer(props: {
+    entry: FormletReference;
+}): React.JSX.Element;
+export default FormletRenderer;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useApiServices } from '@evoke-platform/context';
+import { getPrefixedUrl } from './utils';
+import { useQuery } from '@tanstack/react-query';
+import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
+import { Skeleton, Typography } from '../../../core';
+import { Box } from '../../../layout';
+import { WarningRounded } from '../../../../icons';
+function FormletRenderer(props) {
+    const { entry } = props;
+    const apiServices = useApiServices();
+    const { data: formlet, isLoading } = useQuery({
+        queryKey: [entry.formletId, 'formlet'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/formlets/${entry.formletId}`)),
+        staleTime: Infinity,
+        enabled: !!entry.formletId,
+    });
+    if (isLoading)
+        return React.createElement(Skeleton, null);
+    return formlet ? (React.createElement(React.Fragment, null, formlet.entries?.map((formletEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: formletEntry }))))) : (React.createElement(Box, { sx: {
+            display: 'flex',
+            backgroundColor: '#ffc1073b',
+            borderRadius: '8px',
+            padding: '16.5px 14px',
+            marginTop: '6px',
+        } },
+        React.createElement(WarningRounded, { sx: { paddingRight: '8px' }, color: "warning" }),
+        React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "This field was not configured correctly")));
+}
+export default FormletRenderer;

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

@@ -33,14 +33,17 @@ const HtmlView = ({ value }) => {
         quillRef.current.setContents([]);
         quillRef.current.clipboard.dangerouslyPasteHTML(DOMPurify.sanitize(value));
     }, [value]);
-    return (React.createElement(Box, { sx: {
-            width: '100%',
-            height: '100%',
-            '.ql-container.ql-snow': {
-                border: 'none',
-                minHeight: 20,
-            },
-        } },
-        React.createElement("div", { ref: containerRef })));
+    return (
+    // Needs to be wrapped in a Box to prevent quill from setting height: 100% on the container, which causes it to overflow its parent and ignore the maxHeight we set on the containerRef (only happens when in a grid item)
+    React.createElement(Box, null,
+        React.createElement(Box, { sx: {
+                width: '100%',
+                height: '100%',
+                '.ql-container.ql-snow': {
+                    border: 'none',
+                    minHeight: 20,
+                },
+            } },
+            React.createElement("div", { ref: containerRef }))));
 };
 export default HtmlView;

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

@@ -1,5 +1,6 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
+import { Grid } from '@mui/material';
 import { isEmpty } from 'lodash';
 import React, { useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
@@ -13,7 +14,6 @@ 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';
@@ -21,6 +21,7 @@ import FormSections from './FormSections';
 import { entryIsVisible, fetchInitialMiddleObjectInstances, fetchMiddleObject, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
 import HtmlView from './HtmlView';
 import { useQuery } from '@tanstack/react-query';
+import FormletRenderer from './FormletRenderer';
 function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors, validation) {
     return {
         inputId: entryId,
@@ -53,8 +54,6 @@ export function RecursiveEntryRenderer(props) {
     const display = 'display' in entry ? entry.display : undefined;
     const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues ? getValues(entryId) : undefined;
     const fieldDefinition = useMemo(() => {
-        if (!object)
-            return undefined;
         return getFieldDefinition(entry, object, parameters);
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
@@ -88,9 +87,10 @@ export function RecursiveEntryRenderer(props) {
         },
     });
     const memorizedCriteria = useMemo(() => {
-        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]);
+        return 'criteria' in validation && validation.criteria && getValues
+            ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
+            : undefined;
+    }, [validation, getValues && getValues(), userAccount, instance]);
     const memorizedDefaultValueCriteria = useMemo(() => {
         return display?.defaultValue &&
             typeof display.defaultValue === 'object' &&
@@ -166,11 +166,7 @@ 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, 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 })));
+                React.createElement(Document, { id: entryId, error: !!errors?.[entryId], value: fieldValue, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description, validate: validation })));
         }
         else if (fieldDefinition.type === 'criteria') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
@@ -218,16 +214,14 @@ export function RecursiveEntryRenderer(props) {
                         ? display?.booleanDisplay
                         : 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, protection: objectProperty?.protection })));
         }
+        // Forms from the FormV2 widget will get the effective form and will not need this
+        // but it's possible for a form passed into the FormRenderer to include a formlet type
+    }
+    else if (entry.type === 'formlet') {
+        return React.createElement(FormletRenderer, { entry: entry });
     }
     else if (entry.type === 'columns') {
-        return (React.createElement(Box, { sx: {
-                display: 'flex',
-                alignItems: 'flex-start',
-                gap: '30px',
-                flexDirection: isXs ? 'column' : 'row',
-            } }, entry.columns.map((column, colIndex) => (
-        // calculating the width like this rather than flex={column.width} to prevent collections from being too wide
-        React.createElement(Box, { key: colIndex, sx: { width: isXs ? '100%' : `calc(${(column.width / 12) * 100}% - 15px)` } }, column.entries?.map((columnEntry, entryIndex) => {
+        return (React.createElement(Grid, { container: true, columnSpacing: 4 }, entry.columns.map((column, colIndex) => (React.createElement(Grid, { key: colIndex, item: true, xs: isXs ? 12 : column.width }, column.entries?.map((columnEntry, entryIndex) => {
             return (React.createElement(RecursiveEntryRenderer, { key: entryIndex + (columnEntry?.parameterId ?? ''), entry: columnEntry }));
         }))))));
     }

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

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