@evoke-platform/ui-components 1.0.0-dev.242 → 1.0.0-dev.244

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

@@ -1,6 +1,8 @@
 import { ElementType } from 'react';
+import { ObjectProperty, TreeViewObject } from './types';
 import 'react-querybuilder/dist/query-builder.css';
-import { ObjectProperty, Operator, PresetValue } from './types';
+import { EvokeObject } from '../../../types';
+import { Operator, PresetValue } from './types';
 import { ValueEditorProps } from './ValueEditor';
 export type CriteriaInputProps = {
     properties: ObjectProperty[];
@@ -22,6 +24,10 @@ export type CriteriaInputProps = {
     disabled?: boolean;
     hideBorder?: boolean;
     presetGroupLabel?: string;
+    treeViewOpts?: {
+        fetchObject?: (objectId: string) => Promise<EvokeObject | undefined>;
+        object: TreeViewObject;
+    };
 };
 export declare const valueEditor: (props: ValueEditorProps) => JSX.Element;
 declare const CriteriaBuilder: (props: CriteriaInputProps) => JSX.Element;

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

@@ -9,6 +9,7 @@ import { TrashCan } from '../../../icons/custom';
 import { Autocomplete, Button, IconButton, TextField } from '../../core';
 import { Box } from '../../layout';
 import { difference } from '../util';
+import PropertyTree from './PropertyTree';
 import ValueEditor from './ValueEditor';
 const ALL_OPERATORS = [
     { name: '=', label: 'Is' },
@@ -108,6 +109,9 @@ const customSelector = (props) => {
     let opts = options;
     const inputType = props.fieldData?.inputType;
     let readOnly = false;
+    const isTreeViewEnabled = context.treeViewOpts && title === 'Fields';
+    const fetchObject = context.treeViewOpts?.fetchObject;
+    const object = context.treeViewOpts?.object;
     if (context.disabledCriteria) {
         readOnly =
             Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
@@ -161,7 +165,7 @@ const customSelector = (props) => {
             val = options.find((option) => option.name === val)?.name;
             break;
     }
-    return (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, handleOnChange: handleOnChange })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return opts.find((o) => option === o.name)?.label || '';
             }
@@ -172,7 +176,7 @@ const customSelector = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onChange: (event, newValue) => {
             handleOnChange(newValue?.value.name);
-        }, renderInput: (params) => React.createElement(TextField, { ...params, size: "small" }), sx: { width: width, backgroundColor: '#fff' }, disableClearable: true, readOnly: readOnly }));
+        }, renderInput: (params) => React.createElement(TextField, { ...params, size: "small" }), sx: { width: width, background: '#fff' }, disableClearable: true, readOnly: readOnly }))));
 };
 const customCombinator = (props) => {
     const { value, handleOnChange, context, level, path } = props;
@@ -237,7 +241,7 @@ export const valueEditor = (props) => {
     return ValueEditor(props);
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, disabledCriteria, hideBorder, presetGroupLabel, } = props;
+    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, disabledCriteria, hideBorder, presetGroupLabel, treeViewOpts, } = props;
     const [query, setQuery] = useState(undefined);
     useEffect(() => {
         if (criteria || originalCriteria) {
@@ -358,6 +362,7 @@ const CriteriaBuilder = (props) => {
                         enablePresetValues,
                         presetGroupLabel,
                         disabledCriteria,
+                        treeViewOpts,
                     }, controlClassnames: {
                         ruleGroup: 'container',
                     }, operators: operators

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { EvokeObject } from '../../../types';
+type PropertyTreeProps = {
+    fetchObject: (id: string) => Promise<EvokeObject | undefined>;
+    rootObject: EvokeObject;
+    handleOnChange: (property: string) => void;
+    value: string | undefined;
+};
+declare const PropertyTree: ({ fetchObject, handleOnChange, rootObject, value }: PropertyTreeProps) => JSX.Element;
+export default PropertyTree;

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

@@ -0,0 +1,168 @@
+import { ChevronRight, ExpandMore } from '@mui/icons-material';
+import React, { useEffect, useState } from 'react';
+import { Autocomplete, MenuItem, TextField, Tooltip, TreeView } from '../../core';
+import PropertyTreeItem from './PropertyTreeItem';
+import { fetchDisplayNamePath, findPropertyById, setIdPaths, truncateNamePath, updateTreeNode } from './utils';
+const PropertyTree = ({ fetchObject, handleOnChange, 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;
+    };
+    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) {
+                            const parentId = parts.slice(0, -1).join('.');
+                            await fetchObject(parentId);
+                            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);
+    };
+    const updateObjectProperties = (nodeId, newChildren) => {
+        setObjectProperties((prevProperties) => updateTreeNode(prevProperties, nodeId, (node) => ({ ...node, children: newChildren })));
+    };
+    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) {
+            handleOnChange(property.id);
+        }
+    };
+    return (React.createElement(Autocomplete, { "aria-label": "Property Selector", value: value, fullWidth: true, sx: {
+            width: '33%',
+        }, 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) => {
+            // Retrieve the full name path from the map
+            const namePath = typeof option === 'string'
+                ? objectPropertyNamePathMap[option] ?? ''
+                : objectPropertyNamePathMap[option.value] ?? '';
+            return truncateNamePath(namePath, NAME_PATH_LIMIT);
+        }, renderInput: (params) => {
+            let isTruncated = false;
+            const fullDisplayValue = value && objectPropertyNamePathMap[value];
+            let displayValue = fullDisplayValue;
+            if (!!displayValue && displayValue.length > NAME_PATH_LIMIT) {
+                isTruncated = true;
+                displayValue = truncateNamePath(displayValue, NAME_PATH_LIMIT);
+            }
+            return (React.createElement(Tooltip, { title: isTruncated ? fullDisplayValue : '', arrow: true },
+                React.createElement(TextField, { ...params, "aria-label": fullDisplayValue, value: displayValue, 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));
+            }
+        } }));
+};
+export default PropertyTree;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ExpandedProperty, Obj } from '../../../types';
+type PropertyTreeItemProps = {
+    property: ExpandedProperty | undefined;
+    fetchObject: (id: string) => Promise<Obj | undefined>;
+    treeData: ExpandedProperty[];
+    onClick: (property: string) => void;
+};
+declare const PropertyTreeItem: ({ property, fetchObject, treeData, onClick }: PropertyTreeItemProps) => JSX.Element | null;
+export default PropertyTreeItem;

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

@@ -0,0 +1,43 @@
+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));
+    }
+};
+export default PropertyTreeItem;

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

@@ -1,4 +1,6 @@
+/// <reference types="react" />
 import { BaseSelectorProps } from 'react-querybuilder';
+import { ExpandedProperty } from '../../../types';
 import { AutocompleteOption } from '../../core';
 export type ObjectProperty = {
     id: string;
@@ -13,6 +15,8 @@ export type ObjectProperty = {
 export type CustomSelectorProps = BaseSelectorProps & {
     options: AutocompleteOption[] | any[];
     fieldData?: Record<string, any>;
+    availableProperties?: ExpandedProperty[];
+    setAvailableProperties?: React.Dispatch<React.SetStateAction<ExpandedProperty[]>>;
 };
 export type Operator = '=' | '!=' | '<' | '>' | '<=' | '>=' | 'contains' | 'beginsWith' | 'endsWith' | 'doesNotContain' | 'doesNotBeginWith' | 'doesNotEndWith' | 'null' | 'notNull' | 'in' | 'notIn' | 'between' | 'notBetween';
 export type PresetValue = {
@@ -23,3 +27,11 @@ export type PresetValue = {
         sublabel?: string;
     };
 };
+export type TreeViewProperty = ObjectProperty & {
+    children?: TreeViewProperty[];
+};
+export type TreeViewObject = {
+    id: string;
+    name: string;
+    properties: TreeViewProperty[];
+};

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

@@ -0,0 +1,54 @@
+import { ExpandedProperty, Obj, ObjectProperty } 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 {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.
+ */
+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;
+type FetchObjectFunction = (id: string) => Promise<Obj | undefined>;
+/**
+ * Fetches the display name path for a given property ID within an object hierarchy.
+ *
+ * @param {string} propertyId - The property ID to find the display name for.
+ * @param {Obj} rootObject - The root object to start the search from.
+ * @param {FetchObjectFunction} fetchObject - Function to fetch an object by its ID.
+ * @returns {Promise<string>} - A promise that resolves to the display name path.
+ */
+export declare const fetchDisplayNamePath: (propertyId: string, rootObject: Obj, fetchObject: FetchObjectFunction) => Promise<string>;
+/**
+ * stores full dot-notation path to each property ID in the given array of properties.
+ *
+ * @param {ObjectProperty[]} properties - The array of properties to update.
+ * @param {string} parentPath - The parent path to attach to each property ID.
+ * @returns {ObjectProperty[]} The updated array of properties with the parent path attached to each property ID.
+ */
+export declare const setIdPaths: (properties: ObjectProperty[], parentPath: string) => ObjectProperty[];
+/**
+ * Traverses a property path within an object hierarchy to retrieve detailed property information.
+ *
+ * @param {string} propertyPath - The dot-separated path of the property to traverse.
+ * @param {Obj} rootObject - The root object from which to start the traversal.
+ * @param {(objectId: string) => Promise<Obj | undefined>} fetchObject - A function to fetch an object by its ID.
+ * @returns {Promise<ObjectProperty | null>} A promise that resolves to an ObjectProperty if found, or null otherwise.
+ */
+export declare const traversePropertyPath: (propertyPath: string, rootObject: Obj, fetchObject: (objectId: string) => Promise<Obj | undefined>) => Promise<ObjectProperty | null>;
+/**
+ * Truncates the name path if it exceeds the specified character limit.
+ *
+ * @param {string} namePath - The full name path to be truncated.
+ * @param {number} limit - The maximum allowed length for the name path.
+ * @returns {string} - The truncated name path if it exceeds the limit, otherwise the original name path.
+ */
+export declare const truncateNamePath: (namePath: string, limit?: number) => string;
+export {};

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

@@ -0,0 +1,143 @@
+/**
+ * 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 {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.
+ */
+export const updateTreeNode = (tree, nodeId, updater) => {
+    return tree.map((node) => {
+        if (node.id === nodeId) {
+            return updater(node);
+        }
+        else if (node.children) {
+            return { ...node, children: updateTreeNode(node.children, nodeId, updater) };
+        }
+        else {
+            return node;
+        }
+    });
+};
+/**
+ * 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.
+ *
+ * @param {string} propertyId - The property ID to find the display name for.
+ * @param {Obj} rootObject - The root object to start the search from.
+ * @param {FetchObjectFunction} fetchObject - Function to fetch an object by its ID.
+ * @returns {Promise<string>} - A promise that resolves to the display name path.
+ */
+export const fetchDisplayNamePath = async (propertyId, rootObject, fetchObject) => {
+    const propertyInfo = await traversePropertyPath(propertyId, rootObject, fetchObject);
+    return propertyInfo ? propertyInfo.name : '';
+};
+/**
+ * stores full dot-notation path to each property ID in the given array of properties.
+ *
+ * @param {ObjectProperty[]} properties - The array of properties to update.
+ * @param {string} parentPath - The parent path to attach to each property ID.
+ * @returns {ObjectProperty[]} The updated array of properties with the parent path attached to each property ID.
+ */
+export const setIdPaths = (properties, parentPath) => {
+    return properties.map((prop) => {
+        const fullPath = parentPath ? `${parentPath}.${prop.id}` : prop.id;
+        return {
+            ...prop,
+            id: fullPath,
+        };
+    });
+};
+/**
+ * Traverses a property path within an object hierarchy to retrieve detailed property information.
+ *
+ * @param {string} propertyPath - The dot-separated path of the property to traverse.
+ * @param {Obj} rootObject - The root object from which to start the traversal.
+ * @param {(objectId: string) => Promise<Obj | undefined>} fetchObject - A function to fetch an object by its ID.
+ * @returns {Promise<ObjectProperty | null>} A promise that resolves to an ObjectProperty if found, or null otherwise.
+ */
+export const traversePropertyPath = async (propertyPath, rootObject, fetchObject) => {
+    const segments = propertyPath.split('.');
+    let currentObject = rootObject;
+    let fullPath = '';
+    let namePath = '';
+    for (let i = 0; i < segments.length; i++) {
+        const remainingPath = segments.slice(i).join('.');
+        let prop = currentObject.properties?.find((p) => p.id === remainingPath);
+        if (prop) {
+            // flattened address or user properties
+            fullPath = fullPath ? `${fullPath}.${remainingPath}` : remainingPath;
+            namePath = namePath ? `${namePath} / ${prop.name}` : prop.name;
+            return {
+                ...prop,
+                id: fullPath,
+                name: namePath,
+            };
+        }
+        else {
+            prop = currentObject.properties?.find((p) => p.id === segments[i]);
+            if (!prop) {
+                return null;
+            }
+            fullPath = fullPath ? `${fullPath}.${prop.id}` : prop.id;
+            namePath = namePath ? `${namePath} / ${prop.name}` : prop.name;
+            if (i === segments.length - 1) {
+                return {
+                    ...prop,
+                    id: fullPath,
+                    name: namePath,
+                };
+            }
+            if (prop.type === 'object' && prop.objectId) {
+                const fetchedObject = await fetchObject(prop.objectId);
+                if (fetchedObject) {
+                    currentObject = fetchedObject;
+                }
+                else {
+                    return null;
+                }
+            }
+        }
+    }
+    return null;
+};
+/**
+ * Truncates the name path if it exceeds the specified character limit.
+ *
+ * @param {string} namePath - The full name path to be truncated.
+ * @param {number} limit - The maximum allowed length for the name path.
+ * @returns {string} - The truncated name path if it exceeds the limit, otherwise the original name path.
+ */
+export const truncateNamePath = (namePath, limit = 20) => {
+    if (namePath.length <= limit) {
+        return namePath;
+    }
+    const parts = namePath.split('/');
+    if (parts.length >= 2) {
+        // Display the first and last segments separated by '/.../'
+        return `${parts[0]}/.../${parts[parts.length - 1]}`;
+    }
+    else {
+        // If there's only one segment, truncate it and add ellipsis
+        return `${namePath.substring(0, limit - 3)}...`;
+    }
+};

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

@@ -1,4 +1,5 @@
 import { ReactComponent } from '@formio/react';
+import Handlebars from 'handlebars';
 import { isArray, isEmpty, isNil, uniq } from 'lodash';
 import { DateTime } from 'luxon';
 import React from 'react';
@@ -9,20 +10,20 @@ import { isPropertyVisible } from '../utils';
 function isAddressProperties(key) {
     return /\.line1|\.line2|\.city|\.county|\.state|\.zipCode$/.test(key);
 }
-function addDays(addend1, addend2) {
+Handlebars.registerHelper('addDays', function (addend1, addend2) {
     const dateAddend1 = DateTime.fromISO(addend1);
     if (dateAddend1.isValid) {
         return dateAddend1.plus({ days: addend2 }).toISODate();
     }
     return undefined;
-}
-function subDays(minuend, subtrahend) {
+});
+Handlebars.registerHelper('subDays', function (minuend, subtrahend) {
     const dateMinuend = DateTime.fromISO(minuend);
     if (dateMinuend.isValid) {
         return dateMinuend.minus({ days: subtrahend }).toISODate();
     }
     return undefined;
-}
+});
 export class FormFieldComponent extends ReactComponent {
     /**
      * Called when the component has been instantiated. This is useful to define
@@ -344,63 +345,29 @@ export class FormFieldComponent extends ReactComponent {
         else {
             delete this.errorDetails['regexes'];
         }
-        const evaluateDateValidation = (dateValidation) => {
+        if (this.component.validate.minDate || this.component.validate.maxDate) {
             const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-            const exactDateRegex = /^{{(?<inputProperty>input\.[a-zA-Z][a-zA-Z0-9_]*|__today__)}}$/;
-            const relativeDateRegex = /^{{(?<operation>addDays|subDays) (?<operand1>input\.[a-zA-Z][a-zA-Z0-9_]*|__today__) (?<operand2>[0-9]+)}}$/;
-            // If the date validation isn't a literal date, evaluate it
-            if (dateValidation && !dateRegex.test(dateValidation)) {
+            const data = {
+                input: { ...this.root.data },
+                __today__: DateTime.now().toISODate(),
+            };
+            let { minDate, maxDate } = validate;
+            if (minDate && !dateRegex.test(minDate)) {
                 try {
-                    const today = DateTime.now().toISODate();
-                    if (exactDateRegex.test(dateValidation)) {
-                        const { groups = {} } = exactDateRegex.exec(dateValidation) ?? {};
-                        const { inputProperty } = groups;
-                        if (inputProperty === '__today__') {
-                            return today;
-                        }
-                        else if (inputProperty.split('.').length > 1) {
-                            const propertyId = inputProperty.split('.')[1];
-                            if (propertyId in this.root.data) {
-                                return this.root.data[propertyId];
-                            }
-                        }
-                    }
-                    else if (relativeDateRegex.test(dateValidation)) {
-                        const { groups = {} } = relativeDateRegex.exec(dateValidation) ?? {};
-                        // eslint-disable-next-line prefer-const
-                        let { operation, operand1, operand2 } = groups;
-                        if (operation && operand1 && operand2) {
-                            if (operand1 === '__today__') {
-                                operand1 = today;
-                            }
-                            else if (operand1.split('.').length > 1) {
-                                const propertyId = operand1.split('.')[1];
-                                if (propertyId in this.root.data) {
-                                    operand1 = this.root.data[propertyId];
-                                }
-                            }
-                            else {
-                                throw `Invalid operand: ${operand1}`;
-                            }
-                            if (operation === 'addDays') {
-                                return addDays(operand1, parseInt(operand2));
-                            }
-                            else {
-                                return subDays(operand1, parseInt(operand2));
-                            }
-                        }
-                    }
-                    throw `Invalid date validation: ${dateValidation}`;
+                    minDate = Handlebars.compile(minDate)(data);
+                }
+                catch (err) {
+                    console.log(err);
+                }
+            }
+            if (maxDate && !dateRegex.test(maxDate)) {
+                try {
+                    maxDate = Handlebars.compile(maxDate)(data);
                 }
                 catch (err) {
                     console.log(err);
-                    return undefined;
                 }
             }
-        };
-        if (this.component.validate.minDate || this.component.validate.maxDate) {
-            const minDate = validate.minDate ? evaluateDateValidation(validate.minDate) : undefined;
-            const maxDate = validate.maxDate ? evaluateDateValidation(validate.maxDate) : undefined;
             if ((minDate && value < minDate) || (maxDate && value > maxDate)) {
                 this.errorDetails['date'] = validate.customMessage;
             }
@@ -456,11 +423,7 @@ export class FormFieldComponent extends ReactComponent {
                 !this.root.customErrors.some((err) => err.message === error)) {
                 this.root.customErrors = [
                     ...this.root.customErrors,
-                    {
-                        component: this.component,
-                        message: error,
-                        formattedKeyOrPath: this.component.key,
-                    },
+                    { component: this.component, message: error, formattedKeyOrPath: this.component.key },
                 ];
             }
         });

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

@@ -1,5 +1,5 @@
 import cleanDeep from 'clean-deep';
-import Handlebars from 'kbn-handlebars';
+import Handlebars from 'handlebars';
 import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Close } from '../../../../../icons';
@@ -132,7 +132,7 @@ export const ObjectPropertyInput = (props) => {
         setOpenCreateDialog(false);
     };
     const compileExpression = (expression, instance) => {
-        const template = Handlebars.compileAST(expression);
+        const template = Handlebars.compile(expression);
         return instance ? template(instance) : undefined;
     };
     const navigationSlug = defaultPages && property.objectId && defaultPages[property.objectId];

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

@@ -1,4 +1,4 @@
-import Handlebars from 'kbn-handlebars';
+import Handlebars from 'handlebars';
 import { difference, isEmpty, isObject } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { FormField } from '../../../..';
@@ -60,7 +60,7 @@ export const DropdownRepeatableFieldInput = (props) => {
         }
     };
     const compileExpression = (instance, expression) => {
-        const template = Handlebars.compileAST(expression);
+        const template = Handlebars.compile(expression);
         return template(instance);
     };
     return (React.createElement(React.Fragment, null, !readOnly ? (property && (React.createElement(React.Fragment, null,
@@ -87,8 +87,5 @@ export const DropdownRepeatableFieldInput = (props) => {
                     } })),
                 loading: loading,
             } }),
-        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
-                isError: snackbarError.isError,
-                showAlert: false,
-            }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
 };

package/dist/published/stories/CriteriaBuilder.stories.d.ts

@@ -6,3 +6,4 @@ export default _default;
 export declare const CriteriaBuilder: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
 export declare const CriteriaBuilderPresetUserID: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
 export declare const CriteriaBuilderGroupedPresetValues: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
+export declare const CriteriaBuilderRelatedObject: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;

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

@@ -282,3 +282,433 @@ CriteriaBuilderGroupedPresetValues.args = {
     presetGroupLabel: 'Parameter Values',
     enablePresetValues: true,
 };
+export const CriteriaBuilderRelatedObject = CriteriaBuilderTemplate.bind({});
+CriteriaBuilderRelatedObject.args = {
+    treeViewOpts: {
+        fetchObject: async (objectId) => {
+            if (objectId === 'people') {
+                return Promise.resolve({
+                    id: 'people',
+                    name: 'People',
+                    properties: [
+                        {
+                            id: 'avgVehicleRating',
+                            name: 'Avg Vehicle Rating',
+                            type: 'integer',
+                            required: false,
+                            formula: '{{avg object="vehicle" relatedProperty="registeredOwner" aggregateProperty="rating" }}',
+                            formulaType: 'aggregate',
+                        },
+                        {
+                            id: 'email',
+                            name: 'Email',
+                            type: 'string',
+                            required: false,
+                        },
+                        {
+                            id: 'firstName',
+                            name: 'FirstName',
+                            type: 'string',
+                            required: false,
+                            searchable: true,
+                        },
+                        {
+                            id: 'id',
+                            name: 'ID',
+                            type: 'string',
+                            required: true,
+                        },
+                        {
+                            id: 'lastName',
+                            name: 'LastName',
+                            type: 'string',
+                            required: false,
+                            searchable: true,
+                        },
+                        {
+                            id: 'license',
+                            name: 'License',
+                            type: 'object',
+                            objectId: 'license',
+                            children: [
+                                {
+                                    id: 'license-loading',
+                                    name: 'Loading...',
+                                    type: 'loading',
+                                },
+                            ],
+                        },
+                        {
+                            id: 'name',
+                            name: 'Name',
+                            type: 'string',
+                            required: false,
+                            searchable: true,
+                            formula: '{{firstName}} {{lastName}} ',
+                        },
+                        {
+                            id: 'phone',
+                            name: 'Phone',
+                            type: 'string',
+                            required: false,
+                        },
+                        {
+                            id: 'vehicleCount',
+                            name: 'Vehicle Count',
+                            type: 'integer',
+                            required: false,
+                            formula: '{{count object="vehicle" relatedProperty="registeredOwner" aggregateProperty="name" }}',
+                            formulaType: 'aggregate',
+                        },
+                        {
+                            id: 'homeAddress.line1',
+                            name: 'Applicant Address Line 1',
+                            type: 'string',
+                        },
+                        {
+                            id: 'homeAddress.line2',
+                            name: 'Applicant Address Line 2',
+                            type: 'string',
+                        },
+                        {
+                            id: 'homeAddress.city',
+                            name: 'Applicant Address City',
+                            type: 'string',
+                        },
+                        {
+                            id: 'homeAddress.state',
+                            name: 'Applicant Address State',
+                            type: 'string',
+                        },
+                        {
+                            id: 'homeAddress.zipCode',
+                            name: 'Applicant Address Zip Code',
+                            type: 'string',
+                        },
+                        {
+                            id: 'homeAddress.county',
+                            name: 'Applicant Address County',
+                            type: 'string',
+                        },
+                    ],
+                    actions: [],
+                });
+            }
+            else if (objectId === 'license') {
+                return Promise.resolve({
+                    id: 'license',
+                    name: 'License',
+                    actions: [],
+                    properties: [
+                        {
+                            id: 'expirationDate',
+                            name: 'ExpirationDate',
+                            type: 'date',
+                            required: false,
+                        },
+                        {
+                            id: 'id',
+                            name: 'ID',
+                            type: 'string',
+                            required: true,
+                        },
+                        {
+                            id: 'issueDate',
+                            name: 'IssueDate',
+                            type: 'date',
+                            required: false,
+                        },
+                        {
+                            id: 'licenseNumber',
+                            name: 'LicenseNumber',
+                            type: 'string',
+                            required: false,
+                        },
+                        {
+                            id: 'name',
+                            name: 'Name',
+                            type: 'string',
+                            required: false,
+                        },
+                        {
+                            id: 'person',
+                            name: 'Person',
+                            type: 'object',
+                            objectId: 'people',
+                            children: [
+                                {
+                                    id: 'person-loading',
+                                    name: 'Loading...',
+                                    type: 'loading',
+                                },
+                            ],
+                        },
+                    ],
+                });
+            }
+            else if (objectId === 'applicationType') {
+                return Promise.resolve({
+                    id: 'applicationType',
+                    name: 'Application Type',
+                    actions: [],
+                    properties: [
+                        {
+                            id: 'id',
+                            name: 'ID',
+                            type: 'string',
+                            required: true,
+                        },
+                        {
+                            id: 'name',
+                            name: 'Name',
+                            type: 'string',
+                            required: true,
+                        },
+                        {
+                            id: 'description',
+                            name: 'Description',
+                            type: 'string',
+                            required: false,
+                        },
+                    ],
+                });
+            }
+            else {
+                Promise.resolve(null);
+            }
+        },
+        object: {
+            id: 'application',
+            name: 'Application',
+            properties: [
+                {
+                    id: 'applicant',
+                    name: 'Applicant',
+                    type: 'object',
+                    required: false,
+                    objectId: 'people',
+                    children: [
+                        {
+                            id: 'applicant-loading',
+                            name: 'Loading...',
+                            type: 'loading',
+                        },
+                    ],
+                },
+                {
+                    id: 'applicationType',
+                    name: 'Application Type',
+                    type: 'object',
+                    objectId: 'applicationType',
+                    required: false,
+                    children: [
+                        {
+                            id: 'applicationType-loading',
+                            name: 'Loading...',
+                            type: 'loading',
+                        },
+                    ],
+                },
+                {
+                    id: 'appName',
+                    name: 'Applicant Name',
+                    type: 'string',
+                    required: false,
+                    objectId: 'people',
+                    formula: '{{applicant.firstName}} {{applicant.lastName}} ',
+                },
+                {
+                    id: 'applicationId',
+                    name: 'ApplicationID',
+                    type: 'string',
+                    required: false,
+                },
+                {
+                    id: 'completeDate',
+                    name: 'CompleteDate',
+                    type: 'date',
+                    required: false,
+                },
+                {
+                    id: 'correspondenceTemplate',
+                    name: 'Correspondence Template',
+                    type: 'string',
+                },
+                {
+                    id: 'id',
+                    name: 'ID',
+                    type: 'string',
+                    required: true,
+                },
+                {
+                    id: 'homeAddress.line1',
+                    name: 'Applicant Address Line 1',
+                    type: 'string',
+                },
+                {
+                    id: 'homeAddress.line2',
+                    name: 'Applicant Address Line 2',
+                    type: 'string',
+                },
+                {
+                    id: 'homeAddress.city',
+                    name: 'Applicant Address City',
+                    type: 'string',
+                },
+                {
+                    id: 'homeAddress.state',
+                    name: 'Applicant Address State',
+                    type: 'string',
+                },
+                {
+                    id: 'homeAddress.zipCode',
+                    name: 'Applicant Address Zip Code',
+                    type: 'string',
+                },
+                {
+                    id: 'homeAddress.county',
+                    name: 'Applicant Address County',
+                    type: 'string',
+                },
+                {
+                    id: 'name',
+                    name: 'Name',
+                    type: 'string',
+                    required: true,
+                },
+                {
+                    id: 'startDate',
+                    name: 'StartDate',
+                    type: 'date',
+                    required: false,
+                },
+                {
+                    id: 'status',
+                    name: 'Status',
+                    type: 'string',
+                    enum: ['Approved', 'Denied', 'InProgress', 'Received'],
+                    required: false,
+                },
+                {
+                    id: 'trailName',
+                    name: 'TrailName',
+                    type: 'string',
+                    required: false,
+                },
+            ],
+        },
+    },
+    properties: [
+        {
+            id: 'applicant',
+            name: 'Applicant',
+            type: 'object',
+            objectId: 'person',
+        },
+        {
+            id: 'applicationType',
+            name: 'Application Type',
+            type: 'object',
+            objectId: 'applicationType',
+            required: false,
+        },
+        {
+            id: 'appName',
+            name: 'Applicant Name',
+            type: 'string',
+            required: false,
+            objectId: 'people',
+            formula: '{{applicant.firstName}} {{applicant.lastName}} ',
+        },
+        {
+            id: 'applicationId',
+            name: 'ApplicationID',
+            type: 'string',
+            required: false,
+        },
+        {
+            id: 'completeDate',
+            name: 'CompleteDate',
+            type: 'date',
+            required: false,
+        },
+        {
+            id: 'correspondenceTemplate',
+            name: 'Correspondence Template',
+            type: 'string',
+        },
+        {
+            id: 'id',
+            name: 'ID',
+            type: 'string',
+            required: true,
+        },
+        {
+            id: 'homeAddress.line1',
+            name: 'Applicant Address Line 1',
+            type: 'string',
+        },
+        {
+            id: 'homeAddress.line2',
+            name: 'Applicant Address Line 2',
+            type: 'string',
+        },
+        {
+            id: 'homeAddress.city',
+            name: 'Applicant Address City',
+            type: 'string',
+        },
+        {
+            id: 'homeAddress.state',
+            name: 'Applicant Address State',
+            type: 'string',
+        },
+        {
+            id: 'homeAddress.zipCode',
+            name: 'Applicant Address Zip Code',
+            type: 'string',
+        },
+        {
+            id: 'homeAddress.county',
+            name: 'Applicant Address County',
+            type: 'string',
+        },
+        {
+            id: 'name',
+            name: 'Name',
+            type: 'string',
+            required: true,
+        },
+        {
+            id: 'startDate',
+            name: 'StartDate',
+            type: 'date',
+            required: false,
+        },
+        {
+            id: 'status',
+            name: 'Status',
+            type: 'string',
+            enum: ['Approved', 'Denied', 'InProgress', 'Received'],
+            required: false,
+        },
+        {
+            id: 'trailName',
+            name: 'TrailName',
+            type: 'string',
+            required: false,
+        },
+    ],
+    setCriteria: (criteria) => console.log('criteria= ', criteria),
+    criteria: {
+        $and: [
+            {
+                name: 'bert',
+            },
+            {
+                'applicant.lastName': '',
+            },
+        ],
+    },
+    enablePresetValues: false,
+};

package/dist/published/types.d.ts

@@ -14,6 +14,19 @@ export type ObjectProperty = {
     objectId?: string;
     formula?: string;
 };
+export type Obj = {
+    id: string;
+    name: string;
+    properties?: ObjectProperty[];
+};
+export type ExpandedProperty = {
+    id: string;
+    name: string;
+    type: string;
+    objectId?: string;
+    open?: boolean;
+    children?: ExpandedProperty[];
+};
 type Action = {
     id: string;
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.242",
+    "version": "1.0.0-dev.244",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -114,8 +114,8 @@
         "eslint-plugin-no-inline-styles": "^1.0.5",
         "flat": "^6.0.1",
         "formiojs": "^4.15.0-rc.23",
+        "handlebars": "^4.7.8",
         "html-react-parser": "^5.1.18",
-        "kbn-handlebars": "^1.0.0",
         "luxon": "^2.5.2",
         "nanoid": "^5.0.8",
         "nanoid-dictionary": "^4.3.0",