@evoke-platform/ui-components 1.6.0-dev.23 → 1.6.0-dev.24

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/FieldWrapper.d.ts

@@ -7,7 +7,7 @@ type FieldWrapperProps = {
     tooltip?: string;
     prefix?: string;
     suffix?: string;
-    value?: string;
+    value?: unknown;
     errorMessage?: string;
     showCharCount?: boolean;
     viewOnly: boolean;

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

@@ -49,7 +49,7 @@ const PrefixSuffix = (props) => {
  */
 const FieldWrapper = (props) => {
     const { inputId, label, description, tooltip, prefix, suffix, value, maxLength, errorMessage, showCharCount, inputType, viewOnly, children, fieldHeight, required, } = props;
-    const charCount = value ? value.length : 0;
+    const charCount = typeof value === 'string' ? value.length : 0;
     const remainingChars = maxLength ? maxLength - charCount : undefined;
     return (React.createElement(Box, null,
         React.createElement(Box, { sx: { padding: '10px 0' } },

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.d.ts

@@ -1,8 +1,8 @@
+import { UserAccount } from '@evoke-platform/context';
 import React from 'react';
-import { AutocompleteOption } from '../../../../core';
 export type UserPropertyProps = {
     id: string;
-    handleChangeUserProperty: (id: string, user: AutocompleteOption) => void;
+    handleChange: (id: string, user: UserAccount | undefined) => void;
     error?: boolean;
     value?: {
         id: string;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.js

@@ -5,7 +5,7 @@ import { useFormContext } from '../../../../../theme/hooks';
 import { Autocomplete, Paper, TextField, Typography } from '../../../../core';
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 const UserProperty = (props) => {
-    const { id, handleChangeUserProperty, error, value, fieldHeight, readOnly, hasDescription } = props;
+    const { id, handleChange, error, value, fieldHeight, readOnly, hasDescription } = props;
     const { fetchedOptions, setFetchedOptions } = useFormContext();
     const [loadingOptions, setLoadingOptions] = useState(false);
     const apiServices = useApiServices();
@@ -40,6 +40,10 @@ const UserProperty = (props) => {
             });
         }
     }, [id]);
+    function handleChangeUserProperty(id, value) {
+        const updatedValue = typeof value.value === 'string' ? { name: value.label, id: value.value } : undefined;
+        handleChange(id, updatedValue);
+    }
     return (options && (React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue || readOnly ? '' : React.createElement(ExpandMore, null), PaperComponent: ({ children }) => {
             return (React.createElement(Paper, { sx: {
                     borderRadius: '12px',

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

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

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

@@ -0,0 +1,104 @@
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+import { TabContext, TabPanel } from '@mui/lab';
+import React, { useRef, useState } from 'react';
+import { Tab, Tabs, Typography } from '../../../core';
+import { Box } from '../../../layout';
+import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
+import TabNav from './TabNav';
+import { getErrorCountForSection, scrollIntoViewWithOffset } from './utils';
+function FormSections(props) {
+    const { entry, errors, handleChange, showSubmitError, fieldHeight, richTextEditor, instance, expandedSections, setExpandedSections, expandAll, setExpandAll, parameters, triggerFieldReset, } = props;
+    const tabPanelsRef = useRef(null);
+    const [tabValue, setTabValue] = useState(0);
+    const handleTabChange = (type, newValue) => {
+        setTabValue(Number(newValue));
+        if (tabPanelsRef.current && type === 'buttonNav') {
+            scrollIntoViewWithOffset(tabPanelsRef.current, 170);
+        }
+    };
+    const prevTabLabel = tabValue > 0 ? entry.sections[tabValue - 1].label : '';
+    const nextTabLabel = tabValue < entry.sections.length - 1 ? entry.sections[tabValue + 1].label : '';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TabContext, { value: tabValue?.toString() || '0' },
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    minHeight: '150px',
+                } },
+                React.createElement(Tabs, { value: tabValue?.toString(), onChange: (e, value) => handleTabChange('tabNav', value), orientation: "vertical", sx: {
+                        overflow: 'visible',
+                        paddingTop: '10px',
+                        flex: 1,
+                        borderRight: '1px solid #e9ecef',
+                        minWidth: '190px',
+                        maxWidth: '264px',
+                    }, TabIndicatorProps: {
+                        sx: {
+                            display: 'none',
+                        },
+                    } }, entry.sections.map((section, sectionIndex) => {
+                    const errorCount = getErrorCountForSection(section, errors);
+                    const isSelected = tabValue?.toString() === sectionIndex.toString();
+                    return (React.createElement(Tab, { disableRipple: true, key: section.label + sectionIndex, label: React.createElement(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                width: '100%',
+                                minWidth: '168px',
+                                justifyContent: 'space-between',
+                            } },
+                            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+                                React.createElement(Box, { sx: { width: '28px', display: 'flex' } }, isSelected ? (React.createElement(RadioButtonCheckedIcon, { color: errorCount > 0 && showSubmitError ? 'error' : 'primary', sx: {
+                                        fontSize: 'medium',
+                                    } })) : (React.createElement(Box, { sx: {
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        backgroundColor: '#dfe3e8',
+                                        marginLeft: '4.25px',
+                                    } }))),
+                                React.createElement(Typography, { sx: {
+                                        fontSize: '16px',
+                                        fontWeight: isSelected ? 'bold' : 'normal',
+                                    } }, 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))), value: sectionIndex.toString(), tabIndex: -1, sx: {
+                            textAlign: 'left',
+                            display: 'flex',
+                            textTransform: 'none',
+                            color: '#212B36',
+                            '&.Mui-selected': {
+                                fontWeight: 'bold',
+                                color: '#212B36',
+                            },
+                            padding: '14px 10px 14px 4px',
+                        } }));
+                })),
+                entry.sections.map((section, sectionIndex) => (React.createElement(TabPanel, { key: section.label + sectionIndex, value: sectionIndex.toString(), ref: tabPanelsRef, sx: {
+                        padding: '10px 20px 0px 40px',
+                        width: '100%',
+                        flex: 4,
+                    } },
+                    React.createElement(Box, { sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: section.entries && section?.entries.length > 0 ? 'space-between' : 'flex-end',
+                            height: '100%',
+                        } },
+                        React.createElement(Box, null, section.entries &&
+                            section.entries.map((sectionEntry, index) => {
+                                return (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry, handleChange: handleChange, errors: errors, showSubmitError: showSubmitError, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, parameters: parameters, triggerFieldReset: triggerFieldReset }));
+                            })),
+                        React.createElement(TabNav, { prevTabLabel: prevTabLabel, nextTabLabel: nextTabLabel, numberOfTabs: entry.sections.length, tabValue: tabValue, handleTabChange: handleTabChange })))))))));
+}
+export default FormSections;

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

@@ -0,0 +1,2 @@
+import { EntryRendererProps } from './types';
+export declare function RecursiveEntryRenderer(props: EntryRendererProps): any;

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

@@ -0,0 +1,209 @@
+import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
+import { WarningRounded } from '@mui/icons-material';
+import { cloneDeep } from 'lodash';
+import React, { useEffect, useMemo } from 'react';
+import { useResponsive } from '../../../../theme';
+import { useFormContext } from '../../../../theme/hooks';
+import { TextField, Typography } from '../../../core';
+import { Box } from '../../../layout';
+import FormField from '../../FormField';
+import AccordionSections from './AccordionSections';
+import FieldWrapper from './FieldWrapper';
+import AddressFields from './FormFieldTypes/AddressFields';
+import DropdownRepeatableField from './FormFieldTypes/CollectionFiles/DropdownRepeatableField';
+import RepeatableField from './FormFieldTypes/CollectionFiles/RepeatableField';
+import Criteria from './FormFieldTypes/Criteria';
+import { Document } from './FormFieldTypes/DocumentFiles/Document';
+import { Image } from './FormFieldTypes/Image';
+import ObjectPropertyInput from './FormFieldTypes/relatedObjectFiles/ObjectPropertyInput';
+import UserProperty from './FormFieldTypes/UserProperty';
+import FormSections from './FormSections';
+import { entryIsVisible, fetchCollectionData, getEntryId, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
+function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors, validation) {
+    return {
+        inputId: entryId,
+        inputType: fieldDefinition.type,
+        label: display?.label || fieldDefinition.name || 'default',
+        description: display?.description,
+        tooltip: display?.tooltip,
+        value: fieldValue,
+        maxLength: validation && 'maxLength' in validation ? validation.maxLength : 0,
+        required: entry.display?.required || false,
+        showCharCount: display?.charCount,
+        prefix: display?.prefix,
+        suffix: display?.suffix,
+        viewOnly: entry.type === 'readonlyField',
+        fieldHeight,
+        errorMessage: errors?.[entryId]?.message,
+    };
+}
+export function RecursiveEntryRenderer(props) {
+    const { handleChange, errors, showSubmitError, fieldHeight, instance, richTextEditor, expandedSections, setExpandedSections, expandAll, setExpandAll, parameters, entry, triggerFieldReset, } = props;
+    const { fetchedOptions, setFetchedOptions, object, getValues } = useFormContext();
+    // If the entry is hidden, clear its value and any nested values, and skip rendering
+    if (!entryIsVisible(entry, getValues(), instance)) {
+        return null;
+    }
+    const apiServices = useApiServices();
+    const userAccount = useAuthenticationContext()?.account;
+    const { smallerThan, isXs } = useResponsive();
+    const entryId = getEntryId(entry) || 'defaultId';
+    const display = 'display' in entry ? entry.display : undefined;
+    const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues(entryId);
+    const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
+    const middleObject = fetchedOptions[`${entryId}MiddleObject`];
+    const fieldDefinition = useMemo(() => {
+        let def;
+        if (entry.type === 'input') {
+            def = parameters?.find((param) => param.id === entry.parameterId);
+        }
+        else if (entry.type === 'readonlyField') {
+            def = isAddressProperty(entry.propertyId)
+                ? object?.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
+                : object?.properties?.find((prop) => prop.id === entry.propertyId);
+        }
+        else if (entry.type === 'inputField') {
+            def = entry.input;
+        }
+        else {
+            return undefined;
+        }
+        if (def?.enum && def.type === 'string') {
+            const cloned = cloneDeep(def);
+            // single select must be made to be type choices for label and error handling
+            cloned.type = 'choices';
+            return cloned;
+        }
+        return def;
+    }, [entry, parameters, object]);
+    const validation = fieldDefinition?.validation || {};
+    useEffect(() => {
+        if (fieldDefinition?.type === 'collection' && fieldDefinition?.manyToManyPropertyId && instance) {
+            fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instance.id, fetchedOptions, initialMiddleObjectInstances);
+        }
+    }, [fieldDefinition, instance]);
+    if (entry.type === 'content') {
+        return (React.createElement(Box, { dangerouslySetInnerHTML: { __html: entry.html }, sx: {
+                fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+            } }));
+    }
+    else if ((entry.type === 'input' || entry.type === 'readonlyField' || entry.type === 'inputField') &&
+        fieldDefinition) {
+        if (isAddressProperty(entryId)) {
+            return (React.createElement(AddressFields, { entry: entry, errors: errors, handleChange: handleChange, fieldHeight: fieldHeight, parameters: parameters, instance: instance, entryId: entryId, fieldDefinition: fieldDefinition }));
+        }
+        else if (fieldDefinition.type === 'image') {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
+                React.createElement(Image, { id: entryId, handleChange: handleChange, canUpdateProperty: entry.type !== 'readonlyField', error: !!errors[entryId], value: fieldValue, hasDescription: !!display?.description })));
+        }
+        else if (fieldDefinition.type === 'object') {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
+                React.createElement(ObjectPropertyInput, { instance: instance, fieldDefinition: fieldDefinition, id: entryId, handleChangeObjectProperty: handleChange, mode: display?.mode || 'default', error: !!errors[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, parameters: parameters, readOnly: entry.type === 'readonlyField', filter: validation?.criteria
+                        ? updateCriteriaInputs(validation.criteria, getValues(), userAccount)
+                        : undefined, sortBy: typeof display?.defaultValue === 'object' && 'sortBy' in display.defaultValue
+                        ? display?.defaultValue.sortBy
+                        : undefined, orderBy: typeof display?.defaultValue === 'object' && 'orderBy' in display.defaultValue
+                        ? display?.defaultValue.orderBy
+                        : undefined, fieldHeight: fieldHeight, richTextEditor: richTextEditor, defaultValueCriteria: typeof display?.defaultValue === 'object' && 'criteria' in display.defaultValue
+                        ? display?.defaultValue?.criteria
+                        : undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description })));
+        }
+        else if (fieldDefinition.type === 'user') {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
+                React.createElement(UserProperty, { id: entryId, value: fieldValue, handleChange: handleChange, error: !!errors[entryId], readOnly: entry.type === 'readonlyField', fieldHeight: fieldHeight, hasDescription: !!display?.description })));
+        }
+        else if (fieldDefinition.type === 'collection') {
+            return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
+                React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] || initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, instance: instance, readOnly: entry.type === 'readonlyField', fieldHeight: fieldHeight, criteria: validation?.criteria, hasDescription: !!display?.description })))) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
+                React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, instance: instance })));
+        }
+        else if (fieldDefinition.type === 'richText') {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
+                id: entryId,
+                value: fieldValue,
+                handleUpdate: (value) => handleChange(entryId, value),
+                format: 'rtf',
+                disabled: entry.type === 'readonlyField',
+                rows: display?.rowCount,
+                hasError: !!errors[entryId],
+            })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, error: !!errors[entryId], errorMessage: errors[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, size: fieldHeight }))));
+        }
+        else if (fieldDefinition.type === 'document') {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
+                React.createElement(Document, { id: entryId, handleChange: handleChange, error: !!errors[entryId], value: fieldValue, instance: instance, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description })));
+        }
+        else if (fieldDefinition.type === 'criteria') {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
+                React.createElement(Criteria, { key: triggerFieldReset ? `${entryId}-reset-true` : `${entryId}-reset-false`, fieldDefinition: fieldDefinition, value: fieldValue, handleChange: handleChange, canUpdateProperty: !(entry.type === 'readonlyField'), error: !!errors[entryId] })));
+        }
+        else {
+            // Add `aria-describedby` to ensure screen readers read the description
+            // when the input is tabbed into.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const additionalProps = {};
+            if (fieldDefinition.enum && display?.description) {
+                additionalProps.renderInput = (params) => (React.createElement(TextField, { ...params, inputProps: {
+                        ...params.inputProps,
+                        'aria-describedby': `${entryId}-description`,
+                    } }));
+            }
+            else if (display?.description) {
+                additionalProps.inputProps = {
+                    'aria-describedby': `${entryId}-description`,
+                };
+            }
+            return (React.createElement(FieldWrapper
+            /*
+             * Key remounts the field if a value is changed.
+             * Needed to clear certain fields on discard changes.
+             */
+            , { 
+                /*
+                 * Key remounts the field if a value is changed.
+                 * Needed to clear certain fields on discard changes.
+                 */
+                key: (fieldDefinition.type === 'choices' ||
+                    fieldDefinition?.type === 'time' ||
+                    fieldDefinition?.type === 'boolean') &&
+                    triggerFieldReset
+                    ? `${entryId}-reset-true`
+                    : `${entryId}-reset-false`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors), errorMessage: undefined },
+                React.createElement(FormField, { id: entryId, 
+                    // TODO: Ideally the FormField prop should be called parameter but can't change the name for backwards compatibility reasons
+                    property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors[entryId], errorMessage: errors[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, getOptionLabel: (option) => {
+                        if (typeof option === 'string') {
+                            return (entry?.enumWithLabels?.find((e) => e.value === option)
+                                ?.label ?? option);
+                        }
+                        else {
+                            return (entry?.enumWithLabels?.find((e) => e.value === option.value)?.label ?? String(option.value));
+                        }
+                    }, size: fieldHeight, sortBy: display?.choicesDisplay?.sortBy && display.choicesDisplay.sortBy, displayOption: fieldDefinition.type === 'boolean'
+                        ? display?.booleanDisplay
+                        : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: entry?.enumWithLabels &&
+                        entry.enumWithLabels, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue })));
+        }
+    }
+    else if (entry.type === 'columns') {
+        return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: '30px', flexDirection: isXs ? 'column' : 'row' } }, entry.columns.map((column, colIndex) => (
+        // calculating the width like this rather than flex={column.width} to prevent collections from being too wide
+        React.createElement(Box, { key: colIndex, sx: { width: isXs ? '100%' : `calc(${(column.width / 12) * 100}% - 15px)` } }, column.entries?.map((columnEntry, entryIndex) => {
+            return (React.createElement(RecursiveEntryRenderer, { key: entryIndex + (columnEntry?.parameterId ?? ''), entry: columnEntry, handleChange: handleChange, errors: errors, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, parameters: parameters, triggerFieldReset: triggerFieldReset }));
+        }))))));
+    }
+    else if (entry.type === 'sections') {
+        return smallerThan('md') ? (React.createElement(AccordionSections, { entry: entry, handleChange: handleChange, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, errors: errors, parameters: parameters, triggerFieldReset: triggerFieldReset })) : (React.createElement(FormSections, { entry: entry, errors: errors, handleChange: handleChange, showSubmitError: showSubmitError, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, parameters: parameters }));
+    }
+    else if (!fieldDefinition) {
+        return (React.createElement(Box, { sx: {
+                display: 'flex',
+                backgroundColor: '#ffc1073b',
+                borderRadius: '8px',
+                padding: '16.5px 14px',
+                marginTop: '6px',
+            } },
+            React.createElement(WarningRounded, { sx: { paddingRight: '8px' }, color: "warning" }),
+            React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "This field was not configured correctly")));
+    }
+    return null;
+}

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

@@ -1,8 +1,8 @@
-import React, { SyntheticEvent } from 'react';
+import React from 'react';
 type TabNavProps = {
     numberOfTabs: number;
     tabValue: number;
-    handleTabChange: (event: SyntheticEvent, newValue: number) => void;
+    handleTabChange: (type: 'tabNav' | 'buttonNav', newValue: number) => void;
     prevTabLabel?: string;
     nextTabLabel?: string;
 };

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

@@ -13,10 +13,10 @@ function TabNav(props) {
             paddingTop: '10px',
             paddingBottom: '20px',
         } },
-        !isFirstTab && (React.createElement(Button, { id: 'navigation-prev', onClick: (event) => handleTabChange(event, tabValue - 1), sx: { color: 'black', backgroundColor: '#dfe3e8', '&:hover': { backgroundColor: '#d0d4d9' } }, "aria-label": `Navigate to previous tab ${prevTabLabel}` },
+        !isFirstTab && (React.createElement(Button, { onClick: () => handleTabChange('buttonNav', tabValue - 1), sx: { color: 'black', backgroundColor: '#dfe3e8', '&:hover': { backgroundColor: '#d0d4d9' } }, "aria-label": `Navigate to previous tab ${prevTabLabel}` },
             React.createElement(ArrowBackIosNewIcon, { sx: { fontSize: 'medium', marginRight: 1 } }),
             prevTabLabel ?? 'Previous tab')),
-        !isLastTab && (React.createElement(Button, { id: 'navigation-next', onClick: (event) => handleTabChange(event, tabValue + 1), sx: { color: 'black', backgroundColor: '#dfe3e8', '&:hover': { backgroundColor: '#d0d4d9' } }, "aria-label": `Navigate to next tab ${nextTabLabel}` },
+        !isLastTab && (React.createElement(Button, { onClick: () => handleTabChange('buttonNav', tabValue + 1), sx: { color: 'black', backgroundColor: '#dfe3e8', '&:hover': { backgroundColor: '#d0d4d9' } }, "aria-label": `Navigate to next tab ${nextTabLabel}` },
             nextTabLabel ?? 'Next tab',
             React.createElement(ArrowForwardIosIcon, { sx: { fontSize: 'medium', marginLeft: 1 } })))));
 }

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

@@ -1,7 +1,7 @@
-import { InputParameter, ObjectInstance, Property, ViewLayoutEntityReference } from '@evoke-platform/context';
+import { FormEntry, InputParameter, ObjectInstance, Property, Section, Sections, ViewLayoutEntityReference } from '@evoke-platform/context';
 import { GridSize } from '@mui/material';
 import { ComponentType } from 'react';
-import { FieldValues } from 'react-hook-form';
+import { FieldErrors, FieldValues } from 'react-hook-form';
 export type FieldAddress = {
     line1?: string;
     line2?: string;
@@ -85,3 +85,38 @@ export type BaseProps = {
     getWidgetState?: () => any;
     saveWidgetState?: (widgetState: unknown) => void;
 };
+export type ExpandedSection = Section & {
+    id: string;
+    expanded?: boolean;
+};
+export type EntryRendererProps = BaseProps & {
+    entry: FormEntry;
+    errors: FieldErrors;
+    handleChange: (name: string, value: unknown) => void;
+    showSubmitError?: boolean;
+    fieldHeight?: 'small' | 'medium';
+    instance?: FieldValues;
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    expandedSections: ExpandedSection[];
+    setExpandedSections: React.Dispatch<React.SetStateAction<ExpandedSection[]>>;
+    expandAll?: boolean | undefined | null;
+    setExpandAll: React.Dispatch<React.SetStateAction<boolean | undefined | null>>;
+    parameters?: InputParameter[];
+    readOnly?: boolean;
+    triggerFieldReset?: boolean;
+};
+export type SectionsProps = {
+    entry: Sections;
+    handleChange: (propertyId: string, value: unknown) => void;
+    fieldHeight?: 'small' | 'medium';
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    instance?: FieldValues;
+    expandAll?: boolean | undefined | null;
+    expandedSections: ExpandedSection[];
+    setExpandedSections: React.Dispatch<React.SetStateAction<ExpandedSection[]>>;
+    setExpandAll: React.Dispatch<React.SetStateAction<boolean | undefined | null>>;
+    errors: FieldErrors;
+    parameters?: InputParameter[];
+    triggerFieldReset?: boolean;
+    showSubmitError?: boolean;
+};

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

@@ -1,6 +1,6 @@
-import { Columns, FormEntry, InputParameter, Obj, ObjectInstance, Property, Sections } from '@evoke-platform/context';
+import { ApiServices, Column, Columns, FormEntry, InputParameter, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
 import { LocalDateTime } from '@js-joda/core';
-import { FieldValues } from 'react-hook-form';
+import { FieldErrors, FieldValues } from 'react-hook-form';
 import { AutocompleteOption } from '../../../core';
 export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
 export declare const normalizeDateTime: (dateTime: LocalDateTime) => string;
@@ -37,3 +37,6 @@ export declare const encodePageSlug: (slug: string) => string;
 export declare function getDefaultPages(parameters: InputParameter[], defaultPages: Record<string, string> | undefined, findDefaultPageSlugFor: (objectId: string) => Promise<string | undefined>): Promise<{
     [x: string]: string;
 }>;
+export declare function updateCriteriaInputs(criteria: Record<string, unknown>, data: Record<string, unknown>, user?: UserAccount): Record<string, unknown>;
+export declare function fetchCollectionData(apiServices: ApiServices, fieldDefinition: InputParameter | Property, setFetchedOptions: (newData: FieldValues) => void, instanceId?: string, fetchedOptions?: Record<string, unknown>, initialMiddleObjectInstances?: ObjectInstance[]): Promise<void>;
+export declare const getErrorCountForSection: (section: Section | Column, errors: FieldErrors) => number;

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

@@ -2,6 +2,8 @@ import { LocalDateTime } from '@js-joda/core';
 import jsonLogic from 'json-logic-js';
 import { get, isArray, isObject, transform } from 'lodash';
 import { DateTime } from 'luxon';
+import Handlebars from 'no-eval-handlebars';
+import { defaultRuleProcessorMongoDB, formatQuery, parseMongoDB } from 'react-querybuilder';
 export const scrollIntoViewWithOffset = (el, offset, container) => {
     const elementRect = el.getBoundingClientRect();
     const containerRect = container ? container.getBoundingClientRect() : document.body.getBoundingClientRect();
@@ -267,3 +269,105 @@ export async function getDefaultPages(parameters, defaultPages, findDefaultPageS
     }
     return { ...defaultPages, ...foundDefaultPages };
 }
+function compileQueryValues(query, data) {
+    if ('rules' in query && Array.isArray(query.rules)) {
+        const updatedRules = query.rules
+            .map((item) => compileQueryValues(item, data))
+            .filter((item) => item !== undefined);
+        if (updatedRules?.length) {
+            return {
+                ...query,
+                rules: updatedRules,
+            };
+        }
+        else {
+            return undefined;
+        }
+    }
+    else {
+        if ('value' in query && typeof query.value === 'string') {
+            const template = Handlebars.compileAST(query.value);
+            const result = template(data);
+            if (result !== '') {
+                return {
+                    ...query,
+                    value: result,
+                };
+            }
+            else {
+                return undefined;
+            }
+        }
+        return query;
+    }
+}
+export function updateCriteriaInputs(criteria, data, user) {
+    const dataSet = {
+        input: {
+            ...data,
+        },
+        user: user,
+    };
+    const compiledQuery = compileQueryValues(parseMongoDB(criteria), dataSet);
+    // The "compiledQueryValues" function filters out rules that have a value of "undefined".
+    // If "compiledQuery" is "undefined", that means that all rules and nested rules have a value of "undefined".
+    // Therefore, the resulting query is empty.
+    return !compiledQuery
+        ? {}
+        : JSON.parse(formatQuery(compiledQuery, {
+            format: 'mongodb',
+            ruleProcessor: (rule, options) => {
+                let updatedRule = rule;
+                if (['contains', 'beginsWith', 'endsWith'].includes(rule.operator)) {
+                    updatedRule = { ...rule, value: escape(rule.value) };
+                }
+                return defaultRuleProcessorMongoDB(updatedRule, options);
+            },
+        }));
+}
+export async function fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instanceId, fetchedOptions, initialMiddleObjectInstances) {
+    try {
+        if ((fetchedOptions && !fetchedOptions[`${fieldDefinition.id}MiddleObject`]) || !fetchedOptions) {
+            const fetchedMiddleObject = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), {
+                params: {
+                    filter: { fields: ['properties', 'actions', 'rootObjectId'] },
+                },
+            });
+            setFetchedOptions({ [`${fieldDefinition.id}MiddleObject`]: fetchedMiddleObject });
+        }
+        // Fetch the initial middle object instances
+        const filter = instanceId ? getMiddleObjectFilter(fieldDefinition, instanceId) : {};
+        if (!isArray(initialMiddleObjectInstances)) {
+            const fetchedInitialMiddleObjectInstances = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
+                params: { filter: JSON.stringify(filter) },
+            });
+            setFetchedOptions({
+                [`${fieldDefinition.id}InitialMiddleObjectInstances`]: fetchedInitialMiddleObjectInstances,
+            });
+        }
+    }
+    catch (error) {
+        console.error('Error fetching collection data:', error);
+    }
+}
+export const getErrorCountForSection = (section, errors) => {
+    const entries = section.entries || [];
+    return isArray(section.entries)
+        ? entries.reduce((count, entry) => {
+            if (get(errors, entry.type === 'input' ? entry.parameterId : entry.type === 'inputField' ? entry.input.id : '')) {
+                count += 1;
+            }
+            else if (entry.type === 'sections') {
+                count += entry.sections.reduce((subCount, subSection) => {
+                    return subCount + getErrorCountForSection(subSection, errors);
+                }, 0);
+            }
+            else if (entry.type === 'columns') {
+                count += entry.columns.reduce((colCount, column) => {
+                    return colCount + getErrorCountForSection(column, errors);
+                }, 0);
+            }
+            return count;
+        }, 0)
+        : 0;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.23",
+    "version": "1.6.0-dev.24",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",