@adaptabletools/adaptable 10.0.2 → 10.0.4-canary.2

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/Alert/AlertPopup.js

@@ -64,7 +64,7 @@ class AlertPopupComponent extends React.Component {
                 if (this.props.popupParams.action == 'New') {
                     let alertDefinition = ObjectFactory_1.ObjectFactory.CreateEmptyAlertDefinition();
                     alertDefinition.Scope = {
-                        ColumnIds: [this.props.popupParams.column.ColumnId],
+                        ColumnIds: [this.props.popupParams.column.columnId],
                     };
                     this.setState({
                         editedAdaptableObject: alertDefinition,

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

@@ -11,6 +11,7 @@ const rebass_1 = require("rebass");
 const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAlert");
 const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
 const CodeBlock_1 = require("../../../components/CodeBlock");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const DEFAULT_BUTTONS = [
     {
         Label: 'OK',
@@ -58,22 +59,35 @@ exports.AlertDisplayWizardSection = (props) => {
     var _a, _b, _c, _d;
     const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     const messageType = data.MessageType;
+    const messageText = api.alertApi.getAlertDescription(data);
     const adaptableAlert = {
         header: data.MessageType,
         message: '',
         alertDefinition: data,
     };
+    const onMessageTextChange = (e) => {
+        const { value } = e.target;
+        props.onChange(Object.assign(Object.assign({}, data), { MessageText: value }));
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Message Type"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "vertical", onRadioChange: (MessageType) => {
+                React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
                         props.onChange(Object.assign(Object.assign({}, data), { MessageType }));
                     } },
-                    React.createElement(Radio_1.default, { value: "Info" }, "Info"),
-                    React.createElement(Radio_1.default, { value: "Success" }, "Success"),
-                    React.createElement(Radio_1.default, { value: "Warning" }, "Warning"),
-                    React.createElement(Radio_1.default, { value: "Error" }, "Error")))),
+                    React.createElement(Radio_1.default, { marginLeft: 1, value: "Info" }, "Info"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Success" }, "Success"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Warning" }, "Warning"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Error" }, "Error")))),
+        React.createElement(Tabs_1.Tabs, { mt: 2, mb: 3, autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "The text to display as the Alert Message (leave blank to show automated Message based on Trigger and Condition)"),
+                ' ',
+                React.createElement(AdaptableInput_1.default, { marginTop: 2, type: 'text', autoFocus: false, value: messageText, 
+                    // onChange={(e: any) => onPredicateInputChange(e, index)}
+                    onChange: (e) => onMessageTextChange(e) }))),
         React.createElement(Tabs_1.Tabs, { mt: 2, mb: 3, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Display options"),
             React.createElement(Tabs_1.Tabs.Content, null,

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

@@ -49,7 +49,7 @@ exports.renderBaseAlertScopeSummary = (data) => {
                 : null)),
         React.createElement(rebass_1.Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in data.Scope ? (React.createElement(React.Fragment, null,
             React.createElement(rebass_1.Text, { fontSize: 2, mb: columnsInScope.length ? 2 : 0 }, "Changes in selected columns will trigger an alert"),
-            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(rebass_1.Text, { fontSize: 2 }, 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(rebass_1.Text, { fontSize: 2 }, c), toIdentifier: (c) => c.columnId })) : null)) : null),
         React.createElement(rebass_1.Box, null, 'DataTypes' in data.Scope ? (React.createElement(React.Fragment, null,
             React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, "Changes in columns of the selected data-types trigger an alert"),
             React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: data.Scope.DataTypes, value: data.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/BulkUpdate/BulkUpdatePopup.d.ts

@@ -4,6 +4,7 @@ import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import { PreviewInfo } from '../../Utilities/Interface/Preview';
 import { BulkUpdateValidationResult } from '../../Strategy/Interface/IBulkUpdateModule';
+import { GridCell } from '../../types';
 interface BulkUpdatePopupProps extends ModuleViewPopupProps<BulkUpdatePopupComponent> {
     BulkUpdateValue: string;
     BulkUpdateValidationResult: BulkUpdateValidationResult;
@@ -11,6 +12,7 @@ interface BulkUpdatePopupProps extends ModuleViewPopupProps<BulkUpdatePopupCompo
     onBulkUpdateValueChange: (value: string) => SystemRedux.BulkUpdateChangeValueAction;
     onBulkUpdateCheckSelectedCells: () => SystemRedux.BulkUpdateCheckCellSelectionAction;
     onRunBulkUpdate: () => BulkUpdateRedux.BulkUpdateCompleteAction;
+    SelectedGridCells: GridCell[];
 }
 export interface BulkUpdatePopupState {
     isShowingError: boolean;

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -34,7 +34,7 @@ class BulkUpdatePopupComponent extends React.Component {
         let dataTypeErrorMessage = '';
         if (col && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue)) {
             // check that the update value is a number for a numeric column.  not issue for dates as we dont allow free text
-            if (col.DataType == Enums_1.DataType.Number) {
+            if (col.dataType == Enums_1.DataType.Number) {
                 if (isNaN(Number(this.props.BulkUpdateValue))) {
                     hasDataTypeError = true;
                     dataTypeErrorMessage = 'This column only accepts numbers';
@@ -50,14 +50,14 @@ class BulkUpdatePopupComponent extends React.Component {
             return null;
         }
         return (React.createElement(PanelWithImage_1.PanelWithImage, { header: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", bodyProps: { padding: 2 }, style: { height: '100%' } },
-            col.DataType == Enums_1.DataType.Date ? (React.createElement(React.Fragment, null,
+            col.dataType == Enums_1.DataType.Date ? (React.createElement(React.Fragment, null,
                 React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, "Enter a date value. Alternatively, tick the checkbox and select from an existing column value."),
                 React.createElement(rebass_1.Box, null,
                     React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, onChange: (checked) => this.onUseColumnValuesSelectorChanged(checked), checked: this.state.useSelector },
                         ' ',
                         "Select from existing column values")),
                 React.createElement(rebass_1.Flex, { padding: 2, flexDirection: "row", alignItems: "center" },
-                    React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 }, this.state.useSelector ? (React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })) : (React.createElement(AdaptableInput_1.default, { style: { width: '100%' }, value: String(this.props.BulkUpdateValue), type: UIHelper_1.UIHelper.getDescriptionForDataType(col.DataType), placeholder: UIHelper_1.UIHelper.getPlaceHolderforDataType(col.DataType), onChange: (e) => this.onBulkUpdateValueChange(e) }))),
+                    React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 }, this.state.useSelector ? (React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })) : (React.createElement(AdaptableInput_1.default, { style: { width: '100%' }, value: String(this.props.BulkUpdateValue), type: UIHelper_1.UIHelper.getDescriptionForDataType(col.dataType), placeholder: UIHelper_1.UIHelper.getPlaceHolderforDataType(col.dataType), onChange: (e) => this.onBulkUpdateValueChange(e) }))),
                     React.createElement(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                             this.onApplyClick();
@@ -65,7 +65,7 @@ class BulkUpdatePopupComponent extends React.Component {
                 React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, "Select an existing column value from the dropdown, or enter a new value"),
                 React.createElement(rebass_1.Flex, { marginTop: 2, flexDirection: "row", alignItems: "center" },
                     React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 },
-                        React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), style: { width: '100%', maxWidth: 'inherit' } })),
+                        React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), style: { width: '100%', maxWidth: 'inherit' } })),
                     React.createElement(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All' ||
                             hasDataTypeError, variant: "raised", tone: "accent", marginRight: 2, onClick: () => {
@@ -96,10 +96,12 @@ class BulkUpdatePopupComponent extends React.Component {
     }
 }
 function mapStateToProps(state, ownProps) {
+    var _a;
     return {
         BulkUpdateValue: state.System.BulkUpdateValue,
         PreviewInfo: state.System.BulkUpdatePreviewInfo,
         BulkUpdateValidationResult: state.System.BulkUpdateValidationResult,
+        SelectedGridCells: (_a = state.Grid.SelectedCellInfo) === null || _a === void 0 ? void 0 : _a.gridCells,
     };
 }
 function mapDispatchToProps(dispatch) {

package/src/View/BulkUpdate/BulkUpdateViewPanel.d.ts

@@ -4,6 +4,7 @@ import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import * as BulkUpdateRedux from '../../Redux/ActionsReducers/BulkUpdateRedux';
 import { BulkUpdateValidationResult } from '../../Strategy/Interface/IBulkUpdateModule';
 import { PreviewInfo } from '../../Utilities/Interface/Preview';
+import { GridCell } from '../../types';
 export interface BulkUpdateViewPanelComponentProps extends ViewPanelProps {
     BulkUpdateValue: string;
     BulkUpdateValidationResult: BulkUpdateValidationResult;
@@ -12,6 +13,7 @@ export interface BulkUpdateViewPanelComponentProps extends ViewPanelProps {
     onBulkUpdateValueChange: (value: string) => SystemRedux.BulkUpdateChangeValueAction;
     onBulkUpdateCheckSelectedCells: () => SystemRedux.BulkUpdateCheckCellSelectionAction;
     onRunBulkUpdate: () => BulkUpdateRedux.BulkUpdateCompleteAction;
+    SelectedGridCells: GridCell[];
 }
 declare class BulkUpdateViewPanelComponent extends React.Component<BulkUpdateViewPanelComponentProps, {}> {
     private cleanupEvent?;

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -52,7 +52,7 @@ class BulkUpdateViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: join_1.default(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap`), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null,
-                React.createElement(ColumnValueSelector_1.ColumnValueSelector, { newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
+                React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
                         listMinWidth: 160,
                     }, className: `ab-${elementType}__BulkUpdate__select`, disabled: shouldDisable, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) })),
             React.createElement(rebass_1.Flex, null,
@@ -90,7 +90,9 @@ class BulkUpdateViewPanelComponent extends React.Component {
     }
 }
 function mapStateToProps(state, ownProps) {
+    var _a;
     return {
+        SelectedGridCells: (_a = state.Grid.SelectedCellInfo) === null || _a === void 0 ? void 0 : _a.gridCells,
         BulkUpdateValue: state.System.BulkUpdateValue,
         BulkUpdateValidationResult: state.System.BulkUpdateValidationResult,
         PreviewInfo: state.System.BulkUpdatePreviewInfo,

package/src/View/CalculatedColumn/CalculatedColumnPopup.js

@@ -46,7 +46,7 @@ class CalculatedColumnPopupComponent extends React.Component {
             if (this.props.popupParams.action && this.props.popupParams.column) {
                 if (this.props.popupParams.action == 'Edit') {
                     // only editing is possible - you cannot create a new calc column from the column menu
-                    let calculatedColumn = this.props.CalculatedColumns.find((x) => x.ColumnId == this.props.popupParams.column.ColumnId);
+                    let calculatedColumn = this.props.CalculatedColumns.find((x) => x.ColumnId == this.props.popupParams.column.columnId);
                     this.onEdit(calculatedColumn);
                 }
             }

package/src/View/CalculatedColumn/CalculatedColumnSummary.js

@@ -29,7 +29,7 @@ class CalculatedColumnSummaryComponent extends React.Component {
         let sharing = this.props.teamSharingActivated;
         this.props.CalculatedColumns.map((item, index) => {
             var _a;
-            if (item.ColumnId == this.props.summarisedColumn.ColumnId) {
+            if (item.ColumnId == this.props.summarisedColumn.columnId) {
                 detailRow = (React.createElement(ModuleDetail_1.ModuleDetail, { key: 'UF' + index, item1: this.props.moduleInfo.FriendlyName, item2: (_a = item.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression, configEnity: item, showShare: this.props.teamSharingActivated, moduleInfo: this.props.moduleInfo, onEdit: () => this.onEdit(item), onShare: (config) => this.props.onShare(item, config), onDelete: CalculatedColumnRedux.CalculatedColumnDelete(item), showBold: true, accessLevel: this.props.accessLevel }));
             }
         });

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -48,7 +48,7 @@ exports.isValidCalculatedColumnSettings = (data, api) => {
     if (!((_a = data.CalculatedColumnSettings) === null || _a === void 0 ? void 0 : _a.DataType)) {
         return 'No data type specified for column';
     }
-    const columnsWithSameIdCount = columns.filter((c) => c.ColumnId === data.ColumnId).length;
+    const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
     const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
     return hasAlreadyExistingId ? 'A Column already exists with that id' : true;
 };

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/ColumnSelector/index.js

@@ -9,7 +9,7 @@ exports.NewColumnSelector = (props) => {
     const { columnFilterText, availableColumns, selected, onChange, singleSelect } = props;
     const filterFn = react_1.useMemo(() => {
         return columnFilterText
-            ? (c) => c.FriendlyName.toLowerCase().indexOf(columnFilterText.toLowerCase()) != -1
+            ? (c) => c.friendlyName.toLowerCase().indexOf(columnFilterText.toLowerCase()) != -1
             : null;
     }, [columnFilterText]);
     return (React.createElement(ValueSelector_1.ValueSelector, { value: selected, options: availableColumns, filter: filterFn, singleSelect: singleSelect, allowReorder: false, onChange: (colIds) => {
@@ -19,7 +19,7 @@ exports.NewColumnSelector = (props) => {
             else {
                 onChange(colIds);
             }
-        }, toIdentifier: (c) => c.ColumnId, toLabel: (c) => c.FriendlyName, noSelectionLabel: singleSelect ? 'Please select a column' : 'You have not selected any columns.', xSelectedLabel: singleSelect
+        }, toIdentifier: (c) => c.columnId, toLabel: (c) => c.friendlyName, noSelectionLabel: singleSelect ? 'Please select a column' : 'You have not selected any columns.', xSelectedLabel: singleSelect
             ? () => null
             : (count) => (count > 1 ? `You selected ${count} columns.` : 'You selected one column.') }));
 };

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,55 @@ 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;
+            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,31 +97,29 @@ 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;
         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);
@@ -112,15 +131,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, { 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),
@@ -164,7 +183,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 +277,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

@@ -4,11 +4,14 @@ 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;
     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);
@@ -21,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) => {
@@ -41,28 +46,32 @@ 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;
         }
-        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)',
             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.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 }, textClear)),
-        React.createElement(GridList_1.default, { showZebraRows: false, className: !props.useVendorStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements)));
+            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.useAgGridStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
 };