handsontable 0.0.0-next-d7edb4b-20240927 → 0.0.0-next-f512acf-20240930

package/editors/dateEditor/dateEditor.js

@@ -66,7 +66,9 @@ class DateEditor extends _textEditor.TextEditor {
     this.datePickerStyle.left = 0;
     this.datePickerStyle.zIndex = 9999;
     this.datePicker.setAttribute('dir', this.hot.isRtl() ? 'rtl' : 'ltr');
+    const themeClassName = this.hot.getSettings().themeName;
     (0, _element.addClass)(this.datePicker, 'htDatepickerHolder');
+    (0, _element.addClass)(this.datePicker, themeClassName);
     this.hot.rootDocument.body.appendChild(this.datePicker);
 
     /**

package/editors/dateEditor/dateEditor.mjs

@@ -62,7 +62,9 @@ export class DateEditor extends TextEditor {
     this.datePickerStyle.left = 0;
     this.datePickerStyle.zIndex = 9999;
     this.datePicker.setAttribute('dir', this.hot.isRtl() ? 'rtl' : 'ltr');
+    const themeClassName = this.hot.getSettings().themeName;
     addClass(this.datePicker, 'htDatepickerHolder');
+    addClass(this.datePicker, themeClassName);
     this.hot.rootDocument.body.appendChild(this.datePicker);
 
     /**

package/editors/handsontableEditor/handsontableEditor.js

@@ -158,7 +158,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
    * @returns {number}
    */
   getHeight() {
-    return this.htEditor.view.getTableHeight();
+    return this.htEditor.view.getTableHeight() + 1;
   }
 
   /**

package/editors/handsontableEditor/handsontableEditor.mjs

@@ -155,7 +155,7 @@ export class HandsontableEditor extends TextEditor {
    * @returns {number}
    */
   getHeight() {
-    return this.htEditor.view.getTableHeight();
+    return this.htEditor.view.getTableHeight() + 1;
   }
 
   /**

package/editors/selectEditor/selectEditor.js

@@ -4,6 +4,7 @@ exports.__esModule = true;
 var _baseEditor = require("../baseEditor");
 var _element = require("../../helpers/dom/element");
 var _object = require("../../helpers/object");
+var _a11y = require("../../helpers/a11y");
 const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const SHORTCUTS_GROUP = 'selectEditor';
 const EDITOR_TYPE = exports.EDITOR_TYPE = 'select';
@@ -21,11 +22,21 @@ class SelectEditor extends _baseEditor.BaseEditor {
    * Initializes editor instance, DOM Element and mount hooks.
    */
   init() {
+    this.selectWrapper = this.hot.rootDocument.createElement('div');
     this.select = this.hot.rootDocument.createElement('select');
     this.select.setAttribute('data-hot-input', 'true');
-    this.select.style.display = 'none';
-    (0, _element.addClass)(this.select, 'htSelectEditor');
-    this.hot.rootElement.appendChild(this.select);
+    this.selectWrapper.style.display = 'none';
+    const ARROW = this.hot.rootDocument.createElement('DIV');
+    const isAriaEnabled = this.hot.getSettings().ariaTags;
+    ARROW.className = 'htAutocompleteArrow';
+    if (isAriaEnabled) {
+      ARROW.setAttribute(...(0, _a11y.A11Y_HIDDEN)());
+    }
+    ARROW.appendChild(this.hot.rootDocument.createTextNode(String.fromCharCode(9660)));
+    (0, _element.addClass)(this.selectWrapper, 'htSelectEditor');
+    this.selectWrapper.appendChild(this.select);
+    this.selectWrapper.insertBefore(ARROW, this.selectWrapper.firstChild);
+    this.hot.rootElement.appendChild(this.selectWrapper);
     this.registerHooks();
   }
 
@@ -53,7 +64,7 @@ class SelectEditor extends _baseEditor.BaseEditor {
   open() {
     this._opened = true;
     this.refreshDimensions();
-    this.select.style.display = '';
+    this.selectWrapper.style.display = '';
     const shortcutManager = this.hot.getShortcutManager();
     shortcutManager.setActiveContextName('editor');
     this.registerShortcuts();
@@ -64,9 +75,9 @@ class SelectEditor extends _baseEditor.BaseEditor {
    */
   close() {
     this._opened = false;
-    this.select.style.display = 'none';
-    if ((0, _element.hasClass)(this.select, EDITOR_VISIBLE_CLASS_NAME)) {
-      (0, _element.removeClass)(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    this.selectWrapper.style.display = 'none';
+    if ((0, _element.hasClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME)) {
+      (0, _element.removeClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
     }
     this.unregisterShortcuts();
     this.clearHooks();
@@ -172,13 +183,13 @@ class SelectEditor extends _baseEditor.BaseEditor {
       width,
       height
     } = this.getEditedCellRect();
-    const selectStyle = this.select.style;
+    const selectStyle = this.selectWrapper.style;
     selectStyle.height = `${height}px`;
     selectStyle.width = `${width}px`;
     selectStyle.top = `${top}px`;
     selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
     selectStyle.margin = '0px';
-    (0, _element.addClass)(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    (0, _element.addClass)(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
   }
 
   /**

package/editors/selectEditor/selectEditor.mjs

@@ -1,6 +1,7 @@
 import { BaseEditor, EDITOR_STATE } from "../baseEditor/index.mjs";
 import { addClass, empty, fastInnerHTML, hasClass, removeClass } from "../../helpers/dom/element.mjs";
 import { objectEach } from "../../helpers/object.mjs";
+import { A11Y_HIDDEN } from "../../helpers/a11y.mjs";
 const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const SHORTCUTS_GROUP = 'selectEditor';
 export const EDITOR_TYPE = 'select';
@@ -18,11 +19,21 @@ export class SelectEditor extends BaseEditor {
    * Initializes editor instance, DOM Element and mount hooks.
    */
   init() {
+    this.selectWrapper = this.hot.rootDocument.createElement('div');
     this.select = this.hot.rootDocument.createElement('select');
     this.select.setAttribute('data-hot-input', 'true');
-    this.select.style.display = 'none';
-    addClass(this.select, 'htSelectEditor');
-    this.hot.rootElement.appendChild(this.select);
+    this.selectWrapper.style.display = 'none';
+    const ARROW = this.hot.rootDocument.createElement('DIV');
+    const isAriaEnabled = this.hot.getSettings().ariaTags;
+    ARROW.className = 'htAutocompleteArrow';
+    if (isAriaEnabled) {
+      ARROW.setAttribute(...A11Y_HIDDEN());
+    }
+    ARROW.appendChild(this.hot.rootDocument.createTextNode(String.fromCharCode(9660)));
+    addClass(this.selectWrapper, 'htSelectEditor');
+    this.selectWrapper.appendChild(this.select);
+    this.selectWrapper.insertBefore(ARROW, this.selectWrapper.firstChild);
+    this.hot.rootElement.appendChild(this.selectWrapper);
     this.registerHooks();
   }
 
@@ -50,7 +61,7 @@ export class SelectEditor extends BaseEditor {
   open() {
     this._opened = true;
     this.refreshDimensions();
-    this.select.style.display = '';
+    this.selectWrapper.style.display = '';
     const shortcutManager = this.hot.getShortcutManager();
     shortcutManager.setActiveContextName('editor');
     this.registerShortcuts();
@@ -61,9 +72,9 @@ export class SelectEditor extends BaseEditor {
    */
   close() {
     this._opened = false;
-    this.select.style.display = 'none';
-    if (hasClass(this.select, EDITOR_VISIBLE_CLASS_NAME)) {
-      removeClass(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    this.selectWrapper.style.display = 'none';
+    if (hasClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME)) {
+      removeClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
     }
     this.unregisterShortcuts();
     this.clearHooks();
@@ -169,13 +180,13 @@ export class SelectEditor extends BaseEditor {
       width,
       height
     } = this.getEditedCellRect();
-    const selectStyle = this.select.style;
+    const selectStyle = this.selectWrapper.style;
     selectStyle.height = `${height}px`;
     selectStyle.width = `${width}px`;
     selectStyle.top = `${top}px`;
     selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
     selectStyle.margin = '0px';
-    addClass(this.select, EDITOR_VISIBLE_CLASS_NAME);
+    addClass(this.selectWrapper, EDITOR_VISIBLE_CLASS_NAME);
   }
 
   /**

package/editors/textEditor/textEditor.js

@@ -312,19 +312,12 @@ class TextEditor extends _baseEditor.BaseEditor {
     this.TEXTAREA.style.fontSize = cellComputedStyle.fontSize;
     this.TEXTAREA.style.fontFamily = cellComputedStyle.fontFamily;
     this.TEXTAREA.style.backgroundColor = this.TD.style.backgroundColor;
-    const textareaComputedStyle = this.hot.rootWindow.getComputedStyle(this.TEXTAREA);
-    const horizontalPadding = parseInt(textareaComputedStyle.paddingLeft, 10) + parseInt(textareaComputedStyle.paddingRight, 10);
-    const verticalPadding = parseInt(textareaComputedStyle.paddingTop, 10) + parseInt(textareaComputedStyle.paddingBottom, 10);
-    const finalWidth = width - horizontalPadding;
-    const finalHeight = height - verticalPadding;
-    const finalMaxWidth = maxWidth - horizontalPadding;
-    const finalMaxHeight = maxHeight - verticalPadding;
     this.autoResize.init(this.TEXTAREA, {
-      minWidth: Math.min(finalWidth, finalMaxWidth),
-      minHeight: Math.min(finalHeight, finalMaxHeight),
+      minWidth: Math.min(width, maxWidth),
+      minHeight: Math.min(height, maxHeight),
       // TEXTAREA should never be wider than visible part of the viewport (should not cover the scrollbar)
-      maxWidth: finalMaxWidth,
-      maxHeight: finalMaxHeight
+      maxWidth,
+      maxHeight
     }, true);
   }
 

package/editors/textEditor/textEditor.mjs

@@ -308,19 +308,12 @@ export class TextEditor extends BaseEditor {
     this.TEXTAREA.style.fontSize = cellComputedStyle.fontSize;
     this.TEXTAREA.style.fontFamily = cellComputedStyle.fontFamily;
     this.TEXTAREA.style.backgroundColor = this.TD.style.backgroundColor;
-    const textareaComputedStyle = this.hot.rootWindow.getComputedStyle(this.TEXTAREA);
-    const horizontalPadding = parseInt(textareaComputedStyle.paddingLeft, 10) + parseInt(textareaComputedStyle.paddingRight, 10);
-    const verticalPadding = parseInt(textareaComputedStyle.paddingTop, 10) + parseInt(textareaComputedStyle.paddingBottom, 10);
-    const finalWidth = width - horizontalPadding;
-    const finalHeight = height - verticalPadding;
-    const finalMaxWidth = maxWidth - horizontalPadding;
-    const finalMaxHeight = maxHeight - verticalPadding;
     this.autoResize.init(this.TEXTAREA, {
-      minWidth: Math.min(finalWidth, finalMaxWidth),
-      minHeight: Math.min(finalHeight, finalMaxHeight),
+      minWidth: Math.min(width, maxWidth),
+      minHeight: Math.min(height, maxHeight),
       // TEXTAREA should never be wider than visible part of the viewport (should not cover the scrollbar)
-      maxWidth: finalMaxWidth,
-      maxHeight: finalMaxHeight
+      maxWidth,
+      maxHeight
     }, true);
   }
 

package/helpers/mixed.js

@@ -134,7 +134,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-d7edb4b-20240927";
+  const hotVersion = "0.0.0-next-f512acf-20240930";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -188,7 +188,7 @@ function _injectProductInfo(key, element) {
     });
     if (message) {
       const messageNode = document.createElement('div');
-      messageNode.className = 'hot-display-license-info';
+      messageNode.className = 'handsontable hot-display-license-info';
       messageNode.innerHTML = domMessages[domMessageState]({
         keyValidityDate,
         hotVersion

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-d7edb4b-20240927";
+  const hotVersion = "0.0.0-next-f512acf-20240930";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -178,7 +178,7 @@ export function _injectProductInfo(key, element) {
     });
     if (message) {
       const messageNode = document.createElement('div');
-      messageNode.className = 'hot-display-license-info';
+      messageNode.className = 'handsontable hot-display-license-info';
       messageNode.innerHTML = domMessages[domMessageState]({
         keyValidityDate,
         hotVersion

package/helpers/themes.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getThemeClassName = getThemeClassName;
+/**
+ * Get theme class name from rootElement class.
+ *
+ * @param {string} className Class names.
+ * @returns {string}
+ */
+function getThemeClassName(className) {
+  if (!className || typeof className !== 'string') {
+    return false;
+  }
+  const [match] = className.match(/ht-theme-[a-zA-Z0-9_-]+/) || [];
+  return match;
+}

package/helpers/themes.mjs

@@ -0,0 +1,13 @@
+/**
+ * Get theme class name from rootElement class.
+ *
+ * @param {string} className Class names.
+ * @returns {string}
+ */
+export function getThemeClassName(className) {
+  if (!className || typeof className !== 'string') {
+    return false;
+  }
+  const [match] = className.match(/ht-theme-[a-zA-Z0-9_-]+/) || [];
+  return match;
+}

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-d7edb4b-20240927",
+  "version": "0.0.0-next-f512acf-20240930",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",
@@ -50,7 +50,6 @@
     "@babel/register": "^7.8.3",
     "@babel/runtime": "^7.11.2",
     "@babel/types": "^7.12.12",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.0.4",
     "babel-plugin-forbidden-imports": "^0.1.2",
@@ -94,8 +93,10 @@
     "string-replace-loader": "^3.1.0",
     "stylelint": "^16.3.1",
     "typescript": "3.8.2",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
     "webpack": "^5.88.1",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "webpack-remove-empty-scripts": "^1.0.4"
   },
   "optionalDependencies": {
     "hyperformula": "^2.6.2"
@@ -767,6 +768,12 @@
     "./dist/languages/zh-CN.min.js": "./dist/languages/zh-CN.min.js",
     "./dist/languages/zh-TW.js": "./dist/languages/zh-TW.js",
     "./dist/languages/zh-TW.min.js": "./dist/languages/zh-TW.min.js",
+    "./styles/handsontable.css": "./styles/handsontable.css",
+    "./styles/handsontable.min.css": "./styles/handsontable.min.css",
+    "./styles/ht-theme-gemini.css": "./styles/ht-theme-gemini.css",
+    "./styles/ht-theme-gemini.min.css": "./styles/ht-theme-gemini.min.css",
+    "./styles/ht-theme-main.css": "./styles/ht-theme-main.css",
+    "./styles/ht-theme-main.min.css": "./styles/ht-theme-main.min.css",
     ".": {
       "types": "./index.d.ts",
       "import": "./index.mjs",

package/plugins/comments/commentEditor.js

@@ -25,6 +25,7 @@ var _editor = /*#__PURE__*/new WeakMap();
 var _editorStyle = /*#__PURE__*/new WeakMap();
 var _hidden = /*#__PURE__*/new WeakMap();
 var _resizeObserver = /*#__PURE__*/new WeakMap();
+var _themeClassName = /*#__PURE__*/new WeakMap();
 class CommentEditor {
   static get CLASS_EDITOR_CONTAINER() {
     return 'htCommentsContainer';
@@ -43,7 +44,7 @@ class CommentEditor {
    * @type {Document}
    */
 
-  constructor(rootDocument, isRtl) {
+  constructor(rootDocument, isRtl, themeClassName) {
     var _this = this;
     _classPrivateFieldInitSpec(this, _rootDocument, void 0);
     /**
@@ -70,8 +71,13 @@ class CommentEditor {
      * @type {EditorResizeObserver}
      */
     _classPrivateFieldInitSpec(this, _resizeObserver, new _editorResizeObserver.EditorResizeObserver());
+    /**
+     * @type {string}
+     */
+    _classPrivateFieldInitSpec(this, _themeClassName, void 0);
     _classPrivateFieldSet(_rootDocument, this, rootDocument);
     _classPrivateFieldSet(_isRtl, this, isRtl);
+    _classPrivateFieldSet(_themeClassName, this, themeClassName);
     _classPrivateFieldSet(_editor, this, this.createEditor());
     _classPrivateFieldSet(_editorStyle, this, _classPrivateFieldGet(_editor, this).style);
     _classPrivateFieldGet(_resizeObserver, this).setObservedElement(this.getInputElement());
@@ -223,6 +229,7 @@ class CommentEditor {
     _classPrivateFieldSet(_container, this, _classPrivateFieldGet(_rootDocument, this).createElement('div'));
     _classPrivateFieldGet(_container, this).setAttribute('dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr');
     (0, _element.addClass)(_classPrivateFieldGet(_container, this), CommentEditor.CLASS_EDITOR_CONTAINER);
+    (0, _element.addClass)(_classPrivateFieldGet(_container, this), _classPrivateFieldGet(_themeClassName, this));
     _classPrivateFieldGet(_rootDocument, this).body.appendChild(_classPrivateFieldGet(_container, this));
     (0, _element.addClass)(editor, CommentEditor.CLASS_EDITOR);
     (0, _element.addClass)(textarea, CommentEditor.CLASS_INPUT);

package/plugins/comments/commentEditor.mjs

@@ -21,6 +21,7 @@ var _editor = /*#__PURE__*/new WeakMap();
 var _editorStyle = /*#__PURE__*/new WeakMap();
 var _hidden = /*#__PURE__*/new WeakMap();
 var _resizeObserver = /*#__PURE__*/new WeakMap();
+var _themeClassName = /*#__PURE__*/new WeakMap();
 class CommentEditor {
   static get CLASS_EDITOR_CONTAINER() {
     return 'htCommentsContainer';
@@ -39,7 +40,7 @@ class CommentEditor {
    * @type {Document}
    */
 
-  constructor(rootDocument, isRtl) {
+  constructor(rootDocument, isRtl, themeClassName) {
     var _this = this;
     _classPrivateFieldInitSpec(this, _rootDocument, void 0);
     /**
@@ -66,8 +67,13 @@ class CommentEditor {
      * @type {EditorResizeObserver}
      */
     _classPrivateFieldInitSpec(this, _resizeObserver, new EditorResizeObserver());
+    /**
+     * @type {string}
+     */
+    _classPrivateFieldInitSpec(this, _themeClassName, void 0);
     _classPrivateFieldSet(_rootDocument, this, rootDocument);
     _classPrivateFieldSet(_isRtl, this, isRtl);
+    _classPrivateFieldSet(_themeClassName, this, themeClassName);
     _classPrivateFieldSet(_editor, this, this.createEditor());
     _classPrivateFieldSet(_editorStyle, this, _classPrivateFieldGet(_editor, this).style);
     _classPrivateFieldGet(_resizeObserver, this).setObservedElement(this.getInputElement());
@@ -219,6 +225,7 @@ class CommentEditor {
     _classPrivateFieldSet(_container, this, _classPrivateFieldGet(_rootDocument, this).createElement('div'));
     _classPrivateFieldGet(_container, this).setAttribute('dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr');
     addClass(_classPrivateFieldGet(_container, this), CommentEditor.CLASS_EDITOR_CONTAINER);
+    addClass(_classPrivateFieldGet(_container, this), _classPrivateFieldGet(_themeClassName, this));
     _classPrivateFieldGet(_rootDocument, this).body.appendChild(_classPrivateFieldGet(_container, this));
     addClass(editor, CommentEditor.CLASS_EDITOR);
     addClass(textarea, CommentEditor.CLASS_INPUT);

package/plugins/comments/comments.js

@@ -213,7 +213,7 @@ class Comments extends _base.BasePlugin {
       return;
     }
     if (!_classPrivateFieldGet(_editor, this)) {
-      _classPrivateFieldSet(_editor, this, new _commentEditor.default(this.hot.rootDocument, this.hot.isRtl()));
+      _classPrivateFieldSet(_editor, this, new _commentEditor.default(this.hot.rootDocument, this.hot.isRtl(), this.hot.getSettings().themeName));
       _classPrivateFieldGet(_editor, this).addLocalHook('resize', function () {
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];

package/plugins/comments/comments.mjs

@@ -209,7 +209,7 @@ export class Comments extends BasePlugin {
       return;
     }
     if (!_classPrivateFieldGet(_editor, this)) {
-      _classPrivateFieldSet(_editor, this, new CommentEditor(this.hot.rootDocument, this.hot.isRtl()));
+      _classPrivateFieldSet(_editor, this, new CommentEditor(this.hot.rootDocument, this.hot.isRtl(), this.hot.getSettings().themeName));
       _classPrivateFieldGet(_editor, this).addLocalHook('resize', function () {
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];

package/plugins/contextMenu/menu/menu.js

@@ -579,10 +579,8 @@ class Menu {
       const currentRowHeight = itemCell ? (0, _element.outerHeight)(this.hotMenu.getCell(index, 0)) : 0;
       return accumulator + (value.name === _predefinedItems.SEPARATOR ? 1 : currentRowHeight);
     }, 0);
-
-    // Additional 3px to menu's size because of additional border around its `table.htCore`.
-    holderStyle.width = `${currentHiderWidth + 3}px`;
-    holderStyle.height = `${realHeight + 3}px`;
+    holderStyle.width = `${currentHiderWidth}px`;
+    holderStyle.height = `${realHeight}px`;
     hiderStyle.height = holderStyle.height;
   }
 
@@ -612,8 +610,10 @@ class Menu {
       container = doc.querySelector(`.${this.options.className}.${className}`);
     }
     if (!container) {
+      const themeClassName = this.hot.getSettings().themeName;
       container = doc.createElement('div');
       (0, _element.addClass)(container, `htMenu ${this.options.className}`);
+      (0, _element.addClass)(container, themeClassName);
       if (className) {
         (0, _element.addClass)(container, className);
       }

package/plugins/contextMenu/menu/menu.mjs

@@ -575,10 +575,8 @@ export class Menu {
       const currentRowHeight = itemCell ? outerHeight(this.hotMenu.getCell(index, 0)) : 0;
       return accumulator + (value.name === SEPARATOR ? 1 : currentRowHeight);
     }, 0);
-
-    // Additional 3px to menu's size because of additional border around its `table.htCore`.
-    holderStyle.width = `${currentHiderWidth + 3}px`;
-    holderStyle.height = `${realHeight + 3}px`;
+    holderStyle.width = `${currentHiderWidth}px`;
+    holderStyle.height = `${realHeight}px`;
     hiderStyle.height = holderStyle.height;
   }
 
@@ -608,8 +606,10 @@ export class Menu {
       container = doc.querySelector(`.${this.options.className}.${className}`);
     }
     if (!container) {
+      const themeClassName = this.hot.getSettings().themeName;
       container = doc.createElement('div');
       addClass(container, `htMenu ${this.options.className}`);
+      addClass(container, themeClassName);
       if (className) {
         addClass(container, className);
       }

package/plugins/contextMenu/menu/shortcuts.js

@@ -100,7 +100,7 @@ function createKeyboardShortcutsCtrl(menu) {
   /**
    * Makes the specified context active.
    *
-   * @param {string} contextName The context name.
+   * @param {string} [contextName] The context name.
    */
   function listen(contextName) {
     menu.hotMenu.getShortcutManager().setActiveContextName(_getContextName(contextName));

package/plugins/contextMenu/menu/shortcuts.mjs

@@ -96,7 +96,7 @@ export function createKeyboardShortcutsCtrl(menu) {
   /**
    * Makes the specified context active.
    *
-   * @param {string} contextName The context name.
+   * @param {string} [contextName] The context name.
    */
   function listen(contextName) {
     menu.hotMenu.getShortcutManager().setActiveContextName(_getContextName(contextName));

package/plugins/filters/filters.js

@@ -76,6 +76,7 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
  * :::
  */
 var _menuFocusNavigator = /*#__PURE__*/new WeakMap();
+var _dropdownMenuTraces = /*#__PURE__*/new WeakMap();
 var _Filters_brand = /*#__PURE__*/new WeakSet();
 class Filters extends _base.BasePlugin {
   static get PLUGIN_KEY() {
@@ -139,6 +140,12 @@ class Filters extends _base.BasePlugin {
      * @type {MenuFocusNavigator|undefined}
      */
     _classPrivateFieldInitSpec(this, _menuFocusNavigator, void 0);
+    /**
+     * Traces the new menu instances to apply the focus navigation to the latest one.
+     *
+     * @type {WeakSet<Menu>}
+     */
+    _classPrivateFieldInitSpec(this, _dropdownMenuTraces, new WeakSet());
     this.hot.addHook('afterGetColHeader', (col, TH) => _assertClassBrand(_Filters_brand, this, _onAfterGetColHeader).call(this, col, TH));
   }
 
@@ -157,6 +164,7 @@ class Filters extends _base.BasePlugin {
    * Enables the plugin functionality for this Handsontable instance.
    */
   enablePlugin() {
+    var _this = this;
     if (this.enabled) {
       return;
     }
@@ -218,7 +226,13 @@ class Filters extends _base.BasePlugin {
       this.conditionUpdateObserver.addLocalHook('update', conditionState => _assertClassBrand(_Filters_brand, this, _updateComponents).call(this, conditionState));
     }
     this.components.forEach(component => component.show());
-    this.addHook('afterDropdownMenuDefaultOptions', defaultOptions => _assertClassBrand(_Filters_brand, this, _onAfterDropdownMenuDefaultOptions).call(this, defaultOptions));
+    this.addHook('afterDropdownMenuDefaultOptions', function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return _assertClassBrand(_Filters_brand, _this, _onAfterDropdownMenuDefaultOptions).call(_this, ...args);
+    });
+    this.addHook('beforeDropdownMenuShow', () => _assertClassBrand(_Filters_brand, this, _onBeforeDropdownMenuShow).call(this));
     this.addHook('afterDropdownMenuShow', () => _assertClassBrand(_Filters_brand, this, _onAfterDropdownMenuShow).call(this));
     this.addHook('afterDropdownMenuHide', () => _assertClassBrand(_Filters_brand, this, _onAfterDropdownMenuHide).call(this));
     this.addHook('afterChange', changes => _assertClassBrand(_Filters_brand, this, _onAfterChange).call(this, changes));
@@ -229,15 +243,15 @@ class Filters extends _base.BasePlugin {
       this.dropdownMenuPlugin.enablePlugin();
     }
     if (!_classPrivateFieldGet(_menuFocusNavigator, this) && this.dropdownMenuPlugin.enabled) {
-      const mainMenu = this.dropdownMenuPlugin.menu;
       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 menuNavigator = mainMenu.getNavigator();
+          const menu = _classPrivateFieldGet(_menuFocusNavigator, this).getMenu();
+          const menuNavigator = menu.getNavigator();
           const lastSelectedMenuItem = _classPrivateFieldGet(_menuFocusNavigator, this).getLastMenuPage();
-          mainMenu.focus();
+          menu.focus();
           if (lastSelectedMenuItem > 0) {
             menuNavigator.setCurrentPage(lastSelectedMenuItem);
           } else {
@@ -248,7 +262,7 @@ class Filters extends _base.BasePlugin {
         let [, component] = _ref;
         return component.getElements();
       }).flat()];
-      _classPrivateFieldSet(_menuFocusNavigator, this, (0, _focusController.createMenuFocusController)(mainMenu, focusableItems));
+      _classPrivateFieldSet(_menuFocusNavigator, this, (0, _focusController.createMenuFocusController)(this.dropdownMenuPlugin.menu, focusableItems));
       const forwardToFocusNavigation = event => {
         _classPrivateFieldGet(_menuFocusNavigator, this).listen();
         event.preventDefault();
@@ -706,8 +720,8 @@ class Filters extends _base.BasePlugin {
       return indexes;
     }
     const menu = this.dropdownMenuPlugin.menu;
-    for (var _len = arguments.length, components = new Array(_len), _key = 0; _key < _len; _key++) {
-      components[_key] = arguments[_key];
+    for (var _len2 = arguments.length, components = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      components[_key2] = arguments[_key2];
     }
     (0, _array.arrayEach)(components, component => {
       (0, _array.arrayEach)(menu.menuItems, (item, index) => {
@@ -734,8 +748,8 @@ class Filters extends _base.BasePlugin {
     const menu = this.dropdownMenuPlugin.menu;
     const hotMenu = menu.hotMenu;
     const hiddenRows = hotMenu.getPlugin('hiddenRows');
-    for (var _len2 = arguments.length, components = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      components[_key2 - 1] = arguments[_key2];
+    for (var _len3 = arguments.length, components = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+      components[_key3 - 1] = arguments[_key3];
     }
     const indexes = this.getIndexesOfComponents(...components);
     if (visible) {
@@ -753,8 +767,8 @@ class Filters extends _base.BasePlugin {
    * @param {...BaseComponent} components List of components.
    */
   hideComponents() {
-    for (var _len3 = arguments.length, components = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      components[_key3] = arguments[_key3];
+    for (var _len4 = arguments.length, components = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      components[_key4] = arguments[_key4];
     }
     this.changeComponentsVisibility(false, ...components);
   }
@@ -766,8 +780,8 @@ class Filters extends _base.BasePlugin {
    * @param {...BaseComponent} components List of components.
    */
   showComponents() {
-    for (var _len4 = arguments.length, components = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      components[_key4] = arguments[_key4];
+    for (var _len5 = arguments.length, components = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+      components[_key5] = arguments[_key5];
     }
     this.changeComponentsVisibility(true, ...components);
   }
@@ -814,6 +828,16 @@ function _onAfterDropdownMenuHide() {
   this.components.get('filter_by_condition').getSelectElement().closeOptions();
   this.components.get('filter_by_condition2').getSelectElement().closeOptions();
 }
+/**
+ * Hooks applies the new dropdown menu instance to the focus navigator.
+ */
+function _onBeforeDropdownMenuShow() {
+  const mainMenu = this.dropdownMenuPlugin.menu;
+  if (!_classPrivateFieldGet(_dropdownMenuTraces, this).has(mainMenu)) {
+    _classPrivateFieldGet(_menuFocusNavigator, this).setMenu(mainMenu);
+  }
+  _classPrivateFieldGet(_dropdownMenuTraces, this).add(mainMenu);
+}
 /**
  * After dropdown menu default options listener.
  *