@evoke-platform/ui-components 1.6.0-dev.30 → 1.6.0-dev.31

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

@@ -12,7 +12,6 @@ type DocumentProps = {
     objectId?: string;
     validate?: DocumentValidation;
     value: (File | SavedDocumentReference)[] | undefined;
-    onFileRejections: (fileRejectionsErrors: string[]) => void;
 };
 export declare const Document: (props: DocumentProps) => React.JSX.Element;
 export {};

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

@@ -1,32 +1,16 @@
 import { isNil } from 'lodash';
-import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 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) => {
-    const { id, handleChange, property, instance, canUpdateProperty, apiServices, error, objectId, value, validate, onFileRejections, } = props;
+    const { id, handleChange, property, instance, canUpdateProperty, apiServices, error, objectId, value, validate } = props;
     const [documents, setDocuments] = useState();
     const [hasUpdatePermission, setHasUpdatePermission] = useState();
     const [snackbarError, setSnackbarError] = useState();
-    let allowedTypesMessage = '';
-    if (validate?.allowedFileExtensions?.length) {
-        if (validate.allowedFileExtensions.length === 1) {
-            allowedTypesMessage = validate.allowedFileExtensions[0];
-        }
-        else {
-            allowedTypesMessage = `${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
-        }
-    }
-    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) : '';
     useEffect(() => {
         setDocuments(value);
     }, [value]);
@@ -52,27 +36,15 @@ export const Document = (props) => {
         handleChange(property.id, newDocuments);
     };
     const uploadDisabled = !!validate?.maxDocuments && (documents?.length ?? 0) >= validate.maxDocuments;
-    const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
+    const { getRootProps, getInputProps, open } = useDropzone({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrop: (files) => handleUpload(files),
         disabled: uploadDisabled,
-        accept: validate?.allowedFileExtensions ? createAcceptObject(validate.allowedFileExtensions) : 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}`);
-        }
-        if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-too-large'))) {
-            errors.push(`File size exceeds the max limit of ${formattedMaxSize}`);
-        }
-        onFileRejections(errors);
-    }, [fileRejections, onFileRejections]);
     return (React.createElement(React.Fragment, null,
         canUpdateProperty && hasUpdatePermission && (React.createElement(Box, { sx: {
                 margin: '5px 0',
-                height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px',
+                height: '115px',
                 borderRadius: '8px',
                 display: 'flex',
                 justifyContent: 'center',
@@ -91,20 +63,8 @@ export const Document = (props) => {
                         ' ',
                         React.createElement(Typography, { component: 'span', sx: { color: uploadDisabled ? '#919EAB' : '#0075A7', 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',
-                        } }, validate?.maxDocuments === 1
-                        ? `Max size of ${formattedMaxSize}.`
-                        : `The max 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' } })),
+                        "to upload"))))),
+        canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: "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

@@ -16,7 +16,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

@@ -26,7 +26,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) => {
@@ -88,12 +87,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 +131,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 }))), root);
     }
 }

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

@@ -233,12 +233,6 @@ export function convertFormToComponents(entries, parameters, object) {
                     maxDocuments: parameter.type === 'document'
                         ? parameter.validation?.maxDocuments
                         : undefined,
-                    allowedFileExtensions: parameter.type === 'document'
-                        ? parameter.validation?.allowedFileExtensions
-                        : undefined,
-                    maxSizeInKB: parameter.type === 'document'
-                        ? parameter.validation?.maxSizeInKB
-                        : undefined,
                     customMessage: ['integer', 'number', 'date', 'time', 'document'].includes(parameter.type ?? '')
                         ? parameter.validation
                             ?.errorMessage

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

@@ -1,13 +1,11 @@
 import { useApiServices } from '@evoke-platform/context';
 import { isNil } from 'lodash';
-import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { InfoRounded, UploadCloud } from '../../../../../../icons';
+import { 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) => {
@@ -17,20 +15,6 @@ export const Document = (props) => {
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
     const [hasUpdatePermission, setHasUpdatePermission] = useState(fetchedOptions[`${id}UpdatePermission`]);
-    let allowedTypesMessage = '';
-    if (validate?.allowedFileExtensions?.length) {
-        if (validate.allowedFileExtensions.length === 1) {
-            allowedTypesMessage = validate.allowedFileExtensions[0];
-        }
-        else {
-            allowedTypesMessage = `${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
-        }
-    }
-    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) : '';
     useEffect(() => {
         setDocuments(value);
     }, [value]);
@@ -55,24 +39,15 @@ export const Document = (props) => {
         handleChange(id, newDocuments);
     };
     const uploadDisabled = !!validate?.maxDocuments && (documents?.length ?? 0) >= validate.maxDocuments;
-    const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
+    const { getRootProps, getInputProps, open } = useDropzone({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrop: (files) => handleUpload(files),
         disabled: uploadDisabled,
-        accept: validate?.allowedFileExtensions ? createAcceptObject(validate.allowedFileExtensions) : 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}`);
-    }
-    if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-too-large'))) {
-        errors.push(`File size exceeds the max limit of ${formattedMaxSize}`);
-    }
     return (React.createElement(React.Fragment, null,
         canUpdateProperty && hasUpdatePermission && (React.createElement(Box, { sx: {
                 margin: '5px 0',
-                height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px',
+                height: '115px',
                 borderRadius: '8px',
                 display: 'flex',
                 justifyContent: 'center',
@@ -91,23 +66,8 @@ export const Document = (props) => {
                         ' ',
                         React.createElement(Typography, { component: 'span', color: uploadDisabled ? '#919EAB' : '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',
-                        } }, validate?.maxDocuments === 1
-                        ? `Max size of ${formattedMaxSize}.`
-                        : `The max 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' } })),
+                        "to upload"))))),
+        canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: "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' }),
-        errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
-            React.createElement(InfoRounded, { color: 'error', sx: { fontSize: '.75rem', marginRight: '3px' } }),
-            React.createElement(Typography, { fontSize: '12px', color: 'error', sx: { lineHeight: '18px' } }, errors.join('; ') + '.')))));
+        React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' })));
 };

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

@@ -130,7 +130,7 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'document') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
-                React.createElement(Document, { id: entryId, handleChange: handleChange, error: !!errors[entryId], value: fieldValue, instance: instance, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description, validate: validation })));
+                React.createElement(Document, { id: entryId, handleChange: handleChange, error: !!errors[entryId], value: fieldValue, instance: instance, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description })));
         }
         else if (fieldDefinition.type === 'criteria') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },

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.0-dev.30",
+    "version": "1.6.0-dev.31",
     "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-testing.9",
+        "@evoke-platform/context": "^1.3.0-dev.6",
         "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",