@evoke-platform/ui-components 1.6.0-testing.8 → 1.6.0

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -186,7 +186,7 @@ const customSelector = (props) => {
                 return opts.find((o) => option === o.name)?.label || option;
             }
             return option.label;
-        }, isOptionEqualToValue: (option, value) => {
+        }, getOptionKey: (option) => option.name, isOptionEqualToValue: (option, value) => {
             if (typeof option === 'string') {
                 return option === value;
             }

package/dist/published/components/custom/Form/FormComponents/ImageComponent/Image.js

@@ -1,6 +1,6 @@
-import { BackupOutlined, ClearRounded } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { ClearRounded, UploadCloud } from '../../../../../icons';
 import { CardMedia, IconButton, Typography } from '../../../../core';
 import { Box, Grid } from '../../../../layout';
 export function blobToDataUrl(blob) {
@@ -84,7 +84,7 @@ export const Image = (props) => {
         React.createElement("input", { ...getInputProps({ id }), multiple: false }),
         React.createElement(Grid, { container: true, sx: { width: '100%' } },
             React.createElement(Grid, { item: true, xs: 12, sx: { display: 'flex', justifyContent: 'center', paddingBottom: '5px' } },
-                React.createElement(BackupOutlined, { sx: { color: '#919EAB', height: '1.5em', width: '1.5em' } })),
+                React.createElement(UploadCloud, { sx: { color: '#919EAB', width: '50px', height: '30px' } })),
             React.createElement(Grid, { item: true, xs: 12 },
                 React.createElement(Typography, { variant: "body2", sx: { color: '#212B36', textAlign: 'center' } },
                     "Drag and drop or",

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -45,7 +45,7 @@ const AddressFieldComponent = (props) => {
         setAnchorEl(null);
     };
     return (React.createElement(Box, null,
-        !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder, InputProps: {
+        !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: readOnly ? undefined : placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
             }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.js

@@ -56,12 +56,12 @@ const BooleanSelect = (props) => {
         return readOnlyComponent();
     }
     return displayOption === 'dropdown' ? (React.createElement(Autocomplete, { renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, placeholder: placeholder, size: size ?? 'medium' })), value: booleanOptions.find((opt) => opt.value === value) ?? '', onChange: (e, selectedValue) => handleChange(selectedValue.value), isOptionEqualToValue: (option, val) => option?.value === val?.value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}), sortBy: "NONE", required: strictlyTrue })) : (React.createElement(FormControl, { required: strictlyTrue, error: error, fullWidth: true },
-        React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
+        React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), sx: { marginLeft: '-8px' }, control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
-                } })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
+                }, ...(additionalProps ?? {}) })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
                     padding: '4px 9px 9px 9px',
-                } })) }),
+                }, ...(additionalProps ?? {}) })) }),
         error && errorMessage?.length && React.createElement(FormHelperText, { sx: { marginX: 0 } }, errorMessage),
         descriptionComponent()));
 };

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.js

@@ -1,4 +1,5 @@
 import { DateTimeFormatter } from '@js-joda/core';
+import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate, LocalDate, nativeJs } from '../../../../util';
 import { DatePicker, LocalizationProvider, TextField } from '../../../core';
@@ -36,6 +37,11 @@ const DatePickerSelect = (props) => {
         onChange && onChange(property.id, date, property);
     };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: asMonthDayYearFormat(value) } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', ...(additionalProps ?? {}) })) })));
+        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })) })));
 };
 export default DatePickerSelect;

package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.js

@@ -1,4 +1,5 @@
 import { LocalDate, LocalDateTime, LocalTime, nativeJs } from '@js-joda/core';
+import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate } from '../../../../util';
 import { DateTimePicker, LocalizationProvider, TextField } from '../../../core';
@@ -43,6 +44,11 @@ const DateTimePickerSelect = (props) => {
         props.onChange && props.onChange(property.id, date, property);
     };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: formatDateTime(value) } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DateTimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', ...(additionalProps ?? {}) })) })));
+        React.createElement(DateTimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })) })));
 };
 export default DateTimePickerSelect;

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -36,9 +36,12 @@ const InputFieldComponent = (props) => {
         setInputValue(selectValue);
     };
     const InputProps = property.type === 'number'
-        ? { inputComponent: NumericFormat, inputProps: { min, max, readOnly } }
+        ? {
+            inputComponent: NumericFormat,
+            inputProps: { min, max, readOnly, ...(additionalProps?.inputProps ?? {}) },
+        }
         : property.type === 'integer'
-            ? { inputProps: { min, max } }
+            ? { inputProps: { min, max, ...(additionalProps?.inputProps ?? {}) } }
             : null;
     return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, 
         // note: this is different between widgets and builder
@@ -62,7 +65,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }),
-        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
+        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: readOnly ? undefined : placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: 'none',

package/dist/published/components/custom/FormField/TimePickerSelect/TimePickerSelect.js

@@ -1,9 +1,11 @@
 import { LocalDateTime } from '@js-joda/core';
 import { TimePicker } from '@mui/x-date-pickers';
-import { isUndefined, padStart } from 'lodash';
+import { isUndefined, omit, padStart } from 'lodash';
+import { DateTime } from 'luxon';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate } from '../../../../util';
 import { LocalizationProvider, TextField } from '../../../core';
+import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const TimePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder, additionalProps, } = props;
     const values = defaultValue ? defaultValue.split(':') : undefined;
@@ -39,7 +41,15 @@ const TimePickerSelect = (props) => {
             props.onChange && props.onChange(property.id, date, property);
         }
     };
-    return (React.createElement(LocalizationProvider, null,
-        React.createElement(TimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, readOnly: readOnly, ...(additionalProps ?? {}) })), readOnly: readOnly })));
+    return readOnly ? (React.createElement(InputFieldComponent, { ...{
+            ...props,
+            defaultValue: value instanceof LocalDateTime ? DateTime.fromISO(value.toString()).toFormat('hh:mm a') : '',
+        } })) : (React.createElement(LocalizationProvider, null,
+        React.createElement(TimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })), readOnly: readOnly })));
 };
 export default TimePickerSelect;

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

@@ -0,0 +1,19 @@
+import { EvokeForm, ObjectInstance } from '@evoke-platform/context';
+import React, { ComponentType } from 'react';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+import { BaseProps, Document, SimpleEditorProps } from './components/types';
+export type FormProps = BaseProps & {
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    hideButtons?: boolean;
+    value?: FieldValues;
+    onSubmit?: (data: FieldValues) => void;
+    fieldHeight?: 'small' | 'medium';
+    stickyFooter?: boolean;
+    onCancel?: () => void;
+    form: EvokeForm;
+    instance?: ObjectInstance | Document;
+    onChange: (id: string, value: unknown) => void;
+    onValidationChange?: (errors: FieldErrors) => void;
+};
+declare function FormRenderer(props: FormProps): React.JSX.Element;
+export default FormRenderer;

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

@@ -0,0 +1,183 @@
+import { useObject } from '@evoke-platform/context';
+import { isEqual } from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useResponsive } from '../../../theme';
+import { Button, Skeleton, Typography } from '../../core';
+import { Box } from '../../layout';
+import ActionButtons from './components/ActionButtons';
+import { FormContext } from './components/FormContext';
+import { RecursiveEntryRenderer } from './components/RecursiveEntryRenderer';
+import { convertDocToParameters, convertPropertiesToParams } 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, } = 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 { isSm, isXs, smallerThan } = useResponsive();
+    const isSmallerThanMd = smallerThan('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 updateFetchedOptions = (newData) => {
+        setFetchedOptions((prev) => ({
+            ...prev,
+            ...newData,
+        }));
+    };
+    function handleExpandAll() {
+        setExpandAll(true);
+    }
+    function handleCollapseAll() {
+        setExpandAll(false);
+    }
+    useEffect(() => {
+        (async () => {
+            try {
+                const object = await objectStore.get({ sanitized: true });
+                setObject(object);
+                if (actionId) {
+                    const action = object?.actions?.find((a) => a.id === actionId);
+                    setAction(action);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch object or action:', error);
+            }
+        })();
+    }, [objectStore, actionId]);
+    useEffect(() => {
+        const currentValues = getValues();
+        if (value) {
+            for (const key of Object.keys(currentValues)) {
+                if (!isEqual(currentValues[key], value[key])) {
+                    setValue(key, value[key], { shouldValidate: true });
+                }
+            }
+            if (triggerFieldReset === true) {
+                setTriggerFieldReset(false);
+            }
+        }
+    }, [value]);
+    useEffect(() => {
+        if (onValidationChange) {
+            onValidationChange(errors);
+        }
+    }, [errors, onValidationChange]);
+    const handleReset = () => {
+        if (onCancel) {
+            onCancel();
+        }
+        else {
+            reset(instance); // clears react-hook-form state back to default values
+        }
+        setTriggerFieldReset(true);
+    };
+    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]);
+    useEffect(() => {
+        handleValidation(entries, register, getValues(), action?.parameters, instance);
+    }, []);
+    if (entries && parameters && (!actionId || action)) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Box, { sx: {
+                    paddingX: isSmallerThanMd ? 2 : 3,
+                    paddingTop: '0px',
+                    borderBottom: '2px solid #F4F6F8',
+                } },
+                React.createElement(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        paddingY: isSm || isXs ? 2 : 3,
+                    } },
+                    React.createElement(Typography, { sx: {
+                            fontSize: '20px',
+                            lineHeight: '30px',
+                            fontWeight: 700,
+                            flexGrow: '1',
+                        } }, title),
+                    isSmallerThanMd && hasSections && (React.createElement(Box, { sx: {
+                            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, { errors: errors, show: !!(isSubmitted && errors), formId: form.id, title: title })),
+            React.createElement(FormContext.Provider, { value: {
+                    fetchedOptions,
+                    setFetchedOptions: updateFetchedOptions,
+                    getValues,
+                    stickyFooter,
+                    object,
+                } },
+                React.createElement(Box, { sx: {
+                        padding: isModal ? '0px' : isSm || isXs ? 2 : 3,
+                        paddingBottom: '0px',
+                        paddingTop: !hasSections ? undefined : '0px',
+                    } },
+                    entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { fieldHeight: fieldHeight, key: index, entry: entry, handleChange: onChange, errors: errors, showSubmitError: !!(isSubmitted && errors), instance: instance, richTextEditor: richTextEditor, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, triggerFieldReset: triggerFieldReset, parameters: parameters }))),
+                    !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
+                            ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
+                            bottom: isModal ? -5 : isSmallerThanMd ? 0 : 24,
+                            zIndex: 1000,
+                            borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
+                            backgroundColor: '#fff',
+                            paddingY: isSmallerThanMd ? '16px' : '20px',
+                            paddingX: isSmallerThanMd ? '16px' : '20px',
+                            display: 'flex',
+                            justifyContent: isXs ? 'center' : 'flex-end',
+                            alignItems: 'center',
+                            marginX: isSmallerThanMd ? -2 : -3,
+                            marginBottom: '1px',
+                            borderRadius: '0px 0px 6px 6px',
+                        } },
+                        React.createElement(ActionButtons, { onSubmit: onSubmit, handleSubmit: handleSubmit, isModal: isModal, actionType: action?.type, submitButtonLabel: display?.submitLabel, onReset: handleReset, errors: errors, unregister: unregister, entries: entries, setValue: setValue, formId: form.id, instance: instance })))))));
+    }
+    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)));
+    }
+}
+export default FormRenderer;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SectionsProps } from './types';
+declare function AccordionSections(props: SectionsProps): React.JSX.Element;
+export default AccordionSections;

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

@@ -0,0 +1,131 @@
+import { ExpandMoreOutlined } from '@mui/icons-material';
+import { nanoid } from 'nanoid';
+import React, { useEffect } from 'react';
+import { useResponsive } from '../../../../theme';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../../core';
+import { Box } from '../../../layout';
+import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
+import { getErrorCountForSection } from './utils';
+function AccordionSections(props) {
+    const { entry, handleChange, fieldHeight, richTextEditor, instance, expandedSections, setExpandedSections, expandAll, setExpandAll, errors, parameters, triggerFieldReset, showSubmitError, } = props;
+    const { isMd, isLg, isXl } = useResponsive();
+    const lastSection = entry.sections.length - 1;
+    const sectionsWithIds = React.useMemo(() => assignIds(entry.sections), [entry]);
+    function collectNestedSections(entries = []) {
+        const nestedSections = [];
+        entries.forEach((entry) => {
+            if (entry.type === 'sections') {
+                nestedSections.push(entry);
+            }
+            else if (entry.type === 'columns') {
+                const columnEntry = entry;
+                columnEntry.columns.forEach((column) => {
+                    const columnSections = collectNestedSections(column.entries);
+                    nestedSections.push(...columnSections);
+                });
+            }
+        });
+        return nestedSections;
+    }
+    // need to add ids to section so expanded sections can differentiate between sections with the same label
+    function assignIds(sections) {
+        const result = [];
+        sections.forEach((section) => {
+            const newSection = {
+                ...section,
+                id: nanoid(),
+            };
+            result.push(newSection);
+            if (section.entries) {
+                const nestedSections = collectNestedSections(section.entries);
+                nestedSections.forEach((nestedSection) => {
+                    nestedSection.sections = assignIds(nestedSection.sections);
+                });
+            }
+        });
+        return result;
+    }
+    function getExpandedSections(sections, expandAll) {
+        const expandedSections = [];
+        const processSections = (sectionList) => {
+            sectionList.forEach((section, index) => {
+                expandedSections.push({
+                    label: section.label,
+                    expanded: expandAll ?? (index === 0 || isMd || isLg || isXl),
+                    id: section?.id,
+                });
+                if (section.entries) {
+                    const nestedSections = collectNestedSections(section.entries).flatMap((s) => s.sections);
+                    processSections(nestedSections);
+                }
+            });
+        };
+        processSections(sections);
+        return expandedSections;
+    }
+    useEffect(() => {
+        if (expandAll !== null) {
+            setExpandedSections(getExpandedSections(sectionsWithIds, expandAll));
+        }
+    }, [expandAll, sectionsWithIds]);
+    const handleAccordionChange = (id) => {
+        const updatedSections = expandedSections.map((section) => section.id === id ? { ...section, expanded: !section.expanded } : section);
+        setExpandedSections(updatedSections);
+        setExpandAll(null);
+    };
+    return (React.createElement(Box, null, sectionsWithIds.map((section, sectionIndex) => {
+        const errorCount = getErrorCountForSection(section, errors);
+        return (React.createElement(Accordion, { key: section.id, expanded: expandedSections.find((expandedSection) => expandedSection.id === section.id)?.expanded ??
+                !!expandAll, onChange: () => handleAccordionChange(section.id), defaultExpanded: sectionIndex === 0, sx: {
+                border: '1px solid #dbe0e4',
+                boxShadow: 'none',
+                marginBottom: '16px',
+                borderRadius: '6px',
+                '&:before': {
+                    display: 'none',
+                },
+            } },
+            React.createElement(AccordionSummary, { sx: {
+                    '&.Mui-expanded': {
+                        borderBottom: '1px solid #dbe0e4',
+                        minHeight: '44px',
+                        borderBottomLeftRadius: '0px',
+                        borderBottomRightRadius: '0px',
+                    },
+                    minHeight: '44px',
+                    maxHeight: '44px',
+                    backgroundColor: '#F4F6F8',
+                    borderRadius: '5px',
+                    // MUI accordion summaries have different border radius for the first and last item
+                    borderTopLeftRadius: sectionIndex === 0 ? '3px' : undefined,
+                    borderTopRightRadius: sectionIndex === 0 ? '3px' : undefined,
+                    borderBottomRightRadius: sectionIndex === lastSection ? '3px' : undefined,
+                    borderBottomLeftRadius: sectionIndex === lastSection ? '3px' : undefined,
+                }, expandIcon: React.createElement(ExpandMoreOutlined, { fontSize: "medium" }) },
+                React.createElement(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: '100%',
+                        justifyContent: 'space-between',
+                    } },
+                    React.createElement(Typography, { sx: {
+                            fontWeight: '600',
+                        } }, section.label),
+                    errorCount > 0 && showSubmitError && (React.createElement(Box, { sx: {
+                            ml: 1,
+                            bgcolor: '#FF4842',
+                            color: 'white',
+                            borderRadius: '50%',
+                            minWidth: '20px',
+                            minHeight: '20px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            fontSize: '12px',
+                            margin: '0px',
+                            marginRight: '16px',
+                        } }, errorCount)))),
+            React.createElement(AccordionDetails, null, section.entries?.map((sectionEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry, handleChange: handleChange, errors: errors, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, parameters: parameters, triggerFieldReset: triggerFieldReset, showSubmitError: showSubmitError }))))));
+    })));
+}
+export default AccordionSections;

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

@@ -0,0 +1,19 @@
+import { ActionType, FormEntry } from '@evoke-platform/context';
+import React from 'react';
+import { FieldErrors, FieldValues, UseFormReturn, UseFormSetValue, UseFormUnregister } from 'react-hook-form';
+type ActionButtonProps = {
+    onSubmit: (data: FieldValues) => void;
+    handleSubmit: UseFormReturn['handleSubmit'];
+    isModal: boolean;
+    submitButtonLabel?: string;
+    actionType?: ActionType;
+    onReset: () => void;
+    errors?: FieldErrors;
+    unregister: UseFormUnregister<FieldValues>;
+    entries: FormEntry[];
+    setValue: UseFormSetValue<FieldValues>;
+    formId?: string;
+    instance?: FieldValues;
+};
+declare function ActionButtons(props: ActionButtonProps): React.JSX.Element;
+export default ActionButtons;

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

@@ -0,0 +1,106 @@
+import { isEmpty, omit } from 'lodash';
+import React, { useContext, useState } from 'react';
+import { useResponsive } from '../../../../theme';
+import { Button, LoadingButton } from '../../../core';
+import { Box } from '../../../layout';
+import { FormContext } from './FormContext';
+import { entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, scrollIntoViewWithOffset, } from './utils';
+function ActionButtons(props) {
+    const { onSubmit, submitButtonLabel, actionType, handleSubmit, onReset, unregister, errors, isModal, entries, setValue, formId, instance, } = props;
+    const { isXs } = useResponsive();
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const { getValues } = useContext(FormContext);
+    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 'address' to clear hidden field errors, then restore existing values since unregistering address.line1 etc is not working
+            let addressValues = getValues('address');
+            addressValues = omit(addressValues, fieldId.split('.')[1]);
+            unregister('address');
+            setValue('address', addressValues);
+        }
+        else {
+            unregister(fieldId);
+        }
+    };
+    async function showErrorsOrSubmit() {
+        setIsSubmitLoading(true);
+        unregisterHiddenFields(entries ?? []);
+        try {
+            await handleSubmit((data) => onSubmit(actionType === 'delete' ? {} : data))();
+        }
+        finally {
+            setIsSubmitLoading(false);
+        }
+        if (!isEmpty(errors)) {
+            setTimeout(() => {
+                const errorElement = document.getElementById(`validation-error-display-${formId}`);
+                let modal = errorElement?.closest('.MuiPaper-root');
+                const hasCloseIcon = modal?.querySelector('svg[data-testid="CloseIcon"]');
+                modal = hasCloseIcon ? document.querySelector('.MuiDialogContent-root') : modal;
+                if (errorElement) {
+                    scrollIntoViewWithOffset(errorElement, 170, modal);
+                }
+            }, 0);
+        }
+    }
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flexWrap: 'wrap-reverse',
+            width: '100%',
+        } },
+        React.createElement(Button, { key: "cancel", variant: "outlined", sx: {
+                margin: '5px',
+                marginX: isXs ? '0px' : undefined,
+                color: 'black',
+                border: '1px solid rgb(206, 212, 218)',
+                width: isXs ? '100%' : 'auto',
+                '&:hover': {
+                    backgroundColor: '#f2f4f7',
+                    border: '1px solid rgb(206, 212, 218)',
+                },
+            }, onClick: () => onReset() }, isModal ? 'Cancel' : 'Discard Changes'),
+        React.createElement(LoadingButton, { key: "submit", variant: "contained", sx: {
+                lineHeight: '2.75',
+                margin: '5px 0 5px 5px',
+                marginX: isXs ? '0px' : undefined,
+                padding: '0 23px',
+                backgroundColor: actionType === 'delete' ? '#A12723' : 'primary',
+                borderRadius: '8px',
+                boxShadow: 'none',
+                whiteSpace: 'nowrap',
+                width: isXs ? '100%' : 'auto',
+                '& .MuiCircularProgress-root': {
+                    color: 'white',
+                },
+                '&:hover': {
+                    backgroundColor: actionType === 'delete' ? ' #8C2421' : '#014E7B',
+                },
+            }, onClick: () => {
+                showErrorsOrSubmit();
+            }, loading: isSubmitLoading }, submitButtonLabel || 'Submit')));
+}
+export default ActionButtons;