handsontable 17.1.0 → 18.0.0-rc2

package/plugins/filters/filters.js

@@ -38,6 +38,7 @@ const _conditionCollection = /*#__PURE__*/ _interop_require_default(require("./c
 const _dataFilter = /*#__PURE__*/ _interop_require_default(require("./dataFilter"));
 const _conditionUpdateObserver = /*#__PURE__*/ _interop_require_default(require("./conditionUpdateObserver"));
 const _utils = require("./utils");
+const _sortComparators = require("./sortComparators");
 const _focusController = require("./menu/focusController");
 const _constants1 = require("./constants");
 const _translations = require("../../translations");
@@ -163,26 +164,41 @@ var /**
    *
    * @type {boolean}
    */ _isDataProviderActive = /*#__PURE__*/ new WeakMap(), /**
+   * @private
+   */ _getConditionComponent = /*#__PURE__*/ new WeakSet(), /**
+   * @private
+   */ _getOperatorsComponent = /*#__PURE__*/ new WeakSet(), /**
+   * @private
+   */ _getValueComponent = /*#__PURE__*/ new WeakSet(), /**
    * `afterChange` listener.
    *
    * @param {Array} changes Array of changes.
-   */ _onAfterChange = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterChange = /*#__PURE__*/ new WeakMap(), /**
+   * `afterUpdateData` listener. `updateData` replaces the source data but keeps
+   * conditions intact. The `filter_by_value` snapshots were computed against the
+   * previous dataset, so they need to be rebuilt so newly introduced values appear
+   * in the dropdown. When `dataProvider` drives the grid, snapshot refresh is owned
+   * by the fetch flow (`afterDataProviderFetch` -> `importConditions`).
+   *
+   * @param {unknown} _data The new source data.
+   * @param {boolean} firstRun `true` for the initial data load.
+   */ _onAfterUpdateData = /*#__PURE__*/ new WeakMap(), /**
    * After dataProvider fetch listener.
    *
    * @param {object} [result] Fetch result (filters match the request that just completed). May include `filtersConditionsStack` (Array).
-   */ _onAfterDataProviderFetch = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterDataProviderFetch = /*#__PURE__*/ new WeakMap(), /**
    * After dataProvider fetch error listener.
-   */ _onAfterDataProviderFetchError = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterDataProviderFetchError = /*#__PURE__*/ new WeakMap(), /**
    * After dropdown menu show listener.
-   */ _onAfterDropdownMenuShow = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterDropdownMenuShow = /*#__PURE__*/ new WeakMap(), /**
    * After dropdown menu hide listener.
-   */ _onAfterDropdownMenuHide = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterDropdownMenuHide = /*#__PURE__*/ new WeakMap(), /**
    * Hooks applies the new dropdown menu instance to the focus navigator.
-   */ _onBeforeDropdownMenuShow = /*#__PURE__*/ new WeakSet(), /**
+   */ _onBeforeDropdownMenuShow = /*#__PURE__*/ new WeakMap(), /**
    * After dropdown menu default options listener.
    *
    * @param {object} defaultOptions ContextMenu default item options.
-   */ _onAfterDropdownMenuDefaultOptions = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterDropdownMenuDefaultOptions = /*#__PURE__*/ new WeakMap(), /**
    * On action bar submit listener.
    *
    * @private
@@ -200,7 +216,7 @@ var /**
    * @param {number} col Visual column index.
    * @param {HTMLTableCellElement} TH Header's TH element.
    *
-   */ _onAfterGetColHeader = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterGetColHeader = /*#__PURE__*/ new WeakMap(), /**
    * It updates the components state. The state is triggered by ConditionUpdateObserver, which
    * reacts to any condition added to the condition collection. It may be added through the UI
    * components or by API call.
@@ -208,18 +224,26 @@ var /**
    * @param {object} conditionsState An object with the state generated by UI components.
    */ _updateComponents = /*#__PURE__*/ new WeakSet();
 class Filters extends _base.BasePlugin {
-    static get PLUGIN_KEY() {
+    /**
+   * Returns the plugin key used to identify this plugin in Handsontable settings.
+   */ static get PLUGIN_KEY() {
         return PLUGIN_KEY;
     }
-    static get PLUGIN_PRIORITY() {
+    /**
+   * Returns the priority order used to determine the order in which plugins are initialized.
+   */ static get PLUGIN_PRIORITY() {
         return PLUGIN_PRIORITY;
     }
-    static get DEFAULT_SETTINGS() {
+    /**
+   * Returns the default settings applied when the plugin is enabled without explicit configuration.
+   */ static get DEFAULT_SETTINGS() {
         return {
             searchMode: 'show'
         };
     }
-    static get SETTINGS_VALIDATORS() {
+    /**
+   * Returns validator functions for each plugin setting to verify their values are valid before applying them.
+   */ static get SETTINGS_VALIDATORS() {
         return {
             searchMode: (value)=>typeof value === 'string' && [
                     'show',
@@ -227,7 +251,9 @@ class Filters extends _base.BasePlugin {
                 ].includes(value)
         };
     }
-    static get PLUGIN_DEPS() {
+    /**
+   * Returns the list of plugin dependencies required before this plugin can be initialized.
+   */ static get PLUGIN_DEPS() {
         return [
             'plugin:DropdownMenu',
             'plugin:HiddenRows',
@@ -249,10 +275,11 @@ class Filters extends _base.BasePlugin {
             return;
         }
         _class_private_field_set(this, _isDataProviderActive, this.hot.runHooks('hasExternalDataSource') === true);
-        this.filtersRowsMap = this.hot.rowIndexMapper.registerMap(this.pluginName, new _translations.TrimmingMap());
+        this.filtersRowsMap = this.hot.rowIndexMapper.registerMap(this.pluginName ?? '', new _translations.TrimmingMap());
         this.dropdownMenuPlugin = this.hot.getPlugin('dropdownMenu');
         const dropdownSettings = this.hot.getSettings().dropdownMenu;
-        const menuContainer = dropdownSettings && dropdownSettings.uiContainer || this.hot.rootPortalElement;
+        const uiContainerCandidate = typeof dropdownSettings === 'object' ? dropdownSettings.uiContainer : null;
+        const menuContainer = (0, _element.isHTMLElement)(uiContainerCandidate) ? uiContainerCandidate : this.hot.rootPortalElement;
         const addConfirmationHooks = (component)=>{
             component.addLocalHook('accept', ()=>_class_private_method_get(this, _onActionBarSubmit, onActionBarSubmit).call(this, 'accept'));
             component.addLocalHook('cancel', ()=>_class_private_method_get(this, _onActionBarSubmit, onActionBarSubmit).call(this, 'cancel'));
@@ -309,52 +336,57 @@ class Filters extends _base.BasePlugin {
             this.conditionUpdateObserver = new _conditionUpdateObserver.default(this.hot, this.conditionCollection, (physicalColumn)=>this.getDataMapAtColumn(physicalColumn));
             this.conditionUpdateObserver.addLocalHook('update', (conditionState)=>_class_private_method_get(this, _updateComponents, updateComponents).call(this, conditionState));
         }
-        this.components.forEach((component)=>component.show());
-        this.addHook('afterDropdownMenuDefaultOptions', (...args)=>_class_private_method_get(this, _onAfterDropdownMenuDefaultOptions, onAfterDropdownMenuDefaultOptions).call(this, ...args));
-        this.addHook('beforeDropdownMenuShow', ()=>_class_private_method_get(this, _onBeforeDropdownMenuShow, onBeforeDropdownMenuShow).call(this));
-        this.addHook('afterDropdownMenuShow', ()=>_class_private_method_get(this, _onAfterDropdownMenuShow, onAfterDropdownMenuShow).call(this));
-        this.addHook('afterDropdownMenuHide', ()=>_class_private_method_get(this, _onAfterDropdownMenuHide, onAfterDropdownMenuHide).call(this));
-        this.addHook('afterChange', (changes)=>_class_private_method_get(this, _onAfterChange, onAfterChange).call(this, changes));
-        this.addHook('afterDataProviderFetch', (result)=>_class_private_method_get(this, _onAfterDataProviderFetch, onAfterDataProviderFetch).call(this, result));
-        this.addHook('afterDataProviderFetchError', ()=>_class_private_method_get(this, _onAfterDataProviderFetchError, onAfterDataProviderFetchError).call(this));
+        this.components.forEach((component)=>component?.show());
+        this.addHook('afterDropdownMenuDefaultOptions', _class_private_field_get(this, _onAfterDropdownMenuDefaultOptions));
+        this.addHook('beforeDropdownMenuShow', _class_private_field_get(this, _onBeforeDropdownMenuShow));
+        this.addHook('afterDropdownMenuShow', _class_private_field_get(this, _onAfterDropdownMenuShow));
+        this.addHook('afterDropdownMenuHide', _class_private_field_get(this, _onAfterDropdownMenuHide));
+        this.addHook('afterChange', _class_private_field_get(this, _onAfterChange));
+        this.addHook('afterUpdateData', _class_private_field_get(this, _onAfterUpdateData));
+        this.addHook('afterDataProviderFetch', _class_private_field_get(this, _onAfterDataProviderFetch));
+        this.addHook('afterDataProviderFetchError', _class_private_field_get(this, _onAfterDataProviderFetchError));
         // Temp. solution (extending menu items bug in contextMenu/dropdownMenu)
         if (this.hot.getSettings().dropdownMenu && this.dropdownMenuPlugin) {
             this.dropdownMenuPlugin.disablePlugin();
             this.dropdownMenuPlugin.enablePlugin();
         }
-        if (!_class_private_field_get(this, _menuFocusNavigator) && this.dropdownMenuPlugin.enabled) {
+        if (!_class_private_field_get(this, _menuFocusNavigator) && this.dropdownMenuPlugin?.enabled) {
             const focusableItems = [
                 // A fake menu item that once focused allows escaping from the focus navigation (using Tab keys)
                 // to the menu navigation using arrow keys.
                 {
                     focus: ()=>{
-                        const menu = _class_private_field_get(this, _menuFocusNavigator).getMenu();
+                        const navigator = _class_private_field_get(this, _menuFocusNavigator);
+                        if (!navigator) {
+                            return;
+                        }
+                        const menu = navigator.getMenu();
                         const menuNavigator = menu.getNavigator();
-                        const lastSelectedMenuItem = _class_private_field_get(this, _menuFocusNavigator).getLastMenuPage();
+                        const lastSelectedMenuItem = navigator.getLastMenuPage();
                         menu.focus();
                         if (lastSelectedMenuItem > 0) {
-                            menuNavigator.setCurrentPage(lastSelectedMenuItem);
+                            menuNavigator?.setCurrentPage(lastSelectedMenuItem);
                         } else {
-                            menuNavigator.toFirstItem();
+                            menuNavigator?.toFirstItem();
                         }
                     }
                 },
-                ...Array.from(this.components).map(([, component])=>component.getElements()).flat()
+                ...Array.from(this.components).map(([, component])=>component?.getElements() ?? []).flat()
             ];
             _class_private_field_set(this, _menuFocusNavigator, (0, _focusController.createMenuFocusController)(this.dropdownMenuPlugin.menu, focusableItems));
             const forwardToFocusNavigation = (event)=>{
-                _class_private_field_get(this, _menuFocusNavigator).listen();
+                _class_private_field_get(this, _menuFocusNavigator)?.listen();
                 event.preventDefault();
                 if ((0, _unicode.isKey)(event.keyCode, 'TAB')) {
                     if (event.shiftKey) {
-                        _class_private_field_get(this, _menuFocusNavigator).toPreviousItem();
+                        _class_private_field_get(this, _menuFocusNavigator)?.toPreviousItem();
                     } else {
-                        _class_private_field_get(this, _menuFocusNavigator).toNextItem();
+                        _class_private_field_get(this, _menuFocusNavigator)?.toNextItem();
                     }
                 }
             };
-            this.components.get('filter_by_value').addLocalHook('listTabKeydown', forwardToFocusNavigation);
-            this.components.get('filter_by_condition').addLocalHook('selectTabKeydown', forwardToFocusNavigation);
+            this.components.get('filter_by_value')?.addLocalHook('listTabKeydown', forwardToFocusNavigation);
+            this.components.get('filter_by_condition')?.addLocalHook('selectTabKeydown', forwardToFocusNavigation);
         }
         this.registerShortcuts();
         super.enablePlugin();
@@ -371,15 +403,15 @@ class Filters extends _base.BasePlugin {
    */ disablePlugin() {
         if (this.enabled) {
             if (this.dropdownMenuPlugin?.enabled) {
-                this.dropdownMenuPlugin.menu.clearLocalHooks();
+                this.dropdownMenuPlugin.menu?.clearLocalHooks();
             }
             this.components.forEach((component, key)=>{
-                component.destroy();
+                component?.destroy();
                 this.components.set(key, null);
             });
-            this.conditionCollection.destroy();
+            this.conditionCollection?.destroy();
             this.conditionCollection = null;
-            this.hot.rowIndexMapper.unregisterMap(this.pluginName);
+            this.hot.rowIndexMapper.unregisterMap(this.pluginName ?? '');
         }
         this.unregisterShortcuts();
         super.disablePlugin();
@@ -389,7 +421,7 @@ class Filters extends _base.BasePlugin {
    *
    * @private
    */ registerShortcuts() {
-        this.hot.getShortcutManager().getContext('grid').addShortcut({
+        this.hot.getShortcutManager().getContext('grid')?.addShortcut({
             keys: [
                 [
                     'Alt',
@@ -413,9 +445,9 @@ class Filters extends _base.BasePlugin {
    *
    * @private
    */ unregisterShortcuts() {
-        this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+        this.hot.getShortcutManager().getContext('grid')?.removeShortcutsByGroup(SHORTCUTS_GROUP);
     }
-    /* eslint-disable jsdoc/require-description-complete-sentence */ /**
+    /**
    * @memberof Filters#
    * @function addCondition
    * @description
@@ -429,8 +461,10 @@ class Filters extends _base.BasePlugin {
    * | `between` | Between | `[from: number\|string, to: number\|string]`, e.g. `[10, 50]` |
    * | `by_value` | By value | `[[...values: Array]]`, e.g. `[['ing', 'ed', 'as']]`. The outer array wraps a single inner array that contains all values to **keep** (show) after filtering. |
    * | `contains` | Contains | `[value: string]`, e.g. `['ing']` |
-   * | `date_after` | After a date | `[dateString: string]`, e.g. `['1/1/2023']`. The format must match the column's `dateFormat` option. |
-   * | `date_before` | Before a date | `[dateString: string]`, e.g. `['1/1/2023']`. The format must match the column's `dateFormat` option. |
+   * | `date_after` | After a date (exclusive) | `[dateString: string]`, e.g. `['1/1/2023']`. The format must match the column's `dateFormat` option. |
+   * | `date_after_or_equal` | After or equal to a date (inclusive) | `[dateString: string]`, e.g. `['1/1/2023']`. The format must match the column's `dateFormat` option. |
+   * | `date_before` | Before a date (exclusive) | `[dateString: string]`, e.g. `['1/1/2023']`. The format must match the column's `dateFormat` option. |
+   * | `date_before_or_equal` | Before or equal to a date (inclusive) | `[dateString: string]`, e.g. `['1/1/2023']`. The format must match the column's `dateFormat` option. |
    * | `date_today` | Today | `[]` |
    * | `date_tomorrow` | Tomorrow | `[]` |
    * | `date_yesterday` | Yesterday | `[]` |
@@ -439,8 +473,10 @@ class Filters extends _base.BasePlugin {
    * | `eq` | Equal | `[value: string\|number]`, e.g. `['John']` |
    * | `gt` | Greater than | `[value: number]`, e.g. `[95]` |
    * | `gte` | Greater than or equal | `[value: number]`, e.g. `[95]` |
-   * | `intl_date_after` | After a date (locale-aware) | `[dateString: string]`, e.g. `['2023-01-01']` |
-   * | `intl_date_before` | Before a date (locale-aware) | `[dateString: string]`, e.g. `['2023-01-01']` |
+   * | `intl_date_after` | After a date, exclusive (locale-aware) | `[dateString: string]`, e.g. `['2023-01-01']` |
+   * | `intl_date_after_or_equal` | After or equal to a date, inclusive (locale-aware) | `[dateString: string]`, e.g. `['2023-01-01']` |
+   * | `intl_date_before` | Before a date, exclusive (locale-aware) | `[dateString: string]`, e.g. `['2023-01-01']` |
+   * | `intl_date_before_or_equal` | Before or equal to a date, inclusive (locale-aware) | `[dateString: string]`, e.g. `['2023-01-01']` |
    * | `intl_date_between` | Between dates (locale-aware) | `[fromDateString: string, toDateString: string]`, e.g. `['2023-01-01', '2023-12-31']` |
    * | `intl_date_today` | Today (locale-aware) | `[]` |
    * | `intl_date_tomorrow` | Tomorrow (locale-aware) | `[]` |
@@ -788,7 +824,7 @@ class Filters extends _base.BasePlugin {
    *     filtersPlugin.filter();
    *   }
    *
-   *   private getData(): any[] {
+   *   private getData(): Array<*> {
    *     // Get some data
    *   }
    * }
@@ -799,12 +835,12 @@ class Filters extends _base.BasePlugin {
    * @param {string} name Condition short name.
    * @param {Array} args Condition arguments. The expected format depends on the condition - see the table above for details.
    * @param {string} [operationId=conjunction] `id` of operation which is performed on the column.
-   */ /* eslint-enable jsdoc/require-description-complete-sentence */ addCondition(column, name, args, operationId = _constants1.OPERATION_AND) {
+   */ addCondition(column, name, args, operationId = _constants1.OPERATION_AND) {
         if (name === _constants1.CONDITION_BY_VALUE && _class_private_field_get(this, _isDataProviderActive)) {
             return;
         }
         const physicalColumn = this.hot.toPhysicalColumn(column);
-        this.conditionCollection.addCondition(physicalColumn, {
+        this.conditionCollection?.addCondition(physicalColumn, {
             command: {
                 key: name
             },
@@ -817,7 +853,7 @@ class Filters extends _base.BasePlugin {
    * @param {number} column Visual column index.
    */ removeConditions(column) {
         const physicalColumn = this.hot.toPhysicalColumn(column);
-        this.conditionCollection.removeConditions(physicalColumn);
+        this.conditionCollection?.removeConditions(physicalColumn);
     }
     /**
    * Clears all conditions previously added to the collection for the specified column index or, if the column index
@@ -826,10 +862,10 @@ class Filters extends _base.BasePlugin {
    * @param {number} [column] Visual column index.
    */ clearConditions(column) {
         if (column === undefined) {
-            this.conditionCollection.clean();
+            this.conditionCollection?.clean();
         } else {
             const physicalColumn = this.hot.toPhysicalColumn(column);
-            this.conditionCollection.removeConditions(physicalColumn);
+            this.conditionCollection?.removeConditions(physicalColumn);
         }
     }
     /**
@@ -841,9 +877,9 @@ class Filters extends _base.BasePlugin {
    *
    * @param {Array} conditions Array of conditions.
    */ importConditions(conditions) {
-        this.conditionCollection.importAllConditions(conditions);
+        this.conditionCollection?.importAllConditions(conditions);
     }
-    /* eslint-disable jsdoc/require-description-complete-sentence */ /**
+    /**
    * Exports filter conditions for all columns from the plugin.
    * The array represents the filter state for each column. For example:
    *
@@ -869,36 +905,35 @@ class Filters extends _base.BasePlugin {
    *
    * @returns {Array}
    */ exportConditions() {
-        return this.conditionCollection.exportAllConditions();
+        return this.conditionCollection?.exportAllConditions() ?? [];
     }
-    /* eslint-enable jsdoc/require-description-complete-sentence */ /**
+    /**
    * Filters data based on added filter conditions.
    *
    * @fires Hooks#beforeFilter
    * @fires Hooks#afterFilter
    */ filter() {
         const { navigableHeaders } = this.hot.getSettings();
-        const needToFilter = !this.conditionCollection.isEmpty();
+        const needToFilter = !this.conditionCollection?.isEmpty();
         const conditions = this.exportConditions();
         if (_class_private_field_get(this, _isDataProviderActive)) {
             _class_private_field_set(this, _dataProviderFilterRollbackStack, (0, _object.deepClone)(_class_private_field_get(this, _previousConditionStack)));
         }
         const allowFiltering = this.hot.runHooks('beforeFilter', conditions, _class_private_field_get(this, _previousConditionStack));
         if (allowFiltering !== false && needToFilter) {
-            const dataFilter = this._createDataFilter();
             const trimmedRows = [];
-            let rowIndexesToShow = [];
+            const dataFilter = this._createDataFilter();
+            const rowIndexesToShow = (0, _array.arrayMap)(dataFilter.filter(), (rowData)=>rowData.meta.row);
+            const rowIndexesToShowAssertion = (0, _utils.createArrayAssertion)(rowIndexesToShow);
             this.hot.batchExecution(()=>{
-                this.filtersRowsMap.clear();
-                rowIndexesToShow = (0, _array.arrayMap)(dataFilter.filter(), (rowData)=>rowData.meta.row);
-                const rowIndexesToShowAssertion = (0, _utils.createArrayAssertion)(rowIndexesToShow);
+                this.filtersRowsMap?.clear();
                 (0, _number.rangeEach)(this.hot.countSourceRows() - 1, (row)=>{
                     if (!rowIndexesToShowAssertion(row)) {
                         trimmedRows.push(row);
                     }
                 });
                 (0, _array.arrayEach)(trimmedRows, (physicalRow)=>{
-                    this.filtersRowsMap.setValueAtIndex(physicalRow, true);
+                    this.filtersRowsMap?.setValueAtIndex(physicalRow, true);
                 });
             }, true);
             if (!navigableHeaders && !rowIndexesToShow.length) {
@@ -907,14 +942,17 @@ class Filters extends _base.BasePlugin {
             _class_private_field_set(this, _previousConditionStack, this.exportConditions());
         } else if (allowFiltering !== false && !needToFilter) {
             _class_private_field_set(this, _previousConditionStack, this.exportConditions());
-            this.filtersRowsMap.clear();
+            this.filtersRowsMap?.clear();
         } else if (_class_private_field_get(this, _isDataProviderActive)) {
             _class_private_field_set(this, _previousConditionStack, this.exportConditions());
         } else {
             this.importConditions(_class_private_field_get(this, _previousConditionStack));
         }
         if (this.hot.selection.isSelected()) {
-            this.hot.selectCell(navigableHeaders ? -1 : 0, this.hot.getSelectedRangeActive().highlight.col);
+            const highlightCol = this.hot.getSelectedRangeActive()?.highlight.col;
+            if (highlightCol !== null && highlightCol !== undefined) {
+                this.hot.selectCell(navigableHeaders ? -1 : 0, highlightCol);
+            }
         }
         if (allowFiltering !== false) {
             this.hot.runHooks('afterFilter', conditions);
@@ -930,7 +968,7 @@ class Filters extends _base.BasePlugin {
    * the index of the column.
    */ getSelectedColumn() {
         const highlight = this.hot.getSelectedRangeActive()?.highlight;
-        if (!highlight) {
+        if (!highlight || highlight.col === null) {
             return null;
         }
         return {
@@ -944,7 +982,7 @@ class Filters extends _base.BasePlugin {
    * are included.
    *
    * @param {number} physicalColumn The physical column index.
-   * @returns {Array<{meta: CellProperties, value: any}>} Array of objects with `meta` and `value`, one per source row.
+   * @returns {Array<{meta: CellProperties, value: *}>} Array of objects with `meta` and `value`, one per source row.
    */ getDataMapAtColumn(physicalColumn) {
         const countSourceRows = this.hot.countSourceRows();
         const visualColumn = this.hot.toVisualColumn(physicalColumn);
@@ -958,7 +996,6 @@ class Filters extends _base.BasePlugin {
             let value = (0, _valueAccessors.getValueGetterValue)(this.hot.getSourceDataAtCell(physicalRow, visualColumn), cellMeta);
             if (this.hot.hasHook('modifyData')) {
                 const valueHolder = (0, _object.createObjectPropListener)(value);
-                // Physical indexes are passed here on purpose. In this context they match the visual ones.
                 this.hot.runHooks('modifyData', physicalRow, physicalColumn, valueHolder, 'get');
                 if (valueHolder.isTouched()) {
                     value = valueHolder.value;
@@ -979,8 +1016,10 @@ class Filters extends _base.BasePlugin {
    */ updateValueComponentCondition(columnIndex) {
         const visualColumnIndex = this.hot.toVisualColumn(columnIndex);
         const dataAtCol = this.hot.getDataAtCol(visualColumnIndex);
-        const selectedValues = (0, _utils.unifyColumnValues)(dataAtCol);
-        this.conditionUpdateObserver.updateStatesAtColumn(columnIndex, selectedValues);
+        const columnMeta = this.hot.countRows() > 0 ? this.hot.getCellMeta(0, visualColumnIndex) : null;
+        const comparator = (0, _sortComparators.getSortComparatorForMeta)(columnMeta);
+        const selectedValues = (0, _utils.unifyColumnValues)(dataAtCol, comparator);
+        this.conditionUpdateObserver?.updateStatesAtColumn(columnIndex, selectedValues);
     }
     /**
    * Restores components to its saved state.
@@ -988,7 +1027,7 @@ class Filters extends _base.BasePlugin {
    * @private
    * @param {Array} components List of components.
    */ restoreComponents(components) {
-        const physicalIndex = this.getSelectedColumn()?.physicalIndex;
+        const physicalIndex = this.getSelectedColumn()?.physicalIndex ?? -1;
         components.forEach((component)=>{
             if (component.isHidden()) {
                 return;
@@ -1008,10 +1047,13 @@ class Filters extends _base.BasePlugin {
    * @returns {string}
    */ getOperationBasedOnArguments(suggestedOperation, byConditionState1, byConditionState2, byValueState) {
         let operation = suggestedOperation;
-        if (operation === _constants1.OPERATION_OR && byConditionState1.command.key !== _constants1.CONDITION_NONE && byConditionState2.command.key !== _constants1.CONDITION_NONE && byValueState.command.key !== _constants1.CONDITION_NONE) {
+        const cmd1 = byConditionState1.command?.key;
+        const cmd2 = byConditionState2.command?.key;
+        const cmdV = byValueState.command?.key;
+        if (operation === _constants1.OPERATION_OR && cmd1 !== _constants1.CONDITION_NONE && cmd2 !== _constants1.CONDITION_NONE && cmdV !== _constants1.CONDITION_NONE) {
             operation = _constants1.OPERATION_OR_THEN_VARIABLE;
-        } else if (byValueState.command.key !== _constants1.CONDITION_NONE) {
-            if (byConditionState1.command.key === _constants1.CONDITION_NONE || byConditionState2.command.key === _constants1.CONDITION_NONE) {
+        } else if (cmdV !== _constants1.CONDITION_NONE) {
+            if (cmd1 === _constants1.CONDITION_NONE || cmd2 === _constants1.CONDITION_NONE) {
                 operation = _constants1.OPERATION_AND;
             }
         }
@@ -1032,13 +1074,19 @@ class Filters extends _base.BasePlugin {
    *
    * @private
    */ updateDependentComponentsVisibility() {
-        const component = this.components.get('filter_by_condition');
-        const { command } = component.getState();
+        const component = _class_private_method_get(this, _getConditionComponent, getConditionComponent).call(this, 'filter_by_condition');
+        const defaultState = {
+            command: {
+                key: _constants1.CONDITION_NONE
+            }
+        };
+        const state = component?.getState() ?? defaultState;
+        const command = state.command;
         const componentsToShow = [
             this.components.get('filter_by_condition2'),
             this.components.get('filter_operators')
-        ];
-        if (command.showOperators) {
+        ].filter((c)=>c !== null && c !== undefined);
+        if (command?.showOperators) {
             this.showComponents(...componentsToShow);
         } else {
             this.hideComponents(...componentsToShow);
@@ -1051,6 +1099,9 @@ class Filters extends _base.BasePlugin {
    * @param {ConditionCollection} conditionCollection Condition collection object.
    * @returns {DataFilter}
    */ _createDataFilter(conditionCollection = this.conditionCollection) {
+        if (!conditionCollection) {
+            conditionCollection = new _conditionCollection.default(this.hot, false);
+        }
         return new _dataFilter.default(conditionCollection, (physicalColumn)=>this.getDataMapAtColumn(physicalColumn));
     }
     /**
@@ -1060,19 +1111,11 @@ class Filters extends _base.BasePlugin {
    * @param {...BaseComponent} components List of components.
    * @returns {Array}
    */ getIndexesOfComponents(...components) {
-        const indexes = [];
-        if (!this.dropdownMenuPlugin) {
-            return indexes;
+        const menu = this.dropdownMenuPlugin?.menu;
+        if (!menu) {
+            return [];
         }
-        const menu = this.dropdownMenuPlugin.menu;
-        (0, _array.arrayEach)(components, (component)=>{
-            (0, _array.arrayEach)(menu.menuItems, (item, index)=>{
-                if (item.key === component.getMenuItemDescriptor().key) {
-                    indexes.push(index);
-                }
-            });
-        });
-        return indexes;
+        return components.map((component)=>menu.getItemPositionByKey(String(component.getMenuItemDescriptor().key))).filter((index)=>index !== -1);
     }
     /**
    * Changes visibility of component.
@@ -1085,7 +1128,13 @@ class Filters extends _base.BasePlugin {
             return;
         }
         const menu = this.dropdownMenuPlugin.menu;
+        if (!menu) {
+            return;
+        }
         const hotMenu = menu.hotMenu;
+        if (!hotMenu) {
+            return;
+        }
         const hiddenRows = hotMenu.getPlugin('hiddenRows');
         const indexes = this.getIndexesOfComponents(...components);
         if (visible) {
@@ -1121,14 +1170,16 @@ class Filters extends _base.BasePlugin {
                     this.components.set(key, null);
                 }
             });
-            this.conditionCollection.destroy();
-            this.conditionUpdateObserver.destroy();
-            this.hot.rowIndexMapper.unregisterMap(this.pluginName);
+            this.conditionCollection?.destroy();
+            this.conditionUpdateObserver?.destroy();
+            this.hot.rowIndexMapper.unregisterMap(this.pluginName ?? '');
         }
         super.destroy();
     }
-    constructor(hotInstance){
-        super(hotInstance), _class_private_method_init(this, _onAfterChange), _class_private_method_init(this, _onAfterDataProviderFetch), _class_private_method_init(this, _onAfterDataProviderFetchError), _class_private_method_init(this, _onAfterDropdownMenuShow), _class_private_method_init(this, _onAfterDropdownMenuHide), _class_private_method_init(this, _onBeforeDropdownMenuShow), _class_private_method_init(this, _onAfterDropdownMenuDefaultOptions), _class_private_method_init(this, _onActionBarSubmit), _class_private_method_init(this, _onComponentChange), _class_private_method_init(this, _onSelectUIClosed), _class_private_method_init(this, _onAfterGetColHeader), _class_private_method_init(this, _updateComponents), _class_private_field_init(this, _menuFocusNavigator, {
+    /**
+   * Initializes the plugin and registers the column header hook needed to inject the filter UI.
+   */ constructor(hotInstance){
+        super(hotInstance), _class_private_method_init(this, _getConditionComponent), _class_private_method_init(this, _getOperatorsComponent), _class_private_method_init(this, _getValueComponent), _class_private_method_init(this, _onActionBarSubmit), _class_private_method_init(this, _onComponentChange), _class_private_method_init(this, _onSelectUIClosed), _class_private_method_init(this, _updateComponents), _class_private_field_init(this, _menuFocusNavigator, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _dropdownMenuTraces, {
@@ -1143,6 +1194,33 @@ class Filters extends _base.BasePlugin {
         }), _class_private_field_init(this, _isDataProviderActive, {
             writable: true,
             value: void 0
+        }), _class_private_field_init(this, _onAfterChange, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterUpdateData, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterDataProviderFetch, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterDataProviderFetchError, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterDropdownMenuShow, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterDropdownMenuHide, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeDropdownMenuShow, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterDropdownMenuDefaultOptions, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterGetColHeader, {
+            writable: true,
+            value: void 0
         }), /**
    * Instance of {@link DropdownMenu}.
    *
@@ -1189,52 +1267,80 @@ class Filters extends _base.BasePlugin {
    *
    * @private
    * @type {null|TrimmingMap}
-   */ this.filtersRowsMap = null, _class_private_field_set(this, _dropdownMenuTraces, new WeakSet()), _class_private_field_set(this, _previousConditionStack, []), _class_private_field_set(this, _dataProviderFilterRollbackStack, []), _class_private_field_set(this, _isDataProviderActive, false);
-        // One listener for the enable/disable functionality
-        this.hot.addHook('afterGetColHeader', (...args)=>_class_private_method_get(this, _onAfterGetColHeader, onAfterGetColHeader).call(this, ...args));
-    }
-}
-function onAfterChange(changes) {
-    if (changes) {
-        (0, _array.arrayEach)(changes, (change)=>{
-            const [, prop] = change;
-            const visualColumnIndex = this.hot.propToCol(prop);
-            const physicalColumnIndex = this.hot.toPhysicalColumn(visualColumnIndex);
-            if (this.conditionCollection.hasConditions(physicalColumnIndex)) {
-                this.updateValueComponentCondition(physicalColumnIndex);
+   */ this.filtersRowsMap = null, _class_private_field_set(this, _dropdownMenuTraces, new WeakSet()), _class_private_field_set(this, _previousConditionStack, []), _class_private_field_set(this, _dataProviderFilterRollbackStack, []), _class_private_field_set(this, _isDataProviderActive, false), _class_private_field_set(this, _onAfterChange, (changes)=>{
+            if (changes) {
+                (0, _array.arrayEach)(changes, (change)=>{
+                    const [, prop] = change;
+                    const visualColumnIndex = this.hot.propToCol(prop);
+                    const physicalColumnIndex = this.hot.toPhysicalColumn(visualColumnIndex);
+                    if (this.conditionCollection?.hasConditions(physicalColumnIndex)) {
+                        this.updateValueComponentCondition(physicalColumnIndex);
+                    }
+                });
+            }
+        }), _class_private_field_set(this, _onAfterUpdateData, (_data, firstRun)=>{
+            if (firstRun || _class_private_field_get(this, _isDataProviderActive) || !this.conditionCollection) {
+                return;
+            }
+            const filteredColumns = this.conditionCollection?.getFilteredColumns() ?? [];
+            if (filteredColumns.length === 0) {
+                return;
+            }
+            (0, _array.arrayEach)(filteredColumns, (physicalColumn)=>{
+                this.conditionUpdateObserver?.updateStatesAtColumn(physicalColumn);
+            });
+        }), _class_private_field_set(this, _onAfterDataProviderFetch, (result)=>{
+            this.importConditions(result?.filtersConditionsStack ?? []);
+        }), _class_private_field_set(this, _onAfterDataProviderFetchError, ()=>{
+            this.importConditions(_class_private_field_get(this, _dataProviderFilterRollbackStack));
+        }), _class_private_field_set(this, _onAfterDropdownMenuShow, ()=>{
+            const menu = this.dropdownMenuPlugin?.menu;
+            if (!menu) {
+                return;
+            }
+            this.restoreComponents(Array.from(this.components.values()).filter((c)=>c !== null));
+            menu.updateMenuDimensions();
+        }), _class_private_field_set(this, _onAfterDropdownMenuHide, ()=>{
+            this.components.get('filter_by_condition')?.getSelectElement()?.closeOptions();
+            this.components.get('filter_by_condition2')?.getSelectElement()?.closeOptions();
+        }), _class_private_field_set(this, _onBeforeDropdownMenuShow, ()=>{
+            const mainMenu = this.dropdownMenuPlugin?.menu;
+            if (!mainMenu) {
+                return;
+            }
+            if (!_class_private_field_get(this, _dropdownMenuTraces).has(mainMenu)) {
+                _class_private_field_get(this, _menuFocusNavigator)?.setMenu(mainMenu);
+            }
+            _class_private_field_get(this, _dropdownMenuTraces).add(mainMenu);
+        }), _class_private_field_set(this, _onAfterDropdownMenuDefaultOptions, (defaultOptions)=>{
+            defaultOptions.items.push({
+                name: _predefinedItems.SEPARATOR
+            });
+            this.components.forEach((component)=>{
+                if (component) {
+                    defaultOptions.items.push(component.getMenuItemDescriptor());
+                }
+            });
+        }), _class_private_field_set(this, _onAfterGetColHeader, (col, TH)=>{
+            const physicalColumn = this.hot.toPhysicalColumn(col);
+            if (this.enabled && this.conditionCollection?.hasConditions(physicalColumn) && (0, _element.isBottomMostColumnHeader)(TH)) {
+                (0, _element.addClass)(TH, 'htFiltersActive');
+            } else {
+                (0, _element.removeClass)(TH, 'htFiltersActive');
             }
         });
+        // One listener for the enable/disable functionality
+        this.hot.addHook('afterGetColHeader', _class_private_field_get(this, _onAfterGetColHeader));
     }
 }
-function onAfterDataProviderFetch(result) {
-    this.importConditions(result?.filtersConditionsStack ?? []);
-}
-function onAfterDataProviderFetchError() {
-    this.importConditions(_class_private_field_get(this, _dataProviderFilterRollbackStack));
-}
-function onAfterDropdownMenuShow() {
-    const menu = this.dropdownMenuPlugin.menu;
-    this.restoreComponents(Array.from(this.components.values()));
-    menu.updateMenuDimensions();
+function getConditionComponent(id) {
+    return this.components.get(id) ?? null;
 }
-function onAfterDropdownMenuHide() {
-    this.components.get('filter_by_condition').getSelectElement().closeOptions();
-    this.components.get('filter_by_condition2').getSelectElement().closeOptions();
+function getOperatorsComponent() {
+    return this.components.get('filter_operators') ?? null;
 }
-function onBeforeDropdownMenuShow() {
-    const mainMenu = this.dropdownMenuPlugin.menu;
-    if (!_class_private_field_get(this, _dropdownMenuTraces).has(mainMenu)) {
-        _class_private_field_get(this, _menuFocusNavigator).setMenu(mainMenu);
-    }
-    _class_private_field_get(this, _dropdownMenuTraces).add(mainMenu);
-}
-function onAfterDropdownMenuDefaultOptions(defaultOptions) {
-    defaultOptions.items.push({
-        name: _predefinedItems.SEPARATOR
-    });
-    this.components.forEach((component)=>{
-        defaultOptions.items.push(component.getMenuItemDescriptor());
-    });
+function getValueComponent() {
+    return this.components.get('filter_by_value') ?? null;
 }
 function onActionBarSubmit(submitType) {
     if (submitType === 'accept') {
@@ -1244,55 +1350,59 @@ function onActionBarSubmit(submitType) {
             return;
         }
         const { physicalIndex } = selectedColumn;
-        const byConditionState1 = this.components.get('filter_by_condition').getState();
-        const byConditionState2 = this.components.get('filter_by_condition2').getState();
-        const byValueState = this.components.get('filter_by_value').getState();
-        const operation = this.getOperationBasedOnArguments(this.components.get('filter_operators').getActiveOperationId(), byConditionState1, byConditionState2, byValueState);
-        this.conditionUpdateObserver.groupChanges();
-        let columnStackPosition = this.conditionCollection.getColumnStackPosition(physicalIndex);
-        if (columnStackPosition === -1) {
+        const noneState = {
+            command: {
+                key: _constants1.CONDITION_NONE
+            },
+            args: []
+        };
+        const byConditionState1 = _class_private_method_get(this, _getConditionComponent, getConditionComponent).call(this, 'filter_by_condition')?.getState() ?? noneState;
+        const byConditionState2 = _class_private_method_get(this, _getConditionComponent, getConditionComponent).call(this, 'filter_by_condition2')?.getState() ?? noneState;
+        const byValueState = _class_private_method_get(this, _getValueComponent, getValueComponent).call(this)?.getState() ?? noneState;
+        const operation = this.getOperationBasedOnArguments(_class_private_method_get(this, _getOperatorsComponent, getOperatorsComponent).call(this)?.getActiveOperationId() ?? _constants1.OPERATION_AND, byConditionState1, byConditionState2, byValueState);
+        this.conditionUpdateObserver?.groupChanges();
+        let columnStackPosition = this.conditionCollection?.getColumnStackPosition(physicalIndex);
+        if (columnStackPosition === undefined || columnStackPosition === -1) {
             columnStackPosition = undefined;
         }
-        this.conditionCollection.removeConditions(physicalIndex);
-        if (byConditionState1.command.key !== _constants1.CONDITION_NONE) {
-            this.conditionCollection.addCondition(physicalIndex, byConditionState1, operation, columnStackPosition);
-            if (byConditionState2.command.key !== _constants1.CONDITION_NONE) {
-                this.conditionCollection.addCondition(physicalIndex, byConditionState2, operation, columnStackPosition);
+        this.conditionCollection?.removeConditions(physicalIndex);
+        const cmd1 = byConditionState1.command?.key;
+        const cmd2 = byConditionState2.command?.key;
+        const cmdV = byValueState.command?.key;
+        if (cmd1 !== _constants1.CONDITION_NONE) {
+            this.conditionCollection?.addCondition(physicalIndex, byConditionState1, operation, columnStackPosition);
+            if (cmd2 !== _constants1.CONDITION_NONE) {
+                this.conditionCollection?.addCondition(physicalIndex, byConditionState2, operation, columnStackPosition);
             }
         }
-        if (byValueState.command.key !== _constants1.CONDITION_NONE && !_class_private_field_get(this, _isDataProviderActive)) {
-            this.conditionCollection.addCondition(physicalIndex, byValueState, operation, columnStackPosition);
+        if (cmdV !== _constants1.CONDITION_NONE && !_class_private_field_get(this, _isDataProviderActive)) {
+            this.conditionCollection?.addCondition(physicalIndex, byValueState, operation, columnStackPosition);
         }
-        this.conditionUpdateObserver.flush();
-        this.components.forEach((component)=>component.saveState(physicalIndex));
+        this.conditionUpdateObserver?.flush();
+        this.components.forEach((component)=>component?.saveState(physicalIndex));
         this.filter();
     }
     this.dropdownMenuPlugin?.close();
 }
 function onComponentChange(component, command) {
-    const menu = this.dropdownMenuPlugin.menu;
+    const menu = this.dropdownMenuPlugin?.menu;
     this.updateDependentComponentsVisibility();
     if (component.constructor === _condition.ConditionComponent && !command.inputsCount) {
         this.setListeningDropdownMenu();
     }
-    menu.updateMenuDimensions();
+    menu?.updateMenuDimensions();
 }
 function onSelectUIClosed() {
     this.setListeningDropdownMenu();
 }
-function onAfterGetColHeader(col, TH) {
-    const physicalColumn = this.hot.toPhysicalColumn(col);
-    if (this.enabled && this.conditionCollection.hasConditions(physicalColumn) && (0, _element.isBottomMostColumnHeader)(TH)) {
-        (0, _element.addClass)(TH, 'htFiltersActive');
-    } else {
-        (0, _element.removeClass)(TH, 'htFiltersActive');
-    }
-}
 function updateComponents(conditionsState) {
     if (!this.dropdownMenuPlugin?.enabled) {
         return;
     }
-    const { editedConditionStack: { conditions, column }, conditionArgsChange } = conditionsState;
+    const editedStack = conditionsState.editedConditionStack;
+    const conditions = editedStack.conditions;
+    const column = editedStack.column;
+    const conditionArgsChange = conditionsState.conditionArgsChange;
     if (Array.isArray(conditionArgsChange)) {
         // update the previous condition stack (only for 'by_value' condition) on each dataset
         // change to make the undo/redo work properly
@@ -1318,10 +1428,10 @@ function updateComponents(conditionsState) {
         The dropdown menu supports at most 2 regular conditions and 1 'filter by value' condition per column,\x20
         but more were provided. For more details see the documentation.`);
     } else {
-        const operationType = this.conditionCollection.getOperation(column);
-        this.components.get('filter_by_condition').updateState(conditionsWithoutByValue[0], column);
-        this.components.get('filter_by_condition2').updateState(conditionsWithoutByValue[1], column);
-        this.components.get('filter_operators').updateState(operationType, column);
-        this.components.get('filter_by_value').updateState(conditionsState);
+        const operationType = this.conditionCollection?.getOperation(column);
+        _class_private_method_get(this, _getConditionComponent, getConditionComponent).call(this, 'filter_by_condition')?.updateState(conditionsWithoutByValue[0], column);
+        _class_private_method_get(this, _getConditionComponent, getConditionComponent).call(this, 'filter_by_condition2')?.updateState(conditionsWithoutByValue[1], column);
+        _class_private_method_get(this, _getOperatorsComponent, getOperatorsComponent).call(this)?.updateState(operationType ?? _constants1.OPERATION_AND, column);
+        _class_private_method_get(this, _getValueComponent, getValueComponent).call(this)?.updateState(conditionsState);
     }
 }