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

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

@@ -1,11 +1,12 @@
 import React from 'react';
-import { SavedDocumentReference } from '../../types';
+import { DocumentReference } from '../../types';
 type DocumentListProps = {
-    handleChange?: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    handleChange?: (propertyId: string, value: (File | DocumentReference)[] | undefined) => void;
     onAutosave?: (fieldId: string) => void | Promise<void>;
     id: string;
+    fieldType?: 'document' | 'file';
     canUpdateProperty: boolean;
-    value: (File | SavedDocumentReference)[] | undefined;
+    value: (File | DocumentReference)[] | undefined;
     setSnackbarError: (type: 'error' | 'success', message: string) => void;
 };
 export declare const DocumentList: (props: DocumentListProps) => React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import { useApiServices } from '@evoke-platform/context';
-import { isEqual } from 'lodash';
+import { useQuery } from '@tanstack/react-query';
 import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 import { FileWithExtension, LaunchRounded, TrashCan, WarningRounded } from '../../../../../../icons';
@@ -24,29 +24,32 @@ const viewableFileTypes = [
     'text/plain',
 ];
 export const DocumentList = (props) => {
-    const { handleChange, onAutosave, id, canUpdateProperty, value: documents, setSnackbarError } = props;
+    const { handleChange, onAutosave, id, fieldType = 'document', canUpdateProperty, value: documents, setSnackbarError, } = props;
     const apiServices = useApiServices();
     const { fetchedOptions, setFetchedOptions, object, instance } = useFormContext();
     // Determine property type once at component level
-    const propertyType = object?.properties?.find((p) => p.id === id)?.type;
-    const isFileType = propertyType === 'file';
-    const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
+    const isFileType = fieldType === 'file';
     // savedDocuments is either FileInstance[] or DocumentType[], never a mix
     const [savedDocuments, setSavedDocuments] = useState(fetchedOptions[`${id}SavedDocuments`]);
     useEffect(() => {
-        const currentValue = instance?.[id];
+        // Use documents prop (value) as the source of truth, not instance[id]
+        // This ensures newly uploaded files trigger a fetch even before they're saved to instance
+        const currentValue = documents;
         if (currentValue?.length) {
-            const currentDocumentIds = currentValue.map((doc) => doc.id);
-            if (currentDocumentIds.length &&
-                // these need to be sorted otherwise it will evaluate as not equal if the ids are in different orders causing unnecessary fetches
-                !isEqual(currentDocumentIds.slice().sort(), savedDocuments
-                    ?.map((doc) => doc.id)
-                    .slice()
-                    .sort())) {
-                getDocuments(currentDocumentIds);
+            // Filter out File objects only - we want to fetch details for all DocumentReferences including unsaved ones
+            const currentDocumentIds = currentValue
+                .filter((doc) => !(doc instanceof File))
+                .map((doc) => doc.id);
+            if (currentDocumentIds.length) {
+                // Check if there are any document IDs that we haven't fetched yet
+                const savedDocumentIds = savedDocuments?.map((doc) => doc.id) ?? [];
+                const missingDocumentIds = currentDocumentIds.filter((id) => !savedDocumentIds.includes(id));
+                if (missingDocumentIds.length > 0) {
+                    getDocuments(currentDocumentIds);
+                }
             }
         }
-    }, [id, documents, object]);
+    }, [documents, savedDocuments]);
     useEffect(() => {
         if (fetchedOptions[`${id}SavedDocuments`]) {
             setSavedDocuments(fetchedOptions[`${id}SavedDocuments`]);
@@ -79,30 +82,31 @@ export const DocumentList = (props) => {
             }
         });
     };
-    useEffect(() => {
-        if (!fetchedOptions[`${id}ViewPermission`]) {
-            checkPermissions();
-        }
-    }, [object]);
-    const checkPermissions = () => {
-        if (instance?.[id]?.length) {
-            apiServices
-                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=view`))
-                .then((viewPermissionCheck) => {
-                setFetchedOptions({
-                    [`${id}ViewPermission`]: viewPermissionCheck.result,
-                });
-                setHasViewPermission(viewPermissionCheck.result);
-            });
-        }
-    };
+    const { data: hasViewPermission = false } = useQuery({
+        queryKey: ['hasViewPermission', object?.id, instance?.id],
+        queryFn: async () => {
+            const endpoint = isFileType
+                ? getPrefixedUrl(`/objects/sys__file/instances/checkAccess?action=read&field=content`)
+                : getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/checkAccess?action=view`);
+            try {
+                const viewPermissionCheck = await apiServices.get(endpoint);
+                return viewPermissionCheck.result;
+            }
+            catch {
+                return false;
+            }
+        },
+        enabled: !!instance?.id && !!object?.id && !!instance?.[id]?.length,
+        staleTime: Infinity,
+    });
     const isFile = (doc) => doc instanceof File;
+    const isUnsavedFile = (doc) => isFile(doc) || !!doc.unsaved;
     const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);
     const handleRemove = async (index) => {
         const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
         const newValue = updatedDocuments.length === 0 ? undefined : updatedDocuments;
         try {
-            handleChange && (await handleChange(id, newValue));
+            handleChange?.(id, newValue);
         }
         catch (error) {
             console.error('Failed to update field:', error);
@@ -124,9 +128,7 @@ export const DocumentList = (props) => {
                 : savedDocuments?.find((savedDocument) => savedDocument.id === doc.id)?.contentType;
             if (!isFile(doc)) {
                 try {
-                    // Determine property type to use the correct endpoint
-                    const propertyType = object?.properties?.find((p) => p.id === id)?.type;
-                    const contentEndpoint = propertyType === 'file'
+                    const contentEndpoint = isFileType
                         ? getPrefixedUrl(`/files/${doc.id}/content`)
                         : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}/content`);
                     const documentResponse = await apiServices.get(contentEndpoint, { responseType: 'blob' });
@@ -189,10 +191,10 @@ export const DocumentList = (props) => {
                         } }, doc.name)),
                 React.createElement(Grid, { item: true, xs: 12 },
                     React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, getDocumentSize(doc)))),
-            (isFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
+            (isUnsavedFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
                 React.createElement(IconButton, { "aria-label": "open document", sx: { ...styles.icon, marginRight: '16px' }, onClick: () => openDocument(index) },
                     React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))),
-            !isFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
+            !isFile(doc) && !isUnsavedFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
                     marginRight: '16px',
                     backgroundColor: 'rgba(222, 48, 36, 0.16)',
                     color: '#A91813',

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

@@ -1,17 +1,17 @@
 import { useApiServices } from '@evoke-platform/context';
 import { Close, ExpandMore } from '@mui/icons-material';
+import { useQuery } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
 import { useFormContext } from '../../../../../theme/hooks';
 import { Autocomplete, IconButton, Paper, TextField, Typography } from '../../../../core';
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 const UserProperty = (props) => {
     const { id, error, value, readOnly, hasDescription } = props;
-    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave: onAutosave, fieldHeight } = useFormContext();
+    const { handleChange, onAutosave: onAutosave, fieldHeight } = useFormContext();
     const [loadingOptions, setLoadingOptions] = useState(false);
     const apiServices = useApiServices();
-    const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
+    const [options, setOptions] = useState([]);
     const [openOptions, setOpenOptions] = useState(false);
-    const [users, setUsers] = useState();
     const [userValue, setUserValue] = useState();
     useEffect(() => {
         if (value && typeof value == 'object' && 'name' in value && 'id' in value) {
@@ -21,25 +21,21 @@ const UserProperty = (props) => {
             setUserValue(undefined);
         }
     }, [value]);
+    const { data: users } = useQuery({
+        queryKey: ['users'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/users`)),
+        staleTime: Infinity,
+        meta: {
+            errorMessage: 'Error fetching users: ',
+        },
+    });
     useEffect(() => {
-        if (!fetchedOptions[`${id}Options`]) {
-            setLoadingOptions(true);
-            apiServices.get(getPrefixedUrl(`/users`), (error, userList) => {
-                setUsers(userList);
-                setOptions((userList ?? []).map((user) => ({
-                    label: user.name,
-                    value: user.id,
-                })));
-                setFetchedOptions({
-                    [`${id}Options`]: (userList ?? []).map((user) => ({
-                        label: user.name,
-                        value: user.id,
-                    })),
-                });
-                setLoadingOptions(false);
-            });
-        }
-    }, [id]);
+        setOptions((users ?? []).map((user) => ({
+            label: user.name,
+            value: user.id,
+        })));
+        setLoadingOptions(false);
+    }, [users]);
     async function handleChangeUserProperty(id, value) {
         const updatedValue = typeof value?.value === 'string' ? { name: value.label, id: value.value } : null;
         try {

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

@@ -1,53 +1,41 @@
 import { useApiServices, useApp, useNavigate, } from '@evoke-platform/context';
+import { useQuery } from '@tanstack/react-query';
 import cleanDeep from 'clean-deep';
-import { cloneDeep, debounce, isEmpty, isEqual, isNil } from 'lodash';
+import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
 import Handlebars from 'no-eval-handlebars';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Close } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Autocomplete, Button, IconButton, Link, ListItem, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
 import { Box } from '../../../../../layout';
-import { getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
+import { getDefaultPages, getPrefixedUrl, transformToWhere, useFormById } from '../../utils';
 import RelatedObjectInstance from './RelatedObjectInstance';
 const ObjectPropertyInput = (props) => {
     const { id, fieldDefinition, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, relatedObjectId, } = props;
     const { fetchedOptions, setFetchedOptions, fieldHeight, handleChange: handleChangeObjectField, onAutosave: onAutosave, instance, } = useFormContext();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
+    const [debouncedDropdownInput, setDebouncedDropdownInput] = useState();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
-    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(fetchedOptions[`${id}ViewLayout`]);
-    const [form, setForm] = useState();
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: true,
     });
+    const { data: relatedObject } = useQuery({
+        queryKey: [relatedObjectId, 'sanitized'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/effective?sanitizedVersion=true`)),
+        enabled: !!relatedObjectId,
+        staleTime: Infinity,
+    });
     const action = relatedObject?.actions?.find((action) => action.id === createActionId);
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
-    const updatedCriteria = useMemo(() => {
-        let criteria = filter ? { where: transformToWhere(filter) } : undefined;
-        if (dropdownInput) {
-            const nameQuery = transformToWhere({
-                name: {
-                    like: dropdownInput,
-                    options: 'i',
-                },
-            });
-            criteria = {
-                ...criteria,
-                where: criteria?.where ? { and: [criteria.where, nameQuery] } : nameQuery,
-            };
-        }
-        return criteria;
-    }, [filter, dropdownInput]);
     const listboxRef = useRef(null);
+    const formIdToFetch = formId || action?.defaultFormId;
+    const { data: form } = useFormById(formIdToFetch ?? '', apiServices, 'Error fetching form: ');
     useEffect(() => {
         if (relatedObject) {
             let defaultViewLayout;
@@ -85,143 +73,102 @@ const ObjectPropertyInput = (props) => {
             }
         }
     }, [displayOption, relatedObject, viewLayout]);
+    const debouncedSetDropdownInput = useMemo(() => debounce((value) => {
+        setDebouncedDropdownInput(value);
+    }, 200), []);
     useEffect(() => {
-        // setting the default value when there is default criteria
-        if (!isEmpty(defaultValueCriteria) && !selectedInstance && (!instance || !instance[id])) {
+        debouncedSetDropdownInput(dropdownInput);
+        return () => {
+            debouncedSetDropdownInput.cancel();
+        };
+    }, [dropdownInput, debouncedSetDropdownInput]);
+    const updatedCriteria = useMemo(() => {
+        let criteria = filter ? { where: transformToWhere(filter) } : undefined;
+        if (debouncedDropdownInput) {
+            const nameQuery = transformToWhere({
+                name: {
+                    like: debouncedDropdownInput,
+                    options: 'i',
+                },
+            });
+            criteria = {
+                ...criteria,
+                where: criteria?.where ? { and: [criteria.where, nameQuery] } : nameQuery,
+            };
+        }
+        return criteria;
+    }, [filter, debouncedDropdownInput]);
+    const { data: defaultInstances, isLoading: isLoadingDefaultInstances } = useQuery({
+        queryKey: ['defaultInstances', relatedObjectId, updatedCriteria],
+        queryFn: async () => {
             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/${relatedObjectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), async (error, instances) => {
-                    if (error) {
-                        console.error(error);
-                        setLoadingOptions(false);
-                    }
-                    if (instances && instances.length > 0) {
-                        setSelectedInstance(instances[0]);
-                        try {
-                            handleChangeObjectField && (await handleChangeObjectField(id, instances[0]));
-                        }
-                        catch (error) {
-                            console.error('Failed to update field:', error);
-                            setLoadingOptions(false);
-                            return;
-                        }
-                        try {
-                            await onAutosave?.(id);
-                        }
-                        catch (error) {
-                            console.error('Autosave failed:', error);
-                        }
-                    }
-                    setLoadingOptions(false);
-                });
+                return apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`));
             }
-        }
-    }, [relatedObjectId, defaultValueCriteria, sortBy, orderBy]);
-    const getDropdownOptions = useCallback(() => {
-        if (((!fetchedOptions?.[`${id}Options`] ||
-            (fetchedOptions?.[`${id}Options`]).length === 0) &&
-            !hasFetched) ||
-            !isEqual(fetchedOptions?.[`${id}UpdatedCriteria`], updatedCriteria)) {
-            setFetchedOptions({ [`${id}UpdatedCriteria`]: updatedCriteria });
-            setLoadingOptions(true);
-            const updatedFilter = cloneDeep(updatedCriteria) || {};
-            updatedFilter.limit = 100;
-            const { propertyId, direction } = layout?.sort ?? {
-                propertyId: 'name',
-                direction: 'asc',
-            };
-            updatedFilter.order = `${propertyId} ${direction}`;
-            apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/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);
-                }
-            });
-        }
-    }, [
-        relatedObjectId,
-        updatedCriteria,
-        layout,
-        fetchedOptions?.[`${id}Options`],
-        fetchedOptions?.[`${id}UpdatedCriteria`],
-        hasFetched,
-        id,
-    ]);
-    const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 200), [getDropdownOptions]);
-    useEffect(() => {
-        if (displayOption === 'dropdown') {
-            debouncedGetDropdownOptions();
-            return () => debouncedGetDropdownOptions.cancel();
-        }
-    }, [displayOption, debouncedGetDropdownOptions]);
-    useEffect(() => {
-        setSelectedInstance(initialValue);
-    }, [initialValue]);
+        },
+        enabled: !isEmpty(defaultValueCriteria) && !selectedInstance && (!instance || !instance[id]),
+        staleTime: Infinity,
+    });
     useEffect(() => {
-        // Early return if already fetched
-        if (fetchedOptions[`${id}Form`])
-            return;
-        const fetchForm = async () => {
-            try {
-                let evokeForm;
-                if (formId || action?.defaultFormId) {
-                    evokeForm = await apiServices.get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`));
+        if (defaultInstances?.[0]) {
+            setSelectedInstance(defaultInstances[0]);
+            (async () => {
+                try {
+                    handleChangeObjectField && (await handleChangeObjectField(id, defaultInstances[0]));
                 }
-                if (evokeForm) {
-                    setForm(evokeForm);
-                    setFetchedOptions({
-                        [`${id}Form`]: evokeForm,
-                    });
+                catch (error) {
+                    console.error('Failed to update field:', error);
+                    return;
                 }
-            }
-            catch (error) {
-                console.error('Error fetching form:', error);
-            }
-        };
-        fetchForm();
-    }, [action, formId, id, apiServices, fetchedOptions]);
-    useEffect(() => {
-        if (!fetchedOptions[`${id}RelatedObject`]) {
-            apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/effective?sanitizedVersion=true`), (error, object) => {
-                if (error) {
-                    console.error(error);
+                try {
+                    await onAutosave?.(id);
                 }
-                else {
-                    setRelatedObject(object);
+                catch (error) {
+                    console.error('Autosave failed:', error);
                 }
-            });
+            })();
         }
-    }, [relatedObjectId, fetchedOptions, id]);
+    }, [defaultInstances]);
+    // Construct filter from debounced criteria
+    const updatedFilter = useMemo(() => {
+        const filter = cloneDeep(updatedCriteria) || {};
+        filter.limit = 100;
+        const { propertyId, direction } = layout?.sort ?? {
+            propertyId: 'name',
+            direction: 'asc',
+        };
+        filter.order = `${propertyId} ${direction}`;
+        return filter;
+    }, [updatedCriteria, layout]);
+    const { 
+    // Sets the default value of options to an empty array
+    data: options = [], isLoading: isLoadingOptions, } = useQuery({
+        queryKey: ['dropdownOptions', relatedObjectId, updatedFilter],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${JSON.stringify(updatedFilter)}`)),
+        staleTime: 300000,
+        // Keep old data while fetching new data
+        placeholderData: (previousData) => previousData,
+    });
     useEffect(() => {
-        (async () => {
-            if (fetchedOptions[`${id}NavigationSlug`] === undefined) {
-                const pages = await getDefaultPages([{ ...fieldDefinition, objectId: relatedObjectId }], defaultPages, findDefaultPageSlugFor);
-                if (relatedObjectId && pages[relatedObjectId]) {
-                    setNavigationSlug(pages[relatedObjectId]);
-                    setFetchedOptions({
-                        [`${id}NavigationSlug`]: pages[relatedObjectId],
-                    });
-                }
-                else {
-                    // setting the nav slug to null if there is no default page for this object to avoid re-fetching
-                    setFetchedOptions({
-                        [`${id}NavigationSlug`]: null,
-                    });
-                }
+        setSelectedInstance(initialValue);
+    }, [initialValue]);
+    const loadingOptions = isLoadingOptions || isLoadingDefaultInstances;
+    const { data: navigationSlug } = useQuery({
+        queryKey: ['navigationSlug', id, relatedObjectId],
+        queryFn: async () => {
+            const pages = await getDefaultPages([{ ...fieldDefinition, objectId: relatedObjectId }], defaultPages, findDefaultPageSlugFor);
+            if (relatedObjectId && pages[relatedObjectId]) {
+                return pages[relatedObjectId];
             }
-        })();
-    }, [id, fieldDefinition, defaultPages, findDefaultPageSlugFor, relatedObjectId, fetchedOptions]);
+            return null;
+        },
+        enabled: !!(relatedObjectId && defaultPages && findDefaultPageSlugFor),
+        staleTime: Infinity,
+    });
     const handleClose = () => {
         setOpenCreateDialog(false);
     };
@@ -229,27 +176,6 @@ const ObjectPropertyInput = (props) => {
         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, navigationSlug, fetchedOptions, id]);
     const dropdownOptions = [
         ...options.map((o) => ({ label: o.name, value: o.id })),
         ...(mode !== 'existingOnly' && relatedObject?.actions?.some((a) => a.id === createActionId)
@@ -422,7 +348,7 @@ const ObjectPropertyInput = (props) => {
                     }
                 }, selectOnFocus: false, onBlur: () => {
                     if (dropdownInput) {
-                        getDropdownOptions();
+                        setDropdownInput(undefined);
                     }
                 }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: selectedInstance?.id || readOnly ? '' : 'Select', readOnly: !loadingOptions && !selectedInstance?.id && readOnly, onChange: (event) => setDropdownInput(event.target.value), sx: {
                         ...(!loadingOptions && selectedInstance?.id
@@ -529,7 +455,7 @@ const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add` }, "Add")))),
-        React.createElement(RelatedObjectInstance, { open: openCreateDialog, title: form?.name ?? `Add ${fieldDefinition.name}`, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: formId ?? form?.id, actionId: createActionId, setSnackbarError: setSnackbarError }),
+        React.createElement(RelatedObjectInstance, { open: openCreateDialog, title: form?.name ?? `Add ${fieldDefinition.name}`, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, filter: updatedCriteria, layout: layout, formId: formIdToFetch, actionId: createActionId, setSnackbarError: setSnackbarError }),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
                 isError: snackbarError.isError,
                 showAlert: false,

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

@@ -15,8 +15,6 @@ export type RelatedObjectInstanceProps = BaseProps & {
         isError: boolean;
     }>>;
     displayOption?: 'dropdown' | 'dialogBox';
-    setOptions: (options: ObjectInstance[]) => void;
-    options: ObjectInstance[];
     filter?: Record<string, unknown>;
     layout?: TableViewLayout;
     formId?: string;

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

@@ -1,5 +1,6 @@
 import { useApiServices } from '@evoke-platform/context';
 import { DialogActions } from '@mui/material';
+import { useQueryClient } from '@tanstack/react-query';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useRef, useState } from 'react';
 import { Close } from '../../../../../../icons';
@@ -29,7 +30,7 @@ const styles = {
     },
 };
 const RelatedObjectInstance = (props) => {
-    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, setSnackbarError, setOptions, options, } = props;
+    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, setSnackbarError, } = props;
     const { handleChange: handleChangeObjectField, onAutosave, richTextEditor, fieldHeight, width } = useFormContext();
     const [selectedRow, setSelectedRow] = useState();
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' || mode === 'newOnly' ? 'new' : 'existing');
@@ -40,6 +41,7 @@ const RelatedObjectInstance = (props) => {
         defaultWidth: width,
     });
     const { isXs, isSm } = breakpoints;
+    const queryClient = useQueryClient();
     const linkExistingInstance = async () => {
         if (selectedRow && handleChangeObjectField) {
             setSelectedInstance(selectedRow);
@@ -93,7 +95,11 @@ const RelatedObjectInstance = (props) => {
                 message: 'New instance created',
                 isError: false,
             });
-            setOptions(options.concat([response]));
+            // Clear option cache to then fetch newly created instance
+            queryClient.invalidateQueries({
+                queryKey: ['dropdownOptions', relatedObject.id],
+                exact: false,
+            });
             onClose();
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
@@ -113,14 +119,14 @@ const RelatedObjectInstance = (props) => {
         }
     };
     const shouldShowRadioButtons = displayOption !== 'dropdown' && mode !== 'existingOnly' && mode !== 'newOnly' && actionId;
-    const RadioButtons = () => shouldShowRadioButtons ? (React.createElement(RadioGroup, { row: true, "aria-label": "Relation Type", onChange: (event) => {
+    const RadioButtons = useCallback(() => shouldShowRadioButtons ? (React.createElement(RadioGroup, { row: true, "aria-label": "Relation Type", onChange: (event) => {
             const { value } = event.target;
             if (value === 'new' || value === 'existing') {
                 setRelationType(value);
             }
         }, value: relationType },
         React.createElement(FormControlLabel, { value: "existing", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "Existing" }),
-        React.createElement(FormControlLabel, { value: "new", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "New" }))) : null;
+        React.createElement(FormControlLabel, { value: "new", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "New" }))) : null, [shouldShowRadioButtons, relationType]);
     const DialogForm = useCallback(() => (React.createElement(FormRendererContainer, { formId: formId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: actionId, objectId: relatedObject.id, onSubmit: createNewInstance, onDiscardChanges: onClose, onSubmitError: handleSubmitError, richTextEditor: richTextEditor, renderHeader: () => null, renderBody: (bodyProps) => (React.createElement(DialogContent, { sx: styles.dialogContent },
             relationType === 'new' ? (React.createElement("div", { ref: validationErrorsRef }, !isEmpty(bodyProps.errors) && bodyProps.shouldShowValidationErrors ? (React.createElement(FormRenderer.ValidationErrors, { errors: bodyProps.errors, sx: {
                     my: isSm || isXs ? 2 : 3,
@@ -146,7 +152,7 @@ const RelatedObjectInstance = (props) => {
                 maxWidth: '950px',
                 width: '100%',
             },
-        } },
+        } }, open && (React.createElement(React.Fragment, null,
         React.createElement(DialogTitle, { sx: {
                 padding: 3,
                 borderBottom: '1px solid #e9ecef',
@@ -176,6 +182,6 @@ const RelatedObjectInstance = (props) => {
                         marginLeft: '8px',
                         width: '85px',
                         '&:hover': { boxShadow: 'none' },
-                    }, onClick: linkExistingInstance, variant: "contained", disabled: !selectedRow, "aria-label": `Add` }, "Add")))))));
+                    }, onClick: linkExistingInstance, variant: "contained", disabled: !selectedRow, "aria-label": `Add` }, "Add")))))))));
 };
 export default RelatedObjectInstance;

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

@@ -1,2 +1,3 @@
+import React from 'react';
 import { EntryRendererProps } from './types';
-export declare function RecursiveEntryRenderer(props: EntryRendererProps): any;
+export declare function RecursiveEntryRenderer(props: EntryRendererProps): React.JSX.Element | null;