@evoke-platform/ui-components 1.6.0-dev.3 → 1.6.0-dev.30

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, validate: validation })));
+        }
+        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

@@ -0,0 +1,10 @@
+import React from 'react';
+type TabNavProps = {
+    numberOfTabs: number;
+    tabValue: number;
+    handleTabChange: (type: 'tabNav' | 'buttonNav', newValue: number) => void;
+    prevTabLabel?: string;
+    nextTabLabel?: string;
+};
+declare function TabNav(props: TabNavProps): React.JSX.Element;
+export default TabNav;

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

@@ -0,0 +1,23 @@
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import React from 'react';
+import { Button } from '../../../core';
+import { Box } from '../../../layout';
+function TabNav(props) {
+    const { numberOfTabs, tabValue, handleTabChange, prevTabLabel, nextTabLabel } = props;
+    const isFirstTab = tabValue === 0;
+    const isLastTab = tabValue === numberOfTabs - 1;
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            justifyContent: isFirstTab ? 'flex-end' : 'space-between',
+            paddingTop: '10px',
+            paddingBottom: '20px',
+        } },
+        !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, { 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 } })))));
+}
+export default TabNav;

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

@@ -0,0 +1,3 @@
+import { FormEntry, InputParameter } from '@evoke-platform/context';
+import { FieldValues, UseFormRegister } from 'react-hook-form';
+export declare const handleValidation: (entries: FormEntry[], register: UseFormRegister<FieldValues>, formValues: FieldValues, parameters?: InputParameter[], instance?: FieldValues) => void;

package/dist/published/components/custom/FormV2/components/ValidationFiles/Validation.js

@@ -0,0 +1,176 @@
+import { isArray } from 'lodash';
+import { DateTime } from 'luxon';
+import Handlebars from 'no-eval-handlebars';
+function isNumericValidation(validation) {
+    return 'minimum' in validation || 'maximum' in validation;
+}
+function isCalendarValidation(validation) {
+    return 'to' in validation || 'from' in validation;
+}
+function isStringValidation(validation) {
+    return 'operator' in validation;
+}
+function isDocumentValidation(validation) {
+    const documentValidationKeys = ['minDocuments', 'maxDocuments', 'errorMessage'];
+    return !validation || Object.keys(validation).every((key) => documentValidationKeys.includes(key));
+}
+export const handleValidation = (entries, register, formValues, parameters, instance) => {
+    entries?.forEach((entry) => {
+        if (entry.type === 'sections' || entry.type === 'columns') {
+            const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
+            subEntries.forEach((subEntry) => {
+                if (subEntry.entries) {
+                    handleValidation(subEntry.entries, register, formValues, parameters, instance);
+                }
+            });
+            return;
+        }
+        else if (entry.type !== 'input' && entry.type !== 'inputField') {
+            return;
+        }
+        const display = entry?.display;
+        const parameter = entry.type === 'input'
+            ? parameters?.find((param) => param.id === entry.parameterId)
+            : entry.type === 'inputField'
+                ? entry.input
+                : undefined;
+        const validation = parameter?.validation || {};
+        const fieldName = display?.label;
+        const errorMsg = validation?.errorMessage;
+        const validationRules = {};
+        // Required fields
+        if (display?.required) {
+            validationRules.required = `${fieldName} is required`;
+        }
+        if (parameter?.type === 'boolean' && parameter?.strictlyTrue) {
+            validationRules.required = {
+                value: true,
+                message: display?.booleanDisplay === 'switch'
+                    ? `${fieldName} must be toggled on`
+                    : `${fieldName} must be checked`,
+            };
+        }
+        // Min/max char string fields
+        if (typeof validation.minLength === 'number') {
+            validationRules.minLength = {
+                value: validation.minLength,
+                message: `${fieldName} must have at least ${validation.minLength} characters`,
+            };
+        }
+        if (typeof validation.maxLength === 'number') {
+            validationRules.maxLength = {
+                value: validation.maxLength,
+                message: `${fieldName} must have no more than ${validation.maxLength} characters`,
+            };
+        }
+        // Min/max number fields
+        if (isNumericValidation(validation) && validation.maximum) {
+            validationRules.max = {
+                value: validation.maximum,
+                message: errorMsg || `${fieldName} must have a value under ${validation.maximum}`,
+            };
+        }
+        if (isNumericValidation(validation) && validation.minimum) {
+            validationRules.min = {
+                value: validation.minimum,
+                message: errorMsg || `${fieldName} must have a value over ${validation.minimum}`,
+            };
+        }
+        validationRules.validate = (value) => {
+            if (!value)
+                return true;
+            // Document validation
+            if (isDocumentValidation(validation)) {
+                const amountOfDocuments = isArray(value) ? value.length : 0;
+                const min = validation?.minDocuments;
+                const max = validation?.maxDocuments;
+                if (max && min && (amountOfDocuments > max || amountOfDocuments < min)) {
+                    return errorMsg || `Please select between ${min} and ${max} document${max > 1 ? 's' : ''}`;
+                }
+                else if (min && amountOfDocuments < min) {
+                    return errorMsg || `Please select at least ${min} document${min > 1 ? 's' : ''}`;
+                }
+                else if (max && amountOfDocuments > max) {
+                    return errorMsg || `Please select no more than ${max} document${max > 1 ? 's' : ''}`;
+                }
+            }
+            // Date and Time validation
+            if (isCalendarValidation(validation)) {
+                const data = {
+                    __today__: DateTime.now().toISODate(),
+                    input: formValues,
+                };
+                if (validation.from) {
+                    let earliestAllowed = validation.from;
+                    if (/{{[\w.]+(?:\s+[\w.]+)*(?:\s+\d+)?}}/.test(earliestAllowed)) {
+                        earliestAllowed = Handlebars.compileAST(earliestAllowed)(data);
+                    }
+                    if (earliestAllowed && value < earliestAllowed) {
+                        return (errorMsg ||
+                            `${fieldName} must be ${parameter?.type === 'time' ? 'at' : 'on'} or later than ${earliestAllowed || 'a field with no value'}`);
+                    }
+                }
+                if (validation.to) {
+                    let latestAllowed = validation.to;
+                    if (/{{[\w.]+(?:\s+[\w.]+)*(?:\s+\d+)?}}/.test(latestAllowed)) {
+                        latestAllowed = Handlebars.compileAST(latestAllowed)(data);
+                    }
+                    if (latestAllowed && value > latestAllowed) {
+                        return (errorMsg ||
+                            `${fieldName} must be ${parameter?.type === 'time' ? 'at' : 'on'} or before ${latestAllowed || 'a field with no value'}`);
+                    }
+                }
+            }
+            // Regex validation
+            if (isStringValidation(validation) && validation.rules) {
+                const rules = validation.rules;
+                const failedRules = rules.filter((rule) => {
+                    const regex = new RegExp(rule.regex);
+                    return !regex.test(value);
+                });
+                const operator = validation.operator;
+                if (failedRules.length > 0) {
+                    if (operator === 'all') {
+                        const messages = failedRules
+                            .map((rule) => rule.errorMessage || 'Property is not in a valid format')
+                            .join(' and ');
+                        return `${fieldName}: ${messages}`;
+                    }
+                    if (operator === 'any' && failedRules.length < rules.length) {
+                        return true; // passes if at least one rule passed
+                    }
+                    const messages = failedRules
+                        .map((rule) => rule.errorMessage || 'Property is not in a valid format')
+                        .join(' or ');
+                    return `${fieldName}: ${messages}`;
+                }
+            }
+            // Integer check
+            if (parameter?.type === 'integer') {
+                if (value && !Number.isInteger(value)) {
+                    return `${fieldName} must be an integer`;
+                }
+            }
+            // Invalid date check
+            if (value?.invalid && value?.dateText) {
+                return `Invalid Date`;
+            }
+            return true;
+        };
+        register(entry.parameterId || entry.input?.id, validationRules);
+    });
+};
+Handlebars.registerHelper('addDays', function (addend1, addend2) {
+    const dateAddend1 = DateTime.fromISO(addend1);
+    if (dateAddend1.isValid) {
+        return dateAddend1.plus({ days: addend2 }).toISODate();
+    }
+    return undefined;
+});
+Handlebars.registerHelper('subDays', function (minuend, subtrahend) {
+    const dateMinuend = DateTime.fromISO(minuend);
+    if (dateMinuend.isValid) {
+        return dateMinuend.minus({ days: subtrahend }).toISODate();
+    }
+    return undefined;
+});

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FieldErrors } from 'react-hook-form';
+export type ValidationErrorDisplayProps = {
+    errors: FieldErrors;
+    show: boolean;
+    formId: string;
+    title?: string;
+};
+declare function ValidationErrorDisplay(props: ValidationErrorDisplayProps): React.JSX.Element | null;
+export default ValidationErrorDisplay;

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useResponsive } from '../../../../../theme';
+import { List, ListItem, Typography } from '../../../../core';
+import { Box } from '../../../../layout';
+function ValidationErrorDisplay(props) {
+    const { errors, show, formId, title } = props;
+    const { isSm, isXs } = useResponsive();
+    function extractErrorMessages(errors) {
+        const messages = [];
+        for (const key in errors) {
+            const error = errors[key];
+            if (error?.message) {
+                messages.push(error.message);
+            }
+            else if (error) {
+                for (const nestedKey in error) {
+                    const nestedError = error[nestedKey];
+                    if (nestedError?.message) {
+                        messages.push(nestedError.message);
+                    }
+                }
+            }
+        }
+        return messages;
+    }
+    const errorMessages = extractErrorMessages(errors);
+    return show && errorMessages.length > 0 ? (React.createElement(Box, { id: `validation-error-display-${formId}`, sx: {
+            backgroundColor: '#f8d7da',
+            borderColor: '#f5c6cb',
+            color: '#721c24',
+            border: '1px solid #721c24',
+            padding: '8px 24px',
+            borderRadius: '4px',
+            marginBottom: isSm || isXs ? 2 : 3,
+            marginTop: !title ? (isSm || isXs ? -2 : -3) : undefined,
+        } },
+        React.createElement(Typography, { sx: { color: '#721c24', mt: '16px', mb: '8px' } }, "Please fix the following errors before submitting:"),
+        React.createElement(List, { sx: {
+                listStyleType: 'disc',
+                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;
+}
+export default ValidationErrorDisplay;

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

@@ -0,0 +1,122 @@
+import { FormEntry, InputParameter, ObjectInstance, Property, Section, Sections, ViewLayoutEntityReference } from '@evoke-platform/context';
+import { GridSize } from '@mui/material';
+import { ComponentType } from 'react';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+export type FieldAddress = {
+    line1?: string;
+    line2?: string;
+    city?: string;
+    county?: string;
+    state?: string;
+    zipCode?: string;
+};
+export type AccessCheck = {
+    result: boolean;
+};
+export type SavedDocumentReference = {
+    id: string;
+    name: string;
+};
+export type Document = {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    uploadedDate: string;
+    metadata: {
+        [field: string]: unknown;
+    };
+    versionId?: string;
+};
+export type SimpleEditorProps = {
+    id: string;
+    value: string;
+    handleUpdate?: (value: string) => void;
+    format: 'rtf' | 'plain' | 'openxml';
+    disabled?: boolean;
+    rows?: number;
+    hasError?: boolean;
+    viewHistory?: boolean;
+};
+export type ObjectPropertyInputProps = {
+    id: string;
+    instance?: FieldValues;
+    fieldDefinition: InputParameter;
+    handleChangeObjectProperty: (propertyId: string, instance?: ObjectInstance | null) => void;
+    mode: 'default' | 'existingOnly' | 'newOnly';
+    nestedFieldsView?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    displayOption?: 'dropdown' | 'dialogBox';
+    filter?: Record<string, unknown>;
+    defaultValueCriteria?: Record<string, unknown>;
+    sortBy?: string;
+    orderBy?: string;
+    isModal?: boolean;
+    label?: string;
+    initialValue?: ObjectInstance | null;
+    fieldHeight?: 'small' | 'medium';
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    viewLayout?: ViewLayoutEntityReference;
+    hasDescription?: boolean;
+    parameters?: InputParameter[];
+};
+export type Page = {
+    id: string;
+    name: string;
+    slug?: string;
+    pk?: string;
+    appId?: string;
+    pathParameters?: {
+        id: string;
+    }[];
+    children?: unknown[];
+};
+export type SearchFieldProps = {
+    searchableColumns: Property[];
+    filter: Record<string, unknown> | undefined;
+    setFilter: (filter: Record<string, unknown> | undefined) => void;
+    searchString: string;
+    setSearchString: (searchString: string) => void;
+};
+export type BaseProps = {
+    colspan?: GridSize;
+    baseUrl?: string;
+    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/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,47 @@
+import { ApiServices, Column, Columns, FormEntry, InputParameter, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
+import { LocalDateTime } from '@js-joda/core';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+import { AutocompleteOption } from '../../../core';
+import { Document } from './types';
+export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
+export declare const normalizeDateTime: (dateTime: LocalDateTime) => string;
+export declare function isAddressProperty(key: string): boolean;
+/**
+ * Determine if a form entry is visible or not.
+ */
+export declare const entryIsVisible: (entry: FormEntry, formValues: FieldValues, instance?: FieldValues) => boolean;
+/**
+ * Recursively retrieves all parameter IDs from a given entry of type Sections or Columns.
+ *
+ * @param {Sections | Columns} entry - The entry object, which can be of type Sections or Columns.
+ * @returns {string[]} - An array of parameter IDs found within the entry.
+ */
+export declare const getNestedParameterIds: (entry: Sections | Columns) => string[];
+export declare const getEntryId: (entry: FormEntry) => string | undefined;
+export declare function getPrefixedUrl(url: string): string;
+export declare const isOptionEqualToValue: (option: AutocompleteOption | string, value: unknown) => boolean;
+export declare function addressProperties(addressProperty: Property): Property[];
+export declare const normalizeDates: (instance: ObjectInstance, evokeObject?: Obj) => ObjectInstance;
+export declare const transformToWhere: (mongoQuery: Record<string, unknown>) => Record<string, unknown>;
+export declare const getMiddleObject: (fieldDefinition: InputParameter | Property, endObjectId: string, endObjectName: string, instance?: FieldValues) => {
+    [x: string]: {
+        id: any;
+        name: any;
+    };
+} | undefined;
+export declare const getMiddleObjectFilter: (fieldDefinition: InputParameter | Property, instanceId: string) => {
+    where: {
+        [x: string]: string;
+    };
+};
+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;
+export declare const convertDocToParameters: (obj: Document) => InputParameter[];
+export declare const propertyToParameter: (property: Property) => InputParameter;
+export declare const propertyValidationToParameterValidation: (property: Property) => InputParameter['validation'];
+export declare const convertPropertiesToParams: (object: Obj) => InputParameter[] | undefined;