@evoke-platform/ui-components 1.13.0 → 1.15.0

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,103 @@ 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,
+        enabled: displayOption === 'dropdown',
+    });
     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 +177,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 +349,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 +456,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,7 +1,8 @@
 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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Close } from '../../../../../../icons';
 import useWidgetSize, { useFormContext } from '../../../../../../theme/hooks';
 import { Button, Dialog, DialogContent, DialogTitle, FormControlLabel, IconButton, Radio, RadioGroup, } from '../../../../../core';
@@ -12,7 +13,7 @@ import FormRendererContainer from '../../../FormRendererContainer';
 import Body from '../../Body';
 import Footer from '../../Footer';
 import { AccordionActions } from '../../Header';
-import { formatSubmission, getPrefixedUrl } from '../../utils';
+import { extractAllCriteria, extractPresetValuesFromCriteria, extractPresetValuesFromDynamicDefaultValues, formatSubmission, getPrefixedUrl, getUnnestedEntries, } from '../../utils';
 import InstanceLookup from './InstanceLookup';
 const styles = {
     actionButtons: {
@@ -29,8 +30,8 @@ const styles = {
     },
 };
 const RelatedObjectInstance = (props) => {
-    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, setSnackbarError, setOptions, options, } = props;
-    const { handleChange: handleChangeObjectField, onAutosave, richTextEditor, fieldHeight, width } = useFormContext();
+    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, setSnackbarError, } = props;
+    const { handleChange: handleChangeObjectField, onAutosave, richTextEditor, fieldHeight, width, form, parameters, } = useFormContext();
     const [selectedRow, setSelectedRow] = useState();
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' || mode === 'newOnly' ? 'new' : 'existing');
     const apiServices = useApiServices();
@@ -40,11 +41,37 @@ const RelatedObjectInstance = (props) => {
         defaultWidth: width,
     });
     const { isXs, isSm } = breakpoints;
+    const queryClient = useQueryClient();
+    const flattenFormEntries = useMemo(() => getUnnestedEntries(form?.entries || []), [form?.entries]);
+    const [uniquePresetValues, setUniquePresetValues] = useState([]);
+    useEffect(() => {
+        const allCriterias = extractAllCriteria(flattenFormEntries, parameters || []);
+        const uniquePresetValues = new Set();
+        for (const criteria of allCriterias) {
+            const presetValues = extractPresetValuesFromCriteria(criteria);
+            presetValues.forEach((value) => uniquePresetValues.add(value));
+        }
+        extractPresetValuesFromDynamicDefaultValues(flattenFormEntries).map((value) => uniquePresetValues.add(value));
+        setUniquePresetValues(Array.from(uniquePresetValues));
+    }, [flattenFormEntries, parameters]);
     const linkExistingInstance = async () => {
         if (selectedRow && handleChangeObjectField) {
-            setSelectedInstance(selectedRow);
             try {
-                await handleChangeObjectField(id, selectedRow);
+                const expandedInstance = await apiServices.get(getPrefixedUrl(`/objects/${selectedRow.objectId}/instances/${selectedRow.id}`), {
+                    params: {
+                        expand: uniquePresetValues
+                            ?.filter((value) => value.startsWith(`{{{input.${id}.`) || value.startsWith(`{{input.${id}.`))
+                            .map((value) => {
+                            return value
+                                .replace(/{{{|}}}|{{|}}/g, '')
+                                .split('.')
+                                .slice(2)
+                                .join('.');
+                        }),
+                    },
+                });
+                setSelectedInstance(expandedInstance);
+                await handleChangeObjectField(id, expandedInstance);
             }
             catch (error) {
                 console.error('Failed to update field:', error);
@@ -74,8 +101,21 @@ const RelatedObjectInstance = (props) => {
                 actionId: actionId,
                 input: submission,
             });
+            const expandedInstance = await apiServices.get(getPrefixedUrl(`/objects/${relatedObject.id}/instances/${response.id}`), {
+                params: {
+                    expand: uniquePresetValues
+                        ?.filter((value) => value.startsWith(`{{{input.${id}.`) || value.startsWith(`{{input.${id}.`))
+                        .map((value) => {
+                        return value
+                            .replace(/{{{|}}}|{{|}}/g, '')
+                            .split('.')
+                            .slice(2)
+                            .join('.');
+                    }),
+                },
+            });
             try {
-                handleChangeObjectField && (await handleChangeObjectField(id, response));
+                handleChangeObjectField && (await handleChangeObjectField(id, expandedInstance));
             }
             catch (error) {
                 console.error('Failed to update field:', error);
@@ -87,13 +127,17 @@ const RelatedObjectInstance = (props) => {
             catch (error) {
                 console.error('Autosave failed:', error);
             }
-            setSelectedInstance(response);
+            setSelectedInstance(expandedInstance);
             setSnackbarError({
                 showAlert: true,
                 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 +157,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 +190,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 +220,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/HtmlView.js

@@ -5,7 +5,11 @@ import TableUp from 'quill-table-up';
 import 'quill-table-up/index.css';
 import { Box } from '@mui/material';
 import DOMPurify from 'dompurify';
+const fontSizeArr = ['8px', '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px'];
 Quill.register({ [`modules/${TableUp.moduleName}`]: TableUp }, true);
+const Size = Quill.import('attributors/style/size');
+Size.whitelist = fontSizeArr;
+Quill.register(Size, true);
 const HtmlView = ({ value }) => {
     const containerRef = useRef(null);
     const quillRef = useRef(null);
@@ -32,7 +36,7 @@ const HtmlView = ({ value }) => {
     return (React.createElement(Box, { sx: {
             width: '100%',
             height: '100%',
-            '.ql-container': {
+            '.ql-container.ql-snow': {
                 border: 'none',
                 minHeight: 20,
             },

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;