@evoke-platform/ui-components 1.0.0-dev.241 → 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.241",
+    "version": "1.0.0-dev.242",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",