@evoke-platform/ui-components 1.6.1-dev.1 → 1.7.0-testing.0

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

@@ -5,7 +5,6 @@ import { useDropzone } from 'react-dropzone';
 import { UploadCloud } from '../../../../../icons';
 import { Skeleton, Snackbar, Typography } from '../../../../core';
 import { Box, Grid } from '../../../../layout';
-import { createAcceptObject } from '../../../util';
 import { getPrefixedUrl } from '../../utils';
 import { DocumentList } from './DocumentList';
 export const Document = (props) => {
@@ -16,10 +15,10 @@ export const Document = (props) => {
     let allowedTypesMessage = '';
     if (validate?.allowedFileExtensions?.length) {
         if (validate.allowedFileExtensions.length === 1) {
-            allowedTypesMessage = validate.allowedFileExtensions[0];
+            allowedTypesMessage = `Only ${validate.allowedFileExtensions[0]} files are allowed`;
         }
         else {
-            allowedTypesMessage = `${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
+            allowedTypesMessage = `Allowed file types are: ${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
         }
     }
     const maxSizeInBytes = Number.isFinite(validate?.maxSizeInKB)
@@ -47,25 +46,28 @@ export const Document = (props) => {
         }
     };
     const handleUpload = async (files) => {
-        const newDocuments = [...(documents ?? []), ...(files ?? [])];
+        const newDocuments = [...(documents ?? []), ...files];
         setDocuments(newDocuments);
         handleChange(property.id, newDocuments);
     };
     const uploadDisabled = !!validate?.maxDocuments && (documents?.length ?? 0) >= validate.maxDocuments;
     const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrop: (files) => handleUpload(files),
         disabled: uploadDisabled,
-        accept: validate?.allowedFileExtensions ? createAcceptObject(validate.allowedFileExtensions) : undefined,
+        accept: validate?.allowedFileExtensions
+            ? {
+                'type/custom': validate.allowedFileExtensions.map((extension) => extension.startsWith('.') ? extension : `.${extension}`),
+            }
+            : undefined,
         maxSize: maxSizeInBytes,
     });
     useEffect(() => {
         const errors = [];
         if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-invalid-type'))) {
-            errors.push(`Invalid file extension. Allowed extensions are: ${allowedTypesMessage}`);
+            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 max limit of ${formattedMaxSize}`);
+            errors.push(`File size exceeds the maximum limit of ${formattedMaxSize}`);
         }
         onFileRejections(errors);
     }, [fileRejections, onFileRejections]);
@@ -96,14 +98,16 @@ export const Document = (props) => {
                             color: '#637381',
                             textAlign: 'center',
                             fontSize: '12px',
-                        } }, `${allowedTypesMessage}.`)),
+                        } },
+                        allowedTypesMessage,
+                        ".")),
                     formattedMaxSize && (React.createElement(Typography, { sx: {
                             color: '#637381',
                             textAlign: 'center',
                             fontSize: '12px',
                         } }, validate?.maxDocuments === 1
-                        ? `Max size of ${formattedMaxSize}.`
-                        : `The max size of each document is ${formattedMaxSize}.`)))))),
+                        ? `Maximum size is ${formattedMaxSize}.`
+                        : `The maximum size of each document is ${formattedMaxSize}.`)))))),
         canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })),
         React.createElement(DocumentList, { property: property, instance: instance, objectId: objectId, handleChange: handleChange, value: value, apiServices: apiServices, 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' })));

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentComponent.d.ts

@@ -5,6 +5,7 @@ export declare class DocumentComponent extends ReactComponent {
     [x: string]: any;
     static schema: any;
     errorDetails: any;
+    fileRejectionsErrors: string[];
     componentRoot?: Root;
     constructor(component: any, options: any, data: any);
     init(): void;
@@ -16,7 +17,6 @@ export declare class DocumentComponent extends ReactComponent {
      */
     manageFormErrors(): void;
     handleChange: (key: string, value?: (File | SavedDocumentReference)[] | null) => void;
-    handleFileRejections(fileRejectionsErrors: string[]): void;
     handleValidation(value?: (File | SavedDocumentReference)[] | null): void;
     beforeSubmit(): Promise<void>;
     attachReact(element: Element): void;

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

@@ -13,6 +13,9 @@ export class DocumentComponent extends ReactComponent {
             canUpdateProperty: !component.readOnly,
             hideLabel: true,
         }, options, data);
+        // File rejection errors should be displayed, but shouldn't prevent
+        // submission
+        this.fileRejectionsErrors = [];
         this.handleChange = (key, value) => {
             delete this.errorDetails['api-error'];
             this.setValue(value);
@@ -26,7 +29,6 @@ export class DocumentComponent extends ReactComponent {
         };
         this.errorDetails = {};
         this.handleChange = this.handleChange.bind(this);
-        this.handleFileRejections = this.handleFileRejections.bind(this);
     }
     init() {
         this.on(`api-error`, (details) => {
@@ -61,7 +63,8 @@ export class DocumentComponent extends ReactComponent {
         return !isEmpty(this.errorDetails);
     }
     errorMessages() {
-        return Object.values(this.errorDetails).join(', ');
+        const errors = [...Object.values(this.errorDetails), ...this.fileRejectionsErrors];
+        return errors.join('; ');
     }
     /**
      * Synchronizes out-of-the-box form.io errors with this field's errorDetails object
@@ -88,12 +91,6 @@ export class DocumentComponent extends ReactComponent {
             }
         });
     }
-    handleFileRejections(fileRejectionsErrors) {
-        delete this.errorDetails['file-rejections'];
-        if (fileRejectionsErrors.length > 0) {
-            this.errorDetails['file-rejections'] = `${fileRejectionsErrors.join('; ')}.`;
-        }
-    }
     handleValidation(value) {
         const validate = this.component.validate;
         const amountOfDocuments = value?.length ?? 0;
@@ -138,6 +135,6 @@ export class DocumentComponent extends ReactComponent {
         const inputId = `${this.component.id}-input`;
         return ReactDOM.render(React.createElement("div", null,
             React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
-                React.createElement(Document, { ...this.component, id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue, onFileRejections: this.handleFileRejections }))), root);
+                React.createElement(Document, { ...this.component, id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue, onFileRejections: (errors) => (this.fileRejectionsErrors = errors) }))), root);
     }
 }

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

@@ -7,7 +7,6 @@ import { InfoRounded, UploadCloud } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Skeleton, Snackbar, Typography } from '../../../../../core';
 import { Box, Grid } from '../../../../../layout';
-import { createAcceptObject } from '../../../../util';
 import { getPrefixedUrl } from '../../utils';
 import { DocumentList } from './DocumentList';
 export const Document = (props) => {
@@ -20,10 +19,10 @@ export const Document = (props) => {
     let allowedTypesMessage = '';
     if (validate?.allowedFileExtensions?.length) {
         if (validate.allowedFileExtensions.length === 1) {
-            allowedTypesMessage = validate.allowedFileExtensions[0];
+            allowedTypesMessage = `Only ${validate.allowedFileExtensions[0]} files are allowed`;
         }
         else {
-            allowedTypesMessage = `${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
+            allowedTypesMessage = `Allowed file types are: ${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
         }
     }
     const maxSizeInBytes = Number.isFinite(validate?.maxSizeInKB)
@@ -59,15 +58,19 @@ export const Document = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrop: (files) => handleUpload(files),
         disabled: uploadDisabled,
-        accept: validate?.allowedFileExtensions ? createAcceptObject(validate.allowedFileExtensions) : undefined,
+        accept: validate?.allowedFileExtensions
+            ? {
+                'type/custom': validate.allowedFileExtensions.map((extension) => extension.startsWith('.') ? extension : `.${extension}`),
+            }
+            : undefined,
         maxSize: maxSizeInBytes,
     });
     const errors = [];
     if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-invalid-type'))) {
-        errors.push(`Invalid file extension. Allowed extensions are: ${allowedTypesMessage}`);
+        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 max limit of ${formattedMaxSize}`);
+        errors.push(`File size exceeds the maximum limit of ${formattedMaxSize}`);
     }
     return (React.createElement(React.Fragment, null,
         canUpdateProperty && hasUpdatePermission && (React.createElement(Box, { sx: {
@@ -96,14 +99,16 @@ export const Document = (props) => {
                             color: '#637381',
                             textAlign: 'center',
                             fontSize: '12px',
-                        } }, `${allowedTypesMessage}.`)),
+                        } },
+                        allowedTypesMessage,
+                        ".")),
                     formattedMaxSize && (React.createElement(Typography, { sx: {
                             color: '#637381',
                             textAlign: 'center',
                             fontSize: '12px',
                         } }, validate?.maxDocuments === 1
-                        ? `Max size of ${formattedMaxSize}.`
-                        : `The max size of each document is ${formattedMaxSize}.`)))))),
+                        ? `Maximum size is ${formattedMaxSize}.`
+                        : `The maximum size of each document is ${formattedMaxSize}.`)))))),
         canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })),
         React.createElement(DocumentList, { id: id, instance: instance, handleChange: handleChange, value: value, 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' }),

package/dist/published/components/custom/util.d.ts

@@ -1,2 +1 @@
 export declare function difference(object?: any, base?: any): any;
-export declare const createAcceptObject: (allowedTypes: string[]) => Record<string, string[]> | undefined;

package/dist/published/components/custom/util.js

@@ -1,5 +1,4 @@
 import { isEqual, isObject, transform } from 'lodash';
-import mime from 'mime-types';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function difference(object, base) {
     if (!object) {
@@ -15,30 +14,3 @@ export function difference(object, base) {
         }
     });
 }
-// Helper function to convert file extensions array to dropzone accept format
-export const createAcceptObject = (allowedTypes) => {
-    if (!allowedTypes.length)
-        return undefined;
-    const acceptObject = {};
-    const customExtensions = [];
-    // First pass: collect custom extensions from allowedTypes that don't map to standard MIME types
-    allowedTypes.forEach((extension) => {
-        const mimeType = mime.lookup(extension);
-        // It's a custom extension
-        if (!mimeType) {
-            customExtensions.push(extension.startsWith('.') ? extension : `.${extension}`);
-        }
-        else {
-            // If it is mapped to a value, add it to the accept object
-            if (!acceptObject[mimeType]) {
-                acceptObject[mimeType] = [];
-            }
-            acceptObject[mimeType].push(extension.startsWith('.') ? extension : `.${extension}`);
-        }
-    });
-    if (customExtensions.length) {
-        // Add custom files extensions to the accept object
-        acceptObject['file/custom'] = customExtensions;
-    }
-    return acceptObject;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.1-dev.1",
+    "version": "1.7.0-testing.0",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -56,7 +56,6 @@
         "@types/jest": "^28.1.4",
         "@types/json-logic-js": "^2.0.8",
         "@types/luxon": "^3.4.2",
-        "@types/mime-types": "^3.0.1",
         "@types/nanoid-dictionary": "^4.2.3",
         "@types/node": "^18.0.0",
         "@types/react": "^18.0.17",
@@ -88,7 +87,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.3.0",
+        "@evoke-platform/context": "^1.3.0-testing.9",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },
@@ -120,7 +119,6 @@
         "formiojs": "^4.15.0-rc.23",
         "html-react-parser": "^5.1.18",
         "luxon": "^2.5.2",
-        "mime-type": "^5.0.3",
         "msw": "^2.7.3",
         "nanoid": "^5.0.8",
         "nanoid-dictionary": "^4.3.0",