@adaptabletools/adaptable 19.2.3 → 20.0.0-canary.0

package/src/View/Components/Buttons/ButtonMinimise.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
 export declare class ButtonMinimise extends React.Component<SimpleButtonProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Buttons/ButtonMinimise.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonMinimise extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "minimise", iconSize: 20, tooltip: "Minimise" }, this.props, { variant: "text", icon: "arrow-up" })));
+        return (React.createElement(SimpleButton, { "data-name": "minimise", iconSize: 20, tooltip: "Minimise", ...this.props, variant: "text", icon: "arrow-up" }));
     }
 }

package/src/View/Components/Buttons/ButtonNew.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
-export declare const ButtonNew: (props: SimpleButtonProps) => JSX.Element;
+export declare const ButtonNew: (props: SimpleButtonProps) => React.JSX.Element;

package/src/View/Components/Buttons/ButtonNew.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export const ButtonNew = (props) => {
-    return (React.createElement(SimpleButton, Object.assign({ "data-name": "new", tooltip: "New", tone: "accent", icon: "plus", variant: "raised" }, props), props.children === undefined ? 'New' : props.children));
+    return (React.createElement(SimpleButton, { "data-name": "new", tooltip: "New", tone: "accent", icon: "plus", variant: "raised", ...props }, props.children === undefined ? 'New' : props.children));
 };

package/src/View/Components/Buttons/ButtonNewPage.d.ts

@@ -3,5 +3,5 @@ import { SimpleButtonProps } from '../../../components/SimpleButton';
 export interface NewPageButtonProps extends SimpleButtonProps {
 }
 export declare class ButtonNewPage extends React.Component<NewPageButtonProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Buttons/ButtonNewPage.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonNewPage extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "new-page", tooltip: "New Page", iconSize: 20, icon: "newpage" // arrow-up
-            , variant: "text" }, this.props)));
+        return (React.createElement(SimpleButton, { "data-name": "new-page", tooltip: "New Page", iconSize: 20, icon: "newpage" // arrow-up
+            , variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonOpen.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
 export declare class ButtonOpen extends React.Component<SimpleButtonProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Buttons/ButtonOpen.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonOpen extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "open", iconSize: 20, icon: "folder-open", tooltip: "Open", variant: "text" }, this.props)));
+        return (React.createElement(SimpleButton, { "data-name": "open", iconSize: 20, icon: "folder-open", tooltip: "Open", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonPause.d.ts

@@ -3,6 +3,4 @@ import { SimpleButtonProps } from '../../../components/SimpleButton';
 export interface PauseButtonProps extends SimpleButtonProps {
     fillColor?: 'neutral' | 'red';
 }
-export declare class ButtonPause extends React.Component<PauseButtonProps, {}> {
-    render(): JSX.Element;
-}
+export declare const ButtonPause: (props: PauseButtonProps) => React.JSX.Element;

package/src/View/Components/Buttons/ButtonPause.js

@@ -1,17 +1,15 @@
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
-export class ButtonPause extends React.Component {
-    render() {
-        const buttonIcon = this.props.fillColor === 'red'
-            ? {
-                name: 'pause',
-                style: {
-                    fill: 'red',
-                },
-            }
-            : {
-                name: 'pause',
-            };
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "pause", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text" }, this.props)));
-    }
-}
+export const ButtonPause = (props) => {
+    const buttonIcon = props.fillColor === 'red'
+        ? {
+            name: 'pause',
+            style: {
+                fill: 'red',
+            },
+        }
+        : {
+            name: 'pause',
+        };
+    return (React.createElement(SimpleButton, { "data-name": "pause", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text", ...props }));
+};

package/src/View/Components/Buttons/ButtonPlay.d.ts

@@ -2,6 +2,4 @@ import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
 export interface PlayButtonProps extends SimpleButtonProps {
 }
-export declare class ButtonPlay extends React.Component<PlayButtonProps, {}> {
-    render(): JSX.Element;
-}
+export declare const ButtonPlay: (props: PlayButtonProps) => React.JSX.Element;

package/src/View/Components/Buttons/ButtonPlay.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
-export class ButtonPlay extends React.Component {
-    render() {
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "play", tooltip: StringExtensions.IsNullOrEmpty(this.props.tooltip) ? 'Play' : this.props.tooltip, iconSize: 20, icon: "play", variant: "text" }, this.props)));
-    }
-}
+export const ButtonPlay = (props) => {
+    return (React.createElement(SimpleButton, { "data-name": "play", tooltip: StringExtensions.IsNullOrEmpty(props.tooltip) ? 'Play' : props.tooltip, iconSize: 20, icon: "play", variant: "text", ...props }));
+};

package/src/View/Components/Buttons/ButtonPreviewDelete.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
-declare const _default: (props: SimpleButtonProps) => JSX.Element;
+declare const _default: (props: SimpleButtonProps) => React.JSX.Element;
 export default _default;

package/src/View/Components/Buttons/ButtonPreviewDelete.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export default (props) => {
-    return React.createElement(SimpleButton, Object.assign({}, props, { icon: 'delete', variant: "text", "data-name": "preview-delete" }));
+    return React.createElement(SimpleButton, { ...props, icon: 'delete', variant: "text", "data-name": "preview-delete" });
 };

package/src/View/Components/Buttons/ButtonSave.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
 export declare class ButtonSave extends React.Component<SimpleButtonProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Buttons/ButtonSave.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonSave extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "save", iconSize: 20, icon: "save", tooltip: "Save", variant: "text" }, this.props)));
+        return (React.createElement(SimpleButton, { "data-name": "save", iconSize: 20, icon: "save", tooltip: "Save", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonSchedule.d.ts

@@ -2,6 +2,4 @@ import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
 export interface ScheduleButtonProps extends SimpleButtonProps {
 }
-export declare class ButtonSchedule extends React.Component<ScheduleButtonProps, {}> {
-    render(): JSX.Element;
-}
+export declare const ButtonSchedule: (props: ScheduleButtonProps) => React.JSX.Element;

package/src/View/Components/Buttons/ButtonSchedule.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
-export class ButtonSchedule extends React.Component {
-    render() {
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "schedule", tooltip: "Schedule", iconSize: 20, icon: "schedule", variant: "text" }, this.props)));
-    }
-}
+export const ButtonSchedule = (props) => {
+    return (React.createElement(SimpleButton, { "data-name": "schedule", tooltip: "Schedule", iconSize: 20, icon: "schedule", variant: "text", ...props }));
+};

package/src/View/Components/Buttons/ButtonShare.d.ts

@@ -10,6 +10,6 @@ interface ButtonShareState {
 }
 export declare class ButtonShare extends React.Component<ButtonShareProps, ButtonShareState> {
     constructor(props: ButtonShareProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/src/View/Components/Buttons/ButtonShare.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 import { AdaptablePopupTeamSharing } from '../Popups/AdaptablePopupTeamSharing';
@@ -8,10 +7,9 @@ export class ButtonShare extends React.Component {
         this.state = { open: false };
     }
     render() {
-        var _a;
-        const _b = this.props, { onShare, Header } = _b, buttonProps = __rest(_b, ["onShare", "Header"]);
+        const { onShare, Header, ...buttonProps } = this.props;
         return (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton, Object.assign({ "data-name": "share", tooltip: "Share", variant: "text", icon: "folder-shared", iconSize: (_a = buttonProps.iconSize) !== null && _a !== void 0 ? _a : 24, onClick: () => this.setState({ open: true }) }, buttonProps)),
+            React.createElement(SimpleButton, { "data-name": "share", tooltip: "Share", variant: "text", icon: "folder-shared", iconSize: buttonProps.iconSize ?? 24, onClick: () => this.setState({ open: true }), ...buttonProps }),
             this.state.open && (React.createElement(AdaptablePopupTeamSharing, { header: Header, showPopup: true, onClose: () => this.setState({ open: false }), onConfirm: (config) => {
                     this.setState({ open: false });
                     onShare(config);

package/src/View/Components/Buttons/ButtonShow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
 export declare class ButtonShow extends React.Component<SimpleButtonProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Buttons/ButtonShow.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonShow extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "show", tooltip: "Show", iconSize: 18, icon: "check", variant: "text" }, this.props)));
+        return (React.createElement(SimpleButton, { "data-name": "show", tooltip: "Show", iconSize: 18, icon: "check", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonShowChart.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
 export declare class ButtonShowChart extends React.Component<SimpleButtonProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Buttons/ButtonShowChart.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonShowChart extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "show-chart", tooltip: "Show Chart", iconSize: 20, icon: "chart", variant: "text" }, this.props)));
+        return (React.createElement(SimpleButton, { "data-name": "show-chart", tooltip: "Show Chart", iconSize: 20, icon: "chart", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonStop.d.ts

@@ -3,5 +3,5 @@ import { SimpleButtonProps } from '../../../components/SimpleButton';
 export interface StopButtonProps extends SimpleButtonProps {
 }
 export declare class ButtonStop extends React.Component<StopButtonProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Buttons/ButtonStop.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonStop extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "stop", tooltip: "Stop", iconSize: 20, icon: "stop", variant: "text" }, this.props)));
+        return (React.createElement(SimpleButton, { "data-name": "stop", tooltip: "Stop", iconSize: 20, icon: "stop", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonUndo.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
 export declare class ButtonUndo extends React.Component<SimpleButtonProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Buttons/ButtonUndo.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonUndo extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "undo", iconSize: 20, tooltip: "Undo", icon: 'undo', variant: "text" }, this.props)));
+        return (React.createElement(SimpleButton, { "data-name": "undo", iconSize: 20, tooltip: "Undo", icon: 'undo', variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonUnsuspend.d.ts

@@ -4,5 +4,5 @@ export interface PauseButtonProps extends SimpleButtonProps {
     fillColor?: 'neutral' | 'red';
 }
 export declare class ButtonUnsuspend extends React.Component<PauseButtonProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Buttons/ButtonUnsuspend.js

@@ -12,6 +12,6 @@ export class ButtonUnsuspend extends React.Component {
             : {
                 name: 'resume',
             };
-        return (React.createElement(SimpleButton, Object.assign({ "data-name": "unsuspend", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text" }, this.props)));
+        return (React.createElement(SimpleButton, { "data-name": "unsuspend", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/EntityListActionButtons.d.ts

@@ -35,5 +35,5 @@ export interface EntityListActionButtonsProps extends React.ClassAttributes<Enti
 }
 export declare class EntityListActionButtons extends React.Component<EntityListActionButtonsProps, {}> {
     static defaultProps: EntityListActionButtonsProps;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -29,7 +29,6 @@ export const CellPopup = React.forwardRef((props, ref) => {
     });
     const OVERLAY_ID = 'cell-overlay';
     const showCellPopupContent = () => {
-        var _a;
         const cellSelector = `[row-id="${props.primaryKeyValue}"] [col-id="${props.columnId}"]`;
         const alignTo = document.querySelector(cellSelector);
         if (!alignTo) {
@@ -45,7 +44,7 @@ export const CellPopup = React.forwardRef((props, ref) => {
                 ['TopCenter', 'BottomCenter'],
                 ['BottomCenter', 'TopCenter'],
             ],
-            constrainTo: (_a = adaptable.getAgGridContainerElement()) !== null && _a !== void 0 ? _a : true,
+            constrainTo: adaptable.getAgGridContainerElement() ?? true,
             alignTo: getRect(alignTo),
         };
         showOverlay(() => props.children, showOverlayOptions);

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { BoxProps } from 'rebass';
+export interface AdaptableColumnFilterProps {
+    columnId: string;
+    padding?: BoxProps['p'];
+    wrapperProps?: BoxProps;
+}
+/**
+ * This wrapper knows about predicates.
+ * It transforms predicates in QlPredicates.
+ */
+export declare const AdaptableColumnFilter: React.FunctionComponent<AdaptableColumnFilterProps>;

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ColumnFilterComponent } from './ColumnFilter';
+import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
+/**
+ * This wrapper knows about predicates.
+ * It transforms predicates in QlPredicates.
+ */
+export const AdaptableColumnFilter = (props) => {
+    const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = useAdaptableFilterWrapper(props.columnId);
+    return (React.createElement(ColumnFilterComponent, { wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: handlePredicateChange }));
+};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ColumnFilterProps } from '../../../Utilities/Interface/ColumnFilterProps';
+export interface AdaptableColumnFilterProps extends ColumnFilterProps {
+}
+/**
+ * This wrapper knows about predicates.
+ * It transforms predicates in QlPredicates.
+ */
+export declare const AdaptableFloatingFilter: React.FunctionComponent<AdaptableColumnFilterProps>;

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useAdaptable } from '../../AdaptableContext';
+import { FloatingFilter } from './FloatingFilter';
+import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
+/**
+ * This wrapper knows about predicates.
+ * It transforms predicates in QlPredicates.
+ */
+export const AdaptableFloatingFilter = (props) => {
+    const adaptable = useAdaptable();
+    const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = useAdaptableFilterWrapper(props.Column.columnId);
+    if (!column) {
+        return null;
+    }
+    return (React.createElement(FloatingFilter, { onKeydown: (event) => {
+            const key = event.key;
+            const predicate = adaptable.api.filterApi.columnFilterApi.internalApi.findPredicateDefByShortcut(key, column);
+            if (predicate) {
+                event.stopPropagation();
+                event.preventDefault();
+                handleOnChange([
+                    {
+                        PredicateId: predicate.id,
+                        Inputs: [],
+                    },
+                ]);
+            }
+        }, onClear: handleClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: (newPredicate) => {
+            handlePredicateChange(newPredicate);
+        } }));
+};

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,144 @@
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import SimpleButton from '../../../components/SimpleButton';
+import { ColumnFilterInputList } from './components/ColumnFilterInputList';
+import { usePredicateDef } from './hooks';
+import Radio from '../../../components/Radio';
+import { useAdaptable } from '../../AdaptableContext';
+import { Select } from '../../../components/Select';
+const ColumnFilterPredicateDropdown = (props) => {
+    const predicateDef = usePredicateDef(props.predicate?.operator, props.predicateDefs);
+    const options = props.predicateDefs.map((predicateDef) => {
+        return {
+            label: (React.createElement(Box, { display: 'flex', alignItems: "center" },
+                React.createElement(SimpleButton, { 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(Box, { display: 'flex', alignItems: "center", style: {
+            //@ts-ignore ignore
+            '--ab-cmp-input__background': 'var(--ab-color-primary)',
+        } },
+        React.createElement(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(Box, { mb: 3 },
+        React.createElement(Flex, { mb: 2 },
+            React.createElement(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }),
+            React.createElement(Flex, { alignItems: "center", ml: 2 },
+                React.createElement(SimpleButton, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }))),
+        React.createElement(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(
+            Flex,
+            { flex: 1 },
+            React.createElement(Radio, { mr: 2, onClick: () => props.onChange('AND'), checked: props.operator === 'AND' }, "AND"),
+            React.createElement(Radio, { mr: 2, onClick: () => props.onChange('OR'), checked: props.operator === 'OR' }, "OR")
+        ))
+    );
+};
+export const ColumnFilterComponent = (props) => {
+    const adaptable = 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(Flex, { m: 2 },
+            React.createElement(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }),
+            React.createElement(SimpleButton, { ml: 2, onClick: () => onPredicateChange({ operator: 'AND', args: [] }) }, "Clear All")),
+        React.createElement(Flex, { flexDirection: "column", className: "ab-ColumnFilter", flex: 1, minHeight: 0, ...props.wrapperProps },
+            React.createElement(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(Box, { pt: 2 },
+                React.createElement(SimpleButton, { tone: "accent", variant: "raised", onClick: applyFilter }, "Apply Filter"))) : null)));
+};

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,32 @@
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { ColumnSelector } from '../Selectors/ColumnSelector';
+import { AdaptableColumnFilter } from './AdaptableColumnFilter';
+import { useAdaptable } from '../../AdaptableContext';
+import { AdaptableIconComponent } from '../AdaptableIconComponent';
+export const ColumnFilterWindow = (props) => {
+    const { api } = useAdaptable();
+    const { value: initialColumnId } = props?.popupProps;
+    const [columnId, setColumnId] = React.useState(initialColumnId);
+    React.useEffect(() => {
+        setColumnId(initialColumnId);
+    }, [props.popupProps.value]);
+    return (React.createElement(Flex, { flex: 1, minHeight: 0, height: "100%", flexDirection: "column", p: 2, className: "ab-ColumnFilterWindow" },
+        React.createElement(Box, { mb: 2 },
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Column" },
+                    React.createElement(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(Flex, null,
+                                    label,
+                                    React.createElement(Box, { flex: 1 }),
+                                    React.createElement(AdaptableIconComponent, { icon: { name: 'filter' } })));
+                            }
+                            return label;
+                        }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId })))),
+        React.createElement(AdaptableColumnFilter, { columnId: columnId })));
+};

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>;