@evoke-platform/ui-components 1.1.0-testing.0 → 1.1.0-testing.10

package/dist/published/components/core/DateTimePicker/DateTimePicker.js

@@ -24,6 +24,12 @@ const DateTimePicker = (props) => {
         handleChange(newValue, keyboardInputValue);
     };
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIDateTimePicker, { value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, { ...params }), ...rest })));
+        React.createElement(MUIDateTimePicker, { value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, { ...params }), PaperProps: {
+                sx: {
+                    '&.MuiPickersPopper-paper': {
+                        borderRadius: '12px',
+                    },
+                },
+            }, ...rest })));
 };
 export default DateTimePicker;

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

@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+/// <reference types="react" />
 import 'react-querybuilder/dist/query-builder.css';
 import { EvokeObject } from '../../../types';
 import { ObjectProperty, Operator, PresetValue, TreeViewObject } from './types';
@@ -10,10 +10,9 @@ export type CriteriaInputProps = {
     originalCriteria?: Record<string, unknown>;
     enablePresetValues?: boolean;
     presetValues?: PresetValue[];
-    dynamicContentInput?: {
-        component: ElementType;
-        previousSteps: unknown[];
-        trigger?: Record<string, unknown>;
+    customValueEditor?: {
+        component: (props: ValueEditorProps) => JSX.Element;
+        props?: Record<string, unknown>;
     };
     operators?: Operator[];
     disabledCriteria?: {

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

@@ -3,12 +3,13 @@ import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isArray, isEmpty, startCase } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
-import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, defaultRuleProcessorMongoDB, formatQuery, useRuleGroup, } from 'react-querybuilder';
+import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, add, defaultRuleProcessorMongoDB, formatQuery, useRuleGroup, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import escape from 'string-escape-regex';
 import { TrashCan } from '../../../icons/custom';
-import { Autocomplete, Button, IconButton, TextField } from '../../core';
+import { Autocomplete, Button, IconButton } from '../../core';
 import { Box } from '../../layout';
+import { OverflowTextField } from '../OverflowTextField';
 import { difference } from '../util';
 import PropertyTree from './PropertyTree';
 import { parseMongoDB, traversePropertyPath } from './utils';
@@ -28,6 +29,13 @@ const ALL_OPERATORS = [
     { name: 'in', label: 'In' },
     { name: 'notIn', label: 'Not in' },
 ];
+const styles = {
+    buttons: {
+        padding: '6px 16px',
+        fontSize: '0.875rem',
+        boxShadow: 'none',
+    },
+};
 const CustomRuleGroup = (props) => {
     const rg = { ...props, ...useRuleGroup(props) };
     const [addRule, addGroup, cloneGroup, toggleLockGroup, removeGroup] = [
@@ -73,11 +81,8 @@ const customButton = (props) => {
         case 'Add rule':
             buttonLabel = 'Add Condition';
             break;
-        case 'Remove group':
-            buttonLabel = 'Clear All';
-            break;
     }
-    return (React.createElement(React.Fragment, null, (path.length < nestedConditionLimit || title === 'Add rule') && (React.createElement(Button, { onClick: handleOnClick, startIcon: React.createElement(AddRounded, null), sx: {
+    return (React.createElement(React.Fragment, null, !!path.length && (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',
@@ -193,7 +198,7 @@ const customSelector = (props) => {
     };
     return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
-                return opts.find((o) => option === o.name)?.label || '';
+                return opts.find((o) => option === o.name)?.label || option;
             }
             return option.label;
         }, isOptionEqualToValue: (option, value) => {
@@ -207,7 +212,10 @@ 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, placeholder: placeholder, size: "small" }), sx: { width: width, background: '#fff' }, disableClearable: true, readOnly: readOnly }))));
+        }, renderInput: (params) => (React.createElement(OverflowTextField, { value: opts.find((o) => value === o.name)?.label || '', ...params, placeholder: placeholder, size: "small", inputProps: {
+                ...params.inputProps,
+                'aria-label': placeholder,
+            } })), sx: { width: width, background: readOnly ? '#f4f6f8' : '#fff' }, disableClearable: true, readOnly: readOnly }))));
 };
 const customCombinator = (props) => {
     const { value, handleOnChange, context, level, path } = props;
@@ -272,7 +280,7 @@ export const valueEditor = (props) => {
     return ValueEditor(props);
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, disabledCriteria, hideBorder, presetGroupLabel, treeViewOpts, disableRegexEscapeChars, } = 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(() => {
@@ -282,33 +290,41 @@ const CriteriaBuilder = (props) => {
             !isEmpty(treeViewOpts) && updatePropertyTreeMap(updatedQuery);
             setQuery({
                 ...updatedQuery,
-                rules: processRules(updatedQuery.rules),
+                rules: processRules(updatedQuery.rules, true),
             });
         }
         else {
             setQuery({ combinator: 'and', rules: [] });
         }
     }, [originalCriteria]);
-    function processRules(rules) {
+    const processRules = (rules, isSavedValue) => {
         return rules.map((rule) => {
             if ('rules' in rule) {
                 return {
                     ...rule,
-                    rules: processRules(rule.rules),
+                    rules: processRules(rule.rules, isSavedValue),
                 };
             }
             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) {
+                    adjustedValue = null;
+                }
                 return {
                     ...rule,
-                    value: propertyType === 'array' ||
-                        (propertyType === 'string' && (rule.operator === 'in' || rule.operator === 'notIn'))
-                        ? rule.value?.split(',')
-                        : rule.value,
+                    operator: propertyType === 'array' && rule.operator === '=' ? 'in' : rule.operator,
+                    value: adjustedValue,
                 };
             }
         });
-    }
+    };
     // 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) => {
@@ -334,9 +350,31 @@ const CriteriaBuilder = (props) => {
             setPropertyTreeMap(tempPropertyMap);
         });
     };
+    const handleClearAll = () => {
+        handleQueryChange({ combinator: 'and', rules: [] });
+    };
+    const handleAddRule = () => {
+        if (query) {
+            const newQuery = add(query, { field: '', operator: '', value: '' }, []);
+            setQuery(newQuery);
+        }
+    };
+    const handleAddGroup = () => {
+        if (query) {
+            const newQuery = add(query, {
+                combinator: 'and',
+                rules: [{ field: '', operator: '', value: '' }],
+            }, []);
+            setQuery(newQuery);
+        }
+    };
     const handleQueryChange = (q) => {
-        setQuery(q);
-        const newCriteria = JSON.parse(formatQuery(q, {
+        const processedQuery = {
+            ...q,
+            rules: processRules(q.rules, false),
+        };
+        setQuery(processedQuery);
+        const newCriteria = JSON.parse(formatQuery(processedQuery, {
             format: 'mongodb',
             ruleProcessor: (rule, options) => {
                 let newRule = rule;
@@ -352,16 +390,12 @@ const CriteriaBuilder = (props) => {
                 return defaultRuleProcessorMongoDB(newRule, options);
             },
         }));
-        //when q has no rules, it formats and parses to { $and: [{ $expr: true }] }
-        const allRulesDeleted = isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }));
-        // since the Add Condition / Add Group buttons add rules with all the fields empty,
-        // we need to check if the first rule was added because q will still parse to { $and: [{ $expr: true }] }
-        const firstRuleAdded = isEmpty(criteria) && q.rules.length > 0;
-        if (allRulesDeleted && !firstRuleAdded) {
-            setCriteria(undefined);
+        if (!isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }))) {
+            setCriteria(newCriteria);
         }
         else {
-            setCriteria(newCriteria);
+            if (q.rules.length === 0)
+                setCriteria(undefined);
         }
     };
     const fields = useMemo(() => {
@@ -424,7 +458,9 @@ const CriteriaBuilder = (props) => {
                 '.ruleGroup .ruleGroup': { borderStyle: 'solid' },
             } },
             React.createElement(QueryBuilderMaterial, null,
-                React.createElement(QueryBuilder, { query: !criteria && !originalCriteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
+                React.createElement(QueryBuilder, { query: !criteria && !originalCriteria && query.rules.length === 0
+                        ? { combinator: 'and', rules: [] }
+                        : query, fields: fields, onQueryChange: (q) => {
                         handleQueryChange(q);
                     }, onAddRule: (rule) => {
                         // overrides new rule and sets up an empty rule with all three fields empty
@@ -461,9 +497,9 @@ const CriteriaBuilder = (props) => {
                         ruleGroup: CustomRuleGroup,
                         removeGroupAction: customDelete,
                         removeRuleAction: customDelete,
-                        valueEditor: valueEditor,
+                        valueEditor: customValueEditor ? customValueEditor.component : valueEditor,
                     }, context: {
-                        dynamicContentInput,
+                        ...(customValueEditor?.props ?? {}),
                         presetValues,
                         enablePresetValues,
                         presetGroupLabel,
@@ -483,7 +519,43 @@ const CriteriaBuilder = (props) => {
                         ruleGroup: 'container',
                     }, operators: operators
                         ? ALL_OPERATORS.filter((o) => operators.includes(o.name))
-                        : ALL_OPERATORS }))));
+                        : ALL_OPERATORS })),
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '10px',
+                    maxWidth: '71vw',
+                } },
+                React.createElement(Box, null,
+                    React.createElement(Button, { sx: {
+                            backgroundColor: 'rgba(0, 117, 167, 0.08)',
+                            color: '#0075A7',
+                            marginLeft: '10px',
+                            '&:hover': {
+                                backgroundColor: 'rgba(0, 117, 167, 0.08)',
+                            },
+                            ...styles.buttons,
+                        }, startIcon: React.createElement(AddRounded, null), onClick: handleAddRule }, "Add Condition"),
+                    React.createElement(Button, { sx: {
+                            backgroundColor: '#f6f7f8',
+                            color: '#000',
+                            marginLeft: '8px',
+                            '&:hover': {
+                                backgroundColor: '#f6f7f8',
+                            },
+                            ...styles.buttons,
+                        }, startIcon: React.createElement(AddRounded, null), onClick: handleAddGroup, title: "Add a rule at the bottom of the group" }, "Add Condition Group")),
+                React.createElement(Button, { variant: 'text', sx: {
+                        justifyContent: 'flex-end',
+                        color: '#000',
+                        fontWeight: 500,
+                        paddingLeft: '0px',
+                        '&:hover': {
+                            backgroundColor: 'transparent',
+                        },
+                        ...styles.buttons,
+                    }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear all"))));
     }
     return React.createElement(React.Fragment, null);
 };

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

@@ -1,6 +1,7 @@
 import { ChevronRight, ExpandMore } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
-import { Autocomplete, MenuItem, TextField, Tooltip, TreeView } from '../../core';
+import { Autocomplete, MenuItem, TreeView } from '../../core';
+import { OverflowTextField } from '../OverflowTextField';
 import PropertyTreeItem from './PropertyTreeItem';
 import { fetchDisplayNamePath, findPropertyById, setIdPaths, truncateNamePath, updateTreeNode } from './utils';
 const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value }) => {
@@ -126,15 +127,8 @@ const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value
                 : objectPropertyNamePathMap[option.value] ?? '';
             return truncateNamePath(namePath, NAME_PATH_LIMIT);
         }, renderInput: (params) => {
-            let isTruncated = false;
-            const fullDisplayValue = value && objectPropertyNamePathMap[value];
-            let displayValue = fullDisplayValue;
-            if (!!displayValue && displayValue.length > NAME_PATH_LIMIT) {
-                isTruncated = true;
-                displayValue = truncateNamePath(displayValue, NAME_PATH_LIMIT);
-            }
-            return (React.createElement(Tooltip, { title: isTruncated ? fullDisplayValue : '', arrow: true },
-                React.createElement(TextField, { ...params, "aria-label": fullDisplayValue, value: displayValue, size: "small", placeholder: "Select a property", variant: "outlined" })));
+            const fullDisplayName = value && objectPropertyNamePathMap[value];
+            return (React.createElement(OverflowTextField, { ...params, "aria-label": fullDisplayName, value: fullDisplayName, size: "small", placeholder: "Select a property", variant: "outlined" }));
         }, isOptionEqualToValue: (option, val) => {
             if (typeof val === 'string') {
                 return option.value === val;

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

@@ -1,9 +1,9 @@
 import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/core';
 import { ClearRounded } from '@mui/icons-material';
 import { Box, darken, lighten, styled } from '@mui/material';
-import { DateTimePicker, TimePicker } from '@mui/x-date-pickers';
-import React, { useRef, useState } from 'react';
-import { Autocomplete, Chip, DatePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
+import { TimePicker } from '@mui/x-date-pickers';
+import React, { useEffect, useRef, useState } from 'react';
+import { Autocomplete, Chip, DatePicker, DateTimePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
 const GroupHeader = styled('div')(({ theme }) => ({
     position: 'sticky',
@@ -18,7 +18,7 @@ const GroupHeader = styled('div')(({ theme }) => ({
 }));
 const GroupItems = styled('ul')({ padding: 0 });
 const ValueEditor = (props) => {
-    const { handleOnChange, value, operator, context, level, rule } = props;
+    const { handleOnChange, value, operator, context, level, rule, fieldData } = props;
     let inputType = props.inputType;
     let values = props.values;
     const property = context.propertyTreeMap?.[rule.field];
@@ -47,6 +47,20 @@ const ValueEditor = (props) => {
         readOnly =
             Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
     }
+    const styles = {
+        input: {
+            width: '33%',
+            background: readOnly ? '#f4f6f8' : '#fff',
+        },
+    };
+    useEffect(() => {
+        if (!['in', 'notIn'].includes(operator) && Array.isArray(value)) {
+            handleOnChange('');
+        }
+        else if (['in', 'notIn'].includes(operator) && !Array.isArray(value)) {
+            handleOnChange([]);
+        }
+    }, [operator]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onClick = (e) => {
         // if property is date and date picker is open, don't open preset values
@@ -85,11 +99,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%', background: '#fff' } })), 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: styles.input })), 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%', background: '#fff' } })), 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: styles.input })), readOnly: readOnly })));
         }
         else if (inputType === 'date-time') {
             const dateTimeValue = parseISOStringToLocalDateTime(value);
@@ -110,7 +124,7 @@ const ValueEditor = (props) => {
                         handleOnChange(new Date(localDateTime.toString()).toISOString());
                     }, onClose: onClose, PopperProps: {
                         anchorEl,
-                    }, renderInput: (params) => (React.createElement(Box, { sx: { width: '33%', background: '#fff' }, ref: setAnchorEl },
+                    }, renderInput: (params) => (React.createElement(Box, { sx: styles.input, ref: setAnchorEl },
                         React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef }))), readOnly: readOnly })));
         }
         else if (inputType === 'number' || inputType === 'integer') {
@@ -125,7 +139,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", sx: { backgroundColor: '#fff' } })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%', background: '#fff' }, 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: styles.input, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -137,7 +151,7 @@ const ValueEditor = (props) => {
                         }
                     }, ...(inputType === 'number'
                         ? { InputProps: { inputComponent: NumericFormat } }
-                        : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
+                        : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: styles.input, readOnly: readOnly }));
             }
         }
         else {
@@ -147,7 +161,7 @@ const ValueEditor = (props) => {
                 ...(presetValues?.sort((a, b) => a.label.localeCompare(b.label)) ?? []),
             ];
             if (isMultiple || values?.length) {
-                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : value, 
+                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && 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) => {
                         let value;
@@ -161,14 +175,25 @@ const ValueEditor = (props) => {
                         }
                         handleOnChange(value);
                     }, onBlur: () => {
-                        if (inputValue && (operator === 'in' || operator === 'notIn')) {
+                        if (inputValue &&
+                            (options.some((option) => option.name === inputValue) || !options.length) &&
+                            (operator === 'in' || operator === 'notIn')) {
+                            const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
+                            handleOnChange(Array.from(new Set(newValues)));
+                            setInputValue('');
+                        }
+                    }, onKeyDown: (event) => {
+                        if (event.key === 'Enter' &&
+                            inputValue &&
+                            (options.some((option) => option.name === inputValue) || !options.length) &&
+                            (operator === 'in' || operator === 'notIn')) {
                             const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
                             handleOnChange(Array.from(new Set(newValues)));
                             setInputValue('');
                         }
                     }, onInputChange: (event, newInputValue) => {
                         setInputValue(newInputValue);
-                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small", sx: { backgroundColor: '#fff' } })), 
+                    }, 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') {
@@ -185,10 +210,10 @@ const ValueEditor = (props) => {
                         else {
                             return option?.label === value?.label;
                         }
-                    }, groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: { width: '33%' }, readOnly: readOnly }));
+                    }, groupBy: (option) => isPresetValue(option.value?.name) ? 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: { width: '33%', background: '#fff' }, 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: styles.input, readOnly: readOnly }));
             }
         }
     };

package/dist/published/components/custom/Form/Common/Form.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { ApiServices, Obj, ObjectInstance, UserAccount } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
+import React from 'react';
 import '../../../../styles/form-component.css';
 import { Document, ObjectPropertyInputProps } from '../types';
 type OnSaveResponse = {
@@ -34,6 +34,12 @@ export type FormProps = {
     queryAddresses?: unknown;
     fieldHeight?: 'small' | 'medium';
     richTextEditor?: typeof ReactComponent;
+    hideButtons?: boolean;
+    formRef?: React.MutableRefObject<FormRef | undefined>;
+};
+export type FormRef = {
+    submit: (submission: Record<string, unknown>, type: 'submit' | 'draft', setError: (error?: Record<string, unknown>) => void, setSubmitting?: (value: boolean) => void) => void;
+    data?: Record<string, unknown>;
 };
 export declare function Form(props: FormProps): JSX.Element;
 export default Form;