@adaptabletools/adaptable-cjs 19.2.4 → 20.0.0-canary.0

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { BoxProps } from 'rebass';
+import { QlPredicate, QlPredicateDef } from '../../../parser/src/predicate';
+interface ColumnFilterComponentProps {
+    columnId: string;
+    disabled?: boolean;
+    predicate?: QlPredicate;
+    predicateDefs: QlPredicateDef[];
+    onPredicateChange: (predicate: QlPredicate) => void;
+    wrapperProps?: BoxProps;
+}
+export declare const ColumnFilterComponent: React.FunctionComponent<ColumnFilterComponentProps>;
+export {};

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

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnFilterComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const ColumnFilterInputList_1 = require("./components/ColumnFilterInputList");
+const hooks_1 = require("./hooks");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const AdaptableContext_1 = require("../../AdaptableContext");
+const Select_1 = require("../../../components/Select");
+const ColumnFilterPredicateDropdown = (props) => {
+    const predicateDef = (0, hooks_1.usePredicateDef)(props.predicate?.operator, props.predicateDefs);
+    const options = props.predicateDefs.map((predicateDef) => {
+        return {
+            label: (React.createElement(rebass_1.Box, { display: 'flex', alignItems: "center" },
+                React.createElement(SimpleButton_1.default, { variant: "raised", mr: 2, tone: "accent" }, predicateDef.icon),
+                predicateDef.label)),
+            value: predicateDef.operator,
+        };
+    });
+    const operator = props.predicate?.operator;
+    const isAndOr = operator === 'AND' || operator === 'OR';
+    return (React.createElement(rebass_1.Box, { display: 'flex', alignItems: "center", style: {
+            //@ts-ignore ignore
+            '--ab-cmp-input__background': 'var(--ab-color-primary)',
+        } },
+        React.createElement(Select_1.Select, { style: predicateDef
+                ? {
+                    minWidth: '10rem',
+                }
+                : null // for AND and OR don't apply a min width
+            , onChange: (value) => {
+                props.onPredicateChange({
+                    operator: value,
+                    args: [],
+                });
+            }, options: options, value: isAndOr ? 'Add Condition' : props.predicate?.operator })));
+};
+const ColumnFilterEditor = (props) => {
+    return (React.createElement(rebass_1.Box, { mb: 3 },
+        React.createElement(rebass_1.Flex, { mb: 2 },
+            React.createElement(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }),
+            React.createElement(rebass_1.Flex, { alignItems: "center", ml: 2 },
+                React.createElement(SimpleButton_1.default, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }))),
+        React.createElement(ColumnFilterInputList_1.ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })));
+};
+const AndOrInput = (props) => {
+    return (
+        // <Select
+        //   value={props.operator}
+        //   onChange={props.onChange}
+        //   options={[
+        //     { label: 'AND', value: 'AND' },
+        //     { label: 'OR', value: 'OR' },
+        //   ]}
+        // />
+        (React.createElement(
+            rebass_1.Flex,
+            { flex: 1 },
+            React.createElement(Radio_1.default, { mr: 2, onClick: () => props.onChange('AND'), checked: props.operator === 'AND' }, "AND"),
+            React.createElement(Radio_1.default, { mr: 2, onClick: () => props.onChange('OR'), checked: props.operator === 'OR' }, "OR")
+        ))
+    );
+};
+const ColumnFilterComponent = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const autoApplyColumnFilter = adaptable.adaptableOptions.filterOptions.columnFilterOptions?.autoApplyColumnFilter ?? true;
+    const [predicateNotYetApplied, setPredicateNotYetApplied] = React.useState(props.predicate);
+    const applyFilter = () => {
+        props.onPredicateChange(currentPredicateRef.current);
+        setPredicateNotYetApplied(undefined);
+    };
+    const onPredicateChange = (predicate) => {
+        if (autoApplyColumnFilter) {
+            props.onPredicateChange(predicate);
+        }
+        else {
+            setPredicateNotYetApplied(predicate);
+        }
+    };
+    const onNewPredicate = (predicateDef) => {
+        const currentPredicate = currentPredicateRef.current;
+        const newPredicate = {
+            ...currentPredicate,
+            // @ts-ignore
+            args: [...currentPredicate.args, { operator: predicateDef.operator, args: [] }],
+        };
+        onPredicateChange(newPredicate);
+    };
+    const onCombineChange = (operator) => {
+        const newPredicate = {
+            ...currentPredicateRef.current,
+            args: currentPredicateRef.current.args || [],
+            operator,
+        };
+        onPredicateChange(newPredicate);
+    };
+    const currentPredicate = autoApplyColumnFilter
+        ? props.predicate
+        : predicateNotYetApplied ?? props.predicate;
+    const currentPredicateRef = React.useRef(currentPredicate);
+    //#ref-predicate
+    currentPredicateRef.current = currentPredicate;
+    // Not sure how to check this but would be nice...
+    const isLastPredicateValid = true;
+    const filterPredicateDropdown = (React.createElement(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: currentPredicate, predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+            const predicateDef = props.predicateDefs.find((predicateDef) => predicateDef.operator === predicate.operator);
+            onNewPredicate(predicateDef);
+        }, targetProps: {
+            tone: 'neutral',
+            variant: 'raised',
+            children: 'Add Condition',
+        } }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Flex, { m: 2 },
+            React.createElement(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }),
+            React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => onPredicateChange({ operator: 'AND', args: [] }) }, "Clear All")),
+        React.createElement(rebass_1.Flex, { flexDirection: "column", className: "ab-ColumnFilter", flex: 1, minHeight: 0, ...props.wrapperProps },
+            React.createElement(rebass_1.Box, { flex: 1, style: { overflow: 'auto' } },
+                currentPredicate.args.map((predicate, index) => {
+                    return (React.createElement(ColumnFilterEditor, { deleteDisabled: currentPredicate.args.length < 2, onDelete: () => {
+                            const currentPredicate = currentPredicateRef.current;
+                            const newArgs = [...currentPredicate.args];
+                            newArgs.splice(index, 1);
+                            onPredicateChange({
+                                operator: currentPredicate.operator,
+                                args: newArgs,
+                            });
+                        }, key: index, columnId: props.columnId, disabled: props.disabled, predicate: predicate, predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+                            // #ref-predicate - for whatever reason
+                            // the `currentPredicate` here would be one from an old render
+                            // if we weren't using a ref. we're not using memo/usecallback here,
+                            // so I don't understand why this is happening
+                            const currentPredicate = currentPredicateRef.current;
+                            const newArgs = [...currentPredicate.args];
+                            newArgs[index] = predicate;
+                            onPredicateChange({
+                                operator: currentPredicate.operator,
+                                args: newArgs,
+                            });
+                        } }));
+                }),
+                isLastPredicateValid && filterPredicateDropdown),
+            !autoApplyColumnFilter ? (React.createElement(rebass_1.Box, { pt: 2 },
+                React.createElement(SimpleButton_1.default, { tone: "accent", variant: "raised", onClick: applyFilter }, "Apply Filter"))) : null)));
+};
+exports.ColumnFilterComponent = ColumnFilterComponent;

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { WindowPopupChildProps } from '../Popups/WindowPopups/WindowPopups';
+export declare const ColumnFilterWindow: React.FunctionComponent<WindowPopupChildProps>;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnFilterWindow = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const ColumnSelector_1 = require("../Selectors/ColumnSelector");
+const AdaptableColumnFilter_1 = require("./AdaptableColumnFilter");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const ColumnFilterWindow = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { value: initialColumnId } = props?.popupProps;
+    const [columnId, setColumnId] = React.useState(initialColumnId);
+    React.useEffect(() => {
+        setColumnId(initialColumnId);
+    }, [props.popupProps.value]);
+    return (React.createElement(rebass_1.Flex, { flex: 1, minHeight: 0, height: "100%", flexDirection: "column", p: 2, className: "ab-ColumnFilterWindow" },
+        React.createElement(rebass_1.Box, { mb: 2 },
+            React.createElement(FormLayout_1.default, null,
+                React.createElement(FormLayout_1.FormRow, { label: "Column" },
+                    React.createElement(ColumnSelector_1.ColumnSelector, { renderOption: (column) => {
+                            const columnFilter = api.filterApi.columnFilterApi.getColumnFilterForColumn(column.columnId);
+                            let label = column.friendlyName ?? column.columnId;
+                            if (columnFilter &&
+                                api.filterApi.columnFilterApi.isColumnFilterActive(columnFilter)) {
+                                return (React.createElement(rebass_1.Flex, null,
+                                    label,
+                                    React.createElement(rebass_1.Box, { flex: 1 }),
+                                    React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })));
+                            }
+                            return label;
+                        }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId })))),
+        React.createElement(AdaptableColumnFilter_1.AdaptableColumnFilter, { columnId: columnId })));
+};
+exports.ColumnFilterWindow = ColumnFilterWindow;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { QlPredicate, QlPredicateDef } from '../../../parser/src/predicate';
+export interface FloatingFilterProps {
+    columnId: string;
+    disabled?: boolean;
+    predicate?: QlPredicate;
+    predicateDefs: QlPredicateDef[];
+    onPredicateChange: (predicate: QlPredicate) => void;
+    onKeydown?: (event: React.KeyboardEventHandler<HTMLDivElement>) => void;
+    onClear?: () => void;
+}
+export declare const FloatingFilter: React.FunctionComponent<FloatingFilterProps>;

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

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingFilter = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const AdaptableContext_1 = require("../../AdaptableContext");
+const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const ColumnFilterMenu_1 = require("./components/ColumnFilterMenu");
+const FloatingFilterInputList_1 = require("./components/FloatingFilterInputList");
+const utils_1 = require("./utils");
+const FloatingFilter = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const columnFilterOptions = adaptable.adaptableOptions.filterOptions.columnFilterOptions;
+    /**
+     * We always have a syntetic predicate with AND or OR, so the logic is easyer.
+     * The wrapper is in charge of constructing the correct column filter.
+     */
+    const isMultiple = props.predicate?.args?.length > 1;
+    const isManualApply = !columnFilterOptions.autoApplyColumnFilter;
+    const isInlineEditable = !isMultiple && !isManualApply;
+    // only used when there is only one filter selected
+    let singleFilterPredicateDef = null;
+    if (props.predicate.args.length === 1) {
+        singleFilterPredicateDef = props.predicateDefs.find((predicateDef) => predicateDef.operator === props.predicate.args[0].operator);
+    }
+    const noInputs = !singleFilterPredicateDef?.inputs || singleFilterPredicateDef.inputs.length === 0;
+    const showLabel = isMultiple || noInputs || isManualApply;
+    let label = (0, utils_1.qlPredicateToString)(props.predicate, props.predicateDefs);
+    if (isManualApply &&
+        singleFilterPredicateDef &&
+        (0, utils_1.isPredicateEmpty)(props.predicate.args[0], singleFilterPredicateDef)) {
+        label = '';
+    }
+    const showQuickFilterDropdown = adaptable.api.filterApi.columnFilterApi.internalApi.showQuickFilterDropdown(props.columnId);
+    const handleClear = () => props.onClear();
+    const showEvent = 'click';
+    const hideEvent = 'blur';
+    let filterDropdown = null;
+    let filterDropdownButton = (React.createElement(SimpleButton_1.default, { variant: "text", "data-name": "floating-filter-button", "data-value": props.predicate?.args[0]?.operator, onClick: () => {
+            if (!isInlineEditable) {
+                adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
+            }
+        }, style: {
+            textAlign: 'left',
+            marginRight: 1, // just so that the focus outline is not cut off
+            ...(!isInlineEditable
+                ? {
+                    minWidth: 0,
+                    flex: 1,
+                }
+                : {}),
+        } },
+        React.createElement(rebass_1.Box, null, !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } }))),
+        showLabel && (React.createElement(rebass_1.Box, { ml: 2, className: "ab-FloatingFilter-label", title: label, flex: 1 }, label))));
+    if (isInlineEditable) {
+        filterDropdown = showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-FloatingFilter-overlay", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 50, "data-name": "floating-filter-overlay", render: () => {
+                // we render this only for single filter
+                return (React.createElement(ColumnFilterMenu_1.ColumnFilterMenu, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+                        props.onPredicateChange({
+                            operator: props.predicate.operator,
+                            args: [predicate],
+                        });
+                    } }));
+            } }, filterDropdownButton));
+    }
+    else {
+        filterDropdown = filterDropdownButton;
+    }
+    return (React.createElement(rebass_1.Flex, { className: "ab-FloatingFilter", style: { width: '100%' } },
+        filterDropdown,
+        isInlineEditable && (React.createElement(rebass_1.Flex, { flex: 1, minWidth: 0 },
+            React.createElement(FloatingFilterInputList_1.FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, 
+                // It works only with a predicate
+                predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+                    props.onPredicateChange({
+                        operator: props.predicate.operator,
+                        args: [predicate],
+                    });
+                } }))),
+        isInlineEditable && (React.createElement(SimpleButton_1.default, { px: 0, onClick: () => {
+                adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
+            }, icon: "expand", variant: "text" })),
+        (isMultiple ||
+            !(0, utils_1.isPredicateEmpty)(props.predicate.args[0], singleFilterPredicateDef)) && (React.createElement(SimpleButton_1.default, { "data-name": "clear-filter", p: 0, variant: "text", onClick: handleClear, icon: "close" }))));
+};
+exports.FloatingFilter = FloatingFilter;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ColumnFilter } from '../../../types';
+export declare const LayoutColumnFilter: (props: {
+    columnFilter: ColumnFilter;
+    onColumnFilterChange: (columnFilter: ColumnFilter) => void;
+}) => React.JSX.Element;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutColumnFilter = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const adaptableQlUtils_1 = require("../../../Utilities/adaptableQlUtils");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const ColumnFilter_1 = require("./ColumnFilter");
+const utils_1 = require("./utils");
+const LayoutColumnFilter = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const column = api.columnApi.getColumnWithColumnId(props.columnFilter.ColumnId);
+    const columnFilterOptions = api.optionsApi.getFilterOptions().columnFilterOptions;
+    const predicateDefs = api.filterApi.columnFilterApi.getFilterPredicateDefsForColumn(column);
+    const qlDataType = (0, adaptableQlUtils_1.mapColumnDataTypeToExpressionFunctionType)(column.dataType);
+    const qlPredicateDefs = predicateDefs.map((predDef) => (0, utils_1.mapAdaptablePredicateDefToQlPredicateDef)(predDef, qlDataType));
+    const qlPredicate = (0, utils_1.mapColumnFilterToQlPredicate)(props.columnFilter, column, qlPredicateDefs, columnFilterOptions);
+    const handlePredicateChange = (newPredicate) => {
+        const newAdaptablePredicates = newPredicate.args.map(utils_1.mapQlPredicateToAdaptablePredicate);
+        const newFilter = {
+            ...props.columnFilter,
+            ColumnId: props.columnFilter.ColumnId,
+            Predicates: newAdaptablePredicates,
+            PredicatesLogic: newPredicate.operator,
+        };
+        props.onColumnFilterChange(newFilter);
+    };
+    return (React.createElement(ColumnFilter_1.ColumnFilterComponent, { columnId: props.columnFilter.ColumnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: props.columnFilter?.IsSuspended, onPredicateChange: handlePredicateChange }));
+};
+exports.LayoutColumnFilter = LayoutColumnFilter;

package/src/View/Components/ColumnFilter/components/ColumnFilterInput.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+type ColumnFilterEditorChangeProps = {
+    type: 'text';
+    value: string;
+    onChange: (value: string) => void;
+} | {
+    type: 'number';
+    value: number;
+    onChange: (value: number) => void;
+} | {
+    type: 'boolean';
+    value: 'checked' | 'unchecked' | 'all';
+    onChange: (value: 'checked' | 'unchecked' | 'all') => void;
+} | {
+    type: 'date';
+    value: string;
+    onChange: (value: string) => void;
+};
+export declare const ColumnFilterInput: ({ type, value, onChange: onChangeProp, onClear, disabled, onKeyDown, filterType, usePrimitiveInputs, columnId, }: {
+    disabled: boolean;
+    onClear: () => void;
+    onKeyDown?: (event: React.KeyboardEventHandler<HTMLInputElement>) => void;
+    filterType?: 'floating' | 'default';
+    usePrimitiveInputs?: boolean;
+    columnId: string;
+} & ColumnFilterEditorChangeProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnFilterInput = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const CheckBox_1 = require("../../../../components/CheckBox");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../AdaptableInput"));
+const AdaptableDateInlineInput_1 = require("../../AdaptableInput/AdaptableDateInlineInput");
+const PermittedValuesSelector_1 = require("../../Selectors/PermittedValuesSelector");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const react_1 = require("react");
+function debounceOrImmediate(fn, time) {
+    return time && time > 0 ? (0, debounce_1.default)(fn, time) : fn;
+}
+const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear, disabled, onKeyDown, filterType, usePrimitiveInputs = true, columnId, }) => {
+    const [liveValue, setLiveValue] = React.useState(value);
+    const [hasFocus, setHasFocus] = React.useState(false);
+    const onFocus = (0, react_1.useCallback)(() => {
+        setHasFocus(true);
+    }, []);
+    const onBlur = (0, react_1.useCallback)(() => {
+        setHasFocus(false);
+    }, []);
+    React.useEffect(() => {
+        // only update if the input is not focused
+        // eg: value coming from a sidebar filter
+        // should be reflected in the input
+        // but if the input is focused, it means the user is typing
+        // so we don't want to update the input value from the outside (from state)
+        // but we leave liveValue as is in the local component state
+        if (!hasFocus) {
+            setLiveValue(value);
+        }
+    }, [value, hasFocus]);
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const filterOptions = adaptable.api.optionsApi.getFilterOptions();
+    const debounceTime = filterOptions.columnFilterOptions.quickFilterDebounce;
+    const showDatePicker = filterOptions.showDatePicker;
+    const onChange = React.useMemo(() => {
+        return debounceOrImmediate((value) => {
+            //@ts-ignore
+            onChangeProp(value);
+        }, debounceTime);
+    }, [onChangeProp, debounceTime]);
+    if (type === 'boolean') {
+        return (React.createElement(CheckBox_1.CheckBox, { disabled: disabled, onFocus: onFocus, onBlur: onBlur, checked: value === 'checked'
+                ? true
+                : value === 'unchecked'
+                    ? false
+                    : // 'all'
+                        null, onChange: (checked) => {
+                // sequence: 'checked' -> 'unchecked' -> 'all' -> 'checked'
+                const newCheckedValue = value === 'unchecked' && checked === true
+                    ? 'all'
+                    : checked === true
+                        ? 'checked'
+                        : 'unchecked';
+                onChange(newCheckedValue);
+            } }));
+    }
+    const onKeyDownCapture = (e) => {
+        if (e.nativeEvent.key === 'Escape') {
+            e.nativeEvent.preventDefault();
+            e.nativeEvent.stopPropagation();
+            onClear();
+            setLiveValue('');
+        }
+    };
+    if (type === 'date' && !showDatePicker) {
+        return (React.createElement(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, pr: 0, style: { border: 'none' }, onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
+                onChange(value);
+                setLiveValue(value);
+            } }));
+    }
+    if (usePrimitiveInputs === false && (type === 'number' || type === 'text')) {
+        // we use the permitted values selector
+        return (React.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
+                if (value == undefined) {
+                    onClear();
+                    setLiveValue('');
+                }
+                else {
+                    // @ts-ignore
+                    onChange(value);
+                    setLiveValue(value);
+                }
+            } }));
+    }
+    return (React.createElement(AdaptableInput_1.default, { style: filterType === 'floating'
+            ? {
+                width: '100%',
+                padding: 'var(--ab-space-1)',
+                borderRadius: 0,
+                border: 'none',
+            }
+            : {}, 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, onChange: (e) => {
+            const value = e.target.value;
+            if (value) {
+                if (type === 'number') {
+                    let numericValue = parseFloat(value);
+                    if (isNaN(numericValue)) {
+                        numericValue = null;
+                    }
+                    onChange(numericValue);
+                    setLiveValue(numericValue);
+                }
+                else {
+                    onChange(value);
+                    setLiveValue(value);
+                }
+            }
+            else {
+                onClear();
+                setLiveValue('');
+            }
+        }, onKeyDownCapture: onKeyDownCapture }));
+};
+exports.ColumnFilterInput = ColumnFilterInput;

package/src/View/Components/ColumnFilter/components/ColumnFilterInputList.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { QlPredicate, QlPredicateDef } from '../../../../parser/src/predicate';
+interface ColumnFilterInputListProps {
+    columnId: string;
+    disabled?: boolean;
+    predicate?: QlPredicate;
+    predicateDefs: QlPredicateDef[];
+    onKeyDown?: (event: React.KeyboardEventHandler<HTMLDivElement>) => void;
+    onPredicateChange: (predicate: QlPredicate) => void;
+    selectMenuPortalTarget?: HTMLElement;
+}
+export declare const ColumnFilterInputList: React.FunctionComponent<ColumnFilterInputListProps>;
+export {};

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnFilterInputList = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../../components/ExpressionEditor/QueryBuilder/utils");
+const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
+const adaptableQlUtils_1 = require("../../../../Utilities/adaptableQlUtils");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const hooks_1 = require("../hooks");
+const ColumnFilterInput_1 = require("./ColumnFilterInput");
+const FloatingFilterValues_1 = require("./FloatingFilterValues");
+const ColumnFilterInputList = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const columnType = React.useMemo(() => {
+        return api.columnApi.getColumnDataTypeForColumnId(props.columnId);
+    }, [props.columnId]);
+    const predicateDef = (0, hooks_1.usePredicateDef)(props.predicate?.operator, props.predicateDefs);
+    const fnTypeInput = (0, adaptableQlUtils_1.mapColumnDataTypeToExpressionFunctionType)(columnType);
+    const matchingInputs = predicateDef
+        ? (0, utils_1.getOperatorMatchingInputs)(fnTypeInput, predicateDef?.inputs, true)
+        : [];
+    const debouncedPredicateChange = React.useCallback((0, lodash_1.debounce)((predicate) => {
+        props.onPredicateChange(predicate);
+    }, 300), [props.predicate, props.columnId]);
+    if (['date[]', 'number[]', 'text[]'].includes(matchingInputs[0])) {
+        return (React.createElement(Panel_1.default, { bodyProps: { p: 0 }, borderRadius: 1, border: 0, p: 0, style: { width: '100%' } },
+            React.createElement(FloatingFilterValues_1.FloatingFilterValues, { inline: false, columnId: props.columnId, disabled: props.disabled, onClear: () => {
+                    props.onPredicateChange({ operator: props.predicate.operator, args: [] });
+                }, onChange: (inputs) => {
+                    props.onPredicateChange({
+                        operator: props.predicate.operator,
+                        args: inputs,
+                    });
+                }, 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' })));
+    }
+    return (React.createElement(React.Fragment, null, (matchingInputs ?? []).map((input, index) => {
+        const value = props?.predicate?.args?.[index];
+        return (React.createElement(ColumnFilterInput_1.ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: false, 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);
+            } }));
+    })));
+};
+exports.ColumnFilterInputList = ColumnFilterInputList;

package/src/View/Components/ColumnFilter/components/ColumnFilterMenu.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { QlPredicate, QlPredicateDef } from '../../../../parser/src/predicate';
+interface ColumnFilterMenuProps {
+    columnId: string;
+    disabled?: boolean;
+    predicate?: QlPredicate;
+    predicateDefs: QlPredicateDef[];
+    onPredicateChange: (predicate: QlPredicate) => void;
+    multiple?: boolean;
+}
+export declare const ColumnFilterMenu: React.FunctionComponent<ColumnFilterMenuProps>;
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnFilterMenu = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
+    return (React.createElement(SimpleButton_1.default, { p: 1, variant: "text", width: "100%", tone: active ? 'info' : 'none', onClick: onClick },
+        React.createElement(rebass_1.Box, { mr: 2 }, icon),
+        React.createElement(rebass_1.Box, { fontSize: 2 }, label)));
+};
+const ColumnFilterMenu = (props) => {
+    return (React.createElement(Panel_1.default, { minWidth: "max-content" }, props.predicateDefs?.map((predicateDef, index) => {
+        return (React.createElement(rebass_1.Flex, { mb: 1, key: index, onMouseDownCapture: (e) => {
+                e.stopPropagation();
+            } },
+            React.createElement(ColumnFilterMenuItem, { onClick: () => props.onPredicateChange({ operator: predicateDef.operator, args: [] }), icon: predicateDef.icon, label: predicateDef.label, active: props.predicate.operator === predicateDef.operator })));
+    })));
+};
+exports.ColumnFilterMenu = ColumnFilterMenu;

package/src/View/Components/ColumnFilter/components/FloatingFilterInputList.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { QlPredicate, QlPredicateDef } from '../../../../parser/src/predicate';
+interface FloatingFilterInputListProps {
+    columnId: string;
+    disabled?: boolean;
+    predicate?: QlPredicate;
+    predicateDefs: QlPredicateDef[];
+    onKeyDown?: (event: React.KeyboardEventHandler<HTMLDivElement>) => void;
+    onPredicateChange: (predicate: QlPredicate) => void;
+    selectMenuPortalTarget?: HTMLElement;
+}
+export declare const FloatingFilterInputList: React.FunctionComponent<FloatingFilterInputListProps>;
+export {};