@evoke-platform/ui-components 1.12.0-dev.0 → 1.12.0-dev.2

package/dist/published/components/custom/Form/Common/Form.js

@@ -62,6 +62,7 @@ export function Form(props) {
             TextField: FormFieldComponent,
             Decimal: FormFieldComponent,
             Document: DocumentComponent,
+            File: DocumentComponent,
             Integer: FormFieldComponent,
             Buttons: ButtonComponent,
             Content: Components.components.content,
@@ -241,7 +242,8 @@ export function Form(props) {
         else if (object?.properties) {
             // If form.io form is not configured and no inputProperties are
             // set, use object properties to build form.
-            const propertiesInForm = object.properties.filter((prop) => prop.id !== associatedObject?.propertyId && (action?.type !== 'create' || prop.type !== 'document'));
+            const propertiesInForm = object.properties.filter((prop) => prop.id !== associatedObject?.propertyId &&
+                (action?.type !== 'create' || !['document', 'file'].includes(prop.type)));
             const components = buildComponentPropsFromObjectProperties(propertiesInForm, object.id, instance, {
                 ...objectInputCommonProps,
                 defaultPages: allDefaultPages,
@@ -284,8 +286,8 @@ export function Form(props) {
     };
     const saveDocuments = async (submittedFields, action) => {
         const documentProperties = action?.parameters
-            ? action.parameters.filter((param) => param.type === 'document')
-            : object?.properties?.filter((prop) => prop.type === 'document');
+            ? action.parameters.filter((param) => ['document', 'file'].includes(param.type))
+            : object?.properties?.filter((prop) => ['document', 'file'].includes(prop.type));
         let allEntries = null;
         for (const docProperty of documentProperties ?? []) {
             const currentValue = submittedFields[docProperty.id];
@@ -330,8 +332,8 @@ export function Form(props) {
     };
     const deleteDocuments = async (submittedFields, requestSuccess, action) => {
         const documentProperties = action?.parameters
-            ? action.parameters.filter((param) => param.type === 'document')
-            : object?.properties?.filter((prop) => prop.type === 'document');
+            ? action.parameters.filter((param) => ['document', 'file'].includes(param.type))
+            : object?.properties?.filter((prop) => ['document', 'file'].includes(prop.type));
         for (const docProperty of documentProperties ?? []) {
             const savedValue = submittedFields[docProperty.id];
             const originalValue = instance?.[docProperty.id];
@@ -340,11 +342,17 @@ export function Form(props) {
                 : (savedValue?.filter((file) => !originalValue?.some((f) => f.id === file.id)) ?? []);
             for (const doc of documentsToRemove) {
                 try {
-                    await apiServices?.delete(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}`));
+                    // Use different endpoints based on property type
+                    const deleteEndpoint = docProperty.type === 'file'
+                        ? getPrefixedUrl(`/files/${doc.id}`)
+                        : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}`);
+                    await apiServices?.delete(deleteEndpoint);
                 }
                 catch (error) {
                     if (error.response?.status !== 404) {
-                        setSnackbarError({ message: `An error occurred while removing document '${doc.name}'` });
+                        setSnackbarError({
+                            message: `An error occurred while removing ${docProperty.type === 'file' ? 'file' : 'document'} '${doc.name}'`,
+                        });
                     }
                 }
             }

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

@@ -40,8 +40,13 @@ export const Document = (props) => {
     }, []);
     const checkPermissions = () => {
         if (canUpdateProperty) {
+            // 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/${instance.id}/checkAccess?action=update`)
+                : getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=update`);
             apiServices
-                .get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=update`))
+                .get(endpoint)
                 .then((accessCheck) => setHasUpdatePermission(accessCheck.result))
                 .catch(() => setHasUpdatePermission(false));
         }

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

@@ -36,13 +36,19 @@ export const DocumentList = (props) => {
         }
     }, [property]);
     const getDocuments = (currentDocumentIds, shouldRetry = true) => {
-        apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents`), {
+        // For 'file' type properties, fetch sys__file instances directly
+        // For 'document' type properties, fetch attachment documents
+        const endpoint = property.type === 'file'
+            ? getPrefixedUrl(`/objects/sys__file/instances`)
+            : getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents`);
+        apiServices.get(endpoint, {
             params: { filter: { where: { id: { inq: currentDocumentIds } } } },
         }, (error, docs) => {
             // 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 || currentDocumentIds.some((docId) => !docs.find((doc) => docId === doc.id)))) {
+                (!docs ||
+                    currentDocumentIds.some((docId) => !docs.find((doc) => docId === doc.id)))) {
                 setTimeout(() => getDocuments(currentDocumentIds, false), 2000);
             }
             else if (error) {
@@ -58,9 +64,12 @@ export const DocumentList = (props) => {
     }, []);
     const checkPermissions = () => {
         if (instance?.[property.id]?.length) {
-            apiServices
-                .get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=view`))
-                .then((accessCheck) => setHasViewPermission(accessCheck.result));
+            // 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/${instance.id}/checkAccess?action=view`)
+                : getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=view`);
+            apiServices.get(endpoint).then((accessCheck) => setHasViewPermission(accessCheck.result));
         }
     };
     const isFile = (doc) => doc instanceof File;
@@ -78,7 +87,12 @@ export const DocumentList = (props) => {
                 : savedDocuments?.find((savedDocument) => savedDocument.id === doc.id)?.contentType;
             if (!isFile(doc)) {
                 try {
-                    const documentResponse = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/${doc.id}/content`), { responseType: 'blob' });
+                    // For 'file' type properties, use /files/{id}/content endpoint
+                    // For 'document' type properties, use /objects/{id}/instances/{id}/documents/{id}/content endpoint
+                    const contentEndpoint = property.type === 'file'
+                        ? getPrefixedUrl(`/files/${doc.id}/content`)
+                        : getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/${doc.id}/content`);
+                    const documentResponse = await apiServices.get(contentEndpoint, { responseType: 'blob' });
                     const blob = new Blob([documentResponse], { type: contentType });
                     url = window.URL.createObjectURL(blob);
                 }

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

@@ -25,6 +25,8 @@ export function determineComponentType(properties, parameter) {
         }
         case 'document':
             return 'Document';
+        case 'file':
+            return 'File';
         case 'array':
             return 'MultiSelect';
         case 'number':
@@ -161,7 +163,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 rows: displayOptions?.rowCount,
                 key: parameter.id,
                 type,
-                multiple: ['array', 'document'].includes(parameter.type),
+                multiple: ['array', 'document', 'file'].includes(parameter.type),
                 data: {
                     values: entry.type === 'input' ? entry.enumWithLabels : undefined,
                 },
@@ -227,19 +229,19 @@ export function convertFormToComponents(entries, parameters, object) {
                     max: ['integer', 'number'].includes(parameter.type ?? '')
                         ? parameter.validation?.maximum
                         : undefined,
-                    minDocuments: parameter.type === 'document'
+                    minDocuments: ['document', 'file'].includes(parameter.type ?? '')
                         ? parameter.validation?.minDocuments
                         : undefined,
-                    maxDocuments: parameter.type === 'document'
+                    maxDocuments: ['document', 'file'].includes(parameter.type ?? '')
                         ? parameter.validation?.maxDocuments
                         : undefined,
-                    allowedFileExtensions: parameter.type === 'document'
+                    allowedFileExtensions: ['document', 'file'].includes(parameter.type ?? '')
                         ? parameter.validation?.allowedFileExtensions
                         : undefined,
-                    maxSizeInKB: parameter.type === 'document'
+                    maxSizeInKB: ['document', 'file'].includes(parameter.type ?? '')
                         ? parameter.validation?.maxSizeInKB
                         : undefined,
-                    customMessage: ['integer', 'number', 'date', 'time', 'document'].includes(parameter.type ?? '')
+                    customMessage: ['integer', 'number', 'date', 'time', 'document', 'file'].includes(parameter.type ?? '')
                         ? parameter.validation
                             ?.errorMessage
                         : '',
@@ -254,7 +256,9 @@ export function convertFormToComponents(entries, parameters, object) {
                 conditional: convertVisibilityToConditional(displayOptions?.visibility),
                 viewLayout: displayOptions?.viewLayout,
                 strictlyTrue: parameter.type === 'boolean' && parameter.strictlyTrue,
-                documentMetadata: parameter.type === 'document' ? entry.documentMetadata : undefined,
+                documentMetadata: ['document', 'file'].includes(parameter.type ?? '')
+                    ? entry.documentMetadata
+                    : undefined,
             };
         }
     })
@@ -454,7 +458,7 @@ export function getMiddleInstance(instanceId, property, middleObjectInstances) {
 // The following function is used to prefix the URL with the appropriate path.
 export function getPrefixedUrl(url) {
     const wcsMatchers = ['/apps', '/pages', '/widgets'];
-    const dataMatchers = ['/objects', '/correspondenceTemplates', '/documents', '/payments', '/locations'];
+    const dataMatchers = ['/objects', '/correspondenceTemplates', '/documents', '/files', '/payments', '/locations'];
     const signalrMatchers = ['/hubs'];
     const accessManagementMatchers = ['/users'];
     const workflowMatchers = ['/workflows'];
@@ -664,7 +668,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                         properties,
                         type: `${readOnly ? 'ViewOnly' : ''}${component.type}`,
                         readOnly: component.readOnly || readOnly || property?.formula,
-                        multiple: ['array', 'document'].includes(property.type),
+                        multiple: ['array', 'document', 'file'].includes(property.type),
                         instance: instance,
                         fromFormBuilder: true,
                         apiServices: objectPropertyInputProps?.apiServices,
@@ -708,7 +712,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                     property,
                     associatedObject,
                     readOnly: component.readOnly || readOnly || property?.formula,
-                    multiple: ['array', 'document'].includes(property.type),
+                    multiple: ['array', 'document', 'file'].includes(property.type),
                     instance: instance,
                     fromFormBuilder: true,
                     apiServices: objectPropertyInputProps?.apiServices,
@@ -1115,7 +1119,7 @@ export const buildComponentPropsFromObjectProperties = (properties, objectId, in
             key: property.id,
             label: property.name,
             inputMask: property.mask,
-            multiple: ['array', 'document'].includes(property.type),
+            multiple: ['array', 'document', 'file'].includes(property.type),
             readOnly: !hasActionPermissions || readOnly || !!property?.formula,
             instance: instance,
             validate: {
@@ -1155,7 +1159,7 @@ export const buildComponentPropsFromObjectProperties = (properties, objectId, in
                             : 'Property is not in a valid format',
                     })),
                 }),
-                ...(property.type === 'document' &&
+                ...(['document', 'file'].includes(property.type) &&
                     property.validation && {
                     minDocuments: property.validation.minDocuments,
                     maxDocuments: property.validation.maxDocuments,

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

@@ -27,7 +27,11 @@ export const DocumentList = (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 propertyType = object?.properties?.find((p) => p.id === id)?.type;
+    const isFileType = propertyType === 'file';
     const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
+    // savedDocuments is either FileInstance[] or DocumentType[], never a mix
     const [savedDocuments, setSavedDocuments] = useState(fetchedOptions[`${id}SavedDocuments`]);
     useEffect(() => {
         const currentValue = instance?.[id];
@@ -49,13 +53,19 @@ export const DocumentList = (props) => {
         }
     }, [fetchedOptions]);
     const getDocuments = (currentDocumentIds, shouldRetry = true) => {
-        apiServices.get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents`), {
+        // For 'file' type properties, fetch sys__file instances directly
+        // For 'document' type properties, fetch attachment documents
+        const endpoint = isFileType
+            ? getPrefixedUrl(`/objects/sys__file/instances`)
+            : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents`);
+        apiServices.get(endpoint, {
             params: { filter: { where: { id: { inq: currentDocumentIds } } } },
         }, (error, docs) => {
             // 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 || currentDocumentIds.some((docId) => !docs.find((doc) => docId === doc.id)))) {
+                (!docs ||
+                    currentDocumentIds.some((docId) => !docs.find((doc) => docId === doc.id)))) {
                 setTimeout(() => getDocuments(currentDocumentIds, false), 2000);
             }
             else if (error) {
@@ -114,7 +124,12 @@ export const DocumentList = (props) => {
                 : savedDocuments?.find((savedDocument) => savedDocument.id === doc.id)?.contentType;
             if (!isFile(doc)) {
                 try {
-                    const documentResponse = await apiServices.get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}/content`), { responseType: 'blob' });
+                    // 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' });
                     const blob = new Blob([documentResponse], { type: contentType });
                     url = window.URL.createObjectURL(blob);
                 }

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

@@ -134,7 +134,7 @@ export function RecursiveEntryRenderer(props) {
                     });
                 }, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, size: fieldHeight }))));
         }
-        else if (fieldDefinition.type === 'document') {
+        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 })));
         }

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

@@ -27,6 +27,14 @@ export type Document = {
     };
     versionId?: string;
 };
+export type FileInstance = {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    dateUploaded: string;
+    uploadedBy: string;
+};
 export type SimpleEditorProps = {
     id: string;
     value: string;

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

@@ -49,6 +49,10 @@ 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>) => Promise<SavedDocumentReference[]>;
 export declare const uploadDocuments: (files: (File | SavedDocumentReference)[], metadata: Record<string, string>, apiServices: ApiServices, instanceId: string, objectId: string) => Promise<SavedDocumentReference[]>;
 export declare const deleteDocuments: (submittedFields: FieldValues, requestSuccess: boolean, apiServices: ApiServices, object: Obj, instance: FieldValues, action?: Action, setSnackbarError?: React.Dispatch<React.SetStateAction<{
     showAlert: boolean;

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

@@ -469,6 +469,33 @@ export const docProperties = [
         type: 'string',
     },
 ];
+/**
+ * Upload files using the POST /files endpoint for sys__file objects
+ */
+export const uploadFiles = async (files, apiServices, actionId = '_create', metadata) => {
+    // Separate already uploaded files from files that need uploading
+    const alreadyUploaded = files.filter((file) => !('size' in file));
+    const filesToUpload = files.filter((file) => 'size' in file);
+    // Upload all files in parallel
+    const uploadPromises = filesToUpload.map(async (file) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('actionId', actionId);
+        formData.append('objectId', 'sys__file');
+        if (metadata) {
+            for (const [key, value] of Object.entries(metadata)) {
+                formData.append(key, value);
+            }
+        }
+        const fileInstance = await apiServices.post(getPrefixedUrl(`/files`), formData);
+        return {
+            id: fileInstance.id,
+            name: fileInstance.name,
+        };
+    });
+    const uploadedFiles = await Promise.all(uploadPromises);
+    return [...alreadyUploaded, ...uploadedFiles];
+};
 export const uploadDocuments = async (files, metadata, apiServices, instanceId, objectId) => {
     const allDocuments = [];
     const formData = new FormData();
@@ -494,8 +521,8 @@ export const uploadDocuments = async (files, metadata, apiServices, instanceId,
 };
 export const deleteDocuments = async (submittedFields, requestSuccess, apiServices, object, instance, action, setSnackbarError) => {
     const documentProperties = action?.parameters
-        ? action.parameters.filter((param) => param.type === 'document')
-        : object?.properties?.filter((prop) => prop.type === 'document');
+        ? action.parameters.filter((param) => ['document', 'file'].includes(param.type))
+        : object?.properties?.filter((prop) => ['document', 'file'].includes(prop.type));
     for (const docProperty of documentProperties ?? []) {
         const savedValue = submittedFields[docProperty.id];
         const originalValue = instance?.[docProperty.id];
@@ -504,14 +531,18 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
             : (savedValue?.filter((file) => !originalValue?.some((f) => f.id === file.id)) ?? []);
         for (const doc of documentsToRemove) {
             try {
-                await apiServices?.delete(getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/${doc.id}`));
+                // Use different endpoints based on property type
+                const deleteEndpoint = docProperty.type === 'file'
+                    ? getPrefixedUrl(`/files/${doc.id}`)
+                    : getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/${doc.id}`);
+                await apiServices?.delete(deleteEndpoint);
             }
             catch (error) {
                 if (error) {
                     setSnackbarError &&
                         setSnackbarError({
                             showAlert: true,
-                            message: `An error occurred while removing document '${doc.name}'`,
+                            message: `An error occurred while removing ${docProperty.type === 'file' ? 'file' : 'document'} '${doc.name}'`,
                             isError: true,
                         });
                 }
@@ -543,12 +574,19 @@ export async function formatSubmission(submission, apiServices, objectId, instan
             // Only upload if array contains File instances (not SavedDocumentReference)
             const fileInArray = value.some((item) => item instanceof File);
             if (fileInArray && instanceId && apiServices && objectId) {
+                // Determine property type from the entry
+                const propertyType = entry?.input?.type;
                 try {
-                    const uploadedDocuments = await uploadDocuments(value, {
-                        type: '',
-                        view_permission: '',
-                        ...entry?.documentMetadata,
-                    }, apiServices, instanceId, objectId);
+                    // Use uploadFiles for 'file' type, uploadDocuments for 'document' type
+                    const uploadedDocuments = propertyType === 'file'
+                        ? await uploadFiles(value, apiServices, '_create', {
+                            ...entry?.documentMetadata,
+                        })
+                        : await uploadDocuments(value, {
+                            type: '',
+                            view_permission: '',
+                            ...entry?.documentMetadata,
+                        }, apiServices, instanceId, objectId);
                     submission[key] = uploadedDocuments;
                 }
                 catch (err) {
@@ -556,7 +594,7 @@ export async function formatSubmission(submission, apiServices, objectId, instan
                         setSnackbarError &&
                             setSnackbarError({
                                 showAlert: true,
-                                message: `An error occurred while uploading associated documents`,
+                                message: `An error occurred while uploading associated ${propertyType === 'file' ? 'files' : 'documents'}`,
                                 isError: true,
                             });
                     }

package/dist/published/components/custom/ViewDetailsV2/InstanceEntryRenderer.js

@@ -129,8 +129,8 @@ function ViewOnlyEntryRenderer(props) {
                         // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
                         id: entry.uniqueId, value: fieldValue, format: "rtf", disabled: true, rows: display?.rowCount, hasError: false })) : (React.createElement(Typography, { variant: "body1", key: entryId, sx: { height: '24px' } }, fieldValue))));
                 }
-                else if (fieldDefinition.type === 'document') {
-                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'document', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, prefix: display?.prefix, suffix: display?.suffix, viewOnly: true },
+                else if (fieldDefinition.type === 'document' || fieldDefinition.type === 'file') {
+                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: fieldDefinition.type, label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, prefix: display?.prefix, suffix: display?.suffix, viewOnly: true },
                         React.createElement(Document, { id: entryId, error: false, value: fieldValue, canUpdateProperty: false })));
                 }
                 else if (fieldDefinition.type === 'collection') {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.12.0-dev.0",
+    "version": "1.12.0-dev.2",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -96,7 +96,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.6.0",
+        "@evoke-platform/context": "^1.7.0-0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },