@adaptabletools/adaptable 15.2.0-canary.5 → 15.2.0

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -215,6 +215,7 @@ exports.DefaultAdaptableOptions = {
         quickFilterWildcards: {},
         quickFilterDebounce: 250,
         showValuesCount: undefined,
+        quickFilterValuesWidth: 180,
     },
     searchOptions: {
         excludeColumnFromQuickSearch: undefined,

package/src/Utilities/Services/ThemeService.d.ts

@@ -9,4 +9,5 @@ export declare class ThemeService implements IThemeService {
     onThemeChanged: () => void;
     applyNewThemeVariables(theme: AdaptableTheme): void;
     destroy(): void;
+    showMissingThemeFiles(theme: AdaptableTheme): void;
 }

package/src/Utilities/Services/ThemeService.js

@@ -8,6 +8,9 @@ class ThemeService {
         this.onThemeChanged = () => {
             const currentTheme = this.api.themeApi.getCurrentThemeObject();
             this.applyNewThemeVariables(currentTheme);
+            // this needs to be called after variables are set
+            // as it may show the warning for a custom/runtime theme
+            this.showMissingThemeFiles(currentTheme);
         };
         this.api = api;
         this.subscribe();
@@ -29,10 +32,12 @@ class ThemeService {
         };
     }
     applyNewThemeVariables(theme) {
-        var _a;
-        const variables = (_a = theme.CSSVariables) !== null && _a !== void 0 ? _a : {};
+        const variables = theme.CSSVariables;
+        if (!variables || Object.keys(variables).length === 0) {
+            return;
+        }
         let str = `html.${this.api.themeApi.internalApi.getThemeClassName(theme.Name)} {
-      --ab-theme-loaded: custom-theme;
+      --ab-theme-loaded: ab--theme-${theme.Name};
     `;
         for (const [key, value] of Object.entries(variables)) {
             if (key.includes('--')) {
@@ -47,5 +52,35 @@ class ThemeService {
         this.unsubscribe();
         document.adoptedStyleSheets = [...document.adoptedStyleSheets].filter((sheet) => sheet !== this.styleSheetObject);
     }
+    showMissingThemeFiles(theme) {
+        // run time defined theme
+        // because it may be an empty theme
+        if (theme.Source === 'User') {
+            return;
+        }
+        const themeName = theme.Name;
+        const adaptable = this.api.internalApi.getAdaptableInstance();
+        const logger = adaptable.logger;
+        const documentElement = document.documentElement;
+        const computedDocumentStyle = getComputedStyle(documentElement);
+        const [abLoaded, abThemeLoaded] = ['--ab-loaded', '--ab-theme-loaded'].map((variable) => {
+            let val = computedDocumentStyle.getPropertyValue(variable);
+            if (typeof val === 'string' && val.trim) {
+                val = val.trim();
+            }
+            return val;
+        });
+        if (abLoaded !== '777') {
+            logger.consoleError('Please import Adaptable styles from "@adaptabletools/adaptable/index.css"');
+        }
+        // every theme should define a custom css variable: --ab-theme-loaded: <themeName> defined on the document element.
+        if (abThemeLoaded !== themeName) {
+            logger.consoleWarn(`Theme "${themeName}" doesn't seem to be loaded! Make sure you import the css file for the "${themeName}" theme!
+
+If it's a default theme, try
+
+import "@adaptabletools/adaptable/themes/${themeName}.css"`);
+        }
+    }
 }
 exports.ThemeService = ThemeService;

package/src/View/Alert/Wizard/AlertNotificationWizardSection.js

@@ -42,7 +42,7 @@ const AlertPreview = (_a) => {
         const Buttons = (((_a = alertForm === null || alertForm === void 0 ? void 0 : alertForm.Buttons) === null || _a === void 0 ? void 0 : _a.length) ? alertForm.Buttons : DEFAULT_BUTTONS).map(mapButtons);
         const result = {
             alertType: 'generic',
-            header: api.alertApi.internalApi.getAlertMessageTitle(alertDefinition),
+            header: api.alertApi.internalApi.getAlertMessageHeader(alertDefinition),
             message: api.alertApi.internalApi.getAlertDescription(alertDefinition),
             alertDefinition: Object.assign(Object.assign({}, alertDefinition), { AlertForm: Object.assign(Object.assign({}, alertForm), { Buttons }) }),
         };

package/src/View/Components/AdaptableDateInput/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { AdaptableInputProps } from '../AdaptableInput';
 export declare type AdaptableDateInputProps = AdaptableInputProps;
-declare const AdaptableDateInput: React.ForwardRefExoticComponent<Omit<import("../../../components/Input").InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "color" | "content" | "display" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textAlign" | "translate" | "verticalAlign" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bg" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "variant" | "tx" | "sx" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
 export default AdaptableDateInput;

package/src/View/Components/FilterForm/FilterForm.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
+const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
 const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
 const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
@@ -23,7 +24,6 @@ const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext")
 const CheckBox_1 = require("../../../components/CheckBox");
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
-const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
 const panelStyle = {
     width: '100%',
     minWidth: 150,

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -41,15 +41,17 @@ const ListBoxFilterForm = (props) => {
         }
     };
     const columnValuesItemsElements = props.columnDistinctValues.map((distinctValue, index) => {
-        var _a, _b, _c;
         const isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
         const columnLabel = distinctValue.label;
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel)) {
             return null;
         }
+        const noMatch = StringExtensions_1.StringExtensions.IsNullOrEmpty(FilterValue.toLocaleLowerCase()) ||
+            StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase()) ||
+            columnLabel.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0;
         if (!props.suppressClientSideFilter &&
             StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
-            ((_c = (_a = columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase) === null || _a === void 0 ? void 0 : (_b = _a.call(columnLabel)).indexOf) === null || _c === void 0 ? void 0 : _c.call(_b, FilterValue.toLocaleLowerCase())) < 0) {
+            noMatch) {
             return null;
         }
         if (props.useAgGridStyle) {

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

@@ -1,10 +1,5 @@
 /// <reference types="react" />
 import { ColumnFilterContext } from '../../../Utilities/Interface/ColumnFilterContext';
-import { ColumnFilter } from '../../../types';
 export interface QuickFilterFormState {
-    filter: ColumnFilter;
-    distinctColumnValues: any[];
-    isDistinctColumnValuesLoading: boolean;
-    suppressClientSideFilter: boolean;
 }
 export declare const QuickFilterFormReact: (FilterContext: ColumnFilterContext) => JSX.Element;

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -5,128 +5,39 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
+const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
 const react_redux_1 = require("react-redux");
 const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const icons_1 = require("../../../components/icons");
 const rebass_1 = require("rebass");
-const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
 const CheckBox_1 = require("../../../components/CheckBox");
-const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
-const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
-const date_fns_1 = require("date-fns");
-const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
 const AdaptableIconComponent_1 = require("../../../components/AdaptableIconComponent");
+const QuickFilterValues_1 = require("./QuickFilterValues");
 class QuickFilterFormComponent extends React.Component {
-    //private debounceTime =
     constructor(props) {
         var _a, _b;
         super(props);
+        this.shouldOpenValuesDropdown = false;
         this._isMounted = false;
-        this.handleFilterChange = (filter) => {
-            if (this.state.suppressClientSideFilter) {
-                this.loadPermittedValues(filter);
-            }
-        };
-        this.loadPermittedValues = async (filter = '') => {
-            const { values, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.optionsApi.getFilterOptions().showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
-            if (this._isMounted) {
-                this.setState({
-                    distinctColumnValues: values,
-                    suppressClientSideFilter,
-                    isDistinctColumnValuesLoading: false,
-                });
-            }
-        };
-        this.debouncedAddFilter = (0, debounce_1.default)(() => this.props.onAddColumnFilter(this.state.filter), (_a = this.props.api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.quickFilterDebounce);
-        this.debouncedEditFilter = (0, debounce_1.default)(() => this.props.onEditColumnFilter(this.state.filter), (_b = this.props.api.optionsApi.getFilterOptions()) === null || _b === void 0 ? void 0 : _b.quickFilterDebounce);
-        this.debouncedLoadPermittedValues = (0, debounce_1.default)(() => this.loadPermittedValues(), 500);
-        const filter = this.getFilterFromProps();
+        this.debouncedAddFilter = (0, debounce_1.default)((filter) => this.props.onAddColumnFilter(filter), (_a = this.props.api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.quickFilterDebounce);
+        this.debouncedEditFilter = (0, debounce_1.default)((filter) => this.props.onEditColumnFilter(filter), (_b = this.props.api.optionsApi.getFilterOptions()) === null || _b === void 0 ? void 0 : _b.quickFilterDebounce);
         this._isMounted = true;
-        this.state = {
-            filter,
-            suppressClientSideFilter: false,
-            isDistinctColumnValuesLoading: false,
-            distinctColumnValues: [],
-        };
-    }
-    componentDidMount() {
-        var _a, _b, _c;
-        if (this.hasValuesPredicate((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.Predicate)) {
-            this.loadPermittedValues();
-        }
-        this.unsubscribeOnCellChanged = this.props.api.eventApi.on('CellChanged', (cellChangedInfo) => {
-            this.handleGridValueChange(cellChangedInfo.cellChange.column.columnId);
-        });
-        this.unsubscribeOnGridDataChanged = this.props.api.eventApi.on('GridDataChanged', () => {
-            // there is no way to find out if the changed rows are relevant for this filter, so we have to update it every time :/
-            this.handleGridValueChange();
-        });
-        if ((_c = this.props.api.optionsApi.getFilterOptions()) === null || _c === void 0 ? void 0 : _c.showDistinctFilteredValuesOnly) {
-            this.unsubscribeOnGridFiltered = this.props.api.internalApi
-                .getAdaptableInstance()
-                ._on('GridFiltered', () => {
-                const filter = this.getFilterFromProps();
-                if (this.hasValuesPredicate(filter === null || filter === void 0 ? void 0 : filter.Predicate)) {
-                    this.loadPermittedValues();
-                }
-            });
-        }
     }
     componentWillUnmount() {
-        var _a, _b, _c;
         this._isMounted = false;
-        (_a = this.unsubscribeOnCellChanged) === null || _a === void 0 ? void 0 : _a.call(this);
-        (_b = this.unsubscribeOnGridDataChanged) === null || _b === void 0 ? void 0 : _b.call(this);
-        if (this.unsubscribeOnGridFiltered) {
-            (_c = this.unsubscribeOnGridFiltered) === null || _c === void 0 ? void 0 : _c.call(this);
-        }
     }
     isFilterDisabled() {
-        return Boolean(this.state.filter.IsSuspended);
-    }
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        const filter = this.getFilterFromProps(nextProps);
-        if ((0, isEqual_1.default)(filter, this.state.filter)) {
-            return;
-        }
-        this.setState({ filter });
-        if (this.hasValuesPredicate(filter === null || filter === void 0 ? void 0 : filter.Predicate)) {
-            this.setState({ isDistinctColumnValuesLoading: true });
-            this.loadPermittedValues();
-        }
-    }
-    getFilterFromProps(props = this.props) {
-        const filter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.columnId);
-        const filterOptions = props.api.optionsApi.getFilterOptions();
-        if (filter) {
-            return filter;
-        }
-        if (!filter && props.currentColumn.dataType === 'Number') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
-        }
-        if (!filter && props.currentColumn.dataType === 'String') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
-        }
-        if (!filter && props.currentColumn.dataType === 'Date') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
-        }
-        if (!filter && props.currentColumn.dataType === 'Boolean') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.columnId, 'BooleanToggle', [
-                'all',
-            ]);
-        }
-        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.columnId, null, null);
+        return Boolean(this.props.columnFilter.IsSuspended);
     }
     render() {
-        const { filter } = this.state;
+        const { columnFilter } = this.props;
         const predicateDefs = this.props.api.filterApi.getFilterPredicateDefsForColumn(this.props.currentColumn);
-        const activePredicateDef = this.props.api.predicateApi.getPredicateDefById(filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId);
+        const activePredicateDef = this.props.api.predicateApi.getPredicateDefById(columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate.PredicateId);
         if (!this.props.currentColumn || !this.props.currentColumn.filterable) {
             return null;
         }
@@ -148,30 +59,31 @@ class QuickFilterFormComponent extends React.Component {
         }
         return (React.createElement(React.Fragment, null,
             showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { className: "ab-QuickFilter__dropdown", flexDirection: "column", "data-name": "quick-filter", fontSize: 2 },
-                    (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) && (React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
+                    (columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate.PredicateId) && (React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } },
                             React.createElement(icons_1.Icon, { name: "delete" })),
                         "Clear")),
-                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { "data-name": filter.Predicate.PredicateId, disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
+                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { "data-name": columnFilter.Predicate.PredicateId, disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } }, this.renderPredicateIcon(p)),
                         p.label))))) },
-                React.createElement(SimpleButton_1.default, { "data-name": filter.Predicate.PredicateId, style: {
+                React.createElement(SimpleButton_1.default, { "data-name": columnFilter.Predicate.PredicateId, style: {
                         borderRadius: 0,
                         borderColor: 'var(--ab-color-primarydark)',
                     } }, this.renderPredicateIcon(activePredicateDef)))),
-            showQuickFilterInput && this.renderLabel(filter, activePredicateDef),
-            showQuickFilterInput && this.renderPredicateInput(activePredicateDef, filter)));
+            showQuickFilterInput && this.renderLabel(columnFilter, activePredicateDef),
+            showQuickFilterInput && this.renderPredicateInput(activePredicateDef, columnFilter)));
     }
     renderLabel(filter, activePredicateDef) {
         if (this.hasValuesPredicate(filter === null || filter === void 0 ? void 0 : filter.Predicate)) {
-            if (ArrayExtensions_1.default.IsNullOrEmpty(filter.Predicate.Inputs) &&
-                ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues)) {
-                return this.renderNoValuesDropdown(filter);
-            }
-            return this.renderValuesDropdown(filter);
+            return (React.createElement(QuickFilterValues_1.QuickFilterValues, { api: this.props.api, currentColumn: this.props.currentColumn, isFilterDisabled: this.isFilterDisabled(), columnFilter: filter, clearColumnFilter: () => this.clearFilter(), updateColumnFilter: (columnFilter) => this.updateFilter(columnFilter), registerValuesDropdownApi: (api) => {
+                    if (api && this.shouldOpenValuesDropdown) {
+                        api.show();
+                        this.shouldOpenValuesDropdown = false;
+                    }
+                }, quickFilterValuesTrigger: this.props.quickFilterValuesTrigger }));
         }
         return (activePredicateDef &&
-            (activePredicateDef === null || activePredicateDef === void 0 ? void 0 : activePredicateDef.inputs) === undefined && (React.createElement(rebass_1.Box, { color: this.isFilterDisabled() && 'var(--ab-color-text-on-primary)', disabled: this.isFilterDisabled(), p: 1, alignSelf: "center" }, activePredicateDef.label)));
+            (activePredicateDef === null || activePredicateDef === void 0 ? void 0 : activePredicateDef.inputs) === undefined && (React.createElement(rebass_1.Box, { color: this.isFilterDisabled() ? undefined : 'var(--ab-color-text-on-primary)', disabled: this.isFilterDisabled(), p: 1, alignSelf: "center" }, activePredicateDef.label)));
     }
     renderPredicateIcon(predicateDef) {
         if (!predicateDef || !predicateDef.icon) {
@@ -223,117 +135,39 @@ class QuickFilterFormComponent extends React.Component {
                 } }));
         });
     }
-    renderNoValuesDropdown(filter) {
-        return (React.createElement(SimpleButton_1.default, { disabled: true, style: {
-                flex: 1,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                borderRadius: 0,
-                borderLeftWidth: 0,
-                borderColor: 'var(--ab-color-primarydark)',
-            } }, 'No Column Values'));
-    }
-    renderValuesDropdown(filter) {
-        let showEvent = 'mouseenter';
-        if (this.props.quickFilterValuesTrigger === 'click') {
-            showEvent = 'click';
-        }
-        let selectedValues = filter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values';
-        if (filter.Predicate.Inputs.length) {
-            selectedValues = filter.Predicate.Inputs.map((input) => {
-                var _a, _b;
-                const label = (_b = (_a = this.state.distinctColumnValues) === null || _a === void 0 ? void 0 : _a.find((distinctValue) => {
-                    if (input instanceof Date) {
-                        return (0, date_fns_1.isSameDay)(input, distinctValue.value);
-                    }
-                    return distinctValue.value === input;
-                })) === null || _b === void 0 ? void 0 : _b.label;
-                return label !== null && label !== void 0 ? label : input;
-            }).join(', ');
-        }
-        return (React.createElement(OverlayTrigger_1.default, { showEvent: showEvent, 
-            // cannot hide on blur, because the form input receives the input when this is opened
-            hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
-                this.valuesDropdown = api;
-            }, render: () => {
-                var _a;
-                return (React.createElement(rebass_1.Flex, { onMouseEnter: () => {
-                        var _a;
-                        if (showEvent === 'click') {
-                            // For showEvent=mousenter this is not needed.
-                            // When mouseenter is triggered on the overlay, onShowFn is called, the overlay is no longer hidden.
-                            // But in this case because the trigger is click, another show is not triggered.
-                            (_a = this.valuesDropdown) === null || _a === void 0 ? void 0 : _a.show();
-                        }
-                    }, "data-name": "quick-filter-form", flexDirection: "column", style: {
-                        fontSize: 'var(--ab-font-size-2)',
-                        border: '1px solid var(--ab-color-primarydark)',
-                        background: 'var(--ab-color-defaultbackground)',
-                        zIndex: 1000,
-                    } },
-                    React.createElement(rebass_1.Flex, { m: 2 },
-                        React.createElement(SimpleButton_1.default, { onClick: () => this.clearFilter() }, "Clear Filter"),
-                        ((_a = this.props.api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) == false && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => this.updateFilter(this.state.filter) }, "Apply Filter"))),
-                    React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: [], columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: this.state.filter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })));
-            } },
-            React.createElement(SimpleButton_1.default, { "data-name": 'Select Values', style: {
-                    flex: 1,
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    borderRadius: 0,
-                    borderLeftWidth: 0,
-                    borderColor: 'var(--ab-color-primarydark)',
-                }, disabled: this.isFilterDisabled() ||
-                    ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, selectedValues)));
-    }
     onColumnValuesChange(columnValues) {
         var _a;
-        const { filter } = this.state;
-        filter.Predicate = { PredicateId: filter.Predicate.PredicateId, Inputs: columnValues };
+        const columnFilter = Object.assign({}, this.props.columnFilter);
+        columnFilter.Predicate = {
+            PredicateId: columnFilter.Predicate.PredicateId,
+            Inputs: columnValues,
+        };
         if ((_a = this.props.api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) {
-            this.updateFilter(filter);
+            this.updateFilter(columnFilter);
         }
         else {
-            this.setState({ filter });
+            this.setState({ transientColumnFilter: columnFilter });
         }
     }
     selectColumnPredicate(predicateId) {
         var _a;
-        const filter = Object.assign({}, this.state.filter);
+        const columnFilter = Object.assign({}, this.props.columnFilter);
         const predicateDef = this.props.api.predicateApi.getPredicateDefById(predicateId);
-        filter.Predicate = {
+        columnFilter.Predicate = {
             PredicateId: predicateId,
             Inputs: ((_a = predicateDef.inputs) !== null && _a !== void 0 ? _a : []).map((i) => { var _a; return (_a = i.defaultValue) !== null && _a !== void 0 ? _a : ''; }),
         };
-        this.updateFilter(filter);
+        this.updateFilter(columnFilter);
         if (predicateId === 'Values' || predicateId === 'ExcludeValues') {
-            this.loadPermittedValues();
-            requestAnimationFrame(() => {
-                if (this.valuesDropdown) {
-                    this.valuesDropdown.show();
-                }
-            });
+            this.shouldOpenValuesDropdown = true;
         }
     }
-    handleGridValueChange(changedColumnId) {
-        var _a, _b, _c, _d;
-        if (!this.hasValuesPredicate((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.Predicate)) {
-            return;
-        }
-        if (changedColumnId && changedColumnId !== ((_d = (_c = this.state) === null || _c === void 0 ? void 0 : _c.filter) === null || _d === void 0 ? void 0 : _d.ColumnId)) {
-            return;
-        }
-        this.debouncedLoadPermittedValues();
-    }
     updateFilter(filter) {
-        this.setState({ filter });
         if (filter.Uuid) {
-            this.debouncedEditFilter();
+            this.debouncedEditFilter(filter);
         }
         else {
-            this.debouncedAddFilter();
+            this.debouncedAddFilter(filter);
         }
     }
     changeColumnPredicateInput(value, index) {
@@ -342,10 +176,10 @@ class QuickFilterFormComponent extends React.Component {
             this.selectColumnPredicate(predicateId);
         }
         else {
-            const { filter } = this.state;
-            filter.Predicate.Inputs = filter.Predicate.Inputs || [];
-            filter.Predicate.Inputs[index] = value;
-            this.updateFilter(filter);
+            const columnFilter = Object.assign({}, this.props.columnFilter);
+            columnFilter.Predicate.Inputs = columnFilter.Predicate.Inputs || [];
+            columnFilter.Predicate.Inputs[index] = value;
+            this.updateFilter(columnFilter);
         }
     }
     getPredicateIdForShortcutValue(value) {
@@ -353,17 +187,37 @@ class QuickFilterFormComponent extends React.Component {
         return (_a = this.props.api.filterApi.internalApi.findPredicateDefByShortcut(value, this.props.currentColumn)) === null || _a === void 0 ? void 0 : _a.id;
     }
     clearFilter() {
-        const { filter } = this.state;
-        this.props.api.filterApi.clearColumnFilterForColumn(filter.ColumnId);
+        const columnFilter = Object.assign({}, this.props.columnFilter);
+        this.props.api.filterApi.clearColumnFilterForColumn(columnFilter.ColumnId);
     }
     hasValuesPredicate(predicate) {
         return this.props.api.predicateApi.internalApi.hasPredicateValues(predicate);
     }
 }
+function getColumnFilterWithDefault(state, props) {
+    const columnFilter = (0, LayoutRedux_1.getColumnFilterSelector)(state).find((cf) => cf.ColumnId == props.currentColumn.columnId);
+    if (columnFilter) {
+        return columnFilter;
+    }
+    const filterOptions = props.api.optionsApi.getFilterOptions();
+    if (!columnFilter && props.currentColumn.dataType === 'Number') {
+        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
+    }
+    if (!columnFilter && props.currentColumn.dataType === 'String') {
+        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
+    }
+    if (!columnFilter && props.currentColumn.dataType === 'Date') {
+        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
+    }
+    if (!columnFilter && props.currentColumn.dataType === 'Boolean') {
+        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', ['all']);
+    }
+    return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, null, null);
+}
 function mapStateToProps(state, ownProps) {
     return {
         currentColumn: ownProps.currentColumn,
-        columnFilters: (0, LayoutRedux_1.getColumnFilterSelector)(state),
+        columnFilter: getColumnFilterWithDefault(state, ownProps),
     };
 }
 function mapDispatchToProps(dispatch) {

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ColumnFilter } from '../../../PredefinedConfig/Common/ColumnFilter';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { FilterOptions } from '../../../AdaptableOptions/FilterOptions';
+import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
+export interface QuickFilterValuesProps {
+    api: AdaptableApi;
+    currentColumn: AdaptableColumn;
+    isFilterDisabled: boolean;
+    columnFilter: ColumnFilter;
+    clearColumnFilter: () => void;
+    updateColumnFilter: (filter: ColumnFilter) => void;
+    registerValuesDropdownApi: (api: {
+        show: () => any;
+        hide: () => any;
+    }) => void;
+    quickFilterValuesTrigger?: FilterOptions['quickFilterValuesTrigger'];
+}
+export declare const QuickFilterValues: (props: QuickFilterValuesProps) => JSX.Element;