@adaptabletools/adaptable 15.2.0-canary.4 → 15.2.0-canary.6

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;

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

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickFilterValues = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const date_fns_1 = require("date-fns");
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
+const rebass_1 = require("rebass");
+const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
+const QuickFilterValues = (props) => {
+    const { api } = props;
+    const valuesDropdownRef = React.useRef(null);
+    const [quickFilterValues, setQuickFilterValues] = React.useState({ values: [], suppressClientSideFilter: false, dataLoadIsComplete: false });
+    const [isDistinctColumnValuesLoading, setIsDistinctColumnValuesLoading] = React.useState(false);
+    const [textFilterValue, setTextFilterValue] = React.useState('');
+    const [valuesLoadTrigger, setValuesLoadTrigger] = React.useState({
+        counter: 0,
+    });
+    const [transientColumnFilter, setTransientColumnFilter] = React.useState(null);
+    const onColumnValueSelectedChange = (columnValues) => {
+        var _a;
+        const { columnFilter } = props;
+        columnFilter.Predicate = {
+            PredicateId: columnFilter.Predicate.PredicateId,
+            Inputs: columnValues,
+        };
+        if ((_a = api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) {
+            props.updateColumnFilter(columnFilter);
+        }
+        else {
+            setTransientColumnFilter(columnFilter);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (valuesLoadTrigger.counter === 0) {
+            // skip the first render
+            return;
+        }
+        // loadPermittedValues
+        let ignore = false;
+        setIsDistinctColumnValuesLoading(true);
+        api.gridApi.internalApi
+            .getDistinctFilterDisplayValuesForColumn(props.columnFilter.ColumnId, textFilterValue, api.optionsApi.getFilterOptions().showDistinctFilteredValuesOnly)
+            .then((distinctFilterDisplayValues) => {
+            if (ignore) {
+                return;
+            }
+            setQuickFilterValues(Object.assign(Object.assign({}, distinctFilterDisplayValues), { dataLoadIsComplete: true }));
+            setIsDistinctColumnValuesLoading(false);
+        });
+        return () => {
+            ignore = true;
+        };
+    }, [valuesLoadTrigger]);
+    const onVisibleChange = (0, react_1.useCallback)((visible) => {
+        if (visible) {
+            setValuesLoadTrigger(Object.assign(Object.assign({}, valuesLoadTrigger), { counter: valuesLoadTrigger.counter + 1 }));
+        }
+        else {
+            setQuickFilterValues({
+                values: [],
+                suppressClientSideFilter: false,
+                dataLoadIsComplete: false,
+            });
+            setTextFilterValue('');
+        }
+    }, [valuesLoadTrigger, quickFilterValues]);
+    const loadedDataIsEmpty = quickFilterValues.dataLoadIsComplete &&
+        ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(quickFilterValues.values);
+    const renderNoValuesDropdown = () => {
+        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'));
+    };
+    if (ArrayExtensions_1.default.IsNullOrEmpty(props.columnFilter.Predicate.Inputs) && loadedDataIsEmpty) {
+        return renderNoValuesDropdown();
+    }
+    const handleFilterChange = (filterText) => {
+        setTextFilterValue(filterText);
+        if (quickFilterValues.suppressClientSideFilter) {
+            setValuesLoadTrigger(Object.assign(Object.assign({}, valuesLoadTrigger), { counter: valuesLoadTrigger.counter + 1 }));
+        }
+    };
+    let showEvent = 'mouseenter';
+    if (props.quickFilterValuesTrigger === 'click') {
+        showEvent = 'click';
+    }
+    let selectedValues = props.columnFilter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values';
+    if (props.columnFilter.Predicate.Inputs.length) {
+        selectedValues = props.columnFilter.Predicate.Inputs.map((input) => {
+            var _a, _b;
+            const label = (_b = (_a = quickFilterValues.values) === 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(', ');
+    }
+    const quickFilterValuesWidth = props.api.optionsApi.getAdaptableOptions().filterOptions.quickFilterValuesWidth;
+    const getPopoverWidth = (targetWidth) => {
+        if (quickFilterValuesWidth === 'auto') {
+            return Math.max(180, targetWidth);
+        }
+        if (typeof quickFilterValuesWidth === 'number') {
+            return quickFilterValuesWidth;
+        }
+        return null;
+    };
+    const currentOverlayVisible = (0, react_1.useRef)(false);
+    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) => {
+            valuesDropdownRef.current = api;
+            props.registerValuesDropdownApi(api);
+        }, onVisibleChange: (visible) => {
+            if (currentOverlayVisible.current !== visible) {
+                // onVisibleChange() is called redundantly
+                currentOverlayVisible.current = visible;
+                onVisibleChange(visible);
+            }
+        }, render: ({ targetWidth }) => {
+            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 = valuesDropdownRef.current) === 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,
+                    width: getPopoverWidth(targetWidth),
+                } },
+                React.createElement(rebass_1.Flex, { m: 2 },
+                    React.createElement(SimpleButton_1.default, { onClick: () => props.clearColumnFilter() }, "Clear Filter"),
+                    ((_a = api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) == false && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => {
+                            if (transientColumnFilter) {
+                                props.updateColumnFilter(transientColumnFilter);
+                            }
+                        } }, "Apply Filter"))),
+                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: props.isFilterDisabled, suppressClientSideFilter: quickFilterValues.suppressClientSideFilter, isLoading: isDistinctColumnValuesLoading, onFilterChange: handleFilterChange, currentColumn: props.currentColumn, columns: [], columnDistinctValues: quickFilterValues.values, dataType: props.currentColumn.dataType, uiSelectedColumnValues: props.columnFilter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => onColumnValueSelectedChange(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: props.isFilterDisabled || loadedDataIsEmpty }, selectedValues)));
+};
+exports.QuickFilterValues = QuickFilterValues;

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -46,7 +46,7 @@ const CustomSortColumnWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
-                    props.onChange(Object.assign(Object.assign({}, data), { ColumnId: ids[0] }));
+                    props.onChange(Object.assign(Object.assign({}, data), { SortedValues: [], ColumnId: ids[0] }));
                 }, allowReorder: false }))));
 };
 exports.CustomSortColumnWizardSection = CustomSortColumnWizardSection;

package/src/agGrid/Adaptable.js

@@ -2880,7 +2880,7 @@ class Adaptable {
             }
         }));
         /**
-         * Use Case: A visible Column has become row grouped and 'hideColumnWhenGrouped' is true
+         * Use Case: Column Row Grouping changes and 'restoreUngroupedColumns' is true
          * Action: Make the column invisiblel
          */
         this.gridOptions.api.addEventListener(core_1.Events.EVENT_COLUMN_ROW_GROUP_CHANGED, (this.listenerColumnRowGroupChanged = (params) => {
@@ -2891,14 +2891,6 @@ class Adaptable {
             if ((_b = (_a = this.adaptableOptions) === null || _a === void 0 ? void 0 : _a.generalOptions) === null || _b === void 0 ? void 0 : _b.restoreUngroupedColumns) {
                 this.persistColumnIndexBeforeGrouping(params);
             }
-            if (this.adaptableOptions.columnOptions.hideColumnWhenGrouped === true &&
-                params.source !== 'api') {
-                params.columns.forEach((col) => {
-                    if (col.isVisible()) {
-                        this.api.columnApi.hideColumn(col.getColId());
-                    }
-                });
-            }
         }));
         /**
          * Use Case: A Column has finished being resized
@@ -4447,26 +4439,6 @@ class Adaptable {
         else {
             el.classList.remove('ab--custom-mac-like-scrollbars');
         }
-        const computedDocumentStyle = getComputedStyle(el);
-        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') {
-            this.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) {
-            this.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"`);
-        }
     }
     setupRowStyling() {
         // Set any Row Styles (i.e. items without a classname)