@adaptabletools/adaptable 10.0.0-canary.3 → 10.0.3

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,47 +16,74 @@ 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) {
+    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, ['']);
+            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, ['']);
+            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, ['']);
+            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', [
@@ -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/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/Selectors/ColumnValueSelector.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
 import { DropdownButtonProps } from '../../../components/DropdownButton';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { GridCell } from '../../../types';
 export interface ColumnValueSelectorProps extends React.HTMLProps<ColumnValueSelector> {
     selectedColumn: AdaptableColumn;
     selectedColumnValue: string;
@@ -12,19 +13,26 @@ export interface ColumnValueSelectorProps extends React.HTMLProps<ColumnValueSel
     newLabel?: string;
     existingLabel?: string;
     dropdownButtonProps?: DropdownButtonProps;
+    selectedGridCells: GridCell[];
 }
 declare enum NEW_OR_EXISTING {
     existing = "Existing value",
     new = "New value"
 }
-export declare class ColumnValueSelector extends React.Component<ColumnValueSelectorProps, {
+interface ColumnValueSelectorState {
     newOrExisting: NEW_OR_EXISTING;
-}> {
+    distinctColumnValues: any[];
+    isDistinctColumnValuesLoading: boolean;
+}
+export declare class ColumnValueSelector extends React.Component<ColumnValueSelectorProps, ColumnValueSelectorState> {
     static defaultProps: {
         newLabel: string;
         existingLabel: string;
     };
     constructor(props: ColumnValueSelectorProps);
+    componentDidUpdate(prevProps: ColumnValueSelectorProps): void;
+    loadPermittedValues: () => Promise<void>;
+    handleSelectedValueExpand: () => void;
     render(): JSX.Element;
     onSelectedValueChange(selected: any[]): void;
 }

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

@@ -10,6 +10,8 @@ const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWr
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
+const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 var NEW_OR_EXISTING;
 (function (NEW_OR_EXISTING) {
     NEW_OR_EXISTING["existing"] = "Existing value";
@@ -18,31 +20,61 @@ var NEW_OR_EXISTING;
 class ColumnValueSelector extends React.Component {
     constructor(props) {
         super(props);
+        this.loadPermittedValues = async () => {
+            var _a;
+            if (!((_a = this.props.selectedColumn) === null || _a === void 0 ? void 0 : _a.ColumnId)) {
+                return;
+            }
+            // JW "fixed" this by replacing display values with raw values but really we should do it nicer in some way
+            // so that you we show the display value but we work on the raw value
+            const columnDisplayValuePairs = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctBulkUpdateDisplayValuesForColumn(this.props.selectedColumn.ColumnId, this.props.selectedGridCells), () => this.setState({ isDistinctColumnValuesLoading: true }));
+            this.setState({ isDistinctColumnValuesLoading: false });
+            const newSortedColumnValues = ArrayExtensions_1.ArrayExtensions.sortArray(columnDisplayValuePairs, Enums_1.SortOrder.Asc).map((v) => ({
+                label: v,
+                value: v,
+                onClick: () => this.onSelectedValueChange([{ DisplayValue: v }]),
+            }));
+            this.setState({
+                distinctColumnValues: newSortedColumnValues,
+            });
+        };
+        this.handleSelectedValueExpand = () => {
+            // load only if not loaded
+            if (!this.state.distinctColumnValues.length) {
+                this.loadPermittedValues();
+            }
+        };
         this.state = {
             newOrExisting: NEW_OR_EXISTING.existing,
+            distinctColumnValues: [],
+            isDistinctColumnValuesLoading: false,
         };
     }
+    componentDidUpdate(prevProps) {
+        if (this.props.selectedColumn !== prevProps.selectedColumn ||
+            this.props.selectedGridCells !== prevProps.selectedGridCells) {
+            this.loadPermittedValues();
+        }
+    }
     render() {
         let placeholderText = 'Select';
-        let sortedColumnValues = [];
         let allowNew = this.props.allowNew != null ? this.props.allowNew : true;
         if (allowNew) {
             // placeholderText += ' or enter free text';
         }
+        const baseClassName = 'ab-column-value-selector';
+        const className = join_1.default('ab-column-value-selector', this.state.isDistinctColumnValuesLoading && `${baseClassName}--loading`);
         const fieldWidth = 150;
-        if (this.props.selectedColumn != null) {
-            // JW "fixed" this by replacing display values with raw values but really we should do it nicer in some way
-            // so that you we show the display value but we work on the raw value
-            let columnDisplayValuePairs = this.props.api.columnApi.getDistinctRawValuesForColumn(this.props.selectedColumn.ColumnId);
-            let test = ArrayExtensions_1.ArrayExtensions.sortArray(columnDisplayValuePairs, Enums_1.SortOrder.Asc);
-            sortedColumnValues = test.map((v) => ({
-                label: v,
-                value: v,
-                onClick: () => this.onSelectedValueChange([{ DisplayValue: v }]),
-            }));
-        }
+        const items = this.state.isDistinctColumnValuesLoading
+            ? [
+                {
+                    label: 'Loading',
+                    disabled: true,
+                },
+            ]
+            : this.state.distinctColumnValues;
         const dd = (React.createElement("div", null,
-            React.createElement(DropdownButton_1.default, { className: "ab-column-value-selector", columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: sortedColumnValues }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
+            React.createElement(DropdownButton_1.default, { className: className, columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: items, onExpand: this.handleSelectedValueExpand }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
         const input = (React.createElement(AdaptableInput_1.default, { type: this.props.selectedColumn
                 ? UIHelper_1.default.getDescriptionForDataType(this.props.selectedColumn.DataType)
                 : 'text', placeholder: this.props.selectedColumn

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

@@ -5,7 +5,10 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const rebass_1 = require("rebass");
+const Loader_1 = require("../../../components/Loader");
 const Tabs_1 = require("../../../components/Tabs");
+const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const sortWithOrder_1 = require("../../../Utilities/sortWithOrder");
 const ValueSelector_1 = require("../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -21,8 +24,23 @@ exports.renderCustomSortValuesSummary = (data) => {
 };
 exports.CustomSortValuesWizardSection = (props) => {
     const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
-    const distinctValues = react_1.useMemo(() => {
-        return api.columnApi.getDistinctDisplayValuesForColumn(data.ColumnId);
+    const [distinctValues, setDistinctValues] = react_1.useState([]);
+    const [isDistinctValuesLoading, setIsDistinctValuesLoading] = react_1.useState(false);
+    react_1.useEffect(() => {
+        let isMounted = true;
+        (async () => {
+            // for sync and very fast resolving promises does not make sense to show a loader
+            setDistinctValues([]);
+            const newValues = await runIfNotResolvedIn_1.runIfNotResolvedIn(api.columnApi.getDistinctCustomSortDisplayValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true));
+            if (!isMounted) {
+                return;
+            }
+            setIsDistinctValuesLoading(false);
+            setDistinctValues(newValues);
+        })();
+        return () => {
+            isMounted = false;
+        };
     }, [data.ColumnId]);
     const sortedValuesMap = react_1.useMemo(() => {
         if (!data.SortedValues || !data.SortedValues.length) {
@@ -37,14 +55,14 @@ exports.CustomSortValuesWizardSection = (props) => {
         return sortedValuesMap.has(option);
     }, [sortedValuesMap]);
     const options = react_1.useMemo(() => {
-        // if (!allowReorder) {
-        //   return distinctValues;
-        // }
         return sortWithOrder_1.sortWithOrderArray(distinctValues, data.SortedValues, { sortUnorderedItems: false });
     }, [allowReorder, distinctValues, data.SortedValues]);
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+    const baseClassName = 'ab-CustomSortWizard__SortOrder';
+    const className = join_1.default(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' }, className: className },
         React.createElement(Tabs_1.Tabs.Tab, null, "Sort Order"),
         React.createElement(Tabs_1.Tabs.Content, null,
+            isDistinctValuesLoading && React.createElement(Loader_1.Loader, null, "Loading"),
             React.createElement(ValueSelector_1.ValueSelector, { toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, options: options, value: data.SortedValues, allowReorder: allowReorder, xSelectedLabel: () => {
                     return `Your Sort Order:`;
                 }, onChange: (SortedValues) => {

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -11,7 +11,9 @@ const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 exports.DataChangeHistoryGrid = (props) => {
     const { changeHistoryLog, adaptableContainerId, vendorContainerId, onUndoChange } = props;
     const mainAdaptableInstance = AdaptableContext_1.useAdaptable();
-    const [adaptableApi, setAdaptableApi] = react_1.useState(null);
+    const [_adaptableApi, setAdaptableApi] = react_1.useState(null);
+    const adaptableApiRef = react_1.useRef(null);
+    adaptableApiRef.current = _adaptableApi;
     const undoChangeEnabled = mainAdaptableInstance.api.internalApi
         .getEntitlementService()
         .isModuleFullEntitlement(ModuleConstants_1.DataChangeHistoryModuleId);
@@ -23,46 +25,54 @@ exports.DataChangeHistoryGrid = (props) => {
             const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, vendorContainerId, undoChangeEnabled, onUndoChange);
             // to avoid direct dependency to Adaptable.ts and thus creating a circular dependency;
             const adaptableInitFn = Object.getPrototypeOf(mainAdaptableInstance).constructor.init;
-            const initializedAdaptableApi = await adaptableInitFn(adaptableOptions);
-            setAdaptableApi(initializedAdaptableApi);
+            const dataChangeHistoryAdaptableApi = await adaptableInitFn(adaptableOptions);
+            setAdaptableApi(dataChangeHistoryAdaptableApi);
         };
         initializeAdaptableGrid();
+        return () => {
+            var _a;
+            (_a = adaptableApiRef.current) === null || _a === void 0 ? void 0 : _a.internalApi.getAdaptableInstance().destroy({ unmount: true, destroyApi: true });
+        };
     }, []);
     // update row data
     react_1.useEffect(() => {
-        if (!!adaptableApi) {
-            const addedChangeKeys = Object.keys(changeHistoryLog).filter((newChangeKey) => {
-                const previousChangeWithSameKey = previousChangeHistoryLog[newChangeKey];
-                if (!previousChangeWithSameKey) {
-                    return true;
-                }
-                const addedChange = changeHistoryLog[newChangeKey];
-                return addedChange.changedAt !== previousChangeWithSameKey.changedAt;
-            });
-            const removedChangeKeys = Object.keys(previousChangeHistoryLog).filter((previousChangeKey) => {
-                const newChangeWithSameKey = changeHistoryLog[previousChangeKey];
-                if (!newChangeWithSameKey) {
-                    return true;
-                }
-                const previousChange = previousChangeHistoryLog[previousChangeKey];
-                return previousChange.changedAt !== newChangeWithSameKey.changedAt;
-            });
-            const addedChangeHistoryLogs = filterChangeHistoryLog(changeHistoryLog, addedChangeKeys);
-            const removedChangeHistoryLogs = filterChangeHistoryLog(previousChangeHistoryLog, removedChangeKeys);
-            // here we access directly the AG Grid API, but this is OK because:
-            // 1. this method (gridAPi.applyTransaction() is NOT accessible otherwise and making it public opens other cans of worms
-            // 2. this UI will be reimplemented with Infinite Table anyway
-            const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
-            const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
-            adaptableApi.internalApi.getAdaptableOptions().vendorGrid.api.applyTransactionAsync({
-                add: addedRows,
-                remove: removedRows,
-            });
+        const adaptableApi = adaptableApiRef.current;
+        if (!adaptableApi) {
+            // initial render
+            return;
         }
+        const addedChangeKeys = Object.keys(changeHistoryLog).filter((newChangeKey) => {
+            const previousChangeWithSameKey = previousChangeHistoryLog[newChangeKey];
+            if (!previousChangeWithSameKey) {
+                return true;
+            }
+            const addedChange = changeHistoryLog[newChangeKey];
+            return addedChange.changedAt !== previousChangeWithSameKey.changedAt;
+        });
+        const removedChangeKeys = Object.keys(previousChangeHistoryLog).filter((previousChangeKey) => {
+            const newChangeWithSameKey = changeHistoryLog[previousChangeKey];
+            if (!newChangeWithSameKey) {
+                return true;
+            }
+            const previousChange = previousChangeHistoryLog[previousChangeKey];
+            return previousChange.changedAt !== newChangeWithSameKey.changedAt;
+        });
+        const addedChangeHistoryLogs = filterChangeHistoryLog(changeHistoryLog, addedChangeKeys);
+        const removedChangeHistoryLogs = filterChangeHistoryLog(previousChangeHistoryLog, removedChangeKeys);
+        // here we access directly the AG Grid API, but this is OK because:
+        // 1. this method (gridAPi.applyTransaction() is NOT accessible otherwise and making it public opens other cans of worms
+        // 2. this UI will be reimplemented with Infinite Table anyway
+        const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
+        const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
+        adaptableApi.internalApi.getAdaptableOptions().vendorGrid.api.applyTransactionAsync({
+            add: addedRows,
+            remove: removedRows,
+        });
     }, [changeHistoryLog]);
     return React.createElement(React.Fragment, null);
 };
 const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableContainerId, vendorContainerId, undoChangeEnabled, onUndoChange) => {
+    var _a, _b;
     const mainAdaptableOptions = mainAdaptableInstance.adaptableOptions;
     const mainAdaptableTheme = mainAdaptableInstance.api.themeApi.getCurrentTheme();
     const undoRowNode = (rowNode) => {
@@ -162,7 +172,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
                         DisplayFormat: {
                             Formatter: 'DateFormatter',
                             Options: {
-                                Pattern: `${mainAdaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat} HH:mm:ss`,
+                                Pattern: `${(_b = (_a = mainAdaptableOptions.userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.dateInputOptions) === null || _b === void 0 ? void 0 : _b.dateFormat} HH:mm:ss`,
                             },
                         },
                     },

package/src/View/DataChangeHistory/DataChangeHistoryPopup.d.ts

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { DataChangedInfo } from '../../PredefinedConfig/Common/DataChangedInfo';
 import { SystemDataChangeHistoryDisableAction, SystemDataChangeHistoryEnableAction, SystemDataChangeHistoryResumeAction, SystemDataChangeHistorySuspendAction } from '../../Redux/ActionsReducers/SystemRedux';
 import { DataChangeHistoryMode } from '../../PredefinedConfig/SystemState';
+import { AdaptableApi } from '../../Api/AdaptableApi';
 interface DataChangeHistoryPopupProps extends ModuleViewPopupProps<DataChangeHistoryPopupComponent> {
     changeHistoryLog: Record<string, DataChangedInfo>;
     changeHistoryMode: DataChangeHistoryMode;
@@ -13,7 +14,10 @@ interface DataChangeHistoryPopupProps extends ModuleViewPopupProps<DataChangeHis
     onChangeHistorySuspend: () => SystemDataChangeHistorySuspendAction;
     onChangeHistoryResume: () => SystemDataChangeHistoryResumeAction;
 }
-declare class DataChangeHistoryPopupComponent extends React.Component<DataChangeHistoryPopupProps, {}> {
+interface DataChangeHistoryPopupState {
+    dataChangeHistoryAdaptableApi: AdaptableApi | undefined;
+}
+declare class DataChangeHistoryPopupComponent extends React.Component<DataChangeHistoryPopupProps, DataChangeHistoryPopupState> {
     constructor(props: DataChangeHistoryPopupProps);
     render(): JSX.Element;
 }

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataChangeHistoryPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const UIHelper_1 = require("../UIHelper");
 const react_redux_1 = require("react-redux");
 const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
 const DataChangeHistoryGrid_1 = require("./DataChangeHistoryGrid");
@@ -16,7 +15,9 @@ const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
 class DataChangeHistoryPopupComponent extends React.Component {
     constructor(props) {
         super(props);
-        this.state = UIHelper_1.UIHelper.getEmptyConfigState();
+        this.state = {
+            dataChangeHistoryAdaptableApi: undefined,
+        };
     }
     render() {
         const { changeHistoryMode, activationTime, suspensionTime, onChangeHistoryEnable, onChangeHistoryDisable, onChangeHistorySuspend, onChangeHistoryResume, } = this.props;
@@ -49,10 +50,12 @@ class DataChangeHistoryPopupComponent extends React.Component {
         const handleChangeUndo = (changeKey) => {
             const changeToBeUndone = this.props.changeHistoryLog[changeKey];
             if (changeToBeUndone) {
-                this.props.api.gridApi.undoCellEdit(changeToBeUndone);
-                this.props.api.internalApi.dispatchReduxAction(SystemRedux_1.SystemDataChangeHistoryEntryDelete(changeToBeUndone));
+                this.props.api.dataChangeHistoryApi.undoDataChangeHistoryEntry(changeToBeUndone);
             }
         };
+        const currentVendorTheme = this.props.api.internalApi
+            .getAdaptableInstance()
+            .getVendorGridCurrentThemeName();
         return (React.createElement(PanelWithButton_1.PanelWithButton, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), border: "none", bodyProps: { padding: 0 } },
             React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
                 React.createElement(rebass_1.Flex, { style: {
@@ -64,7 +67,7 @@ class DataChangeHistoryPopupComponent extends React.Component {
                         statusPanel)),
                 React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--grid", "data-name": 'data-change-history--grid', flex: 1, alignSelf: 'stretch', flexDirection: 'column' },
                     React.createElement("div", { id: adaptableContainerId }),
-                    React.createElement("div", { id: vendorContainerId, style: { height: '100%', width: '1000px' } }),
+                    React.createElement("div", { id: vendorContainerId, className: currentVendorTheme, style: { height: '100%', width: '1000px' } }),
                     React.createElement(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, vendorContainerId: vendorContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo })))));
     }
 }

package/src/View/FreeTextColumn/FreeTextColumnPopup.js

@@ -74,7 +74,9 @@ class FreeTextColumnPopupComponent extends React.Component {
                 this.state.editedAdaptableObject != null && (React.createElement(FreeTextColumnWizard_1.FreeTextColumnWizard, { moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.FreeTextColumns, wizardStartIndex: this.state.wizardStartIndex, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard })))));
     }
     onNew() {
-        const editedAdaptableObject = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn();
+        const specialColumnsAreFilterable = this.props.api.internalApi.getAdaptableOptions()
+            .filterOptions.enableFilterOnSpecialColumns;
+        const editedAdaptableObject = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn(specialColumnsAreFilterable);
         // we want to do this here, as we need a way to differentiate in the wizard
         // if it's a new or existing column
         delete editedAdaptableObject.Uuid;

package/src/View/FreeTextColumn/FreeTextColumnSummary.js

@@ -49,7 +49,9 @@ class FreeTextColumnSummaryComponent extends React.Component {
             this.state.editedAdaptableObject && (React.createElement(FreeTextColumnWizard_1.FreeTextColumnWizard, { moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.FreeTextColumns, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard }))));
     }
     onNew() {
-        let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn();
+        const specialColumnsAreFilterable = this.props.api.internalApi.getAdaptableOptions()
+            .filterOptions.enableFilterOnSpecialColumns;
+        let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn(specialColumnsAreFilterable);
         configEntity.ColumnId = this.props.summarisedColumn.ColumnId;
         this.setState({
             editedAdaptableObject: configEntity,

package/src/View/GridInfo/GridInfoPopup.js

@@ -48,13 +48,16 @@ exports.GridInfoPopup = (props) => {
                 return props.api.columnApi.getFriendlyNameFromColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
             })
             : null;
+        const selectedRowInfo = props.api.gridApi.getSelectedRowInfo();
         returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version_1.default));
         returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
         returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
+        returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.length));
+        returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.filter((gr) => { var _a; return ((_a = gr.rowNode) === null || _a === void 0 ? void 0 : _a.displayed) == true; }).length));
         returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Column', props.api.gridApi.getVisibleColumnCount()));
+        returnRows.push(createReadOnlyColItem(colItems, 'Visible Columns', props.api.gridApi.getVisibleColumnCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(calcColumns) ? calcColumns : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns) ? freeTextColumns : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns) ? actionColumns : 'None'));