@evoke-platform/ui-components 1.4.0-testing.1 → 1.4.0-testing.2

package/dist/published/components/custom/Form/Common/Form.js

@@ -1,14 +1,14 @@
 import { useApp, useAuthenticationContext, } from '@evoke-platform/context';
 import { Components, Form as FormIO, Utils } from '@formio/react';
 import { flatten } from 'flat';
-import { isEmpty, isEqual, toPairs } from 'lodash';
+import { isEmpty, isEqual, isObject, pick, toPairs } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import '../../../../styles/form-component.css';
 import { Skeleton, Snackbar } from '../../../core';
 import { Box } from '../../../layout';
 import { ButtonComponent, DocumentComponent, FormFieldComponent, ImageComponent, ObjectComponent, RepeatableFieldComponent, UserComponent, ViewOnlyComponent, } from '../FormComponents';
 import { CriteriaComponent } from '../FormComponents/CriteriaComponent/CriteriaComponent';
-import { addObjectPropertiesToComponentProps, buildComponentPropsFromDocumentProperties, buildComponentPropsFromObjectProperties, convertFormToComponents, getFlattenEntries, getPrefixedUrl, } from '../utils';
+import { addObjectPropertiesToComponentProps, buildComponentPropsFromDocumentProperties, buildComponentPropsFromObjectProperties, convertFormToComponents, flattenFormComponents, getAllCriteriaInputs, getFlattenEntries, getPrefixedUrl, } from '../utils';
 const usePrevious = (value) => {
     const ref = useRef();
     useEffect(() => {
@@ -101,24 +101,16 @@ export function Form(props) {
     const buildComponents = async () => {
         const action = object?.actions?.find((action) => action.id === actionId);
         let input;
-        const parameters = associatedObject?.propertyId && action?.parameters
-            ? action.parameters.filter((param) => param.id !== associatedObject.propertyId)
-            : action?.parameters;
-        if (parameters && object) {
+        if (action?.parameters && object) {
             input = action?.form?.entries
-                ? convertFormToComponents(action.form.entries, parameters, object)
-                : parameters.filter((param) => object.properties?.some((prop) => prop.id === param.id));
+                ? convertFormToComponents(action.form.entries, action.parameters, object)
+                : action.parameters.filter((param) => object.properties?.some((prop) => prop.id === param.id));
         }
         else {
             input = action?.inputProperties ?? (action?.type === 'delete' ? [] : undefined);
         }
-        let visibleObjectProperties = object?.properties;
-        if (associatedObject) {
-            // Eliminates the associated object's field from the form
-            visibleObjectProperties = visibleObjectProperties?.filter((property) => property.id !== associatedObject.propertyId);
-        }
         let foundDefaultPages = defaultPages;
-        const relatedObjectProperties = visibleObjectProperties?.filter((property) => property.type === 'object');
+        const relatedObjectProperties = object?.properties?.filter((property) => property.type === 'object');
         if (relatedObjectProperties) {
             foundDefaultPages = await relatedObjectProperties.reduce(async (acc, property) => {
                 const result = await acc;
@@ -132,23 +124,25 @@ export function Form(props) {
             }, Promise.resolve({}));
         }
         const allDefaultPages = { ...defaultPages, ...foundDefaultPages };
-        if (input && visibleObjectProperties) {
+        // visibleObjectProperties
+        if (input && object?.properties) {
+            const allCriteriaInputs = getAllCriteriaInputs(action?.inputProperties ? flattenFormComponents(action.inputProperties) : action?.parameters ?? []);
             if (input.length || action?.type !== 'delete') {
                 // formIO builder-configured input properties exist
-                const newComponentProps = await addObjectPropertiesToComponentProps(visibleObjectProperties, input, instance, {
+                const newComponentProps = await addObjectPropertiesToComponentProps(object.properties, input, allCriteriaInputs, instance, {
                     ...objectInputCommonProps,
                     defaultPages: allDefaultPages,
                     navigateTo,
                     apiServices,
                     user: userAccount,
-                }, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight, richTextEditor);
+                }, associatedObject, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight, richTextEditor);
                 if (!hideButtons && !isReadOnly) {
                     newComponentProps.push(BottomButtons);
                 }
                 setComponentProps(newComponentProps);
             }
             else {
-                const components = await addObjectPropertiesToComponentProps(visibleObjectProperties, [
+                const components = await addObjectPropertiesToComponentProps(object.properties, [
                     {
                         html: `<p>${action?.type === 'delete' ? 'This action cannot be undone.' : 'Are you sure?'}</p>`,
                         label: 'Content',
@@ -216,13 +210,13 @@ export function Form(props) {
                         addons: [],
                         id: 'eahbwo',
                     },
-                ], instance, {
+                ], undefined, instance, {
                     ...objectInputCommonProps,
                     defaultPages: allDefaultPages,
                     navigateTo,
                     apiServices,
                     user: userAccount,
-                }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor);
+                }, undefined, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor);
                 if (!hideButtons) {
                     components.push(BottomButtons);
                 }
@@ -343,7 +337,12 @@ export function Form(props) {
                 submittedFields[field] = null;
             }
             else {
-                submittedFields[field] = value;
+                if (isObject(value) && 'id' in value && 'name' in value) {
+                    submittedFields[field] = pick(value, 'id', 'name');
+                }
+                else {
+                    submittedFields[field] = value;
+                }
             }
         }
         //OPTIMIZATION TODO: See if type can be inferred from the event target

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectComponent.d.ts

@@ -6,6 +6,7 @@ interface ObjectComponentProps extends BaseFormComponentProps {
     mode: 'default' | 'existingOnly';
     defaultValueCriteria?: Record<string, unknown>;
     initialValue?: string;
+    allCriteriaInputs: string[];
     richTextEditor?: typeof ReactComponent;
 }
 export declare class ObjectComponent extends ReactComponent {
@@ -20,6 +21,7 @@ export declare class ObjectComponent extends ReactComponent {
     updatedDefaultValueCriteria: Record<string, unknown>;
     constructor(component: ObjectComponentProps, options: any, data: any);
     init(): void;
+    expandInstance(): Promise<void>;
     clearErrors(): void;
     handleValidation(): void;
     hasErrors(): boolean;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectComponent.js

@@ -1,10 +1,9 @@
 import { ReactComponent } from '@formio/react';
-import dot from 'dot-object';
-import { cloneDeep, isEmpty, pick } from 'lodash';
+import { cloneDeep, isEmpty, isNil, isObject, pick } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { FormComponentWrapper } from '../../Common';
-import { getAllCriteriaInputs, getPrefixedUrl, transformToWhere, updateCriteriaInputs } from '../../utils';
+import { getCriteriaInputs, getPrefixedUrl, populateInstanceWithNestedData, transformToWhere, updateCriteriaInputs, } from '../../utils';
 import { ObjectPropertyInput } from './ObjectPropertyInput';
 export class ObjectComponent extends ReactComponent {
     constructor(component, options, data) {
@@ -17,9 +16,9 @@ export class ObjectComponent extends ReactComponent {
             delete this.errorDetails['api-error'];
             const updatedValue = pick(value, 'id', 'name');
             // set the value on the form instance at this.root.data
-            this.setValue(updatedValue ?? '');
+            this.setValue(!isNil(updatedValue) ? updatedValue : '');
             // update the value in the component instance
-            this.updateValue(updatedValue ?? {}, { modified: true });
+            this.updateValue(!isNil(updatedValue) ? updatedValue : {}, { modified: true });
             this.handleValidation();
             this.emit('changed-' + this.component.key, value);
             this.attach(this.element);
@@ -33,25 +32,44 @@ export class ObjectComponent extends ReactComponent {
         this.handleChangeObjectProperty = this.handleChangeObjectProperty.bind(this);
     }
     init() {
-        const data = dot.dot(this.root._data);
         if (this.criteria) {
-            const inputProps = getAllCriteriaInputs(this.criteria);
+            const inputProps = getCriteriaInputs(this.criteria);
+            this.updatedCriteria = updateCriteriaInputs(this.criteria, this.root._data, this.component.user);
             for (const inputProp of inputProps) {
-                // Parse data to update criteria when form is loaded.
-                updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
                 // Parse data to update criteria when form field is updated
                 // Need to parse all fields again.
                 const compKeyFragments = inputProp.split('.');
                 let compKey = compKeyFragments[0];
-                if (['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
+                const property = this.component.properties.find((c) => c.id === compKey);
+                if (property?.type === 'address' &&
+                    ['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
                     compKey = inputProp;
                 }
-                this.on(`changed-${compKey}`, () => {
-                    const data = dot.dot(this.root._data);
-                    this.updatedCriteria = cloneDeep(this.criteria) ?? {};
-                    for (const inputProp of inputProps) {
-                        updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
+                this.on(`changed-${compKey}`, async (value) => {
+                    const data = this.root._data;
+                    if (property?.type === 'object' && isObject(value) && 'id' in value && 'objectId' in value) {
+                        const paths = this.component.allCriteriaInputs
+                            .filter((input) => input.split('.')[0] === compKey)
+                            .map((p) => p.split('.').slice(1).join('.'));
+                        let instance = value;
+                        if (!isEmpty(paths)) {
+                            instance = await populateInstanceWithNestedData(value['id'], value['objectId'], paths, this.component.apiServices);
+                        }
+                        data[compKey] = instance;
                     }
+                    else {
+                        if (compKey.includes('.')) {
+                            const keyFragments = compKey.split('.');
+                            if (!data[keyFragments[0]]) {
+                                data[keyFragments[0]] = {};
+                            }
+                            data[keyFragments[0]][keyFragments[1]] = value;
+                        }
+                        else {
+                            data[compKey] = value;
+                        }
+                    }
+                    this.updatedCriteria = updateCriteriaInputs(this.criteria ?? {}, data, this.component.user);
                     if (this.visible) {
                         this.attachReact(this.element);
                     }
@@ -59,25 +77,43 @@ export class ObjectComponent extends ReactComponent {
             }
         }
         if (this.defaultValueCriteria) {
-            const inputProps = getAllCriteriaInputs(this.defaultValueCriteria);
-            updateCriteriaInputs(this.updatedDefaultValueCriteria, 'user.id', this.component.user?.id ?? '');
+            const inputProps = getCriteriaInputs(this.defaultValueCriteria);
+            this.updatedDefaultValueCriteria = updateCriteriaInputs(this.defaultValueCriteria, this.root._data, this.component.user);
             for (const inputProp of inputProps) {
-                // Parse data to update criteria when form is loaded.
-                updateCriteriaInputs(this.updatedDefaultValueCriteria, inputProp, data[inputProp], true);
                 // Parse data to update criteria when form field is updated
                 // Need to parse all fields again.
                 const compKeyFragments = inputProp.split('.');
                 let compKey = compKeyFragments[0];
-                if (['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
+                const property = this.component.properties.find((c) => c.id === compKey);
+                if (property?.type === 'address' &&
+                    ['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
                     compKey = inputProp;
                 }
-                this.on(`changed-${compKey}`, () => {
-                    const data = dot.dot(this.root._data);
-                    this.updatedDefaultValueCriteria = cloneDeep(this.defaultValueCriteria) ?? {};
-                    updateCriteriaInputs(this.updatedDefaultValueCriteria, 'user.id', this.component.user?.id ?? '');
-                    for (const inputProp of inputProps) {
-                        updateCriteriaInputs(this.updatedDefaultValueCriteria, inputProp, data[inputProp], true);
+                this.on(`changed-${compKey}`, async (value) => {
+                    const data = this.root._data;
+                    if (property?.type === 'object' && isObject(value) && 'id' in value && 'objectId' in value) {
+                        const paths = this.component.allCriteriaInputs
+                            .filter((input) => input.split('.')[0] === compKey)
+                            .map((p) => p.split('.').slice(1).join('.'));
+                        let instance = value;
+                        if (!isEmpty(paths)) {
+                            instance = await populateInstanceWithNestedData(value['id'], value['objectId'], paths, this.component.apiServices);
+                        }
+                        data[compKey] = instance;
+                    }
+                    else {
+                        if (compKey.includes('.')) {
+                            const keyFragments = compKey.split('.');
+                            if (!data[keyFragments[0]]) {
+                                data[keyFragments[0]] = {};
+                            }
+                            data[keyFragments[0]][keyFragments[1]] = value;
+                        }
+                        else {
+                            data[compKey] = value;
+                        }
                     }
+                    this.updatedDefaultValueCriteria = updateCriteriaInputs(this.defaultValueCriteria ?? {}, data, this.component.user);
                     if (this.visible) {
                         this.attachReact(this.element);
                     }
@@ -124,6 +160,19 @@ export class ObjectComponent extends ReactComponent {
             this.attach(this.element);
             this.attachReact(this.element);
         });
+        if (this.component.defaultValue) {
+            this.expandInstance();
+        }
+    }
+    async expandInstance() {
+        const { property, apiServices, defaultValue } = this.component;
+        const paths = this.component.allCriteriaInputs
+            .filter((input) => input.split('.')[0] === this.component.key)
+            .map((p) => p.split('.').slice(1).join('.'));
+        if (!isEmpty(paths)) {
+            const instance = await populateInstanceWithNestedData(defaultValue.id, property.objectId, paths, apiServices);
+            this.handleChangeObjectProperty(property.id, instance);
+        }
     }
     clearErrors() {
         this.errorDetails = {};

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ActionDialog.d.ts

@@ -1,4 +1,4 @@
-import { Action, ApiServices, Obj, Property, UserAccount } from '@evoke-platform/context';
+import { Action, ApiServices, Obj, UserAccount } from '@evoke-platform/context';
 import React from 'react';
 import { Address, ObjectPropertyInputProps } from '../../types';
 export type ActionDialogProps = {
@@ -13,9 +13,12 @@ export type ActionDialogProps = {
     object: Obj;
     objectInputCommonProps: ObjectPropertyInputProps;
     instanceId?: string;
-    relatedProperty?: Property;
     apiServices: ApiServices;
     queryAddresses?: (query: string) => Promise<Address[]>;
     user?: UserAccount;
+    associatedObject?: {
+        instanceId: string;
+        propertyId: string;
+    };
 };
 export declare const ActionDialog: (props: ActionDialogProps) => React.JSX.Element;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ActionDialog.js

@@ -36,7 +36,7 @@ const styles = {
     },
 };
 export const ActionDialog = (props) => {
-    const { open, onClose, action, instanceInput, handleSubmit, apiServices, object, instanceId, relatedProperty, objectInputCommonProps, queryAddresses, user, } = props;
+    const { open, onClose, action, instanceInput, handleSubmit, apiServices, object, instanceId, objectInputCommonProps, queryAddresses, associatedObject, user, } = props;
     const [updatedObject, setUpdatedObject] = useState();
     const [hasAccess, setHasAccess] = useState(false);
     const [loading, setLoading] = useState(false);
@@ -57,18 +57,16 @@ export const ActionDialog = (props) => {
     }, [object, instanceId]);
     useEffect(() => {
         const input = (action.form?.entries && action.parameters) || action?.inputProperties
-            ? (action.form?.entries && action.parameters
+            ? action.form?.entries && action.parameters
                 ? convertFormToComponents(action.form.entries, action.parameters, object)
-                : action?.inputProperties)?.filter((inputProperty) => inputProperty?.key !== relatedProperty?.relatedPropertyId)
+                : action?.inputProperties
             : undefined;
         const updatedAction = {
             ...action,
             form: input ? { entries: convertComponentsToForm(input) } : undefined,
         };
-        const properties = object.properties?.filter((prop) => prop.id !== relatedProperty?.relatedPropertyId);
         setUpdatedObject({
             ...object,
-            properties,
             actions: concat(object.actions?.filter((a) => a.id !== action.id) ?? [], [updatedAction]),
         });
     }, [object]);
@@ -78,7 +76,7 @@ export const ActionDialog = (props) => {
             React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
                 React.createElement(Close, { fontSize: "small" })),
             action && hasAccess && !loading ? action?.name : ''),
-        React.createElement(DialogContent, null, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } }, (updatedObject || isDeleteAction) && (React.createElement(Form, { actionId: action.id, actionType: action.type, apiServices: objectInputCommonProps.apiServices, object: !isDeleteAction ? updatedObject : object, instance: instanceInput, onSave: async (data, setSubmitting) => handleSubmit(action.type, data, instanceId, setSubmitting), objectInputCommonProps: objectInputCommonProps, closeModal: onClose, queryAddresses: queryAddresses, user: user, submitButtonLabel: isDeleteAction ? 'Delete' : undefined })))) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
+        React.createElement(DialogContent, null, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } }, (updatedObject || isDeleteAction) && (React.createElement(Form, { actionId: action.id, actionType: action.type, apiServices: objectInputCommonProps.apiServices, object: !isDeleteAction ? updatedObject : object, instance: instanceInput, onSave: async (data, setSubmitting) => handleSubmit(action.type, data, instanceId, setSubmitting), objectInputCommonProps: objectInputCommonProps, closeModal: onClose, queryAddresses: queryAddresses, user: user, submitButtonLabel: isDeleteAction ? 'Delete' : undefined, associatedObject: associatedObject })))) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }))) : (React.createElement(ErrorComponent, { code: 'AccessDenied', message: 'You do not have permission to perform this action.', styles: { boxShadow: 'none' } })))))));

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.js

@@ -405,7 +405,9 @@ const RepeatableField = (props) => {
         relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? relatedInstances.find((i) => i.id === selectedRow) ?? {} : {}, handleSubmit: save, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             objectInputCommonProps: { apiServices }, action: relatedObject?.actions?.find((a) => a.id ===
-                (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, relatedProperty: property, queryAddresses: queryAddresses, user: user })),
+                (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, queryAddresses: queryAddresses, user: user, associatedObject: instance.id && property.relatedPropertyId
+                ? { instanceId: instance.id, propertyId: property.relatedPropertyId }
+                : undefined })),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));
 };
 export default RepeatableField;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableFieldComponent.js

@@ -1,11 +1,10 @@
 import { ApiBaseUrlProvider, NotificationProvider, } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
-import dot from 'dot-object';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEmpty, isObject } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { FormComponentWrapper } from '../../Common';
-import { getAllCriteriaInputs, updateCriteriaInputs } from '../../utils';
+import { getCriteriaInputs, populateInstanceWithNestedData, updateCriteriaInputs } from '../../utils';
 import { DropdownRepeatableField } from './ManyToMany/DropdownRepeatableField';
 import RepeatableField from './RepeatableField';
 const apiBaseUrl = process.env.REACT_APP_API_ROOT || `${window.location.origin}/api`;
@@ -23,24 +22,43 @@ export class RepeatableFieldComponent extends ReactComponent {
     }
     init() {
         if (this.criteria) {
-            const inputProps = getAllCriteriaInputs(this.criteria);
-            const data = dot.dot(this.root._data);
+            const inputProps = getCriteriaInputs(this.criteria);
+            this.updatedCriteria = updateCriteriaInputs(this.updatedCriteria, this.root._data, this.component.user);
             for (const inputProp of inputProps) {
-                // Parse data to update criteria when form is loaded.
-                updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
                 // Parse data to update criteria when form field is updated
                 // Need to parse all fields again.
                 const compKeyFragments = inputProp.split('.');
                 let compKey = compKeyFragments[0];
-                if (['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
+                const property = this.component.properties.find((c) => c.id === compKey);
+                if (property?.type === 'address' &&
+                    ['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
                     compKey = inputProp;
                 }
-                this.on(`changed-${compKey}`, () => {
-                    const data = dot.dot(this.root._data);
-                    this.updatedCriteria = cloneDeep(this.criteria) ?? {};
-                    for (const inputProp of inputProps) {
-                        updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
+                this.on(`changed-${compKey}`, async (value) => {
+                    const data = this.root._data;
+                    if (property?.type === 'object' && isObject(value) && 'id' in value && 'objectId' in value) {
+                        const paths = this.component.allCriteriaInputs
+                            .filter((input) => input.split('.')[0] === compKey)
+                            .map((p) => p.split('.').slice(1).join('.'));
+                        let instance = value;
+                        if (!isEmpty(paths)) {
+                            instance = await populateInstanceWithNestedData(value['id'], value['objectId'], paths, this.component.apiServices);
+                        }
+                        data[compKey] = instance;
                     }
+                    else {
+                        if (compKey.includes('.')) {
+                            const keyFragments = compKey.split('.');
+                            if (!data[keyFragments[0]]) {
+                                data[keyFragments[0]] = {};
+                            }
+                            data[keyFragments[0]][keyFragments[1]] = value;
+                        }
+                        else {
+                            data[compKey] = value;
+                        }
+                    }
+                    this.updatedCriteria = updateCriteriaInputs(this.criteria ?? {}, data, this.component.user);
                     this.attachReact(this.element);
                 });
             }

package/dist/published/components/custom/Form/tests/Form.test.d.ts

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

package/dist/published/components/custom/Form/tests/Form.test.js

@@ -0,0 +1,112 @@
+import { ApiServices } from '@evoke-platform/context';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import axios from 'axios';
+import { isEqual } from 'lodash';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+import React from 'react';
+import { it } from 'vitest';
+import Form from '../Common/Form';
+import { licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
+const removePoppers = () => {
+    const portalSelectors = ['.MuiAutocomplete-popper'];
+    portalSelectors.forEach((selector) => {
+        // eslint-disable-next-line testing-library/no-node-access
+        document.querySelectorAll(selector).forEach((el) => el.remove());
+    });
+};
+describe('Form component', () => {
+    let server;
+    let apiServices;
+    beforeAll(() => {
+        server = setupServer(http.get('/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/data/objects/license/instances', () => {
+            return HttpResponse.json([rnLicense, npLicense]);
+        }), http.get('/data/objects/specialtyType/instances', (req) => {
+            const filter = new URL(req.request.url).searchParams.get('filter');
+            if (filter) {
+                const whereFilter = JSON.parse(filter).where;
+                // The two objects in the array of conditions in the "where" filter represent the potential filters that can be applied when retrieving "specialty" instances.
+                // The first object is for the the validation criteria, but it is empty if the "license" field, which is referenced in the validation criteria, hasn't been filled out yet.
+                // The second object is for the search criteria which the user enters in the "specialty" field, but it is empty if no search text has been entered.
+                if (isEqual(whereFilter, { and: [{}, {}] }))
+                    return HttpResponse.json([
+                        rnSpecialtyType1,
+                        rnSpecialtyType2,
+                        npSpecialtyType1,
+                        npSpecialtyType2,
+                    ]);
+                else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'rnLicenseType' }, {}] }))
+                    return HttpResponse.json([rnSpecialtyType1, rnSpecialtyType2]);
+                else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'npLicenseType' }, {}] }))
+                    return HttpResponse.json([npSpecialtyType1, npSpecialtyType2]);
+            }
+        }));
+        server.listen();
+    });
+    beforeEach(() => {
+        apiServices = new ApiServices(axios.create());
+    });
+    afterAll(() => {
+        server.close();
+    });
+    afterEach(() => {
+        server.resetHandlers();
+        removePoppers();
+    });
+    describe('validation criteria', () => {
+        it(`filters related object field with validation criteria that references a related object's nested data`, async () => {
+            const user = userEvent.setup();
+            server.use(http.get('/data/objects/license/instances/rnLicense', (req) => {
+                const expand = new URL(req.request.url).searchParams.get('expand');
+                if (expand === 'licenseType.id') {
+                    return HttpResponse.json(rnLicense);
+                }
+            }));
+            render(React.createElement(Form, { actionId: '_create', actionType: 'create', object: specialtyObject, apiServices: apiServices }));
+            const license = await screen.findByRole('combobox', { name: 'License' });
+            // Validate that specialty type dropdown is rendering all options
+            let specialtyType = await screen.findByRole('combobox', { name: 'Specialty Type' });
+            await user.click(specialtyType);
+            let openAutocomplete = await screen.findByRole('listbox');
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #1' });
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #2' });
+            await within(openAutocomplete).findByRole('option', { name: 'NP Specialty Type #1' });
+            await within(openAutocomplete).findByRole('option', { name: 'NP Specialty Type #2' });
+            // Close the specialty type dropdown
+            removePoppers();
+            // Select a license from the dropdown
+            await user.click(license);
+            const rnLicenseOption = await screen.findByRole('option', { name: 'RN License' });
+            await user.click(rnLicenseOption);
+            // Validate that specialty type dropdown is only rendering specialty types that are associated with the selected license.
+            specialtyType = await screen.findByRole('combobox', { name: 'Specialty Type' });
+            await user.click(specialtyType);
+            openAutocomplete = await screen.findByRole('listbox');
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #1' });
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #2' });
+            await waitFor(() => expect(within(openAutocomplete).queryByRole('option', { name: 'NP Specialty Type #1' })).to.be.null);
+            await waitFor(() => expect(within(openAutocomplete).queryByRole('option', { name: 'NP Specialty Type #2' })).to.be.null);
+        });
+        it(`filters related object field with validation criteria that references a defaulted related object's nested data`, async () => {
+            const user = userEvent.setup();
+            server.use(http.get('/data/objects/license/instances/rnLicense', (req) => {
+                const expand = new URL(req.request.url).searchParams.get('expand');
+                if (expand === 'licenseType.id') {
+                    return HttpResponse.json(rnLicense);
+                }
+            }));
+            render(React.createElement(Form, { actionId: '_create', actionType: 'create', object: specialtyObject, apiServices: apiServices, associatedObject: { propertyId: 'license', instanceId: 'rnLicense' } }));
+            // Validate that the license field is hidden
+            await waitFor(() => expect(screen.queryByRole('combobox', { name: 'License' })).to.be.null);
+            // Validate that specialty type dropdown is only rendering specialty types that are associated with the selected license.
+            const specialtyType = await screen.findByRole('combobox', { name: 'Specialty Type' });
+            await user.click(specialtyType);
+            const openAutocomplete = await screen.findByRole('listbox');
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #1' });
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #2' });
+            await waitFor(() => expect(within(openAutocomplete).queryByRole('option', { name: 'NP Specialty Type #1' })).to.be.null);
+            await waitFor(() => expect(within(openAutocomplete).queryByRole('option', { name: 'NP Specialty Type #2' })).to.be.null);
+        });
+    });
+});

package/dist/published/components/custom/Form/tests/test-data.d.ts

@@ -0,0 +1,13 @@
+import { Obj, ObjectInstance } from '@evoke-platform/context';
+export declare const licenseObject: Obj;
+export declare const licenseTypeObject: Obj;
+export declare const specialtyObject: Obj;
+export declare const specialtyTypeObject: Obj;
+export declare const rnLicense: ObjectInstance;
+export declare const npLicense: ObjectInstance;
+export declare const rnLicenseType: ObjectInstance;
+export declare const npLicesneType: ObjectInstance;
+export declare const rnSpecialtyType1: ObjectInstance;
+export declare const rnSpecialtyType2: ObjectInstance;
+export declare const npSpecialtyType1: ObjectInstance;
+export declare const npSpecialtyType2: ObjectInstance;

package/dist/published/components/custom/Form/tests/test-data.js

@@ -0,0 +1,282 @@
+// Objects
+export const licenseObject = {
+    id: 'license',
+    name: 'License',
+    properties: [
+        {
+            id: 'name',
+            name: 'License Number',
+            type: 'string',
+        },
+        {
+            id: 'status',
+            name: 'Status',
+            type: 'string',
+            enum: ['Active', 'Inactive'],
+        },
+        {
+            id: 'licenseType',
+            name: 'License Type',
+            type: 'object',
+            objectId: 'licenseType',
+        },
+    ],
+    actions: [
+        {
+            id: '_update',
+            name: 'Update',
+            type: 'update',
+            outputEvent: 'License Updated',
+        },
+        {
+            id: '_delete',
+            name: 'Delete',
+            type: 'delete',
+            outputEvent: 'License Deleted',
+        },
+        {
+            id: '_create',
+            name: 'Create',
+            type: 'create',
+            outputEvent: 'License Created',
+        },
+    ],
+};
+export const licenseTypeObject = {
+    id: 'licenseType',
+    name: 'License Type',
+    properties: [
+        {
+            id: 'name',
+            name: 'Name',
+            type: 'string',
+        },
+        {
+            id: 'licenseNumberPrefix',
+            name: 'License Number Prefix',
+            type: 'string',
+        },
+    ],
+    actions: [
+        {
+            id: '_update',
+            name: 'Update',
+            type: 'update',
+            outputEvent: 'License Type Updated',
+        },
+        {
+            id: '_delete',
+            name: 'Delete',
+            type: 'delete',
+            outputEvent: 'License Type Deleted',
+        },
+        {
+            id: '_create',
+            name: 'Create',
+            type: 'create',
+            outputEvent: 'License Type Created',
+        },
+    ],
+};
+export const specialtyObject = {
+    id: 'specialty',
+    name: 'Specialty',
+    properties: [
+        {
+            id: 'name',
+            name: 'Name',
+            type: 'string',
+        },
+        {
+            id: 'specialtyType',
+            name: 'Specialty Type',
+            type: 'object',
+            objectId: 'specialtyType',
+        },
+        {
+            id: 'license',
+            name: 'License',
+            type: 'object',
+            objectId: 'license',
+        },
+    ],
+    actions: [
+        {
+            id: '_update',
+            name: 'Update',
+            type: 'update',
+            outputEvent: 'Specialty Updated',
+        },
+        {
+            id: '_delete',
+            name: 'Delete',
+            type: 'delete',
+            outputEvent: 'Specialty Deleted',
+        },
+        {
+            id: '_create',
+            name: 'Create',
+            type: 'create',
+            outputEvent: 'Specialty Created',
+            parameters: [
+                {
+                    id: 'name',
+                    name: 'Name',
+                    type: 'string',
+                },
+                {
+                    id: 'specialtyType',
+                    name: 'Specialty Type',
+                    type: 'object',
+                    objectId: 'specialtyType',
+                    validation: {
+                        criteria: {
+                            $and: [{ 'licenseType.id': '{{{input.license.licenseType.id}}}' }],
+                        },
+                    },
+                },
+                {
+                    id: 'license',
+                    name: 'License',
+                    type: 'object',
+                    objectId: 'license',
+                },
+            ],
+            form: {
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: {
+                            label: 'Name',
+                        },
+                    },
+                    {
+                        parameterId: 'specialtyType',
+                        type: 'input',
+                        display: {
+                            label: 'Specialty Type',
+                            relatedObjectDisplay: 'dropdown',
+                        },
+                    },
+                    {
+                        parameterId: 'license',
+                        type: 'input',
+                        display: {
+                            label: 'License',
+                            relatedObjectDisplay: 'dropdown',
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};
+export const specialtyTypeObject = {
+    id: 'specialtyType',
+    name: 'Specialty Type',
+    properties: [
+        {
+            id: 'name',
+            name: 'Name',
+            type: 'string',
+        },
+        {
+            id: 'licenseType',
+            name: 'License Type',
+            type: 'object',
+            objectId: 'licenseType',
+        },
+    ],
+    actions: [
+        {
+            id: '_update',
+            name: 'Update',
+            type: 'update',
+            outputEvent: 'Specialty Type Updated',
+        },
+        {
+            id: '_delete',
+            name: 'Delete',
+            type: 'delete',
+            outputEvent: 'Specialty Type Deleted',
+        },
+        {
+            id: '_create',
+            name: 'Create',
+            type: 'create',
+            outputEvent: 'Specialty Type Created',
+        },
+    ],
+};
+// Instances
+export const rnLicense = {
+    id: 'rnLicense',
+    objectId: 'license',
+    name: 'RN License',
+    licenseType: {
+        id: 'rnLicenseType',
+        name: 'RN License Type',
+    },
+    status: 'Active',
+};
+export const npLicense = {
+    id: 'npLicense',
+    objectId: 'license',
+    name: 'NP License',
+    licenseType: {
+        id: 'npLicenseType',
+        name: 'NP License Type',
+    },
+    status: 'Active',
+};
+export const rnLicenseType = {
+    id: 'rnLicenseType',
+    objectId: 'licenseType',
+    name: 'RN License Type',
+    licenseNumberPrefix: 'RN',
+};
+export const npLicesneType = {
+    id: 'npLicenseType',
+    objectId: 'licenseType',
+    name: 'NP License Type',
+    licenseNumberPrefix: 'NP',
+};
+export const rnSpecialtyType1 = {
+    id: 'specialtyType1',
+    objectId: 'specialtyType',
+    name: 'RN Specialty Type #1',
+    int: 1,
+    licenseType: {
+        id: 'rnLicenseType',
+        name: 'RN License Type',
+    },
+};
+export const rnSpecialtyType2 = {
+    id: 'specialtyType2',
+    objectId: 'specialtyType',
+    name: 'RN Specialty Type #2',
+    int: 1,
+    licenseType: {
+        id: 'rnLicenseType',
+        name: 'RN License Type',
+    },
+};
+export const npSpecialtyType1 = {
+    id: 'specialtyType3',
+    objectId: 'specialtyType',
+    name: 'NP Specialty Type #1',
+    licenseType: {
+        id: 'npLicenseType',
+        name: 'NP License Type',
+    },
+};
+export const npSpecialtyType2 = {
+    id: 'specialtyType4',
+    objectId: 'specialtyType',
+    name: 'NP Specialty Type #2',
+    licenseType: {
+        id: 'npLicenseType',
+        name: 'NP License Type',
+    },
+};

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

@@ -1,4 +1,4 @@
-import { ActionInput, ActionInputType, ApiServices, FormEntry, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType } from '@evoke-platform/context';
+import { ActionInput, ActionInputType, ApiServices, FormEntry, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType, UserAccount } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import { LocalDateTime } from '@js-joda/core';
 import { AutocompleteOption } from '../../core';
@@ -21,7 +21,11 @@ export declare function getMiddleObject(instance: ObjectInstance, property: Prop
 } | undefined;
 export declare function getMiddleInstance(instanceId: string, property: Property, middleObjectInstances: ObjectInstance[]): ObjectInstance | undefined;
 export declare function getPrefixedUrl(url: string): string;
-export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: (query: string) => Promise<Address[]>, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent): Promise<ActionInput[]>;
+export declare function flattenFormComponents(components?: ActionInput[]): ActionInput[];
+export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], allCriteriaInputs?: string[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, associatedObject?: {
+    instanceId?: string;
+    propertyId?: string;
+}, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: (query: string) => Promise<Address[]>, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent): Promise<ActionInput[]>;
 export declare function getDefaultValue(initialValue: unknown, selectOptions?: AutocompleteOption[]): unknown;
 export declare const buildComponentPropsFromObjectProperties: (properties: Property[], objectId: string, instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, hasActionPermissions?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, readOnly?: boolean, queryAddresses?: ((query: string) => Promise<Address[]>) | undefined, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent) => unknown[];
 export declare const buildComponentPropsFromDocumentProperties: (documentProperties: [string, unknown][], readOnly?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, fieldHeight?: 'small' | 'medium') => {
@@ -35,8 +39,10 @@ export declare const buildComponentPropsFromDocumentProperties: (documentPropert
 }[];
 export declare const OPERATOR_MAP: Record<string, string>;
 export declare function transformToWhere(mongoQuery: object): Record<string, unknown>;
-export declare function updateCriteriaInputs(criteria: Record<string, unknown>, field: string, fieldValue: string, isInputField?: boolean): void;
-export declare function getAllCriteriaInputs(criteria: Record<string, unknown>): string[];
+export declare function updateCriteriaInputs(criteria: Record<string, unknown>, data: Record<string, unknown>, user?: UserAccount): Record<string, unknown>;
+export declare function getCriteriaInputs(criteria?: Record<string, unknown>): string[];
+export declare function getAllCriteriaInputs(components: ActionInput[] | InputParameter[]): string[];
+export declare function populateInstanceWithNestedData(instanceId: string, objectId: string, paths: string[], apiServices: ApiServices): Promise<ObjectInstance>;
 export declare function isPropertyVisible(conditional: {
     when: string;
     show: boolean;

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

@@ -1,6 +1,10 @@
 import { camelCase, get, isArray, isEmpty, isNil, isObject, isUndefined, pick, startCase, transform, uniq, } from 'lodash';
 import { DateTime } from 'luxon';
 import { nanoid } from 'nanoid';
+import Handlebars from 'no-eval-handlebars';
+import qs from 'qs';
+import { defaultRuleProcessorMongoDB, formatQuery, parseMongoDB, } from 'react-querybuilder';
+import escape from 'string-escape-regex';
 // The following functions are used to build the FormIO form components from the form parameters.
 export function determineComponentType(properties, parameter) {
     if (!parameter)
@@ -163,6 +167,7 @@ export function convertFormToComponents(entries, parameters, object) {
                     name: topLevelProperty?.name
                         ? `${topLevelProperty.name} ${startCase(property.id.split('.')[1])}`
                         : startCase(property.id.split('.')[1]),
+                    type: topLevelProperty?.type,
                 };
             }
             const type = determineComponentType(object.properties ?? [], parameter);
@@ -482,11 +487,26 @@ export function getPrefixedUrl(url) {
     console.error('Invalid URL');
     return url;
 }
+export function flattenFormComponents(components) {
+    if (!components)
+        return [];
+    return components.reduce((acc, component) => {
+        if (component.type === 'Section') {
+            return acc.concat(component.components?.flatMap((components) => flattenFormComponents(components.components)) ?? []);
+        }
+        else if (component.type === 'Columns') {
+            return acc.concat(component.columns?.flatMap((column) => flattenFormComponents(column.components)) ?? []);
+        }
+        else {
+            return acc.concat(component);
+        }
+    }, []);
+}
 // The following function adds the object properties to the form components.
 // This function is used when there is no form configured in the form builder.
 export async function addObjectPropertiesToComponentProps(properties, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor) {
+formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor) {
     return [
         ...(await Promise.all(formComponents
             ?.filter((component) => !isUndefined(component) && !isNil(component))
@@ -624,6 +644,8 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                         ...(component.type === 'Object' && objectPropertyInputProps),
                         defaultValue,
                         property,
+                        allCriteriaInputs,
+                        properties,
                         type: `${readOnly ? 'ViewOnly' : ''}${component.type}`,
                         readOnly: component.readOnly || readOnly || property?.formula,
                         multiple: ['array', 'document'].includes(property.type),
@@ -648,13 +670,24 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                             : undefined,
                     };
                 }
-                const defaultValue = getDefaultValue(isNil(instanceValue) ? component.initialValue : instanceValue, component?.data?.values);
+                let defaultValue = getDefaultValue(isNil(instanceValue) ? component.initialValue : instanceValue, component?.data?.values);
+                // If "associatedObject" is defined, that means the form is associating an existing instance with the current instance.
+                // Set the associated instance as a default value and hide the field.
+                if (associatedObject?.instanceId &&
+                    associatedObject?.propertyId &&
+                    associatedObject?.propertyId === property.id) {
+                    defaultValue = { id: associatedObject.instanceId };
+                    component.hidden = true;
+                }
                 return {
                     ...component,
                     ...(component.type === 'Object' && objectPropertyInputProps),
                     type: `${readOnly ? 'ViewOnly' : ''}${component.type}`,
                     defaultValue,
+                    allCriteriaInputs,
+                    properties,
                     property,
+                    associatedObject,
                     readOnly: component.readOnly || readOnly || property?.formula,
                     multiple: ['array', 'document'].includes(property.type),
                     instance: instance,
@@ -693,7 +726,7 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
             }
             if (component.columns) {
                 for (const column of component.columns) {
-                    column.components = await addObjectPropertiesToComponentProps(properties, column.components, instance, objectPropertyInputProps, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor);
+                    column.components = await addObjectPropertiesToComponentProps(properties, column.components, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor);
                 }
                 return component;
             }
@@ -713,6 +746,14 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                         if (item.type.includes('RepeatableField') && !!instance) {
                             item.instance = instance;
                         }
+                        // If "associatedObject" is defined, that means the form is associating an existing instance with the current instance.
+                        // Set the associated instance as a default value and hide the field.
+                        if (associatedObject?.instanceId &&
+                            associatedObject?.propertyId &&
+                            item.property.id === associatedObject.propertyId) {
+                            item.defaultValue = { id: associatedObject.instanceId };
+                            item.hidden = true;
+                        }
                     }
                     if (nestedFieldProperty) {
                         item.type = `${readOnly ? 'ViewOnly' : ''}${item.type}`;
@@ -725,6 +766,7 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                     item.user = objectPropertyInputProps?.user;
                     item.defaultPages = defaultPages;
                     item.navigateTo = navigateTo;
+                    item.allCriteriaInputs = allCriteriaInputs;
                     item.isModal = isModal;
                     item.fieldHeight = fieldHeight;
                     item.richTextEditor = ['RepeatableField', 'Object'].includes(item.type)
@@ -751,7 +793,7 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                     }
                 }
                 return {
-                    components: await addObjectPropertiesToComponentProps(properties, component.components, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor),
+                    components: await addObjectPropertiesToComponentProps(properties, component.components, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor),
                     ...component,
                     ...(component.type === 'Object' && objectPropertyInputProps),
                     type: `${readOnly ? 'ViewOnly' : ''}${component.type}`,
@@ -1127,61 +1169,100 @@ export function transformToWhere(mongoQuery) {
         result[newKey] = isObject(value) ? transformToWhere(value) : value;
     });
 }
-export function updateCriteriaInputs(criteria, field, fieldValue, isInputField) {
-    for (const [key, value] of Object.entries(criteria)) {
-        if (isArray(value)) {
-            for (const index in value) {
-                if (isObject(value[index])) {
-                    updateCriteriaInputs(value[index], field, fieldValue, isInputField);
-                }
-                else {
-                    value[index] =
-                        typeof value[index] === 'string'
-                            ? value[index]
-                                ?.replaceAll(!isInputField ? `{{{${field}}}}` : `{{{input.${field}}}}`, fieldValue ?? '')
-                                .trim() || undefined
-                            : value ?? undefined;
-                }
-            }
-        }
-        else if (isObject(value)) {
-            updateCriteriaInputs(value, field, fieldValue, isInputField);
+function compileQueryValues(query, data) {
+    if ('rules' in query && Array.isArray(query.rules)) {
+        const updatedRules = query.rules
+            .map((item) => compileQueryValues(item, data))
+            .filter((item) => item !== undefined);
+        if (updatedRules?.length) {
+            return {
+                ...query,
+                rules: updatedRules,
+            };
         }
         else {
-            criteria[key] =
-                typeof value === 'string'
-                    ? value
-                        ?.replaceAll(!isInputField ? `{{{${field}}}}` : `{{{input.${field}}}}`, fieldValue ?? '')
-                        .trim() || undefined
-                    : value ?? undefined;
+            return undefined;
         }
     }
-}
-export function getAllCriteriaInputs(criteria) {
-    const result = [];
-    for (const [, value] of Object.entries(criteria)) {
-        if (isArray(value)) {
-            for (const item of value) {
-                if (item && typeof item === 'object') {
-                    const inputProps = getAllCriteriaInputs(item);
-                    inputProps && result.push(...inputProps);
-                }
-                else {
-                    const inputProps = typeof item === 'string' ? item.match(/{{{input\..*}}}/g) : undefined;
-                    inputProps && result.push(...inputProps);
-                }
+    else {
+        if ('value' in query && typeof query.value === 'string') {
+            const template = Handlebars.compileAST(query.value);
+            const result = template(data);
+            if (result !== '') {
+                return {
+                    ...query,
+                    value: result,
+                };
+            }
+            else {
+                return undefined;
             }
         }
-        else if (value && typeof value === 'object') {
-            const inputProps = getAllCriteriaInputs(value);
-            inputProps && result.push(...inputProps);
-        }
-        else {
-            const inputProps = typeof value === 'string' ? value.match(/{{{input\..*}}}/g) : undefined;
-            inputProps && result.push(...inputProps);
-        }
+        return query;
+    }
+}
+export function updateCriteriaInputs(criteria, data, user) {
+    const dataSet = {
+        input: {
+            ...data,
+        },
+        user: user,
+    };
+    const compiledQuery = compileQueryValues(parseMongoDB(criteria), dataSet);
+    // The "compiledQueryValues" function filters out rules that have a value of "undefined".
+    // If "compiledQuery" is "undefined", that means that all rules and nested rules have a value of "undefined".
+    // Therefore, the resulting query is empty.
+    return !compiledQuery
+        ? {}
+        : JSON.parse(formatQuery(compiledQuery, {
+            format: 'mongodb',
+            ruleProcessor: (rule, options) => {
+                let updatedRule = rule;
+                if (['contains', 'beginsWith', 'endsWith'].includes(rule.operator)) {
+                    updatedRule = { ...rule, value: escape(rule.value) };
+                }
+                return defaultRuleProcessorMongoDB(updatedRule, options);
+            },
+        }));
+}
+function getRuleValues(query) {
+    const values = [];
+    if ('rules' in query && Array.isArray(query.rules)) {
+        query.rules.forEach((item) => {
+            values.push(...getRuleValues(item));
+        });
+    }
+    else {
+        values.push(query.value);
+    }
+    return values;
+}
+export function getCriteriaInputs(criteria) {
+    if (!criteria)
+        return [];
+    const values = getRuleValues(parseMongoDB(criteria)).filter((val) => typeof val === 'string' && val.match(/{{{input\..*}}}/g));
+    return uniq(values).map((item) => item.replace('{{{input.', '').replace('}}}', ''));
+}
+export function getAllCriteriaInputs(components) {
+    const allComponents = components;
+    const results = allComponents.reduce((inputs, c) => inputs.concat(getCriteriaInputs(c.validate?.criteria ??
+        c.validation?.criteria)), []);
+    return results;
+}
+export async function populateInstanceWithNestedData(instanceId, objectId, paths, apiServices) {
+    let instance = { id: instanceId, objectId };
+    try {
+        instance = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}`), {
+            params: {
+                expand: paths,
+            },
+            paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repeat' }),
+        });
+    }
+    catch (err) {
+        console.log(err);
     }
-    return uniq(result.map((item) => item.replace('{{{input.', '').replace('}}}', '')));
+    return instance;
 }
 export function isPropertyVisible(conditional, formData) {
     const isConditional = !!conditional?.when;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.4.0-testing.1",
+    "version": "1.4.0-testing.2",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -51,7 +51,6 @@
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.2",
         "@testing-library/user-event": "^14.5.2",
-        "@types/dot-object": "^2.1.6",
         "@types/flat": "^5.0.5",
         "@types/jest": "^28.1.4",
         "@types/luxon": "^3.4.2",
@@ -111,12 +110,12 @@
         "devexpress-richedit": "^23.1.5",
         "devextreme": "^23.1.5",
         "devextreme-dist": "^23.1.5",
-        "dot-object": "^2.1.5",
         "eslint-plugin-no-inline-styles": "^1.0.5",
         "flat": "^6.0.1",
         "formiojs": "^4.15.0-rc.23",
         "html-react-parser": "^5.1.18",
         "luxon": "^2.5.2",
+        "msw": "^2.7.3",
         "nanoid": "^5.0.8",
         "nanoid-dictionary": "^4.3.0",
         "no-eval-handlebars": "^1.0.2",