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

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

@@ -1,41 +1,53 @@
 import { useApiServices, useApp, useNavigate, } from '@evoke-platform/context';
-import { useQuery } from '@tanstack/react-query';
 import cleanDeep from 'clean-deep';
-import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
+import { cloneDeep, debounce, isEmpty, isEqual, isNil } from 'lodash';
 import Handlebars from 'no-eval-handlebars';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, 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, useFormById } from '../../utils';
+import { getDefaultPages, getPrefixedUrl, transformToWhere } 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;
@@ -73,102 +85,143 @@ const ObjectPropertyInput = (props) => {
             }
         }
     }, [displayOption, relatedObject, viewLayout]);
-    const debouncedSetDropdownInput = useMemo(() => debounce((value) => {
-        setDebouncedDropdownInput(value);
-    }, 200), []);
     useEffect(() => {
-        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 () => {
+        // setting the default value when there is default criteria
+        if (!isEmpty(defaultValueCriteria) && !selectedInstance && (!instance || !instance[id])) {
             const updatedFilter = cleanDeep({
                 where: transformToWhere({ $and: [defaultValueCriteria, updatedCriteria?.where ?? {}] }),
                 order: orderBy && sortBy ? encodeURIComponent(sortBy + ' ' + orderBy) : undefined,
                 limit: 1,
             });
             if (updatedFilter.where) {
-                return apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`));
+                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);
+                });
             }
-        },
-        enabled: !isEmpty(defaultValueCriteria) && !selectedInstance && (!instance || !instance[id]),
-        staleTime: Infinity,
-    });
+        }
+    }, [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 (defaultInstances?.[0]) {
-            setSelectedInstance(defaultInstances[0]);
-            (async () => {
-                try {
-                    handleChangeObjectField && (await handleChangeObjectField(id, defaultInstances[0]));
+        if (displayOption === 'dropdown') {
+            debouncedGetDropdownOptions();
+            return () => debouncedGetDropdownOptions.cancel();
+        }
+    }, [displayOption, debouncedGetDropdownOptions]);
+    useEffect(() => {
+        setSelectedInstance(initialValue);
+    }, [initialValue]);
+    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}`));
                 }
-                catch (error) {
-                    console.error('Failed to update field:', error);
-                    return;
+                if (evokeForm) {
+                    setForm(evokeForm);
+                    setFetchedOptions({
+                        [`${id}Form`]: evokeForm,
+                    });
                 }
-                try {
-                    await onAutosave?.(id);
+            }
+            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);
                 }
-                catch (error) {
-                    console.error('Autosave failed:', error);
+                else {
+                    setRelatedObject(object);
                 }
-            })();
+            });
         }
-    }, [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,
-    });
+    }, [relatedObjectId, fetchedOptions, id]);
     useEffect(() => {
-        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];
+        (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,
+                    });
+                }
             }
-            return null;
-        },
-        enabled: !!(relatedObjectId && defaultPages && findDefaultPageSlugFor),
-        staleTime: Infinity,
-    });
+        })();
+    }, [id, fieldDefinition, defaultPages, findDefaultPageSlugFor, relatedObjectId, fetchedOptions]);
     const handleClose = () => {
         setOpenCreateDialog(false);
     };
@@ -176,6 +229,27 @@ 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)
@@ -348,7 +422,7 @@ const ObjectPropertyInput = (props) => {
                     }
                 }, selectOnFocus: false, onBlur: () => {
                     if (dropdownInput) {
-                        setDropdownInput(undefined);
+                        getDropdownOptions();
                     }
                 }, 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
@@ -455,7 +529,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, filter: updatedCriteria, layout: layout, formId: formIdToFetch, 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, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: formId ?? form?.id, 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,6 +15,8 @@ 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,6 +1,5 @@
 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';
@@ -30,7 +29,7 @@ const styles = {
     },
 };
 const RelatedObjectInstance = (props) => {
-    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, setSnackbarError, } = 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 [selectedRow, setSelectedRow] = useState();
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' || mode === 'newOnly' ? 'new' : 'existing');
@@ -41,7 +40,6 @@ const RelatedObjectInstance = (props) => {
         defaultWidth: width,
     });
     const { isXs, isSm } = breakpoints;
-    const queryClient = useQueryClient();
     const linkExistingInstance = async () => {
         if (selectedRow && handleChangeObjectField) {
             setSelectedInstance(selectedRow);
@@ -95,11 +93,7 @@ const RelatedObjectInstance = (props) => {
                 message: 'New instance created',
                 isError: false,
             });
-            // Clear option cache to then fetch newly created instance
-            queryClient.invalidateQueries({
-                queryKey: ['dropdownOptions', relatedObject.id],
-                exact: false,
-            });
+            setOptions(options.concat([response]));
             onClose();
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
@@ -119,14 +113,14 @@ const RelatedObjectInstance = (props) => {
         }
     };
     const shouldShowRadioButtons = displayOption !== 'dropdown' && mode !== 'existingOnly' && mode !== 'newOnly' && actionId;
-    const RadioButtons = useCallback(() => shouldShowRadioButtons ? (React.createElement(RadioGroup, { row: true, "aria-label": "Relation Type", onChange: (event) => {
+    const RadioButtons = () => 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, [shouldShowRadioButtons, relationType]);
+        React.createElement(FormControlLabel, { value: "new", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "New" }))) : null;
     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,
@@ -152,7 +146,7 @@ const RelatedObjectInstance = (props) => {
                 maxWidth: '950px',
                 width: '100%',
             },
-        } }, open && (React.createElement(React.Fragment, null,
+        } },
         React.createElement(DialogTitle, { sx: {
                 padding: 3,
                 borderBottom: '1px solid #e9ecef',
@@ -182,6 +176,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/FormSections.js

@@ -126,7 +126,6 @@ function FormSections(props) {
                             display: 'flex',
                             flexDirection: 'column',
                             justifyContent: section.entries && section?.entries.length > 0 ? 'space-between' : 'flex-end',
-                            height: '100%',
                         } },
                         React.createElement(Box, null, section.entries &&
                             section.entries.map((sectionEntry, index) => {

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

@@ -7,6 +7,7 @@ export type HeaderProps = {
     hasAccordions: boolean;
     shouldShowValidationErrors?: boolean;
     validationContainerRef?: React.Ref<HTMLDivElement>;
+    hideTitle: boolean;
     title?: string;
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;

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

@@ -7,7 +7,7 @@ import { Typography } from '../../../core/Typography';
 import Box from '../../../layout/Box/Box';
 import ValidationErrors from './ValidationFiles/ValidationErrors';
 const Header = (props) => {
-    const { title, errors, hasAccordions, shouldShowValidationErrors, validationContainerRef, sx, autosaveEnabled } = props;
+    const { title, errors, hasAccordions, shouldShowValidationErrors, validationContainerRef, sx, autosaveEnabled, hideTitle, autosaving, } = props;
     const { width } = useFormContext();
     const { breakpoints, isBelow } = useWidgetSize({
         scroll: false,
@@ -17,23 +17,32 @@ const Header = (props) => {
     const { isXs, isSm } = breakpoints;
     const isSmall = isSm || isXs;
     const displayValidationErrors = shouldShowValidationErrors && !isEmpty(errors);
+    if (hideTitle && !autosaveEnabled && !hasAccordions && !displayValidationErrors) {
+        return null;
+    }
     return (React.createElement(Box, { sx: {
             paddingX: isSmallerThanMd ? 2 : 3,
             paddingTop: '0px',
             display: 'flex',
             alignItems: 'center',
+            justifyContent: 'flex-end',
             flexWrap: 'wrap',
             paddingY: isSm || isXs ? 2 : 3,
             borderBottom: '1px solid #e9ecef',
             gap: isSm || isXs ? 2 : 3,
+            minHeight: '24px',
             ...sx,
         }, ref: validationContainerRef },
-        title && (React.createElement(Box, { sx: { flex: '1 1 auto', minWidth: 0, display: 'flex', alignItems: 'center', gap: 1 } },
-            React.createElement(Title, { ...props }),
-            props.autosaving && !isSmall && React.createElement(SavingIndicator, null))),
-        hasAccordions && (React.createElement(Box, { sx: { flex: '0 0 auto', display: 'flex', alignItems: 'center' } },
-            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-                React.createElement(AccordionActions, { ...props })),
+        ((!hideTitle && title) || (autosaving && !isSmall)) && (React.createElement(Box, { sx: {
+                flex: '1 1 auto',
+                minWidth: 0,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+            } },
+            !hideTitle && title && React.createElement(Title, { ...props }),
+            autosaving && !isSmall ? React.createElement(SavingIndicator, null) : React.createElement(React.Fragment, null))),
+        hasAccordions && (React.createElement(Box, { sx: { flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
             autosaveEnabled && (React.createElement(Box, { sx: {
                     width: '96px',
                     minWidth: '72px',
@@ -41,7 +50,9 @@ const Header = (props) => {
                     justifyContent: 'flex-end',
                     alignItems: 'center',
                     marginLeft: 0.5,
-                } }, props.autosaving && isSmall ? React.createElement(SavingIndicator, null) : React.createElement(Box, { sx: { width: '100%' } }))))),
+                } }, autosaving && isSmall ? React.createElement(SavingIndicator, null) : React.createElement(React.Fragment, null))),
+            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'center' } },
+                React.createElement(AccordionActions, { ...props })))),
         displayValidationErrors ? React.createElement(ValidationErrors, { errors: errors }) : null));
 };
 // Default slot components for convenience

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import 'quill/dist/quill.snow.css';
+import 'quill-table-up/index.css';
+type EditorProps = {
+    /** HTML content to display in the read-only editor */
+    value: string;
+};
+declare const HtmlView: ({ value }: EditorProps) => React.JSX.Element;
+export default HtmlView;

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

@@ -0,0 +1,46 @@
+import Quill from 'quill';
+import React, { useEffect, useRef } from 'react';
+import 'quill/dist/quill.snow.css';
+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);
+    // Initialize ONCE
+    useEffect(() => {
+        if (!containerRef.current || quillRef.current)
+            return;
+        const quill = new Quill(containerRef.current, {
+            theme: 'snow',
+            readOnly: true,
+            modules: {
+                toolbar: false,
+            },
+        });
+        quillRef.current = quill;
+    }, []);
+    // Update content only
+    useEffect(() => {
+        if (!quillRef.current)
+            return;
+        quillRef.current.setContents([]);
+        quillRef.current.clipboard.dangerouslyPasteHTML(DOMPurify.sanitize(value));
+    }, [value]);
+    return (React.createElement(Box, { sx: {
+            width: '100%',
+            height: '100%',
+            '.ql-container.ql-snow': {
+                border: 'none',
+                minHeight: 20,
+            },
+        } },
+        React.createElement("div", { ref: containerRef })));
+};
+export default HtmlView;

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

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