@evoke-platform/ui-components 1.0.0-dev.161 → 1.0.0-dev.163

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.d.ts

@@ -1,25 +1,13 @@
 import React from 'react';
-import { ValueEditorProps } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
-import { AutocompleteOption } from '../../core';
-import { ObjectProperty } from '../types';
-declare type CustomValueEditorProps = ValueEditorProps & {
-    values?: AutocompleteOption[] | any[];
-};
-declare type Operator = '=' | '!=' | '<' | '>' | '<=' | '>=' | 'contains' | 'beginsWith' | 'endsWith' | 'doesNotContain' | 'doesNotBeginWith' | 'doesNotEndWith' | 'null' | 'notNull' | 'in' | 'notIn' | 'between' | 'notBetween';
-declare type CriteriaInputProps = {
+import { Operator, ObjectProperty, PresetValue } from './types';
+import { ValueEditorProps } from './ValueEditor';
+export declare type CriteriaInputProps = {
     properties: ObjectProperty[];
     setCriteria: Function;
     criteria?: Record<string, any>;
     enablePresetValues?: boolean;
-    presetValues?: {
-        label: string;
-        value: {
-            name: string;
-            label: string;
-            sublabel?: string;
-        };
-    }[];
+    presetValues?: PresetValue[];
     dynamicContentInput?: {
         component: React.ElementType;
         previousSteps: unknown[];
@@ -27,8 +15,8 @@ declare type CriteriaInputProps = {
     };
     operators?: Operator[];
     disabled?: boolean;
+    hideBorder?: boolean;
 };
-export declare const customValueEditorWithPresets: (props: CustomValueEditorProps) => JSX.Element;
-export declare const customValueEditor: (props: CustomValueEditorProps) => JSX.Element;
+export declare const valueEditor: (props: ValueEditorProps) => JSX.Element;
 declare const CriteriaBuilder: (props: CriteriaInputProps) => JSX.Element;
 export default CriteriaBuilder;

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

@@ -1,13 +1,13 @@
-import { RemoveCircleOutline } from '@mui/icons-material';
+import { AddRounded, RemoveCircleOutlineRounded } from '@mui/icons-material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import React, { useEffect, useMemo, useState } from 'react';
 import { QueryBuilder, formatQuery, parseMongoDB, useRuleGroup, TestID, RuleGroupBodyComponents, RuleGroupHeaderComponents, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
-import { Autocomplete, Button, DatePicker, IconButton, LocalizationProvider, MenuItem, TextField, Typography, } from '../../core';
+import { isEmpty, startCase } from 'lodash-es';
+import { Autocomplete, Button, IconButton, TextField } from '../../core';
 import { Box } from '../../layout';
-import { NumericFormat } from '../FormField/InputFieldComponent';
-import { isEmpty } from 'lodash-es';
 import { difference } from '../util';
+import ValueEditor from './ValueEditor';
 const ALL_OPERATORS = [
     { name: '=', label: '=' },
     { name: '!=', label: '!=' },
@@ -57,13 +57,20 @@ const customButton = (props) => {
     let buttonLabel = label;
     switch (title) {
         case 'Add group':
-            buttonLabel = '+ Condition Group';
+            buttonLabel = 'Condition Group';
             break;
         case 'Add rule':
-            buttonLabel = '+ Condition';
+            buttonLabel = 'Condition';
             break;
     }
-    return (React.createElement(Button, { variant: "contained", onClick: handleOnClick, size: "small", sx: { backgroundColor: '#ebf4f8', color: '#0678a9', boxShadow: 'none' } }, buttonLabel));
+    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',
+            boxShadow: 'none',
+            '&:hover': { backgroundColor: '#dcecf3', boxShadow: 'none' },
+        } }, buttonLabel));
 };
 const customSelector = (props) => {
     var _a, _b;
@@ -100,13 +107,10 @@ const customSelector = (props) => {
 };
 const customCombinator = (props) => {
     const { options, value, handleOnChange } = props;
-    return (React.createElement(Autocomplete, { options: options, value: value === null || value === void 0 ? void 0 : value.toUpperCase(), isOptionEqualToValue: (option, value) => {
-            return option === value;
-        }, onChange: (event, newValue) => {
-            handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.value.name);
-        }, size: 'small', renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small" })), sx: {
-            width: '90px',
-            backgroundColor: '#eee',
+    return (React.createElement(Autocomplete, { options: options, value: startCase(value), getOptionLabel: (option) => { var _a; return startCase((_a = option === null || option === void 0 ? void 0 : option.name) !== null && _a !== void 0 ? _a : option); }, isOptionEqualToValue: (option, value) => option === value, onChange: (event, newValue) => handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.value.name), size: 'small', renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small", sx: { "& fieldset": { border: 'none' } } })), sx: {
+            width: '80px',
+            backgroundColor: '#DFE3E8',
+            borderWidth: 'none',
             borderRadius: '8px',
             '.MuiInputBase-input': {
                 fontWeight: 550,
@@ -117,167 +121,22 @@ const customCombinator = (props) => {
 const customDelete = (props) => {
     const { handleOnClick } = props;
     return (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
-        React.createElement(RemoveCircleOutline, null)));
+        React.createElement(RemoveCircleOutlineRounded, null)));
 };
-export const customValueEditorWithPresets = (props) => {
-    var _a;
-    const { handleOnChange, value } = props;
-    const presetValues = (_a = props.context) === null || _a === void 0 ? void 0 : _a.presetValues;
-    const valueEditor = (React.createElement(Autocomplete, { freeSolo: true, value: ['null', 'notNull'].includes(props.operator) ? '' : value, onChange: (event, newValue) => {
-            var _a;
-            handleOnChange((_a = newValue === null || newValue === void 0 ? void 0 : newValue.value.name) !== null && _a !== void 0 ? _a : '');
-        }, options: presetValues !== null && presetValues !== void 0 ? presetValues : [
-            {
+export const valueEditor = (props) => {
+    var _a, _b;
+    // For backward compatibility, if enable preset values is true, but preset 
+    // values are not defined, add in the user id preset value
+    if (!((_a = props.context) === null || _a === void 0 ? void 0 : _a.presetValues) && ((_b = props.context) === null || _b === void 0 ? void 0 : _b.enablePresetValues)) {
+        props.context.presetValues = [{
                 label: 'User ID',
                 value: { name: '{{{user.id}}}', label: 'UserId', sublabel: 'Currently logged in user' },
-            },
-        ], isOptionEqualToValue: (option, value) => {
-            return option === value;
-        }, getOptionLabel: (option) => {
-            var _a;
-            if (option === '{{{user.id}}}')
-                return 'User ID';
-            return (_a = option.label) !== null && _a !== void 0 ? _a : option;
-        }, disabled: ['null', 'notNull'].includes(props.operator), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value.includes('{{{') && value.includes('}}}'), onChange: (event) => {
-                handleOnChange(event.target.value);
-            } }))), renderOption: (props, option) => {
-            return (React.createElement(MenuItem, Object.assign({}, props, { sx: { padding: '0px 8px' } }),
-                React.createElement(Box, { padding: 0, margin: 0 },
-                    React.createElement(Typography, { fontSize: '14px', fontWeight: 500 }, option.label),
-                    option.value.sublabel && (React.createElement(Typography, { fontSize: '14px', fontWeight: 500, color: 'rgba(145, 158, 171, 1)' }, option.value.sublabel)))));
-        }, componentsProps: { popper: { style: { minWidth: '200px', width: 'fit-content' } } }, sx: { width: '33%' } }));
-    return determineValueEditor(valueEditor, props);
-};
-export const customValueEditor = (props) => {
-    const { value, handleOnChange, operator } = props;
-    let valueEditor = (React.createElement(TextField, { value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
-            handleOnChange(e.target.value);
-        }, placeholder: "Value", size: "small", sx: { width: '33%' } }));
-    return determineValueEditor(valueEditor, props);
-};
-const dynamicContentInputEditor = (props) => {
-    var _a, _b, _c, _d;
-    const { operator, value, handleOnChange } = props;
-    const DynamicContentInput = (_a = props.context) === null || _a === void 0 ? void 0 : _a.dynamicContentInput.component;
-    let valueEditor;
-    if (DynamicContentInput) {
-        valueEditor = (React.createElement(DynamicContentInput, { values: ['null', 'notNull'].includes(operator) ? '' : value, setValues: (e) => {
-                handleOnChange(e !== null && e !== void 0 ? e : '');
-            }, disabled: ['null', 'notNull'].includes(operator), size: 'small', previousSteps: (_c = (_b = props.context) === null || _b === void 0 ? void 0 : _b.dynamicContentInput.previousSteps) !== null && _c !== void 0 ? _c : [], trigger: (_d = props.context) === null || _d === void 0 ? void 0 : _d.dynamicContentInput.trigger, isSingleValue: true, width: '33%', useStringInterpolation: true }));
-    }
-    return determineValueEditor(valueEditor, props);
-};
-const determineValueEditor = (baseValueEditor, props) => {
-    var _a, _b, _c, _d;
-    const { handleOnChange, value, values, type, operator, inputType } = props;
-    const disabled = ['null', 'notNull'].includes(operator);
-    let valueEditor = baseValueEditor;
-    switch (inputType) {
-        case 'date':
-            valueEditor = (React.createElement(LocalizationProvider, null,
-                React.createElement(DatePicker, { disabled: disabled, value: disabled ? null : value, onChange: (value) => {
-                        handleOnChange(value);
-                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: "Value", size: "small", sx: { width: '33%' } }))) })));
-            break;
-        case 'integer':
-            {
-                const DynamicContentInput = (_b = (_a = props.context) === null || _a === void 0 ? void 0 : _a.dynamicContentInput) === null || _b === void 0 ? void 0 : _b.component;
-                if (DynamicContentInput) {
-                    if ((operator === 'in' || operator === 'notIn') && type === 'select' && values) {
-                        valueEditor = (React.createElement(Autocomplete, { multiple: true, options: values || [], getOptionLabel: (option) => (option.label ? option.label : ''), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
-                                const uniqueSelections = Array.from(new Set(newValue.map((item) => item.label))).map((label) => {
-                                    return newValue.find((item) => item.label === label);
-                                });
-                                handleOnChange(uniqueSelections.length ? uniqueSelections : '');
-                            }, isOptionEqualToValue: (option, value) => {
-                                return option === value;
-                            }, renderInput: (params) => (React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" }))), sx: { width: '33%' } }));
-                    }
-                    else if (type === 'select' && values) {
-                        valueEditor = (React.createElement(Autocomplete, { freeSolo: true, options: values, multiple: ['in', 'notIn'].includes(operator), value: disabled ? '' : value, onChange: (event, newValue) => {
-                                handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.label);
-                            }, disabled: disabled, isOptionEqualToValue: (option, value) => {
-                                return option === value;
-                            }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value === '{{user.id}}', onChange: (event) => {
-                                    handleOnChange(event.target.value);
-                                } }))), sx: { width: '33%' }, disableClearable: true }));
-                    }
-                }
-                else {
-                    valueEditor = (React.createElement(TextField, { value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
-                            handleOnChange(isNaN(parseInt(e.target.value)) ? '' : parseInt(e.target.value));
-                        }, type: "number", placeholder: "Value", size: "small", sx: { width: '33%' } }));
-                }
-            }
-            break;
-        case 'number':
-            {
-                const DynamicContentInput = (_d = (_c = props.context) === null || _c === void 0 ? void 0 : _c.dynamicContentInput) === null || _d === void 0 ? void 0 : _d.component;
-                if (DynamicContentInput) {
-                    if ((operator === 'in' || operator === 'notIn') && type === 'select' && values) {
-                        valueEditor = (React.createElement(Autocomplete, { multiple: true, options: values || [], getOptionLabel: (option) => (option.label ? option.label : ''), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
-                                const uniqueSelections = Array.from(new Set(newValue.map((item) => item.label))).map((label) => {
-                                    return newValue.find((item) => item.label === label);
-                                });
-                                handleOnChange(uniqueSelections.length ? uniqueSelections : '');
-                            }, isOptionEqualToValue: (option, value) => {
-                                return option === value;
-                            }, renderInput: (params) => (React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" }))), sx: { width: '33%' } }));
-                    }
-                    else if (type === 'select' && values) {
-                        valueEditor = (React.createElement(Autocomplete, { freeSolo: true, options: values, multiple: ['in', 'notIn'].includes(operator), value: disabled ? '' : value, onChange: (event, newValue) => {
-                                handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.label);
-                            }, disabled: disabled, isOptionEqualToValue: (option, value) => {
-                                return option === value;
-                            }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value === '{{user.id}}', onChange: (event) => {
-                                    handleOnChange(event.target.value);
-                                } }))), sx: { width: '33%' }, disableClearable: true }));
-                    }
-                }
-                else {
-                    valueEditor = (React.createElement(TextField, { value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
-                            var _a;
-                            handleOnChange((_a = e.target.value) !== null && _a !== void 0 ? _a : '');
-                        }, InputProps: { inputComponent: NumericFormat }, placeholder: "Value", size: "small", sx: { width: '33%' } }));
-                }
-            }
-            break;
-        case 'array':
-            valueEditor = (React.createElement(Autocomplete, { multiple: true, options: values || [], getOptionLabel: (option) => (option.label ? option.label : ''), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
-                    const uniqueSelections = Array.from(new Set(newValue.map((item) => item.label))).map((label) => {
-                        return newValue.find((item) => item.label === label);
-                    });
-                    handleOnChange(uniqueSelections.length ? uniqueSelections : '');
-                }, isOptionEqualToValue: (option, value) => {
-                    return option === value;
-                }, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), sx: { width: '33%' } }));
-            break;
-        case 'string':
-            if ((operator === 'in' || operator === 'notIn') && type === 'select' && values) {
-                valueEditor = (React.createElement(Autocomplete, { multiple: true, options: values || [], getOptionLabel: (option) => (option.label ? option.label : ''), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
-                        const uniqueSelections = Array.from(new Set(newValue.map((item) => item.label))).map((label) => {
-                            return newValue.find((item) => item.label === label);
-                        });
-                        handleOnChange(uniqueSelections.length ? uniqueSelections : '');
-                    }, isOptionEqualToValue: (option, value) => {
-                        return option === value;
-                    }, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), sx: { width: '33%' } }));
-            }
-            else if (type === 'select' && values) {
-                valueEditor = (React.createElement(Autocomplete, { freeSolo: true, options: values, multiple: ['in', 'notIn'].includes(operator), value: disabled ? '' : value, onChange: (event, newValue) => {
-                        handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.label);
-                    }, disabled: disabled, isOptionEqualToValue: (option, value) => {
-                        return option === value;
-                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value === '{{user.id}}', onChange: (event) => {
-                            handleOnChange(event.target.value);
-                        } }))), sx: { width: '33%' }, disableClearable: true }));
-            }
-            break;
+            }];
     }
-    return valueEditor;
+    return ValueEditor(props);
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, } = props;
+    const { properties, criteria, setCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, hideBorder, } = props;
     const [query, setQuery] = useState(undefined);
     useEffect(() => {
         if (criteria) {
@@ -330,17 +189,29 @@ const CriteriaBuilder = (props) => {
     if (query) {
         return (React.createElement(Box, { sx: {
                 border: '2px solid #ddd',
+                borderStyle: hideBorder ? 'hidden' : 'solid',
                 borderRadius: '10px',
                 '.container': {
                     background: '#fff',
                     borderColor: '#ddd',
                     borderRadius: '8px',
                 },
+                '.queryBuilder-branches .ruleGroup-body': {
+                    marginLeft: hideBorder ? '0px' : 'calc(2 * 0.5rem)',
+                },
                 '.queryBuilder-branches': { color: '#ddd' },
-                '.queryBuilder-branches .betweenRules::before': { borderColor: '#ddd' },
-                '.ruleGroup': { borderColor: '#ddd' },
+                '.queryBuilder-branches .betweenRules::before': {
+                    borderColor: '#ddd',
+                    borderStyle: hideBorder ? 'hidden' : 'solid',
+                },
+                '.ruleGroup': {
+                    borderColor: '#ddd',
+                    borderStyle: hideBorder ? 'hidden' : 'solid',
+                },
+                '.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',
                 },
             } },
             React.createElement(QueryBuilderMaterial, null,
@@ -355,12 +226,8 @@ const CriteriaBuilder = (props) => {
                         ruleGroup: CustomRuleGroup,
                         removeGroupAction: customDelete,
                         removeRuleAction: customDelete,
-                        valueEditor: enablePresetValues
-                            ? customValueEditorWithPresets
-                            : dynamicContentInput
-                                ? dynamicContentInputEditor
-                                : customValueEditor,
-                    }, context: { dynamicContentInput: dynamicContentInput, presetValues }, controlClassnames: {
+                        valueEditor: valueEditor
+                    }, context: { dynamicContentInput, presetValues, enablePresetValues }, controlClassnames: {
                         queryBuilder: 'queryBuilder-branches',
                         ruleGroup: 'container',
                     }, operators: operators

package/dist/published/components/custom/CriteriaBuilder/ValueEditor.d.ts

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

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

@@ -0,0 +1,125 @@
+import React, { useRef, useState } from 'react';
+import { Autocomplete, Chip, DatePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
+import { NumericFormat } from '../FormField/InputFieldComponent';
+import { Box, darken, lighten, styled } from '@mui/material';
+import { ClearRounded } from '@mui/icons-material';
+import { TimePicker } from '@mui/x-date-pickers';
+const GroupHeader = styled('div')(({ theme }) => ({
+    position: 'sticky',
+    top: '-8px',
+    padding: '10px',
+    color: theme.palette.primary.main,
+    fontWeight: 600,
+    fontSize: '14px',
+    backgroundColor: theme.palette.mode === 'light'
+        ? lighten(theme.palette.primary.light, 0.85)
+        : darken(theme.palette.primary.main, 0.8),
+}));
+const GroupItems = styled('ul')({ padding: 0 });
+const ValueEditor = (props) => {
+    var _a, _b, _c, _d;
+    const { handleOnChange, value, values, operator, inputType, context } = props;
+    let inputRef = useRef(null);
+    const [openPresetValues, setOpenPresetValues] = useState(false);
+    const disabled = ['null', 'notNull'].includes(operator);
+    const presetValues = (_a = context.presetValues) !== null && _a !== void 0 ? _a : [];
+    const isPresetValue = (value) => (value === null || value === void 0 ? void 0 : value.includes('{{{')) && (value === null || value === void 0 ? void 0 : value.includes('}}}'));
+    const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value);
+    const presetDisplayValue = (_c = (_b = presetValues === null || presetValues === void 0 ? void 0 : presetValues.find((option) => option.value.name === value)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : '';
+    const onClick = (e) => {
+        var _a;
+        // if property is date and date picker is open, don't open preset values
+        if (inputType && ['date', 'time'].includes(inputType) && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) !== 'INPUT') {
+            return;
+        }
+        setOpenPresetValues(true);
+    };
+    const onClose = () => {
+        setOpenPresetValues(false);
+    };
+    const clearValue = () => {
+        handleOnChange('');
+    };
+    const setPresetValue = (value) => {
+        handleOnChange(value);
+        onClose();
+    };
+    const groupRenderGroup = (params) => (React.createElement("li", { key: params.key },
+        React.createElement(GroupHeader, null, params.group),
+        React.createElement(GroupItems, null, params.children)));
+    const getEditor = () => {
+        var _a, _b;
+        if (isPresetValueSelected) {
+            return;
+        }
+        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, Object.assign({}, params, { onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } }))) })));
+        }
+        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, Object.assign({}, params, { onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } })) })));
+        }
+        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) => (option.label ? option.label : option), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
+                        const uniqueSelections = newValue.map((item) => { var _a; return (_a = item.value) !== null && _a !== void 0 ? _a : Number(item); });
+                        handleOnChange(uniqueSelections.length ? uniqueSelections : '');
+                    }, isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), groupBy: (option) => { var _a; return (isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? 'Preset Values' : 'Options'); }, renderGroup: groupRenderGroup, sx: { width: '33%' } }));
+            }
+            else {
+                return (React.createElement(TextField, Object.assign({ inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
+                        var _a;
+                        if (inputType === 'number') {
+                            handleOnChange((_a = e.target.value) !== null && _a !== void 0 ? _a : '');
+                        }
+                        else {
+                            handleOnChange(isNaN(parseInt(e.target.value)) ? '' : parseInt(e.target.value));
+                        }
+                    } }, (inputType === 'number'
+                    ? { InputProps: { inputComponent: NumericFormat } }
+                    : { type: 'number' }), { placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%' } })));
+            }
+        }
+        else {
+            const isMultiple = inputType === 'array' || ['in', 'notIn'].includes(operator);
+            const options = [
+                ...((_a = values === null || values === void 0 ? void 0 : values.sort((a, b) => a.label.localeCompare(b.name))) !== null && _a !== void 0 ? _a : []),
+                ...((_b = presetValues === null || presetValues === void 0 ? void 0 : presetValues.sort((a, b) => a.label.localeCompare(b.label))) !== null && _b !== void 0 ? _b : [])
+            ];
+            if (isMultiple || (values === null || values === void 0 ? void 0 : values.length)) {
+                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (disabled ? [] : value) : value, disabled: disabled, onChange: (event, newValue) => {
+                        var _a, _b, _c;
+                        let value;
+                        if (isMultiple) {
+                            value = (_a = Array.from(new Set(newValue.map((item) => item.label))).map((label) => newValue.find((item) => item.label === label))) !== null && _a !== void 0 ? _a : [];
+                        }
+                        else {
+                            value = (_c = (_b = newValue === null || newValue === void 0 ? void 0 : newValue.value) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : '';
+                        }
+                        handleOnChange(value);
+                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({ inputRef: inputRef, label: params.label }, params, { size: "small" }))), groupBy: (option) => { var _a; return (isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? 'Preset Values' : 'Options'); }, renderGroup: groupRenderGroup, sortBy: 'NONE', sx: { width: '33%' } }));
+            }
+            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%' } }));
+            }
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        isPresetValueSelected ? (React.createElement(Chip, { label: presetDisplayValue, sx: {
+                borderRadius: '8px',
+                fontSize: '14px',
+                width: '33%',
+                height: '40px',
+                padding: '0 5px',
+                justifyContent: 'space-between',
+            }, deleteIcon: React.createElement(ClearRounded, { fontSize: "small" }), onDelete: clearValue })) : (getEditor()),
+        !!(presetValues === null || presetValues === void 0 ? void 0 : presetValues.length) && (React.createElement(Menu, { open: openPresetValues, anchorEl: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, PaperProps: { sx: { borderRadius: '8px', width: (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.offsetWidth } }, onClose: onClose }, presetValues === null || presetValues === void 0 ? void 0 : presetValues.map((option) => (React.createElement(MenuItem, Object.assign({}, 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))))))))));
+};
+export default ValueEditor;

package/dist/published/components/custom/CriteriaBuilder/types.d.ts

@@ -0,0 +1,25 @@
+import { BaseSelectorProps } from 'react-querybuilder';
+import { AutocompleteOption } from '../../core';
+export declare type ObjectProperty = {
+    id: string;
+    name: string;
+    type: string;
+    enum?: string[];
+    required?: boolean;
+    searchable?: boolean;
+    objectId?: string;
+    formula?: string;
+};
+export declare type CustomSelectorProps = BaseSelectorProps & {
+    options: AutocompleteOption[] | any[];
+    fieldData?: Record<string, any>;
+};
+export declare type Operator = '=' | '!=' | '<' | '>' | '<=' | '>=' | 'contains' | 'beginsWith' | 'endsWith' | 'doesNotContain' | 'doesNotBeginWith' | 'doesNotEndWith' | 'null' | 'notNull' | 'in' | 'notIn' | 'between' | 'notBetween';
+export declare type PresetValue = {
+    label: string;
+    value: {
+        name: string;
+        label: string;
+        sublabel?: string;
+    };
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/published/stories/CriteriaBuilder.stories.d.ts

@@ -1,66 +1,6 @@
+/// <reference types="react" />
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-declare const _default: ComponentMeta<(props: {
-    properties: import("../components/custom/types").ObjectProperty[];
-    setCriteria: Function;
-    criteria?: Record<string, any> | undefined;
-    enablePresetValues?: boolean | undefined;
-    presetValues?: {
-        label: string;
-        value: {
-            name: string;
-            label: string;
-            sublabel?: string | undefined;
-        };
-    }[] | undefined;
-    dynamicContentInput?: {
-        component: React.ElementType<any>;
-        previousSteps: unknown[];
-        trigger?: Record<string, unknown> | undefined;
-    } | undefined;
-    operators?: ("endsWith" | "in" | "=" | "!=" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
-    disabled?: boolean | undefined;
-}) => JSX.Element>;
+declare const _default: ComponentMeta<(props: import("../components/custom/CriteriaBuilder/CriteriaBuilder").CriteriaInputProps) => JSX.Element>;
 export default _default;
-export declare const CriteriaBuilder: ComponentStory<(props: {
-    properties: import("../components/custom/types").ObjectProperty[];
-    setCriteria: Function;
-    criteria?: Record<string, any> | undefined;
-    enablePresetValues?: boolean | undefined;
-    presetValues?: {
-        label: string;
-        value: {
-            name: string;
-            label: string;
-            sublabel?: string | undefined;
-        };
-    }[] | undefined;
-    dynamicContentInput?: {
-        component: React.ElementType<any>;
-        previousSteps: unknown[];
-        trigger?: Record<string, unknown> | undefined;
-    } | undefined;
-    operators?: ("endsWith" | "in" | "=" | "!=" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
-    disabled?: boolean | undefined;
-}) => JSX.Element>;
-export declare const CriteriaBuilderPresetValues: ComponentStory<(props: {
-    properties: import("../components/custom/types").ObjectProperty[];
-    setCriteria: Function;
-    criteria?: Record<string, any> | undefined;
-    enablePresetValues?: boolean | undefined;
-    presetValues?: {
-        label: string;
-        value: {
-            name: string;
-            label: string;
-            sublabel?: string | undefined;
-        };
-    }[] | undefined;
-    dynamicContentInput?: {
-        component: React.ElementType<any>;
-        previousSteps: unknown[];
-        trigger?: Record<string, unknown> | undefined;
-    } | undefined;
-    operators?: ("endsWith" | "in" | "=" | "!=" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
-    disabled?: boolean | undefined;
-}) => JSX.Element>;
+export declare const CriteriaBuilder: ComponentStory<(props: import("../components/custom/CriteriaBuilder/CriteriaBuilder").CriteriaInputProps) => JSX.Element>;
+export declare const CriteriaBuilderPresetValues: ComponentStory<(props: import("../components/custom/CriteriaBuilder/CriteriaBuilder").CriteriaInputProps) => JSX.Element>;

package/package.json

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

package/types.ts

@@ -1 +1 @@
-export * from './src/components/custom/types';
+export * from './dist/published/components/custom/types';