@evoke-platform/ui-components 1.4.0-testing.12 → 1.4.0-testing.14

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

@@ -2,7 +2,7 @@ import { AddRounded, UnfoldMore } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isArray, isEmpty, startCase } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, add, defaultRuleProcessorMongoDB, formatQuery, useRuleGroup, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import escape from 'string-escape-regex';
@@ -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;
     }
@@ -268,21 +268,7 @@ 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) => {
+    const processRules = useCallback((rules, isSavedValue) => {
         return rules.map((rule) => {
             if ('rules' in rule) {
                 return {
@@ -309,10 +295,10 @@ const CriteriaBuilder = (props) => {
                 };
             }
         });
-    };
+    }, [properties]);
     // 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 updatePropertyTreeMap = useCallback((q) => {
         const ids = [];
         const traverseRulesForIds = (rules) => {
             rules.forEach((rule) => {
@@ -334,7 +320,21 @@ const CriteriaBuilder = (props) => {
             }
             setPropertyTreeMap(tempPropertyMap);
         });
-    };
+    }, [treeViewOpts, propertyTreeMap]);
+    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: [] });
+        }
+    }, [criteria, originalCriteria, treeViewOpts, processRules, updatePropertyTreeMap]);
     const handleClearAll = () => {
         handleQueryChange({ combinator: 'and', rules: [] });
     };
@@ -509,7 +509,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/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.12",
+    "version": "1.4.0-testing.14",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",