@evoke-platform/ui-components 1.13.0-dev.6 → 1.13.0-dev.7

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

@@ -27,7 +27,7 @@ export type FormRendererProps = BaseProps & {
     renderBody?: (props: BodyProps) => React.ReactNode;
     renderFooter?: (props: FooterProps) => React.ReactNode;
 };
-export declare const FormRenderer: React.FC<FormRendererProps> & {
+export declare const FormRenderer: ((props: FormRendererProps) => React.JSX.Element) & {
     Header: React.FC<HeaderProps>;
     Body: React.FC<BodyProps>;
     Footer: React.FC<FooterProps>;

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

@@ -1,14 +1,16 @@
-import { useObject } from '@evoke-platform/context';
+import { useApiServices, } from '@evoke-platform/context';
+import { useQuery } from '@tanstack/react-query';
 import { isEmpty, isEqual, omit } from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useWidgetSize } from '../../../theme';
 import { Box } from '../../layout';
 import { Body } from './components/Body';
+import ConditionalQueryClientProvider from './components/ConditionalQueryClientProvider';
 import { Footer, FooterActions } from './components/Footer';
 import { FormContext } from './components/FormContext';
 import Header, { AccordionActions, Title } from './components/Header';
-import { assignIdsToSectionsAndRichText, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, obfuscateValue, } from './components/utils';
+import { assignIdsToSectionsAndRichText, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, getPrefixedUrl, isAddressProperty, obfuscateValue, } from './components/utils';
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 const FormRendererInternal = (props) => {
@@ -23,15 +25,14 @@ const FormRendererInternal = (props) => {
         defaultWidth: 1200,
     });
     const isSmallerThanMd = isBelow('md');
+    const apiServices = useApiServices();
     const [expandedSections, setExpandedSections] = useState([]);
     const [fetchedOptions, setFetchedOptions] = useState({});
     const [expandAll, setExpandAll] = useState();
     const [action, setAction] = useState();
-    const [object, setObject] = useState();
     const [triggerFieldReset, setTriggerFieldReset] = useState(false);
     const [isInitializing, setIsInitializing] = useState(true);
     const [parameters, setParameters] = useState();
-    const objectStore = useObject(objectId);
     const validationContainerRef = useRef(null);
     const updateFetchedOptions = (newData) => {
         setFetchedOptions((prev) => ({
@@ -45,32 +46,26 @@ const FormRendererInternal = (props) => {
     function handleCollapseAll() {
         setExpandAll(false);
     }
+    const { data: object } = useQuery({
+        queryKey: [objectId, 'sanitized'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${objectId}/effective`), {
+            params: { sanitizedVersion: true },
+        }),
+        staleTime: Infinity,
+        enabled: !!objectId,
+    });
     const updatedEntries = useMemo(() => {
         return object ? assignIdsToSectionsAndRichText(entries, object, parameters) : [];
     }, [entries, object, parameters]);
     useEffect(() => {
-        (async () => {
-            try {
-                const object = await objectStore.get({ sanitized: true });
-                const action = object?.actions?.find((a) => a.id === actionId);
-                setObject(object);
-                setAction(action);
-                if (action?.parameters) {
-                    setParameters(action.parameters);
-                }
-                else if (object) {
-                    // if forms actionId is synced with object properties
-                    setParameters(convertPropertiesToParams(object));
-                }
-            }
-            catch (error) {
-                console.error('Failed to fetch object, action or parameters:', error);
-            }
-            finally {
-                setIsInitializing(false);
-            }
-        })();
-    }, [objectStore, actionId]);
+        if (!object || !actionId)
+            return;
+        const action = object.actions?.find((a) => a.id === actionId);
+        setAction(action);
+        // if forms action is synced with object properties then convertPropertiesToParams
+        setParameters(action?.parameters ?? convertPropertiesToParams(object));
+        setIsInitializing(false);
+    }, [object, actionId]);
     useEffect(() => {
         const currentValues = getValues();
         if (value) {
@@ -243,7 +238,10 @@ const FormRendererInternal = (props) => {
                     } })),
                 action && onSubmit && (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
 };
-export const FormRenderer = Object.assign(FormRendererInternal, {
+export const FormRenderer = Object.assign(function FormRenderer(props) {
+    return (React.createElement(ConditionalQueryClientProvider, null,
+        React.createElement(FormRendererInternal, { ...props })));
+}, {
     Header,
     Body,
     Footer,

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

@@ -1,21 +1,27 @@
 import { useApiServices, useApp, useAuthenticationContext, useNavigate, useObject, } from '@evoke-platform/context';
+import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { cloneDeep, get, isArray, isEmpty, isEqual, omit, pick, set } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton, Snackbar } from '../../core';
 import { Box } from '../../layout';
 import ErrorComponent from '../ErrorComponent';
+import ConditionalQueryClientProvider from './components/ConditionalQueryClientProvider';
 import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
 import Header from './components/Header';
-import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, } from './components/utils';
+import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
 import FormRenderer from './FormRenderer';
+// Wrapper to provide QueryClient context for FormRendererContainer if this is not a nested form
 function FormRendererContainer(props) {
-    const { instanceId, pageNavigation, dataType, display, formId, objectId, actionId, richTextEditor, onSubmit, onDiscardChanges: onDiscardChangesOverride, associatedObject, renderContainer, onSubmitError, sx, renderHeader, renderBody, renderFooter, } = props;
+    return (React.createElement(ConditionalQueryClientProvider, null,
+        React.createElement(FormRendererContainerInner, { ...props })));
+}
+// Inner component that assumes QueryClient context is available
+function FormRendererContainerInner(props) {
+    const { instanceId, pageNavigation, display, formId, objectId, actionId, richTextEditor, onSubmit, onDiscardChanges: onDiscardChangesOverride, associatedObject, renderContainer, onSubmitError, sx, renderHeader, renderBody, renderFooter, } = props;
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
     const { id: appId } = useApp();
-    const [sanitizedObject, setSanitizedObject] = useState();
-    const [navigationSlug, setNavigationSlug] = useState();
     const [parameters, setParameters] = useState();
     const [instance, setInstance] = useState();
     const formDataRef = useRef();
@@ -53,72 +59,68 @@ function FormRendererContainer(props) {
         setSnackbarError({ ...snackbarError, isError: true });
         setError(code ?? err);
     };
+    const { data: sanitizedObject, error: sanitizedObjectError } = useQuery({
+        queryKey: [form?.objectId ?? objectId, ...(instanceId ? [instanceId] : []), 'sanitized'],
+        queryFn: () => 
+        // form?.objectId is needed for subtype forms to get the correct object
+        apiServices.get(getPrefixedUrl(`/objects/${form?.objectId ?? objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } }),
+        staleTime: Infinity,
+        enabled: !!(form?.objectId || objectId),
+    });
+    const { data: fetchedInstance, error: instanceError } = useQuery({
+        queryKey: [objectId, instanceId, 'instance'],
+        queryFn: () => objectStore.getInstance(instanceId),
+        staleTime: Infinity,
+        enabled: !!instanceId && !!sanitizedObject,
+    });
     useEffect(() => {
-        (async () => {
-            try {
-                if (instanceId) {
-                    const instance = await objectStore.getInstance(instanceId);
-                    setInstance(instance);
-                }
-                const object = await apiServices.get(getPrefixedUrl(`/objects/${form?.objectId || objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } });
-                setSanitizedObject(object);
-                const action = object?.actions?.find((a) => a.id === (form?.actionId || actionId));
-                if (action && (instanceId || action.type === 'create')) {
-                    setAction(action);
-                    // Clear error if action is found after being missing
-                    // TODO: This entire effect should take place after form is fetched to avoid an error flickering
-                    // That is, this effect should be merged with the one below that fetches the form
-                    setError((prevError) => prevError === 'Action could not be found' ? undefined : prevError);
-                }
-                else {
-                    setError('Action could not be found');
-                }
-            }
-            catch (error) {
-                onError(error);
-            }
-        })();
-    }, [dataType, form, instanceId]);
+        if (fetchedInstance)
+            setInstance(fetchedInstance);
+        if (instanceError)
+            onError(instanceError);
+    }, [fetchedInstance, instanceError]);
     useEffect(() => {
-        if (pageNavigation) {
-            apiServices
-                .get(getPrefixedUrl(`/apps/${appId}/pages/${encodePageSlug(pageNavigation)}`))
-                .then((page) => {
-                setNavigationSlug(page?.slug);
-            });
+        if (!sanitizedObject)
+            return;
+        const action = sanitizedObject.actions?.find((a) => a.id === (form?.actionId || actionId));
+        if (action && (instanceId || action.type === 'create')) {
+            setAction(action);
+            // Clear error if action is found after being missing
+            setError((prevError) => (prevError === 'Action could not be found' ? undefined : prevError));
         }
-    }, []);
+        else {
+            setError('Action could not be found');
+        }
+    }, [sanitizedObject, actionId, form?.actionId, instanceId]);
+    const { data: navigationSlug } = useQuery({
+        queryKey: [appId, 'navigationSlug'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/apps/${appId}/pages/${encodePageSlug(pageNavigation)}`)),
+        select: (page) => page.slug,
+        staleTime: Infinity,
+        enabled: !!pageNavigation,
+    });
+    const formIdToFetch = formId || action?.defaultFormId;
+    const { data: fetchedForm, error: fetchedFormError } = useFormById(formIdToFetch ?? '', apiServices);
     useEffect(() => {
-        const needsInstance = action?.type !== 'create' && !!instanceId;
-        // Instance and Action are loaded in the side effect above; wait for them to complete.
-        const loading = (actionId && !action) || (needsInstance && !instance);
-        if (form || loading)
-            return;
-        if ((formId || action?.defaultFormId) && formId !== '_auto_') {
-            apiServices
-                .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
-                .then((evokeForm) => {
-                // If an actionId is provided, ensure it matches the form's actionId
-                if (!actionId || evokeForm?.actionId === actionId) {
-                    const form = evokeForm;
-                    setForm(form);
-                }
-                else {
-                    setError('Configured action ID does not match form action ID');
-                }
-            })
-                .catch((error) => {
-                onError(error);
-            });
+        if (!formIdToFetch && action) {
+            setError('Action form could not be found');
+        }
+    }, [formIdToFetch, action]);
+    useEffect(() => {
+        if (fetchedForm) {
+            if (actionId && fetchedForm.actionId !== actionId) {
+                setError('Configured action ID does not match form action ID');
+            }
+            setForm(fetchedForm);
         }
-        else if (action?.type === 'delete' && formId === '_auto_') {
+        else if (action?.type === 'delete' && formId === '_auto_' && instance) {
             setForm({
                 id: '',
-                name: '',
+                name: 'Delete',
                 entries: [
                     {
                         type: 'content',
-                        html: `<p style="padding-top: 24px; padding-bottom: 24px;">You are about to delete <strong>${instance?.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
+                        html: `<p style="padding-top: 24px; padding-bottom: 24px;">You are about to delete <strong>${instance.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
                     },
                 ],
                 objectId: objectId,
@@ -128,10 +130,12 @@ function FormRendererContainer(props) {
                 },
             });
         }
-        else {
-            setError('Action form could not be found');
-        }
-    }, [action, actionId, objectId, instance]);
+    }, [fetchedForm, instance, action, formId]);
+    useEffect(() => {
+        const error = sanitizedObjectError || fetchedFormError;
+        if (error)
+            onError(error);
+    }, [sanitizedObjectError, fetchedFormError]);
     useEffect(() => {
         if (!form)
             return;
@@ -141,7 +145,7 @@ function FormRendererContainer(props) {
     }, [form, action?.parameters, sanitizedObject]);
     useEffect(() => {
         const getInitialValues = async () => {
-            if (form && (instance || !instanceId)) {
+            if (form && parameters && (instance || !instanceId)) {
                 const defaultValues = await getDefaultValues(form.entries, instance || {});
                 setFormData(defaultValues);
                 // Deep clone to avoid reference issues
@@ -149,7 +153,7 @@ function FormRendererContainer(props) {
             }
         };
         getInitialValues();
-    }, [form, instance, sanitizedObject]);
+    }, [form, instance, sanitizedObject, parameters]);
     const onSubmissionSuccess = (updatedInstance) => {
         setSnackbarError({
             showAlert: true,

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

@@ -0,0 +1,5 @@
+import React from 'react';
+declare function ConditionalQueryClientProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export default ConditionalQueryClientProvider;

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

@@ -0,0 +1,21 @@
+import { QueryCache, QueryClient, QueryClientContext, QueryClientProvider } from '@tanstack/react-query';
+import React, { useContext, useState } from 'react';
+// If FormRenderer is rendered outside a QueryClientProvider (e.g. standalone usage),
+// we create a local QueryClient so React Query hooks still work.
+// If a provider already exists, we reuse it to avoid fragmenting the cache.
+function ConditionalQueryClientProvider({ children }) {
+    const existingQueryClient = useContext(QueryClientContext);
+    const [localQueryClient] = useState(() => new QueryClient({
+        queryCache: new QueryCache({
+            onError: (error, query) => {
+                const message = query.meta?.errorMessage ?? 'Something went wrong:';
+                console.error(message, error);
+            },
+        }),
+    }));
+    if (existingQueryClient) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return React.createElement(QueryClientProvider, { client: localQueryClient }, children);
+}
+export default ConditionalQueryClientProvider;

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

@@ -1,24 +1,21 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
-import { debounce, isArray, isEmpty, isEqual } from 'lodash';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { debounce, isEmpty } from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Skeleton } from '../../../../../core';
 import { retrieveCustomErrorMessage } from '../../../../Form/utils';
 import { getMiddleObject, getMiddleObjectFilter, getPrefixedUrl, transformToWhere } from '../../utils';
 import { DropdownRepeatableFieldInput } from './DropdownRepeatableFieldInput';
 const DropdownRepeatableField = (props) => {
-    const { id, fieldDefinition, criteria, readOnly, initialMiddleObjectInstances, middleObject, hasDescription, viewLayout, } = props;
-    const { fetchedOptions, setFetchedOptions, instance } = useFormContext();
+    const { id, fieldDefinition, criteria, readOnly, middleObject, hasDescription, viewLayout, initialMiddleObjectInstances, } = props;
+    const { instance } = useFormContext();
     const [layout, setLayout] = useState();
-    const [loading, setLoading] = useState(false);
     const [layoutLoaded, setLayoutLoaded] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const [middleObjectInstances, setMiddleObjectInstances] = useState(initialMiddleObjectInstances);
-    const [endObject, setEndObject] = useState(fetchedOptions[`${fieldDefinition.id}EndObject`]);
-    const [endObjectInstances, setEndObjectInstances] = useState(fetchedOptions[`${fieldDefinition.id}EndObjectInstances`] || []);
-    const [initialLoading, setInitialLoading] = useState(endObjectInstances ? false : true);
+    const [debouncedSearchValue, setDebouncedSearchValue] = useState();
     const [selectedOptions, setSelectedOptions] = useState([]);
-    const [hasFetched, setHasFetched] = useState(!!fetchedOptions[`${fieldDefinition.id}EndObjectInstancesHaveFetched`] || false);
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: true,
@@ -41,6 +38,12 @@ const DropdownRepeatableField = (props) => {
         const newInstances = await getMiddleObjectInstances();
         setMiddleObjectInstances(newInstances);
     };
+    useEffect(() => {
+        instanceChanges?.subscribe(middleObject.rootObjectId, () => {
+            fetchMiddleObjectInstances();
+        });
+        return () => instanceChanges?.unsubscribe(middleObject.rootObjectId);
+    }, [instanceChanges, fetchMiddleObjectInstances, middleObject]);
     const setDropDownSelections = (instances) => {
         setSelectedOptions(instances
             .filter((currInstance) => fieldDefinition.manyToManyPropertyId in currInstance)
@@ -52,146 +55,86 @@ const DropdownRepeatableField = (props) => {
             .sort((instanceA, instanceB) => instanceA.label.localeCompare(instanceB.label)));
     };
     useEffect(() => {
-        const endObjectProperty = middleObject?.properties?.find((currProperty) => fieldDefinition.manyToManyPropertyId === currProperty.id);
-        if (endObjectProperty && endObjectProperty.objectId && !fetchedOptions[`${fieldDefinition.id}EndObject`]) {
-            setLayoutLoaded(false);
-            apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/effective`), { params: { filter: { fields: ['id', 'name', 'properties', 'viewLayout'] } } }, (error, effectiveObject) => {
-                if (error) {
-                    console.error(error);
-                }
-                else {
-                    // If there's no error then the effective object is defined.
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    const endObject = effectiveObject;
-                    setEndObject(endObject);
-                    let defaultLayout;
-                    if (endObject.viewLayout?.dropdown) {
-                        defaultLayout = {
-                            id: 'default',
-                            name: 'Default',
-                            objectId: endObject.id,
-                            ...endObject.viewLayout.dropdown,
-                        };
-                    }
-                    if (viewLayout) {
-                        apiServices
-                            .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/dropdownLayouts/${viewLayout.id}`))
-                            .then(setLayout)
-                            .catch(() => setLayout(defaultLayout))
-                            .finally(() => setLayoutLoaded(true));
-                    }
-                    else {
-                        setLayout(defaultLayout);
-                        setLayoutLoaded(true);
-                    }
-                }
-            });
-        }
-    }, [middleObject, viewLayout]);
-    useEffect(() => {
-        instanceChanges?.subscribe(middleObject.rootObjectId, () => {
-            fetchMiddleObjectInstances();
-        });
-        return () => instanceChanges?.unsubscribe(middleObject.rootObjectId);
-    }, [instanceChanges, fetchMiddleObjectInstances]);
-    const fetchEndObjectInstances = useCallback((searchedName) => {
-        if ((fieldDefinition.objectId &&
-            fieldDefinition.manyToManyPropertyId &&
-            endObjectInstances.length === 0 &&
-            !hasFetched) ||
-            (searchedName !== undefined && searchedName !== '')) {
-            setLoading(true);
-            const endObjectProperty = middleObject.properties?.find((currProperty) => fieldDefinition.manyToManyPropertyId === currProperty.id);
-            if (endObjectProperty?.objectId) {
-                const { propertyId, direction } = layout?.sort ?? {
-                    propertyId: 'name',
-                    direction: 'asc',
-                };
-                const filter = {
-                    limit: 100,
-                    order: `${propertyId} ${direction}`,
-                };
-                let searchCriteria = criteria && !isEmpty(criteria) ? transformToWhere(criteria) : {};
-                if (searchedName?.length) {
-                    const nameCriteria = transformToWhere({
-                        name: {
-                            like: searchedName,
-                            options: 'i',
-                        },
-                    });
-                    searchCriteria = !isEmpty(criteria)
-                        ? {
-                            and: [searchCriteria, nameCriteria],
-                        }
-                        : nameCriteria;
-                }
-                filter.where = searchCriteria;
-                apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/instances`), { params: { filter: JSON.stringify(filter) } }, (error, instances) => {
-                    if (!error && instances) {
-                        setEndObjectInstances(instances);
-                        setHasFetched(true);
-                    }
-                    setInitialLoading(false);
-                    setLoading(false);
-                });
-            }
-        }
-        else if (endObjectInstances.length !== 0) {
-            setInitialLoading(false);
-        }
-    }, [fieldDefinition.objectId, fieldDefinition.manyToManyPropertyId, middleObject]);
-    const debouncedEndObjectSearch = useCallback(debounce(fetchEndObjectInstances, 500), [fetchEndObjectInstances]);
+        setDropDownSelections(middleObjectInstances);
+    }, [middleObjectInstances]);
+    const endObjectProperty = useMemo(() => middleObject.properties?.find((currProperty) => fieldDefinition.manyToManyPropertyId === currProperty.id), [middleObject.properties, fieldDefinition.manyToManyPropertyId]);
+    const { data: endObject } = useQuery({
+        queryKey: [endObjectProperty?.objectId, 'endObject', 'effective'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty?.objectId}/effective`), {
+            params: { filter: { fields: ['id', 'name', 'properties', 'viewLayout'] } },
+        }),
+        staleTime: Infinity,
+        enabled: !!endObjectProperty?.objectId,
+    });
     useEffect(() => {
-        if (!fetchedOptions[`${fieldDefinition.id}EndObjectInstances`] ||
-            (isArray(fetchedOptions[`${fieldDefinition.id}EndObjectInstances`]) &&
-                fetchedOptions[`${fieldDefinition.id}EndObjectInstances`].length === 0)) {
-            setFetchedOptions({
-                [`${fieldDefinition.id}EndObjectInstances`]: endObjectInstances,
-                [`${fieldDefinition.id}EndObjectInstancesHaveFetched`]: hasFetched,
-            });
+        if (!endObject)
+            return;
+        let defaultLayout;
+        if (endObject.viewLayout?.dropdown) {
+            defaultLayout = {
+                id: 'default',
+                name: 'Default',
+                objectId: endObject.id,
+                ...endObject.viewLayout.dropdown,
+            };
         }
-        if (!fetchedOptions[`${fieldDefinition.id}EndObject`]) {
-            setFetchedOptions({
-                [`${fieldDefinition.id}EndObject`]: endObject,
-            });
+        if (viewLayout) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/dropdownLayouts/${viewLayout.id}`))
+                .then(setLayout)
+                .catch(() => setLayout(defaultLayout))
+                .finally(() => setLayoutLoaded(true));
         }
-        if (!isEqual(middleObjectInstances, initialMiddleObjectInstances)) {
-            setFetchedOptions({
-                [`${fieldDefinition.id}MiddleObjectInstances`]: middleObjectInstances,
-            });
+        else {
+            setLayout(defaultLayout);
+            setLayoutLoaded(true);
         }
-    }, [endObjectInstances, endObject, middleObjectInstances]);
+    }, [endObject, viewLayout]);
+    const debouncedSetSearchValue = useMemo(() => debounce((value) => {
+        setDebouncedSearchValue(value);
+    }, 200), []);
     useEffect(() => {
-        const updateFetchedOptions = (key, value) => {
-            if (!fetchedOptions[key]) {
-                setFetchedOptions({ [key]: value });
-            }
+        debouncedSetSearchValue(searchValue);
+        return () => {
+            debouncedSetSearchValue.cancel();
         };
-        updateFetchedOptions(`${fieldDefinition.id}EndObjectInstances`, endObjectInstances);
-        updateFetchedOptions(`${fieldDefinition.id}EndObjectInstancesHaveFetched`, hasFetched);
-        updateFetchedOptions(`${fieldDefinition.id}EndObject`, endObject);
-        if (!isEqual(middleObjectInstances, initialMiddleObjectInstances)) {
-            setFetchedOptions({ [`${fieldDefinition.id}MiddleObjectInstances`]: middleObjectInstances });
-        }
-    }, [
-        endObjectInstances,
-        endObject,
-        middleObjectInstances,
-        fetchedOptions,
-        fieldDefinition.id,
-        hasFetched,
-        initialMiddleObjectInstances,
-        setFetchedOptions,
-    ]);
-    useEffect(() => {
-        debouncedEndObjectSearch(searchValue);
-        return () => debouncedEndObjectSearch.cancel();
-    }, [searchValue, debouncedEndObjectSearch]);
-    useEffect(() => {
-        if (layoutLoaded) {
-            fetchEndObjectInstances();
+    }, [searchValue, debouncedSetSearchValue, layoutLoaded]);
+    const searchCriteria = useMemo(() => {
+        let searchCriteria = criteria && !isEmpty(criteria) ? transformToWhere(criteria) : {};
+        if (debouncedSearchValue?.length) {
+            const nameCriteria = transformToWhere({
+                name: {
+                    like: debouncedSearchValue,
+                    options: 'i',
+                },
+            });
+            searchCriteria = !isEmpty(criteria) ? { and: [searchCriteria, nameCriteria] } : nameCriteria;
         }
-    }, [fetchEndObjectInstances, layoutLoaded]);
+        return searchCriteria;
+    }, [criteria, debouncedSearchValue]);
+    // Construct filter from debounced criteria
+    const updatedFilter = useMemo(() => {
+        const { propertyId, direction } = layout?.sort ?? {
+            propertyId: 'name',
+            direction: 'asc',
+        };
+        const filter = {
+            limit: 100,
+            order: `${propertyId} ${direction}`,
+            where: searchCriteria,
+        };
+        return filter;
+    }, [searchCriteria, layout]);
+    const { data: endObjectInstances = [], isLoading: initialLoading } = useQuery({
+        queryKey: ['endObjectInstances', endObjectProperty.objectId, updatedFilter],
+        queryFn: async () => {
+            return apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/instances`), { params: { filter: JSON.stringify(updatedFilter) } });
+        },
+        enabled: !!fieldDefinition.objectId && !!fieldDefinition.manyToManyPropertyId && !!endObjectProperty?.objectId,
+        staleTime: Infinity,
+        // Keep old instances while filtering
+        placeholderData: (previousData) => previousData,
+    });
     const saveMiddleInstance = async (endObjectId, endObjectName) => {
         if (fieldDefinition.objectId) {
             const middleObject = getMiddleObject(fieldDefinition, endObjectId, endObjectName, instance);
@@ -228,6 +171,6 @@ const DropdownRepeatableField = (props) => {
             });
         }
     };
-    return initialLoading || !middleObject || !middleObjectInstances || !endObjectInstances || !endObject ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, fieldDefinition: fieldDefinition, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, hasDescription: hasDescription }))));
+    return initialLoading || !middleObject || !middleObjectInstances || !endObjectInstances || !endObject ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, fieldDefinition: fieldDefinition, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue, loading: initialLoading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, hasDescription: hasDescription }))));
 };
 export default DropdownRepeatableField;

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

@@ -6,7 +6,6 @@ type DropdownRepeatableFieldInputProps = {
     fieldDefinition: InputParameter | Property;
     readOnly: boolean;
     layout?: DropdownViewLayout;
-    middleObjectInstances: ObjectInstance[];
     endObjectInstances: ObjectInstance[];
     endObject: Pick<Obj, 'id' | 'name' | 'properties'>;
     searchValue: string;
@@ -26,7 +25,6 @@ type DropdownRepeatableFieldInputProps = {
         message?: string;
         isError: boolean;
     };
-    setDropdownSelections?: (middleObjectInstances: ObjectInstance[]) => void;
     hasDescription?: boolean;
 };
 export type DropdownRepeatableFieldInputOption = AutocompleteOption & {

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

@@ -7,12 +7,9 @@ import FormField from '../../../../FormField';
 import { normalizeDates } from '../../utils';
 const isDropdownRepeatableFieldInputOption = (option) => isObject(option) && 'label' in option && 'endObjectId' in option;
 export const DropdownRepeatableFieldInput = (props) => {
-    const { id, fieldDefinition, readOnly, layout, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, hasDescription, } = props;
+    const { id, fieldDefinition, readOnly, layout, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, hasDescription, } = props;
     const { fieldHeight } = useFormContext();
     const [selectOptions, setSelectOptions] = useState([]);
-    useEffect(() => {
-        setDropdownSelections && setDropdownSelections(middleObjectInstances);
-    }, [middleObjectInstances]);
     useEffect(() => {
         const manyToManyPropertyId = fieldDefinition.manyToManyPropertyId;
         if (manyToManyPropertyId) {