@adaptabletools/adaptable 17.0.0-canary.1 → 17.0.0-canary.10

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

@@ -1,36 +1,40 @@
-import * as React from 'react';
-import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
-import ListGroupItem from '../../../components/List/ListGroupItem';
-import { Box } from 'rebass';
-import { CheckBox } from '../../../components/CheckBox';
-import join from '../../../components/utils/join';
-import { AdaptableFormControlTextClear } from '../Forms/AdaptableFormControlTextClear';
-import GridList from '../../../components/List/GridList';
-import { useState, useEffect } from 'react';
-import { Loader } from '../../../components/Loader';
-import isDatesEqual from 'date-fns/isEqual';
-import { parseDateValue } from '../../../Utilities/Helpers/DateHelper';
-export const ListBoxFilterForm = (props) => {
-    const [FilterValue, setFilterValue] = useState('');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListBoxFilterForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
+const ListGroupItem_1 = tslib_1.__importDefault(require("../../../components/List/ListGroupItem"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../components/CheckBox");
+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");
+const isEqual_1 = tslib_1.__importDefault(require("date-fns/isEqual"));
+const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
+const ListBoxFilterForm = (props) => {
+    const [FilterValue, setFilterValue] = (0, 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] = useState(props.uiSelectedColumnValues);
+    const [UiSelectedColumnValues, internalUpdateUISelectedColumnValues] = (0, react_1.useState)(props.uiSelectedColumnValues);
     const setUiSelectedColumnValues = (values) => {
         internalUpdateUISelectedColumnValues(values);
         props.onColumnValueSelectedChange(values);
     };
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         internalUpdateUISelectedColumnValues(props.uiSelectedColumnValues);
     }, [props.uiSelectedColumnValues]);
     const renderItemForAgGridStyle = (props) => {
-        return (React.createElement(CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1, title: typeof props.children === 'string' ? props.children : null })));
+        return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1, title: typeof props.children === 'string' ? props.children : null })));
     };
     const onClickItemColumnValue = (item) => {
         let index = UiSelectedColumnValues.indexOf(item);
         if (item instanceof Date) {
-            index = UiSelectedColumnValues.findIndex((selectedValue) => isDatesEqual(parseDateValue(selectedValue), parseDateValue(item)));
+            index = UiSelectedColumnValues.findIndex((selectedValue) => (0, isEqual_1.default)((0, DateHelper_1.parseDateValue)(selectedValue), (0, DateHelper_1.parseDateValue)(item)));
         }
         if (index >= 0) {
             const newArray = [...UiSelectedColumnValues];
@@ -45,17 +49,17 @@ export const ListBoxFilterForm = (props) => {
         let isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
         // special case for date objects, need to check against string values
         if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
-            isActive = UiSelectedColumnValues.some((dateStr) => isDatesEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
+            isActive = UiSelectedColumnValues.some((dateStr) => (0, isEqual_1.default)((0, DateHelper_1.parseDateValue)(dateStr), (0, DateHelper_1.parseDateValue)(distinctValue.value)));
         }
         const columnLabel = distinctValue.label;
-        if (StringExtensions.IsNullOrEmpty(columnLabel)) {
+        if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel)) {
             return null;
         }
-        const noMatch = StringExtensions.IsNullOrEmpty(FilterValue.toLocaleLowerCase()) ||
-            StringExtensions.IsNullOrEmpty(columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase()) ||
+        const noMatch = StringExtensions_1.StringExtensions.IsNullOrEmpty(FilterValue.toLocaleLowerCase()) ||
+            StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase()) ||
             columnLabel.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0;
         if (!props.suppressClientSideFilter &&
-            StringExtensions.IsNotNullOrEmpty(FilterValue) &&
+            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
             noMatch) {
             return null;
         }
@@ -69,19 +73,18 @@ export const ListBoxFilterForm = (props) => {
                 style: { width: '100%' },
             });
         }
-        return (React.createElement(ListGroupItem, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));
+        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));
     });
-    const textClear = (React.createElement(AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
+    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: handleFilterValueChange }));
+        }, inputStyle: { padding: 'var(--ab-space-1)' }, OnTextChange: handleFilterValueChange }));
     const baseClassName = 'ab-ListBoxFilterForm';
-    return (React.createElement("div", { className: join(baseClassName, props.useAgGridStyle ? `${baseClassName}--aggrid-style` : null, props.isLoading && `${baseClassName}--loading`) },
-        React.createElement(Box, { px: 2 },
-            React.createElement(Box, { mx: props.useAgGridStyle ? 0 : '2px', marginBottom: 2 },
+    return (React.createElement("div", { className: (0, 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.useAgGridStyle ? 0 : '2px', marginBottom: 2 },
                 textClear,
-                props.isLoading && React.createElement(Loader, null, "Loading"))),
-        !props.isLoading && (React.createElement(GridList, { showZebraRows: false, className: !props.useAgGridStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
+                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))));
 };
+exports.ListBoxFilterForm = ListBoxFilterForm;

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

@@ -1,25 +1,30 @@
-import * as React from 'react';
-import ListGroupItem from '../../../components/List/ListGroupItem';
-import ListGroup from '../../../components/List/ListGroup';
-import { IconComponent } from '../../../components/Icon';
-export class ListBoxMenu extends React.Component {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListBoxMenu = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ListGroupItem_1 = tslib_1.__importDefault(require("../../../components/List/ListGroupItem"));
+const ListGroup_1 = tslib_1.__importDefault(require("../../../components/List/ListGroup"));
+const Icon_1 = require("../../../components/Icon");
+class ListBoxMenu extends React.Component {
     constructor(props) {
         super(props);
         this.state = {};
     }
     render() {
         let menuItems = this.props.MenuItems.map((menuItem, index) => {
-            return (React.createElement(ListGroupItem, { key: index, onClick: () => this.onClick(menuItem) },
-                menuItem.icon && React.createElement(IconComponent, { icon: menuItem.icon }),
+            return (React.createElement(ListGroupItem_1.default, { key: index, onClick: () => this.onClick(menuItem) },
+                menuItem.icon && React.createElement(Icon_1.IconComponent, { icon: menuItem.icon }),
                 menuItem.label));
         });
         return (React.createElement("div", { style: divStyle },
-            React.createElement(ListGroup, null, menuItems)));
+            React.createElement(ListGroup_1.default, null, menuItems)));
     }
     onClick(menuItem) {
         this.props.onMenuItemClick(menuItem);
     }
 }
+exports.ListBoxMenu = ListBoxMenu;
 let divStyle = {
     overflowY: 'auto',
     overflowX: 'hidden',

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

@@ -1,27 +1,31 @@
-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';
+"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");
 class QuickFilterFormComponent extends React.Component {
     constructor(props) {
         super(props);
         this.shouldOpenValuesDropdown = false;
         this._isMounted = false;
-        this.debouncedAddFilter = debounce((filter) => this.props.onAddColumnFilter(filter), this.props.quickFilterDebounce);
-        this.debouncedEditFilter = debounce((filter) => this.props.onEditColumnFilter(filter), this.props.quickFilterDebounce);
+        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._isMounted = true;
         this.state = {
             transientColumnFilter: props.columnFilter,
@@ -53,7 +57,8 @@ class QuickFilterFormComponent extends React.Component {
             hideEvent = 'blur';
         }
         let showQuickFilterDropdown = true;
-        let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getColumnFilterOptions().quickFilterOptions.hideQuickFilterDropdown;
+        let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getColumnFilterOptions().quickFilterOptions
+            .hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
             const columnFilterContext = {
                 column: this.props.currentColumn,
@@ -75,15 +80,15 @@ class QuickFilterFormComponent extends React.Component {
             showQuickFilterInput = !hideQuickFilterInputFunction(columnFilterContext);
         }
         return (React.createElement(React.Fragment, null,
-            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() },
+            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 50, "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() },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } },
-                            React.createElement(Icon, { name: "delete" })),
+                            React.createElement(icons_1.Icon, { name: "delete" })),
                         "Clear")),
-                    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) },
+                    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) },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } }, this.renderPredicateIcon(p)),
                         p.label))))) },
-                React.createElement(SimpleButton, { "data-name": transientColumnFilter.Predicate.PredicateId, style: {
+                React.createElement(SimpleButton_1.default, { "data-name": transientColumnFilter.Predicate.PredicateId, style: {
                         borderRadius: 0,
                         borderColor: 'var(--ab-color-primarydark)',
                     } }, this.renderPredicateIcon(activePredicateDef)))),
@@ -93,33 +98,33 @@ class QuickFilterFormComponent extends React.Component {
     }
     renderLabel(filter, activePredicateDef) {
         if (this.hasValuesPredicate(filter === null || filter === void 0 ? void 0 : filter.Predicate)) {
-            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) => {
+            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) => {
                     if (api && this.shouldOpenValuesDropdown) {
                         api.show();
                         this.shouldOpenValuesDropdown = false;
                     }
-                }, quickFilterValuesTrigger: this.props.quickFilterValuesTrigger }));
+                }, valuesFilterTrigger: this.props.valuesFilterTrigger }));
         }
         return (activePredicateDef &&
-            (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)));
+            (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)));
     }
     renderPredicateIcon(predicateDef) {
         if (!predicateDef || !predicateDef.icon) {
-            return React.createElement(Icon, { name: "filter" });
+            return React.createElement(icons_1.Icon, { name: "filter" });
         }
         if ('text' in predicateDef.icon) {
             return React.createElement("span", null, predicateDef.icon.text);
         }
-        if (isAdaptableIcon(predicateDef.icon)) {
-            return React.createElement(AdaptableIconComponent, { icon: predicateDef.icon });
+        if ((0, Icon_1.isAdaptableIcon)(predicateDef.icon)) {
+            return React.createElement(AdaptableIconComponent_1.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(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'
+            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'
                         ? true
                         : filter.Predicate.Inputs[0] === 'unchecked'
                             ? false
@@ -136,7 +141,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, { disabled: this.isFilterDisabled(), key: index, type: predicateInput.type === 'number' ? 'text' : predicateInput.type, 
+            return (React.createElement(AdaptableInput_1.default, { 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) => {
@@ -214,24 +219,24 @@ class QuickFilterFormComponent extends React.Component {
     }
 }
 function getColumnFilterWithDefault(state, props) {
-    const columnFilter = getColumnFilterSelector(state).find((cf) => cf.ColumnId == props.currentColumn.columnId);
+    const columnFilter = (0, LayoutRedux_1.getColumnFilterSelector)(state).find((cf) => cf.ColumnId == props.currentColumn.columnId);
     if (columnFilter) {
         return columnFilter;
     }
     const columnFilterOptions = props.api.optionsApi.getColumnFilterOptions();
     if (!columnFilter && props.currentColumn.dataType === 'Number') {
-        return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultNumericColumnFilter), ['']);
+        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, columnFilterOptions.defaultNumericColumnFilter), ['']);
     }
     if (!columnFilter && props.currentColumn.dataType === 'String') {
-        return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultStringColumnFilter), ['']);
+        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, columnFilterOptions.defaultStringColumnFilter), ['']);
     }
     if (!columnFilter && props.currentColumn.dataType === 'Date') {
-        return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultDateColumnFilter), ['']);
+        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, columnFilterOptions.defaultDateColumnFilter), ['']);
     }
     if (!columnFilter && props.currentColumn.dataType === 'Boolean') {
-        return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', ['all']);
+        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', ['all']);
     }
-    return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, null, null);
+    return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, null, null);
 }
 function mapStateToProps(state, ownProps) {
     return {
@@ -245,8 +250,9 @@ function mapDispatchToProps(dispatch) {
         onEditColumnFilter: (columnFilter) => dispatch(LayoutRedux.LayoutColumnFilterEdit(columnFilter)),
     };
 }
-const QuickFilterForm = connect(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);
-export const QuickFilterFormReact = (columnFilterProps) => {
+const QuickFilterForm = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);
+const QuickFilterFormReact = (columnFilterProps) => {
     var _a, _b, _c;
-    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);
+    return (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(QuickFilterForm, { api: columnFilterProps.Adaptable.api, quickFilterTrigger: (_a = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _a === void 0 ? void 0 : _a.quickFilterOptions.quickFilterTrigger, valuesFilterTrigger: (_b = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _b === void 0 ? void 0 : _b.valuesFilterOptions.valuesFilterTrigger, 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

@@ -2,7 +2,7 @@
 import { ColumnFilter } from '../../../PredefinedConfig/Common/ColumnFilter';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
-import { QuickFilterOptions } from '../../../types';
+import { ValuesFilterOptions } from '../../../types';
 export interface QuickFilterValuesProps {
     api: AdaptableApi;
     currentColumn: AdaptableColumn;
@@ -14,6 +14,6 @@ export interface QuickFilterValuesProps {
         show: () => any;
         hide: () => any;
     }) => void;
-    quickFilterValuesTrigger?: QuickFilterOptions['quickFilterValuesTrigger'];
+    valuesFilterTrigger?: ValuesFilterOptions['valuesFilterTrigger'];
 }
 export declare const QuickFilterValues: (props: QuickFilterValuesProps) => JSX.Element;

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

@@ -1,14 +1,18 @@
-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) => {
+"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) => {
     const { api } = props;
-    const currentOverlayVisible = useRef(false);
+    const currentOverlayVisible = (0, react_1.useRef)(false);
     const valuesDropdownRef = React.useRef(null);
     const [quickFilterValues, setQuickFilterValues] = React.useState({ values: [], suppressClientSideFilter: false, dataLoadIsComplete: false });
     const [isDistinctColumnValuesLoading, setIsDistinctColumnValuesLoading] = React.useState(false);
@@ -38,7 +42,7 @@ export const QuickFilterValues = (props) => {
             setTransientColumnFilter(columnFilter);
         }
     };
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (valuesLoadTrigger.counter === 0) {
             // skip the first render
             return;
@@ -59,7 +63,7 @@ export const QuickFilterValues = (props) => {
             ignore = true;
         };
     }, [valuesLoadTrigger]);
-    const onVisibleChange = useCallback((visible) => {
+    const onVisibleChange = (0, react_1.useCallback)((visible) => {
         if (visible) {
             setValuesLoadTrigger(Object.assign(Object.assign({}, valuesLoadTrigger), { counter: valuesLoadTrigger.counter + 1 }));
         }
@@ -73,9 +77,9 @@ export const QuickFilterValues = (props) => {
         }
     }, [valuesLoadTrigger, quickFilterValues]);
     const loadedDataIsEmpty = quickFilterValues.dataLoadIsComplete &&
-        ArrayExtensions.IsNullOrEmptyOrContainsSingleEmptyValue(quickFilterValues.values);
+        ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(quickFilterValues.values);
     const renderNoValuesDropdown = () => {
-        return (React.createElement(SimpleButton, { disabled: true, style: {
+        return (React.createElement(SimpleButton_1.default, { disabled: true, style: {
                 flex: 1,
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -85,7 +89,7 @@ export const QuickFilterValues = (props) => {
                 borderColor: 'var(--ab-color-primarydark)',
             } }, 'No Column Values'));
     };
-    if (ArrayExtensions.IsNullOrEmpty(props.columnFilter.Predicate.Inputs) && loadedDataIsEmpty) {
+    if (ArrayExtensions_1.default.IsNullOrEmpty(props.columnFilter.Predicate.Inputs) && loadedDataIsEmpty) {
         return renderNoValuesDropdown();
     }
     const handleFilterChange = (filterText) => {
@@ -95,7 +99,7 @@ export const QuickFilterValues = (props) => {
         }
     };
     let showEvent = 'mouseenter';
-    if (props.quickFilterValuesTrigger === 'click') {
+    if (props.valuesFilterTrigger === 'click') {
         showEvent = 'click';
     }
     let selectedValues = props.columnFilter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values';
@@ -104,14 +108,15 @@ export 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 isSameDay(input, distinctValue.value);
+                    return (0, date_fns_1.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().columnFilterOptions.quickFilterOptions.quickFilterValuesWidth;
+    const quickFilterValuesWidth = props.api.optionsApi.getAdaptableOptions().columnFilterOptions.quickFilterOptions
+        .quickFilterValuesWidth;
     const getPopoverWidth = (targetWidth) => {
         if (quickFilterValuesWidth === 'auto') {
             return Math.max(180, targetWidth);
@@ -121,9 +126,9 @@ export const QuickFilterValues = (props) => {
         }
         return null;
     };
-    return (React.createElement(OverlayTrigger, { showEvent: showEvent, 
+    return (React.createElement(OverlayTrigger_1.default, { showEvent: showEvent, 
         // cannot hide on blur, because the form input receives the input when this is opened
-        hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
+        hideEvent: "mouseleave", hideDelay: 50, ref: (api) => {
             valuesDropdownRef.current = api;
             props.registerValuesDropdownApi(api);
         }, onVisibleChange: (visible) => {
@@ -134,7 +139,7 @@ export const QuickFilterValues = (props) => {
             }
         }, render: ({ targetWidth }) => {
             var _a;
-            return (React.createElement(Flex, { onMouseEnter: () => {
+            return (React.createElement(rebass_1.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.
@@ -153,16 +158,16 @@ export const QuickFilterValues = (props) => {
                     zIndex: 1000,
                     width: getPopoverWidth(targetWidth),
                 } },
-                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: () => {
+                React.createElement(rebass_1.Flex, { m: 2 },
+                    React.createElement(SimpleButton_1.default, { onClick: () => clearColumnFilter() }, "Clear Filter"),
+                    ((_a = api.optionsApi.getColumnFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) == false && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => {
                             if (transientColumnFilter) {
                                 props.updateColumnFilter(transientColumnFilter);
                             }
                         } }, "Apply Filter"))),
-                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(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(SimpleButton, { "data-name": 'Select Values', style: {
+        React.createElement(SimpleButton_1.default, { "data-name": 'Select Values', style: {
                 flex: 1,
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -172,3 +177,4 @@ export const QuickFilterValues = (props) => {
                 borderColor: 'var(--ab-color-primarydark)',
             }, disabled: props.isFilterDisabled || loadedDataIsEmpty }, selectedValues)));
 };
+exports.QuickFilterValues = QuickFilterValues;

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

@@ -1,14 +1,18 @@
-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 {
+"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 {
     render() {
-        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" },
+        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" },
                 React.createElement("h5", null, WaitingMessage))));
     }
 }
+exports.Waiting = Waiting;

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

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

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

@@ -1,14 +1,18 @@
-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) => {
+"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) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    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) => {
+    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) => {
                 inputRef.current = r;
                 if (!ref) {
                     return;
@@ -20,7 +24,7 @@ export const 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, { variant: "text", icon: "close", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
+        React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
                 props.OnTextChange('');
                 const input = inputRef.current;
                 if (!focusOnClear) {
@@ -31,5 +35,5 @@ export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                         input.focus();
                     }
                 });
-            }, disabled: StringExtensions.IsNullOrEmpty(props.value.toString()) })));
+            }, disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString()) })));
 });