@evoke-platform/ui-components 1.4.0-testing.9 → 1.5.0-dev.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/List/ListItemIcon/ListItemIcon.d.ts

@@ -0,0 +1,4 @@
+import { ListItemIconProps } from '@mui/material';
+import React from 'react';
+declare const ListItemIcon: (props: ListItemIconProps) => React.JSX.Element;
+export default ListItemIcon;

package/dist/published/components/core/List/ListItemIcon/ListItemIcon.js

@@ -0,0 +1,6 @@
+import { ListItemIcon as MUIListItemIcon } from '@mui/material';
+import React from 'react';
+const ListItemIcon = (props) => {
+    return React.createElement(MUIListItemIcon, { ...props });
+};
+export default ListItemIcon;

package/dist/published/components/core/List/ListItemIcon/index.d.ts

@@ -0,0 +1,3 @@
+import ListItemIcon from './ListItemIcon';
+export default ListItemIcon;
+export { ListItemIcon };

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

@@ -0,0 +1,3 @@
+import ListItemIcon from './ListItemIcon';
+export default ListItemIcon;
+export { ListItemIcon };

package/dist/published/components/core/List/index.d.ts

@@ -1,4 +1,5 @@
 import List from './List';
 import ListItem from './ListItem';
+import ListItemIcon from './ListItemIcon';
 export default List;
-export { List, ListItem };
+export { List, ListItem, ListItemIcon };

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

@@ -1,4 +1,5 @@
 import List from './List';
 import ListItem from './ListItem';
+import ListItemIcon from './ListItemIcon';
 export default List;
-export { List, ListItem };
+export { List, ListItem, ListItemIcon };

package/dist/published/components/core/index.d.ts

@@ -24,7 +24,7 @@ export { FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } f
 export { IconButton } from './IconButton';
 export { LinearProgress } from './LinearProgress';
 export { Link } from './Link';
-export { List, ListItem } from './List';
+export { List, ListItem, ListItemIcon } from './List';
 export { LoadingButton } from './LoadingButton';
 export * from './LocalizationProvider';
 export { Menu, MenuItem } from './Menu';
@@ -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

@@ -24,7 +24,7 @@ export { FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } f
 export { IconButton } from './IconButton';
 export { LinearProgress } from './LinearProgress';
 export { Link } from './Link';
-export { List, ListItem } from './List';
+export { List, ListItem, ListItemIcon } from './List';
 export { LoadingButton } from './LoadingButton';
 export * from './LocalizationProvider';
 export { Menu, MenuItem } from './Menu';
@@ -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

@@ -155,7 +155,7 @@ const customSelector = (props) => {
                 }));
             }
             else if (inputType === 'integer' || inputType === 'number') {
-                opts = options.filter((option) => ['=', '!=', '<', '<=', '>', '>=', 'null', 'notNull'].includes(option.name));
+                opts = options.filter((option) => ['=', '!=', '<', '<=', '>', '>=', 'null', 'notNull', 'in', 'notIn'].includes(option.name));
                 // checks if it is a single-select property
             }
             else if (inputType === 'string' && isArray(props.fieldData?.values)) {
@@ -164,13 +164,13 @@ const customSelector = (props) => {
             else if (inputType === 'string') {
                 opts = options.filter((option) => !['>', '<', '<=', '>='].includes(option.name));
             }
-            else if (inputType === 'image') {
+            else if (inputType === 'image' || inputType === 'boolean') {
                 opts = options.filter((option) => ['=', '!=', 'null', 'notNull'].includes(option.name));
             }
             break;
         case 'Fields':
             placeholder = 'Select Property';
-            width = '33%';
+            width = '37%';
             val = options.find((option) => option.name === val)?.name;
             break;
     }
@@ -266,40 +266,19 @@ 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) => {
+    const processRules = (rules) => {
         return rules.map((rule) => {
             if ('rules' in rule) {
                 return {
                     ...rule,
-                    rules: processRules(rule.rules, isSavedValue),
+                    rules: processRules(rule.rules),
                 };
             }
             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),
             }
-            setPropertyTreeMap(tempPropertyMap);
-        });
+            : { combinator: 'and', rules: [] };
     };
+    const [query, setQuery] = useState(initializeQuery);
     const handleClearAll = () => {
         handleQueryChange({ combinator: 'and', rules: [] });
     };
@@ -356,7 +371,7 @@ const CriteriaBuilder = (props) => {
     const handleQueryChange = (q) => {
         const processedQuery = {
             ...q,
-            rules: processRules(q.rules, false),
+            rules: processRules(q.rules),
         };
         setQuery(processedQuery);
         const newCriteria = JSON.parse(formatQuery(processedQuery, {
@@ -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.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ValueEditorProps as ValueEditorBaseProps } from 'react-querybuilder';
-import { AutocompleteOption } from '../../core';
+import { Option, ValueEditorProps as ValueEditorBaseProps } from 'react-querybuilder';
 export type ValueEditorProps = ValueEditorBaseProps & {
-    values?: AutocompleteOption[] | any[];
+    values?: Option[];
 };
 declare const ValueEditor: (props: ValueEditorProps) => React.JSX.Element;
 export default ValueEditor;

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

@@ -1,8 +1,8 @@
 import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/core';
-import { ClearRounded, CodeRounded } from '@mui/icons-material';
 import { Box, darken, lighten, styled } from '@mui/material';
 import { TimePicker } from '@mui/x-date-pickers';
 import React, { useEffect, useRef, useState } from 'react';
+import { ClearRounded, CodeRounded } from '../../../icons';
 import { InvalidDate } from '../../../util';
 import { Autocomplete, Chip, DatePicker, DateTimePicker, IconButton, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
@@ -18,19 +18,22 @@ const GroupHeader = styled('div')(({ theme }) => ({
         : darken(theme.palette.primary.main, 0.8),
 }));
 const GroupItems = styled('ul')({ padding: 0 });
+const isPresetValue = (value) => typeof value === 'string' && value.startsWith('{{{') && value.endsWith('}}}');
 const ValueEditor = (props) => {
     const { handleOnChange, value, operator, context, level, rule, fieldData } = props;
     let inputType = props.inputType;
-    let values = props.values;
+    let values = (props.values ?? [])
+        .map((item) => ({
+        value: item.name,
+        label: item.label,
+    }))
+        .sort((a, b) => a.label.localeCompare(b.label));
     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;
         if (property.enum) {
-            values = property.enum.map((item) => ({
-                name: item,
-                label: item,
-            }));
+            values = property.enum.map((item) => ({ value: item, label: item }));
         }
     }
     const [invalidDateTime, setInvalidDateTime] = useState(false);
@@ -40,10 +43,17 @@ const ValueEditor = (props) => {
     // Manages input value for Autocomplete when using 'in/not in' operators, ensuring correct handling on blur.
     const [inputValue, setInputValue] = useState('');
     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 presetValues = context.presetValues
+        ?.filter((val) => !val.type || val.type === inputType)
+        ?.map((val) => {
+        return {
+            label: val.label,
+            value: val.value?.name,
+            sublabel: val.value?.sublabel,
+            type: val.type,
+        };
+    })
+        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
     let readOnly = context.disabled;
     if (!readOnly && context.disabledCriteria) {
         readOnly =
@@ -54,16 +64,15 @@ const ValueEditor = (props) => {
             width: '33%',
             background: readOnly ? '#f4f6f8' : '#fff',
             borderRadius: '8px',
-            '& .MuiAutocomplete-tag': {
-                backgroundColor: '#edeff1',
-            },
+            '& .MuiAutocomplete-tag': { backgroundColor: '#edeff1' },
         },
     };
+    const isMultipleOperator = ['in', 'notIn'].includes(operator);
     useEffect(() => {
-        if (!['in', 'notIn'].includes(operator) && Array.isArray(value)) {
+        if (!isMultipleOperator && Array.isArray(value)) {
             handleOnChange('');
         }
-        else if (['in', 'notIn'].includes(operator) && !Array.isArray(value)) {
+        else if (isMultipleOperator && !Array.isArray(value)) {
             handleOnChange([]);
         }
     }, [operator]);
@@ -80,6 +89,7 @@ const ValueEditor = (props) => {
     };
     const clearValue = () => {
         handleOnChange('');
+        setInputValue('');
     };
     const setPresetValue = (value) => {
         handleOnChange(value);
@@ -131,9 +141,6 @@ const ValueEditor = (props) => {
         }
     }
     const getEditor = () => {
-        if (isPresetValueSelected) {
-            return;
-        }
         if (disabled) {
             return React.createElement(React.Fragment, null);
         }
@@ -181,24 +188,40 @@ 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') {
-            const isMultiple = ['in', 'notIn'].includes(operator);
-            const options = presetValues;
-            if (isMultiple) {
-                return (React.createElement(Autocomplete, { freeSolo: true, multiple: true, options: options, getOptionLabel: (option) => typeof option === 'object' && option?.label ? option.label : String(option), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    onChange: (event, newValue) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const uniqueSelections = newValue.map((item) => item.value ?? Number(item));
-                        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: styles.input, readOnly: readOnly }));
+            if (isMultipleOperator) {
+                const options = presetValues;
+                return (React.createElement(Autocomplete, { freeSolo: true, multiple: true, options: options, value: Array.isArray(value)
+                        ? disabled
+                            ? []
+                            : value.map((v) => {
+                                const found = options.find((o) => o.value === v);
+                                return found ? found : { label: v, value: v };
+                            })
+                        : [], disabled: disabled, onChange: (event, newValue) => {
+                        const uniqueSelections = newValue
+                            .map((item) => {
+                            if (typeof item === 'object' && 'value' in item) {
+                                return item.value;
+                            }
+                            else if (typeof item === 'string') {
+                                if (isPresetValue(item)) {
+                                    return item;
+                                }
+                                else if (item.match(/^(\+|-){0,1}\d*(\.\d+)?$/)) {
+                                    const value = Number(item);
+                                    return Number.isNaN(value) ? '' : value;
+                                }
+                                return '';
+                            }
+                            return item;
+                        })
+                            .filter((item) => item !== '');
+                        handleOnChange(uniqueSelections.length ? Array.from(new Set(uniqueSelections)) : '');
+                    }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: styles.input, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: disabled || ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -213,29 +236,39 @@ const ValueEditor = (props) => {
                         : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: styles.input, readOnly: readOnly }));
             }
         }
+        else if (inputType === 'boolean') {
+            const options = [{ label: 'True', value: true }, { label: 'False', value: false }, ...presetValues];
+            return (React.createElement(Autocomplete, { options: options, value: options.find((opt) => opt.value === value) ?? value, onChange: (event, newValue) => {
+                    handleOnChange(newValue ? newValue.value : '');
+                }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
+        }
         else {
-            const isMultiple = inputType === 'array' || ['in', 'notIn'].includes(operator);
-            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' && fieldData.valueEditorType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : Array.isArray(value) ? '' : value, 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    onChange: (event, newValue) => {
+            const isMultiple = inputType === 'array' || isMultipleOperator || values?.length;
+            if (isMultiple) {
+                const options = [...values, ...presetValues];
+                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && fieldData.valueEditorType !== 'select', multiple: isMultiple, options: options, value: isMultiple
+                        ? Array.isArray(value)
+                            ? value.map((item) => {
+                                const found = options.find((o) => o.value === item);
+                                return found ? found : { label: item, value: item };
+                            })
+                            : []
+                        : Array.isArray(value)
+                            ? ''
+                            : value, onChange: (event, newValue) => {
                         let value;
                         if (isMultiple) {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            const values = newValue.map((item) => item.name || item.value?.name || item);
+                            const values = newValue.map((item) => typeof item === 'string' ? item : item.value);
                             value = Array.from(new Set(values));
                         }
                         else {
-                            value = newValue?.name ?? newValue?.value?.name ?? '';
+                            value =
+                                typeof newValue === 'string' ? newValue : newValue.value;
                         }
                         handleOnChange(value);
                     }, onBlur: () => {
                         if (inputValue &&
-                            (options.some((option) => option.name === inputValue) || !options.length) &&
+                            (options.some((option) => option.value === inputValue) || !options.length) &&
                             (operator === 'in' || operator === 'notIn')) {
                             const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
                             handleOnChange(Array.from(new Set(newValues)));
@@ -244,7 +277,7 @@ const ValueEditor = (props) => {
                     }, onKeyDown: (event) => {
                         if (event.key === 'Enter' &&
                             inputValue &&
-                            (options.some((option) => option.name === inputValue) || !options.length) &&
+                            (options.some((option) => option.value === inputValue) || !options.length) &&
                             (operator === 'in' || operator === 'notIn')) {
                             const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
                             handleOnChange(Array.from(new Set(newValues)));
@@ -252,32 +285,16 @@ const ValueEditor = (props) => {
                         }
                     }, onInputChange: (event, newInputValue) => {
                         setInputValue(newInputValue);
-                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small" })), 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    getOptionLabel: (option) => {
-                        if (typeof option === 'string') {
-                            const found = options.find((o) => option === o.name || option === o.value?.name);
-                            return found?.label || option;
-                        }
-                        return option?.label;
-                    }, 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    isOptionEqualToValue: (option, value) => {
-                        if (typeof value === 'string') {
-                            return option?.name === value || option?.value?.name === value;
-                        }
-                        else {
-                            return option?.label === value?.label;
-                        }
-                    }, groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
+                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params.label, ...params, size: "small" })), isOptionEqualToValue: (option, value) => option?.value === value.value, groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, 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: styles.input, readOnly: readOnly }));
             }
         }
     };
+    const presetDisplayValue = React.useMemo(() => presetValues?.find((option) => option.value === value)?.label || value, [presetValues, value]);
     return (React.createElement(React.Fragment, null,
-        isPresetValueSelected ? (React.createElement(Box, { ref: inputRef, sx: {
+        isPresetValue(value) ? (React.createElement(Box, { ref: inputRef, sx: {
                 width: '33%',
                 display: 'flex',
                 justifyContent: 'space-between',
@@ -298,10 +315,11 @@ const ValueEditor = (props) => {
             !readOnly && (React.createElement(IconButton, { onClick: clearValue, sx: { padding: '3px', margin: '3px' } },
                 React.createElement(ClearRounded, { fontSize: "small", sx: { color: 'rgba(0, 0, 0, 0.54)' } }))))) : (getEditor()),
         !!presetValues?.length && (React.createElement(Menu, { open: openPresetValues, anchorEl: inputRef?.current, PaperProps: { sx: { borderRadius: '8px', width: inputRef?.current?.offsetWidth } }, onClose: onClose }, presetValues &&
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            presetValues.map((option) => (React.createElement(MenuItem, { ...props, onClick: () => setPresetValue(option.value.name), sx: { padding: '8px', minHeight: '25px' } },
-                React.createElement(Box, { padding: 0, margin: 0 },
-                    React.createElement(Typography, { fontSize: '14px', fontWeight: 500, sx: { lineHeight: '20px' } }, option.label),
-                    option.value.sublabel && (React.createElement(Typography, { fontSize: '14px', fontWeight: 500, color: 'rgba(145, 158, 171)', sx: { lineHeight: '20px' } }, option.value.sublabel))))))))));
+            presetValues.map((option) => {
+                return (React.createElement(MenuItem, { ...props, onClick: () => setPresetValue(option.value), sx: { padding: '8px', minHeight: '25px' } },
+                    React.createElement(Box, { padding: 0, margin: 0 },
+                        React.createElement(Typography, { fontSize: '14px', fontWeight: 500, sx: { lineHeight: '20px' } }, option.label),
+                        !!option.sublabel && (React.createElement(Typography, { fontSize: '14px', fontWeight: 500, color: 'rgba(145, 158, 171)', sx: { lineHeight: '20px' } }, option.sublabel)))));
+            })))));
 };
 export default ValueEditor;

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/Common/FormComponentWrapper.js

@@ -67,25 +67,26 @@ export const FormComponentWrapper = (props) => {
         charCount = maxLength - charCount;
     return (React.createElement(Box, null,
         React.createElement(Box, { sx: { padding: '10px 0' } },
-            React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId, sx: { ...(displayOption === 'radioButton' && value && { marginRight: '8px' }) } },
-                label,
-                validate.required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px' } },
-                    ` *`,
-                    ' ')) : null,
-                tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
-                    React.createElement(IconButton, null,
-                        React.createElement(Help, { sx: { fontSize: '14px' } }))))),
-            displayOption === 'radioButton' && onChange && !viewOnly && !readOnly && value && (React.createElement(Tooltip, { title: `Clear` },
-                React.createElement("span", null,
-                    React.createElement(IconButton, { "aria-label": `Clear`, sx: { padding: '0px' }, onClick: () => {
-                            property && onChange(property.id, '');
-                        } },
-                        React.createElement(HighlightOffOutlined, { sx: clearBtnStyles }))))),
-            React.createElement(Box, { sx: { ...(displayOption === 'radioButton' && { display: 'flex' }) } },
-                React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description)),
+            property?.type !== 'boolean' && (React.createElement(React.Fragment, null,
+                React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId, sx: { ...(displayOption === 'radioButton' && value && { marginRight: '8px' }) } },
+                    label,
+                    validate.required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px' } },
+                        ` *`,
+                        ' ')) : null,
+                    tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
+                        React.createElement(IconButton, null,
+                            React.createElement(Help, { sx: { fontSize: '14px' } }))))),
+                displayOption === 'radioButton' && onChange && !viewOnly && !readOnly && value && (React.createElement(Tooltip, { title: `Clear` },
+                    React.createElement("span", null,
+                        React.createElement(IconButton, { "aria-label": `Clear`, sx: { padding: '0px' }, onClick: () => {
+                                property && onChange(property.id, '');
+                            } },
+                            React.createElement(HighlightOffOutlined, { sx: clearBtnStyles }))))),
+                React.createElement(Box, { sx: { ...(displayOption === 'radioButton' && { display: 'flex' }) } },
+                    React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description)))),
             React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row' } },
                 React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight }),
-                React.createElement(Box, { sx: { width: '100%', paddingTop: '6px' } }, children),
+                React.createElement(Box, { sx: { width: '100%', paddingTop: property?.type !== 'boolean' ? '6px' : undefined } }, children),
                 React.createElement(PrefixSuffix, { suffix: suffix, height: fieldHeight }))),
         React.createElement(Box, { sx: underFieldStyles },
             React.createElement(Box, { sx: { width: '100%', display: 'flex', justifyContent: 'space-between' } },