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

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

@@ -0,0 +1,93 @@
+import { useApiServices } from '@evoke-platform/context';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useFormContext } from '../../../../../theme/hooks';
+import { Button, CircularProgress, Typography } from '../../../../core';
+import { Box } from '../../../../layout';
+import CriteriaBuilder from '../../../CriteriaBuilder';
+import { addressProperties, getPrefixedUrl } from '../utils';
+export default function Criteria(props) {
+    const { handleChange, value, canUpdateProperty, fieldDefinition, error } = props;
+    const apiServices = useApiServices();
+    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const [loadingError, setLoadingError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [properties, setProperties] = useState(fetchedOptions[`${fieldDefinition.id}Options`] || []);
+    const fetchProperties = useCallback(async () => {
+        if (fieldDefinition.objectId && !fetchedOptions[`${fieldDefinition.id}Options`]) {
+            setLoading(true);
+            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective/properties`), { params: { fields: ['properties'] } }, (error, properties) => {
+                if (error) {
+                    console.error('Error fetching object properties', error);
+                    setLoadingError(true);
+                }
+                if (properties) {
+                    const flattenProperties = properties.flatMap((prop) => {
+                        if (prop.type === 'object' || prop.type === 'user') {
+                            return [
+                                {
+                                    id: `${prop.id}.id`,
+                                    name: `${prop.name} Id`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.name`,
+                                    name: `${prop.name} Name`,
+                                    type: 'string',
+                                },
+                            ];
+                        }
+                        else if (prop.type === 'address') {
+                            return addressProperties(prop);
+                        }
+                        return prop;
+                    });
+                    setProperties(flattenProperties);
+                    setFetchedOptions({
+                        [`${fieldDefinition.id}Options`]: flattenProperties.map((prop) => ({
+                            id: prop.id,
+                            name: prop.name,
+                        })),
+                    });
+                    setLoadingError(false);
+                }
+                setLoading(false);
+            });
+        }
+    }, [fieldDefinition.objectId, apiServices]);
+    useEffect(() => {
+        fetchProperties();
+    }, [fetchProperties]);
+    const handleUpdate = (criteria) => {
+        if (criteria || value) {
+            handleChange(fieldDefinition.id, criteria ?? null);
+        }
+    };
+    if (loadingError) {
+        return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+            React.createElement(Typography, { sx: { color: 'rgb(114 124 132)', fontSize: '14px', paddingLeft: '10px' } }, "An error occurred when retrieving data needed for this criteria."),
+            React.createElement(Button, { sx: {
+                    padding: 0,
+                    '&:hover': { backgroundColor: 'transparent' },
+                    minWidth: '44px',
+                }, variant: "text", onClick: fetchProperties, disabled: loading }, "Retry"),
+            loading && React.createElement(CircularProgress, { size: 20, sx: { paddingLeft: '10px' } })));
+    }
+    return !!value || canUpdateProperty ? (React.createElement(Box, { sx: { borderRadius: '8px', border: error ? '1px solid #FF0000' : '1px solid #ddd' } },
+        React.createElement(CriteriaBuilder, { criteria: value ?? undefined, properties: properties, setCriteria: handleUpdate, disabled: !canUpdateProperty, hideBorder: true, presetValues: [
+                {
+                    label: 'Current Date',
+                    value: { name: '{{{currentDate}}}', label: 'Current Date' },
+                    type: 'date',
+                },
+                {
+                    label: 'Current Time',
+                    value: { name: '{{{currentTime}}}', label: 'Current Time' },
+                    type: 'time',
+                },
+                {
+                    label: 'Current Date Time',
+                    value: { name: '{{{currentDateTime}}}', label: 'Current Date Time' },
+                    type: 'date-time',
+                },
+            ], enablePresetValues: true }))) : (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No criteria"));
+}

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

@@ -0,0 +1,16 @@
+import { DocumentValidation } from '@evoke-platform/context';
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { SavedDocumentReference } from '../../types';
+type DocumentProps = {
+    id: string;
+    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    instance?: FieldValues;
+    canUpdateProperty: boolean;
+    error: boolean;
+    validate?: DocumentValidation;
+    value: (File | SavedDocumentReference)[] | undefined;
+    hasDescription?: boolean;
+};
+export declare const Document: (props: DocumentProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,113 @@
+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 { 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) => {
+    const { id, handleChange, canUpdateProperty, error, instance, value, validate, hasDescription } = props;
+    const apiServices = useApiServices();
+    const { fetchedOptions, setFetchedOptions, object } = useFormContext();
+    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]);
+    useEffect(() => {
+        checkPermissions();
+    }, [object]);
+    const checkPermissions = () => {
+        if (canUpdateProperty && !fetchedOptions[`${id}UpdatePermission`]) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=update`))
+                .then((accessCheck) => {
+                setFetchedOptions({
+                    [`${id}UpdatePermission`]: accessCheck.result,
+                });
+                setHasUpdatePermission(accessCheck.result);
+            });
+        }
+    };
+    const handleUpload = async (files) => {
+        const newDocuments = [...(documents ?? []), ...(files ?? [])];
+        setDocuments(newDocuments);
+        handleChange(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,
+        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',
+                borderRadius: '8px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border: `1px dashed ${error ? 'red' : uploadDisabled ? '#DFE3E8' : '#858585'}`,
+                position: 'relative',
+                cursor: uploadDisabled ? 'cursor' : 'pointer',
+            }, ...getRootProps(), onClick: open },
+            React.createElement("input", { ...getInputProps({ id }), disabled: uploadDisabled, ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined) }),
+            React.createElement(Grid, { container: true, sx: { width: '100%' } },
+                React.createElement(Grid, { item: true, xs: 12, sx: { display: 'flex', justifyContent: 'center', paddingBottom: '7px' } },
+                    React.createElement(UploadCloud, { sx: { color: '#919EAB', width: '50px', height: '30px' } })),
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { variant: "body2", sx: { color: uploadDisabled ? '#919EAB' : '#212B36', textAlign: 'center' } },
+                        "Drag and drop or",
+                        ' ',
+                        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' } })),
+        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('; ') + '.')))));
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { SavedDocumentReference } from '../../types';
+type DocumentListProps = {
+    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    id: string;
+    instance?: FieldValues;
+    canUpdateProperty: boolean;
+    value: (File | SavedDocumentReference)[] | undefined;
+    setSnackbarError: (type: 'error' | 'success', message: string) => void;
+};
+export declare const DocumentList: (props: DocumentListProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,179 @@
+import { useApiServices } from '@evoke-platform/context';
+import { isEqual } from 'lodash';
+import prettyBytes from 'pretty-bytes';
+import React, { useEffect, useState } from 'react';
+import { FileWithExtension, LaunchRounded, TrashCan, WarningRounded } from '../../../../../../icons';
+import { useFormContext } from '../../../../../../theme/hooks';
+import { Chip, IconButton, Typography } from '../../../../../core';
+import { Box, Grid } from '../../../../../layout';
+import { getPrefixedUrl } from '../../utils';
+const styles = {
+    icon: {
+        padding: '3px',
+        color: '#637381',
+    },
+};
+const viewableFileTypes = [
+    'application/pdf',
+    'image/jpeg',
+    'image/jpg',
+    'image/png',
+    'image/gif',
+    'image/bmp',
+    'image/webp',
+    'text/plain',
+];
+export const DocumentList = (props) => {
+    const { handleChange, id, canUpdateProperty, instance, value: documents, setSnackbarError } = props;
+    const apiServices = useApiServices();
+    const { fetchedOptions, setFetchedOptions, object } = useFormContext();
+    const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
+    const [savedDocuments, setSavedDocuments] = useState(fetchedOptions[`${id}SavedDocuments`]);
+    useEffect(() => {
+        const currentValue = instance?.[id];
+        if (currentValue?.length) {
+            const currentDocumentIds = currentValue.map((doc) => doc.id);
+            if (currentDocumentIds.length &&
+                // these need to be sorted otherwise it will evaluate as not equal if the ids are in different orders causing unnecessary fetches
+                !isEqual(currentDocumentIds.slice().sort(), savedDocuments
+                    ?.map((doc) => doc.id)
+                    .slice()
+                    .sort())) {
+                getDocuments(currentDocumentIds);
+            }
+        }
+    }, [id, documents, object]);
+    useEffect(() => {
+        if (fetchedOptions[`${id}SavedDocuments`]) {
+            setSavedDocuments(fetchedOptions[`${id}SavedDocuments`]);
+        }
+    }, [fetchedOptions]);
+    const getDocuments = (currentDocumentIds, shouldRetry = true) => {
+        apiServices.get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents`), {
+            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)))) {
+                setTimeout(() => getDocuments(currentDocumentIds, false), 2000);
+            }
+            else if (error) {
+                setSnackbarError('error', 'Error occurred while retrieving saved documents');
+            }
+            else {
+                setSavedDocuments(docs);
+                setFetchedOptions({
+                    [`${id}SavedDocuments`]: docs,
+                });
+            }
+        });
+    };
+    useEffect(() => {
+        if (!fetchedOptions[`${id}ViewPermission`]) {
+            checkPermissions();
+        }
+    }, [object]);
+    const checkPermissions = () => {
+        if (instance?.[id]?.length) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=view`))
+                .then((viewPermissionCheck) => {
+                setFetchedOptions({
+                    [`${id}ViewPermission`]: viewPermissionCheck.result,
+                });
+                setHasViewPermission(viewPermissionCheck.result);
+            });
+        }
+    };
+    const isFile = (doc) => doc instanceof File;
+    const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);
+    const handleRemove = (index) => {
+        const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
+        handleChange(id, updatedDocuments.length === 0 ? undefined : updatedDocuments);
+    };
+    const openDocument = async (index) => {
+        const doc = documents?.[index];
+        if (doc) {
+            let url;
+            const contentType = doc instanceof File
+                ? doc.type
+                : 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' });
+                    const blob = new Blob([documentResponse], { type: contentType });
+                    url = window.URL.createObjectURL(blob);
+                }
+                catch (error) {
+                    setSnackbarError('error', `Could not open ${doc.name}`);
+                    return;
+                }
+            }
+            else {
+                url = URL.createObjectURL(doc);
+            }
+            if (contentType && viewableFileTypes.includes(contentType)) {
+                window.open(url, '_blank');
+            }
+            else {
+                const link = document.createElement('a');
+                link.href = url;
+                link.setAttribute('download', doc.name);
+                document.body.appendChild(link);
+                link.click();
+                // Clean up and remove the link
+                link.parentNode?.removeChild(link);
+            }
+        }
+    };
+    const getDocumentSize = (doc) => {
+        let size;
+        if (isFile(doc)) {
+            size = prettyBytes(doc.size);
+        }
+        else {
+            const savedDoc = savedDocuments?.find((savedDocument) => savedDocument.id === doc.id);
+            size = savedDoc ? prettyBytes(savedDoc.size) : '';
+        }
+        return size;
+    };
+    return (React.createElement(React.Fragment, null,
+        !documents && !canUpdateProperty && (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No documents")),
+        !!documents?.length && (React.createElement(Box, null, documents.map((doc, index) => (React.createElement(Grid, { container: true, sx: {
+                width: '100%',
+                border: '1px solid #C4CDD5',
+                borderRadius: '6px',
+                margin: '5px 2px',
+                padding: ' 8px',
+                display: 'flex',
+                alignItems: 'center',
+            } },
+            React.createElement(Grid, { item: true, sx: { display: 'flex', justifyContent: 'center', padding: '7px', marginLeft: '4px' } },
+                React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: doc.name?.split('.')?.pop() ?? '', sx: { height: '1.5em', width: '1.5em' } })),
+            React.createElement(Grid, { item: true, sx: { flex: 1, justifyContent: 'center', paddingBottom: '5px' } },
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { sx: {
+                            fontSize: '14px',
+                            fontWeight: 700,
+                            lineHeight: '15px',
+                            paddingTop: '8px',
+                        } }, doc.name)),
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, getDocumentSize(doc)))),
+            (isFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
+                React.createElement(IconButton, { "aria-label": "open document", sx: { ...styles.icon, marginRight: '16px' }, onClick: () => openDocument(index) },
+                    React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))),
+            !isFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
+                    marginRight: '16px',
+                    backgroundColor: 'rgba(222, 48, 36, 0.16)',
+                    color: '#A91813',
+                    borderRadius: '6px',
+                    height: '25px',
+                    fontWeight: 700,
+                    '& .MuiChip-icon': { color: '#A91813', width: '.8em', marginBottom: '2px' },
+                }, icon: React.createElement(WarningRounded, null) })),
+            canUpdateProperty && (React.createElement(Grid, { item: true },
+                React.createElement(IconButton, { "aria-label": "delete document", sx: styles.icon, onClick: () => handleRemove(index) },
+                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))));
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare function blobToDataUrl(blob: Blob): Promise<string>;
+type ImageProps = {
+    id: string;
+    handleChange: (propertyId: string, value: string | null) => void;
+    canUpdateProperty?: boolean;
+    error?: boolean;
+    value?: string;
+    hasDescription?: boolean;
+};
+export declare const Image: (props: ImageProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,108 @@
+import { BackupOutlined, ClearRounded } from '@mui/icons-material';
+import { CardMedia } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { IconButton, Typography } from '../../../../core';
+import { Box, Grid } from '../../../../layout';
+export function blobToDataUrl(blob) {
+    const reader = new FileReader();
+    return new Promise((resolve) => {
+        reader.onloadend = () => resolve(reader.result);
+        reader.readAsDataURL(blob);
+    });
+}
+const styles = {
+    imageContainer: {
+        margin: '5px 0',
+        height: '160px',
+        borderRadius: '8px',
+        maxWidth: '100%',
+    },
+    dropzoneContainer: {
+        margin: '5px 0',
+        height: '160px',
+        borderRadius: '8px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px dashed #858585',
+        position: 'relative',
+        cursor: 'pointer',
+    },
+    icon: {
+        color: '#fff',
+        zIndex: 40,
+        fontSize: '16px',
+    },
+    deleteIcon: {
+        borderRadius: '50%',
+        padding: '3px',
+        backgroundColor: '#212B36',
+        ':hover': { backgroundColor: '#212B36', cursor: 'pointer' },
+        color: '#fff',
+        right: '29px',
+        bottom: '138px',
+    },
+    image: {
+        borderRadius: '8px',
+        width: 'fit-content',
+        maxWidth: '95%',
+        height: '160px',
+        position: 'relative',
+        display: 'inline-block',
+        objectFit: 'contain',
+    },
+};
+export const Image = (props) => {
+    const { id, handleChange, canUpdateProperty, error, value, hasDescription } = props;
+    const [image, setImage] = useState();
+    useEffect(() => {
+        if (typeof value === 'string') {
+            setImage(value);
+        }
+    }, [value]);
+    const handleUpload = async (file) => {
+        if (file?.size && file.size <= 300000) {
+            const dataUrl = file ? await blobToDataUrl(file) : null;
+            setImage(dataUrl);
+            handleChange(id, dataUrl);
+        }
+    };
+    const handleRemove = (e) => {
+        setImage(null);
+        handleChange(id, '');
+        e.stopPropagation();
+    };
+    const { getRootProps, getInputProps, open } = useDropzone({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onDrop: (files) => handleUpload(files?.[0]),
+        accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.svg'] },
+    });
+    return (React.createElement(React.Fragment, null, image ? (React.createElement(Box, { sx: styles.imageContainer },
+        React.createElement(Box, { sx: { position: 'relative', left: 0, zIndex: 5 } },
+            React.createElement(CardMedia, { component: "img", image: image, alt: 'Uploaded Image', sx: styles.image }),
+            canUpdateProperty && (React.createElement(IconButton, { onClick: handleRemove, "aria-label": "Remove image", sx: styles.deleteIcon },
+                React.createElement(ClearRounded, { sx: styles.icon })))))) : canUpdateProperty ? (React.createElement(Box, { sx: {
+            ...styles.dropzoneContainer,
+            borderColor: error ? 'red' : '#858585',
+        }, ...getRootProps(), onClick: open },
+        React.createElement("input", { ...getInputProps({ id }), multiple: false, ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined) }),
+        React.createElement(Grid, { container: true, sx: { width: '100%' } },
+            React.createElement(Grid, { item: true, xs: 12, sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    paddingBottom: '5px',
+                } },
+                React.createElement(BackupOutlined, { sx: { color: '#919EAB', height: '1.5em', width: '1.5em' } })),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Typography, { variant: "body2", sx: { textAlign: 'center' } },
+                    "Drag and drop or",
+                    ' ',
+                    React.createElement(Typography, { component: 'span', color: 'primary', sx: { fontSize: '14px' } }, "select a file"),
+                    ' ',
+                    "to upload")),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Typography, { variant: "body2", sx: { color: '#637381', textAlign: 'center' } }, "Max file size of 300KB")),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Typography, { variant: "body2", sx: { color: '#637381', textAlign: 'center' } }, "JPG, PNG, or GIF"))))) : (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No image"))));
+};

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

@@ -0,0 +1,16 @@
+import { UserAccount } from '@evoke-platform/context';
+import React from 'react';
+export type UserPropertyProps = {
+    id: string;
+    handleChange: (id: string, user: UserAccount | undefined) => void;
+    error?: boolean;
+    value?: {
+        id: string;
+        name: string;
+    };
+    fieldHeight?: 'small' | 'medium';
+    readOnly?: boolean;
+    hasDescription?: boolean;
+};
+declare const UserProperty: (props: UserPropertyProps) => React.JSX.Element;
+export default UserProperty;