@evoke-platform/ui-components 1.0.0-dev.240 → 1.0.0-dev.242

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

@@ -1,9 +1,11 @@
-import { AddRounded, RemoveCircleOutlineRounded } from '@mui/icons-material';
+import { AddRounded, UnfoldMore } from '@mui/icons-material';
+import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isEmpty, startCase } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, formatQuery, parseMongoDB, useRuleGroup, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
+import { TrashCan } from '../../../icons/custom';
 import { Autocomplete, Button, IconButton, TextField } from '../../core';
 import { Box } from '../../layout';
 import { difference } from '../util';
@@ -49,8 +51,9 @@ const CustomRuleGroup = (props) => {
         removeGroup,
     };
     return (React.createElement("div", { ref: rg.previewRef, className: rg.outerClassName, "data-testid": TestID.ruleGroup, "data-dragmonitorid": rg.dragMonitorId, "data-dropmonitorid": rg.dropMonitorId, "data-rule-group-id": rg.id, "data-level": rg.path.length, "data-path": JSON.stringify(rg.path) },
-        React.createElement("div", { className: rg.classNames.body },
-            React.createElement(RuleGroupBodyComponents, { ...subComponentProps })),
+        rg.ruleGroup.rules.length > 0 && (React.createElement("div", { className: rg.classNames.body },
+            React.createElement(Typography, { className: "betweenRules" }, "Where"),
+            React.createElement(RuleGroupBodyComponents, { ...subComponentProps }))),
         React.createElement("div", { ref: rg.dropRef, className: rg.classNames.header },
             React.createElement(RuleGroupHeaderComponents, { ...subComponentProps, schema: {
                     ...subComponentProps.schema,
@@ -60,24 +63,41 @@ const CustomRuleGroup = (props) => {
                 } }))));
 };
 const customButton = (props) => {
-    const { title, handleOnClick, label } = props;
+    const { title, handleOnClick, label, path } = props;
     let buttonLabel = label;
+    const nestedConditionLimit = 2;
     switch (title) {
         case 'Add group':
-            buttonLabel = 'Condition Group';
+            buttonLabel = 'Add Condition Group';
             break;
         case 'Add rule':
-            buttonLabel = 'Condition';
+            buttonLabel = 'Add Condition';
+            break;
+        case 'Remove group':
+            buttonLabel = 'Clear All';
             break;
     }
-    return (React.createElement(Button, { variant: "contained", onClick: handleOnClick, size: "small", startIcon: React.createElement(AddRounded, null), sx: {
-            padding: '6px 20px',
-            fontSize: '14.5px',
-            backgroundColor: '#ebf4f8',
-            color: '#0678a9',
+    return (React.createElement(React.Fragment, null, (path.length < nestedConditionLimit || title === 'Add rule') && (React.createElement(Button, { onClick: handleOnClick, startIcon: React.createElement(AddRounded, null), sx: {
+            padding: '6px 16px',
+            fontSize: '0.875rem',
+            marginRight: path.length === 0 ? '.5rem' : '0px',
+            color: title === 'Add group' ? 'black' : '#0075A7',
             boxShadow: 'none',
-            '&:hover': { backgroundColor: '#dcecf3', boxShadow: 'none' },
-        } }, buttonLabel));
+            float: 'left',
+            backgroundColor: path.length === 0
+                ? title === 'Add rule'
+                    ? 'rgba(0, 117, 167, 0.08)'
+                    : '#f6f7f8'
+                : 'transparent',
+            '&:hover': {
+                backgroundColor: path.length === 0
+                    ? title === 'Add rule'
+                        ? 'rgba(0, 117, 167, 0.08)'
+                        : '#f6f7f8'
+                    : 'transparent',
+                boxShadow: 'none',
+            },
+        } }, buttonLabel))));
 };
 const customSelector = (props) => {
     const { options, value, handleOnChange, title, context, level } = props;
@@ -98,7 +118,7 @@ const customSelector = (props) => {
     }
     switch (title) {
         case 'Operators':
-            width = '20%';
+            width = '25%';
             if (inputType === 'array') {
                 opts = options
                     .filter((option) => ['null', 'notNull', 'in', 'notIn'].includes(option.name))
@@ -152,26 +172,36 @@ const customSelector = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onChange: (event, newValue) => {
             handleOnChange(newValue?.value.name);
-        }, renderInput: (params) => React.createElement(TextField, { ...params, size: "small" }), sx: { width: width, maxWidth: title === 'Operators' ? '200px' : 'none' }, disableClearable: true, readOnly: readOnly }));
+        }, renderInput: (params) => React.createElement(TextField, { ...params, size: "small" }), sx: { width: width, backgroundColor: '#fff' }, disableClearable: true, readOnly: readOnly }));
 };
 const customCombinator = (props) => {
-    const { options, value, handleOnChange, context, level } = props;
-    return (React.createElement(Autocomplete, { options: options, value: startCase(value), 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        getOptionLabel: (option) => startCase(option?.name ?? option), 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        isOptionEqualToValue: (option, value) => option === value, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onChange: (event, newValue) => handleOnChange(newValue?.value.name), size: 'small', renderInput: (params) => React.createElement(TextField, { ...params, size: "small", sx: { '& fieldset': { border: 'none' } } }), sx: {
-            width: '80px',
-            backgroundColor: '#DFE3E8',
-            borderWidth: 'none',
+    const { value, handleOnChange, context, level, path } = props;
+    const isReadOnly = !!context.disabledCriteria && context.disabledCriteria.level - 1 === level;
+    const conditionPositionInGroup = path[path.length - 1];
+    const toggleCombinator = () => {
+        const newCombinator = value === 'and' ? 'or' : 'and';
+        handleOnChange(newCombinator);
+    };
+    return conditionPositionInGroup === 1 ? (React.createElement(Box, { sx: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            backgroundColor: isReadOnly ? '#f5f5f5' : '#fff',
+            border: '1px solid #ddd',
             borderRadius: '8px',
-            '.MuiInputBase-input': {
-                fontWeight: 550,
-                fontSize: '14px',
-            },
-        }, readOnly: context.disabledCriteria && context.disabledCriteria.level - 1 === level, disableClearable: true }));
+            cursor: 'pointer',
+            width: '72px',
+            padding: '5px 10px',
+            fontSize: '16px',
+            opacity: isReadOnly ? 0.6 : 1,
+        }, onClick: !isReadOnly ? toggleCombinator : undefined },
+        React.createElement(Typography, null, startCase(value)),
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: '16px',
+                color: '#212B36',
+            } },
+            React.createElement(UnfoldMore, null)))) : (React.createElement(Typography, { "aria-label": "combinator-text", sx: { color: '#637381' } }, startCase(value)));
 };
 const customDelete = (props) => {
     const { handleOnClick, context, level } = props;
@@ -182,8 +212,16 @@ const customDelete = (props) => {
         hideDelete =
             Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
     }
-    return !hideDelete ? (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
-        React.createElement(RemoveCircleOutlineRounded, null))) : (React.createElement(React.Fragment, null));
+    return !hideDelete ? (props.title === 'Remove group' ? (React.createElement(Button, { onClick: handleOnClick, className: 'ruleGroup-remove', sx: {
+            padding: '6px 16px',
+            opacity: 0,
+            fontSize: '14.5px',
+            boxShadow: 'none',
+            '&:hover': { backgroundColor: 'transparent', boxShadow: 'none' },
+            color: '#212B36',
+            fontWeight: '400',
+        } }, "Delete group")) : (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
+        React.createElement(TrashCan, { sx: { ':hover': { color: '#637381' } } })))) : (React.createElement(React.Fragment, null));
 };
 export const valueEditor = (props) => {
     // For backward compatibility, if enable preset values is true, but preset
@@ -267,23 +305,39 @@ const CriteriaBuilder = (props) => {
                     borderColor: '#ddd',
                     borderRadius: '8px',
                 },
-                '.queryBuilder-branches .ruleGroup-body': {
-                    marginLeft: hideBorder ? '0px' : 'calc(2 * 0.5rem)',
+                '.ruleGroup': {
+                    borderColor: '#c2c2c2',
+                    borderLeftWidth: '4px',
+                    background: '#F9FAFB',
                 },
-                '.queryBuilder-branches': { color: '#ddd' },
-                '.queryBuilder-branches .betweenRules::before': {
-                    borderColor: '#ddd',
-                    borderStyle: hideBorder ? 'hidden' : 'solid',
+                '.ruleGroup:hover, .ruleGroup:has(:focus)': {
+                    borderColor: '#0678a9',
                 },
-                '.ruleGroup': {
-                    borderColor: '#ddd',
-                    borderStyle: hideBorder ? 'hidden' : 'solid',
+                '.ruleGroup:hover > .ruleGroup-header > .ruleGroup-remove, .ruleGroup:has(:focus) > .ruleGroup-header > .ruleGroup-remove ': {
+                    opacity: 1,
+                    float: 'right',
                 },
-                '.ruleGroup .ruleGroup': { borderStyle: 'solid' },
-                '.queryBuilder-branches .rule::before, .queryBuilder-branches .ruleGroup .ruleGroup::before, .queryBuilder-branches .rule::after, .queryBuilder-branches .ruleGroup .ruleGroup::after': {
-                    borderColor: '#ddd',
-                    borderStyle: hideBorder ? 'hidden' : 'solid',
+                '.ruleGroup:not(.ruleGroup .ruleGroup)': {
+                    borderStyle: 'hidden',
+                    background: '#fff',
+                    maxWidth: '70vw',
                 },
+                '.ruleGroup-header': {
+                    display: 'block',
+                },
+                '.betweenRules': {
+                    textAlign: 'right',
+                },
+                '.ruleGroup-body': {
+                    display: 'grid !important',
+                    gridTemplateRows: 'auto 1fr auto',
+                    gridTemplateColumns: 'min-content',
+                    alignItems: 'center',
+                },
+                '.ruleGroup-body > .rule, .ruleGroup-body > .ruleGroup': {
+                    gridColumnStart: 2,
+                },
+                '.ruleGroup .ruleGroup': { borderStyle: 'solid' },
             } },
             React.createElement(QueryBuilderMaterial, null,
                 React.createElement(QueryBuilder, { query: !criteria && !originalCriteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
@@ -305,7 +359,6 @@ const CriteriaBuilder = (props) => {
                         presetGroupLabel,
                         disabledCriteria,
                     }, controlClassnames: {
-                        queryBuilder: 'queryBuilder-branches',
                         ruleGroup: 'container',
                     }, operators: operators
                         ? ALL_OPERATORS.filter((o) => operators.includes(o.name))

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

@@ -61,11 +61,11 @@ const ValueEditor = (props) => {
         if (inputType === 'date') {
             // date editor
             return (React.createElement(LocalizationProvider, null,
-                React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } })), readOnly: readOnly })));
+                React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' } })), readOnly: readOnly })));
         }
         else if (inputType === 'time') {
             return (React.createElement(LocalizationProvider, null,
-                React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } })), readOnly: readOnly })));
+                React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' } })), readOnly: readOnly })));
         }
         else if (inputType === 'number' || inputType === 'integer') {
             const isMultiple = ['in', 'notIn'].includes(operator);
@@ -79,7 +79,7 @@ const ValueEditor = (props) => {
                         handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                     }, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%' }, readOnly: readOnly }));
+                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -91,7 +91,7 @@ const ValueEditor = (props) => {
                         }
                     }, ...(inputType === 'number'
                         ? { InputProps: { inputComponent: NumericFormat } }
-                        : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%' }, readOnly: readOnly }));
+                        : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
             }
         }
         else {
@@ -133,7 +133,7 @@ const ValueEditor = (props) => {
                     }, groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: { width: '33%' }, readOnly: readOnly }));
             }
             else {
-                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' }, readOnly: readOnly }));
+                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
             }
         }
     };

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

@@ -1,5 +1,4 @@
 import { ReactComponent } from '@formio/react';
-import Handlebars from 'handlebars';
 import { isArray, isEmpty, isNil, uniq } from 'lodash';
 import { DateTime } from 'luxon';
 import React from 'react';
@@ -10,20 +9,20 @@ import { isPropertyVisible } from '../utils';
 function isAddressProperties(key) {
     return /\.line1|\.line2|\.city|\.county|\.state|\.zipCode$/.test(key);
 }
-Handlebars.registerHelper('addDays', function (addend1, addend2) {
+function addDays(addend1, addend2) {
     const dateAddend1 = DateTime.fromISO(addend1);
     if (dateAddend1.isValid) {
         return dateAddend1.plus({ days: addend2 }).toISODate();
     }
     return undefined;
-});
-Handlebars.registerHelper('subDays', function (minuend, subtrahend) {
+}
+function subDays(minuend, subtrahend) {
     const dateMinuend = DateTime.fromISO(minuend);
     if (dateMinuend.isValid) {
         return dateMinuend.minus({ days: subtrahend }).toISODate();
     }
     return undefined;
-});
+}
 export class FormFieldComponent extends ReactComponent {
     /**
      * Called when the component has been instantiated. This is useful to define
@@ -345,29 +344,63 @@ export class FormFieldComponent extends ReactComponent {
         else {
             delete this.errorDetails['regexes'];
         }
-        if (this.component.validate.minDate || this.component.validate.maxDate) {
+        const evaluateDateValidation = (dateValidation) => {
             const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-            const data = {
-                input: { ...this.root.data },
-                __today__: DateTime.now().toISODate(),
-            };
-            let { minDate, maxDate } = validate;
-            if (minDate && !dateRegex.test(minDate)) {
-                try {
-                    minDate = Handlebars.compile(minDate)(data);
-                }
-                catch (err) {
-                    console.log(err);
-                }
-            }
-            if (maxDate && !dateRegex.test(maxDate)) {
+            const exactDateRegex = /^{{(?<inputProperty>input\.[a-zA-Z][a-zA-Z0-9_]*|__today__)}}$/;
+            const relativeDateRegex = /^{{(?<operation>addDays|subDays) (?<operand1>input\.[a-zA-Z][a-zA-Z0-9_]*|__today__) (?<operand2>[0-9]+)}}$/;
+            // If the date validation isn't a literal date, evaluate it
+            if (dateValidation && !dateRegex.test(dateValidation)) {
                 try {
-                    maxDate = Handlebars.compile(maxDate)(data);
+                    const today = DateTime.now().toISODate();
+                    if (exactDateRegex.test(dateValidation)) {
+                        const { groups = {} } = exactDateRegex.exec(dateValidation) ?? {};
+                        const { inputProperty } = groups;
+                        if (inputProperty === '__today__') {
+                            return today;
+                        }
+                        else if (inputProperty.split('.').length > 1) {
+                            const propertyId = inputProperty.split('.')[1];
+                            if (propertyId in this.root.data) {
+                                return this.root.data[propertyId];
+                            }
+                        }
+                    }
+                    else if (relativeDateRegex.test(dateValidation)) {
+                        const { groups = {} } = relativeDateRegex.exec(dateValidation) ?? {};
+                        // eslint-disable-next-line prefer-const
+                        let { operation, operand1, operand2 } = groups;
+                        if (operation && operand1 && operand2) {
+                            if (operand1 === '__today__') {
+                                operand1 = today;
+                            }
+                            else if (operand1.split('.').length > 1) {
+                                const propertyId = operand1.split('.')[1];
+                                if (propertyId in this.root.data) {
+                                    operand1 = this.root.data[propertyId];
+                                }
+                            }
+                            else {
+                                throw `Invalid operand: ${operand1}`;
+                            }
+                            if (operation === 'addDays') {
+                                return addDays(operand1, parseInt(operand2));
+                            }
+                            else {
+                                return subDays(operand1, parseInt(operand2));
+                            }
+                        }
+                    }
+                    throw `Invalid date validation: ${dateValidation}`;
                 }
                 catch (err) {
                     console.log(err);
+                    return undefined;
                 }
             }
+        };
+        if (this.component.validate.minDate || this.component.validate.maxDate) {
+            const minDate = validate.minDate ? evaluateDateValidation(validate.minDate) : undefined;
+            const maxDate = validate.maxDate ? evaluateDateValidation(validate.maxDate) : undefined;
             if ((minDate && value < minDate) || (maxDate && value > maxDate)) {
                 this.errorDetails['date'] = validate.customMessage;
             }
@@ -423,7 +456,11 @@ export class FormFieldComponent extends ReactComponent {
                 !this.root.customErrors.some((err) => err.message === error)) {
                 this.root.customErrors = [
                     ...this.root.customErrors,
-                    { component: this.component, message: error, formattedKeyOrPath: this.component.key },
+                    {
+                        component: this.component,
+                        message: error,
+                        formattedKeyOrPath: this.component.key,
+                    },
                 ];
             }
         });

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

@@ -1,5 +1,5 @@
 import cleanDeep from 'clean-deep';
-import Handlebars from 'handlebars';
+import Handlebars from 'kbn-handlebars';
 import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Close } from '../../../../../icons';
@@ -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,4 +1,4 @@
-import Handlebars from 'handlebars';
+import Handlebars from 'kbn-handlebars';
 import { difference, isEmpty, isObject } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { FormField } from '../../../..';
@@ -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,
@@ -87,5 +87,8 @@ export const DropdownRepeatableFieldInput = (props) => {
                     } })),
                 loading: loading,
             } }),
-        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
+                isError: snackbarError.isError,
+                showAlert: false,
+            }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.240",
+    "version": "1.0.0-dev.242",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -114,8 +114,8 @@
         "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",
+        "kbn-handlebars": "^1.0.0",
         "luxon": "^2.5.2",
         "nanoid": "^5.0.8",
         "nanoid-dictionary": "^4.3.0",