@evoke-platform/ui-components 1.0.0-dev.241 → 1.0.0-dev.243

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

@@ -1,12 +1,15 @@
-import { AddRounded, RemoveCircleOutlineRounded } from '@mui/icons-material';
+import { AddRounded, UnfoldMore } from '@mui/icons-material';
+import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isEmpty, startCase } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, formatQuery, parseMongoDB, useRuleGroup, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
+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' },
@@ -49,8 +52,9 @@ const CustomRuleGroup = (props) => {
         removeGroup,
     };
     return (React.createElement("div", { ref: rg.previewRef, className: rg.outerClassName, "data-testid": TestID.ruleGroup, "data-dragmonitorid": rg.dragMonitorId, "data-dropmonitorid": rg.dropMonitorId, "data-rule-group-id": rg.id, "data-level": rg.path.length, "data-path": JSON.stringify(rg.path) },
-        React.createElement("div", { className: rg.classNames.body },
-            React.createElement(RuleGroupBodyComponents, { ...subComponentProps })),
+        rg.ruleGroup.rules.length > 0 && (React.createElement("div", { className: rg.classNames.body },
+            React.createElement(Typography, { className: "betweenRules" }, "Where"),
+            React.createElement(RuleGroupBodyComponents, { ...subComponentProps }))),
         React.createElement("div", { ref: rg.dropRef, className: rg.classNames.header },
             React.createElement(RuleGroupHeaderComponents, { ...subComponentProps, schema: {
                     ...subComponentProps.schema,
@@ -60,24 +64,41 @@ const CustomRuleGroup = (props) => {
                 } }))));
 };
 const customButton = (props) => {
-    const { title, handleOnClick, label } = props;
+    const { title, handleOnClick, label, path } = props;
     let buttonLabel = label;
+    const nestedConditionLimit = 2;
     switch (title) {
         case 'Add group':
-            buttonLabel = 'Condition Group';
+            buttonLabel = 'Add Condition Group';
             break;
         case 'Add rule':
-            buttonLabel = 'Condition';
+            buttonLabel = 'Add Condition';
+            break;
+        case 'Remove group':
+            buttonLabel = 'Clear All';
             break;
     }
-    return (React.createElement(Button, { variant: "contained", onClick: handleOnClick, size: "small", startIcon: React.createElement(AddRounded, null), sx: {
-            padding: '6px 20px',
-            fontSize: '14.5px',
-            backgroundColor: '#ebf4f8',
-            color: '#0678a9',
+    return (React.createElement(React.Fragment, null, (path.length < nestedConditionLimit || title === 'Add rule') && (React.createElement(Button, { onClick: handleOnClick, startIcon: React.createElement(AddRounded, null), sx: {
+            padding: '6px 16px',
+            fontSize: '0.875rem',
+            marginRight: path.length === 0 ? '.5rem' : '0px',
+            color: title === 'Add group' ? 'black' : '#0075A7',
             boxShadow: 'none',
-            '&:hover': { backgroundColor: '#dcecf3', boxShadow: 'none' },
-        } }, buttonLabel));
+            float: 'left',
+            backgroundColor: path.length === 0
+                ? title === 'Add rule'
+                    ? 'rgba(0, 117, 167, 0.08)'
+                    : '#f6f7f8'
+                : 'transparent',
+            '&:hover': {
+                backgroundColor: path.length === 0
+                    ? title === 'Add rule'
+                        ? 'rgba(0, 117, 167, 0.08)'
+                        : '#f6f7f8'
+                    : 'transparent',
+                boxShadow: 'none',
+            },
+        } }, buttonLabel))));
 };
 const customSelector = (props) => {
     const { options, value, handleOnChange, title, context, level } = props;
@@ -88,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;
@@ -98,7 +122,7 @@ const customSelector = (props) => {
     }
     switch (title) {
         case 'Operators':
-            width = '20%';
+            width = '25%';
             if (inputType === 'array') {
                 opts = options
                     .filter((option) => ['null', 'notNull', 'in', 'notIn'].includes(option.name))
@@ -141,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 || '';
             }
@@ -152,26 +176,36 @@ 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, maxWidth: title === 'Operators' ? '200px' : 'none' }, 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 { options, value, handleOnChange, context, level } = props;
-    return (React.createElement(Autocomplete, { options: options, value: startCase(value), 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        getOptionLabel: (option) => startCase(option?.name ?? option), 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        isOptionEqualToValue: (option, value) => option === value, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onChange: (event, newValue) => handleOnChange(newValue?.value.name), size: 'small', renderInput: (params) => React.createElement(TextField, { ...params, size: "small", sx: { '& fieldset': { border: 'none' } } }), sx: {
-            width: '80px',
-            backgroundColor: '#DFE3E8',
-            borderWidth: 'none',
+    const { value, handleOnChange, context, level, path } = props;
+    const isReadOnly = !!context.disabledCriteria && context.disabledCriteria.level - 1 === level;
+    const conditionPositionInGroup = path[path.length - 1];
+    const toggleCombinator = () => {
+        const newCombinator = value === 'and' ? 'or' : 'and';
+        handleOnChange(newCombinator);
+    };
+    return conditionPositionInGroup === 1 ? (React.createElement(Box, { sx: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            backgroundColor: isReadOnly ? '#f5f5f5' : '#fff',
+            border: '1px solid #ddd',
             borderRadius: '8px',
-            '.MuiInputBase-input': {
-                fontWeight: 550,
-                fontSize: '14px',
-            },
-        }, readOnly: context.disabledCriteria && context.disabledCriteria.level - 1 === level, disableClearable: true }));
+            cursor: 'pointer',
+            width: '72px',
+            padding: '5px 10px',
+            fontSize: '16px',
+            opacity: isReadOnly ? 0.6 : 1,
+        }, onClick: !isReadOnly ? toggleCombinator : undefined },
+        React.createElement(Typography, null, startCase(value)),
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: '16px',
+                color: '#212B36',
+            } },
+            React.createElement(UnfoldMore, null)))) : (React.createElement(Typography, { "aria-label": "combinator-text", sx: { color: '#637381' } }, startCase(value)));
 };
 const customDelete = (props) => {
     const { handleOnClick, context, level } = props;
@@ -182,8 +216,16 @@ const customDelete = (props) => {
         hideDelete =
             Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
     }
-    return !hideDelete ? (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
-        React.createElement(RemoveCircleOutlineRounded, null))) : (React.createElement(React.Fragment, null));
+    return !hideDelete ? (props.title === 'Remove group' ? (React.createElement(Button, { onClick: handleOnClick, className: 'ruleGroup-remove', sx: {
+            padding: '6px 16px',
+            opacity: 0,
+            fontSize: '14.5px',
+            boxShadow: 'none',
+            '&:hover': { backgroundColor: 'transparent', boxShadow: 'none' },
+            color: '#212B36',
+            fontWeight: '400',
+        } }, "Delete group")) : (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
+        React.createElement(TrashCan, { sx: { ':hover': { color: '#637381' } } })))) : (React.createElement(React.Fragment, null));
 };
 export const valueEditor = (props) => {
     // For backward compatibility, if enable preset values is true, but preset
@@ -199,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) {
@@ -267,23 +309,39 @@ const CriteriaBuilder = (props) => {
                     borderColor: '#ddd',
                     borderRadius: '8px',
                 },
-                '.queryBuilder-branches .ruleGroup-body': {
-                    marginLeft: hideBorder ? '0px' : 'calc(2 * 0.5rem)',
+                '.ruleGroup': {
+                    borderColor: '#c2c2c2',
+                    borderLeftWidth: '4px',
+                    background: '#F9FAFB',
                 },
-                '.queryBuilder-branches': { color: '#ddd' },
-                '.queryBuilder-branches .betweenRules::before': {
-                    borderColor: '#ddd',
-                    borderStyle: hideBorder ? 'hidden' : 'solid',
+                '.ruleGroup:hover, .ruleGroup:has(:focus)': {
+                    borderColor: '#0678a9',
                 },
-                '.ruleGroup': {
-                    borderColor: '#ddd',
-                    borderStyle: hideBorder ? 'hidden' : 'solid',
+                '.ruleGroup:hover > .ruleGroup-header > .ruleGroup-remove, .ruleGroup:has(:focus) > .ruleGroup-header > .ruleGroup-remove ': {
+                    opacity: 1,
+                    float: 'right',
                 },
-                '.ruleGroup .ruleGroup': { borderStyle: 'solid' },
-                '.queryBuilder-branches .rule::before, .queryBuilder-branches .ruleGroup .ruleGroup::before, .queryBuilder-branches .rule::after, .queryBuilder-branches .ruleGroup .ruleGroup::after': {
-                    borderColor: '#ddd',
-                    borderStyle: hideBorder ? 'hidden' : 'solid',
+                '.ruleGroup:not(.ruleGroup .ruleGroup)': {
+                    borderStyle: 'hidden',
+                    background: '#fff',
+                    maxWidth: '70vw',
                 },
+                '.ruleGroup-header': {
+                    display: 'block',
+                },
+                '.betweenRules': {
+                    textAlign: 'right',
+                },
+                '.ruleGroup-body': {
+                    display: 'grid !important',
+                    gridTemplateRows: 'auto 1fr auto',
+                    gridTemplateColumns: 'min-content',
+                    alignItems: 'center',
+                },
+                '.ruleGroup-body > .rule, .ruleGroup-body > .ruleGroup': {
+                    gridColumnStart: 2,
+                },
+                '.ruleGroup .ruleGroup': { borderStyle: 'solid' },
             } },
             React.createElement(QueryBuilderMaterial, null,
                 React.createElement(QueryBuilder, { query: !criteria && !originalCriteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
@@ -304,8 +362,8 @@ const CriteriaBuilder = (props) => {
                         enablePresetValues,
                         presetGroupLabel,
                         disabledCriteria,
+                        treeViewOpts,
                     }, controlClassnames: {
-                        queryBuilder: 'queryBuilder-branches',
                         ruleGroup: 'container',
                     }, operators: operators
                         ? ALL_OPERATORS.filter((o) => operators.includes(o.name))

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/ValueEditor.js

@@ -61,11 +61,11 @@ const ValueEditor = (props) => {
         if (inputType === 'date') {
             // date editor
             return (React.createElement(LocalizationProvider, null,
-                React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } })), readOnly: readOnly })));
+                React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' } })), readOnly: readOnly })));
         }
         else if (inputType === 'time') {
             return (React.createElement(LocalizationProvider, null,
-                React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } })), readOnly: readOnly })));
+                React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' } })), readOnly: readOnly })));
         }
         else if (inputType === 'number' || inputType === 'integer') {
             const isMultiple = ['in', 'notIn'].includes(operator);
@@ -79,7 +79,7 @@ const ValueEditor = (props) => {
                         handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                     }, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%' }, readOnly: readOnly }));
+                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -91,7 +91,7 @@ const ValueEditor = (props) => {
                         }
                     }, ...(inputType === 'number'
                         ? { InputProps: { inputComponent: NumericFormat } }
-                        : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%' }, readOnly: readOnly }));
+                        : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
             }
         }
         else {
@@ -133,7 +133,7 @@ const ValueEditor = (props) => {
                     }, groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: { width: '33%' }, readOnly: readOnly }));
             }
             else {
-                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' }, readOnly: readOnly }));
+                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
             }
         }
     };

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/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.241",
+    "version": "1.0.0-dev.243",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",