@evoke-platform/ui-components 1.3.0-testing.0 → 1.4.0-dev.0

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

@@ -1,6 +1,10 @@
 import { camelCase, get, isArray, isEmpty, isNil, isObject, isUndefined, pick, startCase, transform, uniq, } from 'lodash';
 import { DateTime } from 'luxon';
 import { nanoid } from 'nanoid';
+import Handlebars from 'no-eval-handlebars';
+import qs from 'qs';
+import { defaultRuleProcessorMongoDB, formatQuery, parseMongoDB, } from 'react-querybuilder';
+import escape from 'string-escape-regex';
 // The following functions are used to build the FormIO form components from the form parameters.
 export function determineComponentType(properties, parameter) {
     if (!parameter)
@@ -96,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') {
@@ -120,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') {
@@ -136,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 {
@@ -163,6 +143,7 @@ export function convertFormToComponents(entries, parameters, object) {
                     name: topLevelProperty?.name
                         ? `${topLevelProperty.name} ${startCase(property.id.split('.')[1])}`
                         : startCase(property.id.split('.')[1]),
+                    type: topLevelProperty?.type,
                 };
             }
             const type = determineComponentType(object.properties ?? [], parameter);
@@ -261,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,
             };
         }
@@ -482,11 +453,26 @@ export function getPrefixedUrl(url) {
     console.error('Invalid URL');
     return url;
 }
+export function flattenFormComponents(components) {
+    if (!components)
+        return [];
+    return components.reduce((acc, component) => {
+        if (component.type === 'Section') {
+            return acc.concat(component.components?.flatMap((components) => flattenFormComponents(components.components)) ?? []);
+        }
+        else if (component.type === 'Columns') {
+            return acc.concat(component.columns?.flatMap((column) => flattenFormComponents(column.components)) ?? []);
+        }
+        else {
+            return acc.concat(component);
+        }
+    }, []);
+}
 // The following function adds the object properties to the form components.
 // This function is used when there is no form configured in the form builder.
 export async function addObjectPropertiesToComponentProps(properties, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor) {
+formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor) {
     return [
         ...(await Promise.all(formComponents
             ?.filter((component) => !isUndefined(component) && !isNil(component))
@@ -624,6 +610,8 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                         ...(component.type === 'Object' && objectPropertyInputProps),
                         defaultValue,
                         property,
+                        allCriteriaInputs,
+                        properties,
                         type: `${readOnly ? 'ViewOnly' : ''}${component.type}`,
                         readOnly: component.readOnly || readOnly || property?.formula,
                         multiple: ['array', 'document'].includes(property.type),
@@ -648,13 +636,24 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                             : undefined,
                     };
                 }
-                const defaultValue = getDefaultValue(isNil(instanceValue) ? component.initialValue : instanceValue, component?.data?.values);
+                let defaultValue = getDefaultValue(isNil(instanceValue) ? component.initialValue : instanceValue, component?.data?.values);
+                // If "associatedObject" is defined, that means the form is associating an existing instance with the current instance.
+                // Set the associated instance as a default value and hide the field.
+                if (associatedObject?.instanceId &&
+                    associatedObject?.propertyId &&
+                    associatedObject?.propertyId === property.id) {
+                    defaultValue = { id: associatedObject.instanceId };
+                    component.hidden = true;
+                }
                 return {
                     ...component,
                     ...(component.type === 'Object' && objectPropertyInputProps),
                     type: `${readOnly ? 'ViewOnly' : ''}${component.type}`,
                     defaultValue,
+                    allCriteriaInputs,
+                    properties,
                     property,
+                    associatedObject,
                     readOnly: component.readOnly || readOnly || property?.formula,
                     multiple: ['array', 'document'].includes(property.type),
                     instance: instance,
@@ -693,7 +692,7 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
             }
             if (component.columns) {
                 for (const column of component.columns) {
-                    column.components = await addObjectPropertiesToComponentProps(properties, column.components, instance, objectPropertyInputProps, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor);
+                    column.components = await addObjectPropertiesToComponentProps(properties, column.components, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor);
                 }
                 return component;
             }
@@ -713,6 +712,14 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                         if (item.type.includes('RepeatableField') && !!instance) {
                             item.instance = instance;
                         }
+                        // If "associatedObject" is defined, that means the form is associating an existing instance with the current instance.
+                        // Set the associated instance as a default value and hide the field.
+                        if (associatedObject?.instanceId &&
+                            associatedObject?.propertyId &&
+                            item.property.id === associatedObject.propertyId) {
+                            item.defaultValue = { id: associatedObject.instanceId };
+                            item.hidden = true;
+                        }
                     }
                     if (nestedFieldProperty) {
                         item.type = `${readOnly ? 'ViewOnly' : ''}${item.type}`;
@@ -725,6 +732,7 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                     item.user = objectPropertyInputProps?.user;
                     item.defaultPages = defaultPages;
                     item.navigateTo = navigateTo;
+                    item.allCriteriaInputs = allCriteriaInputs;
                     item.isModal = isModal;
                     item.fieldHeight = fieldHeight;
                     item.richTextEditor = ['RepeatableField', 'Object'].includes(item.type)
@@ -751,7 +759,7 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                     }
                 }
                 return {
-                    components: await addObjectPropertiesToComponentProps(properties, component.components, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor),
+                    components: await addObjectPropertiesToComponentProps(properties, component.components, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor),
                     ...component,
                     ...(component.type === 'Object' && objectPropertyInputProps),
                     type: `${readOnly ? 'ViewOnly' : ''}${component.type}`,
@@ -1127,61 +1135,100 @@ export function transformToWhere(mongoQuery) {
         result[newKey] = isObject(value) ? transformToWhere(value) : value;
     });
 }
-export function updateCriteriaInputs(criteria, field, fieldValue, isInputField) {
-    for (const [key, value] of Object.entries(criteria)) {
-        if (isArray(value)) {
-            for (const index in value) {
-                if (isObject(value[index])) {
-                    updateCriteriaInputs(value[index], field, fieldValue, isInputField);
-                }
-                else {
-                    value[index] =
-                        typeof value[index] === 'string'
-                            ? value[index]
-                                ?.replaceAll(!isInputField ? `{{{${field}}}}` : `{{{input.${field}}}}`, fieldValue ?? '')
-                                .trim() || undefined
-                            : value ?? undefined;
-                }
-            }
-        }
-        else if (isObject(value)) {
-            updateCriteriaInputs(value, field, fieldValue, isInputField);
+function compileQueryValues(query, data) {
+    if ('rules' in query && Array.isArray(query.rules)) {
+        const updatedRules = query.rules
+            .map((item) => compileQueryValues(item, data))
+            .filter((item) => item !== undefined);
+        if (updatedRules?.length) {
+            return {
+                ...query,
+                rules: updatedRules,
+            };
         }
         else {
-            criteria[key] =
-                typeof value === 'string'
-                    ? value
-                        ?.replaceAll(!isInputField ? `{{{${field}}}}` : `{{{input.${field}}}}`, fieldValue ?? '')
-                        .trim() || undefined
-                    : value ?? undefined;
+            return undefined;
         }
     }
-}
-export function getAllCriteriaInputs(criteria) {
-    const result = [];
-    for (const [, value] of Object.entries(criteria)) {
-        if (isArray(value)) {
-            for (const item of value) {
-                if (item && typeof item === 'object') {
-                    const inputProps = getAllCriteriaInputs(item);
-                    inputProps && result.push(...inputProps);
-                }
-                else {
-                    const inputProps = typeof item === 'string' ? item.match(/{{{input\..*}}}/g) : undefined;
-                    inputProps && result.push(...inputProps);
-                }
+    else {
+        if ('value' in query && typeof query.value === 'string') {
+            const template = Handlebars.compileAST(query.value);
+            const result = template(data);
+            if (result !== '') {
+                return {
+                    ...query,
+                    value: result,
+                };
+            }
+            else {
+                return undefined;
             }
         }
-        else if (value && typeof value === 'object') {
-            const inputProps = getAllCriteriaInputs(value);
-            inputProps && result.push(...inputProps);
-        }
-        else {
-            const inputProps = typeof value === 'string' ? value.match(/{{{input\..*}}}/g) : undefined;
-            inputProps && result.push(...inputProps);
-        }
+        return query;
+    }
+}
+export function updateCriteriaInputs(criteria, data, user) {
+    const dataSet = {
+        input: {
+            ...data,
+        },
+        user: user,
+    };
+    const compiledQuery = compileQueryValues(parseMongoDB(criteria), dataSet);
+    // The "compiledQueryValues" function filters out rules that have a value of "undefined".
+    // If "compiledQuery" is "undefined", that means that all rules and nested rules have a value of "undefined".
+    // Therefore, the resulting query is empty.
+    return !compiledQuery
+        ? {}
+        : JSON.parse(formatQuery(compiledQuery, {
+            format: 'mongodb',
+            ruleProcessor: (rule, options) => {
+                let updatedRule = rule;
+                if (['contains', 'beginsWith', 'endsWith'].includes(rule.operator)) {
+                    updatedRule = { ...rule, value: escape(rule.value) };
+                }
+                return defaultRuleProcessorMongoDB(updatedRule, options);
+            },
+        }));
+}
+function getRuleValues(query) {
+    const values = [];
+    if ('rules' in query && Array.isArray(query.rules)) {
+        query.rules.forEach((item) => {
+            values.push(...getRuleValues(item));
+        });
+    }
+    else {
+        values.push(query.value);
+    }
+    return values;
+}
+export function getCriteriaInputs(criteria) {
+    if (!criteria)
+        return [];
+    const values = getRuleValues(parseMongoDB(criteria)).filter((val) => typeof val === 'string' && val.match(/{{{input\..*}}}/g));
+    return uniq(values).map((item) => item.replace('{{{input.', '').replace('}}}', ''));
+}
+export function getAllCriteriaInputs(components) {
+    const allComponents = components;
+    const results = allComponents.reduce((inputs, c) => inputs.concat(getCriteriaInputs(c.validate?.criteria ??
+        c.validation?.criteria)), []);
+    return results;
+}
+export async function populateInstanceWithNestedData(instanceId, objectId, paths, apiServices) {
+    let instance = { id: instanceId, objectId };
+    try {
+        instance = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}`), {
+            params: {
+                expand: paths,
+            },
+            paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repeat' }),
+        });
+    }
+    catch (err) {
+        console.log(err);
     }
-    return uniq(result.map((item) => item.replace('{{{input.', '').replace('}}}', '')));
+    return instance;
 }
 export function isPropertyVisible(conditional, formData) {
     const isConditional = !!conditional?.when;
@@ -1232,3 +1279,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

@@ -48,7 +48,7 @@ const AddressFieldComponent = (props) => {
         !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
-            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, disabled: false, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (inputProps) => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
+            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: 'none',
@@ -58,7 +58,11 @@ const AddressFieldComponent = (props) => {
                         backgroundColor: '#f4f6f8',
                     },
                 }
-                : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...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.
+        )))),
         !readOnly && (React.createElement(Popover, { id: popoverId, open: open, anchorEl: anchorEl, onClose: handleClose, disableAutoFocus: true, marginThreshold: undefined, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'left',

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -62,7 +62,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }),
-        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, disabled: false, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (inputProps) => (React.createElement(TextField, { id: id, sx: readOnly
+        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: 'none',
@@ -72,6 +72,10 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }
-            : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...inputProps, ...InputProps, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) }))));
+            : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...InputProps, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(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.
+    ))));
 };
 export default InputFieldComponent;

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') {
             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/Menubar/Menubar.d.ts

@@ -1,10 +1,9 @@
-import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
-import React from 'react';
+import React, { ReactNode } from 'react';
 export type MenuBarProps = {
     showNotifications: boolean;
     logo: string;
     logoAltText?: string;
-    navItems?: ReactJSXElement;
+    navItems?: ReactNode;
     envName?: string;
 };
 export default function MenuBar(props: MenuBarProps): React.JSX.Element;

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

@@ -1,18 +1,21 @@
 import { AppBar, Box, CardMedia, Toolbar, Typography } from '@mui/material';
 import React from 'react';
-import UIThemeProvider from '../../../theme';
-const classes = {
-    title: {
-        flexGrow: 1,
-        height: 70,
-    },
-    logo: {
-        paddingRight: '16px',
-        height: '70px',
-        width: 'inherit',
-    },
-};
+import UIThemeProvider, { useResponsive } from '../../../theme';
 export default function MenuBar(props) {
+    const { isXs: isMobileView } = useResponsive();
+    const classes = {
+        title: {
+            height: 70,
+            flexGrow: 1,
+        },
+        logo: {
+            paddingRight: '16px',
+            height: '70px',
+            maxWidth: isMobileView ? '220px' : null,
+            objectFit: 'contain',
+            width: 'auto',
+        },
+    };
     return (React.createElement(UIThemeProvider, null,
         React.createElement(AppBar, { color: "inherit", position: "fixed", elevation: 0, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, borderBottom: '1px solid #919EAB3D' } },
             React.createElement(Toolbar, { sx: { justifyContent: 'space-between' } },

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';