handsontable 14.1.0 → 14.2.0-next-7ae341f-20240229

package/plugins/dropdownMenu/dropdownMenu.js

@@ -15,10 +15,16 @@ var _predefinedItems = require("../contextMenu/predefinedItems");
 var _a11y = require("../../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
+function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
+function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
+function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 _pluginHooks.default.getSingleton().register('afterDropdownMenuDefaultOptions');
 _pluginHooks.default.getSingleton().register('beforeDropdownMenuShow');
@@ -80,6 +86,7 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
  * ```
  * :::
  */
+var _isButtonClicked = /*#__PURE__*/new WeakMap();
 var _addCustomShortcuts = /*#__PURE__*/new WeakSet();
 var _onTableClick = /*#__PURE__*/new WeakSet();
 var _onAfterGetColHeader = /*#__PURE__*/new WeakSet();
@@ -87,6 +94,8 @@ var _onMenuBeforeOpen = /*#__PURE__*/new WeakSet();
 var _onMenuAfterOpen = /*#__PURE__*/new WeakSet();
 var _onSubMenuAfterOpen = /*#__PURE__*/new WeakSet();
 var _onMenuAfterClose = /*#__PURE__*/new WeakSet();
+var _onBeforeViewportScrollHorizontally = /*#__PURE__*/new WeakSet();
+var _onBeforeOnCellMouseDown = /*#__PURE__*/new WeakSet();
 class DropdownMenu extends _base.BasePlugin {
   static get PLUGIN_KEY() {
     return PLUGIN_KEY;
@@ -118,6 +127,21 @@ class DropdownMenu extends _base.BasePlugin {
     super(hotInstance);
 
     // One listener for enable/disable functionality
+    /**
+     * Hook sets the internal flag to `true` when the button is clicked.
+     *
+     * @param {MouseEvent} event The mouse event object.
+     */
+    _classPrivateMethodInitSpec(this, _onBeforeOnCellMouseDown);
+    /**
+     * Hook allows blocking horizontal scroll when the menu is opened by clicking on
+     * the column header button. This prevents from scrolling the viewport (jump effect) when
+     * the button is clicked.
+     *
+     * @param {number} visualColumn Visual column index.
+     * @returns {number | null}
+     */
+    _classPrivateMethodInitSpec(this, _onBeforeViewportScrollHorizontally);
     /**
      * On menu after close listener.
      *
@@ -182,6 +206,15 @@ class DropdownMenu extends _base.BasePlugin {
      * @type {Menu}
      */
     _defineProperty(this, "menu", null);
+    /**
+     * Flag which determines if the button that opens the menu was clicked.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _isButtonClicked, {
+      writable: true,
+      value: false
+    });
     this.hot.addHook('afterGetColHeader', (col, TH) => _classPrivateMethodGet(this, _onAfterGetColHeader, _onAfterGetColHeader2).call(this, col, TH));
   }
 
@@ -207,6 +240,18 @@ class DropdownMenu extends _base.BasePlugin {
       return;
     }
     this.itemsFactory = new _itemsFactory.ItemsFactory(this.hot, DropdownMenu.DEFAULT_ITEMS);
+    this.addHook('beforeOnCellMouseDown', function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return _classPrivateMethodGet(_this, _onBeforeOnCellMouseDown, _onBeforeOnCellMouseDown2).call(_this, ...args);
+    });
+    this.addHook('beforeViewportScrollHorizontally', function () {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      return _classPrivateMethodGet(_this, _onBeforeViewportScrollHorizontally, _onBeforeViewportScrollHorizontally2).call(_this, ...args);
+    });
     const settings = this.hot.getSettings()[PLUGIN_KEY];
     const predefinedItems = {
       items: this.itemsFactory.getItems(settings)
@@ -236,8 +281,8 @@ class DropdownMenu extends _base.BasePlugin {
       this.menu.addLocalHook('afterSubmenuOpen', subMenuInstance => _classPrivateMethodGet(this, _onSubMenuAfterOpen, _onSubMenuAfterOpen2).call(this, subMenuInstance));
       this.menu.addLocalHook('afterClose', () => _classPrivateMethodGet(this, _onMenuAfterClose, _onMenuAfterClose2).call(this));
       this.menu.addLocalHook('executeCommand', function () {
-        for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
-          params[_key] = arguments[_key];
+        for (var _len3 = arguments.length, params = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          params[_key3] = arguments[_key3];
         }
         return _this.executeCommand.call(_this, ...params);
       });
@@ -410,8 +455,8 @@ class DropdownMenu extends _base.BasePlugin {
    * @param {*} params Additional parameters passed to the command executor.
    */
   executeCommand(commandName) {
-    for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      params[_key2 - 1] = arguments[_key2];
+    for (var _len4 = arguments.length, params = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+      params[_key4 - 1] = arguments[_key4];
     }
     this.commandExecutor.execute(commandName, ...params);
   }
@@ -455,6 +500,7 @@ function _onTableClick2(event) {
   if ((0, _element.hasClass)(event.target, BUTTON_CLASS_NAME)) {
     const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
     const rect = event.target.getBoundingClientRect();
+    _classPrivateFieldSet(this, _isButtonClicked, false);
     this.open({
       left: rect.left + offset.left,
       top: rect.top + event.target.offsetHeight + 3 + offset.top
@@ -516,6 +562,14 @@ function _onMenuAfterClose2() {
   this.hot.listen();
   this.hot.runHooks('afterDropdownMenuHide', this);
 }
+function _onBeforeViewportScrollHorizontally2(visualColumn) {
+  return _classPrivateFieldGet(this, _isButtonClicked) ? null : visualColumn;
+}
+function _onBeforeOnCellMouseDown2(event) {
+  if ((0, _element.hasClass)(event.target, BUTTON_CLASS_NAME)) {
+    _classPrivateFieldSet(this, _isButtonClicked, true);
+  }
+}
 DropdownMenu.SEPARATOR = {
   name: _predefinedItems.SEPARATOR
 };

package/plugins/dropdownMenu/dropdownMenu.mjs

@@ -1,9 +1,15 @@
 import "core-js/modules/es.error.cause.js";
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
+function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
+function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
+function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 import { BasePlugin } from "../base/index.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
@@ -76,6 +82,7 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
  * ```
  * :::
  */
+var _isButtonClicked = /*#__PURE__*/new WeakMap();
 var _addCustomShortcuts = /*#__PURE__*/new WeakSet();
 var _onTableClick = /*#__PURE__*/new WeakSet();
 var _onAfterGetColHeader = /*#__PURE__*/new WeakSet();
@@ -83,6 +90,8 @@ var _onMenuBeforeOpen = /*#__PURE__*/new WeakSet();
 var _onMenuAfterOpen = /*#__PURE__*/new WeakSet();
 var _onSubMenuAfterOpen = /*#__PURE__*/new WeakSet();
 var _onMenuAfterClose = /*#__PURE__*/new WeakSet();
+var _onBeforeViewportScrollHorizontally = /*#__PURE__*/new WeakSet();
+var _onBeforeOnCellMouseDown = /*#__PURE__*/new WeakSet();
 export class DropdownMenu extends BasePlugin {
   static get PLUGIN_KEY() {
     return PLUGIN_KEY;
@@ -114,6 +123,21 @@ export class DropdownMenu extends BasePlugin {
     super(hotInstance);
 
     // One listener for enable/disable functionality
+    /**
+     * Hook sets the internal flag to `true` when the button is clicked.
+     *
+     * @param {MouseEvent} event The mouse event object.
+     */
+    _classPrivateMethodInitSpec(this, _onBeforeOnCellMouseDown);
+    /**
+     * Hook allows blocking horizontal scroll when the menu is opened by clicking on
+     * the column header button. This prevents from scrolling the viewport (jump effect) when
+     * the button is clicked.
+     *
+     * @param {number} visualColumn Visual column index.
+     * @returns {number | null}
+     */
+    _classPrivateMethodInitSpec(this, _onBeforeViewportScrollHorizontally);
     /**
      * On menu after close listener.
      *
@@ -178,6 +202,15 @@ export class DropdownMenu extends BasePlugin {
      * @type {Menu}
      */
     _defineProperty(this, "menu", null);
+    /**
+     * Flag which determines if the button that opens the menu was clicked.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _isButtonClicked, {
+      writable: true,
+      value: false
+    });
     this.hot.addHook('afterGetColHeader', (col, TH) => _classPrivateMethodGet(this, _onAfterGetColHeader, _onAfterGetColHeader2).call(this, col, TH));
   }
 
@@ -203,6 +236,18 @@ export class DropdownMenu extends BasePlugin {
       return;
     }
     this.itemsFactory = new ItemsFactory(this.hot, DropdownMenu.DEFAULT_ITEMS);
+    this.addHook('beforeOnCellMouseDown', function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return _classPrivateMethodGet(_this, _onBeforeOnCellMouseDown, _onBeforeOnCellMouseDown2).call(_this, ...args);
+    });
+    this.addHook('beforeViewportScrollHorizontally', function () {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      return _classPrivateMethodGet(_this, _onBeforeViewportScrollHorizontally, _onBeforeViewportScrollHorizontally2).call(_this, ...args);
+    });
     const settings = this.hot.getSettings()[PLUGIN_KEY];
     const predefinedItems = {
       items: this.itemsFactory.getItems(settings)
@@ -232,8 +277,8 @@ export class DropdownMenu extends BasePlugin {
       this.menu.addLocalHook('afterSubmenuOpen', subMenuInstance => _classPrivateMethodGet(this, _onSubMenuAfterOpen, _onSubMenuAfterOpen2).call(this, subMenuInstance));
       this.menu.addLocalHook('afterClose', () => _classPrivateMethodGet(this, _onMenuAfterClose, _onMenuAfterClose2).call(this));
       this.menu.addLocalHook('executeCommand', function () {
-        for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
-          params[_key] = arguments[_key];
+        for (var _len3 = arguments.length, params = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          params[_key3] = arguments[_key3];
         }
         return _this.executeCommand.call(_this, ...params);
       });
@@ -406,8 +451,8 @@ export class DropdownMenu extends BasePlugin {
    * @param {*} params Additional parameters passed to the command executor.
    */
   executeCommand(commandName) {
-    for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      params[_key2 - 1] = arguments[_key2];
+    for (var _len4 = arguments.length, params = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+      params[_key4 - 1] = arguments[_key4];
     }
     this.commandExecutor.execute(commandName, ...params);
   }
@@ -450,6 +495,7 @@ function _onTableClick2(event) {
   if (hasClass(event.target, BUTTON_CLASS_NAME)) {
     const offset = getDocumentOffsetByElement(this.menu.container, this.hot.rootDocument);
     const rect = event.target.getBoundingClientRect();
+    _classPrivateFieldSet(this, _isButtonClicked, false);
     this.open({
       left: rect.left + offset.left,
       top: rect.top + event.target.offsetHeight + 3 + offset.top
@@ -511,6 +557,14 @@ function _onMenuAfterClose2() {
   this.hot.listen();
   this.hot.runHooks('afterDropdownMenuHide', this);
 }
+function _onBeforeViewportScrollHorizontally2(visualColumn) {
+  return _classPrivateFieldGet(this, _isButtonClicked) ? null : visualColumn;
+}
+function _onBeforeOnCellMouseDown2(event) {
+  if (hasClass(event.target, BUTTON_CLASS_NAME)) {
+    _classPrivateFieldSet(this, _isButtonClicked, true);
+  }
+}
 DropdownMenu.SEPARATOR = {
   name: SEPARATOR
 };

package/plugins/filters/component/value.js

@@ -13,6 +13,7 @@ var _base = require("./_base");
 var _multipleSelect = require("../ui/multipleSelect");
 var _constants2 = require("../constants");
 var _conditionRegisterer = require("../conditionRegisterer");
+var _numericRenderer = require("../../../renderers/numericRenderer");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
@@ -26,12 +27,29 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
  * @class ValueComponent
  */
 var _onInputKeyDown = /*#__PURE__*/new WeakSet();
+var _triggerModifyMultipleSelectionValueHook = /*#__PURE__*/new WeakSet();
+var _onModifyDisplayedValue = /*#__PURE__*/new WeakSet();
 class ValueComponent extends _base.BaseComponent {
   constructor(hotInstance, options) {
     super(hotInstance, {
       id: options.id,
       stateless: false
     });
+    /**
+     * Modify the value displayed in the multiple select list.
+     *
+     * @param {*} value Cell value.
+     * @param {object} meta The cell meta object.
+     * @returns {*} Returns the modified value.
+     */
+    _classPrivateMethodInitSpec(this, _onModifyDisplayedValue);
+    /**
+     * Trigger the `modifyFiltersMultiSelectValue` hook.
+     *
+     * @param {object} item Item from the multiple select list.
+     * @param {Map} metaMap Map of row meta objects.
+     */
+    _classPrivateMethodInitSpec(this, _triggerModifyMultipleSelectionValueHook);
     /**
      * Key down listener.
      *
@@ -56,6 +74,7 @@ class ValueComponent extends _base.BaseComponent {
    */
   registerHooks() {
     this.getMultipleSelectElement().addLocalHook('keydown', event => _classPrivateMethodGet(this, _onInputKeyDown, _onInputKeyDown2).call(this, event)).addLocalHook('listTabKeydown', event => this.runLocalHooks('listTabKeydown', event));
+    this.hot.addHook('modifyFiltersMultiSelectValue', (value, meta) => _classPrivateMethodGet(this, _onModifyDisplayedValue, _onModifyDisplayedValue2).call(this, value, meta));
   }
 
   /**
@@ -113,15 +132,19 @@ class ValueComponent extends _base.BaseComponent {
       const state = {};
       const defaultBlankCellValue = this.hot.getTranslatedPhrase(C.FILTERS_VALUES_BLANK_CELLS);
       if (firstByValueCondition) {
-        const rowValues = (0, _utils.unifyColumnValues)((0, _array.arrayMap)(filteredRowsFactory(physicalColumn, conditionsStack), row => row.value));
+        const filteredRows = filteredRowsFactory(physicalColumn, conditionsStack);
+        const rowValues = (0, _array.arrayMap)(filteredRows, row => row.value);
+        const rowMetaMap = new Map(filteredRows.map(row => [row.value, this.hot.getCellMeta(row.meta.visualRow, row.meta.visualCol)]));
+        const unifiedRowValues = (0, _utils.unifyColumnValues)(rowValues);
         if (conditionArgsChange) {
           firstByValueCondition.args[0] = conditionArgsChange;
         }
         const selectedValues = [];
-        const itemsSnapshot = (0, _utils.intersectValues)(rowValues, firstByValueCondition.args[0], defaultBlankCellValue, item => {
+        const itemsSnapshot = (0, _utils.intersectValues)(unifiedRowValues, firstByValueCondition.args[0], defaultBlankCellValue, item => {
           if (item.checked) {
             selectedValues.push(item.value);
           }
+          _classPrivateMethodGet(this, _triggerModifyMultipleSelectionValueHook, _triggerModifyMultipleSelectionValueHook2).call(this, item, rowMetaMap);
         });
         const column = stateInfo.editedConditionStack.column;
         state.locale = this.hot.getCellMeta(0, column).locale;
@@ -182,8 +205,13 @@ class ValueComponent extends _base.BaseComponent {
    */
   reset() {
     const defaultBlankCellValue = this.hot.getTranslatedPhrase(C.FILTERS_VALUES_BLANK_CELLS);
-    const values = (0, _utils.unifyColumnValues)(this._getColumnVisibleValues());
-    const items = (0, _utils.intersectValues)(values, values, defaultBlankCellValue);
+    const rowEntries = this._getColumnVisibleValues();
+    const rowValues = rowEntries.map(entry => entry.value);
+    const rowMetaMap = new Map(rowEntries.map(row => [row.value, row.meta]));
+    const values = (0, _utils.unifyColumnValues)(rowValues);
+    const items = (0, _utils.intersectValues)(values, values, defaultBlankCellValue, item => {
+      _classPrivateMethodGet(this, _triggerModifyMultipleSelectionValueHook, _triggerModifyMultipleSelectionValueHook2).call(this, item, rowMetaMap);
+    });
     this.getMultipleSelectElement().setItems(items);
     super.reset();
     this.getMultipleSelectElement().setValue(values);
@@ -203,7 +231,12 @@ class ValueComponent extends _base.BaseComponent {
     if (selectedColumn === null) {
       return [];
     }
-    return (0, _array.arrayMap)(this.hot.getDataAtCol(selectedColumn.visualIndex), v => (0, _utils.toEmptyString)(v));
+    return (0, _array.arrayMap)(this.hot.getDataAtCol(selectedColumn.visualIndex), (v, rowIndex) => {
+      return {
+        value: (0, _utils.toEmptyString)(v),
+        meta: this.hot.getCellMeta(rowIndex, selectedColumn.visualIndex)
+      };
+    });
   }
 }
 exports.ValueComponent = ValueComponent;
@@ -212,4 +245,17 @@ function _onInputKeyDown2(event) {
     this.runLocalHooks('cancel');
     (0, _event.stopImmediatePropagation)(event);
   }
+}
+function _triggerModifyMultipleSelectionValueHook2(item, metaMap) {
+  if (this.hot.hasHook('modifyFiltersMultiSelectValue')) {
+    item.visualValue = this.hot.runHooks('modifyFiltersMultiSelectValue', item.visualValue, metaMap.get(item.value));
+  }
+}
+function _onModifyDisplayedValue2(value, meta) {
+  switch (meta.type) {
+    case 'numeric':
+      return (0, _numericRenderer.getRenderedValue)(value, meta);
+    default:
+      return value;
+  }
 }

package/plugins/filters/component/value.mjs

@@ -16,17 +16,35 @@ import { BaseComponent } from "./_base.mjs";
 import { MultipleSelectUI } from "../ui/multipleSelect.mjs";
 import { CONDITION_BY_VALUE, CONDITION_NONE } from "../constants.mjs";
 import { getConditionDescriptor } from "../conditionRegisterer.mjs";
+import { getRenderedValue as getRenderedNumericValue } from "../../../renderers/numericRenderer/index.mjs";
 /**
  * @private
  * @class ValueComponent
  */
 var _onInputKeyDown = /*#__PURE__*/new WeakSet();
+var _triggerModifyMultipleSelectionValueHook = /*#__PURE__*/new WeakSet();
+var _onModifyDisplayedValue = /*#__PURE__*/new WeakSet();
 export class ValueComponent extends BaseComponent {
   constructor(hotInstance, options) {
     super(hotInstance, {
       id: options.id,
       stateless: false
     });
+    /**
+     * Modify the value displayed in the multiple select list.
+     *
+     * @param {*} value Cell value.
+     * @param {object} meta The cell meta object.
+     * @returns {*} Returns the modified value.
+     */
+    _classPrivateMethodInitSpec(this, _onModifyDisplayedValue);
+    /**
+     * Trigger the `modifyFiltersMultiSelectValue` hook.
+     *
+     * @param {object} item Item from the multiple select list.
+     * @param {Map} metaMap Map of row meta objects.
+     */
+    _classPrivateMethodInitSpec(this, _triggerModifyMultipleSelectionValueHook);
     /**
      * Key down listener.
      *
@@ -51,6 +69,7 @@ export class ValueComponent extends BaseComponent {
    */
   registerHooks() {
     this.getMultipleSelectElement().addLocalHook('keydown', event => _classPrivateMethodGet(this, _onInputKeyDown, _onInputKeyDown2).call(this, event)).addLocalHook('listTabKeydown', event => this.runLocalHooks('listTabKeydown', event));
+    this.hot.addHook('modifyFiltersMultiSelectValue', (value, meta) => _classPrivateMethodGet(this, _onModifyDisplayedValue, _onModifyDisplayedValue2).call(this, value, meta));
   }
 
   /**
@@ -108,15 +127,19 @@ export class ValueComponent extends BaseComponent {
       const state = {};
       const defaultBlankCellValue = this.hot.getTranslatedPhrase(C.FILTERS_VALUES_BLANK_CELLS);
       if (firstByValueCondition) {
-        const rowValues = unifyColumnValues(arrayMap(filteredRowsFactory(physicalColumn, conditionsStack), row => row.value));
+        const filteredRows = filteredRowsFactory(physicalColumn, conditionsStack);
+        const rowValues = arrayMap(filteredRows, row => row.value);
+        const rowMetaMap = new Map(filteredRows.map(row => [row.value, this.hot.getCellMeta(row.meta.visualRow, row.meta.visualCol)]));
+        const unifiedRowValues = unifyColumnValues(rowValues);
         if (conditionArgsChange) {
           firstByValueCondition.args[0] = conditionArgsChange;
         }
         const selectedValues = [];
-        const itemsSnapshot = intersectValues(rowValues, firstByValueCondition.args[0], defaultBlankCellValue, item => {
+        const itemsSnapshot = intersectValues(unifiedRowValues, firstByValueCondition.args[0], defaultBlankCellValue, item => {
           if (item.checked) {
             selectedValues.push(item.value);
           }
+          _classPrivateMethodGet(this, _triggerModifyMultipleSelectionValueHook, _triggerModifyMultipleSelectionValueHook2).call(this, item, rowMetaMap);
         });
         const column = stateInfo.editedConditionStack.column;
         state.locale = this.hot.getCellMeta(0, column).locale;
@@ -177,8 +200,13 @@ export class ValueComponent extends BaseComponent {
    */
   reset() {
     const defaultBlankCellValue = this.hot.getTranslatedPhrase(C.FILTERS_VALUES_BLANK_CELLS);
-    const values = unifyColumnValues(this._getColumnVisibleValues());
-    const items = intersectValues(values, values, defaultBlankCellValue);
+    const rowEntries = this._getColumnVisibleValues();
+    const rowValues = rowEntries.map(entry => entry.value);
+    const rowMetaMap = new Map(rowEntries.map(row => [row.value, row.meta]));
+    const values = unifyColumnValues(rowValues);
+    const items = intersectValues(values, values, defaultBlankCellValue, item => {
+      _classPrivateMethodGet(this, _triggerModifyMultipleSelectionValueHook, _triggerModifyMultipleSelectionValueHook2).call(this, item, rowMetaMap);
+    });
     this.getMultipleSelectElement().setItems(items);
     super.reset();
     this.getMultipleSelectElement().setValue(values);
@@ -198,7 +226,12 @@ export class ValueComponent extends BaseComponent {
     if (selectedColumn === null) {
       return [];
     }
-    return arrayMap(this.hot.getDataAtCol(selectedColumn.visualIndex), v => toEmptyString(v));
+    return arrayMap(this.hot.getDataAtCol(selectedColumn.visualIndex), (v, rowIndex) => {
+      return {
+        value: toEmptyString(v),
+        meta: this.hot.getCellMeta(rowIndex, selectedColumn.visualIndex)
+      };
+    });
   }
 }
 function _onInputKeyDown2(event) {
@@ -206,4 +239,17 @@ function _onInputKeyDown2(event) {
     this.runLocalHooks('cancel');
     stopImmediatePropagation(event);
   }
+}
+function _triggerModifyMultipleSelectionValueHook2(item, metaMap) {
+  if (this.hot.hasHook('modifyFiltersMultiSelectValue')) {
+    item.visualValue = this.hot.runHooks('modifyFiltersMultiSelectValue', item.visualValue, metaMap.get(item.value));
+  }
+}
+function _onModifyDisplayedValue2(value, meta) {
+  switch (meta.type) {
+    case 'numeric':
+      return getRenderedNumericValue(value, meta);
+    default:
+      return value;
+  }
 }

package/plugins/filters/utils.js

@@ -77,7 +77,7 @@ function toEmptyString(value) {
 }
 
 /**
- * Unify column values (replace `null` and `undefined` values into empty string, unique values and sort them).
+ * Unify column values (remove duplicated values and sort them).
  *
  * @param {Array} values An array of values.
  * @returns {Array}

package/plugins/filters/utils.mjs

@@ -68,7 +68,7 @@ export function toEmptyString(value) {
 }
 
 /**
- * Unify column values (replace `null` and `undefined` values into empty string, unique values and sort them).
+ * Unify column values (remove duplicated values and sort them).
  *
  * @param {Array} values An array of values.
  * @returns {Array}

package/plugins/formulas/formulas.js

@@ -1069,7 +1069,15 @@ function _onModifyData2(physicalRow, visualColumn, valueHolder, ioMode) {
     sheet: this.sheetId
   };
   let cellValue = this.engine.getCellValue(address); // Date as an integer (Excel like date).
-  const cellMeta = this.hot.getCellMeta(visualRow, visualColumn);
+
+  // TODO: Workaround. We use HOT's `getCellsMeta` method instead of HOT's `getCellMeta` method. Getting cell meta
+  // using the second method lead to execution of the `cells` method. Using the `getDataAtCell` (which may be useful)
+  // in a callback to the `cells` method leads to triggering the `modifyData` hook. Thus, the `onModifyData` callback
+  // is executed once again and it cause creation of an infinite loop.
+  let cellMeta = this.hot.getCellsMeta().find(singleCellMeta => singleCellMeta.visualRow === visualRow && singleCellMeta.visualCol === visualColumn);
+  if (cellMeta === undefined) {
+    cellMeta = {};
+  }
   if (cellMeta.type === 'date' && (0, _number.isNumeric)(cellValue)) {
     cellValue = (0, _utils.getDateFromExcelDate)(cellValue, cellMeta.dateFormat);
   }
@@ -1282,6 +1290,7 @@ function _onEngineSheetAdded2(addedSheetDisplayName) {
   this.hot.runHooks('afterSheetAdded', addedSheetDisplayName);
 }
 function _onEngineSheetRenamed2(oldDisplayName, newDisplayName) {
+  this.sheetName = newDisplayName;
   this.hot.runHooks('afterSheetRenamed', oldDisplayName, newDisplayName);
 }
 function _onEngineSheetRemoved2(removedSheetDisplayName, changes) {

package/plugins/formulas/formulas.mjs

@@ -1064,7 +1064,15 @@ function _onModifyData2(physicalRow, visualColumn, valueHolder, ioMode) {
     sheet: this.sheetId
   };
   let cellValue = this.engine.getCellValue(address); // Date as an integer (Excel like date).
-  const cellMeta = this.hot.getCellMeta(visualRow, visualColumn);
+
+  // TODO: Workaround. We use HOT's `getCellsMeta` method instead of HOT's `getCellMeta` method. Getting cell meta
+  // using the second method lead to execution of the `cells` method. Using the `getDataAtCell` (which may be useful)
+  // in a callback to the `cells` method leads to triggering the `modifyData` hook. Thus, the `onModifyData` callback
+  // is executed once again and it cause creation of an infinite loop.
+  let cellMeta = this.hot.getCellsMeta().find(singleCellMeta => singleCellMeta.visualRow === visualRow && singleCellMeta.visualCol === visualColumn);
+  if (cellMeta === undefined) {
+    cellMeta = {};
+  }
   if (cellMeta.type === 'date' && isNumeric(cellValue)) {
     cellValue = getDateFromExcelDate(cellValue, cellMeta.dateFormat);
   }
@@ -1277,6 +1285,7 @@ function _onEngineSheetAdded2(addedSheetDisplayName) {
   this.hot.runHooks('afterSheetAdded', addedSheetDisplayName);
 }
 function _onEngineSheetRenamed2(oldDisplayName, newDisplayName) {
+  this.sheetName = newDisplayName;
   this.hot.runHooks('afterSheetRenamed', oldDisplayName, newDisplayName);
 }
 function _onEngineSheetRemoved2(removedSheetDisplayName, changes) {