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

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

@@ -5,12 +5,12 @@ import Handlebars from 'no-eval-handlebars';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Close } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
-import { Autocomplete, Button, Dialog, DialogContent, DialogTitle, IconButton, Link, ListItem, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
+import { Autocomplete, Button, IconButton, Link, ListItem, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
 import { Box } from '../../../../../layout';
 import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
 import RelatedObjectInstance from './RelatedObjectInstance';
 const ObjectPropertyInput = (props) => {
-    const { id, fieldDefinition, nestedFieldsView, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, } = props;
+    const { id, fieldDefinition, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, } = props;
     const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, instance, } = useFormContext();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
@@ -34,8 +34,21 @@ const ObjectPropertyInput = (props) => {
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
     const updatedCriteria = useMemo(() => {
-        return filter ? { where: transformToWhere(filter) } : undefined;
-    }, [filter]);
+        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);
     useEffect(() => {
         if (relatedObject) {
@@ -91,13 +104,13 @@ const ObjectPropertyInput = (props) => {
             }
         }
     }, [fieldDefinition, defaultValueCriteria, sortBy, orderBy]);
-    const getDropdownOptions = useCallback((name) => {
+    const getDropdownOptions = useCallback(() => {
         if (((!fetchedOptions?.[`${id}Options`] ||
             (fetchedOptions?.[`${id}Options`]).length === 0) &&
             !hasFetched) ||
             !isEqual(fetchedOptions?.[`${id}UpdatedCriteria`], updatedCriteria)) {
+            setFetchedOptions({ [`${id}UpdatedCriteria`]: updatedCriteria });
             setLoadingOptions(true);
-            setFetchedOptions && setFetchedOptions({ [`${id}UpdatedCriteria`]: updatedCriteria });
             const updatedFilter = cloneDeep(updatedCriteria) || {};
             updatedFilter.limit = 100;
             const { propertyId, direction } = layout?.sort ?? {
@@ -105,19 +118,6 @@ const ObjectPropertyInput = (props) => {
                 direction: 'asc',
             };
             updatedFilter.order = `${propertyId} ${direction}`;
-            const where = name
-                ? transformToWhere({
-                    name: {
-                        like: name,
-                        options: 'i',
-                    },
-                })
-                : {};
-            updatedFilter.where = updatedFilter.where
-                ? {
-                    and: [updatedFilter.where, where],
-                }
-                : where;
             apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${JSON.stringify(updatedFilter)}`), (error, instances) => {
                 if (error) {
                     console.error(error);
@@ -131,20 +131,17 @@ const ObjectPropertyInput = (props) => {
                 }
             });
         }
-    }, [relatedObject, setLoadingOptions, setOptions, fieldDefinition, updatedCriteria, layout]);
+    }, [fieldDefinition, updatedCriteria, layout, fetchedOptions, hasFetched, id]);
+    const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 200), [getDropdownOptions]);
     useEffect(() => {
         if (displayOption === 'dropdown') {
-            getDropdownOptions();
+            debouncedGetDropdownOptions();
+            return () => debouncedGetDropdownOptions.cancel();
         }
-    }, [fieldDefinition, updatedCriteria, displayOption]);
+    }, [displayOption, debouncedGetDropdownOptions]);
     useEffect(() => {
         setSelectedInstance(initialValue);
     }, [initialValue]);
-    const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 200), [updatedCriteria]);
-    useEffect(() => {
-        debouncedGetDropdownOptions(dropdownInput);
-        return () => debouncedGetDropdownOptions.cancel();
-    }, [dropdownInput]);
     useEffect(() => {
         if (formId || action?.defaultFormId) {
             apiServices
@@ -189,16 +186,17 @@ const ObjectPropertyInput = (props) => {
                 }
             });
         }
-    }, [fieldDefinition]);
+    }, [fieldDefinition.objectId, fetchedOptions, id]);
     useEffect(() => {
         const fetchDefaultPages = async () => {
-            if (parameters) {
+            if (parameters && !fetchedOptions['allDefaultPages']) {
                 const pages = await getDefaultPages(parameters, defaultPages, findDefaultPageSlugFor);
                 setAllDefaultPages(pages);
+                setFetchedOptions({ [`allDefaultPages`]: pages });
             }
         };
         fetchDefaultPages();
-    }, []);
+    }, [fetchedOptions, parameters, defaultPages, findDefaultPageSlugFor]);
     useEffect(() => {
         if (fieldDefinition.objectId &&
             allDefaultPages &&
@@ -214,7 +212,7 @@ const ObjectPropertyInput = (props) => {
                 }
             });
         }
-    }, []);
+    }, [fieldDefinition, allDefaultPages, fetchedOptions, id]);
     const handleClose = () => {
         setOpenCreateDialog(false);
     };
@@ -242,7 +240,12 @@ const ObjectPropertyInput = (props) => {
                 [`${id}NavigationSlug`]: navigationSlug,
             });
         }
-    }, [relatedObject, options, hasFetched]);
+        if (appId && !fetchedOptions[`${id}AppId`]) {
+            setFetchedOptions({
+                [`${id}AppId`]: appId,
+            });
+        }
+    }, [relatedObject, options, hasFetched, navigationSlug, fetchedOptions, appId, id]);
     const dropdownOptions = [
         ...options.map((o) => ({ label: o.name, value: o.id })),
         ...(mode !== 'existingOnly' && relatedObject?.actions?.some((a) => a.id === createActionId)
@@ -289,7 +292,7 @@ const ObjectPropertyInput = (props) => {
                                 paddingLeft: '24px',
                                 color: 'rgba(145, 158, 171, 1)',
                             },
-                        } }, mode !== 'newOnly' && children));
+                        } }, children));
                 }, sx: {
                     '& button.MuiButtonBase-root': {
                         ...(!loadingOptions &&
@@ -463,7 +466,7 @@ const ObjectPropertyInput = (props) => {
                 }, variant: "body2", href: navigationSlug && !isModal
                     ? `${'/app'}/${appId}/${navigationSlug.replace(':instanceId', selectedInstance?.id ?? '')}`
                     : undefined, "aria-label": selectedInstance?.name }, selectedInstance?.name ? selectedInstance?.name : readOnly && 'None')),
-            !readOnly && (selectedInstance || (nestedFieldsView && instance?.id)) ? (React.createElement(Tooltip, { title: `Unlink` },
+            !readOnly && selectedInstance ? (React.createElement(Tooltip, { title: `Unlink` },
                 React.createElement("span", null,
                     React.createElement(IconButton, { onClick: (event) => {
                             event.stopPropagation();
@@ -491,21 +494,7 @@ const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add` }, "Add")))),
-        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { id: id, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, nestedFieldsView: nestedFieldsView, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: form?.id, actionId: createActionId, setSnackbarError: setSnackbarError, fieldDefinition: fieldDefinition })) : (React.createElement(Dialog, { fullWidth: true, PaperProps: {
-                sx: { maxWidth: '950px', width: '100%' },
-            }, open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
-            React.createElement(DialogTitle, { sx: {
-                    fontSize: '18px',
-                    fontWeight: 700,
-                    paddingTop: '35px',
-                    paddingBottom: '20px',
-                    borderBottom: '1px solid #e9ecef',
-                } },
-                React.createElement(IconButton, { sx: { position: 'absolute', right: '17px', top: '22px' }, onClick: handleClose },
-                    React.createElement(Close, { fontSize: "small" })),
-                form?.name ?? `Add ${fieldDefinition.name}`),
-            React.createElement(DialogContent, { sx: { padding: '0px' } },
-                React.createElement(RelatedObjectInstance, { handleClose: handleClose, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: formId ?? form?.id, actionId: createActionId, setSnackbarError: setSnackbarError, fieldDefinition: fieldDefinition })))))),
+        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, fieldDefinition: fieldDefinition }),
         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

@@ -3,6 +3,8 @@ import React from 'react';
 import { BaseProps } from '../../types';
 export type RelatedObjectInstanceProps = BaseProps & {
     id: string;
+    open: boolean;
+    title: string;
     relatedObject: Obj | undefined;
     setSelectedInstance: (selectedInstance: ObjectInstance) => void;
     handleClose: () => void;
@@ -12,7 +14,6 @@ export type RelatedObjectInstanceProps = BaseProps & {
         message?: string;
         isError: boolean;
     }>>;
-    nestedFieldsView?: boolean;
     displayOption?: 'dropdown' | 'dialogBox';
     setOptions: (options: ObjectInstance[]) => void;
     options: ObjectInstance[];

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

@@ -1,28 +1,44 @@
 import { useApiServices } from '@evoke-platform/context';
-import { InfoRounded } from '@mui/icons-material';
-import React, { useState } from 'react';
-import { useFormContext } from '../../../../../../theme/hooks';
-import { Alert, Button, FormControlLabel, Radio, RadioGroup } from '../../../../../core';
-import { Box, Grid } from '../../../../../layout';
+import { DialogActions } from '@mui/material';
+import { isEmpty } from 'lodash';
+import React, { useCallback, 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';
+import Box from '../../../../../layout/Box/Box';
+import FormRenderer from '../../../FormRenderer';
 import FormRendererContainer from '../../../FormRendererContainer';
+import Body from '../../Body';
+import Footer from '../../Footer';
+import { AccordionActions } from '../../Header';
 import { formatSubmission, getPrefixedUrl } from '../../utils';
 import InstanceLookup from './InstanceLookup';
 const styles = {
     actionButtons: {
-        padding: '8px 8px 24px 8px',
-        marginRight: '18px',
+        padding: 3,
         display: 'flex',
         justifyContent: 'flex-end',
         alignItems: 'center',
+        borderTop: '1px solid #f4f6f8',
+    },
+    dialogContent: {
+        maxHeight: 'calc(100vh - 340px)',
+        padding: '0 24px 30px 24px',
+        '.MuiInputBase-root': { background: '#FFFF', borderRadius: '8px' },
     },
 };
 const RelatedObjectInstance = (props) => {
-    const { relatedObject, id, setSelectedInstance, handleClose, nestedFieldsView, mode, displayOption, filter, layout, formId, actionId, fieldDefinition, setSnackbarError, setOptions, options, } = props;
-    const { handleChange: handleChangeObjectField, richTextEditor, stickyFooter, fieldHeight } = useFormContext();
-    const [errors, setErrors] = useState([]);
+    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, fieldDefinition, setSnackbarError, setOptions, options, } = props;
+    const { handleChange: handleChangeObjectField, richTextEditor, fieldHeight, width } = useFormContext();
     const [selectedRow, setSelectedRow] = useState();
-    const [relationType, setRelationType] = useState(displayOption === 'dropdown' ? 'new' : 'existing');
+    const [relationType, setRelationType] = useState(displayOption === 'dropdown' || mode === 'newOnly' ? 'new' : 'existing');
     const apiServices = useApiServices();
+    const validationErrorsRef = useRef(null);
+    const { breakpoints } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
+    const { isXs, isSm } = breakpoints;
     const linkExistingInstance = async () => {
         if (selectedRow) {
             setSelectedInstance(selectedRow);
@@ -32,7 +48,6 @@ const RelatedObjectInstance = (props) => {
     };
     const onClose = () => {
         handleClose();
-        setErrors([]);
     };
     const createNewInstance = async (submission) => {
         if (!relatedObject) {
@@ -69,46 +84,75 @@ const RelatedObjectInstance = (props) => {
             });
         }
     };
-    return (React.createElement(Box, { sx: {
-            background: nestedFieldsView ? '#F4F6F8' : 'none',
-            borderRadius: '8px',
+    const handleSubmitError = () => {
+        if (validationErrorsRef.current) {
+            validationErrorsRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    };
+    const shouldShowRadioButtons = displayOption !== 'dropdown' && mode !== 'existingOnly' && mode !== 'newOnly' && actionId;
+    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;
+    const DialogForm = useCallback(() => (React.createElement(FormRendererContainer, { formId: formId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: actionId, objectId: fieldDefinition.objectId, 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,
+                } })) : null)) : null,
+            React.createElement(RadioButtons, null),
+            bodyProps.hasAccordions && React.createElement(AccordionActions, { ...bodyProps }),
+            React.createElement(Body, { ...bodyProps, sx: { padding: 0 } }))), renderFooter: (footerProps) => (React.createElement(DialogActions, { sx: {
+                padding: 0,
+                borderTop: '1px solid #f4f6f8',
+            } },
+            React.createElement(Footer, { ...footerProps, discardChangesButtonLabel: "Cancel", sx: { borderTop: 'none' } }))), renderContainer: ({ status, defaultContainer }) => {
+            return (React.createElement(React.Fragment, null,
+                (status === 'loading' || status === 'error') && (React.createElement(DialogContent, null,
+                    React.createElement(RadioButtons, null),
+                    defaultContainer)),
+                status === 'ready' && defaultContainer));
+        }, sx: { border: 'none' } })), [formId, actionId, fieldDefinition, fieldHeight, richTextEditor, RadioButtons]);
+    return (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: open, onClose: (e, reason) => reason !== 'backdropClick' && handleClose(), sx: {
+            background: 'none',
+        }, PaperProps: {
+            sx: {
+                borderRadius: '16px',
+                maxWidth: '950px',
+                width: '100%',
+            },
         } },
-        React.createElement(Box, { sx: {
-                '.MuiInputBase-root': { background: '#FFFF', borderRadius: '8px' },
+        React.createElement(DialogTitle, { sx: {
+                padding: 3,
+                borderBottom: '1px solid #e9ecef',
             } },
-            !nestedFieldsView &&
-                displayOption !== 'dropdown' &&
-                mode !== 'existingOnly' &&
-                mode !== 'newOnly' &&
-                actionId && (React.createElement(Grid, { container: true, sx: { paddingX: '24px' } },
-                React.createElement(Grid, { container: true, item: true },
-                    React.createElement(RadioGroup, { row: true, "aria-labelledby": "related-object-link-type", onChange: (event) => {
-                            event.target.value === 'existing' && setErrors([]);
-                            setRelationType(event.target.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" }))))),
-            errors?.length ? (React.createElement(Alert, { severity: "error", sx: { margin: '10px 0', borderRadius: '8px' }, icon: React.createElement(InfoRounded, { sx: { color: '#A22723' } }) }, errors.length === 1 ? (React.createElement(React.Fragment, null,
-                "There is ",
-                React.createElement("strong", null, "1"),
-                " error")) : (React.createElement(React.Fragment, null,
-                "There are ",
-                React.createElement("strong", null, errors.length),
-                " errors")))) : undefined,
-            relationType === 'new' || mode === 'newOnly' ? (React.createElement(Box, { sx: { width: '100%' } },
-                React.createElement(FormRendererContainer, { formId: formId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: actionId, stickyFooter: stickyFooter, objectId: fieldDefinition.objectId, onClose: onClose, onSubmit: createNewInstance, richTextEditor: richTextEditor }))) : ((mode === 'default' || mode === 'existingOnly') &&
-                relatedObject && (React.createElement(InstanceLookup, { colspan: 12, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter, layout: layout })))),
-        relationType !== 'new' && mode !== 'newOnly' && (React.createElement(Box, { sx: styles.actionButtons },
-            React.createElement(Button, { onClick: onClose, color: 'inherit', sx: {
-                    border: '1px solid #ced4da',
-                    width: '75px',
-                    marginRight: '0px',
-                    color: 'black',
-                } }, "Cancel"),
-            React.createElement(Button, { sx: {
-                    marginLeft: '8px',
-                    width: '85px',
-                    '&:hover': { boxShadow: 'none' },
-                }, onClick: linkExistingInstance, variant: "contained", disabled: !selectedRow, "aria-label": `Add` }, "Add")))));
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    flex: '1 1 100%',
+                } },
+                title,
+                React.createElement(IconButton, { onClick: onClose, "aria-label": "Close" },
+                    React.createElement(Close, { fontSize: "small" })))),
+        relationType === 'new' ? (React.createElement(DialogForm, null)) : ((mode === 'default' || mode === 'existingOnly') &&
+            relatedObject && (React.createElement(React.Fragment, null,
+            React.createElement(DialogContent, { sx: styles.dialogContent },
+                shouldShowRadioButtons && React.createElement(RadioButtons, null),
+                React.createElement(InstanceLookup, { colspan: 12, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter, layout: layout })),
+            React.createElement(DialogActions, { sx: styles.actionButtons },
+                React.createElement(Button, { onClick: onClose, color: 'inherit', sx: {
+                        border: '1px solid #ced4da',
+                        width: '75px',
+                        marginRight: '0px',
+                        color: 'black',
+                    } }, "Cancel"),
+                React.createElement(Button, { sx: {
+                        marginLeft: '8px',
+                        width: '85px',
+                        '&:hover': { boxShadow: 'none' },
+                    }, onClick: linkExistingInstance, variant: "contained", disabled: !selectedRow, "aria-label": `Add` }, "Add")))))));
 };
 export default RelatedObjectInstance;

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

@@ -0,0 +1,29 @@
+import { Action, EvokeForm } 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 HeaderProps = {
+    hasAccordions: boolean;
+    shouldShowValidationErrors: boolean;
+    title?: string;
+    expandedSections?: ExpandedSection[];
+    onExpandAll?: () => void;
+    onCollapseAll?: () => void;
+    form: EvokeForm;
+    errors?: FieldErrors;
+    action?: Action;
+    sx?: SxProps;
+};
+declare const Header: React.FC<HeaderProps>;
+export type TitleProps = {
+    title?: string;
+};
+export declare const Title: React.FC<TitleProps>;
+export type AccordionActionsProps = {
+    expandedSections?: ExpandedSection[];
+    onExpandAll?: () => void;
+    onCollapseAll?: () => void;
+};
+export declare const AccordionActions: React.FC<AccordionActionsProps>;
+export default Header;

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

@@ -0,0 +1,63 @@
+import { isEmpty } from 'lodash';
+import React from 'react';
+import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
+import Button from '../../../core/Button/Button';
+import { Typography } from '../../../core/Typography';
+import Box from '../../../layout/Box/Box';
+import ValidationErrors from './ValidationFiles/ValidationErrors';
+const Header = (props) => {
+    const { title, errors, hasAccordions, shouldShowValidationErrors, form, sx } = props;
+    const { width } = useFormContext();
+    const { breakpoints, isBelow } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
+    const isSmallerThanMd = isBelow('md');
+    const { isXs, isSm } = breakpoints;
+    return (React.createElement(Box, { sx: {
+            paddingX: isSmallerThanMd ? 2 : 3,
+            paddingTop: '0px',
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            paddingY: isSm || isXs ? 2 : 3,
+            // when rendering the default delete action, we don't want a border
+            borderBottom: !form.id ? undefined : '1px solid #e9ecef',
+            gap: isSm || isXs ? 2 : 3,
+            ...sx,
+        } },
+        title && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
+            React.createElement(Title, { ...props }))),
+        hasAccordions && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
+            React.createElement(AccordionActions, { ...props }))),
+        shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null));
+};
+// Default slot components for convenience
+export const Title = ({ title }) => (React.createElement(Typography, { sx: {
+        fontSize: '20px',
+        lineHeight: '30px',
+        fontWeight: 700,
+        flexGrow: 1,
+    } }, title));
+export const AccordionActions = ({ onExpandAll, onCollapseAll, expandedSections }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { variant: "text", size: "small", disableRipple: true, disabled: expandedSections?.every((section) => section.expanded === true), onClick: onExpandAll, sx: {
+                color: '#212B36',
+                borderRight: '1px solid #e5e8eb',
+                borderRadius: '0px',
+                '&:hover': {
+                    backgroundColor: 'transparent',
+                },
+                fontWeight: 400,
+                fontSize: '14px',
+            } }, "Expand all"),
+        React.createElement(Button, { variant: "text", size: "small", disableRipple: true, disabled: expandedSections?.every((section) => section.expanded === false), onClick: onCollapseAll, sx: {
+                color: '#212B36',
+                '&:hover': {
+                    backgroundColor: 'transparent',
+                },
+                fontWeight: 400,
+                fontSize: '14px',
+            } }, "Collapse all")));
+};
+export default Header;

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

@@ -36,8 +36,8 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
     };
 }
 export function RecursiveEntryRenderer(props) {
-    const { entry, isDocument } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, fieldHeight, triggerFieldReset, associatedObject, width, } = useFormContext();
+    const { entry } = props;
+    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, fieldHeight, triggerFieldReset, associatedObject, form, width, } = useFormContext();
     // If the entry is hidden, clear its value and any nested values, and skip rendering
     if (!entryIsVisible(entry, getValues(), instance)) {
         return null;
@@ -56,7 +56,7 @@ export function RecursiveEntryRenderer(props) {
     const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
     const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const fieldDefinition = useMemo(() => {
-        return getFieldDefinition(entry, object, parameters, isDocument);
+        return getFieldDefinition(entry, object, parameters, form?.id === 'documentForm');
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
     if (associatedObject?.propertyId === entryId)

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrors.d.ts

@@ -0,0 +1,9 @@
+import { SxProps } from '@mui/material/styles';
+import React from 'react';
+import { FieldErrors } from 'react-hook-form';
+export type ValidationErrorsProps = {
+    errors: FieldErrors;
+    sx?: SxProps;
+};
+declare function ValidationErrors(props: ValidationErrorsProps): React.JSX.Element;
+export default ValidationErrors;

package/dist/published/components/custom/FormV2/components/ValidationFiles/{ValidationErrorDisplay.js → ValidationErrors.js}

@@ -1,13 +1,13 @@
 import React from 'react';
 import { List, ListItem, Typography } from '../../../../core';
 import { Box } from '../../../../layout';
-function ValidationErrorDisplay(props) {
-    const { formId, title, errors, showSubmitError, isSmallerThanMd } = props;
+function ValidationErrors(props) {
+    const { errors, sx } = props;
     function extractErrorMessages(errors) {
         const messages = [];
         for (const key in errors) {
             const error = errors[key];
-            if (error?.message) {
+            if (error?.message && typeof error?.message === 'string') {
                 messages.push(error.message);
             }
             else if (error) {
@@ -22,15 +22,15 @@ function ValidationErrorDisplay(props) {
         return messages;
     }
     const errorMessages = extractErrorMessages(errors);
-    return showSubmitError && errorMessages.length > 0 ? (React.createElement(Box, { id: `validation-error-display-${formId}`, sx: {
+    return (React.createElement(Box, { sx: {
             backgroundColor: '#f8d7da',
             borderColor: '#f5c6cb',
             color: '#721c24',
             border: '1px solid #721c24',
             padding: '8px 24px',
             borderRadius: '4px',
-            marginBottom: isSmallerThanMd ? 2 : 3,
-            marginTop: !title ? (isSmallerThanMd ? -2 : -3) : undefined,
+            flex: 1,
+            ...sx,
         } },
         React.createElement(Typography, { sx: { color: '#721c24', mt: '16px', mb: '8px' } }, "Please fix the following errors before submitting:"),
         React.createElement(List, { sx: {
@@ -38,6 +38,9 @@ function ValidationErrorDisplay(props) {
                 paddingLeft: '40px',
                 mb: '8px',
                 fontFamily: 'Arial, Helvetica, sans-serif',
-            } }, errorMessages.map((msg, index) => (React.createElement(ListItem, { key: index, sx: { display: 'list-item', p: 0 } }, msg)))))) : null;
+            } }, errorMessages.map((msg, index) => (React.createElement(ListItem, { key: index, sx: { display: 'list-item', p: 0 } },
+            React.createElement(Typography, { sx: {
+                    color: '#721c24',
+                } }, msg)))))));
 }
-export default ValidationErrorDisplay;
+export default ValidationErrors;

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

@@ -40,7 +40,6 @@ export type ObjectPropertyInputProps = {
     id: string;
     fieldDefinition: InputParameter | Property;
     mode: 'default' | 'existingOnly' | 'newOnly';
-    nestedFieldsView?: boolean;
     readOnly?: boolean;
     error?: boolean;
     displayOption?: 'dropdown' | 'dialogBox';
@@ -89,13 +88,8 @@ export type ExpandedSections = Omit<Sections, 'sections'> & {
     sections: ExpandedSection[];
     id: string;
 };
-export type EntryRendererProps = BaseProps & {
+export type EntryRendererProps = {
     entry: FormEntry;
-    isDocument?: boolean;
-    associatedObject?: {
-        instanceId?: string;
-        propertyId?: string;
-    };
 };
 export type SectionsProps = {
     entry: ExpandedSections;

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

@@ -1,4 +1,7 @@
+export type { BodyProps } from './components/Body';
+export type { FooterProps } from './components/Footer';
 export { FormContext } from './components/FormContext';
+export type { HeaderProps } from './components/Header';
 export { RecursiveEntryRenderer } from './components/RecursiveEntryRenderer';
 export { default as FormRenderer } from './FormRenderer';
 export { default as FormRendererContainer } from './FormRendererContainer';

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

@@ -1,7 +1,7 @@
 import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { isEqual, set } from 'lodash';
+import { isEmpty, isEqual, set } from 'lodash';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
@@ -46,7 +46,7 @@ describe('Form component', () => {
             if (sanitizedVersion === 'true') {
                 return HttpResponse.json(accessibility508Object);
             }
-        }), http.get('/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/api/data/objects/license/instances', () => {
+        }), http.get('/api/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/api/data/objects/license/instances', () => {
             return HttpResponse.json([rnLicense, npLicense]);
         }), http.get('/api/data/objects/specialtyType/instances', (req) => {
             const filter = new URL(req.request.url).searchParams.get('filter');
@@ -55,7 +55,7 @@ describe('Form component', () => {
                 // The two objects in the array of conditions in the "where" filter represent the potential filters that can be applied when retrieving "specialty" instances.
                 // The first object is for the the validation criteria, but it is empty if the "license" field, which is referenced in the validation criteria, hasn't been filled out yet.
                 // The second object is for the search criteria which the user enters in the "specialty" field, but it is empty if no search text has been entered.
-                if (isEqual(whereFilter, { and: [{}, {}] }))
+                if (isEqual(whereFilter, { and: [{}, {}] }) || isEmpty(whereFilter))
                     return HttpResponse.json([
                         rnSpecialtyType1,
                         rnSpecialtyType2,
@@ -234,6 +234,8 @@ describe('Form component', () => {
             await user.tab();
             // Open dropdown with Enter
             await user.keyboard('{Enter}');
+            // Wait for options to load
+            await screen.findByText('RN License');
             // Navigate to first option
             await user.keyboard('{ArrowDown}');
             // Select option with Enter
@@ -369,8 +371,7 @@ describe('Form component', () => {
         it('supports navigating to Add New option with arrow keys and opens modal', async () => {
             const user = userEvent.setup();
             render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }),
-                ","));
+                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } })));
             await waitFor(() => {
                 expect(screen.getByLabelText('Name')).toBeInTheDocument();
             });