@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/View/Components/ColumnFilter/LayoutColumnFilter.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
 import { useAdaptable } from '../../AdaptableContext';
 import { ColumnFilterComponent as ColumnFilterComponent } from './ColumnFilter';
@@ -21,5 +21,5 @@ export const LayoutColumnFilter = (props) => {
         };
         props.onColumnFilterChange(newFilter);
     };
-    return (React.createElement(ColumnFilterComponent, { location: 'filterForm', columnId: props.columnFilter.ColumnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: props.columnFilter?.IsSuspended, onPredicateChange: handlePredicateChange, hideActionButtons: true }));
+    return (_jsx(ColumnFilterComponent, { location: 'filterForm', columnId: props.columnFilter.ColumnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: props.columnFilter?.IsSuspended, onPredicateChange: handlePredicateChange, hideActionButtons: true }));
 };

package/src/View/Components/ColumnFilter/columnFilterLocation.d.ts

@@ -0,0 +1,2 @@
+export type ColumnFilterLocation = 'columnMenu' | 'filterForm' | 'filtersToolPanel';
+export declare const isEmbeddedColumnFilterLocation: (location: ColumnFilterLocation) => boolean;

package/src/View/Components/ColumnFilter/columnFilterLocation.js

@@ -0,0 +1 @@
+export const isEmbeddedColumnFilterLocation = (location) => location === 'filterForm' || location === 'filtersToolPanel';

package/src/View/Components/ColumnFilter/components/ColumnFilterInput.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { CheckBox } from '../../../../components/CheckBox';
 import AdaptableInput from '../../AdaptableInput';
@@ -47,7 +48,7 @@ export const ColumnFilterInput = (props) => {
         }, debounceTime);
     }, [onClearProp, debounceTime]);
     if (type === 'boolean') {
-        return (React.createElement(CheckBox, { disabled: disabled, onFocus: onFocus, onBlur: onBlur, checked: value === 'checked'
+        return (_jsx(CheckBox, { disabled: disabled, onFocus: onFocus, onBlur: onBlur, checked: value === 'checked'
                 ? true
                 : value === 'unchecked'
                     ? false
@@ -71,13 +72,14 @@ export const ColumnFilterInput = (props) => {
         }
     };
     if (type === 'date' && !showDatePicker) {
-        return (React.createElement(AdaptableDateInlineInput, { "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: "twa:border-none twa:pr-0", onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
+        return (_jsx(AdaptableDateInlineInput, { "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: "twa:border-none twa:pr-0", onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
                 onChange(value);
                 setLiveValue(value);
             } }));
     }
     if (usePrimitiveInputs === false && (type === 'number' || type === 'text')) {
-        return (React.createElement(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
+        // we use the permitted values selector
+        return (_jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
                 if (value == undefined) {
                     onClear();
                     setLiveValue('');
@@ -89,19 +91,16 @@ export const ColumnFilterInput = (props) => {
                 }
             } }));
     }
-    return (React.createElement(AdaptableInput, { style: filterType === 'floating'
+    return (_jsx(AdaptableInput, { style: filterType === 'floating'
             ? {
-                width: '100%',
+                width: 'auto',
                 padding: 'var(--ab-base-space)',
-                borderRadius: 0,
                 border: 'none',
             }
-            : {
-                width: '100%',
-            }, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
+            : {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
         // autoFocus has to be FALSE because if the input receives focus in the init phase,
         // it may scroll the AG Grid header viewport into view and de-synchronize it (relative to the content viewport)
-        autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: "twa:flex-1", onChange: (e) => {
+        autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: 'twa:flex-1', onChange: (e) => {
             const prevValue = `${liveValue}`;
             const value = e.target.value;
             if (value) {

package/src/View/Components/ColumnFilter/components/ColumnFilterInputList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import debounce from '../../../../Utilities/utils/debounce';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
@@ -21,8 +22,7 @@ export const ColumnFilterInputList = (props) => {
         props.onPredicateChange(predicate);
     }, 300), [props.predicate, props.columnId]);
     if (['date[]', 'number[]', 'text[]'].includes(matchingInputs[0])) {
-        return (React.createElement(Panel, { bodyProps: { className: 'twa:p-0' }, className: "twa:w-full twa:rounded-sm twa:border-none twa:p-0" },
-            React.createElement(FloatingFilterValues, { inline: false, columnId: props.columnId, disabled: props.disabled, onClear: () => {
+        return (_jsx(Panel, { bodyProps: { className: 'twa:p-0' }, className: "twa:w-full twa:rounded-sm twa:border-none twa:p-0", children: _jsx(FloatingFilterValues, { inline: false, columnId: props.columnId, disabled: props.disabled, onClear: () => {
                     props.onPredicateChange({ operator: props.predicate.operator, args: [] });
                 }, onChange: (inputs) => {
                     props.onPredicateChange({
@@ -32,27 +32,25 @@ export const ColumnFilterInputList = (props) => {
                 }, value: props.predicate.args, 
                 // are not known ql operators for now
                 // should change when porting, it has knoladge about predicates
-                type: props.predicate.operator === 'In' ? 'In' : 'NotIn' })));
+                type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }) }));
     }
-    return (React.createElement(React.Fragment, null, (matchingInputs ?? []).map((input, index) => {
-        const value = props?.predicate?.args?.[index];
-        const operator = props.predicate?.operator;
-        const usePermittedValuesSelector = input === 'number' || operator === 'Is' || operator === 'IsNot';
-        return (React.createElement(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: !usePermittedValuesSelector, key: index, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
-                const args = [...props.predicate.args];
-                args.splice(index, 1);
-                const newPredicate = {
-                    operator: props.predicate.operator,
-                    args: args,
-                };
-                debouncedPredicateChange(newPredicate);
-            }, onChange: (value) => {
-                const newPredicate = {
-                    operator: props.predicate.operator,
-                    args: [...props.predicate.args],
-                };
-                newPredicate.args[index] = value;
-                debouncedPredicateChange(newPredicate);
-            } }));
-    })));
+    return (_jsx(_Fragment, { children: (matchingInputs ?? []).map((input, index) => {
+            const value = props?.predicate?.args?.[index];
+            return (_jsx(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: false, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
+                    const args = [...props.predicate.args];
+                    args.splice(index, 1);
+                    const newPredicate = {
+                        operator: props.predicate.operator,
+                        args: args,
+                    };
+                    debouncedPredicateChange(newPredicate);
+                }, onChange: (value) => {
+                    const newPredicate = {
+                        operator: props.predicate.operator,
+                        args: [...props.predicate.args],
+                    };
+                    newPredicate.args[index] = value;
+                    debouncedPredicateChange(newPredicate);
+                } }, index));
+        }) }));
 };

package/src/View/Components/ColumnFilter/components/ColumnFilterMenu.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Panel from '../../../../components/Panel';
 import SimpleButton from '../../../../components/SimpleButton';
@@ -5,9 +6,7 @@ import { Box, Flex } from '../../../../components/Flex';
 import clsx from 'clsx';
 import { useEffect, useLayoutEffect } from 'react';
 const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
-    return (React.createElement(SimpleButton, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick },
-        React.createElement(Box, { className: "twa:mr-2" }, icon),
-        React.createElement(Box, { className: "twa:text-2" }, label)));
+    return (_jsxs(SimpleButton, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick, "aria-label": label, children: [_jsx(Box, { className: "twa:mr-2", children: icon }), _jsx(Box, { className: "twa:text-2", children: label })] }));
 };
 export const ColumnFilterMenu = (props) => {
     const [activeIndex, setActiveIndex] = React.useState(() => {
@@ -58,12 +57,11 @@ export const ColumnFilterMenu = (props) => {
             document.removeEventListener('keydown', onKeyDown);
         };
     }, [confirm]);
-    return (React.createElement(Panel, { className: "twa:min-w-max" }, props.predicateDefs?.map((predicateDef, index) => {
-        const active = activeIndex === index;
-        return (React.createElement(Flex, { className: clsx("twa:mb-1", active && "twa:bg-primarylight"), key: index, onMouseDownCapture: (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-            } },
-            React.createElement(ColumnFilterMenuItem, { onClick: () => confirm(predicateDef), icon: predicateDef.icon, label: predicateDef.label, active: active })));
-    })));
+    return (_jsx(Panel, { className: "twa:min-w-max", children: props.predicateDefs?.map((predicateDef, index) => {
+            const active = activeIndex === index;
+            return (_jsx(Flex, { className: clsx('twa:mb-1', active && 'twa:bg-primarylight'), onMouseDownCapture: (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                }, children: _jsx(ColumnFilterMenuItem, { onClick: () => confirm(predicateDef), icon: predicateDef.icon, label: predicateDef.label, active: active }) }, index));
+        }) }));
 };

package/src/View/Components/ColumnFilter/components/FloatingFilterInputList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import debounce from '../../../../Utilities/utils/debounce';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
@@ -6,6 +7,7 @@ import { useAdaptable } from '../../../AdaptableContext';
 import { usePredicateDef } from '../hooks';
 import { ColumnFilterInput } from './ColumnFilterInput';
 import { FloatingFilterValues } from './FloatingFilterValues';
+import { cn } from '../../../../lib/utils';
 export const FloatingFilterInputList = (props) => {
     const { api } = useAdaptable();
     const columnType = React.useMemo(() => {
@@ -20,11 +22,7 @@ export const FloatingFilterInputList = (props) => {
         props.onPredicateChange(predicate);
     }, 300), [props.predicate, props.columnId]);
     if (['date[]', 'number[]', 'text[]'].includes(matchingInputs[0])) {
-        return (React.createElement(FloatingFilterValues, { inline: true, columnId: props.columnId, disabled: props.disabled, selectProps: {
-                menuStyle: {
-                    left: -20, // the size of the "in" filter icon
-                },
-            }, onClear: () => {
+        return (_jsx(FloatingFilterValues, { inline: true, columnId: props.columnId, disabled: props.disabled, onClear: () => {
                 props.onPredicateChange({ operator: props.predicate.operator, args: [] });
             }, onChange: (inputs) => {
                 props.onPredicateChange({
@@ -36,23 +34,33 @@ export const FloatingFilterInputList = (props) => {
             // should change when porting, it has knowledge about predicates
             type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }));
     }
-    return (React.createElement("div", { className: "twa:flex twa:flex-row twa:[&>*:not(:first-child)]:border-l! twa:[&>*:not(:first-child)]:border-inputborder!" }, (matchingInputs ?? []).map((input, index) => {
-        const value = props?.predicate?.args?.[index];
-        return (React.createElement(ColumnFilterInput, { filterType: "floating", columnId: props.columnId, usePrimitiveInputs: true, key: index, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
-                const args = [...props.predicate.args];
-                args.splice(index, 1);
-                const newPredicate = {
-                    operator: props.predicate.operator,
-                    args: args,
-                };
-                debouncedPredicateChange(newPredicate);
-            }, onChange: (value) => {
-                const newPredicate = {
-                    operator: props.predicate.operator,
-                    args: [...props.predicate.args],
-                };
-                newPredicate.args[index] = value;
-                debouncedPredicateChange(newPredicate);
-            } }));
-    })));
+    return (_jsx("div", { className: cn('twa:relative twa:w-full twa:flex twa:flex-row twa:[&>*:not(:first-child)]:border-l! twa:[&>*:not(:first-child)]:border-input-border!', {
+            'twa:**:[input]:min-h-auto!': 'make all inputs inside not have a height fixed',
+            // this is especially for the date picker filter
+            'twa:*:[[role=button]]:rounded-input': true,
+            'twa:*:[[role=button]]:absolute': 'make date picker absolute filter',
+            'twa:*:[[role=button]]:inset-y-0.5 twa:*:[[role=button]]:inset-x-0.5 twa:*:[[role=button]]:h-auto': 'make date picker - and give it some padding, so the focus is not cut off absolute outline filter',
+            // and this is for text and number inputs
+            'twa:*:[input]:rounded-input': true,
+            'twa:*:[input]:absolute': 'make inputs absolute filter',
+            'twa:*:[input]:inset-y-0.5 twa:*:[input]:inset-x-0.5 twa:*:[input]:h-auto': 'make inputs - and give it some padding, so the focus is not cut off absolute outline filter',
+        }), children: (matchingInputs ?? []).map((input, index) => {
+            const value = props?.predicate?.args?.[index];
+            return (_jsx(ColumnFilterInput, { filterType: "floating", columnId: props.columnId, usePrimitiveInputs: true, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
+                    const args = [...props.predicate.args];
+                    args.splice(index, 1);
+                    const newPredicate = {
+                        operator: props.predicate.operator,
+                        args: args,
+                    };
+                    debouncedPredicateChange(newPredicate);
+                }, onChange: (value) => {
+                    const newPredicate = {
+                        operator: props.predicate.operator,
+                        args: [...props.predicate.args],
+                    };
+                    newPredicate.args[index] = value;
+                    debouncedPredicateChange(newPredicate);
+                } }, index));
+        }) }));
 };

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useEffect } from 'react';
 import { useAdaptable } from '../../../AdaptableContext';
@@ -11,20 +12,6 @@ const logOnce = (message, loggingFn) => {
     loggingFn(message);
     onceFlags[message] = true;
 };
-const renderSingleValue = (option) => {
-    return option.label;
-};
-const renderMultipleValues = (values, options) => {
-    const { focused, placeholder } = options;
-    const text = values.map(renderSingleValue).join(', ');
-    return values.length ? (React.createElement(React.Fragment, null,
-        React.createElement("span", { "data-name": "multiple-values-count" },
-            "(",
-            values.length,
-            ")"),
-        " ",
-        text)) : focused ? null : (placeholder ?? 'Select...');
-};
 export function useDistinctFilterColumnValues(options) {
     const { columnId, searchValueRef } = options;
     const { api } = useAdaptable();
@@ -177,44 +164,17 @@ export const FloatingFilterValues = (props) => {
 `, (msg) => console.warn(msg));
         }
     }
-    return (React.createElement(ColumnValuesSelect, { selectProps: props.inline
+    return (_jsx(ColumnValuesSelect, { selectProps: props.inline
             ? {
                 ...props.selectProps,
                 'data-name': 'Select Values',
-                renderMultipleValues,
-                isClearable: false,
-                skipDefaultFiltering: skipDefaultSearch,
-                styles: {
-                    dropdownIndicator: {
-                        display: 'none',
-                    },
-                    container: {
-                        height: '100%',
-                        fontWeight: 'normal',
-                    },
-                    control: {
-                        height: '100%',
-                        borderRadius: 'none',
-                        border: 'none',
-                        fontSize: 'inherit',
-                        // @ts-ignore ignore
-                        '&:hover': {
-                            border: 'none',
-                        },
-                    },
-                    ...(props.value?.length
-                        ? {
-                            valueContainer: {
-                                fontWeight: 'var(--ab-cmp-floatingfilter-selected-options-text__font-weight)',
-                            },
-                        }
-                        : {}),
-                },
-                onInputChange,
+                showSelectedCount: true,
+                filter: skipDefaultSearch ? null : undefined,
+                onInputValueChange: onInputChange,
             }
             : {
                 ...props.selectProps,
-                skipDefaultFiltering: skipDefaultSearch,
-                onInputChange,
+                filter: skipDefaultSearch ? null : undefined,
+                onInputValueChange: onInputChange,
             }, disabled: props.disabled, onMenuOpen: onMenuOpen, isLoading: isDistinctColumnValuesLoading, column: currentColumn, dataType: currentColumn.dataType, options: quickFilterValues.values, value: props.value, onChange: props.onChange }));
 };

package/src/View/Components/ColumnGroupTag/index.js

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../../../components/Flex';
 export const ColumnGroupTag = ({ column }) => {
     if (!column.columnGroup || column.columnGroup.groupCount <= 1)
         return null;
-    return (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1 twa:flex twa:items-center" },
-        "Column Group: ",
-        column.columnGroup.friendlyName));
+    return (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1 twa:flex twa:items-center", children: ["Column Group: ", column.columnGroup.friendlyName] }));
 };

package/src/View/Components/ColumnSelector/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { ValueSelector } from '../ValueSelector';
 import { ColumnGroupTag } from '../ColumnGroupTag';
@@ -9,14 +9,12 @@ export const NewColumnSelector = ({ allowReorder = true, ...props }) => {
             ? (c) => c.friendlyName.toLowerCase().indexOf(columnFilterText.toLowerCase()) != -1
             : null;
     }, [columnFilterText]);
-    return (React.createElement(ValueSelector, { value: selected, options: availableColumns, filter: filterFn, singleSelect: singleSelect, allowReorder: false, onChange: (colIds) => {
+    return (_jsx(ValueSelector, { value: selected, options: availableColumns, filter: filterFn, singleSelect: singleSelect, allowReorder: false, onChange: (colIds) => {
             if (singleSelect) {
                 onChange(colIds.length ? [colIds.pop()] : []);
             }
             else {
                 onChange(colIds);
             }
-        }, toIdentifier: (c) => c.columnId, toLabel: (c) => c.friendlyName, toListLabel: (c) => (React.createElement("div", { className: "twa:flex twa:flex-row twa:items-center" },
-            c.friendlyName,
-            React.createElement(ColumnGroupTag, { column: c }))) }));
+        }, toIdentifier: (c) => c.columnId, toLabel: (c) => c.friendlyName, toListLabel: (c) => (_jsxs("div", { className: "twa:flex twa:flex-row twa:items-center", children: [c.friendlyName, _jsx(ColumnGroupTag, { column: c })] })) }));
 };

package/src/View/Components/EntityRowItem.js

@@ -1,8 +1,7 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 export class EntityRowItem extends React.Component {
     render() {
-        return React.createElement("span", null,
-            " ",
-            this.props.Content);
+        return _jsxs("span", { children: [" ", this.props.Content] });
     }
 }

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicateEditor.js

@@ -1,10 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import SimpleButton from '../../../../components/SimpleButton';
 import { useAdaptable } from '../../../AdaptableContext';
 import { PredicateEditor } from '../../PredicateEditor/PredicateEditor';
 import { Box, Flex } from '../../../../components/Flex';
-import { Select } from '../../../../components/Select';
+import { SingleSelect } from '../../../../components/NewSelect';
 export const EntityRulePredicateEditor = (props) => {
     const { api } = useAdaptable();
     const { predicate } = props;
@@ -68,15 +69,7 @@ export const EntityRulePredicateEditor = (props) => {
     else if ('ColumnIds' in props.data.Scope && props.data.Scope?.ColumnIds?.[0]) {
         predicateColumnId = props.data.Scope?.ColumnIds?.[0];
     }
-    return (React.createElement(Flex, { className: "ab-EntityRulePredicateEditor twa:p-3 twa:mb-3" },
-        React.createElement(Box, { className: "twa:flex-1" },
-            React.createElement(FormLayout, null,
-                columnIdPredicateScopeEnabled && (React.createElement(FormRow, { label: "Column" },
-                    React.createElement(Select, { placeholder: "Select Column", options: columnOptions, value: selectedColumn?.value, onChange: (value) => {
-                            handlePredicateChange({ PredicateId: null, ColumnId: value, Inputs: [] });
-                        } }))),
-                React.createElement(FormRow, { label: "Predicate" },
-                    React.createElement(PredicateEditor, { columnId: predicateColumnId, predicateDefs: predicateDefs, predicate: predicate, onChange: handlePredicateChange, onClear: handleClear })))),
-        React.createElement(Box, null,
-            React.createElement(SimpleButton, { disabled: !predicate, className: "twa:ml-2 twa:h-input", onClick: handleClear, icon: "delete" }))));
+    return (_jsxs(Flex, { className: "ab-EntityRulePredicateEditor twa:p-3 twa:mb-3", children: [_jsx(Box, { className: "twa:flex-1", children: _jsxs(FormLayout, { children: [columnIdPredicateScopeEnabled && (_jsx(FormRow, { label: "Column", children: _jsx(SingleSelect, { className: "twa:w-full", placeholder: "Select Column", items: columnOptions, value: selectedColumn?.value, onValueChange: (value) => {
+                                    handlePredicateChange({ PredicateId: null, ColumnId: value, Inputs: [] });
+                                } }) })), _jsx(FormRow, { label: "Predicate", children: _jsx(PredicateEditor, { columnId: predicateColumnId, predicateDefs: predicateDefs, predicate: predicate, onChange: handlePredicateChange, onClear: handleClear }) })] }) }), _jsx(Box, { children: _jsx(SimpleButton, { disabled: !predicate, className: "twa:ml-2 twa:h-input", onClick: handleClear, icon: "delete" }) })] }));
 };

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicatesEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import HelpBlock from '../../../../components/HelpBlock';
 import { useAdaptable } from '../../../AdaptableContext';
@@ -56,29 +57,12 @@ export const EntityRulePredicatesEditor = (props) => {
     };
     const scopeString = getScopeViewItems(props.data.Scope, api).values.join(', ');
     const enablePredicateColumnId = props.enablePredicateColumnId ?? true;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { justifyContent: "space-between", className: "twa:mb-2" },
-            React.createElement(Box, { className: "twa:text-2 twa:mb-2" }, props.descriptions.selectPredicate),
-            React.createElement(SimpleButton, { disabled: !props.data.Rule?.Predicates?.length, onClick: handleAddNewPredicate, icon: "plus", variant: "raised" }, "Add Predicate")),
-        enablePredicateColumnId && (React.createElement(Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector twa:p-2 twa:mb-2", flexDirection: "column" },
-            React.createElement(Box, { className: "twa:mb-2" }, "Create Predicate Rule(s) using"),
-            React.createElement(Radio, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), className: "twa:mr-3", checked: !columnPredicateEnabled },
-                "Active Column: ",
-                React.createElement(Tag, { className: "twa:mx-1" }, scopeString || 'Not Defined'),
-                ' '),
-            React.createElement(Radio, { "data-name": "column-scope", onClick: () => handlePredicateScopeTypeChange(true), checked: columnPredicateEnabled }, "Selected Columns (overriding Active Column)"))),
-        (props.data.Rule?.Predicates?.length ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
-            const currentPredicatDef = props.predicateDefs.find((pd) => pd.id === predicate?.PredicateId);
-            let editorPredicateDefs = defaultPredicateDefs;
-            if (currentPredicatDef) {
-                editorPredicateDefs = [currentPredicatDef, ...defaultPredicateDefs];
-            }
-            return (React.createElement(React.Fragment, { key: `${index}-${predicate?.PredicateId}` },
-                index > 0 && (React.createElement(Box, null,
-                    React.createElement(Tag, { className: "twa:mb-3" }, "AND"))),
-                React.createElement(EntityRulePredicateEditor, { data: props.data, predicate: predicate, onChange: props.onChange, predicateDefs: editorPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, columnPredicateEnabled: columnPredicateEnabled })));
-        }),
-        showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
-            React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(PredicateDocsLink, '_blank') }),
-            "See Predicate documentation for more details and examples"))));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { justifyContent: "space-between", className: "twa:mb-2", children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: props.descriptions.selectPredicate }), _jsx(SimpleButton, { disabled: !props.data.Rule?.Predicates?.length, onClick: handleAddNewPredicate, icon: "plus", variant: "raised", children: "Add Predicate" })] }), enablePredicateColumnId && (_jsxs(Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector twa:p-2 twa:mb-2", flexDirection: "column", children: [_jsx(Box, { className: "twa:mb-2", children: "Create Predicate Rule(s) using" }), _jsxs(Radio, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), className: "twa:mr-3", checked: !columnPredicateEnabled, children: ["Active Column: ", _jsx(Tag, { className: "twa:mx-1", children: scopeString || 'Not Defined' }), ' '] }), _jsx(Radio, { "data-name": "column-scope", onClick: () => handlePredicateScopeTypeChange(true), checked: columnPredicateEnabled, children: "Selected Columns (overriding Active Column)" })] })), (props.data.Rule?.Predicates?.length ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
+                const currentPredicatDef = props.predicateDefs.find((pd) => pd.id === predicate?.PredicateId);
+                let editorPredicateDefs = defaultPredicateDefs;
+                if (currentPredicatDef) {
+                    editorPredicateDefs = [currentPredicatDef, ...defaultPredicateDefs];
+                }
+                return (_jsxs(React.Fragment, { children: [index > 0 && (_jsx(Box, { children: _jsx(Tag, { className: "twa:mb-3", children: "AND" }) })), _jsx(EntityRulePredicateEditor, { data: props.data, predicate: predicate, onChange: props.onChange, predicateDefs: editorPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, columnPredicateEnabled: columnPredicateEnabled })] }, `${index}-${predicate?.PredicateId}`));
+            }), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(PredicateDocsLink, '_blank') }), "See Predicate documentation for more details and examples"] }))] }));
 };

package/src/View/Components/EntityRulesEditor/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useMemo } from 'react';
 import { SupportedTabMenuComps, Tabs } from '../../../components/Tabs';
@@ -10,11 +11,8 @@ import { Box, Flex } from '../../../components/Flex';
 import { twMerge } from '../../../twMerge';
 const QueryTab = (props) => {
     const { type, label, disabled = false, ...tabProps } = props;
-    const text = (React.createElement(Flex, { flexDirection: "column" },
-        label,
-        " ",
-        React.createElement(Box, { className: "twa:text-2" }, "query")));
-    return (React.createElement(Tabs.Tab, { style: { flex: 1 }, ...tabProps }, !disabled && props.showRadio ? (React.createElement(Radio, { tabIndex: -1, className: "twa:m-0 twa:align-baseline", checked: type === props.value }, text)) : (text)));
+    const text = (_jsxs(Flex, { flexDirection: "column", children: [label, " ", _jsx(Box, { className: "twa:text-2", children: "query" })] }));
+    return (_jsx(Tabs.Tab, { style: { flex: 1 }, ...tabProps, children: !disabled && props.showRadio ? (_jsx(Radio, { tabIndex: -1, className: "twa:m-0 twa:align-baseline", checked: type === props.value, children: text })) : (text) }));
 };
 // needed here to be considered a child Tab component, inside the Tabs component
 SupportedTabMenuComps.add(QueryTab);
@@ -25,22 +23,21 @@ export const EntityRulesSummary = (props) => {
         !data?.Rule?.BooleanExpression &&
         !data?.Rule?.ObservableExpression &&
         !data?.Rule?.AggregatedBooleanExpression) {
-        return React.createElement(Box, { className: "twa:text-2" }, "No Rule defined");
+        return _jsx(Box, { className: "twa:text-2", children: "No Rule defined" });
     }
-    return (React.createElement(
+    return (_jsx(
         Box,
-        { className: "twa:text-2" },
-        data.Rule.Predicates ? (React.createElement(React.Fragment, null, data.Rule?.Predicates?.map?.((predicate, index) => (
-        // predicate id is not unique
-        (React.createElement(
-            React.Fragment,
-            { key: index },
-            props.renderPredicate(predicateApi.predicateToString(predicate))
-        )))))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule))))
+        { className: "twa:text-2", children: data.Rule.Predicates ? (_jsx(_Fragment, { children: data.Rule?.Predicates?.map?.((predicate, index) => (
+                // predicate id is not unique
+                (_jsx(
+                    React.Fragment,
+                    { children: props.renderPredicate(predicateApi.predicateToString(predicate)) },
+                    index
+                )))) })) : (_jsx(_Fragment, { children: props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule)) })) }
     ));
 };
 const RuleTabTitle = (props) => {
-    return props.showRadio ? (React.createElement(Radio, { className: "twa:m-0", tabIndex: -1, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
+    return props.showRadio ? (_jsx(Radio, { className: "twa:m-0", tabIndex: -1, checked: props.checked, children: props.children })) : (_jsx(_Fragment, { children: "props.children" }));
 };
 export const EntityRulesEditor = (props) => {
     const { data, children, descriptions, predicateDefs, showNoRule = false, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
@@ -134,26 +131,8 @@ export const EntityRulesEditor = (props) => {
     };
     const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const baseClassName = 'ab-EntityRulesEditor';
-    return (React.createElement(Flex, { ...flexProps, className: twMerge(baseClassName, 'twa:p-2 twa:pt-0 twa:pl-0 twa:h-full', flexProps?.className), flexDirection: "column", style: flexProps?.style },
-        children,
-        React.createElement(Tabs, { onValueChange: setType, value: selectedTab, className: "twa:pt-2 twa:pl-2 twa:flex-1 twa:overflow-auto" },
-            showNoRule ? (React.createElement(Tabs.Tab, { value: 'NoRule', style: { flex: 1 } },
-                React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'NoRule' }, "No Condition"))) : null,
-            showNoRule ? (React.createElement(Tabs.Content, { value: 'NoRule' },
-                React.createElement(Box, { className: "twa:text-2 twa:mb-2" }, 'Format Column is always applied'))) : null,
-            showPredicate ? (React.createElement(Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
-                React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'Predicate' }, "Predicate"))) : null,
-            showPredicate ? (React.createElement(Tabs.Content, { "data-name": "Predicate", value: "Predicate" },
-                React.createElement(EntityRulePredicatesEditor, { enablePredicateColumnId: props.enablePredicateColumnId, data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, onChange: props.onChange }))) : null,
-            showBoolean ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "BooleanExpression", type: type, label: "Boolean" })) : null,
-            showBoolean ? (React.createElement(Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression' }, (() => {
-                const editor = (React.createElement(ExpressionEditor, { type: 'boolean', module: module, value: data.Rule?.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: props.showQueryBuilder, columnScope: data.Scope }));
-                return props.showQueryBuilder ? React.createElement(Panel, null, editor) : editor;
-            })())) : null,
-            showObservable ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "ObservableExpression", type: type, label: "Observable" })) : null,
-            showObservable ? (React.createElement(Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression' },
-                React.createElement(ExpressionEditor, { type: 'observable', module: module, value: data.Rule?.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }))) : null,
-            showAggregation ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
-            showAggregation ? (React.createElement(Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression' },
-                React.createElement(ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: data.Rule?.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }))) : null)));
+    return (_jsxs(Flex, { ...flexProps, className: twMerge(baseClassName, 'twa:p-2 twa:pt-0 twa:pl-0 twa:h-full', flexProps?.className), flexDirection: "column", style: flexProps?.style, children: [children, _jsxs(Tabs, { onValueChange: setType, value: selectedTab, className: "twa:pt-2 twa:pl-2 twa:flex-1 twa:overflow-auto", children: [showNoRule ? (_jsx(Tabs.Tab, { value: 'NoRule', style: { flex: 1 }, children: _jsx(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'NoRule', children: "No Condition" }) })) : null, showNoRule ? (_jsx(Tabs.Content, { value: 'NoRule', children: _jsx(Box, { className: "twa:text-2 twa:mb-2", children: 'Format Column is always applied' }) })) : null, showPredicate ? (_jsx(Tabs.Tab, { value: 'Predicate', style: { flex: 1 }, children: _jsx(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'Predicate', children: "Predicate" }) })) : null, showPredicate ? (_jsx(Tabs.Content, { "data-name": "Predicate", value: "Predicate", children: _jsx(EntityRulePredicatesEditor, { enablePredicateColumnId: props.enablePredicateColumnId, data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, onChange: props.onChange }) })) : null, showBoolean ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "BooleanExpression", type: type, label: "Boolean" })) : null, showBoolean ? (_jsx(Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression', children: (() => {
+                            const editor = (_jsx(ExpressionEditor, { type: 'boolean', module: module, value: data.Rule?.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: props.showQueryBuilder, columnScope: data.Scope }));
+                            return props.showQueryBuilder ? _jsx(Panel, { children: editor }) : editor;
+                        })() })) : null, showObservable ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "ObservableExpression", type: type, label: "Observable" })) : null, showObservable ? (_jsx(Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression', children: _jsx(ExpressionEditor, { type: 'observable', module: module, value: data.Rule?.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })) : null, showAggregation ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null, showAggregation ? (_jsx(Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression', children: _jsx(ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: data.Rule?.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })) : null] })] }));
 };

package/src/View/Components/ExternalRenderer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useAdaptable } from '../AdaptableContext';
 export const ExternalRenderer = ({ render, frameworkComponent, componentName = 'N/A', onDestroy, ...rest }) => {
@@ -35,6 +36,5 @@ export const ExternalRenderer = ({ render, frameworkComponent, componentName = '
         };
     }, []);
     const RFC = adaptable.variant === 'react' ? frameworkComponent : null;
-    return RFC ? (React.createElement("div", { ...rest, ref: ref },
-        React.createElement(RFC, { adaptableApi: adaptable.api }))) : (React.createElement("div", { ...rest, dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
+    return RFC ? (_jsx("div", { ...rest, ref: ref, children: _jsx(RFC, { adaptableApi: adaptable.api }) })) : (_jsx("div", { ...rest, dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
 };

package/src/View/Components/FilterForm/ListBoxFilterForm.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { AdaptableColumn, AdaptableColumnDataType } from '../../../AdaptableState/Common/AdaptableColumn';
-import { SelectProps } from '../../../components/Select';
+import { GridFilterComboboxProps } from '../../../components/Combobox';
 export interface ColumnValuesSelectProps {
     column: AdaptableColumn;
+    disabled?: boolean;
     options: {
         label: string;
         value: any;
@@ -11,7 +12,7 @@ export interface ColumnValuesSelectProps {
     onChange: (value: Array<any>) => void;
     dataType: AdaptableColumnDataType;
     isLoading?: boolean;
-    selectProps?: Partial<SelectProps<any, false>>;
+    selectProps?: Partial<GridFilterComboboxProps<any>>;
     onMenuOpen?: () => void;
 }
 export declare const ColumnValuesSelect: (props: ColumnValuesSelectProps) => React.JSX.Element;