@evoke-platform/ui-components 1.9.1-testing.1 → 1.10.0-testing.0

package/dist/published/components/custom/FormV2/components/Footer.d.ts

@@ -0,0 +1,15 @@
+import { Action } from '@evoke-platform/context';
+import { SxProps } from '@mui/material/styles';
+import React from 'react';
+export type FooterProps = {
+    onSubmit: () => Promise<void>;
+    onDiscardChanges: () => void;
+    action?: Action;
+    submitButtonLabel?: string;
+    discardChangesButtonLabel?: string;
+    sx?: SxProps;
+};
+export declare const Footer: React.FC<FooterProps>;
+export type FooterActionsProps = Omit<FooterProps, 'sx'>;
+export declare const FooterActions: (props: FooterActionsProps) => React.JSX.Element;
+export default Footer;

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

@@ -0,0 +1,77 @@
+import React, { useContext } from 'react';
+import { useWidgetSize } from '../../../../theme';
+import Button from '../../../core/Button/Button';
+import LoadingButton from '../../../core/LoadingButton/LoadingButton';
+import { Box } from '../../../layout';
+import { FormContext } from './FormContext';
+/* Default FormRenderer Footer. Displays a submit button and cancel changes button. */
+export const Footer = (props) => {
+    const { action, sx } = props;
+    const { width } = useContext(FormContext);
+    const { isBelow, breakpoints } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
+    const { isXs } = breakpoints;
+    const isSmallerThanMd = isBelow('md');
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            flexWrap: 'wrap-reverse',
+            padding: isSmallerThanMd ? '16px' : '20px',
+            justifyContent: isXs ? 'center' : 'flex-end',
+            alignItems: 'center',
+            borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
+            borderRadius: '0px 0px 6px 6px',
+            ...sx,
+        } },
+        React.createElement(FooterActions, { ...props })));
+};
+export const FooterActions = (props) => {
+    const { action, onDiscardChanges, onSubmit, submitButtonLabel, discardChangesButtonLabel } = props;
+    const { width } = useContext(FormContext);
+    const [loading, setLoading] = React.useState(false);
+    const handleSubmit = async () => {
+        setLoading(true);
+        try {
+            await onSubmit();
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const { breakpoints } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
+    const { isXs } = breakpoints;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: onDiscardChanges, variant: "outlined", sx: {
+                margin: '5px',
+                marginX: isXs ? '0px' : undefined,
+                color: 'black',
+                border: '1px solid rgb(206, 212, 218)',
+                width: isXs ? '100%' : 'auto',
+                '&:hover': {
+                    backgroundColor: '#f2f4f7',
+                    border: '1px solid rgb(206, 212, 218)',
+                },
+            } }, discardChangesButtonLabel),
+        React.createElement(LoadingButton, { onClick: handleSubmit, variant: "contained", sx: {
+                lineHeight: '2.75',
+                margin: '5px 0 5px 5px',
+                marginX: isXs ? '0px' : undefined,
+                padding: '0 23px',
+                backgroundColor: action?.type === 'delete' ? '#A12723' : 'primary',
+                borderRadius: '8px',
+                boxShadow: 'none',
+                whiteSpace: 'nowrap',
+                width: isXs ? '100%' : 'auto',
+                '& .MuiCircularProgress-root': {
+                    color: 'white',
+                },
+                '&:hover': {
+                    backgroundColor: action?.type === 'delete' ? ' #8C2421' : '#014E7B',
+                },
+            }, loading: loading }, submitButtonLabel)));
+};
+export default Footer;

package/dist/published/components/custom/FormV2/components/FormContext.d.ts

@@ -1,4 +1,4 @@
-import { InputParameter, Obj } from '@evoke-platform/context';
+import { EvokeForm, InputParameter, Obj } from '@evoke-platform/context';
 import { ComponentType } from 'react';
 import { FieldValues, UseFormGetValues } from 'react-hook-form';
 import { ExpandedSection, SimpleEditorProps } from './types';
@@ -6,7 +6,6 @@ type FormContextType = {
     fetchedOptions: FieldValues;
     setFetchedOptions: (newData: FieldValues) => void;
     getValues: UseFormGetValues<FieldValues>;
-    stickyFooter?: boolean;
     object?: Obj;
     errors?: FieldValues;
     instance?: FieldValues;
@@ -24,6 +23,7 @@ type FormContextType = {
         instanceId?: string;
         propertyId?: string;
     };
+    form?: EvokeForm;
     width: number;
 };
 export declare const FormContext: import("react").Context<FormContextType>;

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

@@ -3,7 +3,6 @@ export const FormContext = createContext({
     fetchedOptions: {},
     setFetchedOptions: () => { },
     getValues: (() => ({})),
-    stickyFooter: false,
     object: undefined,
     errors: {},
     instance: {},
@@ -14,6 +13,7 @@ export const FormContext = createContext({
     triggerFieldReset: false,
     handleChange: () => { },
     fieldHeight: 'medium',
+    form: {},
     // Default width 1200 to match common 'lg' render size and avoid style changes on first render
     width: 1200,
 });

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.d.ts

@@ -5,7 +5,7 @@ export type ActionDialogProps = {
     open: boolean;
     onClose: () => void;
     action: Action;
-    handleSubmit: (action: Action, input: FieldValues, instanceId?: string, setSubmitting?: (value: boolean) => void) => void;
+    onSubmit: (input: FieldValues) => void;
     object: Obj;
     instanceId?: string;
     relatedParameter: InputParameter;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.js

@@ -1,12 +1,17 @@
 import { useApiServices } from '@evoke-platform/context';
 import { Close } from '@mui/icons-material';
-import React, { useEffect, useState } from 'react';
-import { useFormContext } from '../../../../../../theme/hooks';
-import { Dialog, DialogContent, DialogTitle, IconButton, Skeleton } from '../../../../../core';
-import { Box } from '../../../../../layout';
+import { isEmpty } from 'lodash';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import useWidgetSize, { useFormContext } from '../../../../../../theme/hooks';
+import { Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Skeleton } from '../../../../../core';
 import ErrorComponent from '../../../../ErrorComponent';
 import FormRendererContainer from '../../../FormRendererContainer';
+import Body from '../../Body';
+import { Footer } from '../../Footer';
+import { FormContext } from '../../FormContext';
+import { AccordionActions } from '../../Header';
 import { getPrefixedUrl } from '../../utils';
+import ValidationErrors from '../../ValidationFiles/ValidationErrors';
 const styles = {
     button: {
         textTransform: 'initial',
@@ -17,8 +22,7 @@ const styles = {
     dialogTitle: {
         fontSize: '18px',
         fontWeight: 700,
-        paddingTop: '35px',
-        paddingBottom: '20px',
+        padding: 3,
     },
     closeIcon: {
         position: 'absolute',
@@ -38,11 +42,18 @@ const styles = {
     },
 };
 export const ActionDialog = (props) => {
-    const { open, onClose, action, object, instanceId, relatedFormId, relatedParameter, handleSubmit, associatedObject, } = props;
+    const { open, onClose, action, object, instanceId, relatedFormId, relatedParameter, onSubmit, associatedObject } = props;
     const [loading, setLoading] = useState(false);
-    const [hasAccess, setHasAccess] = useState();
-    const { stickyFooter, fieldHeight, richTextEditor } = useFormContext();
+    const [hasAccess, setHasAccess] = useState(true);
+    const { fieldHeight, richTextEditor } = useFormContext();
+    const validationErrorsRef = useRef(null);
     const apiServices = useApiServices();
+    const { width } = useContext(FormContext);
+    const { breakpoints } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
+    const { isXs, isSm } = breakpoints;
     useEffect(() => {
         if (instanceId) {
             setLoading(true);
@@ -59,20 +70,51 @@ export const ActionDialog = (props) => {
         }
     }, [object, instanceId]);
     const handleFormSave = async (data) => {
-        return handleSubmit(action, data, instanceId);
+        return onSubmit(data);
+    };
+    const handleSaveError = () => {
+        if (validationErrorsRef.current) {
+            validationErrorsRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
     };
     return (React.createElement(Dialog, { PaperProps: {
             sx: { maxWidth: '950px', width: '100%' },
-        }, fullWidth: true, open: open, onClose: (e, reason) => reason !== 'backdropClick' && onClose() },
-        React.createElement(DialogTitle, { sx: { ...styles.dialogTitle, borderBottom: action.type === 'delete' ? undefined : '1px solid #e9ecef' } },
-            React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
-                React.createElement(Close, { fontSize: "small" })),
-            action && hasAccess && !loading ? action?.name : ''),
-        React.createElement(DialogContent, { sx: { paddingBottom: loading ? undefined : '0px' } }, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } },
-            React.createElement(FormRendererContainer, { instanceId: instanceId, formId: relatedFormId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: action.id, stickyFooter: stickyFooter, 
-                // relatedParameter will have an objectId here
-                objectId: relatedParameter.objectId, onClose: onClose, onSubmit: handleFormSave, richTextEditor: richTextEditor, associatedObject: associatedObject }))) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
-            React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
-            React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
-            React.createElement(Skeleton, { height: '30px', animation: 'wave' }))) : (React.createElement(ErrorComponent, { code: 'AccessDenied', message: 'You do not have permission to perform this action.', styles: { boxShadow: 'none' } })))))));
+        }, fullWidth: true, open: open, onClose: (e, reason) => reason !== 'backdropClick' && onClose() }, hasAccess ? (React.createElement(FormRendererContainer, { instanceId: instanceId, formId: relatedFormId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: action.id, 
+        // relatedParameter will have an objectId here
+        objectId: relatedParameter.objectId, onSubmit: handleFormSave, onDiscardChanges: onClose, onSubmitError: handleSaveError, richTextEditor: richTextEditor, associatedObject: associatedObject, renderHeader: (formHeaderProps) => {
+            return (React.createElement(DialogTitle, { sx: {
+                    ...styles.dialogTitle,
+                    borderBottom: action.type === 'delete' ? undefined : '1px solid #e9ecef',
+                } },
+                action && hasAccess && !loading ? action?.name : '',
+                React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
+                    React.createElement(Close, { fontSize: "small" })),
+                formHeaderProps.hasAccordions && React.createElement(AccordionActions, { ...formHeaderProps })));
+        }, renderBody: (bodyProps) => (React.createElement(DialogContent, { sx: {
+                padding: '20px 24px 0px 24px',
+                paddingBottom: loading ? undefined : '0px',
+                maxHeight: 'calc(100vh - 340px)',
+                overflowY: 'auto',
+            } },
+            React.createElement("div", { ref: validationErrorsRef }, !isEmpty(bodyProps.errors) && bodyProps.shouldShowValidationErrors ? (React.createElement(ValidationErrors, { errors: bodyProps.errors, sx: {
+                    my: isSm || isXs ? 2 : 3,
+                } })) : null),
+            React.createElement(Body, { ...bodyProps, sx: { padding: 0 } }))), renderFooter: (footerProps) => (React.createElement(DialogActions, { sx: { padding: 0 } },
+            React.createElement(Footer, { ...footerProps, discardChangesButtonLabel: "Cancel" }))), renderContainer: ({ status, error, defaultContainer }) => (React.createElement(React.Fragment, null,
+            status === 'ready' && defaultContainer,
+            status === 'loading' && (React.createElement(DialogContent, null,
+                React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
+                    React.createElement(Close, { fontSize: "small" })),
+                defaultContainer)),
+            status === 'error' && (React.createElement(DialogContent, null,
+                React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
+                    React.createElement(Close, { fontSize: "small" })),
+                React.createElement(ErrorComponent, { code: error === 403
+                        ? 'AccessDenied'
+                        : error === 404
+                            ? 'NotFound'
+                            : 'Misconfigured', styles: { boxShadow: 'none' } }))))) })) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
+        React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
+        React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
+        React.createElement(Skeleton, { height: '30px', animation: 'wave' }))) : (!hasAccess && (React.createElement(ErrorComponent, { code: 'AccessDenied', message: 'You do not have permission to perform this action.', styles: { boxShadow: 'none' } })))))));
 };

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js

@@ -45,7 +45,7 @@ const RepeatableField = (props) => {
     const apiServices = useApiServices();
     const [reloadOnErrorTrigger, setReloadOnErrorTrigger] = useState(true);
     const [criteriaObjects, setCriteriaObjects] = useState([]);
-    const [selectedRow, setSelectedRow] = useState();
+    const [selectedInstanceId, setSelectedInstanceId] = useState();
     const [dialogType, setDialogType] = useState();
     const [openDialog, setOpenDialog] = useState(false);
     const [users, setUsers] = useState(fetchedOptions[`${fieldDefinition.id}Users`] || []);
@@ -314,17 +314,17 @@ const RepeatableField = (props) => {
     }, [relatedObject, relatedInstances, hasCreateAction, tableViewLayout]);
     const deleteRow = (id) => {
         setDialogType('delete');
-        setSelectedRow(id);
+        setSelectedInstanceId(id);
         setOpenDialog(true);
     };
     const addRow = () => {
         setDialogType('create');
-        setSelectedRow(undefined);
+        setSelectedInstanceId(undefined);
         setOpenDialog(true);
     };
     const editRow = (id) => {
         setDialogType('update');
-        setSelectedRow(id);
+        setSelectedInstanceId(id);
         setOpenDialog(true);
     };
     const ErrorComponent = () => loading ? (React.createElement("div", null,
@@ -344,10 +344,12 @@ const RepeatableField = (props) => {
                 },
                 'min-width': '44px',
             }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
-    const save = async (action, input, instanceId) => {
+    const save = async (input) => {
+        const action = relatedObject?.actions?.find((a) => a.id ===
+            (dialogType === 'create' ? createActionId : dialogType === 'update' ? updateActionId : deleteActionId));
         // when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
-        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, instanceId, action.type === 'update' ? updateForm : undefined);
-        if (action.type === 'create' && createActionId) {
+        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : undefined);
+        if (action?.type === 'create' && createActionId) {
             const updatedInput = {
                 ...input,
                 [fieldDefinition?.relatedPropertyId]: { id: instance?.id },
@@ -361,7 +363,7 @@ const RepeatableField = (props) => {
                 hasAccess && setRelatedInstances([...relatedInstances, instance]);
                 setOpenDialog(false);
                 setDialogType(undefined);
-                setSelectedRow(undefined);
+                setSelectedInstanceId(undefined);
             }
             catch (err) {
                 setSnackbarError({
@@ -375,8 +377,8 @@ const RepeatableField = (props) => {
         else {
             const relatedObjectId = relatedObject?.id;
             try {
-                const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${instanceId}/actions`), {
-                    actionId: `_${action.type}`,
+                const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${selectedInstanceId}/actions`), {
+                    actionId: `_${action?.type}`,
                     input: pick(input, relatedObject?.properties
                         ?.filter((property) => !property.formula && property.type !== 'collection')
                         .map((property) => property.id) ?? []),
@@ -384,21 +386,21 @@ const RepeatableField = (props) => {
                 if (response && relatedObject && instance) {
                     deleteDocuments(input, !!response, apiServices, relatedObject, instance, action);
                 }
-                if (action.type === 'delete') {
-                    setRelatedInstances((prevInstances) => prevInstances.filter((instance) => instance.id !== instanceId));
+                if (action?.type === 'delete') {
+                    setRelatedInstances((prevInstances) => prevInstances.filter((instance) => instance.id !== selectedInstanceId));
                 }
                 else {
                     setRelatedInstances((prevInstances) => prevInstances.map((i) => (i.id === instance?.id ? instance : i)));
                 }
                 setOpenDialog(false);
                 setDialogType(undefined);
-                setSelectedRow(undefined);
+                setSelectedInstanceId(undefined);
             }
             catch (err) {
                 setSnackbarError({
                     showAlert: true,
                     message: retrieveCustomErrorMessage(err) ??
-                        `An error occurred while ${action.type === 'delete' ? ' deleting' : ' updating'} an instance`,
+                        `An error occurred while ${action?.type === 'delete' ? ' deleting' : ' updating'} an instance`,
                     isError: true,
                 });
             }
@@ -559,7 +561,7 @@ const RepeatableField = (props) => {
                                 React.createElement(Tooltip, { title: "Delete" },
                                     React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
             hasCreateAction && createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
-        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), handleSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
+        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), onSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create'
                     ? createActionId
                     : dialogType === 'update'
@@ -570,7 +572,7 @@ const RepeatableField = (props) => {
                     ? updateForm?.id
                     : dialogType === 'delete'
                         ? deleteForm?.id
-                        : undefined, instanceId: selectedRow, relatedParameter: fieldDefinition, associatedObject: instance?.id && fieldDefinition.relatedPropertyId
+                        : undefined, instanceId: selectedInstanceId, relatedParameter: fieldDefinition, associatedObject: instance?.id && fieldDefinition.relatedPropertyId
                 ? { instanceId: instance.id, propertyId: fieldDefinition.relatedPropertyId }
                 : undefined })),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));

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

@@ -1,7 +1,7 @@
 import { useApiServices } from '@evoke-platform/context';
 import { isNil } from 'lodash';
 import prettyBytes from 'pretty-bytes';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { InfoRounded, UploadCloud } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
@@ -33,11 +33,8 @@ export const Document = (props) => {
     useEffect(() => {
         setDocuments(value);
     }, [value]);
-    useEffect(() => {
-        checkPermissions();
-    }, [object]);
-    const checkPermissions = () => {
-        if (canUpdateProperty && !fetchedOptions[`${id}UpdatePermission`]) {
+    const checkPermissions = useCallback(() => {
+        if (canUpdateProperty && !fetchedOptions[`${id}UpdatePermission`] && instance?.id) {
             apiServices
                 .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=update`))
                 .then((accessCheck) => {
@@ -47,7 +44,10 @@ export const Document = (props) => {
                 setHasUpdatePermission(accessCheck.result);
             });
         }
-    };
+    }, [canUpdateProperty, fetchedOptions, instance, object]);
+    useEffect(() => {
+        checkPermissions();
+    }, [checkPermissions]);
     const handleUpload = async (files) => {
         const newDocuments = [...(documents ?? []), ...(files ?? [])];
         setDocuments(newDocuments);

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

@@ -7,7 +7,6 @@ export type InstanceLookUpProps = BaseProps & {
     setSelectedInstance: (selectedInstance: ObjectInstance) => void;
     setRelationType: (relationType: 'new' | 'existing') => void;
     mode: 'default' | 'existingOnly';
-    nestedFieldsView?: boolean;
     filter?: Record<string, unknown>;
     layout?: TableViewLayout;
 };

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

@@ -2,7 +2,7 @@ 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 React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, IconButton, InputAdornment, TextField, Typography, } from '../../../../../core';
 import { Box, Grid } from '../../../../../layout';
 import BuilderGrid from '../../../../BuilderGrid';
@@ -50,7 +50,7 @@ const SearchField = (props) => {
         } }));
 };
 const InstanceLookup = (props) => {
-    const { object, setSelectedInstance, setRelationType, filter: criteriaFilter, mode, nestedFieldsView, layout, } = props;
+    const { object, setSelectedInstance, setRelationType, filter: criteriaFilter, mode, layout } = props;
     const [rows, setRows] = useState([]);
     const [loading, setLoading] = useState(false);
     const [filter, setFilter] = useState();
@@ -164,7 +164,7 @@ const InstanceLookup = (props) => {
         }
         return columns;
     };
-    function fetchObjectInstance() {
+    const fetchObjectInstance = useCallback(() => {
         setLoading(true);
         const combinedFilter = {
             ...criteriaFilter,
@@ -184,16 +184,18 @@ const InstanceLookup = (props) => {
             }
             setLoading(false);
         });
-    }
+    }, [object.id, criteriaFilter, filter]);
+    const debouncedFetchObjectInstances = useMemo(() => debounce(fetchObjectInstance, 500), [fetchObjectInstance]);
     useEffect(() => {
         if (filter || searchString.length) {
-            debounce(() => fetchObjectInstance(), 500)();
+            debouncedFetchObjectInstances();
         }
         else if (searchString === '') {
             setRows([]);
         }
-    }, [filter, searchString.length]);
-    return (React.createElement(Grid, { container: true, sx: { padding: '30px 24px' } },
+        return () => debouncedFetchObjectInstances.cancel();
+    }, [filter, searchString.length, debouncedFetchObjectInstances]);
+    return (React.createElement(Grid, { container: true },
         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',
@@ -217,7 +219,7 @@ const InstanceLookup = (props) => {
                             textAlign: 'center',
                         } },
                         "Refine your search",
-                        !nestedFieldsView && mode !== 'existingOnly' && (React.createElement(React.Fragment, null,
+                        mode !== 'existingOnly' && (React.createElement(React.Fragment, null,
                             ' or ',
                             React.createElement(Button, { variant: "text", onClick: () => setRelationType('new'), sx: {
                                     padding: '3px 5px',