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

package/dist/published/components/core/Alert/Alert.js

@@ -31,7 +31,7 @@ const colorMap = {
 const Alert = (props) => {
     const { children, action, severity, onClose, color } = props;
     const getIcon = () => {
-        const iconColor = color ? colorMap[color] ?? color : severity ? colorMap[severity] : colorMap['success'];
+        const iconColor = color ? (colorMap[color] ?? color) : severity ? colorMap[severity] : colorMap['success'];
         switch (severity) {
             case 'error':
                 return React.createElement(ErrorRounded, { sx: { ...styles.icon, color: iconColor } });

package/dist/published/components/core/Autocomplete/Autocomplete.js

@@ -14,7 +14,7 @@ const Autocomplete = (props) => {
                     ? option
                     : typeof option?.label === 'boolean'
                         ? new Boolean(option?.label).toString()
-                        : option?.label ?? '',
+                        : (option?.label ?? ''),
                 value: option?.value ?? option,
             };
         })
@@ -62,7 +62,7 @@ const Autocomplete = (props) => {
                     marginTop: '3px',
                     borderRadius: '8px',
                     ...props.sx,
-                }, options: sortedOptions, popupIcon: (props.popupIcon ?? (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) }),
+                }, options: sortedOptions, popupIcon: props.popupIcon ? props.popupIcon : props.readOnly || props.disabled ? null : React.createElement(ExpandMore, null) }),
             props.error && React.createElement(FieldError, { required: props.required, label: props.errorMessage })));
     }
     else {
@@ -78,7 +78,7 @@ const Autocomplete = (props) => {
                     backgroundColor: props.readOnly ? '#f4f6f8' : 'auto',
                     borderRadius: '8px',
                     ...props.sx,
-                }, options: sortedOptions, popupIcon: (props.popupIcon ?? (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) }),
+                }, options: sortedOptions, popupIcon: props.popupIcon ? props.popupIcon : props.readOnly || props.disabled ? null : React.createElement(ExpandMore, null) }),
             props.error && React.createElement(FieldError, { required: props.required, label: props.errorMessage })));
     }
 };

package/dist/published/components/core/DatePicker/DatePicker.js

@@ -21,7 +21,7 @@ const DatePicker = (props) => {
         if (newValue instanceof Error) {
             newValue = new InvalidDate(keyboardInputValue);
         }
-        handleChange(newValue, keyboardInputValue);
+        handleChange(newValue instanceof InvalidDate || newValue === null ? newValue : LocalDate.from(newValue), keyboardInputValue);
     };
     return (React.createElement(UIThemeProvider, null,
         React.createElement(MUIDatePicker, { value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, { ...params }), PaperProps: {

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

@@ -12,23 +12,8 @@ import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
 import { difference } from '../util';
 import PropertyTree from './PropertyTree';
-import { parseMongoDB, traversePropertyPath } from './utils';
+import { ALL_OPERATORS, parseMongoDB, traversePropertyPath } from './utils';
 import ValueEditor from './ValueEditor';
-const ALL_OPERATORS = [
-    { name: '=', label: 'Is' },
-    { name: '!=', label: 'Is not' },
-    { name: '<', label: 'Less than' },
-    { name: '>', label: 'Greater than' },
-    { name: '<=', label: 'Less than or equal to' },
-    { name: '>=', label: 'Greater than or equal to' },
-    { name: 'contains', label: 'Contains' },
-    { name: 'beginsWith', label: 'Starts with' },
-    { name: 'endsWith', label: 'Ends with' },
-    { name: 'null', label: 'Is empty' },
-    { name: 'notNull', label: 'Is not empty' },
-    { name: 'in', label: 'In' },
-    { name: 'notIn', label: 'Not in' },
-];
 const styles = {
     buttons: {
         padding: '6px 16px',
@@ -139,7 +124,7 @@ const customSelector = (props) => {
                     .map((option) => ({ name: option.name, label: option.label }));
                 val = val === '=' ? '' : options.find((option) => option.name === val).name;
             }
-            else if (inputType === 'document') {
+            else if (inputType === 'document' || inputType === 'criteria') {
                 opts = options
                     .filter((option) => ['null', 'notNull'].includes(option.name))
                     .map((option) => ({ name: option.name, label: option.label }));
@@ -185,7 +170,7 @@ const customSelector = (props) => {
             break;
         case 'Fields':
             placeholder = 'Select Property';
-            width = '33%';
+            width = '37%';
             val = options.find((option) => option.name === val)?.name;
             break;
     }
@@ -281,22 +266,7 @@ export const valueEditor = (props) => {
 };
 const CriteriaBuilder = (props) => {
     const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
-    const [query, setQuery] = useState(undefined);
     const [propertyTreeMap, setPropertyTreeMap] = useState();
-    useEffect(() => {
-        if (criteria || originalCriteria) {
-            const criteriaToParse = criteria || originalCriteria || {};
-            const updatedQuery = parseMongoDB(criteriaToParse);
-            !isEmpty(treeViewOpts) && updatePropertyTreeMap(updatedQuery);
-            setQuery({
-                ...updatedQuery,
-                rules: processRules(updatedQuery.rules, true),
-            });
-        }
-        else {
-            setQuery({ combinator: 'and', rules: [] });
-        }
-    }, [originalCriteria]);
     const processRules = (rules, isSavedValue) => {
         return rules.map((rule) => {
             if ('rules' in rule) {
@@ -308,13 +278,7 @@ const CriteriaBuilder = (props) => {
             else {
                 const propertyType = properties.find((property) => property.id === rule.field)?.type;
                 let adjustedValue = rule.value;
-                if ((propertyType === 'array' ||
-                    ((propertyType === 'string' || propertyType === 'richText') &&
-                        (rule.operator === 'in' || rule.operator === 'notIn'))) &&
-                    isSavedValue) {
-                    adjustedValue = rule.value?.split(',');
-                }
-                else if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
+                if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
                     adjustedValue = null;
                 }
                 return {
@@ -325,31 +289,67 @@ const CriteriaBuilder = (props) => {
             }
         });
     };
-    // this retrieves the properties from a treeview for each property in the query
-    // they are then used in the custom query builder components to determine the input type etc
-    const updatePropertyTreeMap = (q) => {
-        const ids = [];
-        const traverseRulesForIds = (rules) => {
-            rules.forEach((rule) => {
-                if ('rules' in rule) {
-                    traverseRulesForIds(rule.rules);
-                }
-                else {
-                    ids.push(rule.field);
+    useEffect(() => {
+        if ((criteria || originalCriteria) &&
+            !isEmpty(treeViewOpts) &&
+            treeViewOpts.object &&
+            treeViewOpts.fetchObject) {
+            const { object, fetchObject } = treeViewOpts;
+            // this retrieves the properties from a treeview for each property in the query
+            // they are then used in the custom query builder components to determine the input type etc
+            const updatePropertyTreeMap = async () => {
+                const newQuery = parseMongoDB(criteria || originalCriteria || {});
+                const ids = [];
+                const traverseRulesForIds = (rules) => {
+                    rules.forEach((rule) => {
+                        if ('rules' in rule) {
+                            traverseRulesForIds(rule.rules);
+                        }
+                        else {
+                            ids.push(rule.field);
+                        }
+                    });
+                };
+                traverseRulesForIds(newQuery.rules);
+                let newPropertyTreeMap = {};
+                const newPropertyTreeMapPromises = [];
+                for (const id of ids) {
+                    if (!propertyTreeMap?.[id]) {
+                        newPropertyTreeMapPromises.push(traversePropertyPath(id, object, fetchObject)
+                            .then((property) => {
+                            if (property) {
+                                return {
+                                    [id]: property,
+                                };
+                            }
+                            return {};
+                        })
+                            .catch((err) => {
+                            console.error(err);
+                            return {};
+                        }));
+                    }
                 }
-            });
-        };
-        traverseRulesForIds(q.rules);
-        const tempPropertyMap = { ...propertyTreeMap };
-        ids.forEach(async (id) => {
-            if (!propertyTreeMap?.[id] && treeViewOpts?.object && treeViewOpts?.fetchObject) {
-                const prop = await traversePropertyPath(id, treeViewOpts?.object, treeViewOpts?.fetchObject);
-                if (prop)
-                    tempPropertyMap[id] = prop;
+                newPropertyTreeMap = (await Promise.all(newPropertyTreeMapPromises)).reduce((acc, currentProperty) => ({ ...acc, ...currentProperty }), {});
+                setPropertyTreeMap((prevPropertyTreeMap) => ({
+                    ...prevPropertyTreeMap,
+                    ...newPropertyTreeMap,
+                }));
+            };
+            updatePropertyTreeMap().catch((err) => console.error(err));
+        }
+    }, [criteria, originalCriteria, treeViewOpts]);
+    const initializeQuery = () => {
+        const criteriaToParse = criteria || originalCriteria;
+        const updatedQuery = criteriaToParse ? parseMongoDB(criteriaToParse || {}) : undefined;
+        return updatedQuery
+            ? {
+                ...updatedQuery,
+                rules: processRules(updatedQuery.rules, true),
             }
-            setPropertyTreeMap(tempPropertyMap);
-        });
+            : { combinator: 'and', rules: [] };
     };
+    const [query, setQuery] = useState(initializeQuery);
     const handleClearAll = () => {
         handleQueryChange({ combinator: 'and', rules: [] });
     };
@@ -437,7 +437,6 @@ const CriteriaBuilder = (props) => {
                 '.ruleGroup:not(.ruleGroup .ruleGroup)': {
                     borderStyle: 'hidden',
                     background: '#fff',
-                    maxWidth: '70vw',
                 },
                 '.ruleGroup-header': {
                     display: 'block',
@@ -525,7 +524,7 @@ const CriteriaBuilder = (props) => {
                     justifyContent: 'space-between',
                     alignItems: 'center',
                     marginBottom: '10px',
-                    maxWidth: '71vw',
+                    width: '100%',
                 } },
                 React.createElement(Box, null,
                     React.createElement(Button, { sx: {

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

@@ -102,7 +102,7 @@ const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value
         }
     };
     return (React.createElement(Autocomplete, { "aria-label": "Property Selector", value: value, fullWidth: true, sx: {
-            width: '33%',
+            width: '37%',
         }, disableClearable: true, options: propertyOptions.map((property) => {
             return {
                 label: objectPropertyNamePathMap[property.id],
@@ -123,8 +123,8 @@ const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value
         }, getOptionLabel: (option) => {
             // Retrieve the full name path from the map
             const namePath = typeof option === 'string'
-                ? objectPropertyNamePathMap[option] ?? ''
-                : objectPropertyNamePathMap[option.value] ?? '';
+                ? (objectPropertyNamePathMap[option] ?? '')
+                : (objectPropertyNamePathMap[option.value] ?? '');
             return truncateNamePath(namePath, NAME_PATH_LIMIT);
         }, renderInput: (params) => {
             const fullDisplayName = value && objectPropertyNamePathMap[value];

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

@@ -1,10 +1,10 @@
 import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/core';
-import { ClearRounded } from '@mui/icons-material';
+import { ClearRounded, CodeRounded } from '@mui/icons-material';
 import { Box, darken, lighten, styled } from '@mui/material';
 import { TimePicker } from '@mui/x-date-pickers';
 import React, { useEffect, useRef, useState } from 'react';
 import { InvalidDate } from '../../../util';
-import { Autocomplete, Chip, DatePicker, DateTimePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
+import { Autocomplete, Chip, DatePicker, DateTimePicker, IconButton, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
 const GroupHeader = styled('div')(({ theme }) => ({
     position: 'sticky',
@@ -27,10 +27,7 @@ const ValueEditor = (props) => {
     if (!!context.treeViewOpts && !!property) {
         inputType = property.type;
         if (property.enum) {
-            values = property.enum.map((item) => ({
-                name: item,
-                label: item,
-            }));
+            values = property.enum.map((item) => ({ name: item, label: item }));
         }
     }
     const [invalidDateTime, setInvalidDateTime] = useState(false);
@@ -42,8 +39,8 @@ const ValueEditor = (props) => {
     const disabled = ['null', 'notNull'].includes(operator);
     const presetValues = context.presetValues?.filter((val) => !val.type || val.type === inputType) ?? [];
     const isPresetValue = (value) => value?.startsWith('{{{') && value?.endsWith('}}}');
-    const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value);
-    const presetDisplayValue = presetValues?.find((option) => option.value.name === value)?.label ?? '';
+    const presetDisplayValue = presetValues?.find((option) => option.value.name === value)?.label;
+    const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value) && !!presetDisplayValue;
     let readOnly = context.disabled;
     if (!readOnly && context.disabledCriteria) {
         readOnly =
@@ -54,6 +51,7 @@ const ValueEditor = (props) => {
             width: '33%',
             background: readOnly ? '#f4f6f8' : '#fff',
             borderRadius: '8px',
+            '& .MuiAutocomplete-tag': { backgroundColor: '#edeff1' },
         },
     };
     useEffect(() => {
@@ -178,9 +176,7 @@ const ValueEditor = (props) => {
                             console.error('Error processing date value:', error);
                             setInvalidDateTime(true);
                         }
-                    }, onClose: onClose, PopperProps: {
-                        anchorEl,
-                    }, renderInput: (params) => (React.createElement(Box, { sx: styles.input, ref: setAnchorEl },
+                    }, onClose: onClose, PopperProps: { anchorEl }, renderInput: (params) => (React.createElement(Box, { sx: styles.input, ref: setAnchorEl },
                         React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef, error: invalidDateTime }))), readOnly: readOnly })));
         }
         else if (inputType === 'number' || inputType === 'integer') {
@@ -274,14 +270,26 @@ const ValueEditor = (props) => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        isPresetValueSelected ? (React.createElement(Chip, { label: presetDisplayValue, sx: {
-                borderRadius: '8px',
-                fontSize: '14px',
+        isPresetValueSelected ? (React.createElement(Box, { ref: inputRef, sx: {
                 width: '33%',
-                height: '40px',
-                padding: '0 5px',
+                display: 'flex',
                 justifyContent: 'space-between',
-            }, deleteIcon: React.createElement(ClearRounded, { fontSize: "small" }), onDelete: clearValue })) : (getEditor()),
+                alignItems: 'center',
+                height: '40px',
+                border: readOnly ? undefined : '1px solid #d5d5d5',
+                borderRadius: '8px',
+                backgroundColor: readOnly ? '#edeff1' : '#ffffff',
+            } },
+            React.createElement(Chip, { label: presetDisplayValue, sx: {
+                    fontSize: '14px',
+                    margin: '6px',
+                    backgroundColor: '#edeff1',
+                    borderRadius: '6px',
+                    color: '#212B36',
+                    height: '28px',
+                }, icon: React.createElement(CodeRounded, { sx: { height: '18px' } }) }),
+            !readOnly && (React.createElement(IconButton, { onClick: clearValue, sx: { padding: '3px', margin: '3px' } },
+                React.createElement(ClearRounded, { fontSize: "small", sx: { color: 'rgba(0, 0, 0, 0.54)' } }))))) : (getEditor()),
         !!presetValues?.length && (React.createElement(Menu, { open: openPresetValues, anchorEl: inputRef?.current, PaperProps: { sx: { borderRadius: '8px', width: inputRef?.current?.offsetWidth } }, onClose: onClose }, presetValues &&
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             presetValues.map((option) => (React.createElement(MenuItem, { ...props, onClick: () => setPresetValue(option.value.name), sx: { padding: '8px', minHeight: '25px' } },

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

@@ -1,3 +1,4 @@
 import CriteriaBuilder from './CriteriaBuilder';
-export { CriteriaBuilder };
+import { getReadableQuery } from './utils';
+export { CriteriaBuilder, getReadableQuery };
 export default CriteriaBuilder;

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

@@ -1,3 +1,4 @@
 import CriteriaBuilder from './CriteriaBuilder';
-export { CriteriaBuilder };
+import { getReadableQuery } from './utils';
+export { CriteriaBuilder, getReadableQuery };
 export default CriteriaBuilder;

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

@@ -1,3 +1,4 @@
+import { Property } from '@evoke-platform/context';
 import { RuleGroupType } from 'react-querybuilder';
 import { ExpandedProperty, Obj, ObjectProperty } from '../../../types';
 /**
@@ -61,4 +62,16 @@ export declare const truncateNamePath: (namePath: string, limit?: number) => str
  * @returns {RuleGroupType} - Correctly formatted rule or rules for the query builder.
  */
 export declare function parseMongoDB(mongoQuery: Record<string, unknown>): RuleGroupType;
+export declare const ALL_OPERATORS: {
+    name: string;
+    label: string;
+}[];
+/**
+ * Gets a human readable representation of a MongoDB query.
+ *
+ * @param {Record<string, unknown>} [mongoQuery] - The MongoDB query
+ * @param {Property[]} [properties] - The object properties referenced in the query
+ * @returns {string} The resulting query string.
+ */
+export declare const getReadableQuery: (mongoQuery?: Record<string, unknown>, properties?: Property[]) => string;
 export {};

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

@@ -1,4 +1,4 @@
-import { isArray, isEmpty } from 'lodash';
+import { isArray, isEmpty, startCase } from 'lodash';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
  *
@@ -246,14 +246,14 @@ export function parseMongoDB(mongoQuery) {
             return {
                 field: key,
                 operator: 'in',
-                value: (value.$in || []).join(','),
+                value: value.$in ?? [],
             };
         }
         else if ('$nin' in value) {
             return {
                 field: key,
                 operator: 'notIn',
-                value: (value.$nin || []).join(','),
+                value: value.$nin ?? [],
             };
         }
         else {
@@ -302,3 +302,60 @@ export function parseMongoDB(mongoQuery) {
         };
     }
 }
+export const ALL_OPERATORS = [
+    { name: '=', label: 'Is' },
+    { name: '!=', label: 'Is not' },
+    { name: '<', label: 'Less than' },
+    { name: '>', label: 'Greater than' },
+    { name: '<=', label: 'Less than or equal to' },
+    { name: '>=', label: 'Greater than or equal to' },
+    { name: 'contains', label: 'Contains' },
+    { name: 'beginsWith', label: 'Starts with' },
+    { name: 'endsWith', label: 'Ends with' },
+    { name: 'null', label: 'Is empty' },
+    { name: 'notNull', label: 'Is not empty' },
+    { name: 'in', label: 'In' },
+    { name: 'notIn', label: 'Not in' },
+];
+/**
+ * Gets a human readable representation of a MongoDB query.
+ *
+ * @param {Record<string, unknown>} [mongoQuery] - The MongoDB query
+ * @param {Property[]} [properties] - The object properties referenced in the query
+ * @returns {string} The resulting query string.
+ */
+export const getReadableQuery = (mongoQuery, properties) => {
+    function isPresetValue(value) {
+        return typeof value === 'string' && value.startsWith('{{{') && value.endsWith('}}}');
+    }
+    function parseValue(val) {
+        if (val && Array.isArray(val)) {
+            return val.map((v) => (isPresetValue(v) ? startCase(v.slice(3, -3)) : v)).join(', ');
+        }
+        else {
+            return isPresetValue(val) ? startCase(val.slice(3, -3)) : `${val}`;
+        }
+    }
+    function getOperatorLabel(operator) {
+        const operatorObj = ALL_OPERATORS.find((o) => o.name === operator);
+        const defaultLabel = operatorObj ? operatorObj.label.toLowerCase() : operator;
+        if (['<', '>', '<=', '>='].includes(operator)) {
+            return `is ${defaultLabel}`;
+        }
+        return defaultLabel;
+    }
+    function buildQueryString(rule) {
+        if ('combinator' in rule) {
+            return rule?.rules?.map(buildQueryString).filter(Boolean).join(` ${rule.combinator.toLowerCase()} `);
+        }
+        else {
+            const property = properties?.find((p) => p.id === rule.field);
+            return `${property?.name ?? rule.field} ${getOperatorLabel(rule.operator)} ${parseValue(rule.value)}`;
+        }
+    }
+    if (!mongoQuery) {
+        return '';
+    }
+    const parsedQuery = parseMongoDB(mongoQuery);
+    return buildQueryString(parsedQuery);
+};

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

@@ -1,7 +1,7 @@
 import { useApp, useAuthenticationContext, } from '@evoke-platform/context';
 import { Components, Form as FormIO, Utils } from '@formio/react';
 import { flatten } from 'flat';
-import { isEmpty, isEqual, isObject, pick, toPairs } from 'lodash';
+import { isEmpty, isEqual, isObject, omit, pick, toPairs } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import '../../../../styles/form-component.css';
 import { Skeleton, Snackbar } from '../../../core';
@@ -126,7 +126,7 @@ export function Form(props) {
         const allDefaultPages = { ...defaultPages, ...foundDefaultPages };
         // visibleObjectProperties
         if (input && object?.properties) {
-            const allCriteriaInputs = getAllCriteriaInputs(action?.inputProperties ? flattenFormComponents(action.inputProperties) : action?.parameters ?? []);
+            const allCriteriaInputs = getAllCriteriaInputs(action?.inputProperties ? flattenFormComponents(action.inputProperties) : (action?.parameters ?? []));
             if (input.length || action?.type !== 'delete') {
                 // formIO builder-configured input properties exist
                 const newComponentProps = await addObjectPropertiesToComponentProps(object.properties, input, allCriteriaInputs, instance, {
@@ -139,6 +139,18 @@ export function Form(props) {
                 if (!hideButtons && !isReadOnly) {
                     newComponentProps.push(BottomButtons);
                 }
+                if (action?.type !== 'create') {
+                    // Add an additional, hidden _instance property on update/delete actions
+                    // so that instance data is accessible in conditional display logic.
+                    const hiddenComponent = {
+                        key: '_instance',
+                        type: 'hidden',
+                        input: true,
+                        tableView: false,
+                        defaultValue: instance,
+                    };
+                    newComponentProps.push(hiddenComponent);
+                }
                 setComponentProps(newComponentProps);
             }
             else {
@@ -313,8 +325,8 @@ export function Form(props) {
             const savedValue = submittedFields[docProperty.id];
             const originalValue = instance?.[docProperty.id];
             const documentsToRemove = requestSuccess
-                ? originalValue?.filter((file) => !savedValue?.some((f) => f.id === file.id)) ?? []
-                : savedValue?.filter((file) => !originalValue?.some((f) => f.id === file.id)) ?? [];
+                ? (originalValue?.filter((file) => !savedValue?.some((f) => f.id === file.id)) ?? [])
+                : (savedValue?.filter((file) => !originalValue?.some((f) => f.id === file.id)) ?? []);
             for (const doc of documentsToRemove) {
                 try {
                     await apiServices?.delete(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}`));
@@ -416,7 +428,7 @@ export function Form(props) {
                     key: 'save-draft',
                     variant: 'outlined',
                     isModal: !!closeModal,
-                    onClick: async (data, setError, setSubmitting) => await saveHandler(data, 'draft', setError, setSubmitting),
+                    onClick: async (data, setError, setSubmitting) => await saveHandler(omit(data, '_instance'), 'draft', setError, setSubmitting),
                     style: { lineHeight: '2.75', margin: '5px', padding: '0 10px' },
                 }
                 : undefined,
@@ -437,7 +449,7 @@ export function Form(props) {
                 variant: 'contained',
                 isModal: !!closeModal,
                 onClick: (data, setError, setSubmitting) => {
-                    saveHandler(data, 'submit', setError, setSubmitting);
+                    saveHandler(omit(data, '_instance'), 'submit', setError, setSubmitting);
                 },
             },
         ],
@@ -447,7 +459,7 @@ export function Form(props) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         , { 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onChange: (e) => !isEqual(e.data, formData) && setFormData(e.data), key: closeModal ? undefined : formKey, form: {
+            onChange: (e) => !isEqual(omit(e.data, '_instance'), formData) && setFormData(omit(e.data, '_instance')), key: closeModal ? undefined : formKey, form: {
                 display: 'form',
                 components: componentProps,
             }, formReady: handleFormReady })) : (React.createElement(Box, null,

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

@@ -81,7 +81,8 @@ export const FormComponentWrapper = (props) => {
                             property && onChange(property.id, '');
                         } },
                         React.createElement(HighlightOffOutlined, { sx: clearBtnStyles }))))),
-            React.createElement(Typography, { variant: "caption", sx: { ...descriptionStyles, ...(displayOption === 'radioButton' && { display: 'flex' }) } }, description),
+            React.createElement(Box, { sx: { ...(displayOption === 'radioButton' && { display: 'flex' }) } },
+                React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description)),
             React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row' } },
                 React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight }),
                 React.createElement(Box, { sx: { width: '100%', paddingTop: '6px' } }, children),

package/dist/published/components/custom/Form/FormComponents/CriteriaComponent/Criteria.js

@@ -18,7 +18,58 @@ export const Criteria = (props) => {
                     setLoadingError(true);
                 }
                 if (properties) {
-                    setProperties(properties);
+                    const flattenProperties = properties.flatMap((prop) => {
+                        if (prop.type === 'object' || prop.type === 'user') {
+                            return [
+                                {
+                                    id: `${prop.id}.id`,
+                                    name: `${prop.name} Id`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.name`,
+                                    name: `${prop.name} Name`,
+                                    type: 'string',
+                                },
+                            ];
+                        }
+                        else if (prop.type === 'address') {
+                            return [
+                                {
+                                    id: `${prop.id}.line1`,
+                                    name: `${prop.name} Line 1`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.line2`,
+                                    name: `${prop.name} Line 2`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.city`,
+                                    name: `${prop.name} City`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.county`,
+                                    name: `${prop.name} County`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.state`,
+                                    name: `${prop.name} State`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.zipCode`,
+                                    name: `${prop.name} Zip Code`,
+                                    type: 'string',
+                                },
+                            ];
+                        }
+                        return prop;
+                    });
+                    setProperties(flattenProperties);
                     setLoadingError(false);
                 }
                 setLoading(false);

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

@@ -16,7 +16,7 @@ export class ObjectComponent extends ReactComponent {
             delete this.errorDetails['api-error'];
             const updatedValue = pick(value, 'id', 'name');
             // set the value on the form instance at this.root.data
-            this.setValue(!isNil(updatedValue) ? updatedValue : '');
+            this.setValue(!isNil(updatedValue) && !isEmpty(updatedValue) ? updatedValue : '');
             // update the value in the component instance
             this.updateValue(!isNil(updatedValue) ? updatedValue : {}, { modified: true });
             this.handleValidation();
@@ -71,7 +71,7 @@ export class ObjectComponent extends ReactComponent {
                     }
                     this.updatedCriteria = updateCriteriaInputs(this.criteria ?? {}, data, this.component.user);
                     if (this.visible) {
-                        this.attachReact(this.element);
+                        this.attach(this.element);
                     }
                 });
             }
@@ -115,7 +115,7 @@ export class ObjectComponent extends ReactComponent {
                     }
                     this.updatedDefaultValueCriteria = updateCriteriaInputs(this.defaultValueCriteria ?? {}, data, this.component.user);
                     if (this.visible) {
-                        this.attachReact(this.element);
+                        this.attach(this.element);
                     }
                 });
             }
@@ -158,7 +158,6 @@ export class ObjectComponent extends ReactComponent {
                 delete this.errorDetails['api-error'];
             }
             this.attach(this.element);
-            this.attachReact(this.element);
         });
         if (this.component.defaultValue) {
             this.expandInstance();
@@ -216,11 +215,16 @@ export class ObjectComponent extends ReactComponent {
         if (!root) {
             root = element;
         }
+        let updatedValue;
+        if (this.shouldSetValue)
+            updatedValue = this.dataForSetting;
+        else
+            updatedValue = this.dataValue;
         const updatedComponent = {
             ...this.component,
             instance: {
                 ...this.component.instance,
-                [this.component.key]: isEmpty(this.dataValue) ? null : this.dataValue,
+                [this.component.key]: isEmpty(updatedValue) || isNil(updatedValue) || updatedValue.length === 0 ? null : updatedValue,
             },
             defaultValueCriteria: this.updatedDefaultValueCriteria,
         };

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

@@ -227,7 +227,7 @@ export const ObjectPropertyInput = (props) => {
                     return option.value === value?.value;
                 }, options: options.map((o) => ({ label: o.name, value: o.id })), getOptionLabel: (option) => {
                     return typeof option === 'string'
-                        ? options.find((o) => o.id === option)?.name ?? ''
+                        ? (options.find((o) => o.id === option)?.name ?? '')
                         : option.label;
                 }, onKeyDownCapture: (e) => {
                     if (instance?.[property.id]?.id || selectedInstance?.id) {
@@ -292,7 +292,8 @@ export const ObjectPropertyInput = (props) => {
                             }
                             : {}),
                     } })), readOnly: !loadingOptions && !canUpdateProperty, error: error, sortBy: "NONE" }))) : (React.createElement(Box, { sx: {
-                padding: (instance?.[property.id]?.name ?? selectedInstance?.name)
+                padding: (instance?.[property.id]?.name ??
+                    selectedInstance?.name)
                     ? '16.5px 14px'
                     : '10.5px 0',
             } },

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

@@ -402,7 +402,7 @@ const RepeatableField = (props) => {
                                 React.createElement(Tooltip, { title: "Delete" },
                                     React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
             hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow }, "Add"))),
-        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? relatedInstances.find((i) => i.id === selectedRow) ?? {} : {}, handleSubmit: save, 
+        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (relatedInstances.find((i) => i.id === selectedRow) ?? {}) : {}, handleSubmit: save, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             objectInputCommonProps: { apiServices }, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, queryAddresses: queryAddresses, user: user, associatedObject: instance.id && property.relatedPropertyId

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

@@ -109,4 +109,50 @@ describe('Form component', () => {
             await waitFor(() => expect(within(openAutocomplete).queryByRole('option', { name: 'NP Specialty Type #2' })).to.be.null);
         });
     });
+    describe('visibility configuration', () => {
+        it('shows fields based on instance data using JsonLogic', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'jsonLogicDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance',
+                } }));
+            // Validate that specialty type dropdown renders
+            await screen.findByRole('combobox', { name: 'Specialty Type' });
+        });
+        it('hides fields based on instance data using JsonLogic', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'jsonLogicDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance -- hidden',
+                } }));
+            // Validate that license dropdown renders
+            await screen.findByRole('combobox', { name: 'License' });
+            // Validate that specialty type dropdown does not render
+            expect(screen.queryByRole('combobox', { name: 'Specialty Type' })).to.be.null;
+        });
+        it('shows fields based on instance data using simple conditions', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'simpleConditionDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance',
+                } }));
+            // Validate that specialty type dropdown renders
+            await screen.findByRole('combobox', { name: 'Specialty Type' });
+        });
+        it('hides fields based on instance data using simple conditions', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'simpleConditionDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance -- hidden',
+                } }));
+            // Validate that license dropdown renders
+            await screen.findByRole('combobox', { name: 'License' });
+            // Validate that specialty type dropdown does not render
+            expect(screen.queryByRole('combobox', { name: 'Specialty Type' })).to.be.null;
+        });
+    });
 });

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

@@ -170,6 +170,105 @@ export const specialtyObject = {
                 ],
             },
         },
+        {
+            id: 'jsonLogicDisplayTest',
+            name: 'JsonLogic Display Test',
+            type: 'update',
+            outputEvent: 'Specialty Updated',
+            parameters: [
+                {
+                    id: 'specialtyType',
+                    name: 'Specialty Type',
+                    type: 'object',
+                    objectId: 'specialtyType',
+                },
+                {
+                    id: 'license',
+                    name: 'License',
+                    type: 'object',
+                    objectId: 'license',
+                },
+            ],
+            form: {
+                entries: [
+                    {
+                        parameterId: 'specialtyType',
+                        type: 'input',
+                        display: {
+                            label: 'Specialty Type',
+                            relatedObjectDisplay: 'dropdown',
+                            visibility: {
+                                '===': [
+                                    {
+                                        var: 'instance.name',
+                                    },
+                                    'Test Specialty Object Instance',
+                                ],
+                            },
+                        },
+                    },
+                    {
+                        parameterId: 'license',
+                        type: 'input',
+                        display: {
+                            label: 'License',
+                            relatedObjectDisplay: 'dropdown',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            id: 'simpleConditionDisplayTest',
+            name: 'Simple Condition Display Test',
+            type: 'update',
+            outputEvent: 'Specialty Updated',
+            parameters: [
+                {
+                    id: 'specialtyType',
+                    name: 'Specialty Type',
+                    type: 'object',
+                    objectId: 'specialtyType',
+                },
+                {
+                    id: 'license',
+                    name: 'License',
+                    type: 'object',
+                    objectId: 'license',
+                },
+            ],
+            form: {
+                entries: [
+                    {
+                        parameterId: 'specialtyType',
+                        type: 'input',
+                        display: {
+                            label: 'Specialty Type',
+                            relatedObjectDisplay: 'dropdown',
+                            visibility: {
+                                operator: 'all',
+                                conditions: [
+                                    {
+                                        property: 'name',
+                                        operator: 'eq',
+                                        value: 'Test Specialty Object Instance',
+                                        isInstanceProperty: true,
+                                    },
+                                ],
+                            },
+                        },
+                    },
+                    {
+                        parameterId: 'license',
+                        type: 'input',
+                        display: {
+                            label: 'License',
+                            relatedObjectDisplay: 'dropdown',
+                        },
+                    },
+                ],
+            },
+        },
     ],
 };
 export const specialtyTypeObject = {

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

@@ -100,15 +100,7 @@ export function convertFormToComponents(entries, parameters, object) {
                         ? convertFormToComponents(section.entries, parameters, object)
                         : [],
                 })),
-                conditional: typeof entry.visibility !== 'string' && entry.visibility?.conditions?.length
-                    ? {
-                        show: entry.visibility.conditions[0].operator === 'eq',
-                        when: entry.visibility.conditions[0].property,
-                        eq: entry.visibility.conditions[0].value,
-                    }
-                    : {
-                        json: entry.visibility,
-                    },
+                conditional: convertVisibilityToConditional(entry.visibility),
             };
         }
         else if (entry.type === 'columns') {
@@ -124,15 +116,7 @@ export function convertFormToComponents(entries, parameters, object) {
                         ? convertFormToComponents(column.entries, parameters, object)
                         : [],
                 })),
-                conditional: typeof entry.visibility !== 'string' && entry.visibility?.conditions?.length
-                    ? {
-                        show: entry.visibility.conditions[0].operator === 'eq',
-                        when: entry.visibility.conditions[0].property,
-                        eq: entry.visibility.conditions[0].value,
-                    }
-                    : {
-                        json: entry.visibility,
-                    },
+                conditional: convertVisibilityToConditional(entry.visibility),
             };
         }
         else if (entry.type === 'content') {
@@ -140,15 +124,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 type: 'Content',
                 key: nanoid(),
                 html: entry.html,
-                conditional: typeof entry.visibility !== 'string' && entry.visibility?.conditions?.length
-                    ? {
-                        show: entry.visibility.conditions[0].operator === 'eq',
-                        when: entry.visibility.conditions[0].property,
-                        eq: entry.visibility.conditions[0].value,
-                    }
-                    : {
-                        json: entry.visibility,
-                    },
+                conditional: convertVisibilityToConditional(entry.visibility),
             };
         }
         else {
@@ -266,17 +242,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 widget: (parameter.type === 'string' && parameter.enum) || parameter.type === 'array'
                     ? 'choicejs'
                     : undefined,
-                conditional: displayOptions?.visibility &&
-                    typeof displayOptions?.visibility !== 'string' &&
-                    displayOptions.visibility.conditions?.length
-                    ? {
-                        show: displayOptions?.visibility.conditions[0].operator === 'eq',
-                        when: displayOptions?.visibility.conditions[0].property,
-                        eq: displayOptions?.visibility.conditions[0].value,
-                    }
-                    : {
-                        json: displayOptions?.visibility,
-                    },
+                conditional: convertVisibilityToConditional(displayOptions?.visibility),
                 viewLayout: displayOptions?.viewLayout,
             };
         }
@@ -678,6 +644,9 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                     associatedObject?.propertyId === property.id) {
                     defaultValue = { id: associatedObject.instanceId };
                     component.hidden = true;
+                    // If "conditional" is defined, the "hidden" property isn't respected.
+                    // Remove the "conditional" property after setting "hidden" to true.
+                    delete component.conditional;
                 }
                 return {
                     ...component,
@@ -750,9 +719,12 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                         // Set the associated instance as a default value and hide the field.
                         if (associatedObject?.instanceId &&
                             associatedObject?.propertyId &&
-                            item.property.id === associatedObject.propertyId) {
+                            item.property?.id === associatedObject.propertyId) {
                             item.defaultValue = { id: associatedObject.instanceId };
                             item.hidden = true;
+                            // If "conditional" is defined, the "hidden" property isn't respected.
+                            // Remove the "conditional" property after setting "hidden" to true.
+                            delete item.conditional;
                         }
                     }
                     if (nestedFieldProperty) {
@@ -767,6 +739,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                     item.defaultPages = defaultPages;
                     item.navigateTo = navigateTo;
                     item.allCriteriaInputs = allCriteriaInputs;
+                    item.properties = properties;
                     item.isModal = isModal;
                     item.fieldHeight = fieldHeight;
                     item.richTextEditor = ['RepeatableField', 'Object'].includes(item.type)
@@ -1313,3 +1286,72 @@ export function normalizeDates(instances, object) {
         });
     });
 }
+/**
+ * Given an object entry in a JsonLogic object, map it to the correct value.
+ * @param entry An entry in a JsonLogic object.
+ * @returns entry with all values starting with "instance" replaced with "data._instance"
+ */
+function processJsonLogicEntry(entry) {
+    if (entry !== Object(entry)) {
+        // entry is a primitive
+        return typeof entry === 'string' ? entry.replace(/^instance/, 'data._instance') : entry;
+    }
+    else if (isArray(entry)) {
+        return entry.map((element) => processJsonLogicEntry(element));
+    }
+    else if (typeof entry === 'object' && entry !== null) {
+        let result = {};
+        const entries = Object.entries(entry);
+        for (const [key, val] of entries) {
+            result = {
+                ...result,
+                [key]: processJsonLogicEntry(val),
+            };
+        }
+        return result;
+    }
+    return entry;
+}
+/**
+ * Given a JsonLogic, replace all keys (if any) starting with "instance" with
+ * "data._instance".
+ *
+ * @param jsonLogic A JsonLogic instance.
+ * @returns jsonLogic, with all keys starting with "instance" replaced with "data._instance".
+ */
+function normalizeInstanceDataInJsonLogic(jsonLogic) {
+    if (typeof jsonLogic === 'object' && jsonLogic !== null) {
+        // jsonLogic is a Record<string, unknown>
+        let result = {};
+        const entries = Object.entries(jsonLogic);
+        for (const [key, entry] of entries) {
+            result = {
+                ...result,
+                [key]: processJsonLogicEntry(entry),
+            };
+        }
+        return result;
+    }
+    // jsonLogic is a primitive
+    return jsonLogic;
+}
+/**
+ *
+ * @param visibility A form's visibility entry.
+ * @returns The form's visibility entry, converted to formio-readable form.
+ */
+function convertVisibilityToConditional(visibility) {
+    if (isObject(visibility) && 'conditions' in visibility && isArray(visibility.conditions)) {
+        const [condition] = visibility.conditions;
+        return {
+            show: condition.operator === 'eq',
+            when: condition.isInstanceProperty ? `_instance.${condition.property}` : condition.property,
+            eq: condition.value,
+        };
+    }
+    return visibility
+        ? {
+            json: normalizeInstanceDataInJsonLogic(visibility),
+        }
+        : undefined;
+}

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -58,7 +58,7 @@ const AddressFieldComponent = (props) => {
                         backgroundColor: '#f4f6f8',
                     },
                 }
-                : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? rows ?? 3 : undefined, value: value, ...(additionalProps ?? {}) })
+                : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ?? 3) : undefined, value: value, ...(additionalProps ?? {}) })
         // Casting to `React.ReactNode` is necessary to resolve TypeScript errors
         // due to compatibility issues with the outdated `react-input-mask` version
         // and the newer `@types/react` package.

package/dist/published/components/custom/HistoryLog/DisplayedProperty.d.ts

@@ -1,8 +1,9 @@
-import { Property } from '@evoke-platform/context';
+import { Obj, Property } from '@evoke-platform/context';
 import React from 'react';
 type DisplayedPropertyProps = {
     property: Property;
     value: unknown;
+    referencedObject?: Obj;
 };
 declare const DisplayedProperty: (props: DisplayedPropertyProps) => React.JSX.Element;
 export default DisplayedProperty;

package/dist/published/components/custom/HistoryLog/DisplayedProperty.js

@@ -2,9 +2,10 @@ import { DateTime } from 'luxon';
 import React from 'react';
 import { CardMedia, Typography } from '../../core';
 import { Grid } from '../../layout';
+import { getReadableQuery } from '../CriteriaBuilder';
 import { RichTextViewer } from '../RichTextViewer';
 const DisplayedProperty = (props) => {
-    const { property, value } = props;
+    const { property, value, referencedObject } = props;
     const getAddressAsString = (address) => {
         let stringAddress = '';
         if (address?.line1)
@@ -22,7 +23,7 @@ const DisplayedProperty = (props) => {
         return stringAddress;
     };
     const formatData = (property, value) => {
-        if (property?.objectId) {
+        if (property?.objectId && (property?.type === 'object' || property?.type === 'collection')) {
             return value?.name ?? value?.id;
         }
         switch (property?.type) {
@@ -47,6 +48,8 @@ const DisplayedProperty = (props) => {
                 return value ? DateTime.fromISO(value).toFormat('MM/dd/yyyy hh:mm a') : undefined;
             case 'document':
                 return value && Array.isArray(value) ? value.map((v) => v.name).join(', ') : undefined;
+            case 'criteria':
+                return getReadableQuery(value ?? {}, referencedObject?.properties);
         }
         return value;
     };

package/dist/published/components/custom/HistoryLog/HistoryData.d.ts

@@ -6,6 +6,7 @@ type HistoryDataProps = {
     records: History[];
     documentHistory?: Record<string, History[]>;
     object: Obj;
+    referencedObjects?: Obj[];
 };
 declare const HistoricalData: (props: HistoryDataProps) => React.JSX.Element;
 export default HistoricalData;

package/dist/published/components/custom/HistoryLog/HistoryData.js

@@ -30,7 +30,7 @@ const styles = {
     },
 };
 const HistoricalData = (props) => {
-    const { records, documentHistory, object } = props;
+    const { records, documentHistory, object, referencedObjects } = props;
     const getPastDocumentVersion = (history) => {
         const documentVersions = documentHistory?.[history.subject?.id ?? 'unknown'] ?? [];
         const currentVersion = documentVersions?.map((v) => v.timestamp).indexOf(history.timestamp);
@@ -65,11 +65,17 @@ const HistoricalData = (props) => {
                                 fontWeight: 600,
                                 minWidth: 'fit-content',
                                 alignSelf: 'flex-start',
+                                lineHeight: '17px',
+                                padding: '3px 8px',
                             } }, property.name)),
-                    React.createElement(DisplayedProperty, { property: property, value: d.historicalValue }),
+                    React.createElement(DisplayedProperty, { property: property, value: d.historicalValue, referencedObject: property.objectId
+                            ? referencedObjects?.find((o) => o.id === property.objectId)
+                            : undefined }),
                     React.createElement(Grid, { item: true, xs: 0.5 },
                         React.createElement(ArrowForward, { sx: { fontSize: '12px' } })),
-                    React.createElement(DisplayedProperty, { property: property, value: d.updatedValue }))));
+                    React.createElement(DisplayedProperty, { property: property, value: d.updatedValue, referencedObject: property.objectId
+                            ? referencedObjects?.find((o) => o.id === property.objectId)
+                            : undefined }))));
             }))),
             ['document', 'correspondence'].includes(r.type) && (React.createElement(Box, null,
                 React.createElement(Box, { display: "grid", gridTemplateColumns: 'fit-content(100%) fit-content(2%) fit-content(100%)', alignItems: "center", sx: { overflowWrap: 'break-word' } },

package/dist/published/components/custom/HistoryLog/index.js

@@ -1,6 +1,9 @@
+import { useApiServices } from '@evoke-platform/context';
 import { Circle } from '@mui/icons-material';
+import { uniq } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useEffect, useState } from 'react';
+import { Snackbar } from '../../core';
 import Typography from '../../core/Typography';
 import Box from '../../layout/Box';
 import HistoryFilter from './Filter';
@@ -20,9 +23,27 @@ export const HistoryLog = (props) => {
     const { object, history, loading, title } = props;
     const [historyMap, setHistoryMap] = useState({});
     const [documentHistory, setDocumentHistory] = useState({});
+    const [referencedObjects, setReferencedObjects] = useState([]);
     const [filteredHistory, setFilteredHistory] = useState({});
     const [filter, setFilter] = useState([]);
     const [order, setOrder] = useState('desc');
+    const [showSnackbar, setShowSnackbar] = useState(false);
+    const apiServices = useApiServices();
+    useEffect(() => {
+        const criteriaProperties = object.properties?.filter((property) => property.type === 'criteria');
+        if (criteriaProperties?.length) {
+            const uniqueObjectIds = uniq(criteriaProperties?.map((property) => property.objectId));
+            Promise.all(uniqueObjectIds.map((objectId) => apiServices.get(`/data/objects/${objectId}/effective`, {
+                params: {
+                    filter: {
+                        fields: ['id', 'name', 'properties'],
+                    },
+                },
+            })))
+                .then((objs) => setReferencedObjects(objs))
+                .catch(() => setShowSnackbar(true));
+        }
+    }, [object, apiServices]);
     const sortHistoryByTimestamp = (historicalData, order) => {
         return historicalData.sort((a, b) => order === 'desc' ? b.timestamp.localeCompare(a.timestamp) : a.timestamp.localeCompare(b.timestamp));
     };
@@ -78,13 +99,14 @@ export const HistoryLog = (props) => {
                                 ' ',
                                 "\u00A0"),
                             React.createElement(Typography, { sx: { fontWeight: 600, fontSize: '16px', color: '#637381' } }, format(new Date(date + ' 00:00:000'), 'MMM dd, yyyy'))),
-                        React.createElement(HistoricalData, { object: object, records: records, documentHistory: documentHistory })));
+                        React.createElement(HistoricalData, { object: object, records: records, documentHistory: documentHistory, referencedObjects: referencedObjects })));
                 }
                 return null;
             }),
         !loading && filteredHistory && Object.values(filteredHistory).every((v) => !v.length) && (React.createElement(Box, { width: '100%', display: 'grid', justifyContent: 'center', marginTop: '60px' },
             React.createElement(Typography, { fontSize: '20px', fontWeight: 700 }, "You Have No History"),
             React.createElement(Typography, { fontSize: '14px', fontWeight: 400 }, "Try modifying the history type."))),
-        loading && React.createElement(HistoryLoading, null)));
+        loading && React.createElement(HistoryLoading, null),
+        React.createElement(Snackbar, { open: showSnackbar, handleClose: () => setShowSnackbar(false), message: 'Error occurred when loading referenced objects', error: true })));
 };
 export default HistoryLog;

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

@@ -1,5 +1,5 @@
 export { BuilderGrid } from './BuilderGrid';
-export { CriteriaBuilder } from './CriteriaBuilder';
+export { CriteriaBuilder, getReadableQuery } from './CriteriaBuilder';
 export { DataGrid } from './DataGrid';
 export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';

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

@@ -1,5 +1,5 @@
 export { BuilderGrid } from './BuilderGrid';
-export { CriteriaBuilder } from './CriteriaBuilder';
+export { CriteriaBuilder, getReadableQuery } from './CriteriaBuilder';
 export { DataGrid } from './DataGrid';
 export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';

package/dist/published/index.d.ts

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
 export type { FormRef } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';

package/dist/published/index.js

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.4.0-testing.2",
+    "version": "1.4.0-testing.20",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -84,6 +84,7 @@
         "webpack": "^5.74.0"
     },
     "peerDependencies": {
+        "@evoke-platform/context": "^1.1.0-testing.5",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },
@@ -94,7 +95,6 @@
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.13.5",
         "@emotion/styled": "^11.8.1",
-        "@evoke-platform/context": "^1.1.0-testing.0",
         "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",