@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

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

@@ -1,31 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuickFilterFormReact = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
-const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
-const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
-const react_redux_1 = require("react-redux");
-const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const icons_1 = require("../../../components/icons");
-const rebass_1 = require("rebass");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
-const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
-const CheckBox_1 = require("../../../components/CheckBox");
-const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
-const Icon_1 = require("../../../components/Icon");
-const QuickFilterValues_1 = require("./QuickFilterValues");
-const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+import * as React from 'react';
+import debounce from 'lodash/debounce';
+import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
+import { getColumnFilterSelector } from '../../../Redux/ActionsReducers/LayoutRedux';
+import { connect } from 'react-redux';
+import { ObjectFactory } from '../../../Utilities/ObjectFactory';
+import OverlayTrigger from '../../../components/OverlayTrigger';
+import SimpleButton from '../../../components/SimpleButton';
+import { Icon } from '../../../components/icons';
+import { Box, Flex } from 'rebass';
+import AdaptableInput from '../AdaptableInput';
+import { renderWithAdaptableContext } from '../../renderWithAdaptableContext';
+import { CheckBox } from '../../../components/CheckBox';
+import { getDefaultColumnFilterPredicate } from './getDefaultColumnFilterPredicate';
+import { isAdaptableIcon } from '../../../components/Icon';
+import { QuickFilterValues } from './QuickFilterValues';
+import { AdaptableIconComponent } from '../AdaptableIconComponent';
 class QuickFilterFormComponent extends React.Component {
     constructor(props) {
         super(props);
         this.shouldOpenValuesDropdown = false;
         this._isMounted = false;
-        this.debouncedAddFilter = (0, debounce_1.default)((filter) => this.props.onAddColumnFilter(filter), this.props.quickFilterDebounce);
-        this.debouncedEditFilter = (0, debounce_1.default)((filter) => this.props.onEditColumnFilter(filter), this.props.quickFilterDebounce);
+        this.debouncedAddFilter = debounce((filter) => this.props.onAddColumnFilter(filter), this.props.quickFilterDebounce);
+        this.debouncedEditFilter = debounce((filter) => this.props.onEditColumnFilter(filter), this.props.quickFilterDebounce);
         this._isMounted = true;
         this.state = {
             transientColumnFilter: props.columnFilter,
@@ -45,7 +41,7 @@ class QuickFilterFormComponent extends React.Component {
          * Transient column filter needs to be used for it to work with the debounced update.
          */
         const { transientColumnFilter } = this.state;
-        const predicateDefs = this.props.api.filterApi.getFilterPredicateDefsForColumn(this.props.currentColumn);
+        const predicateDefs = this.props.api.columnFilterApi.getFilterPredicateDefsForColumn(this.props.currentColumn);
         const activePredicateDef = this.props.api.predicateApi.getPredicateDefById(transientColumnFilter === null || transientColumnFilter === void 0 ? void 0 : transientColumnFilter.Predicate.PredicateId);
         if (!this.props.currentColumn || !this.props.currentColumn.filterable) {
             return null;
@@ -57,37 +53,37 @@ class QuickFilterFormComponent extends React.Component {
             hideEvent = 'blur';
         }
         let showQuickFilterDropdown = true;
-        let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getFilterOptions().hideQuickFilterDropdown;
+        let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getColumnFilterOptions().quickFilterOptions.hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
-            const filterContext = {
+            const columnFilterContext = {
                 column: this.props.currentColumn,
                 adaptableApi: this.props.api,
                 userName: this.props.api.optionsApi.getUserName(),
                 adaptableId: this.props.api.optionsApi.getAdaptableId(),
             };
-            showQuickFilterDropdown = !hideQuickFilterDropdownFunction(filterContext);
+            showQuickFilterDropdown = !hideQuickFilterDropdownFunction(columnFilterContext);
         }
         let showQuickFilterInput = true;
-        let hideQuickFilterInputFunction = this.props.api.optionsApi.getFilterOptions().hideQuickFilterInput;
+        let hideQuickFilterInputFunction = this.props.api.optionsApi.getColumnFilterOptions().quickFilterOptions.hideQuickFilterInput;
         if (hideQuickFilterInputFunction) {
-            const filterContext = {
+            const columnFilterContext = {
                 column: this.props.currentColumn,
                 adaptableApi: this.props.api,
                 userName: this.props.api.optionsApi.getUserName(),
                 adaptableId: this.props.api.optionsApi.getAdaptableId(),
             };
-            showQuickFilterInput = !hideQuickFilterInputFunction(filterContext);
+            showQuickFilterInput = !hideQuickFilterInputFunction(columnFilterContext);
         }
         return (React.createElement(React.Fragment, null,
-            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { className: "ab-QuickFilter__dropdown", flexDirection: "column", "data-name": "quick-filter", fontSize: 2 },
-                    (transientColumnFilter === null || transientColumnFilter === void 0 ? void 0 : transientColumnFilter.Predicate.PredicateId) && (React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
+            showQuickFilterDropdown && (React.createElement(OverlayTrigger, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(Flex, { className: "ab-QuickFilter__dropdown", flexDirection: "column", "data-name": "quick-filter", fontSize: 2 },
+                    (transientColumnFilter === null || transientColumnFilter === void 0 ? void 0 : transientColumnFilter.Predicate.PredicateId) && (React.createElement(SimpleButton, { p: 2, variant: "text", onClick: () => this.clearFilter() },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } },
-                            React.createElement(icons_1.Icon, { name: "delete" })),
+                            React.createElement(Icon, { name: "delete" })),
                         "Clear")),
-                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { "data-name": transientColumnFilter.Predicate.PredicateId, disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (transientColumnFilter === null || transientColumnFilter === void 0 ? void 0 : transientColumnFilter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
+                    predicateDefs.map((p) => (React.createElement(SimpleButton, { "data-name": transientColumnFilter.Predicate.PredicateId, disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (transientColumnFilter === null || transientColumnFilter === void 0 ? void 0 : transientColumnFilter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } }, this.renderPredicateIcon(p)),
                         p.label))))) },
-                React.createElement(SimpleButton_1.default, { "data-name": transientColumnFilter.Predicate.PredicateId, style: {
+                React.createElement(SimpleButton, { "data-name": transientColumnFilter.Predicate.PredicateId, style: {
                         borderRadius: 0,
                         borderColor: 'var(--ab-color-primarydark)',
                     } }, this.renderPredicateIcon(activePredicateDef)))),
@@ -97,7 +93,7 @@ class QuickFilterFormComponent extends React.Component {
     }
     renderLabel(filter, activePredicateDef) {
         if (this.hasValuesPredicate(filter === null || filter === void 0 ? void 0 : filter.Predicate)) {
-            return (React.createElement(QuickFilterValues_1.QuickFilterValues, { api: this.props.api, currentColumn: this.props.currentColumn, isFilterDisabled: this.isFilterDisabled(), columnFilter: filter, clearColumnFilter: () => this.clearFilter(), updateColumnFilter: (columnFilter) => this.updateFilter(columnFilter), registerValuesDropdownApi: (api) => {
+            return (React.createElement(QuickFilterValues, { api: this.props.api, currentColumn: this.props.currentColumn, isFilterDisabled: this.isFilterDisabled(), columnFilter: filter, clearColumnFilter: () => this.clearFilter(), updateColumnFilter: (columnFilter) => this.updateFilter(columnFilter), registerValuesDropdownApi: (api) => {
                     if (api && this.shouldOpenValuesDropdown) {
                         api.show();
                         this.shouldOpenValuesDropdown = false;
@@ -105,25 +101,25 @@ class QuickFilterFormComponent extends React.Component {
                 }, quickFilterValuesTrigger: this.props.quickFilterValuesTrigger }));
         }
         return (activePredicateDef &&
-            (activePredicateDef === null || activePredicateDef === void 0 ? void 0 : activePredicateDef.inputs) === undefined && (React.createElement(rebass_1.Box, { color: this.isFilterDisabled() ? undefined : 'var(--ab-color-text-on-primary)', disabled: this.isFilterDisabled(), p: 1, alignSelf: "center" }, activePredicateDef.label)));
+            (activePredicateDef === null || activePredicateDef === void 0 ? void 0 : activePredicateDef.inputs) === undefined && (React.createElement(Box, { color: this.isFilterDisabled() ? undefined : 'var(--ab-color-text-on-primary)', disabled: this.isFilterDisabled(), p: 1, alignSelf: "center" }, activePredicateDef.label)));
     }
     renderPredicateIcon(predicateDef) {
         if (!predicateDef || !predicateDef.icon) {
-            return React.createElement(icons_1.Icon, { name: "filter" });
+            return React.createElement(Icon, { name: "filter" });
         }
         if ('text' in predicateDef.icon) {
             return React.createElement("span", null, predicateDef.icon.text);
         }
-        if ((0, Icon_1.isAdaptableIcon)(predicateDef.icon)) {
-            return React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: predicateDef.icon });
+        if (isAdaptableIcon(predicateDef.icon)) {
+            return React.createElement(AdaptableIconComponent, { icon: predicateDef.icon });
         }
     }
     renderPredicateInput(predicateDef, filter) {
         var _a;
         if ((predicateDef === null || predicateDef === void 0 ? void 0 : predicateDef.id) === 'BooleanToggle') {
             // custom tri-state checkbox: 'checked', 'unchecked', 'all'
-            return (React.createElement(rebass_1.Flex, { flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center", style: { position: 'absolute', left: 0, right: 0, bottom: 0, top: 0 } },
-                React.createElement(CheckBox_1.CheckBox, { disabled: this.isFilterDisabled(), checked: filter.Predicate.Inputs[0] === 'checked'
+            return (React.createElement(Flex, { flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center", style: { position: 'absolute', left: 0, right: 0, bottom: 0, top: 0 } },
+                React.createElement(CheckBox, { disabled: this.isFilterDisabled(), checked: filter.Predicate.Inputs[0] === 'checked'
                         ? true
                         : filter.Predicate.Inputs[0] === 'unchecked'
                             ? false
@@ -140,7 +136,7 @@ class QuickFilterFormComponent extends React.Component {
         }
         return (_a = predicateDef === null || predicateDef === void 0 ? void 0 : predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => {
             var _a, _b;
-            return (React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), key: index, type: predicateInput.type === 'number' ? 'text' : predicateInput.type, 
+            return (React.createElement(AdaptableInput, { disabled: this.isFilterDisabled(), key: index, type: predicateInput.type === 'number' ? 'text' : predicateInput.type, 
                 // autoFocus has to be FALSE because if the input receives focus in the init phase,
                 // it may scroll the AG Grid header viewport into view and de-synchronize it (relative to the content viewport)
                 autoFocus: false, value: (_b = (_a = filter.Predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), onKeyDownCapture: (e) => {
@@ -164,7 +160,7 @@ class QuickFilterFormComponent extends React.Component {
             PredicateId: columnFilter.Predicate.PredicateId,
             Inputs: columnValues,
         };
-        if ((_a = this.props.api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) {
+        if ((_a = this.props.api.optionsApi.getColumnFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) {
             this.updateFilter(columnFilter);
         }
         else {
@@ -207,35 +203,35 @@ class QuickFilterFormComponent extends React.Component {
     }
     getPredicateIdForShortcutValue(value) {
         var _a;
-        return (_a = this.props.api.filterApi.internalApi.findPredicateDefByShortcut(value, this.props.currentColumn)) === null || _a === void 0 ? void 0 : _a.id;
+        return (_a = this.props.api.columnFilterApi.internalApi.findPredicateDefByShortcut(value, this.props.currentColumn)) === null || _a === void 0 ? void 0 : _a.id;
     }
     clearFilter() {
         const columnFilter = Object.assign({}, this.props.columnFilter);
-        this.props.api.filterApi.clearColumnFilterForColumn(columnFilter.ColumnId);
+        this.props.api.columnFilterApi.clearColumnFilterForColumn(columnFilter.ColumnId);
     }
     hasValuesPredicate(predicate) {
         return this.props.api.predicateApi.internalApi.hasPredicateValues(predicate);
     }
 }
 function getColumnFilterWithDefault(state, props) {
-    const columnFilter = (0, LayoutRedux_1.getColumnFilterSelector)(state).find((cf) => cf.ColumnId == props.currentColumn.columnId);
+    const columnFilter = getColumnFilterSelector(state).find((cf) => cf.ColumnId == props.currentColumn.columnId);
     if (columnFilter) {
         return columnFilter;
     }
-    const filterOptions = props.api.optionsApi.getFilterOptions();
+    const columnFilterOptions = props.api.optionsApi.getColumnFilterOptions();
     if (!columnFilter && props.currentColumn.dataType === 'Number') {
-        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
+        return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultNumericColumnFilter), ['']);
     }
     if (!columnFilter && props.currentColumn.dataType === 'String') {
-        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
+        return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultStringColumnFilter), ['']);
     }
     if (!columnFilter && props.currentColumn.dataType === 'Date') {
-        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
+        return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultDateColumnFilter), ['']);
     }
     if (!columnFilter && props.currentColumn.dataType === 'Boolean') {
-        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', ['all']);
+        return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', ['all']);
     }
-    return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, null, null);
+    return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, null, null);
 }
 function mapStateToProps(state, ownProps) {
     return {
@@ -249,9 +245,8 @@ function mapDispatchToProps(dispatch) {
         onEditColumnFilter: (columnFilter) => dispatch(LayoutRedux.LayoutColumnFilterEdit(columnFilter)),
     };
 }
-const QuickFilterForm = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);
-const QuickFilterFormReact = (FilterContext) => {
+const QuickFilterForm = connect(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);
+export const QuickFilterFormReact = (columnFilterProps) => {
     var _a, _b, _c;
-    return (0, 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, quickFilterDebounce: (_c = FilterContext.Adaptable.adaptableOptions.filterOptions) === null || _c === void 0 ? void 0 : _c.quickFilterDebounce, currentColumn: FilterContext.Column, teamSharingActivated: false, embedColumnMenu: FilterContext.Adaptable.embedColumnMenu }), FilterContext.Adaptable);
+    return renderWithAdaptableContext(React.createElement(QuickFilterForm, { api: columnFilterProps.Adaptable.api, quickFilterTrigger: (_a = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _a === void 0 ? void 0 : _a.quickFilterOptions.quickFilterTrigger, quickFilterValuesTrigger: (_b = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _b === void 0 ? void 0 : _b.quickFilterOptions.quickFilterValuesTrigger, quickFilterDebounce: (_c = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _c === void 0 ? void 0 : _c.quickFilterOptions.quickFilterDebounce, currentColumn: columnFilterProps.Column, teamSharingActivated: false, embedColumnMenu: columnFilterProps.Adaptable.embedColumnMenu }), columnFilterProps.Adaptable);
 };
-exports.QuickFilterFormReact = QuickFilterFormReact;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { ColumnFilter } from '../../../PredefinedConfig/Common/ColumnFilter';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { FilterOptions } from '../../../AdaptableOptions/FilterOptions';
 import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
+import { QuickFilterOptions } from '../../../types';
 export interface QuickFilterValuesProps {
     api: AdaptableApi;
     currentColumn: AdaptableColumn;
@@ -14,6 +14,6 @@ export interface QuickFilterValuesProps {
         show: () => any;
         hide: () => any;
     }) => void;
-    quickFilterValuesTrigger?: FilterOptions['quickFilterValuesTrigger'];
+    quickFilterValuesTrigger?: QuickFilterOptions['quickFilterValuesTrigger'];
 }
 export declare const QuickFilterValues: (props: QuickFilterValuesProps) => JSX.Element;

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

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuickFilterValues = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const date_fns_1 = require("date-fns");
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
-const rebass_1 = require("rebass");
-const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
-const QuickFilterValues = (props) => {
+import * as React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import SimpleButton from '../../../components/SimpleButton';
+import { isSameDay } from 'date-fns';
+import OverlayTrigger from '../../../components/OverlayTrigger';
+import { Flex } from 'rebass';
+import { ListBoxFilterForm } from './ListBoxFilterForm';
+export const QuickFilterValues = (props) => {
     const { api } = props;
-    const currentOverlayVisible = (0, react_1.useRef)(false);
+    const currentOverlayVisible = useRef(false);
     const valuesDropdownRef = React.useRef(null);
     const [quickFilterValues, setQuickFilterValues] = React.useState({ values: [], suppressClientSideFilter: false, dataLoadIsComplete: false });
     const [isDistinctColumnValuesLoading, setIsDistinctColumnValuesLoading] = React.useState(false);
@@ -24,7 +20,7 @@ const QuickFilterValues = (props) => {
     const clearColumnFilter = () => {
         var _a;
         props.clearColumnFilter();
-        if (!((_a = props.api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter)) {
+        if (!((_a = props.api.optionsApi.getColumnFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter)) {
             props.api.gridApi.applyGridFiltering();
         }
     };
@@ -35,14 +31,14 @@ const QuickFilterValues = (props) => {
             PredicateId: columnFilter.Predicate.PredicateId,
             Inputs: columnValues,
         };
-        if ((_a = api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) {
+        if ((_a = api.optionsApi.getColumnFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) {
             props.updateColumnFilter(columnFilter);
         }
         else {
             setTransientColumnFilter(columnFilter);
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (valuesLoadTrigger.counter === 0) {
             // skip the first render
             return;
@@ -51,7 +47,7 @@ const QuickFilterValues = (props) => {
         let ignore = false;
         setIsDistinctColumnValuesLoading(true);
         api.gridApi.internalApi
-            .getDistinctFilterDisplayValuesForColumn(props.columnFilter.ColumnId, textFilterValue, api.optionsApi.getFilterOptions().showDistinctFilteredValuesOnly)
+            .getDistinctFilterDisplayValuesForColumn(props.columnFilter.ColumnId, textFilterValue, api.optionsApi.getColumnFilterOptions().valuesFilterOptions.showDistinctFilteredValuesOnly)
             .then((distinctFilterDisplayValues) => {
             if (ignore) {
                 return;
@@ -63,7 +59,7 @@ const QuickFilterValues = (props) => {
             ignore = true;
         };
     }, [valuesLoadTrigger]);
-    const onVisibleChange = (0, react_1.useCallback)((visible) => {
+    const onVisibleChange = useCallback((visible) => {
         if (visible) {
             setValuesLoadTrigger(Object.assign(Object.assign({}, valuesLoadTrigger), { counter: valuesLoadTrigger.counter + 1 }));
         }
@@ -77,9 +73,9 @@ const QuickFilterValues = (props) => {
         }
     }, [valuesLoadTrigger, quickFilterValues]);
     const loadedDataIsEmpty = quickFilterValues.dataLoadIsComplete &&
-        ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(quickFilterValues.values);
+        ArrayExtensions.IsNullOrEmptyOrContainsSingleEmptyValue(quickFilterValues.values);
     const renderNoValuesDropdown = () => {
-        return (React.createElement(SimpleButton_1.default, { disabled: true, style: {
+        return (React.createElement(SimpleButton, { disabled: true, style: {
                 flex: 1,
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -89,7 +85,7 @@ const QuickFilterValues = (props) => {
                 borderColor: 'var(--ab-color-primarydark)',
             } }, 'No Column Values'));
     };
-    if (ArrayExtensions_1.default.IsNullOrEmpty(props.columnFilter.Predicate.Inputs) && loadedDataIsEmpty) {
+    if (ArrayExtensions.IsNullOrEmpty(props.columnFilter.Predicate.Inputs) && loadedDataIsEmpty) {
         return renderNoValuesDropdown();
     }
     const handleFilterChange = (filterText) => {
@@ -108,14 +104,14 @@ const QuickFilterValues = (props) => {
             var _a, _b;
             const label = (_b = (_a = quickFilterValues.values) === null || _a === void 0 ? void 0 : _a.find((distinctValue) => {
                 if (input instanceof Date) {
-                    return (0, date_fns_1.isSameDay)(input, distinctValue.value);
+                    return isSameDay(input, distinctValue.value);
                 }
                 return distinctValue.value === input;
             })) === null || _b === void 0 ? void 0 : _b.label;
             return label !== null && label !== void 0 ? label : input;
         }).join(', ');
     }
-    const quickFilterValuesWidth = props.api.optionsApi.getAdaptableOptions().filterOptions.quickFilterValuesWidth;
+    const quickFilterValuesWidth = props.api.optionsApi.getAdaptableOptions().columnFilterOptions.quickFilterOptions.quickFilterValuesWidth;
     const getPopoverWidth = (targetWidth) => {
         if (quickFilterValuesWidth === 'auto') {
             return Math.max(180, targetWidth);
@@ -125,7 +121,7 @@ const QuickFilterValues = (props) => {
         }
         return null;
     };
-    return (React.createElement(OverlayTrigger_1.default, { showEvent: showEvent, 
+    return (React.createElement(OverlayTrigger, { showEvent: showEvent, 
         // cannot hide on blur, because the form input receives the input when this is opened
         hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
             valuesDropdownRef.current = api;
@@ -138,7 +134,7 @@ const QuickFilterValues = (props) => {
             }
         }, render: ({ targetWidth }) => {
             var _a;
-            return (React.createElement(rebass_1.Flex, { onMouseEnter: () => {
+            return (React.createElement(Flex, { onMouseEnter: () => {
                     if (showEvent === 'click') {
                         // For showEvent=mousenter this is not needed.
                         // When mouseenter is triggered on the overlay, onShowFn is called, the overlay is no longer hidden.
@@ -157,16 +153,16 @@ const QuickFilterValues = (props) => {
                     zIndex: 1000,
                     width: getPopoverWidth(targetWidth),
                 } },
-                React.createElement(rebass_1.Flex, { m: 2 },
-                    React.createElement(SimpleButton_1.default, { onClick: () => clearColumnFilter() }, "Clear Filter"),
-                    ((_a = api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) == false && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => {
+                React.createElement(Flex, { m: 2 },
+                    React.createElement(SimpleButton, { onClick: () => clearColumnFilter() }, "Clear Filter"),
+                    ((_a = api.optionsApi.getColumnFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) == false && (React.createElement(SimpleButton, { ml: 2, onClick: () => {
                             if (transientColumnFilter) {
                                 props.updateColumnFilter(transientColumnFilter);
                             }
                         } }, "Apply Filter"))),
-                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: props.isFilterDisabled, suppressClientSideFilter: quickFilterValues.suppressClientSideFilter, isLoading: isDistinctColumnValuesLoading, onFilterChange: handleFilterChange, currentColumn: props.currentColumn, columns: [], columnDistinctValues: quickFilterValues.values, dataType: props.currentColumn.dataType, uiSelectedColumnValues: props.columnFilter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => onColumnValueSelectedChange(list) })));
+                React.createElement(ListBoxFilterForm, { disabled: props.isFilterDisabled, suppressClientSideFilter: quickFilterValues.suppressClientSideFilter, isLoading: isDistinctColumnValuesLoading, onFilterChange: handleFilterChange, currentColumn: props.currentColumn, columns: [], columnDistinctValues: quickFilterValues.values, dataType: props.currentColumn.dataType, uiSelectedColumnValues: props.columnFilter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => onColumnValueSelectedChange(list) })));
         } },
-        React.createElement(SimpleButton_1.default, { "data-name": 'Select Values', style: {
+        React.createElement(SimpleButton, { "data-name": 'Select Values', style: {
                 flex: 1,
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -176,4 +172,3 @@ const QuickFilterValues = (props) => {
                 borderColor: 'var(--ab-color-primarydark)',
             }, disabled: props.isFilterDisabled || loadedDataIsEmpty }, selectedValues)));
 };
-exports.QuickFilterValues = QuickFilterValues;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FlexProps } from 'rebass';
-export declare type WaitingProps = React.ClassAttributes<Waiting> & {
+export type WaitingProps = React.ClassAttributes<Waiting> & {
     WaitingMessage: string;
 } & FlexProps;
 export declare class Waiting extends React.Component<WaitingProps, {}> {

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

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Waiting = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const refresh_1 = tslib_1.__importDefault(require("../../../components/icons/refresh"));
-class Waiting extends React.Component {
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Flex } from 'rebass';
+import IconRefresh from '../../../components/icons/refresh';
+export class Waiting extends React.Component {
     render() {
-        const _a = this.props, { WaitingMessage } = _a, props = tslib_1.__rest(_a, ["WaitingMessage"]);
-        return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column", marginTop: 2, marginBottom: 2 }, props),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", justifyContent: "center" },
-                React.createElement(refresh_1.default, null)),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", justifyContent: "center" },
+        const _a = this.props, { WaitingMessage } = _a, props = __rest(_a, ["WaitingMessage"]);
+        return (React.createElement(Flex, Object.assign({ flexDirection: "column", marginTop: 2, marginBottom: 2 }, props),
+            React.createElement(Flex, { flexDirection: "row", justifyContent: "center" },
+                React.createElement(IconRefresh, null)),
+            React.createElement(Flex, { flexDirection: "row", justifyContent: "center" },
                 React.createElement("h5", null, WaitingMessage))));
     }
 }
-exports.Waiting = Waiting;

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

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

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -1,6 +1,6 @@
 import { InputProps } from '../../../components/Input';
 import { CSSProperties } from 'react';
-export declare type AdaptableFormControlTextClearProps = {
+export type AdaptableFormControlTextClearProps = {
     OnTextChange: (textValue: string) => void;
     focusOnClear?: boolean;
     autoFocus?: boolean;

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableFormControlTextClear = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
-const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
+import * as React from 'react';
+import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
+import FieldWrap from '../../../components/FieldWrap';
+import SimpleButton from '../../../components/SimpleButton';
+import Input from '../../../components/Input';
+export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    return (React.createElement(FieldWrap_1.default, { onClick: props.onClick, className: props.className, style: Object.assign({ background: 'var(--ab-color-defaultbackground)', overflow: 'visible', width: '100%' }, props.style) },
-        React.createElement(Input_1.default, { autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
+    return (React.createElement(FieldWrap, { onClick: props.onClick, className: props.className, style: Object.assign({ background: 'var(--ab-color-defaultbackground)', overflow: 'visible', width: '100%' }, props.style) },
+        React.createElement(Input, { autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
                 inputRef.current = r;
                 if (!ref) {
                     return;
@@ -24,7 +20,7 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                     ref.current = r;
                 }
             }, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }),
-        React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
+        React.createElement(SimpleButton, { variant: "text", icon: "close", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
                 props.OnTextChange('');
                 const input = inputRef.current;
                 if (!focusOnClear) {
@@ -35,5 +31,5 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                         input.focus();
                     }
                 });
-            }, disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString()) })));
+            }, disabled: StringExtensions.IsNullOrEmpty(props.value.toString()) })));
 });