handsontable 14.5.0 → 14.6.0-next-4d69faf-20240924

package/editors/autocompleteEditor/autocompleteEditor.d.ts

@@ -17,7 +17,7 @@ export class AutocompleteEditor extends HandsontableEditor {
   limitDropdownIfNeeded(spaceAvailable: number, dropdownHeight: number): void;
   flipDropdown(dropdownHeight: number): void;
   unflipDropdown(): void;
-  updateDropdownHeight(): void;
+  updateDropdownDimensions(): void;
   setDropdownHeight(height: number): void;
   highlightBestMatchingChoice(index?: number): void;
   getDropdownHeight(): number;

package/helpers/a11y.js

@@ -21,6 +21,8 @@ const A11Y_MENU = () => ['role', 'menu'];
 exports.A11Y_MENU = A11Y_MENU;
 const A11Y_MENU_ITEM = () => ['role', 'menuitem'];
 exports.A11Y_MENU_ITEM = A11Y_MENU_ITEM;
+const A11Y_MENU_ITEM_CHECKBOX = () => ['role', 'menuitemcheckbox'];
+exports.A11Y_MENU_ITEM_CHECKBOX = A11Y_MENU_ITEM_CHECKBOX;
 const A11Y_COMBOBOX = () => ['role', 'combobox'];
 exports.A11Y_COMBOBOX = A11Y_COMBOBOX;
 const A11Y_LISTBOX = () => ['role', 'listbox'];

package/helpers/a11y.mjs

@@ -8,6 +8,7 @@ export const A11Y_COLUMNHEADER = () => ['role', 'columnheader'];
 export const A11Y_ROW = () => ['role', 'row'];
 export const A11Y_MENU = () => ['role', 'menu'];
 export const A11Y_MENU_ITEM = () => ['role', 'menuitem'];
+export const A11Y_MENU_ITEM_CHECKBOX = () => ['role', 'menuitemcheckbox'];
 export const A11Y_COMBOBOX = () => ['role', 'combobox'];
 export const A11Y_LISTBOX = () => ['role', 'listbox'];
 export const A11Y_OPTION = () => ['role', 'option'];

package/helpers/array.js

@@ -19,13 +19,13 @@ exports.pivot = pivot;
 exports.stringToArray = stringToArray;
 exports.to2dArray = to2dArray;
 require("core-js/modules/es.array.push.js");
-require("core-js/modules/esnext.set.difference.v2.js");
-require("core-js/modules/esnext.set.intersection.v2.js");
-require("core-js/modules/esnext.set.is-disjoint-from.v2.js");
-require("core-js/modules/esnext.set.is-subset-of.v2.js");
-require("core-js/modules/esnext.set.is-superset-of.v2.js");
-require("core-js/modules/esnext.set.symmetric-difference.v2.js");
-require("core-js/modules/esnext.set.union.v2.js");
+require("core-js/modules/es.set.difference.v2.js");
+require("core-js/modules/es.set.intersection.v2.js");
+require("core-js/modules/es.set.is-disjoint-from.v2.js");
+require("core-js/modules/es.set.is-subset-of.v2.js");
+require("core-js/modules/es.set.is-superset-of.v2.js");
+require("core-js/modules/es.set.symmetric-difference.v2.js");
+require("core-js/modules/es.set.union.v2.js");
 /**
  * @param {Array} arr An array to process.
  */

package/helpers/array.mjs

@@ -1,11 +1,11 @@
 import "core-js/modules/es.array.push.js";
-import "core-js/modules/esnext.set.difference.v2.js";
-import "core-js/modules/esnext.set.intersection.v2.js";
-import "core-js/modules/esnext.set.is-disjoint-from.v2.js";
-import "core-js/modules/esnext.set.is-subset-of.v2.js";
-import "core-js/modules/esnext.set.is-superset-of.v2.js";
-import "core-js/modules/esnext.set.symmetric-difference.v2.js";
-import "core-js/modules/esnext.set.union.v2.js";
+import "core-js/modules/es.set.difference.v2.js";
+import "core-js/modules/es.set.intersection.v2.js";
+import "core-js/modules/es.set.is-disjoint-from.v2.js";
+import "core-js/modules/es.set.is-subset-of.v2.js";
+import "core-js/modules/es.set.is-superset-of.v2.js";
+import "core-js/modules/es.set.symmetric-difference.v2.js";
+import "core-js/modules/es.set.union.v2.js";
 /**
  * @param {Array} arr An array to process.
  */

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 = "14.5.0";
+  const hotVersion = "14.6.0-next-4d69faf-20240924";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -142,7 +142,7 @@ function _injectProductInfo(key, element) {
   const schemaValidity = _checkKeySchema(key);
   if (hasValidType || isNonCommercial || schemaValidity) {
     if (schemaValidity) {
-      const releaseDate = (0, _moment.default)("30/07/2024", 'DD/MM/YYYY');
+      const releaseDate = (0, _moment.default)("01/10/2024", 'DD/MM/YYYY');
       const releaseDays = Math.floor(releaseDate.toDate().getTime() / 8.64e7);
       const keyValidityDays = _extractTime(key);
       keyValidityDate = (0, _moment.default)((keyValidityDays + 1) * 8.64e7, 'x').format('MMMM DD, YYYY');

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 = "14.5.0";
+  const hotVersion = "14.6.0-next-4d69faf-20240924";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -132,7 +132,7 @@ export function _injectProductInfo(key, element) {
   const schemaValidity = _checkKeySchema(key);
   if (hasValidType || isNonCommercial || schemaValidity) {
     if (schemaValidity) {
-      const releaseDate = moment("30/07/2024", 'DD/MM/YYYY');
+      const releaseDate = moment("01/10/2024", 'DD/MM/YYYY');
       const releaseDays = Math.floor(releaseDate.toDate().getTime() / 8.64e7);
       const keyValidityDays = _extractTime(key);
       keyValidityDate = moment((keyValidityDays + 1) * 8.64e7, 'x').format('MMMM DD, YYYY');

package/helpers/number.js

@@ -7,13 +7,13 @@ exports.isNumericLike = isNumericLike;
 exports.rangeEach = rangeEach;
 exports.rangeEachReverse = rangeEachReverse;
 exports.valueAccordingPercent = valueAccordingPercent;
-require("core-js/modules/esnext.set.difference.v2.js");
-require("core-js/modules/esnext.set.intersection.v2.js");
-require("core-js/modules/esnext.set.is-disjoint-from.v2.js");
-require("core-js/modules/esnext.set.is-subset-of.v2.js");
-require("core-js/modules/esnext.set.is-superset-of.v2.js");
-require("core-js/modules/esnext.set.symmetric-difference.v2.js");
-require("core-js/modules/esnext.set.union.v2.js");
+require("core-js/modules/es.set.difference.v2.js");
+require("core-js/modules/es.set.intersection.v2.js");
+require("core-js/modules/es.set.is-disjoint-from.v2.js");
+require("core-js/modules/es.set.is-subset-of.v2.js");
+require("core-js/modules/es.set.is-superset-of.v2.js");
+require("core-js/modules/es.set.symmetric-difference.v2.js");
+require("core-js/modules/es.set.union.v2.js");
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * Checks if the passed value is numeric one. For example these values (passed as string or number)

package/helpers/number.mjs

@@ -1,10 +1,10 @@
-import "core-js/modules/esnext.set.difference.v2.js";
-import "core-js/modules/esnext.set.intersection.v2.js";
-import "core-js/modules/esnext.set.is-disjoint-from.v2.js";
-import "core-js/modules/esnext.set.is-subset-of.v2.js";
-import "core-js/modules/esnext.set.is-superset-of.v2.js";
-import "core-js/modules/esnext.set.symmetric-difference.v2.js";
-import "core-js/modules/esnext.set.union.v2.js";
+import "core-js/modules/es.set.difference.v2.js";
+import "core-js/modules/es.set.intersection.v2.js";
+import "core-js/modules/es.set.is-disjoint-from.v2.js";
+import "core-js/modules/es.set.is-subset-of.v2.js";
+import "core-js/modules/es.set.is-superset-of.v2.js";
+import "core-js/modules/es.set.symmetric-difference.v2.js";
+import "core-js/modules/es.set.union.v2.js";
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * Checks if the passed value is numeric one. For example these values (passed as string or number)

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "14.5.0",
+  "version": "14.6.0-next-4d69faf-20240924",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

package/pluginHooks.d.ts

@@ -180,7 +180,7 @@ export interface Events {
   beforeDrawBorders?: (corners: number[], borderClassName: 'current' | 'area' | 'highlight' | undefined) => void;
   beforeDropdownMenuSetItems?: (menuItems: ContextMenuMenuItemConfig[]) => void;
   beforeDropdownMenuShow?: (instance: DropdownMenu) => void;
-  beforeFilter?: (conditionsStack: FiltersColumnConditions[]) => void | boolean;
+  beforeFilter?: (conditionsStack: FiltersColumnConditions[], previousConditionsStack: FiltersColumnConditions[]) => void | boolean;
   beforeGetCellMeta?: (row: number, column: number, cellProperties: CellProperties) => void;
   beforeHideColumns?: (currentHideConfig: number[], destinationHideConfig: number[], actionPossible: boolean) => void | boolean;
   beforeHideRows?: (currentHideConfig: number[], destinationHideConfig: number[], actionPossible: boolean) => void | boolean;

package/pluginHooks.js

@@ -2004,6 +2004,7 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  *
  * @event Hooks#beforeFilter
  * @param {object[]} conditionsStack An array of objects with your [column filters](@/api/filters.md#addcondition).
+ * @param {object[]|null} previousConditionsStack An array of objects with your previous [column filters](@/api/filters.md#addcondition). It can also be `null` if there was no previous filters applied or the conditions did not change between performing the `filter` action.
  * @returns {boolean} To perform server-side filtering (i.e., to not apply filtering to Handsontable's UI), return `false`.
  */
 'beforeFilter',

package/pluginHooks.mjs

@@ -2000,6 +2000,7 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  *
  * @event Hooks#beforeFilter
  * @param {object[]} conditionsStack An array of objects with your [column filters](@/api/filters.md#addcondition).
+ * @param {object[]|null} previousConditionsStack An array of objects with your previous [column filters](@/api/filters.md#addcondition). It can also be `null` if there was no previous filters applied or the conditions did not change between performing the `filter` action.
  * @returns {boolean} To perform server-side filtering (i.e., to not apply filtering to Handsontable's UI), return `false`.
  */
 'beforeFilter',

package/plugins/autoRowSize/autoRowSize.js

@@ -37,8 +37,7 @@ const ROW_WIDTHS_MAP_NAME = 'autoRowSize';
  * resize the rows accordingly.
  * If you experience problems with the performance, try turning this feature off and declaring the row heights manually.
  *
- * But, to display Handsontable's [scrollbar](https://handsontable.com/docs/8.0.0/demo-scrolling.html)
- * in a proper size, you need to enable the `AutoRowSize` plugin,
+ * But, to display Handsontable's scrollbar in a proper size, you need to enable the `AutoRowSize` plugin,
  * by setting the [`autoRowSize`](@/api/options.md#autoRowSize) option to `true`.
  *
  * Row height calculations are divided into sync and async part. Each of this parts has their own advantages and

package/plugins/autoRowSize/autoRowSize.mjs

@@ -33,8 +33,7 @@ const ROW_WIDTHS_MAP_NAME = 'autoRowSize';
  * resize the rows accordingly.
  * If you experience problems with the performance, try turning this feature off and declaring the row heights manually.
  *
- * But, to display Handsontable's [scrollbar](https://handsontable.com/docs/8.0.0/demo-scrolling.html)
- * in a proper size, you need to enable the `AutoRowSize` plugin,
+ * But, to display Handsontable's scrollbar in a proper size, you need to enable the `AutoRowSize` plugin,
  * by setting the [`autoRowSize`](@/api/options.md#autoRowSize) option to `true`.
  *
  * Row height calculations are divided into sync and async part. Each of this parts has their own advantages and

package/plugins/columnSorting/columnSorting.js

@@ -722,7 +722,16 @@ class ColumnSorting extends _base.BasePlugin {
         this.hot.deselectCell();
         this.hot.selectColumns(coords.col);
       }
-      this.sort(this.getColumnNextConfig(coords.col));
+      const activeEditor = this.hot.getActiveEditor();
+      const nextConfig = this.getColumnNextConfig(coords.col);
+      if (activeEditor !== null && activeEditor !== void 0 && activeEditor.isOpened() && this.hot.getCellValidator(activeEditor.row, activeEditor.col)) {
+        // Postpone sorting until the cell's value is validated and saved.
+        this.hot.addHookOnce('postAfterValidate', () => {
+          this.sort(nextConfig);
+        });
+      } else {
+        this.sort(nextConfig);
+      }
     }
   }
 

package/plugins/columnSorting/columnSorting.mjs

@@ -718,7 +718,16 @@ export class ColumnSorting extends BasePlugin {
         this.hot.deselectCell();
         this.hot.selectColumns(coords.col);
       }
-      this.sort(this.getColumnNextConfig(coords.col));
+      const activeEditor = this.hot.getActiveEditor();
+      const nextConfig = this.getColumnNextConfig(coords.col);
+      if (activeEditor !== null && activeEditor !== void 0 && activeEditor.isOpened() && this.hot.getCellValidator(activeEditor.row, activeEditor.col)) {
+        // Postpone sorting until the cell's value is validated and saved.
+        this.hot.addHookOnce('postAfterValidate', () => {
+          this.sort(nextConfig);
+        });
+      } else {
+        this.sort(nextConfig);
+      }
     }
   }
 

package/plugins/columnSorting/utils.js

@@ -7,13 +7,13 @@ exports.getHeaderSpanElement = getHeaderSpanElement;
 exports.getNextSortOrder = getNextSortOrder;
 exports.isFirstLevelColumnHeader = isFirstLevelColumnHeader;
 exports.wasHeaderClickedProperly = wasHeaderClickedProperly;
-require("core-js/modules/esnext.set.difference.v2.js");
-require("core-js/modules/esnext.set.intersection.v2.js");
-require("core-js/modules/esnext.set.is-disjoint-from.v2.js");
-require("core-js/modules/esnext.set.is-subset-of.v2.js");
-require("core-js/modules/esnext.set.is-superset-of.v2.js");
-require("core-js/modules/esnext.set.symmetric-difference.v2.js");
-require("core-js/modules/esnext.set.union.v2.js");
+require("core-js/modules/es.set.difference.v2.js");
+require("core-js/modules/es.set.intersection.v2.js");
+require("core-js/modules/es.set.is-disjoint-from.v2.js");
+require("core-js/modules/es.set.is-subset-of.v2.js");
+require("core-js/modules/es.set.is-superset-of.v2.js");
+require("core-js/modules/es.set.symmetric-difference.v2.js");
+require("core-js/modules/es.set.union.v2.js");
 var _moment = _interopRequireDefault(require("moment"));
 var _object = require("../../helpers/object");
 var _event = require("../../helpers/dom/event");

package/plugins/columnSorting/utils.mjs

@@ -1,10 +1,10 @@
-import "core-js/modules/esnext.set.difference.v2.js";
-import "core-js/modules/esnext.set.intersection.v2.js";
-import "core-js/modules/esnext.set.is-disjoint-from.v2.js";
-import "core-js/modules/esnext.set.is-subset-of.v2.js";
-import "core-js/modules/esnext.set.is-superset-of.v2.js";
-import "core-js/modules/esnext.set.symmetric-difference.v2.js";
-import "core-js/modules/esnext.set.union.v2.js";
+import "core-js/modules/es.set.difference.v2.js";
+import "core-js/modules/es.set.intersection.v2.js";
+import "core-js/modules/es.set.is-disjoint-from.v2.js";
+import "core-js/modules/es.set.is-subset-of.v2.js";
+import "core-js/modules/es.set.is-superset-of.v2.js";
+import "core-js/modules/es.set.symmetric-difference.v2.js";
+import "core-js/modules/es.set.union.v2.js";
 import moment from 'moment';
 import { isObject } from "../../helpers/object.mjs";
 import { isRightClick } from "../../helpers/dom/event.mjs";

package/plugins/contextMenu/contextMenu.js

@@ -237,6 +237,13 @@ class ContextMenu extends _base.BasePlugin {
     }
     this.prepareMenuItems();
     this.menu.open();
+    const themeHasTableBorder = this.menu.tableBorderWidth > 0;
+    if (!themeHasTableBorder) {
+      offset.below += 1;
+      offset.right += 1;
+      offset.above -= 1;
+      offset.left -= 1;
+    }
     (0, _object.objectEach)(offset, (value, key) => {
       this.menu.setOffset(key, value);
     });

package/plugins/contextMenu/contextMenu.mjs

@@ -233,6 +233,13 @@ export class ContextMenu extends BasePlugin {
     }
     this.prepareMenuItems();
     this.menu.open();
+    const themeHasTableBorder = this.menu.tableBorderWidth > 0;
+    if (!themeHasTableBorder) {
+      offset.below += 1;
+      offset.right += 1;
+      offset.above -= 1;
+      offset.left -= 1;
+    }
     objectEach(offset, (value, key) => {
       this.menu.setOffset(key, value);
     });

package/plugins/contextMenu/menu/menu.js

@@ -47,7 +47,21 @@ const MIN_WIDTH = 215;
  */
 var _navigator = /*#__PURE__*/new WeakMap();
 var _shortcutsCtrl = /*#__PURE__*/new WeakMap();
+var _tableBorderWidth = /*#__PURE__*/new WeakMap();
 class Menu {
+  /**
+   * Getter for the table border width.
+   * This getter retrieves the border width of the table used in the menu.
+   *
+   * @returns {number} The border width of the table in pixels.
+   */
+  get tableBorderWidth() {
+    if (_classPrivateFieldGet(_tableBorderWidth, this) === undefined && this.hotMenu) {
+      _classPrivateFieldSet(_tableBorderWidth, this, parseInt((0, _element.getComputedStyle)(this.hotMenu.view._wt.wtTable.TABLE).borderWidth, 10));
+    }
+    return _classPrivateFieldGet(_tableBorderWidth, this);
+  }
+
   /**
    * @param {Core} hotInstance Handsontable instance.
    * @param {MenuOptions} [options] Menu options.
@@ -120,6 +134,12 @@ class Menu {
      * @type {KeyboardShortcutsMenuController}
      */
     _classPrivateFieldInitSpec(this, _shortcutsCtrl, void 0);
+    /**
+     * The border width of the table used in the menu.
+     *
+     * @type {number}
+     */
+    _classPrivateFieldInitSpec(this, _tableBorderWidth, void 0);
     this.hot = hotInstance;
     this.options = options || {
       parent: null,
@@ -276,7 +296,7 @@ class Menu {
           this.openSubMenu(coords.row);
         }
       },
-      rowHeights: row => filteredItems[row].name === _predefinedItems.SEPARATOR ? 1 : 23,
+      rowHeights: row => filteredItems[row].name === _predefinedItems.SEPARATOR ? 1 : undefined,
       afterOnCellContextMenu: event => {
         event.preventDefault();
 
@@ -541,6 +561,31 @@ class Menu {
     this.positioner.setElement(this.container).updatePosition(coords);
   }
 
+  /**
+   * Updates the dimensions of the menu based on its content.
+   * This method calculates the real height of the menu by summing up the heights of its items,
+   * and adjusts the width and height of the menu's holder and hider elements accordingly.
+   */
+  updateMenuDimensions() {
+    const {
+      wtTable
+    } = this.hotMenu.view._wt;
+    const data = this.hotMenu.getSettings().data;
+    const hiderStyle = wtTable.hider.style;
+    const holderStyle = wtTable.holder.style;
+    const currentHiderWidth = parseInt(hiderStyle.width, 10);
+    const realHeight = (0, _array.arrayReduce)(data, (accumulator, value, index) => {
+      const itemCell = this.hotMenu.getCell(index, 0);
+      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`;
+    hiderStyle.height = holderStyle.height;
+  }
+
   /**
    * Create container/wrapper for handsontable.
    *
@@ -583,19 +628,7 @@ class Menu {
    * @private
    */
   onAfterInit() {
-    const {
-      wtTable
-    } = this.hotMenu.view._wt;
-    const data = this.hotMenu.getSettings().data;
-    const hiderStyle = wtTable.hider.style;
-    const holderStyle = wtTable.holder.style;
-    const currentHiderWidth = parseInt(hiderStyle.width, 10);
-    const realHeight = (0, _array.arrayReduce)(data, (accumulator, value) => accumulator + (value.name === _predefinedItems.SEPARATOR ? 1 : 26), 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`;
-    hiderStyle.height = holderStyle.height;
+    this.updateMenuDimensions();
 
     // Replace the default accessibility tags with the context menu's
     if (this.hot.getSettings().ariaTags) {

package/plugins/contextMenu/menu/menu.mjs

@@ -16,7 +16,7 @@ import { filterSeparators, hasSubMenu, isItemHidden, normalizeSelection, isItemS
 import EventManager from "../../../eventManager.mjs";
 import { arrayEach, arrayFilter, arrayReduce } from "../../../helpers/array.mjs";
 import { isWindowsOS, isMobileBrowser, isIpadOS } from "../../../helpers/browser.mjs";
-import { addClass, isChildOf, getParentWindow, hasClass, setAttribute } from "../../../helpers/dom/element.mjs";
+import { addClass, isChildOf, getComputedStyle, getParentWindow, hasClass, setAttribute, outerHeight } from "../../../helpers/dom/element.mjs";
 import { isRightClick } from "../../../helpers/dom/event.mjs";
 import { debounce, isFunction } from "../../../helpers/function.mjs";
 import { isUndefined, isDefined } from "../../../helpers/mixed.mjs";
@@ -43,7 +43,21 @@ const MIN_WIDTH = 215;
  */
 var _navigator = /*#__PURE__*/new WeakMap();
 var _shortcutsCtrl = /*#__PURE__*/new WeakMap();
+var _tableBorderWidth = /*#__PURE__*/new WeakMap();
 export class Menu {
+  /**
+   * Getter for the table border width.
+   * This getter retrieves the border width of the table used in the menu.
+   *
+   * @returns {number} The border width of the table in pixels.
+   */
+  get tableBorderWidth() {
+    if (_classPrivateFieldGet(_tableBorderWidth, this) === undefined && this.hotMenu) {
+      _classPrivateFieldSet(_tableBorderWidth, this, parseInt(getComputedStyle(this.hotMenu.view._wt.wtTable.TABLE).borderWidth, 10));
+    }
+    return _classPrivateFieldGet(_tableBorderWidth, this);
+  }
+
   /**
    * @param {Core} hotInstance Handsontable instance.
    * @param {MenuOptions} [options] Menu options.
@@ -116,6 +130,12 @@ export class Menu {
      * @type {KeyboardShortcutsMenuController}
      */
     _classPrivateFieldInitSpec(this, _shortcutsCtrl, void 0);
+    /**
+     * The border width of the table used in the menu.
+     *
+     * @type {number}
+     */
+    _classPrivateFieldInitSpec(this, _tableBorderWidth, void 0);
     this.hot = hotInstance;
     this.options = options || {
       parent: null,
@@ -272,7 +292,7 @@ export class Menu {
           this.openSubMenu(coords.row);
         }
       },
-      rowHeights: row => filteredItems[row].name === SEPARATOR ? 1 : 23,
+      rowHeights: row => filteredItems[row].name === SEPARATOR ? 1 : undefined,
       afterOnCellContextMenu: event => {
         event.preventDefault();
 
@@ -537,6 +557,31 @@ export class Menu {
     this.positioner.setElement(this.container).updatePosition(coords);
   }
 
+  /**
+   * Updates the dimensions of the menu based on its content.
+   * This method calculates the real height of the menu by summing up the heights of its items,
+   * and adjusts the width and height of the menu's holder and hider elements accordingly.
+   */
+  updateMenuDimensions() {
+    const {
+      wtTable
+    } = this.hotMenu.view._wt;
+    const data = this.hotMenu.getSettings().data;
+    const hiderStyle = wtTable.hider.style;
+    const holderStyle = wtTable.holder.style;
+    const currentHiderWidth = parseInt(hiderStyle.width, 10);
+    const realHeight = arrayReduce(data, (accumulator, value, index) => {
+      const itemCell = this.hotMenu.getCell(index, 0);
+      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`;
+    hiderStyle.height = holderStyle.height;
+  }
+
   /**
    * Create container/wrapper for handsontable.
    *
@@ -579,19 +624,7 @@ export class Menu {
    * @private
    */
   onAfterInit() {
-    const {
-      wtTable
-    } = this.hotMenu.view._wt;
-    const data = this.hotMenu.getSettings().data;
-    const hiderStyle = wtTable.hider.style;
-    const holderStyle = wtTable.holder.style;
-    const currentHiderWidth = parseInt(hiderStyle.width, 10);
-    const realHeight = arrayReduce(data, (accumulator, value) => accumulator + (value.name === SEPARATOR ? 1 : 26), 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`;
-    hiderStyle.height = holderStyle.height;
+    this.updateMenuDimensions();
 
     // Replace the default accessibility tags with the context menu's
     if (this.hot.getSettings().ariaTags) {

package/plugins/contextMenu/menu/menuItemRenderer.js

@@ -25,17 +25,16 @@ function createMenuItemRenderer(mainTableHot) {
    * @param {string} value The cell value.
    */
   return (menuHot, TD, row, col, prop, value) => {
-    if (TD.hasAttribute('ghost-table')) {
-      return;
-    }
     const item = menuHot.getSourceDataAtRow(row);
     const wrapper = mainTableHot.rootDocument.createElement('div');
     const itemValue = typeof value === 'function' ? value.call(mainTableHot) : value;
+    const ariaLabel = typeof item.ariaLabel === 'function' ? item.ariaLabel.call(mainTableHot) : item.ariaLabel;
+    const ariaChecked = typeof item.ariaChecked === 'function' ? item.ariaChecked.call(mainTableHot) : item.ariaChecked;
     (0, _element.empty)(TD);
     (0, _element.addClass)(wrapper, 'htItemWrapper');
     if (mainTableHot.getSettings().ariaTags) {
       const isFocusable = !(0, _utils.isItemDisabled)(item, mainTableHot) && !(0, _utils.isItemSelectionDisabled)(item) && !(0, _utils.isItemSeparator)(item);
-      (0, _element.setAttribute)(TD, [(0, _a11y.A11Y_MENU_ITEM)(), (0, _a11y.A11Y_LABEL)(itemValue), ...(isFocusable ? [(0, _a11y.A11Y_TABINDEX)(-1)] : []), ...((0, _utils.isItemDisabled)(item, mainTableHot) ? [(0, _a11y.A11Y_DISABLED)()] : []), ...((0, _utils.isItemSubMenu)(item) ? [(0, _a11y.A11Y_EXPANDED)(false)] : [])]);
+      (0, _element.setAttribute)(TD, [...((0, _utils.isItemCheckable)(item) ? [(0, _a11y.A11Y_MENU_ITEM_CHECKBOX)(), (0, _a11y.A11Y_LABEL)(ariaLabel), (0, _a11y.A11Y_CHECKED)(ariaChecked)] : [(0, _a11y.A11Y_MENU_ITEM)(), (0, _a11y.A11Y_LABEL)(itemValue)]), ...(isFocusable ? [(0, _a11y.A11Y_TABINDEX)(-1)] : []), ...((0, _utils.isItemDisabled)(item, mainTableHot) ? [(0, _a11y.A11Y_DISABLED)()] : []), ...((0, _utils.isItemSubMenu)(item) ? [(0, _a11y.A11Y_EXPANDED)(false)] : [])]);
     }
     TD.className = '';
     TD.appendChild(wrapper);

package/plugins/contextMenu/menu/menuItemRenderer.mjs

@@ -1,6 +1,6 @@
-import { isItemSubMenu, isItemDisabled, isItemSelectionDisabled, isItemSeparator } from "./utils.mjs";
+import { isItemSubMenu, isItemDisabled, isItemSelectionDisabled, isItemSeparator, isItemCheckable } from "./utils.mjs";
 import { addClass, empty, fastInnerHTML, setAttribute } from "../../../helpers/dom/element.mjs";
-import { A11Y_DISABLED, A11Y_EXPANDED, A11Y_LABEL, A11Y_MENU_ITEM, A11Y_TABINDEX } from "../../../helpers/a11y.mjs";
+import { A11Y_MENU_ITEM_CHECKBOX, A11Y_DISABLED, A11Y_EXPANDED, A11Y_LABEL, A11Y_MENU_ITEM, A11Y_TABINDEX, A11Y_CHECKED } from "../../../helpers/a11y.mjs";
 /**
  * Creates the menu renderer function.
  *
@@ -21,17 +21,16 @@ export function createMenuItemRenderer(mainTableHot) {
    * @param {string} value The cell value.
    */
   return (menuHot, TD, row, col, prop, value) => {
-    if (TD.hasAttribute('ghost-table')) {
-      return;
-    }
     const item = menuHot.getSourceDataAtRow(row);
     const wrapper = mainTableHot.rootDocument.createElement('div');
     const itemValue = typeof value === 'function' ? value.call(mainTableHot) : value;
+    const ariaLabel = typeof item.ariaLabel === 'function' ? item.ariaLabel.call(mainTableHot) : item.ariaLabel;
+    const ariaChecked = typeof item.ariaChecked === 'function' ? item.ariaChecked.call(mainTableHot) : item.ariaChecked;
     empty(TD);
     addClass(wrapper, 'htItemWrapper');
     if (mainTableHot.getSettings().ariaTags) {
       const isFocusable = !isItemDisabled(item, mainTableHot) && !isItemSelectionDisabled(item) && !isItemSeparator(item);
-      setAttribute(TD, [A11Y_MENU_ITEM(), A11Y_LABEL(itemValue), ...(isFocusable ? [A11Y_TABINDEX(-1)] : []), ...(isItemDisabled(item, mainTableHot) ? [A11Y_DISABLED()] : []), ...(isItemSubMenu(item) ? [A11Y_EXPANDED(false)] : [])]);
+      setAttribute(TD, [...(isItemCheckable(item) ? [A11Y_MENU_ITEM_CHECKBOX(), A11Y_LABEL(ariaLabel), A11Y_CHECKED(ariaChecked)] : [A11Y_MENU_ITEM(), A11Y_LABEL(itemValue)]), ...(isFocusable ? [A11Y_TABINDEX(-1)] : []), ...(isItemDisabled(item, mainTableHot) ? [A11Y_DISABLED()] : []), ...(isItemSubMenu(item) ? [A11Y_EXPANDED(false)] : [])]);
     }
     TD.className = '';
     TD.appendChild(wrapper);

package/plugins/contextMenu/menu/positioner.js

@@ -165,12 +165,8 @@ class Positioner {
   setPositionOnRightOfCursor() {
     let left = _classPrivateFieldGet(_cursor, this).left;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const {
-        right: parentMenuRight
-      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
-
-      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
-      left += _classPrivateFieldGet(_cursor, this).cellWidth + parentMenuRight - (_classPrivateFieldGet(_cursor, this).left + _classPrivateFieldGet(_cursor, this).cellWidth);
+      const borderRightWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderRightWidth, 10);
+      left += _classPrivateFieldGet(_cursor, this).cellWidth + borderRightWidth;
     } else {
       left += _classPrivateFieldGet(_offset, this).right;
     }
@@ -183,12 +179,8 @@ class Positioner {
   setPositionOnLeftOfCursor() {
     let left = _classPrivateFieldGet(_offset, this).left + _classPrivateFieldGet(_cursor, this).left - _classPrivateFieldGet(_container, this).offsetWidth;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const {
-        left: parentMenuLeft
-      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
-
-      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
-      left -= _classPrivateFieldGet(_cursor, this).left - parentMenuLeft;
+      const borderLeftWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderLeftWidth, 10);
+      left -= borderLeftWidth;
     }
     _classPrivateFieldGet(_container, this).style.left = `${left}px`;
   }

package/plugins/contextMenu/menu/positioner.mjs

@@ -162,12 +162,8 @@ export class Positioner {
   setPositionOnRightOfCursor() {
     let left = _classPrivateFieldGet(_cursor, this).left;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const {
-        right: parentMenuRight
-      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
-
-      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
-      left += _classPrivateFieldGet(_cursor, this).cellWidth + parentMenuRight - (_classPrivateFieldGet(_cursor, this).left + _classPrivateFieldGet(_cursor, this).cellWidth);
+      const borderRightWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderRightWidth, 10);
+      left += _classPrivateFieldGet(_cursor, this).cellWidth + borderRightWidth;
     } else {
       left += _classPrivateFieldGet(_offset, this).right;
     }
@@ -180,12 +176,8 @@ export class Positioner {
   setPositionOnLeftOfCursor() {
     let left = _classPrivateFieldGet(_offset, this).left + _classPrivateFieldGet(_cursor, this).left - _classPrivateFieldGet(_container, this).offsetWidth;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const {
-        left: parentMenuLeft
-      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
-
-      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
-      left -= _classPrivateFieldGet(_cursor, this).left - parentMenuLeft;
+      const borderLeftWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderLeftWidth, 10);
+      left -= borderLeftWidth;
     }
     _classPrivateFieldGet(_container, this).style.left = `${left}px`;
   }