@evoke-platform/ui-components 1.6.0-testing.13 → 1.6.0-testing.14

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

@@ -0,0 +1,73 @@
+import { useApiServices } from '@evoke-platform/context';
+import { isNil } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { UploadCloud } from '../../../../../../icons';
+import { useFormContext } from '../../../../../../theme/hooks';
+import { Skeleton, Snackbar, Typography } from '../../../../../core';
+import { Box, Grid } from '../../../../../layout';
+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`]);
+    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 } = useDropzone({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onDrop: (files) => handleUpload(files),
+        disabled: uploadDisabled,
+    });
+    return (React.createElement(React.Fragment, null,
+        canUpdateProperty && hasUpdatePermission && (React.createElement(Box, { sx: {
+                margin: '5px 0',
+                height: '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"))))),
+        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' })));
+};

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;

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

@@ -0,0 +1,129 @@
+import { useApiServices } from '@evoke-platform/context';
+import { ExpandMore } from '@mui/icons-material';
+import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../../theme/hooks';
+import { Autocomplete, Paper, TextField, Typography } from '../../../../core';
+import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
+const UserProperty = (props) => {
+    const { id, handleChange, error, value, fieldHeight, readOnly, hasDescription } = props;
+    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const [loadingOptions, setLoadingOptions] = useState(false);
+    const apiServices = useApiServices();
+    const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
+    const [openOptions, setOpenOptions] = useState(false);
+    const [users, setUsers] = useState();
+    const [userValue, setUserValue] = useState();
+    useEffect(() => {
+        if (value && typeof value == 'object' && 'name' in value && 'id' in value) {
+            setUserValue({ label: value.name, value: value.id });
+        }
+        else {
+            setUserValue(undefined);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (!fetchedOptions[`${id}Options`]) {
+            setLoadingOptions(true);
+            apiServices.get(getPrefixedUrl(`/users`), (error, userList) => {
+                setUsers(userList);
+                setOptions((userList ?? []).map((user) => ({
+                    label: user.name,
+                    value: user.id,
+                })));
+                setFetchedOptions({
+                    [`${id}Options`]: (userList ?? []).map((user) => ({
+                        label: user.name,
+                        value: user.id,
+                    })),
+                });
+                setLoadingOptions(false);
+            });
+        }
+    }, [id]);
+    function handleChangeUserProperty(id, value) {
+        const updatedValue = typeof value.value === 'string' ? { name: value.label, id: value.value } : undefined;
+        handleChange(id, updatedValue);
+    }
+    return (options && (React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue || readOnly ? '' : React.createElement(ExpandMore, null), PaperComponent: ({ children }) => {
+            return (React.createElement(Paper, { sx: {
+                    borderRadius: '12px',
+                    boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.2)',
+                    '& .MuiAutocomplete-listbox': {
+                        maxHeight: '25vh',
+                    },
+                    '& .MuiAutocomplete-noOptions': {
+                        fontFamily: 'sans-serif',
+                        fontSize: '14px',
+                        paddingLeft: '24px',
+                        color: 'rgba(145, 158, 171, 1)',
+                    },
+                    '& .MuiAutocomplete-loading': {
+                        fontFamily: 'sans-serif',
+                        fontSize: '14px',
+                        paddingLeft: '24px',
+                        color: 'rgba(145, 158, 171, 1)',
+                    },
+                } }, children));
+        }, sx: {
+            '& button.MuiButtonBase-root': {
+                ...(!loadingOptions && value ? { visibility: 'visible' } : {}),
+            },
+            '.MuiAutocomplete-clearIndicator': {
+                ...(!value ? { display: 'none' } : undefined),
+            },
+        }, noOptionsText: 'No options available', renderOption: (props, option) => {
+            return (React.createElement("li", { ...props, key: option.id },
+                React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } },
+                    option.label,
+                    " ",
+                    '',
+                    users?.find((user) => option.value === user.id)?.status === 'Inactive' ? (React.createElement("span", null, "(Inactive)")) : (''))));
+        }, onOpen: () => {
+            setOpenOptions(true);
+        }, onClose: () => setOpenOptions(false), value: userValue ?? '', options: options, getOptionLabel: (option) => {
+            if (typeof option === 'string') {
+                return options.find((o) => o.value === option)?.label ?? '';
+            }
+            else {
+                {
+                    if (users?.find((user) => option.value === user.id)?.status === 'Inactive') {
+                        return option.label + ' (Inactive)';
+                    }
+                    else {
+                        return option.label ?? '';
+                    }
+                }
+            }
+        }, onKeyDownCapture: (e) => {
+            // prevents keyboard trap
+            if (e.key === 'Tab') {
+                return;
+            }
+            if (value) {
+                e.preventDefault();
+            }
+        }, loading: loadingOptions, isOptionEqualToValue: isOptionEqualToValue, onChange: (event, value) => {
+            handleChangeUserProperty(id, value);
+        }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: !readOnly ? 'Select' : undefined, readOnly: !loadingOptions && !value && readOnly, inputProps: {
+                ...params.inputProps,
+                ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined),
+            }, sx: {
+                ...(!loadingOptions && value
+                    ? {
+                        '.MuiOutlinedInput-root': {
+                            background: 'white',
+                            border: 'auto',
+                        },
+                        '& fieldset': { borderColor: 'auto' },
+                        '&:hover .MuiOutlinedInput-notchedOutline': {
+                            border: 'auto',
+                        },
+                        caretColor: 'white',
+                        '& svg': {
+                            display: readOnly ? 'none' : 'block',
+                        },
+                    }
+                    : {}),
+            } })), size: fieldHeight ?? 'medium', readOnly: readOnly, error: error })));
+};
+export default UserProperty;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/InstanceLookup.d.ts

@@ -0,0 +1,15 @@
+import { Obj, ObjectInstance, TableViewLayout } from '@evoke-platform/context';
+import React from 'react';
+import { BaseProps } from '../../types';
+export type InstanceLookUpProps = BaseProps & {
+    object: Obj;
+    instanceId?: string;
+    setSelectedInstance: (selectedInstance: ObjectInstance) => void;
+    setRelationType: (relationType: 'new' | 'existing') => void;
+    mode: 'default' | 'existingOnly';
+    nestedFieldsView?: boolean;
+    filter?: Record<string, unknown>;
+    layout?: TableViewLayout;
+};
+declare const InstanceLookup: (props: InstanceLookUpProps) => React.JSX.Element;
+export default InstanceLookup;