@evoke-platform/ui-components 1.0.1 → 1.0.2-dev.0

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

@@ -108,7 +108,7 @@ const customSelector = (props) => {
     let opts = options;
     let inputType = props.fieldData?.inputType;
     // for tree view / related object properties, the properties are stored in the propertyTreeMap upon selection
-    if (!!context.treeViewOpts && !!context.propertyTreeMap[rule.field]) {
+    if (!!context.treeViewOpts && !!context.propertyTreeMap?.[rule.field]) {
         inputType = context.propertyTreeMap[rule.field].type;
     }
     let readOnly = false;
@@ -274,7 +274,7 @@ export const valueEditor = (props) => {
 const CriteriaBuilder = (props) => {
     const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, disabledCriteria, hideBorder, presetGroupLabel, treeViewOpts, disableRegexEscapeChars, } = props;
     const [query, setQuery] = useState(undefined);
-    const [propertyTreeMap, setPropertyTreeMap] = useState({});
+    const [propertyTreeMap, setPropertyTreeMap] = useState();
     useEffect(() => {
         if (criteria || originalCriteria) {
             const criteriaToParse = criteria || originalCriteria || {};
@@ -326,7 +326,7 @@ const CriteriaBuilder = (props) => {
         traverseRulesForIds(q.rules);
         const tempPropertyMap = { ...propertyTreeMap };
         ids.forEach(async (id) => {
-            if (!propertyTreeMap[id] && treeViewOpts?.object && treeViewOpts?.fetchObject) {
+            if (!propertyTreeMap?.[id] && treeViewOpts?.object && treeViewOpts?.fetchObject) {
                 const prop = await traversePropertyPath(id, treeViewOpts?.object, treeViewOpts?.fetchObject);
                 if (prop)
                     tempPropertyMap[id] = prop;
@@ -365,7 +365,9 @@ const CriteriaBuilder = (props) => {
         }
     };
     const fields = useMemo(() => {
-        return properties.map((property) => {
+        return properties
+            .filter(({ type }) => type !== 'collection')
+            .map((property) => {
             return {
                 name: property.type === 'object' ? `${property.id}.id` : property.id,
                 label: property.name,
@@ -466,7 +468,15 @@ const CriteriaBuilder = (props) => {
                         enablePresetValues,
                         presetGroupLabel,
                         disabledCriteria,
-                        treeViewOpts,
+                        treeViewOpts: treeViewOpts
+                            ? {
+                                ...treeViewOpts,
+                                object: {
+                                    ...treeViewOpts?.object,
+                                    properties: treeViewOpts?.object.properties.filter(({ type }) => type !== 'collection'),
+                                },
+                            }
+                            : undefined,
                         propertyTreeMap,
                         setPropertyTreeMap,
                     }, controlClassnames: {

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

@@ -49,8 +49,6 @@ const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value
                     if (originalValue.includes('.')) {
                         const parts = originalValue.split('.');
                         if (parts.length >= 2) {
-                            const parentId = parts.slice(0, -1).join('.');
-                            await fetchObject(parentId);
                             if (!newObjectPropertyNamePathMap[originalValue]) {
                                 const fieldNamePath = await fetchDisplayNamePath(originalValue, rootObject, fetchObject);
                                 newObjectPropertyNamePathMap = {

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

@@ -17,10 +17,10 @@ const GroupHeader = styled('div')(({ theme }) => ({
 }));
 const GroupItems = styled('ul')({ padding: 0 });
 const ValueEditor = (props) => {
-    const { handleOnChange, value, operator, context, level, rule } = props;
+    const { handleOnChange, value, operator, context, level, rule, fieldData } = props;
     let inputType = props.inputType;
     let values = props.values;
-    const property = context.propertyTreeMap[rule.field];
+    const property = context.propertyTreeMap?.[rule.field];
     // for tree view / related object properties, the properties are stored in the propertyTreeMap upon selection
     if (!!context.treeViewOpts && !!property) {
         inputType = property.type;
@@ -111,12 +111,21 @@ const ValueEditor = (props) => {
         }
         else {
             const isMultiple = inputType === 'array' || ['in', 'notIn'].includes(operator);
+            const isSelectType = fieldData.valueEditorType === 'select';
             const options = [
                 ...(values?.sort((a, b) => a.label.localeCompare(b.label)) ?? []),
                 ...(presetValues?.sort((a, b) => a.label.localeCompare(b.label)) ?? []),
             ];
             if (isMultiple || values?.length) {
-                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : value, 
+                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && !isSelectType, multiple: isMultiple, options: options, value: isMultiple
+                        ? Array.isArray(value)
+                            ? value
+                            : isSelectType && value && typeof value === 'string'
+                                ? [value]
+                                : []
+                        : Array.isArray(value)
+                            ? value.join(',')
+                            : value, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     onChange: (event, newValue) => {
                         let value;

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 { isEqual, toPairs } from 'lodash';
+import { isEmpty, isEqual, toPairs } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import '../../../../styles/form-component.css';
 import { Skeleton, Snackbar } from '../../../core';
@@ -320,7 +320,9 @@ export function Form(props) {
         const submittedFields = {};
         for (const field in submission.data) {
             const value = submission.data[field];
-            if (value === '' || (Array.isArray(value) && !value.length)) {
+            if (value === '' ||
+                (Array.isArray(value) && !value.length) ||
+                (typeof value === 'object' && isEmpty(value))) {
                 submittedFields[field] = null;
             }
             else {
@@ -424,7 +426,7 @@ export function Form(props) {
             },
         ],
     };
-    return (React.createElement(Box, { className: "form-component" },
+    return (React.createElement(Box, null,
         componentProps.length ? (React.createElement(FormIO, { key: closeModal ? undefined : formKey, form: {
                 display: 'form',
                 components: componentProps,

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

@@ -1,7 +1,7 @@
 import { ReactComponent } from '@formio/react';
-import Handlebars from 'handlebars';
 import { isArray, isEmpty, isNil, uniq } from 'lodash';
 import { DateTime } from 'luxon';
+import Handlebars from 'no-eval-handlebars';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { FormField } from '../../../custom';
@@ -354,7 +354,7 @@ export class FormFieldComponent extends ReactComponent {
             let { minDate, maxDate } = validate;
             if (minDate && !dateRegex.test(minDate)) {
                 try {
-                    minDate = Handlebars.compile(minDate)(data);
+                    minDate = Handlebars.compileAST(minDate)(data);
                 }
                 catch (err) {
                     console.log(err);
@@ -362,7 +362,7 @@ export class FormFieldComponent extends ReactComponent {
             }
             if (maxDate && !dateRegex.test(maxDate)) {
                 try {
-                    maxDate = Handlebars.compile(maxDate)(data);
+                    maxDate = Handlebars.compileAST(maxDate)(data);
                 }
                 catch (err) {
                     console.log(err);

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

@@ -1,6 +1,6 @@
 import cleanDeep from 'clean-deep';
-import Handlebars from 'handlebars';
 import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
+import Handlebars from 'no-eval-handlebars';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Close } from '../../../../../icons';
 import { Autocomplete, Button, Dialog, IconButton, Link, Paper, TextField, Tooltip, Typography, } from '../../../../core';
@@ -132,7 +132,7 @@ export const ObjectPropertyInput = (props) => {
         setOpenCreateDialog(false);
     };
     const compileExpression = (expression, instance) => {
-        const template = Handlebars.compile(expression);
+        const template = Handlebars.compileAST(expression);
         return instance ? template(instance) : undefined;
     };
     const navigationSlug = defaultPages && property.objectId && defaultPages[property.objectId];

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.js

@@ -1,5 +1,5 @@
-import Handlebars from 'handlebars';
 import { difference, isEmpty, isObject } from 'lodash';
+import Handlebars from 'no-eval-handlebars';
 import React, { useEffect, useState } from 'react';
 import { FormField } from '../../../..';
 import { Snackbar, TextField, Typography } from '../../../../../core';
@@ -60,7 +60,7 @@ export const DropdownRepeatableFieldInput = (props) => {
         }
     };
     const compileExpression = (instance, expression) => {
-        const template = Handlebars.compile(expression);
+        const template = Handlebars.compileAST(expression);
         return template(instance);
     };
     return (React.createElement(React.Fragment, null, !readOnly ? (property && (React.createElement(React.Fragment, null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.1",
+    "version": "1.0.2-dev.0",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -114,11 +114,11 @@
         "eslint-plugin-no-inline-styles": "^1.0.5",
         "flat": "^6.0.1",
         "formiojs": "^4.15.0-rc.23",
-        "handlebars": "^4.7.8",
         "html-react-parser": "^5.1.18",
         "luxon": "^2.5.2",
         "nanoid": "^5.0.8",
         "nanoid-dictionary": "^4.3.0",
+        "no-eval-handlebars": "^1.0.2",
         "pluralize": "^8.0.0",
         "pretty-bytes": "^6.1.1",
         "react-dropzone": "^14.2.2",