@evoke-platform/ui-components 1.4.0-testing.9 → 1.5.0-testing.0

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/core/index.d.ts

@@ -48,6 +48,8 @@ export { Typography } from './Typography';
 export { TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
 export { CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Input, InputAdornment, InputLabel, ListItemButton, ListItemText, SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from '@mui/material';
 export { useGridApiRef } from '@mui/x-data-grid';
+export { TreeItem as RichTreeItem, RichTreeView } from '@mui/x-tree-view';
 export type { GridSize } from '@mui/material';
-export type { GridCellParams, GridColDef, GridEventListener, GridFilterModel, GridInitialState, GridRowParams, GridValueFormatterParams, GridValueGetterParams, } from '@mui/x-data-grid';
+export type { GridCellParams, GridColDef, GridEventListener, GridFilterModel, GridInitialState, GridRowParams, GridSortModel, GridValueFormatterParams, GridValueGetterParams, } from '@mui/x-data-grid';
+export type { TreeItemProps, TreeViewBaseItem } from '@mui/x-tree-view';
 export type { AutocompleteOption } from './Autocomplete/Autocomplete';

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

@@ -49,3 +49,4 @@ export { Typography } from './Typography';
 export { TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
 export { CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Input, InputAdornment, InputLabel, ListItemButton, ListItemText, SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from '@mui/material';
 export { useGridApiRef } from '@mui/x-data-grid';
+export { TreeItem as RichTreeItem, RichTreeView } from '@mui/x-tree-view';

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

@@ -170,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;
     }
@@ -266,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) {
@@ -293,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 {
@@ -310,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: [] });
     };
@@ -509,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],

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

@@ -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,9 +51,7 @@ const ValueEditor = (props) => {
             width: '33%',
             background: readOnly ? '#f4f6f8' : '#fff',
             borderRadius: '8px',
-            '& .MuiAutocomplete-tag': {
-                backgroundColor: '#edeff1',
-            },
+            '& .MuiAutocomplete-tag': { backgroundColor: '#edeff1' },
         },
     };
     useEffect(() => {
@@ -181,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') {

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

@@ -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 {

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

@@ -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/utils.js

@@ -719,7 +719,7 @@ 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.

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

@@ -23,7 +23,7 @@ const DisplayedProperty = (props) => {
         return stringAddress;
     };
     const formatData = (property, value) => {
-        if (property?.objectId && property?.type === 'object') {
+        if (property?.objectId && (property?.type === 'object' || property?.type === 'collection')) {
             return value?.name ?? value?.id;
         }
         switch (property?.type) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.4.0-testing.9",
+    "version": "1.5.0-testing.0",
     "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.4",
         "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",
@@ -103,6 +103,7 @@
         "@mui/material": "^5.16.7",
         "@mui/x-data-grid": "^6.4.0",
         "@mui/x-date-pickers": "^5.0.13",
+        "@mui/x-tree-view": "^7.29.1",
         "@react-querybuilder/dnd": "^5.4.1",
         "@react-querybuilder/material": "^6.5.0",
         "clean-deep": "^3.4.0",