@evoke-platform/ui-components 1.10.0 → 1.10.1-dev.1

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

@@ -1,5 +1,4 @@
 import { AddRounded, UnfoldMore } from '@mui/icons-material';
-import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isArray, isEmpty, startCase } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -7,7 +6,7 @@ import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestI
 import 'react-querybuilder/dist/query-builder.css';
 import escape from 'string-escape-regex';
 import { TrashCan } from '../../../icons/custom';
-import { Autocomplete, Button, IconButton } from '../../core';
+import { Autocomplete, Button, IconButton, Typography } from '../../core';
 import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
 import { difference } from '../util';
@@ -181,7 +180,7 @@ const customSelector = (props) => {
         });
         handleOnChange(propertyId);
     };
-    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
+    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;
             }
@@ -264,6 +263,18 @@ export const valueEditor = (props) => {
     }
     return ValueEditor(props);
 };
+const getAllRuleIds = (rules) => {
+    const ids = [];
+    rules.forEach((rule) => {
+        if ('rules' in rule) {
+            ids.push(...getAllRuleIds(rule.rules));
+        }
+        else {
+            ids.push(rule.field);
+        }
+    });
+    return ids;
+};
 const CriteriaBuilder = (props) => {
     const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
     const [propertyTreeMap, setPropertyTreeMap] = useState();
@@ -299,18 +310,7 @@ const CriteriaBuilder = (props) => {
             // 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 = [];
-                const traverseRulesForIds = (rules) => {
-                    rules.forEach((rule) => {
-                        if ('rules' in rule) {
-                            traverseRulesForIds(rule.rules);
-                        }
-                        else {
-                            ids.push(rule.field);
-                        }
-                    });
-                };
-                traverseRulesForIds(newQuery.rules);
+                const ids = getAllRuleIds(newQuery.rules);
                 let newPropertyTreeMap = {};
                 const newPropertyTreeMapPromises = [];
                 for (const id of ids) {

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

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

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

@@ -1,160 +1,83 @@
-import { ChevronRight, ExpandMore } from '@mui/icons-material';
+import { ClickAwayListener } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import { Autocomplete, MenuItem, TreeView } from '../../core';
+import { Autocomplete, RichTreeView } from '../../core';
+import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
-import PropertyTreeItem from './PropertyTreeItem';
-import { fetchDisplayNamePath, findPropertyById, setIdPaths, truncateNamePath, updateTreeNode } from './utils';
-const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value }) => {
-    const [expandedNodes, setExpandedNodes] = useState([]);
-    const [objectPropertyNamePathMap, setObjectPropertyNamePathMap] = useState({});
-    const [objectProperties, setObjectProperties] = useState(rootObject.properties ?? []);
-    const [propertyOptions, setPropertyOptions] = useState([]);
-    const NAME_PATH_LIMIT = 35;
-    const originalValue = value ?? '';
-    const flattenObjectProperties = (properties) => {
-        let result = [];
-        properties.forEach((property) => {
-            const { children, ...rest } = property;
-            const fullId = property.id;
-            const fullName = property.name;
-            const newProperty = {
-                ...rest,
-                id: fullId,
-                name: fullName,
-            };
-            result.push(newProperty);
-            // If the property has children, recursively process them
-            if (children && children.length > 0) {
-                const childProperties = flattenObjectProperties(children);
-                result = result.concat(childProperties);
-            }
-        });
-        return result;
-    };
+import { PropertyTreeItem } from './PropertyTreeItem';
+import { findTreeItemById, truncateNamePath, updateTreeNode } from './utils';
+const NAME_PATH_LIMIT = 35;
+const PropertyTree = (props) => {
+    const { fetchObject, handleTreePropertySelect, rootObject, value, propertyTreeMap } = props;
+    const [options, setOptions] = useState([]);
+    const [expandedItems, setExpandedItems] = useState([]);
+    const [openDropdown, setOpenDropdown] = useState(false);
     useEffect(() => {
-        const flattendProperties = flattenObjectProperties(objectProperties);
-        setPropertyOptions(flattendProperties);
-        if (objectProperties) {
-            const fetchDisplayNames = async () => {
-                const results = await Promise.all(flattendProperties.map(async (property) => {
-                    const objectPropertyNamePath = await fetchDisplayNamePath(property.id, rootObject, fetchObject);
-                    return { [property.id]: objectPropertyNamePath };
-                }));
-                let newObjectPropertyNamePathMap = {};
-                results.forEach((result) => {
-                    newObjectPropertyNamePathMap = { ...newObjectPropertyNamePathMap, ...result };
-                });
-                setObjectPropertyNamePathMap(newObjectPropertyNamePathMap);
-                //Fetch the display name path for the original value
-                if (originalValue) {
-                    if (originalValue.includes('.')) {
-                        const parts = originalValue.split('.');
-                        if (parts.length >= 2) {
-                            if (!newObjectPropertyNamePathMap[originalValue]) {
-                                const fieldNamePath = await fetchDisplayNamePath(originalValue, rootObject, fetchObject);
-                                newObjectPropertyNamePathMap = {
-                                    ...newObjectPropertyNamePathMap,
-                                    [originalValue]: fieldNamePath,
-                                };
-                                setObjectPropertyNamePathMap(newObjectPropertyNamePathMap);
-                            }
-                        }
-                    }
-                }
-            };
-            fetchDisplayNames();
-        }
-    }, [originalValue, rootObject, objectProperties, fetchObject]);
-    const handleNodeToggle = (event, nodeIds) => {
-        const newlyExpandedNodes = nodeIds.filter((id) => !expandedNodes.includes(id));
-        newlyExpandedNodes.forEach((nodeId) => {
-            handleLoadData(nodeId);
-        });
-        setExpandedNodes(nodeIds);
+        // Transform rootObject properties to TreeItem format
+        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 updateObjectProperties = (nodeId, newChildren) => {
-        setObjectProperties((prevProperties) => updateTreeNode(prevProperties, nodeId, (node) => ({ ...node, children: newChildren })));
+    const handleUpdateNodeChildren = (nodeId, children) => {
+        setOptions((prevOptions) => updateTreeNode(prevOptions, nodeId, (node) => ({ ...node, children })));
     };
-    const handleLoadData = async (nodeId) => {
-        const availableProperty = findPropertyById(objectProperties, nodeId);
-        if (!availableProperty || !availableProperty.objectId)
-            return;
-        const object = await fetchObject(availableProperty.objectId);
-        if (object?.properties) {
-            const properties = object.properties.filter((prop) => !['collection', 'image', 'documents'].includes(prop.type));
-            // this step adds path specific ids to the user and address fields
-            const newChildren = setIdPaths(properties, nodeId);
-            updateObjectProperties(availableProperty.id, newChildren);
-        }
-    };
-    const handleNodeSelect = (event, nodeId) => {
-        const node = findPropertyById(objectProperties, nodeId);
-        if (node?.children) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-    const handleTreeItemClick = (propertyId) => {
-        const property = findPropertyById(objectProperties, propertyId);
-        // this prevents the selection of a parent node
-        if (property && !property.children) {
-            handleTreePropertySelect(property.id);
-        }
-    };
-    return (React.createElement(Autocomplete, { "aria-label": "Property Selector", value: value, fullWidth: true, sx: {
-            width: '37%',
-        }, disableClearable: true, options: propertyOptions.map((property) => {
-            return {
-                label: objectPropertyNamePathMap[property.id],
-                value: property.id,
-            };
-        }), componentsProps: {
-            paper: {
-                sx: {
-                    '& .MuiAutocomplete-option': {
-                        '&.Mui-focused': {
-                            '&:has(.MuiTreeItem-group)': {
-                                backgroundColor: 'transparent', // Remove background color if child of TreeView
-                            },
-                        },
-                    },
-                },
-            },
-        }, getOptionLabel: (option) => {
+    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('-');
+            // If the user clicks on tree component with children, don't close the menu.
+            if (targetComponents?.[targetComponents.length - 1]) {
+                const treeItem = findTreeItemById(options, targetComponents[targetComponents.length - 1]);
+                // Only keep dropdown open if the clicked item has children AND was not selected
+                if (!treeItem?.children) {
+                    setOpenDropdown(false);
+                }
+            }
+            else {
+                setOpenDropdown(false);
+            }
+        }, onOpen: () => setOpenDropdown(true), onClose: (e, reason) => {
+            // Only close if user clicked the caret close icon
+            if (reason === 'toggleInput') {
+                setOpenDropdown(false);
+            }
+        }, onFocus: () => setOpenDropdown(true), getOptionLabel: (option) => {
             // Retrieve the full name path from the map
             const namePath = typeof option === 'string'
-                ? (objectPropertyNamePathMap[option] ?? '')
-                : (objectPropertyNamePathMap[option.value] ?? '');
+                ? ((propertyTreeMap[option] ?? '')?.name ?? option)
+                : (propertyTreeMap[option.value]?.name ?? option.value);
             return truncateNamePath(namePath, NAME_PATH_LIMIT);
         }, renderInput: (params) => {
-            const fullDisplayName = value && objectPropertyNamePathMap[value];
-            return (React.createElement(OverflowTextField, { ...params, "aria-label": fullDisplayName, value: fullDisplayName, size: "small", placeholder: "Select a property", variant: "outlined" }));
-        }, isOptionEqualToValue: (option, val) => {
-            if (typeof val === 'string') {
-                return option.value === val;
-            }
-            return option.value === val?.value;
-        }, renderOption: (props, option) => {
-            // Find the corresponding property in objectProperties
-            const property = objectProperties.find((prop) => prop.id === option.value);
-            if (property) {
-                if (property.type === 'object') {
-                    return (React.createElement("li", { ...props },
-                        React.createElement(TreeView, { role: "menu", "aria-label": "Property Tree", defaultCollapseIcon: React.createElement(ExpandMore, null), defaultExpandIcon: React.createElement(ChevronRight, null), onNodeToggle: handleNodeToggle, expanded: expandedNodes, onNodeSelect: handleNodeSelect, sx: { width: '100%' } },
-                            React.createElement(PropertyTreeItem, { key: option.value, treeData: objectProperties, property: property, fetchObject: fetchObject, onClick: handleTreeItemClick }))));
-                }
-                // top level items
-                return (React.createElement(MenuItem, { sx: {
-                        '&:hover': {
-                            backgroundColor: 'transparent',
-                        },
-                        '.MuiTreeItem-group &': {
-                            '&:hover': {
-                                backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                            },
-                        },
-                    }, onClick: () => handleTreeItemClick(property?.id), key: property.id, value: property.id }, property.name));
-            }
+            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) => {
+                    // Close the dropdown when clicking outside but don't close when clicking to the autocomplete input
+                    if (!e.target.closest('.MuiAutocomplete-root')) {
+                        setOpenDropdown(false);
+                    }
+                } },
+                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: async (propertyId) => {
+                                    await handleTreePropertySelect(propertyId);
+                                    setOpenDropdown(false);
+                                } })),
+                        } }))));
         } }));
 };
 export default PropertyTree;

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

@@ -1,10 +1,14 @@
+import { TreeItemProps } from '@mui/x-tree-view';
 import React from 'react';
-import { ExpandedProperty, Obj } from '../../../types';
-type PropertyTreeItemProps = {
-    property: ExpandedProperty | undefined;
+import { Obj } from '../../../types';
+import { TreeItem } from './types';
+type PropertyTreeItemProps = TreeItemProps & {
+    items: TreeItem[];
+    expanded: string[];
+    setExpanded: (expanded: string[]) => void;
+    updateNodeChildren: (nodeId: string, children: TreeItem[]) => void;
     fetchObject: (id: string) => Promise<Obj | undefined>;
-    treeData: ExpandedProperty[];
-    onClick: (property: string) => void;
+    handleTreePropertySelect: (propertyId: string) => Promise<void>;
 };
-declare const PropertyTreeItem: ({ property, fetchObject, treeData, onClick }: PropertyTreeItemProps) => React.JSX.Element | null;
-export default PropertyTreeItem;
+export declare const PropertyTreeItem: (props: PropertyTreeItemProps) => React.JSX.Element;
+export {};

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

@@ -1,43 +1,45 @@
-import { TreeItem } from '@mui/lab';
-import { MenuItem } from '@mui/material';
 import React from 'react';
-const PropertyTreeItem = ({ property, fetchObject, treeData, onClick }) => {
-    if (!property) {
-        return null;
-    }
-    const hasChildren = property.children && property.children.length > 0;
-    if (hasChildren) {
-        // Parent node
-        return (React.createElement(TreeItem, { nodeId: property.id, role: "menu", label: property.name, onClick: () => onClick(property.id), sx: {
-                paddingTop: '6px',
-                paddingBottom: '6px',
-                '.MuiCollapse-root': {
-                    'MuiTreeItem-group': {
-                        width: '100%',
-                    },
-                },
-                '& .MuiTreeItem-content': {
-                    '&:hover': {
-                        backgroundColor: 'transparent',
-                    },
-                },
-                '& .MuiTreeItem-group .MuiTreeItem-content:hover': {
-                    backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                },
-            } }, property.children?.map((child) => (React.createElement(PropertyTreeItem, { onClick: onClick, treeData: treeData, key: child.id, property: child, fetchObject: fetchObject })))));
-    }
-    else {
-        // Leaf node, render as MenuItem
-        return (React.createElement(MenuItem, { sx: {
-                '&:hover': {
-                    backgroundColor: 'transparent',
-                },
-                '.MuiTreeItem-group &': {
-                    '&:hover': {
-                        backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                    },
-                },
-            }, onClick: () => onClick(property.id), key: property.id, value: property.id }, property.name));
-    }
+import { RichTreeItem } from '../../core';
+import { findTreeItemById } from './utils';
+export const PropertyTreeItem = (props) => {
+    const { itemId, label, items, setExpanded, expanded, children, updateNodeChildren, fetchObject, handleTreePropertySelect, } = props;
+    const onClick = async (e) => {
+        // If the item is already expanded, collapse it.
+        if (expanded.includes(itemId)) {
+            e.stopPropagation();
+            setExpanded(expanded.filter((id) => id !== itemId));
+            return;
+        }
+        const item = findTreeItemById(items, itemId);
+        if (item?.type === 'object') {
+            e.stopPropagation();
+            // If the item has an associated "objectId", fetch the properties of the object and expand the item.
+            if (item.objectId && item.children?.length === 1 && item.children[0].type === 'loading') {
+                const object = item.objectId ? await fetchObject(item.objectId) : undefined;
+                if (object) {
+                    updateNodeChildren(itemId, (object.properties ?? []).map((prop) => ({
+                        id: `${itemId}.${prop.id}`,
+                        label: prop.name,
+                        value: `${itemId}.${prop.id}`,
+                        type: prop.type,
+                        objectId: prop.objectId,
+                        children: prop.type === 'object'
+                            ? [
+                                {
+                                    id: `${itemId}.${prop.id}-loading`,
+                                    label: 'Loading...',
+                                    value: `${itemId}.${prop.id}-loading`,
+                                    type: 'loading',
+                                },
+                            ]
+                            : undefined,
+                    })));
+                }
+            }
+            setExpanded([...expanded, itemId]);
+            return;
+        }
+        await handleTreePropertySelect(itemId);
+    };
+    return React.createElement(RichTreeItem, { itemId: itemId, label: label, children: children, onClick: onClick });
 };
-export default PropertyTreeItem;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BaseSelectorProps } from 'react-querybuilder';
 import { ExpandedProperty } from '../../../types';
-import { AutocompleteOption } from '../../core';
+import { AutocompleteOption, TreeViewBaseItem } from '../../core';
 export type ObjectProperty = {
     id: string;
     name: string;
@@ -51,3 +51,10 @@ export type MongoDBQueryValue = null | string | boolean | {
     $in?: unknown[];
     $nin?: unknown[];
 };
+export type TreeItem = TreeViewBaseItem<{
+    id: string;
+    label: string;
+    value: string;
+    type?: string;
+    objectId?: string;
+}>;

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

@@ -1,23 +1,16 @@
 import { Property } from '@evoke-platform/context';
 import { RuleGroupType } from 'react-querybuilder';
-import { ExpandedProperty, Obj, ObjectProperty } from '../../../types';
+import { Obj, ObjectProperty } from '../../../types';
+import { TreeItem } from './types';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
  *
- * @param {ExpandedProperty[]} tree - The tree structure to update.
+ * @param {TreeItem[]} tree - The tree structure to update.
  * @param {string} nodeId - The ID of the node to update.
- * @param {(node: ExpandedProperty) => ExpandedProperty} updater - The function to apply to the node.
- * @returns {ExpandedProperty[]} - The updated tree structure.
+ * @param {(node: TreeItem) => TreeItem} updater - The function to apply to the node.
+ * @returns {TreeItem[]} - The updated tree structure.
  */
-export declare const updateTreeNode: (tree: ExpandedProperty[], nodeId: string, updater: (node: ExpandedProperty) => ExpandedProperty) => ExpandedProperty[];
-/**
- * Recursively searches for a property in a tree structure by its ID.
- *
- * @param {ExpandedProperty[]} properties - The tree structure to search.
- * @param {string} id - The ID of the property to find.
- * @returns {ExpandedProperty | null} - The found property or null if not found.
- */
-export declare const findPropertyById: (properties: ExpandedProperty[], id: string) => ExpandedProperty | null;
+export declare const updateTreeNode: (tree: TreeItem[], nodeId: string, updater: (node: TreeItem) => TreeItem) => TreeItem[];
 type FetchObjectFunction = (id: string) => Promise<Obj | undefined>;
 /**
  * Fetches the display name path for a given property ID within an object hierarchy.
@@ -74,4 +67,5 @@ export declare const ALL_OPERATORS: {
  * @returns {string} The resulting query string.
  */
 export declare const getReadableQuery: (mongoQuery?: Record<string, unknown>, properties?: Property[]) => string;
+export declare const findTreeItemById: (nodes: TreeItem[], nodeId: string) => TreeItem | null;
 export {};

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

@@ -2,10 +2,10 @@ import { isArray, isEmpty, startCase } from 'lodash';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
  *
- * @param {ExpandedProperty[]} tree - The tree structure to update.
+ * @param {TreeItem[]} tree - The tree structure to update.
  * @param {string} nodeId - The ID of the node to update.
- * @param {(node: ExpandedProperty) => ExpandedProperty} updater - The function to apply to the node.
- * @returns {ExpandedProperty[]} - The updated tree structure.
+ * @param {(node: TreeItem) => TreeItem} updater - The function to apply to the node.
+ * @returns {TreeItem[]} - The updated tree structure.
  */
 export const updateTreeNode = (tree, nodeId, updater) => {
     return tree.map((node) => {
@@ -20,26 +20,6 @@ export const updateTreeNode = (tree, nodeId, updater) => {
         }
     });
 };
-/**
- * Recursively searches for a property in a tree structure by its ID.
- *
- * @param {ExpandedProperty[]} properties - The tree structure to search.
- * @param {string} id - The ID of the property to find.
- * @returns {ExpandedProperty | null} - The found property or null if not found.
- */
-export const findPropertyById = (properties, id) => {
-    for (const prop of properties) {
-        if (prop.id === id) {
-            return prop;
-        }
-        else if (prop.children) {
-            const result = findPropertyById(prop.children, id);
-            if (result)
-                return result;
-        }
-    }
-    return null;
-};
 /**
  * Fetches the display name path for a given property ID within an object hierarchy.
  *
@@ -359,3 +339,13 @@ export const getReadableQuery = (mongoQuery, properties) => {
     const parsedQuery = parseMongoDB(mongoQuery);
     return buildQueryString(parsedQuery);
 };
+export const findTreeItemById = (nodes, nodeId) => {
+    for (const node of nodes) {
+        if (node.id === nodeId)
+            return node;
+        const found = node.children && findTreeItemById(node.children, nodeId);
+        if (found)
+            return found;
+    }
+    return null;
+};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js

@@ -73,6 +73,9 @@ const RepeatableField = (props) => {
                 .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
                 .then((evokeForm) => {
                 setForm(evokeForm);
+                setFetchedOptions({
+                    [`${fieldDefinition.id}${action?.type === 'delete' ? '-deleteForm' : action?.type === 'create' ? '-createForm' : '-updateForm'}`]: evokeForm,
+                });
             })
                 .catch((error) => {
                 console.error(error);

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

@@ -22,7 +22,7 @@ const ObjectPropertyInput = (props) => {
     const [openOptions, setOpenOptions] = useState(false);
     const [hasFetched, setHasFetched] = useState(fetchedOptions[`${id}OptionsHaveFetched`] || false);
     const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
-    const [layout, setLayout] = useState();
+    const [layout, setLayout] = useState(fetchedOptions[`${id}ViewLayout`]);
     const [form, setForm] = useState();
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
@@ -68,10 +68,17 @@ const ObjectPropertyInput = (props) => {
                 };
             }
             if (viewLayout) {
-                apiServices
-                    .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/${displayOption === 'dropdown' ? 'dropdown' : 'table'}Layouts/${viewLayout.id}`))
-                    .then(setLayout)
-                    .catch((err) => setLayout(defaultViewLayout));
+                if (!fetchedOptions[`${id}ViewLayout`]) {
+                    apiServices
+                        .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/${displayOption === 'dropdown' ? 'dropdown' : 'table'}Layouts/${viewLayout.id}`))
+                        .then((layout) => {
+                        setLayout(layout);
+                        setFetchedOptions({
+                            [`${id}ViewLayout`]: layout,
+                        });
+                    })
+                        .catch((err) => setLayout(defaultViewLayout));
+                }
             }
             else {
                 setLayout(defaultViewLayout);

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -255,6 +255,21 @@ CriteriaBuilderRelatedObject.args = {
                                 },
                             ],
                         },
+                        {
+                            id: 'dynamic.id',
+                            name: 'Dynamic ID',
+                            type: 'string',
+                        },
+                        {
+                            id: 'dynamic.name',
+                            name: 'Dynamic Name',
+                            type: 'string',
+                        },
+                        {
+                            id: 'dynamic.objectId',
+                            name: 'Dynamic Object ID',
+                            type: 'string',
+                        },
                         {
                             id: 'name',
                             name: 'Name',
@@ -526,6 +541,21 @@ CriteriaBuilderRelatedObject.args = {
                     type: 'string',
                     required: false,
                 },
+                {
+                    id: 'dynamic.id',
+                    name: 'Dynamic ID',
+                    type: 'string',
+                },
+                {
+                    id: 'dynamic.name',
+                    name: 'Dynamic Name',
+                    type: 'string',
+                },
+                {
+                    id: 'dynamic.objectId',
+                    name: 'Dynamic Object Id',
+                    type: 'string',
+                },
             ],
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.0",
+    "version": "1.10.1-dev.1",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",