@evoke-platform/ui-components 1.6.0-testing.13 → 1.6.0-testing.14

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.d.ts

@@ -0,0 +1,29 @@
+import { Action, EvokeForm, Obj, ObjectInstance, TableViewLayout } from '@evoke-platform/context';
+import React, { ComponentType } from 'react';
+import { BaseProps, SimpleEditorProps } from '../../types';
+export type RelatedObjectInstanceProps = BaseProps & {
+    relatedObject: Obj | undefined;
+    id: string;
+    setSelectedInstance: (selectedInstance: ObjectInstance) => void;
+    handleChangeObjectProperty: (propertyId: string, instance?: any) => void;
+    handleClose: () => void;
+    mode: 'default' | 'existingOnly' | 'newOnly';
+    setSnackbarError: React.Dispatch<React.SetStateAction<{
+        showAlert: boolean;
+        message?: string;
+        isError: boolean;
+    }>>;
+    nestedFieldsView?: boolean;
+    displayOption?: 'dropdown' | 'dialogBox';
+    setOptions: (options: ObjectInstance[]) => void;
+    options: ObjectInstance[];
+    filter?: Record<string, unknown>;
+    layout?: TableViewLayout;
+    fieldHeight?: 'small' | 'medium';
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    form?: EvokeForm;
+    action?: Action;
+    selectedInstance?: ObjectInstance;
+};
+declare const RelatedObjectInstance: (props: RelatedObjectInstanceProps) => React.JSX.Element;
+export default RelatedObjectInstance;

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

@@ -0,0 +1,74 @@
+import { InfoRounded } from '@mui/icons-material';
+import React, { useState } from 'react';
+import { Alert, Button, FormControlLabel, Radio, RadioGroup } from '../../../../../core';
+import { Box, Grid } from '../../../../../layout';
+import InstanceLookup from './InstanceLookup';
+const styles = {
+    actionButtons: {
+        padding: '8px 8px 24px 8px',
+        marginRight: '18px',
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+};
+const RelatedObjectInstance = (props) => {
+    const { relatedObject, id, setSelectedInstance, handleChangeObjectProperty, handleClose, nestedFieldsView, mode, displayOption, filter, layout, form, } = props;
+    const [errors, setErrors] = useState([]);
+    const [selectedRow, setSelectedRow] = useState();
+    const [relationType, setRelationType] = useState(displayOption === 'dropdown' ? 'new' : 'existing');
+    const linkExistingInstance = async () => {
+        if (selectedRow) {
+            setSelectedInstance(selectedRow);
+            handleChangeObjectProperty(id, selectedRow);
+        }
+        onClose();
+    };
+    const onClose = () => {
+        handleClose();
+        setErrors([]);
+    };
+    return (React.createElement(Box, { sx: {
+            background: nestedFieldsView ? '#F4F6F8' : 'none',
+            borderRadius: '8px',
+        } },
+        React.createElement(Box, { sx: {
+                padding: '8px 24px 0px',
+                '.MuiInputBase-root': { background: '#FFFF', borderRadius: '8px' },
+            } },
+            !nestedFieldsView &&
+                displayOption !== 'dropdown' &&
+                mode !== 'existingOnly' &&
+                mode !== 'newOnly' &&
+                form && (React.createElement(Grid, { container: true },
+                React.createElement(Grid, { container: true, item: true },
+                    React.createElement(RadioGroup, { row: true, "aria-labelledby": "related-object-link-type", onChange: (event) => {
+                            event.target.value === 'existing' && setErrors([]);
+                            setRelationType(event.target.value);
+                        }, value: relationType },
+                        React.createElement(FormControlLabel, { value: "existing", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "Existing" }),
+                        React.createElement(FormControlLabel, { value: "new", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "New" }))))),
+            errors?.length ? (React.createElement(Alert, { severity: "error", sx: { margin: '10px 0', borderRadius: '8px' }, icon: React.createElement(InfoRounded, { sx: { color: '#A22723' } }) }, errors.length === 1 ? (React.createElement(React.Fragment, null,
+                "There is ",
+                React.createElement("strong", null, "1"),
+                " error")) : (React.createElement(React.Fragment, null,
+                "There are ",
+                React.createElement("strong", null, errors.length),
+                " errors")))) : undefined,
+            (relationType === 'new' || mode === 'newOnly') && form ? (React.createElement(Box, { id: 'related-object-wrapper', sx: { width: '100%' } })) : (relatedObject &&
+                mode !== 'newOnly' && (React.createElement(React.Fragment, null,
+                React.createElement(InstanceLookup, { colspan: 12, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter, layout: layout }))))),
+        relationType !== 'new' && mode !== 'newOnly' && (React.createElement(Box, { sx: styles.actionButtons },
+            React.createElement(Button, { onClick: onClose, color: 'inherit', sx: {
+                    border: '1px solid #ced4da',
+                    width: '75px',
+                    marginRight: '0px',
+                    color: 'black',
+                } }, "Cancel"),
+            React.createElement(Button, { sx: {
+                    marginLeft: '8px',
+                    width: '85px',
+                    '&:hover': { boxShadow: 'none' },
+                }, onClick: linkExistingInstance, variant: "contained", disabled: !selectedRow, "aria-label": `Add` }, "Add")))));
+};
+export default RelatedObjectInstance;

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

@@ -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;