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

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/InstanceLookup.js

@@ -0,0 +1,226 @@
+import { useApiServices } from '@evoke-platform/context';
+import { Clear, Search } from '@mui/icons-material';
+import { debounce, get, startCase } from 'lodash';
+import { DateTime } from 'luxon';
+import React, { useEffect, useState } from 'react';
+import { Button, IconButton, InputAdornment, TextField, Typography, } from '../../../../../core';
+import { Box, Grid } from '../../../../../layout';
+import BuilderGrid from '../../../../BuilderGrid';
+import { getPrefixedUrl } from '../../utils';
+const SearchField = (props) => {
+    const { searchableColumns, filter, setFilter, searchString, setSearchString } = props;
+    const clearSearch = () => {
+        setSearchString('');
+        setFilter(undefined);
+    };
+    const handleSearch = async (e) => {
+        const searchProperties = searchableColumns.map((column) => {
+            const columnId = column.id;
+            return {
+                [columnId]: {
+                    like: e.target.value,
+                    options: 'i',
+                },
+            };
+        });
+        if (e.target.value.trim() === '' || !e.target.value) {
+            clearSearch();
+        }
+        else {
+            setSearchString(e.target.value);
+            setFilter({
+                ...filter,
+                where: {
+                    or: searchProperties,
+                },
+                limit: 100,
+            });
+        }
+    };
+    return (React.createElement(TextField, { autoFocus: true, placeholder: "Search", value: searchString, onChange: (e) => handleSearch(e), size: "medium", fullWidth: true, sx: { marginBottom: '15px', marginTop: '15px' }, InputProps: {
+            endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                React.createElement(IconButton, { sx: {
+                        visibility: searchString.length > 0 ? 'visible' : 'hidden',
+                    }, onClick: () => clearSearch() },
+                    React.createElement(Clear, { sx: {
+                            fontSize: '22px',
+                        } })))),
+            startAdornment: (React.createElement(InputAdornment, { position: "start" },
+                React.createElement(Search, { sx: { fontSize: '22px', color: '#637381' } }))),
+        } }));
+};
+const InstanceLookup = (props) => {
+    const { object, setSelectedInstance, setRelationType, filter: criteriaFilter, mode, nestedFieldsView, layout, } = props;
+    const [rows, setRows] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [filter, setFilter] = useState();
+    const [searchString, setSearchString] = useState('');
+    const [searchableColumns] = useState(object.properties?.filter((property) => property.searchable) ?? []);
+    const apiServices = useApiServices();
+    const retrieveColumns = (tableViewLayout) => {
+        let columns = [];
+        if (tableViewLayout?.properties) {
+            for (const prop of tableViewLayout.properties) {
+                const propertyId = prop.id.split('.')[0];
+                const property = object.properties?.find((p) => p.id === propertyId);
+                if (property) {
+                    if (property.type === 'address') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: `${property.name} - ${startCase(prop.id.split('.')[1])}`,
+                            type: 'string',
+                            flex: 1,
+                            valueGetter: (params) => {
+                                return get(params.row, prop.id) ?? '';
+                            },
+                        });
+                    }
+                    else if (property.type === 'object' || property.type === 'user') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueGetter: (params) => {
+                                return (get(params.row, !prop.id.includes('.') ? `${prop.id}.name` : prop.id) ?? '');
+                            },
+                        });
+                    }
+                    else if (property.type === 'document') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueGetter: (params) => {
+                                const row = params.row;
+                                return (row[prop.id]?.map((v) => v.name).join(', ') ??
+                                    '');
+                            },
+                        });
+                    }
+                    else if (property.type === 'date') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueFormatter: (params) => {
+                                if (!params.value) {
+                                    return params.value;
+                                }
+                                // The value should really be typed as string | undefined so once asserted as defined
+                                // the value must be a string.
+                                return DateTime.fromISO(params.value).toLocaleString(DateTime.DATE_SHORT);
+                            },
+                        });
+                    }
+                    else if (property.type === 'date-time') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueFormatter: (params) => {
+                                if (!params.value) {
+                                    return params.value;
+                                }
+                                // The value should really be typed as string | undefined so once asserted as defined
+                                // the value must be a string.
+                                return DateTime.fromISO(params.value).toLocaleString(DateTime.DATETIME_SHORT);
+                            },
+                        });
+                    }
+                    else if (property.type === 'time') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueFormatter: (params) => {
+                                if (!params.value) {
+                                    return params.value;
+                                }
+                                // The value should really be typed as string | undefined so once asserted as defined
+                                // the value must be a string.
+                                return DateTime.fromISO(params.value).toLocaleString(DateTime.TIME_SIMPLE);
+                            },
+                        });
+                    }
+                    else {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                        });
+                    }
+                }
+            }
+        }
+        else {
+            const name = object.properties?.find((property) => property.id == 'name');
+            columns = [{ field: 'name', headerName: name?.name ?? 'Name', type: 'string', flex: 1 }];
+        }
+        return columns;
+    };
+    function fetchObjectInstance() {
+        setLoading(true);
+        const combinedFilter = {
+            ...criteriaFilter,
+            ...filter,
+            where: criteriaFilter?.where
+                ? {
+                    and: [criteriaFilter.where, filter?.where],
+                }
+                : filter?.where,
+        };
+        apiServices.get(getPrefixedUrl(`/objects/${object.id}/instances`), { params: { filter: JSON.stringify(combinedFilter) } }, (error, objectInstances) => {
+            if (error) {
+                console.error(error);
+            }
+            else {
+                !!objectInstances && setRows(objectInstances);
+            }
+            setLoading(false);
+        });
+    }
+    useEffect(() => {
+        if (filter || searchString.length) {
+            debounce(() => fetchObjectInstance(), 500)();
+        }
+        else if (searchString === '') {
+            setRows([]);
+        }
+    }, [filter, searchString.length]);
+    return (React.createElement(Grid, { container: true, sx: { paddingBottom: '30px' } },
+        React.createElement(Grid, { item: true, xs: 12 }, searchableColumns.length ? (React.createElement(SearchField, { searchString: searchString, setSearchString: setSearchString, filter: filter, setFilter: setFilter, searchableColumns: searchableColumns })) : (React.createElement(Typography, { sx: { fontSize: '16px', fontWeight: '700' } }, "There are no searchable properties configured for this object"))),
+        React.createElement(BuilderGrid, { item: 'instances', rows: rows, columns: retrieveColumns(layout), onRowClick: (params) => setSelectedInstance(params.row), initialSort: {
+                field: object.viewLayout?.table?.sort?.colId ?? 'name',
+                sort: object.viewLayout?.table?.sort?.sort ?? 'asc',
+            }, sx: {
+                height: '360px',
+                width: '100%',
+            }, hideToolbar: true, loading: loading, hideEmptyContent: true, localeText: {
+                noRowsLabel: searchString.length > 0
+                    ? `No Results Found. Refine your search ${mode !== 'existingOnly' ? 'or create a new record.' : '.'}`
+                    : 'Search to view results',
+            }, noRowsOverlay: React.createElement(Box, { sx: { height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } }, searchString.length > 0 ? (React.createElement(React.Fragment, null,
+                React.createElement(Box, null,
+                    React.createElement(Typography, { sx: {
+                            fontSize: '14px',
+                            fontWeight: 700,
+                            textAlign: 'center',
+                        } }, "No Results Found"),
+                    React.createElement(Typography, { sx: {
+                            fontSize: '14px',
+                            textAlign: 'center',
+                        } },
+                        "Refine your search",
+                        !nestedFieldsView && mode !== 'existingOnly' && (React.createElement(React.Fragment, null,
+                            ' or ',
+                            React.createElement(Button, { variant: "text", onClick: () => setRelationType('new'), sx: {
+                                    padding: '3px 5px',
+                                } }, "enter a new record"))))))) : (React.createElement(Typography, { sx: { fontSize: '16px' } }, "Search to view results"))) })));
+};
+export default InstanceLookup;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ObjectPropertyInputProps } from '../../types';
+declare const ObjectPropertyInput: (props: ObjectPropertyInputProps) => React.JSX.Element;
+export default ObjectPropertyInput;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js

@@ -0,0 +1,439 @@
+import { useApiServices, useApp, useNavigate, } from '@evoke-platform/context';
+import cleanDeep from 'clean-deep';
+import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
+import Handlebars from 'no-eval-handlebars';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Close } from '../../../../../../icons';
+import { useFormContext } from '../../../../../../theme/hooks';
+import { Autocomplete, Button, Dialog, IconButton, Link, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
+import { Box } from '../../../../../layout';
+import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
+import RelatedObjectInstance from './RelatedObjectInstance';
+const ObjectPropertyInput = (props) => {
+    const { id, instance, fieldDefinition, handleChangeObjectProperty, nestedFieldsView, readOnly, error, mode, parameters, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, fieldHeight, richTextEditor, viewLayout, hasDescription, } = props;
+    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const { defaultPages, findDefaultPageSlugFor } = useApp();
+    const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
+    const [openCreateDialog, setOpenCreateDialog] = useState(false);
+    const [allDefaultPages, setAllDefaultPages] = useState(defaultPages ?? {});
+    const [loadingOptions, setLoadingOptions] = useState(false);
+    const [navigationSlug, setNavigationSlug] = useState(fetchedOptions[`${id}NavigationSlug`]);
+    const [relatedObject, setRelatedObject] = useState(fetchedOptions[`${id}RelatedObject`]);
+    const [dropdownInput, setDropdownInput] = useState();
+    const [openOptions, setOpenOptions] = useState(false);
+    const [hasFetched, setHasFetched] = useState(fetchedOptions[`${id}OptionsHaveFetched`] || false);
+    const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
+    const [layout, setLayout] = useState();
+    const [appId, setAppId] = useState(fetchedOptions[`${id}AppId`]);
+    const [form, setForm] = useState();
+    const [snackbarError, setSnackbarError] = useState({
+        showAlert: false,
+        isError: true,
+    });
+    const DEFAULT_CREATE_ACTION = '_create';
+    const action = relatedObject?.actions?.find((action) => action.id === DEFAULT_CREATE_ACTION);
+    const apiServices = useApiServices();
+    const navigateTo = useNavigate();
+    const updatedCriteria = filter
+        ? {
+            where: transformToWhere(filter),
+        }
+        : undefined;
+    useEffect(() => {
+        if (relatedObject) {
+            let defaultViewLayout;
+            if (relatedObject?.viewLayout?.dropdown && displayOption === 'dropdown') {
+                defaultViewLayout = {
+                    id: 'default',
+                    name: 'Default',
+                    objectId: relatedObject.id,
+                    ...relatedObject.viewLayout.dropdown,
+                };
+            }
+            else if (relatedObject?.viewLayout?.table && displayOption === 'dialogBox') {
+                defaultViewLayout = {
+                    id: 'default',
+                    name: 'Default',
+                    objectId: relatedObject.id,
+                    ...relatedObject.viewLayout.table,
+                };
+            }
+            if (viewLayout) {
+                apiServices
+                    .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/${displayOption === 'dropdown' ? 'dropdown' : 'table'}Layouts/${viewLayout.id}`))
+                    .then(setLayout)
+                    .catch((err) => setLayout(defaultViewLayout));
+            }
+            else {
+                setLayout(defaultViewLayout);
+            }
+        }
+    }, [displayOption, relatedObject, viewLayout]);
+    useEffect(() => {
+        // setting the default value when there is default criteria
+        if (!isEmpty(defaultValueCriteria) && !selectedInstance && (!instance || !instance[id])) {
+            const updatedFilter = cleanDeep({
+                where: transformToWhere({ $and: [defaultValueCriteria, updatedCriteria?.where ?? {}] }),
+                order: orderBy && sortBy ? encodeURIComponent(sortBy + ' ' + orderBy) : undefined,
+                limit: 1,
+            });
+            if (updatedFilter.where) {
+                setLoadingOptions(true);
+                apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), (error, instances) => {
+                    if (error) {
+                        console.error(error);
+                        setLoadingOptions(false);
+                    }
+                    if (instances && instances.length > 0) {
+                        setSelectedInstance(instances[0]);
+                        handleChangeObjectProperty(id, instances[0]);
+                    }
+                    setLoadingOptions(false);
+                });
+            }
+        }
+    }, [fieldDefinition, defaultValueCriteria, sortBy, orderBy]);
+    const getDropdownOptions = useCallback((name) => {
+        if ((!fetchedOptions[`${id}Options`] ||
+            fetchedOptions[`${id}Options`].length === 0) &&
+            !hasFetched) {
+            setLoadingOptions(true);
+            const updatedFilter = cloneDeep(updatedCriteria) || {};
+            updatedFilter.limit = 100;
+            const { propertyId, direction } = layout?.sort ?? {
+                propertyId: 'name',
+                direction: 'asc',
+            };
+            updatedFilter.order = `${propertyId} ${direction}`;
+            const where = name
+                ? transformToWhere({
+                    name: {
+                        like: name,
+                        options: 'i',
+                    },
+                })
+                : {};
+            updatedFilter.where = updatedFilter.where
+                ? {
+                    and: [updatedFilter.where, where],
+                }
+                : where;
+            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${JSON.stringify(updatedFilter)}`), (error, instances) => {
+                if (error) {
+                    console.error(error);
+                    setLoadingOptions(false);
+                }
+                if (instances) {
+                    setOptions(instances);
+                    setLoadingOptions(false);
+                    // so if you go off a section too quickly and it doesn't fetch it re-fetches but doesn't cause an infinite loop
+                    setHasFetched(true);
+                }
+            });
+        }
+    }, [relatedObject, setLoadingOptions, setOptions, fieldDefinition, updatedCriteria, layout]);
+    useEffect(() => {
+        if (displayOption === 'dropdown') {
+            getDropdownOptions();
+        }
+    }, [fieldDefinition, updatedCriteria, displayOption]);
+    useEffect(() => {
+        setSelectedInstance(initialValue);
+    }, [initialValue]);
+    const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 200), [updatedCriteria]);
+    useEffect(() => {
+        debouncedGetDropdownOptions(dropdownInput);
+        return () => debouncedGetDropdownOptions.cancel();
+    }, [dropdownInput]);
+    useEffect(() => {
+        if (action?.defaultFormId) {
+            apiServices
+                .get(getPrefixedUrl(`data/forms/${action.defaultFormId}`))
+                .then((evokeForm) => {
+                setForm(evokeForm);
+            })
+                .catch((error) => {
+                console.error('Error fetching form:', error);
+            });
+        }
+    }, [action]);
+    useEffect(() => {
+        if (!fetchedOptions[`${id}RelatedObject`]) {
+            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), (error, object) => {
+                if (error) {
+                    console.error(error);
+                }
+                else {
+                    setRelatedObject(object);
+                }
+            });
+        }
+    }, [fieldDefinition]);
+    useEffect(() => {
+        const fetchDefaultPages = async () => {
+            if (parameters) {
+                const pages = await getDefaultPages(parameters, defaultPages, findDefaultPageSlugFor);
+                setAllDefaultPages(pages);
+            }
+        };
+        fetchDefaultPages();
+    }, []);
+    useEffect(() => {
+        if (fieldDefinition.objectId &&
+            allDefaultPages &&
+            allDefaultPages[fieldDefinition.objectId] &&
+            (!fetchedOptions?.[`${id}NavigationSlug`] || !fetchedOptions[`${id}AppId`])) {
+            apiServices.get(getPrefixedUrl(`/apps/${allDefaultPages[fieldDefinition.objectId].split('/').slice(1, 2)}/pages/${encodePageSlug(allDefaultPages[fieldDefinition.objectId].split('/').slice(2).join('/'))}`), (error, page) => {
+                if (error) {
+                    console.error(error);
+                }
+                else {
+                    setAppId(page?.appId);
+                    setNavigationSlug(page?.slug);
+                }
+            });
+        }
+    }, []);
+    const handleClose = () => {
+        setOpenCreateDialog(false);
+    };
+    const compileExpression = (expression, instance) => {
+        const template = Handlebars.compileAST(expression);
+        return instance ? template(instance) : undefined;
+    };
+    useEffect(() => {
+        if (relatedObject && !fetchedOptions[`${id}RelatedObject`]) {
+            setFetchedOptions({
+                [`${id}RelatedObject`]: relatedObject,
+            });
+        }
+        if (options &&
+            (!fetchedOptions[`${id}Options`] || fetchedOptions[`${id}Options`].length === 0) &&
+            hasFetched &&
+            !fetchedOptions[`${id}OptionsHaveFetched`]) {
+            setFetchedOptions({
+                [`${id}Options`]: options,
+                [`${id}OptionsHaveFetched`]: hasFetched,
+            });
+        }
+        if (navigationSlug && !fetchedOptions[`${id}NavigationSlug`]) {
+            setFetchedOptions({
+                [`${id}NavigationSlug`]: navigationSlug,
+            });
+        }
+    }, [relatedObject, options, hasFetched]);
+    return (React.createElement(React.Fragment, null,
+        displayOption === 'dropdown' ? (React.createElement(React.Fragment, null,
+            React.createElement(Autocomplete, { id: id, fullWidth: true, sortBy: "NONE", open: openOptions, size: fieldHeight, componentsProps: {
+                    popper: {
+                        modifiers: [
+                            {
+                                name: 'flip',
+                                enabled: false,
+                            },
+                        ],
+                    },
+                }, 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)',
+                            },
+                        } },
+                        mode !== 'newOnly' && children,
+                        mode !== 'existingOnly' && form && (React.createElement(Button, { fullWidth: true, sx: {
+                                justifyContent: 'flex-start',
+                                pl: 2,
+                                minHeight: '48px',
+                                borderTop: '1px solid rgba(145, 158, 171, 0.24)',
+                                borderRadius: '0p 0pc 6px 6px',
+                                paddingLeft: '22px',
+                                fontWeight: 400,
+                            }, onMouseDown: (e) => {
+                                setOpenCreateDialog(true);
+                            }, color: 'inherit' }, "+ Add New"))));
+                }, sx: {
+                    '& button.MuiButtonBase-root': {
+                        ...(!loadingOptions &&
+                            (instance?.[id]?.id || selectedInstance?.id)
+                            ? {
+                                visibility: 'visible',
+                            }
+                            : {}),
+                    },
+                    backgroundColor: 'white', // prevents the field flickering gray when loading in the value and options when it's a read only
+                }, noOptionsText: 'No options available', renderOption: (props, option) => {
+                    return (React.createElement("li", { ...props, key: option.id },
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } }, option.label),
+                            layout?.secondaryTextExpression ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression(layout?.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
+                }, onOpen: () => {
+                    if (instance?.[id]?.id || selectedInstance?.id) {
+                        setOpenOptions(false);
+                    }
+                    else {
+                        setOpenOptions(true);
+                    }
+                }, onClose: () => setOpenOptions(false), value: selectedInstance?.id
+                    ? {
+                        value: selectedInstance?.id ?? '',
+                        label: selectedInstance?.name ?? '',
+                    }
+                    : null, isOptionEqualToValue: (option, value) => {
+                    if (typeof value === 'string') {
+                        return option.value === value;
+                    }
+                    return option.value === value?.value;
+                }, options: options.map((o) => ({ label: o.name, value: o.id })), getOptionLabel: (option) => {
+                    return typeof option === 'string'
+                        ? (options.find((o) => o.id === option)?.name ?? '')
+                        : option.label;
+                }, onKeyDownCapture: (e) => {
+                    // prevents keyboard trap
+                    if (e.key === 'Tab') {
+                        return;
+                    }
+                    if (selectedInstance?.id) {
+                        e.preventDefault();
+                    }
+                }, loading: loadingOptions, onChange: (event, value) => {
+                    if (isNil(value)) {
+                        setDropdownInput(undefined);
+                        setSelectedInstance(undefined);
+                        handleChangeObjectProperty(id, null);
+                    }
+                    else {
+                        const selectedInstance = options.find((o) => o.id === value?.value);
+                        setSelectedInstance(selectedInstance);
+                        handleChangeObjectProperty(id, selectedInstance);
+                    }
+                }, selectOnFocus: false, onBlur: () => setDropdownInput(undefined), renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: selectedInstance?.id || readOnly ? '' : 'Select', readOnly: !loadingOptions && !selectedInstance?.id && readOnly, onChange: (event) => setDropdownInput(event.target.value), onClick: (e) => {
+                        if (openOptions &&
+                            e.target?.nodeName === 'svg') {
+                            setOpenOptions(false);
+                        }
+                        else {
+                            setOptions(options);
+                            setOpenOptions(true);
+                        }
+                    }, sx: {
+                        ...(!loadingOptions && selectedInstance?.id
+                            ? {
+                                '.MuiOutlinedInput-root': {
+                                    background: 'white',
+                                    border: 'auto',
+                                    '.MuiOutlinedInput-input': {
+                                        ...(navigationSlug
+                                            ? {
+                                                color: 'rgb(1, 78, 123)',
+                                                textDecoration: 'underline',
+                                                cursor: 'pointer',
+                                            }
+                                            : {}),
+                                    },
+                                },
+                                '& fieldset': {
+                                    border: readOnly ? 'none' : 'auto',
+                                    borderColor: 'auto',
+                                },
+                                '&:hover .MuiOutlinedInput-notchedOutline': {
+                                    border: 'auto',
+                                },
+                                '& svg': {
+                                    display: readOnly ? 'none' : 'block',
+                                },
+                                caretColor: 'white',
+                            }
+                            : {}),
+                    }, InputProps: {
+                        ...params.InputProps,
+                        startAdornment: selectedInstance?.id ? (React.createElement(Typography, { onClick: (e) => {
+                                if (navigationSlug && selectedInstance?.id) {
+                                    navigateTo(`/${appId}/${navigationSlug.replace(':instanceId', selectedInstance.id)}`);
+                                }
+                            }, sx: {
+                                cursor: navigationSlug ? 'pointer' : 'default',
+                                color: navigationSlug ? 'rgb(1, 78, 123)' : 'inherit',
+                                textDecoration: navigationSlug ? 'underline' : 'none',
+                                paddingLeft: '5px',
+                            } }, selectedInstance?.name || '')) : null,
+                    }, inputProps: {
+                        ...params.inputProps,
+                        value: selectedInstance?.id ? '' : params.inputProps.value,
+                        ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined),
+                    } })), readOnly: readOnly, error: error }))) : (React.createElement(Box, { sx: {
+                padding: selectedInstance?.name ? '16.5px 14px' : '10.5px 0',
+            } },
+            (selectedInstance?.name || readOnly) && (React.createElement(Link, { sx: {
+                    textDecoration: 'none',
+                    marginRight: 1,
+                    textDecorationLine: navigationSlug && instance?.[id] && !isModal ? 'underline' : 'none',
+                    cursor: navigationSlug && instance?.[id] && !isModal ? 'pointer' : 'auto',
+                    fontSize: '16px',
+                    fontWeight: 400,
+                    lineHeight: '24px',
+                    textAlign: 'left',
+                    color: navigationSlug && instance?.[id] && !isModal
+                        ? '#0075A7'
+                        : !selectedInstance?.id
+                            ? '#999'
+                            : '#212B36',
+                }, variant: "body2", href: navigationSlug && !isModal
+                    ? `${'/app'}/${appId}/${navigationSlug.replace(':instanceId', selectedInstance?.id ?? '')}`
+                    : undefined, "aria-label": selectedInstance?.name }, selectedInstance?.name ? selectedInstance?.name : readOnly && 'None')),
+            !readOnly && (selectedInstance || (nestedFieldsView && instance?.id)) ? (React.createElement(Tooltip, { title: `Unlink` },
+                React.createElement("span", null,
+                    React.createElement(IconButton, { onClick: (event) => {
+                            event.stopPropagation();
+                            handleChangeObjectProperty(id, null);
+                            setSelectedInstance(undefined);
+                        }, sx: { p: 0, marginBottom: '4px' }, "aria-label": `Unlink` },
+                        React.createElement(Close, { sx: { width: '20px', height: '20px' } }))))) : (React.createElement(Button, { sx: {
+                    backgroundColor: '#DFE3E8',
+                    color: '#212B36',
+                    fontWeight: '700',
+                    textTransform: 'capitalize',
+                    '&:hover': {
+                        backgroundColor: '#e6eaf0',
+                        boxShadow: 'none',
+                    },
+                    '&:disabled': {
+                        cursor: 'not-allowed',
+                        pointerEvents: 'all',
+                    },
+                    boxShadow: 'none',
+                    lineHeight: '2.75',
+                    padding: '0 23px',
+                    display: readOnly ? 'none' : 'block',
+                }, size: "small", variant: "contained", disableElevation: true, onClick: (event) => {
+                    event.stopPropagation();
+                    setOpenCreateDialog(true);
+                }, "aria-label": `Add` }, "Add")))),
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { id: id, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, nestedFieldsView: nestedFieldsView, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, fieldHeight: fieldHeight, richTextEditor: richTextEditor, form: form, action: action, setSnackbarError: setSnackbarError, selectedInstance: selectedInstance })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
+            React.createElement(Typography, { sx: {
+                    marginTop: '28px',
+                    fontSize: '22px',
+                    fontWeight: 700,
+                    marginLeft: '24px',
+                    marginBottom: '10px',
+                } }, `Add ${fieldDefinition.name}`),
+            React.createElement(RelatedObjectInstance, { handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, fieldHeight: fieldHeight, richTextEditor: richTextEditor, form: form, action: action, setSnackbarError: setSnackbarError, selectedInstance: selectedInstance }))))),
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
+                isError: snackbarError.isError,
+                showAlert: false,
+            }), message: snackbarError.message, error: snackbarError.isError })));
+};
+export default ObjectPropertyInput;