@adaptabletools/adaptable 10.0.1 → 10.0.4-canary.1

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

@@ -1,63 +1,15 @@
-import * as React from 'react';
-import * as Redux from 'redux';
-import * as FilterRedux from '../../../Redux/ActionsReducers/FilterRedux';
-import * as PopupRedux from '../../../Redux/ActionsReducers/PopupRedux';
-import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
+/// <reference types="react" />
 import { ColumnFilterContext } from '../../../Utilities/Interface/ColumnFilterContext';
 import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
-import { ModuleViewPopupProps } from '../SharedProps/ModuleViewPopupProps';
-import { UIPrompt } from '../../../Utilities/Interface/MessagePopups';
-import { AdaptableMenuItem } from '../../../PredefinedConfig/Common/Menu';
 import { ColumnFilter } from '../../../PredefinedConfig/FilterState';
-import { AdaptablePredicateDef } from '../../../PredefinedConfig/Common/AdaptablePredicate';
-import { AdaptableApi } from '../../../Api/AdaptableApi';
-interface FilterFormProps extends ModuleViewPopupProps<FilterFormComponent> {
-    currentColumn: AdaptableColumn;
-    api: AdaptableApi;
-    columns: AdaptableColumn[];
-    columnFilters: ColumnFilter[];
-    embedColumnMenu: boolean;
-    showCloseButton: boolean;
-    onClearColumnFilter: (columnfilter: ColumnFilter) => FilterRedux.ColumnFilterClearAction;
-    onAddColumnFilter: (columnFilter: ColumnFilter) => FilterRedux.ColumnFilterAddAction;
-    onEditColumnFilter: (columnFilter: ColumnFilter) => FilterRedux.ColumnFilterEditAction;
-    onSetColumnFilter: (columnFilter: ColumnFilter) => FilterRedux.ColumnFilterSetAction;
-    onHideFilterForm: () => FilterRedux.FilterFormHideAction;
-    onMenuItemClick: (action: Redux.Action) => Redux.Action;
-    onShowPrompt: (prompt: UIPrompt) => PopupRedux.PopupShowPromptAction;
-}
 export interface FilterFormState {
     columnFilters: ColumnFilter[];
     distinctColumnValues: any[];
+    isDistinctColumnValuesLoading: boolean;
     showTab: boolean;
     selectedTab: ColumnMenuTab;
     editedColumnFilter: ColumnFilter | undefined;
     currentTab: 'values' | 'predicates';
+    suppressClientSideFilter: boolean;
 }
-declare class FilterFormComponent extends React.Component<FilterFormProps, FilterFormState> {
-    static createColumnFilterFromProps(props: FilterFormProps): ColumnFilter;
-    static getCurrentTab(editedColumnFilter: ColumnFilter | undefined): 'values' | 'predicates';
-    static getDerivedStateFromProps(props: FilterFormProps, state: FilterFormState): {
-        editedColumnFilter: ColumnFilter;
-        columnFilters: ColumnFilter[];
-        currentTab: "values" | "predicates";
-    };
-    constructor(props: FilterFormProps);
-    componentDidMount(): void;
-    render(): any;
-    private renderColumnPredicate;
-    renderPredicateInput(predicateDef: AdaptablePredicateDef, filter: ColumnFilter): JSX.Element | JSX.Element[];
-    isFilterable(): string;
-    onSelectTab(tab: any): any;
-    onColumnValuesChange(columnValues: any[]): void;
-    persistFilter(): void;
-    onClearFilter(): void;
-    onFilterApplied(): void;
-    onCloseForm(): void;
-    onMenuItemClick(menuItem: AdaptableMenuItem): any;
-    selectColumnPredicate(predicateDef: AdaptablePredicateDef): void;
-    changeColumnPredicateInput(value: string, index: number): void;
-}
-export declare let FilterForm: import("react-redux").ConnectedComponent<typeof FilterFormComponent, any>;
 export declare const FilterFormReact: (FilterContext: ColumnFilterContext) => JSX.Element;
-export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterFormReact = exports.FilterForm = void 0;
+exports.FilterFormReact = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
@@ -18,34 +18,56 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlo
 const rebass_1 = require("rebass");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Helper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/Helper"));
-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 runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
+const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
 const panelStyle = {
     width: '100%',
     minWidth: 150,
 };
 class FilterFormComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        this.handleFilterChange = (filter) => {
+            if (this.state.suppressClientSideFilter) {
+                this.loadPermittedValues(filter);
+            }
+        };
+        this._isMounted = true;
+        const existingColumnFilter = FilterFormComponent.createColumnFilterFromProps(this.props);
+        this.state = {
+            columnFilters: props.columnFilters,
+            distinctColumnValues: [],
+            isDistinctColumnValuesLoading: false,
+            showTab: true,
+            selectedTab: Enums_1.ColumnMenuTab.Filter,
+            editedColumnFilter: existingColumnFilter,
+            currentTab: FilterFormComponent.getCurrentTab(existingColumnFilter),
+            suppressClientSideFilter: false,
+        };
+    }
     static createColumnFilterFromProps(props) {
-        let existingColumnFilter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.ColumnId);
+        let existingColumnFilter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.columnId);
         if (!existingColumnFilter) {
             const filterOptions = props.api.internalApi.getAdaptableOptions()
                 .filterOptions;
             if (filterOptions.defaultFilterFormTab == 'Values') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, 'Values', []);
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'Values', []);
             }
-            if (props.currentColumn.DataType === 'Number') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, filterOptions.defaultNumericColumnFilter, ['']);
+            if (props.currentColumn.dataType === 'Number') {
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
             }
-            if (props.currentColumn.DataType === 'String') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, filterOptions.defaultStringColumnFilter, ['']);
+            if (props.currentColumn.dataType === 'String') {
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
             }
-            if (props.currentColumn.DataType === 'Date') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, filterOptions.defaultDateColumnFilter, ['']);
+            if (props.currentColumn.dataType === 'Date') {
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
             }
-            if (props.currentColumn.DataType === 'Boolean') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, 'BooleanToggle', [
+            if (props.currentColumn.dataType === 'Boolean') {
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', [
                     'all',
                 ]);
             }
@@ -76,25 +98,24 @@ class FilterFormComponent extends React.Component {
                 : state.currentTab,
         };
     }
-    constructor(props) {
-        super(props);
-        let existingColumnFilter = FilterFormComponent.createColumnFilterFromProps(this.props);
-        this.state = {
-            columnFilters: props.columnFilters,
-            distinctColumnValues: [],
-            showTab: false,
-            selectedTab: Enums_1.ColumnMenuTab.Filter,
-            editedColumnFilter: existingColumnFilter,
-            currentTab: FilterFormComponent.getCurrentTab(existingColumnFilter),
-        };
+    componentWillUnmount() {
+        this._isMounted = false;
     }
     componentDidMount() {
-        if (this.props.currentColumn.DataType != Enums_1.DataType.Boolean) {
-            let distinctColumnValues = this.props.api.columnApi.getDistinctDisplayValuesForColumn(this.props.currentColumn.ColumnId);
-            let hasItems = ArrayExtensions_1.default.IsNotNullOrEmptyNorContainsSingleEmptyValue(distinctColumnValues);
-            let currentTab = hasItems ? this.state.currentTab : 'values';
-            this.setState({ distinctColumnValues, showTab: hasItems, currentTab: currentTab });
+        if (this.props.currentColumn.dataType != Enums_1.DataType.Boolean) {
+            this.loadPermittedValues();
+        }
+    }
+    async loadPermittedValues(filter = '') {
+        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+        if (!this._isMounted) {
+            return;
         }
+        this.setState({
+            distinctColumnValues,
+            isDistinctColumnValuesLoading: false,
+            suppressClientSideFilter,
+        });
     }
     render() {
         var _a, _b;
@@ -120,7 +141,7 @@ class FilterFormComponent extends React.Component {
                 React.createElement(Radio_1.default, { marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Filters")))),
             this.state.currentTab === 'values' && (React.createElement("div", null,
-                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.DataType, uiSelectedColumnValues: uiSelectedColumnValues, useVendorStyle: useVendorStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
+                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useVendorStyle: useVendorStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
             this.state.currentTab === 'predicates' && (React.createElement("div", null,
                 ' ',
                 this.state.showTab && React.createElement("hr", null),
@@ -164,7 +185,7 @@ class FilterFormComponent extends React.Component {
                 } }))));
     }
     isFilterable() {
-        if (!this.props.currentColumn.Filterable) {
+        if (!this.props.currentColumn.filterable) {
             return 'Column is not filterable';
         }
         return '';
@@ -258,5 +279,5 @@ function mapDispatchToProps(dispatch) {
         onHideFilterForm: () => dispatch(FilterRedux.FilterFormHide()),
     };
 }
-exports.FilterForm = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(FilterFormComponent);
-exports.FilterFormReact = (FilterContext) => renderWithAdaptableContext_1.renderWithAdaptableContext(React.createElement(exports.FilterForm, { api: FilterContext.Adaptable.api, currentColumn: FilterContext.Column, teamSharingActivated: false, embedColumnMenu: FilterContext.Adaptable.embedColumnMenu, showCloseButton: FilterContext.ShowCloseButton }), FilterContext.Adaptable);
+const FilterForm = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(FilterFormComponent);
+exports.FilterFormReact = (FilterContext) => renderWithAdaptableContext_1.renderWithAdaptableContext(React.createElement(FilterForm, { api: FilterContext.Adaptable.api, currentColumn: FilterContext.Column, teamSharingActivated: false, embedColumnMenu: FilterContext.Adaptable.embedColumnMenu, showCloseButton: FilterContext.ShowCloseButton }), FilterContext.Adaptable);

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

@@ -9,6 +9,9 @@ export interface ListBoxFilterFormProps extends ListGroupProps {
     uiSelectedColumnValues: Array<string>;
     onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;
     dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown';
+    isLoading?: boolean;
+    suppressClientSideFilter?: boolean;
+    onFilterChange?: (filter: string) => void;
 }
 export interface ListBoxFilterFormState extends React.ClassAttributes<any> {
     UiSelectedColumnValues: Array<string>;

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

@@ -11,8 +11,13 @@ const join_1 = tslib_1.__importDefault(require("../../../components/utils/join")
 const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
 const GridList_1 = tslib_1.__importDefault(require("../../../components/List/GridList"));
 const react_1 = require("react");
+const Loader_1 = require("../../../components/Loader");
 exports.ListBoxFilterForm = (props) => {
     const [FilterValue, setFilterValue] = react_1.useState('');
+    const handleFilterValueChange = React.useCallback((newValue) => {
+        setFilterValue(newValue);
+        props === null || props === void 0 ? void 0 : props.onFilterChange(newValue);
+    }, [props.onFilterChange]);
     const [UiSelectedColumnValues, internalUpdateUISelectedColumnValues] = react_1.useState(props.uiSelectedColumnValues);
     const setUiSelectedColumnValues = (values) => {
         internalUpdateUISelectedColumnValues(values);
@@ -41,7 +46,8 @@ exports.ListBoxFilterForm = (props) => {
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnValue)) {
             return null;
         }
-        if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
+        if (!props.suppressClientSideFilter &&
+            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
             columnValue.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0) {
             return null;
         }
@@ -60,9 +66,12 @@ exports.ListBoxFilterForm = (props) => {
             paddingBottom: 'var(--ab-space-1)',
             paddingLeft: 'var(--ab-space-1)',
             borderRadius: 'var(--ab__border-radius)',
-        }, OnTextChange: setFilterValue }));
-    return (React.createElement("div", { className: join_1.default(`ab-ListBoxFilterForm`, props.useVendorStyle ? `ab-ListBoxFilterForm--vendor-style` : null) },
+        }, OnTextChange: handleFilterValueChange }));
+    const baseClassName = 'ab-ListBoxFilterForm';
+    return (React.createElement("div", { className: join_1.default(baseClassName, props.useVendorStyle ? `${baseClassName}--vendor-style` : null, props.isLoading && `${baseClassName}--loading`) },
         React.createElement(rebass_1.Box, { px: 2 },
-            React.createElement(rebass_1.Box, { mx: props.useVendorStyle ? 0 : '2px', marginBottom: 2 }, textClear)),
-        React.createElement(GridList_1.default, { showZebraRows: false, className: !props.useVendorStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements)));
+            React.createElement(rebass_1.Box, { mx: props.useVendorStyle ? 0 : '2px', marginBottom: 2 },
+                textClear,
+                props.isLoading && React.createElement(Loader_1.Loader, null, "Loading"))),
+        !props.isLoading && (React.createElement(GridList_1.default, { showZebraRows: false, className: !props.useVendorStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
 };

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

@@ -1,50 +1,10 @@
-import * as React from 'react';
-import * as FilterRedux from '../../../Redux/ActionsReducers/FilterRedux';
+/// <reference types="react" />
 import { ColumnFilterContext } from '../../../Utilities/Interface/ColumnFilterContext';
-import { ModuleViewPopupProps } from '../SharedProps/ModuleViewPopupProps';
-import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
-import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { ColumnFilter } from '../../../PredefinedConfig/FilterState';
-import { AdaptablePredicateDef } from '../../../PredefinedConfig/Common/AdaptablePredicate';
-import { FilterOptions } from '../../../AdaptableOptions/FilterOptions';
-interface QuickFilterFormProps extends ModuleViewPopupProps<QuickFilterFormComponent> {
-    api: AdaptableApi;
-    currentColumn: AdaptableColumn;
-    columnFilters: ColumnFilter[];
-    quickFilterTrigger?: FilterOptions['quickFilterTrigger'];
-    onAddColumnFilter: (columnFilter: ColumnFilter) => FilterRedux.ColumnFilterAddAction;
-    onEditColumnFilter: (columnFilter: ColumnFilter) => FilterRedux.ColumnFilterEditAction;
-}
 export interface QuickFilterFormState {
     filter: ColumnFilter;
     distinctColumnValues: any[];
+    isDistinctColumnValuesLoading: boolean;
+    suppressClientSideFilter: boolean;
 }
-declare class QuickFilterFormComponent extends React.Component<QuickFilterFormProps, QuickFilterFormState> {
-    private valuesDropdown?;
-    constructor(props: QuickFilterFormProps);
-    getDistinctValues: (props?: Readonly<QuickFilterFormProps> & Readonly<{
-        children?: React.ReactNode;
-    }>) => any[];
-    updateDistinctValues(props?: Readonly<QuickFilterFormProps> & Readonly<{
-        children?: React.ReactNode;
-    }>): void;
-    UNSAFE_componentWillReceiveProps(nextProps: QuickFilterFormProps): void;
-    getFilterFromProps(props: QuickFilterFormProps): ColumnFilter;
-    render(): any;
-    renderLabel(filter: ColumnFilter, activePredicateDef: AdaptablePredicateDef): JSX.Element;
-    renderPredicateIcon(predicateDef: AdaptablePredicateDef): JSX.Element;
-    renderPredicateInput(predicateDef: AdaptablePredicateDef, filter: ColumnFilter): JSX.Element | JSX.Element[];
-    renderNoValuesDropdown(filter: ColumnFilter): JSX.Element;
-    renderValuesDropdown(filter: ColumnFilter): JSX.Element;
-    onColumnValuesChange(columnValues: any[]): void;
-    selectColumnPredicate(predicateId: string): void;
-    debouncedAddFilter: import("lodash").DebouncedFunc<() => FilterRedux.ColumnFilterAddAction>;
-    debouncedEditFilter: import("lodash").DebouncedFunc<() => FilterRedux.ColumnFilterEditAction>;
-    private updateFilter;
-    changeColumnPredicateInput(value: string, index: number): void;
-    getPredicateIdForShortcutValue(value: string): string;
-    clearFilter(): void;
-}
-export declare const QuickFilterForm: import("react-redux").ConnectedComponent<typeof QuickFilterFormComponent, any>;
 export declare const QuickFilterFormReact: (FilterContext: ColumnFilterContext) => JSX.Element;
-export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuickFilterFormReact = exports.QuickFilterForm = void 0;
+exports.QuickFilterFormReact = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const debounce_1 = tslib_1.__importDefault(require("lodash-es/debounce"));
@@ -16,60 +16,87 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Ex
 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-es/isEqual"));
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
+const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
 class QuickFilterFormComponent extends React.Component {
     constructor(props) {
         super(props);
-        this.getDistinctValues = (props = this.props) => {
-            return props.api.columnApi.getDistinctDisplayValuesForColumn(props.currentColumn.ColumnId);
+        this._isMounted = false;
+        this.handleFilterChange = (filter) => {
+            if (this.state.suppressClientSideFilter) {
+                this.loadPermittedValues(filter);
+            }
+        };
+        this.loadPermittedValues = async (filter = '') => {
+            const { values, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+            if (!this._isMounted) {
+                return;
+            }
+            this.setState({
+                distinctColumnValues: values,
+                suppressClientSideFilter,
+                isDistinctColumnValuesLoading: false,
+            });
         };
         this.debouncedAddFilter = debounce_1.default(() => this.props.onAddColumnFilter(this.state.filter), 250);
         this.debouncedEditFilter = debounce_1.default(() => this.props.onEditColumnFilter(this.state.filter), 250);
-        const filter = this.getFilterFromProps(props);
-        const distinctColumnValues = filter.Predicate.PredicateId === 'Values' ? this.getDistinctValues() : [];
+        const filter = this.getFilterFromProps();
+        this._isMounted = true;
         this.state = {
             filter,
-            distinctColumnValues,
+            suppressClientSideFilter: false,
+            isDistinctColumnValuesLoading: false,
+            distinctColumnValues: [],
         };
     }
-    updateDistinctValues(props = this.props) {
-        this.setState({ distinctColumnValues: this.getDistinctValues(props) });
+    componentDidMount() {
+        var _a, _b;
+        if (((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.Predicate.PredicateId) === 'Values') {
+            this.loadPermittedValues();
+        }
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
     }
     UNSAFE_componentWillReceiveProps(nextProps) {
         const filter = this.getFilterFromProps(nextProps);
-        this.setState({
-            filter,
-        });
+        if (isEqual_1.default(filter, this.state.filter)) {
+            return;
+        }
+        this.setState({ filter });
         if ((filter === null || filter === void 0 ? void 0 : filter.Predicate) && filter.Predicate.PredicateId === 'Values') {
-            this.updateDistinctValues(nextProps);
+            this.setState({ isDistinctColumnValuesLoading: true });
+            this.loadPermittedValues();
         }
     }
-    getFilterFromProps(props) {
-        const filter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.ColumnId);
+    getFilterFromProps(props = this.props) {
+        const filter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.columnId);
         const filterOptions = props.api.internalApi.getAdaptableOptions().filterOptions;
         if (filter) {
             return filter;
         }
-        if (!filter && props.currentColumn.DataType === 'Number') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.ColumnId, filterOptions.defaultNumericColumnFilter, ['']);
+        if (!filter && props.currentColumn.dataType === 'Number') {
+            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
         }
-        if (!filter && props.currentColumn.DataType === 'String') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.ColumnId, filterOptions.defaultStringColumnFilter, ['']);
+        if (!filter && props.currentColumn.dataType === 'String') {
+            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
         }
-        if (!filter && props.currentColumn.DataType === 'Date') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.ColumnId, filterOptions.defaultDateColumnFilter, ['']);
+        if (!filter && props.currentColumn.dataType === 'Date') {
+            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
         }
-        if (!filter && props.currentColumn.DataType === 'Boolean') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.ColumnId, 'BooleanToggle', [
+        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 ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.columnId, null, null);
     }
     render() {
         const { filter } = this.state;
         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);
-        if (!this.props.currentColumn || !this.props.currentColumn.Filterable) {
+        if (!this.props.currentColumn || !this.props.currentColumn.filterable) {
             return null;
         }
         let showEvent = 'mouseenter';
@@ -179,11 +206,25 @@ class QuickFilterFormComponent extends React.Component {
             } }, 'No Column Values'));
     }
     renderValuesDropdown(filter) {
-        return (React.createElement(OverlayTrigger_1.default, { alignHorizontal: "left", showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
+        let showEvent = 'mouseenter';
+        if (this.props.quickFilterValuesTrigger === 'click') {
+            showEvent = 'click';
+        }
+        return (React.createElement(OverlayTrigger_1.default, { alignHorizontal: "left", 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, { "data-name": "quick-filter-form", flexDirection: "column", style: {
+                return (React.createElement(rebass_1.Flex, { onMouseEnter: () => {
+                        var _a;
+                        if (showEvent === 'click') {
+                            // For showEvent=mouseneter 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)',
@@ -193,7 +234,7 @@ class QuickFilterFormComponent extends React.Component {
                         React.createElement(SimpleButton_1.default, { onClick: () => this.clearFilter() }, "Clear Filter"),
                         ((_a = this.props.api.internalApi.getAdaptableOptions().filterOptions) === 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, { currentColumn: this.props.currentColumn, columns: [], columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.DataType, uiSelectedColumnValues: this.state.filter.Predicate.Inputs, useVendorStyle: true, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })));
+                    React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { 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, useVendorStyle: true, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })));
             } },
             React.createElement(SimpleButton_1.default, { style: {
                     flex: 1,
@@ -226,7 +267,7 @@ class QuickFilterFormComponent extends React.Component {
         };
         this.updateFilter(filter);
         if (predicateId === 'Values') {
-            this.updateDistinctValues();
+            this.loadPermittedValues();
             requestAnimationFrame(() => {
                 if (this.valuesDropdown) {
                     this.valuesDropdown.show();
@@ -276,8 +317,8 @@ function mapDispatchToProps(dispatch) {
         onEditColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterEdit(columnFilter)),
     };
 }
-exports.QuickFilterForm = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);
+const QuickFilterForm = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);
 exports.QuickFilterFormReact = (FilterContext) => {
-    var _a;
-    return renderWithAdaptableContext_1.renderWithAdaptableContext(React.createElement(exports.QuickFilterForm, { api: FilterContext.Adaptable.api, quickFilterTrigger: (_a = FilterContext.Adaptable.adaptableOptions.filterOptions) === null || _a === void 0 ? void 0 : _a.quickFilterTrigger, currentColumn: FilterContext.Column, teamSharingActivated: false, embedColumnMenu: FilterContext.Adaptable.embedColumnMenu }), FilterContext.Adaptable);
+    var _a, _b;
+    return renderWithAdaptableContext_1.renderWithAdaptableContext(React.createElement(QuickFilterForm, { api: FilterContext.Adaptable.api, quickFilterTrigger: (_a = FilterContext.Adaptable.adaptableOptions.filterOptions) === null || _a === void 0 ? void 0 : _a.quickFilterTrigger, quickFilterValuesTrigger: (_b = FilterContext.Adaptable.adaptableOptions.filterOptions) === null || _b === void 0 ? void 0 : _b.quickFilterValuesTrigger, currentColumn: FilterContext.Column, teamSharingActivated: false, embedColumnMenu: FilterContext.Adaptable.embedColumnMenu }), FilterContext.Adaptable);
 };

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

@@ -0,0 +1,3 @@
+import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
+import { SystemFilterPredicateId } from '../../../PredefinedConfig/FilterState';
+export declare const getDefaultColumnFilterPredicate: (column: AdaptableColumn, defaultColumnFilter: "After" | "Before" | "Blanks" | "NonBlanks" | "Equals" | "NotEquals" | "GreaterThan" | "LessThan" | "Positive" | "Negative" | "Zero" | "Between" | "NotBetween" | "Is" | "IsNot" | "Contains" | "NotContains" | "StartsWith" | "EndsWith" | "Regex" | "Today" | "Yesterday" | "Tomorrow" | "ThisWeek" | "ThisMonth" | "ThisQuarter" | "ThisYear" | "InPast" | "InFuture" | "On" | "NotOn" | "NextWorkDay" | "LastWorkDay" | "True" | "False" | "Values" | "InRange" | "BooleanToggle" | ((column: AdaptableColumn) => SystemFilterPredicateId)) => SystemFilterPredicateId;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultColumnFilterPredicate = void 0;
+exports.getDefaultColumnFilterPredicate = (column, defaultColumnFilter) => {
+    return typeof defaultColumnFilter === 'function'
+        ? defaultColumnFilter(column)
+        : defaultColumnFilter;
+};

package/src/View/Components/NewScopeComponent.js

@@ -54,7 +54,7 @@ exports.renderScopeSummary = (scope, labels) => {
             React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
         React.createElement(rebass_1.Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in scope ? (React.createElement(React.Fragment, null,
             React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: columnsInScope.length ? 2 : 0 }, labels.scopeColumns),
-            columnsInScope.length ? (React.createElement(ValueSelector_1.ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.ColumnId), toLabel: (c) => c.FriendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, c), toIdentifier: (c) => c.ColumnId })) : null)) : null),
+            columnsInScope.length ? (React.createElement(ValueSelector_1.ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.columnId), toLabel: (c) => c.friendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, c), toIdentifier: (c) => c.columnId })) : null)) : null),
         React.createElement(rebass_1.Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
             React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, labels.scopeDataTypes),
             React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: scope.DataTypes, value: scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(rebass_1.Text, { fontSize: 2 }, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));

package/src/View/Components/Popups/AdaptablePopup.d.ts

@@ -4,7 +4,7 @@ import { ModuleParams } from '../SharedProps/ModuleViewPopupProps';
 import { AdaptableModule } from '../../../PredefinedConfig/Common/Types';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 /**
- * This is the main popup that we use - so all function popups will appear here.
+ * This is the main popup that we use - so all Module popups will appear here.
  */
 export interface AdaptablePopupProps extends React.ClassAttributes<AdaptablePopup> {
     showModal: boolean;

package/src/View/Components/Popups/AdaptablePopupAlert.js

@@ -38,7 +38,7 @@ exports.AdaptablePopupAlert = (props) => {
     const context = React.useMemo(() => {
         return {
             alert: props.adaptableAlert,
-            api,
+            adaptableApi: api,
             formData: formData,
         };
     }, [JSON.stringify(formData), props.adaptableAlert]);

package/src/View/Components/PreviewResultsPanel.js

@@ -20,7 +20,7 @@ class PreviewResultsPanel extends React.Component {
     render() {
         let previewHeader = this.props.showHeader && this.props.previewInfo != null
             ? 'Preview Results: ' +
-                (this.props.selectedColumn ? this.props.selectedColumn.FriendlyName : '')
+                (this.props.selectedColumn ? this.props.selectedColumn.friendlyName : '')
             : '';
         let successColor = UIHelper_1.default.getColorByMessageType('Success');
         const dataSource = this.props.previewInfo.previewResults.map((previewResult, index) => {

package/src/View/Components/RangesComponent.js

@@ -161,7 +161,7 @@ class RangesComponent extends React.Component {
     }
     onMinColumnSelectedChanged(columns) {
         const { columnComparison } = this.state;
-        columnComparison.MinValue = columns.length > 0 ? columns[0].ColumnId : undefined;
+        columnComparison.MinValue = columns.length > 0 ? columns[0].columnId : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     changeColumnComparisonMaxValue(event) {
@@ -174,7 +174,7 @@ class RangesComponent extends React.Component {
     }
     onMaxColumnSelectedChanged(columns) {
         const { columnComparison } = this.state;
-        columnComparison.MaxValue = columns.length > 0 ? columns[0].ColumnId : undefined;
+        columnComparison.MaxValue = columns.length > 0 ? columns[0].columnId : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     changeColumnComparisonColor(value) {

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

@@ -11,7 +11,7 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/Dr
 class ColumnSelector extends React.Component {
     render() {
         var _a;
-        const sortedColumns = ArrayExtensions_1.ArrayExtensions.sortArrayWithProperty(Enums_1.SortOrder.Asc, this.props.ColumnList, 'FriendlyName');
+        const sortedColumns = ArrayExtensions_1.ArrayExtensions.sortArrayWithProperty(Enums_1.SortOrder.Asc, this.props.ColumnList, 'friendlyName');
         const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x));
         const placeHolder = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.placeHolder)
             ? this.props.placeHolder.toString()
@@ -21,10 +21,10 @@ class ColumnSelector extends React.Component {
         const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x)).length == 0;
         let sortedColumnOptions = sortedColumns.map((column) => {
             return {
-                label: column.FriendlyName,
-                value: column.ColumnId,
+                label: column.friendlyName,
+                value: column.columnId,
                 onClick: () => {
-                    const selected = sortedColumns.filter((c) => c.ColumnId === column.ColumnId);
+                    const selected = sortedColumns.filter((c) => c.columnId === column.columnId);
                     if (!selected.length) {
                         this.onClearButton();
                     }
@@ -35,7 +35,7 @@ class ColumnSelector extends React.Component {
             };
         });
         let currentColumnName = selectedColumnIds.length > 0
-            ? (_a = this.props.ColumnList.find((c) => c.ColumnId == selectedColumnIds[0])) === null || _a === void 0 ? void 0 : _a.FriendlyName : 'Select a column';
+            ? (_a = this.props.ColumnList.find((c) => c.columnId == selectedColumnIds[0])) === null || _a === void 0 ? void 0 : _a.friendlyName : 'Select a column';
         return (React.createElement("div", { "data-name": 'column-selector' },
             React.createElement(FormLayout_1.default, { columns: [1], style: this.props.style },
                 React.createElement(FormLayout_1.FormRow, null,