@evoke-platform/ui-components 1.13.0-dev.6 → 1.13.0

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.d.ts

@@ -1,10 +1,10 @@
-import { Property } from '@evoke-platform/context';
 import React from 'react';
 import 'react-querybuilder/dist/query-builder.css';
-import { Operator, PresetValue, TreeViewObject } from './types';
+import { EvokeObject } from '../../../types';
+import { ObjectProperty, Operator, PresetValue, TreeViewObject } from './types';
 import { ValueEditorProps } from './ValueEditor';
 export type CriteriaInputProps = {
-    properties: Property[];
+    properties: ObjectProperty[];
     setCriteria: (criteria?: Record<string, unknown> | undefined) => void;
     criteria?: Record<string, unknown>;
     originalCriteria?: Record<string, unknown>;
@@ -23,7 +23,7 @@ export type CriteriaInputProps = {
     hideBorder?: boolean;
     presetGroupLabel?: string;
     treeViewOpts?: {
-        fetchObject?: (objectId: string) => Promise<TreeViewObject | undefined>;
+        fetchObject?: (objectId: string) => Promise<EvokeObject | undefined>;
         object: TreeViewObject;
     };
     /**

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -11,7 +11,7 @@ import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
 import { difference } from '../util';
 import PropertyTree from './PropertyTree';
-import { ALL_OPERATORS, parseMongoDB } from './utils';
+import { ALL_OPERATORS, parseMongoDB, traversePropertyPath } from './utils';
 import ValueEditor from './ValueEditor';
 const styles = {
     buttons: {
@@ -103,7 +103,6 @@ const customSelector = (props) => {
     const isTreeViewEnabled = context.treeViewOpts && title === 'Fields';
     const fetchObject = context.treeViewOpts?.fetchObject;
     const object = context.treeViewOpts?.object;
-    const setObject = context.treeViewOpts?.setObject;
     let readOnly = context.disabled;
     if (!readOnly && context.disabledCriteria) {
         readOnly =
@@ -174,7 +173,14 @@ const customSelector = (props) => {
             val = options.find((option) => option.name === val)?.name;
             break;
     }
-    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, setRootObject: setObject, fetchObject: fetchObject, propertyTreeMap: context.propertyTreeMap ?? {}, handleTreePropertySelect: handleOnChange })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
+    const handleTreePropertySelect = async (propertyId) => {
+        const propertyInfo = await traversePropertyPath(propertyId, object, fetchObject);
+        context.setPropertyTreeMap((prev) => {
+            return { ...prev, [propertyId]: propertyInfo };
+        });
+        handleOnChange(propertyId);
+    };
+    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, propertyTreeMap: context.propertyTreeMap ?? {}, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return opts.find((o) => option === o.name)?.label || option;
             }
@@ -269,159 +275,77 @@ const getAllRuleIds = (rules) => {
     });
     return ids;
 };
-const processRules = (rules, properties) => {
-    return rules.map((rule) => {
-        if ('rules' in rule) {
-            return {
-                ...rule,
-                rules: processRules(rule.rules, properties),
-            };
-        }
-        else {
-            const propertyType = properties.find((property) => property.id === rule.field)?.type;
-            let adjustedValue = rule.value;
-            if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
-                adjustedValue = null;
-            }
-            return {
-                ...rule,
-                operator: propertyType === 'array' && rule.operator === '=' ? 'in' : rule.operator,
-                value: adjustedValue,
-            };
-        }
-    });
-};
-const insertChangesOnly = (prev, newObject) => {
-    const mergedProperties = newObject.properties.map((newProp) => {
-        const prevProp = prev.properties.find((prop) => prop.id === newProp.id);
-        if (prevProp) {
-            return {
-                ...newProp,
-                children: newProp.children &&
-                    newProp.children[0].type === 'loading' &&
-                    prevProp.children
-                    ? prevProp.children
-                    : newProp.children && prevProp.children
-                        ? insertChangesOnly({ id: prevProp.id, name: prevProp.name, properties: prevProp.children }, { id: newProp.id, name: newProp.name, properties: newProp.children }).properties
-                        : newProp.children,
-            };
-        }
-        else {
-            return newProp;
-        }
-    });
-    return {
-        ...newObject,
-        properties: mergedProperties,
-    };
-};
 const CriteriaBuilder = (props) => {
     const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
-    const [propertyTreeMap, setPropertyTreeMap] = useState({});
-    const [treeViewObject, setTreeViewObject] = useState();
-    useEffect(() => {
-        let obj;
-        if (treeViewOpts?.object) {
-            obj = {
-                ...treeViewOpts.object,
-                properties: treeViewOpts.object.properties
-                    .filter((prop) => prop.type !== 'collection')
-                    .map((prop) => ({
-                    ...prop,
-                    children: prop.children
-                        ?.filter((child) => child.type !== 'collection')
-                        .map((child) => ({
-                        ...child,
-                        id: `${prop.id}.${child.id}`,
-                    })),
-                })),
-            };
-        }
-        if ((criteria || originalCriteria) && obj && treeViewOpts?.fetchObject) {
-            const updateTreeViewObject = async (criteria, treeViewObject, fetchObject) => {
-                const newQuery = parseMongoDB(criteria);
-                const ids = getAllRuleIds(newQuery.rules);
-                const newTreeViewObject = { ...treeViewObject };
-                const traversePath = async (path, properties, fetchObject) => {
-                    const prop = properties?.find((prop) => path.startsWith(`${prop.id}.`) || path === prop.id);
-                    if (prop?.type === 'object' && prop.objectId && prop.children) {
-                        if (prop.children.length === 1 &&
-                            prop.children[0]?.type === 'loading') {
-                            try {
-                                const fetchedObject = await fetchObject(prop.objectId);
-                                prop.children = fetchedObject?.properties
-                                    ?.filter((item) => item.type !== 'collection')
-                                    .map((item) => {
-                                    return {
-                                        ...item,
-                                        id: `${prop.id}.${item.id}`,
-                                        children: item.children?.map((child) => ({
-                                            ...child,
-                                            id: `${prop.id}.${item.id}.${child.id}`,
-                                        })),
-                                    };
-                                });
-                                fetchedObject && (await traversePath(path, fetchedObject.properties, fetchObject));
-                            }
-                            catch (error) {
-                                prop.children = [
-                                    {
-                                        id: `${prop.id}-failed`,
-                                        name: 'Loading Failed',
-                                        type: 'loadingFailed',
-                                    },
-                                ];
-                                console.error('Error fetching object for criteria builder:', error);
-                            }
-                        }
-                        else {
-                            await traversePath(path, prop.children, fetchObject);
-                        }
-                    }
+    const [propertyTreeMap, setPropertyTreeMap] = useState();
+    const processRules = (rules) => {
+        return rules.map((rule) => {
+            if ('rules' in rule) {
+                return {
+                    ...rule,
+                    rules: processRules(rule.rules),
                 };
-                for (const id of ids) {
-                    await traversePath(id, newTreeViewObject.properties, fetchObject);
+            }
+            else {
+                const propertyType = properties.find((property) => property.id === rule.field)?.type;
+                let adjustedValue = rule.value;
+                if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
+                    adjustedValue = null;
                 }
-                setTreeViewObject((prevTreeViewObject) => prevTreeViewObject ? insertChangesOnly(prevTreeViewObject, newTreeViewObject) : newTreeViewObject);
-            };
-            updateTreeViewObject(criteria || originalCriteria || {}, obj, treeViewOpts.fetchObject);
-        }
-    }, [treeViewOpts, criteria, originalCriteria]);
+                return {
+                    ...rule,
+                    operator: propertyType === 'array' && rule.operator === '=' ? 'in' : rule.operator,
+                    value: adjustedValue,
+                };
+            }
+        });
+    };
     useEffect(() => {
-        if (!treeViewObject)
-            return;
-        const getNamePath = (path, object) => {
-            const helper = (path, object) => {
-                let namePath = '';
-                const prop = (object.properties ?? []).find((prop) => path.startsWith(`${prop.id}.`) || path === prop.id);
-                if (prop) {
-                    if (prop.children) {
-                        const result = helper(path, { id: prop.id, name: prop.name, properties: prop.children });
-                        namePath = result ? prop.name + ' / ' + result : '';
-                    }
-                    else {
-                        namePath = prop.name;
+        if ((criteria || originalCriteria) &&
+            !isEmpty(treeViewOpts) &&
+            treeViewOpts.object &&
+            treeViewOpts.fetchObject) {
+            const { object, fetchObject } = treeViewOpts;
+            // this retrieves the properties from a treeview for each property in the query
+            // they are then used in the custom query builder components to determine the input type etc
+            const updatePropertyTreeMap = async () => {
+                const newQuery = parseMongoDB(criteria || originalCriteria || {});
+                const ids = getAllRuleIds(newQuery.rules);
+                let newPropertyTreeMap = {};
+                const newPropertyTreeMapPromises = [];
+                for (const id of ids) {
+                    if (!propertyTreeMap?.[id]) {
+                        newPropertyTreeMapPromises.push(traversePropertyPath(id, object, fetchObject)
+                            .then((property) => {
+                            if (property) {
+                                return {
+                                    [id]: property,
+                                };
+                            }
+                            return {};
+                        })
+                            .catch((err) => {
+                            console.error(err);
+                            return {};
+                        }));
                     }
                 }
-                return namePath;
+                newPropertyTreeMap = (await Promise.all(newPropertyTreeMapPromises)).reduce((acc, currentProperty) => ({ ...acc, ...currentProperty }), {});
+                setPropertyTreeMap((prevPropertyTreeMap) => ({
+                    ...prevPropertyTreeMap,
+                    ...newPropertyTreeMap,
+                }));
             };
-            return helper(path, object) || path;
-        };
-        const newQuery = parseMongoDB(criteria || originalCriteria || {});
-        const ids = getAllRuleIds(newQuery.rules);
-        const result = {};
-        for (const id of ids) {
-            result[id] = getNamePath(id, treeViewObject);
+            updatePropertyTreeMap().catch((err) => console.error(err));
         }
-        setPropertyTreeMap(result);
-    }, [criteria, originalCriteria, treeViewObject]);
+    }, [criteria, originalCriteria, treeViewOpts]);
     const initializeQuery = () => {
         const criteriaToParse = criteria || originalCriteria;
         const updatedQuery = criteriaToParse ? parseMongoDB(criteriaToParse || {}) : undefined;
         return updatedQuery
             ? {
                 ...updatedQuery,
-                rules: processRules(updatedQuery.rules, properties),
+                rules: processRules(updatedQuery.rules),
             }
             : { combinator: 'and', rules: [] };
     };
@@ -447,7 +371,7 @@ const CriteriaBuilder = (props) => {
     const handleQueryChange = (q) => {
         const processedQuery = {
             ...q,
-            rules: processRules(q.rules, properties),
+            rules: processRules(q.rules),
         };
         setQuery(processedQuery);
         const newCriteria = JSON.parse(formatQuery(processedQuery, {
@@ -601,14 +525,17 @@ const CriteriaBuilder = (props) => {
                         presetGroupLabel,
                         disabled,
                         disabledCriteria,
-                        treeViewOpts: treeViewObject && treeViewOpts
+                        treeViewOpts: treeViewOpts
                             ? {
                                 ...treeViewOpts,
-                                object: treeViewObject,
-                                setObject: setTreeViewObject,
+                                object: {
+                                    ...treeViewOpts?.object,
+                                    properties: treeViewOpts?.object.properties.filter(({ type }) => type !== 'collection'),
+                                },
                             }
                             : undefined,
                         propertyTreeMap,
+                        setPropertyTreeMap,
                     }, controlClassnames: {
                         ruleGroup: 'container',
                     }, operators: operators

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.test.js

@@ -1,196 +1,74 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { beforeEach, describe, it, vi } from 'vitest';
+import { expect, it } from 'vitest';
 import CriteriaBuilder from './CriteriaBuilder';
-describe('CriteriaBuilderWithTreeView', () => {
-    // Mock function for setCriteria
-    const setCriteriaMock = vi.fn();
-    beforeEach(() => {
-        // Reset the mock before each test
-        setCriteriaMock.mockReset();
-    });
-    it('expands related object property', async () => {
-        const user = userEvent.setup();
-        render(React.createElement(CriteriaBuilder, { treeViewOpts: {
-                object: {
-                    id: 'objectA',
-                    name: 'Object A',
-                    properties: [
-                        {
-                            id: 'relatedObjectProp',
-                            name: 'Related Object Prop',
-                            type: 'object',
-                            objectId: 'objectB',
-                            children: [
-                                {
-                                    id: 'relatedObjectProp-loading',
-                                    name: 'Loading...',
-                                    type: 'loading',
-                                },
-                            ],
-                        },
-                    ],
-                },
-                fetchObject: async (id) => {
-                    if (id === 'objectB') {
-                        // add delay to simulate network request
-                        return new Promise((resolve) => setTimeout(() => {
-                            resolve({
-                                id: 'objectB',
-                                name: 'Object B',
-                                properties: [
-                                    {
-                                        id: 'id',
-                                        name: 'ID',
-                                        type: 'string',
-                                    },
-                                    {
-                                        id: 'name',
-                                        name: 'Name',
-                                        type: 'string',
-                                    },
-                                ],
-                            });
-                        }, 5000));
-                    }
-                    return undefined;
-                },
-            }, properties: [], criteria: {}, setCriteria: setCriteriaMock }));
-        // Step 1: Click "Add Condition" button to create a new rule
-        const addConditionButton = screen.getByRole('button', { name: /^add condition$/i });
-        await user.click(addConditionButton);
-        // Step 2: Click on the property selector to open the dropdown
-        const propertySelector = screen.getByPlaceholderText(/select a property/i);
-        await user.click(propertySelector);
-        // Step 3: Click on "Related Object Prop" to expand it and fetch its children
-        const relatedObjectPropItem = screen.getByText('Related Object Prop');
-        await user.click(relatedObjectPropItem);
-        // Step 4: Verify loading indicator is shown
-        expect(screen.getByText('Loading...')).toBeInTheDocument();
-        // Step 5: Wait for the related object properties to load and verify ID and Name are visible
-        await waitFor(() => {
-            expect(screen.getByText('ID')).toBeInTheDocument();
-            // eslint-disable-next-line testing-library/no-wait-for-multiple-assertions
-            expect(screen.getByText('Name')).toBeInTheDocument();
-        }, { timeout: 6000 });
-    });
-    it('fails to expand related object property', async () => {
-        const user = userEvent.setup();
-        render(React.createElement(CriteriaBuilder, { treeViewOpts: {
-                object: {
-                    id: 'objectA',
-                    name: 'Object A',
-                    properties: [
-                        {
-                            id: 'relatedObjectProp',
-                            name: 'Related Object Prop',
-                            type: 'object',
-                            objectId: 'objectB',
-                            children: [
-                                {
-                                    id: 'relatedObjectProp-loading',
-                                    name: 'Loading...',
-                                    type: 'loading',
-                                },
-                            ],
-                        },
-                    ],
-                },
-                fetchObject: async (id) => {
-                    if (id === 'objectB') {
-                        return new Promise((resolve, reject) => {
-                            setTimeout(() => {
-                                reject('Failed to fetch objectB');
-                            }, 5000);
-                        });
-                    }
-                    return undefined;
-                },
-            }, properties: [], criteria: {}, setCriteria: setCriteriaMock }));
-        // Step 1: Click "Add Condition" button to create a new rule
-        const addConditionButton = screen.getByRole('button', { name: /^add condition$/i });
-        await user.click(addConditionButton);
-        // Step 2: Click on the property selector to open the dropdown
-        const propertySelector = screen.getByPlaceholderText(/select a property/i);
-        await user.click(propertySelector);
-        // Step 3: Click on "Related Object Prop" to expand it and fetch its children
-        const relatedObjectPropItem = screen.getByText('Related Object Prop');
-        await user.click(relatedObjectPropItem);
-        // Step 4: Verify loading indicator is shown
-        expect(screen.getByText('Loading...')).toBeInTheDocument();
-        // Step 5: Wait for the related object properties to load and verify ID and Name are visible
-        await waitFor(() => {
-            expect(screen.getByText('Loading Failed')).toBeInTheDocument();
-        }, { timeout: 6000 });
-    });
-});
+const mockProperties = [
+    {
+        id: 'name',
+        name: 'Name',
+        type: 'string',
+    },
+    {
+        id: 'age',
+        name: 'Age',
+        type: 'integer',
+    },
+    {
+        id: 'birthDate',
+        name: 'Birth Date',
+        type: 'date',
+    },
+    {
+        id: 'createdTime',
+        name: 'Created Time',
+        type: 'time',
+    },
+    {
+        id: 'tags',
+        name: 'Tags',
+        type: 'array',
+        enum: ['tag1', 'tag2', 'tag3'],
+    },
+    {
+        id: 'status',
+        name: 'Status',
+        type: 'string',
+        enum: ['active', 'inactive', 'pending'],
+    },
+    {
+        id: 'profilePic',
+        name: 'Profile Picture',
+        type: 'image',
+    },
+    {
+        id: 'metadata',
+        name: 'Metadata',
+        type: 'document',
+    },
+    {
+        id: 'percentCompleted',
+        name: 'Percent Completed',
+        type: 'number',
+    },
+    {
+        id: 'boolean',
+        name: 'Boolean',
+        type: 'boolean',
+    },
+    {
+        id: 'regularRelatedObject',
+        name: 'Regular Related Object',
+        type: 'object',
+        objectId: 'relatedObjectId',
+    },
+    {
+        id: 'dynamicRelatedObject',
+        name: 'Dynamic Related Object',
+        type: 'object',
+    },
+];
 describe('CriteriaBuilder', () => {
-    const mockProperties = [
-        {
-            id: 'name',
-            name: 'Name',
-            type: 'string',
-        },
-        {
-            id: 'age',
-            name: 'Age',
-            type: 'integer',
-        },
-        {
-            id: 'birthDate',
-            name: 'Birth Date',
-            type: 'date',
-        },
-        {
-            id: 'createdTime',
-            name: 'Created Time',
-            type: 'time',
-        },
-        {
-            id: 'tags',
-            name: 'Tags',
-            type: 'array',
-            enum: ['tag1', 'tag2', 'tag3'],
-        },
-        {
-            id: 'status',
-            name: 'Status',
-            type: 'string',
-            enum: ['active', 'inactive', 'pending'],
-        },
-        {
-            id: 'profilePic',
-            name: 'Profile Picture',
-            type: 'image',
-        },
-        {
-            id: 'metadata',
-            name: 'Metadata',
-            type: 'document',
-        },
-        {
-            id: 'percentCompleted',
-            name: 'Percent Completed',
-            type: 'number',
-        },
-        {
-            id: 'boolean',
-            name: 'Boolean',
-            type: 'boolean',
-        },
-        {
-            id: 'regularRelatedObject',
-            name: 'Regular Related Object',
-            type: 'object',
-            objectId: 'relatedObjectId',
-        },
-        {
-            id: 'dynamicRelatedObject',
-            name: 'Dynamic Related Object',
-            type: 'object',
-        },
-    ];
     // Mock function for setCriteria
     const setCriteriaMock = vi.fn();
     beforeEach(() => {

package/dist/published/components/custom/CriteriaBuilder/PropertyTree.d.ts

@@ -1,12 +1,12 @@
+import { Property } from '@evoke-platform/context';
 import React from 'react';
-import { TreeViewObject } from './types';
+import { EvokeObject } from '../../../types';
 type PropertyTreeProps = {
-    fetchObject: (id: string) => Promise<TreeViewObject | undefined>;
-    rootObject: TreeViewObject;
-    setRootObject: React.Dispatch<React.SetStateAction<TreeViewObject>>;
-    handleTreePropertySelect: (propertyId: string) => void;
+    fetchObject: (id: string) => Promise<EvokeObject | undefined>;
+    rootObject: EvokeObject;
+    handleTreePropertySelect: (propertyId: string) => Promise<void>;
     value: string | undefined;
-    propertyTreeMap: Record<string, string>;
+    propertyTreeMap: Record<string, Property>;
 };
 declare const PropertyTree: (props: PropertyTreeProps) => React.JSX.Element;
 export default PropertyTree;

package/dist/published/components/custom/CriteriaBuilder/PropertyTree.js

@@ -4,25 +4,38 @@ import { Autocomplete, RichTreeView } from '../../core';
 import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
 import { PropertyTreeItem } from './PropertyTreeItem';
-import { convertTreeViewPropertyToTreeItem, findTreeItemById, truncateNamePath, updateTreeViewProperty } from './utils';
+import { findTreeItemById, truncateNamePath, updateTreeNode } from './utils';
 const NAME_PATH_LIMIT = 35;
 const PropertyTree = (props) => {
-    const { fetchObject, handleTreePropertySelect, rootObject, setRootObject, value, propertyTreeMap } = props;
+    const { fetchObject, handleTreePropertySelect, rootObject, value, propertyTreeMap } = props;
     const [options, setOptions] = useState([]);
     const [expandedItems, setExpandedItems] = useState([]);
     const [openDropdown, setOpenDropdown] = useState(false);
     useEffect(() => {
         // Transform rootObject properties to TreeItem format
-        setOptions(rootObject.properties.map(convertTreeViewPropertyToTreeItem));
+        setOptions(rootObject.properties.map((property) => ({
+            id: property.id,
+            label: property.name,
+            value: property.id,
+            type: property.type,
+            objectId: property.objectId,
+            children: property.children
+                ? property.children.map((child) => ({
+                    id: child.id,
+                    label: child.name,
+                    value: child.id,
+                    type: child.type,
+                    objectId: child.objectId,
+                }))
+                : undefined,
+        })));
+        setExpandedItems([]);
     }, [rootObject.properties]);
     const handleExpandedItemsChange = (e, itemIds) => {
         setExpandedItems(itemIds);
     };
     const handleUpdateNodeChildren = (nodeId, children) => {
-        setRootObject((prevObject) => ({
-            ...prevObject,
-            properties: updateTreeViewProperty(prevObject.properties, nodeId, (node) => ({ ...node, children })),
-        }));
+        setOptions((prevOptions) => updateTreeNode(prevOptions, nodeId, (node) => ({ ...node, children })));
     };
     return (React.createElement(Autocomplete, { "aria-label": "Property Selector", value: value, fullWidth: true, sx: { width: '37%' }, size: "small", disableClearable: true, options: options, open: openDropdown, onBlur: (e) => {
             const targetComponents = e.relatedTarget?.getAttribute('id')?.split('-');
@@ -45,11 +58,11 @@ const PropertyTree = (props) => {
         }, onFocus: () => setOpenDropdown(true), getOptionLabel: (option) => {
             // Retrieve the full name path from the map
             const namePath = typeof option === 'string'
-                ? (propertyTreeMap[option] ?? '') || option
-                : propertyTreeMap[option.value] || option.value;
+                ? ((propertyTreeMap[option] ?? '')?.name ?? option)
+                : (propertyTreeMap[option.value]?.name ?? option.value);
             return truncateNamePath(namePath, NAME_PATH_LIMIT);
         }, renderInput: (params) => {
-            const fullDisplayName = value && propertyTreeMap[value];
+            const fullDisplayName = value && propertyTreeMap[value]?.name;
             return (React.createElement(OverflowTextField, { ...params, "aria-label": fullDisplayName, value: fullDisplayName, placeholder: "Select a property" }));
         }, ListboxComponent: (props) => {
             return (React.createElement(ClickAwayListener, { onClickAway: (e) => {
@@ -60,8 +73,8 @@ const PropertyTree = (props) => {
                 } },
                 React.createElement(Box, { ...props },
                     React.createElement(RichTreeView, { sx: { width: '100%', paddingLeft: 0 }, role: "menu", "aria-label": "Property Tree", expandedItems: expandedItems, onExpandedItemsChange: handleExpandedItemsChange, items: options, slots: {
-                            item: (itemProps) => (React.createElement(PropertyTreeItem, { ...itemProps, items: options, expanded: expandedItems, setExpanded: setExpandedItems, fetchObject: fetchObject, updateNodeChildren: handleUpdateNodeChildren, handleTreePropertySelect: (propertyId) => {
-                                    handleTreePropertySelect(propertyId);
+                            item: (itemProps) => (React.createElement(PropertyTreeItem, { ...itemProps, items: options, expanded: expandedItems, setExpanded: setExpandedItems, fetchObject: fetchObject, updateNodeChildren: handleUpdateNodeChildren, handleTreePropertySelect: async (propertyId) => {
+                                    await handleTreePropertySelect(propertyId);
                                     setOpenDropdown(false);
                                 } })),
                         } }))));