handsontable 0.0.0-next-0306a1a-20240826 → 0.0.0-next-1dfe61f-20240910

package/plugins/contextMenu/predefinedItems/alignment.mjs

@@ -1,8 +1,19 @@
-import { align, getAlignmentClasses, checkSelectionConsistency, markLabelAsSelected } from "../utils.mjs";
+import { align, getAlignmentClasses, markLabelAsSelected, hasSelectionAClass } from "../utils.mjs";
 import { KEY as SEPARATOR } from "./separator.mjs";
 import * as C from "../../../i18n/constants.mjs";
 export const KEY = 'alignment';
 
+/**
+ * @param {object} hot The current Handsontable instance.
+ * @param {string} rawName The raw name of the menu item.
+ * @param {string} htClassName The class name to check.
+ * @returns {string} The value of aria-label parameter.
+ */
+function ariaLabel(hot, rawName, htClassName) {
+  const checkboxState = hasSelectionAClass(hot, htClassName) ? hot.getTranslatedPhrase(C.CHECKBOX_CHECKED) : hot.getTranslatedPhrase(C.CHECKBOX_UNCHECKED);
+  return `${rawName} ${checkboxState.toLowerCase()}`;
+}
+
 /**
  * @returns {object}
  */
@@ -28,15 +39,16 @@ export default function alignmentItem() {
     submenu: {
       items: [{
         key: `${KEY}:left`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT), 'htLeft');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htLeft');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htLeft') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htLeft')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -53,15 +65,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:center`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER), 'htCenter');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htCenter');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htCenter') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htCenter')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -78,15 +91,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:right`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT), 'htRight');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htRight');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htRight') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htRight')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -103,15 +117,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:justify`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY), 'htJustify');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htJustify');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htJustify') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htJustify')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -130,15 +145,16 @@ export default function alignmentItem() {
         name: SEPARATOR
       }, {
         key: `${KEY}:top`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP), 'htTop');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htTop');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htTop') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htTop')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -155,15 +171,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:middle`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE), 'htMiddle');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htMiddle');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htMiddle') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htMiddle')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -180,15 +197,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:bottom`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM), 'htBottom');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htBottom');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htBottom') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htBottom')) {
             label = markLabelAsSelected(label);
           }
           return label;

package/plugins/contextMenu/predefinedItems/readOnly.js

@@ -15,6 +15,17 @@ const KEY = exports.KEY = 'make_read_only';
 function readOnlyItem() {
   return {
     key: KEY,
+    checkable: true,
+    ariaChecked() {
+      const atLeastOneReadOnly = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);
+      return atLeastOneReadOnly;
+    },
+    ariaLabel() {
+      const rawName = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
+      const atLeastOneReadOnly = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);
+      const checkboxState = atLeastOneReadOnly ? this.getTranslatedPhrase(C.CHECKBOX_CHECKED) : this.getTranslatedPhrase(C.CHECKBOX_UNCHECKED);
+      return `${rawName} ${checkboxState.toLowerCase()}`;
+    },
     name() {
       let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
       const atLeastOneReadOnly = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);

package/plugins/contextMenu/predefinedItems/readOnly.mjs

@@ -9,6 +9,17 @@ export const KEY = 'make_read_only';
 export default function readOnlyItem() {
   return {
     key: KEY,
+    checkable: true,
+    ariaChecked() {
+      const atLeastOneReadOnly = checkSelectionConsistency(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);
+      return atLeastOneReadOnly;
+    },
+    ariaLabel() {
+      const rawName = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
+      const atLeastOneReadOnly = checkSelectionConsistency(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);
+      const checkboxState = atLeastOneReadOnly ? this.getTranslatedPhrase(C.CHECKBOX_CHECKED) : this.getTranslatedPhrase(C.CHECKBOX_UNCHECKED);
+      return `${rawName} ${checkboxState.toLowerCase()}`;
+    },
     name() {
       let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
       const atLeastOneReadOnly = checkSelectionConsistency(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);

package/plugins/contextMenu/utils.js

@@ -4,7 +4,9 @@ exports.__esModule = true;
 exports.align = align;
 exports.checkSelectionConsistency = checkSelectionConsistency;
 exports.getAlignmentClasses = getAlignmentClasses;
+exports.getAlignmentComparatorByClass = getAlignmentComparatorByClass;
 exports.getDocumentOffsetByElement = getDocumentOffsetByElement;
+exports.hasSelectionAClass = hasSelectionAClass;
 exports.markLabelAsSelected = markLabelAsSelected;
 exports.prepareHorizontalAlignClass = prepareHorizontalAlignClass;
 exports.prepareVerticalAlignClass = prepareVerticalAlignClass;
@@ -151,4 +153,28 @@ function getDocumentOffsetByElement(elementToCheck, baseDocument) {
     offset.left = left;
   }
   return offset;
+}
+
+/**
+ * Prepares comparator function consumable by checkSelectionConsistency
+ * Comparator function checks if the cell has the provided class name.
+ *
+ * @param  {string} htClassName The class name to check.
+ * @returns {Function} Returns the comparator function.
+ * Use with .bind, .call or .apply to pass the Handsontable instance.
+ */
+function getAlignmentComparatorByClass(htClassName) {
+  return function (row, col) {
+    const className = this.getCellMeta(row, col).className;
+    return className && className.indexOf(htClassName) !== -1;
+  };
+}
+
+/**
+ * @param {object} hot Handsontable instance.
+ * @param {string} htClassName The class name to check.
+ * @returns {boolean} Returns true if at least one cell has the provided class name.
+ */
+function hasSelectionAClass(hot, htClassName) {
+  return checkSelectionConsistency(hot.getSelectedRange(), getAlignmentComparatorByClass(htClassName).bind(hot));
 }

package/plugins/contextMenu/utils.mjs

@@ -141,4 +141,28 @@ export function getDocumentOffsetByElement(elementToCheck, baseDocument) {
     offset.left = left;
   }
   return offset;
+}
+
+/**
+ * Prepares comparator function consumable by checkSelectionConsistency
+ * Comparator function checks if the cell has the provided class name.
+ *
+ * @param  {string} htClassName The class name to check.
+ * @returns {Function} Returns the comparator function.
+ * Use with .bind, .call or .apply to pass the Handsontable instance.
+ */
+export function getAlignmentComparatorByClass(htClassName) {
+  return function (row, col) {
+    const className = this.getCellMeta(row, col).className;
+    return className && className.indexOf(htClassName) !== -1;
+  };
+}
+
+/**
+ * @param {object} hot Handsontable instance.
+ * @param {string} htClassName The class name to check.
+ * @returns {boolean} Returns true if at least one cell has the provided class name.
+ */
+export function hasSelectionAClass(hot, htClassName) {
+  return checkSelectionConsistency(hot.getSelectedRange(), getAlignmentComparatorByClass(htClassName).bind(hot));
 }

package/plugins/copyPaste/copyPaste.js

@@ -553,12 +553,13 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onCopy(event) {
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
+    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCopy, this, false);
     const data = this.getRangedData(this.copyableRanges);
@@ -576,7 +577,6 @@ class CopyPaste extends _base.BasePlugin {
       this.hot.runHooks('afterCopy', data, this.copyableRanges, copiedHeadersCount);
     }
     _classPrivateFieldSet(_copyMode, this, 'cells-only');
-    event.preventDefault();
   }
 
   /**
@@ -586,12 +586,13 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onCut(event) {
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target2;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
+    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCut, this, false);
     const rangedData = this.getRangedData(this.copyableRanges);
@@ -608,7 +609,6 @@ class CopyPaste extends _base.BasePlugin {
       this.hot.emptySelectedCells('CopyPaste.cut');
       this.hot.runHooks('afterCut', rangedData, this.copyableRanges);
     }
-    event.preventDefault();
   }
 
   /**
@@ -618,10 +618,10 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onPaste(event) {
-    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target3;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
     event.preventDefault();

package/plugins/copyPaste/copyPaste.mjs

@@ -549,12 +549,13 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onCopy(event) {
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
+    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCopy, this, false);
     const data = this.getRangedData(this.copyableRanges);
@@ -572,7 +573,6 @@ export class CopyPaste extends BasePlugin {
       this.hot.runHooks('afterCopy', data, this.copyableRanges, copiedHeadersCount);
     }
     _classPrivateFieldSet(_copyMode, this, 'cells-only');
-    event.preventDefault();
   }
 
   /**
@@ -582,12 +582,13 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onCut(event) {
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target2;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
+    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCut, this, false);
     const rangedData = this.getRangedData(this.copyableRanges);
@@ -604,7 +605,6 @@ export class CopyPaste extends BasePlugin {
       this.hot.emptySelectedCells('CopyPaste.cut');
       this.hot.runHooks('afterCut', rangedData, this.copyableRanges);
     }
-    event.preventDefault();
   }
 
   /**
@@ -614,10 +614,10 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onPaste(event) {
-    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target3;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
     event.preventDefault();

package/plugins/dropdownMenu/dropdownMenu.js

@@ -260,13 +260,16 @@ class DropdownMenu extends _base.BasePlugin {
           from
         } = this.hot.getSelectedRangeLast();
         const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
-        const target = this.hot.getCell(-1, from.col, true);
+        const target = this.hot.getCell(-1, from.col, true).querySelector(`.${BUTTON_CLASS_NAME}`);
         const rect = target.getBoundingClientRect();
         this.open({
           left: rect.left + offset.left,
           top: rect.top + target.offsetHeight + offset.top
         }, {
-          left: rect.width
+          left: rect.width,
+          right: 0,
+          above: 0,
+          below: 3
         });
         // Make sure the first item is selected (role=menuitem). Otherwise, screen readers
         // will block the Esc key for the whole menu.
@@ -433,9 +436,12 @@ function _onTableClick(event) {
     _classPrivateFieldSet(_isButtonClicked, this, false);
     this.open({
       left: rect.left + offset.left,
-      top: rect.top + event.target.offsetHeight + 3 + offset.top
+      top: rect.top + event.target.offsetHeight + offset.top
     }, {
-      left: rect.width
+      left: rect.width,
+      right: 0,
+      above: 0,
+      below: 3
     });
   }
 }

package/plugins/dropdownMenu/dropdownMenu.mjs

@@ -256,13 +256,16 @@ export class DropdownMenu extends BasePlugin {
           from
         } = this.hot.getSelectedRangeLast();
         const offset = getDocumentOffsetByElement(this.menu.container, this.hot.rootDocument);
-        const target = this.hot.getCell(-1, from.col, true);
+        const target = this.hot.getCell(-1, from.col, true).querySelector(`.${BUTTON_CLASS_NAME}`);
         const rect = target.getBoundingClientRect();
         this.open({
           left: rect.left + offset.left,
           top: rect.top + target.offsetHeight + offset.top
         }, {
-          left: rect.width
+          left: rect.width,
+          right: 0,
+          above: 0,
+          below: 3
         });
         // Make sure the first item is selected (role=menuitem). Otherwise, screen readers
         // will block the Esc key for the whole menu.
@@ -428,9 +431,12 @@ function _onTableClick(event) {
     _classPrivateFieldSet(_isButtonClicked, this, false);
     this.open({
       left: rect.left + offset.left,
-      top: rect.top + event.target.offsetHeight + 3 + offset.top
+      top: rect.top + event.target.offsetHeight + offset.top
     }, {
-      left: rect.width
+      left: rect.width,
+      right: 0,
+      above: 0,
+      below: 3
     });
   }
 }

package/plugins/filters/component/condition.js

@@ -191,7 +191,12 @@ class ConditionComponent extends _base.BaseComponent {
         (0, _element.addClass)(label, 'htFiltersMenuLabel');
         label.textContent = value;
         wrapper.appendChild(label);
-        (0, _array.arrayEach)(this.elements, ui => wrapper.appendChild(ui.element));
+
+        // The SelectUI should not extend the menu width (it should adjust to the menu item width only).
+        // That's why it's skipped from rendering when the GhostTable tries to render it.
+        if (!wrapper.parentElement.hasAttribute('ghost-table')) {
+          (0, _array.arrayEach)(this.elements, ui => wrapper.appendChild(ui.element));
+        }
         return wrapper;
       }
     };

package/plugins/filters/component/condition.mjs

@@ -186,7 +186,12 @@ export class ConditionComponent extends BaseComponent {
         addClass(label, 'htFiltersMenuLabel');
         label.textContent = value;
         wrapper.appendChild(label);
-        arrayEach(this.elements, ui => wrapper.appendChild(ui.element));
+
+        // The SelectUI should not extend the menu width (it should adjust to the menu item width only).
+        // That's why it's skipped from rendering when the GhostTable tries to render it.
+        if (!wrapper.parentElement.hasAttribute('ghost-table')) {
+          arrayEach(this.elements, ui => wrapper.appendChild(ui.element));
+        }
         return wrapper;
       }
     };

package/plugins/filters/component/value.js

@@ -177,7 +177,12 @@ class ValueComponent extends _base.BaseComponent {
         (0, _element.addClass)(label, 'htFiltersMenuLabel');
         label.textContent = value;
         wrapper.appendChild(label);
-        (0, _array.arrayEach)(this.elements, ui => wrapper.appendChild(ui.element));
+
+        // The MultipleSelectUI should not extend the menu width (it should adjust to the menu item width only).
+        // That's why it's skipped from rendering when the GhostTable tries to render it.
+        if (!wrapper.parentElement.hasAttribute('ghost-table')) {
+          (0, _array.arrayEach)(this.elements, ui => wrapper.appendChild(ui.element));
+        }
         return wrapper;
       }
     };

package/plugins/filters/component/value.mjs

@@ -172,7 +172,12 @@ export class ValueComponent extends BaseComponent {
         addClass(label, 'htFiltersMenuLabel');
         label.textContent = value;
         wrapper.appendChild(label);
-        arrayEach(this.elements, ui => wrapper.appendChild(ui.element));
+
+        // The MultipleSelectUI should not extend the menu width (it should adjust to the menu item width only).
+        // That's why it's skipped from rendering when the GhostTable tries to render it.
+        if (!wrapper.parentElement.hasAttribute('ghost-table')) {
+          arrayEach(this.elements, ui => wrapper.appendChild(ui.element));
+        }
         return wrapper;
       }
     };

package/plugins/filters/conditionCollection.d.ts

@@ -5,9 +5,10 @@ import {
   ColumnConditions,
 } from './filters';
 
-export type ConditionName = 'begins_with' | 'between' | 'by_value' | 'contains' | 'empty' | 'ends_with' |
-                            'eq' | 'gt' | 'gte' | 'lt' | 'lte' | 'not_between' | 'not_contains' |
-                            'not_empty' | 'neq';
+export type ConditionName = 'begins_with' | 'between' | 'by_value' | 'contains' |
+                            'date_after' | 'date_before' | 'date_today' | 'date_tomorrow' | 'date_yesterday' |
+                            'empty' | 'ends_with' | 'eq' | 'gt' | 'gte' | 'lt' | 'lte' |
+                            'not_between' | 'not_contains' | 'not_empty' | 'neq' | 'none';
 
 export interface Condition {
   name: ConditionName;

package/plugins/filters/conditionCollection.js

@@ -45,6 +45,13 @@ class ConditionCollection {
      * @type {LinkedPhysicalIndexToValueMap}
      */
     _defineProperty(this, "filteringStates", new _translations.LinkedPhysicalIndexToValueMap());
+    /**
+     * Stores the previous state of the condition stack before the latest filter operation.
+     * This is used in the `beforeFilter` plugin to allow performing the undo operation.
+     *
+     * @type {null|Array}
+     */
+    _defineProperty(this, "previousConditionStack", null);
     this.hot = hot;
     this.isMapRegistrable = isMapRegistrable;
     if (this.isMapRegistrable === true) {
@@ -113,6 +120,13 @@ class ConditionCollection {
     const localeForColumn = this.hot.getCellMeta(0, column).locale;
     const args = (0, _array.arrayMap)(conditionDefinition.args, v => typeof v === 'string' ? v.toLocaleLowerCase(localeForColumn) : v);
     const name = conditionDefinition.name || conditionDefinition.command.key;
+
+    // If there's no previous condition stack defined (which means the condition stack was not cleared after the
+    // previous filter operation or that there was no filter operation performed yet), store the current conditions as
+    // the previous condition stack.
+    if (this.previousConditionStack === null) {
+      this.setPreviousConditionStack(this.exportAllConditions());
+    }
     this.runLocalHooks('beforeAdd', column);
     const columnType = this.getOperation(column);
     if (columnType) {
@@ -241,6 +255,8 @@ class ConditionCollection {
    * @fires ConditionCollection#afterRemove
    */
   removeConditions(column) {
+    // Store the current conditions as the previous condition stack before it's cleared.
+    this.setPreviousConditionStack(this.exportAllConditions());
     this.runLocalHooks('beforeRemove', column);
     this.filteringStates.clearValue(column);
     this.runLocalHooks('afterRemove', column);
@@ -274,6 +290,16 @@ class ConditionCollection {
     return conditions.length > 0;
   }
 
+  /**
+   * Updates the `previousConditionStack` property with the provided stack.
+   * It is used to store the current conditions before they are modified, allowing for undo operations.
+   *
+   * @param {Array|null} previousConditionStack The stack of previous conditions.
+   */
+  setPreviousConditionStack(previousConditionStack) {
+    this.previousConditionStack = previousConditionStack;
+  }
+
   /**
    * Destroy object.
    */