handsontable 0.0.0-next-b0a4ea2-20231024 → 0.0.0-next-9059914-20231025

package/plugins/contextMenu/{menu/menu.mjs → menu.mjs}

@@ -1,29 +1,20 @@
 import "core-js/modules/es.array.push.js";
-import "core-js/modules/es.error.cause.js";
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
-function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
-function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
-function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
-function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
-import { Positioner } from "./positioner.mjs";
-import { createMenuNavigator } from "./navigator.mjs";
-import { createKeyboardShortcutsCtrl } from "./shortcuts.mjs";
-import { SEPARATOR, NO_ITEMS, predefinedItems } from "./../predefinedItems/index.mjs";
-import { filterSeparators, hasSubMenu, isItemHidden, normalizeSelection, isItemSubMenu, isItemDisabled, isItemSeparator } from "./utils.mjs";
-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 { isRightClick } from "../../../helpers/dom/event.mjs";
-import { debounce, isFunction } from "../../../helpers/function.mjs";
-import { isUndefined, isDefined } from "../../../helpers/mixed.mjs";
-import { mixin } from "../../../helpers/object.mjs";
-import localHooks from "../../../mixins/localHooks.mjs";
-import { createMenuItemRenderer } from "./menuItemRenderer.mjs";
-import { A11Y_EXPANDED, A11Y_MENU, A11Y_TABINDEX } from "../../../helpers/a11y.mjs";
+import Cursor from "./cursor.mjs";
+import { SEPARATOR, NO_ITEMS, predefinedItems } from "./predefinedItems.mjs";
+import { filterSeparators, hasSubMenu, isDisabled, isItemHidden, isSeparator, isSelectionDisabled, normalizeSelection } from "./utils.mjs";
+import Core from "../../core.mjs";
+import EventManager from "../../eventManager.mjs";
+import { arrayEach, arrayFilter, arrayReduce } from "../../helpers/array.mjs";
+import { isWindowsOS, isMobileBrowser, isIpadOS } from "../../helpers/browser.mjs";
+import { addClass, empty, fastInnerHTML, isChildOf, isInput, removeClass, getParentWindow, hasClass } 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";
+import { mixin, hasOwnProperty } from "../../helpers/object.mjs";
+import localHooks from "../../mixins/localHooks.mjs";
 const MIN_WIDTH = 215;
+const SHORTCUTS_CONTEXT = 'menu';
+const SHORTCUTS_GROUP = SHORTCUTS_CONTEXT;
 
 /**
  * @typedef MenuOptions
@@ -40,33 +31,12 @@ const MIN_WIDTH = 215;
  * @private
  * @class Menu
  */
-var _navigator = /*#__PURE__*/new WeakMap();
-var _shortcutsCtrl = /*#__PURE__*/new WeakMap();
-export class Menu {
+class Menu {
   /**
    * @param {Core} hotInstance Handsontable instance.
    * @param {MenuOptions} [options] Menu options.
    */
   constructor(hotInstance, options) {
-    var _this = this;
-    /**
-     * The controller module that allows modifying the menu item selection positions.
-     *
-     * @type {Paginator}
-     */
-    _classPrivateFieldInitSpec(this, _navigator, {
-      writable: true,
-      value: void 0
-    });
-    /**
-     * The controller module that allows extending the keyboard shortcuts for the menu.
-     *
-     * @type {KeyboardShortcutsMenuController}
-     */
-    _classPrivateFieldInitSpec(this, _shortcutsCtrl, {
-      writable: true,
-      value: void 0
-    });
     this.hot = hotInstance;
     this.options = options || {
       parent: null,
@@ -79,21 +49,20 @@ export class Menu {
     };
     this.eventManager = new EventManager(this);
     this.container = this.createContainer(this.options.name);
-    this.positioner = new Positioner(this.options.keepInViewport);
     this.hotMenu = null;
     this.hotSubMenus = {};
     this.parentMenu = this.options.parent || null;
     this.menuItems = null;
     this.origOutsideClickDeselects = null;
+    this.keyEvent = false;
+    this.offset = {
+      above: 0,
+      below: 0,
+      left: 0,
+      right: 0
+    };
+    this._afterScrollCallback = null;
     this.registerEvents();
-    if (this.isSubMenu()) {
-      this.addLocalHook('afterSelectionChange', function () {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        return _this.parentMenu.runLocalHooks('afterSelectionChange', ...args);
-      });
-    }
   }
 
   /**
@@ -119,24 +88,6 @@ export class Menu {
     this.menuItems = menuItems;
   }
 
-  /**
-   * Gets the controller object that allows modifying the the menu item selection.
-   *
-   * @returns {Paginator | undefined}
-   */
-  getNavigator() {
-    return _classPrivateFieldGet(this, _navigator);
-  }
-
-  /**
-   * Gets the controller object that allows extending the keyboard shortcuts of the menu.
-   *
-   * @returns {KeyboardShortcutsMenuController | undefined}
-   */
-  getKeyboardShortcutsCtrl() {
-    return _classPrivateFieldGet(this, _shortcutsCtrl);
-  }
-
   /**
    * Returns currently selected menu item. Returns `null` if no item was selected.
    *
@@ -155,6 +106,17 @@ export class Menu {
     return Array.isArray(this.hotMenu.getSelectedLast());
   }
 
+  /**
+   * Set offset menu position for specified area (`above`, `below`, `left` or `right`).
+   *
+   * @param {string} area Specified area name (`above`, `below`, `left` or `right`).
+   * @param {number} offset Offset value.
+   */
+  setOffset(area) {
+    let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    this.offset[area] = offset;
+  }
+
   /**
    * Check if menu is using as sub-menu.
    *
@@ -171,6 +133,7 @@ export class Menu {
    * @fires Hooks#afterContextMenuShow
    */
   open() {
+    var _this = this;
     this.runLocalHooks('beforeOpen');
     this.container.removeAttribute('style');
     this.container.style.display = 'block';
@@ -205,21 +168,16 @@ export class Menu {
       readOnly: true,
       editor: false,
       copyPaste: false,
-      hiddenRows: true,
       maxCols: 1,
       columns: [{
         data: 'name',
-        renderer: createMenuItemRenderer(this.hot)
+        renderer: (hot, TD, row, col, prop, value) => this.menuItemRenderer(hot, TD, row, col, prop, value)
       }],
       renderAllRows: true,
       fragmentSelection: false,
       outsideClickDeselects: false,
       disableVisualSelection: 'area',
       layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr',
-      ariaTags: false,
-      beforeOnCellMouseOver: (event, coords) => {
-        _classPrivateFieldGet(this, _navigator).setCurrentPage(coords.row);
-      },
       afterOnCellMouseOver: (event, coords) => {
         if (this.isAllSubMenusClosed()) {
           delayedOpenSubMenu(coords.row);
@@ -237,13 +195,6 @@ export class Menu {
           this.close(true);
         }
       },
-      afterSelection: (row, column, row2, column2, preventScrolling) => {
-        // do not scroll the viewport when mouse clicks on partially visible menu item
-        if (this.hotMenu.view.isMouseDown()) {
-          preventScrolling.value = true;
-        }
-        this.runLocalHooks('afterSelectionChange', this.getSelectedItem());
-      },
       beforeOnCellMouseUp: event => {
         if (this.hasSelectedItem()) {
           shouldAutoCloseMenu = !this.isCommandPassive(this.getSelectedItem());
@@ -261,7 +212,7 @@ export class Menu {
           // event hides the tapped element, the click event grabs the element below. As a result, the filter
           // by condition menu is closed and immediately open on tapping the "None" item.
           if (isMobileBrowser() || isIpadOS()) {
-            this.hot._registerTimeout(() => this.close(true), 325);
+            setTimeout(() => this.close(true), 325);
           } else {
             this.close(true);
           }
@@ -277,17 +228,120 @@ export class Menu {
     };
     this.origOutsideClickDeselects = this.hot.getSettings().outsideClickDeselects;
     this.hot.getSettings().outsideClickDeselects = false;
-    this.hotMenu = new this.hot.constructor(this.container, settings);
+    this.hotMenu = new Core(this.container, settings);
     this.hotMenu.addHook('afterInit', () => this.onAfterInit());
+    this.hotMenu.addHook('afterSelection', function () {
+      return _this.onAfterSelection(...arguments);
+    });
     this.hotMenu.init();
-    _classPrivateFieldSet(this, _navigator, createMenuNavigator(this.hotMenu));
-    _classPrivateFieldSet(this, _shortcutsCtrl, createKeyboardShortcutsCtrl(this));
-    _classPrivateFieldGet(this, _shortcutsCtrl).listen();
-    this.focus();
-    if (this.isSubMenu()) {
-      this.addLocalHook('afterOpen', () => this.parentMenu.runLocalHooks('afterSubmenuOpen', this));
-    }
-    this.runLocalHooks('afterOpen', this);
+    this.hotMenu.listen();
+    const shortcutManager = this.hotMenu.getShortcutManager();
+    const menuContext = shortcutManager.addContext(SHORTCUTS_GROUP);
+    const config = {
+      group: SHORTCUTS_CONTEXT
+    };
+    const menuContextConfig = {
+      ...config,
+      runOnlyIf: event => isInput(event.target) === false || this.container.contains(event.target) === false
+    };
+
+    // Default shortcuts for Handsontable should not be handled. Changing context will help with that.
+    shortcutManager.setActiveContextName('menu');
+    menuContext.addShortcuts([{
+      keys: [['Escape']],
+      callback: () => {
+        this.keyEvent = true;
+        this.close();
+        this.keyEvent = false;
+      }
+    }, {
+      keys: [['ArrowDown']],
+      callback: () => {
+        const selection = this.hotMenu.getSelectedLast();
+        this.keyEvent = true;
+        if (selection) {
+          this.selectNextCell(selection[0], selection[1]);
+        } else {
+          this.selectFirstCell();
+        }
+        this.keyEvent = false;
+      }
+    }, {
+      keys: [['ArrowUp']],
+      callback: () => {
+        const selection = this.hotMenu.getSelectedLast();
+        this.keyEvent = true;
+        if (selection) {
+          this.selectPrevCell(selection[0], selection[1]);
+        } else {
+          this.selectLastCell();
+        }
+        this.keyEvent = false;
+      }
+    }, {
+      keys: [['ArrowRight']],
+      callback: () => {
+        const selection = this.hotMenu.getSelectedLast();
+        this.keyEvent = true;
+        if (selection) {
+          const menu = this.openSubMenu(selection[0]);
+          if (menu) {
+            menu.selectFirstCell();
+          }
+        }
+        this.keyEvent = false;
+      }
+    }, {
+      keys: [['ArrowLeft']],
+      callback: () => {
+        const selection = this.hotMenu.getSelectedLast();
+        this.keyEvent = true;
+        if (selection && this.isSubMenu()) {
+          this.close();
+          if (this.parentMenu) {
+            this.parentMenu.hotMenu.listen();
+          }
+        }
+        this.keyEvent = false;
+      }
+    }, {
+      keys: [['Enter']],
+      callback: event => {
+        const selection = this.hotMenu.getSelectedLast();
+        this.keyEvent = true;
+        if (!this.hotMenu.getSourceDataAtRow(selection[0]).submenu) {
+          this.executeCommand(event);
+          this.close(true);
+        }
+        this.keyEvent = false;
+      }
+    }, {
+      keys: [['PageUp']],
+      callback: () => {
+        const selection = this.hotMenu.getSelectedLast();
+        this.keyEvent = true;
+        if (selection) {
+          this.hotMenu.selection.transformStart(-this.hotMenu.countVisibleRows(), 0);
+        } else {
+          this.selectFirstCell();
+        }
+        this.keyEvent = false;
+      }
+    }, {
+      keys: [['PageDown']],
+      callback: () => {
+        const selection = this.hotMenu.getSelectedLast();
+        this.keyEvent = true;
+        if (selection) {
+          this.hotMenu.selection.transformStart(this.hotMenu.countVisibleRows(), 0);
+        } else {
+          this.selectLastCell();
+        }
+        this.keyEvent = false;
+      }
+    }], menuContextConfig);
+    this.blockMainTableCallbacks();
+    this.runLocalHooks('afterOpen');
   }
 
   /**
@@ -300,24 +354,17 @@ export class Menu {
     if (!this.isOpened()) {
       return;
     }
-    if (closeParent && this.isSubMenu()) {
+    if (closeParent && this.parentMenu) {
       this.parentMenu.close();
     } else {
-      _classPrivateFieldGet(this, _navigator).clear();
       this.closeAllSubMenus();
       this.container.style.display = 'none';
+      this.releaseMainTableCallbacks();
       this.hotMenu.destroy();
       this.hotMenu = null;
       this.hot.getSettings().outsideClickDeselects = this.origOutsideClickDeselects;
       this.runLocalHooks('afterClose');
-      if (this.isSubMenu()) {
-        if (this.hot.getSettings().ariaTags) {
-          const selection = this.parentMenu.hotMenu.getSelectedLast();
-          if (selection) {
-            const cell = this.parentMenu.hotMenu.getCell(selection[0], 0);
-            setAttribute(cell, [A11Y_EXPANDED(false)]);
-          }
-        }
+      if (this.parentMenu) {
         this.parentMenu.hotMenu.listen();
       }
     }
@@ -350,11 +397,6 @@ export class Menu {
     subMenu.open();
     subMenu.setPosition(cell.getBoundingClientRect());
     this.hotSubMenus[dataItem.key] = subMenu;
-
-    // Update the accessibility tags on the cell being the base for the submenu.
-    if (this.hot.getSettings().ariaTags) {
-      setAttribute(cell, [A11Y_EXPANDED(true)]);
-    }
     return subMenu;
   }
 
@@ -369,12 +411,6 @@ export class Menu {
     if (menus) {
       menus.destroy();
       delete this.hotSubMenus[dataItem.key];
-      const cell = this.hotMenu.getCell(row, 0);
-
-      // Update the accessibility tags on the cell being the base for the submenu.
-      if (this.hot.getSettings().ariaTags) {
-        setAttribute(cell, [A11Y_EXPANDED(false)]);
-      }
     }
   }
 
@@ -394,19 +430,6 @@ export class Menu {
     return Object.keys(this.hotSubMenus).length === 0;
   }
 
-  /**
-   * Focus the menu so all keyboard shortcuts become active.
-   */
-  focus() {
-    if (this.isOpened()) {
-      this.hotMenu.rootElement.focus({
-        preventScroll: true
-      });
-      this.getKeyboardShortcutsCtrl().listen();
-      this.hotMenu.listen();
-    }
-  }
-
   /**
    * Destroy instance.
    */
@@ -466,30 +489,252 @@ export class Menu {
    * @returns {boolean}
    */
   isCommandPassive(commandDescriptor) {
-    return commandDescriptor.isCommand === false || isItemSeparator(commandDescriptor) || isItemDisabled(commandDescriptor, this.hot) || isItemSubMenu(commandDescriptor);
+    const {
+      isCommand,
+      name: commandName,
+      disabled,
+      submenu
+    } = commandDescriptor;
+    const isItemDisabled = disabled === true || typeof disabled === 'function' && disabled.call(this.hot) === true;
+    return isCommand === false || commandName === SEPARATOR || isItemDisabled === true || submenu;
   }
 
   /**
-   * Set offset menu position for specified area (`above`, `below`, `left` or `right`).
+   * Set menu position based on dom event or based on literal object.
    *
-   * @param {string} area Specified area name (`above`, `below`, `left` or `right`).
-   * @param {number} offset Offset value.
+   * @param {Event|object} coords Event or literal Object with coordinates.
    */
-  setOffset(area) {
-    let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    this.positioner.setOffset(area, offset);
+  setPosition(coords) {
+    const cursor = new Cursor(coords, this.container.ownerDocument.defaultView);
+    if (this.options.keepInViewport) {
+      if (cursor.fitsBelow(this.container)) {
+        this.setPositionBelowCursor(cursor);
+      } else if (cursor.fitsAbove(this.container)) {
+        this.setPositionAboveCursor(cursor);
+      } else {
+        this.setPositionBelowCursor(cursor);
+      }
+      if (this.hot.isLtr()) {
+        this.setHorizontalPositionForLtr(cursor);
+      } else {
+        this.setHorizontalPositionForRtl(cursor);
+      }
+    } else {
+      this.setPositionBelowCursor(cursor);
+      this.setPositionOnRightOfCursor(cursor);
+    }
   }
 
   /**
-   * Set menu position based on dom event or based on literal object.
+   * Set menu horizontal position for RTL mode.
    *
-   * @param {Event|object} coords Event or literal Object with coordinates.
+   * @param {Cursor} cursor `Cursor` object.
    */
-  setPosition(coords) {
+  setHorizontalPositionForRtl(cursor) {
+    if (cursor.fitsOnLeft(this.container)) {
+      this.setPositionOnLeftOfCursor(cursor);
+    } else {
+      this.setPositionOnRightOfCursor(cursor);
+    }
+  }
+
+  /**
+   * Set menu horizontal position for LTR mode.
+   *
+   * @param {Cursor} cursor `Cursor` object.
+   */
+  setHorizontalPositionForLtr(cursor) {
+    if (cursor.fitsOnRight(this.container)) {
+      this.setPositionOnRightOfCursor(cursor);
+    } else {
+      this.setPositionOnLeftOfCursor(cursor);
+    }
+  }
+
+  /**
+   * Set menu position above cursor object.
+   *
+   * @param {Cursor} cursor `Cursor` object.
+   */
+  setPositionAboveCursor(cursor) {
+    let top = this.offset.above + cursor.top - this.container.offsetHeight;
+    if (this.isSubMenu()) {
+      top = cursor.top + cursor.cellHeight - this.container.offsetHeight + 3;
+    }
+    this.container.style.top = `${top}px`;
+  }
+
+  /**
+   * Set menu position below cursor object.
+   *
+   * @param {Cursor} cursor `Cursor` object.
+   */
+  setPositionBelowCursor(cursor) {
+    let top = this.offset.below + cursor.top + 1;
+    if (this.isSubMenu()) {
+      top = cursor.top - 1;
+    }
+    this.container.style.top = `${top}px`;
+  }
+
+  /**
+   * Set menu position on the right of cursor object.
+   *
+   * @param {Cursor} cursor `Cursor` object.
+   */
+  setPositionOnRightOfCursor(cursor) {
+    let left = cursor.left;
+    if (this.isSubMenu()) {
+      const {
+        right: parentMenuRight
+      } = this.parentMenu.container.getBoundingClientRect();
+
+      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
+      left += cursor.cellWidth + parentMenuRight - (cursor.left + cursor.cellWidth);
+    } else {
+      left += this.offset.right;
+    }
+    this.container.style.left = `${left}px`;
+  }
+
+  /**
+   * Set menu position on the left of cursor object.
+   *
+   * @param {Cursor} cursor `Cursor` object.
+   */
+  setPositionOnLeftOfCursor(cursor) {
+    let left = this.offset.left + cursor.left - this.container.offsetWidth;
     if (this.isSubMenu()) {
-      this.positioner.setParentElement(this.parentMenu.container);
+      const {
+        left: parentMenuLeft
+      } = this.parentMenu.container.getBoundingClientRect();
+
+      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
+      left -= cursor.left - parentMenuLeft;
+    }
+    this.container.style.left = `${left}px`;
+  }
+
+  /**
+   * Select first cell in opened menu.
+   */
+  selectFirstCell() {
+    const cell = this.hotMenu.getCell(0, 0);
+    if (isSeparator(cell) || isDisabled(cell) || isSelectionDisabled(cell)) {
+      this.selectNextCell(0, 0);
+    } else {
+      this.hotMenu.selectCell(0, 0);
+    }
+  }
+
+  /**
+   * Select last cell in opened menu.
+   */
+  selectLastCell() {
+    const lastRow = this.hotMenu.countRows() - 1;
+    const cell = this.hotMenu.getCell(lastRow, 0);
+    if (isSeparator(cell) || isDisabled(cell) || isSelectionDisabled(cell)) {
+      this.selectPrevCell(lastRow, 0);
+    } else {
+      // disable default "scroll-to-cell" option and instead of that...
+      this.hotMenu.selectCell(lastRow, 0, undefined, undefined, false);
+      // ...scroll to the cell with "snap to the bottom" option
+      this.hotMenu.scrollViewportTo(lastRow, 0, true, false);
+    }
+  }
+
+  /**
+   * Select next cell in opened menu.
+   *
+   * @param {number} row Row index.
+   * @param {number} col Column index.
+   */
+  selectNextCell(row, col) {
+    const nextRow = row + 1;
+    const cell = nextRow < this.hotMenu.countRows() ? this.hotMenu.getCell(nextRow, col) : null;
+    if (!cell) {
+      return;
+    }
+    if (isSeparator(cell) || isDisabled(cell) || isSelectionDisabled(cell)) {
+      this.selectNextCell(nextRow, col);
+    } else {
+      this.hotMenu.selectCell(nextRow, col);
+    }
+  }
+
+  /**
+   * Select previous cell in opened menu.
+   *
+   * @param {number} row Row index.
+   * @param {number} col Column index.
+   */
+  selectPrevCell(row, col) {
+    const prevRow = row - 1;
+    const cell = prevRow >= 0 ? this.hotMenu.getCell(prevRow, col) : null;
+    if (!cell) {
+      return;
+    }
+    if (isSeparator(cell) || isDisabled(cell) || isSelectionDisabled(cell)) {
+      this.selectPrevCell(prevRow, col);
+    } else {
+      this.hotMenu.selectCell(prevRow, col);
+    }
+  }
+
+  /**
+   * Menu item renderer.
+   *
+   * @private
+   * @param {Core} hot The Handsontable instance.
+   * @param {HTMLCellElement} TD The rendered cell element.
+   * @param {number} row The visual index.
+   * @param {number} col The visual index.
+   * @param {string} prop The column property if used.
+   * @param {string} value The cell value.
+   */
+  menuItemRenderer(hot, TD, row, col, prop, value) {
+    const item = hot.getSourceDataAtRow(row);
+    const wrapper = this.hot.rootDocument.createElement('div');
+    const isSubMenu = itemToTest => hasOwnProperty(itemToTest, 'submenu');
+    const itemIsSeparator = itemToTest => new RegExp(SEPARATOR, 'i').test(itemToTest.name);
+    const itemIsDisabled = itemToTest => itemToTest.disabled === true || typeof itemToTest.disabled === 'function' && itemToTest.disabled.call(this.hot) === true;
+    const itemIsSelectionDisabled = itemToTest => itemToTest.disableSelection;
+    let itemValue = value;
+    if (typeof itemValue === 'function') {
+      itemValue = itemValue.call(this.hot);
+    }
+    empty(TD);
+    addClass(wrapper, 'htItemWrapper');
+    TD.appendChild(wrapper);
+    if (itemIsSeparator(item)) {
+      addClass(TD, 'htSeparator');
+    } else if (typeof item.renderer === 'function') {
+      addClass(TD, 'htCustomMenuRenderer');
+      TD.appendChild(item.renderer(hot, wrapper, row, col, prop, itemValue));
+    } else {
+      fastInnerHTML(wrapper, itemValue);
+    }
+    if (itemIsDisabled(item)) {
+      addClass(TD, 'htDisabled');
+      this.eventManager.addEventListener(TD, 'mouseenter', () => hot.deselectCell());
+    } else if (itemIsSelectionDisabled(item)) {
+      addClass(TD, 'htSelectionDisabled');
+      this.eventManager.addEventListener(TD, 'mouseenter', () => hot.deselectCell());
+    } else if (isSubMenu(item)) {
+      addClass(TD, 'htSubmenu');
+      if (itemIsSelectionDisabled(item)) {
+        this.eventManager.addEventListener(TD, 'mouseenter', () => hot.deselectCell());
+      } else {
+        this.eventManager.addEventListener(TD, 'mouseenter', () => hot.selectCell(row, col, void 0, void 0, false, false));
+      }
+    } else {
+      removeClass(TD, ['htSubmenu', 'htDisabled']);
+      if (itemIsSelectionDisabled(item)) {
+        this.eventManager.addEventListener(TD, 'mouseenter', () => hot.deselectCell());
+      } else {
+        this.eventManager.addEventListener(TD, 'mouseenter', () => hot.selectCell(row, col, void 0, void 0, false, false));
+      }
     }
-    this.positioner.setElement(this.container).updatePosition(coords);
   }
 
   /**
@@ -528,6 +773,26 @@ export class Menu {
     return container;
   }
 
+  /**
+   * @private
+   */
+  blockMainTableCallbacks() {
+    this._afterScrollCallback = function () {};
+    this.hot.addHook('afterScrollVertically', this._afterScrollCallback);
+    this.hot.addHook('afterScrollHorizontally', this._afterScrollCallback);
+  }
+
+  /**
+   * @private
+   */
+  releaseMainTableCallbacks() {
+    if (this._afterScrollCallback) {
+      this.hot.removeHook('afterScrollVertically', this._afterScrollCallback);
+      this.hot.removeHook('afterScrollHorizontally', this._afterScrollCallback);
+      this._afterScrollCallback = null;
+    }
+  }
+
   /**
    * On after init listener.
    *
@@ -547,10 +812,20 @@ export class Menu {
     holderStyle.width = `${currentHiderWidth + 3}px`;
     holderStyle.height = `${realHeight + 3}px`;
     hiderStyle.height = holderStyle.height;
+  }
 
-    // Replace the default accessibility tags with the context menu's
-    if (this.hot.getSettings().ariaTags) {
-      setAttribute(this.hotMenu.rootElement, [A11Y_MENU(), A11Y_TABINDEX(-1)]);
+  /**
+   * On after selection listener.
+   *
+   * @param {number} r Selection start row index.
+   * @param {number} c Selection start column index.
+   * @param {number} r2 Selection end row index.
+   * @param {number} c2 Selection end column index.
+   * @param {object} preventScrolling Object with `value` property where its value change will be observed.
+   */
+  onAfterSelection(r, c, r2, c2, preventScrolling) {
+    if (this.keyEvent === false) {
+      preventScrolling.value = true;
     }
   }
 
@@ -590,4 +865,5 @@ export class Menu {
     }
   }
 }
-mixin(Menu, localHooks);
+mixin(Menu, localHooks);
+export default Menu;