@evoke-platform/ui-components 1.4.0-testing.1 → 1.4.0-testing.11

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/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 }));
@@ -437,7 +422,6 @@ const CriteriaBuilder = (props) => {
                 '.ruleGroup:not(.ruleGroup .ruleGroup)': {
                     borderStyle: 'hidden',
                     background: '#fff',
-                    maxWidth: '70vw',
                 },
                 '.ruleGroup-header': {
                     display: 'block',

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

@@ -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.
  *
@@ -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,14 +1,14 @@
 import { useApp, useAuthenticationContext, } from '@evoke-platform/context';
 import { Components, Form as FormIO, Utils } from '@formio/react';
 import { flatten } from 'flat';
-import { isEmpty, isEqual, 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';
 import { Box } from '../../../layout';
 import { ButtonComponent, DocumentComponent, FormFieldComponent, ImageComponent, ObjectComponent, RepeatableFieldComponent, UserComponent, ViewOnlyComponent, } from '../FormComponents';
 import { CriteriaComponent } from '../FormComponents/CriteriaComponent/CriteriaComponent';
-import { addObjectPropertiesToComponentProps, buildComponentPropsFromDocumentProperties, buildComponentPropsFromObjectProperties, convertFormToComponents, getFlattenEntries, getPrefixedUrl, } from '../utils';
+import { addObjectPropertiesToComponentProps, buildComponentPropsFromDocumentProperties, buildComponentPropsFromObjectProperties, convertFormToComponents, flattenFormComponents, getAllCriteriaInputs, getFlattenEntries, getPrefixedUrl, } from '../utils';
 const usePrevious = (value) => {
     const ref = useRef();
     useEffect(() => {
@@ -101,24 +101,16 @@ export function Form(props) {
     const buildComponents = async () => {
         const action = object?.actions?.find((action) => action.id === actionId);
         let input;
-        const parameters = associatedObject?.propertyId && action?.parameters
-            ? action.parameters.filter((param) => param.id !== associatedObject.propertyId)
-            : action?.parameters;
-        if (parameters && object) {
+        if (action?.parameters && object) {
             input = action?.form?.entries
-                ? convertFormToComponents(action.form.entries, parameters, object)
-                : parameters.filter((param) => object.properties?.some((prop) => prop.id === param.id));
+                ? convertFormToComponents(action.form.entries, action.parameters, object)
+                : action.parameters.filter((param) => object.properties?.some((prop) => prop.id === param.id));
         }
         else {
             input = action?.inputProperties ?? (action?.type === 'delete' ? [] : undefined);
         }
-        let visibleObjectProperties = object?.properties;
-        if (associatedObject) {
-            // Eliminates the associated object's field from the form
-            visibleObjectProperties = visibleObjectProperties?.filter((property) => property.id !== associatedObject.propertyId);
-        }
         let foundDefaultPages = defaultPages;
-        const relatedObjectProperties = visibleObjectProperties?.filter((property) => property.type === 'object');
+        const relatedObjectProperties = object?.properties?.filter((property) => property.type === 'object');
         if (relatedObjectProperties) {
             foundDefaultPages = await relatedObjectProperties.reduce(async (acc, property) => {
                 const result = await acc;
@@ -132,23 +124,37 @@ export function Form(props) {
             }, Promise.resolve({}));
         }
         const allDefaultPages = { ...defaultPages, ...foundDefaultPages };
-        if (input && visibleObjectProperties) {
+        // visibleObjectProperties
+        if (input && object?.properties) {
+            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(visibleObjectProperties, input, instance, {
+                const newComponentProps = await addObjectPropertiesToComponentProps(object.properties, input, allCriteriaInputs, instance, {
                     ...objectInputCommonProps,
                     defaultPages: allDefaultPages,
                     navigateTo,
                     apiServices,
                     user: userAccount,
-                }, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight, richTextEditor);
+                }, associatedObject, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight, richTextEditor);
                 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 {
-                const components = await addObjectPropertiesToComponentProps(visibleObjectProperties, [
+                const components = await addObjectPropertiesToComponentProps(object.properties, [
                     {
                         html: `<p>${action?.type === 'delete' ? 'This action cannot be undone.' : 'Are you sure?'}</p>`,
                         label: 'Content',
@@ -216,13 +222,13 @@ export function Form(props) {
                         addons: [],
                         id: 'eahbwo',
                     },
-                ], instance, {
+                ], undefined, instance, {
                     ...objectInputCommonProps,
                     defaultPages: allDefaultPages,
                     navigateTo,
                     apiServices,
                     user: userAccount,
-                }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor);
+                }, undefined, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor);
                 if (!hideButtons) {
                     components.push(BottomButtons);
                 }
@@ -319,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}`));
@@ -343,7 +349,12 @@ export function Form(props) {
                 submittedFields[field] = null;
             }
             else {
-                submittedFields[field] = value;
+                if (isObject(value) && 'id' in value && 'name' in value) {
+                    submittedFields[field] = pick(value, 'id', 'name');
+                }
+                else {
+                    submittedFields[field] = value;
+                }
             }
         }
         //OPTIMIZATION TODO: See if type can be inferred from the event target
@@ -417,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,
@@ -438,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);
                 },
             },
         ],
@@ -448,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.d.ts

@@ -6,6 +6,7 @@ interface ObjectComponentProps extends BaseFormComponentProps {
     mode: 'default' | 'existingOnly';
     defaultValueCriteria?: Record<string, unknown>;
     initialValue?: string;
+    allCriteriaInputs: string[];
     richTextEditor?: typeof ReactComponent;
 }
 export declare class ObjectComponent extends ReactComponent {
@@ -20,6 +21,7 @@ export declare class ObjectComponent extends ReactComponent {
     updatedDefaultValueCriteria: Record<string, unknown>;
     constructor(component: ObjectComponentProps, options: any, data: any);
     init(): void;
+    expandInstance(): Promise<void>;
     clearErrors(): void;
     handleValidation(): void;
     hasErrors(): boolean;