@adaptabletools/adaptable 10.0.4-canary.0 → 10.0.4-canary.4

package/src/View/AdaptableView.js

@@ -13,11 +13,11 @@ const AdaptablePopupConfirmation_1 = require("./Components/Popups/AdaptablePopup
 const AdaptableChart_1 = require("./Components/Popups/AdaptableChart");
 const ChartEnums_1 = require("../PredefinedConfig/Common/ChartEnums");
 const AdaptableLoadingScreen_1 = require("./Components/Popups/AdaptableLoadingScreen");
-const Toastify_1 = require("../components/Toastify");
 const renderWithAdaptableContext_1 = require("./renderWithAdaptableContext");
 const License_1 = require("./License");
 const ExportCustomDestinationFormPopups_1 = require("./Export/ExportCustomDestinationFormPopups");
 const ProgressIndicator_1 = require("../components/ProgressIndicator/ProgressIndicator");
+const react_toastify_1 = require("react-toastify");
 class AdaptableView extends React.Component {
     render() {
         var _a, _b, _c, _d, _e;
@@ -30,8 +30,8 @@ class AdaptableView extends React.Component {
             React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi }),
             React.createElement(AdaptablePopup_1.AdaptablePopup, { showModal: this.props.PopupState.ScreenPopup.ShowScreenPopup, componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps }),
             React.createElement(ExportCustomDestinationFormPopups_1.ExportCustomDestinationFormPopups, { api: this.props.AdaptableApi }),
-            React.createElement(Toastify_1.ToastContainer, { limit: this.props.AdaptableApi.internalApi.getAdaptableOptions().notificationsOptions
-                    .maxNotifications, closeButton: false }),
+            React.createElement(react_toastify_1.ToastContainer, { limit: this.props.AdaptableApi.internalApi.getAdaptableOptions().notificationsOptions
+                    .maxNotifications, closeButton: false, icon: false }),
             (watermark === null || watermark === void 0 ? void 0 : watermark.show) && React.createElement(License_1.LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
             React.createElement(ProgressIndicator_1.ProgressIndicator, null)));
     }

package/src/View/AdaptableViewFactory.d.ts

@@ -1,7 +1,8 @@
+import * as React from 'react';
 import { ConnectedComponent } from 'react-redux';
 import { AdaptableModule } from '../PredefinedConfig/Common/Types';
 export declare const AdaptableViewFactory: IAdaptableViewFactory;
-export declare const AdaptableViewPanelFactory: Map<AdaptableModule, ConnectedComponent<any, any>>;
+export declare const AdaptableViewPanelFactory: Map<AdaptableModule, React.FunctionComponent<any> | ConnectedComponent<any, any>>;
 export interface IAdaptableViewFactory {
     [key: string]: any;
 }

package/src/View/AdaptableViewFactory.js

@@ -44,6 +44,7 @@ const ThemeViewPanel_1 = require("./Theme/ThemeViewPanel");
 const DataSourceViewPanel_1 = require("./DataSource/DataSourceViewPanel");
 const DataChangeHistoryPopup_1 = require("./DataChangeHistory/DataChangeHistoryPopup");
 const DataChangeHistoryViewPanel_1 = require("./DataChangeHistory/DataChangeHistoryViewPanel");
+const StateManagementViewPanel_1 = require("./StateManagement/StateManagementViewPanel");
 exports.AdaptableViewFactory = {
     ExpandedQueryPopup: ExpandedQueryPopup_1.ExpandedQueryPopup,
     AlertPopup: AlertPopup_1.AlertPopup,
@@ -88,4 +89,5 @@ exports.AdaptableViewPanelFactory = new Map([
     [ModuleConstants.ThemeModuleId, ThemeViewPanel_1.ThemeViewPanelControl],
     [ModuleConstants.DataSourceModuleId, DataSourceViewPanel_1.DataSourceViewPanelControl],
     [ModuleConstants.DataChangeHistoryModuleId, DataChangeHistoryViewPanel_1.DataChangeHistoryViewPanelControl],
+    [ModuleConstants.StateManagementModuleId, StateManagementViewPanel_1.StateManagementViewPanel],
 ]);

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationForm.js

@@ -16,7 +16,7 @@ const ConfigurationForm = (props) => {
     const searchOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.searchOptions), abOptions.searchOptions);
     const filterOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.filterOptions), abOptions.filterOptions);
     // we are 'hard-coding' this to use AG Grid but so does helper so ok for now and we can refactor when Adaptable Grid is ready
-    const vendorGrid = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.vendorGrid), abOptions.vendorGrid);
+    const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.vendorGrid), abOptions.vendorGrid);
     return (React.createElement(React.Fragment, null,
         React.createElement(HelpBlock_1.default, null, "General Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
@@ -30,28 +30,28 @@ const ConfigurationForm = (props) => {
         React.createElement(HelpBlock_1.default, null, "Grid Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
             React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },
-                React.createElement(CheckBox_1.CheckBox, { checked: vendorGrid.enableRangeSelection, onChange: (enableRangeSelection) => {
+                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.vendorGrid = Object.assign({}, abOptions.vendorGrid);
                         abOptions.vendorGrid.enableRangeSelection = enableRangeSelection;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Quick Filter" },
-                React.createElement(CheckBox_1.CheckBox, { checked: vendorGrid.floatingFilter, onChange: (floatingFilter) => {
+                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.floatingFilter, onChange: (floatingFilter) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.vendorGrid = Object.assign({}, abOptions.vendorGrid);
                         abOptions.vendorGrid.floatingFilter = floatingFilter;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Suppress Column Virtualisation" },
-                React.createElement(CheckBox_1.CheckBox, { checked: vendorGrid.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
+                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.vendorGrid = Object.assign({}, abOptions.vendorGrid);
                         abOptions.vendorGrid.suppressColumnVirtualisation = suppressColumnVirtualisation;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Column Menu Button" },
-                React.createElement(CheckBox_1.CheckBox, { checked: vendorGrid.suppressMenuHide, onChange: (suppressMenuHide) => {
+                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.vendorGrid = Object.assign({}, abOptions.vendorGrid);
                         abOptions.vendorGrid.suppressMenuHide = suppressMenuHide;
@@ -76,10 +76,10 @@ const ConfigurationForm = (props) => {
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Use Vendor Filter Form Style" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useVendorFilterFormStyle, onChange: (useVendorFilterFormStyle) => {
+                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAgGridFilterFormStyle, onChange: (useAgGridFilterFormStyle) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.useVendorFilterFormStyle = useVendorFilterFormStyle;
+                        abOptions.filterOptions.useAgGridFilterFormStyle = useAgGridFilterFormStyle;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Use Adaptable Quick Filter" },

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -64,8 +64,8 @@ class CellSummaryViewPanelComponent extends React.Component {
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(DropdownButton_1.default, { style: { fontSize: 'small' }, marginRight: 2, columns: ['label'], className: `ab-${elementType}__CellSummary__select`, items: [...operationMenuItems, ...operationDefinitions], disabled: shouldDisable, variant: "outlined", tone: 'neutral' }, this.props.CellSummaryOperation)),
+            React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(DropdownButton_1.default, { style: { fontSize: 'small', width: '100%' }, marginRight: 2, columns: ['label'], className: `ab-${elementType}__CellSummary__select`, items: [...operationMenuItems, ...operationDefinitions], disabled: shouldDisable, variant: "outlined", tone: 'neutral' }, this.props.CellSummaryOperation)),
             React.createElement(rebass_1.Flex, { alignItems: "center" }, React.createElement(React.Fragment, null,
                 renderOperationValue(),
                 this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(AdaptablePopover_1.AdaptablePopover, { className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur" }))))));

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

@@ -52,8 +52,7 @@ class FilterFormComponent extends React.Component {
     static createColumnFilterFromProps(props) {
         let existingColumnFilter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.columnId);
         if (!existingColumnFilter) {
-            const filterOptions = props.api.internalApi.getAdaptableOptions()
-                .filterOptions;
+            const filterOptions = props.api.internalApi.getAdaptableOptions().filterOptions;
             if (filterOptions.defaultFilterFormTab == 'Values') {
                 return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'Values', []);
             }
@@ -83,7 +82,10 @@ class FilterFormComponent extends React.Component {
             : 'values';
     }
     static getDerivedStateFromProps(props, state) {
-        const editedColumnFilter = FilterFormComponent.createColumnFilterFromProps(props);
+        const filterOptions = props.api.internalApi.getAdaptableOptions().filterOptions;
+        const editedColumnFilter = filterOptions.autoApplyFilter
+            ? FilterFormComponent.createColumnFilterFromProps(props)
+            : state.editedColumnFilter;
         let columnFilters = state.columnFilters;
         let filtersChanged = false;
         if (props.columnFilters !== columnFilters) {
@@ -120,8 +122,7 @@ class FilterFormComponent extends React.Component {
     render() {
         var _a, _b;
         let isFilterable = this.isFilterable();
-        const filterOptions = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions;
+        const filterOptions = this.props.api.internalApi.getAdaptableOptions().filterOptions;
         const predicateDefs = this.props.api.filterApi
             .getFilterPredicateDefsForColumn(this.props.currentColumn)
             .filter((predicate) => !predicate.onlyQuickFilter);
@@ -133,15 +134,15 @@ class FilterFormComponent extends React.Component {
             Helper_1.default.objectNotExists(this.state.editedColumnFilter.Predicate.PredicateId);
         let closeButton = (React.createElement(ButtonClose_1.ButtonClose, { onClick: () => this.onCloseForm(), tooltip: null, accessLevel: 'Full' }));
         let clearFilterButton = (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.onClearFilter(), disabled: isEmptyFilter, tooltip: null, accessLevel: 'Full', showText: true, showIcon: false }));
-        const useVendorStyle = !!filterOptions.useVendorFilterFormStyle;
-        return (React.createElement("div", { "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useVendorStyle: useVendorStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement("div", null,
+        const useAgGridStyle = !!filterOptions.useAgGridFilterFormStyle;
+        return (React.createElement("div", { "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement("div", null,
             this.state.showTab && (React.createElement("div", null,
                 React.createElement(Radio_1.default, { marginLeft: 1, flex: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Column Values")),
                 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, { 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) }))),
+                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, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
             this.state.currentTab === 'predicates' && (React.createElement("div", null,
                 ' ',
                 this.state.showTab && React.createElement("hr", null),

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

@@ -4,7 +4,7 @@ import { ListGroupProps } from '../../../components/List/ListGroup';
 export interface ListBoxFilterFormProps extends ListGroupProps {
     currentColumn: AdaptableColumn;
     columns: AdaptableColumn[];
-    useVendorStyle?: boolean;
+    useAgGridStyle?: boolean;
     columnDistinctValues: any[];
     uiSelectedColumnValues: Array<string>;
     onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;

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

@@ -26,7 +26,7 @@ exports.ListBoxFilterForm = (props) => {
     react_1.useEffect(() => {
         internalUpdateUISelectedColumnValues(props.uiSelectedColumnValues);
     }, [props.uiSelectedColumnValues]);
-    const renderItemForVendorStyle = (props) => {
+    const renderItemForAgGridStyle = (props) => {
         return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1 })));
     };
     const onClickItemColumnValue = (item) => {
@@ -51,15 +51,15 @@ exports.ListBoxFilterForm = (props) => {
             columnValue.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0) {
             return null;
         }
-        if (props.useVendorStyle) {
-            return renderItemForVendorStyle({
+        if (props.useAgGridStyle) {
+            return renderItemForAgGridStyle({
                 key: 'columnValue' + y,
                 children: columnValue,
                 checked: isActive,
                 onChange: () => onClickItemColumnValue(x),
             });
         }
-        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useVendorStyle, key: 'columnValue' + y, onClick: () => onClickItemColumnValue(x), active: isActive, value: columnValue }, columnValue));
+        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + y, onClick: () => onClickItemColumnValue(x), active: isActive, value: columnValue }, columnValue));
     });
     const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
             paddingTop: 'var(--ab-space-1)',
@@ -68,10 +68,10 @@ exports.ListBoxFilterForm = (props) => {
             borderRadius: 'var(--ab__border-radius)',
         }, 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`) },
+    return (React.createElement("div", { className: join_1.default(baseClassName, props.useAgGridStyle ? `${baseClassName}--aggrid-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 },
+            React.createElement(rebass_1.Box, { mx: props.useAgGridStyle ? 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))));
+        !props.isLoading && (React.createElement(GridList_1.default, { showZebraRows: false, className: !props.useAgGridStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
 };

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

@@ -106,14 +106,12 @@ class QuickFilterFormComponent extends React.Component {
             hideEvent = 'blur';
         }
         let showQuickFilterDropdown = true;
-        let hideQuickFilterDropdownFunction = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions.hideQuickFilterDropdown;
+        let hideQuickFilterDropdownFunction = this.props.api.internalApi.getAdaptableOptions().filterOptions.hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
             showQuickFilterDropdown = !hideQuickFilterDropdownFunction(this.props.currentColumn);
         }
         let showQuickFilterInput = true;
-        let hideQuickFilterInputFunction = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions.hideQuickFilterInput;
+        let hideQuickFilterInputFunction = this.props.api.internalApi.getAdaptableOptions().filterOptions.hideQuickFilterInput;
         if (hideQuickFilterInputFunction) {
             showQuickFilterInput = !hideQuickFilterInputFunction(this.props.currentColumn);
         }
@@ -234,7 +232,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, { 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(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, useAgGridStyle: true, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })));
             } },
             React.createElement(SimpleButton_1.default, { style: {
                     flex: 1,

package/src/View/Components/Panels/FilterFormPanel.d.ts

@@ -10,7 +10,7 @@ export interface FilterFormPanelProps extends PanelProps {
     onFilterApplied: () => void;
     IsAlwaysFilter: boolean;
     showCloseButton: boolean;
-    useVendorStyle: boolean;
+    useAgGridStyle: boolean;
     applyFilterButtonDisabled: boolean;
     autoApplyFilter: boolean;
 }