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

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

@@ -0,0 +1,439 @@
+import { useApiServices, useApp, useNavigate, } from '@evoke-platform/context';
+import cleanDeep from 'clean-deep';
+import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
+import Handlebars from 'no-eval-handlebars';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Close } from '../../../../../../icons';
+import { useFormContext } from '../../../../../../theme/hooks';
+import { Autocomplete, Button, Dialog, IconButton, Link, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
+import { Box } from '../../../../../layout';
+import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
+import RelatedObjectInstance from './RelatedObjectInstance';
+const ObjectPropertyInput = (props) => {
+    const { id, instance, fieldDefinition, handleChangeObjectProperty, nestedFieldsView, readOnly, error, mode, parameters, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, fieldHeight, richTextEditor, viewLayout, hasDescription, } = props;
+    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const { defaultPages, findDefaultPageSlugFor } = useApp();
+    const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
+    const [openCreateDialog, setOpenCreateDialog] = useState(false);
+    const [allDefaultPages, setAllDefaultPages] = useState(defaultPages ?? {});
+    const [loadingOptions, setLoadingOptions] = useState(false);
+    const [navigationSlug, setNavigationSlug] = useState(fetchedOptions[`${id}NavigationSlug`]);
+    const [relatedObject, setRelatedObject] = useState(fetchedOptions[`${id}RelatedObject`]);
+    const [dropdownInput, setDropdownInput] = useState();
+    const [openOptions, setOpenOptions] = useState(false);
+    const [hasFetched, setHasFetched] = useState(fetchedOptions[`${id}OptionsHaveFetched`] || false);
+    const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
+    const [layout, setLayout] = useState();
+    const [appId, setAppId] = useState(fetchedOptions[`${id}AppId`]);
+    const [form, setForm] = useState();
+    const [snackbarError, setSnackbarError] = useState({
+        showAlert: false,
+        isError: true,
+    });
+    const DEFAULT_CREATE_ACTION = '_create';
+    const action = relatedObject?.actions?.find((action) => action.id === DEFAULT_CREATE_ACTION);
+    const apiServices = useApiServices();
+    const navigateTo = useNavigate();
+    const updatedCriteria = filter
+        ? {
+            where: transformToWhere(filter),
+        }
+        : undefined;
+    useEffect(() => {
+        if (relatedObject) {
+            let defaultViewLayout;
+            if (relatedObject?.viewLayout?.dropdown && displayOption === 'dropdown') {
+                defaultViewLayout = {
+                    id: 'default',
+                    name: 'Default',
+                    objectId: relatedObject.id,
+                    ...relatedObject.viewLayout.dropdown,
+                };
+            }
+            else if (relatedObject?.viewLayout?.table && displayOption === 'dialogBox') {
+                defaultViewLayout = {
+                    id: 'default',
+                    name: 'Default',
+                    objectId: relatedObject.id,
+                    ...relatedObject.viewLayout.table,
+                };
+            }
+            if (viewLayout) {
+                apiServices
+                    .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/${displayOption === 'dropdown' ? 'dropdown' : 'table'}Layouts/${viewLayout.id}`))
+                    .then(setLayout)
+                    .catch((err) => setLayout(defaultViewLayout));
+            }
+            else {
+                setLayout(defaultViewLayout);
+            }
+        }
+    }, [displayOption, relatedObject, viewLayout]);
+    useEffect(() => {
+        // setting the default value when there is default criteria
+        if (!isEmpty(defaultValueCriteria) && !selectedInstance && (!instance || !instance[id])) {
+            const updatedFilter = cleanDeep({
+                where: transformToWhere({ $and: [defaultValueCriteria, updatedCriteria?.where ?? {}] }),
+                order: orderBy && sortBy ? encodeURIComponent(sortBy + ' ' + orderBy) : undefined,
+                limit: 1,
+            });
+            if (updatedFilter.where) {
+                setLoadingOptions(true);
+                apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), (error, instances) => {
+                    if (error) {
+                        console.error(error);
+                        setLoadingOptions(false);
+                    }
+                    if (instances && instances.length > 0) {
+                        setSelectedInstance(instances[0]);
+                        handleChangeObjectProperty(id, instances[0]);
+                    }
+                    setLoadingOptions(false);
+                });
+            }
+        }
+    }, [fieldDefinition, defaultValueCriteria, sortBy, orderBy]);
+    const getDropdownOptions = useCallback((name) => {
+        if ((!fetchedOptions[`${id}Options`] ||
+            fetchedOptions[`${id}Options`].length === 0) &&
+            !hasFetched) {
+            setLoadingOptions(true);
+            const updatedFilter = cloneDeep(updatedCriteria) || {};
+            updatedFilter.limit = 100;
+            const { propertyId, direction } = layout?.sort ?? {
+                propertyId: 'name',
+                direction: 'asc',
+            };
+            updatedFilter.order = `${propertyId} ${direction}`;
+            const where = name
+                ? transformToWhere({
+                    name: {
+                        like: name,
+                        options: 'i',
+                    },
+                })
+                : {};
+            updatedFilter.where = updatedFilter.where
+                ? {
+                    and: [updatedFilter.where, where],
+                }
+                : where;
+            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${JSON.stringify(updatedFilter)}`), (error, instances) => {
+                if (error) {
+                    console.error(error);
+                    setLoadingOptions(false);
+                }
+                if (instances) {
+                    setOptions(instances);
+                    setLoadingOptions(false);
+                    // so if you go off a section too quickly and it doesn't fetch it re-fetches but doesn't cause an infinite loop
+                    setHasFetched(true);
+                }
+            });
+        }
+    }, [relatedObject, setLoadingOptions, setOptions, fieldDefinition, updatedCriteria, layout]);
+    useEffect(() => {
+        if (displayOption === 'dropdown') {
+            getDropdownOptions();
+        }
+    }, [fieldDefinition, updatedCriteria, displayOption]);
+    useEffect(() => {
+        setSelectedInstance(initialValue);
+    }, [initialValue]);
+    const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 200), [updatedCriteria]);
+    useEffect(() => {
+        debouncedGetDropdownOptions(dropdownInput);
+        return () => debouncedGetDropdownOptions.cancel();
+    }, [dropdownInput]);
+    useEffect(() => {
+        if (action?.defaultFormId) {
+            apiServices
+                .get(getPrefixedUrl(`data/forms/${action.defaultFormId}`))
+                .then((evokeForm) => {
+                setForm(evokeForm);
+            })
+                .catch((error) => {
+                console.error('Error fetching form:', error);
+            });
+        }
+    }, [action]);
+    useEffect(() => {
+        if (!fetchedOptions[`${id}RelatedObject`]) {
+            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), (error, object) => {
+                if (error) {
+                    console.error(error);
+                }
+                else {
+                    setRelatedObject(object);
+                }
+            });
+        }
+    }, [fieldDefinition]);
+    useEffect(() => {
+        const fetchDefaultPages = async () => {
+            if (parameters) {
+                const pages = await getDefaultPages(parameters, defaultPages, findDefaultPageSlugFor);
+                setAllDefaultPages(pages);
+            }
+        };
+        fetchDefaultPages();
+    }, []);
+    useEffect(() => {
+        if (fieldDefinition.objectId &&
+            allDefaultPages &&
+            allDefaultPages[fieldDefinition.objectId] &&
+            (!fetchedOptions?.[`${id}NavigationSlug`] || !fetchedOptions[`${id}AppId`])) {
+            apiServices.get(getPrefixedUrl(`/apps/${allDefaultPages[fieldDefinition.objectId].split('/').slice(1, 2)}/pages/${encodePageSlug(allDefaultPages[fieldDefinition.objectId].split('/').slice(2).join('/'))}`), (error, page) => {
+                if (error) {
+                    console.error(error);
+                }
+                else {
+                    setAppId(page?.appId);
+                    setNavigationSlug(page?.slug);
+                }
+            });
+        }
+    }, []);
+    const handleClose = () => {
+        setOpenCreateDialog(false);
+    };
+    const compileExpression = (expression, instance) => {
+        const template = Handlebars.compileAST(expression);
+        return instance ? template(instance) : undefined;
+    };
+    useEffect(() => {
+        if (relatedObject && !fetchedOptions[`${id}RelatedObject`]) {
+            setFetchedOptions({
+                [`${id}RelatedObject`]: relatedObject,
+            });
+        }
+        if (options &&
+            (!fetchedOptions[`${id}Options`] || fetchedOptions[`${id}Options`].length === 0) &&
+            hasFetched &&
+            !fetchedOptions[`${id}OptionsHaveFetched`]) {
+            setFetchedOptions({
+                [`${id}Options`]: options,
+                [`${id}OptionsHaveFetched`]: hasFetched,
+            });
+        }
+        if (navigationSlug && !fetchedOptions[`${id}NavigationSlug`]) {
+            setFetchedOptions({
+                [`${id}NavigationSlug`]: navigationSlug,
+            });
+        }
+    }, [relatedObject, options, hasFetched]);
+    return (React.createElement(React.Fragment, null,
+        displayOption === 'dropdown' ? (React.createElement(React.Fragment, null,
+            React.createElement(Autocomplete, { id: id, fullWidth: true, sortBy: "NONE", open: openOptions, size: fieldHeight, componentsProps: {
+                    popper: {
+                        modifiers: [
+                            {
+                                name: 'flip',
+                                enabled: false,
+                            },
+                        ],
+                    },
+                }, PaperComponent: ({ children }) => {
+                    return (React.createElement(Paper, { sx: {
+                            borderRadius: '12px',
+                            boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.2)',
+                            '& .MuiAutocomplete-listbox': {
+                                maxHeight: '25vh',
+                            },
+                            '& .MuiAutocomplete-noOptions': {
+                                fontFamily: 'sans-serif',
+                                fontSize: '14px',
+                                paddingLeft: '24px',
+                                color: 'rgba(145, 158, 171, 1)',
+                            },
+                            '& .MuiAutocomplete-loading': {
+                                fontFamily: 'sans-serif',
+                                fontSize: '14px',
+                                paddingLeft: '24px',
+                                color: 'rgba(145, 158, 171, 1)',
+                            },
+                        } },
+                        mode !== 'newOnly' && children,
+                        mode !== 'existingOnly' && form && (React.createElement(Button, { fullWidth: true, sx: {
+                                justifyContent: 'flex-start',
+                                pl: 2,
+                                minHeight: '48px',
+                                borderTop: '1px solid rgba(145, 158, 171, 0.24)',
+                                borderRadius: '0p 0pc 6px 6px',
+                                paddingLeft: '22px',
+                                fontWeight: 400,
+                            }, onMouseDown: (e) => {
+                                setOpenCreateDialog(true);
+                            }, color: 'inherit' }, "+ Add New"))));
+                }, sx: {
+                    '& button.MuiButtonBase-root': {
+                        ...(!loadingOptions &&
+                            (instance?.[id]?.id || selectedInstance?.id)
+                            ? {
+                                visibility: 'visible',
+                            }
+                            : {}),
+                    },
+                    backgroundColor: 'white', // prevents the field flickering gray when loading in the value and options when it's a read only
+                }, noOptionsText: 'No options available', renderOption: (props, option) => {
+                    return (React.createElement("li", { ...props, key: option.id },
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } }, option.label),
+                            layout?.secondaryTextExpression ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression(layout?.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
+                }, onOpen: () => {
+                    if (instance?.[id]?.id || selectedInstance?.id) {
+                        setOpenOptions(false);
+                    }
+                    else {
+                        setOpenOptions(true);
+                    }
+                }, onClose: () => setOpenOptions(false), value: selectedInstance?.id
+                    ? {
+                        value: selectedInstance?.id ?? '',
+                        label: selectedInstance?.name ?? '',
+                    }
+                    : null, isOptionEqualToValue: (option, value) => {
+                    if (typeof value === 'string') {
+                        return option.value === value;
+                    }
+                    return option.value === value?.value;
+                }, options: options.map((o) => ({ label: o.name, value: o.id })), getOptionLabel: (option) => {
+                    return typeof option === 'string'
+                        ? (options.find((o) => o.id === option)?.name ?? '')
+                        : option.label;
+                }, onKeyDownCapture: (e) => {
+                    // prevents keyboard trap
+                    if (e.key === 'Tab') {
+                        return;
+                    }
+                    if (selectedInstance?.id) {
+                        e.preventDefault();
+                    }
+                }, loading: loadingOptions, onChange: (event, value) => {
+                    if (isNil(value)) {
+                        setDropdownInput(undefined);
+                        setSelectedInstance(undefined);
+                        handleChangeObjectProperty(id, null);
+                    }
+                    else {
+                        const selectedInstance = options.find((o) => o.id === value?.value);
+                        setSelectedInstance(selectedInstance);
+                        handleChangeObjectProperty(id, selectedInstance);
+                    }
+                }, selectOnFocus: false, onBlur: () => setDropdownInput(undefined), renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: selectedInstance?.id || readOnly ? '' : 'Select', readOnly: !loadingOptions && !selectedInstance?.id && readOnly, onChange: (event) => setDropdownInput(event.target.value), onClick: (e) => {
+                        if (openOptions &&
+                            e.target?.nodeName === 'svg') {
+                            setOpenOptions(false);
+                        }
+                        else {
+                            setOptions(options);
+                            setOpenOptions(true);
+                        }
+                    }, sx: {
+                        ...(!loadingOptions && selectedInstance?.id
+                            ? {
+                                '.MuiOutlinedInput-root': {
+                                    background: 'white',
+                                    border: 'auto',
+                                    '.MuiOutlinedInput-input': {
+                                        ...(navigationSlug
+                                            ? {
+                                                color: 'rgb(1, 78, 123)',
+                                                textDecoration: 'underline',
+                                                cursor: 'pointer',
+                                            }
+                                            : {}),
+                                    },
+                                },
+                                '& fieldset': {
+                                    border: readOnly ? 'none' : 'auto',
+                                    borderColor: 'auto',
+                                },
+                                '&:hover .MuiOutlinedInput-notchedOutline': {
+                                    border: 'auto',
+                                },
+                                '& svg': {
+                                    display: readOnly ? 'none' : 'block',
+                                },
+                                caretColor: 'white',
+                            }
+                            : {}),
+                    }, InputProps: {
+                        ...params.InputProps,
+                        startAdornment: selectedInstance?.id ? (React.createElement(Typography, { onClick: (e) => {
+                                if (navigationSlug && selectedInstance?.id) {
+                                    navigateTo(`/${appId}/${navigationSlug.replace(':instanceId', selectedInstance.id)}`);
+                                }
+                            }, sx: {
+                                cursor: navigationSlug ? 'pointer' : 'default',
+                                color: navigationSlug ? 'rgb(1, 78, 123)' : 'inherit',
+                                textDecoration: navigationSlug ? 'underline' : 'none',
+                                paddingLeft: '5px',
+                            } }, selectedInstance?.name || '')) : null,
+                    }, inputProps: {
+                        ...params.inputProps,
+                        value: selectedInstance?.id ? '' : params.inputProps.value,
+                        ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined),
+                    } })), readOnly: readOnly, error: error }))) : (React.createElement(Box, { sx: {
+                padding: selectedInstance?.name ? '16.5px 14px' : '10.5px 0',
+            } },
+            (selectedInstance?.name || readOnly) && (React.createElement(Link, { sx: {
+                    textDecoration: 'none',
+                    marginRight: 1,
+                    textDecorationLine: navigationSlug && instance?.[id] && !isModal ? 'underline' : 'none',
+                    cursor: navigationSlug && instance?.[id] && !isModal ? 'pointer' : 'auto',
+                    fontSize: '16px',
+                    fontWeight: 400,
+                    lineHeight: '24px',
+                    textAlign: 'left',
+                    color: navigationSlug && instance?.[id] && !isModal
+                        ? '#0075A7'
+                        : !selectedInstance?.id
+                            ? '#999'
+                            : '#212B36',
+                }, variant: "body2", href: navigationSlug && !isModal
+                    ? `${'/app'}/${appId}/${navigationSlug.replace(':instanceId', selectedInstance?.id ?? '')}`
+                    : undefined, "aria-label": selectedInstance?.name }, selectedInstance?.name ? selectedInstance?.name : readOnly && 'None')),
+            !readOnly && (selectedInstance || (nestedFieldsView && instance?.id)) ? (React.createElement(Tooltip, { title: `Unlink` },
+                React.createElement("span", null,
+                    React.createElement(IconButton, { onClick: (event) => {
+                            event.stopPropagation();
+                            handleChangeObjectProperty(id, null);
+                            setSelectedInstance(undefined);
+                        }, sx: { p: 0, marginBottom: '4px' }, "aria-label": `Unlink` },
+                        React.createElement(Close, { sx: { width: '20px', height: '20px' } }))))) : (React.createElement(Button, { sx: {
+                    backgroundColor: '#DFE3E8',
+                    color: '#212B36',
+                    fontWeight: '700',
+                    textTransform: 'capitalize',
+                    '&:hover': {
+                        backgroundColor: '#e6eaf0',
+                        boxShadow: 'none',
+                    },
+                    '&:disabled': {
+                        cursor: 'not-allowed',
+                        pointerEvents: 'all',
+                    },
+                    boxShadow: 'none',
+                    lineHeight: '2.75',
+                    padding: '0 23px',
+                    display: readOnly ? 'none' : 'block',
+                }, size: "small", variant: "contained", disableElevation: true, onClick: (event) => {
+                    event.stopPropagation();
+                    setOpenCreateDialog(true);
+                }, "aria-label": `Add` }, "Add")))),
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { id: id, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, nestedFieldsView: nestedFieldsView, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, fieldHeight: fieldHeight, richTextEditor: richTextEditor, form: form, action: action, setSnackbarError: setSnackbarError, selectedInstance: selectedInstance })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
+            React.createElement(Typography, { sx: {
+                    marginTop: '28px',
+                    fontSize: '22px',
+                    fontWeight: 700,
+                    marginLeft: '24px',
+                    marginBottom: '10px',
+                } }, `Add ${fieldDefinition.name}`),
+            React.createElement(RelatedObjectInstance, { handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, fieldHeight: fieldHeight, richTextEditor: richTextEditor, form: form, action: action, setSnackbarError: setSnackbarError, selectedInstance: selectedInstance }))))),
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
+                isError: snackbarError.isError,
+                showAlert: false,
+            }), message: snackbarError.message, error: snackbarError.isError })));
+};
+export default ObjectPropertyInput;

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;