handsontable 0.0.0-next-9891faa-20240822 → 0.0.0-next-0306a1a-20240826

package/plugins/contextMenu/predefinedItems/alignment.mjs

@@ -1,19 +1,8 @@
-import { align, getAlignmentClasses, markLabelAsSelected, hasSelectionAClass } from "../utils.mjs";
+import { align, getAlignmentClasses, checkSelectionConsistency, markLabelAsSelected } 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}
  */
@@ -39,16 +28,15 @@ 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);
-          if (hasSelectionAClass(this, 'htLeft')) {
+          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htLeft') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -65,16 +53,15 @@ 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);
-          if (hasSelectionAClass(this, 'htCenter')) {
+          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htCenter') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -91,16 +78,15 @@ 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);
-          if (hasSelectionAClass(this, 'htRight')) {
+          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htRight') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -117,16 +103,15 @@ 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);
-          if (hasSelectionAClass(this, 'htJustify')) {
+          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htJustify') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -145,16 +130,15 @@ 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);
-          if (hasSelectionAClass(this, 'htTop')) {
+          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htTop') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -171,16 +155,15 @@ 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);
-          if (hasSelectionAClass(this, 'htMiddle')) {
+          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htMiddle') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -197,16 +180,15 @@ 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);
-          if (hasSelectionAClass(this, 'htBottom')) {
+          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htBottom') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = markLabelAsSelected(label);
           }
           return label;

package/plugins/contextMenu/predefinedItems/readOnly.js

@@ -15,17 +15,6 @@ 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,17 +9,6 @@ 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,9 +4,7 @@ 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;
@@ -153,28 +151,4 @@ 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,28 +141,4 @@ 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,13 +553,12 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onCopy(event) {
-    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)) {
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened()) {
+      return;
+    }
+    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
       return;
     }
-    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCopy, this, false);
     const data = this.getRangedData(this.copyableRanges);
@@ -577,6 +576,7 @@ class CopyPaste extends _base.BasePlugin {
       this.hot.runHooks('afterCopy', data, this.copyableRanges, copiedHeadersCount);
     }
     _classPrivateFieldSet(_copyMode, this, 'cells-only');
+    event.preventDefault();
   }
 
   /**
@@ -586,13 +586,12 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onCut(event) {
-    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)) {
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened()) {
+      return;
+    }
+    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
       return;
     }
-    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCut, this, false);
     const rangedData = this.getRangedData(this.copyableRanges);
@@ -609,6 +608,7 @@ 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) {
-    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)) {
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected()) {
+      return;
+    }
+    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
       return;
     }
     event.preventDefault();

package/plugins/copyPaste/copyPaste.mjs

@@ -549,13 +549,12 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onCopy(event) {
-    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)) {
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened()) {
+      return;
+    }
+    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
       return;
     }
-    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCopy, this, false);
     const data = this.getRangedData(this.copyableRanges);
@@ -573,6 +572,7 @@ export class CopyPaste extends BasePlugin {
       this.hot.runHooks('afterCopy', data, this.copyableRanges, copiedHeadersCount);
     }
     _classPrivateFieldSet(_copyMode, this, 'cells-only');
+    event.preventDefault();
   }
 
   /**
@@ -582,13 +582,12 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onCut(event) {
-    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)) {
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened()) {
+      return;
+    }
+    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
       return;
     }
-    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCut, this, false);
     const rangedData = this.getRangedData(this.copyableRanges);
@@ -605,6 +604,7 @@ 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) {
-    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)) {
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected()) {
+      return;
+    }
+    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
       return;
     }
     event.preventDefault();

package/plugins/dropdownMenu/dropdownMenu.js

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

package/plugins/dropdownMenu/dropdownMenu.mjs

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

package/plugins/filters/component/condition.js

@@ -191,12 +191,7 @@ class ConditionComponent extends _base.BaseComponent {
         (0, _element.addClass)(label, 'htFiltersMenuLabel');
         label.textContent = value;
         wrapper.appendChild(label);
-
-        // 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));
-        }
+        (0, _array.arrayEach)(this.elements, ui => wrapper.appendChild(ui.element));
         return wrapper;
       }
     };

package/plugins/filters/component/condition.mjs

@@ -186,12 +186,7 @@ export class ConditionComponent extends BaseComponent {
         addClass(label, 'htFiltersMenuLabel');
         label.textContent = value;
         wrapper.appendChild(label);
-
-        // 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));
-        }
+        arrayEach(this.elements, ui => wrapper.appendChild(ui.element));
         return wrapper;
       }
     };

package/plugins/filters/component/value.js

@@ -177,12 +177,7 @@ class ValueComponent extends _base.BaseComponent {
         (0, _element.addClass)(label, 'htFiltersMenuLabel');
         label.textContent = value;
         wrapper.appendChild(label);
-
-        // 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));
-        }
+        (0, _array.arrayEach)(this.elements, ui => wrapper.appendChild(ui.element));
         return wrapper;
       }
     };

package/plugins/filters/component/value.mjs

@@ -172,12 +172,7 @@ export class ValueComponent extends BaseComponent {
         addClass(label, 'htFiltersMenuLabel');
         label.textContent = value;
         wrapper.appendChild(label);
-
-        // 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));
-        }
+        arrayEach(this.elements, ui => wrapper.appendChild(ui.element));
         return wrapper;
       }
     };

package/plugins/filters/conditionCollection.d.ts

@@ -5,10 +5,9 @@ import {
   ColumnConditions,
 } from './filters';
 
-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 type ConditionName = 'begins_with' | 'between' | 'by_value' | 'contains' | 'empty' | 'ends_with' |
+                            'eq' | 'gt' | 'gte' | 'lt' | 'lte' | 'not_between' | 'not_contains' |
+                            'not_empty' | 'neq';
 
 export interface Condition {
   name: ConditionName;

package/plugins/filters/ui/multipleSelect.js

@@ -128,9 +128,10 @@ class MultipleSelectUI extends _base.BaseUI {
    * @param {Array} items Array of objects with `checked` and `label` property.
    */
   setItems(items) {
-    var _classPrivateFieldGet2;
     _classPrivateFieldSet(_items, this, items);
-    (_classPrivateFieldGet2 = _classPrivateFieldGet(_itemsBox, this)) === null || _classPrivateFieldGet2 === void 0 || _classPrivateFieldGet2.loadData(_classPrivateFieldGet(_items, this));
+    if (_classPrivateFieldGet(_itemsBox, this)) {
+      _classPrivateFieldGet(_itemsBox, this).loadData(_classPrivateFieldGet(_items, this));
+    }
   }
 
   /**
@@ -222,13 +223,13 @@ class MultipleSelectUI extends _base.BaseUI {
     this._element.appendChild(selectionControl.element);
     this._element.appendChild(itemsBoxWrapper);
     const hotInitializer = wrapper => {
-      var _classPrivateFieldGet3;
       if (!this._element) {
         return;
       }
-      (_classPrivateFieldGet3 = _classPrivateFieldGet(_itemsBox, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.destroy();
+      if (_classPrivateFieldGet(_itemsBox, this)) {
+        _classPrivateFieldGet(_itemsBox, this).destroy();
+      }
       (0, _element.addClass)(wrapper, 'htUIMultipleSelectHot');
-
       // Constructs and initializes a new Handsontable instance
       _classPrivateFieldSet(_itemsBox, this, new this.hot.constructor(wrapper, {
         data: _classPrivateFieldGet(_items, this),
@@ -322,8 +323,9 @@ class MultipleSelectUI extends _base.BaseUI {
    * Destroy instance.
    */
   destroy() {
-    var _classPrivateFieldGet4;
-    (_classPrivateFieldGet4 = _classPrivateFieldGet(_itemsBox, this)) === null || _classPrivateFieldGet4 === void 0 || _classPrivateFieldGet4.destroy();
+    if (_classPrivateFieldGet(_itemsBox, this)) {
+      _classPrivateFieldGet(_itemsBox, this).destroy();
+    }
     _classPrivateFieldGet(_searchInput, this).destroy();
     _classPrivateFieldGet(_clearAllUI, this).destroy();
     _classPrivateFieldGet(_selectAllUI, this).destroy();

package/plugins/filters/ui/multipleSelect.mjs

@@ -123,9 +123,10 @@ export class MultipleSelectUI extends BaseUI {
    * @param {Array} items Array of objects with `checked` and `label` property.
    */
   setItems(items) {
-    var _classPrivateFieldGet2;
     _classPrivateFieldSet(_items, this, items);
-    (_classPrivateFieldGet2 = _classPrivateFieldGet(_itemsBox, this)) === null || _classPrivateFieldGet2 === void 0 || _classPrivateFieldGet2.loadData(_classPrivateFieldGet(_items, this));
+    if (_classPrivateFieldGet(_itemsBox, this)) {
+      _classPrivateFieldGet(_itemsBox, this).loadData(_classPrivateFieldGet(_items, this));
+    }
   }
 
   /**
@@ -217,13 +218,13 @@ export class MultipleSelectUI extends BaseUI {
     this._element.appendChild(selectionControl.element);
     this._element.appendChild(itemsBoxWrapper);
     const hotInitializer = wrapper => {
-      var _classPrivateFieldGet3;
       if (!this._element) {
         return;
       }
-      (_classPrivateFieldGet3 = _classPrivateFieldGet(_itemsBox, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.destroy();
+      if (_classPrivateFieldGet(_itemsBox, this)) {
+        _classPrivateFieldGet(_itemsBox, this).destroy();
+      }
       addClass(wrapper, 'htUIMultipleSelectHot');
-
       // Constructs and initializes a new Handsontable instance
       _classPrivateFieldSet(_itemsBox, this, new this.hot.constructor(wrapper, {
         data: _classPrivateFieldGet(_items, this),
@@ -317,8 +318,9 @@ export class MultipleSelectUI extends BaseUI {
    * Destroy instance.
    */
   destroy() {
-    var _classPrivateFieldGet4;
-    (_classPrivateFieldGet4 = _classPrivateFieldGet(_itemsBox, this)) === null || _classPrivateFieldGet4 === void 0 || _classPrivateFieldGet4.destroy();
+    if (_classPrivateFieldGet(_itemsBox, this)) {
+      _classPrivateFieldGet(_itemsBox, this).destroy();
+    }
     _classPrivateFieldGet(_searchInput, this).destroy();
     _classPrivateFieldGet(_clearAllUI, this).destroy();
     _classPrivateFieldGet(_selectAllUI, this).destroy();