@adaptabletools/adaptable 15.2.1 → 15.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "15.2.1",
+  "version": "15.2.2",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1681828646082;
+declare const _default: 1682423805441;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1681828646082;
+exports.default = 1682423805441;

package/src/AdaptableOptions/FilterOptions.d.ts

@@ -182,8 +182,9 @@ export interface FilterOptions<TData = any> {
      */
     quickFilterWildcards?: Partial<Record<SystemAlertPredicateId, string[]>>;
     /**
-     * Time to wait before applying the Filter after entering a value
+     * Time to wait (in ms) before Filter Bar reacts to new value
      * @defaultValue 250
+     * @gridInfoItem
      */
     quickFilterDebounce?: number;
     /**

package/src/AdaptableOptions/MasterDetailPluginOptions.d.ts

@@ -8,12 +8,12 @@ export interface MasterDetailPluginOptions {
      */
     detailAdaptableOptions: AdaptableOptions;
     /**
-     *  Function called when Detail Grid is initialised receives context that includes Adaptable Api object
+     *  Function called when a Detail Grid is initialised, receives context including Adaptable Api
      */
     onDetailInit?: (context: DetailInitContext) => void;
 }
 /**
- * Context passed to Detail Grids when using Master Detail
+ * Context passed to Detail Grids when using Master Detail Plugin
  */
 export interface DetailInitContext extends BaseContext {
 }

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -191,6 +191,7 @@ exports.DefaultAdaptableOptions = {
         clearFiltersOnStartUp: false,
         quickFilterTrigger: 'mouseenter',
         quickFilterValuesTrigger: 'mouseenter',
+        quickFilterDebounce: 250,
         quickFilterHeight: null,
         filterActionOnUserDataChange: {
             applyFilter: GeneralConstants.FILTER_ALWAYS,
@@ -213,7 +214,6 @@ exports.DefaultAdaptableOptions = {
         showClearFilterButton: false,
         showSuspendFilterButton: false,
         quickFilterWildcards: {},
-        quickFilterDebounce: 250,
         showValuesCount: undefined,
         quickFilterValuesWidth: 180,
     },

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { ColumnFilterContext } from '../../../Utilities/Interface/ColumnFilterContext';
+import { ColumnFilter } from '../../../types';
 export interface QuickFilterFormState {
+    transientColumnFilter: ColumnFilter;
 }
 export declare const QuickFilterFormReact: (FilterContext: ColumnFilterContext) => JSX.Element;

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

@@ -20,13 +20,18 @@ const AdaptableIconComponent_1 = require("../../../components/AdaptableIconCompo
 const QuickFilterValues_1 = require("./QuickFilterValues");
 class QuickFilterFormComponent extends React.Component {
     constructor(props) {
-        var _a, _b;
         super(props);
         this.shouldOpenValuesDropdown = false;
         this._isMounted = false;
-        this.debouncedAddFilter = (0, debounce_1.default)((filter) => this.props.onAddColumnFilter(filter), (_a = this.props.api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.quickFilterDebounce);
-        this.debouncedEditFilter = (0, debounce_1.default)((filter) => this.props.onEditColumnFilter(filter), (_b = this.props.api.optionsApi.getFilterOptions()) === null || _b === void 0 ? void 0 : _b.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,
+        };
+    }
+    static getDerivedStateFromProps(props, state) {
+        return Object.assign(Object.assign({}, state), { transientColumnFilter: props.columnFilter });
     }
     componentWillUnmount() {
         this._isMounted = false;
@@ -35,9 +40,12 @@ class QuickFilterFormComponent extends React.Component {
         return Boolean(this.props.columnFilter.IsSuspended);
     }
     render() {
-        const { columnFilter } = this.props;
+        /**
+         * 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 activePredicateDef = this.props.api.predicateApi.getPredicateDefById(columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate.PredicateId);
+        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;
         }
@@ -59,19 +67,20 @@ class QuickFilterFormComponent extends React.Component {
         }
         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 },
-                    (columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate.PredicateId) && (React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
+                    (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(icons_1.Icon, { name: "delete" })),
                         "Clear")),
-                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { "data-name": columnFilter.Predicate.PredicateId, disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.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_1.default, { "data-name": columnFilter.Predicate.PredicateId, style: {
+                React.createElement(SimpleButton_1.default, { "data-name": transientColumnFilter.Predicate.PredicateId, style: {
                         borderRadius: 0,
                         borderColor: 'var(--ab-color-primarydark)',
                     } }, this.renderPredicateIcon(activePredicateDef)))),
-            showQuickFilterInput && this.renderLabel(columnFilter, activePredicateDef),
-            showQuickFilterInput && this.renderPredicateInput(activePredicateDef, columnFilter)));
+            showQuickFilterInput && this.renderLabel(transientColumnFilter, activePredicateDef),
+            showQuickFilterInput &&
+                this.renderPredicateInput(activePredicateDef, transientColumnFilter)));
     }
     renderLabel(filter, activePredicateDef) {
         if (this.hasValuesPredicate(filter === null || filter === void 0 ? void 0 : filter.Predicate)) {
@@ -163,6 +172,7 @@ class QuickFilterFormComponent extends React.Component {
         }
     }
     updateFilter(filter) {
+        this.setState({ transientColumnFilter: filter });
         if (filter.Uuid) {
             this.debouncedEditFilter(filter);
         }
@@ -228,7 +238,7 @@ function mapDispatchToProps(dispatch) {
 }
 const QuickFilterForm = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);
 const QuickFilterFormReact = (FilterContext) => {
-    var _a, _b;
-    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, currentColumn: FilterContext.Column, teamSharingActivated: false, embedColumnMenu: FilterContext.Adaptable.embedColumnMenu }), FilterContext.Adaptable);
+    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);
 };
 exports.QuickFilterFormReact = QuickFilterFormReact;

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

@@ -12,6 +12,7 @@ const rebass_1 = require("rebass");
 const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
 const QuickFilterValues = (props) => {
     const { api } = props;
+    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);
@@ -117,7 +118,6 @@ const QuickFilterValues = (props) => {
         }
         return null;
     };
-    const currentOverlayVisible = (0, react_1.useRef)(false);
     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) => {
@@ -132,12 +132,16 @@ const QuickFilterValues = (props) => {
         }, render: ({ targetWidth }) => {
             var _a;
             return (React.createElement(rebass_1.Flex, { onMouseEnter: () => {
-                    var _a;
                     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.
                         // But in this case because the trigger is click, another show is not triggered.
-                        (_a = valuesDropdownRef.current) === null || _a === void 0 ? void 0 : _a.show();
+                        // The hide event is added direcly on the element so it does not use the React event system.
+                        // But this event does, maybe beause it uses event delegation it is triggered to soon.
+                        requestAnimationFrame(() => {
+                            var _a;
+                            (_a = valuesDropdownRef.current) === null || _a === void 0 ? void 0 : _a.show();
+                        });
                     }
                 }, "data-name": "quick-filter-form", flexDirection: "column", style: {
                     fontSize: 'var(--ab-font-size-2)',