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

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

@@ -1,23 +1,37 @@
 import { EvokeForm, ObjectInstance } from '@evoke-platform/context';
 import React, { ComponentType } from 'react';
-import { FieldErrors, FieldValues } from 'react-hook-form';
+import { FieldValues, SubmitErrorHandler } from 'react-hook-form';
+import { BodyProps } from './components/Body';
+import { FooterProps } from './components/Footer';
+import { HeaderProps } from './components/Header';
 import { BaseProps, Document, SimpleEditorProps } from './components/types';
+import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 export type FormRendererProps = BaseProps & {
     richTextEditor?: ComponentType<SimpleEditorProps>;
-    hideButtons?: boolean;
     value?: FieldValues;
     onSubmit?: (data: FieldValues) => void;
+    onDiscardChanges?: () => void;
+    onSubmitError?: SubmitErrorHandler<FieldValues>;
     fieldHeight?: 'small' | 'medium';
-    stickyFooter?: boolean;
-    onCancel?: () => void;
     form: EvokeForm;
+    title?: string | React.ReactNode;
     instance?: ObjectInstance | Document;
     onChange: (id: string, value: unknown) => void;
-    onValidationChange?: (errors: FieldErrors) => void;
     associatedObject?: {
         instanceId?: string;
         propertyId?: string;
     };
+    renderHeader?: (props: HeaderProps) => React.ReactNode;
+    renderBody?: (props: BodyProps) => React.ReactNode;
+    renderFooter?: (props: FooterProps) => React.ReactNode;
+};
+export declare const FormRenderer: React.FC<FormRendererProps> & {
+    Header: React.FC<HeaderProps>;
+    Body: React.FC<BodyProps>;
+    Footer: React.FC<FooterProps>;
+    FooterActions: (props: import("./components/Footer").FooterActionsProps) => React.JSX.Element;
+    Title: React.FC<import("./components/Header").TitleProps>;
+    AccordionActions: React.FC<import("./components/Header").AccordionActionsProps>;
+    ValidationErrors: typeof ValidationErrors;
 };
-declare function FormRenderer(props: FormRendererProps): React.JSX.Element;
 export default FormRenderer;

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

@@ -1,37 +1,37 @@
 import { useObject } from '@evoke-platform/context';
-import { isEmpty, isEqual } from 'lodash';
+import { isEmpty, isEqual, omit } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useWidgetSize } from '../../../theme';
-import { Button, Skeleton, Typography } from '../../core';
 import { Box } from '../../layout';
-import ActionButtons from './components/ActionButtons';
+import { Body } from './components/Body';
+import { Footer, FooterActions } from './components/Footer';
 import { FormContext } from './components/FormContext';
-import { RecursiveEntryRenderer } from './components/RecursiveEntryRenderer';
-import { assignIdsToSectionsAndRichText, convertDocToParameters, convertPropertiesToParams } from './components/utils';
+import Header, { AccordionActions, Title } from './components/Header';
+import { assignIdsToSectionsAndRichText, convertDocToParameters, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, } from './components/utils';
 import { handleValidation } from './components/ValidationFiles/Validation';
-import ValidationErrorDisplay from './components/ValidationFiles/ValidationErrorDisplay';
-function FormRenderer(props) {
-    const { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, associatedObject, } = props;
+import ValidationErrors from './components/ValidationFiles/ValidationErrors';
+const FormRendererInternal = (props) => {
+    const { onSubmit, onDiscardChanges, onSubmitError, value, fieldHeight, richTextEditor, form, instance, onChange, associatedObject, renderHeader, renderBody, renderFooter, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
     });
     const hasSections = entries.some((entry) => entry.type === 'sections');
-    const isModal = !!document.querySelector('.MuiDialog-container');
-    const { ref: containerRef, breakpoints, isBelow, width, } = useWidgetSize({
+    const { ref: containerRef, isBelow, width, } = useWidgetSize({
         scroll: false,
         defaultWidth: 1200,
     });
-    const { isXs, isSm } = breakpoints;
     const isSmallerThanMd = isBelow('md');
-    const objectStore = useObject(objectId);
     const [expandedSections, setExpandedSections] = useState([]);
     const [fetchedOptions, setFetchedOptions] = useState({});
     const [expandAll, setExpandAll] = useState();
     const [action, setAction] = useState();
     const [object, setObject] = useState();
     const [triggerFieldReset, setTriggerFieldReset] = useState(false);
+    const [isInitializing, setIsInitializing] = useState(true);
+    const [parameters, setParameters] = useState();
+    const objectStore = useObject(objectId);
     const updateFetchedOptions = (newData) => {
         setFetchedOptions((prev) => ({
             ...prev,
@@ -44,18 +44,6 @@ function FormRenderer(props) {
     function handleCollapseAll() {
         setExpandAll(false);
     }
-    const parameters = useMemo(() => {
-        if (form.id === 'documentForm') {
-            return convertDocToParameters(instance);
-        }
-        else if (action?.parameters) {
-            return action.parameters;
-        }
-        else if (object) {
-            // if forms actionId is synced with object properties
-            return convertPropertiesToParams(object);
-        }
-    }, [form.id, action?.parameters, object, instance]);
     const updatedEntries = useMemo(() => {
         return assignIdsToSectionsAndRichText(entries, object, parameters);
     }, [entries, object, parameters]);
@@ -63,14 +51,25 @@ function FormRenderer(props) {
         (async () => {
             try {
                 const object = await objectStore.get({ sanitized: true });
+                const action = object?.actions?.find((a) => a.id === actionId);
                 setObject(object);
-                if (actionId) {
-                    const action = object?.actions?.find((a) => a.id === actionId);
-                    setAction(action);
+                setAction(action);
+                if (form.id === 'documentForm') {
+                    setParameters(convertDocToParameters(instance));
+                }
+                else if (action?.parameters) {
+                    setParameters(action.parameters);
+                }
+                else if (object) {
+                    // if forms actionId is synced with object properties
+                    setParameters(convertPropertiesToParams(object));
                 }
             }
             catch (error) {
-                console.error('Failed to fetch object or action:', error);
+                console.error('Failed to fetch object, action or parameters:', error);
+            }
+            finally {
+                setIsInitializing(false);
             }
         })();
     }, [objectStore, actionId]);
@@ -87,14 +86,9 @@ function FormRenderer(props) {
             }
         }
     }, [value]);
-    useEffect(() => {
-        if (onValidationChange) {
-            onValidationChange(errors);
-        }
-    }, [errors, onValidationChange]);
     const handleReset = () => {
-        if (onCancel) {
-            onCancel();
+        if (onDiscardChanges) {
+            onDiscardChanges();
         }
         else {
             reset(instance); // clears react-hook-form state back to default values
@@ -104,99 +98,119 @@ function FormRenderer(props) {
     useEffect(() => {
         handleValidation(entries, register, getValues(), action?.parameters, instance);
     }, [action?.parameters, instance, entries, register, getValues]);
-    if (parameters && (!actionId || action)) {
-        return (React.createElement(Box, { ref: containerRef },
-            ((isSubmitted && !isEmpty(errors)) || (isSmallerThanMd && hasSections) || title) && (React.createElement(Box, { sx: {
-                    paddingX: isSmallerThanMd ? 2 : 3,
-                    paddingTop: '0px',
-                } },
-                React.createElement(Box, { sx: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        flexWrap: 'wrap',
-                        paddingY: isSm || isXs ? 2 : 3,
-                    } },
-                    title && (React.createElement(Typography, { sx: {
-                            fontSize: '20px',
-                            lineHeight: '30px',
-                            fontWeight: 700,
-                            flexGrow: '1',
-                        } }, title)),
-                    isSmallerThanMd && hasSections && (React.createElement(Box, { sx: {
-                            color: '#212B36',
-                            display: 'flex',
-                            alignItems: 'center',
-                            maxHeight: '22px',
-                        } },
-                        React.createElement(Button, { variant: "text", size: "small", disableRipple: true, disabled: expandedSections.every((section) => section.expanded === true), sx: {
-                                color: '#212B36',
-                                borderRight: '1px solid #e5e8eb',
-                                borderRadius: '0px',
-                                '&:hover': {
-                                    backgroundColor: 'transparent',
-                                },
-                                fontWeight: 400,
-                                fontSize: '14px',
-                            }, onClick: handleExpandAll }, "Expand all"),
-                        React.createElement(Button, { variant: "text", size: "small", disableRipple: true, disabled: expandedSections.every((section) => section.expanded === false), sx: {
-                                color: '#212B36',
-                                '&:hover': {
-                                    backgroundColor: 'transparent',
-                                },
-                                fontWeight: 400,
-                                fontSize: '14px',
-                            }, onClick: handleCollapseAll }, "Collapse all")))),
-                React.createElement(ValidationErrorDisplay, { formId: form.id, title: title, errors: errors, showSubmitError: isSubmitted, isSmallerThanMd: isSmallerThanMd }))),
-            React.createElement(FormContext.Provider, { value: {
-                    fetchedOptions,
-                    setFetchedOptions: updateFetchedOptions,
-                    getValues,
-                    stickyFooter,
-                    object,
+    const unregisterHiddenFields = (entriesToCheck) => {
+        entriesToCheck.forEach((entry) => {
+            if (entry.type === 'sections' || entry.type === 'columns') {
+                const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
+                subEntries.forEach((subEntry) => {
+                    if (subEntry.entries) {
+                        unregisterHiddenFields(subEntry.entries);
+                    }
+                });
+            }
+            if (!entryIsVisible(entry, getValues(), instance)) {
+                if (entry.type === 'sections' || entry.type === 'columns') {
+                    const fieldsToUnregister = getNestedParameterIds(entry);
+                    fieldsToUnregister.forEach(processFieldUnregister);
+                }
+                else {
+                    const fieldId = getEntryId(entry);
+                    if (fieldId)
+                        processFieldUnregister(fieldId);
+                }
+            }
+        });
+    };
+    const processFieldUnregister = (fieldId) => {
+        if (isAddressProperty(fieldId)) {
+            // Unregister entire addressObject to clear hidden field errors, then restore existing values since unregistering address.line1 etc is not working
+            const [addressObject, addressField] = fieldId.split('.');
+            let addressValues = getValues(addressObject);
+            addressValues = omit(addressValues, addressField);
+            unregister(addressObject);
+            setValue(addressObject, addressValues);
+        }
+        else {
+            unregister(fieldId);
+        }
+    };
+    async function unregisterHiddenFieldsAndSubmit() {
+        unregisterHiddenFields(entries ?? []);
+        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError?.(errors))();
+    }
+    const headerProps = {
+        title,
+        onExpandAll: handleExpandAll,
+        onCollapseAll: handleCollapseAll,
+        expandedSections,
+        errors,
+        hasAccordions: hasSections && isSmallerThanMd,
+        shouldShowValidationErrors: isSubmitted,
+        form,
+        action,
+    };
+    const footerProps = {
+        onSubmit: unregisterHiddenFieldsAndSubmit,
+        onDiscardChanges: handleReset,
+        action,
+        discardChangesButtonLabel: 'Discard Changes',
+        submitButtonLabel: display?.submitLabel ?? 'Submit',
+    };
+    return (React.createElement(Box, { ref: containerRef },
+        React.createElement(FormContext.Provider, { value: {
+                fetchedOptions,
+                setFetchedOptions: updateFetchedOptions,
+                getValues,
+                object,
+                errors,
+                instance,
+                richTextEditor,
+                expandedSections,
+                setExpandedSections,
+                expandAll,
+                setExpandAll,
+                parameters,
+                fieldHeight,
+                handleChange: onChange,
+                triggerFieldReset,
+                showSubmitError: isSubmitted,
+                associatedObject,
+                form,
+                width,
+            } },
+            React.createElement(React.Fragment, null,
+                ((isSubmitted && !isEmpty(errors)) || (isSmallerThanMd && hasSections) || title || renderHeader) &&
+                    (renderHeader ? renderHeader({ ...headerProps }) : React.createElement(Header, { ...headerProps })),
+                renderBody ? (renderBody({
+                    isInitializing,
+                    entries: updatedEntries,
                     errors,
-                    instance,
-                    richTextEditor,
+                    shouldShowValidationErrors: isSubmitted,
+                    onExpandAll: handleExpandAll,
+                    onCollapseAll: handleCollapseAll,
                     expandedSections,
-                    setExpandedSections,
-                    expandAll,
-                    setExpandAll,
-                    parameters,
-                    fieldHeight,
-                    handleChange: onChange,
-                    triggerFieldReset,
-                    showSubmitError: isSubmitted,
-                    associatedObject,
-                    width,
-                } },
-                React.createElement(Box, { sx: {
-                        paddingX: isSm || isXs ? 2 : 3,
-                        // when rendering the default delete action, we don't want a border
-                        borderTop: !form.id || isModal ? undefined : '1px solid #e9ecef',
-                    } },
-                    updatedEntries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry, isDocument: !!(form.id === 'documentForm') }))),
-                    !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
-                            ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
-                            bottom: isModal || isSmallerThanMd ? 0 : 24,
-                            zIndex: 1000,
-                            borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
-                            backgroundColor: '#fff',
-                            padding: isSmallerThanMd ? '16px' : '20px',
-                            display: 'flex',
-                            justifyContent: isXs ? 'center' : 'flex-end',
-                            alignItems: 'center',
-                            marginX: isSmallerThanMd ? -2 : -3,
-                            borderRadius: '0px 0px 6px 6px',
-                        } },
-                        React.createElement(ActionButtons, { onSubmit: onSubmit, handleSubmit: handleSubmit, isModal: isModal, actionType: action?.type, submitButtonLabel: display?.submitLabel, onReset: handleReset, unregister: unregister, entries: entries, setValue: setValue, formId: form.id })))))));
-    }
-    else {
-        return (React.createElement(Box, { p: 2 },
-            React.createElement(Skeleton, null),
-            React.createElement(Skeleton, null),
-            React.createElement(Skeleton, null),
-            React.createElement(Skeleton, null),
-            React.createElement(Skeleton, null)));
-    }
-}
+                    hasAccordions: hasSections && isSmallerThanMd,
+                })) : (React.createElement(Body, { ...{
+                        isInitializing,
+                        entries: updatedEntries,
+                        errors,
+                        shouldShowValidationErrors: isSubmitted,
+                        onExpandAll: handleExpandAll,
+                        onCollapseAll: handleCollapseAll,
+                        expandedSections,
+                        hasAccordions: hasSections && isSmallerThanMd,
+                    } })),
+                (actionId || form.id === 'documentForm') &&
+                    onSubmit &&
+                    (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
+};
+export const FormRenderer = Object.assign(FormRendererInternal, {
+    Header,
+    Body,
+    Footer,
+    FooterActions,
+    Title,
+    AccordionActions,
+    ValidationErrors,
+});
 export default FormRenderer;

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

@@ -1,5 +1,18 @@
+import { EvokeForm, ObjectInstance } from '@evoke-platform/context';
+import { SxProps } from '@mui/material';
+import { AxiosError } from 'axios';
 import React, { ComponentType } from 'react';
 import { BaseProps, SimpleEditorProps } from './components/types';
+import { FormRendererProps } from './FormRenderer';
+export type FORM_RENDERER_CONTAINER_ERRORS = 'Configured action ID does not match form action ID' | 'A default action form could not be found' | 'Action could not be found';
+export type FormRendererContainerError = AxiosError | number | FORM_RENDERER_CONTAINER_ERRORS | unknown;
+export type FormRendererState = {
+    status: 'loading' | 'error' | 'ready';
+    error?: FormRendererContainerError;
+    form?: EvokeForm;
+    instance?: ObjectInstance;
+    defaultContainer: React.ReactNode;
+};
 export type FormRendererContainerProps = BaseProps & {
     formId?: string;
     instanceId?: string;
@@ -15,12 +28,18 @@ export type FormRendererContainerProps = BaseProps & {
     hideButtons?: boolean;
     objectId: string;
     richTextEditor?: ComponentType<SimpleEditorProps>;
-    onClose?: () => void;
-    onSubmit?: (submission: Record<string, unknown>) => Promise<void>;
+    onSubmit?: (submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>;
+    onDiscardChanges?: FormRendererProps['onDiscardChanges'];
+    onSubmitError?: FormRendererProps['onSubmitError'];
     associatedObject?: {
         instanceId?: string;
         propertyId?: string;
     };
+    renderContainer?: (state: FormRendererState) => React.ReactNode;
+    renderHeader?: FormRendererProps['renderHeader'];
+    renderBody?: FormRendererProps['renderBody'];
+    renderFooter?: FormRendererProps['renderFooter'];
+    sx?: SxProps;
 };
 declare function FormRendererContainer(props: FormRendererContainerProps): React.JSX.Element;
 export default FormRendererContainer;

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

@@ -9,7 +9,7 @@ import { evalDefaultVals, processValueUpdate } from './components/DefaultValues'
 import { convertDocToEntries, deleteDocuments, encodePageSlug, formatDataToDoc, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, } from './components/utils';
 import FormRenderer from './FormRenderer';
 function FormRendererContainer(props) {
-    const { instanceId, pageNavigation, documentId, dataType, display, formId, stickyFooter, objectId, actionId, richTextEditor, onClose, onSubmit, associatedObject, hideButtons, } = props;
+    const { instanceId, pageNavigation, documentId, dataType, display, formId, objectId, actionId, richTextEditor, onSubmit, onDiscardChanges: onDiscardChangesOverride, associatedObject, renderContainer, onSubmitError, sx, renderHeader, renderBody, renderFooter, } = props;
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
     const { id: appId, defaultPages } = useApp();
@@ -33,7 +33,7 @@ function FormRendererContainer(props) {
     const onError = (err) => {
         const code = axios.isAxiosError(err) ? err.response?.status : undefined;
         setSnackbarError({ ...snackbarError, isError: true });
-        setError(code ?? true);
+        setError(code ?? err);
     };
     useEffect(() => {
         (async () => {
@@ -61,7 +61,7 @@ function FormRendererContainer(props) {
                         setAction(action);
                     }
                     else {
-                        setError(true);
+                        setError('Action could not be found');
                     }
                 }
             }
@@ -100,11 +100,11 @@ function FormRendererContainer(props) {
                 .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
                 .then((evokeForm) => {
                 if (evokeForm?.actionId === actionId) {
-                    const form = onClose ? { ...evokeForm, name: '' } : evokeForm;
+                    const form = evokeForm;
                     setForm(form);
                 }
                 else {
-                    setError(true);
+                    setError('Configured action ID does not match form action ID');
                 }
             })
                 .catch((error) => {
@@ -125,7 +125,7 @@ function FormRendererContainer(props) {
             })
                 .then((matchingForms) => {
                 if (matchingForms.length === 1) {
-                    const form = onClose ? { ...matchingForms[0], name: '' } : matchingForms[0];
+                    const form = matchingForms[0];
                     setForm(form);
                     // use this default form if no delete form is found
                 }
@@ -147,7 +147,7 @@ function FormRendererContainer(props) {
                     });
                 }
                 else if (instance || action.type === 'create') {
-                    setError(true);
+                    setError('Default action form could not be found');
                 }
             })
                 .catch((error) => {
@@ -231,25 +231,16 @@ function FormRendererContainer(props) {
         }
         try {
             if (dataType === 'documents' && !!document) {
-                try {
-                    await apiServices.patch(getPrefixedUrl(`/objects/${form.objectId}/instances/${instanceId}/documents/${documentId}`), pick(submission, ['metadata']).metadata ?? submission);
-                    setDocument((prev) => ({
-                        ...prev,
-                        metadata: submission.metadata,
-                    }));
-                    setSnackbarError({
-                        showAlert: true,
-                        message: 'Your changes have been submitted',
-                        isError: false,
-                    });
-                }
-                catch (error) {
-                    setSnackbarError({
-                        isError: true,
-                        showAlert: true,
-                        message: error.response?.data?.error?.message ?? 'An error occurred',
-                    });
-                }
+                await apiServices.patch(getPrefixedUrl(`/objects/${form.objectId}/instances/${instanceId}/documents/${documentId}`), pick(submission, ['metadata']).metadata ?? submission);
+                setDocument((prev) => ({
+                    ...prev,
+                    metadata: submission.metadata,
+                }));
+                setSnackbarError({
+                    showAlert: true,
+                    message: 'Your changes have been submitted',
+                    isError: false,
+                });
             }
             else if (action?.type === 'create') {
                 const response = await apiServices.post(getPrefixedUrl(`/objects/${form.objectId}/instances/actions`), {
@@ -285,6 +276,7 @@ function FormRendererContainer(props) {
                 showAlert: true,
                 message: error.response?.data?.error?.message ?? 'An error occurred',
             });
+            throw error; // Throw error so caller knows submission failed
         }
     };
     const getDefaultValues = async (entries, instanceData) => {
@@ -414,8 +406,11 @@ function FormRendererContainer(props) {
             });
         }
     }
-    function onCancel() {
-        (async () => {
+    const isLoading = (instanceId && !formData && !document) || !form || !sanitizedObject;
+    const status = error ? 'error' : isLoading ? 'loading' : 'ready';
+    const onDiscardChanges = onDiscardChangesOverride
+        ? onDiscardChangesOverride
+        : async () => {
             if (document) {
                 const defaultValues = await getDefaultValues(convertDocToEntries(document), document);
                 setFormData(defaultValues);
@@ -424,29 +419,32 @@ function FormRendererContainer(props) {
                 const defaultValues = await getDefaultValues(form.entries, instance || {});
                 setFormData(defaultValues);
             }
-        })();
-    }
-    const isLoading = (instanceId && !formData && !document) || !form || !sanitizedObject;
-    return !error ? (React.createElement(Box, { sx: {
+        };
+    const defaultContainer = !error ? (React.createElement(Box, { sx: {
             backgroundColor: '#ffffff',
             borderRadius: '6px',
             padding: '0px',
-            border: !isLoading && !onClose ? '1px solid #dbe0e4' : undefined,
-        } },
-        !isLoading ? (React.createElement(FormRenderer, { onSubmit: onSubmit ?? saveHandler, hideButtons: hideButtons ?? (document && !hasDocumentUpdateAccess), richTextEditor: richTextEditor, fieldHeight: display?.fieldHeight ?? 'medium', value: formData, stickyFooter: stickyFooter, form: form, instance: dataType !== 'documents' ? instance : document, onChange: onChange, onCancel: onClose ?? onCancel, associatedObject: associatedObject })) : (React.createElement(Box, { sx: { padding: '20px' } },
-            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
-                React.createElement(Skeleton, { width: '78%', sx: { borderRadius: '8px', height: '40px' } }),
-                React.createElement(Skeleton, { width: '20%', sx: { borderRadius: '8px', height: '40px' } })),
-            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
-                React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } }),
-                React.createElement(Skeleton, { width: '33%', sx: { borderRadius: '8px', height: '40px' } }),
-                React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } })),
-            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
-                React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } }),
-                React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } })))),
+            border: !isLoading ? '1px solid #dbe0e4' : undefined,
+            ...sx,
+        } }, !isLoading ? (React.createElement(React.Fragment, null, form && sanitizedObject && (React.createElement(FormRenderer, { onSubmit: onSubmit ? (data) => onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, fieldHeight: display?.fieldHeight ?? 'medium', value: formData, form: form, instance: dataType !== 'documents' ? instance : document, onChange: onChange, associatedObject: associatedObject, renderHeader: renderHeader, renderBody: renderBody, renderFooter: document && !hasDocumentUpdateAccess ? () => React.createElement(React.Fragment, null) : renderFooter })))) : (React.createElement(Box, { sx: { padding: '20px' } },
+        React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+            React.createElement(Skeleton, { width: '78%', sx: { borderRadius: '8px', height: '40px' } }),
+            React.createElement(Skeleton, { width: '20%', sx: { borderRadius: '8px', height: '40px' } })),
+        React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+            React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } }),
+            React.createElement(Skeleton, { width: '33%', sx: { borderRadius: '8px', height: '40px' } }),
+            React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } })),
+        React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+            React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } }),
+            React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } })))))) : (React.createElement(ErrorComponent, { colspan: props.colspan, code: error === 403 ? 'AccessDenied' : error === 404 ? 'NotFound' : 'Misconfigured', 
+        // box shadow looks wrong when rendering a form in a modal, and there's no need for it
+        // in a standalone form v2 widget.
+        styles: { boxShadow: 'none' } }));
+    return (React.createElement(React.Fragment, null,
+        renderContainer ? React.createElement(React.Fragment, null, renderContainer({ status, error, defaultContainer })) : defaultContainer,
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
                 isError: snackbarError.isError,
                 showAlert: false,
-            }), message: snackbarError.message, error: snackbarError.isError }))) : (React.createElement(ErrorComponent, { colspan: props.colspan, code: error === 403 ? 'AccessDenied' : error === 404 ? 'NotFound' : 'Misconfigured' }));
+            }), message: snackbarError.message, error: snackbarError.isError })));
 }
 export default FormRendererContainer;

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

@@ -0,0 +1,18 @@
+import { FormEntry } from '@evoke-platform/context';
+import { SxProps } from '@mui/material';
+import React from 'react';
+import { FieldErrors } from 'react-hook-form';
+import { ExpandedSection } from './types';
+export type BodyProps = {
+    entries: FormEntry[];
+    isInitializing: boolean;
+    errors?: FieldErrors;
+    shouldShowValidationErrors: boolean;
+    hasAccordions: boolean;
+    expandedSections?: ExpandedSection[];
+    onExpandAll?: () => void;
+    onCollapseAll?: () => void;
+    sx?: SxProps;
+};
+export declare const Body: React.FC<BodyProps>;
+export default Body;

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

@@ -0,0 +1,27 @@
+import React, { useContext } from 'react';
+import { FormContext } from '../..';
+import useWidgetSize from '../../../../theme/hooks';
+import { Skeleton } from '../../../core';
+import Box from '../../../layout/Box/Box';
+import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
+export const Body = (props) => {
+    const { entries, isInitializing, sx } = props;
+    const { width } = useContext(FormContext);
+    const { breakpoints } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
+    const { isXs, isSm } = breakpoints;
+    return (React.createElement(React.Fragment, null, isInitializing ? (React.createElement(Box, { sx: { padding: '20px', ...sx } },
+        React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+            React.createElement(Skeleton, { width: '78%', sx: { borderRadius: '8px', height: '40px' } }),
+            React.createElement(Skeleton, { width: '20%', sx: { borderRadius: '8px', height: '40px' } })),
+        React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+            React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } }),
+            React.createElement(Skeleton, { width: '33%', sx: { borderRadius: '8px', height: '40px' } }),
+            React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } })),
+        React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+            React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } }),
+            React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } })))) : (React.createElement(Box, { sx: { paddingX: isSm || isXs ? 2 : 3, ...sx } }, entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry })))))));
+};
+export default Body;